/* ===========================================================================
   ESEI Theme — main stylesheet
   Implements the ESEI Visual Identity (v1.0, April 2026)
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Design tokens (CSS custom properties)
   --------------------------------------------------------------------------- */
:root {
	/* Primary brand */
	--esei-navy:      #1B3A5C;
	--esei-teal:      #2E7D8C;
	--esei-gold:      #E8A020;
	--esei-gold-hover:#C68118;

	/* Logo gradient */
	--esei-grad-1:    #71D2BB;
	--esei-grad-2:    #61D199;
	--esei-grad-3:    #51D076;
	--esei-grad-4:    #42CE54;
	--esei-gradient:  linear-gradient(90deg,
		var(--esei-grad-1) 0%,
		var(--esei-grad-2) 33%,
		var(--esei-grad-3) 66%,
		var(--esei-grad-4) 100%);

	/* TSSA heritage / co-brand */
	--tssa-navy:        #023047;
	--tssa-blue:        #004482;
	--tssa-yellow:      #FDCA40;
	--tssa-bright-blue: #2176FF;

	/* Neutrals */
	--esei-charcoal:  #2D3436;
	--esei-graphite:  #636E72;
	--esei-silver:    #B2BEC3;
	--esei-cloud:     #F5F6FA;
	--esei-white:     #FFFFFF;

	/* Semantic */
	--esei-success: #27AE60;
	--esei-warning: #F39C12;
	--esei-error:   #E74C3C;
	--esei-info:    #2980B9;

	/* Typography */
	--esei-font-display: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--esei-font-body:    "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Spacing (8px scale) */
	--esei-space-0-5: 4px;
	--esei-space-1:   8px;
	--esei-space-1-5: 12px;
	--esei-space-2:   16px;
	--esei-space-3:   24px;
	--esei-space-4:   32px;
	--esei-space-6:   48px;
	--esei-space-8:   64px;
	--esei-space-12:  96px;
	--esei-space-16:  128px;

	/* Radius */
	--radius-sm:   4px;
	--radius-md:   8px;
	--radius-lg:   12px;
	--radius-xl:   16px;
	--radius-full: 9999px;

	/* Elevation */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
	--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);

	/* Layout */
	--esei-container-max: 1200px;
	--esei-container-pad: var(--esei-space-2);

	/* Header */
	--esei-header-height: 56px;
	--esei-header-bg:     var(--esei-white);
	--esei-header-border: rgba(178, 190, 195, 0.3);

	/* Motion */
	--esei-ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
	--esei-duration-fast: 120ms;
	--esei-duration:      200ms;
}

@media (min-width: 768px) {
	:root {
		--esei-container-pad: var(--esei-space-4);
		--esei-header-height: 64px;
	}
}

/* ---------------------------------------------------------------------------
   2. Reset / base
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: var(--esei-header-height);
}

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

body.esei-body {
	margin: 0;
	font-family: var(--esei-font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.6;
	color: var(--esei-charcoal);
	background: var(--esei-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: var(--esei-teal);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--esei-duration-fast) var(--esei-ease);
}
a:hover { color: var(--esei-navy); }
a:focus-visible {
	outline: 2px solid var(--esei-teal);
	outline-offset: 2px;
	border-radius: 2px;
}

::selection {
	background: var(--esei-teal);
	color: var(--esei-white);
}

/* Headings — Poppins Bold, Navy */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--esei-font-display);
	font-weight: 700;
	color: var(--esei-navy);
	margin: 0 0 var(--esei-space-2);
	line-height: 1.2;
}
h1 { font-size: clamp(24px, 2.4vw + 1rem, 32px); letter-spacing: -0.02em; line-height: 1.15; }
h2 { font-size: clamp(20px, 1.6vw + 0.85rem, 24px); letter-spacing: -0.01em; }
h3 { font-size: clamp(18px, 1.2vw + 0.8rem, 20px); }
h4 { font-size: clamp(16px, 0.6vw + 0.85rem, 18px); font-family: var(--esei-font-body); font-weight: 700; }
h5, h6 { font-size: 16px; font-family: var(--esei-font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

p, ul, ol, dl, blockquote, pre, table { margin: 0 0 var(--esei-space-2); }
small, .esei-caption { font-size: 14px; color: var(--esei-graphite); }

hr { border: 0; border-top: 1px solid var(--esei-silver); margin: var(--esei-space-6) 0; }

blockquote {
	border-left: 3px solid var(--esei-teal);
	padding: var(--esei-space-1) var(--esei-space-3);
	color: var(--esei-graphite);
	font-style: italic;
	margin-left: 0;
	margin-right: 0;
}

code, pre, kbd, samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.95em;
}
code {
	background: var(--esei-cloud);
	padding: 2px 6px;
	border-radius: var(--radius-sm);
}
pre {
	background: var(--esei-cloud);
	padding: var(--esei-space-2);
	border-radius: var(--radius-md);
	overflow-x: auto;
}

/* ---------------------------------------------------------------------------
   3. Utilities
   --------------------------------------------------------------------------- */
.esei-container {
	width: 100%;
	max-width: var(--esei-container-max);
	margin-inline: auto;
	padding-inline: var(--esei-container-pad);
}

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

.esei-skip-link {
	position: absolute;
	top: -100px;
	left: var(--esei-space-2);
	background: var(--esei-navy);
	color: var(--esei-white);
	padding: var(--esei-space-1) var(--esei-space-2);
	border-radius: var(--radius-sm);
	z-index: 100;
	text-decoration: none;
	font-family: var(--esei-font-display);
	font-weight: 700;
}
.esei-skip-link:focus {
	top: var(--esei-space-2);
	color: var(--esei-white);
}

.esei-prose > * + * { margin-top: var(--esei-space-2); }
.esei-prose h2 { margin-top: var(--esei-space-6); }
.esei-prose h3 { margin-top: var(--esei-space-4); }
.esei-prose img { border-radius: var(--radius-md); margin-block: var(--esei-space-3); }
.esei-prose a { color: var(--esei-teal); }
.esei-prose ul, .esei-prose ol { padding-left: var(--esei-space-3); }
.esei-prose li { margin-bottom: var(--esei-space-1); }

/* ---------------------------------------------------------------------------
   4. Header / Nav
   --------------------------------------------------------------------------- */
.esei-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--esei-header-bg);
	border-bottom: 1px solid var(--esei-header-border);
	transition: box-shadow var(--esei-duration) var(--esei-ease);
}
.esei-header.is-scrolled { box-shadow: var(--shadow-md); }

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

