/**
 * El Padrino Bail Bonds — Design System
 * ---------------------------------------------------------------------------
 * A presentation layer over the existing ACF modules. It changes ONLY how
 * content is presented: no copy, heading levels, links, forms or metadata
 * are touched. Loaded after style.css and scoped to `body.ep`.
 *
 *   01 Tokens               07 Section headers
 *   02 Base & typography    08 Content modules
 *   03 Layout & rhythm      09 Process timeline
 *   04 Buttons & links      10 Forms, popup, FAQs
 *   05 Header & navigation  11 Footer & mobile contact bar
 *   06 Heroes               12 Motion & reduced motion
 */

/* ── 01 Tokens ───────────────────────────────────────────────────────────── */
:root {
	/* Colour — black / charcoal / white, signature red for emphasis. */
	--ep-black: #050505;
	--ep-ink: #0b0c0d;
	--ep-charcoal: #111214;
	--ep-charcoal-2: #17191c;
	--ep-charcoal-3: #202328;
	--ep-line: rgba(255, 255, 255, 0.09);
	--ep-line-2: rgba(255, 255, 255, 0.18);
	--ep-white: #ffffff;
	--ep-text: #f4f4f2;
	--ep-mute: rgba(244, 244, 242, 0.7);
	--ep-dim: rgba(244, 244, 242, 0.5);
	/* Brand accent: El Padrino green (logo). Red is reserved for urgency
	   (call buttons, call pill, live-agent dot). */
	--ep-green: #01ad6f;
	--ep-green-2: #1fc98a;
	--ep-green-deep: #00875a;
	--ep-green-soft: rgba(1, 173, 111, 0.12);
	--ep-accent: var(--ep-green);
	--ep-accent-2: var(--ep-green-2);
	--ep-accent-soft: var(--ep-green-soft);
	--ep-red: #f43e2e;
	--ep-red-2: #ff5a4a;
	--ep-red-deep: #b9271b;
	/* Fill for red surfaces that carry white text (buttons, call pill): the
	   brand red, deepened just enough for 4.5:1 contrast. */
	--ep-red-fill: #d6311f;
	--ep-red-soft: rgba(1, 173, 111, 0.12);

	/* Type — the brand pair (matches the logo): Oswald + Open Sans. */
	--ep-display: "Oswald", "Oswald Fallback", "Arial Narrow", sans-serif;
	--ep-body: "Open Sans", "Open Sans Fallback", Arial, sans-serif;
	--ep-fs-body: 1.0625rem;      /* 17px */
	--ep-lh-body: 1.7;
	--ep-fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	--ep-fs-h1: clamp(2.5rem, 1.55rem + 3.6vw, 5rem);
	--ep-fs-h2: clamp(2rem, 1.45rem + 2vw, 3.375rem);
	--ep-fs-h3: clamp(1.3rem, 1.15rem + 0.5vw, 1.625rem);
	--ep-fs-eyebrow: 0.8125rem;
	--ep-tr-tight: -0.012em;

	/* Layout */
	--ep-content: 1280px;
	--ep-gutter: 32px;
	--ep-measure: 40rem;           /* comfortable reading width */
	--ep-space: 3.75rem;           /* section rhythm: 60px top and bottom, every section */
	--ep-space-sm: clamp(3rem, 2.4rem + 2.4vw, 4.5rem);
	--ep-gap-head: clamp(2.5rem, 2rem + 2vw, 4rem);     /* header → content */

	/* Shape */
	--ep-radius: 18px;
	--ep-radius-sm: 10px;
	--ep-pill: 999px;

	/* Motion */
	--ep-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--ep-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
	--ep-fast: 0.3s;
	--ep-med: 0.6s;
	--ep-slow: 0.9s;

	/* Image grade — one treatment everywhere. */
	--ep-grade: saturate(0.82) contrast(1.06) brightness(0.92);
}

