/* =============================================================================
   AESON POWER — SITE DESIGN SYSTEM
   -----------------------------------------------------------------------------
   Rebuilt from the live-site harvest (_harvest/frontend/DESIGN-NOTES.md +
   _harvest/wpcode-snippets/*). The live site runs TWO co-existing visual
   languages and this file keeps both:

     1. "Light chrome"  — white/#f2f2f2 marketing rows, BB theme defaults,
        #2b7bb9/#2F6BFF link-blue, dark-gray body copy. Used for header,
        footer, static content rows, headings, hero badges.
     2. "Dark modules"  — near-black navy gradient cards (#0A0F1C → #03060f)
        with electric-blue/cyan accents (#0066FF/#006CFF, #00D4FF/#00D9FF).
        Used for the four bespoke shortcode modules: product catalog,
        product detail, dealer directory, dealer map.

   Fidelity rule: this is a port, not a redesign. Every hex/spacing value below
   was taken verbatim from the harvested WPCode DB snippets (preferred source;
   cross-checked byte-identical against the inline <style class="wpcode-css-
   snippet"> blocks in _harvest/frontend/html/*.html — no drift found). Tiny
   per-module colour differences (e.g. product-detail's #0066FF primary vs
   catalog/dealers/map's #006CFF) are REAL and preserved via per-module CSS
   custom properties layered on the shared --aeson-* tokens below, exactly as
   harvested. See _harvest/frontend/DESIGN-BUILD-PLAN.md for the page-by-page
   assembly plan and any open questions.

   Reference layer (byte-faithful, unmodified originals) lives in
   _harvest/frontend/extracted/ — consult it if anything here looks wrong.
   ============================================================================= */


/* =============================================================================
   1. FONT FACES
   -----------------------------------------------------------------------------
   Self-hosted "Helvetica Neue LT Pro" (commercial condensed family), verbatim
   weight/stretch map from wpcode-snippets/1163-Helvetica-Neue-LT-Pro.php.
   Files copied to public/fonts/ (7 woff2s). The harvest also had a duplicate
   .otf @font-face set at odd weights (250/275/750 etc) — dead leftover
   registration, intentionally NOT reproduced here (per DESIGN-NOTES.md §2).
   ============================================================================= */
@font-face {
	font-family: 'Helvetica Neue LT Pro';
	src: url('/fonts/HelveticaNeueLTPro-Roman.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Helvetica Neue LT Pro';
	src: url('/fonts/HelveticaNeueLTPro-Lt.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Helvetica Neue LT Pro';
	src: url('/fonts/HelveticaNeueLTPro-Th.woff2') format('woff2');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Helvetica Neue LT Pro';
	src: url('/fonts/HelveticaNeueLTPro-UltLt.woff2') format('woff2');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Helvetica Neue LT Pro';
	src: url('/fonts/HelveticaNeueLTPro-Cn.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-stretch: condensed;
	font-display: swap;
}
@font-face {
	font-family: 'Helvetica Neue LT Pro';
	src: url('/fonts/HelveticaNeueLTPro-HvCn.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-stretch: condensed;
	font-display: swap;
}
@font-face {
	font-family: 'Helvetica Neue LT Pro';
	src: url('/fonts/HelveticaNeueLTPro-BlkCn.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-stretch: condensed;
	font-display: swap;
}


/* =============================================================================
   2. DESIGN TOKENS
   -----------------------------------------------------------------------------
   2026-07-23 (restyle) — "Deep Ocean" pass. The former "light chrome" palette
   (white/#f2f2f2 rows, #757575 body copy) is retired site-wide per Rick's
   explicit no-white-anywhere directive — every public page is now built on a
   dark navy system that bridges the client's light-blue brand accent with the
   existing dark shortcode modules below. The four dark modules' OWN tokens
   (--dark, --dark-2, --dark-3, --dark-grad-N, --aeson-N; §7 below) are left
   completely untouched — this pass only retargets the tokens used by chrome
   (header/footer/nav), static content rows, and the hand-authored page
   templates. See _harvest/TEMPLATE-BUILD-NOTES.md for the full write-up.
   ============================================================================= */
:root {
	/* ---- fonts ---- */
	/* "site" = BB rows / nav / headings / static content (harvested fallback stack) */
	--font-site: 'Helvetica Neue LT Pro', Helvetica, Arial, sans-serif;
	/* "module" = the 4 dark app-like shortcode modules. The old WP site declared
	   Inter here but never actually loaded it (its Google Fonts link had an empty
	   family param — DESIGN-NOTES.md §2), so those modules silently rendered in
	   whatever system-ui the visitor's OS supplied: a second, uncontrolled
	   typeface. Pointed at the site family so the whole front end is one
	   corporate face (Scott's own question, CLIENT-REQUESTS-STATUS 1.1). To go
	   back to a true two-face design, self-host Inter and restore it here. */
	--font-module: var(--font-site);

	/* ---- "Deep Ocean" site chrome palette (replaces the old light-chrome set) ---- */
	--paper: #05121d;          /* base page ground — very deep blue-black */
	--ocean-2: #07293c;        /* alt-band wash stop */
	--ocean-3: #00263e;        /* alt-band wash stop */
	--ocean-4: #0a3a54;        /* alt-band wash stop (lightest) */
	--white: #ffffff;          /* rare true-white utility value — never used as a bg */
	--text: rgba(233, 244, 250, .75);
	--text-muted: rgba(233, 244, 250, .5);
	--heading: #e9f4fa;
	--link: #5bc2e7;
	--link-hover: #a8dff2;
	--brand-sky: #5bc2e7;      /* ap-primary-colour */
	--brand-sky-light: #a8dff2;
	--brand-sky-mid: #4fa9cd;
	--brand-navy: #00263e;     /* ap-secondary-colour */
	--ap-gray: rgba(255, 255, 255, .12);
	--ap-dark: #0a3a54;

	/* ---- glass surface system (cards/panels on the dark chrome) ---- */
	--surface-glass: rgba(13, 50, 71, .55);
	--surface-glass-2: rgba(18, 58, 82, .65);
	--surface-border: rgba(255, 255, 255, .10);
	--surface-border-strong: rgba(255, 255, 255, .14);
	--surface-shadow: 0 18px 45px rgba(0, 0, 0, .38);
	--surface-shadow-hover: 0 24px 60px rgba(0, 0, 0, .48);

	/* ---- hero-badge / glass-pill accent (sky, not the old blue) ---- */
	--badge-blue: #5bc2e7;
	--badge-bg: rgba(91, 194, 231, .10);
	--badge-border: rgba(91, 194, 231, .4);

	/* ---- ss-gradient-heading (light gradient reads fine on the dark ground — kept) ---- */
	--gradient-heading: linear-gradient(90deg, #5BC2E7 0%, #ccdee6 100%);

	/* ---- dark-module shared palette ---- */
	/* base navy bg used by every dark module card/section */
	--dark: #0A0F1C;
	--dark-2: #151B2E;
	--dark-3: #1F2937;
	--dark-line: rgba(255, 255, 255, .08);
	--dark-muted: rgba(255, 255, 255, .62);
	--dark-text: #ffffff;

	/* radial vignette recipe shared by all 4 dark modules (exact stops vary
	   slightly per module — each module below sets its own background using
	   these three stop colours) */
	--dark-grad-1: #0a1730;
	--dark-grad-2: #050b18;
	--dark-grad-3: #03060f;

	/* 2026-07-28 (brand-colour consolidation) — Trello "Revisit the branding
	   colours and apply it site wide": "Please note that there is no #0166FF
	   colour in the branding". Correct: the official VI (Aeson Power
	   Branding.pdf) carries exactly TWO colours, PANTONE 2985C #5bc2e7 and
	   2965C #00263e. The electric-blue/cyan family below (#0066FF / #006CFF /
	   #156DFF / #1573ff / #00D4FF / #00D9FF) was inherited from the old WP
	   site's dark shortcode modules and was never brand-approved — it is the
	   third of the three co-existing blue systems DESIGN-NOTES.md §1 flagged
	   and CLIENT-REQUESTS-STATUS.md 1.2 asked the client to rule on. He has
	   now ruled. The token NAMES are kept (four modules and dozens of rules
	   reference them) but they now resolve to the VI colour and two tints of
	   it, so the whole front end runs on one palette.

	   Anything sitting ON a --aeson-primary fill must use --on-brand for its
	   text: #5bc2e7 is a LIGHT colour and white-on-sky is ~1.9:1. Navy on sky
	   is ~8.9:1. Every fill rule below was updated accordingly. */
	--aeson-primary: #5bc2e7;        /* VI PANTONE 2985C — solid fills (buttons, active pills) */
	--aeson-primary-2: #5bc2e7;      /* was a 1-digit-different blue per module; no longer meaningful */
	--aeson-bright: #86d5f0;         /* lighter 2985C tint — hover-bright */
	--aeson-bright-pd: #86d5f0;      /* product-detail hover-bright (same tint; the old split was harvest noise) */
	--aeson-accent: #a8dff2;         /* lightest 2985C tint (= --brand-sky-light) — eyebrows, hairlines, icons */
	--aeson-accent-2: #a8dff2;       /* WP "aeson-accent" preset equivalent */
	--on-brand: #00263e;             /* VI PANTONE 2965C — the ONLY text colour to use on a --aeson-primary fill */

	/* ---- radii ---- */
	--radius-card: 22px;
	--radius-card-lg: 24px;
	--radius-btn: 10px;
	--radius-pill: 999px;

	/* ---- shadows ---- */
	--shadow-card-hover: 0 18px 45px rgba(0, 0, 0, .48);
	--shadow-modal: 0 40px 110px rgba(0, 0, 0, .75), 0 0 0 1px rgba(91, 194, 231, .08);
	--shadow-map: 0 30px 80px rgba(0, 0, 0, .55);

	/* ---- layout ---- */
	--container: 1140px;
	--container-narrow: 1100px;

	/* ---- motion ----
	   Hover motion on the harvested modules is asymmetric (fast-in via
	   transition on :hover, no explicit leave timing) EXCEPT the older dark
	   style-guide snapshot (stuff/design-reference) which calls for symmetric
	   ease in/out 0.35–0.5s on the base state — the live site already does
	   this correctly (transition declared on the base selector, not just
	   :hover), so --ease below applies both directions by default. */
	--ease: cubic-bezier(.22, 1, .36, 1);
	--dur-fast: .25s;
	--dur-base: .35s;
	--dur-slow: .45s;
	--dur-slower: .5s;
	--flip-ms: 450ms;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}


/* =============================================================================
   3. BASE / RESET + LIGHT CHROME
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; color-scheme: dark; }

body {
	margin: 0;
	/* soft radial washes over the flat ground per the Deep Ocean recipe —
	   never a flat single-colour fill on its own */
	background:
		radial-gradient(1400px 900px at 12% -8%, rgba(91, 194, 231, .06), transparent 60%),
		radial-gradient(1100px 800px at 100% 8%, rgba(79, 169, 205, .05), transparent 55%),
		var(--paper);
	background-attachment: fixed;
	color: var(--text);
	font-family: var(--font-site);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* height:auto is load-bearing — every <img> carries width/height attributes (good:
   they reserve layout space and stop CLS), but without this the attribute height
   survives while max-width shrinks the width, and the image renders distorted.
   Rules that deliberately size an image in both axes (object-fit covers/contains
   below) are more specific and still win. NEVER contort an image's aspect ratio. */
img, svg, video { max-width: 100%; display: block; }
img, video { height: auto; }

a { color: var(--link); text-decoration: underline; text-decoration-color: rgba(91, 194, 231, .35); transition: color var(--dur-base) ease, text-decoration-color var(--dur-base) ease; }
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--brand-sky);
	outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--heading);
	font-family: var(--font-site);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 .5em;
}

/* WP preset font-size scale (harvested: small/medium/large/x-large) */
.has-small-font-size  { font-size: 13px; }
.has-medium-font-size { font-size: 20px; }
.has-large-font-size  { font-size: 36px; }
.has-x-large-font-size{ font-size: 42px; }

/* ---- container ----
   BB fixed-width container. Harvest shows 1100–1140px depending on row;
   default to the wider figure and let component modules opt into the
   narrower 1100px via --container-narrow where the original CSS used it
   (all 4 dark modules use max-width:1100px explicitly, see §5). */
.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 20px;
}

/* =============================================================================
   4. HEADER / FOOTER SKELETON CLASSES
   -----------------------------------------------------------------------------
   Named to match the harvested BB structure (DESIGN-NOTES.md §3/§4) so the
   template-assembly agent can reuse them directly. Sticky white header,
   3-column row (logo / nav / Na+ badge — there is no header CTA button).
   Global BB footer: 3 columns + bottom bar.
   ============================================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: rgba(5, 18, 29, .78);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	transition: background-color var(--dur-base) ease, border-color var(--dur-base) ease;
}
.site-header .container {
	display: flex;
	align-items: center;
	gap: 24px;
	padding-top: 14px;
	padding-bottom: 14px;
}
/* Wider than the body --container: at 1140px the eight nav items plus the logo
   and the Na+ badge overflowed by ~30px, so the nav wrapped to a second row
   ("Contact Us" alone underneath). A wrapped nav also breaks the mega panel,
   which anchors to the bottom of .site-header__nav and assumes that edge is
   the bottom of the single row of triggers. */
.site-header .container { max-width: 1320px; }
/* 2026-07-28 — the ten nav items measured 1070px wide, which with the logo
   (124), the Na+ badge (56) and two 24px gaps came to 1298px inside a 1280px
   content box: the row overflowed the container and pushed the badge past the
   viewport edge, giving every page a horizontal scrollbar below ~1320px. Two
   fixes, both needed: compress the row's own metrics between 1180 and 1400px,
   and hand over to the hamburger below 1180px (was 992px) because ten items
   simply do not fit under that width at any sane padding. */
.site-header__logo { flex: 0 0 auto; }
.site-header__logo img { height: 48px; width: auto; }

/* ---- "Oceania Region" picker (client note 1.4) ----------------------------
   Lives under the logo, so it adds header HEIGHT, not row width (see the
   overflow note above). Follows the mega-menu rule to the letter: the panel is
   a child of the hover container at top:100% with NO margin and NO top offset;
   the visual drop is the wrapper's own transparent padding-top, which still
   hit-tests. Never introduce `top: calc(100% + Npx)` or a margin here — that
   reopens the dead band and the list drops as the pointer travels down. */
.region-picker { position: relative; margin-top: 4px; }
.region-picker__btn {
	display: inline-flex; align-items: center; gap: 6px;
	background: transparent; border: 0; padding: 2px 0; cursor: pointer;
	color: var(--text-muted); font-family: var(--font-site); font-size: 11.5px;
	font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
	transition: color var(--dur-base) var(--ease);
}
.region-picker__chev { font-size: 9px; transition: transform var(--dur-fast) var(--ease); }
.region-picker:hover .region-picker__btn,
.region-picker.is-hover .region-picker__btn,
.region-picker__btn:focus-visible { color: var(--brand-sky); }
.region-picker:hover .region-picker__chev, .region-picker.is-hover .region-picker__chev { transform: rotate(180deg); }
.region-picker__panel {
	position: absolute; top: 100%; left: 0; z-index: 60;
	padding-top: 12px;
	opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px);
	transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility var(--dur-base);
}
.region-picker:hover > .region-picker__panel,
.region-picker.is-hover > .region-picker__panel,
.region-picker:focus-within > .region-picker__panel {
	opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
/* Opaque, NOT translucent: .site-header already owns a backdrop-filter and a
   nested one renders semi-transparent in Chrome regardless of declared alpha. */
.region-picker__inner {
	background: linear-gradient(180deg, #0a2a3d 0%, #06202f 100%);
	border: 1px solid var(--surface-border-strong); border-radius: 14px;
	box-shadow: var(--surface-shadow); padding: 12px 14px; min-width: 430px;
}
.region-picker__inner ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 18px; }
.region-picker__inner li { break-inside: avoid; }
.region-picker__inner a {
	display: block; padding: 5px 8px; border-radius: 7px; font-size: 13px;
	color: var(--text); text-decoration: none; white-space: nowrap;
	transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.region-picker__inner a:hover, .region-picker__inner a:focus-visible { color: var(--heading); background: rgba(91, 194, 231, .14); }
@media (max-width: 1179px) {
	/* Mobile: the header row wraps and the flyout owns navigation, so the panel
	   opens under the logo as a plain block instead of a floating card. */
	.region-picker__inner { min-width: 0; }
	.region-picker__panel { left: 0; right: auto; }
}
@media (max-width: 520px) {
	.region-picker__inner { min-width: 0; width: calc(100vw - 48px); }
	.region-picker__inner ul { columns: 1; max-height: 44vh; overflow-y: auto; }
}

.site-header__nav { flex: 1 1 auto; position: relative; }
.site-header__badge { flex: 0 0 auto; }

/* Scoped through `.site-header` so it outranks the base `.site-nav a`
   padding declared further down the file — specificity, not source order. */
@media (min-width: 1180px) and (max-width: 1400px) {
	.site-header .container { gap: 14px; }
	.site-header .site-nav { gap: 0; }
	.site-header .site-nav a { padding-left: 8px; padding-right: 8px; }
}


.site-nav { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.site-nav li { position: relative; }
.site-nav a {
	display: block;
	padding: 10px 12px;
	border-radius: 8px;
	color: var(--heading);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--dur-base) ease, background-color var(--dur-base) ease;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--link); background: rgba(91, 194, 231, .08); }
.site-nav .has-submenu > ul.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	/* opaque for the same nested-backdrop-root reason as .site-nav__mega-inner */
	background: linear-gradient(180deg, #0e2c40 0%, #071a28 100%);
	border: 1px solid var(--surface-border);
	box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
	border-radius: 14px;
	padding: 6px;
	display: none;
	list-style: none;
	margin: 0;
	z-index: 50;
}
.site-nav .has-submenu:hover > ul.sub-menu,
.site-nav .has-submenu.is-hover > ul.sub-menu,
.site-nav .has-submenu:focus-within > ul.sub-menu { display: block; }
.site-nav .has-submenu > ul.sub-menu a { padding: 8px 12px; border-radius: 8px; }
.site-nav .has-submenu > ul.sub-menu a:hover { background: rgba(91, 194, 231, .10); }

/* ---------------------------------------------------------------------------
   PRODUCT SERIES MEGA MENU

   THE GAP RULE — read before editing any of the three properties marked below.
   The panel wrapper sits at `top: 100%` with NO margin and NO top offset, so
   its box begins on exactly the pixel the trigger row ends. The visual drop to
   the card is produced by the wrapper's own `padding-top`, which is transparent
   but still hit-tests — so a pointer travelling straight down from the trigger
   is never over dead space and the menu cannot flicker shut mid-journey.
   Do NOT "tidy" this into `top: calc(100% + 14px)` or a margin-top; either one
   opens a real dead band and the menu becomes unusable with a mouse.
   Diagonal travel (out the side of the trigger and back in) is covered
   separately by the close-delay in public/js/site.js.
   --------------------------------------------------------------------------- */
.site-nav .has-mega { position: static; }		/* anchor the panel to the nav, not the narrow trigger */
.site-nav__mega {
	position: absolute;
	top: 100%;					/* GAP RULE: no offset */
	left: 0; right: 0;
	margin: 0;					/* GAP RULE: no margin */
	padding-top: 14px;			/* GAP RULE: the drop is padding, and padding is hoverable */
	z-index: 60;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-6px);
	transition: opacity var(--dur-base) ease, transform var(--dur-base) ease, visibility 0s linear var(--dur-base);
}
.site-nav .has-mega:hover > .site-nav__mega,
.site-nav .has-mega.is-hover > .site-nav__mega,
.site-nav .has-mega:focus-within > .site-nav__mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition-delay: 0s;
}
/* OPAQUE, and deliberately NOT backdrop-filtered. .site-header already carries
   `backdrop-filter: blur(16px) saturate(1.4)`, which makes it a backdrop root;
   a descendant with its own backdrop-filter then gets mis-composited by Chrome
   and renders semi-transparent no matter what alpha its background declares —
   the hero copy underneath was legible straight through a 97%-opaque panel.
   A flat opaque gradient fixes it and loses nothing: at that alpha the blur
   was never visible anyway. Don't reintroduce backdrop-filter here. */