.esei-header__brand .esei-logo,
.esei-header__brand .custom-logo-link {
	display: inline-flex;
	align-items: center;
}
.esei-header__brand img,
.esei-header__brand .custom-logo {
	height: 36px;
	width: auto;
}
@media (min-width: 768px) {
	.esei-header__brand img,
	.esei-header__brand .custom-logo {
		height: 44px;
	}
}

/* Mobile toggle */
.esei-header__toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px; height: 44px;
	background: transparent;
	border: 1px solid var(--esei-silver);
	border-radius: var(--radius-md);
	cursor: pointer;
	margin-left: auto;
}
.esei-header__toggle-bar {
	display: block;
	width: 22px; height: 2px;
	background: var(--esei-navy);
	border-radius: 2px;
	transition: transform var(--esei-duration) var(--esei-ease),
	            opacity var(--esei-duration-fast) var(--esei-ease);
}
.esei-header__toggle[aria-expanded="true"] .esei-header__toggle-bar:nth-child(2) { opacity: 0; }
.esei-header__toggle[aria-expanded="true"] .esei-header__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.esei-header__toggle[aria-expanded="true"] .esei-header__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1024px) {
	.esei-header__toggle { display: none; }
}

/* Nav */
.esei-nav {
	display: none;
	position: absolute;
	top: var(--esei-header-height);
	left: 0; right: 0;
	background: var(--esei-white);
	border-bottom: 1px solid var(--esei-header-border);
	box-shadow: var(--shadow-md);
	padding: var(--esei-space-2) var(--esei-container-pad);
}
.esei-nav.is-open { display: block; }

.esei-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--esei-space-1);
}
.esei-nav__item { position: relative; }
.esei-nav__link {
	display: block;
	padding: var(--esei-space-1-5) var(--esei-space-2);
	color: var(--esei-charcoal);
	font-family: var(--esei-font-display);
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	border-radius: var(--radius-sm);
	transition: color var(--esei-duration-fast) var(--esei-ease),
	            background var(--esei-duration-fast) var(--esei-ease);
}
.esei-nav__link:hover { color: var(--esei-teal); background: var(--esei-cloud); }
.esei-nav__item.is-current > .esei-nav__link { color: var(--esei-teal); }

@media (min-width: 1024px) {
	.esei-nav {
		display: block;
		position: static;
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: 0;
	}
	.esei-nav__list {
		flex-direction: row;
		gap: var(--esei-space-1);
		align-items: center;
	}
	.esei-nav__link { padding: var(--esei-space-1) var(--esei-space-2); }
	.esei-nav__item.is-current > .esei-nav__link::after {
		content: "";
		position: absolute;
		left: var(--esei-space-2);
		right: var(--esei-space-2);
		bottom: -22px;
		height: 2px;
		background: var(--esei-teal);
	}
}

/* ---------------------------------------------------------------------------
   5. Buttons
   --------------------------------------------------------------------------- */
.esei-btn,
.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--esei-space-1);
	min-height: 44px;
	padding: var(--esei-space-1-5) var(--esei-space-3);
	font-family: var(--esei-font-display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	border-radius: var(--radius-md);
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: background var(--esei-duration-fast) var(--esei-ease),
	            color var(--esei-duration-fast) var(--esei-ease),
	            border-color var(--esei-duration-fast) var(--esei-ease),
	            transform var(--esei-duration-fast) var(--esei-ease);
}
.esei-btn:active { transform: translateY(1px); }

.esei-btn--primary {
	background: var(--esei-gold);
	color: var(--esei-white);
}
.esei-btn--primary:hover { background: var(--esei-gold-hover); color: var(--esei-white); }

.esei-btn--secondary {
	background: var(--esei-white);
	color: var(--esei-navy);
	border-color: var(--esei-navy);
}
.esei-btn--secondary:hover {
	background: var(--esei-navy);
	color: var(--esei-white);
}

.esei-btn--tertiary {
	background: transparent;
	color: var(--esei-teal);
	min-height: auto;
	padding: var(--esei-space-1) 0;
	border: 0;
	border-radius: 0;
}
.esei-btn--tertiary:hover {
	color: var(--esei-navy);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   6. Forms
   --------------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="url"],
input[type="password"], input[type="search"], input[type="tel"],
input[type="number"], input[type="date"], textarea, select {
	width: 100%;
	min-height: 44px;
	padding: var(--esei-space-1-5);
	font-family: var(--esei-font-body);
	font-size: 16px;
	color: var(--esei-charcoal);
	background: var(--esei-white);
	border: 1px solid var(--esei-silver);
	border-radius: var(--radius-md);
	transition: border-color var(--esei-duration-fast) var(--esei-ease),
	            box-shadow var(--esei-duration-fast) var(--esei-ease);
}
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--esei-teal);
	box-shadow: 0 0 0 2px rgba(46, 125, 140, 0.4);
}
::placeholder { color: var(--esei-graphite); opacity: 1; }

