/*
Theme Name: Astra Child
Theme URI: https://xadsites.com
Author: XAD
Author URI: https://xadsites.com
Description: A solar and renewable energy theme for EcoPower Energy LLC — solar panels, inverters, battery storage, electrical components and installation. Every section is an Elementor widget with real content controls and also renders natively with Elementor switched off, so the design can never drift. Brand colours, fonts, shape and spacing are set once in the admin panel and repaint the whole site. WooCommerce ready. Built by XAD.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ecopower
Tags: business, portfolio, one-column, two-columns, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, block-styles, wide-blocks, rtl-language-support, translation-ready
*/

/* ════════════════════════════════════════════════════════════════════
   TOKENS

   These are the shipped defaults. inc/palette.php prints the client's
   chosen values into <head> after this file, so anything set here is a
   fallback for the moment before that runs — never a second source of
   truth. Nothing below this block hardcodes a colour.
   ════════════════════════════════════════════════════════════════════ */

:root {
	--green: #2E8B1E;
	--green-hover: #277718;
	--green-soft: #E8F4E4;
	--green-wash: #F4FAF2;
	--on-green: #FFFFFF;
	--green-btn: #2D881D;
	--green-btn-hover: #27781A;
	--on-green-btn: #FFFFFF;
	--green-on-dark: #4F9E42;

	--forest: #0B5A1C;
	--forest-hover: #0A4F19;
	--on-forest: #FFFFFF;

	--blue: #0050B4;
	--blue-hover: #00459B;
	--blue-soft: #E5EEF8;
	--on-blue: #FFFFFF;
	--blue-on-dark: #5C8FCF;

	--navy: #0B2350;
	--navy-soft: #253A61;
	--navy-deep: #071734;
	--on-navy: #FFFFFF;

	--sun: #F5A800;
	--on-sun: #0E1A17;

	--ink: #2F3A3A;
	--ink-soft: #5B6464;
	--paper: #FFFFFF;
	--mist: #F4F7F6;
	--mist-deep: #EAEEED;
	--muted: #6B7280;
	--line: #E3E8EC;
	--danger: #C0342B;
	--danger-soft: #F9E8E7;

	--font-head: "Poppins", system-ui, -apple-system, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--base: 16px;

	--radius: 14px;
	--radius-sm: 10px;
	--radius-lg: 20px;
	--pill: 999px;
	--wrap: 1240px;
	--section-y: clamp(52px, 6vw, 88px);

	--gutter: clamp(18px, 3.4vw, 40px);
	--shadow-sm: 0 1px 2px rgba(11, 35, 80, .05), 0 2px 8px rgba(11, 35, 80, .05);
	--shadow: 0 2px 6px rgba(11, 35, 80, .06), 0 12px 28px rgba(11, 35, 80, .07);
	--shadow-lg: 0 8px 20px rgba(11, 35, 80, .1), 0 28px 60px rgba(11, 35, 80, .13);
	--ease: cubic-bezier(.32, .72, 0, 1);
	--logo-h: 64px;
	--logo-foot-h: 78px;
	--header-h: 88px;
}

/* ════════════════════════════════════════════════════════════════════
   BASE
   ════════════════════════════════════════════════════════════════════ */

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

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

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--base);
	line-height: 1.65;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-hover); }

h1, h2, h3, h4, h5 {
	font-family: var(--font-head);
	color: var(--navy);
	line-height: 1.16;
	letter-spacing: -.018em;
	margin: 0 0 .5em;
	font-weight: 700;
}

h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); font-weight: 800; line-height: 1.08; }
h2 { font-size: clamp(1.55rem, 2.9vw, 2.3rem); }
h3 { font-size: 1.08rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1em; padding-left: 1.2em; }

:focus-visible {
	outline: 3px solid var(--green);
	outline-offset: 2px;
	border-radius: 4px;
}

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

.skip-link {
	position: absolute; left: 12px; top: -60px; z-index: 999;
	background: var(--green-btn); color: var(--on-green-btn);
	padding: 12px 18px; border-radius: var(--radius-sm); font-weight: 600;
	transition: top .18s var(--ease);
}
.skip-link:focus { top: 12px; color: var(--on-green-btn); }

/* ── Layout ─────────────────────────────────────────────────────────── */

.ep-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.ep-wrap--narrow { max-width: 1040px; }
.ep-wrap--read { max-width: 820px; }

.ep-sec { padding-block: var(--section-y); }
.ep-sec--mist { background: var(--mist); }
.ep-sec--tight { padding-block: clamp(28px, 3.4vw, 46px); }

main { display: block; }

/* ════════════════════════════════════════════════════════════════════
   TYPE FURNITURE
   ════════════════════════════════════════════════════════════════════ */

/* The small capitalised line with a rule beside it — the device that holds
   the whole design together. */
.ep-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-head);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--green);
	margin-bottom: 12px;
}
.ep-eyebrow::before,
.ep-eyebrow::after {
	content: "";
	width: 34px; height: 2px;
	background: currentColor;
	opacity: .55;
	flex: none;
}
.ep-head--left .ep-eyebrow::before,
.ep-eyebrow--on-dark::before { display: none; }
.ep-head--left .ep-eyebrow::after,
.ep-eyebrow--on-dark::after { display: block; }

.ep-eyebrow--on-dark { color: rgba(255, 255, 255, .82); }

.ep-head { margin-bottom: clamp(26px, 3.2vw, 44px); }
.ep-head--center { text-align: center; }
.ep-head--center .ep-head__lead { margin-inline: auto; }
.ep-head--left { text-align: left; }

.ep-head__title { margin: 0 0 .4em; }
.ep-head__lead {
	color: var(--muted);
	max-width: 70ch;
	margin: 0;
	font-size: 1rem;
}

/* A heading with a single rule beside it — the two-column pages use this. */
.ep-rule-title {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: clamp(1.3rem, 2.2vw, 1.75rem);
	margin: 0 0 .35em;
}
.ep-rule-title::after {
	content: "";
	flex: 1;
	height: 2px;
	background: var(--green);
	opacity: .35;
}

