/*
Theme Name: EI New Site 2026-10
Description: Custom classic theme for Excellence Industries, styled after the October 2026 printed catalog.
Author: Excellence Industries
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: ei-new-site-2026-10
*/

/* ------------------------------------------------------------------
   Fonts — Figtree (SIL OFL 1.1), self-hosted variable font, weights 300–900.
   Source: @fontsource-variable/figtree 5.2.10. License: assets/fonts/figtree/OFL.txt
   ------------------------------------------------------------------ */
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("assets/fonts/figtree/figtree-latin-ext-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("assets/fonts/figtree/figtree-latin-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Figtree";
	font-style: italic;
	font-weight: 300 900;
	font-display: swap;
	src: url("assets/fonts/figtree/figtree-latin-ext-wght-italic.woff2") format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Figtree";
	font-style: italic;
	font-weight: 300 900;
	font-display: swap;
	src: url("assets/fonts/figtree/figtree-latin-wght-italic.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------
   Tokens — colors sampled from the catalog PDF
   ------------------------------------------------------------------ */
:root {
	/* Brand inks (logo artwork), converted to screen colour with the same
	   ICC profiles as the logo files, so the site matches the logo. */
	--ei-cyan: #009ec9;        /* PANTONE 313 U. Decoration only (lines, borders): 3.1:1 on white, fails as small text */
	--ei-cyan-text: #00748f;   /* PANTONE 315 U (#007793), deepened just enough for 4.5:1 on mist panels. Text, links, focus outlines; under white text */
	--ei-teal: #005862;        /* PANTONE 316 U. Section bands, buttons, title bars (8.2:1 on white) */
	--ei-navy: #182830;        /* body text, dark surfaces */
	--ei-slate: #586868;       /* secondary text */
	--ei-wash: #8cd3e7;        /* cover background: PANTONE 313 U at 45% */
	--ei-mist: #d9f0f7;        /* light panels: PANTONE 313 U at 15% */
	--ei-paper: #faf8f3;       /* the cream of the section divider pages */
	--ei-white: #ffffff;

	--font-sans: "Figtree", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

	--wrap: 1200px;
	--gutter: clamp(16px, 4vw, 40px);
	--radius: 6px;
}

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

body {
	margin: 0;
	background: var(--ei-white);
	color: var(--ei-navy);
	font-family: var(--font-sans);
	font-size: 1.0625rem;
	line-height: 1.6;
}

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

a {
	color: var(--ei-teal);
}

a:hover,
a:focus {
	color: var(--ei-cyan-text);
}

h1,
h2,
h3 {
	line-height: 1.2;
	margin: 0 0 0.5em;
}

.wrap {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.content {
	padding-block: 48px;
}

.skip-link {
	position: absolute;
	left: -9999px;
}

.skip-link:focus {
	left: 16px;
	top: 16px;
	z-index: 100;
	padding: 8px 16px;
	background: var(--ei-white);
}

/* Announcement card (EI Site plugin; set in Settings > Site Settings).
   A floating card in the bottom right corner once its script has started
   (.is-pinned, see below); otherwise a bar above the header. White on
   navy is 15:1. A long message is cut to four lines with a "Read more"
   button (.can-collapse, also set by the script). */
.site-notice {
	background: var(--ei-navy);
	color: var(--ei-white);
	line-height: 1.5;
}

.site-notice[hidden] {
	display: none;
}

/* Floating in the corner, except on very short screens (a phone on its
   side), where it would cover too much. The card's script sets
   --notice-height (the card plus the gap under it) while it floats: the
   footer grows by that much so nothing at the end of the page stays
   hidden behind the card, the back-to-top button sits above it, and
   jumps and keyboard focus stop above it (WCAG 2.4.11). The pale outline
   and cyan edge keep it visible over the navy footer. */
@media (min-height: 520px) {
	.site-notice.is-pinned {
		position: fixed;
		inset: auto 20px 20px auto;
		z-index: 70;
		width: min(420px, calc(100vw - 40px));
		max-height: calc(100vh - 40px);
		overflow: auto;
		border: 1px solid rgb(255 255 255 / 0.3);
		border-top: 3px solid var(--ei-cyan);
		border-radius: var(--radius);
		box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
		font-size: 0.95rem;
	}

	.site-notice.is-pinned .site-notice__inner {
		padding: 16px 16px 16px 20px;
	}
}

:root {
	scroll-padding-bottom: var(--notice-height, 0px);
}

.site-footer::after {
	content: "";
	display: block;
	height: var(--notice-height, 0px);
}

/* .can-collapse is set by the card's script, so without JavaScript the
   whole message shows. */
.site-notice.can-collapse:not(.is-open) .site-notice__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}

.site-notice__inner {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding-block: 12px;
}

.site-notice__body {
	flex: 1;
	min-width: 0;
}

.site-notice__text {
	margin: 0;
}

.site-notice__more {
	margin-top: 4px;
	padding: 4px 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

.site-notice__more[hidden] {
	display: none;
}

.site-notice__more:focus-visible {
	outline: 3px solid var(--ei-wash);
	outline-offset: 2px;
}

.site-notice a {
	color: inherit;
}

.site-notice__close {
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.site-notice__close svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
}

.site-notice__close[hidden] {
	display: none;
}

.site-notice__close:hover,
.site-notice__close:focus-visible {
	background: var(--ei-white);
	color: var(--ei-navy);
}

.site-notice__close:focus-visible {
	outline: 3px solid var(--ei-wash);
	outline-offset: 2px;
}

.section-title {
	color: var(--ei-cyan-text);
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 700;
}

.lead {
	font-size: 1.2rem;
	font-weight: 600;
}

.button {
	display: inline-block;
	padding: 12px 24px;
	border: 2px solid var(--ei-teal);
	border-radius: var(--radius);
	background: var(--ei-teal);
	color: var(--ei-white);
	font-weight: 700;
	text-decoration: none;
}

.button:hover,
.button:focus {
	background: var(--ei-cyan-text);
	border-color: var(--ei-cyan-text);
	color: var(--ei-white);
}

.button--ghost {
	background: transparent;
	color: var(--ei-teal);
}

/* A link that opens in a new tab: label plus a small "leaves the page" arrow. */
.button--new-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.button__icon {
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.25;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* On the pale cover background teal is too light for button text. */
.hero .button--ghost {
	border-color: var(--ei-navy);
	color: var(--ei-navy);
}

.hero .button--ghost:hover,
.hero .button--ghost:focus {
	border-color: var(--ei-navy);
	background: var(--ei-navy);
	color: var(--ei-white);
}

/* ------------------------------------------------------------------
   Header — logo and tagline over a thin cyan rule, as on product pages
   ------------------------------------------------------------------ */
.site-header {
	background: var(--ei-white);
	border-bottom: 4px solid var(--ei-cyan);
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 16px;
}

.site-logo {
	display: flex;
	align-items: center;
	width: fit-content;
}

.site-logo__img {
	display: block;
	width: auto;
	height: 52px;
}

/* Two rows, so the tagline row can fold away smoothly in the sticky header. */
.site-branding {
	display: grid;
	grid-template-rows: auto 1fr;
}

.site-tagline {
	min-height: 0;
	overflow: hidden;
	margin: 6px 0 0;
	color: var(--ei-teal);
	font-size: 0.85rem;
}

/* Sticky header: pinned to the top and compacted once the page scrolls
   (.is-condensed, set by assets/js/sticky-header.js). Only on pages chosen
   in ei_has_sticky_header() (body.has-sticky-header), and only on screens
   tall enough that it doesn't eat the view (phones held sideways, zoomed
   browsers).

   No layout shift: while condensed, the header keeps its full height in
   the page as a bottom margin (--header-shrink, measured by the script),
   so content below never moves. The header's own height is set to the
   measured sizes so the shrink and the margin change in exact step (left
   alone while the mobile menu is open, which changes the height). Jumps and keyboard focus stop below the
   pinned header (scroll-padding-top, WCAG 2.4.11). */
@media (min-height: 520px) {
	.has-sticky-header {
		--sticky-top: var(--wp-admin--admin-bar--height, 0px);
	}

	:root:has(> body.has-sticky-header) {
		scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-condensed-height, 64px) + 12px);
	}

	/* With a pinned pill bar too, leave room for both. */
	:root:has(> body.has-sticky-header .section-jump) {
		scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-condensed-height, 64px) + var(--jump-height, 64px) + 12px);
	}

	.has-sticky-header .site-header {
		position: sticky;
		top: var(--sticky-top);
		z-index: 60;
	}

	/* An open mobile menu scrolls within the screen instead of running off it. */
	.nav-compact .has-sticky-header .site-header:has(.site-nav.is-open) {
		max-height: calc(100dvh - var(--sticky-top));
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.has-sticky-header .site-header:not(:has(.site-nav.is-open)) {
		height: var(--header-full-height, auto);
	}

	.has-sticky-header .site-header.is-condensed:not(:has(.site-nav.is-open)) {
		height: var(--header-condensed-height, auto);
	}

	/* Pinned pill bars sit just below the compact header. Jumps already
	   stop below both (scroll-padding-top above). */
	.has-sticky-header .section-jump {
		top: calc(var(--sticky-top) + var(--header-condensed-height, 56px));
	}

	.has-sticky-header .product-group,
	.has-sticky-header .jump-section {
		scroll-margin-top: 4px;
	}

	.has-sticky-header .site-header.is-condensed {
		margin-bottom: var(--header-shrink, 0px);
		box-shadow: 0 4px 14px rgb(24 40 48 / 0.14);
	}

	.has-sticky-header .is-condensed .site-header__inner {
		padding-block: 8px;
	}

	.has-sticky-header .is-condensed .site-logo__img {
		height: 36px;
	}

	.has-sticky-header .is-condensed .site-branding {
		grid-template-rows: auto 0fr;
	}

	.has-sticky-header .is-condensed .site-tagline {
		margin-top: 0;
		opacity: 0;
	}
}

.site-nav .menu {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Mobile menu button: only shown when the menu would not fit on one line (.nav-compact). */
.menu-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 14px;
	border: 2px solid var(--ei-teal);
	border-radius: var(--radius);
	background: var(--ei-white);
	color: var(--ei-teal);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.menu-toggle:hover,
.menu-toggle:focus-visible,
.menu-toggle[aria-expanded="true"] {
	background: var(--ei-teal);
	color: var(--ei-white);
}

.menu-toggle:focus-visible {
	outline: 3px solid var(--ei-cyan-text);
	outline-offset: 2px;
}

.menu-toggle__icon path {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
}

.menu-toggle__close,
.menu-toggle[aria-expanded="true"] .menu-toggle__open {
	display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__close {
	display: inline;
}

/* Menu on its own line under the logo (html.nav-stacked): centered. */
.nav-stacked .site-nav {
	flex-basis: 100%;
}

.nav-stacked .site-nav .menu {
	justify-content: center;
}

/* Compact (mobile) menu: html.nav-compact is set by the check in header.php
   and assets/js/menu.js only when the menu would not fit on one line. */
.nav-compact .menu-toggle {
	display: inline-flex;
}

.nav-compact .site-nav {
	display: none;
	flex-basis: 100%;
}

.nav-compact .site-nav.is-open {
	display: block;
}

.nav-compact .site-nav .menu {
	flex-direction: column;
	gap: 0;
	border-top: 1px solid var(--ei-mist);
}

.nav-compact .site-nav .menu a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 8px 4px;
	border-bottom: 1px solid var(--ei-mist);
	font-size: 1.1rem;
}

.nav-compact .site-nav .current-menu-item > a,
.nav-compact .site-nav .current-page-ancestor > a,
.nav-compact .site-nav .current-section > a {
	padding-left: 12px;
	border-left: 4px solid var(--ei-cyan);
}

.site-nav a {
	color: var(--ei-navy);
	font-weight: 600;
	text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus,
.site-nav .current-menu-item > a,
.site-nav .current-page-ancestor > a,
.site-nav .current-section > a {
	color: var(--ei-cyan-text);
}

/* ------------------------------------------------------------------
   Hero — the catalog cover
   ------------------------------------------------------------------ */
.hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(120% 60% at 100% -10%, var(--ei-white) 0 30%, transparent 31%),
		repeating-linear-gradient(60deg, rgb(255 255 255 / 0.08) 0 2px, transparent 2px 40px),
		repeating-linear-gradient(-60deg, rgb(255 255 255 / 0.08) 0 2px, transparent 2px 40px),
		var(--ei-wash);
}

.hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	align-items: center;
	gap: 40px;
	padding-block: clamp(48px, 8vw, 110px);
}

.hero__mark {
	display: flex;
	justify-content: center;
}

.hero__mark .ei-mark {
	display: block;
	width: clamp(150px, 22vw, 260px);
	height: auto;
	overflow: visible;
}

.hero__eyebrow {
	margin: 0 0 8px;
	color: var(--ei-navy);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.hero__title {
	color: var(--ei-navy);
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	font-weight: 700;
}

.hero__services {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 20px 0 28px;
	padding: 0;
	list-style: none;
	color: var(--ei-navy);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

/* Cover with a photo slideshow (Home page > Hero photos). Black-and-white
   photos under a navy-to-teal overlay that is darkest behind the text, so
   the white text stays above 4.5:1 on any photo; the photos take on the
   brand colours. assets/js/hero-slides.js crossfades them. */
.hero--photos {
	isolation: isolate;
	background: var(--ei-navy);
}

.hero__slides {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.hero__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
	opacity: 0;
}

.hero__slide.is-active {
	opacity: 1;
}

/* Not loaded yet (hero-slides.js swaps in the real image). */
.hero__slide[data-src] {
	display: none;
}

.hero--photos::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgb(24 40 48 / 0.93) 0%, rgb(24 40 48 / 0.84) 45%, rgb(0 88 98 / 0.5) 100%);
}

.hero--photos .hero__inner {
	grid-template-columns: minmax(0, 680px);
	min-height: clamp(460px, 62vh, 640px);
}

.hero--photos :is(.hero__eyebrow, .hero__title) {
	color: var(--ei-white);
}

.hero--photos .hero__services {
	color: var(--ei-mist);
}

.hero--photos .button {
	border-color: var(--ei-white);
	background: var(--ei-white);
	color: var(--ei-teal);
}

.hero--photos .button:hover,
.hero--photos .button:focus {
	border-color: var(--ei-mist);
	background: var(--ei-mist);
	color: var(--ei-navy);
}

.hero--photos .button--ghost {
	border-color: var(--ei-white);
	background: transparent;
	color: var(--ei-white);
}

.hero--photos .button--ghost:hover,
.hero--photos .button--ghost:focus {
	border-color: var(--ei-white);
	background: var(--ei-white);
	color: var(--ei-navy);
}

.hero--photos .button:focus-visible {
	outline: 3px solid var(--ei-white);
	outline-offset: 3px;
}

/* Below desktop width the text reaches across most of the photo, so the
   overlay is even instead of fading toward the right. */
@media (max-width: 1100px) {
	.hero--photos::after {
		background: linear-gradient(180deg, rgb(24 40 48 / 0.86), rgb(0 70 80 / 0.84));
	}
}

/* Pause/Play for a slideshow (WCAG 2.2.2): a small round icon button,
   named for screen readers by its hidden label. */
.slideshow-toggle {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--ei-white);
	border-radius: 50%;
	background: rgb(24 40 48 / 0.6);
	color: var(--ei-white);
	cursor: pointer;
}