label {
	display: block;
	font-family: var(--esei-font-body);
	font-weight: 600;
	font-size: 14px;
	color: var(--esei-charcoal);
	margin-bottom: var(--esei-space-0-5);
}

/* Search form (theme widget) */
.esei-searchform {
	display: flex;
	gap: var(--esei-space-1);
	margin-bottom: var(--esei-space-3);
}
.esei-searchform__input { flex: 1; }

/* ---------------------------------------------------------------------------
   7. Sections + Hero
   --------------------------------------------------------------------------- */
.esei-section {
	padding-block: var(--esei-space-6);
}
@media (min-width: 768px)  { .esei-section { padding-block: var(--esei-space-8); } }
@media (min-width: 1024px) { .esei-section { padding-block: var(--esei-space-12); } }

.esei-section--intro {
	background: var(--esei-cloud);
}

.esei-page-header {
	margin-bottom: var(--esei-space-4);
}
.esei-page-header__title { margin-bottom: var(--esei-space-1); }
.esei-page-header__eyebrow {
	font-family: var(--esei-font-body);
	font-weight: 700;
	font-size: 12px;
	color: var(--esei-teal);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--esei-space-1);
}

.esei-hero {
	position: relative;
	background: var(--esei-navy);
	color: var(--esei-white);
	overflow: hidden;
}
.esei-hero__inner {
	position: relative;
	z-index: 2;
	padding-block: var(--esei-space-8);
	max-width: 880px;
}
@media (min-width: 1024px) {
	.esei-hero__inner { padding-block: var(--esei-space-12); }
}
.esei-hero__eyebrow {
	font-family: var(--esei-font-body);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--esei-grad-1);
	margin-bottom: var(--esei-space-2);
}
.esei-hero__title {
	color: var(--esei-white);
	font-size: clamp(28px, 4vw + 1rem, 48px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin-bottom: var(--esei-space-3);
}
.esei-hero__lede {
	font-family: var(--esei-font-body);
	font-weight: 300;
	font-size: clamp(16px, 1vw + 0.8rem, 20px);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
	max-width: 60ch;
	margin-bottom: var(--esei-space-4);
}
.esei-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esei-space-2);
}
.esei-hero__gradient {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 4px;
	background: var(--esei-gradient);
}

/* ---------------------------------------------------------------------------
   8. Cards / Grids
   --------------------------------------------------------------------------- */
.esei-grid {
	display: grid;
	gap: var(--esei-space-3);
}
.esei-grid--cards {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.esei-card {
	display: flex;
	flex-direction: column;
	background: var(--esei-white);
	border: 1px solid var(--esei-silver);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--esei-duration) var(--esei-ease),
	            transform var(--esei-duration) var(--esei-ease);
}
.esei-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
.esei-card__media { display: block; }
.esei-card__image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.esei-card__body { padding: var(--esei-space-3); display: flex; flex-direction: column; gap: var(--esei-space-1); flex: 1; }
.esei-card__meta {
	font-size: 14px;
	color: var(--esei-graphite);
	margin: 0;
}
.esei-card__title {
	font-size: 18px;
	margin: 0;
}
.esei-card__title a {
	color: var(--esei-navy);
	text-decoration: none;
}
.esei-card__title a:hover { color: var(--esei-teal); }
.esei-card__excerpt {
	font-size: 15px;
	color: var(--esei-charcoal);
	margin: 0;
}
.esei-card__link {
	margin-top: auto;
	font-family: var(--esei-font-body);
	font-weight: 700;
	color: var(--esei-teal);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--esei-space-0-5);
}
.esei-card__link:hover { color: var(--esei-navy); }

/* ---------------------------------------------------------------------------
   9. Page / Post layouts
   --------------------------------------------------------------------------- */
.esei-page,
.esei-post { background: var(--esei-white); }

.esei-page__container,
.esei-post__container {
	padding-block: var(--esei-space-6);
	max-width: 800px;
}

.esei-page__hero,
.esei-post__hero {
	background: var(--esei-cloud);
}
.esei-page__hero-image,
.esei-post__hero-image {
	width: 100%;
	max-height: 480px;
	object-fit: cover;
}

.esei-post-meta {
	font-size: 14px;
	color: var(--esei-graphite);
	margin-bottom: var(--esei-space-1);
}
.esei-post-header { margin-bottom: var(--esei-space-4); }
.esei-post-tags {
	font-size: 14px;
	color: var(--esei-graphite);
	margin-top: var(--esei-space-4);
	padding-top: var(--esei-space-3);
	border-top: 1px solid var(--esei-silver);
}

/* ---------------------------------------------------------------------------
   10. Pagination
   --------------------------------------------------------------------------- */
.esei-pagination {
	margin-top: var(--esei-space-6);
}
.esei-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esei-space-1);
	justify-content: center;
}
.esei-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 var(--esei-space-1-5);
	font-family: var(--esei-font-display);
	font-weight: 700;
	color: var(--esei-navy);
	background: var(--esei-white);
	border: 1px solid var(--esei-silver);
	border-radius: var(--radius-md);
	text-decoration: none;
}
.esei-pagination .page-numbers.current {
	background: var(--esei-navy);
	color: var(--esei-white);
	border-color: var(--esei-navy);
}
.esei-pagination .page-numbers:hover:not(.current) {
	border-color: var(--esei-teal);
	color: var(--esei-teal);
}

