/*
Theme Name: Eli's Paver Patios POC
Theme URI: https://elispaverpatios.com/
Author: Kelly Creative / AllScapes POC
Description: Independent proof-of-concept theme reproducing the approved Eli's Paver Patios global foundation, responsive navigation and reconciled homepage proof-of-concept sections through the global production-faithful footer.
Version: 0.5.0-gallery-sharpness
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: elis-paver-patios
*/

:root {
	--eli-blue: #307dac;
	--eli-blue-bright: #2d769f;
	--eli-blue-icon: #4381b3;
	--eli-blue-pale: #e7eef5;
	--eli-ink: #0c0c0d;
	--eli-charcoal: #42484e;
	--eli-muted: #6f7072;
	--eli-white: #ffffff;
	--eli-rule: #e3e3e3;
	--eli-shadow: 0 14px 30px rgb(0 0 0 / 0.08);
	--eli-container: 1140px;
	--eli-container-wide: 1140px;
	--eli-gutter: clamp(20px, 4vw, 48px);
	--eli-font-body: "Poppins", Arial, sans-serif;
	--eli-font-heading: "Lexend", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* 0.2.3: the approved hero accent is identical in editor and front end. */
.eli-hero-title-accent { color: #C9E4F3; }
body {
	margin: 0;
	background: var(--eli-white);
	color: var(--eli-ink);
	font-family: var(--eli-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
body.eli-nav-open { overflow: visible; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }

.eli-screen-reader-text,
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.eli-screen-reader-text:focus,
.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
	left: 12px;
	top: 12px;
	padding: 10px 14px;
	z-index: 100000;
	background: #fff;
	color: #111;
	box-shadow: 0 0 0 3px var(--eli-blue);
}

.eli-container {
	width: min(calc(100% - (2 * var(--eli-gutter))), var(--eli-container));
	margin-inline: auto;
}
.eli-container-wide {
	width: min(calc(100% - (2 * var(--eli-gutter))), var(--eli-container-wide));
	margin-inline: auto;
}

/* Header foundation */
.eli-site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: #fff;
	box-shadow: 0 8px 18px rgb(0 0 0 / 0.08);
}
body.admin-bar .eli-site-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .eli-site-header { top: 46px; }
}
.eli-utility-bar {
	min-height: 38px;
	background: var(--eli-blue);
	color: #fff;
	font-size: 13px;
}
.eli-utility-inner {
	min-height: 38px;
	display: grid;
	grid-template-columns: 260px 1fr;
	align-items: center;
	gap: 18px;
}
.eli-utility-tagline {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: capitalize;
}
.eli-showrooms {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: flex-end;
	gap: clamp(30px, 5vw, 90px);
}
.eli-showrooms a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	white-space: nowrap;
}
.eli-showroom-icon { width: 17px; height: 17px; flex: 0 0 17px; }
.eli-showroom-address { display: none; }

.eli-tablet-quote { display: none; }
.eli-main-header {
	background: #fff;
	min-height: 76px;
}
.eli-main-header-inner {
	min-height: 76px;
	display: flex;
	align-items: center;
	gap: 30px;
}
.eli-brand {
	flex: 0 0 auto;
	width: 150px;
	text-decoration: none;
}
.eli-brand img { width: 150px; height: auto; }

.eli-nav-toggle {
	display: none;
	border: 0;
	width: 39px;
	height: 39px;
	padding: 0;
	margin-left: auto;
	background: var(--eli-blue-bright);
	color: #fff;
	cursor: pointer;
	align-items: center;
	justify-content: center;
}
.eli-nav-toggle svg { width: 25px; height: 25px; }
.eli-nav-toggle .eli-icon-close { display: none; }
.eli-nav-toggle[aria-expanded="true"] .eli-icon-menu { display: none; }
.eli-nav-toggle[aria-expanded="true"] .eli-icon-close { display: block; }

/* Mobile navigation exists in the DOM at all viewports for progressive enhancement,
   but must never participate in desktop layout. The responsive rule below enables it. */
.eli-mobile-panel { display: none; }