/* ── 02 Base & typography ────────────────────────────────────────────────── */
body.ep {
	background: var(--ep-black);
	color: var(--ep-text);
	font-family: var(--ep-body);
	font-size: var(--ep-fs-body);
	line-height: var(--ep-lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body.ep ::selection {
	background: var(--ep-accent);
	color: #fff;
}

body.ep .font-primary { font-family: var(--ep-body); }
body.ep .font-secondary,
body.ep h1, body.ep h2, body.ep h3, body.ep h4 { font-family: var(--ep-display); }

/* Headings keep their own capitalisation — no forced uppercase. */
body.ep main h1 {
	font-size: var(--ep-fs-h1) !important;
	font-weight: 500 !important;
	line-height: 1.04 !important;
	letter-spacing: var(--ep-tr-tight) !important;
	color: var(--ep-white) !important;
	text-wrap: balance;
}

body.ep main h2 {
	font-size: var(--ep-fs-h2) !important;
	font-weight: 500 !important;
	line-height: 1.08 !important;
	letter-spacing: var(--ep-tr-tight) !important;
	color: var(--ep-white) !important;
	text-wrap: balance;
}

body.ep main h3,
body.ep main h3 + *,
body.ep main [class*="text-2xl"].font-secondary {
	letter-spacing: -0.005em;
}

body.ep main h3 {
	font-size: var(--ep-fs-h3) !important;
	font-weight: 500 !important;
	line-height: 1.25 !important;
	color: var(--ep-white) !important;
}

/* The highlighted word modules wrap in a span (`text-transparent` gradient)
   becomes solid red — strategic emphasis instead of a faded gradient. */
body.ep main h1 span,
body.ep main h2 span.text-transparent,
body.ep main h2 span[class*="bg-clip-text"],
body.ep main .ss-heading-gradient span {
	color: var(--ep-accent) !important;
	-webkit-text-fill-color: var(--ep-accent) !important;
	background: none !important;
}

body.ep main .ss-heading-gradient {
	-webkit-text-fill-color: currentColor !important;
	background: none !important;
}

body.ep main p,
body.ep main li > span.font-primary,
body.ep main .font-primary.text-base {
	font-size: var(--ep-fs-body);
	line-height: var(--ep-lh-body) !important;
}

body.ep main .text-white\/60,
body.ep main .text-white\/50 { color: var(--ep-mute) !important; }
body.ep .text-cream-200,
body.ep .text-cream-100 { color: var(--ep-white) !important; }
body.ep main .text-brand-200,
body.ep main .text-tertiary { color: var(--ep-accent-2) !important; }

/* Eyebrow: [hairline][label] — kept, refined: red rule, quieter tracking. */
body.ep main .flex.items-center.gap-2 > span.h-px:first-child,
body.ep main .flex.items-center.justify-center.gap-2 > span.h-px:first-child {
	width: 2rem !important;
	height: 2px !important;
	background: var(--ep-accent) !important;
	opacity: 1 !important;
}

body.ep main .flex.items-center.gap-2 > span.h-px + span,
body.ep main .flex.items-center.justify-center.gap-2 > span.h-px + span {
	font-family: var(--ep-body) !important;
	font-size: var(--ep-fs-eyebrow) !important;
	font-weight: 600;
	letter-spacing: 0.14em !important;
	line-height: 1.4 !important;
	color: var(--ep-mute) !important;
}

/* ── 03 Layout & rhythm ──────────────────────────────────────────────────── */
body.ep main > section { position: relative; }

/* Two surfaces only — black and charcoal — alternating, no hard dividers. */
body.ep main > section.bg-secondary,
body.ep main > section.bg-black,
body.ep main > section[class*="bg-[#"],
body.ep main > section.bg-primary { background-color: var(--ep-black) !important; }

body.ep main > section:nth-of-type(even):not(#ss-hero-banner):not(#ss-affordable-payment-plans):not(#ss-location-cta-section) {
	background-color: var(--ep-charcoal) !important;
}

/* One vertical rhythm for every standard section. */
body.ep main > section:not(#ss-hero-banner) {
	padding-top: var(--ep-space) !important;
	padding-bottom: var(--ep-space) !important;
}

/* Nothing inside a section adds stray space at its edges. */
body.ep main > section:not(#ss-hero-banner) > .container > :last-child,
body.ep main > section:not(#ss-hero-banner) > .container > :last-child > :last-child { margin-bottom: 0 !important; }
body.ep main > section:not(#ss-hero-banner) > .container > :first-child { margin-top: 0 !important; }

body.ep main > section[class*="pt-12"]:not([class*="py-"]) { padding-top: var(--ep-space) !important; }
body.ep main > section[class*="pb-12"]:not([class*="py-"]) { padding-bottom: var(--ep-space) !important; }

body.ep .rounded-lg,
body.ep .rounded-xl { border-radius: var(--ep-radius) !important; }

/* Photography: one grade, soft radius, gentle zoom on hover. */
body.ep main img:not(.ss-icon):not([src$=".svg"]) {
	filter: var(--ep-grade);
	transition: transform var(--ep-slow) var(--ep-ease), filter var(--ep-med) var(--ep-ease);
}

/* ── 04 Buttons & links ──────────────────────────────────────────────────── */
/* Primary: solid red pill. Secondary: white outline pill. */
body.ep .btn-cta,
body.ep .btn,
body.ep .ss-affordable-payment-plans__btn,
body.ep .ss-hero-banner__btn-outline,
body.ep .gform_wrapper .gform_button,
body.ep .gform_wrapper input[type="submit"] {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 3.25rem;
	padding: 0.85rem 1.6rem !important;
	border-radius: var(--ep-pill) !important;
	font-family: var(--ep-body) !important;
	font-size: 0.975rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color var(--ep-fast) var(--ep-ease), color var(--ep-fast) var(--ep-ease), border-color var(--ep-fast) var(--ep-ease), transform var(--ep-fast) var(--ep-ease), box-shadow var(--ep-fast) var(--ep-ease);
}

body.ep .btn-cta,
body.ep .btn,
body.ep .ss-affordable-payment-plans__btn,
body.ep .gform_wrapper .gform_button,
body.ep .gform_wrapper input[type="submit"] {
	background: var(--ep-red-fill) !important;
	color: #fff !important;
	border: 1px solid var(--ep-red-fill) !important;
	box-shadow: 0 10px 30px -12px rgba(244, 62, 46, 0.7);
}

body.ep .btn-cta svg,
body.ep .btn-cta svg path { fill: currentColor; }

body.ep .btn-cta:hover,
body.ep .btn:hover,
body.ep .ss-affordable-payment-plans__btn:hover,
body.ep .gform_wrapper .gform_button:hover,
body.ep .gform_wrapper input[type="submit"]:hover {
	background: var(--ep-red-deep) !important;
	border-color: var(--ep-red-deep) !important;
	transform: translateY(-2px);
	box-shadow: 0 16px 36px -14px rgba(244, 62, 46, 0.85);
}

body.ep .btn-cta:hover .btn-cta__icon,
body.ep a[href^="tel:"]:hover .btn-cta__icon { animation: ep-ring 0.7s ease-in-out; }

@keyframes ep-ring {
	0%, 100% { transform: rotate(0); }
	20% { transform: rotate(-14deg); }
	40% { transform: rotate(12deg); }
	60% { transform: rotate(-8deg); }
	80% { transform: rotate(5deg); }
}

body.ep .ss-hero-banner__btn-outline {
	background: transparent !important;
	color: var(--ep-white) !important;
	border: 1px solid var(--ep-line-2) !important;
	box-shadow: none;
}

body.ep .ss-hero-banner__btn-outline:hover {
	background: var(--ep-white) !important;
	color: var(--ep-black) !important;
	border-color: var(--ep-white) !important;
	transform: translateY(-2px);
}

body.ep .ss-hero-banner__btn-outline svg path { fill: currentColor; }

/* Text links in body copy: thin underline that sweeps to red. */
body.ep main p a:not([class*="btn"]),
body.ep main .accordionBody a,
body.ep .entry-content a {
	color: var(--ep-white) !important;
	text-decoration: none !important;
	background: linear-gradient(var(--ep-accent), var(--ep-accent)) 0 100% / 0 1px no-repeat,
		linear-gradient(var(--ep-line-2), var(--ep-line-2)) 0 100% / 100% 1px no-repeat;
	transition: background-size var(--ep-med) var(--ep-ease), color var(--ep-fast);
}

body.ep main p a:not([class*="btn"]):hover,
body.ep main .accordionBody a:hover,
body.ep .entry-content a:hover {
	background-size: 100% 1px, 100% 1px;
	color: var(--ep-accent-2) !important;
}

body.ep a:focus-visible,
body.ep button:focus-visible,
body.ep input:focus-visible,
body.ep select:focus-visible,
body.ep textarea:focus-visible {
	outline: 2px solid var(--ep-accent-2);
	outline-offset: 3px;
}

/* ── 05 Header & navigation ──────────────────────────────────────────────── */
body.ep .site-header .header-scrim {
	background: linear-gradient(180deg, rgba(5, 5, 5, 0.9), rgba(5, 5, 5, 0));
	transition: background-color var(--ep-med) var(--ep-ease), box-shadow var(--ep-med);
}

body.ep .site-header.stickyHeader { box-shadow: none; }

body.ep .site-header.stickyHeader .header-scrim {
	background: rgba(11, 12, 13, 0.86);
	-webkit-backdrop-filter: blur(14px) saturate(130%);
	backdrop-filter: blur(14px) saturate(130%);
	box-shadow: 0 1px 0 var(--ep-line);
}

body.ep .site-header .site-nav { transition: padding var(--ep-med) var(--ep-ease); }
body.ep .site-header.stickyHeader .site-nav { padding-top: 0.6rem !important; padding-bottom: 0.6rem !important; }

/* Lighter navigation: normal case, no wide tracking, calmer weight. */
body.ep .site-header .navbar-nav { gap: clamp(1.25rem, 2vw, 2.25rem) !important; }

body.ep .site-header .navbar-nav .nav-link {
	position: relative;
	font-family: var(--ep-body) !important;
	font-size: 0.95rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.005em !important;
	text-transform: none !important;
	color: rgba(244, 244, 242, 0.78) !important;
	transition: color var(--ep-fast) var(--ep-ease);
}

body.ep .site-header .navbar-nav .nav-link:hover,
body.ep .site-header .navbar-nav > li:hover > .nav-link { color: #fff !important; }

/* Underline grows from the left on hover; active page keeps a red bar. */
@media (min-width: 1200px) {
	body.ep .site-header .navbar-nav > li > .nav-link::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -6px;
		height: 2px;
		border: 0 !important;
		background: var(--ep-white);
		transform: scaleX(0);
		transform-origin: right;
		transition: transform var(--ep-med) var(--ep-ease);
	}

	body.ep .site-header .navbar-nav > li:hover > .nav-link::after,
	body.ep .site-header .navbar-nav > li > .nav-link:focus-visible::after {
		transform: scaleX(1);
		transform-origin: left;
	}

	body.ep .site-header .navbar-nav > .current-menu-item > .nav-link,
	body.ep .site-header .navbar-nav > .current-menu-ancestor > .nav-link,
	body.ep .site-header .navbar-nav > .current_page_parent > .nav-link { color: #fff !important; }

	body.ep .site-header .navbar-nav > .current-menu-item > .nav-link::after,
	body.ep .site-header .navbar-nav > .current-menu-ancestor > .nav-link::after,
	body.ep .site-header .navbar-nav > .current_page_parent > .nav-link::after {
		background: var(--ep-accent);
		transform: scaleX(1);
	}

	/* Dropdown: soft panel, generous rows, red rail on hover. */
	body.ep .site-header .menu-item .dropdown-menu {
		background: rgba(17, 18, 20, 0.97) !important;
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
		border: 1px solid var(--ep-line) !important;
		border-radius: 14px !important;
		box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7) !important;
		padding: 0.5rem !important;
		min-width: 17rem;
	}
}

body.ep .site-header .menu-item .dropdown-menu .dropdown-item {
	position: relative;
	font-family: var(--ep-body) !important;
	font-size: 0.925rem !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--ep-mute) !important;
	background: transparent !important;
	border-radius: 8px;
	transition: color var(--ep-fast), background-color var(--ep-fast), padding-left var(--ep-med) var(--ep-ease) !important;
}

body.ep .site-header .menu-item .dropdown-menu .dropdown-item:hover,
body.ep .site-header .menu-item .dropdown-menu .dropdown-item:focus-visible {
	color: #fff !important;
	background: rgba(255, 255, 255, 0.05) !important;
	padding-left: 1.6rem !important;
	box-shadow: inset 2px 0 0 var(--ep-accent);
}

/* Phone stays prominent: red pill with the number. */
body.ep .site-header .btn-cta {
	min-height: 2.9rem;
	padding: 0.65rem 1.25rem !important;
	font-size: 0.95rem !important;
}

/* Logo unchanged — only a gentle lift on hover. */
body.ep .site-header .navbar-brand { transition: transform var(--ep-med) var(--ep-ease), padding var(--ep-med) var(--ep-ease); }
body.ep .site-header .navbar-brand:hover { transform: translateY(-1px) scale(1.02); }

@media (max-width: 1199.98px) {
	body.ep .site-header .navbar-collapse {
		background: var(--ep-charcoal) !important;
		border-left: 1px solid var(--ep-line);
	}

	body.ep .site-header .navbar-collapse .navbar-nav > li > .nav-link {
		font-family: var(--ep-display) !important;
		font-size: 1.6rem !important;
		font-weight: 500 !important;
		color: #fff !important;
		padding-top: 0.7rem;
		padding-bottom: 0.7rem;
		border-bottom: 1px solid var(--ep-line);
	}
}

/* ── 06 Heroes ───────────────────────────────────────────────────────────────
   Editorial split. Copy sits on solid charcoal (always readable, in its
   original order); the photograph or video is a framed, layered panel on
   the right instead of a dark full-bleed background behind the text. */
body.ep #ss-hero-banner {
	background: var(--ep-charcoal) !important;
	overflow: hidden;
	min-height: 0;
}

body.ep #ss-hero-banner > .container {
	position: relative;
	z-index: 2;
	padding-top: clamp(8.5rem, 6rem + 6vw, 11.5rem) !important;
	padding-bottom: clamp(4rem, 3rem + 4vw, 7rem) !important;
}

body.ep #ss-hero-banner h1 { max-width: 13ch !important; margin-top: 0.4rem; }
body.ep #ss-hero-banner.ss-hero-banner--tall h1 { max-width: 12ch !important; }

body.ep #ss-hero-banner h1 + p,
body.ep #ss-hero-banner p.ss-animate {
	max-width: 34rem !important;
	font-size: var(--ep-fs-lead) !important;
	line-height: 1.65 !important;
	color: var(--ep-mute) !important;
	margin-top: 1.4rem !important;
}

/* Location eyebrow row in the home hero. */
body.ep #ss-hero-banner .ss-animate.mb-4 ul .font-secondary {
	font-family: var(--ep-body) !important;
	font-size: 0.8125rem !important;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--ep-mute) !important;
}

body.ep #ss-hero-banner .ss-animate.mb-4 > span.h-px { background: var(--ep-accent) !important; height: 2px !important; width: 2rem !important; }
body.ep #ss-hero-banner .ss-animate.mb-4 ul .rounded-full { background: var(--ep-accent) !important; }

body.ep #ss-hero-banner .ss-animate.mt-6 { margin-top: 2.25rem !important; gap: 0.75rem !important; }

@media (min-width: 992px) {
	/* One band shared by copy and media: both sit between the same top and
	   bottom lines and inside the same container gutters, so the split is
	   balanced and vertically centred. */
	body.ep #ss-hero-banner {
		--ep-hero-top: 8.5rem;
		--ep-hero-bottom: 4.5rem;
		--ep-hero-pad: 3rem;
		--ep-hero-edge: max(0px, (100% - 992px) / 2);
		display: flex !important;
		flex-direction: row !important;
		align-items: stretch !important;
		min-height: min(54rem, 100svh);
	}

	body.ep #ss-hero-banner > .container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-self: stretch;
		flex: 1 1 auto;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-top: var(--ep-hero-top) !important;
		padding-bottom: var(--ep-hero-bottom) !important;
	}

	body.ep #ss-hero-banner > .container > *,
	body.ep #ss-hero-banner > .container > p.ss-animate { max-width: min(44%, 34rem) !important; }

	/* Media panel: right column, aligned to the container's right gutter. */
	body.ep #ss-hero-banner > .ss-animate.absolute {
		z-index: 1;
		top: var(--ep-hero-top) !important;
		bottom: var(--ep-hero-bottom) !important;
		right: calc(var(--ep-hero-edge) + var(--ep-hero-pad)) !important;
		left: calc(var(--ep-hero-edge) + (100% - 2 * var(--ep-hero-edge)) * 0.52) !important;
		width: auto !important;
		border-radius: var(--ep-radius);
		overflow: hidden;
		opacity: 1 !important;
		transform: none !important;
	}

	/* Layered accent: the same offset red frame used on split modules. */
	body.ep #ss-hero-banner::before {
		content: "";
		position: absolute;
		z-index: 0;
		top: calc(var(--ep-hero-top) + 1.25rem);
		bottom: calc(var(--ep-hero-bottom) - 1.25rem);
		right: calc(var(--ep-hero-edge) + var(--ep-hero-pad) - 1.25rem);
		left: calc(var(--ep-hero-edge) + (100% - 2 * var(--ep-hero-edge)) * 0.52 + 1.25rem);
		border: 2px solid var(--ep-accent);
		border-radius: var(--ep-radius);
		opacity: 0.85;
		pointer-events: none;
	}
}
@media (min-width: 1200px) { body.ep #ss-hero-banner { --ep-hero-pad: 4rem; --ep-hero-edge: max(0px, (100% - 1200px) / 2); } }
@media (min-width: 1440px) { body.ep #ss-hero-banner { --ep-hero-pad: 5rem; --ep-hero-edge: max(0px, (100% - 1440px) / 2); } }

@media (max-width: 991.98px) {
	/* Stack: copy first, media panel below — text never sits on the image. */
	body.ep #ss-hero-banner { display: flex; flex-direction: column; }
	body.ep #ss-hero-banner > .container { order: 1; padding-bottom: 2.5rem !important; }
	body.ep #ss-hero-banner > .ss-animate.absolute {
		position: relative !important;
		order: 2;
		inset: auto !important;
		height: 62vw;
		max-height: 26rem;
		margin: 0 1rem 2.5rem;
		border-radius: var(--ep-radius);
		overflow: hidden;
	}
}

/* The panel's imagery: lighter treatment — no heavy blackout overlay. */
body.ep #ss-hero-banner > .ss-animate.absolute img,
body.ep #ss-hero-banner > .ss-animate.absolute video {
	filter: var(--ep-grade);
	transform: scale(1.04);
}

