/* ==========================================================================
   ZYNGLE — CORE
   Tokens, reset, typography, layout, header, footer, base components.
   Loaded on every page. Everything else is conditional.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   Drop the .woff2 files into assets/fonts/ and these rules pick them up.
   If a file is missing the family simply fails to load and the stack falls
   through to the system face — nothing breaks.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: "Clash Grotesk";
	src: url("../fonts/ClashGrotesk-Variable.woff2") format("woff2-variations");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Switzer";
	src: url("../fonts/Switzer-Variable.woff2") format("woff2-variations");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
	/* Palette. Indigo ink and lime plaster, with marigold as the single accent.
	   Marigold appears in five places only: focus rings, the active nav mark,
	   inline link underlines, the highlighted route in the hero plan, and the
	   unit mark on a verified metric. Nowhere else. */
	--zg-ink: #111a33;
	--zg-ink-deep: #0b1226;
	--zg-plaster: #ecede9;
	--zg-paper: #f7f8f6;
	--zg-marigold: #e2a03c;
	--zg-slate: #5c6478;
	--zg-muted: #8c93a3;
	--zg-rule: rgba(17, 26, 51, 0.12);
	--zg-rule-strong: rgba(17, 26, 51, 0.22);
	--zg-rule-inverse: rgba(236, 237, 233, 0.16);
	--zg-rule-inverse-strong: rgba(236, 237, 233, 0.32);

	/* Functional. Forms and admin feedback only. */
	--zg-success: #2e7d5b;
	--zg-warning: #b8791c;
	--zg-error: #b23a32;

	/* Semantic — remapped per ground, see [data-zg-ground]. */
	--zg-bg: var(--zg-plaster);
	--zg-surface: var(--zg-paper);
	--zg-text: var(--zg-ink);
	--zg-text-secondary: var(--zg-slate);
	--zg-text-muted: var(--zg-muted);
	--zg-border: var(--zg-rule);
	--zg-border-strong: var(--zg-rule-strong);
	--zg-accent: var(--zg-marigold);

	/* Type */
	--zg-font-display: "Clash Grotesk", "Switzer", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--zg-font-body: "Switzer", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--zg-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Roboto Mono", monospace;

	--zg-text-display: clamp(2.75rem, 1.6rem + 5.2vw, 6.25rem);
	--zg-text-h1: clamp(2.25rem, 1.5rem + 3.4vw, 4rem);
	--zg-text-h2: clamp(1.75rem, 1.3rem + 2.1vw, 2.75rem);
	--zg-text-h3: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
	--zg-text-h4: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
	--zg-text-lg: 1.125rem;
	--zg-text-body: 1rem;
	--zg-text-sm: 0.9375rem;
	--zg-text-caption: 0.8125rem;
	--zg-text-label: 0.75rem;

	/* Space — 4px base, non-linear at the top. */
	--zg-1: 0.25rem;
	--zg-2: 0.5rem;
	--zg-3: 0.75rem;
	--zg-4: 1rem;
	--zg-6: 1.5rem;
	--zg-8: 2rem;
	--zg-12: 3rem;
	--zg-16: 4rem;
	--zg-24: 6rem;
	--zg-32: 8rem;
	--zg-44: 11rem;
	--zg-section-y: clamp(5rem, 3rem + 8vw, 10rem);

	/* Layout */
	--zg-container: 1280px;
	--zg-container-wide: 1440px;
	--zg-container-reading: 720px;
	--zg-gutter: clamp(1rem, 0.5rem + 2vw, 1.5rem);
	--zg-header-height: 72px;

	/* Radius — deliberately tiny. Premium comes from alignment, not rounding. */
	--zg-radius-xs: 2px;
	--zg-radius-sm: 4px;
	--zg-radius-pill: 999px;

	/* Elevation — one shadow, for overlays only. */
	--zg-shadow-overlay: 0 24px 48px -12px rgba(11, 18, 38, 0.24);

	/* Motion */
	--zg-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--zg-duration-fast: 150ms;
	--zg-duration: 250ms;
	--zg-duration-slow: 400ms;
}