.slideshow-toggle[hidden] {
	display: none;
}

.slideshow-toggle:hover,
.slideshow-toggle:focus-visible {
	background: var(--ei-white);
	color: var(--ei-navy);
}

.slideshow-toggle:focus-visible {
	outline: 3px solid var(--ei-white);
	outline-offset: 2px;
}

.slideshow-toggle svg path {
	fill: none;
	stroke: currentColor;
	stroke-width: 3;
	stroke-linecap: round;
}

.slideshow-toggle .slideshow-toggle__play {
	display: none;
	fill: currentColor;
	stroke: none;
}

.slideshow-toggle.is-paused .slideshow-toggle__pause {
	display: none;
}

.slideshow-toggle.is-paused .slideshow-toggle__play {
	display: inline;
}

.hero__toggle {
	position: absolute;
	right: max(var(--gutter), calc((100% - var(--wrap)) / 2));
	bottom: 20px;
	z-index: 1;
}

/* ------------------------------------------------------------------
   Cycle of Excellence
   ------------------------------------------------------------------ */
.cycle {
	padding-block: clamp(56px, 8vw, 96px);
}

.cycle__inner {
	--cycle-gap: 56px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--cycle-gap);
	/* Lets the wheel size itself to its column (cqi units below). */
	container-type: inline-size;
}