body.ep #ss-hero-banner > .ss-animate.absolute > div[class*="bg-gradient"] {
	background: linear-gradient(200deg, rgba(5, 5, 5, 0) 45%, rgba(5, 5, 5, 0.45) 100%) !important;
}

body.ep #ss-hero-banner .ss-hero-banner__chat-fab {
	border-radius: var(--ep-pill) !important;
	background: var(--ep-red-fill) !important;
}

/* ── 07 Section headers ──────────────────────────────────────────────────────
   Centred header stacks become left-aligned editorial headers on the shared
   grid: heading on the left, intro paragraph on the right (desktop). */
body.ep main > section .mx-auto.text-center:not(table *):not(main > section > div),
body.ep main > section div.text-center.items-center:not(#ss-stats-bar *):not(.ss-filmstrip *):not(main > section > div.mx-auto) {
	text-align: left !important;
	align-items: flex-start !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.ep main > section .justify-center:not(.btn-cta):not(.slick-arrow):not(button):not(#ss-stats-bar *):not([class*="rounded-full"]) { justify-content: flex-start !important; }
body.ep main > section h2.mx-auto,
body.ep main > section .text-center > h2 { margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; }

body.ep main > section .container > div[class*="mb-8"]:has(> h2),
body.ep main > section .container > div[class*="mb-10"]:has(> h2),
body.ep main > section > div[class*="mb-8"]:has(> h2) { margin-bottom: var(--ep-gap-head) !important; }

/* Section headers stack: eyebrow, heading and intro share one left edge
   and the intro sits directly under its heading at a reading width. */
body.ep main > section .container > div:has(> h2 + p) > p { max-width: var(--ep-measure) !important; margin-left: 0 !important; margin-right: 0 !important; }

/* Headers that live outside .container (e.g. the filmstrip, which runs
   edge to edge) get the container's exact width and gutters, so every
   heading on the site shares one left edge. */
body.ep main > section > div.mx-auto:not(.container) {
	width: 100%;
	max-width: 1440px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1rem !important;
	padding-right: 1rem !important;
}
@media (min-width: 576px)  { body.ep main > section > div.mx-auto:not(.container) { max-width: 576px !important;  padding-left: 1.5rem !important; padding-right: 1.5rem !important; } }
@media (min-width: 768px)  { body.ep main > section > div.mx-auto:not(.container) { max-width: 768px !important;  padding-left: 2rem !important;   padding-right: 2rem !important; } }
@media (min-width: 992px)  { body.ep main > section > div.mx-auto:not(.container) { max-width: 992px !important;  padding-left: 3rem !important;   padding-right: 3rem !important; } }
@media (min-width: 1200px) { body.ep main > section > div.mx-auto:not(.container) { max-width: 1200px !important; padding-left: 4rem !important;   padding-right: 4rem !important; } }
@media (min-width: 1440px) { body.ep main > section > div.mx-auto:not(.container) { max-width: 1440px !important; padding-left: 5rem !important;   padding-right: 5rem !important; } }

/* Long highlights stay white so red remains a strategic accent. */
body.ep main h2 span.ep-hl-long,
body.ep main h1 span.ep-hl-long {
	color: var(--ep-white) !important;
	-webkit-text-fill-color: var(--ep-white) !important;
}

/* Left-align every remaining centred heading/paragraph pair. */
body.ep main > section h2.text-center,
body.ep main > section .text-center > p { text-align: left !important; }

/* Legacy brand-green fills (step discs, badges) move to the system. */
body.ep main :not(section).bg-primary {
	background: var(--ep-black) !important;
	border-color: var(--ep-accent) !important;
	color: #fff !important;
}
body.ep main .border-primary { border-color: var(--ep-accent) !important; }
body.ep #ss-page-content-sections ol > li { border-radius: var(--ep-radius-sm); border-color: var(--ep-line) !important; background: var(--ep-charcoal-2); transition: border-color var(--ep-fast), transform var(--ep-med) var(--ep-ease); }
body.ep #ss-page-content-sections ol > li:hover { border-color: var(--ep-line-2) !important; transform: translateX(4px); }
body.ep #ss-page-content-sections ol > li :not(section).bg-primary,
body.ep #ss-page-content-sections ol > li [class*="rounded-full"] { border: 1px solid var(--ep-accent) !important; background: var(--ep-black) !important; font-family: var(--ep-display); }

/* ── 08 Content modules ──────────────────────────────────────────────────── */
/* Stats: editorial numerals with a red marker, hairline separators. */
body.ep #ss-stats-bar { background: var(--ep-black) !important; }
body.ep #ss-stats-bar .grid > div { border-color: var(--ep-line) !important; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
body.ep #ss-stats-bar .font-secondary { font-weight: 500 !important; font-size: clamp(2.6rem, 2rem + 2vw, 3.75rem) !important; letter-spacing: -0.02em !important; color: #fff !important; }
body.ep #ss-stats-bar .font-secondary .ss-icon { color: var(--ep-accent) !important; }
body.ep #ss-stats-bar .font-primary { font-size: 0.875rem !important; letter-spacing: 0.02em !important; color: var(--ep-mute) !important; }

/* Panels replace bordered boxes: soft charcoal, hairline, red accent. */
body.ep main ul.grid > li > a.group,
body.ep main ul.grid > li > article,
body.ep main ul.grid > li > div:not(.slick-track),
body.ep main #ss-why-choose-us article,
body.ep main #ss-pillars-of-service li > *,
body.ep main #ss-commitment li > *,
body.ep main #ss-essential-tools li > *,
body.ep main #ss-legal-guides li > * {
	position: relative;
	overflow: hidden;
	background: var(--ep-charcoal-2) !important;
	border: 1px solid var(--ep-line) !important;
	border-radius: var(--ep-radius) !important;
	box-shadow: none !important;
	transition: transform var(--ep-med) var(--ep-ease), border-color var(--ep-med) var(--ep-ease), background-color var(--ep-med) var(--ep-ease);
}

body.ep main > section:nth-of-type(even) ul.grid > li > :is(a, article, div:not(.slick-track)) { background: var(--ep-charcoal-3) !important; }

body.ep main ul.grid > li > :is(a, article)::before,
body.ep main #ss-why-choose-us article::before {
	content: "";
	position: absolute;
	left: 1.5rem;
	right: 1.5rem;
	top: 0;
	height: 2px;
	background: var(--ep-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ep-med) var(--ep-ease);
	z-index: 2;
}

body.ep main ul.grid > li > :is(a, article):hover,
body.ep main #ss-why-choose-us article:hover {
	transform: translateY(-4px);
	border-color: var(--ep-line-2) !important;
}

body.ep main ul.grid > li > :is(a, article):hover::before,
body.ep main #ss-why-choose-us article:hover::before { transform: scaleX(1); }

