/* Reset & base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--color-background);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	overflow-x: hidden;
}

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

a { color: var(--color-accent); text-decoration: none; transition: color var(--transition-base); }
a:hover { color: var(--color-dark-green); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--color-heading);
	line-height: 1.2;
	margin: 0 0 0.5em;
	font-weight: 700;
}
h1 { font-size: clamp(1.875rem, 3.5vw, 3rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
p { margin: 0 0 1em; }
small, .text-small { font-size: 0.875rem; color: var(--color-muted); }

ul, ol { padding-left: 1.25em; }

/* Focus & accessibility ----------------------------------------------- */
:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
	border-radius: 4px;
}
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: var(--color-dark);
	color: var(--color-white);
	padding: 12px 20px;
	border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Layout ---------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 40px);
}
.section { padding-block: var(--space-section); }
.section-header { max-width: 720px; margin-bottom: 48px; }
.section-header.is-centered { margin-inline: auto; text-align: center; }
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.8rem;
	color: var(--color-accent);
	margin-bottom: 14px;
}
.eyebrow::before {
	content: '';
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--gradient-primary);
}

.bg-surface { background: var(--color-white); }
.bg-soft { background: var(--color-background-alt); }
.bg-dark { background: var(--gradient-dark); color: var(--color-white); }
.bg-dark h2, .bg-dark h3 { color: var(--color-white); }
.bg-gradient { background: var(--gradient-primary); color: var(--color-white); }
.bg-gradient h2, .bg-gradient h3 { color: var(--color-white); }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
	.grid-4 { grid-template-columns: repeat(2, 1fr); }
	.grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Reveal-on-scroll (progressive; content visible without JS) --------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
}
.no-js .reveal { opacity: 1; transform: none; }

/* Back to top ---------------------------------------------------------- */
.back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: var(--color-primary);
	color: var(--color-white, #fff);
	box-shadow: var(--shadow-md);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
	z-index: 60;
}
.back-to-top svg { width: 20px; height: 20px; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--color-accent); }
@media (prefers-reduced-motion: reduce) {
	.back-to-top { transition: opacity var(--transition-base), visibility var(--transition-base); }
}