/*
 * Empire Plumbing & Heating: Elementor companion styles
 * File: wp-content/themes/empire-elementor-child/assets/css/empire.css
 *
 * Only what Elementor's own controls cannot reproduce lives here.
 * Colors come from Elementor Global Colors (Site Settings), so editing a
 * global color in Elementor updates these rules too.
 * Every effect has a reduced-motion fallback and a no-JS resting state.
 */

:root {
	--ep-blue: var(--e-global-color-primary, #007CC1);
	--ep-navy: var(--e-global-color-secondary, #062A47);
	--ep-slate: var(--e-global-color-text, #394756);
	--ep-ink: var(--e-global-color-accent, #005A8C);
	--ep-light: var(--e-global-color-eplight, #EAF0F5);
	--ep-sky: var(--e-global-color-epsky, #D4EEFF);
	--ep-kick: var(--e-global-color-epkick, #00649E);
	--ep-line: rgba(255, 255, 255, .28);
	--ep-ease: cubic-bezier(.2, .8, .2, 1);
	--ep-display: "Gelasio", Georgia, "Times New Roman", Times, serif;
}

html { overflow-x: clip; }
body { overflow-x: clip; }
h1, h2, h3, .elementor-heading-title { text-wrap: balance; }

/* Visible keyboard focus everywhere */
.elementor a:focus-visible,
.elementor button:focus-visible,
.elementor [tabindex]:focus-visible,
.elementor input:focus-visible,
.elementor select:focus-visible,
.elementor textarea:focus-visible {
	outline: 2px solid var(--ep-sky);
	outline-offset: 3px;
}
.ep-on-light a:focus-visible, .ep-on-light button:focus-visible { outline-color: var(--ep-ink); }

/* ---------- 1. Pill buttons with the round arrow badge ----------
   Elementor Button widget: icon "fas fa-arrow-right", icon position After,
   CSS class ep-btn. Add ep-btn--solid for the white filled version. */
.ep-btn .elementor-button { display: inline-flex; align-items: center; white-space: nowrap; }
.ep-btn .elementor-button-content-wrapper { align-items: center; gap: 14px; }
.ep-btn .elementor-button-icon {
	width: 38px; height: 38px; border-radius: 50%;
	display: inline-grid; place-items: center; flex: none;
	background: var(--ep-navy); color: #fff; font-size: 14px;
	margin: 0 !important;
	transition: transform .45s var(--ep-ease), background-color .3s;
}
.ep-btn .elementor-button-icon svg { width: 14px; height: 14px; fill: #fff; }
.ep-btn .elementor-button:hover .elementor-button-icon,
.ep-btn .elementor-button:focus-visible .elementor-button-icon { transform: rotate(-45deg); }

/* Text link with underline (CSS class ep-tlink on a Button widget, style "link") */
.ep-tlink .elementor-button {
	background: none !important; padding: 0 0 3px !important; border-radius: 0 !important;
	border-bottom: 1px solid var(--ep-blue);
}

/* ---------- 2. Sticky header: blue bar turns white on scroll ----------
   Header container: CSS class ep-header, Motion Effects > Sticky: Top,
   Effects Offset 12. Elementor adds .elementor-sticky--effects past 12px. */
.ep-header { transition: background-color .35s, box-shadow .35s, border-color .35s; }
.ep-header .ep-logo { position: relative; }
.ep-header .ep-logo-dark { position: absolute; inset: 0 auto auto 0; opacity: 0; transition: opacity .35s; }
.ep-header .ep-logo-light { transition: opacity .35s; }
.ep-header.elementor-sticky--effects {
	background-color: #fff !important;
	box-shadow: 0 10px 30px -18px rgba(6, 42, 71, .45);
	border-bottom-color: rgba(6, 42, 71, .12) !important;
}
.ep-header.elementor-sticky--effects .ep-logo-light { opacity: 0; }
.ep-header.elementor-sticky--effects .ep-logo-dark { opacity: 1; }
.ep-header.elementor-sticky--effects .elementor-nav-menu--main .elementor-item,
.ep-header.elementor-sticky--effects .ep-tel .elementor-button { color: var(--ep-ink) !important; }
.ep-header.elementor-sticky--effects .elementor-nav-menu--main .elementor-item:after { background-color: var(--ep-blue) !important; }
.ep-header.elementor-sticky--effects .ep-btn--solid .elementor-button { background-color: var(--ep-ink) !important; color: #fff !important; }
.ep-header.elementor-sticky--effects .elementor-menu-toggle { color: var(--ep-ink); border-color: rgba(6, 42, 71, .4); }

/* ---------- 3. Hero headline line-by-line rise ----------
   Heading widget with CSS class ep-rise; each line is a <span> with <br>
   in the title text. Pure CSS, no JS. */
.ep-rise .elementor-heading-title { animation: ep-rise 1.2s var(--ep-ease) both; }
@keyframes ep-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

/* Emergency badge: Heading (p) with CSS class ep-emerg */
.ep-emerg .elementor-heading-title {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 8px 16px; border-radius: 999px;
	background: rgba(255, 255, 255, .08); border: 1px solid var(--ep-line);
}
.ep-emerg .elementor-heading-title::before {
	content: ""; width: 8px; height: 8px; border-radius: 50%;
	background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25);
}

/* ---------- 4. 3D photo ring (homepage hero) ----------
   Container class ep-ring holding a Basic Gallery widget. Without JS it
   is a normal 4-column gallery; empire.js lifts it into a draggable ring. */
.ep-ring .gallery { margin: 0 !important; }
.ep-ring-stage {
	position: relative; height: clamp(300px, 38vw, 540px);
	perspective: 1700px; perspective-origin: 50% 0%;
	cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.ep-ring-stage:active { cursor: grabbing; }
.ep-ring-track {
	--R: 640px; --fw: 250px; --fh: 330px;
	position: absolute; left: 50%; top: 10px; width: var(--fw); height: var(--fh);
	margin-left: calc(var(--fw) / -2); transform-style: preserve-3d;
	transform: translateZ(calc(var(--R) * -1)) rotateX(var(--tilt, -5deg)) rotateY(var(--a, 0deg));
}
.ep-ring-track figure {
	position: absolute; inset: 0; margin: 0; overflow: hidden; border-radius: 8px;
	background: var(--e-global-color-epdeep, #0069A6);
	transform: rotateY(calc(var(--i) * var(--step, 30deg))) translateZ(var(--R));
	backface-visibility: hidden; -webkit-backface-visibility: hidden;
	-webkit-box-reflect: below 12px linear-gradient(transparent 62%, rgba(255, 255, 255, .16));
}
.ep-ring-track figure img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ep-ring-track figure::after { content: ""; position: absolute; inset: 0; background: var(--ep-blue); opacity: var(--dim, 0); }
.ep-ring-track figcaption {
	position: absolute; left: 10px; bottom: 10px; z-index: 1;
	font: 600 12px/1 var(--e-global-typography-text-font-family, "Albert Sans"), sans-serif;
	color: #fff; background: rgba(6, 42, 71, .8); padding: 7px 11px; border-radius: 999px; white-space: nowrap;
}
.ep-ring-hint {
	position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
	display: flex; gap: 10px; align-items: center; white-space: nowrap;
	font-size: 14px; color: var(--ep-sky);
}
.ep-ring-hint::before, .ep-ring-hint::after { content: ""; width: 28px; height: 1px; background: currentColor; }
@media (max-width: 1024px) { .ep-ring-track { --R: 430px; --fw: 180px; --fh: 240px; } .ep-ring-stage { height: 380px; } }
@media (max-width: 767px) { .ep-ring-track { --R: 300px; --fw: 140px; --fh: 188px; } .ep-ring-stage { height: 300px; } }

/* Hero stats row: container class ep-stats (4 children) */
.ep-stats { border-top: 1px solid var(--ep-line); }

/* ---------- 5. Statement: words light up on scroll ----------
   Heading widget (HTML tag p) with CSS class ep-words. */
.ep-words.ep-js .ep-w { opacity: .14; transition: opacity .6s ease calc(var(--i) * 45ms); }
.ep-words.ep-js.is-in .ep-w { opacity: 1; }

/* ---------- 6. Expanding service panels ----------
   Container class ep-acc (row, no wrap) with child containers class ep-pan.
   Each panel: background image + gradient overlay set in Elementor.
   Inside: Heading class ep-vt (vertical label) + container class ep-pc. */
.ep-acc { gap: 12px; }
.ep-acc > .ep-pan, .ep-acc > .e-con-inner > .ep-pan {
	flex: 1 1 0 !important; min-width: 0; cursor: pointer;
	transition: flex 1s var(--ep-ease);
}
.ep-acc .ep-pan.is-on { flex: 4.2 1 0 !important; }
.ep-pan { position: relative; }
.ep-pan > .ep-vt { position: absolute !important; left: 50% !important; right: auto !important; top: auto !important; bottom: 28px !important; width: auto !important; margin: 0 !important; transition: opacity .4s; }
.ep-pan > .ep-vt { transform: translateX(-50%); }
.ep-pan .ep-vt .elementor-heading-title { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.ep-pan.is-on .ep-vt { opacity: 0; }
.ep-pan .ep-pc { opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .7s var(--ep-ease); }
.ep-pan.is-on .ep-pc { opacity: 1; transform: none; transition-delay: .35s; }
@media (max-width: 1024px) {
	.ep-acc { flex-direction: column !important; }
	.ep-acc .ep-pan, .ep-acc .ep-pan.is-on { flex: none !important; height: 96px; transition: height .8s var(--ep-ease); }
	.ep-acc .ep-pan.is-on { height: 400px; }
	.ep-pan > .ep-vt { left: 24px !important; bottom: 30px !important; transform: none; }
	.ep-pan > .ep-vt { right: 24px !important; }
	.ep-pan .ep-vt .elementor-heading-title { white-space: normal; font-size: 22px; }
	/* Stronger overlay on stacked panels so white text stays readable on light photos */
	.ep-acc .ep-pan::before { background-image: linear-gradient(0deg, rgba(6, 42, 71, .94), rgba(6, 42, 71, .45)) !important; opacity: 1 !important; }
	.ep-pan .ep-vt .elementor-heading-title { writing-mode: horizontal-tb; transform: none; }
}
/* No JS: show every panel's content */
html:not(.ep-js-ready) .ep-pan .ep-pc { opacity: 1; transform: none; }
html:not(.ep-js-ready) .ep-pan .ep-vt { opacity: 0; }

/* ---------- 7. Why cards: blue rule grows in ----------
   Child containers with CSS class ep-why-card. */
.ep-why-card { position: relative; overflow: hidden; }
.ep-why-card::after {
	content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
	background: var(--ep-blue); transform: scaleX(0); transform-origin: left;
	transition: transform 1.2s var(--ep-ease) .3s;
}
.ep-why-card.is-in::after, html:not(.ep-js-ready) .ep-why-card::after { transform: scaleX(1); }

/* ---------- 8. Promise deck: stacked cards ----------
   Container class ep-deck holding child containers class ep-card.
   Buttons with classes ep-deck-prev / ep-deck-next drive it. */
.ep-deck { position: relative; perspective: 1600px; perspective-origin: 50% 0%; min-height: 440px; }
.ep-deck.ep-js > .ep-card, .ep-deck.ep-js > .e-con-inner > .ep-card {
	--k: 0; position: absolute !important; inset: 0; margin: 0;
	transform-origin: 50% 0;
	transform: translateY(calc(var(--k) * -22px)) translateZ(calc(var(--k) * -80px));
	z-index: calc(20 - var(--k)); opacity: calc(1 - var(--k) * .22);
	filter: brightness(calc(1 - var(--k) * .08));
	transition: transform .8s var(--ep-ease), opacity .8s, filter .8s;
	box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .65);
}
.ep-deck .ep-card.is-fly { animation: ep-fly .7s var(--ep-ease) forwards; }
@keyframes ep-fly { to { transform: translateX(110%) translateY(30px) rotate(9deg); opacity: 0; } }
.ep-deck:not(.ep-js) { display: grid !important; gap: 14px; min-height: 0; }
@media (max-width: 1024px) { .ep-deck { margin-top: 110px; } }
@media (max-width: 767px) { .ep-deck { min-height: 500px; } }

/* ---------- 9. Staircase process ----------
   Container class ep-stairs with 5 child containers class ep-step. */
.ep-stairs { counter-reset: ep-step; align-items: flex-end !important; }
/* Elementor reserves a container's ::before for its background overlay,
   so the step number hangs off the first heading instead. */
.ep-step { counter-increment: ep-step; }
.ep-step > .elementor-widget-heading:first-child .elementor-heading-title::before {
	content: counter(ep-step, decimal-leading-zero);
	display: block; font: 400 56px/1 var(--ep-display); color: var(--ep-blue); margin-bottom: 26px;
}
.ep-stairs > .ep-step:nth-child(2), .ep-stairs > .e-con-inner > .ep-step:nth-child(2) { margin-bottom: 46px; }
.ep-stairs > .ep-step:nth-child(3), .ep-stairs > .e-con-inner > .ep-step:nth-child(3) { margin-bottom: 92px; }
.ep-stairs > .ep-step:nth-child(4), .ep-stairs > .e-con-inner > .ep-step:nth-child(4) { margin-bottom: 138px; }
.ep-stairs > .ep-step:nth-child(5), .ep-stairs > .e-con-inner > .ep-step:nth-child(5) { margin-bottom: 184px; }
@media (max-width: 1024px) {
	.ep-step > .elementor-widget-heading:first-child .elementor-heading-title::before { font-size: 40px; margin-bottom: 14px; }
	.ep-stairs .ep-step { margin-bottom: 0 !important; --width: auto; width: auto !important; max-width: none !important; }
	.ep-stairs .ep-step:nth-child(2) { margin-left: 18px; }
	.ep-stairs .ep-step:nth-child(3) { margin-left: 36px; }
	.ep-stairs .ep-step:nth-child(4) { margin-left: 54px; }
	.ep-stairs .ep-step:nth-child(5) { margin-left: 72px; }
}
@media (max-width: 767px) {
	.ep-stairs .ep-step:nth-child(n) { margin-left: 0; }
}

/* ---------- 10. CTA floor: photo tilts up as you scroll ----------
   Image widget with CSS class ep-floor. */
.ep-floor { perspective: 1300px; perspective-origin: 50% 0; }
.ep-floor img {
	width: 100%; height: clamp(300px, 40vw, 580px) !important; object-fit: cover;
	border-radius: 16px 16px 0 0; transform-origin: 50% 100%;
	transform: rotateX(calc((1 - var(--p, 1)) * 64deg));
	transition: transform .15s linear;
	box-shadow: 0 -40px 90px -40px rgba(0, 124, 193, .4);
}

/* ---------- 11. Service marquee ----------
   Icon List widget (layout Inline) with CSS class ep-marquee;
   add ep-marquee--rev to the second row. */
.ep-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ep-marquee .elementor-icon-list-items { flex-wrap: nowrap !important; width: max-content; }
.ep-marquee.ep-js .elementor-icon-list-items { animation: ep-mq var(--dur, 80s) linear infinite; }
.ep-marquee--rev.ep-js .elementor-icon-list-items { animation-direction: reverse; }
.ep-marquee:hover .elementor-icon-list-items, .ep-marquee:focus-within .elementor-icon-list-items { animation-play-state: paused; }
.ep-marquee .elementor-icon-list-item { white-space: nowrap; padding-right: 34px !important; margin: 0 !important; }
.ep-marquee .elementor-icon-list-item::after { content: ""; display: inline-block; width: 12px; height: 12px; background: var(--ep-blue); transform: rotate(45deg); margin-left: 34px; position: static !important; border: 0 !important; }
@keyframes ep-mq { to { transform: translateX(-50%); } }

/* ---------- 12. Page hero 3D frame ----------
   Image widget with CSS class ep-pframe (page heroes). */
.ep-pframe { perspective: 1300px; }
.ep-pframe img {
	aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: 12px;
	transform: rotateY(-14deg) rotateX(4deg);
	animation: ep-swing 1.8s var(--ep-ease) both;
	box-shadow: 40px 60px 80px -40px rgba(0, 0, 0, .7);
	-webkit-box-reflect: below 14px linear-gradient(transparent 70%, rgba(255, 255, 255, .12));
}
@keyframes ep-swing { from { transform: rotateY(-48deg) rotateX(10deg) translateZ(-260px); opacity: 0; } to { transform: rotateY(-14deg) rotateX(4deg); opacity: 1; } }

/* Fixed-ratio photo frames (story and detail images) */
.ep-frame img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }

/* ---------- 13. Chips and bullet grids ---------- */
.ep-chips .elementor-icon-list-items { gap: 8px; }
.ep-chips .elementor-icon-list-item {
	background: #fff; border-radius: 999px; padding: 9px 16px !important; margin: 0 !important;
}
.ep-chips .elementor-icon-list-item::after { display: none !important; }

/* Service "what's included": Post Content widget with CSS class ep-offer.
   Write the bullets as a normal list in the service editor. */
.ep-offer ul { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ep-offer li { position: relative; background: #fff; border-radius: 10px; padding: 14px 16px 14px 40px; color: var(--ep-ink); font-weight: 500; }
.ep-offer li::before { content: ""; position: absolute; left: 18px; top: 22px; width: 8px; height: 8px; background: var(--ep-blue); transform: rotate(45deg); }
@media (max-width: 767px) { .ep-offer ul { grid-template-columns: 1fr; } }

/* ---------- 14. Service cards (Loop Item) ---------- */
.ep-card-link { text-decoration: none; transition: transform .5s var(--ep-ease), box-shadow .5s; }
.ep-card-link:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -30px rgba(6, 42, 71, .45); }
.ep-card-media img { aspect-ratio: 16 / 11; width: 100%; object-fit: cover; transition: transform .9s var(--ep-ease); }
.ep-card-link:hover .ep-card-media img { transform: scale(1.06); }
.ep-card-media { overflow: hidden; }

/* ---------- 15. Contact info list (big serif values) ---------- */
.ep-info .elementor-icon-list-item { border-top: 1px solid rgba(6, 42, 71, .14); padding: 18px 0 !important; align-items: flex-start !important; }
.ep-info .elementor-icon-list-item::after { display: none !important; }

/* Form polish (Elementor Pro Form, CSS class ep-form) */
.ep-form .elementor-field-textual { color-scheme: light; transition: border-color .3s, background-color .3s; }
.ep-form .elementor-field-textual:focus { background-color: #fff !important; border-color: var(--ep-blue) !important; box-shadow: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.ep-rise .elementor-heading-title, .ep-pframe img { animation: none; }
	.ep-marquee .elementor-icon-list-items { animation: none !important; }
	.ep-marquee { overflow-x: auto; }
	.ep-floor img { transform: none; }
	.ep-acc .ep-pan, .ep-pan .ep-pc, .ep-deck .ep-card { transition: none !important; }
	.ep-words .ep-w { opacity: 1 !important; transition: none; }
}

/* In the Elementor editor, show everything flat so it is easy to edit */
.elementor-editor-active .ep-pan .ep-pc { opacity: 1; transform: none; }
.elementor-editor-active .ep-pan .ep-vt { display: none; }
.elementor-editor-active .ep-floor img { transform: none; }
.elementor-editor-active .ep-deck { display: grid !important; gap: 14px; min-height: 0; }

/* Round icon-only deck controls (Button widgets with class ep-round) */
.ep-round .elementor-button { width: 54px; height: 54px; padding: 0 !important; justify-content: center; }
.ep-round .elementor-button-icon { background: transparent; margin: 0; width: auto; height: auto; }
.ep-round .elementor-button:hover { background-color: var(--ep-navy) !important; border-color: var(--ep-navy) !important; }
.ep-round .elementor-button:hover .elementor-button-icon { transform: none; }
.ep-round .elementor-button-text { display: none; }

/* Links inside text on blue bands (breadcrumbs, footer credit) stay white */
.ep-phero .elementor-widget-text-editor a,
.ep-footer .elementor-widget-text-editor a,
.ep-hero .elementor-widget-text-editor a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Header layout guard ---------- */
.ep-header .ep-logo { flex: 0 0 auto !important; }
.ep-header .ep-logo img { width: 92px !important; max-width: none; height: auto; }
@media (max-width: 767px) { .ep-header .ep-logo img { width: 76px !important; } }
.ep-header .elementor-widget-nav-menu { flex: 1 1 auto; }

/* ---------- Gallery captions: hidden until hover, pill at the bottom ---------- */
.ep-pgrid .elementor-gallery-item__overlay,
.ep-gal .elementor-gallery-item__overlay { background: linear-gradient(0deg, rgba(6, 42, 71, .45), transparent 55%) !important; opacity: 0; transition: opacity .35s; }
.ep-pgrid .elementor-gallery-item__content,
.ep-gal .elementor-gallery-item__content { justify-content: flex-end !important; align-items: flex-start !important; padding: 14px !important; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.ep-pgrid .elementor-gallery-item__title,
.ep-gal .elementor-gallery-item__title { background: rgba(6, 42, 71, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 14px; padding: 10px 14px; border-radius: 8px; text-align: left; }
.ep-pgrid .e-gallery-item:hover .elementor-gallery-item__overlay, .ep-pgrid .e-gallery-item:focus-visible .elementor-gallery-item__overlay,
.ep-gal .e-gallery-item:hover .elementor-gallery-item__overlay, .ep-gal .e-gallery-item:focus-visible .elementor-gallery-item__overlay { opacity: 1; }
.ep-pgrid .e-gallery-item:hover .elementor-gallery-item__content, .ep-pgrid .e-gallery-item:focus-visible .elementor-gallery-item__content,
.ep-gal .e-gallery-item:hover .elementor-gallery-item__content, .ep-gal .e-gallery-item:focus-visible .elementor-gallery-item__content { opacity: 1; transform: none; }
@media (hover: none) {
	.ep-pgrid .elementor-gallery-item__content, .ep-gal .elementor-gallery-item__content,
	.ep-pgrid .elementor-gallery-item__overlay, .ep-gal .elementor-gallery-item__overlay { opacity: 1; transform: none; }
}

/* ---------- Form submit: left aligned, sized to its label ---------- */
.ep-form .elementor-field-type-submit { flex: 0 0 auto !important; width: auto !important; max-width: none !important; }
.ep-form .elementor-field-type-submit .elementor-button { width: auto; padding-left: 24px !important; padding-right: 8px !important; }
@media (max-width: 767px) { .ep-form .elementor-field-type-submit { width: 100% !important; } }

/* Header: right group (phone + button) sizes to its content so the menu gets the middle.
   Elementor gives nested containers 100% width by default. */
.ep-header > .e-con-inner > .e-con:last-child,
.ep-header > .e-con:last-child,
.ep-header .ep-header-right { width: auto !important; --width: auto; flex: 0 0 auto !important; }
.ep-header .elementor-widget-nav-menu { flex: 1 1 auto !important; width: auto !important; min-width: 0; }
.ep-header .elementor-nav-menu--main > .elementor-nav-menu { justify-content: center; flex-wrap: nowrap; }

/* Post Excerpt widget colors (hero lead on blue, card summary on white) */
.ep-phero .elementor-widget-theme-post-excerpt,
.ep-phero .elementor-widget-theme-post-excerpt p { color: #fff; font-size: var(--e-global-typography-eplead-font-size, 20px); line-height: 1.6; }
.ep-card-link .elementor-widget-theme-post-excerpt,
.ep-card-link .elementor-widget-theme-post-excerpt p { color: var(--ep-slate); font-size: 15.5px; line-height: 1.55; margin: 0; }

/* Gallery filter tabs: white text on blue, active tab is a white pill */
.ep-gal .elementor-gallery__titles-container { gap: 6px; margin-bottom: 30px; }
.ep-gal .elementor-gallery-title { color: #fff !important; border-radius: 999px; padding: 10px 18px !important; font-weight: 600; }
.ep-gal .elementor-gallery-title::before, .ep-gal .elementor-gallery-title::after { display: none !important; }
.ep-gal .elementor-gallery-title:hover { background: rgba(255, 255, 255, .14); }
.ep-gal .elementor-gallery-title.elementor-item-active,
.ep-gal .elementor-gallery-title.e--active { background: #fff !important; color: var(--ep-ink) !important; }

/* ---------- Button sizing guard (all arrow pills the same height) ---------- */
.ep-btn .elementor-button:not(.ep-round .elementor-button) { padding: 7px 7px 7px 24px !important; line-height: 1; min-height: 52px; }
/* Icon After: Elementor renders the icon first and uses row-reverse, keep that. */
.ep-btn .elementor-button-content-wrapper { flex-direction: row-reverse !important; }
.ep-btn .elementor-button-text { flex: 0 1 auto; }
.ep-form .elementor-field-type-submit .elementor-button { padding: 7px 7px 7px 24px !important; min-height: 52px; height: auto; }

/* Services dropdown arrow follows the menu text color in the white sticky header */
.ep-header.elementor-sticky--effects .elementor-nav-menu--main .sub-arrow,
.ep-header.elementor-sticky--effects .elementor-nav-menu--main .sub-arrow svg { color: var(--ep-ink) !important; fill: var(--ep-ink) !important; }

/* Phones: long labels wrap inside the pill instead of running off screen */
@media (max-width: 767px) {
	.ep-btn .elementor-button { white-space: normal; max-width: 100%; text-align: left; line-height: 1.25; }
	.ep-btn .elementor-button-text { min-width: 0; }
	.ep-btn .elementor-button-icon { align-self: center; }
}

/* Burger menu (tablet and phone): sits on the right, turns ink in the white sticky header */
@media (max-width: 1024px) {
	.ep-header .elementor-widget-nav-menu .elementor-menu-toggle { margin-left: auto !important; margin-right: 0 !important; }
}
.ep-header.elementor-sticky--effects .elementor-menu-toggle,
.ep-header.elementor-sticky--effects .elementor-menu-toggle svg,
.ep-header.elementor-sticky--effects .elementor-menu-toggle i {
	color: var(--ep-ink) !important; fill: var(--ep-ink) !important;
}
.ep-header.elementor-sticky--effects .elementor-menu-toggle { border-color: rgba(6, 42, 71, .4) !important; }
/* Phones: the phone link and button are both hidden, so drop their empty group */
@media (max-width: 767px) {
	.ep-header > .e-con-inner > .e-con:last-child, .ep-header > .e-con:last-child, .ep-header .ep-header-right { display: none !important; }
}

/* ---------- Service Areas ---------- */
/* Mega dropdown: menu item with CSS class ep-mega shows its children in 3 columns (desktop menu only) */
.elementor-nav-menu--main .ep-mega > .sub-menu {
	column-count: 3; column-gap: 0;
	width: 660px !important; min-width: 660px !important; max-width: none !important;
	padding: 10px !important;
}
.elementor-nav-menu--main .ep-mega > .sub-menu > li { break-inside: avoid; }
.elementor-nav-menu--main .ep-mega > .sub-menu a { white-space: nowrap; }
@media (max-width: 1100px) { .elementor-nav-menu--main .ep-mega > .sub-menu { column-count: 2; width: 440px !important; min-width: 440px !important; } }

/* Area copy (Post Content, class ep-area-copy) */
.ep-area-copy h2 { font: 400 var(--e-global-typography-eph2-font-size, 64px)/1.04 var(--ep-display); letter-spacing: -1px; color: var(--ep-ink); margin: 0 0 24px; text-wrap: balance; }
.ep-area-copy h3 { font: 400 26px/1.2 var(--ep-display); color: var(--ep-ink); margin: 36px 0 14px; text-wrap: balance; }
.ep-area-copy p { max-width: 64ch; margin: 0 0 1em; }
.ep-area-copy p:first-of-type { font-size: var(--e-global-typography-eplead-font-size, 20px); line-height: 1.6; }
.ep-area-copy ul.ep-near { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ep-area-copy ul.ep-near li { background: #fff; color: var(--ep-ink); border-radius: 999px; padding: 9px 16px; font-size: 15px; font-weight: 500; }
.ep-area-copy .ep-zips { margin-top: 22px; font-size: 15.5px; }
.ep-area-copy .ep-zips strong { color: var(--ep-ink); }

/* Info card + map */
.ep-area-info .elementor-icon-list-item { border-top: 1px solid rgba(6, 42, 71, .12); padding: 10px 0 !important; margin: 0 !important; }
.ep-area-info .elementor-icon-list-item::after { display: none !important; }
.ep-area-info .elementor-icon-list-item a { color: var(--ep-ink); font-weight: 600; }
.ep-area-map iframe { border-radius: 14px; display: block; }

/* Area cards (Loop Item) */
.ep-area-card { transition: transform .5s var(--ep-ease), box-shadow .5s; }
.ep-area-more .elementor-heading-title { display: inline-flex; align-items: center; gap: 10px; }
.ep-area-more .elementor-heading-title::after {
	content: ""; width: 30px; height: 30px; border-radius: 50%; flex: none;
	background: var(--ep-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/14px no-repeat;
	transition: transform .45s var(--ep-ease);
}
.ep-area-card:hover .ep-area-more .elementor-heading-title::after { transform: rotate(-45deg); }
.ep-area-card .elementor-widget-theme-post-excerpt { color: var(--ep-slate); font-size: 15px; line-height: 1.55; }
.ep-area-card .ep-area-more { margin-top: auto !important; padding-top: 8px; }

/* ======================================================================
   v2.0: page-type layouts (Sub-Service, Service Area, Main Service).
   Same tokens as the rest of the site; new component classes only.
   ====================================================================== */

/* Breadcrumbs on blue heroes */
.ep-crumbs p { margin: 0; }
.ep-crumbs a { color: #fff !important; text-decoration: none !important; }
.ep-crumbs a:hover { text-decoration: underline !important; }

/* First paragraph of a copy block reads as a lead */
.ep-lead-first p { max-width: 64ch; }
.ep-lead-first p:first-child { font-size: var(--e-global-typography-eplead-font-size, 20px); line-height: 1.6; }

/* "What's included" list: Icon List with class ep-offer-list (2-col diamond cards) */
.ep-offer-list .elementor-icon-list-items { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px !important; }
.ep-offer-list .elementor-icon-list-item { position: relative; background: #fff; border-radius: 10px; padding: 14px 16px 14px 40px !important; margin: 0 !important; align-items: flex-start !important; }
.ep-offer-list .elementor-icon-list-item::before { content: ""; position: absolute; left: 18px; top: 22px; width: 8px; height: 8px; background: var(--ep-blue); transform: rotate(45deg); }
.ep-offer-list .elementor-icon-list-item::after { display: none !important; }
.ep-offer-list .elementor-icon-list-icon { display: none !important; }
.ep-offer-list .elementor-icon-list-text { color: var(--ep-ink); font-weight: 500; padding: 0 !important; }
@media (max-width: 767px) { .ep-offer-list .elementor-icon-list-items { grid-template-columns: 1fr; } }

/* Warning-sign cards (white on blue) */
.ep-sign-card { height: 100%; }
.ep-sign-card .elementor-heading-title { display: flex; gap: 12px; align-items: baseline; }
.ep-sign-card .elementor-heading-title::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--ep-blue); transform: rotate(45deg) translateY(-2px); }

/* Process timeline: numbered circles joined by a hairline */
.ep-timeline { counter-reset: ep-tl; position: relative; }
.ep-tl-step { counter-increment: ep-tl; position: relative; padding-top: 84px !important; }
.ep-tl-step::after {
	content: counter(ep-tl, decimal-leading-zero);
	position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%;
	display: grid; place-items: center; background: var(--ep-blue); color: #fff;
	font: 400 22px/1 var(--ep-display); z-index: 1;
}
.ep-tl-step::before { content: ""; position: absolute; left: 56px; right: -28px; top: 28px; height: 1px; background: rgba(6, 42, 71, .2); }
.ep-timeline > .ep-tl-step:last-child::before, .ep-timeline > .e-con-inner > .ep-tl-step:last-child::before { display: none; }
@media (max-width: 1024px) { .ep-tl-step:nth-child(2n)::before { display: none; } }
@media (max-width: 767px) {
	.ep-tl-step { padding: 0 0 0 76px !important; min-height: 56px; }
	.ep-tl-step::before { display: block !important; left: 27px; right: auto; top: 56px; bottom: -28px; width: 1px; height: auto; }
	.ep-timeline > .ep-tl-step:last-child::before { display: none !important; }
}

/* Benefit grid: hairline on top, check badge */
.ep-benefit { border-top: 1px solid var(--ep-line); position: relative; }
.ep-on-light .ep-benefit { border-top-color: rgba(6, 42, 71, .14); }
.ep-benefit .elementor-heading-title { display: flex; gap: 14px; align-items: center; }
.ep-benefit .elementor-heading-title::before {
	content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%;
	background: var(--ep-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/15px no-repeat;
}

/* FAQ: Nested Accordion with class ep-faq, white rounded items */
.ep-faq .e-n-accordion { display: grid; gap: 10px; }
.ep-faq .e-n-accordion-item { background: #fff; border-radius: 14px; overflow: hidden; border: 0 !important; }
.ep-faq .e-n-accordion-item-title {
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	padding: 22px 26px !important; border: 0 !important; background: #fff !important; cursor: pointer; list-style: none;
}
.ep-faq .e-n-accordion-item-title::-webkit-details-marker { display: none; }
.ep-faq .e-n-accordion-item-title-text {
	font: 400 var(--e-global-typography-eph3-font-size, 24px)/1.25 var(--ep-display) !important;
	color: var(--ep-ink) !important; margin: 0; font-size: clamp(19px, 1.6vw, 22px) !important;
}
.ep-faq .e-n-accordion-item-title-icon {
	flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid !important; place-items: center;
	background: var(--ep-light); color: var(--ep-ink);
}
.ep-faq .e-n-accordion-item-title-header { flex: 1 1 auto !important; order: 1 !important; justify-content: flex-start !important; text-align: left; }
.ep-faq .e-n-accordion-item-title-icon { order: 2 !important; }
.ep-faq .e-n-accordion-item-title-icon svg { width: 14px !important; height: 14px !important; fill: var(--ep-ink) !important; color: var(--ep-ink) !important; }
.ep-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon { background: var(--ep-navy); }
.ep-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg { fill: #fff !important; color: #fff !important; }
.ep-faq .e-n-accordion-item > .e-con { padding: 0 26px 24px !important; border: 0 !important; background: #fff !important; }
.ep-faq .e-n-accordion-item > .e-con p { margin: 0; max-width: 68ch; }
@media (min-width: 1025px) { .ep-faq-intro { position: sticky !important; top: 120px; } }

/* Chips variants */
.ep-chips .elementor-icon-list-item a { color: inherit; text-decoration: none; }
.ep-chips .elementor-icon-list-item:has(a):hover { background: var(--ep-sky); }
.ep-chips .elementor-icon-list-text { color: var(--ep-ink); font-weight: 500; padding: 0 !important; }
.ep-chips .elementor-icon-list-icon { display: none !important; }
.ep-chips--hero .elementor-icon-list-items { margin: 0 0 28px !important; }
.ep-chips--hero .elementor-icon-list-item { background: rgba(255, 255, 255, .1) !important; border: 1px solid var(--ep-line); }
.ep-chips--hero .elementor-icon-list-text { color: #fff !important; font-size: 14px; }
.ep-chips--soft .elementor-icon-list-item { background: var(--ep-light) !important; }

/* Link cards (related services, services in an area) */
.ep-card-link { color: inherit; display: flex !important; flex-direction: column; height: 100%; }
.ep-card-link > .e-con { flex-grow: 1; }
.ep-card-link .ep-area-more { margin-top: auto !important; padding-top: 8px; }
.ep-area-services .ep-card-link { border-top: 3px solid var(--ep-blue); }

/* Numbered local issues list */
.ep-issues { counter-reset: ep-iss; }
.ep-issue { counter-increment: ep-iss; border-top: 1px solid rgba(6, 42, 71, .14); padding-left: 64px !important; position: relative; }
.ep-issue:last-child { border-bottom: 1px solid rgba(6, 42, 71, .14); }
.ep-issue::after { content: counter(ep-iss, decimal-leading-zero); position: absolute; left: 0; top: 24px; font: 400 32px/1 var(--ep-display); color: var(--ep-blue); }

/* Area info card */
.ep-zips p { margin: 0; }
.ep-zips strong { color: var(--ep-ink); }
.ep-area-info-list .elementor-icon-list-item { border-top: 1px solid rgba(6, 42, 71, .12); padding: 10px 0 !important; margin: 0 !important; }
.ep-area-info-list .elementor-icon-list-item::after { display: none !important; }
.ep-area-info-list .elementor-icon-list-icon { display: none !important; }
.ep-area-info-list a { color: var(--ep-ink); font-weight: 600; }

/* CTA band on a light background */
.ep-cta--light .ep-floor img { box-shadow: 0 -40px 90px -40px rgba(6, 42, 71, .35); }

/* Editor: placeholders and helpers stay easy to click */
.elementor-editor-active .ep-faq .e-n-accordion-item > .e-con { min-height: 40px; }

/* Supporting photos on page-type layouts: wide crop once columns stack */
@media (max-width: 1024px) {
	.ep-frame--fit img { aspect-ratio: 16 / 10 !important; max-height: 460px; }
}