body.ep main ul.grid > li > a:hover h3 { color: #fff !important; }
body.ep main .ss-icon { color: var(--ep-accent) !important; }
body.ep main ul.grid > li > a:hover .ss-icon,
body.ep main ul.grid > li > article:hover .ss-icon { color: #fff !important; }

/* Why-choose cards: let the background photograph read through. */
body.ep #ss-why-choose-us article img.absolute { opacity: 0.32 !important; filter: var(--ep-grade); }
body.ep #ss-why-choose-us article > div[class*="from-primary"] { background: linear-gradient(200deg, rgba(1, 173, 111, 0.08), rgba(1, 173, 111, 0.32)) !important; }
body.ep #ss-why-choose-us article > div[class*="from-[#0f0f0f]"] { background: linear-gradient(90deg, rgba(17, 18, 20, 0.95), rgba(17, 18, 20, 0.35)) !important; }
body.ep main ul.grid { gap: 1.25rem !important; }

/* Split text/image modules: framed image with offset red accent edge. */
body.ep main :is(#ss-service-intro-text-image, #ss-service-intro-text-image-2, #ss-core-mission, #ss-meet-the-team) [class*="aspect-"],
body.ep main #ss-page-content-sections [class*="aspect-"] {
	position: relative;
	overflow: visible !important;
	border: 0 !important;
}

body.ep main :is(#ss-service-intro-text-image, #ss-service-intro-text-image-2, #ss-meet-the-team, #ss-page-content-sections) [class*="aspect-"] img {
	border-radius: var(--ep-radius);
	position: relative;
	z-index: 1;
}

body.ep main :is(#ss-service-intro-text-image, #ss-service-intro-text-image-2, #ss-meet-the-team, #ss-page-content-sections) [class*="aspect-"]::before {
	content: "";
	position: absolute;
	inset: 1.25rem -1.25rem -1.25rem 1.25rem;
	border: 1px solid rgba(1, 173, 111, 0.55);
	border-radius: var(--ep-radius);
	z-index: 0;
	transition: inset var(--ep-med) var(--ep-ease);
}

body.ep main :is(#ss-service-intro-text-image, #ss-service-intro-text-image-2, #ss-meet-the-team, #ss-page-content-sections) [class*="aspect-"]:hover::before { inset: 0.75rem -0.75rem -0.75rem 0.75rem; }

body.ep main :is(#ss-service-intro-text-image, #ss-service-intro-text-image-2) .flex.min-w-0.flex-col { justify-content: center; }
body.ep main :is(#ss-service-intro-text-image, #ss-service-intro-text-image-2) .flex.flex-col.gap-3 { gap: 1.1rem !important; max-width: var(--ep-measure); }

/* Filmstrip: rounded tiles, warmer grade, caption on a soft scrim. */
body.ep .ss-filmstrip { gap: 0.75rem !important; }
body.ep .ss-filmstrip__tile figure { border-radius: var(--ep-radius); }
body.ep .ss-filmstrip__img { filter: var(--ep-grade) grayscale(0.25) !important; }
body.ep .ss-filmstrip__shade { background: linear-gradient(180deg, transparent, rgba(5, 5, 5, 0.9)) !important; }
body.ep .ss-filmstrip__dim { background: rgba(5, 5, 5, 0.18) !important; }
body.ep .ss-filmstrip__caption { text-align: left !important; }

/* How It Works: editorial numerals and a red progress spine. */
body.ep #ss-how-it-works ol > li > span.rounded-full,
body.ep #ss-how-it-works ol > li > span[class*="rounded-full"] {
	width: 4.5rem !important;
	height: 4.5rem !important;
	background: var(--ep-black) !important;
	border: 1px solid var(--ep-accent) !important;
	color: #fff !important;
	font-family: var(--ep-display);
	font-weight: 500;
	font-size: 1.6rem !important;
	box-shadow: 0 0 0 8px var(--ep-black);
}

body.ep #ss-how-it-works .relative > span.pointer-events-none { background: var(--ep-line-2) !important; overflow: hidden; }
body.ep #ss-how-it-works .relative > span.pointer-events-none::after { content: ""; position: absolute; inset: 0; background: var(--ep-accent); transform-origin: top; transform: scaleY(var(--ep-prog, 0)); }
body.ep #ss-how-it-works ol img { border-radius: var(--ep-radius); }

/* Testimonials: rating card in charcoal with a red edge. */
body.ep main article.bg-cream-100 { background: var(--ep-charcoal-2) !important; border: 1px solid var(--ep-line) !important; border-radius: var(--ep-radius) !important; box-shadow: inset 3px 0 0 var(--ep-accent); }
body.ep main article.bg-cream-100 [class*="text-primary"] { color: #fff !important; -webkit-text-fill-color: currentColor; }
body.ep main article.bg-cream-100 .ss-icon { color: #fbbc04 !important; }
body.ep .ss-testimonials__slide > div { background: var(--ep-charcoal-2) !important; border-color: var(--ep-line) !important; border-radius: var(--ep-radius) !important; }

/* Area chips & map. */
body.ep main section ul[class*="lg:flex-wrap"] > li > :is(a, span),
body.ep main .ss-aws-tab {
	border-radius: var(--ep-pill) !important;
	background: transparent !important;
	border: 1px solid var(--ep-line-2) !important;
	font-family: var(--ep-body) !important;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: none !important;
	color: var(--ep-text) !important;
	transition: border-color var(--ep-fast), background-color var(--ep-fast), color var(--ep-fast);
}

body.ep main section ul[class*="lg:flex-wrap"] > li > a:hover,
body.ep main .ss-aws-tab:hover,
body.ep main .ss-aws-tab.active { border-color: var(--ep-accent) !important; background: var(--ep-accent-soft) !important; color: #fff !important; }

body.ep .ss-areas-map { border-radius: var(--ep-radius); background: var(--ep-charcoal) !important; }

/* Full-bleed CTA bands: lighter scrim so the photograph reads. */
body.ep #ss-affordable-payment-plans .bg-black\/80,
body.ep #ss-location-cta-section span.bg-black\/80 { background: linear-gradient(90deg, rgba(5, 5, 5, 0.9) 0%, rgba(5, 5, 5, 0.72) 55%, rgba(5, 5, 5, 0.5) 100%) !important; }
body.ep #ss-affordable-payment-plans img,
body.ep #ss-location-cta-section > img { filter: var(--ep-grade) !important; }
body.ep #ss-affordable-payment-plans .max-w-3xl,
body.ep #ss-location-cta-section .max-w-4xl { max-width: 44rem !important; }
body.ep #ss-affordable-payment-plans h2,
body.ep #ss-location-cta-section h2 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 4rem) !important; }

/* Tables (payment examples). */
body.ep main table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--ep-line); border-radius: var(--ep-radius); overflow: hidden; }
body.ep main table th { background: var(--ep-charcoal-3) !important; font-family: var(--ep-body); font-weight: 600; letter-spacing: 0.02em; color: var(--ep-mute); }
body.ep main table td, body.ep main table th { border-color: var(--ep-line) !important; }
body.ep main table tbody tr { transition: background-color var(--ep-fast); }
body.ep main table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

/* Video tutorials & sliders. */
body.ep .ss-video-tutorials__card { border-radius: var(--ep-radius) !important; border-color: var(--ep-line) !important; background: var(--ep-charcoal-2) !important; }
body.ep .slick-arrow { border-radius: 50% !important; border: 1px solid var(--ep-line-2) !important; background: transparent !important; transition: background-color var(--ep-fast), border-color var(--ep-fast) !important; }
body.ep .slick-arrow:hover { background: var(--ep-accent) !important; border-color: var(--ep-accent) !important; }

/* ── 09 Process timeline (The Process page) ────────────────────────────────
   Heading + intro stay in view on the left; the existing steps become a
   numbered vertical timeline with a red line that fills on scroll. */
body.ep #ss-process-icon-cards > .container > div {
	display: grid !important;
	gap: var(--ep-gap-head) !important;
	align-items: start !important;
}

@media (min-width: 992px) {
	body.ep #ss-process-icon-cards > .container > div { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); column-gap: clamp(3rem, 6vw, 7rem); }
	body.ep #ss-process-icon-cards > .container > div > div:first-child { position: sticky; top: 8rem; }
}

body.ep #ss-process-icon-cards > .container > div > div:first-child p {
	font-size: var(--ep-fs-lead) !important;
	line-height: 1.7 !important;
	color: var(--ep-mute) !important;
	margin-top: 0.75rem;
}

body.ep #ss-process-icon-cards ul {
	counter-reset: ep-step;
	position: relative;
	display: flex !important;
	flex-direction: column;
	gap: 0 !important;
	padding-left: 0;
}

body.ep #ss-process-icon-cards ul::before,
body.ep #ss-process-icon-cards ul::after {
	content: "";
	position: absolute;
	left: 2.25rem;
	top: 2.5rem;
	bottom: 2.5rem;
	width: 2px;
	background: var(--ep-line-2);
}

body.ep #ss-process-icon-cards ul::after {
	background: var(--ep-accent);
	transform-origin: top;
	transform: scaleY(var(--ep-prog, 0));
	transition: transform 0.15s linear;
}

body.ep #ss-process-icon-cards ul > li { counter-increment: ep-step; }

body.ep #ss-process-icon-cards ul > li > article {
	display: grid !important;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	column-gap: clamp(1.5rem, 3vw, 2.75rem);
	row-gap: 0.6rem;
	padding: 2rem 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--ep-line) !important;
	border-radius: 0 !important;
	transform: none !important;
}

body.ep #ss-process-icon-cards ul > li:last-child > article { border-bottom: 0 !important; }
body.ep #ss-process-icon-cards ul > li > article::before { display: none !important; }

/* Editorial number disc sits on the line. */
body.ep #ss-process-icon-cards ul > li > article::after {
	content: counter(ep-step, decimal-leading-zero);
	grid-column: 1;
	grid-row: 1 / span 3;
	align-self: start;
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: var(--ep-black);
	border: 1px solid var(--ep-line-2);
	font-family: var(--ep-display);
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--ep-dim);
	transition: border-color var(--ep-med) var(--ep-ease), color var(--ep-med) var(--ep-ease), background-color var(--ep-med) var(--ep-ease);
}

body.ep #ss-process-icon-cards ul > li.is-active > article::after { border-color: var(--ep-accent); color: #fff; background: var(--ep-accent); }

body.ep #ss-process-icon-cards ul > li > article > * { grid-column: 2; }
body.ep #ss-process-icon-cards ul > li > article .ss-icon { order: -1; width: 2.25rem !important; height: 2.25rem !important; color: var(--ep-accent) !important; }
body.ep #ss-process-icon-cards ul > li > article h3 { font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2rem) !important; }
body.ep #ss-process-icon-cards ul > li > article p { color: var(--ep-mute) !important; max-width: var(--ep-measure); }

/* ── 10 Forms, popup, FAQs ───────────────────────────────────────────────── */
body.ep .ss-case-form,
body.ep main [class*="lg:w-[440px]"] {
	background: var(--ep-charcoal-2) !important;
	border: 1px solid var(--ep-line);
	border-radius: var(--ep-radius) !important;
}

body.ep .gform_wrapper .gfield_label,
body.ep .gform_wrapper label,
body.ep .gform_wrapper legend {
	font-family: var(--ep-body) !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	color: var(--ep-text) !important;
}

body.ep .gform_wrapper input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.ep .gform_wrapper select,
body.ep .gform_wrapper textarea {
	background: var(--ep-black) !important;
	border: 1px solid var(--ep-line-2) !important;
	border-radius: var(--ep-radius-sm) !important;
	color: #fff !important;
	font-family: var(--ep-body) !important;
	font-size: 1rem !important;
	min-height: 3.1rem;
	transition: border-color var(--ep-fast), box-shadow var(--ep-fast) !important;
}

body.ep .gform_wrapper input:focus,
body.ep .gform_wrapper select:focus,
body.ep .gform_wrapper textarea:focus {
	border-color: var(--ep-accent) !important;
	box-shadow: 0 0 0 3px rgba(1, 173, 111, 0.22) !important;
	outline: none !important;
}

body.ep .gform_wrapper [class*="drop"] { border-radius: var(--ep-radius-sm) !important; border-color: var(--ep-line-2) !important; background: rgba(255, 255, 255, 0.02) !important; }

body.ep .ss-upload-popup__panel { background: var(--ep-charcoal) !important; border: 1px solid var(--ep-line) !important; border-radius: var(--ep-radius) !important; }
body.ep .ss-upload-popup::backdrop { background: rgba(5, 5, 5, 0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.ep .ss-upload-popup__close { transition: transform var(--ep-med) var(--ep-ease), color var(--ep-fast); }
body.ep .ss-upload-popup__close:hover { transform: rotate(90deg); color: var(--ep-accent); }

body.ep .accordion-item {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--ep-line) !important;
	border-radius: 0 !important;
}

body.ep main .accordionBtn {
	font-family: var(--ep-display) !important;
	font-weight: 500 !important;
	font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem) !important;
	letter-spacing: -0.005em;
	text-transform: none !important;
	color: #fff !important;
	background: transparent !important;
	transition: color var(--ep-fast);
}

body.ep main .accordionBtn:hover { color: var(--ep-accent-2) !important; }
body.ep main .accordionBody { color: var(--ep-mute); max-width: 48rem; }

body.ep .ss-faq-with-categories__card,
body.ep .ss-faq-with-categories__sidebar > * { background: var(--ep-charcoal-2) !important; border: 1px solid var(--ep-line) !important; border-radius: var(--ep-radius) !important; }