/* ---------------------------------------------------------------------------
   11. Footer
   --------------------------------------------------------------------------- */
.esei-footer {
	background: var(--esei-navy);
	color: var(--esei-white);
}
.esei-footer__inner {
	display: grid;
	gap: var(--esei-space-4);
	padding-block: var(--esei-space-6);
}
@media (min-width: 768px) {
	.esei-footer__inner {
		grid-template-columns: 1.5fr 1fr 1fr;
		align-items: start;
	}
}

.esei-footer__brand .esei-logo img,
.esei-footer__brand .custom-logo {
	height: 56px;
	width: auto;
	background: var(--esei-white);
	border-radius: var(--radius-md);
	padding: var(--esei-space-1);
}
.esei-footer__tagline {
	margin-top: var(--esei-space-2);
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
	max-width: 40ch;
}

.esei-footer__nav .esei-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--esei-space-1);
}
.esei-footer__nav a {
	color: var(--esei-white);
	text-decoration: none;
	font-family: var(--esei-font-body);
	font-weight: 600;
}
.esei-footer__nav a:hover {
	color: var(--esei-grad-1);
	text-decoration: underline;
}

.esei-footer__parent-label {
	font-family: var(--esei-font-body);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 var(--esei-space-1);
}
.esei-footer__parent-link {
	color: var(--esei-white);
	text-decoration: none;
	font-family: var(--esei-font-display);
	font-weight: 700;
	font-size: 18px;
}
.esei-footer__parent-link:hover { color: var(--esei-grad-1); }

.esei-footer__legal-bar {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-block: var(--esei-space-2);
	background: rgba(0, 0, 0, 0.18);
}
.esei-footer__legal {
	margin: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
}

/* ---------------------------------------------------------------------------
   12. WordPress core block alignment + adjustments
   --------------------------------------------------------------------------- */
.alignwide  { max-width: var(--esei-container-max); margin-inline: auto; }
.alignfull  { width: 100%; }
.alignleft  { float: left;  margin-right: var(--esei-space-3); }
.alignright { float: right; margin-left:  var(--esei-space-3); }
.aligncenter { display: block; margin-inline: auto; }

.wp-block-image figcaption {
	font-size: 14px;
	color: var(--esei-graphite);
	text-align: center;
}

.wp-block-pullquote, .wp-block-quote {
	border-left: 3px solid var(--esei-teal);
	padding: var(--esei-space-2) var(--esei-space-3);
	color: var(--esei-graphite);
	font-style: italic;
}

/* ---------------------------------------------------------------------------
   13. Empty state
   --------------------------------------------------------------------------- */
.esei-empty {
	padding: var(--esei-space-8) 0;
	text-align: center;
	color: var(--esei-graphite);
	font-size: 18px;
}

/* ===========================================================================
   14. Flexible-content blocks
   Each block is self-contained and uses only existing design tokens.
   =========================================================================== */

/* ---- 14.0 Reveal utility + icons -------------------------------------- */
.esei-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity 600ms var(--esei-ease),
		transform 600ms var(--esei-ease);
	will-change: opacity, transform;
}
.esei-reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.esei-reveal { opacity: 1; transform: none; transition: none; }
}

.esei-icon {
	display: inline-block;
	vertical-align: middle;
}

/* ---- 14.1 Hero additions (animated gradient + bg wordmark) ----------- */
.esei-hero__bg-wordmark {
	position: absolute;
	top: 50%;
	right: -6%;
	transform: translateY(-50%);
	width: min(120%, 1100px);
	aspect-ratio: 800 / 760;
	z-index: 1;
	pointer-events: none;
	/* Was a CSS mask painting `var(--esei-white)` through a Texas silhouette
	   SVG — but mask-mode defaults + currentColor in the SVG caused the raw
	   rectangle to show on some browsers. Switched to a straight
	   background-image with the SVG's path filled white in the SVG itself. */
	background: transparent url(../images/tx-silhouette-bg.svg) no-repeat center / contain;
	opacity: 0.06;
}
@media (min-width: 1024px) {
	.esei-hero__bg-wordmark { right: -10%; }
}

.esei-hero__gradient {
	/* Overrides existing 4px band: animate it sweeping in from the left on load. */
	height: 4px;
	transform-origin: left center;
	animation: esei-gradient-sweep 1200ms var(--esei-ease) both;
}
.esei-hero--has-bg .esei-hero__gradient { height: 6px; }

