:root {
	--color-primary: #1e3d59;
	--color-secondary: #f4f1ea;
	--color-accent: #5c7f71;
	--color-highlight: #b86b4c;
	--color-text: #2a2a2a;
	--color-muted: #57534e;
	--color-surface: #fffcf7;
	--color-border: rgba(30, 61, 89, 0.13);
	--font-display: "Cormorant Garamond", "Times New Roman", serif;
	--font-body: "Plus Jakarta Sans", system-ui, sans-serif;
	--space-3xs: 0.25rem;
	--space-2xs: 0.45rem;
	--space-xs: 0.65rem;
	--space-sm: 0.85rem;
	--space-md: 1.15rem;
	--space-lg: 1.65rem;
	--space-xl: 2.35rem;
	--space-2xl: 3.15rem;
	--radius-sm: 0.55rem;
	--radius-md: 0.85rem;
	--radius-lg: 1.15rem;
	--shadow-sm: 0 0.15rem 0.55rem rgba(42, 42, 42, 0.07);
	--shadow-md: 0 0.4rem 1.25rem rgba(30, 61, 89, 0.11);
	--transition-fast: 0.18s ease;
	--transition-med: 0.35s ease;
	--header-h: 3.35rem;
	--z-mobile: 900;
	--z-toggle: 901;
	--z-header-open: 920;
	--z-overlay: 950;
}

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: clamp(0.82rem, 0.78rem + 0.35vw, 0.95rem);
	line-height: 1.55;
	color: var(--color-text);
	background: var(--color-secondary);
}

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

a {
	color: var(--color-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18rem;
	transition: color var(--transition-fast), background-color var(--transition-fast);
}

a:hover,
a:focus-visible {
	color: var(--color-highlight);
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--color-primary);
	margin: 0 0 var(--space-xs);
}

h1 {
	font-size: clamp(1.45rem, 1.05rem + 2.1vw, 2.35rem);
}

h2, .section-title {
	font-size: clamp(1.1rem, 0.95rem + 0.65vw, 1.55rem);
}

h3, .card-title {
	font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.2rem);
}

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

ul {
	margin: 0;
	padding-left: 1.15rem;
}

.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;
}

.container {
	width: min(1120px, 92vw);
	margin-inline: auto;
}

.container.narrow {
	width: min(820px, 92vw);
}

.site-header {
	position: relative;
	z-index: 2;
	border-bottom: 1px solid var(--color-border);
	background: color-mix(in srgb, var(--color-secondary) 88%, white);
	transition: transform var(--transition-med), box-shadow var(--transition-med);
}

.site-header.menu-open-state {
	z-index: var(--z-header-open);
}

.site-header.header-hidden {
	transform: translateY(-105%);
	box-shadow: var(--shadow-md);
}

.header-inner {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: var(--space-sm);
	min-height: var(--header-h);
	padding-inline: clamp(var(--space-sm), 3vw, var(--space-lg));
	background: color-mix(in srgb, var(--color-secondary) 88%, white);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.brand-logo {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	text-decoration: none;
	color: var(--color-primary);
	font-weight: 600;
	font-size: clamp(0.78rem, 0.72rem + 0.35vw, 0.95rem);
}

.brand-logo:hover,
.brand-logo:focus-visible {
	color: var(--color-highlight);
}

.brand-mark {
	width: clamp(1.55rem, 1.2rem + 1vw, 2rem);
	height: clamp(1.55rem, 1.2rem + 1vw, 2rem);
	border-radius: var(--radius-md);
	background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
	box-shadow: var(--shadow-sm);
	flex-shrink: 0;
}

.brand-text span {
	white-space: nowrap;
}

.nav-menu .nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-md);
	align-items: center;
}

.nav-menu .nav-list a {
	text-decoration: none;
	font-size: clamp(0.72rem, 0.68rem + 0.2vw, 0.85rem);
	font-weight: 500;
	color: var(--color-text);
	padding: var(--space-3xs) var(--space-2xs);
	border-radius: var(--radius-sm);
}

.nav-menu .nav-list a:hover,
.nav-menu .nav-list a:focus-visible {
	color: var(--color-highlight);
	background: color-mix(in srgb, var(--color-highlight) 12%, transparent);
}