body.ep main a.js-has-smooth-scroll { transition: color var(--ep-fast), padding-left var(--ep-med) var(--ep-ease) !important; }
body.ep main a.js-has-smooth-scroll:hover { color: #fff !important; padding-left: 0.5rem; box-shadow: inset 2px 0 0 var(--ep-accent); }

/* ── 11 Footer & mobile contact bar ──────────────────────────────────────── */
body.ep .site-footer { background: var(--ep-ink) !important; border-top: 1px solid var(--ep-line); }
body.ep .site-footer .ss-footer-heading,
body.ep .site-footer .accordionBtn {
	font-family: var(--ep-display) !important;
	font-size: 1.15rem !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: #fff !important;
}
body.ep .site-footer .ss-footer-bullet,
body.ep .site-footer .rounded-full.bg-primary { background: var(--ep-accent) !important; width: 6px !important; height: 6px !important; transition: width var(--ep-med) var(--ep-ease); }
body.ep .site-footer .ss-footer-rule-v,
body.ep .site-footer .ss-footer-rule-h { background: var(--ep-line) !important; }
body.ep .site-footer a,
body.ep .site-footer address p { color: var(--ep-mute) !important; }
body.ep .site-footer li a { transition: color var(--ep-fast), transform var(--ep-med) var(--ep-ease) !important; }
body.ep .site-footer li:hover a { color: #fff !important; transform: translateX(3px); }
body.ep .site-footer li:hover .ss-footer-bullet { width: 14px !important; }
body.ep .site-footer .ep-footer-logo { display: inline-block; transition: transform var(--ep-med) var(--ep-ease); }
body.ep .site-footer .ep-footer-logo:hover { transform: translateY(-2px); }

/* Mobile: phone always one tap away (uses the existing site phone number). */
.ep-callbar { display: none; }

@media (max-width: 767.98px) {
	body.ep .ep-callbar {
		position: fixed;
		left: 0.75rem;
		right: 0.75rem;
		bottom: 0.75rem;
		z-index: 60;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.6rem;
		min-height: 3.4rem;
		border-radius: var(--ep-pill);
		background: var(--ep-red-fill);
		color: #fff;
		font-family: var(--ep-body);
		font-weight: 600;
		font-size: 1.05rem;
		text-decoration: none;
		box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.8), 0 8px 24px -10px rgba(244, 62, 46, 0.7);
		transform: translateY(140%);
		transition: transform var(--ep-med) var(--ep-ease);
	}

	body.ep .ep-callbar.is-on { transform: none; }
	body.ep .ep-callbar svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
	body.ep .site-footer { padding-bottom: 5rem; }
}

/* ── 12 Motion ───────────────────────────────────────────────────────────── */
/* Scroll reveals — classes added by el-padrino.js only for content that
   starts below the fold, so nothing is hidden if scripts fail. */
body.ep .ep-reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--ep-slow) var(--ep-ease), transform var(--ep-slow) var(--ep-ease); }
body.ep .ep-reveal.is-in { opacity: 1; transform: none; }
body.ep .ep-reveal-img { clip-path: inset(8% 0 8% 0 round var(--ep-radius)); transition: clip-path 1.1s var(--ep-ease); }
body.ep .ep-reveal-img.is-in { clip-path: inset(0 0 0 0 round var(--ep-radius)); }

/* Page transition — the cell bars, re-coloured to the system. */
.pn-release { position: fixed; inset: 0; z-index: 100000; display: flex; pointer-events: none; }
.pn-release__bar { flex: 1; background: var(--ep-charcoal); border-right: 1px solid rgba(255, 255, 255, 0.04); transform: translateY(-101%); transition: transform 0.55s var(--ep-ease-io); }
.pn-release__bar:last-of-type { border-right: 0; }
.pn-release__bar:nth-child(2) { transition-delay: 0.04s; }
.pn-release__bar:nth-child(3) { transition-delay: 0.08s; }
.pn-release__bar:nth-child(4) { transition-delay: 0.12s; }
.pn-release__bar:nth-child(5) { transition-delay: 0.16s; }
.pn-release__bar:nth-child(6) { transition-delay: 0.2s; }
.pn-release__bar:nth-child(7) { transition-delay: 0.24s; }
.pn-release__mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0.9rem; opacity: 0; transition: opacity 0.3s; font-family: var(--ep-display); font-size: 1rem; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.85); white-space: nowrap; }
.pn-release__mark::before { content: ""; width: 3rem; height: 2px; background: var(--ep-accent); animation: ep-load 0.9s var(--ep-ease-io) infinite; }
@keyframes ep-load { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 50.01% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
html.pn-leaving .pn-release, html.pn-arriving .pn-release { pointer-events: all; }
html.pn-leaving .pn-release__bar, html.pn-arriving .pn-release__bar { transform: none; }
html.pn-leaving .pn-release__mark, html.pn-arriving .pn-release__mark { opacity: 1; transition-delay: 0.3s; }
html.pn-opening .pn-release__bar { transform: translateY(-101%); transition-duration: 0.7s; }
html.pn-opening .pn-release__bar:nth-child(4) { transition-delay: 0s; }
html.pn-opening .pn-release__bar:nth-child(3), html.pn-opening .pn-release__bar:nth-child(5) { transition-delay: 0.06s; }
html.pn-opening .pn-release__bar:nth-child(2), html.pn-opening .pn-release__bar:nth-child(6) { transition-delay: 0.12s; }
html.pn-opening .pn-release__bar:nth-child(1), html.pn-opening .pn-release__bar:nth-child(7) { transition-delay: 0.18s; }
html.pn-opening .pn-release__mark { opacity: 0; transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
	body.ep *, body.ep *::before, body.ep *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}
	body.ep .ep-reveal, body.ep .ep-reveal-img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
	.pn-release { display: none !important; }
}

/* Card contents share the grid's left edge too. */
body.ep main ul.grid > li > :is(a, article, div:not(.slick-track)),
body.ep main ul.grid > li > :is(a, article, div) > div {
	text-align: left !important;
	align-items: flex-start !important;
}

/* Responsive visibility: button rules above set `display`, so re-assert the
   theme's hide utilities. Header phone pill: hidden on phones (the sticky
   call bar takes over), shown from tablet up. */
@media (max-width: 1199.98px) { body.ep .max-xl\:hidden { display: none !important; } }
@media (max-width: 767.98px)  { body.ep .max-md\:hidden { display: none !important; } }
@media (min-width: 768px) and (max-width: 1199.98px) {
	body.ep .site-header .btn-cta.max-xl\:hidden { display: inline-flex !important; }
}

/* Logo legibility at every size: keep its cream pill (logo itself unchanged). */
@media (max-width: 1199.98px) {
	body.ep .site-header .navbar-brand {
		background: #f7f4ec !important;
		border-radius: var(--ep-pill) !important;
		padding: 0.45rem 0.9rem !important;
	}
	body.ep .site-header .navbar-brand img { width: 4.75rem !important; }
}

body.ep .site-header .navbar-toggler span { background: #fff !important; }
body.ep .site-header .navbar-toggler:hover span { background: var(--ep-accent) !important; }

/* ── Service filmstrip ───────────────────────────────────────────────────────
   The service cards as tall photo tiles (el-padrino.js adds the markup
   hooks). Desktop: tiles sit side by side and the hovered or active tile
   expands to reveal its title and description. Tablet/mobile: a swipeable
   row with every caption visible. */
body.ep #ss-comprehensive-bail-solutions ul.ep-film {
	display: flex;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.ep #ss-comprehensive-bail-solutions .ep-film > li {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	transition: flex-grow var(--ep-slow) var(--ep-ease);
}

body.ep #ss-comprehensive-bail-solutions .ep-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	overflow: hidden;
	border-radius: var(--ep-radius);
	background: var(--ep-charcoal-2);
	color: var(--ep-text);
	text-decoration: none;
	isolation: isolate;
}

body.ep #ss-comprehensive-bail-solutions .ep-tile__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.08) brightness(0.6);
	transition: filter var(--ep-slow) var(--ep-ease), transform 1.4s var(--ep-ease);
}

/* Shade for legibility + a red rule that draws across the top when open. */
body.ep #ss-comprehensive-bail-solutions .ep-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(5, 5, 5, 0.15) 25%, rgba(5, 5, 5, 0.94) 100%);
}

body.ep #ss-comprehensive-bail-solutions .ep-tile::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: var(--ep-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ep-med) var(--ep-ease);
}

/* Icon from the CMS sits top-left on every tile. */
body.ep #ss-comprehensive-bail-solutions .ep-tile .ss-icon {
	position: absolute;
	top: 1.25rem;
	left: 1.25rem;
	width: 2.25rem !important;
	height: 2.25rem !important;
	color: #fff !important;
	opacity: 0.9;
}

/* Caption = the card's original heading + description. */
body.ep #ss-comprehensive-bail-solutions .ep-tile > div {
	display: flex;
	flex-direction: column;
	gap: 0.75rem !important;
	padding: 1.75rem;
	text-align: left;
}

body.ep #ss-comprehensive-bail-solutions .ep-tile h3 {
	font-family: var(--ep-display) !important;
	font-size: clamp(1.4rem, 1rem + 0.9vw, 1.9rem) !important;
	font-weight: 500 !important;
	line-height: 1.1 !important;
	color: #fff !important;
	max-width: 16ch;
	margin: 0;
}

body.ep #ss-comprehensive-bail-solutions .ep-tile p {
	font-size: 0.98rem !important;
	line-height: 1.6 !important;
	color: rgba(255, 255, 255, 0.78) !important;
	max-width: 28rem;
	margin: 0;
}

body.ep #ss-comprehensive-bail-solutions .ep-tile__vt { display: none; }

body.ep #ss-comprehensive-bail-solutions .ep-tile:focus-visible {
	outline: 2px solid var(--ep-accent);
	outline-offset: 3px;
}

@media (min-width: 992px) {
	body.ep #ss-comprehensive-bail-solutions ul.ep-film { height: clamp(28rem, 38vw, 36rem); }

	/* Closed tiles: vertical title, caption hidden. */
	body.ep #ss-comprehensive-bail-solutions .ep-tile__vt {
		display: block;
		position: absolute;
		left: 50%;
		bottom: 1.75rem;
		transform: translateX(-50%) rotate(180deg);
		writing-mode: vertical-rl;
		white-space: nowrap;
		font-family: var(--ep-display);
		font-size: 1.05rem;
		font-weight: 500;
		letter-spacing: 0.06em;
		color: #fff;
		transition: opacity var(--ep-fast) var(--ep-ease);
	}

	body.ep #ss-comprehensive-bail-solutions .ep-tile > div {
		min-width: 20rem;
		opacity: 0;
		transform: translateY(1rem);
		transition: opacity var(--ep-fast) var(--ep-ease), transform var(--ep-med) var(--ep-ease);
	}

	/* Open state: the active tile, or whichever tile is hovered/focused. */
	body.ep #ss-comprehensive-bail-solutions .ep-film > li.is-on,
	body.ep #ss-comprehensive-bail-solutions .ep-film > li:hover,
	body.ep #ss-comprehensive-bail-solutions .ep-film > li:focus-within { flex-grow: 4.2; }

	body.ep #ss-comprehensive-bail-solutions .ep-film:hover > li.is-on:not(:hover),
	body.ep #ss-comprehensive-bail-solutions .ep-film:focus-within > li.is-on:not(:focus-within) { flex-grow: 1; }

	body.ep #ss-comprehensive-bail-solutions .ep-film > li:is(.is-on, :hover, :focus-within) .ep-tile__img {
		filter: var(--ep-grade);
		transform: scale(1.04);
	}
	body.ep #ss-comprehensive-bail-solutions .ep-film > li:is(.is-on, :hover, :focus-within) .ep-tile::after { transform: scaleX(1); }
	body.ep #ss-comprehensive-bail-solutions .ep-film > li:is(.is-on, :hover, :focus-within) .ep-tile__vt { opacity: 0; }
	body.ep #ss-comprehensive-bail-solutions .ep-film > li:is(.is-on, :hover, :focus-within) .ep-tile > div {
		opacity: 1;
		transform: none;
		transition-delay: 0.25s;
	}

	/* When another tile takes over, the default tile closes again. */
	body.ep #ss-comprehensive-bail-solutions .ep-film:hover > li.is-on:not(:hover) .ep-tile__img { filter: grayscale(1) contrast(1.08) brightness(0.6); transform: none; }
	body.ep #ss-comprehensive-bail-solutions .ep-film:hover > li.is-on:not(:hover) .ep-tile::after { transform: scaleX(0); }
	body.ep #ss-comprehensive-bail-solutions .ep-film:hover > li.is-on:not(:hover) .ep-tile__vt { opacity: 1; }
	body.ep #ss-comprehensive-bail-solutions .ep-film:hover > li.is-on:not(:hover) .ep-tile > div { opacity: 0; transform: translateY(1rem); transition-delay: 0s; }
}