@keyframes esei-gradient-sweep {
	from { transform: scaleX(0); opacity: 0; }
	60%  { opacity: 1; }
	to   { transform: scaleX(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.esei-hero__gradient { animation: none; }
}

/* ---- 14.2 Header "over hero" mode ------------------------------------ */
.esei-header[data-esei-hero-mode="over"]:not(.is-scrolled) {
	background: transparent;
	border-bottom-color: transparent;
	color: var(--esei-white);
}
.esei-header[data-esei-hero-mode="over"]:not(.is-scrolled) .esei-nav__link { color: var(--esei-white); }
.esei-header[data-esei-hero-mode="over"]:not(.is-scrolled) .esei-nav__link:hover { color: var(--esei-grad-1); background: transparent; }
.esei-header[data-esei-hero-mode="over"]:not(.is-scrolled) .esei-header__toggle { border-color: rgba(255,255,255,0.4); }
.esei-header[data-esei-hero-mode="over"]:not(.is-scrolled) .esei-header__toggle-bar { background: var(--esei-white); }
@media (min-width: 1024px) {
	/* Mobile nav panel below the top — always opaque so links stay legible. */
	.esei-header[data-esei-hero-mode="over"]:not(.is-scrolled) .esei-nav {
		background: transparent;
		box-shadow: none;
		border-bottom: 0;
	}
}

/* ---- 14.3 Mission ---------------------------------------------------- */
.esei-mission {
	padding-block: var(--esei-space-8);
	background: var(--esei-white);
}
@media (min-width: 768px) { .esei-mission { padding-block: var(--esei-space-12); } }

.esei-mission__inner {
	max-width: 820px;
	margin-inline: auto;
	text-align: center;
}
.esei-mission__accent {
	width: 48px;
	height: 2px;
	background: var(--esei-gold);
	margin: 0 auto var(--esei-space-3);
}
.esei-mission__quote {
	border: 0;
	padding: 0;
	margin: 0;
	font-style: normal;
	color: var(--esei-navy);
}
.esei-mission__quote p {
	font-family: var(--esei-font-display);
	font-weight: 700;
	font-size: clamp(22px, 2.2vw + 0.6rem, 32px);
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0 0 var(--esei-space-3);
}
.esei-mission__attribution {
	display: block;
	font-family: var(--esei-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	color: var(--esei-graphite);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ---- 14.4 Tile grid -------------------------------------------------- */
.esei-tiles {
	background: var(--esei-cloud);
	padding-block: var(--esei-space-8);
}
@media (min-width: 768px) { .esei-tiles { padding-block: var(--esei-space-12); } }

.esei-tiles__heading {
	text-align: center;
	margin: 0 auto var(--esei-space-6);
	max-width: 40ch;
}
.esei-tiles__grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--esei-space-3);
	grid-template-columns: 1fr;
}
@media (min-width: 768px) { .esei-tiles__grid { grid-template-columns: repeat(3, 1fr); } }

.esei-tile {
	background: var(--esei-white);
	border: 1px solid var(--esei-silver);
	border-radius: var(--radius-md);
	padding: var(--esei-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--esei-space-1);
	box-shadow: var(--shadow-sm);
	transition:
		box-shadow var(--esei-duration) var(--esei-ease),
		transform var(--esei-duration) var(--esei-ease),
		border-color var(--esei-duration) var(--esei-ease);
}
.esei-tile:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
	border-color: var(--esei-teal);
}
.esei-tile__icon {
	color: var(--esei-teal);
	margin-bottom: var(--esei-space-1);
	display: inline-flex;
}
.esei-tile__heading {
	margin: 0;
	font-size: 20px;
}
.esei-tile__body {
	margin: 0;
	color: var(--esei-charcoal);
}
.esei-tile__link {
	margin-top: auto;
	padding-top: var(--esei-space-2);
	color: var(--esei-teal);
	font-family: var(--esei-font-body);
	font-weight: 700;
	text-decoration: none;
}
.esei-tile__link:hover { color: var(--esei-navy); text-decoration: underline; }

/* ---- 14.5 Stat strip ------------------------------------------------- */
.esei-stats {
	background: var(--esei-navy);
	color: var(--esei-white);
	padding-block: var(--esei-space-8);
	border-top: 1px solid transparent;
	position: relative;
}
.esei-stats::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--esei-gradient);
	opacity: 0.85;
}
@media (min-width: 768px) { .esei-stats { padding-block: var(--esei-space-12); } }

.esei-stats__heading {
	color: var(--esei-white);
	text-align: center;
	margin: 0 auto var(--esei-space-6);
}
.esei-stats__grid {
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--esei-space-4);
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .esei-stats__grid { grid-template-columns: repeat(4, 1fr); gap: var(--esei-space-3); } }

.esei-stat {
	text-align: center;
	padding: 0 var(--esei-space-1);
}
.esei-stat__value {
	font-family: var(--esei-font-display);
	font-weight: 700;
	font-size: clamp(36px, 4vw + 0.5rem, 56px);
	line-height: 1;
	color: var(--esei-white);
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	margin-bottom: var(--esei-space-1);
}
.esei-stat__prefix,
.esei-stat__suffix {
	color: var(--esei-grad-1);
}
.esei-stat__label {
	font-family: var(--esei-font-body);
	font-weight: 300;
	font-size: 14px;
	color: var(--esei-silver);
	margin: 0;
	max-width: 24ch;
	margin-inline: auto;
	line-height: 1.4;
}

/* ---- 14.6 Webinar preview ------------------------------------------- */
.esei-webinars {
	background: var(--esei-white);
	padding-block: var(--esei-space-8);
}
@media (min-width: 768px) { .esei-webinars { padding-block: var(--esei-space-12); } }

.esei-webinars__head {
	display: flex;
	flex-direction: column;
	gap: var(--esei-space-1);
	margin-bottom: var(--esei-space-4);
}
@media (min-width: 640px) {
	.esei-webinars__head {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
	}
}
.esei-webinars__heading { margin: 0; }
.esei-webinars__all {
	font-family: var(--esei-font-body);
	font-weight: 700;
	color: var(--esei-teal);
	text-decoration: none;
}
.esei-webinars__all:hover { color: var(--esei-navy); text-decoration: underline; }

.esei-webinars__grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--esei-space-3);
	grid-template-columns: 1fr;
}
@media (min-width: 768px) { .esei-webinars__grid { grid-template-columns: 1fr 1fr; } }