.menu-toggle {
	position: relative;
	z-index: var(--z-toggle);
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-primary);
	border-radius: var(--radius-md);
	padding: var(--space-xs) var(--space-sm);
	cursor: pointer;
	font: inherit;
	display: none;
	transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
	margin-left: var(--space-xs);
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
	color: var(--color-highlight);
	border-color: color-mix(in srgb, var(--color-highlight) 45%, var(--color-border));
}

.mobile-menu {
	position: fixed;
	top: 0;
	right: 0;
	width: min(320px, 88vw);
	height: auto;
	max-height: min(100vh, 640px);
	background: var(--color-surface);
	box-shadow: var(--shadow-md);
	border-bottom-left-radius: var(--radius-lg);
	padding: var(--space-lg) var(--space-md);
	transform: translateY(-100%);
	transition: transform var(--transition-med);
	z-index: var(--z-mobile);
	border: 1px solid var(--color-border);
}

.mobile-menu.active {
	transform: translateY(0);
}

body.menu-open {
	overflow: hidden;
}

.mobile-nav-list {
	list-style: none;
	margin: var(--space-xl) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.mobile-nav-list a {
	text-decoration: none;
	font-weight: 600;
	color: var(--color-primary);
	font-size: 0.92rem;
}

.mobile-nav-list a:hover,
.mobile-nav-list a:focus-visible {
	color: var(--color-highlight);
}

.menu-close {
	position: absolute;
	top: var(--space-sm);
	right: var(--space-sm);
	border: none;
	background: var(--color-secondary);
	color: var(--color-primary);
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius-sm);
	cursor: pointer;
	z-index: calc(var(--z-mobile) + 2);
	transition: color var(--transition-fast), background var(--transition-fast);
}

.menu-close:hover,
.menu-close:focus-visible {
	color: var(--color-highlight);
	background: color-mix(in srgb, var(--color-highlight) 15%, var(--color-secondary));
}

.hero {
	position: relative;
	min-height: min(78vh, 720px);
	display: grid;
	align-items: center;
	padding: clamp(var(--space-xl), 6vw, var(--space-2xl)) clamp(var(--space-sm), 4vw, var(--space-xl));
	overflow: hidden;
	background-color: var(--color-primary);
	background-image: linear-gradient(120deg, color-mix(in srgb, var(--color-primary) 82%, transparent) 0%, color-mix(in srgb, var(--color-primary) 55%, transparent) 45%, color-mix(in srgb, var(--color-secondary) 40%, transparent) 100%), url("../img/hero-bg.jpg");
	background-size: cover;
	background-position: center;
	color: var(--color-secondary);
	--hero-pad: clamp(var(--space-md), 4vw, var(--space-xl));
}

.hero-glow {
	position: absolute;
	inset: 10% auto auto 55%;
	width: clamp(180px, 40vw, 360px);
	height: clamp(180px, 40vw, 360px);
	background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 55%, transparent), transparent 70%);
	filter: blur(8px);
	opacity: 0.65;
	pointer-events: none;
}

.hero-content {
	position: relative;
	z-index: 2;
	width: min(640px, 92%);
}

.hero-kicker {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.65rem;
	font-weight: 600;
	margin-bottom: var(--space-xs);
	opacity: 0.9;
}

.hero-title {
	color: var(--color-surface);
	text-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.25);
}

.hero-lead {
	color: color-mix(in srgb, var(--color-secondary) 92%, white);
	font-size: clamp(0.88rem, 0.8rem + 0.45vw, 1.05rem);
	max-width: 38rem;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-md);
}

.hero-figure-wrap {
	position: absolute;
	inset: auto 6% 8% auto;
	z-index: 1;
	opacity: 0.95;
}

.hero-figure {
	position: relative;
	width: clamp(150px, 32vw, 240px);
	height: clamp(150px, 32vw, 240px);
	display: grid;
	place-items: center;
}

.orbit-core {
	width: 3.15rem;
	height: 3.15rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--color-secondary) 88%, white);
	color: var(--color-primary);
	display: grid;
	place-items: center;
	box-shadow: var(--shadow-md);
	font-size: 1.15rem;
	z-index: 2;
	animation: pulse-core 5s ease-in-out infinite;
}