@media (max-width: 991.98px) {
	body.ep #ss-comprehensive-bail-solutions ul.ep-film {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.5rem;
		scrollbar-width: none;
	}
	body.ep #ss-comprehensive-bail-solutions ul.ep-film::-webkit-scrollbar { display: none; }
	body.ep #ss-comprehensive-bail-solutions .ep-film > li { flex: 0 0 min(78%, 22rem); height: 26rem; scroll-snap-align: start; }
	body.ep #ss-comprehensive-bail-solutions .ep-tile__img { filter: var(--ep-grade) brightness(0.85); }
	body.ep #ss-comprehensive-bail-solutions .ep-tile::after { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
	body.ep #ss-comprehensive-bail-solutions .ep-film > li,
	body.ep #ss-comprehensive-bail-solutions .ep-tile *,
	body.ep #ss-comprehensive-bail-solutions .ep-tile::after { transition: none !important; }
}

/* ── Formatting pass ─────────────────────────────────────────────────────────
   Out-of-container headers (e.g. the filmstrip) keep auto margins at every
   width so their left edge matches the container's. */
html body.ep main > section > div.mx-auto:not(.container) { margin-left: auto !important; margin-right: auto !important; }

/* Centred header stacks inside an items-center column (video tutorials)
   align left like every other section header. */
body.ep main > section .container > div.flex-col.items-center:has(> div > h2) { align-items: stretch !important; }
body.ep main > section .container > div.flex-col.items-center > div:has(> h2) { align-items: flex-start !important; text-align: left !important; max-width: none !important; }

/* Payment table stays readable on phones. */
@media (max-width: 767.98px) {
	body.ep #ss-payment-table :is(th, td) { font-size: 0.875rem !important; }
}

/* About: mission panel body copy at the site's reading size. */
body.ep #ss-core-mission p {
	font-size: var(--ep-fs-body) !important;
	line-height: var(--ep-lh-body) !important;
	max-width: var(--ep-measure);
}
html body.ep main > section > div.mx-auto:not(.container) { text-align: left !important; align-items: flex-start !important; }

/* Video play badges pick up the brand red. */
body.ep #ss-video-tutorials .ss-video-tutorials__card [aria-hidden="true"] > .text-primary { color: var(--ep-accent) !important; }

/* ── Why-choose reasons ──────────────────────────────────────────────────────
   No cards: a sticky heading column with a fine-line justice-scales mark,
   and the reasons as hairline-separated editorial rows (marker · title ·
   description). el-padrino.js adds the classes. */
body.ep main > section.ep-reasons { background: var(--ep-charcoal) !important; }

body.ep main > section.ep-reasons .container > div.ep-reasons__head,
body.ep .ep-reasons .ep-reasons__head {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 1.25rem !important;
	max-width: none !important;
	margin: 0 0 2.5rem !important;
	padding: 0 !important;
	text-align: left !important;
}

body.ep .ep-reasons .ep-reasons__head > p {
	max-width: 34rem !important;
	margin: 0 !important;
	justify-self: auto !important;
	color: var(--ep-mute) !important;
}

body.ep .ep-reasons .ep-reasons__mark {
	width: 3.75rem;
	height: 3.75rem;
	margin-top: 0.75rem;
	color: var(--ep-accent);
	opacity: 0.9;
}

body.ep .ep-reasons .ep-reasons__list {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	counter-reset: ep-reason;
	border-bottom: 1px solid var(--ep-line-2);
}

body.ep .ep-reasons .ep-reason {
	position: relative;
	display: grid !important;
	grid-template-columns: 3rem minmax(0, 1fr);
	column-gap: 1.25rem;
	row-gap: 0.5rem;
	align-items: baseline;
	width: auto !important;
	height: auto !important;
	flex: none !important;
	padding: 1.75rem 0 !important;
	border-top: 1px solid var(--ep-line-2);
	counter-increment: ep-reason;
	background: none !important;
	transform: none !important;
}

/* Wrappers dissolve so title + description sit straight on the row grid. */
body.ep .ep-reasons .ep-reason :is(figure, figcaption, article, article > div:not([aria-hidden])) {
	display: contents !important;
}

/* Photos and overlays from the old card/filmstrip treatment are retired. */
body.ep .ep-reasons .ep-reason img,
body.ep .ep-reasons .ep-reason [aria-hidden="true"]:not(.ep-reason__icon):not(.ep-reason__icon *),
body.ep .ep-reasons .ep-reason article::before,
body.ep .ep-reasons .ep-reason article::after { display: none !important; }

/* Marker: the CMS icon when there is one, otherwise a 01/02/03 index. */
body.ep .ep-reasons .ep-reason::before {
	content: counter(ep-reason, decimal-leading-zero);
	grid-column: 1;
	grid-row: 1;
	font-family: var(--ep-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--ep-accent);
}

body.ep .ep-reasons .ep-reason--icon::before { content: none; }

body.ep .ep-reasons .ep-reason__icon {
	position: static !important;
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	width: 2.25rem !important;
	height: 2.25rem !important;
	margin: 0 !important;
	color: var(--ep-accent) !important;
	background: none !important;
	border: 0 !important;
}

body.ep .ep-reasons .ep-reason__icon svg { width: 100%; height: 100%; }

body.ep .ep-reasons .ep-reason__title {
	grid-column: 2;
	display: block !important;
	margin: 0 !important;
	font-family: var(--ep-display) !important;
	font-size: clamp(1.35rem, 1.05rem + 0.8vw, 1.85rem) !important;
	font-weight: 500 !important;
	line-height: 1.15 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: #fff !important;
	transition: color var(--ep-fast) var(--ep-ease), transform var(--ep-med) var(--ep-ease);
}

body.ep .ep-reasons .ep-reason__desc {
	grid-column: 2;
	display: block !important;
	max-width: 36rem;
	margin: 0 !important;
	font-family: var(--ep-body) !important;
	font-size: var(--ep-fs-body) !important;
	line-height: var(--ep-lh-body) !important;
	color: var(--ep-mute) !important;
	opacity: 1 !important;
	transform: none !important;
}

/* Hover: a red rule draws along the row's top edge; the title steps in. */
body.ep .ep-reasons .ep-reason::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 1px;
	background: var(--ep-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ep-med) var(--ep-ease);
}

body.ep .ep-reasons .ep-reason:hover::after { transform: scaleX(1); }
body.ep .ep-reasons .ep-reason:hover .ep-reason__title { transform: translateX(0.35rem); }

@media (min-width: 992px) {
	body.ep .ep-reasons .ep-reasons__wrap {
		display: grid !important;
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
		column-gap: clamp(3rem, 2rem + 4vw, 7rem);
		align-items: start;
	}

	body.ep .ep-reasons .ep-reasons__mark { width: 6rem; height: 6rem; margin-top: 1.5rem; }

	body.ep main > section.ep-reasons .container > div.ep-reasons__head,
	body.ep .ep-reasons .ep-reasons__head {
		position: sticky;
		top: 7.5rem;
		margin: 0 !important;
	}

	/* Title and description side by side on wide screens. */
	body.ep .ep-reasons .ep-reason {
		grid-template-columns: 3rem minmax(0, 0.9fr) minmax(0, 1.1fr);
		column-gap: 1.75rem;
		padding: 2rem 0 !important;
	}

	body.ep .ep-reasons .ep-reason__desc { grid-column: 3; grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
	body.ep .ep-reasons .ep-reason::after,
	body.ep .ep-reasons .ep-reason__title { transition: none !important; }
}

/* ── Hero call-to-action block ───────────────────────────────────────────────
   One aligned stack: Call Now, then Chat Now at the same size and in the same
   red, then the quieter ID and Form Upload. */
body.ep #ss-hero-banner h1 { margin-left: -0.04em !important; }

body.ep #ss-hero-banner .ep-hero-cta {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem !important;
	width: 100%;
	max-width: 28rem !important;
	margin-top: 2.25rem !important;
}

body.ep #ss-hero-banner .ep-hero-cta > a {
	justify-content: center !important;
	min-height: 3.25rem;
	width: 100%;
	padding-left: 1rem !important;
	padding-right: 1rem !important;
	white-space: nowrap;
}

body.ep #ss-hero-banner .ep-hero-cta > .btn-cta {
	grid-column: 1 / -1;
	min-height: 3.75rem;
	font-size: 1.0625rem !important;
}

@media (max-width: 767.98px) {
	body.ep #ss-hero-banner .ep-hero-cta { grid-template-columns: minmax(0, 1fr); }
}

body.ep #ss-hero-banner .ep-live {
	display: inline-flex !important;
	align-self: flex-start;
	width: auto !important;
	align-items: center;
	gap: 0.65rem;
	margin: 1.25rem 0 0 !important;
	padding: 0.55rem 1rem 0.55rem 0.85rem;
	max-width: none !important;
	border: 1px solid rgba(244, 62, 46, 0.4);
	border-radius: var(--ep-pill);
	background: rgba(244, 62, 46, 0.12);
	font-family: var(--ep-body) !important;
	font-size: 0.9375rem !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #fff !important;
}

body.ep #ss-hero-banner .ep-live__dot {
	position: relative;
	flex: none;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--ep-red);
	box-shadow: 0 0 0 0 rgba(244, 62, 46, 0.6);
	animation: ep-live 2s var(--ep-ease) infinite;
}

@keyframes ep-live {
	0% { box-shadow: 0 0 0 0 rgba(244, 62, 46, 0.55); }
	70% { box-shadow: 0 0 0 0.6rem rgba(244, 62, 46, 0); }
	100% { box-shadow: 0 0 0 0 rgba(244, 62, 46, 0); }
}

@media (prefers-reduced-motion: reduce) {
	body.ep #ss-hero-banner .ep-live__dot { animation: none; }
}

/* Circular badges (How It Works discs, step numbers) stay centred: the
   section-wide left-alignment rule must not reach inside them. */