/* The three-act structure. One attribute swaps the semantic tokens and every
   component inside adapts — no inverse variants, no duplicated components. */
[data-zg-ground="ink"] {
	--zg-bg: var(--zg-ink);
	--zg-surface: var(--zg-ink-deep);
	--zg-text: var(--zg-plaster);
	--zg-text-secondary: rgba(236, 237, 233, 0.68);
	--zg-text-muted: rgba(236, 237, 233, 0.48);
	--zg-border: var(--zg-rule-inverse);
	--zg-border-strong: var(--zg-rule-inverse-strong);
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */

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

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

@media (min-width: 1600px) {
	html { font-size: 17px; }
}

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

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }

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

:where(.zg-prose) a {
	text-decoration: underline;
	text-decoration-color: var(--zg-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: text-decoration-color var(--zg-duration-fast) var(--zg-ease);
}

:where(.zg-prose) a:hover { text-decoration-color: currentColor; }

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

::selection { background: var(--zg-accent); color: var(--zg-ink); }

.zg-skip-link {
	position: absolute;
	top: -100%;
	left: var(--zg-4);
	z-index: 200;
	padding: var(--zg-3) var(--zg-4);
	background: var(--zg-ink);
	color: var(--zg-plaster);
	border-radius: var(--zg-radius-sm);
}

.zg-skip-link:focus { top: var(--zg-4); }

.zg-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */

.zg-display,
.zg-h1,
.zg-h2,
.zg-h3 {
	font-family: var(--zg-font-display);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.zg-display { font-size: var(--zg-text-display); line-height: 0.95; letter-spacing: -0.035em; }
.zg-h1 { font-size: var(--zg-text-h1); }
.zg-h2 { font-size: var(--zg-text-h2); line-height: 1.08; }
.zg-h3 { font-size: var(--zg-text-h3); line-height: 1.2; letter-spacing: -0.015em; }

.zg-h4 {
	font-family: var(--zg-font-body);
	font-size: var(--zg-text-h4);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.005em;
}

.zg-lead {
	font-size: var(--zg-text-lg);
	line-height: 1.55;
	color: var(--zg-text-secondary);
	max-width: 46ch;
	text-wrap: pretty;
}

.zg-body-sm { font-size: var(--zg-text-sm); }
.zg-caption { font-size: var(--zg-text-caption); color: var(--zg-text-muted); }

/* Eyebrows use letterspaced small-caps, not monospace. Monospace is reserved
   for content that is actually data — see .zg-mono below. */
.zg-eyebrow {
	display: block;
	font-size: var(--zg-text-label);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--zg-text-muted);
}

.zg-mono {
	font-family: var(--zg-font-mono);
	font-size: var(--zg-text-caption);
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.zg-prose { max-width: 68ch; }
.zg-prose > * + * { margin-top: var(--zg-6); }
.zg-prose h2 { font-family: var(--zg-font-display); font-size: var(--zg-text-h3); font-weight: 500; letter-spacing: -0.02em; margin-top: var(--zg-12); }
.zg-prose h3 { font-size: var(--zg-text-h4); font-weight: 600; margin-top: var(--zg-8); }
.zg-prose ul, .zg-prose ol { padding-left: var(--zg-6); }
.zg-prose li + li { margin-top: var(--zg-2); }
.zg-prose blockquote {
	border-left: 2px solid var(--zg-accent);
	padding-left: var(--zg-6);
	font-size: var(--zg-text-lg);
	color: var(--zg-text-secondary);
}
.zg-prose img { border-radius: var(--zg-radius-sm); }
.zg-prose code {
	font-family: var(--zg-font-mono);
	font-size: 0.9em;
	background: var(--zg-surface);
	border: 1px solid var(--zg-border);
	border-radius: var(--zg-radius-xs);
	padding: 0.1em 0.35em;
}

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */

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

.zg-container--wide { max-width: var(--zg-container-wide); }
.zg-container--reading { max-width: var(--zg-container-reading); }

.zg-section {
	padding-block: var(--zg-section-y);
	background: var(--zg-bg);
	color: var(--zg-text);
	position: relative;
}

.zg-section--tight { padding-block: calc(var(--zg-section-y) * 0.55); }

.zg-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--zg-gutter);
}