.site-nav__mega-inner {
	background: linear-gradient(180deg, #0e2c40 0%, #071a28 100%);
	border: 1px solid var(--surface-border-strong);
	box-shadow: 0 28px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(91, 194, 231, .06);
	border-radius: 18px;
	padding: 18px;
}
.mega-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
/* Scoped under .site-nav (0,2,0) so these beat the generic `.site-nav a`
   (0,1,1) rules for display/padding/white-space without reaching for
   !important — an unscoped `.mega-card` (0,1,0) silently loses that cascade
   and the card collapses back to a block, stacking art above text. */
.site-nav .mega-card {
	display: flex; align-items: center; gap: 14px;
	padding: 10px 12px;
	border-radius: 14px;
	border: 1px solid transparent;
	white-space: normal;
	transition: background-color var(--dur-base) ease, border-color var(--dur-base) ease, transform var(--dur-base) ease;
}
.site-nav .mega-card:hover, .site-nav .mega-card:focus-visible, .site-nav .mega-card[aria-current="page"] {
	background: rgba(91, 194, 231, .10);
	border-color: rgba(91, 194, 231, .32);
	transform: translateY(-2px);
}
/* Fixed-size art box with object-fit:contain — the product photos are
   transparent PNGs of varying dimensions and must never be stretched to fit.
   See the aspect-ratio rule at the top of this file. */
.mega-card__art {
	flex: 0 0 auto;
	width: 96px; height: 64px;
	display: grid; place-items: center;
	border-radius: 12px;
	background: radial-gradient(120% 100% at 50% 0%, rgba(91, 194, 231, .12) 0%, rgba(255, 255, 255, .04) 60%);
	border: 1px solid rgba(255, 255, 255, .06);
	overflow: hidden;
	transition: border-color var(--dur-base) ease;
}
.site-nav .mega-card:hover .mega-card__art { border-color: rgba(91, 194, 231, .28); }
.mega-card__art img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.mega-card__mark {
	font-size: 17px; font-weight: 800; letter-spacing: .06em;
	color: var(--link); opacity: .8;
}
/* Applications mega: icon cards instead of product photography — square
   badge, stroke SVG in the brand accent. 8 apps -> a tighter 4-col grid. */
.mega-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mega-card__art--icon { width: 52px; height: 52px; color: var(--link); }
.mega-card__art--icon svg { width: 27px; height: 27px; display: block; }
.site-nav .mega-card:hover .mega-card__art--icon { color: var(--heading); }
.mega-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega-card__name { font-weight: 600; font-size: 15px; color: var(--heading); line-height: 1.25; }
.mega-card__meta { font-size: 12px; color: var(--text-muted); }
.mega-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--surface-border); }
.site-nav .mega-foot a {
	display: inline-block;
	padding: 4px 2px;
	font-size: 14px; font-weight: 600; color: var(--link);
}
.site-nav .mega-foot a:hover { background: transparent; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	.site-nav__mega { transition: none; transform: none; }
	.site-nav .has-mega:hover > .site-nav__mega,
	.site-nav .has-mega.is-hover > .site-nav__mega,
	.site-nav .has-mega:focus-within > .site-nav__mega { transform: none; }
	.mega-card:hover, .mega-card:focus-visible { transform: none; }
}
@media (max-width: 1200px) {
	.site-nav a { padding: 10px 9px; font-size: 15px; }
	.mega-card__art { width: 70px; height: 48px; }
	.mega-card__art--icon { width: 46px; height: 46px; }
}

/* mobile hamburger (flyout push, per harvest) — template agent supplies the
   open/close JS; these are just the visual base states */
.site-nav-toggle { display: none; }
@media (max-width: 1179px) {
	.site-nav-toggle { display: inline-flex; }
	.site-header__nav { display: none; }
}

.site-footer {
	background:
		radial-gradient(1100px 500px at 15% 0%, rgba(91, 194, 231, .05), transparent 60%),
		linear-gradient(180deg, rgba(7, 41, 60, .55) 0%, rgba(5, 18, 29, .96) 100%);
	border-top: 1px solid rgba(255, 255, 255, .08);
	color: var(--text);
	padding: 56px 0 0;
}
.site-footer .container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}
.site-footer h3 { font-size: 16px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--text); text-decoration: none; }
.site-footer a:hover { color: var(--link); }
.site-footer__icon-list { display: flex; flex-direction: column; gap: 10px; }
.site-footer__social { display: flex; gap: 12px; margin-top: 16px; }
.site-footer__bottom {
	margin-top: 40px;
	padding: 20px 24px;
	font-size: 13px;
	color: var(--text-muted);
	border-top: 1px solid rgba(255, 255, 255, .08);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 14px 24px;
	max-width: var(--container); margin-inline: auto;
}
/* NitroCore build credit. height:auto is implicit via the global reset, but the
   explicit width:auto matters: the mark carries width/height attributes and we
   size it off height, so width must be free to follow. */
.site-footer__credit { display: inline-flex; align-items: center; gap: 8px; }
.site-footer__credit a { display: inline-flex; align-items: center; line-height: 0; }
.site-footer__credit img {
	height: 24px; width: auto;
	filter: saturate(1);
	transition: filter var(--dur-slow, 420ms) ease, opacity var(--dur-slow, 420ms) ease;
}
.site-footer__credit a:hover img, .site-footer__credit a:focus-visible img { filter: saturate(0); opacity: .85; }
/* Staff-only admin door in the bottom bar (Trello "Add admin button on the
   footer"). Sits between the copyright and the build credit; quiet until
   hovered so it never competes with the client's own footer content. */
.site-footer__admin {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 6px 13px; border-radius: var(--radius-pill);
	border: 1px solid var(--surface-border); color: var(--text-muted);
	font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	text-decoration: none; transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
}
.site-footer__admin:hover, .site-footer__admin:focus-visible {
	color: var(--brand-sky); border-color: var(--badge-border); background: var(--badge-bg);
}
@media (max-width: 600px) {
	.site-footer__bottom { justify-content: center; text-align: center; }
}
@media (max-width: 767px) {
	.site-footer .container { grid-template-columns: 1fr; gap: 28px; }
}


/* =============================================================================
   5. HERO PATTERNS
   ============================================================================= */
/* hero-badge — verbatim port of wpcode-snippets/622-STYLE---Pill-Badge-Label.css */
.hero-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	padding: 10px 28px;
	min-height: 0;
	border-radius: var(--radius-pill);
	border: 1px solid var(--badge-border);
	background: var(--badge-bg);
	color: var(--badge-blue);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.1;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	box-sizing: border-box;
	margin: 0 auto;
}

/* ss-gradient-heading — verbatim port of wpcode-snippets/628, CURRENT light
   gradient (#5BC2E7 -> #ccdee6). The stuff/design-reference dark snapshot's
   gradient is superseded — do not use it. */
.ss-gradient-heading {
	background: var(--gradient-heading);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
	display: inline-block;
}

/* full-bleed video hero (home) / photo hero (interior pages) skeleton */
.hero-row {
	position: relative;
	overflow: hidden;
	color: var(--white);
	display: flex;
	align-items: center;
	min-height: 60vh;
	padding: 100px 20px;
}
.hero-row__bg { position: absolute; inset: 0; z-index: 0; }
.hero-row__bg video, .hero-row__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-row__overlay { position: absolute; inset: 0; z-index: 1; background: rgba(0, 20, 40, .55); }
.hero-row__content { position: relative; z-index: 2; max-width: var(--container); margin: 0 auto; width: 100%; }
.hero-row--interior { min-height: 34vh; padding: 64px 20px; }


/* =============================================================================
   6. BUTTONS
   ============================================================================= */
/* BB default button (.fl-button) — used sparingly (series page "View
   Specifications"), right-aligned trailing-arrow icon variant */
.fl-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--link);
	color: var(--white);
	text-decoration: none;
	font-weight: 400;
	font-size: 15px;
	padding: 12px 24px;
	border-radius: var(--radius-btn);
	border: 0;
	transition: background-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.fl-button:hover { background: var(--brand-navy); transform: translateY(-1px); color: var(--white); }

/* Aeson dark-module solid + ghost buttons — generic reusable versions of
   .aeson-pd-btn / .aeson-dl-btn for use outside the modules if needed.
   Inside the modules themselves, the module-scoped selectors in §7 win. */
.aeson-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--aeson-primary);
	color: var(--on-brand);
	text-decoration: none;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	padding: 13px 26px;
	border: 0;
	border-radius: var(--radius-btn);
	transition: background-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.aeson-btn:hover { background: var(--aeson-bright-pd); transform: translateY(-1px); color: var(--on-brand); }
.aeson-btn--ghost {
	background: transparent;
	border: 1px solid var(--brand-sky);
	color: var(--brand-sky-light);
	transition: background-color var(--dur-base) ease, border-color var(--dur-base) ease, color var(--dur-base) ease, transform var(--dur-fast) ease;
}
.aeson-btn--ghost:hover { background: rgba(91, 194, 231, .12); border-color: var(--brand-sky-light); color: #fff; transform: translateY(-1px); }
.aeson-btn__arr { transition: transform var(--dur-fast) ease; }
.aeson-btn:hover .aeson-btn__arr { transform: translateX(3px); }

/* Category/feature pill button base (see .aeson-cat-pill in §7 for the live
   catalog-scoped version; this is the reusable form) */
.aeson-pill {
	cursor: pointer;
	background: transparent;
	border: 1px solid var(--dark-line);
	border-radius: var(--radius-pill);
	color: var(--dark-muted);
	padding: 9px 18px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	transition: color var(--dur-base) ease, background-color var(--dur-base) ease, border-color var(--dur-base) ease;
}
.aeson-pill:hover { color: #fff; border-color: rgba(255, 255, 255, .25); }
.aeson-pill.is-active { color: var(--on-brand); background: var(--aeson-primary-2); border-color: var(--aeson-primary-2); }


/* =============================================================================
   7. DARK MODULES
   -----------------------------------------------------------------------------
   Ported onto the token system from wpcode-snippets/1009/1024/1037/1047
   (verbatim reference copies live in _harvest/frontend/extracted/). Class
   names and DOM structure are preserved exactly so the template-assembly
   agent can reuse the harvested markup from _harvest/frontend/html/*.html
   almost as-is — only the data-source (PHP loop -> server-rendered EJS loop)
   changes.
   ============================================================================= */

/* -----------------------------------------------------------------------
   7a. Product Catalog — .aeson-catalog  (shortcode [aeson_product_grid])
   Search + category pills (single-select) + feature checkboxes (AND) +
   A-Z/Z-A sort + FLIP reorder animation + live result counter.
   ----------------------------------------------------------------------- */
.aeson-catalog {
	--ac-primary: var(--aeson-primary-2);
	--ac-bright: var(--aeson-bright);
	--ac-accent: var(--aeson-accent);
	--ac-dark: var(--dark);
	--ac-dark2: var(--dark-2);
	--ac-line: var(--dark-line);
	--ac-text: #fff;
	--ac-muted: var(--dark-muted);
	color: var(--ac-text);
	font-family: var(--font-module);
	max-width: var(--container-narrow);
	margin: 0 auto;
}
.aeson-catalog * { box-sizing: border-box; }

.aeson-cat-search { flex: 1 1 240px; }
.aeson-catalog .aeson-cat-q {
	width: 100%; background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 12px !important;
	color: #fff !important; padding: 14px 16px !important; font-size: 15px !important; line-height: 1.3 !important; outline: none !important;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25) !important; transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease !important;
}
.aeson-catalog .aeson-cat-q:focus { background: rgba(91, 194, 231, .08) !important; border-color: var(--ac-accent) !important; box-shadow: 0 0 0 3px rgba(168, 223, 242, .18) !important; }
.aeson-catalog .aeson-cat-q::placeholder { color: rgba(255, 255, 255, .42) !important; opacity: 1 !important; }
.aeson-cat-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.aeson-cat-pill {
	cursor: pointer; background: transparent; border: 1px solid var(--ac-line); border-radius: var(--radius-pill);
	color: var(--ac-muted); padding: 9px 18px; font-size: 14px; font-weight: 600; line-height: 1;
	transition: color var(--dur-base) ease, background-color var(--dur-base) ease, border-color var(--dur-base) ease;
}
.aeson-cat-pill:hover { color: var(--ac-text); border-color: rgba(255, 255, 255, .25); }
.aeson-cat-pill.is-active { color: var(--on-brand); background: var(--ac-primary); border-color: var(--ac-primary); }
.aeson-cat-tools { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.aeson-catalog .aeson-cat-sort {
	background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 12px !important;
	color: #fff !important; padding: 12px 14px !important; font-size: 14px !important; cursor: pointer; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25) !important;
}
.aeson-cat-features { position: relative; }
.aeson-catalog .aeson-cat-features > summary {
	cursor: pointer; list-style: none; background: rgba(255, 255, 255, .05) !important;
	border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 12px !important; padding: 12px 16px !important; font-size: 14px !important; font-weight: 600 !important; color: #fff !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25) !important;
}
.aeson-cat-features > summary::-webkit-details-marker { display: none; }
.aeson-cat-feature-list {
	position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: 300px; max-height: 340px;
	overflow: auto; background: #0d1424; border: 1px solid var(--ac-line); border-radius: 14px; padding: 14px;
	display: grid; gap: 8px; box-shadow: 0 18px 45px rgba(0, 0, 0, .5);
	scrollbar-width: thin; scrollbar-color: #1e3a6e #0d1424;
}
.aeson-cat-feature-list::-webkit-scrollbar { width: 10px; }
.aeson-cat-feature-list::-webkit-scrollbar-track { background: #0a1020; border-radius: 0 14px 14px 0; }
.aeson-cat-feature-list::-webkit-scrollbar-thumb { background: #1e3a6e; border-radius: 8px; border: 2px solid #0d1424; }
.aeson-cat-feature-list::-webkit-scrollbar-thumb:hover { background: #2a5bd0; }
.aeson-catalog .aeson-cat-sort option, .aeson-catalog .aeson-cat-sort optgroup { background-color: #0d1424; color: #fff; }
.aeson-cat-feature { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ac-muted); cursor: pointer; }
.aeson-cat-feature input { margin-top: 2px; accent-color: var(--ac-primary); }
.aeson-cat-clear-features { margin-top: 4px; background: transparent; border: 1px solid var(--ac-line); border-radius: 8px; color: var(--ac-muted); padding: 6px 10px; cursor: pointer; font-size: 12px; }

/* =====================================================================
   BATTERY FINDER — layout & UX rearrangement pass (finder-layout-spec.md)
   One framed "instrument" panel holds: Zone A (tiles + code-match, both
   co-primary entry paths), Zone B (facet sub-panel, refinement only) and
   Zone C (results bar: count + active-filter chips + clear-all). Zone D
   (the actual result cards, .aeson-cat-grid) sits outside the panel.
   All frozen behaviour hooks (data-use/data-market, #aeson-code-q, the
   range/pol/fit/gloss/market-facet/features/sort selectors) are unchanged
   — only how these pieces are nested, sized and framed changed.
   ===================================================================== */

/* 2026-07-31 compact rework (owner: the finder ate the whole desktop fold —
   ~660px tall). Three thin rows now: chip rail, toolbar, results bar —
   ~150px total. The spec facets moved into a Filters DROPDOWN (desktop) /
   BOTTOM SHEET (phone); all behaviour hooks unchanged. */
.aeson-instrument {
	background: var(--surface-glass);
	border: 1px solid var(--surface-border);
	border-radius: var(--radius-card-lg);
	padding: 16px 20px 12px;
	box-shadow: var(--surface-shadow);
	margin-bottom: 18px;
}

/* ---- Row 1: use-case chip rail — one line, scrolls sideways ---- */
.aeson-finder { margin-bottom: 10px; }
.aeson-finder__q {
	font-size: 12px; margin: 0 0 8px; color: var(--brand-sky);
	text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}
.aeson-use-tiles {
	display: flex; flex-wrap: nowrap; gap: 8px;
	overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
	/* soft fade at the right edge signals there's more rail to scroll */
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 42px), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - 42px), transparent);
	padding-bottom: 2px;
}
.aeson-use-tiles::-webkit-scrollbar { display: none; }
.aeson-use-tile {
	flex: none; display: inline-flex; align-items: center; gap: 8px;
	min-height: 40px; padding: 8px 15px; cursor: pointer; white-space: nowrap;
	font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text);
	background: var(--surface-glass); border: 1px solid var(--surface-border); border-radius: 999px;
	transition: border-color var(--dur-base) ease, background-color var(--dur-base) ease, color var(--dur-base) ease;
}
.aeson-use-tile svg { flex: none; width: 18px; height: 18px; color: var(--brand-sky); opacity: .8; transition: opacity var(--dur-base) ease; }
.aeson-use-tile span { line-height: 1.2; }
.aeson-use-tile:hover { border-color: rgba(91, 194, 231, .35); color: var(--heading); }
.aeson-use-tile.is-active {
	background: rgba(91, 194, 231, .14); border-color: var(--brand-sky); color: var(--heading);
}
.aeson-use-tile.is-active svg { opacity: 1; }

/* ---- Row 2: toolbar — search grows, Filters / Features / Sort trail ---- */
.aeson-cat-toolbar { display: flex; align-items: center; gap: 10px; }
.aeson-finder__code { position: relative; flex: 1 1 260px; min-width: 0; }
.aeson-finder__code-icon {
	position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
	color: var(--brand-sky); opacity: .75; pointer-events: none;
}
.aeson-catalog .aeson-cat-q {
	width: 100%; padding: 12px 14px 12px 40px !important; font-size: 14px;
	color: var(--heading); background: rgba(255, 255, 255, .05) !important;
	border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 12px !important;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25) !important;
}
.aeson-catalog .aeson-cat-q:focus { border-color: var(--brand-sky) !important; outline: none; }

/* plain-English gloss toggles */
.aeson-gloss-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 16px; height: 16px; padding: 0; margin-left: 2px; cursor: pointer;
	border-radius: 50%; border: 1px solid rgba(91, 194, 231, .5);
	background: transparent; color: var(--brand-sky); font-size: 11px; font-weight: 700; line-height: 1;
}
.aeson-gloss-btn:hover { background: rgba(91, 194, 231, .15); }
.aeson-gloss { margin: 0; font-size: 13px; color: var(--text); max-width: 640px;
	padding: 10px 14px; border-left: 2px solid var(--brand-sky); background: rgba(91, 194, 231, .06); border-radius: 0 10px 10px 0; }