.eli-primary-nav { margin-left: auto; align-self: stretch; }
.eli-menu,
.eli-submenu,
.eli-mega-submenu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.eli-menu {
	height: 100%;
	display: flex;
	align-items: stretch;
	gap: 2px;
}
.eli-menu > li { position: relative; display: flex; align-items: stretch; }
.eli-menu-link,
.eli-submenu-link {
	border: 0;
	background: transparent;
	text-decoration: none;
	color: #0c0c0d;
	cursor: pointer;
}
.eli-menu-link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 76px;
	padding: 0 19px;
	font-size: 14px;
	font-weight: 400;
	white-space: nowrap;
}
.eli-menu-link[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 14px;
	height: 3px;
	background: var(--eli-blue-bright);
}
.eli-caret {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.eli-header-quote {
	align-self: center;
	margin-left: 12px;
	min-width: 171px;
	padding: 13px 18px;
	background: var(--eli-blue);
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	text-align: center;
	text-decoration: none;
}
.eli-header-quote:hover,
.eli-header-quote:focus-visible { background: #286b94; }

.eli-submenu,
.eli-mega-menu {
	position: absolute;
	top: calc(100% - 25px);
	left: 0;
	visibility: hidden;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	background: #fff;
	box-shadow: 0 15px 35px rgb(0 0 0 / 0.14);
	transition: opacity 130ms ease, transform 130ms ease, visibility 130ms;
	z-index: 70;
}
.eli-submenu { min-width: 220px; padding: 7px 0; }
.eli-menu-item:hover > .eli-submenu,
.eli-menu-item:focus-within > .eli-submenu,
.eli-menu-item:hover > .eli-mega-menu,
.eli-menu-item:focus-within > .eli-mega-menu,
.eli-menu-item.is-open > .eli-submenu,
.eli-menu-item.is-open > .eli-mega-menu {
	visibility: visible;
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
.eli-submenu-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 42px;
	padding: 9px 16px;
	font-size: 13px;
	line-height: 1.25;
}
.eli-submenu-link:hover,
.eli-submenu-link:focus-visible { background: #f3f5f6; }

.eli-mega-menu {
	left: -45px;
	min-height: 232px;
	padding: 0;
	overflow: visible;
	background: #fff;
}
.eli-services-mega {
	left: 0;
	--eli-mega-primary-width: 191px;
	--eli-mega-secondary-width: 163px;
	width: var(--eli-mega-primary-width);
}
.eli-about-mega {
	--eli-mega-primary-width: 199px;
	--eli-mega-secondary-width: 199px;
	width: var(--eli-mega-primary-width);
	left: 0;
}
.eli-mega-menu.has-active-child {
	width: calc(var(--eli-mega-primary-width) + var(--eli-mega-secondary-width));
}
.eli-mega-primary {
	position: relative;
	width: var(--eli-mega-primary-width);
	min-height: 232px;
	padding: 0;
	background: #fff;
}
.eli-mega-primary > li { position: static; }
.eli-mega-primary > li > .eli-submenu-link,
.eli-mega-child > li > .eli-submenu-link {
	min-height: 46px;
	padding: 10px 27px;
	font-size: 13px;
	line-height: 1.25;
}
.eli-mega-primary > li > .eli-submenu-link { gap: 12px; }
.eli-mega-parent.is-active > .eli-mega-trigger {
	background: var(--eli-charcoal);
	color: #fff;
}
.eli-mega-parent.is-active > .eli-mega-trigger:hover,
.eli-mega-parent.is-active > .eli-mega-trigger:focus-visible { background: var(--eli-charcoal); }
.eli-mega-arrow {
	width: 0;
	height: 0;
	margin-left: auto;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 5px solid currentColor;
	flex: 0 0 auto;
}
.eli-mega-child {
	position: absolute;
	top: 0;
	left: var(--eli-mega-primary-width);
	width: var(--eli-mega-secondary-width);
	min-height: 232px;
	margin: 0;
	padding: 0;
	list-style: none;
	display: none;
	background: #fff;
}
.eli-mega-parent.is-active > .eli-mega-child { display: block; }
.eli-mega-child .eli-submenu-link {
	justify-content: flex-start;
	padding-inline: 36px 18px;
}
.eli-about-mega .eli-mega-primary > li > .eli-submenu-link { padding-inline: 27px 20px; }
.eli-about-mega .eli-mega-child .eli-submenu-link { padding-inline: 36px 20px; }


/* Hero */
.eli-hero {
	position: relative;
	min-height: 623px;
	background-image:
		linear-gradient(rgb(22 66 94 / 0.48), rgb(22 66 94 / 0.48)),
		url("assets/images/hero-desktop.webp");
	background-size: cover;
	background-position: center center;
	color: #fff;
	display: flex;
	align-items: flex-start;
}
.eli-hero-inner {
	width: min(calc(100% - 40px), 1180px);
	margin-inline: auto;
	padding: 100px 0 88px;
	text-align: center;
}
.eli-hero-kicker {
	display: inline-block;
	margin: 0 0 36px;
	padding: 5px 25px 4px;
	background: #fff;
	border-left: 6px solid var(--eli-blue-bright);
	color: #111;
	font-size: 21px;
	font-weight: 500;
	line-height: 1.4;
}
.eli-hero-title {
	max-width: 1170px;
	margin: 0 auto 24px;
	font-family: var(--eli-font-heading);
	font-size: clamp(44px, 4.45vw, 64px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #fff;
}
.eli-hero-copy {
	max-width: 690px;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.62;
}
.eli-hero-copy strong { font-weight: 700; }
.eli-hero-actions {
	margin-top: 46px;
	display: flex;
	justify-content: center;
	gap: 20px;
}
.eli-button {
	min-height: 49px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 11px 38px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.eli-button-primary { background: var(--eli-blue-bright); color: #fff; min-width: 273px; }
.eli-button-primary:hover,
.eli-button-primary:focus-visible { background: #276f9f; }
.eli-button-secondary { border-color: #fff; color: #fff; min-width: 259px; }
.eli-button-secondary:hover,
.eli-button-secondary:focus-visible { background: #fff; color: #111; }
.eli-arrow { font-size: 20px; line-height: 1; }

/* Production entrance motion captured 2026-08-10. */
.eli-hero-kicker {
	animation: eli-hero-fade-down 680ms cubic-bezier(0.2, 0.7, 0.2, 1) 40ms both;
}
.eli-hero-title {
	animation: eli-hero-zoom-in 780ms cubic-bezier(0.2, 0.7, 0.2, 1) 140ms both;
	transform-origin: 50% 50%;
}

/* JavaScript marks the motion system ready before observing below-fold CTAs.
   This keeps the no-JS fallback fully visible. */
.eli-motion-ready .eli-hero-actions .eli-button {
	opacity: 0;
	transform: translate3d(0, 34px, 0);
}
.eli-motion-ready .eli-hero-actions.is-visible .eli-button {
	animation: eli-hero-fade-up 720ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.eli-motion-ready .eli-hero-actions.is-visible .eli-button:nth-child(1) { animation-delay: 140ms; }
.eli-motion-ready .eli-hero-actions.is-visible .eli-button:nth-child(2) { animation-delay: 240ms; }

@keyframes eli-hero-fade-down {
	0% { opacity: 0; transform: translate3d(0, -26px, 0); }
	100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes eli-hero-zoom-in {
	0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
	50% { opacity: 1; }
	100% { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes eli-hero-fade-up {
	0% { opacity: 0; transform: translate3d(0, 34px, 0); }
	100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Statistics */
.eli-stats-wrap {
	position: relative;
	z-index: 5;
	margin-top: -61px;
	padding: 0 var(--eli-gutter) 95px;
}
.eli-stats {
	max-width: 1300px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: #fff;
	box-shadow: var(--eli-shadow);
	padding: 50px 28px;
}
.eli-stat {
	position: relative;
	display: grid;
	grid-template-columns: 52px 1fr;
	align-items: center;
	gap: 18px;
	min-width: 0;
	padding: 0 22px;
}
.eli-stat + .eli-stat::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--eli-rule);
}
.eli-stat-icon {
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	background: var(--eli-blue-pale);
	color: var(--eli-blue-icon);
}
.eli-stat-icon svg { width: 24px; height: 24px; }
.eli-stat-number {
	margin: 0;
	font-family: var(--eli-font-heading);
	font-size: clamp(36px, 3.2vw, 50px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
}
.eli-stat-label {
	margin: 6px 0 0;
	color: var(--eli-muted);
	font-size: 14px;
	line-height: 1.35;
}

/* Visible focus */
a:focus-visible,
button:focus-visible {
	outline: 3px solid #f5c44d;
	outline-offset: 3px;
}


/* Responsive production mobile navigation.
   The live site swaps the normal compact header for an in-flow expanded menu;
   it is not a full-screen/off-canvas overlay. */
@media (max-width: 1100px) {
	body.eli-nav-open .eli-main-header,
	body.eli-nav-open .eli-tablet-quote { display: none; }

	/* The recording shows the whole expanded header changing the page flow very quickly.
	   JS measures the closed/open header heights and animates the masthead itself,
	   so the hero is displaced continuously rather than jumping. */
	.eli-site-header.is-mobile-nav-transitioning {
		overflow: hidden;
		transition: height 80ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	.eli-mobile-panel {
		display: none;
		position: relative;
		width: 100%;
		background: #fff;
	}
	.eli-mobile-panel.is-open { display: block; }

	.eli-mobile-quote {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 52px;
		background: var(--eli-blue-bright);
		color: #fff;
		font-family: var(--eli-font-heading);
		font-size: 21px;
		font-weight: 700;
		line-height: 1;
		text-decoration: none;
	}

	.eli-mobile-head {
		min-height: 83px;
		padding: 0 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.eli-mobile-head a { display: block; line-height: 0; }
	.eli-mobile-head img { width: 145px; height: auto; }
	.eli-mobile-close {
		width: 37px;
		height: 39px;
		padding: 0;
		border: 0;
		background: var(--eli-blue-bright);
		color: #fff;
		display: grid;
		place-items: center;
		cursor: pointer;
	}
	.eli-mobile-close svg { width: 22px; height: 22px; }
	.eli-nav-toggle:hover,
	.eli-nav-toggle:active,
	.eli-mobile-close:hover,
	.eli-mobile-close:active { background: #000; }

	.eli-mobile-nav { padding: 0 20px; }
	.eli-mobile-menu { list-style: none; margin: 0; padding: 0 0 20px; }
	.eli-mobile-item { margin: 0; padding: 0; border: 0; }
	.eli-mobile-row {
		min-height: 40px;
		display: flex;
		align-items: stretch;
		background: #fff;
		color: #343a40;
	}
	.eli-mobile-item.is-current > .eli-mobile-row,
	.eli-mobile-item.is-open > .eli-mobile-row {
		background: var(--eli-charcoal);
		color: #fff;
	}
	.eli-mobile-row > a,
	.eli-mobile-row > button {
		border: 0;
		background: transparent;
		color: inherit;
		text-decoration: none;
		text-align: left;
		font-size: 13px;
		font-weight: 400;
		line-height: 1.4;
	}
	.eli-mobile-row > a {
		display: flex;
		align-items: center;
		flex: 0 0 auto;
		padding: 9px 0 9px 20px;
	}
	.eli-mobile-item.is-current .eli-mobile-row > a { flex: 1 1 auto; }
	.eli-mobile-row > button {
		width: 26px;
		flex: 0 0 26px;
		padding: 0;
		display: grid;
		place-items: center;
		cursor: pointer;
	}
	.eli-mobile-row > span { flex: 1 1 auto; }
	.eli-mobile-row > button .eli-caret { border-top-color: #343a40; }
	.eli-mobile-item.is-open .eli-mobile-row > button .eli-caret {
		border-top-color: #fff;
		transform: rotate(180deg);
	}

	/* Production recording: submenus expand/collapse by height, with no fade.
	   JS supplies the measured pixel height, then returns an open submenu to auto. */
	.eli-mobile-submenu {
		list-style: none;
		margin: 0;
		padding: 0;
		display: block;
		height: 0;
		overflow: hidden;
		visibility: hidden;
		background: #fff;
		transition: height 180ms cubic-bezier(0.4, 0, 0.2, 1);
	}
	.eli-mobile-item.is-open > .eli-mobile-submenu,
	.eli-mobile-item.is-closing > .eli-mobile-submenu { visibility: visible; }
	.eli-mobile-submenu a {
		display: flex;
		align-items: center;
		min-height: 40px;
		padding: 9px 28px;
		border: 0;
		color: #343a40;
		font-size: 13px;
		font-weight: 400;
		line-height: 1.45;
		text-decoration: none;
	}
}

/* Tablet / compact desktop correction.
   Production at 768–1100px appears to expose an Elementor breakpoint artefact:
   the H1/statistics disappear and the header becomes an awkward hybrid. For the
   POC we preserve Eli's design language but restore the complete content hierarchy. */
@media (min-width: 768px) and (max-width: 1100px) {
	:root { --eli-gutter: 24px; }

	/* Keep the blue utility treatment, but make it a compact navigation aid rather
	   than reproducing production's two-line address block. */
	.eli-utility-bar { min-height: 44px; }
	.eli-utility-inner {
		min-height: 44px;
		grid-template-columns: 210px minmax(0, 1fr);
		gap: 18px;
	}
	.eli-utility-tagline {
		width: auto;
		font-size: 13px;
		line-height: 1.2;
		white-space: nowrap;
	}
	.eli-showrooms {
		display: flex;
		justify-content: flex-end;
		gap: clamp(18px, 3vw, 36px);
	}
	.eli-showrooms li:nth-child(2) { display: none; }
	.eli-showrooms a { font-size: 12px; white-space: nowrap; }
	.eli-showroom-name { display: inline; }
	.eli-showroom-address { display: none; }

	.eli-tablet-quote {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		padding: 0 20px;
		background: var(--eli-blue-bright);
		color: #fff;
		font-family: var(--eli-font-heading);
		font-size: 20px;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		text-decoration: none;
	}
	.eli-main-header,
	.eli-main-header-inner { min-height: 92px; }
	.eli-brand, .eli-brand img { width: 170px; }
	.eli-primary-nav,
	.eli-header-quote { display: none; }
	.eli-nav-toggle { display: inline-flex; }

	.eli-hero {
		min-height: 590px;
		background-position: center center;
	}
	.eli-hero-inner {
		width: min(calc(100% - 48px), 900px);
		padding: 62px 0 96px;
		text-align: center;
	}
	.eli-hero-kicker {
		margin: 0 0 28px;
		padding: 5px 20px 4px;
		border-left-width: 5px;
		font-size: 17px;
	}
	.eli-hero-title {
		visibility: visible;
		height: auto;
		max-width: 900px;
		margin: 0 auto 22px;
		overflow: visible;
		font-size: clamp(40px, 5.4vw, 58px);
		line-height: 1.08;
	}
	.eli-hero-copy {
		max-width: 680px;
		font-size: 16px;
		line-height: 1.58;
	}
	.eli-hero-actions {
		margin-top: 32px;
		align-items: stretch;
		justify-content: center;
		flex-direction: row;
		gap: 16px;
	}
	.eli-button { min-height: 49px; padding-inline: 28px; }
	.eli-button-primary { min-width: 260px; }
	.eli-button-secondary { min-width: 245px; }

	.eli-stats-wrap {
		display: block;
		margin-top: -56px;
		padding: 0 24px 72px;
	}
	.eli-stats {
		max-width: 1000px;
		padding: 34px 16px;
	}
	.eli-stat {
		grid-template-columns: 44px minmax(0, 1fr);
		gap: 12px;
		padding: 0 14px;
	}
	.eli-stat-icon { width: 44px; height: 44px; border-radius: 12px; }
	.eli-stat-icon svg { width: 21px; height: 21px; }
	.eli-stat-number { font-size: clamp(28px, 3.4vw, 38px); }
	.eli-stat-label { margin-top: 5px; font-size: 12px; }
}

/* At the narrower end of the repaired tablet range, the statistics reflow to
   two columns rather than being removed. */
@media (min-width: 768px) and (max-width: 899px) {
	.eli-utility-inner { grid-template-columns: 190px minmax(0, 1fr); }
	.eli-utility-tagline { font-size: 12px; }
	.eli-showrooms { gap: 16px; }
	.eli-showrooms a { font-size: 11px; }
	.eli-main-header,
	.eli-main-header-inner { min-height: 88px; }
	.eli-brand, .eli-brand img { width: 160px; }

	.eli-hero { min-height: 610px; }
	.eli-hero-inner { width: min(calc(100% - 40px), 780px); padding-top: 56px; }
	.eli-hero-title { font-size: clamp(40px, 6.2vw, 50px); }
	.eli-hero-copy { max-width: 650px; }
	.eli-button-primary { min-width: 250px; }
	.eli-button-secondary { min-width: 238px; }

	.eli-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 22px 20px;
	}
	.eli-stat {
		min-height: 102px;
		padding: 18px 24px;
	}
	.eli-stat:nth-child(3)::before { display: none; }
	.eli-stat:nth-child(n+3) { border-top: 1px solid var(--eli-rule); }
}

/* Mobile header and navigation */
@media (max-width: 767px) {
	:root { --eli-gutter: 10px; }
	.eli-utility-bar { display: none; }
	/* Production mobile header: the quote strip is present in the normal closed
	   state as well as the expanded navigation state. The open state uses the
	   equivalent .eli-mobile-quote inside the animated panel. */
	.eli-tablet-quote {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 52px;
		padding: 0 20px;
		background: var(--eli-blue-bright);
		color: #fff;
		font-family: var(--eli-font-heading);
		font-size: 21px;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		text-decoration: none;
	}
	.eli-main-header,
	.eli-main-header-inner { min-height: 103px; }
	.eli-main-header-inner { width: 100%; padding: 0 20px; }
	.eli-brand, .eli-brand img { width: 140px; }
	.eli-nav-toggle { display: inline-flex; }
	.eli-primary-nav,
	.eli-header-quote { display: none; }
	.eli-hero {
		min-height: 654px;
		background-image:
			linear-gradient(rgb(31 76 105 / 0.47), rgb(31 76 105 / 0.47)),
			url("assets/images/hero-mobile.webp");
		background-position: center top;
	}
	.eli-hero-inner {
		width: 100%;
		padding: 40px 20px 49px;
		text-align: center;
	}
	.eli-hero-kicker {
		margin: 0 0 27px;
		padding: 4px 12px 3px;
		border-left: 5px solid var(--eli-blue-bright);
		font-size: 14px;
		line-height: 1.45;
	}
	.eli-hero-title {
		max-width: 355px;
		margin-bottom: 20px;
		font-size: 38px;
		line-height: 1.1;
		letter-spacing: 0;
	}
	.eli-hero-copy { max-width: 350px; font-size: 16px; line-height: 1.62; }
	.eli-hero-actions { margin-top: 17px; flex-direction: column; gap: 12px; align-items: stretch; }
	.eli-button { width: 100%; min-width: 0; min-height: 48px; padding-inline: 15px; }

	.eli-stats-wrap {
		margin-top: -20px;
		padding: 0 10px 50px;
	}
	.eli-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 22px;
		padding: 11px 10px;
		box-shadow: 0 2px 8px rgb(0 0 0 / 0.18);
	}
	.eli-stat {
		min-height: 136px;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		gap: 8px;
		justify-items: center;
		align-content: center;
		padding: 10px 9px;
		border: 1px solid var(--eli-blue-bright);
		text-align: center;
	}
	.eli-stat + .eli-stat::before { display: none; }
	.eli-stat-icon { width: 52px; height: 52px; }
	.eli-stat-number { font-size: 21px; letter-spacing: 0; }
	.eli-stat-label { margin-top: 1px; font-size: 13px; line-height: 1.45; }
}

@media (min-width: 401px) and (max-width: 767px) {
	.eli-main-header,
	.eli-main-header-inner { min-height: 117px; }
	.eli-brand, .eli-brand img { width: 184px; }
	.eli-hero { min-height: 629px; }
	.eli-hero-inner { padding-top: 40px; }
	.eli-hero-title { font-size: 38px; max-width: 440px; }
	.eli-hero-copy { max-width: 440px; font-size: 16px; }
	.eli-stats { max-width: 460px; }
}

@media (max-width: 400px) {
	.eli-hero-title { font-size: 37px; }
	.eli-hero-copy { font-size: 16px; }
	.eli-stats { gap: 20px 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.eli-hero-kicker,
	.eli-hero-title,
	.eli-motion-ready .eli-hero-actions .eli-button {
		opacity: 1 !important;
		transform: none !important;
	}
	*, *::before, *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* --------------------------------------------------------------------------
   0.1.12 POC — Who We Are + Our Gallery
   Desktop remains recognisably faithful to the production composition. The
   responsive layouts deliberately improve on the captured 767px behaviour:
   no destructive people-image crop, no oversized Belgard badge, and no
   seven-card single-column gallery tunnel.
   -------------------------------------------------------------------------- */

.eli-about-section {
	padding: 96px 0 86px;
	background: #fff;
}
.eli-about-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.65fr) minmax(230px, 0.78fr) minmax(230px, 0.78fr);
	gap: 18px;
	align-items: stretch;
}
.eli-about-copy {
	align-self: center;
	padding-right: clamp(10px, 2.5vw, 42px);
}
.eli-section-eyebrow {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1;
}
.eli-section-eyebrow span {
	display: inline-block;
	padding: 7px 12px 7px 13px;
	border-left: 4px solid var(--eli-blue-bright);
	background: #edf3f7;
	color: #111;
	font-weight: 500;
}
.eli-about-copy h2,
.eli-gallery-heading h2 {
	margin: 0;
	font-family: var(--eli-font-heading);
	font-weight: 700;
	color: #060607;
}
.eli-about-copy h2 {
	max-width: 600px;
	margin-bottom: 22px;
	font-size: clamp(34px, 3vw, 45px);
	line-height: 1.12;
}
.eli-about-copy p:not(.eli-section-eyebrow) {
	max-width: 650px;
	margin: 0 0 18px;
	color: var(--eli-muted);
	font-size: 16px;
	line-height: 1.58;
}
.eli-about-copy p strong { color: #6b6d70; }
.eli-about-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 47px;
	margin-top: 5px;
	padding: 11px 22px;
	background: var(--eli-blue-bright);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}
.eli-about-button:hover,
.eli-about-button:focus-visible { background: #286b94; }

.eli-about-team,
.eli-about-support {
	margin: 0;
	overflow: hidden;
	background: #edf1f3;
}
.eli-about-team img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}
.eli-about-side {
	display: grid;
	grid-template-rows: minmax(0, 1.15fr) minmax(118px, 0.55fr);
	gap: 18px;
}
.eli-belgard-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px 22px;
	background: linear-gradient(180deg, #337fac 0%, #174b69 100%);
	color: #fff;
	text-align: center;
}
.eli-belgard-card img {
	width: min(132px, 58%);
	height: auto;
	margin-bottom: 17px;
}
.eli-belgard-card p {
	max-width: 250px;
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
}
.eli-about-support img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* --------------------------------------------------------------------------
   0.4.9 — Washington award banner
   Promoted from a staging Custom HTML workaround into a managed component.
   -------------------------------------------------------------------------- */
.eli-award-banner {
	padding: 34px var(--eli-gutter, 24px);
	background: #fff;
}
.eli-award-banner__inner {
	position: relative;
	display: flex;
	max-width: 1140px;
	min-height: 150px;
	margin: 0 auto;
	align-items: center;
	justify-content: center;
	gap: 28px;
	padding: 28px 48px;
	overflow: hidden;
	background: linear-gradient(112deg, #18567d 0%, #2f82af 100%);
	color: #fff;
	box-shadow: 0 12px 28px rgb(15 56 82 / .16);
}
.eli-award-banner__inner::before,
.eli-award-banner__inner::after {
	content: "";
	position: absolute;
	border: 1px solid rgb(255 255 255 / .16);
	border-radius: 50%;
}
.eli-award-banner__inner::before { width: 220px; height: 220px; left: -100px; top: -135px; }
.eli-award-banner__inner::after { width: 180px; height: 180px; right: -80px; bottom: -120px; }
.eli-award-banner__seal {
	position: relative;
	z-index: 1;
	display: grid;
	width: 78px;
	height: 78px;
	flex: 0 0 78px;
	place-items: center;
	border: 1px solid rgb(255 255 255 / .58);
	border-radius: 50%;
	background: rgb(255 255 255 / .11);
}
.eli-award-banner__seal svg { width: 43px; height: 43px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.eli-award-banner__copy { position: relative; z-index: 1; text-align: left; }
.eli-award-banner__eyebrow { margin: 0 0 7px; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; }
.eli-award-banner h2 { margin: 0; color: #fff; font-family: var(--eli-font-heading); font-size: clamp(27px, 3vw, 42px); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; }
.eli-award-banner__copy > p:last-child { margin: 10px 0 0; color: rgb(255 255 255 / .9); font-size: 15px; line-height: 1.45; }
@media (max-width: 781px) {
	.eli-award-banner { padding: 24px 12px; }
	.eli-award-banner__inner { min-height: 0; flex-direction: column; gap: 14px; padding: 25px 18px 27px; text-align: center; }
	.eli-award-banner__seal { width: 62px; height: 62px; flex-basis: 62px; }
	.eli-award-banner__seal svg { width: 34px; height: 34px; }
	.eli-award-banner__copy { text-align: center; }
	.eli-award-banner h2 { font-size: clamp(25px, 7.4vw, 32px); line-height: 1.12; }
	.eli-award-banner__copy > p:last-child { max-width: 330px; margin: 10px auto 0; font-size: 13px; }
}

.eli-gallery-section {
	padding: 82px 0 96px;
	background: #f5f8f5;
}
.eli-gallery-heading {
	max-width: 700px;
	margin: 0 auto 48px;
	text-align: center;
}
.eli-gallery-heading h2 {
	font-size: clamp(36px, 3vw, 45px);
	line-height: 1.15;
}
.eli-gallery-heading p {
	margin: 20px 0 0;
	color: var(--eli-muted);
	font-size: 16px;
	line-height: 1.55;
}

.eli-project-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	grid-template-rows: repeat(2, 176px);
	gap: 18px;
}
.eli-project-card {
	position: relative;
	display: block;
	min-width: 0;
	overflow: hidden;
	background: #d9e0e3;
	color: #fff;
	text-decoration: none;
}
.eli-project-card picture,
.eli-project-card img {
	display: block;
	width: 100%;
	height: 100%;
}
.eli-project-card img {
	object-fit: cover;
	object-position: center;
}
.eli-project-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to bottom, rgb(0 0 0 / 0) 40%, rgb(0 0 0 / 0.13) 58%, rgb(0 0 0 / 0.88) 100%);
	pointer-events: none;
}
.eli-project-caption {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 16px;
	z-index: 2;
	display: grid;
	gap: 4px;
}
.eli-project-caption strong {
	font-family: var(--eli-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
}
.eli-project-caption small {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.25;
}
.eli-project-card:focus-visible {
	outline: 4px solid var(--eli-blue-bright);
	outline-offset: 3px;
}

/* Production-faithful five-column masonry character on wide screens. */
.eli-project-card--lacey { grid-column: 1; grid-row: 1 / span 2; }
.eli-project-card--federal { grid-column: 2; grid-row: 1; }
.eli-project-card--olympia-one { grid-column: 2; grid-row: 2; }
.eli-project-card--cooper { grid-column: 3; grid-row: 1 / span 2; }
.eli-project-card--tacoma { grid-column: 4; grid-row: 1; }
.eli-project-card--olympia-two { grid-column: 4; grid-row: 2; }
.eli-project-card--steilacoom { grid-column: 5; grid-row: 1 / span 2; }

/* Tablet / compact desktop: deliberate improvement. Copy leads, imagery becomes
   a readable two-column composition, and the gallery becomes an editorial grid. */
@media (min-width: 768px) and (max-width: 1100px) {
	.eli-about-section { padding: 78px 0 72px; }
	.eli-about-grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
		gap: 22px;
	}
	.eli-about-copy {
		grid-column: 1 / -1;
		padding-right: 0;
	}
	.eli-about-copy h2 { max-width: 760px; }
	.eli-about-copy p:not(.eli-section-eyebrow) { max-width: 820px; }
	.eli-about-team img {
		height: auto;
		aspect-ratio: auto;
		object-fit: contain;
	}
	.eli-about-side {
		grid-template-rows: auto minmax(130px, 0.5fr);
	}
	.eli-belgard-card { min-height: 310px; }
	.eli-belgard-card img { width: 126px; }

	.eli-gallery-section { padding: 72px 0 82px; }
	.eli-gallery-heading { margin-bottom: 38px; }
	.eli-project-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		grid-auto-rows: auto;
		gap: 16px;
	}
	.eli-project-card,
	.eli-project-card--lacey,
	.eli-project-card--federal,
	.eli-project-card--olympia-one,
	.eli-project-card--cooper,
	.eli-project-card--tacoma,
	.eli-project-card--olympia-two,
	.eli-project-card--steilacoom {
		grid-column: auto;
		grid-row: auto;
		aspect-ratio: 4 / 3;
	}
	.eli-project-card--lacey {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 7;
	}
	.eli-project-card img { object-position: center center; }
}

/* Mobile: preserve the content and brand, not the production breakpoint defects. */
@media (max-width: 767px) {
	.eli-about-section { padding: 58px 0 54px; }
	.eli-about-grid {
		width: min(calc(100% - 32px), 520px);
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.eli-about-copy { padding: 0; text-align: left; }
	.eli-section-eyebrow { margin-bottom: 16px; }
	.eli-about-copy h2 {
		margin-bottom: 18px;
		font-size: clamp(28px, 8vw, 36px);
		line-height: 1.12;
	}
	.eli-about-copy p:not(.eli-section-eyebrow) {
		font-size: 14px;
		line-height: 1.58;
	}
	.eli-about-button {
		width: 100%;
		margin-top: 2px;
		min-height: 46px;
	}
	.eli-about-team {
		order: 2;
		background: transparent;
	}
	.eli-about-team img {
		height: auto;
		object-fit: contain;
		object-position: center;
	}
	.eli-about-side {
		order: 3;
		display: grid;
		grid-template-rows: auto auto;
		gap: 14px;
	}
	.eli-belgard-card {
		display: grid;
		grid-template-columns: 92px minmax(0, 1fr);
		gap: 18px;
		align-items: center;
		min-height: 0;
		padding: 20px;
		text-align: left;
	}
	.eli-belgard-card img {
		width: 92px;
		margin: 0;
	}
	.eli-belgard-card p {
		font-size: 12px;
		line-height: 1.48;
	}
	.eli-about-support { aspect-ratio: 16 / 5; }

	.eli-gallery-section { padding: 54px 0 66px; }
	.eli-gallery-section .eli-container-wide { width: min(calc(100% - 20px), 560px); }
	.eli-gallery-heading {
		max-width: 480px;
		margin-bottom: 28px;
		padding-inline: 8px;
	}
	.eli-gallery-heading h2 { font-size: 30px; }
	.eli-gallery-heading p {
		margin-top: 13px;
		font-size: 13px;
		line-height: 1.5;
	}
	.eli-project-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.eli-project-card,
	.eli-project-card--federal,
	.eli-project-card--olympia-one,
	.eli-project-card--cooper,
	.eli-project-card--tacoma,
	.eli-project-card--olympia-two,
	.eli-project-card--steilacoom {
		aspect-ratio: 4 / 3;
	}
	.eli-project-card--lacey {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 8.3;
	}
	.eli-project-caption {
		left: 10px;
		right: 10px;
		bottom: 9px;
		gap: 2px;
	}
	.eli-project-caption strong {
		font-size: 12px;
		line-height: 1.18;
	}
	.eli-project-caption small { font-size: 10px; }
	.eli-project-card--lacey .eli-project-caption strong { font-size: 14px; }
}

@media (max-width: 420px) {
	.eli-belgard-card {
		grid-template-columns: 78px minmax(0, 1fr);
		gap: 14px;
		padding: 16px;
	}
	.eli-belgard-card img { width: 78px; }
	.eli-belgard-card p { font-size: 11px; }
	.eli-project-grid { gap: 8px; }
	.eli-project-caption strong { font-size: 11px; }
	.eli-project-caption small { font-size: 9px; }
}

/* --------------------------------------------------------------------------
   0.1.13 POC — original section photography + complete responsive gallery
   Uses the supplied full-size source photographs. The secondary team photo is
   desktop-only: below 1101px the owner/son image and Belgard credential carry
   the section without an unnecessary cropped supporting image. Gallery layout
   is explicitly reset at each breakpoint so all seven projects remain present.
   -------------------------------------------------------------------------- */

.eli-about-team img {
	object-position: center 28%;
}
.eli-about-support img {
	object-position: center 62%;
}

/* Make the seven-card desktop composition explicit rather than relying on
   inherited placement if later responsive rules change. */
.eli-project-grid {
	grid-template-areas:
		"lacey federal cooper tacoma steilacoom"
		"lacey olympia-one cooper olympia-two steilacoom";
}
.eli-project-card--lacey { grid-area: lacey; }
.eli-project-card--federal { grid-area: federal; }
.eli-project-card--olympia-one { grid-area: olympia-one; }
.eli-project-card--cooper { grid-area: cooper; }
.eli-project-card--tacoma { grid-area: tacoma; }
.eli-project-card--olympia-two { grid-area: olympia-two; }
.eli-project-card--steilacoom { grid-area: steilacoom; }

/* Original source images now have enough resolution to tolerate the intended
   desktop crops without the softness of screenshot-derived assets. */
.eli-project-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.eli-project-card--lacey img { object-position: center 54%; }
.eli-project-card--federal img { object-position: center 52%; }
.eli-project-card--olympia-one img { object-position: center 54%; }
.eli-project-card--cooper img { object-position: center 50%; }
.eli-project-card--tacoma img { object-position: center 52%; }
.eli-project-card--olympia-two img { object-position: center 52%; }
.eli-project-card--steilacoom img { object-position: center 58%; }

@media (max-width: 1100px) {
	/* The secondary team image adds little at tablet/mobile widths and was the
	   source of the awkward production crop. Keep it desktop-only. */
	.eli-about-support { display: none; }
	.eli-about-side { grid-template-rows: 1fr; }

	/* Hard reset all desktop grid-area placement before the responsive layout. */
	.eli-project-grid {
		grid-template-areas: none;
		grid-auto-flow: row;
	}
	.eli-project-card--lacey,
	.eli-project-card--federal,
	.eli-project-card--olympia-one,
	.eli-project-card--cooper,
	.eli-project-card--tacoma,
	.eli-project-card--olympia-two,
	.eli-project-card--steilacoom {
		grid-area: auto;
		grid-column: auto;
		grid-row: auto;
	}
}

@media (min-width: 768px) and (max-width: 1100px) {
	.eli-about-grid {
		align-items: start;
	}
	.eli-about-team {
		align-self: start;
	}
	.eli-about-team img {
		width: 100%;
		height: auto;
		aspect-ratio: auto;
		object-fit: contain;
		object-position: center;
	}
	.eli-about-side {
		align-self: stretch;
	}
	.eli-belgard-card {
		height: 100%;
		min-height: 0;
	}

	.eli-project-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: auto;
	}
	.eli-project-card {
		aspect-ratio: 4 / 3;
	}
	.eli-project-card--lacey {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 7;
	}
}

@media (max-width: 767px) {
	.eli-about-team img {
		width: 100%;
		height: auto;
		object-fit: contain;
		object-position: center;
	}

	/* One featured project plus six compact cards = all seven projects, with a
	   much shorter browsing path than the production single-column stack. */
	.eli-project-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: auto;
		gap: 10px;
	}
	.eli-project-card {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
	.eli-project-card--lacey {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 9;
	}
	.eli-project-card--lacey img {
		object-position: center 48%;
	}
	.eli-project-caption {
		left: 10px;
		right: 10px;
		bottom: 10px;
	}
}

@media (max-width: 420px) {
	.eli-project-grid { gap: 8px; }
	.eli-project-card { aspect-ratio: 1 / 0.82; }
	.eli-project-card--lacey { aspect-ratio: 16 / 9; }
}

/* --------------------------------------------------------------------------
   0.1.14 POC — mobile gallery flow correction
   Below 768px the gallery intentionally stops using CSS Grid placement and
   becomes a simple wrapping flex layout. This guarantees that the featured
   Lacey card occupies its own full row and the six supporting cards follow in
   normal document flow, two per row, with no inherited desktop/tablet tracks
   available to overlap them.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.eli-project-grid {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 10px;
	}

	.eli-project-card,
	.eli-project-card--federal,
	.eli-project-card--olympia-one,
	.eli-project-card--cooper,
	.eli-project-card--tacoma,
	.eli-project-card--olympia-two,
	.eli-project-card--steilacoom {
		flex: 0 0 calc((100% - 10px) / 2);
		width: calc((100% - 10px) / 2);
		min-width: 0;
		grid-area: auto;
		grid-column: auto;
		grid-row: auto;
		aspect-ratio: 4 / 3;
	}

	.eli-project-card--lacey {
		flex: 0 0 100%;
		width: 100%;
		grid-area: auto;
		grid-column: auto;
		grid-row: auto;
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 420px) {
	.eli-project-grid { gap: 8px; }
	.eli-project-card,
	.eli-project-card--federal,
	.eli-project-card--olympia-one,
	.eli-project-card--cooper,
	.eli-project-card--tacoma,
	.eli-project-card--olympia-two,
	.eli-project-card--steilacoom {
		flex-basis: calc((100% - 8px) / 2);
		width: calc((100% - 8px) / 2);
	}
	.eli-project-card--lacey {
		flex-basis: 100%;
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   0.1.15 POC — gallery micro-interaction + Why Choose Us
   The gallery See More treatment restores the production vertical offset.
   Why Choose Us keeps the production four-card desktop composition but uses a
   deliberate 2x2 layout below 1101px to reduce unnecessary mobile scrolling.
   The icon artwork is local inline SVG with lightweight CSS motion modelled on
   the supplied recording; no Lottie/Elementor runtime is carried forward.
   -------------------------------------------------------------------------- */

.eli-project-caption small {
	display: inline-block;
	transform: translateY(-8px);
}

.eli-difference-section {
	padding: 64px 0 80px;
	background: #fff;
}
.eli-difference-heading {
	margin: 0 auto 48px;
	text-align: center;
}
.eli-difference-heading .eli-section-eyebrow {
	margin-bottom: 18px;
}
.eli-difference-heading h2 {
	margin: 0;
	font-family: var(--eli-font-heading);
	font-size: clamp(36px, 3vw, 46px);
	font-weight: 700;
	line-height: 1.14;
	color: #050506;
}
.eli-difference-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}
.eli-difference-card {
	display: flex;
	min-width: 0;
	min-height: 334px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 26px 22px 24px;
	border: 1px solid var(--eli-blue-bright);
	background: #fff;
	text-align: center;
}
.eli-difference-icon {
	display: grid;
	width: 64px;
	height: 64px;
	margin: 0 auto 14px;
	place-items: center;
}
.eli-difference-svg {
	display: block;
	width: 60px;
	height: 60px;
	overflow: visible;
}
.eli-difference-card h3 {
	max-width: 220px;
	margin: 0;
	font-family: var(--eli-font-heading);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.28;
	color: #080809;
}
.eli-difference-card p {
	max-width: 245px;
	margin: 18px 0 0;
	color: var(--eli-muted);
	font-size: 15px;
	line-height: 1.5;
}

/* Inline SVG motion. The loops intentionally include a long resting state, as
   in the supplied recording, rather than keeping every icon in constant motion. */
.eli-difference-svg * {
	transform-box: fill-box;
	transform-origin: center;
}
.eli-difference-section:not(.is-in-view) .eli-difference-svg * {
	animation-play-state: paused !important;
}
.eli-difference-section.is-in-view .eli-icon-design .eli-design-grid {
	animation: eli-design-grid 5.2s ease-in-out infinite;
}
.eli-difference-section.is-in-view .eli-icon-design .eli-design-blue {
	animation: eli-design-blue 5.2s ease-in-out infinite;
}
.eli-difference-section.is-in-view .eli-icon-design .eli-design-accent {
	animation: eli-design-accent 5.2s ease-in-out infinite;
}
.eli-difference-section.is-in-view .eli-icon-guarantee .eli-guarantee-seal {
	animation: eli-seal-pop 5.2s ease-in-out .25s infinite;
}
.eli-difference-section.is-in-view .eli-icon-guarantee .eli-guarantee-ribbon-left {
	animation: eli-ribbon-left 5.2s ease-in-out .25s infinite;
}
.eli-difference-section.is-in-view .eli-icon-guarantee .eli-guarantee-ribbon-right {
	animation: eli-ribbon-right 5.2s ease-in-out .25s infinite;
}
.eli-difference-section.is-in-view .eli-icon-warranty .eli-warranty-shield {
	animation: eli-shield-pop 5.2s ease-in-out .5s infinite;
}
.eli-difference-section.is-in-view .eli-icon-warranty .eli-warranty-check {
	stroke-dasharray: 48;
	stroke-dashoffset: 0;
	animation: eli-check-draw 5.2s ease-in-out .5s infinite;
}
.eli-difference-section.is-in-view .eli-icon-warranty .eli-warranty-banner {
	animation: eli-banner-rise 5.2s ease-in-out .5s infinite;
}
.eli-difference-section.is-in-view .eli-icon-craftsman .eli-craft-block-1 {
	animation: eli-craft-block-one 5.2s ease-in-out .75s infinite;
}
.eli-difference-section.is-in-view .eli-icon-craftsman .eli-craft-block-2 {
	animation: eli-craft-block-two 5.2s ease-in-out .75s infinite;
}
.eli-difference-section.is-in-view .eli-icon-craftsman .eli-craft-block-3 {
	animation: eli-craft-block-three 5.2s ease-in-out .75s infinite;
}
.eli-difference-section.is-in-view .eli-icon-craftsman .eli-craft-ground {
	animation: eli-craft-ground 5.2s ease-in-out .75s infinite;
}

@keyframes eli-design-grid {
	0%, 7% { opacity: .12; transform: scale(.34); }
	13% { opacity: .55; transform: scale(.72); }
	21%, 88% { opacity: 1; transform: scale(1); }
	96%, 100% { opacity: .12; transform: scale(.34); }
}
@keyframes eli-design-blue {
	0%, 12% { opacity: 0; transform: translate(-10px, 9px) scale(.5); }
	20%, 88% { opacity: 1; transform: translate(0, 0) scale(1); }
	96%, 100% { opacity: 0; transform: translate(-10px, 9px) scale(.5); }
}
@keyframes eli-design-accent {
	0%, 16% { opacity: 0; transform: translate(12px, -10px) rotate(35deg) scale(.45); }
	25%, 88% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
	96%, 100% { opacity: 0; transform: translate(12px, -10px) rotate(35deg) scale(.45); }
}
@keyframes eli-seal-pop {
	0%, 8% { opacity: .25; transform: scale(.72) rotate(-5deg); }
	17%, 88% { opacity: 1; transform: scale(1) rotate(0); }
	96%, 100% { opacity: .25; transform: scale(.72) rotate(-5deg); }
}
@keyframes eli-ribbon-left {
	0%, 11% { opacity: 0; transform: translate(8px, -8px) scale(.55); }
	21%, 88% { opacity: 1; transform: translate(0, 0) scale(1); }
	96%, 100% { opacity: 0; transform: translate(8px, -8px) scale(.55); }
}
@keyframes eli-ribbon-right {
	0%, 13% { opacity: 0; transform: translate(-8px, -8px) scale(.55); }
	23%, 88% { opacity: 1; transform: translate(0, 0) scale(1); }
	96%, 100% { opacity: 0; transform: translate(-8px, -8px) scale(.55); }
}
@keyframes eli-shield-pop {
	0%, 8% { opacity: .2; transform: translateY(9px) scale(.7); }
	18%, 88% { opacity: 1; transform: translateY(0) scale(1); }
	96%, 100% { opacity: .2; transform: translateY(9px) scale(.7); }
}
@keyframes eli-check-draw {
	0%, 14% { opacity: 0; stroke-dashoffset: 48; }
	25%, 88% { opacity: 1; stroke-dashoffset: 0; }
	96%, 100% { opacity: 0; stroke-dashoffset: 48; }
}
@keyframes eli-banner-rise {
	0%, 16% { opacity: 0; transform: translateY(8px) scaleX(.65); }
	27%, 88% { opacity: 1; transform: translateY(0) scaleX(1); }
	96%, 100% { opacity: 0; transform: translateY(8px) scaleX(.65); }
}
@keyframes eli-craft-block-one {
	0%, 9% { opacity: 0; transform: translate(-14px, 10px) scale(.55); }
	18%, 88% { opacity: 1; transform: translate(0, 0) scale(1); }
	96%, 100% { opacity: 0; transform: translate(-14px, 10px) scale(.55); }
}
@keyframes eli-craft-block-two {
	0%, 13% { opacity: 0; transform: translateY(-16px) scale(.55); }
	22%, 88% { opacity: 1; transform: translateY(0) scale(1); }
	96%, 100% { opacity: 0; transform: translateY(-16px) scale(.55); }
}
@keyframes eli-craft-block-three {
	0%, 17% { opacity: 0; transform: translate(13px, 7px) scale(.55); }
	26%, 88% { opacity: 1; transform: translate(0, 0) scale(1); }
	96%, 100% { opacity: 0; transform: translate(13px, 7px) scale(.55); }
}
@keyframes eli-craft-ground {
	0%, 19% { opacity: 0; transform: scaleX(.4); }
	29%, 88% { opacity: 1; transform: scaleX(1); }
	96%, 100% { opacity: 0; transform: scaleX(.4); }
}

/* 2x2 is a deliberate responsive improvement. These are concise trust cards;
   the shorter grid preserves the content while avoiding four full viewport rows. */
@media (max-width: 1100px) {
	.eli-difference-section { padding: 74px 0 78px; }
	.eli-difference-heading { margin-bottom: 34px; }
	.eli-difference-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
	.eli-difference-card {
		min-height: 310px;
		padding: 28px 24px 26px;
	}
	.eli-difference-icon {
		width: 78px;
		height: 78px;
		margin-bottom: 16px;
	}
	.eli-difference-svg { width: 76px; height: 76px; }
	.eli-difference-card h3 { font-size: 19px; }
	.eli-difference-card p { margin-top: 16px; font-size: 14px; }
}

@media (max-width: 767px) {
	.eli-difference-section { padding: 58px 0 64px; }
	.eli-difference-section .eli-container-wide { width: min(calc(100% - 24px), 560px); }
	.eli-difference-heading {
		max-width: 460px;
		margin-bottom: 28px;
		padding-inline: 6px;
	}
	.eli-difference-heading .eli-section-eyebrow { margin-bottom: 15px; }
	.eli-difference-heading h2 {
		font-size: clamp(28px, 7.2vw, 34px);
		line-height: 1.16;
	}
	.eli-difference-grid { gap: 10px; }
	.eli-difference-card {
		min-height: 286px;
		padding: 22px 14px 20px;
	}
	.eli-difference-icon {
		width: 68px;
		height: 68px;
		margin-bottom: 13px;
	}
	.eli-difference-svg { width: 66px; height: 66px; }
	.eli-difference-card h3 {
		max-width: 170px;
		font-size: 16px;
		line-height: 1.22;
	}
	.eli-difference-card p {
		max-width: 190px;
		margin-top: 13px;
		font-size: 11.5px;
		line-height: 1.45;
	}
}

@media (max-width: 390px) {
	.eli-difference-section .eli-container-wide { width: min(calc(100% - 16px), 560px); }
	.eli-difference-grid { gap: 8px; }
	.eli-difference-card {
		min-height: 276px;
		padding: 19px 10px 18px;
	}
	.eli-difference-icon {
		width: 62px;
		height: 62px;
	}
	.eli-difference-svg { width: 60px; height: 60px; }
	.eli-difference-card h3 { font-size: 15px; }
	.eli-difference-card p { font-size: 10.8px; }
}

@media (prefers-reduced-motion: reduce) {
	.eli-difference-svg * {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		stroke-dashoffset: 0 !important;
	}
}


/* --------------------------------------------------------------------------
   0.1.16 POC — Our Services
   Production-faithful 3x2 desktop service grid with the recorded hover reveal.
   Below 1101px the six cards use a deliberate two-column / three-row layout to
   reduce scrolling while preserving all service choices and imagery.
   -------------------------------------------------------------------------- */

.eli-services-section {
	padding: 64px 0 98px;
	background: #f7f7f7;
}

.eli-services-heading {
	max-width: 930px;
	margin: 0 auto 52px;
	text-align: center;
}

.eli-services-heading .eli-section-eyebrow {
	margin-bottom: 17px;
}

.eli-services-heading h2 {
	margin: 0;
	font-family: var(--eli-font-heading);
	font-size: clamp(36px, 3vw, 46px);
	font-weight: 700;
	line-height: 1.12;
	color: #050506;
}

.eli-services-heading > p:last-child {
	max-width: 850px;
	margin: 24px auto 0;
	color: var(--eli-muted);
	font-size: 17px;
	line-height: 1.58;
}

.eli-services-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.eli-service-card {
	position: relative;
	display: block;
	aspect-ratio: 1 / .96;
	overflow: hidden;
	background: #101214;
	color: #fff;
	text-decoration: none;
	isolation: isolate;
}

.eli-service-card img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 420ms ease, opacity 300ms ease;
}

.eli-service-card:nth-child(1) img { object-position: 50% 52%; }
.eli-service-card:nth-child(2) img { object-position: 50% 50%; }
.eli-service-card:nth-child(3) img { object-position: 50% 50%; }
.eli-service-card:nth-child(4) img { object-position: 50% 50%; }
.eli-service-card:nth-child(5) img { object-position: 50% 56%; }
.eli-service-card:nth-child(6) img { object-position: 50% 54%; }

.eli-service-shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(7 10 12 / .53);
	transition: background-color 260ms ease;
}

.eli-service-title {
	position: absolute;
	inset: 0;
	display: grid;
	max-width: 82%;
	margin: auto;
	place-items: center;
	align-content: center;
	font-family: var(--eli-font-heading);
	font-size: clamp(25px, 2.05vw, 32px);
	font-weight: 700;
	line-height: 1.08;
	text-align: center;
	text-shadow: 0 2px 6px rgb(0 0 0 / .28);
	transition: opacity 220ms ease, transform 260ms ease;
}

.eli-service-detail {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 26px 28px;
	background: rgb(4 5 6 / .94);
	opacity: 0;
	text-align: center;
	transform: translateY(10px);
	transition: opacity 260ms ease, transform 300ms ease;
}

.eli-service-detail strong {
	display: block;
	margin: 0 0 13px;
	font-family: var(--eli-font-heading);
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}

.eli-service-detail > span {
	display: block;
	max-width: 290px;
	font-size: 12px;
	line-height: 1.45;
	color: rgb(255 255 255 / .88);
}

.eli-service-detail em {
	display: inline-flex;
	min-width: 112px;
	min-height: 34px;
	align-items: center;
	justify-content: center;
	margin-top: 18px;
	padding: 7px 18px;
	background: var(--eli-blue-bright);
	color: #fff;
	font-size: 11px;
	font-style: normal;
	font-weight: 600;
	line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
	.eli-service-card:hover .eli-service-title,
	.eli-service-card:focus-visible .eli-service-title {
		opacity: 0;
		transform: translateY(-7px);
	}

	.eli-service-card:hover .eli-service-detail,
	.eli-service-card:focus-visible .eli-service-detail {
		opacity: 1;
		transform: translateY(0);
	}

	.eli-service-card:hover img,
	.eli-service-card:focus-visible img {
		transform: scale(1.025);
	}
}

@media (max-width: 1100px) {
	.eli-services-section {
		padding: 76px 0 82px;
	}

	.eli-services-heading {
		max-width: 780px;
		margin-bottom: 38px;
	}

	.eli-services-heading > p:last-child {
		margin-top: 20px;
		font-size: 15px;
	}

	.eli-services-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.eli-service-card {
		aspect-ratio: 1 / .82;
	}

	.eli-service-title {
		font-size: clamp(22px, 3.25vw, 29px);
	}
}

@media (max-width: 767px) {
	.eli-services-section {
		padding: 58px 0 64px;
	}

	.eli-services-section .eli-container-wide {
		width: min(calc(100% - 24px), 620px);
	}

	.eli-services-heading {
		max-width: 520px;
		margin-bottom: 28px;
		padding-inline: 8px;
	}

	.eli-services-heading .eli-section-eyebrow {
		margin-bottom: 14px;
	}

	.eli-services-heading h2 {
		font-size: clamp(28px, 7.2vw, 34px);
		line-height: 1.15;
	}

	.eli-services-heading > p:last-child {
		margin-top: 16px;
		font-size: 12px;
		line-height: 1.5;
	}

	.eli-services-grid {
		gap: 10px;
	}

	.eli-service-card {
		aspect-ratio: 1 / 1;
	}

	.eli-service-title {
		max-width: 90%;
		font-size: clamp(15px, 4.6vw, 21px);
		line-height: 1.08;
	}

	/* Touch layouts use each card as a direct service link. The long hover copy
	   remains a desktop/fine-pointer enhancement rather than forcing tiny text
	   into phone-sized cards. */
	.eli-service-detail {
		display: none;
	}
}

@media (max-width: 390px) {
	.eli-services-section .eli-container-wide {
		width: min(calc(100% - 16px), 620px);
	}

	.eli-services-grid {
		gap: 8px;
	}

	.eli-service-title {
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eli-service-card img,
	.eli-service-title,
	.eli-service-detail {
		transition: none !important;
	}
}


/* --------------------------------------------------------------------------
   0.1.17 POC — gallery caption spacing + financing
   Gallery keeps the captured -8px See More offset while adding deliberate
   breathing room above it. Financing mirrors the production two-column card,
   but the YouTube player is a click-to-load facade so third-party player JS is
   not requested until the visitor chooses to play the video.
   -------------------------------------------------------------------------- */

.eli-project-caption small {
	padding-top: 16px;
	transform: translateY(-8px);
}

.eli-finance-section {
	padding: 58px 0 64px;
	background: #f8f8f8;
}

.eli-finance-card {
	display: grid;
	grid-template-columns: minmax(0, .98fr) minmax(0, 1.08fr);
	gap: clamp(36px, 3.5vw, 46px);
	align-items: center;
	padding: 30px 34px;
	background: #fff;
	box-shadow: 0 10px 25px rgb(0 0 0 / .08);
}

.eli-finance-copy .eli-section-eyebrow {
	margin-bottom: 18px;
}

.eli-finance-copy h2 {
	max-width: 510px;
	margin: 0;
	font-family: var(--eli-font-heading);
	font-size: clamp(36px, 3.1vw, 48px);
	font-weight: 700;
	line-height: 1.08;
	color: #050506;
}

.eli-finance-copy > p:not(.eli-section-eyebrow) {
	max-width: 560px;
	margin: 24px 0 0;
	color: var(--eli-muted);
	font-size: 16px;
	line-height: 1.7;
}

.eli-finance-button {
	display: inline-flex;
	min-width: 236px;
	min-height: 50px;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
	padding: 12px 24px;
	background: var(--eli-blue-bright);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color 180ms ease, color 180ms ease;
}

.eli-finance-button:hover,
.eli-finance-button:focus-visible {
	background: #050506;
	color: #fff;
}

.eli-finance-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #111;
}

.eli-finance-video-poster,
.eli-finance-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.eli-finance-video-poster {
	display: block;
	padding: 0;
	border: 0;
	background: #111;
	cursor: pointer;
}

.eli-finance-video-poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.eli-finance-video-poster:focus-visible {
	outline: 3px solid var(--eli-blue-bright);
	outline-offset: 4px;
}

@media (max-width: 900px) {
	.eli-finance-section {
		padding: 68px 0 76px;
	}
	.eli-finance-card {
		grid-template-columns: 1fr;
		gap: 30px;
		padding: 34px;
	}
	.eli-finance-copy {
		max-width: 680px;
	}
	.eli-finance-copy h2 {
		font-size: clamp(32px, 5vw, 42px);
	}
}

@media (max-width: 767px) {
	.eli-finance-section {
		padding: 56px 0 62px;
	}
	.eli-finance-section .eli-container-wide {
		width: min(calc(100% - 24px), 620px);
	}
	.eli-finance-card {
		gap: 26px;
		padding: 26px 22px;
		box-shadow: 0 8px 20px rgb(0 0 0 / .07);
	}
	.eli-finance-copy h2 {
		font-size: clamp(28px, 8vw, 36px);
	}
	.eli-finance-copy > p:not(.eli-section-eyebrow) {
		margin-top: 18px;
		font-size: 13px;
		line-height: 1.62;
	}
	.eli-finance-button {
		width: 100%;
		min-width: 0;
		min-height: 46px;
		margin-top: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eli-finance-button { transition: none; }
}

/* --------------------------------------------------------------------------
   0.1.18 POC — true hover-lift interactions + Belgard Master Craftsman promo
   Gallery / financing controls now animate from a neutral resting position to
   the captured -8px hover position. The Belgard promo uses the supplied full-
   resolution production photograph and the same hover-lift vocabulary.
   -------------------------------------------------------------------------- */

/* Gallery: the production micro-interaction is a hover movement, not a fixed offset. */
.eli-project-caption small {
	padding-top: 16px;
	transform: translateY(0);
	transition: transform 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.eli-project-card:hover .eli-project-caption small,
	.eli-project-card:focus-visible .eli-project-caption small {
		transform: translateY(-8px);
	}
}

/* Financing: colour change and the recorded upward hover motion happen together. */
.eli-finance-button {
	transition: background-color 180ms ease, color 180ms ease, transform 220ms ease;
	transform: translateY(0);
}

.eli-finance-button:hover,
.eli-finance-button:focus-visible {
	transform: translateY(-8px);
}

/* Belgard Master Craftsman promotion. */
.eli-belgard-promo {
	position: relative;
	isolation: isolate;
	min-height: 346px;
	display: flex;
	align-items: center;
	background-image:
		linear-gradient(90deg, rgb(19 104 151 / .91) 0%, rgb(9 54 79 / .90) 52%, rgb(4 37 56 / .82) 100%),
		url('assets/images/belgard-master-craftsman-bg.webp');
	background-size: cover;
	background-position: center 49%;
	color: #fff;
}

.eli-belgard-promo-inner {
	display: grid;
	grid-template-columns: minmax(190px, 230px) minmax(0, 1fr) minmax(185px, 220px);
	gap: clamp(34px, 4.4vw, 66px);
	align-items: center;
	width: min(calc(100% - 64px), 1140px);
	margin-inline: auto;
	padding-block: 54px;
}

.eli-belgard-promo-logo {
	display: flex;
	align-items: center;
	justify-content: center;
}

.eli-belgard-promo-logo img {
	display: block;
	width: min(100%, 220px);
	height: auto;
}

.eli-belgard-promo-copy h2 {
	max-width: 690px;
	margin: 0;
	font-family: var(--eli-font-heading);
	font-size: clamp(31px, 3vw, 42px);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: .005em;
	color: #fff;
}

.eli-belgard-promo-copy p {
	max-width: 700px;
	margin: 24px 0 0;
	font-size: 16px;
	line-height: 1.65;
	color: rgb(255 255 255 / .96);
}

.eli-belgard-promo-button {
	display: inline-flex;
	min-width: 186px;
	min-height: 50px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	justify-self: end;
	padding: 12px 24px;
	border: 1px solid #55a9da;
	background: #fff;
	color: #08090a;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transform: translateY(0);
	transition: transform 220ms ease, background-color 180ms ease, color 180ms ease;
}

.eli-belgard-promo-button:hover,
.eli-belgard-promo-button:focus-visible {
	transform: translateY(-8px);
	background: #fff;
	color: #08090a;
}

.eli-belgard-promo-button:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 4px;
}

.eli-belgard-promo-button-arrow {
	font-size: 18px;
	line-height: 1;
}

@media (max-width: 900px) {
	.eli-belgard-promo-inner {
		grid-template-columns: 150px minmax(0, 1fr);
		gap: 28px 34px;
		width: min(calc(100% - 48px), 760px);
		padding-block: 46px;
	}
	.eli-belgard-promo-logo {
		grid-row: 1 / span 2;
	}
	.eli-belgard-promo-logo img {
		width: 145px;
	}
	.eli-belgard-promo-copy h2 {
		font-size: clamp(27px, 4.2vw, 34px);
	}
	.eli-belgard-promo-copy p {
		margin-top: 16px;
		font-size: 14px;
	}
	.eli-belgard-promo-button {
		grid-column: 2;
		justify-self: start;
	}
}

@media (max-width: 600px) {
	.eli-belgard-promo {
		min-height: 0;
		background-image:
			linear-gradient(180deg, rgb(24 116 166 / .91) 0%, rgb(7 59 86 / .93) 54%, rgb(3 40 61 / .96) 100%),
			url('assets/images/belgard-master-craftsman-bg-mobile.webp');
		background-position: 46% center;
	}
	.eli-belgard-promo-inner {
		display: flex;
		flex-direction: column;
		gap: 0;
		width: min(calc(100% - 32px), 440px);
		padding: 48px 0 54px;
		text-align: center;
	}
	.eli-belgard-promo-logo img {
		width: 150px;
	}
	.eli-belgard-promo-copy {
		margin-top: 27px;
	}
	.eli-belgard-promo-copy h2 {
		font-size: clamp(26px, 8.5vw, 34px);
		line-height: 1.16;
	}
	.eli-belgard-promo-copy p {
		margin: 20px auto 0;
		font-size: 13px;
		line-height: 1.62;
	}
	.eli-belgard-promo-button {
		min-width: 174px;
		margin-top: 28px;
		align-self: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eli-project-caption small,
	.eli-finance-button,
	.eli-belgard-promo-button {
		transition: none !important;
		transform: none !important;
	}
}



/* --------------------------------------------------------------------------
   0.1.19 POC — Before & After transformation comparison
   The production comparison widget is replaced by a small native range-driven
   component: two local images, one CSS clipping variable, and minimal JS to
   update that variable. The native range preserves touch and keyboard input.
   -------------------------------------------------------------------------- */

.eli-transform-section {
	padding: 82px 0 68px;
	background: #fff;
}

.eli-transform-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr);
	grid-template-rows: auto auto auto;
	gap: 22px clamp(42px, 5vw, 72px);
	align-items: start;
}

.eli-comparison {
	--eli-comparison-position: 50%;
	position: relative;
	grid-column: 1;
	grid-row: 1 / 4;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #d7d7d7;
	touch-action: pan-y;
}

.eli-comparison img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	user-select: none;
	pointer-events: none;
}

.eli-comparison-after {
	clip-path: inset(0 0 0 var(--eli-comparison-position));
}

.eli-comparison-divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--eli-comparison-position);
	z-index: 3;
	width: 2px;
	background: #fff;
	transform: translateX(-1px);
	pointer-events: none;
}

.eli-comparison-handle {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	border: 3px solid #fff;
	border-radius: 50%;
	background: rgb(20 24 28 / .62);
	color: #fff;
	transform: translate(-50%, -50%);
	box-shadow: 0 2px 8px rgb(0 0 0 / .24);
}

.eli-comparison-handle svg {
	width: 25px;
	height: 25px;
}

.eli-comparison-range {
	position: absolute;
	inset: 0;
	z-index: 4;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
}

.eli-comparison:focus-within {
	outline: 3px solid var(--eli-blue-bright);
	outline-offset: 4px;
}

.eli-transform-intro {
	grid-column: 2;
	grid-row: 1;
}

.eli-transform-intro .eli-section-eyebrow {
	margin-bottom: 16px;
}

.eli-transform-intro h2 {
	max-width: 520px;
	margin: 0;
	font-family: var(--eli-font-heading);
	font-size: clamp(34px, 3.2vw, 46px);
	font-weight: 700;
	line-height: 1.12;
	color: #050506;
}

.eli-transform-intro > p:not(.eli-section-eyebrow) {
	max-width: 560px;
	margin: 22px 0 0;
	color: var(--eli-muted);
	font-size: 16px;
	line-height: 1.72;
}

.eli-transform-points {
	grid-column: 2;
	grid-row: 2;
	display: grid;
	gap: 9px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.eli-transform-points li {
	position: relative;
	padding-left: 25px;
	font-size: 15px;
	line-height: 1.45;
	color: #111;
}

.eli-transform-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .48em;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--eli-blue-bright);
}

.eli-transform-button {
	grid-column: 2;
	grid-row: 3;
	display: inline-flex;
	width: fit-content;
	min-width: 324px;
	min-height: 52px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	background: var(--eli-blue-bright);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transform: translateY(0);
	transition: transform 220ms ease, background-color 180ms ease, color 180ms ease;
}

.eli-transform-button:hover,
.eli-transform-button:focus-visible {
	background: #050506;
	color: #fff;
	transform: translateY(-8px);
}

.eli-transform-button:focus-visible {
	outline: 3px solid var(--eli-blue-bright);
	outline-offset: 4px;
}

.eli-transform-button-icon {
	display: inline-grid;
	width: 16px;
	height: 16px;
	place-items: center;
}

.eli-transform-button-icon svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 900px) {
	.eli-transform-section {
		padding: 68px 0 78px;
	}
	.eli-transform-grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: 24px;
		width: min(calc(100% - 48px), 760px);
		margin-inline: auto;
	}
	.eli-transform-intro,
	.eli-comparison,
	.eli-transform-points,
	.eli-transform-button {
		grid-column: 1;
		grid-row: auto;
	}
	.eli-transform-intro { order: 1; }
	.eli-comparison { order: 2; }
	.eli-transform-points { order: 3; }
	.eli-transform-button { order: 4; }
	.eli-transform-intro h2 {
		font-size: clamp(31px, 5.4vw, 40px);
	}
}

@media (max-width: 600px) {
	.eli-transform-section {
		padding: 56px 0 64px;
	}
	.eli-transform-grid {
		width: min(calc(100% - 24px), 520px);
		gap: 20px;
	}
	.eli-transform-intro h2 {
		font-size: clamp(28px, 8.2vw, 36px);
		line-height: 1.13;
	}
	.eli-transform-intro > p:not(.eli-section-eyebrow) {
		margin-top: 17px;
		font-size: 13px;
		line-height: 1.62;
	}
	.eli-comparison {
		aspect-ratio: 4 / 3;
	}
	.eli-comparison-handle {
		width: 38px;
		height: 38px;
	}
	.eli-transform-points {
		gap: 8px;
	}
	.eli-transform-points li {
		padding-left: 22px;
		font-size: 12px;
	}
	.eli-transform-points li::before {
		width: 10px;
		height: 10px;
	}
	.eli-transform-button {
		width: 100%;
		min-width: 0;
		min-height: 48px;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eli-transform-button {
		transition: none !important;
		transform: none !important;
	}
}

/* --------------------------------------------------------------------------
   0.1.20 POC — Filterable image gallery
   Desktop keeps the production four-column/filter treatment. Touch layouts
   deliberately use a compact two-column grid, horizontally scrollable filter
   chips, a persistent magnify affordance and a native-dialog lightbox.
   -------------------------------------------------------------------------- */

.eli-filter-gallery-section {
	padding: 54px 0 68px;
	background: #fff;
}

.eli-filter-gallery-heading {
	max-width: 650px;
	margin: 0 auto;
	text-align: center;
}

.eli-filter-gallery-heading h2 {
	margin: 0;
	font-family: var(--eli-font-heading);
	font-size: clamp(34px, 3.1vw, 44px);
	font-weight: 700;
	line-height: 1.12;
	color: #050506;
}

.eli-filter-gallery-heading p {
	max-width: 590px;
	margin: 16px auto 0;
	color: var(--eli-muted);
	font-size: 16px;
	line-height: 1.65;
}

.eli-filter-gallery-section:not(.is-enhanced) .eli-filter-gallery-filters,
.eli-filter-gallery-section:not(.is-enhanced) .eli-filter-gallery-more-wrap {
	display: none;
}

.eli-filter-gallery-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 50px;
}

.eli-filter-gallery-filter {
	min-height: 40px;
	padding: 9px 17px;
	border: 1px solid var(--eli-blue-bright);
	background: #fff;
	color: #33363a;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: .11em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.eli-filter-gallery-filter:hover,
.eli-filter-gallery-filter:focus-visible,
.eli-filter-gallery-filter.is-active {
	border-color: var(--eli-blue-bright);
	background: var(--eli-blue-bright);
	color: #fff;
}

.eli-filter-gallery-filter:focus-visible {
	outline: 3px solid rgb(53 136 187 / .28);
	outline-offset: 3px;
}

.eli-filter-gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin-top: 20px;
}

.eli-filter-gallery-item {
	position: relative;
	margin: 0;
	aspect-ratio: 7 / 8;
	overflow: hidden;
	background: #d7dadd;
	transform-origin: center;
}
.eli-filter-gallery-section.is-filtering .eli-filter-gallery-item {
	will-change: transform, opacity;
}

.eli-filter-gallery-item[hidden] {
	display: none !important;
}

.eli-filter-gallery-open {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: default;
}

.eli-filter-gallery-open img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 300ms ease;
}

.eli-filter-gallery-overlay {
	position: absolute;
	inset: 0;
	background: rgb(10 18 24 / .45);
	opacity: 0;
	transition: opacity 220ms ease;
}

.eli-filter-gallery-magnify {
	position: absolute;
	left: 50%;
	top: 50%;
	display: grid;
	width: 50px;
	height: 50px;
	place-items: center;
	background: var(--eli-blue-bright);
	color: #fff;
	opacity: 0;
	transform: translate(-50%, -50%) scale(.86);
	transition: opacity 200ms ease, transform 200ms ease, background-color 160ms ease;
}

.eli-filter-gallery-magnify svg {
	width: 23px;
	height: 23px;
}

@media (hover: hover) and (pointer: fine) {
	.eli-filter-gallery-open:hover img,
	.eli-filter-gallery-open:focus-visible img {
		transform: scale(1.025);
	}

	.eli-filter-gallery-open:hover .eli-filter-gallery-overlay,
	.eli-filter-gallery-open:focus-visible .eli-filter-gallery-overlay,
	.eli-filter-gallery-open:hover .eli-filter-gallery-magnify,
	.eli-filter-gallery-open:focus-visible .eli-filter-gallery-magnify {
		opacity: 1;
	}

	.eli-filter-gallery-open:hover .eli-filter-gallery-magnify,
	.eli-filter-gallery-open:focus-visible .eli-filter-gallery-magnify {
		transform: translate(-50%, -50%) scale(1);
	}
}

.eli-filter-gallery-open:focus-visible {
	outline: 3px solid var(--eli-blue-bright);
	outline-offset: -3px;
}

.eli-filter-gallery-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

.eli-filter-gallery-more {
	min-width: 158px;
	min-height: 47px;
	padding: 11px 24px;
	border: 0;
	background: #2f2f30;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 160ms ease;
}

.eli-filter-gallery-more:hover,
.eli-filter-gallery-more:focus-visible {
	background: var(--eli-blue-bright);
}

.eli-filter-gallery-more:focus-visible {
	outline: 3px solid rgb(53 136 187 / .3);
	outline-offset: 3px;
}

/* Native dialog lightbox. */
.eli-gallery-lightbox {
	width: min(94vw, 980px);
	max-width: none;
	max-height: 94vh;
	margin: auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	overflow: visible;
}

.eli-gallery-lightbox::backdrop {
	background: rgb(6 10 13 / .88);
	backdrop-filter: blur(2px);
}

.eli-gallery-lightbox-inner {
	position: relative;
	display: grid;
	gap: 14px;
	justify-items: center;
}

.eli-gallery-lightbox-close {
	position: absolute;
	top: -44px;
	right: 0;
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	padding: 0;
	border: 1px solid rgb(255 255 255 / .55);
	background: rgb(0 0 0 / .25);
	color: #fff;
	cursor: pointer;
	z-index: 3;
}

.eli-gallery-lightbox-close svg,
.eli-gallery-lightbox-nav svg {
	width: 22px;
	height: 22px;
}

.eli-gallery-lightbox-figure {
	margin: 0;
	text-align: center;
}

.eli-gallery-lightbox-figure img {
	display: block;
	width: auto;
	max-width: min(92vw, 900px);
	max-height: min(76vh, 760px);
	margin-inline: auto;
	object-fit: contain;
	background: #111;
}

.eli-gallery-lightbox-figure figcaption {
	max-width: 760px;
	margin: 10px auto 0;
	font-size: 13px;
	line-height: 1.45;
	color: rgb(255 255 255 / .86);
}

.eli-gallery-lightbox-controls {
	display: grid;
	grid-template-columns: 42px minmax(80px, auto) 42px;
	align-items: center;
	gap: 12px;
}

.eli-gallery-lightbox-nav {
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	padding: 0;
	border: 1px solid rgb(255 255 255 / .55);
	background: rgb(0 0 0 / .18);
	color: #fff;
	cursor: pointer;
}

.eli-gallery-lightbox-close:hover,
.eli-gallery-lightbox-close:focus-visible,
.eli-gallery-lightbox-nav:hover,
.eli-gallery-lightbox-nav:focus-visible {
	border-color: var(--eli-blue-bright);
	background: var(--eli-blue-bright);
}

.eli-gallery-lightbox-close:focus-visible,
.eli-gallery-lightbox-nav:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

.eli-gallery-lightbox-count {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

@media (max-width: 900px) {
	.eli-filter-gallery-section {
		padding: 66px 0 74px;
	}

	.eli-filter-gallery-section .eli-container-wide {
		width: min(calc(100% - 32px), 760px);
	}

	.eli-filter-gallery-heading h2 {
		font-size: clamp(31px, 5.5vw, 40px);
	}

	.eli-filter-gallery-filters {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 8px;
		margin: 34px -2px 0;
		padding: 2px 2px 8px;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}

	.eli-filter-gallery-filter {
		flex: 0 0 auto;
		min-height: 38px;
		padding-inline: 14px;
		font-size: 12px;
	}

	.eli-filter-gallery-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		margin-top: 12px;
	}

	.eli-filter-gallery-item {
		aspect-ratio: 1 / 1;
	}

	.eli-filter-gallery-magnify {
		left: auto;
		top: auto;
		right: 10px;
		bottom: 10px;
		width: 38px;
		height: 38px;
		opacity: 1;
		transform: none;
		box-shadow: 0 3px 10px rgb(0 0 0 / .18);
	}

	.eli-filter-gallery-magnify svg {
		width: 19px;
		height: 19px;
	}

	.eli-filter-gallery-more-wrap {
		margin-top: 16px;
	}
}

@media (max-width: 600px) {
	.eli-filter-gallery-section {
		padding: 54px 0 62px;
	}

	.eli-filter-gallery-section .eli-container-wide {
		width: min(calc(100% - 20px), 520px);
	}

	.eli-filter-gallery-heading h2 {
		font-size: clamp(29px, 8.5vw, 36px);
	}

	.eli-filter-gallery-heading p {
		margin-top: 12px;
		font-size: 12px;
		line-height: 1.55;
	}

	.eli-filter-gallery-filters {
		margin-top: 27px;
	}

	.eli-filter-gallery-filter {
		min-height: 36px;
		font-size: 11px;
		letter-spacing: .08em;
	}

	.eli-filter-gallery-grid {
		gap: 8px;
	}

	.eli-filter-gallery-magnify {
		right: 8px;
		bottom: 8px;
		width: 34px;
		height: 34px;
	}

	.eli-filter-gallery-more {
		width: min(100%, 220px);
		min-height: 44px;
	}

	.eli-gallery-lightbox {
		width: 100vw;
		max-height: 100vh;
		padding: 58px 10px 20px;
	}

	.eli-gallery-lightbox-inner {
		min-height: calc(100vh - 78px);
		align-content: center;
	}

	.eli-gallery-lightbox-close {
		top: -48px;
		right: 2px;
	}

	.eli-gallery-lightbox-figure img {
		max-width: calc(100vw - 20px);
		max-height: 68vh;
	}

	.eli-gallery-lightbox-figure figcaption {
		font-size: 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eli-filter-gallery-filter,
	.eli-filter-gallery-open img,
	.eli-filter-gallery-overlay,
	.eli-filter-gallery-magnify,
	.eli-filter-gallery-more {
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
   0.1.21 POC — Design & Installation Process
   The production content carousel is retained, but the four process markers
   are rebuilt as real controls and synchronised with the active slide.
   -------------------------------------------------------------------------- */

.eli-process-section {
	padding: 72px 0 62px;
	background: #171717;
	color: #fff;
}

.eli-process-section h2 {
	margin: 0;
	font-family: var(--eli-font-heading);
	font-size: clamp(34px, 3.2vw, 44px);
	font-weight: 700;
	line-height: 1.12;
	text-align: center;
	color: #fff;
}

.eli-process-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin-top: 38px;
}

.eli-process-steps::before {
	position: absolute;
	top: 39px;
	left: 12.5%;
	right: 12.5%;
	height: 1px;
	background: #55595c;
	content: "";
	z-index: 0;
}

.eli-process-step {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: 12px;
	padding: 0 8px;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 17px;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
}

.eli-process-step-icon {
	display: grid;
	width: 78px;
	height: 78px;
	place-items: center;
	background: #fff;
	color: var(--eli-blue-bright);
	transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.eli-process-step-icon svg {
	width: 42px;
	height: 42px;
}

.eli-process-step.is-active .eli-process-step-icon,
.eli-process-step:hover .eli-process-step-icon,
.eli-process-step:focus-visible .eli-process-step-icon {
	background: var(--eli-blue-bright);
	color: #fff;
}

.eli-process-step:hover .eli-process-step-icon,
.eli-process-step:focus-visible .eli-process-step-icon {
	transform: translateY(-4px);
}

.eli-process-step:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 6px;
}

.eli-process-stage {
	position: relative;
	min-height: 430px;
	margin-top: 30px;
	overflow: hidden;
	background: #27313a;
}

.eli-process-stage-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.eli-process-card {
	position: absolute;
	top: 30px;
	right: 44px;
	display: grid;
	width: min(430px, calc(100% - 88px));
	min-height: 370px;
	grid-template-rows: minmax(0, 1fr) auto auto;
	padding: 44px 48px 40px;
	background: #fff;
	color: #121212;
	box-shadow: 0 14px 32px rgb(0 0 0 / .12);
}

.eli-process-viewport {
	overflow: hidden;
}

.eli-process-track {
	display: flex;
	width: 100%;
	transform: translateX(0);
	transition: transform 560ms cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}

.eli-process-slide {
	flex: 0 0 100%;
	min-width: 0;
	padding: 0 2px;
}

.eli-process-slide h3 {
	margin: 0;
	font-family: var(--eli-font-heading);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: #111;
}

.eli-process-slide p {
	margin: 24px 0 0;
	color: var(--eli-muted);
	font-size: 14px;
	line-height: 1.62;
}

.eli-process-dots {
	display: flex;
	justify-content: center;
	gap: 0;
	margin-top: 14px;
}

.eli-process-dots button {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.eli-process-dots button::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #d1d1d1;
	transform: translate(-50%, -50%);
	transition: background-color 160ms ease, transform 160ms ease;
}

.eli-process-dots button.is-active::before {
	background: #111;
	transform: translate(-50%, -50%) scale(1.08);
}

.eli-process-dots button:focus-visible {
	outline: 2px solid var(--eli-blue-bright);
	outline-offset: 1px;
}

.eli-process-cta {
	display: inline-flex;
	min-height: 50px;
	align-items: center;
	justify-content: center;
	margin-top: 22px;
	padding: 12px 24px;
	background: var(--eli-blue-bright);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background-color 180ms ease, transform 180ms ease;
}

.eli-process-cta:hover,
.eli-process-cta:focus-visible {
	background: #191919;
	transform: translateY(-8px);
}

.eli-process-cta:focus-visible {
	outline: 3px solid var(--eli-blue-bright);
	outline-offset: 4px;
}

@media (max-width: 1000px) {
	.eli-process-section {
		padding: 64px 0 72px;
	}

	.eli-process-section .eli-container-wide {
		width: min(calc(100% - 32px), 900px);
	}

	.eli-process-step {
		font-size: 14px;
	}

	.eli-process-step-icon {
		width: 68px;
		height: 68px;
	}

	.eli-process-steps::before {
		top: 34px;
	}

	.eli-process-stage {
		min-height: 410px;
	}

	.eli-process-card {
		top: 26px;
		right: 26px;
		width: min(390px, calc(100% - 52px));
		min-height: 350px;
		padding: 38px 40px 34px;
	}
}

@media (max-width: 700px) {
	.eli-process-section {
		padding: 54px 0 62px;
	}

	.eli-process-section .eli-container-wide {
		width: min(calc(100% - 20px), 560px);
	}

	.eli-process-section h2 {
		font-size: clamp(28px, 8.2vw, 36px);
	}

	.eli-process-steps {
		display: flex;
		gap: 0;
		margin: 30px -2px 0;
		padding: 2px 2px 10px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}

	.eli-process-steps::before {
		top: 33px;
		left: 67px;
		right: auto;
		width: 402px;
	}

	.eli-process-step {
		flex: 0 0 134px;
		min-width: 134px;
		gap: 9px;
		padding-inline: 6px;
		font-size: 11px;
		line-height: 1.28;
		scroll-snap-align: center;
	}

	.eli-process-step-icon {
		width: 64px;
		height: 64px;
	}

	.eli-process-step-icon svg {
		width: 34px;
		height: 34px;
	}

	.eli-process-stage {
		display: grid;
		min-height: 0;
		margin-top: 18px;
		overflow: visible;
		background: transparent;
	}

	.eli-process-stage-image {
		position: relative;
		grid-column: 1;
		grid-row: 1;
		aspect-ratio: 16 / 8;
		height: auto;
		object-fit: cover;
	}

	.eli-process-card {
		position: relative;
		top: auto;
		right: auto;
		grid-column: 1;
		grid-row: 2;
		width: 100%;
		min-height: 0;
		padding: 30px 26px 28px;
		box-shadow: none;
	}

	.eli-process-slide h3 {
		font-size: 17px;
	}

	.eli-process-slide p {
		margin-top: 16px;
		font-size: 12px;
		line-height: 1.6;
	}

	.eli-process-dots {
		margin-top: 18px;
	}

	.eli-process-cta {
		width: 100%;
		min-height: 47px;
		margin-top: 20px;
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eli-process-track,
	.eli-process-step-icon,
	.eli-process-dots button::before,
	.eli-process-cta {
		transition: none !important;
	}

	.eli-process-step:hover .eli-process-step-icon,
	.eli-process-step:focus-visible .eli-process-step-icon,
	.eli-process-cta:hover,
	.eli-process-cta:focus-visible {
		transform: none !important;
	}
}

/* Recent Job Sites / live Google My Maps project map */
.eli-job-sites-section {
	padding: clamp(72px, 7.5vw, 112px) 0 clamp(54px, 5vw, 68px);
	background: #fff;
}
.eli-job-sites-layout {
	display: grid;
	grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
	align-items: center;
	gap: clamp(44px, 6vw, 88px);
}
.eli-job-sites-copy {
	max-width: 560px;
}
.eli-job-sites-copy .eli-section-eyebrow {
	margin: 0 0 16px;
}
.eli-job-sites-copy h2 {
	margin: 0 0 24px;
	max-width: 520px;
	font-family: var(--eli-font-heading);
	font-size: clamp(34px, 3.1vw, 52px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.025em;
}
.eli-job-sites-copy > p:not(.eli-section-eyebrow) {
	margin: 0;
	max-width: 550px;
	color: var(--eli-muted);
	font-size: clamp(16px, 1.35vw, 20px);
	line-height: 1.75;
}
.eli-job-sites-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 285px;
	margin-top: 30px;
	padding: 15px 24px;
	background: var(--eli-blue);
	color: #fff;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	transform: translateY(0);
	transition: transform 180ms ease, background-color 180ms ease;
}
.eli-job-sites-button:hover,
.eli-job-sites-button:focus-visible {
	background: #171918;
	transform: translateY(-8px);
}
.eli-job-sites-button-icon {
	display: inline-flex;
	width: 15px;
	height: 15px;
	flex: 0 0 15px;
}
.eli-job-sites-button-icon svg {
	width: 100%;
	height: 100%;
}
.eli-job-sites-map-wrap {
	min-width: 0;
}
.eli-job-sites-map {
	display: block;
	width: 100%;
	aspect-ratio: 1.55 / 1;
	min-height: 340px;
	border: 0;
	background: #eef2f4;
}
.eli-job-sites-map-fallback {
	margin: 8px 0 0;
	font-size: 12px;
	text-align: right;
}
.eli-job-sites-map-fallback a {
	color: var(--eli-muted);
}

@media (max-width: 900px) {
	.eli-job-sites-section {
		padding: 64px 0 72px;
	}
	.eli-job-sites-layout {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.eli-job-sites-copy {
		max-width: none;
		text-align: center;
	}
	.eli-job-sites-copy h2,
	.eli-job-sites-copy > p:not(.eli-section-eyebrow) {
		margin-inline: auto;
	}
	.eli-job-sites-button {
		min-width: min(100%, 330px);
	}
	.eli-job-sites-map {
		aspect-ratio: 1.42 / 1;
		min-height: 300px;
	}
	.eli-job-sites-map-fallback {
		text-align: center;
	}
}

@media (max-width: 520px) {
	.eli-job-sites-copy h2 {
		font-size: 32px;
	}
	.eli-job-sites-copy > p:not(.eli-section-eyebrow) {
		font-size: 15px;
		line-height: 1.7;
	}
	.eli-job-sites-button {
		width: 100%;
		min-width: 0;
	}
	.eli-job-sites-map {
		aspect-ratio: 1.18 / 1;
		min-height: 300px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eli-job-sites-button {
		transition: background-color 180ms ease;
	}
	.eli-job-sites-button:hover,
	.eli-job-sites-button:focus-visible {
		transform: none;
	}
}


/* Customer testimonials — lightweight review carousel */
.eli-testimonials-section {
	padding: clamp(58px, 5.5vw, 76px) 0 clamp(68px, 6vw, 88px);
	background: #f7f7f7;
}
.eli-testimonials-header {
	max-width: 530px;
	margin: 0 auto clamp(32px, 3.5vw, 46px);
	text-align: center;
}
.eli-testimonials-header h2 {
	margin: 0 0 20px;
	font-family: var(--eli-font-heading);
	font-size: clamp(34px, 3.2vw, 50px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.025em;
}
.eli-testimonials-header p {
	margin: 0;
	color: var(--eli-muted);
	font-size: clamp(16px, 1.35vw, 19px);
	line-height: 1.6;
}
.eli-testimonials-header a {
	color: #111;
	font-weight: 700;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.eli-testimonials-layout {
	display: grid;
	grid-template-columns: 245px minmax(0, 1fr);
	align-items: center;
	gap: clamp(28px, 3.5vw, 50px);
}
.eli-review-summary {
	display: grid;
	grid-template-columns: 62px 1fr;
	align-items: start;
	gap: 15px;
}
.eli-review-summary-mark {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	border: 1px solid #d8d8d8;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 3px 8px rgb(0 0 0 / 0.08);
	font-family: Arial, sans-serif;
	font-size: 21px;
	font-weight: 700;
	color: #4285f4;
}
.eli-review-summary-name,
.eli-review-summary-rating,
.eli-review-summary-count {
	margin: 0;
}
.eli-review-summary-name {
	font-weight: 600;
	font-size: 15px;
}
.eli-review-summary-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}
.eli-review-summary-rating strong {
	color: #b24f00;
	font-size: 18px;
}
.eli-review-stars,
.eli-review-card-stars {
	display: inline-flex;
	gap: 2px;
	color: #b24f00;
	letter-spacing: 0;
}
.eli-review-summary-count {
	margin-top: 4px;
	color: var(--eli-muted);
	font-size: 13px;
}
.eli-review-us-button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 13px;
	padding: 9px 14px;
	border-radius: 999px;
	background: #2466c3;
	box-shadow: 0 2px 5px rgb(0 0 0 / 0.18);
	color: #fff;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	transform: translateY(0);
	transition: transform 180ms ease, background-color 180ms ease;
}
.eli-review-us-button:hover,
.eli-review-us-button:focus-visible {
	background: #171918;
	transform: translateY(-6px);
}
.eli-review-us-button span {
	display: grid;
	place-items: center;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: #fff;
	color: #4285f4;
	font-family: Arial, sans-serif;
	font-weight: 700;
}
.eli-testimonials-carousel {
	position: relative;
	min-width: 0;
	padding-inline: 26px;
}
.eli-testimonials-viewport {
	overflow: hidden;
	padding: 8px 2px 10px;
}
.eli-testimonials-track {
	display: flex;
	gap: 18px;
	align-items: stretch;
	width: 100%;
	transform: translate3d(0, 0, 0);
	transition: transform 420ms cubic-bezier(.2,.72,.2,1);
	will-change: transform;
}
.eli-review-card {
	box-sizing: border-box;
	flex: 0 0 33.3333%;
	min-width: 0;
	padding: 0 9px;
}
.eli-review-card::before {
	content: "";
	display: none;
}
.eli-review-card > * {
	box-sizing: border-box;
}
.eli-review-card {
	background: transparent;
}
.eli-review-card-header,
.eli-review-card-stars,
.eli-review-card-copy,
.eli-review-read-more {
	position: relative;
	z-index: 1;
}
.eli-review-card {
	position: relative;
	padding-top: 19px;
	padding-bottom: 18px;
	border: 1px solid #ddd;
	background: #fff;
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.08);
}
.eli-review-card-header {
	display: grid;
	grid-template-columns: 50px minmax(0, 1fr) 22px;
	align-items: center;
	gap: 11px;
	padding-inline: 15px;
}
.eli-review-avatar {
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
}
.eli-review-avatar--initial {
	display: grid;
	place-items: center;
	background: hsl(var(--eli-avatar-hue) 60% 42%);
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 25px;
	line-height: 1;
}
.eli-review-card-meta {
	min-width: 0;
}
.eli-review-card-meta h3 {
	margin: 0;
	overflow: hidden;
	color: #2466c3;
	font-family: var(--eli-font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.eli-review-card-meta time {
	display: block;
	margin-top: 4px;
	color: #666666;
	font-size: 12px;
}
.eli-review-google-mark {
	display: grid;
	place-items: center;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: #fff;
	color: #4285f4;
	font-family: Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
}
.eli-review-card-stars {
	margin: 13px 15px 0;
	font-size: 17px;
}
.eli-review-card-copy {
	margin: 8px 15px 0;
	color: #6e6e6e;
	font-size: 13px;
	line-height: 1.65;
}
.eli-review-card-copy p {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
}
.eli-review-card-copy.is-expanded p,
.eli-review-card-copy.is-short p {
	display: block;
	overflow: visible;
	-webkit-line-clamp: unset;
}
.eli-review-read-more {
	margin: 10px 15px 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--eli-blue);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.eli-review-read-more:hover,
.eli-review-read-more:focus-visible {
	color: #171918;
}
.eli-testimonials-arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 36px;
	height: 52px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #c7c7c7;
	transform: translateY(-60%);
	cursor: pointer;
}
.eli-testimonials-arrow svg {
	width: 24px;
	height: 24px;
}
.eli-testimonials-arrow--prev { left: -10px; }
.eli-testimonials-arrow--next { right: -10px; }
.eli-testimonials-arrow:hover,
.eli-testimonials-arrow:focus-visible {
	color: var(--eli-blue);
}
.eli-testimonials-arrow:disabled {
	opacity: .28;
	cursor: default;
}
.eli-testimonials-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	min-height: 24px;
	margin-top: 9px;
}
.eli-testimonials-dot {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}
.eli-testimonials-dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #d9d9d9;
	transform: translate(-50%, -50%);
	transition: transform 150ms ease, background-color 150ms ease;
}
.eli-testimonials-dot:hover::before,
.eli-testimonials-dot:focus-visible::before {
	background: #a9a9a9;
	transform: translate(-50%, -50%) scale(1.22);
}
.eli-testimonials-dot.is-active::before {
	background: var(--eli-blue);
	transform: translate(-50%, -50%) scale(1.22);
}
.eli-testimonials-dot:focus-visible {
	outline: 2px solid var(--eli-blue-bright);
	outline-offset: 1px;
}
.eli-testimonials-page-count {
	margin: 8px 0 0;
	color: #666666;
	font-size: 11px;
	text-align: center;
}
.eli-testimonials-sample-note {
	margin: 12px 0 0;
	text-align: center;
	color: var(--eli-muted);
	font-size: 13px;
	line-height: 1.5;
}
.eli-testimonials-sample-note a {
	color: #111;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.eli-testimonials-sample-note a:hover,
.eli-testimonials-sample-note a:focus-visible {
	color: var(--eli-blue);
}


@media (max-width: 1100px) {
	.eli-testimonials-layout {
		grid-template-columns: 210px minmax(0, 1fr);
		gap: 26px;
	}
}

@media (max-width: 820px) {
	.eli-testimonials-section {
		padding: 64px 0 72px;
	}
	.eli-testimonials-header {
		margin-bottom: 34px;
	}
	.eli-testimonials-layout {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.eli-review-summary {
		grid-template-columns: 56px auto;
		justify-content: center;
	}
	.eli-review-summary-mark {
		width: 56px;
		height: 56px;
	}
	.eli-testimonials-carousel {
		padding-inline: 24px;
	}
}

@media (max-width: 640px) {
	.eli-testimonials-header h2 {
		font-size: 31px;
	}
	.eli-testimonials-header p {
		font-size: 14px;
		line-height: 1.65;
	}
	.eli-review-summary {
		justify-content: start;
		max-width: 280px;
		margin-inline: auto;
	}
	.eli-testimonials-carousel {
		padding-inline: 18px;
	}
	.eli-review-card {
		flex-basis: 100%;
	}
	.eli-review-card-header {
		grid-template-columns: 48px minmax(0, 1fr) 22px;
	}
	.eli-review-avatar {
		width: 48px;
		height: 48px;
	}
	.eli-testimonials-arrow--prev { left: -12px; }
	.eli-testimonials-arrow--next { right: -12px; }
	.eli-testimonials-page-count {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eli-testimonials-track,
	.eli-testimonials-dot::before,
	.eli-review-us-button {
		transition: none !important;
	}
	.eli-review-us-button:hover,
	.eli-review-us-button:focus-visible {
		transform: none !important;
	}
}

/* ================================================================
   South Sound service-area module
   ================================================================ */
.eli-service-area-module {
	background: var(--eli-white);
}
.eli-service-area-map-stage {
	position: relative;
	min-height: 760px;
	padding: 72px 0 92px;
	background-image:
		linear-gradient(to bottom, rgb(255 255 255 / 0) 68%, rgb(255 255 255 / 0.94) 100%),
		var(--eli-service-area-map-image, url("assets/images/service-area-map.webp"));
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center 24%;
	overflow: hidden;
}
.eli-service-area-map-stage::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(255 255 255 / 0.08);
	pointer-events: none;
}
.eli-service-area-card-wrap {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: flex-end;
}
.eli-service-area-card {
	width: min(690px, 58vw);
	padding: clamp(28px, 3vw, 46px);
	background: rgb(255 255 255 / 0.95);
	border: 3px solid #111;
	box-shadow: 0 16px 34px rgb(0 0 0 / 0.08);
	backdrop-filter: blur(1px);
}
.eli-service-area-card-header {
	padding-bottom: 24px;
	border-bottom: 1px solid #d9d9d9;
}
.eli-service-area-card-header h2 {
	margin: 0 0 18px;
	font-family: var(--eli-font-heading);
	font-size: clamp(31px, 3vw, 46px);
	line-height: 1.13;
	letter-spacing: -0.03em;
}
.eli-service-area-headline-accent {
	color: var(--eli-blue-bright);
}
.eli-service-area-card-header p {
	margin: 0;
	font-size: 15px;
	line-height: 1.72;
}
.eli-service-region-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px;
	padding: 25px 0;
	border-bottom: 1px solid #d9d9d9;
}
.eli-service-region-column {
	display: grid;
	align-content: start;
	gap: 17px;
}
.eli-service-region {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 11px;
	align-items: start;
}
.eli-service-region-pin {
	width: 24px;
	height: 24px;
	color: var(--eli-blue-bright);
	margin-top: 1px;
}
.eli-service-region-pin svg {
	width: 100%;
	height: 100%;
}
.eli-service-region h3 {
	margin: 0 0 3px;
	font-family: var(--eli-font-heading);
	font-size: 16px;
	line-height: 1.3;
}
.eli-service-region p {
	margin: 0;
	color: var(--eli-muted);
	font-size: 12px;
	line-height: 1.48;
}
.eli-service-area-actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 22px;
	align-items: center;
	padding: 20px 0 18px;
}
.eli-service-area-actions p {
	margin: 0;
	font-size: 12px;
	line-height: 1.55;
}
.eli-service-area-phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 48px;
	padding: 12px 20px;
	background: var(--eli-blue-bright);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 180ms ease, transform 180ms ease;
}
.eli-service-area-phone svg {
	width: 18px;
	height: 18px;
}
.eli-service-area-phone:hover,
.eli-service-area-phone:focus-visible {
	background: #151515;
	transform: translateY(-6px);
}
.eli-service-area-showrooms {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
.eli-service-area-showrooms a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 48px;
	padding: 10px 12px;
	background: #050505;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 180ms ease, transform 180ms ease;
}
.eli-service-area-showrooms a:hover,
.eli-service-area-showrooms a:focus-visible {
	background: var(--eli-blue-bright);
	transform: translateY(-5px);
}

.eli-service-locations {
	padding: 58px 0 68px;
	background: #fff;
}
.eli-service-locations-header {
	max-width: 760px;
	margin: 0 auto 30px;
	text-align: center;
}
.eli-service-locations-header h2 {
	margin: 0 0 10px;
	font-family: var(--eli-font-heading);
	font-size: clamp(34px, 3.5vw, 48px);
	line-height: 1.15;
	letter-spacing: -0.025em;
}
.eli-service-locations-header p {
	margin: 0 auto;
	max-width: 640px;
	color: var(--eli-muted);
	font-size: 15px;
	line-height: 1.65;
}
.eli-service-location-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 14px;
}
.eli-service-location-button {
	display: inline-flex;
	width: auto;
	min-width: 0;
	min-height: 42px;
	align-items: center;
	justify-content: center;
	padding: 9px 24px;
	background: var(--eli-blue-bright);
	border: 1px solid var(--eli-blue-bright);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.eli-service-location-button:hover,
.eli-service-location-button:focus-visible {
	background: #151515;
	border-color: #151515;
	color: #fff;
}
.eli-service-locations-footer {
	margin: 28px auto 0;
	max-width: 980px;
	color: var(--eli-muted);
	font-size: 16px;
	line-height: 1.65;
	text-align: center;
}
.eli-service-locations-footer a {
	color: var(--eli-blue-bright);
	font-weight: 700;
	text-decoration: none;
}
.eli-service-locations-footer a:hover,
.eli-service-locations-footer a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 1100px) {
	.eli-service-area-map-stage {
		min-height: 0;
		padding: 64px 0 78px;
		background-position: 48% top;
	}
	.eli-service-area-card-wrap {
		justify-content: center;
	}
	.eli-service-area-card {
		width: min(760px, 100%);
	}
}

@media (max-width: 767px) {
	.eli-service-area-map-stage {
		padding: 46px 0 58px;
		background-position: 44% top;
	}
	.eli-service-area-card {
		width: 100%;
		padding: 28px 24px;
		border-width: 2px;
	}
	.eli-service-area-card-header h2 {
		font-size: clamp(29px, 8vw, 38px);
		text-align: center;
	}
	.eli-service-area-card-header p {
		font-size: 14px;
		text-align: center;
	}
	.eli-service-region-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.eli-service-region-column {
		gap: 16px;
	}
	.eli-service-region h3 {
		font-size: 16px;
	}
	.eli-service-region p {
		font-size: 12px;
	}
	.eli-service-area-actions {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.eli-service-area-actions p {
		font-size: 12px;
		text-align: center;
	}
	.eli-service-area-phone {
		width: 100%;
	}
	.eli-service-area-showrooms {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.eli-service-area-showrooms a:last-child {
		grid-column: 1 / -1;
		width: calc(50% - 6px);
	}
	.eli-service-locations {
		padding: 46px 0 54px;
	}
	.eli-service-locations-header {
		margin-bottom: 24px;
	}
	.eli-service-locations-header h2 {
		font-size: clamp(30px, 8vw, 38px);
	}
	.eli-service-locations-header p {
		font-size: 14px;
	}
	.eli-service-location-grid {
		gap: 9px 10px;
	}
	.eli-service-location-button {
		min-height: 34px;
		padding: 7px 13px;
		font-size: 11px;
	}
	.eli-service-locations-footer {
		margin-top: 24px;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eli-service-area-phone,
	.eli-service-area-showrooms a,
	.eli-service-location-button {
		transition: none;
	}
	.eli-service-area-phone:hover,
	.eli-service-area-phone:focus-visible,
	.eli-service-area-showrooms a:hover,
	.eli-service-area-showrooms a:focus-visible,
	.eli-service-location-button:hover,
	.eli-service-location-button:focus-visible {
		transform: none;
	}
}



/* =========================================================
   Frequently Asked Questions
   Production-faithful two-column accordion with measured
   height transitions from Kevin's 2026-08-10 recording.
   ========================================================= */
.eli-faq-section {
	position: relative;
	isolation: isolate;
	padding: 56px 0 54px;
	background:
		linear-gradient(rgb(4 64 94 / 0.88), rgb(8 75 110 / 0.82)),
		url("assets/images/service-all.webp") center 48% / cover no-repeat;
	color: #fff;
}
.eli-faq-section::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgb(6 74 107 / 0.18), rgb(0 41 67 / 0.08));
	pointer-events: none;
}
.eli-faq-heading {
	margin: 0 0 28px;
	font-family: var(--eli-font-heading);
	font-size: clamp(28px, 2.8vw, 38px);
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	letter-spacing: -0.02em;
}
.eli-faq-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-items: start;
}
.eli-faq-column {
	display: grid;
	gap: 10px;
	align-content: start;
}
.eli-faq-item {
	min-width: 0;
}
.eli-faq-question {
	position: relative;
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: 10px;
	align-items: center;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 12px 16px 12px 14px;
	border: 0;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	color: #111;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
	appearance: none;
}
.eli-faq-question:hover {
	background: #f7f7f7;
}
.eli-faq-question:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}
.eli-faq-toggle {
	position: relative;
	display: block;
	width: 15px;
	height: 15px;
	color: #111;
}
.eli-faq-toggle::before,
.eli-faq-toggle::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14px;
	height: 2px;
	background: currentColor;
	transform: translate(-50%, -50%);
	transform-origin: center;
	transition: transform 180ms ease, opacity 180ms ease;
}
.eli-faq-toggle::after {
	transform: translate(-50%, -50%) rotate(90deg);
}
.eli-faq-question[aria-expanded="true"] .eli-faq-toggle::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(0deg);
}
.eli-faq-answer {
	height: 0;
	overflow: hidden;
	visibility: hidden;
	transition: height 680ms cubic-bezier(0.4, 0, 0.2, 1);
	will-change: height;
}
.eli-faq-answer.is-open {
	visibility: visible;
}
.eli-faq-answer-inner {
	padding: 11px 16px 8px 14px;
	color: rgb(255 255 255 / 0.94);
	font-size: 12.5px;
	line-height: 1.58;
}
.eli-faq-answer-inner > :first-child {
	margin-top: 0;
}
.eli-faq-answer-inner > :last-child {
	margin-bottom: 0;
}
.eli-faq-answer-inner p {
	margin: 0 0 10px;
}
.eli-faq-answer-inner ul {
	margin: 7px 0 11px;
	padding-left: 18px;
}
.eli-faq-answer-inner li {
	margin: 0 0 7px;
}
.eli-faq-answer-inner strong {
	color: #fff;
}

@media (max-width: 767px) {
	.eli-faq-section {
		padding: 44px 0 46px;
		background-position: 57% center;
	}
	.eli-faq-heading {
		margin-bottom: 22px;
		font-size: clamp(27px, 7.2vw, 34px);
	}
	.eli-faq-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.eli-faq-question {
		min-height: 54px;
		padding: 13px 14px;
		font-size: 14px;
	}
	.eli-faq-answer-inner {
		padding: 12px 14px 9px;
		font-size: 12.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eli-faq-toggle::before,
	.eli-faq-toggle::after,
	.eli-faq-answer {
		transition: none !important;
	}
}


/* --------------------------------------------------------------------------
   From Our Blog — static POC snapshot
   Production will replace the hard-coded cards with a WordPress post query.
   -------------------------------------------------------------------------- */
.eli-blog-section {
	padding: clamp(54px, 6vw, 82px) 0 clamp(62px, 7vw, 92px);
	background: #fff;
}

.eli-blog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	margin-bottom: 28px;
}

.eli-blog-header h2 {
	margin: 0;
	font-family: var(--eli-font-heading);
	font-size: clamp(30px, 3vw, 44px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.035em;
}

.eli-blog-view-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-width: 184px;
	min-height: 52px;
	padding: 12px 24px;
	background: var(--eli-blue-bright);
	color: #fff;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transform: translateY(0);
	transition: transform 180ms ease, background-color 180ms ease;
}

.eli-blog-view-more svg {
	width: 19px;
	height: 19px;
	flex: 0 0 19px;
}

.eli-blog-view-more:hover,
.eli-blog-view-more:focus-visible {
	background: #111;
	transform: translateY(-8px);
}

.eli-blog-view-more:focus-visible {
	outline: 3px solid var(--eli-blue-bright);
	outline-offset: 3px;
}

.eli-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}