.ep-accent { color: var(--green); }
.ep-hero .ep-accent,
.ep-stats .ep-accent,
.ep-cta .ep-accent { color: var(--green-on-dark); }

.ep-textlink {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 600;
	font-size: .92rem;
	color: var(--blue);
	white-space: nowrap;
}
.ep-textlink:hover { color: var(--blue-hover); }
.ep-textlink svg { transition: transform .18s var(--ease); }
.ep-textlink:hover svg { transform: translateX(3px); }

/* ════════════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════════════ */

.ep-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 24px;
	border: 2px solid transparent;
	border-radius: var(--radius-sm);
	font-family: var(--font-head);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
	transition: background-color .18s var(--ease), border-color .18s var(--ease),
		transform .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
}
.ep-btn svg { flex: none; }
.ep-btn > span { white-space: nowrap; }

.ep-btn--green {
	background: var(--green-btn);
	color: var(--on-green-btn);
	box-shadow: 0 4px 14px rgba(46, 139, 30, .25);
}
.ep-btn--green:hover {
	background: var(--green-btn-hover);
	color: var(--on-green-btn);
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(46, 139, 30, .3);
}

.ep-btn--ghost {
	background: rgba(9, 22, 44, .42);
	color: #fff;
	border-color: rgba(255, 255, 255, .72);
	backdrop-filter: blur(6px);
}
.ep-btn--ghost:hover {
	background: rgba(9, 22, 44, .62);
	border-color: #fff;
	color: #fff;
	transform: translateY(-2px);
}