@media (max-width: 900px) {
	.zg-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

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

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

/* Section header — one component, used by every section on the site. */
.zg-section-header { display: grid; gap: var(--zg-4); max-width: 62ch; }
.zg-section-header--split {
	max-width: none;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
	gap: var(--zg-8);
	align-items: end;
}

@media (max-width: 780px) {
	.zg-section-header--split { grid-template-columns: 1fr; align-items: start; }
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.zg-button {
	display: inline-flex;
	align-items: center;
	gap: var(--zg-2);
	padding: 0.75rem 1.25rem;
	border: 1px solid transparent;
	border-radius: var(--zg-radius-sm);
	font-size: var(--zg-text-sm);
	font-weight: 600;
	letter-spacing: -0.005em;
	cursor: pointer;
	transition: background-color var(--zg-duration-fast) var(--zg-ease),
		border-color var(--zg-duration-fast) var(--zg-ease),
		color var(--zg-duration-fast) var(--zg-ease),
		transform var(--zg-duration) var(--zg-ease);
}

.zg-button:hover { transform: translateY(-1px); }
.zg-button:active { transform: translateY(0); }

.zg-button--primary { background: var(--zg-text); color: var(--zg-bg); }
.zg-button--primary:hover { background: var(--zg-accent); color: var(--zg-ink); }

.zg-button--secondary { border-color: var(--zg-border-strong); color: var(--zg-text); }
.zg-button--secondary:hover { border-color: var(--zg-text); }

.zg-button--ghost { padding-inline: 0; color: var(--zg-text); }
.zg-button--ghost:hover { color: var(--zg-accent); }

.zg-button--lg { padding: 0.9rem 1.5rem; font-size: var(--zg-text-body); }

.zg-button__icon { width: 14px; height: 14px; flex: none; transition: transform var(--zg-duration) var(--zg-ease); }
.zg-button:hover .zg-button__icon { transform: translate(2px, -2px); }

.zg-actions { display: flex; flex-wrap: wrap; gap: var(--zg-3); align-items: center; }

/* --------------------------------------------------------------------------
   7. Header & navigation
   -------------------------------------------------------------------------- */

.zg-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--zg-bg);
	border-bottom: 1px solid var(--zg-border);
	transition: background-color var(--zg-duration) var(--zg-ease);
}

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

.zg-logo {
	display: inline-flex;
	align-items: center;
	gap: var(--zg-2);
	font-family: var(--zg-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.03em;
}

.zg-logo__mark { width: 22px; height: 22px; flex: none; }
.zg-logo img { max-height: 32px; width: auto; }

.zg-nav { display: flex; align-items: center; gap: var(--zg-6); }
.zg-nav__list { display: flex; align-items: center; gap: var(--zg-6); list-style: none; }

.zg-nav__link {
	position: relative;
	display: inline-block;
	padding-block: var(--zg-2);
	font-size: var(--zg-text-sm);
	color: var(--zg-text-secondary);
	transition: color var(--zg-duration-fast) var(--zg-ease);
}

.zg-nav__link:hover { color: var(--zg-text); }

.zg-nav__list .current-menu-item > .zg-nav__link,
.zg-nav__list .current_page_item > .zg-nav__link,
.zg-nav__link[aria-current="page"] { color: var(--zg-text); }

.zg-nav__list .current-menu-item > .zg-nav__link::after,
.zg-nav__list .current_page_item > .zg-nav__link::after,
.zg-nav__link[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--zg-accent);
}

.zg-header__actions { display: flex; align-items: center; gap: var(--zg-3); }

.zg-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: none;
	border: 1px solid var(--zg-border);
	border-radius: var(--zg-radius-sm);
	cursor: pointer;
}