.eli-blog-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	background: #fff;
	border: 1px solid #eee;
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.07);
}

.eli-blog-card-image-link {
	display: block;
	overflow: hidden;
	margin: 18px 18px 0;
	background: #eee;
}

.eli-blog-card-image-link img {
	width: 100%;
	aspect-ratio: 1.1 / 1;
	object-fit: cover;
	transition: transform 260ms ease;
}

.eli-blog-card-image-link:hover img,
.eli-blog-card-image-link:focus-visible img {
	transform: scale(1.025);
}

.eli-blog-card-image-link:focus-visible {
	outline: 3px solid var(--eli-blue-bright);
	outline-offset: 3px;
}

.eli-blog-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 20px 18px 24px;
}

.eli-blog-card h3 {
	margin: 0 0 12px;
	font-family: var(--eli-font-heading);
	font-size: clamp(18px, 1.45vw, 22px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.025em;
}

.eli-blog-card h3 a {
	text-decoration: none;
}

.eli-blog-card h3 a:hover,
.eli-blog-card h3 a:focus-visible {
	color: var(--eli-blue);
}

.eli-blog-meta {
	margin: 0 0 22px;
	color: #666666;
	font-size: 12.5px;
	line-height: 1.45;
}

.eli-blog-meta span {
	margin-inline: 4px;
}

.eli-blog-read-more {
	align-self: flex-start;
	margin-top: auto;
	color: #126da5;
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 2px;
	transform: translateY(0);
	transition: transform 180ms ease, color 180ms ease;
}

.eli-blog-read-more:hover,
.eli-blog-read-more:focus-visible {
	color: #111;
	transform: translateY(-4px);
}

.eli-blog-read-more:focus-visible {
	outline: 2px solid var(--eli-blue-bright);
	outline-offset: 3px;
}

@media (max-width: 899px) {
	/* Keep the three-card editorial row intact through tablet widths. The
	   previous 2 + 1 state looked accidental and wasted vertical space. */
	.eli-blog-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(16px, 2.2vw, 24px);
	}
	.eli-blog-card-image-link {
		margin: 14px 14px 0;
	}
	.eli-blog-card-body {
		padding: 18px 14px 21px;
	}
}