.ep-btn--white { background: #fff; color: var(--forest); }
.ep-btn--white:hover { background: #fff; color: var(--forest-hover); transform: translateY(-2px); box-shadow: var(--shadow); }

.ep-btn--navy { background: var(--navy); color: var(--on-navy); }
.ep-btn--navy:hover { background: var(--navy-deep); color: var(--on-navy); transform: translateY(-2px); }

.ep-btn--link { padding: 0; background: none; color: var(--green); }

.ep-btn--lg { padding: 16px 30px; font-size: 1rem; }
.ep-btn--sm { padding: 9px 16px; font-size: .86rem; }
.ep-btn--block { width: 100%; }

.ep-btn:active { transform: translateY(0); }

.ep-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}

/* ════════════════════════════════════════════════════════════════════
   ICON BADGES
   ════════════════════════════════════════════════════════════════════ */

.ep-badge {
	display: inline-grid;
	place-items: center;
	width: 46px; height: 46px;
	border-radius: 50%;
	flex: none;
	color: #fff;
}
.ep-badge--green { background: var(--green); color: var(--on-green); }
.ep-badge--blue  { background: var(--blue);  color: var(--on-blue); }
.ep-badge--navy  { background: var(--navy);  color: var(--on-navy); }
.ep-badge--white { background: #fff; color: var(--green); }

/* ════════════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════════════ */

.ep-headwrap {
	position: relative;
	z-index: 300;
}
.ep-headwrap.is-sticky {
	position: sticky;
	top: 0;
}

.ep-header {
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	transition: background-color .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.ep-header__in {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.4vw, 34px);
	min-height: var(--header-h);
}

.ep-brand { display: flex; align-items: center; gap: 10px; flex: none; }
.ep-brand__logo {
	height: var(--logo-h, 64px);
	width: auto;
	max-width: 280px;
	object-fit: contain;
}
.ep-brand__text {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.3rem;
	color: var(--navy);
	letter-spacing: -.02em;
}

.ep-brand__tag {
	display: none;
	padding-left: 12px;
	border-left: 1px solid var(--line);
	font-size: .78rem;
	line-height: 1.35;
	color: var(--ink-soft);
	white-space: pre-line;
}

/* Desktop navigation */
.ep-nav { margin-inline: auto; }
.ep-nav ul {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(6px, 1.4vw, 20px);
}
.ep-nav li { position: relative; }
.ep-nav a {
	display: block;
	padding: 10px 4px;
	font-size: .95rem;
	font-weight: 500;
	color: var(--ink);
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: color .16s var(--ease), border-color .16s var(--ease);
}
.ep-nav a:hover,
.ep-nav .current-menu-item > a,
.ep-nav .current-menu-ancestor > a,
.ep-nav .current_page_item > a {
	color: var(--green);
	border-bottom-color: var(--green);
}

/* Sub-menu */
.ep-nav .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	min-width: 248px;
	flex-direction: column;
	gap: 0;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.ep-nav li:hover > .sub-menu,
.ep-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
/* The dropdown is its own white surface wherever the header happens to be,
   so it states its colours outright rather than inheriting them. */
.ep-nav .sub-menu a {
	padding: 10px 14px;
	border-bottom: 0;
	border-radius: var(--radius-sm);
	font-weight: 500;
	white-space: normal;
	color: var(--ink);
}
.ep-nav .sub-menu a:hover,
.ep-nav .sub-menu a:focus-visible { background: var(--green-wash); color: var(--green); }
.ep-nav .sub-menu .current-menu-item > a { color: var(--green); }

.ep-header__act { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.ep-nav + .ep-header__act { margin-left: 0; }

.ep-burger {
	display: none;
	width: 46px; height: 46px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--paper);
	color: var(--navy);
	cursor: pointer;
	place-items: center;
}

/* The header floating over a hero photograph */
body.ep-transparent-header .ep-headwrap:not(.is-stuck) .ep-header {
	background: transparent;
	border-bottom-color: transparent;
	position: absolute;
	left: 0; right: 0; top: 0;
}
/* Only the TOP-LEVEL links turn white over a photograph. `.ep-nav a` would
   also catch the links inside the dropdown, which sits on its own white
   panel — white on white, and the menu reads as an empty box. */
body.ep-transparent-header .ep-headwrap:not(.is-stuck) .ep-nav > ul > li > a,
body.ep-transparent-header .ep-headwrap:not(.is-stuck) .ep-brand__text,
body.ep-transparent-header .ep-headwrap:not(.is-stuck) .ep-brand__tag { color: #fff; }
body.ep-transparent-header .ep-headwrap:not(.is-stuck) .ep-brand__tag { border-left-color: rgba(255, 255, 255, .3); }
body.ep-transparent-header .ep-headwrap:not(.is-stuck) .ep-burger {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .34);
	color: #fff;
}
body.ep-transparent-header .ep-headwrap:not(.is-stuck) .ep-nav > ul > li > a:hover { color: #fff; border-bottom-color: #fff; }

.ep-headwrap.is-stuck .ep-header { box-shadow: 0 2px 14px rgba(11, 35, 80, .1); }

/* ── Mobile drawer ──────────────────────────────────────────────────── */

.ep-scrim {
	position: fixed; inset: 0; z-index: 390;
	background: rgba(7, 23, 52, .5);
	opacity: 0; pointer-events: none;
	transition: opacity .26s var(--ease);
	backdrop-filter: blur(2px);
}
.ep-scrim.is-open { opacity: 1; pointer-events: auto; }

.ep-drawer {
	position: fixed; top: 0; bottom: 0; left: 0; z-index: 400;
	width: min(370px, 88vw);
	background: var(--paper);
	transform: translateX(-100%);
	transition: transform .3s var(--ease);
	display: flex; flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.ep-drawer.is-open { transform: none; }

.ep-drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; padding: 16px 20px;
	border-bottom: 1px solid var(--line);
	position: sticky; top: 0; background: var(--paper); z-index: 2;
}
.ep-drawer__close {
	width: 42px; height: 42px;
	display: grid; place-items: center;
	border: 1px solid var(--line); border-radius: var(--radius-sm);
	background: none; color: var(--navy); cursor: pointer;
}

.ep-drawer__nav { padding: 8px 12px 16px; }
.ep-drawer__nav ul { list-style: none; margin: 0; padding: 0; }
.ep-drawer__nav li { border-bottom: 1px solid var(--line); }
.ep-drawer__nav li:last-child { border-bottom: 0; }
.ep-drawer__nav a {
	display: block;
	padding: 14px 8px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 1rem;
	color: var(--navy);
}
.ep-drawer__nav a:hover { color: var(--green); }
.ep-drawer__nav .sub-menu { padding: 0 0 8px 14px; }
.ep-drawer__nav .sub-menu li { border-bottom: 0; }
.ep-drawer__nav .sub-menu a { padding: 9px 8px; font-size: .93rem; font-weight: 500; color: var(--ink); }

.ep-drawer__foot {
	margin-top: auto;
	padding: 18px 20px 24px;
	border-top: 1px solid var(--line);
	background: var(--mist);
	display: grid;
	gap: 10px;
}
.ep-drawer__foot a { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.ep-drawer__foot a svg { flex: none; }
/* The phone and email links are ink with a green icon — but not the button
   among them. `.ep-drawer__foot a` (0-1-1) outranks `.ep-btn--green` (0-1-0),
   so a blanket colour here made the Request a Quote label dark on green
   (2.6:1) and its icon green on green. Astra §5 Case B, a third time. */
.ep-drawer__foot a:not(.ep-btn) { color: var(--ink); }
.ep-drawer__foot a:not(.ep-btn) svg { color: var(--green); }
.ep-drawer__foot .ep-btn { margin-top: 6px; }

/* ── Sticky bottom bar (phones) ─────────────────────────────────────── */

.ep-stickybar {
	display: none;
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 380;
	background: var(--paper);
	border-top: 1px solid var(--line);
	box-shadow: 0 -4px 20px rgba(11, 35, 80, .1);
	padding-bottom: env(safe-area-inset-bottom);
}
.ep-stickybar__in { display: grid; grid-template-columns: repeat(3, 1fr); }
.ep-stickybar a {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 4px;
	min-height: 58px;
	padding: 8px 6px;
	font-size: .76rem;
	font-weight: 600;
	color: var(--navy);
	text-align: center;
	line-height: 1.2;
}
.ep-stickybar a + a { border-left: 1px solid var(--line); }
.ep-stickybar svg { color: var(--green); }

/* ════════════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════════════ */

.ep-hero {
	position: relative;
	display: flex;
	align-items: center;
	isolation: isolate;
	min-height: clamp(460px, 58vw, 640px);
	color: #fff;
	overflow: hidden;
}
.ep-hero__bg {
	position: absolute; inset: 0; z-index: -2;
	background-size: cover;
	background-position: center right;
}
.ep-hero__scrim {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(90deg, rgba(8, 26, 58, .94) 0%, rgba(8, 26, 58, .82) 34%, rgba(8, 26, 58, .28) 62%, rgba(8, 26, 58, .1) 100%),
		linear-gradient(180deg, rgba(8, 26, 58, .5) 0%, rgba(8, 26, 58, 0) 32%);
}

.ep-hero__in { width: 100%; padding-block: clamp(96px, 11vw, 130px) clamp(40px, 5vw, 64px); }
.ep-hero__copy { max-width: 620px; }

.ep-hero__title { color: #fff; margin: 0 0 .45em; }
.ep-hero__title .ep-accent { display: block; }
.ep-hero__sub {
	font-family: var(--font-head);
	font-size: clamp(1.05rem, 1.9vw, 1.45rem);
	font-weight: 700;
	line-height: 1.28;
	margin: 0 0 .6em;
	color: #fff;
}
.ep-hero__lead {
	font-size: clamp(.98rem, 1.2vw, 1.08rem);
	color: rgba(255, 255, 255, .88);
	max-width: 54ch;
	margin: 0;
}

.ep-crumbs {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	font-size: .84rem;
	color: rgba(255, 255, 255, .76);
	margin-bottom: 14px;
}
.ep-crumbs a { color: rgba(255, 255, 255, .76); }
.ep-crumbs a:hover { color: #fff; }
.ep-crumbs [aria-current] { color: #fff; font-weight: 500; }

.ep-usps {
	display: flex; flex-wrap: wrap;
	list-style: none; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0;
	gap: 0;
}
.ep-usp {
	display: flex; align-items: center; gap: 10px;
	padding: 2px 20px 2px 0;
	margin-right: 20px;
	border-right: 1px solid rgba(255, 255, 255, .26);
}
.ep-usp:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.ep-usp__ic { color: var(--green-on-dark); flex: none; display: grid; place-items: center; }
.ep-usp__txt { display: flex; flex-direction: column; line-height: 1.3; }
.ep-usp__txt b { font-size: .88rem; font-weight: 600; color: #fff; }
.ep-usp__txt span { font-size: .8rem; color: rgba(255, 255, 255, .74); }

/* A hero with no buttons and no promises under it — the quote and contact
   pages — needs far less height, or it is mostly empty photograph. */
.ep-hero--full:not(:has(.ep-btns)):not(:has(.ep-usps)) {
	min-height: clamp(280px, 32vw, 400px);
}
.ep-hero--full:not(:has(.ep-btns)):not(:has(.ep-usps)) .ep-hero__in {
	padding-block: clamp(92px, 10vw, 118px) clamp(30px, 4vw, 48px);
}

/* Split hero — text left, photograph right */
.ep-hero--split { color: var(--ink); background: var(--navy); }
.ep-hero--split .ep-hero__in {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}
.ep-hero--split .ep-hero__media {
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.ep-hero--split .ep-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* ════════════════════════════════════════════════════════════════════
   GRIDS AND CARDS
   ════════════════════════════════════════════════════════════════════ */

.ep-grid { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.ep-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ep-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ep-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ep-grid--5 { grid-template-columns: repeat(5, 1fr); }

.ep-card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
	display: flex;
	flex-direction: column;
	min-width: 0;
	color: inherit;
}
a.ep-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
	border-color: transparent;
	color: inherit;
}

/* Photo card — the home page's five solutions */
.ep-card--photo { overflow: hidden; }
.ep-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--mist-deep);
	overflow: hidden;
}
.ep-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .4s var(--ease);
}
a.ep-card:hover .ep-card__media img { transform: scale(1.05); }
.ep-card__ph {
	width: 100%; height: 100%;
	display: grid; place-items: center;
	color: var(--green);
	background: linear-gradient(135deg, var(--green-wash), var(--blue-soft));
}

.ep-card--photo .ep-card__body {
	display: block;
	padding: 0 20px 22px;
	margin-top: -23px;
	position: relative;
}
.ep-card--photo .ep-badge {
	box-shadow: 0 0 0 4px var(--paper);
	margin-bottom: 12px;
}

.ep-card__title {
	font-size: 1.02rem;
	margin: 0 0 6px;
	color: var(--navy);
	line-height: 1.32;
}
.ep-card__text {
	font-size: .9rem;
	color: var(--muted);
	margin: 0;
	line-height: 1.58;
}
.ep-card__link {
	display: inline-flex; align-items: center; gap: 6px;
	margin-top: 12px;
	font-size: .88rem;
	font-weight: 600;
	color: var(--blue);
}
a.ep-card:hover .ep-card__link svg { transform: translateX(3px); }
.ep-card__link svg { transition: transform .18s var(--ease); }

/* Icon card — the benefits and why-choose rows */
.ep-card--icon {
	flex-direction: row;
	align-items: flex-start;
	gap: 14px;
	padding: 20px;
}
.ep-card--icon .ep-card__body { min-width: 0; }

/* ── Wide card: photograph left, copy right ─────────────────────────── */

.ep-wide {
	display: flex;
	align-items: stretch;
	gap: 14px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	min-width: 0;
	color: inherit;
	transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
a.ep-wide:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: inherit; }

.ep-wide__media {
	position: relative;
	flex: 0 0 38%;
	max-width: 150px;
	background: var(--mist-deep);
	overflow: hidden;
}
.ep-wide__media img { width: 100%; height: 100%; object-fit: cover; }
.ep-wide__media .ep-badge {
	position: absolute;
	left: 10px; bottom: 10px;
	width: 36px; height: 36px;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .9);
}
.ep-wide__body { padding: 16px 16px 16px 0; display: block; min-width: 0; }

/* ════════════════════════════════════════════════════════════════════
   FEATURES + HIGHLIGHT CARD
   ════════════════════════════════════════════════════════════════════ */

.ep-features__in {
	display: grid;
	grid-template-columns: 1fr 1.02fr;
	gap: clamp(24px, 3.4vw, 48px);
	align-items: center;
}

.ep-featlist {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 20px;
	margin-top: 8px;
}
.ep-featlist__item { display: flex; gap: 12px; align-items: flex-start; }
.ep-featlist__item .ep-badge { width: 38px; height: 38px; }
.ep-featlist__item b { display: block; font-size: .94rem; color: var(--navy); font-family: var(--font-head); }
.ep-featlist__item span { display: block; font-size: .85rem; color: var(--muted); line-height: 1.5; }

.ep-highlight {
	position: relative;
	isolation: isolate;
	border-radius: var(--radius);
	overflow: hidden;
	min-height: 330px;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
	color: #fff;
}
.ep-highlight__scrim {
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(135deg, rgba(8, 26, 58, .93) 0%, rgba(8, 26, 58, .74) 48%, rgba(8, 26, 58, .5) 100%);
}
.ep-highlight__in { padding: clamp(24px, 3vw, 38px); width: 100%; }
.ep-highlight__title { color: #fff; font-size: clamp(1.2rem, 2vw, 1.6rem); margin: 0 0 18px; }

.ep-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ep-ticks li { display: flex; align-items: flex-start; gap: 11px; font-size: .92rem; color: rgba(255, 255, 255, .94); line-height: 1.45; }
.ep-tick {
	flex: none;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--green);
	color: var(--on-green);
	display: grid; place-items: center;
	margin-top: 1px;
}

/* ════════════════════════════════════════════════════════════════════
   COMPONENTS + APPLICATIONS
   ════════════════════════════════════════════════════════════════════ */

.ep-components__in {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	gap: clamp(24px, 3.2vw, 46px);
	align-items: start;
}
.ep-components__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 20px;
}

.ep-compgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.ep-comp {
	display: block;
	border-radius: var(--radius-sm);
	overflow: hidden;
	min-width: 0;
	color: inherit;
	transition: transform .2s var(--ease);
}
a.ep-comp:hover { transform: translateY(-3px); color: inherit; }
.ep-comp__media { display: block; aspect-ratio: 4 / 3; background: var(--mist-deep); overflow: hidden; border-radius: var(--radius-sm); }
.ep-comp__media img { width: 100%; height: 100%; object-fit: cover; }
.ep-comp__body { display: block; padding: 10px 2px 0; }
.ep-comp__body b { display: block; font-family: var(--font-head); font-size: .88rem; color: var(--navy); line-height: 1.3; margin-bottom: 3px; }
.ep-comp__body span { display: block; font-size: .78rem; color: var(--muted); line-height: 1.45; }

.ep-appgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.ep-app {
	display: flex; gap: 11px; align-items: flex-start;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 15px;
}
.ep-app__ic { flex: none; color: var(--navy); }
.ep-app__ic--green { color: var(--green); }
.ep-app__ic--blue { color: var(--blue); }
.ep-app b { display: block; font-family: var(--font-head); font-size: .88rem; color: var(--navy); margin-bottom: 2px; }
.ep-app span { display: block; font-size: .78rem; color: var(--muted); line-height: 1.45; }

/* ════════════════════════════════════════════════════════════════════
   PROCESS
   ════════════════════════════════════════════════════════════════════ */

.ep-steps {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(14px, 2vw, 26px);
	counter-reset: ep-step;
}
.ep-step {
	position: relative;
	text-align: center;
	padding-top: 6px;
}
.ep-step + .ep-step::before {
	content: "";
	position: absolute;
	left: calc(-1 * clamp(14px, 2vw, 26px) / 2 - 4px);
	top: 22px;
	width: 8px; height: 8px;
	border-top: 2px solid var(--line);
	border-right: 2px solid var(--line);
	transform: rotate(45deg);
}
.ep-step__n {
	display: grid; place-items: center;
	width: 36px; height: 36px;
	margin: 0 auto 10px;
	border-radius: 50%;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: .95rem;
	color: #fff;
	background: var(--green);
}
.ep-step__n--blue { background: var(--blue); color: var(--on-blue); }
.ep-step__n--navy { background: var(--navy); color: var(--on-navy); }
.ep-step__ic { display: block; color: var(--blue); margin: 0 auto 8px; width: 22px; }
.ep-step__title { display: block; font-family: var(--font-head); font-size: .95rem; color: var(--navy); margin-bottom: 4px; }
.ep-step__text { display: block; font-size: .83rem; color: var(--muted); line-height: 1.5; }

/* ════════════════════════════════════════════════════════════════════
   TEXT + MEDIA SPLIT
   ════════════════════════════════════════════════════════════════════ */

.ep-split__in {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 3.6vw, 52px);
	align-items: center;
}
.ep-split--flip .ep-split__media { order: -1; }
.ep-split__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.ep-split__media img { width: 100%; height: 100%; object-fit: cover; }

.ep-rowlist { display: grid; gap: 16px; margin-top: 6px; }
.ep-rowlist__item { display: flex; gap: 12px; align-items: flex-start; }
.ep-rowlist__item .ep-badge { width: 38px; height: 38px; }
.ep-rowlist__item b { display: block; font-family: var(--font-head); font-size: .94rem; color: var(--navy); }
.ep-rowlist__item span { display: block; font-size: .86rem; color: var(--muted); line-height: 1.5; }

/* ════════════════════════════════════════════════════════════════════
   STATS STRIP
   ════════════════════════════════════════════════════════════════════ */

.ep-stats {
	position: relative;
	isolation: isolate;
	background: var(--navy);
	background-size: cover;
	background-position: center;
	color: #fff;
	padding-block: clamp(30px, 3.6vw, 50px);
}
.ep-stats__scrim {
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(90deg, rgba(7, 23, 52, .95) 0%, rgba(7, 23, 52, .88) 55%, rgba(7, 23, 52, .8) 100%);
}
.ep-stats__in {
	display: flex;
	align-items: center;
	gap: clamp(20px, 3vw, 44px);
	flex-wrap: wrap;
}
.ep-stats__copy { flex: 1 1 280px; min-width: 0; }
.ep-stats__title { color: #fff; font-size: clamp(1.15rem, 1.9vw, 1.5rem); margin: 0 0 6px; }
.ep-stats__copy p { font-size: .87rem; color: rgba(255, 255, 255, .78); margin: 0; max-width: 42ch; }

.ep-stats__list {
	list-style: none; margin: 0; padding: 0;
	display: flex;
	flex: 2 1 560px;
	gap: 0;
	flex-wrap: wrap;
}
.ep-stat {
	display: flex; align-items: center; gap: 12px;
	flex: 1 1 180px;
	padding-inline: clamp(12px, 1.8vw, 26px);
	border-left: 1px solid rgba(255, 255, 255, .18);
	min-width: 0;
}
.ep-stat:first-child { border-left: 0; padding-left: 0; }
.ep-stat__ic { flex: none; color: #fff; opacity: .92; }
.ep-stat__txt { min-width: 0; }
.ep-stat__txt b { display: block; font-family: var(--font-head); font-size: .98rem; line-height: 1.25; color: #fff; }
.ep-stat__txt span { display: block; font-size: .78rem; color: rgba(255, 255, 255, .7); line-height: 1.35; }
.ep-stats__act { flex: none; }

/* ════════════════════════════════════════════════════════════════════
   GREEN CTA BAND
   ════════════════════════════════════════════════════════════════════ */

.ep-cta {
	position: relative;
	isolation: isolate;
	background: var(--forest);
	background-size: cover;
	background-position: center;
	color: #fff;
	padding-block: clamp(32px, 4vw, 56px);
}
.ep-cta__scrim {
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(100deg, rgba(11, 90, 28, .93) 0%, rgba(11, 90, 28, .84) 46%, rgba(11, 90, 28, .62) 100%);
}
.ep-cta__in {
	display: flex; align-items: center; justify-content: space-between;
	gap: clamp(18px, 3vw, 40px);
	flex-wrap: wrap;
}
.ep-cta__copy { flex: 1 1 380px; min-width: 0; }
.ep-cta__title { color: #fff; font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 0 0 8px; }
.ep-cta__lead { color: rgba(255, 255, 255, .9); margin: 0; max-width: 56ch; }
.ep-cta__act { flex: none; }

/* ════════════════════════════════════════════════════════════════════
   LIST ROWS
   ════════════════════════════════════════════════════════════════════ */

.ep-listrows__list { display: grid; gap: 12px; }
.ep-listrow {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 10px 16px 10px 10px;
	color: inherit;
	transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
a.ep-listrow:hover { transform: translateX(3px); box-shadow: var(--shadow); color: inherit; }
.ep-listrow__media {
	flex: none;
	width: 108px; height: 74px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--mist-deep);
	display: block;
}
.ep-listrow__media img { width: 100%; height: 100%; object-fit: cover; }
.ep-listrow__body { flex: 1; min-width: 0; display: block; }
.ep-listrow__body b { display: block; font-family: var(--font-head); font-size: 1.02rem; color: var(--navy); margin-bottom: 2px; }
.ep-listrow__body span { display: block; font-size: .88rem; color: var(--muted); line-height: 1.5; }
.ep-listrow__go { flex: none; color: var(--muted); display: grid; place-items: center; }
a.ep-listrow:hover .ep-listrow__go { color: var(--green); }

/* ════════════════════════════════════════════════════════════════════
   PROMISES STRIP
   ════════════════════════════════════════════════════════════════════ */

.ep-promises__list {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.ep-promise {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	padding: 20px 14px;
	text-align: center;
	border-left: 1px solid var(--line);
}
.ep-promise:first-child { border-left: 0; }
.ep-promise svg { color: var(--green); }
.ep-promise--blue svg { color: var(--blue); }
.ep-promise--navy svg { color: var(--navy); }
.ep-promise b { font-family: var(--font-head); font-size: .9rem; color: var(--navy); line-height: 1.3; }

/* ════════════════════════════════════════════════════════════════════
   FAQ
   ════════════════════════════════════════════════════════════════════ */

.ep-faq__list { display: grid; gap: 10px; }
.ep-qa {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.ep-qa summary {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px;
	padding: 16px 18px;
	cursor: pointer;
	font-family: var(--font-head);
	font-weight: 600;
	color: var(--navy);
	list-style: none;
}
.ep-qa summary::-webkit-details-marker { display: none; }
.ep-qa__mark {
	flex: none;
	position: relative;
	width: 16px; height: 16px;
}
.ep-qa__mark::before,
.ep-qa__mark::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 2px;
	background: var(--green);
	transition: transform .2s var(--ease);
}
.ep-qa__mark::after { transform: rotate(90deg); }
.ep-qa[open] .ep-qa__mark::after { transform: rotate(0); }
.ep-qa__a { padding: 0 18px 18px; color: var(--muted); }

/* ════════════════════════════════════════════════════════════════════
   THE QUOTE FORM
   ════════════════════════════════════════════════════════════════════ */

.ep-quote__in {
	display: grid;
	grid-template-columns: 1.65fr 1fr;
	gap: clamp(20px, 2.6vw, 34px);
	align-items: start;
}
.ep-quote__in--solo { grid-template-columns: 1fr; max-width: 860px; margin-inline: auto; }

.ep-quote__form { padding: clamp(22px, 3vw, 38px); }
.ep-quote__title { font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin: 0 0 6px; }
.ep-quote__lead { color: var(--muted); margin: 0 0 24px; font-size: .94rem; }

.ep-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.ep-field { min-width: 0; grid-column: 1 / -1; }
.ep-field--half { grid-column: auto; }

.ep-label {
	display: block;
	font-size: .86rem;
	font-weight: 600;
	font-family: var(--font-head);
	color: var(--navy);
	margin-bottom: 6px;
}
.ep-req { color: var(--danger); }
.ep-opt { color: var(--muted); font-weight: 400; }
.ep-hint { font-size: .8rem; color: var(--muted); margin: -2px 0 8px; }

.ep-input {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--paper);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.ep-input > svg:first-child {
	position: absolute;
	left: 13px;
	color: var(--muted);
	pointer-events: none;
}
.ep-input--area { align-items: flex-start; }
.ep-input--area > svg:first-child { top: 13px; }

.ep-input input,
.ep-input select,
.ep-input textarea {
	width: 100%;
	padding: 12px 14px 12px 40px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 16px; /* below 16px iOS zooms the page on focus */
	color: var(--ink);
	border-radius: var(--radius-sm);
	appearance: none;
}
.ep-input textarea { resize: vertical; min-height: 104px; line-height: 1.6; }
.ep-input select { cursor: pointer; padding-right: 38px; }
.ep-input > svg:last-child {
	position: absolute; right: 13px;
	color: var(--muted);
	pointer-events: none;
	transform: rotate(90deg);
}
.ep-input input:focus,
.ep-input select:focus,
.ep-input textarea:focus { outline: none; }
.ep-input:focus-within {
	border-color: var(--green);
	box-shadow: 0 0 0 3px var(--green-soft);
}
.ep-input input::placeholder,
.ep-input textarea::placeholder { color: var(--muted); opacity: .8; }

.ep-field.is-bad .ep-input { border-color: var(--danger); }
.ep-field.is-bad .ep-input:focus-within { box-shadow: 0 0 0 3px var(--danger-soft); }

.ep-err { font-size: .8rem; color: var(--danger); margin: 6px 0 0; min-height: 0; }
.ep-err:empty { display: none; }

.ep-count { display: block; text-align: right; font-size: .76rem; color: var(--muted); margin-top: 4px; }

/* The picture checkboxes */
.ep-picks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.ep-pick {
	position: relative;
	display: flex; flex-direction: column;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	overflow: hidden;
	cursor: pointer;
	background: var(--paper);
	transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.ep-pick:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.ep-pick input {
	position: absolute; opacity: 0;
	width: 1px; height: 1px;
}
.ep-pick__box {
	position: absolute; top: 8px; left: 8px; z-index: 2;
	width: 20px; height: 20px;
	border: 1.5px solid var(--line);
	border-radius: 5px;
	background: rgba(255, 255, 255, .92);
	display: grid; place-items: center;
	color: transparent;
	transition: background-color .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease);
}
.ep-pick__media { display: block; aspect-ratio: 4 / 3; background: var(--mist-deep); overflow: hidden; }
.ep-pick__media img { width: 100%; height: 100%; object-fit: cover; }
.ep-pick__label {
	display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
	padding: 10px 11px 12px;
}
.ep-pick__label .ep-badge { width: 30px; height: 30px; }
.ep-pick__label b { font-family: var(--font-head); font-size: .82rem; color: var(--navy); line-height: 1.3; }

.ep-pick input:checked ~ .ep-pick__box { background: var(--green); border-color: var(--green); color: var(--on-green); }
.ep-pick:has(input:checked) { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.ep-pick input:focus-visible ~ .ep-pick__box { outline: 3px solid var(--green); outline-offset: 2px; }

.ep-hp {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ep-form__foot { margin-top: 24px; }
.ep-form__privacy {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	font-size: .8rem; color: var(--muted);
	margin: 12px 0 0;
	text-align: center;
}
.ep-form__privacy svg { flex: none; }

.ep-note {
	padding: 13px 16px;
	border-radius: var(--radius-sm);
	font-size: .92rem;
	margin: 0 0 18px;
}
.ep-note--ok { background: var(--green-wash); border: 1px solid var(--green-soft); color: var(--forest); }
.ep-note--bad { background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger); }

/* The panel beside the form */
.ep-quote__side { display: grid; gap: 18px; position: sticky; top: calc(var(--header-h) + 18px); }

.ep-sidecard {
	position: relative;
	isolation: isolate;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--navy);
	background-size: cover;
	background-position: center;
	color: #fff;
	min-height: 300px;
	display: flex;
	align-items: flex-start;
}
.ep-sidecard__scrim {
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(170deg, rgba(8, 26, 58, .9) 0%, rgba(8, 26, 58, .78) 55%, rgba(8, 26, 58, .6) 100%);
}
.ep-sidecard__in { padding: clamp(20px, 2.4vw, 30px); }
.ep-sidecard__title { color: #fff; font-size: clamp(1.15rem, 1.8vw, 1.5rem); margin: 0 0 20px; }

.ep-sidelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ep-sidelist li { display: flex; gap: 12px; align-items: flex-start; }
.ep-sidelist__ic { flex: none; color: var(--green-on-dark); }
.ep-sidelist b { display: block; font-family: var(--font-head); font-size: .92rem; color: #fff; }
.ep-sidelist li > span > span { display: block; font-size: .82rem; color: rgba(255, 255, 255, .76); line-height: 1.45; }

.ep-help { padding: clamp(20px, 2.4vw, 28px); }
.ep-help__title { font-size: 1.2rem; margin: 0 0 6px; }
.ep-help__lead { font-size: .88rem; color: var(--muted); margin: 0 0 18px; }
.ep-help__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ep-help__list li { display: flex; gap: 12px; align-items: flex-start; }
.ep-help__ic {
	flex: none;
	width: 40px; height: 40px;
	border-radius: 50%;
	display: grid; place-items: center;
	background: var(--green-wash);
	color: var(--green);
}
.ep-help__list b { display: block; font-family: var(--font-head); font-size: .88rem; color: var(--navy); }
.ep-help__list a { display: block; font-weight: 600; color: var(--blue); font-size: .98rem; }
.ep-help__list span span,
.ep-help__list li > span > span:last-child { display: block; font-size: .78rem; color: var(--muted); line-height: 1.45; }

/* ════════════════════════════════════════════════════════════════════
   PROSE (pages and posts)
   ════════════════════════════════════════════════════════════════════ */

.ep-prose { font-size: 1.02rem; line-height: 1.75; }
.ep-prose > * + * { margin-top: 1.1em; }
.ep-prose h2 { margin-top: 1.8em; font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.ep-prose h3 { margin-top: 1.5em; font-size: 1.16rem; }
.ep-prose ul, .ep-prose ol { padding-left: 1.3em; }
.ep-prose li + li { margin-top: .4em; }
.ep-prose a { text-decoration: underline; text-underline-offset: 3px; }
.ep-prose img { border-radius: var(--radius); }
.ep-prose blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--green);
	color: var(--ink-soft);
	font-size: 1.06rem;
}
.ep-prose table { width: 100%; border-collapse: collapse; }
.ep-prose th, .ep-prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.ep-prose th { background: var(--mist); font-family: var(--font-head); }

.ep-pagehead {
	background: var(--mist);
	border-bottom: 1px solid var(--line);
	padding-block: clamp(36px, 5vw, 64px);
}
.ep-pagehead h1 { margin: 0; }

/* ════════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════════ */

.ep-footer {
	background: var(--navy-deep);
	color: rgba(255, 255, 255, .72);
	padding-top: clamp(40px, 5vw, 64px);
	font-size: .92rem;
}
.ep-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: clamp(22px, 3vw, 44px);
	padding-bottom: clamp(30px, 4vw, 48px);
}
.ep-footer h3 {
	color: #fff;
	font-size: .95rem;
	letter-spacing: .02em;
	margin: 0 0 16px;
}
.ep-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ep-footer a { color: rgba(255, 255, 255, .72); }
.ep-footer a:hover { color: #fff; }

.ep-footer__brand .ep-brand__logo { height: var(--logo-foot-h, 78px); margin-bottom: 14px; }
.ep-footer__brand .ep-brand__text { color: #fff; }
.ep-footer__about { max-width: 38ch; margin: 0 0 16px; line-height: 1.6; }

.ep-footer__contact { display: grid; gap: 12px; }
.ep-footer__contact li { display: flex; gap: 11px; align-items: flex-start; }
.ep-footer__contact svg { color: var(--green-on-dark); flex: none; margin-top: 3px; }
.ep-footer__contact b { display: block; color: #fff; font-weight: 600; font-size: .85rem; }

.ep-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding-block: 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	font-size: .84rem;
}
.ep-footer__bottom ul { display: flex; gap: 18px; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════════
   MOTION
   ════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
	[data-reveal] {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity .55s var(--ease), transform .55s var(--ease);
	}
	[data-reveal].is-in { opacity: 1; transform: none; }
}

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

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 1180px) {
	.ep-grid--5 { grid-template-columns: repeat(3, 1fr); }
	.ep-compgrid { grid-template-columns: repeat(3, 1fr); }
	.ep-components__in { grid-template-columns: 1fr; }
	.ep-stats__in { flex-direction: column; align-items: flex-start; }
	.ep-stats__list { width: 100%; }
}

@media (max-width: 1024px) {
	.ep-brand__logo { height: min(var(--logo-h, 64px), 54px); }

	.ep-nav { display: none; }
	.ep-burger { display: grid; }
	.ep-header__act { margin-left: auto; }
	.ep-brand__tag { display: block; }

	/* The design puts the logo first and the hamburger last on a small
	   screen, so the header reads the same way it does on a desktop. */
	.ep-header__in { gap: 12px; }
	.ep-brand { order: 1; }
	.ep-brand__tag { order: 2; }
	.ep-header__act { order: 3; }
	.ep-burger { order: 4; }

	.ep-features__in,
	.ep-split__in,
	.ep-hero--split .ep-hero__in { grid-template-columns: 1fr; }
	.ep-split--flip .ep-split__media { order: 0; }

	.ep-quote__in { grid-template-columns: 1fr; }
	.ep-quote__side { position: static; }

	.ep-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.ep-grid--5 { grid-template-columns: repeat(2, 1fr); }
	.ep-steps { grid-template-columns: repeat(2, 1fr); }
	.ep-step + .ep-step::before { display: none; }
	.ep-footer__grid { grid-template-columns: 1fr 1fr; }
	.ep-picks { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
	.ep-hero { min-height: auto; }
	.ep-hero__scrim {
		background:
			linear-gradient(180deg, rgba(8, 26, 58, .74) 0%, rgba(8, 26, 58, .88) 60%, rgba(8, 26, 58, .94) 100%);
	}
	.ep-hero__in { padding-block: clamp(96px, 22vw, 130px) clamp(34px, 8vw, 54px); }
	.ep-hero__copy { max-width: none; }

	.ep-usps { gap: 14px 0; }
	.ep-usp { flex: 1 1 46%; border-right: 0; padding-right: 8px; margin-right: 0; }

	.ep-promises__list { grid-template-columns: repeat(2, 1fr); }
	.ep-promise:nth-child(3) { border-left: 0; }
	.ep-promise:nth-child(n+3) { border-top: 1px solid var(--line); }

	.ep-appgrid { grid-template-columns: 1fr; }
	.ep-compgrid { grid-template-columns: repeat(2, 1fr); }
	.ep-components__head { flex-direction: column; align-items: flex-start; gap: 10px; }

	.ep-cta__in { flex-direction: column; align-items: flex-start; }
	.ep-stat { flex: 1 1 100%; border-left: 0; padding-inline: 0; }

	body.ep-has-stickybar { padding-bottom: 58px; }
	body.ep-has-stickybar .ep-stickybar { display: block; }

	/* The header CTA has nowhere to go beside a logo and a tagline. It is in
	   the drawer and on the bar along the bottom, so the header drops it
	   rather than pushing the page sideways. */
	.ep-header__act { display: none; }
	.ep-brand__tag { font-size: .72rem; }

	/* Tap targets: a 21px line of text is a miss on a phone. */
	.ep-footer ul a,
	.ep-drawer__foot a,
	.ep-footer__bottom a {
		display: flex;
		align-items: center;
		min-height: 40px;
	}
	.ep-footer__contact li { min-height: 40px; }
	.ep-help__list a { min-height: 40px; display: flex; align-items: center; }
	.ep-textlink { min-height: 40px; }
}

@media (max-width: 640px) {
	.ep-grid--3, .ep-grid--4, .ep-grid--5 { grid-template-columns: 1fr; }
	.ep-grid--2 { grid-template-columns: 1fr; }
	.ep-steps { grid-template-columns: 1fr; }
	.ep-featlist { grid-template-columns: 1fr; }
	.ep-fields { grid-template-columns: 1fr; }
	.ep-field--half { grid-column: 1 / -1; }
	.ep-picks { grid-template-columns: repeat(2, 1fr); }
	.ep-footer__grid { grid-template-columns: 1fr; }
	.ep-btns .ep-btn { width: 100%; }
	.ep-listrow__media { width: 86px; height: 64px; }
	.ep-wide__media { max-width: 116px; }
	.ep-footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
	.ep-picks { grid-template-columns: 1fr; }
	.ep-pick { flex-direction: row; align-items: center; }
	.ep-pick__media { width: 84px; flex: none; aspect-ratio: 1; }
	.ep-usp { flex: 1 1 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   THE ELEMENTOR EDITOR CANVAS

   Inside the editor's preview iframe nothing may sit over the canvas. The
   phone bar is fixed to the bottom and the header sticks to the top, and at
   the narrow widths the editor previews at, both land on the widget the
   client is trying to drag. They are chrome, not content, so they stand down
   while the page is being built — the front end is unaffected. (The header
   also stops floating over the hero while editing; that is decided in
   ep_page_opens_with_hero(), so no transparent-header rule ever applies.)

   Last in the file on purpose: the phone bar is switched on inside the
   860px query above with the same specificity, so this has to come after.
   ════════════════════════════════════════════════════════════════════ */

body.ep-editing .ep-stickybar { display: none; }
body.ep-editing.ep-has-stickybar { padding-bottom: 0; }
body.ep-editing .ep-headwrap.is-sticky { position: relative; }