.cycle__wheel {
	/* Never wider than its column when beside the text (stacked: see the
	   small-screen rules). Labels and center text scale with --size. */
	--size: min(420px, calc((100cqi - var(--cycle-gap)) / 2));
	/* Labels are positioned inside the circle; clip their unused layout space
	   so it can't widen the page on small phones. */
	overflow: clip;
	position: relative;
	width: var(--size);
	height: var(--size);
	margin-inline: auto;
	border-radius: 50%;
	background: conic-gradient(from 0deg, var(--ei-cyan-text), var(--ei-teal), var(--ei-cyan-text));
}

.cycle__ring {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cycle__ring li {
	position: absolute;
	top: 50%;
	left: 50%;
	/* A zero-size anchor point; the label is centered on it. A full-size
	   box would stick out past the wheel and widen the page on small phones. */
	width: 0;
	height: 0;
	transform:
		rotate(var(--angle))
		translate(calc(var(--size) * 0.37))
		rotate(calc(var(--angle) * -1));
}

.cycle__ring span,
.cycle__ring a {
	display: inline-block;
	transform: translate(-50%, -50%);
	color: var(--ei-white);
	font-size: clamp(0.66rem, calc(var(--size) * 0.038), 1rem);
	font-weight: 700;
	white-space: nowrap;
}

.cycle__ring a {
	text-decoration: none;
	border-radius: 4px;
	padding: 2px 6px;
}

.cycle__ring a:hover,
.cycle__ring a:focus-visible {
	background: var(--ei-white);
	color: var(--ei-teal);
}

.cycle__hub {
	position: absolute;
	inset: 27%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8px;
	border-radius: 50%;
	background: var(--ei-teal);
	box-shadow: 0 0 0 6px rgb(255 255 255 / 0.25);
	color: var(--ei-white);
	text-align: center;
}

.cycle__hub-title {
	font-size: clamp(1.05rem, calc(var(--size) * 0.0667), 1.75rem);
	font-weight: 400;
}

.cycle__hub-sub {
	font-size: clamp(0.7rem, calc(var(--size) * 0.031), 0.8rem);
	font-weight: 700;
}

/* ------------------------------------------------------------------
   Products — cards echo the catalog's section divider pages
   ------------------------------------------------------------------ */
.products {
	padding-block: clamp(56px, 8vw, 96px);
	background: var(--ei-mist);
}

.category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
	gap: 24px;
	margin-top: 32px;
}

.category-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--ei-paper);
	box-shadow: 0 2px 10px rgb(24 40 48 / 0.08);
}

/* The gradient panel, with the cut-out photo of the group's first family
   standing on it. */
.category-card__art {
	display: grid;
	/* minmax(0, …) keeps a tall photo inside the panel. */
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	place-items: center;
	height: 200px;
	padding: 16px 24px;
	background:
		linear-gradient(160deg, transparent 0 62%, var(--ei-paper) 62.5%),
		repeating-linear-gradient(90deg, rgb(255 255 255 / 0.12) 0 1px, transparent 1px 28px),
		linear-gradient(135deg, var(--ei-cyan), var(--ei-teal));
}

.category-card__photo {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 6px 10px rgb(24 40 48 / 0.3));
}

/* A family's photo fades in while its button is pointed at
   (assets/js/card-photos.js); an instant swap without motion. */
.motion-ok .category-card__photo {
	transition: opacity 0.12s ease;
}

.category-card__photo.is-swapping {
	opacity: 0;
}

.category-card__body {
	padding: 4px 24px 24px;
}

.category-card__title {
	color: var(--ei-cyan-text);
	font-size: 1.5rem;
}

.family-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.family-list li {
	padding: 2px 10px;
	border: 1px solid var(--ei-teal);
	border-radius: 999px;
	color: var(--ei-teal);
	font-size: 0.8rem;
	font-weight: 700;
}

/* Families that have a product page are filled in and clickable. */
.family-list li:has(> a) {
	background: var(--ei-teal);
}

.family-list li > a {
	color: var(--ei-white);
	text-decoration: none;
}

.family-list li:has(> a:hover),
.family-list li:has(> a:focus-visible) {
	background: var(--ei-cyan-text);
	border-color: var(--ei-cyan-text);
}

.category-card__title a {
	color: inherit;
	text-decoration: none;
}

.category-card__title a:hover,
.category-card__title a:focus {
	text-decoration: underline;
}

/* ------------------------------------------------------------------
   Product listings — /products/ and /catalog/<category>/
   ------------------------------------------------------------------ */
/* Jump links to each catalog section on /products/. The bar continues the
   banner's gradient and stays pinned to the top of the screen while
   scrolling. The admin-bar variable keeps it below the WordPress toolbar
   when logged in. */
.page-banner:has(+ .section-jump) {
	padding-bottom: 12px;
}

.section-jump {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: linear-gradient(90deg, var(--ei-cyan-text), var(--ei-teal));
	box-shadow: 0 2px 8px rgb(24 40 48 / 0.18);
}

.section-jump__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-block: 12px 14px;
}