.zg-nav-toggle__bar {
	position: relative;
	display: block;
	width: 18px;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--zg-duration) var(--zg-ease), background-color var(--zg-duration-fast);
}

.zg-nav-toggle__bar::before,
.zg-nav-toggle__bar::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--zg-duration) var(--zg-ease);
}

.zg-nav-toggle__bar::before { top: -6px; }
.zg-nav-toggle__bar::after { top: 6px; }

.zg-nav-toggle[aria-expanded="true"] .zg-nav-toggle__bar { background: transparent; }
.zg-nav-toggle[aria-expanded="true"] .zg-nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
.zg-nav-toggle[aria-expanded="true"] .zg-nav-toggle__bar::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
	.zg-nav-toggle { display: inline-flex; }

	.zg-nav {
		position: fixed;
		inset: var(--zg-header-height) 0 0;
		display: block;
		padding: var(--zg-8) var(--zg-gutter) var(--zg-24);
		background: var(--zg-bg);
		overflow-y: auto;
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--zg-duration) var(--zg-ease), transform var(--zg-duration) var(--zg-ease), visibility var(--zg-duration);
	}

	.zg-nav[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }

	.zg-nav__list { display: block; }

	.zg-nav__list li { border-bottom: 1px solid var(--zg-border); }

	.zg-nav__link {
		display: block;
		padding: var(--zg-4) 0;
		font-family: var(--zg-font-display);
		font-size: var(--zg-text-h3);
		color: var(--zg-text);
	}

	.zg-header__actions .zg-button--primary { display: none; }
}

/* Persistent contact bar below 780px — the CTA is never more than a thumb away. */
.zg-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	display: none;
	gap: var(--zg-2);
	padding: var(--zg-3) var(--zg-gutter) calc(var(--zg-3) + env(safe-area-inset-bottom));
	background: var(--zg-ink);
	border-top: 1px solid var(--zg-rule-inverse);
}

.zg-sticky-cta .zg-button { flex: 1; justify-content: center; }

@media (max-width: 780px) {
	.zg-sticky-cta { display: flex; }
	body { padding-bottom: 76px; }
}

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */

.zg-footer { background: var(--zg-ink-deep); color: var(--zg-plaster); padding-block: var(--zg-24) var(--zg-8); }
.zg-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--zg-8); }

@media (max-width: 900px) { .zg-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .zg-footer__grid { grid-template-columns: 1fr; } }

.zg-footer__heading { font-size: var(--zg-text-label); text-transform: uppercase; letter-spacing: 0.09em; color: rgba(236, 237, 233, 0.48); margin-bottom: var(--zg-4); }
.zg-footer__list { list-style: none; display: grid; gap: var(--zg-2); }
.zg-footer__list a { font-size: var(--zg-text-sm); color: rgba(236, 237, 233, 0.72); transition: color var(--zg-duration-fast) var(--zg-ease); }
.zg-footer__list a:hover { color: var(--zg-plaster); }

.zg-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--zg-4);
	margin-top: var(--zg-16);
	padding-top: var(--zg-6);
	border-top: 1px solid var(--zg-rule-inverse);
	font-size: var(--zg-text-caption);
	color: rgba(236, 237, 233, 0.48);
}

/* --------------------------------------------------------------------------
   9. Forms
   -------------------------------------------------------------------------- */

.zg-field { display: grid; gap: var(--zg-2); }

.zg-field__label {
	font-family: var(--zg-font-mono);
	font-size: var(--zg-text-label);
	letter-spacing: 0.02em;
	color: var(--zg-text-secondary);
}

.zg-field__required { color: var(--zg-accent); }

.zg-input,
.zg-textarea,
.zg-select {
	width: 100%;
	padding: 0.7rem 0.85rem;
	background: var(--zg-surface);
	border: 1px solid var(--zg-border-strong);
	border-radius: var(--zg-radius-xs);
	color: var(--zg-text);
	font-family: inherit;
	font-size: var(--zg-text-sm);
	transition: border-color var(--zg-duration-fast) var(--zg-ease);
}