.orbit {
	position: absolute;
	width: 2.35rem;
	height: 2.35rem;
	border-radius: 50%;
	background: var(--color-highlight);
	color: var(--color-surface);
	display: grid;
	place-items: center;
	font-size: 0.95rem;
	box-shadow: var(--shadow-sm);
	animation: orbit-spin 14s linear infinite;
}

.orbit-a {
	offset-path: circle(42% at 50% 50%);
	animation-duration: 16s;
	background: var(--color-accent);
}

.orbit-b {
	offset-path: circle(58% at 50% 50%);
	animation-duration: 20s;
	background: var(--color-highlight);
	animation-direction: reverse;
}

.orbit-c {
	offset-path: circle(74% at 50% 50%);
	animation-duration: 24s;
	background: color-mix(in srgb, var(--color-secondary) 75%, var(--color-primary));
	color: var(--color-primary);
}

@supports not (offset-path: circle(40% at 50% 50%)) {
	.orbit-a {
		top: 6%;
		left: 22%;
		animation: float-a 7s ease-in-out infinite;
	}
	.orbit-b {
		bottom: 12%;
		right: 10%;
		animation: float-b 8.5s ease-in-out infinite;
	}
	.orbit-c {
		top: 40%;
		right: 4%;
		animation: float-c 9s ease-in-out infinite;
	}
}

@keyframes orbit-spin {
	0% {
		offset-distance: 0%;
	}
	100% {
		offset-distance: 100%;
	}
}

@keyframes pulse-core {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
}

@keyframes float-a {
	0%, 100% {
		transform: translate(0, 0);
	}
	50% {
		transform: translate(8px, -14px);
	}
}

@keyframes float-b {
	0%, 100% {
		transform: translate(0, 0);
	}
	50% {
		transform: translate(-10px, 10px);
	}
}

@keyframes float-c {
	0%, 100% {
		transform: translate(0, 0);
	}
	50% {
		transform: translate(12px, 6px);
	}
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	padding: var(--space-xs) var(--space-md);
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	font: inherit;
	font-weight: 600;
	font-size: 0.82rem;
	cursor: pointer;
	text-decoration: none;
	margin-top: var(--space-sm);
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-primary {
	background: var(--color-highlight);
	color: var(--color-surface);
	border-color: color-mix(in srgb, var(--color-highlight) 70%, black);
	box-shadow: var(--shadow-sm);
}

.btn-primary:hover,
.btn-primary:focus-visible {
	background: color-mix(in srgb, var(--color-highlight) 82%, var(--color-primary));
	color: var(--color-secondary);
}

.btn-outline {
	background: transparent;
	color: var(--color-secondary);
	border-color: color-mix(in srgb, var(--color-secondary) 55%, transparent);
}

.btn-outline:hover,
.btn-outline:focus-visible {
	color: var(--color-highlight);
	border-color: var(--color-highlight);
	background: color-mix(in srgb, var(--color-surface) 10%, transparent);
}

.section {
	padding: clamp(var(--space-xl), 5vw, var(--space-2xl)) 0;
}

.section-alt {
	background: color-mix(in srgb, var(--color-surface) 92%, var(--color-accent));
}

.section-lead {
	color: var(--color-muted);
	max-width: 46rem;
	font-size: 0.9rem;
	margin-bottom: var(--space-md);
}

.intro-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-md);
	margin-top: var(--space-lg);
}

.intro-card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--space-md);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
}

.intro-icon {
	color: var(--color-accent);
	font-size: 1.25rem;
	margin-bottom: var(--space-xs);
}

.reader-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-md);
	margin-top: var(--space-md);
}

.reader-card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--space-md);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
	font-size: 0.86rem;
	line-height: 1.5;
}

.reader-card p {
	margin: 0;
}

.reader-attribution {
	font-weight: 600;
	font-size: 0.78rem;
	color: var(--color-primary);
	margin-top: var(--space-sm);
}

.reader-disclosure {
	font-size: 0.76rem;
	color: var(--color-muted);
	margin-top: var(--space-md);
	max-width: 44rem;
}

.split-heading {
	display: grid;
	gap: var(--space-sm);
	margin-bottom: var(--space-lg);
}