.section-jump a {
	flex: none;
	padding: 6px 14px;
	border: 1px solid rgb(255 255 255 / 0.6);
	border-radius: 999px;
	color: var(--ei-white);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.section-jump a:hover,
.section-jump a:focus-visible,
.section-jump a[aria-current="true"] {
	background: var(--ei-white);
	border-color: var(--ei-white);
	color: var(--ei-teal);
}

.section-jump a:focus-visible {
	outline: 2px solid var(--ei-white);
	outline-offset: 2px;
}

/* One catalog section on /products/. --jump-height is set by
   section-jump.js so a jumped-to heading lands just below the pinned bar.
   Don't add the WordPress toolbar height here: when logged in, WordPress
   already adds it to every jump (scroll-padding-top in admin-bar.css). */
.product-group,
.jump-section {
	scroll-margin-top: calc(var(--jump-height, 72px) + 16px);
}

.product-group + .product-group {
	margin-top: 64px;
}

.product-group__header {
	margin-bottom: 24px;
	padding-bottom: 12px;
	border-bottom: 3px solid var(--ei-cyan);
}

.product-group__title {
	margin: 0;
	color: var(--ei-cyan-text);
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	font-weight: 800;
}

.product-group__title a {
	color: inherit;
	text-decoration: none;
}

.product-group__title a:hover,
.product-group__title a:focus-visible {
	color: var(--ei-teal);
}

.product-group__text {
	margin: 4px 0 0;
	color: var(--ei-slate);
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: 24px;
}

.product-card {
	border-radius: var(--radius);
	background: var(--ei-paper);
	box-shadow: 0 2px 10px rgb(24 40 48 / 0.08);
	overflow: hidden;
}

.product-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.product-card__link:hover .product-card__model,
.product-card__link:focus .product-card__model {
	color: var(--ei-teal);
}

.product-card__media {
	aspect-ratio: 4 / 3;
	max-width: 100%;
	background:
		linear-gradient(160deg, transparent 0 70%, var(--ei-paper) 70.5%),
		linear-gradient(135deg, var(--ei-mist), var(--ei-wash));
}

.product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.product-card__body {
	padding: 4px 20px 20px;
}

.product-card__model {
	margin: 0;
	color: var(--ei-cyan-text);
	font-size: 2rem;
	font-weight: 800;
}

.product-card__subtitle {
	margin: 0 0 8px;
	color: var(--ei-teal);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.product-card__excerpt {
	margin: 0;
	color: var(--ei-slate);
	font-size: 0.95rem;
}

/* ------------------------------------------------------------------
   Single product — the catalog's two-page product spread
   ------------------------------------------------------------------ */
.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
	font-size: 0.9rem;
}

.breadcrumbs a {
	color: inherit;
}

.product-banner {
	padding-block: 40px 32px;
	background:
		repeating-linear-gradient(90deg, rgb(255 255 255 / 0.06) 0 1px, transparent 1px 32px),
		linear-gradient(135deg, var(--ei-cyan-text), var(--ei-teal));
	color: var(--ei-white);
}

.product-banner__heading {
	margin: 0;
}

.product-banner__model {
	display: block;
	margin: 0;
	font-size: clamp(3rem, 8vw, 5rem);
	font-weight: 800;
	line-height: 1;
}

.product-banner__subtitle {
	display: block;
	margin: 8px 0 0;
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.product {
	display: grid;
	/* minmax(0, …) lets wide tables scroll inside .table-scroll instead of widening the page. */
	grid-template-columns: minmax(0, 1fr);
	gap: 48px;
	padding-block: 48px 64px;
}

.product__intro {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.product__heading {
	margin: 32px 0 12px;
	color: var(--ei-teal);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.product__copy > .product__heading:first-child,
.product__section > .product__heading:first-child {
	margin-top: 0;
}

.ticks {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ticks li {
	position: relative;
	padding-left: 24px;
}

.ticks li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.45em;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background: var(--ei-cyan);
}

.ticks--columns {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.product__compliance {
	display: inline-block;
	margin-top: 24px;
	padding: 8px 14px;
	border-left: 4px solid var(--ei-cyan);
	background: var(--ei-mist);
	font-size: 0.9rem;
	font-weight: 600;
}

/* Document buttons under the intro (spec sheet, manual, drawings …):
   one centred row, each button as wide as its label; stacked at one
   shared width on phones (see "Small screens"). */
.product__documents {
	text-align: center;
}

.doc-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.doc-buttons .button {
	justify-content: center;
	white-space: nowrap;
}

/* A document that isn't available yet: not a link, grey and dashed. */
.button--soon,
.button--soon:hover {
	border-color: var(--ei-slate);
	border-style: dashed;
	background: transparent;
	color: var(--ei-slate);
	cursor: default;
}

.product__documents-note {
	margin: 12px 0 0;
	color: var(--ei-slate);
	font-size: 0.85rem;
}

.product__photo {
	margin: 0;
	text-align: center;
}

/* Cut-out photos on transparent backgrounds; tall uprights are capped so
   they stay beside the text instead of running far below it. */
.product__photo img {
	width: auto;
	max-height: min(75vh, 640px);
	object-fit: contain;
	border-radius: var(--radius);
}

.product__photo-placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	max-width: 100%;
	border-radius: var(--radius);
	background:
		linear-gradient(160deg, transparent 0 65%, var(--ei-paper) 65.5%),
		linear-gradient(135deg, var(--ei-mist), var(--ei-wash));
	color: var(--ei-teal);
	font-weight: 600;
}

.product__photo figcaption {
	margin-top: 8px;
	color: var(--ei-teal);
	font-weight: 800;
	letter-spacing: 0.06em;
}

/* Extra photos: same-size white tiles, the whole unit shown (most photos
   are on white, so the tile edge disappears into them). */
.product__gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(45%, 180px), 1fr)); /* two across on phones */
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Beats a.is-zoomable's fit-content width. */
.product__gallery a,
.product__gallery a.is-zoomable {
	display: block;
	width: auto;
}

.product__gallery img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	padding: 8px;
	object-fit: contain;
	border: 1px solid var(--ei-mist);
	border-radius: var(--radius);
	background: var(--ei-white);
}

/* Dimension drawings side by side as in the catalog, each under its
   model label, with the dimension table below them. Every drawing sits in
   a frame of the same height so a row lines up; click one to see it full
   size. */
.product__drawings {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	align-items: start;
	gap: 24px 32px;
	margin-bottom: 32px;
}

.product__drawing {
	margin: 0;
}

.product__drawing figcaption {
	margin-bottom: 8px;
	color: var(--ei-teal);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-align: center;
}

.product__drawing a,
.product__drawing a.is-zoomable {
	display: block;
	width: auto;
}

.product__drawing img {
	display: block;
	width: 100%;
	height: clamp(240px, 32vw, 380px);
	padding: 12px;
	object-fit: contain;
	border: 1px solid var(--ei-mist);
	border-radius: var(--radius);
	background: var(--ei-white);
}

.product__electrical {
	margin: 12px 0 0;
}

.product__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 32px;
	border-top: 1px solid var(--ei-mist);
}

.product__notes {
	flex-basis: 100%;
	margin: 20px 0 0;
	padding-left: 1.2em;
	color: var(--ei-slate);
	font-size: 0.85rem;
}

/* Spec and dimension tables */
.table-scroll {
	overflow-x: auto;
	border: 1px solid var(--ei-mist);
	border-radius: var(--radius);
}

.spec-table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
	font-size: 0.95rem;
}

.spec-table th,
.spec-table td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--ei-mist);
	text-align: center;
	white-space: nowrap;
}

.spec-table thead th {
	background: var(--ei-teal);
	color: var(--ei-white);
	font-weight: 700;
}

.spec-table tbody th {
	color: var(--ei-navy);
	font-weight: 600;
	text-align: left;
	white-space: normal;
	min-width: 12em;
}

.spec-table thead th:first-child {
	text-align: left;
}

.spec-table tbody tr:nth-child(even) {
	background: var(--ei-paper);
}

.spec-table tbody tr:last-child > * {
	border-bottom: 0;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------------------
   Power of Partnership
   ------------------------------------------------------------------ */
.partnership {
	padding-block: clamp(56px, 8vw, 96px);
}

.partnership__inner {
	max-width: 900px;
	text-align: center;
}

.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 24px;
	margin-block: 40px;
}

.stat {
	display: flex;
	flex-direction: column;
	padding: 24px 16px;
	border-top: 4px solid var(--ei-cyan);
	background: var(--ei-paper);
}

.stat__num {
	color: var(--ei-teal);
	font-size: 2.75rem;
	font-weight: 800;
	line-height: 1;
}

.stat__label {
	margin-top: 8px;
	color: var(--ei-slate);
	font-size: 0.95rem;
}

/* ------------------------------------------------------------------
   Inner pages
   ------------------------------------------------------------------ */
.page-banner {
	padding-block: 48px 32px;
	background: linear-gradient(135deg, var(--ei-cyan-text), var(--ei-teal));
	color: var(--ei-white);
}

.page-banner__title {
	margin: 0;
	font-size: clamp(2rem, 5vw, 3rem);
}

.page-banner__text {
	max-width: 60ch;
	margin: 8px 0 0;
	font-size: 1.1rem;
}

.page-title {
	color: var(--ei-cyan-text);
}

.entry + .entry {
	margin-top: 32px;
}

/* ------------------------------------------------------------------
   Footer — the catalog back cover
   ------------------------------------------------------------------ */
.site-footer {
	background: var(--ei-navy);
	color: var(--ei-mist);
}

.site-footer a {
	color: var(--ei-white);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 32px;
	padding-block: 48px;
}

/* White logo and tagline across the top of the footer. */
.site-footer__brand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	grid-column: 1 / -1;
	padding-bottom: 24px;
	border-bottom: 1px solid rgb(255 255 255 / 0.12);
}

.site-footer__logo {
	display: block;
	width: fit-content;
}

.site-footer__logo img {
	display: block;
	width: auto;
	height: 48px;
}

.site-footer__logo:focus-visible {
	outline: 3px solid var(--ei-white);
	outline-offset: 4px;
}

.site-footer__tagline {
	margin: 0;
	color: var(--ei-mist);
}