body.ep main > section [class*="rounded-full"].justify-center {
	justify-content: center !important;
	align-items: center !important;
	text-align: center !important;
}

/* Urgency stays red: call buttons keep --ep-red-fill (set above); the
   header phone pill, mobile call bar and live-agent dot use brand red. */
body.ep #ss-hero-banner .ep-live__dot { background: var(--ep-red) !important; }

/* Responsive centring classes (lg:justify-center etc.) on lists and wrapped
   rows follow the same left edge as the heading above them. */
body.ep main > section :is(ul, ol, div.flex-wrap)[class*="justify-center"]:not(#ss-stats-bar *):not(.slick-slider *):not([class*="rounded-full"]) {
	justify-content: flex-start !important;
}

/* Closing notes: a paragraph that ends a section after a grid or list is
   set off as an intentional sign-off (rule, lead size, left edge) instead
   of floating centred under the content. */
body.ep main > section:not(#ss-hero-banner) .container > :is(ul, ol, div) + p:last-child {
	position: relative;
	max-width: none !important;
	margin: 3rem 0 0 !important;
	padding: 2rem 0 0 !important;
	border-top: 1px solid var(--ep-line-2);
	text-align: left !important;
	font-size: var(--ep-fs-lead) !important;
	line-height: 1.65 !important;
	color: var(--ep-text) !important;
}
body.ep main > section:not(#ss-hero-banner) .container > :is(ul, ol, div) + p:last-child::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	width: 4rem;
	height: 2px;
	background: var(--ep-accent);
}

/* Reasons rows: title and description stack in one column so every line
   starts on the same edge; the marker sits on the title's first line. */
body.ep .ep-reasons .ep-reason { align-items: start !important; }
body.ep .ep-reasons .ep-reason::before { padding-top: 0.55em; line-height: 1; }
body.ep .ep-reasons .ep-reason__icon { margin-top: 0.1rem !important; }
@media (min-width: 992px) {
	body.ep .ep-reasons .ep-reason { grid-template-columns: 3rem minmax(0, 1fr) !important; }
	body.ep .ep-reasons .ep-reason__desc { grid-column: 2 !important; grid-row: auto !important; max-width: 40rem; }
}

/* How It Works: every step uses the same arrangement (photo left, number
   on the spine, copy right, left-aligned) instead of alternating sides. */
@media (min-width: 1024px) {
	body.ep #ss-how-it-works ol > li > div { order: 1 !important; }
	body.ep #ss-how-it-works ol > li > span:not([class*="rounded-full"]) {
		order: 2 !important;
		align-items: flex-start !important;
		text-align: left !important;
	}
	body.ep #ss-how-it-works ol > li > span:not([class*="rounded-full"]) > span { text-align: left !important; }
}

body.ep main ul.grid > li.ep-span-row,
body.ep main ol.grid > li.ep-span-row { grid-column: 1 / -1; }

/* About · Meet the Team: four credentials as 2×2, then one row of four. */
@media (min-width: 768px) { body.ep #ss-commitment ul.grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (min-width: 1200px) { body.ep #ss-commitment ul.grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }

/* Service process blocks: heading + photo column and the steps column
   share a top line instead of the heading floating mid-height. */
@media (min-width: 992px) {
	body.ep #ss-page-content-sections .container > div[class*="lg:flex-row"] { align-items: flex-start !important; }
}

/* City pills read the same on every page: one uppercase, tracked style. */
body.ep main #ss-areas-we-serve li > :is(a, button),
body.ep main a.ss-aws-tab {
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
}

/* The section owns the 60px rhythm; inner containers that carry their own
   vertical padding (CTA bands with background photos) don't add to it. */
body.ep main > section:not(#ss-hero-banner) > .container[class*="py-"],
body.ep main > section:not(#ss-hero-banner) > .container[class*="pt-"],
body.ep main > section:not(#ss-hero-banner) > .container[class*="pb-"] {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* CTA under the service filmstrip sits on the content's left edge. */
body.ep #ss-comprehensive-bail-solutions .ep-film + div { justify-content: flex-start !important; margin-top: 2.5rem !important; }

/* FAQ toggles: open = outlined green circle with a minus; closed = plus.
   Matches the closed icons instead of a solid white disc. */
body.ep main .accordionBtn[aria-expanded="true"] [class*="__toggle"] {
	background: transparent !important;
	border-color: var(--ep-accent) !important;
}
body.ep main .accordionBtn[aria-expanded="true"] [class*="__plus"] { opacity: 0 !important; }
body.ep main .accordionBtn[aria-expanded="true"] [class*="__minus"] { opacity: 1 !important; background: var(--ep-accent) !important; }
@media (max-width: 1023.98px) {
	body.ep #ss-how-it-works ol > li { align-items: flex-start !important; text-align: left !important; }
	body.ep #ss-how-it-works ol > li > span:not([class*="rounded-full"]) { align-items: flex-start !important; text-align: left !important; }
	body.ep #ss-how-it-works ol > li > span:not([class*="rounded-full"]) > span { text-align: left !important; }
}

/* ── Readability panels ──────────────────────────────────────────────────────
   Wherever a heading and subhead sit on a photograph, they get a
   semi-transparent dark panel (with a light blur) so the copy always reads,
   whatever the photo. */

/* Photo CTA banners (Payment Plans, Get Help Fast, etc.). */
body.ep main > section:is(#ss-affordable-payment-plans, #ss-location-cta-section) .container > div:first-child {
	max-width: 44rem !important;
	padding: clamp(1.75rem, 1.2rem + 2vw, 3rem) !important;
	border: 1px solid var(--ep-line);
	border-radius: var(--ep-radius);
	background: rgba(8, 9, 10, 0.72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
body.ep main > section:is(#ss-affordable-payment-plans, #ss-location-cta-section) .container > div:first-child :is(p, span) { color: rgba(255, 255, 255, 0.86) !important; }

/* Service tiles: caption panel and vertical label chip. */
body.ep #ss-comprehensive-bail-solutions .ep-tile > div {
	margin: 0.875rem !important;
	padding: 1.25rem 1.35rem !important;
	border-radius: var(--ep-radius-sm);
	background: rgba(8, 9, 10, 0.74);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
body.ep #ss-comprehensive-bail-solutions .ep-tile p { color: rgba(255, 255, 255, 0.86) !important; }
@media (min-width: 992px) {
	body.ep #ss-comprehensive-bail-solutions .ep-tile__vt {
		padding: 0.85rem 0.45rem;
		border-radius: var(--ep-pill);
		background: rgba(8, 9, 10, 0.7);
	}
}

/* ── Closing call band (ss_contact_cta) ──────────────────────────────────────
   A slim, solid sign-off: no background photo (so it never repeats the
   payment-plans banner), heading and line on the left, the call button on
   the right, a green rule on top. Only the call action shows. */
body.ep main > section#ss-contact-cta {
	background: var(--ep-black) !important;
	border-top: 1px solid var(--ep-line);
	border-bottom: 1px solid var(--ep-line);
}
body.ep #ss-contact-cta > .ss-animate.absolute { display: none !important; }
body.ep #ss-contact-cta .container > div {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	justify-items: start;
	gap: 1rem 3rem !important;
	max-width: none !important;
	margin: 0 !important;
	text-align: left !important;
}
body.ep #ss-contact-cta h2 {
	position: relative;
	margin: 0 !important;
	padding-top: 1.25rem;
	font-size: var(--ep-fs-h2) !important;
}
body.ep #ss-contact-cta h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 3rem;
	height: 2px;
	background: var(--ep-accent);
}
body.ep #ss-contact-cta p {
	margin: 0 !important;
	font-size: var(--ep-fs-lead) !important;
	color: var(--ep-mute) !important;
}
body.ep #ss-contact-cta .container > div > div { justify-content: flex-start !important; }
body.ep #ss-contact-cta .ss-contact-cta__btn-outline { display: none !important; }
body.ep #ss-contact-cta .ss-contact-cta__btn-call {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 3.5rem;
	padding: 0 1.75rem !important;
	border: 1px solid var(--ep-red-fill) !important;
	border-radius: var(--ep-pill) !important;
	background: var(--ep-red-fill) !important;
	color: #fff !important;
	font-weight: 600;
	transition: background var(--ep-fast) var(--ep-ease), transform var(--ep-fast) var(--ep-ease);
}
body.ep #ss-contact-cta .ss-contact-cta__btn-call:hover { background: var(--ep-red-deep) !important; border-color: var(--ep-red-deep) !important; transform: translateY(-2px); }
body.ep #ss-contact-cta .ss-contact-cta__btn-call svg { width: 1.1rem; height: 1.1rem; }
body.ep #ss-contact-cta .ss-contact-cta__btn-call svg path { fill: currentColor; }
@media (min-width: 992px) {
	body.ep #ss-contact-cta .container > div { grid-template-columns: minmax(0, 1fr) auto; }
	body.ep #ss-contact-cta .container > div > h2,
	body.ep #ss-contact-cta .container > div > p { grid-column: 1; }
	body.ep #ss-contact-cta .container > div > div { grid-column: 2; grid-row: 1 / span 2; }
}

/* Map: offices vs. served-only cities ------------------------------------
   Office pins (highlight, from ss_areas_map_default_pins) are solid green;
   every other pin is a city served by phone, chat and online with no office,
   drawn with a dashed outline. The legend in ss_areas_we_serve_render_map()
   names both. */
body.ep .ss-areas-map .ss-map-marker {
	border-style: dashed;
}
body.ep .ss-areas-map .ss-map-marker.is-highlight {
	border-style: solid;
	border-color: var(--ep-green);
	background: var(--ep-green);
	font-weight: 700;
}
body.ep .ss-areas-map .ss-map-marker.is-highlight:hover,
body.ep .ss-areas-map .ss-map-marker.is-highlight:focus-visible {
	border-color: var(--ep-green-deep);
	background: var(--ep-green-deep);
}
body.ep .ss-areas-map__legend {
	position: absolute;
	left: 0.75rem;
	bottom: 1.75rem;
	z-index: 500;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
	padding: 0.6rem 0.8rem;
	list-style: none;
	border: 1px solid var(--ep-line-2);
	border-radius: 0.5rem;
	background: rgba(11, 12, 13, 0.85);
	color: var(--ep-text);
	font-size: 0.8rem;
	line-height: 1.3;
	pointer-events: none;
}
body.ep .ss-areas-map__legend li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}
body.ep .ss-areas-map__swatch {
	flex: none;
	width: 1.6rem;
	height: 0.8rem;
	border: 2px dashed #2c8a5a;
	border-radius: 999px;
	background: #123526;
}
body.ep .ss-areas-map__swatch.is-office {
	border-style: solid;
	border-color: var(--ep-green);
	background: var(--ep-green);
}

/* Why-choose stage ---------------------------------------------------------
   reasonStage() in el-padrino.js: the heading column holds a framed photo
   (or icon) that cross-fades to the reason in view, with a 01 / 04 count;
   a rail beside the list fills with --ep-progress. Inactive rows dim so the
   reader's place is always clear. Narrow screens get each photo inline. */