.spectrum {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.spectrum-row {
	display: grid;
	grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
	gap: var(--space-md);
	align-items: center;
}

.spectrum-label {
	font-weight: 600;
	font-size: 0.82rem;
	color: var(--color-primary);
}

.spectrum-bar {
	height: 0.85rem;
	border-radius: var(--radius-md);
	background: linear-gradient(90deg, var(--color-accent), var(--color-highlight));
	box-shadow: inset 0 0 0 1px var(--color-border);
}

.spectrum-bar-b {
	background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

.spectrum-bar-c {
	background: linear-gradient(90deg, var(--color-highlight), color-mix(in srgb, var(--color-secondary) 75%, white));
}

.pause-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--space-sm);
}

.pause-list li {
	display: flex;
	gap: var(--space-sm);
	align-items: flex-start;
	background: var(--color-surface);
	padding: var(--space-md);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
}

.pause-list i {
	color: var(--color-highlight);
	margin-top: 0.2rem;
}

.section-media {
	background: var(--color-surface);
}

.split-media {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(var(--space-md), 4vw, var(--space-xl));
	align-items: center;
}

.split-media.reverse .media-copy {
	order: 2;
}

.split-media.reverse .media-figure {
	order: 1;
}

.media-figure {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-md);
}

.media-copy .btn {
	margin-top: var(--space-md);
}

.card-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-md);
}

.info-card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--space-md);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
}

.text-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-weight: 600;
	text-decoration: none;
	color: var(--color-primary);
	margin-top: var(--space-md);
}

.text-link:hover,
.text-link:focus-visible {
	color: var(--color-highlight);
}

.text-link i {
	transition: transform var(--transition-fast);
}

.text-link:hover i,
.text-link:focus-visible i {
	transform: translateX(4px);
}

.table-wrap {
	overflow: auto;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	margin-top: var(--space-md);
}

.data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.82rem;
	background: var(--color-surface);
}

.data-table th,
.data-table td {
	padding: var(--space-sm);
	text-align: left;
	border-bottom: 1px solid var(--color-border);
}

.data-table th {
	background: color-mix(in srgb, var(--color-secondary) 80%, white);
	font-weight: 600;
	color: var(--color-primary);
}

.section-disclaimer {
	background: var(--color-primary);
	color: var(--color-secondary);
}

.disclaimer-box {
	background: color-mix(in srgb, var(--color-primary) 85%, black);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	border: 1px solid color-mix(in srgb, var(--color-secondary) 22%, transparent);
	box-shadow: var(--shadow-md);
}

.section-disclaimer .section-title {
	color: var(--color-secondary);
}

.section-disclaimer p {
	color: color-mix(in srgb, var(--color-secondary) 88%, white);
	font-size: 0.85rem;
}

.site-footer {
	background: var(--color-primary);
	color: color-mix(in srgb, var(--color-secondary) 88%, transparent);
	padding: var(--space-xl) clamp(var(--space-sm), 4vw, var(--space-xl)) var(--space-lg);
	margin-top: var(--space-xl);
	border-top: 1px solid color-mix(in srgb, var(--color-secondary) 18%, transparent);
}

.footer-main {
	width: min(1120px, 92vw);
	margin: 0 auto var(--space-lg);
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
}

.footer-brand p {
	font-size: 0.82rem;
	color: color-mix(in srgb, var(--color-secondary) 78%, transparent);
}

.brand-logo-footer {
	color: var(--color-secondary);
	margin-bottom: var(--space-sm);
}

.brand-logo-footer:hover,
.brand-logo-footer:focus-visible {
	color: var(--color-highlight);
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-md);
}

.footer-title {
	font-family: var(--font-body);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-highlight);
	margin-bottom: var(--space-xs);
}

.footer-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--space-2xs);
	font-size: 0.82rem;
}

.footer-list a {
	color: var(--color-surface);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--color-surface) 55%, transparent);
	text-underline-offset: 0.18em;
	font-weight: 500;
}

.footer-list a:hover,
.footer-list a:focus-visible {
	color: var(--color-highlight);
	text-decoration-color: var(--color-highlight);
}

.footer-link {
	color: var(--color-surface);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--color-surface) 55%, transparent);
	text-underline-offset: 0.18em;
	font-weight: 500;
}