.esei-webinar {
	background: var(--esei-cloud);
	border: 1px solid var(--esei-silver);
	border-radius: var(--radius-md);
	padding: var(--esei-space-3);
	display: flex;
	flex-direction: column;
	gap: var(--esei-space-1);
	transition: border-color var(--esei-duration) var(--esei-ease), transform var(--esei-duration) var(--esei-ease);
}
.esei-webinar:hover {
	border-color: var(--esei-teal);
	transform: translateY(-2px);
}
.esei-webinar__track {
	align-self: flex-start;
	background: var(--esei-navy);
	color: var(--esei-white);
	font-family: var(--esei-font-body);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--radius-full);
	margin-bottom: var(--esei-space-0-5);
}
.esei-webinar__date {
	margin: 0;
	font-size: 14px;
	color: var(--esei-graphite);
}
.esei-webinar__title {
	margin: 0;
	font-size: 20px;
}
.esei-webinar__title a {
	color: var(--esei-navy);
	text-decoration: none;
}
.esei-webinar__title a:hover { color: var(--esei-teal); }
.esei-webinar__speaker {
	margin: 0;
	font-size: 14px;
	color: var(--esei-charcoal);
}
.esei-webinar__cta {
	margin-top: auto;
	padding-top: var(--esei-space-1);
	color: var(--esei-teal);
	font-family: var(--esei-font-body);
	font-weight: 700;
	text-decoration: none;
}
.esei-webinar__cta:hover { color: var(--esei-navy); text-decoration: underline; }

.esei-webinars__empty {
	background: var(--esei-cloud);
	border: 1px dashed var(--esei-silver);
	border-radius: var(--radius-md);
	padding: var(--esei-space-6);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--esei-space-2);
	align-items: center;
	color: var(--esei-graphite);
}

/* ---- 14.7 Two-column ------------------------------------------------- */
.esei-twocol {
	padding-block: var(--esei-space-8);
	background: var(--esei-white);
}
@media (min-width: 768px) { .esei-twocol { padding-block: var(--esei-space-12); } }

.esei-twocol__inner {
	display: grid;
	gap: var(--esei-space-4);
	align-items: center;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.esei-twocol__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--esei-space-6);
	}
	.esei-twocol--image-right .esei-twocol__media { order: 2; }
}

.esei-twocol__media { margin: 0; }
.esei-twocol__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}
.esei-twocol__placeholder {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--esei-cloud);
	border: 1.5px dashed var(--esei-silver);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--esei-graphite);
	font-family: var(--esei-font-body);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.esei-twocol__heading { margin-top: 0; }
.esei-twocol__body { margin-bottom: var(--esei-space-3); }
.esei-twocol__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esei-space-2);
}

/* ---- 14.8 Accordion -------------------------------------------------- */
.esei-accordion {
	padding-block: var(--esei-space-8);
	background: var(--esei-white);
}
@media (min-width: 768px) { .esei-accordion { padding-block: var(--esei-space-12); } }

.esei-accordion__heading {
	margin: 0 0 var(--esei-space-4);
}
.esei-accordion__list {
	list-style: none;
	padding: 0;
	margin: 0;
	max-width: 820px;
}
.esei-accordion__item + .esei-accordion__item { margin-top: var(--esei-space-1); }
.esei-accordion details {
	background: var(--esei-cloud);
	border: 1px solid var(--esei-silver);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: border-color var(--esei-duration) var(--esei-ease);
}
.esei-accordion details[open] { border-color: var(--esei-teal); }
.esei-accordion summary {
	cursor: pointer;
	list-style: none;
	padding: var(--esei-space-2) var(--esei-space-3);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--esei-space-2);
	font-family: var(--esei-font-display);
	font-weight: 700;
	color: var(--esei-navy);
}
.esei-accordion summary::-webkit-details-marker { display: none; }
.esei-accordion__chev {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border-right: 2px solid var(--esei-teal);
	border-bottom: 2px solid var(--esei-teal);
	transform: rotate(45deg);
	transition: transform var(--esei-duration) var(--esei-ease);
	margin-right: 4px;
}
.esei-accordion details[open] .esei-accordion__chev { transform: rotate(-135deg); }
.esei-accordion__a {
	padding: 0 var(--esei-space-3) var(--esei-space-3);
	color: var(--esei-charcoal);
}

/* ---- 14.9 Tier table ------------------------------------------------- */
.esei-tiers {
	padding-block: var(--esei-space-8);
	background: var(--esei-white);
}
@media (min-width: 768px) { .esei-tiers { padding-block: var(--esei-space-12); } }