.site-footer__heading {
	color: var(--ei-cyan);
	font-size: 1rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.site-footer address {
	font-style: normal;
}

.site-footer .menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__bar {
	border-top: 1px solid rgb(255 255 255 / 0.12);
	font-size: 0.85rem;
}

.site-footer__bar .wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	padding-block: 16px;
}

.site-footer__bar p {
	margin: 0;
}

/* ------------------------------------------------------------------
   Running text inside pages (classic editor content)
   ------------------------------------------------------------------ */
.entry-content > :first-child {
	margin-top: 0;
}

.entry-content > :last-child {
	margin-bottom: 0;
}

.entry-content p,
.entry-content li {
	max-width: 70ch;
}

.entry-content ul {
	padding-left: 1.2em;
}

.entry-content li + li {
	margin-top: 4px;
}

.entry-content li::marker {
	color: var(--ei-cyan-text);
}

/* ------------------------------------------------------------------
   "Sections" page template — Services, About
   ------------------------------------------------------------------ */
.sections-page {
	padding-block: 48px 72px;
}

.sections-page__intro {
	margin-bottom: 48px;
	font-size: 1.1rem;
}

/* Introduction paragraphs after the featured products. */
.sections-page__more {
	margin-bottom: 48px;
	font-size: 1.1rem;
}

/* The opening paragraph reads as a lead; any further paragraphs are body text. */
.sections-page__intro > p:first-child {
	font-size: 1.2rem;
	font-weight: 600;
}

/* Heading on the left, text on the right, like the catalog's spec pages. */
.jump-section {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
	gap: 16px 48px;
	padding-block: 40px;
	border-top: 1px solid var(--ei-mist);
}

.jump-section:first-of-type {
	border-top: 3px solid var(--ei-cyan);
}

.jump-section__title {
	margin: 0;
	color: var(--ei-cyan-text);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 800;
}

.jump-section__body {
	display: grid;
	gap: 24px;
	min-width: 0;
}

.info-cards--grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: 16px;
}

.info-card {
	padding: 20px 22px;
	border-top: 4px solid var(--ei-cyan);
	border-radius: var(--radius);
	background: var(--ei-paper);
}

.info-card__title {
	margin: 0 0 8px;
	color: var(--ei-teal);
	font-size: 1.15rem;
	font-weight: 800;
}

/* ------------------------------------------------------------------
   "Talk to us" band
   ------------------------------------------------------------------ */
.contact-cta {
	background: linear-gradient(135deg, var(--ei-cyan-text), var(--ei-teal));
	color: var(--ei-white);
}

.contact-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	padding-block: 40px;
}

.contact-cta__title {
	margin: 0 0 6px;
	font-size: clamp(1.4rem, 2.6vw, 1.8rem);
	font-weight: 800;
}

.contact-cta__text {
	margin: 0;
	max-width: 60ch;
}

.contact-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin: 0;
}

.contact-cta__phone {
	color: var(--ei-white);
	font-size: 1.25rem;
	font-weight: 800;
	text-decoration: none;
}

.contact-cta__phone:hover,
.contact-cta__phone:focus-visible {
	color: var(--ei-white);
	text-decoration: underline;
}

.button--light {
	border-color: var(--ei-white);
	background: var(--ei-white);
	color: var(--ei-teal);
}

.button--light:hover,
.button--light:focus-visible {
	border-color: var(--ei-navy);
	background: var(--ei-navy);
	color: var(--ei-white);
}

/* ------------------------------------------------------------------
   Contact page
   ------------------------------------------------------------------ */
.contact-page {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
	padding-block: 48px 72px;
}

.contact-page__details {
	display: grid;
	gap: 16px;
}

/* Phones: keep the photo from filling the screen. */
@media (max-width: 800px) {
	.contact-page__photo {
		max-width: 480px;
	}
}

.contact-block {
	padding: 20px 22px;
	border-top: 4px solid var(--ei-cyan);
	border-radius: var(--radius);
	background: var(--ei-paper);
}

.contact-block__title {
	margin: 0 0 8px;
	color: var(--ei-teal);
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.contact-block address {
	font-style: normal;
}

.contact-block__list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 16px;
	margin: 0;
}

.contact-block__list dt {
	color: var(--ei-slate);
}

.contact-block__list dd {
	margin: 0;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.contact-block__note {
	margin: 12px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--ei-mist);
	color: var(--ei-slate);
	font-size: 0.95rem;
}

.contact-block__note strong {
	color: var(--ei-navy);
	font-variant-numeric: tabular-nums;
}

.contact-block__link {
	display: inline-block;
	margin-top: 8px;
	font-weight: 600;
}

/* ------------------------------------------------------------------
   Photos — small frames that open larger (assets/js/lightbox.js)
   ------------------------------------------------------------------ */
/* A section's photo sits under its heading in the left column
   (inc/sections.php: an image straight after a Heading 2). */
.jump-section--photo {
	grid-template-rows: auto 1fr;
	align-content: start;
}

.jump-section--photo .jump-section__body {
	grid-column: 2;
	grid-row: 2;
	align-self: center; /* Beside the photo: short text is centred on it, long text starts level with its top. */
}

.jump-section__photo {
	grid-column: 1;
	align-self: start;
	max-width: 360px;
}

.jump-section__photo :is(p, figure) {
	margin: 0;
}

/* Framed photos share one look: rounded, softly shadowed, cropped to 4:3. */
:is(.jump-section__photo, .framed-photo, .gallery-item) img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: 0 6px 18px rgb(24 40 48 / 0.14);
}

.framed-photo,
.jump-section__photo figure {
	margin: 0;
}

:is(.framed-photo, .jump-section__photo, .gallery-item) figcaption {
	margin-top: 8px;
	color: var(--ei-slate);
	font-size: 0.9rem;
	line-height: 1.4;
}

/* A page's featured image beside the lead paragraph. */
.sections-page__lead {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	align-items: center;
	gap: 24px 48px;
	margin-bottom: 48px;
}

.sections-page__lead .sections-page__intro {
	margin-bottom: 0;
}

/* Galleries (Add Media > Create Gallery, "Link to: Media File"). */
.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
	gap: 20px;
	margin: 24px 0 0;
}

/* The editor's Columns setting; one column on narrow screens. */
.gallery-columns-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 480px) {
	.gallery[class*="gallery-columns-"] {
		grid-template-columns: minmax(0, 1fr);
	}
}

.gallery-item {
	margin: 0;
}

.gallery-icon a {
	display: block;
}

/* Anything that opens in the lightbox: a zoom badge on hover and focus. */
a.is-zoomable {
	position: relative;
	display: block;
	width: fit-content;
	max-width: 100%;
	border-radius: var(--radius);
	cursor: zoom-in;
}

:is(.jump-section__photo, .framed-photo, .gallery-icon) a.is-zoomable {
	width: auto;
}

a.is-zoomable::after {
	content: "";
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ei-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 20px no-repeat;
	box-shadow: 0 2px 6px rgb(24 40 48 / 0.3);
	opacity: 0;
}

a.is-zoomable:hover::after,
a.is-zoomable:focus-visible::after {
	opacity: 1;
}

a.is-zoomable:focus-visible {
	outline: 3px solid var(--ei-cyan-text);
	outline-offset: 3px;
}

/* The lightbox dialog: full screen, photo centred on a dark backdrop. */
.lightbox {
	width: 100vw;
	max-width: none;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 64px 72px 48px;
	border: 0;
	background: transparent;
	color: var(--ei-white);
	overflow: hidden;
}

.lightbox[open] {
	display: grid;
	place-items: center;
}

.lightbox::backdrop {
	background: rgb(24 40 48 / 0.92);
}

.lightbox__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
}

.lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(100dvh - 160px);
	width: auto;
	height: auto;
	border-radius: 4px;
	background: rgb(255 255 255 / 0.06);
	box-shadow: 0 10px 40px rgb(0 0 0 / 0.4);
}

.lightbox__caption {
	max-width: 60ch;
	color: var(--ei-white);
	text-align: center;
}