.zg-input:hover, .zg-textarea:hover, .zg-select:hover { border-color: var(--zg-text-muted); }
.zg-input:focus, .zg-textarea:focus, .zg-select:focus { border-color: var(--zg-accent); outline-offset: 1px; }
.zg-textarea { min-height: 140px; resize: vertical; }

.zg-select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
	background-size: 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2.5rem;
}

.zg-checkbox { display: flex; align-items: flex-start; gap: var(--zg-3); font-size: var(--zg-text-caption); color: var(--zg-text-secondary); }
.zg-checkbox input { margin-top: 3px; accent-color: var(--zg-accent); }

.zg-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.zg-form__notice {
	padding: var(--zg-4);
	border: 1px solid var(--zg-border-strong);
	border-left-width: 2px;
	border-radius: var(--zg-radius-xs);
	font-size: var(--zg-text-sm);
}

.zg-form__notice--ok { border-left-color: var(--zg-success); }
.zg-form__notice--error { border-left-color: var(--zg-error); }
.zg-form__notice[hidden] { display: none; }

/* --------------------------------------------------------------------------
   10. Shared components
   -------------------------------------------------------------------------- */

/* Metric — mono value, marigold unit. Only verified numbers reach this. */
.zg-metric { display: grid; gap: var(--zg-1); }
.zg-metric__value {
	font-family: var(--zg-font-display);
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}
.zg-metric__unit { color: var(--zg-accent); }
.zg-metric__label { font-size: var(--zg-text-caption); color: var(--zg-text-secondary); }
.zg-metric__context { font-size: var(--zg-text-caption); color: var(--zg-text-muted); }

.zg-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--zg-8); }

/* Inline icon from the sprite. One stroke weight, one grid. */
.zg-icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; }

/* Tag list — mono, because it is data. */
.zg-tags { display: flex; flex-wrap: wrap; gap: var(--zg-2); list-style: none; }
.zg-tags li {
	font-family: var(--zg-font-mono);
	font-size: var(--zg-text-label);
	padding: 0.25rem 0.55rem;
	border: 1px solid var(--zg-border);
	border-radius: var(--zg-radius-xs);
	color: var(--zg-text-secondary);
}

/* Marquee — pauses on hover and stops entirely under reduced motion. */
.zg-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.zg-marquee__track { display: flex; width: max-content; gap: var(--zg-8); animation: zg-marquee 42s linear infinite; }
.zg-marquee:hover .zg-marquee__track { animation-play-state: paused; }
.zg-marquee__item {
	display: flex;
	align-items: center;
	gap: var(--zg-2);
	font-family: var(--zg-font-mono);
	font-size: var(--zg-text-caption);
	color: var(--zg-text-muted);
	white-space: nowrap;
}
.zg-marquee__item::before { content: ""; width: 4px; height: 4px; background: var(--zg-border-strong); }

@keyframes zg-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-50% - var(--zg-8) / 2)); }
}

/* Breadcrumb */
.zg-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--zg-2); font-size: var(--zg-text-caption); color: var(--zg-text-muted); }
.zg-breadcrumb a:hover { color: var(--zg-text); }
.zg-breadcrumb__sep { opacity: 0.5; }

/* Scroll reveal */
[data-zg-reveal] {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--zg-duration-slow) var(--zg-ease), transform var(--zg-duration-slow) var(--zg-ease);
	transition-delay: var(--zg-reveal-delay, 0ms);
}

[data-zg-reveal].is-revealed { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   11. Reduced motion
   The site is designed to be complete without motion, not degraded by its
   absence. Everything below is a hard stop, not a shortened duration.
   -------------------------------------------------------------------------- */

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

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

	[data-zg-reveal] { opacity: 1; transform: none; }
	.zg-marquee__track { animation: none; flex-wrap: wrap; width: 100%; }
	.zg-button:hover { transform: none; }
}