.footer-link:hover,
.footer-link:focus-visible {
	color: var(--color-highlight);
	text-decoration-color: var(--color-highlight);
}

.footer-bottom {
	width: min(1120px, 92vw);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	justify-content: space-between;
	align-items: center;
	padding-top: var(--space-md);
	border-top: 1px solid color-mix(in srgb, var(--color-secondary) 14%, transparent);
	font-size: 0.78rem;
}

.footer-host {
	font-weight: 600;
	color: var(--color-highlight);
}

.cookie-banner,
.cookie-settings-panel,
.privacy-popup {
	position: fixed;
	inset: auto var(--space-sm) var(--space-sm) var(--space-sm);
	z-index: var(--z-overlay);
}

.cookie-banner[hidden],
.cookie-settings-panel[hidden],
.privacy-popup[hidden] {
	display: none;
}

.cookie-inner,
.cookie-settings-inner,
.privacy-popup-inner {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--space-md);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-md);
	max-width: 520px;
	margin-inline: auto;
}

.cookie-settings-panel {
	inset: 0;
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--color-primary) 35%, transparent);
	padding: var(--space-md);
}

.cookie-settings-inner {
	max-width: 480px;
	width: min(480px, 94vw);
	max-height: 90vh;
	overflow: auto;
}

.cookie-title {
	font-size: clamp(1rem, 0.92rem + 0.35vw, 1.2rem);
}

.cookie-inner .btn-outline,
.cookie-settings-inner .btn-outline,
.privacy-popup-inner .btn-outline {
	color: var(--color-primary);
	border-color: var(--color-border);
	background: color-mix(in srgb, var(--color-secondary) 55%, white);
}

.cookie-inner .btn-outline:hover,
.cookie-inner .btn-outline:focus-visible,
.cookie-settings-inner .btn-outline:hover,
.cookie-settings-inner .btn-outline:focus-visible,
.privacy-popup-inner .btn-outline:hover,
.privacy-popup-inner .btn-outline:focus-visible {
	color: var(--color-highlight);
	border-color: var(--color-highlight);
}

.cookie-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-top: var(--space-md);
}

.cookie-toggle-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-md);
	padding: var(--space-sm) 0;
	border-bottom: 1px solid var(--color-border);
}

.toggle-note {
	font-size: 0.78rem;
	color: var(--color-muted);
	margin: 0;
}

.switch {
	position: relative;
	width: 2.6rem;
	height: 1.35rem;
	flex-shrink: 0;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	background: var(--color-border);
	border-radius: 999px;
	transition: background var(--transition-fast);
}

.slider::before {
	content: "";
	position: absolute;
	height: 1rem;
	width: 1rem;
	left: 0.2rem;
	bottom: 0.18rem;
	background: var(--color-surface);
	border-radius: 50%;
	transition: transform var(--transition-fast);
	box-shadow: var(--shadow-sm);
}

.switch input:checked + .slider {
	background: var(--color-accent);
}

.switch input:checked + .slider::before {
	transform: translateX(1.1rem);
}

.switch input:disabled + .slider {
	opacity: 0.6;
	cursor: not-allowed;
}

.page-hero {
	padding: var(--space-xl) 0 var(--space-lg);
	background: linear-gradient(135deg, color-mix(in srgb, var(--color-secondary) 92%, var(--color-accent)), var(--color-surface));
	border-bottom: 1px solid var(--color-border);
}

.page-hero h1 {
	margin-bottom: var(--space-xs);
}

.page-kicker {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 600;
	color: var(--color-muted);
	margin: 0 0 var(--space-xs);
}

.page-wrap {
	padding-bottom: var(--space-2xl);
}

.habits-timeline {
	display: grid;
	gap: var(--space-md);
	margin-top: var(--space-lg);
}

.timeline-unit {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-md);
	align-items: start;
}

.timeline-badge {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--color-primary);
	color: var(--color-secondary);
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 0.85rem;
	box-shadow: var(--shadow-sm);
}

.timeline-card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--space-md);
	border: 1px solid var(--color-border);
}

.resource-board {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-md);
	margin-top: var(--space-lg);
}

.resource-tile {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--space-md);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
	position: relative;
	overflow: hidden;
}