.lightbox__count {
	position: absolute;
	top: 20px;
	left: 20px;
	margin: 0;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--ei-navy);
	color: var(--ei-white);
	font-size: 0.9rem;
}

.lightbox__count:empty {
	display: none;
}

.lightbox__button {
	position: absolute;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ei-white);
	color: var(--ei-teal);
	cursor: pointer;
}

.lightbox__button svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lightbox__button:hover {
	background: var(--ei-mist);
}

.lightbox__button:focus-visible {
	outline: 3px solid var(--ei-white);
	outline-offset: 3px;
}

.lightbox__button[hidden] {
	display: none;
}

.lightbox__close {
	top: 12px;
	right: 16px;
}

.lightbox__prev,
.lightbox__next {
	top: 50%;
	translate: 0 -50%;
}

.lightbox__prev {
	left: 12px;
}

.lightbox__next {
	right: 12px;
}

.lightbox-open {
	overflow: hidden;
}

/* ------------------------------------------------------------------
   Contact form ([ei_contact_form] from the EI Site plugin)
   ------------------------------------------------------------------ */
.ei-form {
	margin-top: 32px;
	scroll-margin-top: 24px;
}

.ei-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 24px;
}

.ei-form__field--message {
	grid-column: 1 / -1;
}

.ei-form label {
	display: block;
	margin-bottom: 6px;
	font-weight: 700;
}

.ei-form__optional {
	color: var(--ei-slate);
	font-weight: 400;
}

.ei-form input[type="text"],
.ei-form input[type="email"],
.ei-form input[type="tel"],
.ei-form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #7b8c90; /* 3.5:1 on white, WCAG 1.4.11 */
	border-radius: var(--radius);
	background: var(--ei-white);
	color: var(--ei-navy);
	font: inherit;
}

.ei-form input:focus-visible,
.ei-form textarea:focus-visible {
	border-color: var(--ei-teal);
	outline: 3px solid rgb(0 158 201 / 0.35);
	outline-offset: 0;
}

.ei-form .has-error input,
.ei-form .has-error textarea {
	border-color: #b42318;
}

.ei-form__error {
	margin: 6px 0 0;
	color: #b42318;
	font-size: 0.9rem;
	font-weight: 600;
}

.ei-form__summary {
	margin-bottom: 24px;
	padding: 14px 18px;
	border-left: 4px solid #b42318;
	border-radius: var(--radius);
	background: #fdf0ef;
}

.ei-form__summary p {
	margin: 0 0 6px;
}

.ei-form__summary ul {
	margin: 0;
	padding-left: 1.2em;
}

.ei-form__summary a {
	color: #b42318;
}

.ei-form__about {
	margin: 0 0 20px;
	padding: 10px 14px;
	border-left: 4px solid var(--ei-cyan);
	background: var(--ei-mist);
}

/* The bot trap is moved off-screen rather than display:none, which some bots skip. */
.ei-form__trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ei-form .cf-turnstile {
	margin-top: 24px;
}

.ei-form__actions {
	margin: 24px 0 0;
}

.ei-form__privacy {
	margin: 12px 0 0;
	color: var(--ei-slate);
	font-size: 0.9rem;
}

.ei-form button.button {
	cursor: pointer;
	font: inherit;
	font-weight: 700;
}

.ei-form--sent {
	padding: 24px 28px;
	border-left: 4px solid var(--ei-cyan);
	border-radius: var(--radius);
	background: var(--ei-mist);
}

.ei-form__title {
	margin: 0 0 8px;
	color: var(--ei-teal);
	font-size: 1.4rem;
}

.ei-form--sent p {
	margin: 0;
}

/* ------------------------------------------------------------------
   FAQ page — questions open with <details>
   ------------------------------------------------------------------ */
.faq-item {
	border-bottom: 1px solid var(--ei-mist);
}

.faq-item:first-of-type {
	border-top: 1px solid var(--ei-mist);
}

.faq-item__question {
	position: relative;
	padding: 14px 40px 14px 0;
	color: var(--ei-navy);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.faq-item__question::-webkit-details-marker {
	display: none;
}

/* Plus / minus sign, drawn so it needs no icon font. */
.faq-item__question::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	color: var(--ei-cyan-text);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
}

.faq-item[open] > .faq-item__question::after {
	content: "\2212";
}

.faq-item__question:hover {
	color: var(--ei-cyan-text);
}

.faq-item__question:focus-visible {
	outline: 3px solid var(--ei-cyan-text);
	outline-offset: 2px;
}

.faq-item__answer {
	padding: 0 0 18px;
}

/* ------------------------------------------------------------------
   Sub-page cards and featured products on Sections pages
   ------------------------------------------------------------------ */
.page-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 24px;
	margin: 0 0 48px;
	padding: 0;
	list-style: none;
}

.page-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--ei-paper);
	box-shadow: 0 2px 10px rgb(24 40 48 / 0.08);
	color: var(--ei-navy);
	text-decoration: none;
}

.page-card__art {
	height: 96px;
	background:
		linear-gradient(160deg, transparent 0 62%, var(--ei-paper) 62.5%),
		repeating-linear-gradient(90deg, rgb(255 255 255 / 0.12) 0 1px, transparent 1px 28px),
		linear-gradient(135deg, var(--ei-cyan), var(--ei-teal));
}

.page-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 4px 22px 22px;
}

.page-card__title {
	color: var(--ei-cyan-text);
	font-size: 1.35rem;
	font-weight: 800;
}

.page-card__text {
	color: var(--ei-slate);
}

.page-card__link:hover .page-card__title,
.page-card__link:focus-visible .page-card__title {
	color: var(--ei-teal);
	text-decoration: underline;
}

.page-card__link:focus-visible {
	outline: 3px solid var(--ei-cyan-text);
	outline-offset: 3px;
}

.featured-products {
	margin: 0 0 48px;
	padding: 32px;
	border-radius: var(--radius);
	background: var(--ei-mist);
}

.featured-products__title {
	margin: 0 0 20px;
	color: var(--ei-teal);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.featured-products .product-card {
	background: var(--ei-white);
}

.ei-form__help {
	margin: -2px 0 8px;
	color: var(--ei-slate);
	font-size: 0.9rem;
}

/* ------------------------------------------------------------------
   Articles (News) — single article and the News listing
   ------------------------------------------------------------------ */
.article {
	max-width: 780px;
	padding-block: 40px 64px;
}

.article__image {
	margin: 0 0 32px;
}

.article__image img {
	width: 100%;
	max-height: 440px;
	object-fit: cover;
	border-radius: var(--radius);
}

.article__body {
	font-size: 1.1rem;
	line-height: 1.7;
}

.article__body h2 {
	margin: 1.6em 0 0.5em;
	color: var(--ei-teal);
	font-size: 1.5rem;
}

.article__back {
	margin: 40px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--ei-mist);
	font-weight: 700;
}

.article-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 24px;
}

.article-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--ei-paper);
	box-shadow: 0 2px 10px rgb(24 40 48 / 0.08);
	color: var(--ei-navy);
	text-decoration: none;
}

.article-card__media {
	aspect-ratio: 16 / 9;
	max-width: 100%;
	background: linear-gradient(135deg, var(--ei-mist), var(--ei-wash));
}

.article-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.article-card__body {
	padding: 18px 22px 22px;
}

.article-card__title {
	margin: 0 0 6px;
	color: var(--ei-cyan-text);
	font-size: 1.25rem;
	font-weight: 800;
}

.article-card__date {
	margin: 0 0 10px;
	color: var(--ei-slate);
	font-size: 0.85rem;
}

.article-card__excerpt {
	margin: 0;
	color: var(--ei-slate);
}

.article-card__link:hover .article-card__title,
.article-card__link:focus-visible .article-card__title {
	color: var(--ei-teal);
	text-decoration: underline;
}

.article-card__link:focus-visible {
	outline: 3px solid var(--ei-cyan-text);
	outline-offset: 3px;
}