@media (max-width: 639px) {
	.eli-blog-section {
		padding: 46px 0 54px;
	}
	.eli-blog-header {
		align-items: flex-start;
		flex-direction: column;
		margin-bottom: 24px;
	}
	.eli-blog-view-more {
		width: 100%;
	}
}

@media (max-width: 500px) {
	.eli-blog-grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eli-blog-view-more,
	.eli-blog-card-image-link img,
	.eli-blog-read-more {
		transition: none !important;
	}
	.eli-blog-view-more:hover,
	.eli-blog-view-more:focus-visible,
	.eli-blog-card-image-link:hover img,
	.eli-blog-card-image-link:focus-visible img,
	.eli-blog-read-more:hover,
	.eli-blog-read-more:focus-visible {
		transform: none !important;
	}
}

/* --------------------------------------------------------------------------
   0.1.30 — Blog media correction, Certified & Trusted, consultation CTA
   -------------------------------------------------------------------------- */

/* Live reference uses genuinely square post media. Lock the frame itself rather
   than relying on intrinsic image dimensions so 4:3 source images cannot stretch
   the card vertically. */
.eli-blog-card-image-link {
	aspect-ratio: 1 / 1;
}

.eli-blog-card-image-link img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}

.eli-section-kicker {
	display: inline-block;
	margin: 0 0 16px;
	padding: 6px 12px 6px 14px;
	border-left: 5px solid var(--eli-blue-bright);
	background: #e5edf4;
	color: #111;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
}

