/* ==========================================================================
   BASE — reset, typography, layout primitives, a11y
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6rem; /* clears the sticky header on anchor jumps */
}

body.nx {
	margin: 0;
	background: var(--nx-bg);
	color: var(--nx-text);
	font-family: var(--nx-font-sans);
	font-size: var(--nx-text-base);
	line-height: var(--nx-leading-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* ---- Headings ----------------------------------------------------------
   Wrapped in :where() so these carry ZERO specificity. Element defaults must
   never outrank a component class: `.nx h2` (0,1,1) used to beat
   `.nx-footer__col-title` (0,1,0), which blew the footer headings up to the
   full h2 size. With :where() a single class is always enough to override. */

:where(.nx) :where(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 var(--nx-space-4);
	color: var(--nx-primary);
	font-weight: var(--nx-weight-bold);
	line-height: var(--nx-leading-tight);
	letter-spacing: var(--nx-tracking-tight);
	text-wrap: balance;
}

:where(.nx) :where(h1) { font-size: var(--nx-text-4xl); }
:where(.nx) :where(h2) { font-size: var(--nx-text-3xl); }
:where(.nx) :where(h3) { font-size: var(--nx-text-2xl); }
:where(.nx) :where(h4) { font-size: var(--nx-text-xl); }
:where(.nx) :where(h5) { font-size: var(--nx-text-lg); }
:where(.nx) :where(h6) {
	font-size: var(--nx-text-sm);
	font-weight: var(--nx-weight-semibold);
	letter-spacing: var(--nx-tracking-caps);
	text-transform: uppercase;
}

:where(.nx) :where(p) {
	margin: 0 0 var(--nx-space-4);
	text-wrap: pretty;
}

:where(.nx) :where(p:last-child) { margin-bottom: 0; }

/* Zero-specificity for the same reason as the headings: `.nx a` (0,1,1) was
   beating `.nx-btn` (0,1,0), so every button rendered with link-blue text on
   its navy background. */
:where(.nx) :where(a) {
	color: var(--nx-blue-600);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--nx-dur-fast) var(--nx-ease);
}

:where(.nx) :where(a:hover) { color: var(--nx-action); }

:where(.nx) :where(img, svg, video) {
	max-width: 100%;
	height: auto;
	display: block;
}

:where(.nx) :where(ul, ol) { margin: 0 0 var(--nx-space-4); padding-left: 1.25rem; }
:where(.nx) :where(li + li) { margin-top: var(--nx-space-2); }

:where(.nx) :where(hr) {
	border: 0;
	border-top: 1px solid var(--nx-border);
	margin: var(--nx-space-8) 0;
}

/* ---- Layout primitives -------------------------------------------------- */

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

.nx-container--wide { max-width: var(--nx-container-wide); }
.nx-container--text { max-width: var(--nx-container-text); }

.nx-section {
	padding-block: var(--nx-section-y);
	position: relative;
}

.nx-section--tight { padding-block: calc(var(--nx-section-y) * 0.6); }
.nx-section--alt   { background: var(--nx-bg-alt); }

.nx-section--invert {
	background: var(--nx-bg-invert);
	color: var(--nx-text-invert);
}

.nx-section--invert h1,
.nx-section--invert h2,
.nx-section--invert h3,
.nx-section--invert h4 { color: var(--nx-white); }

.nx-section--invert p { color: rgba(255, 255, 255, 0.82); }

/* Grid that reflows on its own — no breakpoint spam */
.nx-grid {
	display: grid;
	gap: var(--nx-space-5);
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.nx-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }
.nx-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

/* Two-column split, stacks under 900px */
.nx-split {
	display: grid;
	gap: clamp(var(--nx-space-6), 4vw, var(--nx-space-9));
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.nx-split { grid-template-columns: 1fr 1fr; }
	.nx-split--media-first > :first-child { order: 2; }
	.nx-split--wide-text { grid-template-columns: 1.15fr 0.85fr; }
}

.nx-stack > * + * { margin-top: var(--nx-space-4); }
.nx-stack--lg > * + * { margin-top: var(--nx-space-6); }

/* ---- Section heading block --------------------------------------------- */

.nx-section-head {
	max-width: 62ch;
	margin-bottom: var(--nx-space-8);
}

.nx-section-head--center {
	margin-inline: auto;
	text-align: center;
}

.nx-eyebrow {
	display: inline-block;
	margin-bottom: var(--nx-space-3);
	color: var(--nx-action);
	font-size: var(--nx-text-xs);
	font-weight: var(--nx-weight-semibold);
	letter-spacing: var(--nx-tracking-caps);
	text-transform: uppercase;
}

.nx-section--invert .nx-eyebrow { color: var(--nx-cyan); }

.nx-lede {
	font-size: var(--nx-text-lg);
	color: var(--nx-text-muted);
	line-height: var(--nx-leading-loose);
}

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

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

/* Visible, consistent focus ring on keyboard nav only */
.nx :focus-visible {
	outline: 3px solid var(--nx-focus);
	outline-offset: 2px;
	border-radius: var(--nx-radius-sm);
}

.nx :focus:not(:focus-visible) { outline: none; }

.nx-skip-link {
	position: absolute;
	top: -100%;
	left: var(--nx-space-4);
	z-index: 999;
	padding: var(--nx-space-3) var(--nx-space-5);
	background: var(--nx-primary);
	color: var(--nx-white);
	border-radius: 0 0 var(--nx-radius) var(--nx-radius);
	font-weight: var(--nx-weight-semibold);
	text-decoration: none;
}

.nx-skip-link:focus {
	top: 0;
	color: var(--nx-white);
}

/* ---- Motion preference -------------------------------------------------- */

@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;
		scroll-behavior: auto !important;
	}
}

/* ---- Scroll reveal ------------------------------------------------------
   JS adds .is-visible via IntersectionObserver. Transform + opacity only,
   so it never triggers layout.                                            */

.nx-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity var(--nx-dur-slow) var(--nx-ease-out),
		transform var(--nx-dur-slow) var(--nx-ease-out);
	will-change: opacity, transform;
}

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

/* Staggered children */
.nx-reveal-group > * {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity var(--nx-dur-slow) var(--nx-ease-out),
		transform var(--nx-dur-slow) var(--nx-ease-out);
}

.nx-reveal-group.is-visible > * { opacity: 1; transform: none; }
.nx-reveal-group.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.nx-reveal-group.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.nx-reveal-group.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.nx-reveal-group.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.nx-reveal-group.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.nx-reveal-group.is-visible > *:nth-child(6) { transition-delay: 400ms; }

/* No-JS fallback: never hide content */
.no-js .nx-reveal,
.no-js .nx-reveal-group > * {
	opacity: 1;
	transform: none;
}

/* ---- Utilities ---------------------------------------------------------- */

.nx-text-center { text-align: center; }
.nx-mt-0 { margin-top: 0; }
.nx-mb-0 { margin-bottom: 0; }
.nx-muted { color: var(--nx-text-muted); }