/* ---- Filters panel: dropdown on desktop, bottom sheet on phones ---- */
.aeson-cat-controls {
	display: flex; flex-direction: column; gap: 14px;
	background: #0d1424;                 /* opaque: floats over the card grid */
	border: 1px solid var(--surface-border-strong);
	border-radius: var(--radius-card);
	padding: 16px 18px;
	position: absolute; z-index: 40; top: calc(100% + 8px); right: 0;
	width: min(680px, calc(100vw - 40px));
	box-shadow: 0 22px 55px rgba(0, 0, 0, .55);
}
.aeson-sheet-done { display: none; }

/* Spec-range button groups (client "range buttons on product filters"),
   stacked as full-width rows with a fixed label column so voltage /
   starting-power / terminal-side pill rows all start at the same x. */
.aeson-cat-ranges { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.aeson-cat-range-group { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.aeson-cat-range-label {
	flex: 0 0 148px; text-transform: none; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--text); margin-right: 0;
}

/* fits-my-tray checker — same pill affordance as the Features toggle,
   moved into the toolrow beside it (was a low-contrast text link,
   bottom-left, disconnected from Features/Sort). */
.aeson-fit { margin: 0; }
.aeson-fit > summary {
	cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 12px; font-size: 14px; font-weight: 600; color: #fff;
}
.aeson-fit > summary::-webkit-details-marker { display: none; }
.aeson-fit__hint { font-weight: 400; font-size: 12.5px; color: var(--text-muted); }
.aeson-fit__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 6px; }
.aeson-fit__row label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text); }
.aeson-fit__row input {
	width: 96px; padding: 9px 10px; font-size: 14px; color: var(--heading);
	background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px;
}
.aeson-fit__note { margin: 8px 0 0; font-size: 12.5px; color: var(--text-muted); max-width: 560px; }

.aeson-cat-toolrow {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
	padding-top: 12px; border-top: 1px solid var(--surface-border);
}

/* The Filters trigger: a toolbar pill matching Features/Sort; the <details>
   anchors its dropdown. Native disclosure — works with zero JS; catalog.js
   only adds outside-click close and the sheet's "Show N" button. */
.aeson-cat-facets { position: relative; margin: 0; flex: none; }
.aeson-cat-facets__toggle {
	display: inline-flex; align-items: center; gap: 8px;
	list-style: none; cursor: pointer;
	padding: 12px 16px;
	background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 12px; font-size: 14px; font-weight: 600; color: #fff;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
	white-space: nowrap;
}
.aeson-cat-facets__toggle svg { color: var(--brand-sky); }
.aeson-cat-facets__toggle::-webkit-details-marker { display: none; }
.aeson-cat-facets[open] .aeson-cat-facets__toggle { border-color: var(--brand-sky); }
.aeson-cat-facets__badge {
	display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
	padding: 0 5px; border-radius: 999px; background: var(--brand-sky); color: #04202c; font-size: 11px; font-weight: 700;
}
.aeson-cat-facets__badge[hidden] { display: none; }

/* Phone: the toolbar wraps (search full-width above the three buttons) and
   the Filters panel becomes a BOTTOM SHEET — thumb-reach, scrollable, with
   a dimmed page behind and a sticky "Show results" button. */
@media (max-width: 760px) {
	.aeson-cat-toolbar { flex-wrap: wrap; }
	.aeson-finder__code { flex-basis: 100%; }
	.aeson-cat-facets[open]::before {
		content: ""; position: fixed; inset: 0; z-index: 60;
		background: rgba(2, 8, 18, .62);
	}
	.aeson-cat-controls {
		position: fixed; inset: auto 0 0 0; top: auto; z-index: 70;
		width: auto; max-height: 78dvh; overflow-y: auto;
		border-radius: 18px 18px 0 0; border-bottom: 0;
		padding-bottom: 12px;
	}
	/* grab handle, like every native sheet */
	.aeson-cat-controls::before {
		content: ""; display: block; width: 42px; height: 4px; margin: -4px auto 2px;
		border-radius: 999px; background: rgba(255, 255, 255, .25);
	}
	.aeson-sheet-done {
		display: block; position: sticky; bottom: 0;
		width: 100%; padding: 14px; cursor: pointer;
		background: var(--ac-primary); color: var(--on-brand);
		border: 0; border-radius: 12px; font-size: 15px; font-weight: 700; font-family: inherit;
		box-shadow: 0 -10px 24px rgba(13, 20, 36, .9);
	}
	.aeson-cat-range-label { flex-basis: 100%; }
}