.resource-tile::after {
	content: "";
	position: absolute;
	inset: auto -20% -40% auto;
	width: 140px;
	height: 140px;
	background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 35%, transparent), transparent 65%);
	pointer-events: none;
}

.resource-visual {
	padding: var(--space-lg);
	background: var(--color-surface);
	display: grid;
	place-items: center;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	overflow: hidden;
}

.resource-visual-icon {
	font-size: 3rem;
	color: var(--color-accent);
}

.resource-visual-caption {
	margin: var(--space-sm) 0 0;
	text-align: center;
	font-weight: 600;
	color: var(--color-primary);
}

.contact-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(var(--space-md), 4vw, var(--space-xl));
	align-items: start;
	padding: var(--space-xl) 0;
}

.contact-card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-md);
	border-top: 4px solid var(--color-accent);
}

.contact-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: var(--space-md) 0;
}

.pill {
	padding: var(--space-2xs) var(--space-sm);
	border-radius: 999px;
	background: color-mix(in srgb, var(--color-secondary) 88%, var(--color-accent));
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--color-primary);
}

.contact-form label {
	display: block;
	font-weight: 600;
	font-size: 0.78rem;
	margin-bottom: var(--space-3xs);
	color: var(--color-primary);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
	width: 100%;
	padding: var(--space-sm);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	font: inherit;
	background: var(--color-surface);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-form textarea {
	min-height: 140px;
	resize: vertical;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.field-error {
	color: #a94442;
	font-size: 0.72rem;
	min-height: 1rem;
	margin: 0 0 var(--space-xs);
}

.checkbox-row {
	display: flex;
	gap: var(--space-xs);
	align-items: flex-start;
	margin: var(--space-md) 0;
}

.checkbox-row input {
	margin-top: 0.2rem;
}

.map-frame {
	border: 0;
	width: 100%;
	height: 450px;
	min-height: 350px;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.center-page {
	min-height: 60vh;
	display: grid;
	place-items: center;
	text-align: center;
	padding: var(--space-2xl) var(--space-md);
}

.center-page p {
	max-width: none;
}

.center-page .btn-outline {
	color: var(--color-primary);
	border-color: var(--color-border);
	background: var(--color-surface);
	margin-inline: var(--space-3xs);
}

.center-page .btn-outline:hover,
.center-page .btn-outline:focus-visible {
	color: var(--color-highlight);
	border-color: var(--color-highlight);
}

.center-inner {
	width: min(560px, 92vw);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
}

.center-inner .btn {
	margin-top: var(--space-xs);
}

.legal-page {
	padding: var(--space-xl) 0 var(--space-2xl);
}

.legal-page .container.narrow {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: clamp(var(--space-md), 4vw, var(--space-xl));
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
}

.legal-page h2 {
	margin-top: var(--space-lg);
}

.legal-page h3 {
	margin-top: var(--space-md);
}

.legal-page .home-button {
	display: inline-flex;
	margin-top: var(--space-md);
	margin-bottom: var(--space-lg);
	padding: var(--space-xs) var(--space-md);
	border-radius: var(--radius-md);
	background: var(--color-primary);
	color: var(--color-secondary);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.82rem;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.legal-page .home-button:hover,
.legal-page .home-button:focus-visible {
	background: var(--color-highlight);
	color: var(--color-surface);
}

.legal-meta {
	font-size: 0.78rem;
	color: var(--color-muted);
	margin-bottom: var(--space-md);
}

.site-header.menu-open-state .menu-toggle {
	display: none;
}

@media (max-width: 960px) {
	.nav-menu {
		display: none;
	}

	.menu-toggle {
		display: inline-flex;
	}

	.intro-grid,
	.card-row,
	.footer-grid,
	.split-media,
	.contact-shell,
	.resource-board {
		grid-template-columns: 1fr;
	}

	.split-media.reverse .media-copy,
	.split-media.reverse .media-figure {
		order: initial;
	}

	.footer-main {
		grid-template-columns: 1fr;
	}

	.spectrum-row {
		grid-template-columns: 1fr;
	}

	.hero-figure-wrap {
		position: relative;
		inset: auto;
		margin-top: var(--space-lg);
		justify-self: end;
	}

	.hero {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.hero-actions {
		flex-direction: column;
		align-items: stretch;
	}

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