.navigation.pagination {
	margin-top: 40px;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.nav-links .page-numbers {
	padding: 6px 12px;
	border-radius: var(--radius);
	font-weight: 700;
}

.nav-links .page-numbers.current {
	background: var(--ei-teal);
	color: var(--ei-white);
}

/* ------------------------------------------------------------------
   Back to top — hidden until to-top.js adds .is-visible
   ------------------------------------------------------------------ */
.site-header:focus {
	outline: none;
}

.to-top {
	position: fixed;
	right: max(20px, env(safe-area-inset-right));
	bottom: calc(max(20px, env(safe-area-inset-bottom)) + var(--notice-height, 0px)); /* above the pinned banner */
	z-index: 60;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 2px solid var(--ei-white);
	border-radius: 50%;
	background: var(--ei-teal);
	box-shadow: 0 4px 14px rgb(24 40 48 / 0.3);
	color: var(--ei-white);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s, background-color 0.15s ease;
}

.to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s, background-color 0.15s ease;
}

.to-top:hover,
.to-top:focus-visible {
	background: var(--ei-cyan-text);
	color: var(--ei-white);
}

.to-top:focus-visible {
	outline: 3px solid var(--ei-cyan-text);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.to-top,
	.to-top.is-visible {
		transform: none;
		transition: none;
	}
}

/* ------------------------------------------------------------------
   Motion — only with html.motion-ok (set in functions.php when the
   visitor hasn't asked for reduced motion; removed if motion.js fails).
   Uses the individual translate/scale properties so it never fights the
   transform used for hover effects.
   ------------------------------------------------------------------ */