/* Certified & Trusted ------------------------------------------------------ */
.eli-partnerships-section {
	overflow: hidden;
	padding: clamp(56px, 6vw, 84px) 0 clamp(64px, 7vw, 94px);
	background: #f7f7f7;
}

.eli-partnerships-header {
	margin: 0 auto clamp(36px, 4vw, 54px);
	text-align: center;
}

.eli-partnerships-header h2 {
	margin: 0;
	font-family: var(--eli-font-heading);
	font-size: clamp(30px, 3vw, 44px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.035em;
}

.eli-partnerships-carousel {
	overflow: hidden;
	width: 100%;
	mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
}

.eli-partnerships-track {
	display: flex;
	align-items: center;
	width: 200%;
	will-change: transform;
	animation: eli-partnerships-loop 28s linear infinite;
}

.eli-partnerships-carousel:hover .eli-partnerships-track,
.eli-partnerships-carousel:focus-within .eli-partnerships-track {
	animation-play-state: paused;
}

.eli-partnership-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 10%;
	min-width: 0;
	padding-inline: clamp(20px, 2.5vw, 44px);
}

.eli-partnership-logo img {
	display: block;
	width: 100%;
	max-width: 220px;
	max-height: 112px;
	object-fit: contain;
}

.eli-partnership-logo:nth-child(3) img,
.eli-partnership-logo:nth-child(8) img {
	max-width: 126px;
	max-height: 126px;
}