.esei-tiers__heading { margin: 0 0 var(--esei-space-1); }
.esei-tiers__intro {
	margin: 0 0 var(--esei-space-4);
	color: var(--esei-graphite);
	max-width: 60ch;
}
.esei-tiers__scroll { overflow-x: auto; }
.esei-tiers__table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--esei-font-body);
}
.esei-tiers__table th,
.esei-tiers__table td {
	padding: var(--esei-space-2);
	text-align: center;
	border-bottom: 1px solid var(--esei-silver);
	vertical-align: middle;
	font-size: 15px;
}
.esei-tiers__table thead th {
	background: var(--esei-navy);
	color: var(--esei-white);
	font-family: var(--esei-font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
}
.esei-tiers__table tbody th {
	text-align: left;
	color: var(--esei-navy);
	font-weight: 700;
}
.esei-tiers__yes { color: var(--esei-success); font-size: 18px; font-weight: 700; }
.esei-tiers__no  { color: var(--esei-silver); }
.esei-tiers__fee {
	display: inline-block;
	font-size: 12px;
	color: var(--esei-navy);
	background: var(--esei-cloud);
	padding: 2px 8px;
	border-radius: var(--radius-full);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ---- 14.10 CTA band -------------------------------------------------- */
.esei-cta {
	background: linear-gradient(135deg, var(--esei-navy) 0%, var(--esei-teal) 100%);
	color: var(--esei-white);
	padding-block: var(--esei-space-8);
}
@media (min-width: 768px) { .esei-cta { padding-block: var(--esei-space-12); } }

.esei-cta__inner {
	display: grid;
	gap: var(--esei-space-4);
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 900px) {
	.esei-cta__inner { grid-template-columns: 1fr 1fr; gap: var(--esei-space-6); }
}
.esei-cta__heading {
	color: var(--esei-white);
	margin: 0 0 var(--esei-space-1);
	font-size: clamp(24px, 2.4vw + 0.6rem, 36px);
	letter-spacing: -0.02em;
}
.esei-cta__body {
	color: rgba(255,255,255,0.9);
	margin: 0;
	max-width: 40ch;
}
.esei-cta__form {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: var(--radius-md);
	padding: var(--esei-space-3);
	backdrop-filter: blur(4px);
}
.esei-cta__placeholder {
	display: flex;
	flex-direction: column;
	gap: var(--esei-space-1);
}
@media (min-width: 480px) {
	.esei-cta__placeholder { flex-direction: row; }
	.esei-cta__placeholder input { flex: 1; }
}
.esei-cta__placeholder input {
	background: var(--esei-white);
	color: var(--esei-charcoal);
}
.esei-cta__placeholder input:disabled {
	background: rgba(255,255,255,0.9);
	cursor: not-allowed;
}
.esei-cta__placeholder button:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}
.esei-cta__note {
	margin: var(--esei-space-1) 0 0;
	font-size: 12px;
	color: rgba(255,255,255,0.7);
	letter-spacing: 0.02em;
}
.esei-cta__secondary {
	margin: var(--esei-space-2) 0 0;
	font-size: 14px;
}
.esei-cta__secondary a {
	color: var(--esei-white);
	text-decoration: underline;
	text-decoration-color: rgba(255,255,255,0.5);
}
.esei-cta__secondary a:hover {
	text-decoration-color: var(--esei-white);
	color: var(--esei-grad-1);
}

/* Support MC4WP forms dropped into the CTA band — keep them visually aligned. */
.esei-cta__form form { display: flex; flex-direction: column; gap: var(--esei-space-1); }
@media (min-width: 480px) {
	.esei-cta__form form > p:last-of-type { align-self: stretch; }
}

/* ---------------------------------------------------------------------------
   15. Flourishes — editorial + tech signature moves
   Goal: take the homepage from competent to memorable with ~6 surgical moves,
   not density-everywhere motion. Every animation here must:
     • Use existing tokens (never hardcode brand colour).
     • Be wrapped in `@media (prefers-reduced-motion: no-preference)`.
     • Degrade to a safe static state when JS / motion is disabled.
   See `plans/dreamy-swimming-valley.md` for the design rationale.
   --------------------------------------------------------------------------- */

/* 15.1 — (removed) chapter numerals */

/* 15.2 — Clip-path wipe on display headlines
   Filmic title-card reveal. Default state is FULLY VISIBLE — the wipe is an
   enhancement that activates when JS toggles `.is-wiped` on viewport entry
   and motion is not reduced. No JS, no motion → headline just shows. */
@media (prefers-reduced-motion: no-preference) {
	[data-esei-wipe].is-wipe-ready {
		clip-path: inset(0 100% 0 0);
		-webkit-clip-path: inset(0 100% 0 0);
		transition: clip-path 900ms cubic-bezier(.77, 0, .18, 1),
		            -webkit-clip-path 900ms cubic-bezier(.77, 0, .18, 1);
		will-change: clip-path;
	}
	[data-esei-wipe].is-wipe-ready.is-wiped {
		clip-path: inset(0 0 0 0);
		-webkit-clip-path: inset(0 0 0 0);
	}
}

/* 15.3 — Ruler-fill pairs with stat count-up
   1px horizontal hairline under each stat number. Starts at scaleX(0) and
   expands to scaleX(1) in lockstep with the count-up (1200ms). Reduced-motion
   users see a static full-width hairline — no animation. */
.esei-stat__rule {
	display: block;
	height: 1px;
	width: 100%;
	margin-top: var(--esei-space-1);
	background: var(--esei-gradient);
	opacity: 0.35;
	transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
	.esei-stat__rule {
		transform: scaleX(0);
		transition: transform 1200ms var(--esei-ease);
	}
	.esei-stat.is-visible .esei-stat__rule,
	[data-esei-stat-target].is-visible + .esei-stat__rule {
		transform: scaleX(1);
	}
}
/* Lift opacity of the rule when the parent stat is visible for a subtle glow. */
.esei-stat.is-visible .esei-stat__rule { opacity: 0.6; }

/* 15.4 — Gold border beam on featured webinar card
   Single slow conic-gradient sweep, border-only via mask-composite exclude.
   @property lets the angle be interpolated by the keyframes cleanly. */
@property --esei-beam-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}
@keyframes esei-beam-rotate {
	to { --esei-beam-angle: 360deg; }
}
.esei-webinar.is-featured {
	position: relative;
	isolation: isolate;
}
.esei-webinar.is-featured::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 2px;
	background: conic-gradient(
		from var(--esei-beam-angle),
		transparent 0%,
		transparent 70%,
		var(--esei-gold) 85%,
		transparent 100%
	);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	        mask-composite: exclude;
	pointer-events: none;
	opacity: 0.25;
	z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
	.esei-webinar.is-featured::before {
		animation: esei-beam-rotate 18s linear infinite;
	}
}
@media (prefers-reduced-motion: reduce) {
	.esei-webinar.is-featured::before {
		background: linear-gradient(135deg, transparent 30%, var(--esei-gold) 50%, transparent 70%);
		opacity: 0.2;
	}
}