/* ---- Zone C: results bar — count + active-filter chips + clear-all ---- */
.aeson-results {
	display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
	margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--surface-border);
}
.aeson-results__count { margin: 0; color: var(--ac-muted); font-size: 13px; flex: none; }
.aeson-results__chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; }
.aeson-chip {
	display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
	padding: 6px 10px 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
	color: var(--heading); background: rgba(91, 194, 231, .10); border: 1px solid rgba(91, 194, 231, .4);
	transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.aeson-chip:hover { background: rgba(91, 194, 231, .18); border-color: var(--brand-sky-light); }
.aeson-chip span { font-size: 13px; line-height: 1; opacity: .75; }
.aeson-results__clear {
	flex: none; margin-left: auto; cursor: pointer; font-family: inherit;
	background: transparent; border: 1px solid var(--brand-sky); border-radius: var(--radius-pill);
	color: var(--brand-sky-light); font-size: 13px; font-weight: 600; padding: 8px 16px;
	transition: background-color var(--dur-base) ease, border-color var(--dur-base) ease, color var(--dur-base) ease;
}
.aeson-results__clear:hover { background: rgba(91, 194, 231, .12); border-color: var(--brand-sky-light); color: #fff; }
.aeson-results__clear[hidden] { display: none; }

@media (max-width: 600px) {
	.aeson-results { flex-direction: column; align-items: stretch; gap: 8px; }
	.aeson-results__clear { width: 100%; margin-left: 0; }
}

/* phones: the chip rail gains scroll-snap; chips stay compact (no min-width
   — nine full-width chips was the old vertical-space problem) */
@media (max-width: 760px) {
	.aeson-use-tiles { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
	.aeson-use-tile { scroll-snap-align: start; }
}

.aeson-pc-spec { display: block; margin-top: 6px; font-size: 12.5px; letter-spacing: .02em; color: var(--brand-sky); }
.wtb-carried { display: inline-block; margin-top: 16px; padding: 10px 18px; font-size: 14px;
	background: rgba(91, 194, 231, .12); border: 1px solid rgba(91, 194, 231, .4); border-radius: 999px; color: var(--heading); }
/* the product code is a link back to its product page (owner 2026-08-04) —
   keeps the old <strong> selector so nothing else in this block shifts */
.wtb-carried strong, .wtb-carried__link { color: var(--brand-sky); font-weight: 700; }
.wtb-carried__link { text-decoration: underline; text-underline-offset: 2px; }
.wtb-carried__link:hover { color: #fff; }
/* `display:inline-block` above outranks the UA's `[hidden]{display:none}`, so
   the pill was rendering empty ("You're after: — any dealer below can order it
   in.") for every visitor who did NOT arrive from a product page. Found during
   the 2026-07-28 board pass. */
.wtb-carried[hidden] { display: none; }
[data-market-facets][hidden] { display: none; }

/* Generic polarity badge — red/blue terminal dots in on-battery order (front
   view), per the client's "left negative and left hand positive" ask. The
   colours are the physical post caps, not brand colours: keep them red/blue. */
.aeson-pc-polarity { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 11.5px; letter-spacing: .04em; color: var(--ac-muted); }
.pol-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: inset 0 -1px 2px rgba(0,0,0,.4); }
.pol-dot--pos { background: #e0392b; }
.pol-dot--neg { background: #5bc2e7; }
.pol-dot + .pol-dot { margin-left: -1px; }

/* The feature-list panel is right-anchored to a 300px width; on narrow
   screens that pushed most of it off the left viewport edge ("cut in half"
   on mobile — client bug report). Any anchoring to the <details> element
   inherits its unpredictable toolbar position, so on small screens the
   panel pins to the VIEWPORT instead: fixed, 16px side gutters, top:auto
   keeping it at its natural spot below the toggle. */
@media (max-width: 600px) {
	.aeson-cat-feature-list {
		position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px;
		width: auto; max-width: none; max-height: min(340px, 55vh);
		z-index: 200;
	}
}

.aeson-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.aeson-pc {
	position: relative; display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
	background: var(--ac-dark); border: 1px solid var(--ac-line); border-radius: var(--radius-card-lg);
	transition: transform var(--dur-slow) ease, border-color var(--dur-slow) ease, box-shadow var(--dur-slow) ease;
}
.aeson-pc::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0;
	background: linear-gradient(90deg, #5bc2e7, #a8dff2, #5bc2e7); background-size: 200% 200%;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
	transition: opacity var(--dur-slow) ease; z-index: 2;
}
.aeson-pc:hover { transform: translateY(-8px); box-shadow: var(--shadow-card-hover); }
.aeson-pc:hover::after { opacity: 1; animation: aeson-pc-border 2.8s linear infinite; }
@keyframes aeson-pc-border { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
.aeson-pc::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
	background: radial-gradient(260px circle at calc(100% + 35px) -35px, rgba(168, 223, 242, .32) 0%, rgba(91, 194, 231, .2) 38%, rgba(91, 194, 231, .07) 58%, rgba(91, 194, 231, 0) 76%);
	opacity: 0; transition: opacity var(--dur-slower) ease;
}
.aeson-pc:hover::before { opacity: 1; }
.aeson-pc-media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: #070d18; overflow: hidden; }
.aeson-pc-img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.04); transition: transform var(--dur-slower) ease; }
.aeson-pc:hover .aeson-pc-img { transform: scale(1); }
/* Catalog turntables: a vertical-strip sprite (square frames) stepped through
   with a single steps() animation on background-position-y — pure CSS spin,
   no WebGL, no per-frame JS. catalog.js lazy-loads the strip when the card
   nears the viewport, sets --tt-url/--tt-frames, and adds .is-live; the
   static render underneath remains the no-JS / prefers-reduced-motion /
   still-loading state. The sprite pane is a centred SQUARE inset in the 4:3
   media box so frames keep their true aspect (never stretched — hard rule).
   .is-off (viewport-exit) pauses the animation so off-screen cards cost
   nothing. */
.aeson-pc-tt {
	position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
	aspect-ratio: 1 / 1; height: 100%;
	background-image: var(--tt-url); background-repeat: no-repeat;
	/* 36 frames hardcoded in both the size and the steps() below — steps()
	   with a var() is parse-fragile, and every strip the batch emits is 36 */
	background-size: 100% 3600%;
	background-position-y: 0%;
	opacity: 0; transition: opacity .45s ease; pointer-events: none;
}
.aeson-pc-tt.is-live {
	opacity: 1;
	animation: aeson-pc-tt-spin 11s steps(36, jump-none) infinite;
}
.aeson-pc-tt.is-off { animation-play-state: paused; }
.aeson-pc-media:has(.aeson-pc-tt.is-live) .aeson-pc-img { opacity: 0; }
@keyframes aeson-pc-tt-spin { from { background-position-y: 0%; } to { background-position-y: 100%; } }
@media (prefers-reduced-motion: reduce) { .aeson-pc-tt { display: none; } }
.aeson-pc-noimg { display: block; width: 100%; height: 100%; }
.aeson-pc-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 24px; position: relative; z-index: 3; }
.aeson-pc-cat { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ac-bright); font-weight: 600; }
.aeson-pc-title { font-size: 19px; font-weight: 700; color: #fff; line-height: 1.25; }
.aeson-pc-desc { font-size: 13px; color: var(--ac-muted); line-height: 1.55; }
.aeson-pc-more { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--ac-bright); }
.aeson-pc[hidden] { display: none; }
.aeson-cat-none, .aeson-cat-empty { color: var(--ac-muted); text-align: center; padding: 40px 0; font-size: 15px; }

@media (prefers-reduced-motion: reduce) { .aeson-pc, .aeson-pc-img, .aeson-pc::after { transition: none; animation: none; } }
@media (max-width: 1024px) { .aeson-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .aeson-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .aeson-cat-tools { margin-left: 0; width: 100%; } }
/* NitroBoards card 019fb672 (2026-08-04): the finder panel (chip rail, search,
   Filters/Features/Sort, results bar) ran to ~460px before a single product
   card appeared. Filters/Features/Sort were three separate stacked rows
   purely because .aeson-cat-tools (Sort's wrapper) forced itself full-width
   above - putting all three on one row and trimming padding/type sizes
   removes a whole row without changing what any control does. */
@media (max-width: 600px) {
	.aeson-instrument { padding: 12px 14px 10px; }
	.aeson-finder { margin-bottom: 8px; }
	.aeson-finder__q { font-size: 11px; margin-bottom: 6px; }
	.aeson-use-tile { min-height: 34px; padding: 6px 12px; font-size: 12.5px; }
	.aeson-cat-toolbar { gap: 8px; }
	.aeson-cat-facets__toggle,
	.aeson-catalog .aeson-cat-features > summary { padding: 9px 12px; font-size: 13px; }
	.aeson-cat-tools { width: auto; flex: 1 1 auto; }
	.aeson-catalog .aeson-cat-sort { padding: 9px 10px !important; font-size: 13px !important; width: 100%; }
}
/* NitroBoards card 019fb672 (2026-08-04): "toilet roll" - a single huge card
   per row on phones. 2-up instead, gap/padding trimmed to fit. */
@media (max-width: 520px)  { .aeson-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media (max-width: 520px)  { .aeson-pc-body { padding: 12px 12px 14px; gap: 5px; } .aeson-pc-title { font-size: 15px; } .aeson-pc-desc { font-size: 11.5px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .aeson-pc-cat { font-size: 9.5px; } .aeson-pc-more { font-size: 12px; } }


/* -----------------------------------------------------------------------
   7b. Dealer/Distributor Directory — .aeson-dealers
   (shortcode [aeson_dealer_directory]). Search + country/state selects.
   ----------------------------------------------------------------------- */
.aeson-dealers {
	--ad-primary: var(--aeson-primary-2);
	--ad-bright: var(--aeson-bright);
	--ad-accent: var(--aeson-accent);
	--ad-dark: var(--dark);
	--ad-dark2: var(--dark-2);
	--ad-line: var(--dark-line);
	--ad-text: #fff;
	--ad-muted: var(--dark-muted);
	color: var(--ad-text);
	font-family: var(--font-module);
	max-width: var(--container-narrow);
	margin: 0 auto;
}
.aeson-dealers * { box-sizing: border-box; }

.aeson-dl-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; }
.aeson-dealers .aeson-dl-q {
	flex: 1 1 240px; background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 12px !important;
	color: #fff !important; padding: 14px 16px !important; font-size: 15px !important; line-height: 1.3 !important; outline: none !important;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25) !important; transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease !important;
}
.aeson-dealers .aeson-dl-q:focus { background: rgba(91, 194, 231, .08) !important; border-color: var(--ad-accent) !important; box-shadow: 0 0 0 3px rgba(168, 223, 242, .18) !important; }
.aeson-dealers .aeson-dl-q::placeholder { color: rgba(255, 255, 255, .42) !important; opacity: 1 !important; }
.aeson-dealers .aeson-dl-country, .aeson-dealers .aeson-dl-state {
	background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 12px !important;
	color: #fff !important; padding: 13px 14px !important; font-size: 14px !important; cursor: pointer; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25) !important;
}
.aeson-dealers .aeson-dl-country:focus, .aeson-dealers .aeson-dl-state:focus { border-color: var(--ad-accent) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(168, 223, 242, .18) !important; }
.aeson-dealers .aeson-dl-country option, .aeson-dealers .aeson-dl-state option { background-color: #0d1424; color: #fff; }
.aeson-dl-count { color: var(--ad-muted); font-size: 13px; margin: 0 0 14px; }

.aeson-dl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.aeson-dl-card {
	position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 6px;
	background: rgba(7, 14, 28, .94); border-radius: 16px; padding: 20px 20px 22px;
	transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.aeson-dl-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); z-index: 5; }
.aeson-dl-card[hidden] { display: none; }
.aeson-dl-card > * { position: relative; z-index: 1; }
.aeson-dl-card::after {
	content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; z-index: 0;
	background: radial-gradient(260px circle at calc(100% + 35px) -35px, rgba(168, 223, 242, .30) 0%, rgba(91, 194, 231, .18) 38%, rgba(91, 194, 231, .06) 58%, rgba(91, 194, 231, 0) 76%);
	opacity: 0; transition: opacity var(--dur-slower) ease;
}
.aeson-dl-card:hover::after { opacity: 1; }
.aeson-dl-card::before {
	content: ""; position: absolute; inset: 0; border-radius: 16px; padding: 1px; pointer-events: none; z-index: 4;
	background: linear-gradient(120deg, #5bc2e7, #a8dff2, #3385ff, #a8dff2, #5bc2e7); background-size: 300% 300%;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
	animation: aeson-dl-border 3.5s linear infinite;
}
@keyframes aeson-dl-border { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
.aeson-dealers .aeson-dl-eyebrow { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ad-accent); font-weight: 700; }
.aeson-dealers .aeson-dl-card .aeson-dl-name { margin: 5px 0 0 !important; font-size: 16px !important; font-weight: 700 !important; color: #fff !important; line-height: 1.25 !important; letter-spacing: 0 !important; text-transform: none !important; }
.aeson-dealers .aeson-dl-loc { margin: 3px 0 0; font-size: 12px; color: #8fb6ff; font-weight: 600; }
.aeson-dealers .aeson-dl-addr { margin: 6px 0 0; color: var(--ad-muted); font-size: 12px; line-height: 1.5; }
.aeson-dealers .aeson-dl-phone { display: inline-flex; align-items: center; gap: 8px; margin-top: 11px; color: #fff; text-decoration: none; font-size: 13.5px; font-weight: 600; transition: color var(--dur-fast) ease; }
.aeson-dealers .aeson-dl-phone:hover { color: var(--ad-accent); }
.aeson-dl-pic { display: inline-flex; width: 15px; height: 15px; color: var(--ad-accent); flex: 0 0 auto; }
.aeson-dl-pic svg { width: 15px; height: 15px; }
.aeson-dl-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, .08); }
.aeson-dealers .aeson-dl-icbtn {
	display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px;
	background: rgba(91, 194, 231, .12); border: 1px solid rgba(168, 223, 242, .35); color: #a8dff2; cursor: pointer; text-decoration: none;
	transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.aeson-dealers .aeson-dl-icbtn:hover { background: rgba(91, 194, 231, .35); border-color: var(--ad-accent); color: #fff; transform: translateY(-2px); }
.aeson-dl-icbtn svg { width: 18px; height: 18px; }
.aeson-dealers .aeson-dl-icbtn[data-tip] { position: relative; }
.aeson-dealers .aeson-dl-icbtn[data-tip]::after {
	content: attr(data-tip); position: absolute; bottom: calc(100% + 9px); left: 50%;
	transform: translateX(-50%) translateY(4px); background: rgba(7, 14, 28, .97); color: #a8dff2; font-size: 11px; font-weight: 600;
	white-space: nowrap; padding: 6px 9px; border-radius: 8px; border: 1px solid rgba(168, 223, 242, .4); box-shadow: 0 8px 22px rgba(0, 0, 0, .55);
	opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 30;
}
.aeson-dealers .aeson-dl-icbtn[data-tip]::before {
	content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%;
	transform: translateX(-50%) translateY(4px); border: 5px solid transparent; border-top-color: rgba(168, 223, 242, .4);
	opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 30;
}
.aeson-dealers .aeson-dl-icbtn[data-tip]:hover::after,
.aeson-dealers .aeson-dl-icbtn[data-tip]:hover::before { opacity: 1; transform: translateX(-50%) translateY(0); }
.aeson-dealers .aeson-dl-card .aeson-dl-btn {
	display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
	margin: 14px 0 0 !important; width: 100% !important; box-sizing: border-box !important;
	background: #5bc2e7 !important; background-image: none !important; color: #fff !important; text-decoration: none !important; text-transform: none !important;
	font-size: 15px !important; font-weight: 400 !important; line-height: 1.3 !important; letter-spacing: 0 !important; padding: 12px 24px !important; border: 0 !important; border-radius: var(--radius-btn) !important;
	box-shadow: none !important; transition: background-color var(--dur-fast) ease, transform var(--dur-fast) ease !important;
}
.aeson-dealers .aeson-dl-card .aeson-dl-btn:hover { background: #86d5f0 !important; transform: translateY(-1px) !important; color: #fff !important; }
.aeson-dealers .aeson-dl-card .aeson-dl-btn .aeson-dl-arr { transition: transform var(--dur-fast) ease; }
.aeson-dealers .aeson-dl-card .aeson-dl-btn:hover .aeson-dl-arr { transform: translateX(3px); }
.aeson-dl-none, .aeson-dl-empty { color: var(--ad-muted); text-align: center; padding: 40px 0; font-size: 15px; }

@media (prefers-reduced-motion: reduce) { .aeson-dl-card, .aeson-dl-card::before { transition: none; animation: none; } }
@media (max-width: 1024px) { .aeson-dl-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .aeson-dl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .aeson-dl-grid { grid-template-columns: 1fr; } }


/* -----------------------------------------------------------------------
   7c. Dealer Map — .aeson-map  (shortcode [aeson_dealer_map])
   Three.js WebGL Australia map (JS in public/js/modules/dealer-map.js,
   vendored Three r128 in public/vendor/three/). This block is CSS only.
   ----------------------------------------------------------------------- */
.aeson-map {
	--am-primary: var(--aeson-primary-2);
	--am-accent: var(--aeson-accent);
	--am-line: var(--dark-line);
	position: relative; max-width: var(--container-narrow); margin: 0 auto; border-radius: var(--radius-card-lg); overflow: hidden;
	background: radial-gradient(120% 90% at 50% 0%, var(--dark-grad-1) 0%, var(--dark-grad-2) 55%, var(--dark-grad-3) 100%);
	border: 1px solid var(--am-line); box-shadow: var(--shadow-map);
	font-family: var(--font-module); color: #fff; user-select: none;
	/* force the rounded clip container onto its own GPU layer so the WebGL canvas
	   composites WITH the clip during scroll — kills the black scroll-band on Chrome */
	transform: translateZ(0); isolation: isolate; will-change: transform;
}
/* letterbox (Rick 2026-07-31): short enough that the app filter + search row
   under the map land above the fold on a typical 1080p desktop */
/* owner 2026-08-04: -50px off every stop, to buy back fold space above the
   dealer grid (the map was pushing the cards below the fold at 1080p) */
.aeson-map-stage { width: 100%; height: clamp(310px, 46vh, 420px); cursor: grab; position: relative; overflow: hidden; transform: translateZ(0); }
.aeson-map-stage canvas { display: block; position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; transform: translateZ(0); backface-visibility: hidden; touch-action: pan-y; }
.aeson-map-overlay { position: absolute; top: 22px; left: 26px; pointer-events: none; z-index: 3; }
.aeson-map-overlay .am-eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--am-accent); font-weight: 700; }
.aeson-map-overlay .am-title { font-size: 26px; font-weight: 800; margin: 4px 0 0; line-height: 1.1; }
.aeson-map-overlay .am-sub { font-size: 13px; color: rgba(255, 255, 255, .6); margin-top: 4px; }
/* page heading rendered INSIDE the map, top-right (where-to-buy's hero band is gone) */
.aeson-map-overlay--page { left: auto; right: 26px; text-align: right; }
.aeson-map-overlay--page .am-page-title { font-size: 30px; font-weight: 800; margin: 0; line-height: 1.1; color: #fff; }
@media (max-width: 640px) { /* phones: shrink both overlays so they can't collide */
	.aeson-map-overlay { top: 14px; left: 16px; }
	.aeson-map-overlay .am-eyebrow { font-size: 9px; }
	.aeson-map-overlay .am-title { font-size: 15px; }
	.aeson-map-overlay--page { left: auto; right: 16px; }
	.aeson-map-overlay--page .am-page-title { font-size: 18px; }
}
/* map-nav legend, bottom-left — three little gesture graphics (desktop set vs
   touch set, swapped on hover:none/pointer:coarse). Replaced the old hint bar
   and the animated "swipe to spin" coach. */
.aeson-map-legend { position: absolute; left: 18px; bottom: 14px; z-index: 4; pointer-events: none; }
.aeson-map-legend .aml { display: flex; flex-direction: column; gap: 7px; }
.aeson-map-legend .aml-row { display: flex; align-items: center; gap: 9px; font: 600 11px/1.2 var(--font-module); letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.aeson-map-legend .aml-row svg { width: 21px; height: 21px; flex: 0 0 auto; color: rgba(168, 223, 242, .7); }
.aeson-map-legend .aml-row[hidden] { display: none; } /* [hidden] must beat the flex above (same trap as .wtb-carried) */
.aeson-map-legend .aml-touch { display: none; }

@media (hover: none) and (pointer: coarse) {
	.aeson-map-legend .aml-desktop { display: none; }
	.aeson-map-legend .aml-touch { display: flex; }
}

.aeson-map-card { position: fixed; z-index: 9000; width: 288px; transform: translate(-50%, calc(-100% - 18px)); will-change: opacity, left, top; display: none; opacity: 0; pointer-events: none; }
.aeson-map-card-in { position: relative; background: rgba(7, 14, 28, .94); border-radius: 16px; padding: 20px 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, .6); backdrop-filter: blur(8px); overflow: hidden; }
.aeson-map-card-in::before {
	content: ""; position: absolute; inset: 0; border-radius: 16px; padding: 1px; pointer-events: none;
	background: linear-gradient(120deg, #5bc2e7, #a8dff2, #3385ff, #a8dff2, #5bc2e7); background-size: 300% 300%;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
	animation: aeson-map-border 3.5s linear infinite;
}
@keyframes aeson-map-border { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
.aeson-map-card-in::after {
	content: ""; position: absolute; left: 50%; bottom: -7px; width: 13px; height: 13px;
	background: rgba(7, 14, 28, .94); border-right: 1px solid rgba(168, 223, 242, .6); border-bottom: 1px solid rgba(168, 223, 242, .6);
	transform: translateX(-50%) rotate(45deg);
}
.aeson-map-card .amc-eyebrow { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--am-accent); font-weight: 700; }
.aeson-map-card h4 { margin: 5px 0 0; font-size: 20px; font-weight: 800; color: #fff; line-height: 1.15; }
.aeson-map-card .amc-loc { margin: 3px 0 0; font-size: 13px; color: #8fb6ff; font-weight: 600; }
.aeson-map-card .amc-addr { margin: 8px 0 0; font-size: 13px; color: rgba(255, 255, 255, .62); line-height: 1.5; }
.aeson-map-card .amc-phone { display: inline-flex; align-items: center; gap: 9px; margin-top: 12px; color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; }
.aeson-map-card .amc-phone:hover { color: var(--am-accent); }
.aeson-map-card .amc-pic { display: inline-flex; width: 16px; height: 16px; color: var(--am-accent); }
.aeson-map-card .amc-pic svg { width: 16px; height: 16px; }
.aeson-map-card .amc-icons { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
.aeson-map-card .amc-ic {
	display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px;
	background: rgba(91, 194, 231, .12); border: 1px solid rgba(168, 223, 242, .35); color: #a8dff2; cursor: pointer; padding: 0;
	transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.aeson-map-card .amc-ic:hover { background: rgba(91, 194, 231, .35); border-color: var(--am-accent); color: #fff; transform: translateY(-2px); }
.aeson-map-card .amc-ic svg { width: 19px; height: 19px; }
.aeson-map-data { display: none; }

/* contact modal (centered over page) — shared by map pins AND the dealer
   directory's "Contact" icon button (see dealer-directory.js) */
.aeson-map-modal { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 20px; }
.aeson-map-modal.is-on { display: flex; }
.aeson-map-modal-bg { position: absolute; inset: 0; background: rgba(2, 6, 14, .78); backdrop-filter: blur(4px); }
.aeson-map-modal-box {
	position: relative; width: 460px; max-width: 100%; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
	background: radial-gradient(120% 80% at 50% 0%, #122a52 0%, #0a1730 45%, #060d1d 100%);
	border: 1px solid rgba(168, 223, 242, .32); border-radius: var(--radius-card-lg);
	box-shadow: var(--shadow-modal); font-family: var(--font-module); color: #fff;
	animation: aeson-modal-in .4s var(--ease);
}
@keyframes aeson-modal-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.aeson-map-modal-head { position: relative; flex: 0 0 auto; padding: 30px 32px 20px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.aeson-map-modal-body { flex: 1 1 auto; overflow-y: auto; padding: 24px 32px 30px; }
.aeson-map-modal-x {
	position: absolute; top: 20px; right: 20px; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .7); font-size: 22px; line-height: 1; cursor: pointer;
	transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease; z-index: 2;
}
.aeson-map-modal-x:hover { background: rgba(255, 80, 80, .2); border-color: rgba(255, 120, 120, .5); color: #fff; }
.aeson-map-modal-eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--am-accent); font-weight: 700; }
.aeson-map-modal-title { margin: 6px 0 0; font-size: 25px; font-weight: 800; line-height: 1.1; padding-right: 40px; color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; }
.aeson-map-modal-sub { margin: 10px 0 0; font-size: 13px; color: rgba(255, 255, 255, .55); line-height: 1.55; }

/* sexy dark Gravity Form (labels hidden, placeholders only) */
.aeson-map-modal-body .gform_wrapper { margin: 0 !important; }
.aeson-map-modal-body .gform_wrapper form { margin: 0 !important; }
/* list-style/margin reset: .gform_fields is a real <ul> (Gravity Forms class
   conventions, not the plugin) and the browser default was painting a bullet
   beside every field. */
.aeson-map-modal-body .gform_wrapper .gform_fields { display: flex !important; flex-direction: column !important; gap: 14px !important; grid-gap: 14px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; }
.aeson-map-modal-body .gform_wrapper .gfield { list-style: none !important; }
.aeson-map-modal-body .gform_wrapper .gfield { margin: 0 !important; padding: 0 !important; }
.aeson-map-modal-body .gform_wrapper .gfield_label,
.aeson-map-modal-body .gform_wrapper legend.gfield_label,
.aeson-map-modal-body .gform_wrapper .gform-field-label,
.aeson-map-modal-body .gform_wrapper .gfield_description,
.aeson-map-modal-body .gform_wrapper .gform_required_legend { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
.aeson-map-modal-body .gform_wrapper .gfield input[type=text],
.aeson-map-modal-body .gform_wrapper .gfield input[type=email],
.aeson-map-modal-body .gform_wrapper .gfield input[type=tel],
.aeson-map-modal-body .gform_wrapper .gfield input[type=number],
.aeson-map-modal-body .gform_wrapper .gfield textarea,
.aeson-map-modal-body .gform_wrapper input.large,
.aeson-map-modal-body .gform_wrapper textarea.large {
	width: 100% !important; background: rgba(255, 255, 255, .05) !important;
	border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 12px !important; color: #fff !important;
	padding: 14px 16px !important; font-size: 15px !important; line-height: 1.3 !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25) !important;
	transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease !important;
}
.aeson-map-modal-body .gform_wrapper .gfield textarea { min-height: 120px !important; resize: vertical !important; }
.aeson-map-modal-body .gform_wrapper .gfield input:focus,
.aeson-map-modal-body .gform_wrapper .gfield textarea:focus { background: rgba(91, 194, 231, .08) !important; border-color: var(--am-accent) !important; box-shadow: 0 0 0 3px rgba(168, 223, 242, .18) !important; outline: none !important; }
.aeson-map-modal-body .gform_wrapper ::placeholder { color: rgba(255, 255, 255, .42) !important; opacity: 1 !important; }
.aeson-map-modal-body .gform_wrapper .gfield_error input,
.aeson-map-modal-body .gform_wrapper .gfield_error textarea { border-color: #ff6b6b !important; background: rgba(255, 80, 80, .08) !important; }
.aeson-map-modal-body .gform_wrapper .validation_message,
.aeson-map-modal-body .gform_wrapper .gfield_validation_message { color: #ff9a9a !important; background: transparent !important; border: 0 !important; padding: 4px 0 0 !important; font-size: 12px !important; }
.aeson-map-modal-body .gform_wrapper .gform_validation_errors { background: rgba(255, 80, 80, .1) !important; border: 1px solid rgba(255, 120, 120, .4) !important; border-radius: 12px !important; color: #ffcaca !important; box-shadow: none !important; }
.aeson-map-modal-body .gform_wrapper .gform_validation_errors h2 { color: #ffcaca !important; }
.aeson-map-modal-body .gform_wrapper .gform_footer { margin: 20px 0 0 !important; padding: 0 !important; }
.aeson-map-modal-body .gform_wrapper .gform_footer input[type=submit],
.aeson-map-modal-body .gform_wrapper .gform_footer button,
.aeson-map-modal-body .gform_wrapper button.gform_button {
	width: 100% !important; background: linear-gradient(90deg, #5bc2e7, #a8dff2) !important; color: var(--on-brand) !important;
	border: 0 !important; border-radius: var(--radius-pill) !important; padding: 15px 28px !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: .01em; cursor: pointer;
	box-shadow: 0 10px 26px rgba(91, 194, 231, .4) !important; transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, filter var(--dur-fast) ease !important;
}
.aeson-map-modal-body .gform_wrapper .gform_footer input[type=submit]:hover,
.aeson-map-modal-body .gform_wrapper button.gform_button:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 14px 34px rgba(91, 194, 231, .55) !important; }
.aeson-map-modal-body .gform_confirmation_message { color: #fff !important; font-size: 16px; line-height: 1.6; text-align: center; padding: 30px 10px; }

@media (max-width: 600px) {
	.aeson-map-stage { height: 410px; }
	.aeson-map-overlay .am-title { font-size: 20px; }
	.aeson-map-card { width: 230px; }
}


/* -----------------------------------------------------------------------
   7d. Product Detail — .aeson-pd-wrap > .aeson-pd  (shortcode/template
   [aeson_product_detail]). Gallery + stat chips + features + specs table
   + documents grid. No pricing/cart (nothing is sold on the site).
   ----------------------------------------------------------------------- */
.aeson-pd-wrap {
	background: radial-gradient(120% 60% at 50% 0%, var(--dark-grad-1) 0%, var(--dark-grad-2) 45%, var(--dark-grad-3) 100%);
	padding: 96px 24px 72px;
}
.aeson-pd {
	--pd-primary: var(--aeson-primary);
	--pd-bright: var(--aeson-bright-pd);
	--pd-accent: var(--aeson-accent);
	--pd-line: var(--dark-line);
	--pd-muted: var(--dark-muted);
	max-width: 1140px; margin: 0 auto; color: #fff; font-family: var(--font-module);
}
.aeson-pd * { box-sizing: border-box; }
.aeson-pd-eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--pd-accent); font-weight: 700; }

.aeson-pd-hero { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 40px; align-items: start; }
.aeson-pd-gallery { position: relative; }

/* Gallery stage: the 3D viewer and the photo stage are both full-size,
   always-mounted layers stacked in one square slot, cross-faded by
   opacity/pointer-events — never display:none. The 3D canvas's own
   ResizeObserver (battery-viewer.js) must never see a 0×0 container, which
   display:none would cause the instant the Photos tab is active. */
.aeson-pd-stagewrap { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-card); overflow: hidden; }
.aeson-pd-layer { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity var(--dur-base) ease; }
.aeson-pd-stagewrap[data-active="3d"] .aeson-pd-layer-3d,
.aeson-pd-stagewrap[data-active="photo"] .aeson-pd-layer-photo { opacity: 1; pointer-events: auto; z-index: 1; }
.aeson-pd-stagewrap .aeson-bv { margin-bottom: 0; height: 100%; }
.aeson-pd-stagewrap .aeson-bv-stage { height: 100%; }
.aeson-pd-layer-photo .aeson-pd-stage { position: absolute; inset: 0; aspect-ratio: auto; }

.aeson-pd-stage {
	border-radius: var(--radius-card); overflow: hidden;
	background: radial-gradient(90% 80% at 50% 30%, #122a52 0%, #0a1730 55%, #070e1d 100%);
	border: 1px solid var(--pd-line); display: flex; align-items: center; justify-content: center; padding: 24px;
}
.aeson-pd-main { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .55)); transition: opacity var(--dur-fast) ease; }
.aeson-pd-noimg { display: block; width: 100%; height: 100%; }

.aeson-pd-viewtabs { position: absolute; top: 14px; right: 14px; z-index: 4; display: flex; gap: 6px; }
.aeson-pd-viewtab {
	font: 700 11px/1 var(--font-module); letter-spacing: .08em; text-transform: uppercase;
	color: var(--pd-muted); background: rgba(7, 14, 28, .72); border: 1px solid var(--pd-line);
	padding: 7px 13px; border-radius: 999px; cursor: pointer;
	transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.aeson-pd-viewtab:hover { color: #fff; border-color: rgba(168, 223, 242, .4); }
.aeson-pd-viewtab.is-active { color: #061423; background: var(--pd-accent); border-color: var(--pd-accent); }

.aeson-pd-thumbs { display: flex; gap: 10px; margin-top: 10px; }
.aeson-pd-thumb { width: 64px; height: 64px; border-radius: 14px; overflow: hidden; cursor: pointer; padding: 6px; background: rgba(255, 255, 255, .04); border: 1px solid var(--pd-line); transition: border-color var(--dur-fast) ease, transform var(--dur-fast) ease; }
.aeson-pd-thumb img { width: 100%; height: 100%; object-fit: contain; }
.aeson-pd-thumb:hover { transform: translateY(-2px); }
.aeson-pd-thumb.is-active { border-color: var(--pd-accent); box-shadow: 0 0 0 3px rgba(168, 223, 242, .18); }

.aeson-pd-info { padding-top: 6px; }
.aeson-pd .aeson-pd-title { margin: 8px 0 0 !important; font-size: 42px !important; font-weight: 800 !important; line-height: 1.05 !important; color: #fff !important; letter-spacing: -.01em !important; }
.aeson-pd-sub { margin: 8px 0 0; font-size: 17px; color: #9fc2ff; font-weight: 600; }
.aeson-pd-model { margin: 6px 0 0; font-size: 13px; color: var(--pd-muted); }
.aeson-pd-model b { color: #fff; }

/* Consolidated spec sheet — the single source of truth for every numeric
   fact (replaces the old key-spec chip row AND the separate Technical
   Specifications table below, which duplicated each other). Column-major
   auto-flow fills the left column top-to-bottom first; the dimensions
   string is pinned as its own full-width row since it's the one value
   long enough to wrap awkwardly at half width. */
.aeson-pd-specsheet { margin-top: 20px; border-radius: 16px; border: 1px solid var(--pd-line); background: rgba(255, 255, 255, .03); padding: 4px 20px; }
/* Two independent blocks, not one mixed grid: the 7 short facts flow
   column-major into a 2-col grid, while Dimensions (the one value long
   enough to wrap awkwardly at half width) is a plain full-width sibling
   row below it. A single grid with one item spanning grid-column:1/-1
   inside a grid-auto-flow:column container produces implementation-
   dependent placement ordering — verified empirically, not worth fighting. */
.aeson-pd-spec-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 24px; }
.aeson-pd-spec-cell { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--pd-line); }
.aeson-pd-spec-label { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--pd-muted); font-weight: 600; white-space: nowrap; }
.aeson-pd-spec-value { font-size: 15px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; text-align: right; }
.aeson-pd-spec-full { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--pd-line); border-bottom: 0; }

.aeson-pd-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.aeson-pd .aeson-pd-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--pd-primary) !important; color: var(--on-brand) !important; text-decoration: none !important; text-transform: none !important;
	font-size: 15px !important; font-weight: 400 !important; line-height: 1.3; padding: 13px 26px !important; border: 0 !important; border-radius: var(--radius-btn) !important;
	transition: background-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.aeson-pd .aeson-pd-btn:hover { background: var(--pd-bright) !important; transform: translateY(-1px); color: var(--on-brand) !important; }
.aeson-pd .aeson-pd-btn-ghost { background: transparent !important; border: 1px solid rgba(168, 223, 242, .4) !important; color: #a8dff2 !important; }
.aeson-pd .aeson-pd-btn-ghost:hover { background: rgba(91, 194, 231, .12) !important; border-color: var(--pd-accent) !important; color: #fff !important; }
.aeson-pd-btn .aeson-pd-arr { transition: transform var(--dur-fast) ease; }
.aeson-pd .aeson-pd-btn:hover .aeson-pd-arr { transform: translateX(3px); }

.aeson-pd-section { margin-top: 48px; }
.aeson-pd .aeson-pd-h2 { margin: 6px 0 0 !important; font-size: 30px !important; font-weight: 800 !important; color: #fff !important; line-height: 1.1 !important; }

/* Features & Benefits: compact grid of cards — was a 4-col grid of
   64px-icon, 24px-padded cards (~700-900px tall for a 16-feature product).
   Keeps the tidy grid/card feel (not a loose pill wrap) with a real icon
   (36px slot, ~22px glyph) but a horizontal icon+label layout and tight
   padding, so it's still a fraction of the original height. */
.aeson-pd-tags { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
.aeson-pd-tag {
	display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px;
	background: rgba(255, 255, 255, .04); border: 1px solid var(--pd-line);
	transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.aeson-pd-tag:hover { border-color: rgba(168, 223, 242, .4); background: rgba(91, 194, 231, .06); transform: translateY(-2px); }
.aeson-pd-tag-ic { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(91, 194, 231, .14); border: 1px solid rgba(168, 223, 242, .3); }
.aeson-pd-tag-ic img { width: 22px; height: 22px; object-fit: contain; }
.aeson-pd-tag-svg svg { width: 22px; height: 22px; color: #a8dff2; }
.aeson-pd-tag-label { font-size: 13px; font-weight: 600; color: #dbe8ff; line-height: 1.3; }

.aeson-pd-docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
/* Count-aware, desktop only (:has() outranks the plain-class mobile
   breakpoints below in specificity, so scoping to min-width keeps this
   from fighting the ≤900px/≤560px collapse rules). 3-col would otherwise
   orphan a lone 4th tile onto its own row, same class of bug already
   fixed once for .stat-grid. */
@media (min-width: 901px) {
	.aeson-pd-docs:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
	.aeson-pd-docs:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
	.aeson-pd-docs:has(> :only-child) { grid-template-columns: 1fr; }
}
.aeson-pd .aeson-pd-doc { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 14px; text-decoration: none; background: rgba(255, 255, 255, .04); border: 1px solid var(--pd-line); transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, transform var(--dur-fast) ease; }
.aeson-pd .aeson-pd-doc:hover { border-color: rgba(168, 223, 242, .4); background: rgba(91, 194, 231, .08); transform: translateY(-2px); }
.aeson-pd-doc-ic { display: flex; flex: 0 0 auto; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 10px; background: rgba(91, 194, 231, .14); border: 1px solid rgba(168, 223, 242, .3); color: #a8dff2; }
.aeson-pd-doc-ic svg { width: 20px; height: 20px; }
.aeson-pd-doc-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.aeson-pd-doc-txt b { color: #fff; font-size: 14px; font-weight: 700; }
.aeson-pd-doc-txt span { color: var(--pd-muted); font-size: 12px; }
.aeson-pd-doc-dl { flex: 0 0 auto; color: var(--pd-accent); display: flex; }
.aeson-pd-doc-dl svg { width: 18px; height: 18px; }

.aeson-pd-back { margin-top: 40px; }
.aeson-pd .aeson-pd-back a { color: var(--pd-muted); text-decoration: none; font-size: 14px; font-weight: 600; }
.aeson-pd .aeson-pd-back a:hover { color: var(--pd-accent); }

@media (max-width: 900px) {
	.aeson-pd-wrap { padding: 64px 20px 56px; }
	.aeson-pd-hero { grid-template-columns: 1fr; gap: 28px; }
	.aeson-pd .aeson-pd-title { font-size: 34px !important; }
	.aeson-pd-tags { grid-template-columns: repeat(3, 1fr); }
	.aeson-pd-docs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.aeson-pd-wrap { padding: 48px 16px 48px; }
	.aeson-pd-section { margin-top: 36px; }
	.aeson-pd-stage { padding: 16px; }
	.aeson-pd-viewtab { font-size: 10px; padding: 6px 11px; }
	.aeson-pd-spec-grid { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
	.aeson-pd-tags { grid-template-columns: repeat(2, 1fr); }
	.aeson-pd-docs { grid-template-columns: 1fr; }
}


/* =============================================================================
   8. GLASSMORPHISM UTILITIES (ss-whiteglassblur2 / ss-darkglassblur2)
   -----------------------------------------------------------------------------
   Applied ad hoc to BB columns. Verbatim port of wpcode-snippets 20 & 21.
   ============================================================================= */
.ss-whiteglassblur2 { padding: 5px; box-sizing: border-box; }
.fl-col.ss-whiteglassblur2 > .fl-col-content,
.fl-col.ss-whiteglassblur2 > .fl-col-content > .fl-col-content-wrap {
	position: relative; isolation: isolate; width: 100%; min-height: 60px; border-radius: 0;
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	background-color: rgba(255, 255, 255, .10); box-shadow: 0 4px 12px rgba(0, 0, 0, .30);
	border: 1px solid transparent;
	border-top-color: rgba(255, 255, 255, .5); border-left-color: rgba(255, 255, 255, .5);
	border-right-color: rgba(255, 255, 255, .2); border-bottom-color: rgba(255, 255, 255, .2);
}
.fl-col.ss-whiteglassblur2 > .fl-col-content > *,
.fl-col.ss-whiteglassblur2 > .fl-col-content > .fl-col-content-wrap > * { position: relative; z-index: 1; }

.ss-darkglassblur2 { box-sizing: border-box; }
.fl-col.ss-darkglassblur2 > .fl-col-content,
.fl-col.ss-darkglassblur2 > .fl-col-content > .fl-col-content-wrap {
	position: relative; isolation: isolate; width: 100%; min-height: 60px; border-radius: 0;
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	background-color: rgba(0, 0, 0, .55); box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
	border: 1px solid transparent;
	border-top-color: rgba(255, 255, 255, .40); border-left-color: rgba(255, 255, 255, .40);
	border-right-color: rgba(255, 255, 255, .05); border-bottom-color: rgba(255, 255, 255, .05);
}
.fl-col.ss-darkglassblur2 > .fl-col-content > *,
.fl-col.ss-darkglassblur2 > .fl-col-content > .fl-col-content-wrap > * { position: relative; z-index: 1; }
.fl-col.ss-darkglassblur2 > .fl-col-content { position: relative; overflow: hidden; }
.fl-col.ss-darkglassblur2 > .fl-col-content::after {
	content: ""; position: absolute; width: 240%; height: 240%; left: -70%; top: -70%;
	transform: rotate(45deg); transform-origin: 50% 50%;
	pointer-events: none; mix-blend-mode: screen; opacity: .58; filter: blur(12px); will-change: transform, opacity;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .08) 47%, rgba(255, 255, 255, .12) 50%, rgba(255, 255, 255, .08) 53%, rgba(255, 255, 255, 0) 60%);
	animation: ss_shimmer_soft 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .fl-col.ss-darkglassblur2 > .fl-col-content::after { animation: none; } }
@keyframes ss_shimmer_soft {
	0% { transform: rotate(45deg) translateY(55%); opacity: .34; }
	50% { transform: rotate(45deg) translateY(-5%); opacity: .42; }
	100% { transform: rotate(45deg) translateY(-55%); opacity: .36; }
}


/* =============================================================================
   9. HOVER UTILITIES (reusable BB column treatments)
   -----------------------------------------------------------------------------
   Verbatim port of wpcode-snippets 631 (ss-aeson-* system, applied to BB
   columns), 884 (equivalent for UABB Advanced Posts cards), 681 (image
   zoom-out on hover), 684 (post carousel card styling).
   ============================================================================= */

/* ---- 9a. ss-aeson-* system (631) — apply to the BB COLUMN module ---- */
.ss-aeson-card-base .fl-col-content {
	position: relative; overflow: hidden;
	transition: transform var(--dur-slower) ease, border-color var(--dur-slower) ease, background-color var(--dur-slower) ease, opacity var(--dur-slower) ease;
}
.ss-aeson-card-base .fl-col-content > * { position: relative; z-index: 2; }

.ss-aeson-border-hover .fl-col-content::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
	background: linear-gradient(90deg, #5bc2e7 0%, #a8dff2 50%, #5bc2e7 100%); background-size: 200% 200%;
	opacity: 0; transition: opacity var(--dur-slower) ease; z-index: 3; pointer-events: none;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
}
.ss-aeson-border-hover .fl-col-content:hover::after { opacity: 1; animation: ss-aeson-border-shift 2.8s linear infinite; }
@keyframes ss-aeson-border-shift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

.ss-aeson-bg-glow .fl-col-content::before {
	content: ""; position: absolute; top: -70px; right: -70px; width: 260px; height: 260px; border-radius: 50%;
	background: radial-gradient(circle, rgba(168, 223, 242, .32) 0%, rgba(91, 194, 231, .20) 35%, rgba(91, 194, 231, .08) 55%, rgba(91, 194, 231, 0) 75%);
	opacity: 0; filter: blur(28px); transform: scale(.9); transition: opacity var(--dur-slower) ease, transform var(--dur-slower) ease; z-index: 1; pointer-events: none;
}
.ss-aeson-bg-glow .fl-col-content:hover::before { opacity: 1; transform: scale(1); }

.ss-aeson-hover-lift .fl-col-content:hover { transform: translateY(-8px); box-shadow: var(--shadow-card-hover); }
.ss-aeson-hover-zoom .fl-col-content:hover { transform: scale(1.02); box-shadow: 0 18px 45px rgba(0, 0, 0, .38); }

/* ---- 9b. UABB Advanced Posts variant (884) ---- */
.uabb-blog-posts .uabb-blog-posts-shadow {
	position: relative; overflow: hidden; border-radius: 10px;
	transition: transform var(--dur-slower) ease, box-shadow var(--dur-slower) ease, background-color var(--dur-slower) ease, opacity var(--dur-slower) ease;
}
.uabb-blog-posts .uabb-blog-posts-shadow > * { position: relative; z-index: 2; }
.uabb-blog-posts .uabb-blog-posts-shadow::before {
	content: ""; position: absolute; top: -70px; right: -70px; width: 260px; height: 260px; border-radius: 50%;
	background: radial-gradient(circle, rgba(168, 223, 242, .32) 0%, rgba(91, 194, 231, .20) 35%, rgba(91, 194, 231, .08) 55%, rgba(91, 194, 231, 0) 75%);
	opacity: 0; filter: blur(28px); transform: scale(.9); transition: opacity var(--dur-slower) ease, transform var(--dur-slower) ease; z-index: 1; pointer-events: none;
}
.uabb-blog-posts .uabb-blog-posts-shadow:hover::before { opacity: 1; transform: scale(1); }
.uabb-blog-posts .uabb-blog-posts-shadow::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
	background: linear-gradient(90deg, #5bc2e7 0%, #a8dff2 50%, #5bc2e7 100%); background-size: 200% 100%;
	opacity: 0; transition: opacity var(--dur-slower) ease; z-index: 3; pointer-events: none;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;
}
.uabb-blog-posts .uabb-blog-posts-shadow:hover::after { opacity: 1; animation: ss-aeson-uabb-border-shift 2.8s linear infinite; }
.uabb-blog-posts .uabb-blog-posts-shadow:hover { transform: translateY(-8px); box-shadow: var(--shadow-card-hover); }
@keyframes ss-aeson-uabb-border-shift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

/* ---- 9c. Photo zoom-out on hover (681) ---- */
.aeson-photo-zoomout { overflow: hidden; border-radius: var(--radius-card-lg); }
.aeson-photo-zoomout img { display: block; width: 100%; transform: scale(1.08); transition: transform var(--dur-slow) ease; transform-origin: center center; }
.aeson-photo-zoomout:hover img { transform: scale(1); }

/* ---- 9d. Post carousel card styling (684) — applies to BB post-carousel/
   post-grid/post-feed modules wrapped in .aeson-post-carousel ---- */
.aeson-post-carousel { overflow: visible; }
.aeson-post-carousel .fl-post-carousel-post,
.aeson-post-carousel .fl-post-grid-post,
.aeson-post-carousel .fl-post-feed-post {
	background: #020b1d; border: 1px solid rgba(91, 194, 231, .22); border-radius: 10px; overflow: hidden; position: relative;
	transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease, transform var(--dur-base) ease;
	display: flex; flex-direction: column; height: 100%;
}
.aeson-post-carousel .fl-post-carousel-post:hover,
.aeson-post-carousel .fl-post-grid-post:hover,
.aeson-post-carousel .fl-post-feed-post:hover { border-color: #86d5f0; box-shadow: 0 0 0 1px rgba(91, 194, 231, .12); }
.aeson-post-carousel .fl-post-carousel-image,
.aeson-post-carousel .fl-post-image,
.aeson-post-carousel .fl-post-feed-image { overflow: hidden; position: relative; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.aeson-post-carousel .fl-post-carousel-image img,
.aeson-post-carousel .fl-post-image img,
.aeson-post-carousel .fl-post-feed-image img { width: 100%; display: block; border-top-left-radius: 10px; border-top-right-radius: 10px; transform: scale(1.08); transition: transform .7s ease; }
.aeson-post-carousel .fl-post-carousel-post:hover .fl-post-carousel-image img,
.aeson-post-carousel .fl-post-grid-post:hover .fl-post-image img,
.aeson-post-carousel .fl-post-feed-post:hover .fl-post-feed-image img { transform: scale(1); }
.aeson-post-carousel .fl-post-carousel-image::after,
.aeson-post-carousel .fl-post-image::after,
.aeson-post-carousel .fl-post-feed-image::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
	background: linear-gradient(to bottom, rgba(2, 11, 29, 0) 0%, rgba(2, 11, 29, .18) 30%, rgba(2, 11, 29, .72) 72%, #020b1d 100%);
	pointer-events: none;
}
.aeson-post-carousel .fl-post-carousel-text,
.aeson-post-carousel .fl-post-grid-text,
.aeson-post-carousel .fl-post-feed-text,
.aeson-post-carousel .fl-post-text { padding: 28px 30px 32px; }
.aeson-post-carousel .fl-post-meta,
.aeson-post-carousel .fl-post-feed-meta,
.aeson-post-carousel .fl-post-carousel-meta { color: rgba(255, 255, 255, .58); font-size: 16px; line-height: 1.4; font-weight: 500; margin-bottom: 16px; }
.aeson-post-carousel .fl-post-title,
.aeson-post-carousel .fl-post-title a { color: #ffffff; font-size: 28px; line-height: 1.18; font-weight: 700; text-decoration: none; transition: color var(--dur-base) ease; margin-bottom: 18px; }
.aeson-post-carousel .fl-post-carousel-post:hover .fl-post-title a,
.aeson-post-carousel .fl-post-grid-post:hover .fl-post-title a,
.aeson-post-carousel .fl-post-feed-post:hover .fl-post-title a { color: #86d5f0; }
.aeson-post-carousel .fl-post-excerpt,
.aeson-post-carousel .fl-post-excerpt p { color: rgba(255, 255, 255, .64); font-size: 16px; line-height: 1.75; margin-bottom: 24px; }
.aeson-post-carousel .fl-post-more-link,
.aeson-post-carousel .fl-post-more-link a { color: #86d5f0; font-size: 16px; font-weight: 600; text-decoration: none; transition: opacity .3s ease; }
.aeson-post-carousel .fl-post-more-link:hover,
.aeson-post-carousel .fl-post-more-link a:hover { opacity: .85; }
.aeson-post-carousel .fl-post-title a,
.aeson-post-carousel .fl-post-more-link a { text-decoration: none !important; }
@media (max-width: 768px) {
	.aeson-post-carousel .fl-post-title,
	.aeson-post-carousel .fl-post-title a { font-size: 22px; }
	.aeson-post-carousel .fl-post-carousel-text,
	.aeson-post-carousel .fl-post-grid-text,
	.aeson-post-carousel .fl-post-feed-text,
	.aeson-post-carousel .fl-post-text { padding: 22px 22px 26px; }
	.aeson-post-carousel .fl-post-carousel-post,
	.aeson-post-carousel .fl-post-grid-post,
	.aeson-post-carousel .fl-post-feed-post,
	.aeson-post-carousel .fl-post-carousel-image,
	.aeson-post-carousel .fl-post-image,
	.aeson-post-carousel .fl-post-feed-image,
	.aeson-post-carousel .fl-post-carousel-image img,
	.aeson-post-carousel .fl-post-image img,
	.aeson-post-carousel .fl-post-feed-image img { border-radius: 10px 10px 0 0; }
}


/* =============================================================================
   10. FORM UTILITIES
   ============================================================================= */
/* tight-contact-form (656) — Gravity Forms gap minimizer, used on /contact/ */
.tight-contact-form .gform_wrapper .gform_fields,
.tight-contact-form .gform_wrapper ul.gform_fields { row-gap: 10px !important; column-gap: 12px !important; }
.tight-contact-form .gform_wrapper .gfield,
.tight-contact-form .gform_wrapper ul.gform_fields li.gfield { margin-top: 0 !important; margin-bottom: 10px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.tight-contact-form .gform_wrapper .ginput_container,
.tight-contact-form .gform_wrapper .gfield_label { margin-bottom: 0 !important; }


/* =============================================================================
   11. UTILITY / LAYOUT HELPERS
   ============================================================================= */
.text-white\/90 { color: rgba(255, 255, 255, .9); }
.text-white\/70 { color: rgba(255, 255, 255, .7); }
.text-white\/60 { color: rgba(255, 255, 255, .6); }
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sr-only:focus {
	position: fixed; top: 8px; left: 8px; width: auto; height: auto; margin: 0; padding: 10px 16px;
	background: var(--ocean-3); color: var(--heading); border: 1px solid var(--brand-sky);
	z-index: 10000; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.4);
}

/* =============================================================================
   12. PUBLIC CHROME ADDITIONS (template-assembly pass)
   -----------------------------------------------------------------------------
   Mobile nav flyout states, footer column polish, generic "site page" content
   rows (hero/section/card patterns for the hand-authored static + dynamic
   pages), a light contact-form component, and a dark CTA band - all additive,
   page-scoped, built on the tokens/skeleton above. See
   _harvest/TEMPLATE-BUILD-NOTES.md for the content/IA decisions this serves.
   ============================================================================= */

/* ---- mobile nav flyout (site-header__nav.is-open, toggled by site.js) ----
   QA fix (2026-07-23 dark-QA pass): .site-header carries backdrop-filter
   (Deep Ocean glass header) which per spec makes it the *containing block*
   for any position:fixed descendant - that silently broke this flyout's
   inset:0 (it was resolving against the ~70px header bar instead of the
   viewport, collapsing the full-screen mobile menu down to a sliver showing
   only the first nav item). Dropping the header's backdrop-filter only
   while the flyout is open (harmless - the flyout's own 98%-opaque bg fully
   covers the header anyway) restores inset:0 against the real viewport. */
@media (max-width: 1179px) {
	.site-header:has(.site-header__nav.is-open) {
		-webkit-backdrop-filter: none; backdrop-filter: none;
	}
	.site-header .container { flex-wrap: wrap; }
	.site-header__nav {
		display: none; order: 4; flex-basis: 100%;
	}
	.site-header__nav.is-open {
		display: block; position: fixed; inset: 0; top: 0; z-index: 600;
		background: rgba(5, 18, 29, .98); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
		padding: 90px 24px 40px; overflow-y: auto;
	}
	.site-nav { flex-direction: column; align-items: flex-start; gap: 0; flex-wrap: nowrap; }
	.site-nav li { width: 100%; }
	.site-nav a { padding: 14px 4px; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.08); width: 100%; }
	.site-nav .has-submenu > ul.sub-menu {
		position: static; display: none; box-shadow: none; border-radius: 0; padding: 0 0 0 16px; margin: 0;
	}
	.site-nav .has-submenu.is-open > ul.sub-menu { display: block; }

	/* Mega panel collapses to the same accordion the plain submenus use — the
	   hover model doesn't exist on touch, so it opens from the chevron button.
	   Cards keep their artwork but go full-width and single-column. */
	.site-nav .has-mega { position: relative; }
	.site-nav__mega {
		position: static; padding-top: 0;
		opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: none;
		display: none;
	}
	.site-nav .has-mega.is-open > .site-nav__mega { display: block; }
	.site-nav .has-mega:hover > .site-nav__mega { display: none; }
	.site-nav .has-mega.is-open:hover > .site-nav__mega { display: block; }
	.site-nav__mega-inner { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0 0 8px 16px; -webkit-backdrop-filter: none; backdrop-filter: none; }
	.mega-grid { grid-template-columns: 1fr; gap: 0; }
	.mega-card { padding: 10px 4px !important; border-radius: 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
	.mega-card:hover, .mega-card:focus-visible { transform: none; background: rgba(91, 194, 231, .08); border-color: transparent; }
	.mega-card__art { width: 56px; height: 40px; }
	.mega-foot { margin-top: 8px; padding-top: 8px; }
	.fl-has-submenu-container { display: flex; align-items: center; justify-content: space-between; }
	.fl-menu-toggle {
		background: transparent; border: 0; width: 32px; height: 32px; cursor: pointer; position: relative; flex: 0 0 auto;
	}
	.fl-menu-toggle::after {
		content: "▾"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
		color: var(--heading); transition: transform var(--dur-fast) ease;
	}
	.has-submenu.is-open .fl-menu-toggle::after { transform: rotate(180deg); }
	body.nav-open { overflow: hidden; }
}
@media (min-width: 1180px) {
	.fl-menu-toggle { display: none; }
}
.site-header__badge img { display: block; }
.site-header__logo img { height: 48px; width: auto; }

/* ---- footer polish (site-footer__col wrapper + icon rows) ---- */
.site-footer__col p { margin: 0 0 14px; font-size: 14px; }
.site-footer__icon-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; color: var(--text); }
.site-footer__icon-row svg { flex: 0 0 auto; color: var(--link); }
a.site-footer__icon-row:hover { color: var(--link); }

/* ---- generic "site page" content rows (static + section-assembled pages) ---- */
.site-hero {
	position: relative; overflow: hidden; color: var(--white); display: flex; align-items: center;
	min-height: 46vh; padding: 120px 20px 64px; text-align: center; background: var(--dark);
}
.site-hero__bg { position: absolute; inset: 0; z-index: 0; }
.site-hero__bg img, .site-hero__bg video { width: 100%; height: 100%; object-fit: cover; }
.site-hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(3,6,15,.55), rgba(3,6,15,.82)); }
.site-hero__content { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; width: 100%; }
.site-hero__content h1 { color: #fff; font-size: 44px; margin: 16px 0 0; line-height: 1.08; }
.site-hero__content p { color: rgba(255,255,255,.85); font-size: 17px; margin: 18px auto 0; max-width: 620px; }
.site-hero__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
@media (max-width: 640px) { .site-hero__content h1 { font-size: 30px; } }

.site-section { padding: 64px 20px; }
.site-section--alt {
	background: radial-gradient(130% 160% at 50% 0%, var(--ocean-4) 0%, var(--ocean-3) 48%, var(--ocean-2) 100%);
}
.site-section__head { max-width: 720px; margin: 0 auto 36px; text-align: center; }
.site-section__head h2 { font-size: 32px; margin: 14px 0 10px; }
.site-section__head p { font-size: 16px; }

/* Company Profile + Manufacturing intro under the "Who is Aeson Power?"
   heading (Scott's green box, 2026-07-27 list). Two columns on desktop so it
   reads as a lede band above the stat row rather than a wall of text. */
.who-intro { max-width: var(--container); margin: -8px auto 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 44px; }
.who-intro p { margin: 0; color: var(--text); font-size: 16.5px; line-height: 1.62; }
@media (max-width: 860px) { .who-intro { grid-template-columns: 1fr; margin-bottom: 28px; } }
.site-row { max-width: var(--container); margin: 0 auto; }
.site-row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .site-row--split { grid-template-columns: 1fr; } }
.site-row--split img { border-radius: var(--radius-card-lg); width: 100%; }
.site-prose h1, .site-prose h2, .site-prose h3, .site-prose h4 { margin-top: 1.4em; }
.site-prose h1:first-child, .site-prose h2:first-child, .site-prose h3:first-child, .site-prose h4:first-child { margin-top: 0; }
.site-prose p { margin: 0 0 1em; }
.site-prose ul, .site-prose ol { margin: 0 0 1em; padding-left: 1.4em; }

/* Stat grids are COUNT-AWARE — the column count follows the number of tiles
   rather than being hardcoded to 4. The old fixed `repeat(4, 1fr)` orphaned
   the last tile onto a row of its own wherever a section had 5 or 6 stats
   (sodium-ion-technology "Technical Excellence" 4+1, sustainability's SDG
   row 4+2), which reads as a broken layout. `:has()` measures the real child
   count, so a template author just drops tiles in and the row stays whole —
   no --3/--5/--6 modifier to remember and get wrong. Six goes to 3x2, not
   6-across: those tiles carry a sentence of copy each and six columns
   squeezes them into unreadable ribbons.
   The --3/--6 modifiers are kept as explicit overrides for authors who want
   to force a shape against the count. */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: var(--container); margin: 0 auto; }
.stat-grid:has(> .stat-tile:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
.stat-grid:has(> .stat-tile:nth-child(5):last-child) { grid-template-columns: repeat(5, 1fr); }
.stat-grid:has(> .stat-tile:nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
.stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.stat-grid--6 { grid-template-columns: repeat(6, 1fr); }

/* Tiles are real cards, matching .tile's glass treatment — they used to be
   bare centred text floating on the section ground with no edge at all. */
.stat-tile {
	text-align: center; padding: 26px 18px;
	display: flex; flex-direction: column; justify-content: center;
	border-radius: var(--radius-card);
	background: var(--surface-glass); border: 1px solid var(--surface-border);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: var(--surface-shadow);
	transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease, border-color var(--dur-base) ease, background-color var(--dur-base) ease;
}
.stat-tile:hover { transform: translateY(-6px); box-shadow: var(--surface-shadow-hover); border-color: rgba(91, 194, 231, .35); background: var(--surface-glass-2); }
/* Fluid, because the same tile has to hold "7" and "150-160 Wh/kg" — at a
   fixed 30px the long one broke across three lines in a 1/5-width column. */
.stat-tile h6, .stat-tile b {
	display: block; font-size: clamp(21px, 1.05rem + 1vw, 30px); font-weight: 800;
	line-height: 1.15; color: var(--heading); margin: 0 0 8px; text-wrap: balance;
}
.stat-tile p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text); text-wrap: pretty; }

/* Step down without ever orphaning a tile. An ODD count can't use the generic
   2-up tablet step (5 tiles -> 2+2+1 is the very orphan this section exists to
   prevent), so odd grids hold 3 columns until they drop straight to 1. */
@media (max-width: 1024px) {
	.stat-grid:has(> .stat-tile:nth-child(5):last-child) { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
	.stat-grid, .stat-grid--6,
	.stat-grid:has(> .stat-tile:nth-child(6):last-child) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.stat-grid--3,
	.stat-grid:has(> .stat-tile:nth-child(3):last-child),
	.stat-grid:has(> .stat-tile:nth-child(5):last-child) { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
	.stat-grid--3, .stat-grid--6,
	.stat-grid:has(> .stat-tile:nth-child(3):last-child),
	.stat-grid:has(> .stat-tile:nth-child(5):last-child),
	.stat-grid:has(> .stat-tile:nth-child(6):last-child) { grid-template-columns: 1fr; }
	/* Rick 2026-08-04: rolled the homepage's 2x2-on-phones treatment (NitroBoards
	   card 019fb664) out to every plain 4-tile .stat-grid site-wide (about-us,
	   sustainability, sodium-ion-technology) rather than 1 column. Odd counts
	   above (3/5/6) keep dropping to 1 column - the :has() step-down exists
	   specifically to avoid orphaning a tile in a 2-up wrap. */
	.stat-grid { grid-template-columns: repeat(2, 1fr); }
}

.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: var(--container); margin: 0 auto; }
.tile-grid--2 { grid-template-columns: repeat(2, 1fr); }
.tile-grid--4 { grid-template-columns: repeat(4, 1fr); }
.tile {
	padding: 26px 24px; border-radius: var(--radius-card);
	background: var(--surface-glass); border: 1px solid var(--surface-border);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: var(--surface-shadow);
	transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease, border-color var(--dur-base) ease, background-color var(--dur-base) ease;
}
a.tile:hover, .tile:hover { transform: translateY(-6px); box-shadow: var(--surface-shadow-hover); border-color: rgba(91, 194, 231, .35); background: var(--surface-glass-2); }
.tile h6 { font-size: 18px; margin: 0 0 10px; }
.tile p { margin: 0; font-size: 14px; color: var(--text); }
.tile--dark { background: var(--dark); border-color: var(--dark-line); color: #fff; }
.tile--dark h6 { color: #fff; }
.tile--dark p { color: rgba(255,255,255,.7); }
@media (max-width: 860px) { .tile-grid, .tile-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tile-grid, .tile-grid--2 { grid-template-columns: 1fr; } }
/* Rick 2026-08-04: rolled out site-wide (NitroBoards card 019fb664) - every
   4-tile .tile-grid--4 (Technology & Innovation, Certifications, and the
   sodium-ion-technology page's three) goes 2x2 on phones instead of stacking. */
@media (max-width: 560px) { .tile-grid--4 { grid-template-columns: repeat(2, 1fr); } }
/* NitroBoards card 019fb664 (2026-08-04): "Who is Aeson Power?" stat row and
   the Certifications tile grid, phones only - kept to their own IDs rather
   than changing the shared .stat-grid/.tile-grid--4 defaults, which are also
   used unmodified elsewhere (about-us, sustainability, sodium-ion-technology,
   the Technology & Innovation grid right above this one in the same section). */
@media (max-width: 520px) {
	#who-is-aeson .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	#who-aeson-certs.tile-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

.badge-year { display: inline-block; font-size: 13px; font-weight: 700; color: var(--link); background: var(--badge-bg); padding: 4px 12px; border-radius: var(--radius-pill); margin-bottom: 10px; }

.logo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px; max-width: var(--container); margin: 0 auto; }
/* QA fix (2026-07-23 dark-QA pass): these partner-logo PNGs (About Us "Our
   Partners" strip) are opaque white-background brand marks, not transparent
   cutouts - grayscale(1) alone left a pale rectangle behind every logo on
   the dark ground. invert(1) first turns the white plate near-black (blends
   into the page) and the mark itself into a light line-art glyph; grayscale(1)
   then neutralises whatever colour the invert produced so every logo reads as
   a consistent dim "ghost" mark - same low-emphasis intent as the original
   opacity/grayscale treatment, just with no visible white box. */
.logo-strip img { max-height: 46px; width: auto; opacity: .82; filter: invert(1) grayscale(1) brightness(1.15); transition: opacity var(--dur-base) ease, filter var(--dur-base) ease; }
.logo-strip img:hover { opacity: 1; filter: invert(1) grayscale(1) brightness(1.35); }

/* ---- dark CTA band (bottom-of-page contact prompt, appears on many pages) ---- */
.cta-band {
	background: radial-gradient(120% 90% at 50% 0%, var(--dark-grad-1) 0%, var(--dark-grad-2) 55%, var(--dark-grad-3) 100%);
	color: #fff; padding: 72px 20px; text-align: center;
}
.cta-band h2 { color: #fff; font-size: 32px; margin: 0 0 14px; }
.cta-band > .container { max-width: 720px; }
.cta-band__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.cta-band--split { text-align: left; }
.cta-band--split > .container { max-width: var(--container-narrow); display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 860px) { .cta-band--split > .container { grid-template-columns: 1fr; } }

/* ---- native contact form (dark-glass by default now every section is dark;
   the --dark modifier class is kept as a harmless no-op alias for markup
   that still carries it) ---- */
.aeson-form { display: grid; gap: 14px; max-width: 520px; }
.aeson-form--wide { max-width: none; }
.aeson-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .aeson-form__row { grid-template-columns: 1fr; } }
.aeson-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
/* Owner 2026-08-01: the visible field labels duplicated the placeholders word
   for word, so they're hidden — but kept in the DOM for screen readers and
   for the label/input click association. Needs its own margin reset:
   `.aeson-form label` outranks `.sr-only`, so its margin-bottom would
   otherwise survive as a stray 6px gap above every field. */
.aeson-form label.sr-only { margin: -1px; }
.aeson-form input, .aeson-form select, .aeson-form textarea {
	width: 100%; box-sizing: border-box; border-radius: 10px; padding: 12px 14px; font-size: 15px; font-family: inherit;
	border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: var(--heading);
	transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.aeson-form input::placeholder, .aeson-form textarea::placeholder { color: var(--text-muted); }
.aeson-form input:focus, .aeson-form select:focus, .aeson-form textarea:focus {
	outline: none; border-color: var(--brand-sky); background: rgba(91, 194, 231, .07); box-shadow: 0 0 0 3px rgba(91, 194, 231, .18);
}
.aeson-form textarea { min-height: 110px; resize: vertical; }
.aeson-form button[type="submit"] {
	justify-self: start; background: var(--aeson-primary); color: var(--on-brand); border: 0; border-radius: var(--radius-pill);
	padding: 13px 30px; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.aeson-form button[type="submit"]:hover { background: var(--aeson-bright-pd); transform: translateY(-1px); }
.aeson-form button[type="submit"]:disabled { opacity: .6; cursor: default; transform: none; }
/* NitroBoards card 019fb681 (2026-08-04): the news-page newsletter form's
   Subscribe button, phones only. `.aeson-form button[type="submit"]` is
   `justify-self: start` everywhere else on the site (dealer/contact/CTA
   forms, all left-labelled fields above it) - changing that default would
   re-align every submit button on every form, so this targets only the
   #newsletter-form instance on /news/. On wider screens the centred
   420px-max-width form column already reads fine left-aligned; only the
   full-bleed phone layout made the left-start button look stranded. */
@media (max-width: 600px) {
	#newsletter-form button[type="submit"] { justify-self: center; }
}
.aeson-form__msg { font-size: 14px; margin: 0; }
.aeson-form__msg--ok { color: #7CFFB2; }
.aeson-form__msg--err { color: #ff9a9a; }
.aeson-form--dark input, .aeson-form--dark select, .aeson-form--dark textarea {
	background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: #fff;
}
.aeson-form--dark input::placeholder, .aeson-form--dark textarea::placeholder { color: rgba(255,255,255,.42); }
.aeson-form--dark label { color: rgba(255,255,255,.75); }
.aeson-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* QA fix (2026-07-23 dark-QA pass): the native Contact/Distributor-signup/
   dealer-enquiry-modal forms had no autofill override anywhere - Chrome
   paints autofilled inputs with an opaque light-yellow UA background
   (ignores the input's own background-color), which would have blown a
   bright rectangle straight through the dark form the moment a real
   browser's autofill kicked in. The 1000px inset box-shadow trick paints
   over it with the form's own dark surface colour. Also pin the
   "Identity" <select>'s native option-list background for older/GTK Chrome
   builds that don't fully honour color-scheme:dark on select popups. */
.aeson-form input:-webkit-autofill,
.aeson-form input:-webkit-autofill:hover,
.aeson-form input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--heading);
	-webkit-box-shadow: 0 0 0 1000px #0c1826 inset;
	box-shadow: 0 0 0 1000px #0c1826 inset;
	caret-color: var(--heading);
	transition: background-color 5000s ease-in-out 0s;
}
.aeson-form select option { background-color: #0c1826; color: #fff; }

/* ---- info-card row (Contact page "Visit Us / Call Us / Email Us / Global Presence") ---- */
.info-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: var(--container); margin: 0 auto; }
.info-card { background: rgba(255,255,255,.04); border: 1px solid var(--dark-line); border-radius: 16px; padding: 22px 20px; text-align: center; }
.info-card h6 { color: #fff; margin: 0 0 8px; font-size: 15px; }
.info-card p { margin: 0; font-size: 13.5px; color: rgba(255,255,255,.65); }
@media (max-width: 860px) { .info-cards { grid-template-columns: repeat(2, 1fr); } }
/* NitroBoards card 019fb682 (2026-08-04): 2x2 instead of a single stacked
   column on phones. */
@media (max-width: 480px) { .info-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; } .info-card { padding: 16px 12px; } }

/* ---- news / resources card grids (light + dark variants beyond the module CSS) ---- */
.news-grid, .resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: var(--container); margin: 0 auto; }
@media (max-width: 900px) { .news-grid, .resource-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .news-grid, .resource-grid { grid-template-columns: 1fr; } }
/* NitroBoards card 019fb667 (2026-08-04): the homepage's 3-article news
   section, phones only - horizontal scroll-snap slider instead of the long
   1-column stack. Scoped to .home-news-grid (home.ejs only): .news-grid is
   shared with the full /news/ listing page and .resource-grid with
   /resources/, which both keep the plain stacked list. */
@media (max-width: 560px) {
	.home-news-grid {
		display: flex !important; grid-template-columns: none !important;
		overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px !important;
		-webkit-overflow-scrolling: touch; scrollbar-width: none;
		padding-bottom: 4px;
	}
	.home-news-grid::-webkit-scrollbar { display: none; }
	.home-news-grid .news-card { flex: 0 0 88%; scroll-snap-align: center; }
}
.resource-card {
	background: var(--surface-glass); border: 1px solid var(--surface-border);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border-radius: 14px; overflow: hidden; box-shadow: var(--surface-shadow); display: flex; flex-direction: column;
	transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease, border-color var(--dur-base) ease;
}
.resource-card:hover { transform: translateY(-6px); box-shadow: var(--surface-shadow-hover); border-color: rgba(91, 194, 231, .35); }
.resource-card[hidden] { display: none; }
.resource-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.resource-card__cat { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--link); font-weight: 700; }
.resource-card h5 { margin: 0; font-size: 16px; color: var(--heading); }
.resource-card a.resource-card__dl { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--link); text-decoration: none; }
.resource-card a.resource-card__dl:hover { text-decoration: underline; color: var(--link-hover); }
.resource-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: var(--container); margin: 0 auto 30px; }
.resource-filters input[type="search"] {
	flex: 1 1 240px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
	color: var(--heading); padding: 11px 14px; font-size: 14px; transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.resource-filters input[type="search"]::placeholder { color: var(--text-muted); }
.resource-filters input[type="search"]:focus { outline: none; border-color: var(--brand-sky); background: rgba(91, 194, 231, .07); }
.resource-pill {
	cursor: pointer; background: transparent; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-pill);
	color: var(--text); padding: 8px 16px; font-size: 13px; font-weight: 600; transition: color var(--dur-base) ease, background-color var(--dur-base) ease, border-color var(--dur-base) ease;
}
.resource-pill:hover { color: var(--heading); border-color: rgba(255,255,255,.3); }
.resource-pill.is-active { background: var(--link); color: var(--paper); border-color: var(--link); }
.resource-empty { text-align: center; color: var(--text); padding: 40px 0; }

.news-card { background: #020b1d; border: 1px solid rgba(91,194,231,.22); border-radius: 10px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; color: #fff; transition: border-color var(--dur-base) ease, transform var(--dur-base) ease; }
.news-card:hover { border-color: var(--brand-sky); transform: translateY(-4px); }
.news-card__img { aspect-ratio: 16/10; overflow: hidden; background: #05122a; }
.news-card__img img { width: 100%; height: 100%; object-fit: cover; }
.news-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.news-card__meta { font-size: 13px; color: rgba(255,255,255,.55); }
.news-card h2, .news-card h3 { color: #fff; font-size: 20px; margin: 0; line-height: 1.3; }
.news-card p { color: rgba(255,255,255,.64); font-size: 14px; margin: 0; }
.news-card__more { color: var(--brand-sky); font-size: 13.5px; font-weight: 600; }
.news-section { background: var(--dark); padding: 64px 20px; }
.news-article { max-width: 760px; margin: 0 auto; padding: 130px 20px 80px; }
.news-article__meta { color: var(--text); font-size: 14px; margin-bottom: 24px; }
/* QA fix (2026-07-23 dark-QA pass): harvested WP content embeds inline
   images as <figure class="wp-block-image"><img></figure> straight from the
   article body (<%- content %>, byte-faithful per the content-fidelity
   rule - never edited). Most are full-bleed photography and read fine
   directly on the dark ground, but a couple (e.g. the Deakin University
   article's radar-chart graphic and its light-gradient application diagram)
   have a hard white/light studio background baked into the source PNG with
   no frame at all - a bright rectangle sitting raw against the dark page.
   Giving every inline article figure a dark glass frame neutralises those
   without needing to single out specific images, and reads as a deliberate
   editorial treatment for the full-bleed photos too. */
.news-article figure.wp-block-image {
	background: var(--surface-glass); border: 1px solid var(--surface-border);
	border-radius: var(--radius-card-lg); padding: 14px; margin: 0 0 28px;
}
.news-article img.wp-image, .news-article figure img { width: 100%; border-radius: var(--radius-card); display: block; }
.news-article figure.wp-block-image img { margin: 0; }

/* ---- distributor sign-up form section (Where to Buy) ---- */
.signup-band { background: linear-gradient(180deg, var(--ocean-3) 0%, var(--ocean-2) 100%); padding: 70px 20px; }
.signup-band__wrap { max-width: 640px; margin: 0 auto; text-align: center; }

/* ---- battery-application filter (Where to Buy directory extension) ---- */
.app-filter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 18px; }
.app-filter button {
	cursor: pointer; background: transparent; border: 1px solid var(--dark-line); border-radius: var(--radius-pill);
	color: var(--dark-muted); padding: 8px 16px; font-size: 13px; font-weight: 600; font-family: var(--font-module);
}
.app-filter button.is-active { color: var(--on-brand); background: var(--aeson-primary-2); border-color: var(--aeson-primary-2); }
.aeson-dl-card.app-hide { display: none !important; }

/* ---- responsive video embed (home "What is Sodium Ion?" videos, whitepaper page) ---- */
.video-embed { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-card-lg); overflow: hidden; box-shadow: 0 18px 45px rgba(0,0,0,.18); max-width: var(--container-narrow); margin: 0 auto; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* QA fix (2026-07-23 dark-QA pass): the Contact page's keyless Google Maps
   embed (see TEMPLATE-BUILD-NOTES.md) renders Google's own light-mode map
   UI - no styling array is available without an API key - so it was sitting
   as a big bright rectangle running edge-to-edge into the dark ocean
   section. A dark glass bezel around it (matching the .tile/.resource-card
   surface language) makes the brightness read as an intentional "framed
   widget" instead of an unstyled leftover. Used on the Contact page only;
   the two home/about-us YouTube embeds stay plain .video-embed (their own
   player chrome is already dark before/while playing). */
.map-embed { max-width: var(--container-narrow); margin: 0 auto; padding: 14px; border-radius: calc(var(--radius-card-lg) + 12px); background: var(--surface-glass); border: 1px solid var(--surface-border); box-shadow: var(--surface-shadow); }
.map-embed .video-embed { margin: 0; max-width: none; box-shadow: none; }

/* ---- home hero (video bg; two-line H1 restored + third CTA per the client's
   2026-07-24 hero mock; Safe Power badge deleted and the product-family photo
   grown ~50% into the space it freed per Scott's 2026-07-27 list) ---- */
.home-hero { min-height: 72vh; padding: 150px 20px 90px; }
.home-hero__inner { display: flex; flex-direction: column; }
/* Condensed heavy face + the mock's two-tone split: line 1 white, line 2 brand
   sky. Sized with clamp() so the long first line stays on ONE line from 1280px
   up and reflows gracefully below it, exactly as the mock shows it. */
.home-hero__title {
	margin: 0 0 6px; color: var(--white); font-family: var(--font-site);
	font-weight: 800; font-stretch: condensed; letter-spacing: -.005em; line-height: 1.02;
	font-size: clamp(34px, 5.1vw, 68px); text-wrap: balance;
}
.home-hero__title span { display: block; }
.home-hero__title-alt { color: var(--brand-sky); }
/* Column split is tuned so the copy column stays just wide enough to hold all
   THREE hero CTAs on one row at container width (they total ~534px), while the
   photo column still gains enough to carry the ~50% enlargement. Below the
   container width the buttons wrap, which is the intended behaviour. */
.home-hero__grid { display: grid; grid-template-columns: 1.12fr 1.2fr; gap: 24px; align-items: center; width: 100%; }
@media (max-width: 900px) { .home-hero__grid { grid-template-columns: 1fr; text-align: center; } }
.home-hero__copy p { font-size: 17px; color: rgba(255,255,255,.88); margin: 18px 0 0; max-width: 560px; }
@media (max-width: 900px) { .home-hero__copy p { margin-left: auto; margin-right: auto; } }
.home-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
@media (max-width: 900px) { .home-hero__actions { justify-content: center; } }
.home-hero__photo { position: relative; display: flex; align-items: center; justify-content: flex-end; }
.home-hero__photo::before {
	/* client-authorized halo behind the product-family photo (P1 #22 / note 1.3)
	   — kept, but ocean-tinted instead of pure white so it reads as a deliberate
	   glow against the Deep Ocean ground rather than an unstyled white patch */
	content: ""; position: absolute; inset: -6% -12%; border-radius: 50%;
	background: radial-gradient(circle, rgba(210, 240, 250, .85) 0%, rgba(91, 194, 231, .38) 45%, rgba(91, 194, 231, 0) 72%);
	filter: blur(2px); z-index: 0;
}
/* Owner 2026-07-31: scene scaled +50% (130% -> 195%) and ANCHORED to the
   viewport's right edge — the negative margin walks the img out of the
   centred container to the screen edge; .hero-row's overflow:hidden clips
   any residue. The transparent left of the scene may overlap the copy
   column's whitespace; the copy stacks above it. */
.home-hero__copy { position: relative; z-index: 2; }
.home-hero__scene {
	position: relative; z-index: 1; flex: none; width: 195%; max-width: none;
	margin-right: min(0px, calc((var(--container) - 100vw) / 2));
	will-change: transform;              /* scroll parallax (site.js) */
	transform-origin: 80% 100%;
}
.home-hero__scene > img {
	display: block; width: 100%; max-width: none; height: auto;
	filter: drop-shadow(0 20px 40px rgba(0,0,0,.35));
}
/* The rotating plinth sprite (scene-spin.webp, frames stacked in a grid)
   rides on top of the base image inside this wrapper; site.js steps its
   background-position. Position/size come from data- attrs emitted by the
   sprite assembler — fractions of the base image box. */
.home-hero__spin {
	position: absolute; z-index: 1; pointer-events: none;
	background-repeat: no-repeat;
}
@media (max-width: 900px) {
	.home-hero__photo { justify-content: center; }
	.home-hero__scene { width: 100%; max-width: 100%; margin-right: 0; }
}
/* NitroBoards card 019fb657 (2026-08-04): phone banner had ~150px of empty
   space above the headline (padding tuned for the 72vh desktop video bg) and
   the copy/CTAs centred under it. Scoped to phones only - the 900px tablet
   breakpoint above keeps its centred layout untouched. */
@media (max-width: 600px) {
	.home-hero { padding-top: 28px; }
	.home-hero__grid { text-align: left; }
	.home-hero__copy p { margin-left: 0; margin-right: 0; }
	.home-hero__actions { justify-content: flex-start; }
}

.home-feature-row { padding: 70px 20px; }
.home-feature-row .site-row--split { align-items: center; }

/* ---- "Power without Weight" band (home, replaces the old spec-card row) ----
   The artwork is a light aquamarine print banner. That is content, not page
   chrome, so it does not breach the no-light-backgrounds directive — but it
   would read as a bright slab butting straight into the Deep Ocean ground, so
   it sits in the same dark glass bezel the Contact map embed uses. "Chop to
   fit": the image is object-fit:cover inside a ratio box that gets taller as
   the viewport narrows, so the artwork crops instead of shrinking to a sliver. */
.pww-band { max-width: var(--container); margin: 0 auto; padding: 14px; border-radius: calc(var(--radius-card-lg) + 12px); background: var(--surface-glass); border: 1px solid var(--surface-border); box-shadow: var(--surface-shadow); }
.pww-band__img { display: block; width: 100%; aspect-ratio: 2400 / 895; object-fit: cover; object-position: 62% center; border-radius: var(--radius-card-lg); }
.pww-band__copy { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; padding: 30px 22px 12px; }
.pww-band__copy p { margin: 0; color: var(--text); font-size: 16.5px; line-height: 1.62; }
@media (max-width: 860px) {
	.pww-band__copy { grid-template-columns: 1fr; padding: 24px 8px 8px; }
}
/* NitroBoards card 019fb662 (2026-08-04): the "chop to fit" cover-crop above
   is a deliberate desktop choice (see the comment on .pww-band), but on a
   phone it cropped enough of the left side to lose the "Power" wordmark and
   part of the logo - phones only, show the full banner uncropped instead. */
@media (max-width: 600px) {
	.pww-band__img { aspect-ratio: 2400 / 895; object-fit: contain; object-position: center; }
}

/* ---- homepage testimonials (renders only when the CMS has published rows) ---- */
.tm-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.tm-card {
	margin: 0; padding: 28px 28px 24px; border-radius: var(--radius-card);
	background: var(--surface-glass); border: 1px solid var(--surface-border); box-shadow: var(--surface-shadow);
	display: flex; flex-direction: column; gap: 20px;
}
.tm-card__quote { margin: 0; color: var(--text); font-size: 16.5px; line-height: 1.62; flex: 1 1 auto; }
.tm-card__quote::before { content: "\201C"; display: block; color: var(--brand-sky); font-size: 44px; line-height: .6; margin-bottom: 10px; }
.tm-card__by { display: flex; align-items: center; gap: 14px; }
.tm-card__pic { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.tm-card__pic--mark {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--badge-bg); border: 1px solid var(--badge-border); color: var(--brand-sky);
	font-weight: 700; letter-spacing: .04em; font-size: 17px;
}
.tm-card__who { display: flex; flex-direction: column; }
.tm-card__who strong { color: var(--heading); font-size: 15px; }
.tm-card__who span { color: var(--text-muted); font-size: 13px; }

.spec-card { background: var(--dark); color: #fff; border-radius: var(--radius-card-lg); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; max-width: var(--container); margin: 0 auto; }
.spec-card img { width: 100%; height: 100%; object-fit: cover; }
.spec-card__body { padding: 44px 44px 40px; }
.spec-card__body h6 { color: var(--aeson-accent); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; margin: 0 0 6px; }
.spec-card__body h3 { color: #fff; font-size: 28px; margin: 0 0 14px; }
.spec-card__body p { color: rgba(255,255,255,.72); margin: 0 0 24px; }
.spec-card__stats { display: flex; gap: 26px; margin-bottom: 28px; flex-wrap: wrap; }
.spec-card__stats div { }
.spec-card__stats h6 { color: #fff; font-size: 22px; margin: 0; }
.spec-card__stats span { font-size: 12px; color: rgba(255,255,255,.6); }
.spec-card__actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 760px) { .spec-card { grid-template-columns: 1fr; } .spec-card img { max-height: 240px; } }

/* ==========================================================================
   §13 — Sodium-Ion Explainer (home page, interactive 3D module)
   Ported from claude.ai/design "Sodium-ion battery explainer" /
   Sodium-Ion Explainer.html. Design tokens are the Nocturne system's,
   scoped to .na-exp so they never leak into the site palette. The design's
   full-viewport fixed layout is adapted to an embedded full-width section:
   fixed -> absolute inside the section, viewport units -> container size.
   Fonts: the design specifies Inter; per site convention (no Google Fonts
   load) we use the same Inter/system stack the other dark modules use.
   ========================================================================== */
.na-exp {
  /* Module tokens — retinted 2026-07-23 from the ported design's purple
     "Nocturne" scheme to the official VI palette (Aeson Power Branding.pdf:
     primary PANTONE 2985C #5bc2e7, secondary 2965C #00263e). Grounds are
     deep tints of the corporate navy; the accent (Na+ ion, chips, rules,
     dust) is the corporate sky. The crystal-chemistry colours for V/P/O in
     the scene keep their scientific colour-coding — only sodium wears the
     brand. Keep these on-brand; do not reintroduce the purples. */
  --nax-bg: #071c2b;
  --nax-surface: #0d3247;
  --nax-text: #e9f4fa;
  --nax-accent: #5bc2e7;
  /* the design specified Inter, which this site does not load — use the one
     corporate face rather than falling through to the visitor's system UI font */
  --nax-font: var(--font-site);
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; height: clamp(560px, 92vh, 880px);
  background: var(--nax-bg); color: var(--nax-text); font-family: var(--nax-font);
  outline: none;
}
.na-exp:focus-visible { outline: 2px solid var(--nax-accent); outline-offset: -2px; }
.na-exp a { color: var(--nax-accent); text-decoration: none; }
.na-exp a:hover { color: #a8dff2; }
/* Brand-gradient ground: same two radial glows the design shipped with
   (kept, per the "retain a gradient" instruction), retinted to the corporate
   sky, over a vertical wash through the corporate navy family. */
.na-exp .nax-bg { position: absolute; inset: 0; background:
  radial-gradient(1200px 700px at 68% 30%, rgba(91,194,231,0.12), transparent 65%),
  radial-gradient(900px 600px at 20% 85%, rgba(79,169,205,0.08), transparent 60%),
  linear-gradient(180deg, #0a2940 0%, var(--nax-bg) 55%, #04101c 100%); }
.na-exp .nax-stage { position: absolute; inset: 0; }
.na-exp .nax-stage canvas { display: block; }
.na-exp .nax-heat { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side at 50% 55%, rgba(255,96,44,0.30), transparent 72%); }
.na-exp .nax-vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(10,11,17,0.55) 100%); }
.na-exp .nax-topbar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: flex-start;
  justify-content: space-between; padding: 22px 30px 0; pointer-events: none; z-index: 5; }
.na-exp .nax-brand { pointer-events: auto; }
/* Real header logo replaces the ported design's text wordmark. height:auto
   via the global reset; width free to follow — never distort the mark. */
.na-exp .nax-brand-logo { display: block; line-height: 0; }
.na-exp .nax-brand-logo img { height: 40px; width: auto; }
.na-exp .nax-brand-name { font-family: var(--nax-font); font-weight: 500; font-size: 16px;
  letter-spacing: 0.22em; }
.na-exp .nax-brand-name em { font-style: normal; color: var(--nax-accent); }
.na-exp .nax-brand-sub { margin-top: 3px; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(233,244,250,0.45); white-space: nowrap; }
.na-exp .nax-brand-rule { margin-top: 10px; height: 1px; width: 240px;
  background: linear-gradient(90deg, rgba(91,194,231,0.75), rgba(91,194,231,0.35) 60%, transparent); }
.na-exp .nax-top-right { text-align: right; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.na-exp .nax-tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em;
  padding: 3px 10px; border-radius: 6px; border: 1px solid var(--nax-accent); color: var(--nax-accent);
  white-space: nowrap; }
.na-exp .nax-hint { font-size: 10.5px; letter-spacing: 0.08em; color: rgba(233,244,250,0.32); }
.na-exp .nax-caption { position: absolute; left: 30px; bottom: 116px; max-width: 540px; z-index: 5;
  pointer-events: none; transition: opacity 0.24s ease, transform 0.24s ease; }
.na-exp .nax-caption.fade { opacity: 0; transform: translateY(8px); }
.na-exp .nax-cap-kicker { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--nax-accent); margin-bottom: 8px; }
.na-exp .nax-cap-title { font-family: var(--nax-font); font-weight: 500; font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.1; letter-spacing: -0.015em; margin-bottom: 10px; }
.na-exp .nax-cap-body { font-size: 14.5px; line-height: 1.6; color: rgba(233,244,250,0.68);
  text-wrap: pretty; max-width: 470px; }
.na-exp .nax-legend { position: absolute; right: 30px; bottom: 116px; z-index: 5; padding: 14px 18px 15px;
  border-radius: 10px; border: 1px solid rgba(233,244,250,0.09);
  background: rgba(35,37,50,0.72); backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none; }
.na-exp .nax-legend.show { opacity: 1; transform: none; }
.na-exp .nax-legend-formula { font-family: var(--nax-font); font-weight: 500; font-size: 16px;
  letter-spacing: 0.02em; margin-bottom: 10px; }
.na-exp .nax-legend-row { display: flex; align-items: center; gap: 10px; font-size: 12px;
  color: rgba(233,244,250,0.72); padding: 3px 0; }
.na-exp .nax-swatch { width: 12px; height: 12px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.na-exp .nax-controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  padding: 0 30px 20px; display: flex; flex-direction: column; gap: 12px; }
.na-exp .nax-track { position: relative; height: 14px; cursor: pointer; }
.na-exp .nax-track-line { position: absolute; left: 0; right: 0; top: 6px; height: 2px;
  background: rgba(233,244,250,0.14); border-radius: 1px; }
.na-exp .nax-track-fill { position: absolute; left: 0; top: 6px; height: 2px; width: 100%;
  background: var(--nax-accent); transform-origin: left center;
  box-shadow: 0 0 8px rgba(91,194,231,0.6); border-radius: 1px; }
.na-exp .nax-tick { position: absolute; top: 3px; width: 1px; height: 8px; background: rgba(233,244,250,0.3); }
.na-exp .nax-ctl-row { display: flex; align-items: center; gap: 18px; }
.na-exp .nax-playbtn { width: 38px; height: 38px; border-radius: 50%; flex: none;
  border: 1px solid var(--nax-accent); background: transparent; color: var(--nax-accent);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.15s ease; }
.na-exp .nax-playbtn:hover { background: rgba(91,194,231,0.14); }
.na-exp .nax-playbtn:active { background: rgba(91,194,231,0.24); }
.na-exp .nax-playbtn:focus-visible { outline: 2px solid var(--nax-accent); outline-offset: 2px; }
.na-exp .nax-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.na-exp .nax-chip { border: none; background: transparent; color: rgba(233,244,250,0.42);
  font-family: var(--nax-font); font-weight: 500; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 6px 10px; border-radius: 6px; cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease; }
.na-exp .nax-chip:hover { color: rgba(233,244,250,0.8); background: rgba(91,194,231,0.10); }
.na-exp .nax-chip:active { background: rgba(91,194,231,0.2); }
.na-exp .nax-chip:focus-visible { outline: 2px solid var(--nax-accent); outline-offset: 1px; }
.na-exp .nax-chip.on { color: var(--nax-accent); background: rgba(91,194,231,0.13); }
.na-exp .nax-timecode { margin-left: auto; font-size: 11px; letter-spacing: 0.08em;
  color: rgba(233,244,250,0.35); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .na-exp .nax-legend { display: none; }
  .na-exp .nax-caption { bottom: 128px; right: 30px; max-width: none; }
}

/* ==========================================================================
   §14 — Series "Key Features" icon list (/series/:slug/)
   Recovered 2026-07-23 from the saved frontend crawl HTML (see
   _harvest/OUTSTANDING-FOR-CLIENT.md A9 + scripts/recover-series-features.mjs)
   - the original DB harvest never captured this Beaver Builder module.
   Matches the harvested look per the page's own layout-bundle CSS: the row
   background is var(--fl-global-ap-secondary-colour) = #00263e (dark navy,
   close enough to the site's existing var(--dark) to reuse it), each card
   is a translucent accent-tinted tile with a rounded border, and heading
   text is var(--fl-global-white). Reuses .tile-grid's column-count/gap
   breakpoints conceptually but needs its own selectors since the visual
   (dark bg, translucent cards, centered icon+heading) doesn't match the
   light .tile pattern used elsewhere. ========================================================================== */
/* Series hero scrim — the bg is the product's own label artwork (pale, busy),
   so the shared .hero-row__overlay alpha is not enough to carry white text. */
.series-hero .hero-row__bg img { filter: saturate(.75) brightness(.6); }
.series-hero .hero-row__overlay { background: radial-gradient(ellipse at center, rgba(2, 14, 24, .82) 0%, rgba(2, 14, 24, .9) 100%); }
.series-hero .hero-row__content h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }

.series-features { background: var(--dark); padding: 60px 0; }
.series-features__head { text-align: center; max-width: var(--container-narrow, 720px); margin: 0 auto 36px; }
.series-features__head h3 { color: #fff; margin: 0 0 8px; }
.series-features__head p { color: rgba(255,255,255,.65); margin: 0; }
.series-features__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; max-width: var(--container); margin: 0 auto; }
.series-feature-card { background: rgba(168, 223, 242, .08); border: 1px solid rgba(168, 223, 242, .1); border-radius: 10px; padding: 25px 18px; text-align: center; }
.series-feature-card img { width: 64px; height: 64px; object-fit: contain; margin: 0 auto 14px; display: block; }
.series-feature-card__noicon { width: 64px; height: 64px; margin: 0 auto 14px; }
.series-feature-card h5 { color: #fff; font-size: 15px; line-height: 1.3; margin: 0; }
@media (max-width: 1024px) { .series-features__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .series-features__grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- series "Models in this series" size ladder ----------------------------
   Replaces the old name-only "Related Products" tile grid. Each card is one
   model with its case dimensions and headline spec, ordered smallest to
   largest, so the page answers "which one fits and which one do I need?"
   without a click — the client's stated purpose for the series page. */
.series-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; max-width: var(--container); margin: 0 auto; }
.series-model {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
	padding: 20px 16px 18px; border-radius: var(--radius-card);
	background: var(--surface-glass); border: 1px solid var(--surface-border);
	text-decoration: none; color: inherit;
	transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.series-model:hover, .series-model:focus-visible { transform: translateY(-3px); border-color: var(--badge-border); box-shadow: var(--surface-shadow-hover); }
.series-model__art { display: block; height: 110px; width: 100%; margin-bottom: 8px; }
.series-model__art img { width: 100%; height: 100%; object-fit: contain; }
.series-model__name { color: var(--heading); font-size: 17px; font-weight: 700; }
.series-model__dims { color: var(--brand-sky); font-size: 13px; font-variant-numeric: tabular-nums; }
.series-model__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.series-model__meta span + span::before { content: "·"; margin-right: 10px; }
/* NitroBoards card 019fb676 (2026-08-04): the auto-fill grid above only ever
   fits one 230px column below ~500px, so a series with a dozen models became
   a long "toilet roll" of stacked cards. Phones only: horizontal scroll-snap
   slider, native swipe, no JS - two cards peek per view so it still reads as
   a scrollable row rather than a single full-bleed card. */
@media (max-width: 500px) {
	.series-models {
		display: flex; grid-template-columns: none;
		overflow-x: auto; scroll-snap-type: x proximity; gap: 12px;
		-webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px;
	}
	.series-models::-webkit-scrollbar { display: none; }
	.series-models .series-model { flex: 0 0 46%; scroll-snap-align: start; }
}

/* ---- tech comparison table (sodium-ion-technology "vs Lithium-Ion" row) ---- */
.tech-compare__table { width: 100%; border-collapse: collapse; }
.tech-compare__table th, .tech-compare__table td { text-align: left; padding: 14px; border-bottom: 1px solid rgba(255,255,255,.09); }
.tech-compare__table thead th { border-bottom: 2px solid rgba(255,255,255,.16); color: var(--heading); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.tech-compare__table tbody td { color: var(--text); font-size: 15px; }
.tech-compare__table tbody td:first-child { color: var(--heading); font-weight: 600; }
.tech-compare__table tbody tr:last-child td { border-bottom: 0; }
.tech-compare__table tbody tr:hover td { background: rgba(91, 194, 231, .05); }

/* §15 — FAQ page accordions (content sourced from the manufacturer's global
   FAQ, see _harvest/master-site/FINDINGS.md A8) */
.faq-page .faq-item { border-bottom: 1px solid rgba(255,255,255,.12); padding: 4px 0; }
.faq-page .faq-item summary { cursor: pointer; font-weight: 600; color: var(--heading, #e9f4fa);
  padding: 12px 28px 12px 0; position: relative; list-style: none; transition: color .35s var(--ease, ease); }
.faq-page .faq-item summary::-webkit-details-marker { display: none; }
.faq-page .faq-item summary::after { content: '+'; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%); color: var(--brand-sky, #5bc2e7); font-size: 20px; font-weight: 400;
  transition: transform .35s var(--ease, ease); }
.faq-page .faq-item[open] summary { color: var(--brand-sky-light, #a8dff2); }
.faq-page .faq-item[open] summary::after { content: '\2212'; }
.faq-page .faq-item summary:hover { color: var(--link, #5bc2e7); }
.faq-page .faq-item p { padding: 0 0 14px; margin: 0; color: var(--text); }

/* ==========================================================================
   §16 — Chemistry WebGL heroes
   §16 structure is shared by all three; §16a/§16b/§16c carry each scene's palette.
   - .na-hero  /sodium-ion-technology/  — claude.ai/design "aeson-sodium-hero.html"
   - .li-hero  /lithium-ion/            — claude.ai/design "aeson-lithium-hero.html"
   - .pb-hero  /lead-acid/              — claude.ai/design "aeson-leadacid-hero.html"
   The WebGL scene fills .{na,li}-hero__bg; each section's own CSS radial
   gradient is the identical-palette fallback shown while WebGL boots (or
   forever, if unavailable). Headline treatment (kicker rule, gradient text) is
   the designs', set in the site font instead of their Google-Fonts Archivo per
   site policy.
   ========================================================================== */
.na-hero, .li-hero, .pb-hero { position: relative; isolation: isolate; overflow: hidden;
  width: 100%; height: clamp(480px, 68vh, 760px); }
.na-hero__bg, .li-hero__bg, .pb-hero__bg { position: absolute; inset: 0; }
.na-hero__bg canvas, .li-hero__bg canvas, .pb-hero__bg canvas { display: block; width: 100%; height: 100%; }
.na-hero__content, .li-hero__content, .pb-hero__content { position: absolute; inset: 0; display: flex; align-items: center;
  pointer-events: none; /* keep the pointer talking to the canvas */
  padding: 0 8vw; }
.na-hero__inner, .li-hero__inner, .pb-hero__inner { max-width: 40rem; }
.na-hero__kicker, .li-hero__kicker, .pb-hero__kicker { display: flex; align-items: center; gap: 14px;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.34em; text-transform: uppercase; margin: 0 0 18px; }
.na-hero__kicker::before, .li-hero__kicker::before, .pb-hero__kicker::before { content: ""; width: 44px; height: 1px; }
/* NB: the palette blocks must set the headline gradient with `background-image`,
   never the `background` shorthand — the shorthand resets background-clip back
   to border-box and the gradient paints as a solid block behind transparent
   text instead of filling the glyphs. */
.na-hero h1, .li-hero h1, .pb-hero h1 { margin: 0 0 20px; font-size: clamp(40px, 5vw, 68px); font-weight: 600;
  line-height: 1.04; letter-spacing: -0.01em;
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.na-hero__lede, .li-hero__lede, .pb-hero__lede { margin: 0; font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.65; font-weight: 400; max-width: 34rem; text-wrap: pretty; }
.na-hero .site-hero__actions, .li-hero .site-hero__actions, .pb-hero .site-hero__actions { margin-top: 28px; pointer-events: auto; }

/* §16a — sodium palette (cyan) */
.na-hero { background: radial-gradient(circle at 62% 52%, #cdeef8 0%, #4fa9cd 28%, #10608a 58%, #07293c 100%); }
.na-hero__kicker { color: #a8dff2; }
.na-hero__kicker::before { background: linear-gradient(90deg, transparent, #7fd0e8); }
.na-hero h1 { background-image: linear-gradient(175deg, #ffffff 20%, #9edcf2 75%, #63b9dc);
  filter: drop-shadow(0 2px 18px rgba(9, 46, 68, 0.55)); }
/* NitroBoards card 019fb67a (2026-08-04): the WebGL scene's pointer-follow
   glow can sweep a bright patch under this paragraph (worst on mobile, where
   the glow covers proportionally more of the narrower hero), and the single
   soft 14px shadow washed out against it. Layered tight+wide dark shadow
   instead - holds legible at any glow position without darkening the text
   over the normal (non-bright) background. Sodium-only: .li-hero__lede and
   .pb-hero__lede are separate rules just below, untouched. */
.na-hero__lede { color: #d3ecf7; text-shadow: 0 1px 3px rgba(4, 22, 33, .9), 0 2px 18px rgba(4, 22, 33, .75), 0 0 34px rgba(4, 22, 33, .5); }

/* §16b — lithium palette (violet) */
.li-hero { background: radial-gradient(circle at 62% 52%, #e4dcfa 0%, #8371d0 28%, #3d2f96 58%, #191342 100%); }
.li-hero__kicker { color: #c8bcf0; }
.li-hero__kicker::before { background: linear-gradient(90deg, transparent, #a795e8); }
.li-hero h1 { background-image: linear-gradient(175deg, #ffffff 20%, #c5b6f2 75%, #9280dc);
  filter: drop-shadow(0 2px 18px rgba(28, 20, 70, 0.55)); }
.li-hero__lede { color: #e3dcf7; text-shadow: 0 1px 14px rgba(22, 15, 62, 0.6); }

/* §16c — lead-acid palette (gold / grey lead) */
.pb-hero { background: radial-gradient(circle at 62% 52%, #f6e8cd 0%, #c59a4a 28%, #7a5a1c 58%, #2e2210 100%); }
.pb-hero__kicker { color: #e4c98e; }
.pb-hero__kicker::before { background: linear-gradient(90deg, transparent, #d8b46a); }
.pb-hero h1 { background-image: linear-gradient(175deg, #ffffff 20%, #ecd39a 75%, #c9a252);
  filter: drop-shadow(0 2px 18px rgba(46, 34, 12, 0.55)); }
.pb-hero__lede { color: #f0e4c8; text-shadow: 0 1px 14px rgba(40, 30, 10, 0.6); }

/* ==========================================================================
   §21  tel: links (NitroCore rule — every phone number is dialable)
   Phone numbers sit inside already-styled copy (muted CTA-band text, footer
   icon rows, contact info cards). This makes the anchor take on whatever
   colour its context already had, so wrapping a number in a link is purely
   additive — it never restyles the block it lives in.
   ========================================================================== */
.aeson-tel { color: inherit; text-decoration: none; }
.aeson-tel:hover, .aeson-tel:focus-visible { text-decoration: underline; }

/* ===== Postcode dealer finder (Rick 2026-08-04) =====
   Lives INSIDE .aeson-dl-controls alongside search/country/state — owner
   2026-08-04: no heading row and no second row, because the 3D map already
   owns most of the fold and vertical space above the dealer grid is the
   scarce resource here. The input keeps the accent border so it still reads
   as the primary action despite having no label of its own. */
.aeson-dealers .aeson-dl-pc {
	flex: 0 0 118px; width: 118px; padding: 14px 12px; font-size: 15px; font-weight: 700; letter-spacing: 1px; text-align: center;
	background: rgba(255,255,255,.05); border: 1px solid rgba(91,194,231,.45); border-radius: 12px; color: #fff;
	box-shadow: inset 0 1px 2px rgba(0,0,0,.25); outline: none;
}
.aeson-dealers .aeson-dl-pc::placeholder { font-weight: 400; letter-spacing: normal; color: rgba(255,255,255,.42); }
.aeson-dealers .aeson-dl-pc:focus { border-color: var(--brand-sky); box-shadow: 0 0 0 3px rgba(91,194,231,.18); }
.aeson-dealers .aeson-dl-pcgo {
	flex: 0 0 auto; padding: 14px 20px; font-size: 14px; font-weight: 700; cursor: pointer; border: 0; border-radius: 12px;
	background: var(--brand-sky); color: var(--on-brand, #00263e); transition: transform .15s ease, background .15s ease;
}
.aeson-dealers .aeson-dl-pcgo:hover { background: var(--aeson-bright-pd, #7ad2ef); transform: translateY(-1px); }
/* result line: zero footprint until it has something to say */
.aeson-dl-near__msg { margin: -6px 0 14px; font-size: 14px; color: var(--text-muted); }
.aeson-dl-near__msg[hidden] { display: none; }
.aeson-dl-near__msg strong { color: var(--brand-sky); }
.aeson-dl-link {
	background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
	color: var(--brand-sky); text-decoration: underline; text-underline-offset: 2px;
}
.aeson-dl-link:hover { color: #fff; }
/* distance badge on the ranked cards */
.aeson-dl-dist { margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
	background: var(--brand-sky); color: var(--on-brand, #00263e); }
.aeson-dl-dist[hidden] { display: none; }
.aeson-dealers.is-near .aeson-dl-card { border-color: rgba(91,194,231,.4); }
@media (max-width: 620px) {
	.aeson-dealers .aeson-dl-pc { flex: 1 1 100px; width: auto; }
	.aeson-dealers .aeson-dl-pcgo { flex: 1 1 140px; }
}