@keyframes eli-partnerships-loop {
	to { transform: translateX(-50%); }
}

/* Free Design Consultation ------------------------------------------------ */
.eli-consultation-section {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #101010 url("assets/images/consultation/background.webp") center center / cover no-repeat;
	color: #fff;
}

.eli-consultation-overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(0 0 0 / 0.08);
}

.eli-consultation-layout {
	display: grid;
	grid-template-columns: minmax(330px, 0.82fr) minmax(0, 1.18fr);
	align-items: center;
	gap: clamp(34px, 4vw, 62px);
	padding-top: clamp(58px, 6vw, 82px);
	padding-bottom: clamp(58px, 6vw, 82px);
}

.eli-consultation-photo-card {
	margin: 0;
	padding: clamp(20px, 2vw, 28px);
	background: #fff;
	box-shadow: 0 18px 42px rgb(0 0 0 / 0.2);
}

.eli-consultation-photo-card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: auto;
	object-fit: contain;
}

/* Desktop production reference: the showroom photograph remains landscape
   inside an almost-square white frame. Do not crop it into a portrait tile. */
@media (min-width: 900px) {
	.eli-consultation-photo-card {
		display: grid;
		place-items: center;
		aspect-ratio: 1.03 / 1;
	}
}

.eli-consultation-content h2 {
	max-width: 720px;
	margin: 0 0 26px;
	font-family: var(--eli-font-heading);
	font-size: clamp(31px, 3.15vw, 46px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.035em;
	color: #fff;
}

.eli-consultation-benefits {
	display: grid;
	gap: 20px;
	margin-bottom: 26px;
}

.eli-consultation-benefit {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	align-items: start;
	gap: 16px;
}

.eli-consultation-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 13px;
	background: #fff;
	color: var(--eli-blue-bright);
}

.eli-consultation-icon svg {
	width: 30px;
	height: 30px;
}

.eli-consultation-benefit h3 {
	margin: 0 0 5px;
	font-family: var(--eli-font-heading);
	font-size: clamp(19px, 1.7vw, 25px);
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

.eli-consultation-benefit p {
	max-width: 760px;
	margin: 0;
	font-size: clamp(14px, 1.2vw, 17px);
	line-height: 1.5;
	color: rgb(255 255 255 / 0.92);
}

.eli-consultation-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 54px;
	padding: 13px 30px;
	border: 2px solid var(--eli-blue-bright);
	background: #fff;
	color: #111;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
	transform: translateY(0);
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.eli-consultation-cta svg {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
}

.eli-consultation-cta:hover,
.eli-consultation-cta:focus-visible {
	transform: translateY(-8px);
	box-shadow: 0 12px 24px rgb(0 0 0 / 0.24);
}

.eli-consultation-cta:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 4px;
}

@media (max-width: 899px) {
	.eli-partnerships-track {
		width: 333.333%;
		animation-duration: 24s;
	}
	.eli-partnership-logo {
		flex-basis: 10%;
		padding-inline: 22px;
	}
	.eli-partnership-logo img {
		max-width: 190px;
		max-height: 100px;
	}
	.eli-partnership-logo:nth-child(3) img,
	.eli-partnership-logo:nth-child(8) img {
		max-width: 112px;
		max-height: 112px;
	}
	.eli-consultation-layout {
		grid-template-columns: 1fr;
		gap: 34px;
	}
	.eli-consultation-photo-card {
		width: min(100%, 660px);
		margin-inline: auto;
	}
	.eli-consultation-content {
		width: min(100%, 760px);
		margin-inline: auto;
	}
}

@media (max-width: 639px) {
	.eli-partnerships-section {
		padding: 48px 0 58px;
	}
	.eli-partnerships-header {
		margin-bottom: 30px;
	}
	.eli-partnerships-header h2 {
		font-size: clamp(28px, 8vw, 34px);
	}
	.eli-partnerships-carousel {
		margin-inline: calc(var(--eli-gutter) * -0.5);
		width: calc(100% + var(--eli-gutter));
	}
	.eli-partnerships-track {
		width: 500%;
		animation-duration: 22s;
	}
	.eli-partnership-logo {
		padding-inline: 18px;
	}
	.eli-partnership-logo img {
		max-width: 170px;
		max-height: 90px;
	}
	.eli-partnership-logo:nth-child(3) img,
	.eli-partnership-logo:nth-child(8) img {
		max-width: 96px;
		max-height: 96px;
	}
	.eli-consultation-layout {
		padding-top: 48px;
		padding-bottom: 52px;
	}
	.eli-consultation-photo-card {
		padding: 14px;
	}
	.eli-consultation-content h2 {
		margin-bottom: 24px;
		font-size: clamp(29px, 8vw, 36px);
	}
	.eli-consultation-benefit {
		grid-template-columns: 46px minmax(0, 1fr);
		gap: 13px;
	}
	.eli-consultation-icon {
		width: 46px;
		height: 46px;
		border-radius: 11px;
	}
	.eli-consultation-icon svg {
		width: 27px;
		height: 27px;
	}
	.eli-consultation-benefit h3 {
		font-size: 18px;
	}
	.eli-consultation-benefit p {
		font-size: 13px;
	}
	.eli-consultation-cta {
		width: 100%;
		padding-inline: 18px;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eli-partnerships-track {
		width: 100%;
		animation: none !important;
		flex-wrap: wrap;
		justify-content: center;
	}
	.eli-partnership-logo {
		flex: 0 1 20%;
	}
	.eli-partnership-logo[aria-hidden="true"] {
		display: none;
	}
	.eli-consultation-cta {
		transition: none !important;
	}
	.eli-consultation-cta:hover,
	.eli-consultation-cta:focus-visible {
		transform: none !important;
	}
}

/* Global footer ---------------------------------------------------------- */
.eli-site-footer {
	background: #f4f4f4;
	color: #111;
}

.eli-footer-main {
	padding: clamp(52px, 5vw, 72px) 0 58px;
}

.eli-footer-contact-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.eli-footer-contact-card {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	min-height: 106px;
	padding: 20px;
	border: 1px solid #dedede;
	background: #fff;
	text-decoration: none;
}

.eli-footer-contact-card strong,
.eli-footer-showroom-card strong {
	display: block;
	font-family: var(--eli-font-heading);
	font-weight: 700;
	line-height: 1.28;
}

.eli-footer-contact-card strong { font-size: 20px; }
.eli-footer-contact-card span:not(.eli-footer-contact-icon) {
	display: block;
	font-size: 14px;
	line-height: 1.35;
}

.eli-footer-contact-icon,
.eli-footer-pin {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--eli-blue-pale);
	color: var(--eli-blue-icon);
}
.eli-footer-contact-icon svg,
.eli-footer-pin svg { width: 27px; height: 27px; }
.eli-footer-email { font-size: 15px !important; overflow-wrap: anywhere; }

.eli-footer-showroom-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin-top: 20px;
}

.eli-footer-showroom-card {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	align-items: center;
	gap: 13px;
	min-height: 90px;
	padding: 14px 16px;
	border: 1px solid #dedede;
	background: #fff;
	text-decoration: none;
}
.eli-footer-showroom-card .eli-footer-pin { width: 48px; height: 48px; border-radius: 13px; }
.eli-footer-showroom-card strong { font-size: 13px; }
.eli-footer-showroom-card span span { display: block; font-size: 12px; font-weight: 600; line-height: 1.28; }