/* 15.5 — Ambient noise overlay
   Inline SVG feTurbulence at ~3% opacity. Added inside Hero + CTA Band
   background layers to give Navy flats analog depth. No motion, no HTTP. */
.esei-noise {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.035;
	mix-blend-mode: overlay;
	z-index: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	background-size: 240px 240px;
}
.esei-hero .esei-noise,
.esei-cta .esei-noise {
	/* Sit above gradient backdrop but below content. */
	z-index: 0;
}

/* 15.6 — Texas silhouette scroll-drift
   The hero wordmark/silhouette gets a gentle horizontal translate tied to
   scroll inside the hero. `--hero-scroll` is set by reveal.js (range 0→1). */
[data-esei-hero] { --hero-scroll: 0; }
@media (prefers-reduced-motion: no-preference) {
	[data-esei-hero] .esei-hero__bg-wordmark {
		/* Preserve the translateY(-50%) centering from .esei-hero__bg-wordmark
		   while applying the horizontal scroll-drift on top of it. */
		transform: translate3d(calc(var(--hero-scroll) * 40px - 20px), -50%, 0);
		will-change: transform;
		transition: transform 120ms linear;
	}
}

/* 15.7 — Scroll progress indicator
   2px gradient hairline fixed to the top of the viewport. Width is the
   scroll percent. Set by reveal.js via `--esei-scroll-progress`. */
.esei-scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	width: 100%;
	transform: scaleX(var(--esei-scroll-progress, 0));
	transform-origin: left center;
	background: var(--esei-gradient);
	z-index: 1000;
	pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
	.esei-scroll-progress {
		transition: transform 80ms linear;
	}
}

/* 15.8 — Gold CTA hover shimmer
   A 120% linear-gradient pass across primary buttons on hover. Masked to the
   button shape; only triggers on pointer-capable devices under normal motion. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.esei-btn--primary {
		position: relative;
		overflow: hidden;
		isolation: isolate;
	}
	.esei-btn--primary::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			120deg,
			transparent 0%,
			transparent 40%,
			rgba(255, 255, 255, 0.35) 50%,
			transparent 60%,
			transparent 100%
		);
		transform: translateX(-120%);
		pointer-events: none;
		z-index: 0;
	}
	.esei-btn--primary:hover::after {
		transform: translateX(120%);
		transition: transform 600ms var(--esei-ease);
	}
	/* Keep label/icon above the shimmer layer. */
	.esei-btn--primary > * { position: relative; z-index: 1; }
}

/* 15.9 — Footer gradient hairline
   Mirrors the stats-strip treatment to bookend the page. 2px gradient line
   flush against the top edge of the footer. */
.esei-footer {
	position: relative;
}
.esei-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--esei-gradient);
	opacity: 0.9;
}

/* 15.10 — Blur-fade image reveal
   Images enter with a soft blur + slight scale that resolves as the element
   becomes visible. Extends the existing IntersectionObserver. */
.esei-image--reveal {
	filter: blur(0);
	transform: none;
}
@media (prefers-reduced-motion: no-preference) {
	.esei-image--reveal {
		filter: blur(16px);
		transform: scale(1.02);
		opacity: 0;
		transition:
			filter 800ms var(--esei-ease),
			transform 800ms var(--esei-ease),
			opacity 800ms var(--esei-ease);
		will-change: filter, transform, opacity;
	}
	.esei-image--reveal.is-visible {
		filter: blur(0);
		transform: none;
		opacity: 1;
	}
}

/* ---------------------------------------------------------------------------
   16. Movement — logo-inspired motion layer
   Two coordinated moves that add life without clutter:
     • 16.1 Stats dot-grid pan — subtle engineering texture under the numbers
     • 16.2 Gradient-fill section headings — brand gradient becomes typographic
   (16.3 triple-line divider + 16.4 hero gradient bands removed per feedback.)
   All motion gated behind `prefers-reduced-motion: no-preference`.
   --------------------------------------------------------------------------- */

/* 16.1 — Stats dot-grid pan
   Radial-dot pattern (1px silver dots on 48px grid) panning diagonally at a
   slow rate. Sits BELOW `.esei-container` (z:1) and uses ::after because
   `.esei-stats::before` already owns the top gradient hairline. */
.esei-stats > .esei-container { position: relative; z-index: 1; }
.esei-stats::after {
	content: "";
	position: absolute;
	inset: -48px; /* overflow so the pan animation never shows hard edges */
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
	background-size: 48px 48px;
	z-index: 0;
	pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
	.esei-stats::after {
		animation: esei-grid-pan 30s linear infinite;
		will-change: background-position;
	}
}
@keyframes esei-grid-pan {
	from { background-position: 0 0; }
	to   { background-position: 48px 48px; }
}

/* 16.2 — Gradient-fill section headings
   Every section h2 picks up the brand gradient as its text fill. Inherits the
   existing type scale — we're only restyling the fill, not the layout. */
.esei-stats__heading,
.esei-twocol__heading,
.esei-webinars__heading,
.esei-cta__heading {
	background: var(--esei-gradient);
	-webkit-background-clip: text;
	        background-clip: text;
	-webkit-text-fill-color: transparent;
	        color: transparent;
	/* Preserve visible fallback for older rendering engines / print. */
	background-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.esei-stats__heading,
	.esei-twocol__heading,
	.esei-webinars__heading,
	.esei-cta__heading {
		color: var(--esei-grad-2);
		-webkit-text-fill-color: currentColor;
	}
}

/* 16.4 — (removed) Hero gradient bands — couldn't get them to read well on
   top of the existing hero bg + noise + wordmark layers. Revisit later. */