:root {
	--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Sticky header compacting. Every size change shares one duration and
   easing, so the header's shrink and its stand-in bottom margin stay in
   step and the page below doesn't move. .is-measuring switches transitions
   off while sticky-header.js measures the two sizes. */
/* Lightbox: the photo fades in once loaded; the backdrop fades in. */
/* Hero slideshow: a slow crossfade between photos (no zoom or pan). */
.motion-ok .hero__slide {
	transition: opacity 1.6s ease-in-out;
}

.motion-ok .lightbox__img {
	opacity: 0;
	scale: 0.97;
	transition:
		opacity 0.25s var(--ease-out),
		scale 0.25s var(--ease-out);
}

.motion-ok .lightbox__img.is-loaded {
	opacity: 1;
	scale: none;
}

.motion-ok .lightbox[open]::backdrop {
	animation: ei-fade-in 0.2s ease-out;
}

@keyframes ei-fade-in {
	from {
		opacity: 0;
	}
}

.motion-ok a.is-zoomable::after {
	transition: opacity 0.15s ease;
}

.motion-ok .has-sticky-header .site-header {
	transition:
		height 0.3s var(--ease-out),
		margin-bottom 0.3s var(--ease-out),
		box-shadow 0.3s var(--ease-out);
}

.motion-ok .has-sticky-header .site-header__inner {
	transition: padding 0.3s var(--ease-out);
}

.motion-ok .has-sticky-header .site-logo__img {
	transition: height 0.3s var(--ease-out);
}

.motion-ok .has-sticky-header .site-branding {
	transition: grid-template-rows 0.3s var(--ease-out);
}

.motion-ok .has-sticky-header .site-tagline {
	transition:
		margin-top 0.3s var(--ease-out),
		opacity 0.2s var(--ease-out);
}

.has-sticky-header .site-header.is-measuring,
.has-sticky-header .site-header.is-measuring * {
	transition: none !important;
}

.has-sticky-header .site-header.is-measuring {
	height: auto !important;
}

@keyframes ei-fade-up {
	from {
		opacity: 0;
		translate: 0 14px;
	}

	to {
		opacity: 1;
		translate: none;
	}
}

/* Home page cover: the grey base appears, the E drops onto it, then the I.
   (Parts are named in assets/images/logo/ei-mark.svg.) */
@keyframes ei-base-in {
	from {
		opacity: 0;
		scale: 0.85;
	}

	to {
		opacity: 1;
		scale: none;
	}
}

@keyframes ei-drop-in {
	from {
		opacity: 0;
		translate: 0 -28px;
	}

	70% {
		opacity: 1;
	}

	to {
		opacity: 1;
		translate: none;
	}
}

.motion-ok .ei-mark__base {
	transform-box: fill-box;
	transform-origin: 50% 50%;
	animation: ei-base-in 0.5s var(--ease-out) both;
}

.motion-ok .ei-mark__e {
	animation: ei-drop-in 0.6s var(--ease-out) 0.2s both;
}

.motion-ok .ei-mark__i {
	animation: ei-drop-in 0.6s var(--ease-out) 0.38s both;
}

.motion-ok .hero__eyebrow {
	animation: ei-fade-up 0.6s var(--ease-out) 0.15s both;
}

.motion-ok .hero__title {
	animation: ei-fade-up 0.7s var(--ease-out) 0.25s both;
}

.motion-ok .hero__services li {
	animation: ei-fade-up 0.5s var(--ease-out) both;
}

.motion-ok .hero__services li:nth-child(1) { animation-delay: 0.5s; }
.motion-ok .hero__services li:nth-child(2) { animation-delay: 0.56s; }
.motion-ok .hero__services li:nth-child(3) { animation-delay: 0.62s; }
.motion-ok .hero__services li:nth-child(4) { animation-delay: 0.68s; }
.motion-ok .hero__services li:nth-child(5) { animation-delay: 0.74s; }
.motion-ok .hero__services li:nth-child(6) { animation-delay: 0.8s; }
.motion-ok .hero__services li:nth-child(7) { animation-delay: 0.86s; }

.motion-ok .hero__actions {
	animation: ei-fade-up 0.6s var(--ease-out) 0.95s both;
}

/* Scroll reveal: fade and rise into place. Keep this list in sync with
   REVEAL in assets/js/motion.js. :where() keeps this rule's weight low so
   .is-in (below) always wins. */
.motion-ok :where(
	.cycle__text > *,
	.products .section-title,
	.products .lead,
	.category-card,
	.partnership__inner > *,
	.product-group__header,
	.product-card,
	.product__intro > *,
	.product__section,
	.sections-page__intro,
	.sections-page__more,
	.featured-products,
	.jump-section__title,
	.jump-section__photo,
	.jump-section__body,
	.framed-photo,
	.gallery-item,
	.page-card,
	.info-card,
	.article-card,
	.contact-page__main,
	.contact-block,
	.contact-cta__inner > *,
	.faq-item,
	.article__image,
	.article__body
) {
	opacity: 0;
	translate: 0 18px;
	transition:
		opacity 0.6s var(--ease-out) calc(var(--reveal-i, 0) * 70ms),
		translate 0.6s var(--ease-out) calc(var(--reveal-i, 0) * 70ms);
}

.motion-ok .is-in {
	opacity: 1;
	translate: none;
}

/* The Cycle of Excellence wheel builds itself: the circle, then each
   service in order around it, then Partnership in the middle. */
.motion-ok .cycle__wheel {
	opacity: 0;
	scale: 0.92;
	transition: opacity 0.6s var(--ease-out), scale 0.8s var(--ease-out);
}

.motion-ok .cycle__ring li,
.motion-ok .cycle__hub {
	opacity: 0;
	transition: opacity 0.45s var(--ease-out), scale 0.45s var(--ease-out);
}

.motion-ok .cycle__ring li > * {
	scale: 0.7;
	transition: scale 0.45s var(--ease-out);
}

.motion-ok .cycle__hub {
	scale: 0.85;
}

.motion-ok .cycle__wheel.is-in,
.motion-ok .cycle__wheel.is-in .cycle__ring li,
.motion-ok .cycle__wheel.is-in .cycle__hub {
	opacity: 1;
	scale: none;
}

.motion-ok .cycle__wheel.is-in .cycle__ring li > * {
	scale: none;
}

.motion-ok .cycle__wheel.is-in .cycle__ring li:nth-child(1),
.motion-ok .cycle__wheel.is-in .cycle__ring li:nth-child(1) > * { transition-delay: 0.3s; }
.motion-ok .cycle__wheel.is-in .cycle__ring li:nth-child(2),
.motion-ok .cycle__wheel.is-in .cycle__ring li:nth-child(2) > * { transition-delay: 0.42s; }
.motion-ok .cycle__wheel.is-in .cycle__ring li:nth-child(3),
.motion-ok .cycle__wheel.is-in .cycle__ring li:nth-child(3) > * { transition-delay: 0.54s; }
.motion-ok .cycle__wheel.is-in .cycle__ring li:nth-child(4),
.motion-ok .cycle__wheel.is-in .cycle__ring li:nth-child(4) > * { transition-delay: 0.66s; }
.motion-ok .cycle__wheel.is-in .cycle__ring li:nth-child(5),
.motion-ok .cycle__wheel.is-in .cycle__ring li:nth-child(5) > * { transition-delay: 0.78s; }
.motion-ok .cycle__wheel.is-in .cycle__ring li:nth-child(6),
.motion-ok .cycle__wheel.is-in .cycle__ring li:nth-child(6) > * { transition-delay: 0.9s; }
.motion-ok .cycle__wheel.is-in .cycle__ring li:nth-child(7),
.motion-ok .cycle__wheel.is-in .cycle__ring li:nth-child(7) > * { transition-delay: 1.02s; }

.motion-ok .cycle__wheel.is-in .cycle__hub {
	transition-delay: 1.2s;
}

.stat__num {
	font-variant-numeric: tabular-nums;
}

/* Cards lift on hover and keyboard focus; photos zoom slightly. The lift
   is motion, so it respects reduced-motion settings; the shadow doesn't. */
:is(.category-card, .product-card, .article-card__link, .page-card__link) {
	transition: box-shadow 0.25s ease, transform 0.25s var(--ease-out);
}

:is(.category-card, .product-card, .article-card__link, .page-card__link):is(:hover, :focus-within) {
	box-shadow: 0 10px 24px rgb(24 40 48 / 0.14);
}

.product-card__media,
.article-card__media {
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	:is(.category-card, .product-card, .article-card__link, .page-card__link):is(:hover, :focus-within) {
		transform: translateY(-4px);
	}

	.product-card__media img,
	.article-card__media img {
		transition: transform 0.5s var(--ease-out);
	}

	:is(.product-card, .article-card__link):is(:hover, :focus-within) :is(.product-card__media, .article-card__media) img {
		transform: scale(1.04);
	}

	/* FAQ answers slide open (browsers without this support open instantly). */
	:root {
		interpolate-size: allow-keywords;
	}

	.faq-item::details-content {
		block-size: 0;
		overflow: clip;
		transition: block-size 0.3s var(--ease-out), content-visibility 0.3s allow-discrete;
	}

	.faq-item[open]::details-content {
		block-size: auto;
	}

	/* The gliding highlight in pinned pill bars (section-jump.js). */
	.section-jump__indicator {
		transition: left 0.35s var(--ease-out), width 0.35s var(--ease-out), opacity 0.2s ease;
	}
}

/* Gliding highlight behind the current pill (added by section-jump.js). */
.section-jump__inner {
	position: relative;
}

.section-jump__indicator {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 0;
	height: 0;
	border-radius: 999px;
	background: var(--ei-white);
	opacity: 0;
	pointer-events: none;
}

.section-jump--glide a {
	position: relative;
	z-index: 1;
}

.section-jump--glide a[aria-current="true"] {
	border-color: var(--ei-white);
	background: transparent;
	color: var(--ei-teal);
}

/* Spec and dimension tables: highlight the row and column under the
   pointer, so a value is easy to trace to its model and measurement. */
.spec-table :is(td, th) {
	transition: background-color 0.15s ease;
}

.spec-table tbody tr:hover > :is(td, th) {
	background-color: var(--ei-mist);
}

.spec-table:has(tbody td:nth-child(2):hover) :is(td, th):nth-child(2),
.spec-table:has(tbody td:nth-child(3):hover) :is(td, th):nth-child(3),
.spec-table:has(tbody td:nth-child(4):hover) :is(td, th):nth-child(4),
.spec-table:has(tbody td:nth-child(5):hover) :is(td, th):nth-child(5),
.spec-table:has(tbody td:nth-child(6):hover) :is(td, th):nth-child(6),
.spec-table:has(tbody td:nth-child(7):hover) :is(td, th):nth-child(7),
.spec-table:has(tbody td:nth-child(8):hover) :is(td, th):nth-child(8),
.spec-table:has(tbody td:nth-child(9):hover) :is(td, th):nth-child(9),
.spec-table:has(tbody td:nth-child(10):hover) :is(td, th):nth-child(10),
.spec-table:has(tbody td:nth-child(11):hover) :is(td, th):nth-child(11),
.spec-table:has(tbody td:nth-child(12):hover) :is(td, th):nth-child(12) {
	background-color: var(--ei-mist);
}

.spec-table:has(td:hover) tbody tr:hover > td:hover {
	background-color: #bfe7f2; /* PANTONE 313 U at 25% */
	color: var(--ei-navy);
}

@media print {
	.motion-ok * {
		opacity: 1 !important;
		translate: none !important;
		scale: none !important;
		animation: none !important;
	}
}

/* ------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------ */
@media (max-width: 800px) {
	.hero--photos .hero__inner {
		min-height: 0;
		padding-bottom: 72px;
	}

	.jump-section--photo {
		grid-template-rows: none;
	}

	.jump-section--photo .jump-section__body {
		grid-column: auto;
		grid-row: auto;
		align-self: auto;
	}

	.jump-section__photo {
		max-width: 480px;
	}

	.sections-page__lead {
		grid-template-columns: minmax(0, 1fr);
	}

	.sections-page__photo {
		max-width: 480px;
	}

	.lightbox {
		padding: 72px 12px 24px;
	}

	.lightbox__prev,
	.lightbox__next {
		top: auto;
		bottom: 16px;
		translate: none;
	}

	/* Keep the pinned section bar to one row; it scrolls sideways instead. */
	.section-jump__inner {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.section-jump__inner::-webkit-scrollbar {
		display: none;
	}

	/* Side-by-side cards on phones so long product lists stay scannable. */
	.product-card__link {
		flex-direction: row;
	}

	.product-card__media {
		flex: 0 0 34%;
		aspect-ratio: auto;
		min-height: 120px;
	}

	.product-card__body {
		padding: 12px 16px 16px;
	}

	.product-card__model {
		font-size: 1.5rem;
	}

	.product-grid {
		gap: 16px;
	}

	.cycle__wheel {
		--size: min(420px, 80vw);
	}

	.hero__inner,
	.cycle__inner,
	.product__intro,
	.jump-section,
	.contact-page,
	.ei-form__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hero__mark .ei-mark {
		width: 120px;
	}

	.site-tagline {
		display: none;
	}
}

/* Below 600px the WordPress toolbar scrolls away instead of staying fixed,
   so neither the bar nor jumps should leave room for it. :root outranks the
   plain html selector admin-bar.css uses. */
@media (max-width: 600px) {
	:root {
		scroll-padding-top: 0;
	}

	.doc-buttons {
		flex-direction: column;
	}

	/* The announcement card spans the phone's width. */
	.site-notice.is-pinned {
		inset: auto 12px 12px;
		width: auto;
	}

	.doc-buttons .button {
		display: flex;
	}

	.section-jump {
		top: 0;
	}

	.product-group,
	.jump-section {
		scroll-margin-top: calc(var(--jump-height, 64px) + 12px);
	}
}

/* The sticky header on narrow screens, where the toolbar scrolls away. */
@media (max-width: 600px) and (min-height: 520px) {
	.has-sticky-header {
		--sticky-top: 0px;
	}

	:root:has(> body.has-sticky-header) {
		scroll-padding-top: calc(var(--header-condensed-height, 64px) + 12px);
	}

	:root:has(> body.has-sticky-header .section-jump) {
		scroll-padding-top: calc(var(--header-condensed-height, 64px) + var(--jump-height, 64px) + 12px);
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}