body.ep .ep-reasons__stage {
	position: relative;
	width: 100%;
	max-width: 26rem;
	aspect-ratio: 4 / 5;
	max-height: max(16rem, calc(100vh - 24rem));
	margin-top: 1rem;
	border: 1px solid var(--ep-line-2);
	border-radius: 1rem;
	overflow: hidden;
	background: var(--ep-ink);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
	isolation: isolate;
}
body.ep .ep-reasons__stage::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 45%;
	background: linear-gradient(to top, rgba(5, 5, 5, 0.85), transparent);
	z-index: 1;
	pointer-events: none;
}
body.ep .ep-reasons__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity 0.7s var(--ep-ease), transform 1.4s var(--ep-ease);
}
body.ep .ep-reasons__slide.is-active { opacity: 1; transform: scale(1); }
body.ep img.ep-reasons__slide { object-fit: cover; filter: saturate(0.85) contrast(1.05); }
body.ep .ep-reasons__stage--icon { aspect-ratio: 1 / 1; max-width: 20rem; background: radial-gradient(circle at 50% 40%, rgba(1, 173, 111, 0.16), transparent 65%), var(--ep-ink); }
body.ep .ep-reasons__stage--icon::after { content: none; }
body.ep span.ep-reasons__slide { display: grid; place-items: center; color: var(--ep-accent); }
body.ep span.ep-reasons__slide svg { width: 42%; height: 42%; }
body.ep .ep-reasons__count {
	position: absolute;
	left: 1.25rem;
	bottom: 1.1rem;
	z-index: 2;
	font-family: var(--ep-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--ep-mute);
}
body.ep .ep-reasons__count b { color: #fff; font-weight: 700; }
body.ep .ep-reasons__stage--icon .ep-reasons__count { color: var(--ep-dim); }

body.ep .ep-reason__shot { display: none !important; }

@media (min-width: 992px) {
	body.ep .ep-reasons--stage .ep-reasons__list {
		position: relative;
		padding-left: 2.25rem !important;
		border-bottom: 0;
	}
	body.ep .ep-reasons--stage .ep-reasons__list::before,
	body.ep .ep-reasons--stage .ep-reasons__list::after {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 2px;
		height: 100%;
		border-radius: 2px;
		background: var(--ep-line-2);
	}
	body.ep .ep-reasons--stage .ep-reasons__list::after {
		background: var(--ep-accent);
		transform: scaleY(var(--ep-progress, 0));
		transform-origin: top;
		transition: transform 0.6s var(--ep-ease);
	}
	body.ep .ep-reasons--stage .ep-reason { border-top: 0; padding: 2.25rem 0 !important; }
	body.ep .ep-reasons--stage .ep-reason::after { content: none; }
	body.ep .ep-reasons--stage .ep-reason::before {
		font-family: var(--ep-display);
		font-size: 2.25rem;
		font-weight: 600;
		letter-spacing: 0;
		padding-top: 0;
		color: transparent;
		-webkit-text-stroke: 1px var(--ep-line-2);
		transition: color var(--ep-med) var(--ep-ease), -webkit-text-stroke-color var(--ep-med) var(--ep-ease);
	}
	body.ep .ep-reasons--stage .ep-reason { grid-template-columns: 4rem minmax(0, 1fr) !important; }
	body.ep .ep-reasons--stage .ep-reason :is(.ep-reason__title, .ep-reason__desc, .ep-reason__icon) {
		opacity: 0.38 !important;
		transition: opacity var(--ep-med) var(--ep-ease), transform var(--ep-med) var(--ep-ease);
	}
	body.ep .ep-reasons--stage .ep-reason.is-active::before { color: var(--ep-accent); -webkit-text-stroke-color: var(--ep-accent); }
	body.ep .ep-reasons--stage .ep-reason.is-active :is(.ep-reason__title, .ep-reason__desc, .ep-reason__icon) { opacity: 1 !important; }
	body.ep .ep-reasons--stage .ep-reason .ep-reason__title { transform: none !important; }
	body.ep main > section.ep-reasons--stage .container > div.ep-reasons__head,
	body.ep .ep-reasons--stage .ep-reasons__head { top: 9rem; }
}

@media (max-width: 991.98px) {
	body.ep .ep-reasons--stage .ep-reasons__stage { display: none; }
	body.ep .ep-reasons.ep-reasons--stage .ep-reason img.ep-reason__shot {
		display: block !important;
		grid-column: 1 / -1;
		width: 100%;
		aspect-ratio: 16 / 9;
		margin-bottom: 0.75rem;
		border-radius: 0.75rem;
		object-fit: cover;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.ep .ep-reasons__slide,
	body.ep .ep-reasons--stage .ep-reasons__list::after,
	body.ep .ep-reasons--stage .ep-reason :is(.ep-reason__title, .ep-reason__desc, .ep-reason__icon) { transition: none !important; }
}

/* Footer: services as one list in two balanced columns (items line up);
   offices list each address under its city. */
body.ep .site-footer .ep-footer-services {
	display: block !important;
	columns: 2;
	column-gap: 2rem;
}
body.ep .site-footer .ep-footer-services > li {
	break-inside: avoid;
	margin: 0 0 1rem !important;
}
body.ep .site-footer .ep-footer-offices strong {
	font-weight: 600;
	color: var(--ep-text);
}

/* Maps contain their own stacking: Leaflet panes (z 400+) and the legend must
   never paint over the fixed header when the map scrolls beneath it. */
body.ep .ss-areas-map { isolation: isolate; }

/* Legal pages open with their H1 (no hero): clear the fixed header, which the
   site-wide 60px section padding would otherwise tuck the heading under. */
body.ep main > section#ss-legal-content:first-child {
	padding-top: clamp(9rem, 7rem + 5vw, 12.5rem) !important;
}

/* Mobile bottom dock: the floating chat launcher becomes a round button
   beside the call bar instead of a tab over the right edge of the copy. The
   label stays in the markup for screen readers. */
@media (max-width: 767.98px) {
	body.ep .ep-callbar { right: calc(0.75rem + 3.4rem + 0.5rem); }
	body.ep #ss-hero-banner .ss-hero-banner__chat-fab {
		top: auto !important;
		right: 0.75rem !important;
		bottom: 0.75rem !important;
		z-index: 60;
		justify-content: center;
		width: 3.4rem;
		height: 3.4rem;
		padding: 0 !important;
		gap: 0 !important;
		border-radius: 50% !important;
		transform: none !important;
		box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.8), 0 8px 24px -10px rgba(244, 62, 46, 0.7);
	}
	body.ep #ss-hero-banner .ss-hero-banner__chat-fab-label {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* Crisp widget live (el-padrino.js crisp()): its bubble is the chat button, so
   the theme's mobile launcher hides and the call bar leaves room for the
   bubble (Crisp: 60px, 24px from the right edge). */
body.ep.ep-has-crisp #ss-hero-banner .ss-hero-banner__chat-fab { display: none !important; }
@media (max-width: 767.98px) {
	body.ep.ep-has-crisp .ep-callbar { right: calc(24px + 60px + 0.75rem); }
}

/* Upload popup: a dark scrollbar instead of the browser's white track. */
body.ep .ss-upload-popup__panel {
	scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
	scrollbar-width: thin;
}
body.ep .ss-upload-popup__panel::-webkit-scrollbar { width: 8px; }
body.ep .ss-upload-popup__panel::-webkit-scrollbar-track { background: transparent; }
body.ep .ss-upload-popup__panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 8px; }

/* Tablet: the inline why-choose photo spans the column; cap its height so a
   16:9 frame does not fill the screen at 768px. */
@media (min-width: 640px) and (max-width: 991.98px) {
	body.ep .ep-reasons.ep-reasons--stage .ep-reason img.ep-reason__shot { max-height: 20rem; }
}

/* Hero stack (ss_hero_banner.php): Call Now and Chat Now are equal red
   buttons; Chat Now pulses and carries the live-agent dot; ID and Form
   Upload is a lighter glass button with a green icon. */
body.ep #ss-hero-banner .ep-hero-cta { grid-template-columns: minmax(0, 1fr); }
body.ep #ss-hero-banner .ep-hero-cta > .btn-cta {
	min-height: 3.75rem;
	font-size: 1.0625rem !important;
}
/* Call Now goes green so it reads apart from the red Chat Now beneath it.
   The deep green keeps white text at AA contrast. */
body.ep #ss-hero-banner .ep-hero-cta > .btn-cta:not(.ep-hero-chat) {
	background: var(--ep-green-deep) !important;
	border-color: var(--ep-green-deep) !important;
	box-shadow: 0 10px 30px -12px rgba(1, 173, 111, 0.7);
}
body.ep #ss-hero-banner .ep-hero-cta > .btn-cta:not(.ep-hero-chat):hover {
	background: #006e49 !important;
	border-color: #006e49 !important;
	box-shadow: 0 16px 36px -14px rgba(1, 173, 111, 0.85);
}
body.ep #ss-hero-banner .ep-hero-cta > .ep-hero-chat {
	white-space: normal;
	text-align: center;
	animation: ep-glow 2.4s var(--ep-ease) infinite;
}
body.ep #ss-hero-banner .ep-hero-cta > .ep-hero-chat:hover { animation: none; }
body.ep #ss-hero-banner .ep-hero-chat .ep-live__dot { background: #fff !important; }
@keyframes ep-glow {
	0%, 100% { box-shadow: 0 10px 30px -12px rgba(244, 62, 46, 0.7), 0 0 0 0 rgba(244, 62, 46, 0.45); }
	50% { box-shadow: 0 14px 38px -10px rgba(244, 62, 46, 0.95), 0 0 0 0.4rem rgba(244, 62, 46, 0); }
}
body.ep #ss-hero-banner .ep-hero-cta > .ep-hero-upload {
	min-height: 3rem;
	background: rgba(255, 255, 255, 0.05) !important;
	border-color: rgba(255, 255, 255, 0.16) !important;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-weight: 500 !important;
}
body.ep #ss-hero-banner .ep-hero-upload svg path { fill: var(--ep-accent); }
body.ep #ss-hero-banner .ep-hero-cta > .ep-hero-upload:hover {
	background: rgba(1, 173, 111, 0.1) !important;
	color: #fff !important;
	border-color: var(--ep-accent) !important;
}
@media (prefers-reduced-motion: reduce) {
	body.ep #ss-hero-banner .ep-hero-cta > .ep-hero-chat { animation: none; }
}

/* Nav dropdown arrows: centred on the label and green on hover, matching
   the active-page underline. */
@media (min-width: 1200px) {
	body.ep .site-header .navbar-nav > li > .caret {
		top: 50% !important;
		transform: translateY(-50%);
		transition: color var(--ep-fast) var(--ep-ease);
	}
	body.ep .site-header .navbar-nav > li:hover > .caret,
	body.ep .site-header .navbar-nav > li:focus-within > .caret { color: var(--ep-accent) !important; }
}