.eli-footer-contact-card[href],
.eli-footer-showroom-card {
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.eli-footer-contact-card[href]:hover,
.eli-footer-contact-card[href]:focus-visible,
.eli-footer-showroom-card:hover,
.eli-footer-showroom-card:focus-visible {
	transform: translateY(-4px);
	border-color: var(--eli-blue-bright);
	box-shadow: 0 9px 22px rgb(0 0 0 / 0.08);
}

.eli-footer-rule {
	border: 0;
	border-top: 1px solid #d7d7d7;
	margin: 30px 0 34px;
}

.eli-footer-content-grid {
	display: grid;
	grid-template-columns: minmax(300px, 1.35fr) minmax(160px, .78fr) minmax(150px, .68fr) minmax(170px, .72fr);
	gap: clamp(34px, 5vw, 78px);
	align-items: start;
}

.eli-footer-logo {
	display: inline-block;
	width: 130px;
	margin-bottom: 20px;
}
.eli-footer-logo img { width: 100%; height: auto; }

.eli-footer-map-stack { display: grid; gap: 20px; }
.eli-footer-map-stack iframe {
	display: block;
	width: 100%;
	height: 112px;
	border: 0;
	background: #ddd;
}

.eli-footer-reviews {
	display: inline-block;
	margin: 22px 0 1px 18px;
	color: var(--eli-blue-bright);
	font-size: 17px;
	font-weight: 700;
	text-underline-offset: 3px;
}
.eli-footer-stars {
	margin-left: 76px;
	color: #f4a938;
	font-size: 40px;
	line-height: 1;
	letter-spacing: 1px;
}

.eli-footer-about-row {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	align-items: center;
	gap: 17px;
	margin-top: 14px;
}
.eli-footer-belgard { width: 88px; height: 88px; object-fit: contain; }
.eli-footer-about-row p { margin: 0; color: #666666; font-size: 12px; line-height: 1.45; }

.eli-footer-quote {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 202px;
	min-height: 49px;
	margin-top: 22px;
	padding: 12px 24px;
	border: 2px solid var(--eli-blue-bright);
	background: #000;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	transform: translateY(0);
	transition: transform 180ms ease, background-color 180ms ease;
}
.eli-footer-quote:hover,
.eli-footer-quote:focus-visible { transform: translateY(-8px); background: var(--eli-blue-bright); }

.eli-footer-link-column h3 {
	margin: 0 0 20px;
	font-family: var(--eli-font-heading);
	font-size: 19px;
	line-height: 1.25;
}
.eli-footer-link-column ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 19px; }
.eli-footer-link-column a { color: #6f6f6f; font-size: 14px; text-decoration: none; transition: color 150ms ease; }
.eli-footer-link-column a:hover,
.eli-footer-link-column a:focus-visible { color: var(--eli-blue-bright); text-decoration: underline; text-underline-offset: 3px; }

.eli-footer-licences { display: grid; gap: 15px; margin-top: 24px; color: #6c6c6c; font-size: 13px; }
.eli-footer-licences span { display: flex; align-items: center; gap: 9px; }
.eli-footer-licences svg { width: 16px; height: 16px; flex: 0 0 16px; color: #222; }

.eli-footer-bottom { background: #303030; color: #e7e7e7; }
.eli-footer-bottom-inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 28px;
	min-height: 64px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.eli-footer-legal { display: flex; align-items: center; gap: 25px; }
.eli-footer-legal a { color: #ddd; font-size: 12px; text-decoration: none; }
.eli-footer-legal a + a { position: relative; }
.eli-footer-legal a + a::before { content: ""; position: absolute; left: -13px; top: 2px; bottom: 2px; width: 1px; background: #666; }
.eli-footer-copyright { margin: 0; text-align: center; font-size: 12px; color: #e0e0e0; }
.eli-footer-copyright a { color: inherit; text-underline-offset: 2px; }

.eli-footer-social { display: flex; align-items: center; gap: 8px; }
.eli-footer-social a {
	display: grid;
	place-items: center;
	width: 33px;
	height: 33px;
	border-radius: 9px;
	background: #373737;
	color: #fff;
	text-decoration: none;
	transition: transform 150ms ease, background-color 150ms ease;
}
.eli-footer-social a:last-child { background: var(--eli-blue-bright); }
.eli-footer-social svg { width: 18px; height: 18px; }
.eli-footer-social a:hover,
.eli-footer-social a:focus-visible { transform: translateY(-3px); background: var(--eli-blue-bright); }

@media (max-width: 1050px) {
	.eli-footer-contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.eli-footer-showroom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.eli-footer-content-grid { grid-template-columns: minmax(280px, 1.2fr) repeat(2, minmax(150px, .8fr)); }
	.eli-footer-brand-column { grid-row: span 2; }
	.eli-footer-link-column:last-child { grid-column: 2 / -1; }
	.eli-footer-link-column:last-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; }
	.eli-footer-bottom-inner { grid-template-columns: 1fr auto; }
	.eli-footer-copyright { grid-row: 2; grid-column: 1 / -1; }
}

@media (max-width: 760px) {
	.eli-footer-main { padding-top: 38px; padding-bottom: 42px; }
	.eli-footer-contact-grid { grid-template-columns: 1fr; gap: 12px; }
	.eli-footer-contact-card { min-height: 82px; padding: 14px 16px; }
	.eli-footer-contact-card strong { font-size: 18px; }
	.eli-footer-showroom-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
	.eli-footer-showroom-card { min-height: 78px; }
	.eli-footer-rule { margin-block: 26px; }
	.eli-footer-content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 24px; }
	.eli-footer-brand-column { grid-column: 1 / -1; grid-row: auto; }
	.eli-footer-map-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.eli-footer-map-stack iframe { height: 120px; }
	.eli-footer-reviews { margin-left: 0; }
	.eli-footer-stars { margin-left: 0; font-size: 34px; }
	.eli-footer-about-row { max-width: 520px; }
	.eli-footer-link-column:last-child { grid-column: 1 / -1; }
	.eli-footer-link-column:last-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
	.eli-footer-link-column ul { gap: 13px; }
	.eli-footer-bottom-inner { grid-template-columns: 1fr; justify-items: center; gap: 14px; padding-top: 18px; padding-bottom: 18px; }
	.eli-footer-legal { justify-content: center; }
	.eli-footer-copyright { grid-row: auto; grid-column: auto; }
	.eli-footer-social { justify-content: center; flex-wrap: wrap; }
}

@media (max-width: 480px) {
	.eli-footer-map-stack { grid-template-columns: 1fr; }
	.eli-footer-map-stack iframe { height: 138px; }
	/* Preserve the useful two-column link layout through 480px. The brand
	   block and Service Location group already span both columns at this
	   range; Our Services and Navigation therefore sit naturally side by side. */
	.eli-footer-content-grid { gap: 30px 20px; }
	.eli-footer-link-column:last-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.eli-footer-link-column h3 { margin-bottom: 14px; }
	.eli-footer-about-row { grid-template-columns: 72px minmax(0, 1fr); }
	.eli-footer-belgard { width: 72px; height: 72px; }
	.eli-footer-quote { width: 100%; }
}

@media (max-width: 400px) {
	/* Only collapse the principal footer link columns when two genuinely
	   become cramped. Keep Service Location itself in its efficient 2-column list. */
	.eli-footer-content-grid { grid-template-columns: 1fr; }
	.eli-footer-brand-column,
	.eli-footer-link-column:last-child { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.eli-footer-contact-card[href],
	.eli-footer-showroom-card,
	.eli-footer-quote,
	.eli-footer-social a { transition: none !important; }
	.eli-footer-contact-card[href]:hover,
	.eli-footer-contact-card[href]:focus-visible,
	.eli-footer-showroom-card:hover,
	.eli-footer-showroom-card:focus-visible,
	.eli-footer-quote:hover,
	.eli-footer-quote:focus-visible,
	.eli-footer-social a:hover,
	.eli-footer-social a:focus-visible { transform: none !important; }
}

/* --------------------------------------------------------------------------
   0.1.40 POC — responsive-system pass 02 (768–899px)
   Kevin's 843px QA identified three over-generous section transitions plus
   uneven closed FAQ rows. Desktop reconciliation values remain unchanged.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 899px) {
	/* Preserve the desktop hero control, but add a clearer responsive emphasis. */
	.eli-hero-title-accent {
		color: #C9E4F3;
	}

	/* Hero/statistics → Who We Are: reduce the combined 150px transition. */
	.eli-stats-wrap {
		padding-bottom: 48px;
	}
	.eli-about-section {
		padding-top: 56px;
	}

	/* Services → Financing: reduce the combined 150px transition. */
	.eli-services-section {
		padding-bottom: 58px;
	}
	.eli-finance-section {
		padding-top: 48px;
	}

	/* Before & After → filterable Gallery: reduce the combined 144px transition. */
	.eli-transform-section {
		padding-bottom: 52px;
	}
	.eli-filter-gallery-section {
		padding-top: 48px;
	}

	/* Two independent FAQ columns cannot share row height automatically.
	   A fixed closed-question height keeps every tablet row visually even while
	   still allowing the accordion answer to expand naturally beneath it. */
	.eli-faq-question {
		height: 64px;
		min-height: 64px;
	}
}



/* --------------------------------------------------------------------------
   0.2.2 editing POC — editor/front-end parity foundation
   Gutenberg owns content; the theme owns protected layout. These compatibility
   rules are scoped to the migrated section classes themselves so the block
   editor and real front end consume the same presentation rules.
   -------------------------------------------------------------------------- */
.eli-gutenberg-section { margin-block-start: 0; margin-block-end: 0; }

/* WordPress global flow layout injects a default 24px block gap. That is useful
   for generic content but must not alter controlled grids/cards whose rhythm is
   already defined by the Eli design system. */
.eli-gutenberg-section .eli-about-grid > *,
.eli-gutenberg-section .eli-about-side > *,
.eli-gutenberg-section .eli-belgard-card > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Make Media Library replacement deterministic: the figure owns the full card
   width while the supplied/replaced logo remains centred by the theme. */
.eli-gutenberg-section .eli-belgard-card > .wp-block-image {
	display: flex;
	width: 100%;
	justify-content: center;
}
.eli-gutenberg-section .eli-belgard-card > .wp-block-image img {
	display: block;
	margin-inline: auto;
}

/* Gutenberg adds wrapper blocks around buttons. Recreate the exact spacing that
   the frozen PHP control used instead of inheriting the generic flow gap. */
.eli-gutenberg-section .eli-about-copy > .wp-block-buttons { margin: 5px 0 0; }
.eli-gutenberg-section .eli-about-copy > .wp-block-buttons .wp-block-button { margin: 0; }
.eli-gutenberg-section .eli-hero-actions .wp-block-button { margin: 0; }

.eli-gutenberg-section .eli-gb-button .wp-block-button__link {
	min-height: 49px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 38px;
	border: 2px solid transparent;
	border-radius: 0;
	font-family: var(--eli-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.eli-gutenberg-section .eli-gb-button-primary .wp-block-button__link {
	min-width: 273px;
	background: var(--eli-blue-bright);
	color: #fff;
}
.eli-gutenberg-section .eli-gb-button-primary .wp-block-button__link:hover,
.eli-gutenberg-section .eli-gb-button-primary .wp-block-button__link:focus-visible { background: #276f9f; }
.eli-gutenberg-section .eli-gb-button-secondary .wp-block-button__link {
	min-width: 259px;
	border-color: #fff;
	background: transparent;
	color: #fff;
}
.eli-gutenberg-section .eli-gb-button-secondary .wp-block-button__link:hover,
.eli-gutenberg-section .eli-gb-button-secondary .wp-block-button__link:focus-visible {
	background: #fff;
	color: #111;
}

.eli-gutenberg-section .eli-gb-about-button .wp-block-button__link {
	min-height: 47px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 22px;
	border: 0;
	border-radius: 0;
	background: var(--eli-blue-bright);
	color: #fff;
	font-family: var(--eli-font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}
.eli-gutenberg-section .eli-gb-about-button .wp-block-button__link:hover,
.eli-gutenberg-section .eli-gb-about-button .wp-block-button__link:focus-visible { background: #286b94; }

@media (min-width: 768px) and (max-width: 1100px) {
	.eli-gutenberg-section .eli-gb-button .wp-block-button__link { min-height: 49px; padding-inline: 28px; }
	.eli-gutenberg-section .eli-gb-button-primary .wp-block-button__link { min-width: 260px; }
	.eli-gutenberg-section .eli-gb-button-secondary .wp-block-button__link { min-width: 245px; }
}

@media (max-width: 767px) {
	.eli-gutenberg-section .eli-hero-actions .wp-block-button,
	.eli-gutenberg-section .eli-gb-button .wp-block-button__link { width: 100%; }
	.eli-gutenberg-section .eli-gb-button .wp-block-button__link { min-width: 0; }
}


/* 0.3.7 Lighthouse remediation: smaller mobile background payload. */
@media (min-width: 601px) and (max-width: 768px) {
	.eli-belgard-promo {
		background-image:
			linear-gradient(90deg, rgb(19 104 151 / .91) 0%, rgb(9 54 79 / .90) 52%, rgb(4 37 56 / .82) 100%),
			url('assets/images/belgard-master-craftsman-bg-mobile.webp');
	}
}

@media (max-width: 768px) {
	.eli-consultation-section {
		background-image: url("assets/images/consultation/background-mobile.webp");
	}
}

/* 0.4.0 — safe editor presentation controls.
 * These classes are emitted only when an editor deliberately chooses an
 * alignment override. The approved theme layout remains the default. */
.eli-align-text-left { text-align: left !important; }
.eli-align-text-center { text-align: center !important; }
.eli-align-text-right { text-align: right !important; }
.eli-align-text-justify { text-align: justify !important; }

.eli-align-vertical-top { align-self: start !important; }
.eli-align-vertical-middle { align-self: center !important; }
.eli-align-vertical-bottom { align-self: end !important; }

.wp-block-image.eli-align-image-left { margin-left: 0 !important; margin-right: auto !important; }
.wp-block-image.eli-align-image-center { margin-left: auto !important; margin-right: auto !important; }
.wp-block-image.eli-align-image-right { margin-left: auto !important; margin-right: 0 !important; }

.wp-block-image.eli-align-image-left img { margin-left: 0 !important; margin-right: auto !important; }
.wp-block-image.eli-align-image-center img { margin-left: auto !important; margin-right: auto !important; }
.wp-block-image.eli-align-image-right img { margin-left: auto !important; margin-right: 0 !important; }

.wp-block-image.eli-image-position-top img { object-position: center top !important; }
.wp-block-image.eli-image-position-center img { object-position: center center !important; }
.wp-block-image.eli-image-position-bottom img { object-position: center bottom !important; }
.wp-block-image.eli-image-position-left img { object-position: left center !important; }
.wp-block-image.eli-image-position-right img { object-position: right center !important; }

/* --------------------------------------------------------------------------
   0.4.1 — editor experience: section presets, not a page builder.
   Responsive alignment is deliberately offered only at section/component
   level. The theme still owns spacing, widths, typography and breakpoints.
   -------------------------------------------------------------------------- */

/* Native Gutenberg sections: desktop/tablet choices. */
@media (min-width: 768px) {
	.eli-hero.eli-section-align-desktop-left .eli-hero-inner { text-align: left !important; }
	.eli-hero.eli-section-align-desktop-left .eli-hero-actions { justify-content: flex-start !important; }
	.eli-hero.eli-section-align-desktop-center .eli-hero-inner { text-align: center !important; }
	.eli-hero.eli-section-align-desktop-center .eli-hero-actions { justify-content: center !important; }

	.eli-about-section.eli-section-align-desktop-left .eli-about-copy { text-align: left !important; }
	.eli-about-section.eli-section-align-desktop-left .eli-about-copy > .wp-block-buttons { justify-content: flex-start !important; }
	.eli-about-section.eli-section-align-desktop-center .eli-about-copy { text-align: center !important; }
	.eli-about-section.eli-section-align-desktop-center .eli-about-copy > .wp-block-buttons { justify-content: center !important; }
	.eli-about-section.eli-section-align-desktop-center .eli-about-copy h2,
	.eli-about-section.eli-section-align-desktop-center .eli-about-copy p:not(.eli-section-eyebrow) { margin-inline: auto; }

	.eli-about-section.eli-about-copy-vertical-top .eli-about-copy { align-self: start !important; }
	.eli-about-section.eli-about-copy-vertical-middle .eli-about-copy { align-self: center !important; }
	.eli-about-section.eli-about-copy-vertical-bottom .eli-about-copy { align-self: end !important; }
	.eli-about-section.eli-about-portrait-vertical-top .eli-about-team { align-self: start !important; }
	.eli-about-section.eli-about-portrait-vertical-middle .eli-about-team { align-self: center !important; }
	.eli-about-section.eli-about-portrait-vertical-bottom .eli-about-team { align-self: end !important; }
}

/* Native Gutenberg sections: mobile choices are independent presets. */
@media (max-width: 767px) {
	.eli-hero.eli-section-align-mobile-left .eli-hero-inner { text-align: left !important; }
	.eli-hero.eli-section-align-mobile-left .eli-hero-actions { justify-content: flex-start !important; }
	.eli-hero.eli-section-align-mobile-center .eli-hero-inner { text-align: center !important; }
	.eli-hero.eli-section-align-mobile-center .eli-hero-actions { justify-content: center !important; }

	.eli-about-section.eli-section-align-mobile-left .eli-about-copy { text-align: left !important; }
	.eli-about-section.eli-section-align-mobile-left .eli-about-copy > .wp-block-buttons { justify-content: flex-start !important; }
	.eli-about-section.eli-section-align-mobile-center .eli-about-copy { text-align: center !important; }
	.eli-about-section.eli-section-align-mobile-center .eli-about-copy > .wp-block-buttons { justify-content: center !important; }
	.eli-about-section.eli-section-align-mobile-center .eli-about-copy h2,
	.eli-about-section.eli-section-align-mobile-center .eli-about-copy p:not(.eli-section-eyebrow) { margin-inline: auto; }
}

.eli-about-section.eli-about-portrait-focus-top .eli-about-team img { object-position: center top !important; }
.eli-about-section.eli-about-portrait-focus-center .eli-about-team img { object-position: center center !important; }
.eli-about-section.eli-about-portrait-focus-bottom .eli-about-team img { object-position: center bottom !important; }

/* Managed components: a single heading/intro preset controls the intended
   editorial introduction, never the cards or arbitrary nested content. */
@media (min-width: 768px) {
	.eli-managed-heading-desktop-left .eli-gallery-heading,
	.eli-managed-heading-desktop-left .eli-difference-heading,
	.eli-managed-heading-desktop-left .eli-services-heading,
	.eli-managed-heading-desktop-left .eli-belgard-promo-copy,
	.eli-managed-heading-desktop-left .eli-transform-intro,
	.eli-managed-heading-desktop-left .eli-filter-gallery-heading,
	.eli-managed-heading-desktop-left .eli-job-sites-copy,
	.eli-managed-heading-desktop-left .eli-testimonials-header,
	.eli-managed-heading-desktop-left .eli-service-area-card-header,
	.eli-managed-heading-desktop-left .eli-service-locations-header,
	.eli-managed-heading-desktop-left .eli-partnerships-header { text-align: left !important; margin-left: 0; margin-right: auto; }
	.eli-process-section.eli-managed-heading-desktop-left > .eli-container-wide > h2,
	.eli-managed-heading-desktop-left .eli-faq-heading,
	.eli-managed-heading-desktop-left .eli-blog-header h2,
	.eli-managed-heading-desktop-left .eli-consultation-content > h2 { text-align: left !important; }

	.eli-managed-heading-desktop-center .eli-gallery-heading,
	.eli-managed-heading-desktop-center .eli-difference-heading,
	.eli-managed-heading-desktop-center .eli-services-heading,
	.eli-managed-heading-desktop-center .eli-belgard-promo-copy,
	.eli-managed-heading-desktop-center .eli-transform-intro,
	.eli-managed-heading-desktop-center .eli-filter-gallery-heading,
	.eli-managed-heading-desktop-center .eli-job-sites-copy,
	.eli-managed-heading-desktop-center .eli-testimonials-header,
	.eli-managed-heading-desktop-center .eli-service-area-card-header,
	.eli-managed-heading-desktop-center .eli-service-locations-header,
	.eli-managed-heading-desktop-center .eli-partnerships-header { text-align: center !important; margin-left: auto; margin-right: auto; }
	.eli-process-section.eli-managed-heading-desktop-center > .eli-container-wide > h2,
	.eli-managed-heading-desktop-center .eli-faq-heading,
	.eli-managed-heading-desktop-center .eli-blog-header h2,
	.eli-managed-heading-desktop-center .eli-consultation-content > h2 { text-align: center !important; margin-left: auto; margin-right: auto; }
}

@media (max-width: 767px) {
	.eli-managed-heading-mobile-left .eli-gallery-heading,
	.eli-managed-heading-mobile-left .eli-difference-heading,
	.eli-managed-heading-mobile-left .eli-services-heading,
	.eli-managed-heading-mobile-left .eli-belgard-promo-copy,
	.eli-managed-heading-mobile-left .eli-transform-intro,
	.eli-managed-heading-mobile-left .eli-filter-gallery-heading,
	.eli-managed-heading-mobile-left .eli-job-sites-copy,
	.eli-managed-heading-mobile-left .eli-testimonials-header,
	.eli-managed-heading-mobile-left .eli-service-area-card-header,
	.eli-managed-heading-mobile-left .eli-service-locations-header,
	.eli-managed-heading-mobile-left .eli-partnerships-header { text-align: left !important; margin-left: 0; margin-right: auto; }
	.eli-process-section.eli-managed-heading-mobile-left > .eli-container-wide > h2,
	.eli-managed-heading-mobile-left .eli-faq-heading,
	.eli-managed-heading-mobile-left .eli-blog-header h2,
	.eli-managed-heading-mobile-left .eli-consultation-content > h2 { text-align: left !important; }

	.eli-managed-heading-mobile-center .eli-gallery-heading,
	.eli-managed-heading-mobile-center .eli-difference-heading,
	.eli-managed-heading-mobile-center .eli-services-heading,
	.eli-managed-heading-mobile-center .eli-belgard-promo-copy,
	.eli-managed-heading-mobile-center .eli-transform-intro,
	.eli-managed-heading-mobile-center .eli-filter-gallery-heading,
	.eli-managed-heading-mobile-center .eli-job-sites-copy,
	.eli-managed-heading-mobile-center .eli-testimonials-header,
	.eli-managed-heading-mobile-center .eli-service-area-card-header,
	.eli-managed-heading-mobile-center .eli-service-locations-header,
	.eli-managed-heading-mobile-center .eli-partnerships-header { text-align: center !important; margin-left: auto; margin-right: auto; }
	.eli-process-section.eli-managed-heading-mobile-center > .eli-container-wide > h2,
	.eli-managed-heading-mobile-center .eli-faq-heading,
	.eli-managed-heading-mobile-center .eli-blog-header h2,
	.eli-managed-heading-mobile-center .eli-consultation-content > h2 { text-align: center !important; margin-left: auto; margin-right: auto; }
}

/* Only components with an intentional two-column/three-column relationship
   receive a vertical-content preset. */
.eli-finance-section.eli-managed-content-vertical-top .eli-finance-copy,
.eli-belgard-promo.eli-managed-content-vertical-top .eli-belgard-promo-copy,
.eli-transform-section.eli-managed-content-vertical-top .eli-transform-intro,
.eli-job-sites-section.eli-managed-content-vertical-top .eli-job-sites-copy,
.eli-consultation-section.eli-managed-content-vertical-top .eli-consultation-content { align-self: start !important; }
.eli-finance-section.eli-managed-content-vertical-middle .eli-finance-copy,
.eli-belgard-promo.eli-managed-content-vertical-middle .eli-belgard-promo-copy,
.eli-transform-section.eli-managed-content-vertical-middle .eli-transform-intro,
.eli-job-sites-section.eli-managed-content-vertical-middle .eli-job-sites-copy,
.eli-consultation-section.eli-managed-content-vertical-middle .eli-consultation-content { align-self: center !important; }
.eli-finance-section.eli-managed-content-vertical-bottom .eli-finance-copy,
.eli-belgard-promo.eli-managed-content-vertical-bottom .eli-belgard-promo-copy,
.eli-transform-section.eli-managed-content-vertical-bottom .eli-transform-intro,
.eli-job-sites-section.eli-managed-content-vertical-bottom .eli-job-sites-copy,
.eli-consultation-section.eli-managed-content-vertical-bottom .eli-consultation-content { align-self: end !important; }


/* --------------------------------------------------------------------------
   0.4.2 — approved Eli mobile composition + logged-in sticky masthead repair.

   Who We Are is not a generic two-column reversal. The approved mobile design
   interleaves copy and media from the three desktop panels. Keep that
   client-specific behaviour in the Eli theme rather than teaching the shared
   AllScapes layer arbitrary per-item ordering.
   -------------------------------------------------------------------------- */

/* WordPress changes the front-end admin bar from fixed to in-flow/absolute on
   small screens. Once that bar scrolls away, a 46px sticky offset leaves the
   masthead visibly below the top of the viewport. Visitors are unaffected;
   this corrects the logged-in mobile editing/review experience. */
@media (max-width: 600px) {
	body.admin-bar .eli-site-header {
		top: 0 !important;
	}
}

@media (max-width: 767px) {
	/* Preserve the Eli section itself even if the shared AllScapes plugin has a
	   legacy generic reversal class saved on the inner layout Group. */
	body .eli-about-section .eli-about-grid,
	body .eli-about-section .eli-about-grid.as-mobile-content-reverse {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		grid-template-rows: none !important;
		grid-template-areas: none !important;
		grid-auto-flow: row !important;
		gap: 0 !important;
		width: min(calc(100% - 32px), 520px) !important;
	}

	/* Flatten the copy wrapper only at mobile so its editable children can be
	   interleaved with the owner portrait while the desktop grid remains intact. */
	body .eli-about-section .eli-about-copy {
		display: contents !important;
	}

	body .eli-about-section .eli-about-copy > .eli-section-eyebrow {
		order: 1 !important;
		margin: 0 0 14px !important;
	}

	body .eli-about-section .eli-about-copy > h2 {
		order: 2 !important;
		margin: 0 0 18px !important;
	}

	body .eli-about-section .eli-about-team {
		order: 3 !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 0 20px !important;
		grid-column: auto !important;
		grid-row: auto !important;
	}

	body .eli-about-section .eli-about-copy > p:not(.eli-section-eyebrow) {
		order: 4 !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 0 18px !important;
	}

	body .eli-about-section .eli-about-copy > .wp-block-buttons,
	body .eli-about-section .eli-about-copy > .eli-about-button {
		order: 5 !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 0 18px !important;
		justify-content: stretch !important;
	}

	body .eli-about-section .eli-about-copy > .wp-block-buttons .wp-block-button,
	body .eli-about-section .eli-about-copy > .wp-block-buttons .wp-block-button__link,
	body .eli-about-section .eli-about-copy > .eli-about-button {
		width: 100% !important;
	}

	body .eli-about-section .eli-about-side {
		order: 6 !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		grid-column: auto !important;
		grid-row: auto !important;
	}

	/* The secondary team image is already intentionally hidden below 1101px.
	   Keep that decision explicit in the mobile composition. */
	body .eli-about-section .eli-about-support {
		display: none !important;
	}

	/* Section-level mobile alignment continues to work even though the copy
	   wrapper no longer generates its own box at this breakpoint. */
	body .eli-about-section.eli-section-align-mobile-left .eli-section-eyebrow,
	body .eli-about-section.eli-section-align-mobile-left h2,
	body .eli-about-section.eli-section-align-mobile-left .eli-about-copy > p:not(.eli-section-eyebrow) {
		text-align: left !important;
	}

	body .eli-about-section.eli-section-align-mobile-center .eli-section-eyebrow,
	body .eli-about-section.eli-section-align-mobile-center h2,
	body .eli-about-section.eli-section-align-mobile-center .eli-about-copy > p:not(.eli-section-eyebrow) {
		text-align: center !important;
	}

	body .eli-about-section.eli-section-align-mobile-left .eli-about-copy > .wp-block-buttons {
		justify-content: flex-start !important;
	}

	body .eli-about-section.eli-section-align-mobile-center .eli-about-copy > .wp-block-buttons {
		justify-content: center !important;
	}
}

/* --------------------------------------------------------------------------
   0.4.4 — mobile typography parity.

   At the 480px comparison viewport, Elle’s approved Elementor reference uses
   a 22px Who We Are H2 and 17px body copy. Keep this correction narrowly
   scoped to the Eli Who We Are section so no other reconciled section or
   editor alignment behaviour is affected.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	body .eli-about-section .eli-about-copy > h2 {
		font-size: 22px !important;
	}

	body .eli-about-section .eli-about-copy > p:not(.eli-section-eyebrow) {
		font-size: 17px !important;
	}
}

/* --------------------------------------------------------------------------
   0.4.5 — controlled mobile content-order presets + mobile overflow hardening
   -------------------------------------------------------------------------- */

/* The editor exposes only Normal / Reverse. Each client section keeps ownership
   of the breakpoint and of what constitutes its two logical columns. */
@media (max-width: 900px) {
	.eli-finance-section.eli-managed-mobile-order-reverse .eli-finance-copy {
		order: 2;
	}
	.eli-finance-section.eli-managed-mobile-order-reverse .eli-finance-video {
		order: 1;
	}

	/* The right-hand Transform column is three siblings in the DOM. Keep its
	   intro, points and CTA together conceptually when the media column leads. */
	.eli-transform-section.eli-managed-mobile-order-reverse .eli-comparison {
		order: 1;
	}
	.eli-transform-section.eli-managed-mobile-order-reverse .eli-transform-intro {
		order: 2;
	}
	.eli-transform-section.eli-managed-mobile-order-reverse .eli-transform-points {
		order: 3;
	}
	.eli-transform-section.eli-managed-mobile-order-reverse .eli-transform-button {
		order: 4;
	}

	.eli-job-sites-section.eli-managed-mobile-order-reverse .eli-job-sites-copy {
		order: 2;
	}
	.eli-job-sites-section.eli-managed-mobile-order-reverse .eli-job-sites-map-wrap {
		order: 1;
	}
}

@media (max-width: 899px) {
	.eli-consultation-section.eli-managed-mobile-order-reverse .eli-consultation-photo-card {
		order: 2;
	}
	.eli-consultation-section.eli-managed-mobile-order-reverse .eli-consultation-content {
		order: 1;
	}
}

/* Contain the tiny page-level mobile pan without turning the root into a
   horizontal scroll container. Internal components with their own overflow
   (filters, carousels and dialogs) retain their local behaviour. */
@media (max-width: 767px) {
	html,
	body,
	body.eli-nav-open {
		max-width: 100%;
		overflow-x: clip;
	}
}



/* --------------------------------------------------------------------------
   0.4.6 — live mobile composition, typography and gallery-filter parity.

   Reconciled against the current production homepage and the authoritative
   480px capture. On the live Eli design, the selected mobile alternative for
   Financing, Before & After and Recent Job Sites is not a raw two-column
   reversal: the section eyebrow and H2 lead, the media follows, then copy and
   CTA content continues. Keep this as Eli-specific theme composition.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* Financing: eyebrow -> heading -> video -> copy -> button. */
	.eli-finance-section.eli-managed-mobile-order-reverse .eli-finance-card {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
	.eli-finance-section.eli-managed-mobile-order-reverse .eli-finance-copy {
		display: contents;
	}
	.eli-finance-section.eli-managed-mobile-order-reverse .eli-finance-copy > .eli-section-eyebrow {
		order: 1;
		margin-bottom: 14px;
	}
	.eli-finance-section.eli-managed-mobile-order-reverse .eli-finance-copy > h2 {
		order: 2;
		margin-bottom: 20px;
	}
	.eli-finance-section.eli-managed-mobile-order-reverse .eli-finance-video {
		order: 3;
		margin-bottom: 22px;
	}
	.eli-finance-section.eli-managed-mobile-order-reverse .eli-finance-copy > p:not(.eli-section-eyebrow) {
		order: 4;
		margin: 0 0 18px;
	}
	.eli-finance-section.eli-managed-mobile-order-reverse .eli-finance-copy > .eli-finance-button {
		order: 5;
		margin-top: 0;
	}

	/* Before & After: eyebrow -> heading -> comparison -> copy -> points -> CTA. */
	.eli-transform-section.eli-managed-mobile-order-reverse .eli-transform-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
	.eli-transform-section.eli-managed-mobile-order-reverse .eli-transform-intro {
		display: contents;
	}
	.eli-transform-section.eli-managed-mobile-order-reverse .eli-transform-intro > .eli-section-eyebrow {
		order: 1;
		margin-bottom: 14px;
	}
	.eli-transform-section.eli-managed-mobile-order-reverse .eli-transform-intro > h2 {
		order: 2;
		margin-bottom: 20px;
	}
	.eli-transform-section.eli-managed-mobile-order-reverse .eli-comparison {
		order: 3;
		margin-bottom: 22px;
	}
	.eli-transform-section.eli-managed-mobile-order-reverse .eli-transform-intro > p:not(.eli-section-eyebrow) {
		order: 4;
		margin: 0 0 18px;
	}
	.eli-transform-section.eli-managed-mobile-order-reverse .eli-transform-points {
		order: 5;
		margin: 0 0 18px;
	}
	.eli-transform-section.eli-managed-mobile-order-reverse .eli-transform-button {
		order: 6;
	}

	/* Recent Job Sites: eyebrow -> heading -> map -> copy -> button. */
	.eli-job-sites-section.eli-managed-mobile-order-reverse .eli-job-sites-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
	.eli-job-sites-section.eli-managed-mobile-order-reverse .eli-job-sites-copy {
		display: contents;
	}
	.eli-job-sites-section.eli-managed-mobile-order-reverse .eli-job-sites-copy > .eli-section-eyebrow {
		order: 1;
		margin-bottom: 14px;
	}
	.eli-job-sites-section.eli-managed-mobile-order-reverse .eli-job-sites-copy > h2 {
		order: 2;
		margin-bottom: 20px;
	}
	.eli-job-sites-section.eli-managed-mobile-order-reverse .eli-job-sites-map-wrap {
		order: 3;
		margin-bottom: 22px;
	}
	.eli-job-sites-section.eli-managed-mobile-order-reverse .eli-job-sites-copy > p:not(.eli-section-eyebrow) {
		order: 4;
		margin: 0 0 18px;
	}
	.eli-job-sites-section.eli-managed-mobile-order-reverse .eli-job-sites-copy > .eli-job-sites-button {
		order: 5;
		margin-top: 0;
	}

	/* The live filter row wraps and centres at mobile instead of becoming a
	   horizontally scrollable control strip. */
	.eli-filter-gallery-filters {
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
		margin: 28px 0 0;
		padding: 0;
		overflow: visible;
		scrollbar-width: auto;
		-webkit-overflow-scrolling: auto;
	}
	.eli-filter-gallery-filter {
		flex: 0 0 auto;
	}

	/* Production mobile typography scale. The 480px DevTools comparison gives
	   an exact 22px H2 reference; the production captures show that same main
	   section-heading scale throughout the homepage. */
	.eli-about-copy > h2,
	.eli-gallery-heading h2,
	.eli-difference-heading h2,
	.eli-services-heading h2,
	.eli-finance-copy h2,
	.eli-belgard-promo-copy h2,
	.eli-transform-intro h2,
	.eli-filter-gallery-heading h2,
	.eli-process-section > .eli-container-wide > h2,
	.eli-job-sites-copy h2,
	.eli-testimonials-header h2,
	.eli-service-area-card-header h2,
	.eli-service-locations-header h2,
	.eli-faq-heading,
	.eli-blog-header h2,
	.eli-partnerships-header h2,
	.eli-consultation-content h2 {
		font-size: 22px !important;
		line-height: 1.28 !important;
	}

	/* Narrative copy uses the 17px production mobile body scale where the live
	   design presents full section copy, while compact intros/cards retain their
	   smaller visual hierarchy. */
	.eli-about-copy > p:not(.eli-section-eyebrow),
	.eli-services-heading > p:last-child,
	.eli-finance-copy > p:not(.eli-section-eyebrow),
	.eli-belgard-promo-copy p,
	.eli-transform-intro > p:not(.eli-section-eyebrow),
	.eli-job-sites-copy > p:not(.eli-section-eyebrow) {
		font-size: 17px !important;
		line-height: 1.55 !important;
	}

	.eli-gallery-heading p,
	.eli-filter-gallery-heading p,
	.eli-testimonials-header p,
	.eli-service-area-card-header p,
	.eli-service-locations-header p {
		font-size: 15px !important;
		line-height: 1.55 !important;
	}

	.eli-difference-card p {
		font-size: 14px !important;
		line-height: 1.5 !important;
	}
	.eli-process-slide p {
		font-size: 15px !important;
		line-height: 1.55 !important;
	}
}


/* ==========================================================================
   0.4.7 — restored responsive paragraph/list/button alignment intents.
   These remain section-level presets: editors choose intent while selectors,
   spacing, typography and responsive mechanics remain theme-owned.
   ========================================================================== */

/* Native Hero / Who We Are section preset: restore the previously tested right
   alignment choice alongside left and centre. */
@media (min-width: 768px) {
	.eli-hero.eli-section-align-desktop-right .eli-hero-inner,
	.eli-about-section.eli-section-align-desktop-right .eli-about-copy { text-align: right !important; }
	.eli-hero.eli-section-align-desktop-right .eli-hero-actions,
	.eli-about-section.eli-section-align-desktop-right .eli-about-copy > .wp-block-buttons { justify-content: flex-end !important; }
	.eli-about-section.eli-section-align-desktop-right .eli-about-copy > h2,
	.eli-about-section.eli-section-align-desktop-right .eli-about-copy p:not(.eli-section-eyebrow) { margin-left: auto; margin-right: 0; }
}
@media (max-width: 767px) {
	.eli-hero.eli-section-align-mobile-right .eli-hero-inner,
	.eli-about-section.eli-section-align-mobile-right .eli-about-copy { text-align: right !important; }
	.eli-hero.eli-section-align-mobile-right .eli-hero-actions,
	.eli-about-section.eli-section-align-mobile-right .eli-about-copy > .wp-block-buttons { justify-content: flex-end !important; }
	.eli-about-section.eli-section-align-mobile-right .eli-about-copy > h2,
	.eli-about-section.eli-section-align-mobile-right .eli-about-copy p:not(.eli-section-eyebrow) { margin-left: auto; margin-right: 0; }
}

/* Managed section alignment values are expressed through theme variables so a
   missing/default preset leaves the reconciled design untouched. */
@media (min-width: 768px) {
	.eli-managed-paragraph-desktop-left { --eli-managed-paragraph-align: left; }
	.eli-managed-paragraph-desktop-center { --eli-managed-paragraph-align: center; }
	.eli-managed-paragraph-desktop-right { --eli-managed-paragraph-align: right; }
	.eli-managed-paragraph-desktop-justify { --eli-managed-paragraph-align: justify; }
	.eli-managed-list-desktop-left { --eli-managed-list-align: left; }
	.eli-managed-list-desktop-center { --eli-managed-list-align: left; }
	.eli-managed-list-desktop-right { --eli-managed-list-align: left; }
	.eli-managed-list-desktop-justify { --eli-managed-list-align: justify; }
	.eli-managed-button-desktop-left { --eli-managed-button-ml: 0; --eli-managed-button-mr: auto; }
	.eli-managed-button-desktop-center { --eli-managed-button-ml: auto; --eli-managed-button-mr: auto; }
	.eli-managed-button-desktop-right { --eli-managed-button-ml: auto; --eli-managed-button-mr: 0; }

	.eli-managed-heading-desktop-right .eli-gallery-heading,
	.eli-managed-heading-desktop-right .eli-difference-heading,
	.eli-managed-heading-desktop-right .eli-services-heading,
	.eli-managed-heading-desktop-right .eli-belgard-promo-copy,
	.eli-managed-heading-desktop-right .eli-transform-intro,
	.eli-managed-heading-desktop-right .eli-filter-gallery-heading,
	.eli-managed-heading-desktop-right .eli-job-sites-copy,
	.eli-managed-heading-desktop-right .eli-testimonials-header,
	.eli-managed-heading-desktop-right .eli-service-area-card-header,
	.eli-managed-heading-desktop-right .eli-service-locations-header,
	.eli-managed-heading-desktop-right .eli-partnerships-header { text-align: right !important; margin-left: auto; margin-right: 0; }
	.eli-process-section.eli-managed-heading-desktop-right > .eli-container-wide > h2,
	.eli-managed-heading-desktop-right .eli-faq-heading,
	.eli-managed-heading-desktop-right .eli-blog-header h2,
	.eli-managed-heading-desktop-right .eli-consultation-content > h2 { text-align: right !important; margin-left: auto; margin-right: 0; }
}

@media (max-width: 767px) {
	.eli-managed-paragraph-mobile-left { --eli-managed-paragraph-align: left; }
	.eli-managed-paragraph-mobile-center { --eli-managed-paragraph-align: center; }
	.eli-managed-paragraph-mobile-right { --eli-managed-paragraph-align: right; }
	.eli-managed-paragraph-mobile-justify { --eli-managed-paragraph-align: justify; }
	.eli-managed-list-mobile-left { --eli-managed-list-align: left; }
	.eli-managed-list-mobile-center { --eli-managed-list-align: left; }
	.eli-managed-list-mobile-right { --eli-managed-list-align: left; }
	.eli-managed-list-mobile-justify { --eli-managed-list-align: justify; }
	.eli-managed-button-mobile-left { --eli-managed-button-ml: 0; --eli-managed-button-mr: auto; }
	.eli-managed-button-mobile-center { --eli-managed-button-ml: auto; --eli-managed-button-mr: auto; }
	.eli-managed-button-mobile-right { --eli-managed-button-ml: auto; --eli-managed-button-mr: 0; }

	.eli-managed-heading-mobile-right .eli-gallery-heading,
	.eli-managed-heading-mobile-right .eli-difference-heading,
	.eli-managed-heading-mobile-right .eli-services-heading,
	.eli-managed-heading-mobile-right .eli-belgard-promo-copy,
	.eli-managed-heading-mobile-right .eli-transform-intro,
	.eli-managed-heading-mobile-right .eli-filter-gallery-heading,
	.eli-managed-heading-mobile-right .eli-job-sites-copy,
	.eli-managed-heading-mobile-right .eli-testimonials-header,
	.eli-managed-heading-mobile-right .eli-service-area-card-header,
	.eli-managed-heading-mobile-right .eli-service-locations-header,
	.eli-managed-heading-mobile-right .eli-partnerships-header { text-align: right !important; margin-left: auto; margin-right: 0; }
	.eli-process-section.eli-managed-heading-mobile-right > .eli-container-wide > h2,
	.eli-managed-heading-mobile-right .eli-faq-heading,
	.eli-managed-heading-mobile-right .eli-blog-header h2,
	.eli-managed-heading-mobile-right .eli-consultation-content > h2 { text-align: right !important; margin-left: auto; margin-right: 0; }
}

/* Paragraph alignment is intentionally scoped to authored section copy rather
   than dynamic review/blog metadata or controls. */
.eli-managed-paragraph-desktop-left .eli-gallery-heading p,
.eli-managed-paragraph-desktop-center .eli-gallery-heading p,
.eli-managed-paragraph-desktop-right .eli-gallery-heading p,
.eli-managed-paragraph-desktop-justify .eli-gallery-heading p,
.eli-managed-paragraph-mobile-left .eli-gallery-heading p,
.eli-managed-paragraph-mobile-center .eli-gallery-heading p,
.eli-managed-paragraph-mobile-right .eli-gallery-heading p,
.eli-managed-paragraph-mobile-justify .eli-gallery-heading p,
.eli-managed-paragraph-desktop-left .eli-difference-card p,
.eli-managed-paragraph-desktop-center .eli-difference-card p,
.eli-managed-paragraph-desktop-right .eli-difference-card p,
.eli-managed-paragraph-desktop-justify .eli-difference-card p,
.eli-managed-paragraph-mobile-left .eli-difference-card p,
.eli-managed-paragraph-mobile-center .eli-difference-card p,
.eli-managed-paragraph-mobile-right .eli-difference-card p,
.eli-managed-paragraph-mobile-justify .eli-difference-card p,
.eli-managed-paragraph-desktop-left .eli-services-heading > p:last-child,
.eli-managed-paragraph-desktop-center .eli-services-heading > p:last-child,
.eli-managed-paragraph-desktop-right .eli-services-heading > p:last-child,
.eli-managed-paragraph-desktop-justify .eli-services-heading > p:last-child,
.eli-managed-paragraph-mobile-left .eli-services-heading > p:last-child,
.eli-managed-paragraph-mobile-center .eli-services-heading > p:last-child,
.eli-managed-paragraph-mobile-right .eli-services-heading > p:last-child,
.eli-managed-paragraph-mobile-justify .eli-services-heading > p:last-child,
.eli-managed-paragraph-desktop-left .eli-finance-copy > p:not(.eli-section-eyebrow),
.eli-managed-paragraph-desktop-center .eli-finance-copy > p:not(.eli-section-eyebrow),
.eli-managed-paragraph-desktop-right .eli-finance-copy > p:not(.eli-section-eyebrow),
.eli-managed-paragraph-desktop-justify .eli-finance-copy > p:not(.eli-section-eyebrow),
.eli-managed-paragraph-mobile-left .eli-finance-copy > p:not(.eli-section-eyebrow),
.eli-managed-paragraph-mobile-center .eli-finance-copy > p:not(.eli-section-eyebrow),
.eli-managed-paragraph-mobile-right .eli-finance-copy > p:not(.eli-section-eyebrow),
.eli-managed-paragraph-mobile-justify .eli-finance-copy > p:not(.eli-section-eyebrow),
.eli-managed-paragraph-desktop-left .eli-belgard-promo-copy p,
.eli-managed-paragraph-desktop-center .eli-belgard-promo-copy p,
.eli-managed-paragraph-desktop-right .eli-belgard-promo-copy p,
.eli-managed-paragraph-desktop-justify .eli-belgard-promo-copy p,
.eli-managed-paragraph-mobile-left .eli-belgard-promo-copy p,
.eli-managed-paragraph-mobile-center .eli-belgard-promo-copy p,
.eli-managed-paragraph-mobile-right .eli-belgard-promo-copy p,
.eli-managed-paragraph-mobile-justify .eli-belgard-promo-copy p,
.eli-managed-paragraph-desktop-left .eli-transform-intro > p:not(.eli-section-eyebrow),
.eli-managed-paragraph-desktop-center .eli-transform-intro > p:not(.eli-section-eyebrow),
.eli-managed-paragraph-desktop-right .eli-transform-intro > p:not(.eli-section-eyebrow),
.eli-managed-paragraph-desktop-justify .eli-transform-intro > p:not(.eli-section-eyebrow),
.eli-managed-paragraph-mobile-left .eli-transform-intro > p:not(.eli-section-eyebrow),
.eli-managed-paragraph-mobile-center .eli-transform-intro > p:not(.eli-section-eyebrow),
.eli-managed-paragraph-mobile-right .eli-transform-intro > p:not(.eli-section-eyebrow),
.eli-managed-paragraph-mobile-justify .eli-transform-intro > p:not(.eli-section-eyebrow),
.eli-managed-paragraph-desktop-left .eli-filter-gallery-heading p,
.eli-managed-paragraph-desktop-center .eli-filter-gallery-heading p,
.eli-managed-paragraph-desktop-right .eli-filter-gallery-heading p,
.eli-managed-paragraph-desktop-justify .eli-filter-gallery-heading p,
.eli-managed-paragraph-mobile-left .eli-filter-gallery-heading p,
.eli-managed-paragraph-mobile-center .eli-filter-gallery-heading p,
.eli-managed-paragraph-mobile-right .eli-filter-gallery-heading p,
.eli-managed-paragraph-mobile-justify .eli-filter-gallery-heading p,
.eli-managed-paragraph-desktop-left .eli-process-slide p,
.eli-managed-paragraph-desktop-center .eli-process-slide p,
.eli-managed-paragraph-desktop-right .eli-process-slide p,
.eli-managed-paragraph-desktop-justify .eli-process-slide p,
.eli-managed-paragraph-mobile-left .eli-process-slide p,
.eli-managed-paragraph-mobile-center .eli-process-slide p,
.eli-managed-paragraph-mobile-right .eli-process-slide p,
.eli-managed-paragraph-mobile-justify .eli-process-slide p,
.eli-managed-paragraph-desktop-left .eli-job-sites-copy > p:not(.eli-section-eyebrow),
.eli-managed-paragraph-desktop-center .eli-job-sites-copy > p:not(.eli-section-eyebrow),
.eli-managed-paragraph-desktop-right .eli-job-sites-copy > p:not(.eli-section-eyebrow),
.eli-managed-paragraph-desktop-justify .eli-job-sites-copy > p:not(.eli-section-eyebrow),
.eli-managed-paragraph-mobile-left .eli-job-sites-copy > p:not(.eli-section-eyebrow),
.eli-managed-paragraph-mobile-center .eli-job-sites-copy > p:not(.eli-section-eyebrow),
.eli-managed-paragraph-mobile-right .eli-job-sites-copy > p:not(.eli-section-eyebrow),
.eli-managed-paragraph-mobile-justify .eli-job-sites-copy > p:not(.eli-section-eyebrow),
.eli-managed-paragraph-desktop-left .eli-testimonials-header p,
.eli-managed-paragraph-desktop-center .eli-testimonials-header p,
.eli-managed-paragraph-desktop-right .eli-testimonials-header p,
.eli-managed-paragraph-desktop-justify .eli-testimonials-header p,
.eli-managed-paragraph-mobile-left .eli-testimonials-header p,
.eli-managed-paragraph-mobile-center .eli-testimonials-header p,
.eli-managed-paragraph-mobile-right .eli-testimonials-header p,
.eli-managed-paragraph-mobile-justify .eli-testimonials-header p,
.eli-managed-paragraph-desktop-left .eli-service-area-card-header p,
.eli-managed-paragraph-desktop-center .eli-service-area-card-header p,
.eli-managed-paragraph-desktop-right .eli-service-area-card-header p,
.eli-managed-paragraph-desktop-justify .eli-service-area-card-header p,
.eli-managed-paragraph-mobile-left .eli-service-area-card-header p,
.eli-managed-paragraph-mobile-center .eli-service-area-card-header p,
.eli-managed-paragraph-mobile-right .eli-service-area-card-header p,
.eli-managed-paragraph-mobile-justify .eli-service-area-card-header p,
.eli-managed-paragraph-desktop-left .eli-service-locations-header p,
.eli-managed-paragraph-desktop-center .eli-service-locations-header p,
.eli-managed-paragraph-desktop-right .eli-service-locations-header p,
.eli-managed-paragraph-desktop-justify .eli-service-locations-header p,
.eli-managed-paragraph-mobile-left .eli-service-locations-header p,
.eli-managed-paragraph-mobile-center .eli-service-locations-header p,
.eli-managed-paragraph-mobile-right .eli-service-locations-header p,
.eli-managed-paragraph-mobile-justify .eli-service-locations-header p,
.eli-managed-paragraph-desktop-left .eli-faq-answer-inner p,
.eli-managed-paragraph-desktop-center .eli-faq-answer-inner p,
.eli-managed-paragraph-desktop-right .eli-faq-answer-inner p,
.eli-managed-paragraph-desktop-justify .eli-faq-answer-inner p,
.eli-managed-paragraph-mobile-left .eli-faq-answer-inner p,
.eli-managed-paragraph-mobile-center .eli-faq-answer-inner p,
.eli-managed-paragraph-mobile-right .eli-faq-answer-inner p,
.eli-managed-paragraph-mobile-justify .eli-faq-answer-inner p,
.eli-managed-paragraph-desktop-left .eli-consultation-benefit p,
.eli-managed-paragraph-desktop-center .eli-consultation-benefit p,
.eli-managed-paragraph-desktop-right .eli-consultation-benefit p,
.eli-managed-paragraph-desktop-justify .eli-consultation-benefit p,
.eli-managed-paragraph-mobile-left .eli-consultation-benefit p,
.eli-managed-paragraph-mobile-center .eli-consultation-benefit p,
.eli-managed-paragraph-mobile-right .eli-consultation-benefit p,
.eli-managed-paragraph-mobile-justify .eli-consultation-benefit p {
	text-align: var(--eli-managed-paragraph-align) !important;
}

.eli-managed-list-desktop-left .eli-transform-points li,
.eli-managed-list-desktop-center .eli-transform-points li,
.eli-managed-list-desktop-right .eli-transform-points li,
.eli-managed-list-desktop-justify .eli-transform-points li,
.eli-managed-list-mobile-left .eli-transform-points li,
.eli-managed-list-mobile-center .eli-transform-points li,
.eli-managed-list-mobile-right .eli-transform-points li,
.eli-managed-list-mobile-justify .eli-transform-points li,
.eli-managed-list-desktop-left .eli-faq-answer-inner li,
.eli-managed-list-desktop-center .eli-faq-answer-inner li,
.eli-managed-list-desktop-right .eli-faq-answer-inner li,
.eli-managed-list-desktop-justify .eli-faq-answer-inner li,
.eli-managed-list-mobile-left .eli-faq-answer-inner li,
.eli-managed-list-mobile-center .eli-faq-answer-inner li,
.eli-managed-list-mobile-right .eli-faq-answer-inner li,
.eli-managed-list-mobile-justify .eli-faq-answer-inner li {
	text-align: var(--eli-managed-list-align) !important;
}

/* Primary CTA alignment only; filter controls, carousel arrows and other
   interaction controls remain component-owned. */
.eli-finance-button,
.eli-belgard-promo-button,
.eli-transform-button,
.eli-process-cta,
.eli-job-sites-button,
.eli-consultation-cta {
	margin-left: var(--eli-managed-button-ml);
	margin-right: var(--eli-managed-button-mr);
}

/* List copy should use the same text metrics as its neighbouring paragraph.
   Keep list-specific bullets, colour and spacing; only type scale/leading are
   shared. */
.eli-transform-points li {
	font-size: 16px;
	line-height: 1.72;
	color: var(--eli-muted);
}
@media (max-width: 767px) {
	.eli-transform-points li {
		font-size: 17px !important;
		line-height: 1.55 !important;
	}
}


/* ==========================================================================
   0.4.8 — list alignment means list position, not centred list-item prose.
   Left / centre / right place the list as a unit while each <li> keeps natural
   left-aligned reading. Justify remains an explicit text-alignment choice.
   ========================================================================== */
@media (min-width: 768px) {
	.eli-managed-list-desktop-left .eli-transform-points {
		justify-self: start;
		width: fit-content;
		max-width: 100%;
	}
	.eli-managed-list-desktop-center .eli-transform-points {
		justify-self: center;
		width: fit-content;
		max-width: 100%;
	}
	.eli-managed-list-desktop-right .eli-transform-points {
		justify-self: end;
		width: fit-content;
		max-width: 100%;
	}
	.eli-managed-list-desktop-justify .eli-transform-points {
		justify-self: stretch;
		width: auto;
	}

	.eli-managed-list-desktop-left .eli-faq-answer-inner ul,
	.eli-managed-list-desktop-center .eli-faq-answer-inner ul,
	.eli-managed-list-desktop-right .eli-faq-answer-inner ul {
		width: fit-content;
		max-width: 100%;
	}
	.eli-managed-list-desktop-left .eli-faq-answer-inner ul {
		margin-left: 0;
		margin-right: auto;
	}
	.eli-managed-list-desktop-center .eli-faq-answer-inner ul {
		margin-left: auto;
		margin-right: auto;
	}
	.eli-managed-list-desktop-right .eli-faq-answer-inner ul {
		margin-left: auto;
		margin-right: 0;
	}
	.eli-managed-list-desktop-justify .eli-faq-answer-inner ul {
		width: auto;
	}
}

@media (max-width: 767px) {
	.eli-managed-list-mobile-left .eli-transform-points {
		justify-self: start;
		width: fit-content;
		max-width: 100%;
	}
	.eli-managed-list-mobile-center .eli-transform-points {
		justify-self: center;
		width: fit-content;
		max-width: 100%;
	}
	.eli-managed-list-mobile-right .eli-transform-points {
		justify-self: end;
		width: fit-content;
		max-width: 100%;
	}
	.eli-managed-list-mobile-justify .eli-transform-points {
		justify-self: stretch;
		width: auto;
	}

	.eli-managed-list-mobile-left .eli-faq-answer-inner ul,
	.eli-managed-list-mobile-center .eli-faq-answer-inner ul,
	.eli-managed-list-mobile-right .eli-faq-answer-inner ul {
		width: fit-content;
		max-width: 100%;
	}
	.eli-managed-list-mobile-left .eli-faq-answer-inner ul {
		margin-left: 0;
		margin-right: auto;
	}
	.eli-managed-list-mobile-center .eli-faq-answer-inner ul {
		margin-left: auto;
		margin-right: auto;
	}
	.eli-managed-list-mobile-right .eli-faq-answer-inner ul {
		margin-left: auto;
		margin-right: 0;
	}
	.eli-managed-list-mobile-justify .eli-faq-answer-inner ul {
		width: auto;
	}
}