/*
Theme Name: Divi Child — Envision Energised
Theme URI: https://www.envisionenergised.com.au
Description: Divi child theme for the Envision Energised website. Holds brand design tokens and custom CSS.
Author: Envision Energised
Template: Divi
Version: 1.0.0
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   Envision Energised — brand design tokens
   Source: ENVISION_BRAND_GUIDE (PDF). White hex in the PDF (#030345) is a
   typo; CMYK 0/0/0/0 confirms pure white.
   ========================================================================== */

:root {
	--ee-saffron: #e9ad36;
	--ee-saffron-light: #f5d46a;
	--ee-coal: #000000;
	--ee-dark: #1a1a1a;      /* derived: alternate dark section background */
	--ee-white: #ffffff;
	--ee-grey-text: #4a4a4a; /* body text on white */
	--ee-gold-gradient: linear-gradient(135deg, var(--ee-saffron-light) 0%, var(--ee-saffron) 100%);

	--ee-font-heading: 'Montserrat', Helvetica, Arial, sans-serif;
	--ee-font-body: 'Montserrat', Helvetica, Arial, sans-serif;

	--ee-radius: 4px;
	/* Tightened 2026-08-31 (Jeremy: "a lot of blank vertical space"). Was
	   clamp(3.5rem, 8vw, 6.5rem) = 56-104px, which with Divi's own 27px row
	   padding put 131px between every section on a desktop. */
	--ee-section-pad: clamp(2.5rem, 4.5vw, 4.25rem);
}

/* --------------------------------------------------------------------------
   Base typography
   -------------------------------------------------------------------------- */

body {
	font-family: var(--ee-font-body);
	color: var(--ee-grey-text);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ee-font-heading);
	font-weight: 700;
	color: var(--ee-coal);
	letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   Utility classes for use on Divi rows/sections/modules
   (add via Advanced → CSS ID & Classes)
   -------------------------------------------------------------------------- */

/* Dark section: black/near-black background, light text */
.ee-section-dark {
	background-color: var(--ee-dark);
}
.ee-section-dark h1,
.ee-section-dark h2,
.ee-section-dark h3,
.ee-section-dark h4 {
	color: var(--ee-white);
}
.ee-section-dark,
.ee-section-dark p {
	color: rgba(255, 255, 255, 0.82);
}

/* Gold gradient CTA band */
.ee-section-gold {
	background: var(--ee-gold-gradient);
}
.ee-section-gold h1,
.ee-section-gold h2,
.ee-section-gold h3,
.ee-section-gold p {
	color: var(--ee-coal);
}

/* Slim strip section (e.g. home trust strip) — converter ignores
   custom_padding, so own it here */
body .ee-strip {
	padding: 22px 0 !important;
}

.ee-strip .et_pb_row {
	padding: 0 !important;
}

.ee-strip .et_pb_text {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.ee-strip p {
	margin-bottom: 0;
}

.ee-strip p + p {
	margin-top: 6px;
	opacity: 0.7;
}

/* Saffron keyline accent under headings */
.ee-keyline h2::after,
.ee-keyline h3::after {
	content: '';
	display: block;
	width: 56px;
	height: 4px;
	margin-top: 0.6em;
	background: var(--ee-saffron);
	border-radius: 2px;
}
.ee-keyline--center h2::after,
.ee-keyline--center h3::after {
	margin-left: auto;
	margin-right: auto;
}

/* The keyline is a section-heading device — suppress it on the h3s inside
   cards and panels, where it just adds noise under every sub-heading. */
.ee-keyline .ee-step h3::after,
.ee-keyline .ee-panel h3::after,
.ee-keyline .ee-card-tile h3::after {
	display: none;
}

/* Saffron text highlight (wrap words in a span with this class) */
.ee-highlight {
	color: var(--ee-saffron);
}

/* --------------------------------------------------------------------------
   Global footer (Theme Builder layout)
   -------------------------------------------------------------------------- */

.ee-footer a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	line-height: 2;
}

.ee-footer a:hover {
	color: var(--ee-saffron);
}

.ee-footer h4 {
	color: var(--ee-white);
	font-size: 15px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.ee-footer-bottom,
.ee-footer-bottom p {
	color: rgba(255, 255, 255, 0.55);
}

/* Footer spacing: converted sections ignore custom_padding attrs, so the
   child theme owns all footer spacing explicitly */
body .ee-footer {
	padding: 55px 0 36px !important;
}

.ee-footer .et_pb_row {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Contact strip: full-width row, items spread across and centered.
   Selector includes .et_pb_row so it outranks the generic footer-row
   padding reset below (which was zeroing this row's top padding). */
.ee-footer .et_pb_row.ee-footer-contactrow {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: 30px !important;
	padding-bottom: 0 !important;
	margin-top: 34px !important;
	width: 90% !important;
	max-width: 1280px !important;
}

.ee-footer-contact {
	margin-bottom: 0 !important;
}

/* Client (2026-08-04) asked for admin@ as well as sales@. Both sit in the
   existing middle column rather than making the contact row a 4-up, which
   would have squeezed the street address onto three lines. */
.ee-footer-contact--stacked {
	margin-top: 8px !important;
}

/* !important throughout: Divi's blurb_position_left table-cell layout and
   spacing rules otherwise win and pin the icon to the top of the row */
.ee-footer-contact .et_pb_blurb_content {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px;
	max-width: none !important;
}

.ee-footer-contact .et_pb_main_blurb_image {
	display: inline-flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	line-height: 1 !important;
}

.ee-footer-contact .et_pb_image_wrap {
	display: inline-flex !important;
	align-items: center !important;
}

/* Converted blurbs ignore icon_font_size — size the icon to match the text */
.ee-footer-contact .et-pb-icon,
.ee-footer-contact .et_pb_main_blurb_image .et-pb-icon {
	font-size: 19px !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
}

.ee-footer-contact .et_pb_blurb_container {
	display: block !important;
	padding: 0 !important;
	text-align: left;
	vertical-align: middle;
}

.ee-footer-contact h4,
.ee-footer-contact .et_pb_module_header {
	font-size: 15px;
	line-height: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap; /* keep each contact item on one line */
}

@media (max-width: 1100px) {
	.ee-footer-contact h4,
	.ee-footer-contact .et_pb_module_header {
		white-space: normal; /* allow wrapping once space genuinely runs out */
	}
}

.ee-footer-contact .et_pb_module_header a {
	color: rgba(255, 255, 255, 0.85);
}

.ee-footer-contact .et_pb_module_header a:hover {
	color: var(--ee-saffron);
}

/* Kill Divi's default row/module spacing inside the slim bottom bar */
.ee-footer-bottom .et_pb_row {
	padding: 0 !important;
}

.ee-footer-bottom .et_pb_text {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.ee-footer-bottom p {
	margin-bottom: 0;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Card: white panel with gold top accent (used for the quote form, etc.)
   -------------------------------------------------------------------------- */

.ee-card {
	background: var(--ee-white);
	border: 1px solid #ececec;
	border-top: 4px solid var(--ee-saffron);
	border-radius: var(--ee-radius);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
	padding: 34px 30px;
}

.ee-card h3 {
	margin-bottom: 18px;
}

/* Service card: white panel used for the service grids (home + overview) */
.ee-service-card {
	background: var(--ee-white);
	border: 1px solid #ececec;
	border-radius: var(--ee-radius);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
	padding: 30px 26px !important;
	height: 100%;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ee-service-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1);
}

/* Center the icon + service name; body copy stays left for readability */
.ee-service-card .et_pb_main_blurb_image,
.ee-service-card .et_pb_module_header {
	text-align: center;
}

/* Card and process rows flex so every box in a row shares the tallest box's
   height. Without this the panels size to their own text and a row of steps
   with uneven copy lengths renders as visibly mismatched boxes. */
.ee-card-row {
	display: flex;
	flex-wrap: wrap;
}

.ee-card-row .et_pb_column {
	display: flex;
}

/* The panel itself must fill the flex column for the equal height to show */
.ee-card-row .ee-service-card,
.ee-card-row .ee-card-tile,
.ee-card-row .ee-panel {
	width: 100%;
}

/* Below Divi's stacking breakpoint the flex row fights Divi's own 100%-width
   columns and the grid overflows the viewport — hand control back to Divi.
   (.ee-process-row is no longer part of this — it is a stacked timeline at
   every width now; see the "How It Works" block further down.) */
@media (max-width: 980px) {
	.ee-card-row,
	.ee-card-row .et_pb_column {
		display: block;
	}

	.ee-card-row .et_pb_column {
		width: 100% !important;
		margin-right: 0 !important;
	}
}

/* --------------------------------------------------------------------------
   Buttons: brand defaults (gold with black text), with an automatic
   inversion inside gold sections so they stay readable
   -------------------------------------------------------------------------- */

/* !important is required: Divi paints button text with the accent color at
   3-class specificity (.et_pb_bg_layout_light.et_pb_module.et_pb_button),
   which would put saffron text on our saffron background. */
/* Padding is locked identical in both states with !important — Divi's default
   hover style changes button padding and reveals an :after arrow, which
   reflows (visibly "resizes") the surrounding section on hover. */
body #page-container .et_pb_button {
	background-color: var(--ee-saffron) !important;
	color: var(--ee-coal) !important;
	border: none !important;
	border-radius: var(--ee-radius);
	font-weight: 700;
	padding: 0.6em 1.4em !important;
}

body #page-container .et_pb_button:hover {
	background-color: var(--ee-saffron-light) !important;
	color: var(--ee-coal) !important;
	padding: 0.6em 1.4em !important;
}

body #page-container .et_pb_button:after,
body #page-container .et_pb_button:hover:after {
	display: none !important; /* remove Divi's arrow-on-hover */
}

/* Inside gold sections: black button, saffron text */
body #page-container .ee-section-gold .et_pb_button {
	background-color: var(--ee-coal) !important;
	color: var(--ee-saffron) !important;
}

body #page-container .ee-section-gold .et_pb_button:hover {
	background-color: #262626 !important;
	color: var(--ee-saffron-light) !important;
}

/* --------------------------------------------------------------------------
   Hero: place CTA buttons beside each other with a gap
   (scoped to sections carrying the ee-hero class)
   -------------------------------------------------------------------------- */

/* Dark overlay over the hero background image, content above it */
.ee-hero {
	position: relative;
}
.ee-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.72);
	z-index: 1;
}

/* Interior heroes carry a lighter overlay than the home page (2026-08-31).
   0.72 was tuned for the home hero, which is tall, carries three lines of
   copy plus two buttons, and cycles through bright rooftop photos. The
   interior heroes added in the same pass are shorter and carry a heading and
   one line, and several of their photos are dark to begin with (the inverter
   enclosure, the garage battery installs) - at 0.72 those read as a grey wall,
   which is barely different from the plain black the client asked us to
   replace. 0.55 keeps the text comfortably legible on the brightest of them
   while letting the dark ones actually show. */
.ee-hero:not(.ee-hero--rotate)::before {
	background: rgba(0, 0, 0, 0.55);
}
.ee-hero .et_pb_row {
	position: relative;
	z-index: 2;
}

/* --- home hero photo rotation (client 2026-08-31) ------------------------
   "The first initial photo at the top of the main page should be scrolling
   photos in the background." Three frames: the section's own background is
   frame 1, ::before is frame 2, ::after is frame 3.

   The flat dark overlay used to be ::before's only job. Both pseudo-elements
   are photo layers now, so the overlay is baked into EVERY layer as a
   linear-gradient first background-image instead. Doing it any other way
   (an inset box-shadow, a separate overlay element) either paints under the
   frames or needs markup that can't be absolutely positioned against the
   section — the row is `position: relative`, so it would become the
   containing block for anything nested inside it.

   Frame URLs arrive as custom properties from functions.php so the deploy
   search-replace rewrites them; a URL hard-coded here would still point at
   envision.test in production. Frame 1 is restated here rather than left to
   Divi's own background rule because the gradient has to layer over it. */
.ee-hero.ee-hero--rotate {
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.72)),
		var(--ee-hero-1) !important;
}

.ee-hero.ee-hero--rotate::before,
.ee-hero.ee-hero--rotate::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	opacity: 0;
	pointer-events: none;
}

/* Frame 2 is the commercial drone shot, and it is the one frame that can't use
   `center top`: it is a 16:9 aerial whose solar array sits below the middle of
   the frame, so anchoring to the top fills the hero with the street and car
   park and pushes the panels off the bottom edge. 32% brings the array into
   the band the hero actually shows. Measured against the 2560x1440 source, not
   guessed — see the crop note in BUILD_PLAN.md. */
.ee-hero.ee-hero--rotate::before {
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.72)),
		var(--ee-hero-2);
	background-position: center 32%;
	animation: ee-hero-fade-a 21s infinite;
}

.ee-hero.ee-hero--rotate::after {
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.72)),
		var(--ee-hero-3);
	animation: ee-hero-fade-b 21s infinite;
}

/* 21s / 3 frames = 7s each, with the fade riding in the gaps. Frame 1 shows
   while both layers are transparent (0-28% and 95-100%). */
@keyframes ee-hero-fade-a {
	0%, 28% { opacity: 0; }
	33%, 61% { opacity: 1; }
	66%, 100% { opacity: 0; }
}

@keyframes ee-hero-fade-b {
	0%, 61% { opacity: 0; }
	66%, 95% { opacity: 1; }
	100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.ee-hero.ee-hero--rotate::before,
	.ee-hero.ee-hero--rotate::after {
		animation: none;
	}
}

.ee-hero .et_pb_button_module_wrapper {
	display: inline-block;
	margin-right: 28px;
	margin-top: 12px;
	margin-bottom: 0;
}

.ee-hero .et_pb_button_module_wrapper:last-child {
	margin-right: 0;
}

/* ==========================================================================
   Content sections — client copy round 2 (2026-07-28)
   Divi's converter ignores custom_padding on sections and icon_font_size on
   blurbs, so all of that spacing is owned here and hooked via module_class.
   ========================================================================== */

/* --- page hero ----------------------------------------------------------- */

/* Shortened 2026-08-31 so the trust claims below it come into view sooner
   (Jeremy: "move the claims up the page a bit"). Was 3.5-5.5rem. */
body .ee-page-hero {
	padding: clamp(2.25rem, 4vw, 3.5rem) 0 !important;
}

.ee-kicker {
	color: var(--ee-saffron);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 0.6em;
}

.ee-page-hero h1 {
	max-width: 20ch;
}

.ee-lead {
	font-size: clamp(1rem, 1.6vw, 1.175rem);
	line-height: 1.65;
	max-width: 62ch;
}

/* The photo heroes carry a little more height than the plain ones, but not so
   much that the banner pushes the claims below the fold. */
body .ee-hero.ee-page-hero {
	padding: clamp(2.75rem, 4.6vw, 4rem) 0 !important;
}

/* Anchor the hero photo to the top so the shorter section crops off the
   bottom of the shot (the eaves and wall) rather than the installers. */
body .ee-hero.ee-page-hero {
	background-position: center top !important;
	background-size: cover !important;
}

/* --- two-column intro ---------------------------------------------------- */

body .ee-intro {
	padding: var(--ee-section-pad) 0 !important;
}

/* Match the column heights so the photo can fill the full text height —
   the client asked for the home photo to run down to the grey section. */
@media (min-width: 981px) {
	.ee-intro-row {
		display: flex;
		align-items: stretch;
	}

	.ee-intro-row > .et_pb_column {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-bottom: 0 !important;
	}

	.ee-intro-row .ee-intro-media {
		flex: 1;
		display: flex;
		margin-bottom: 0 !important;
	}

	/* Tall enough that the photo reads as the dominant element and runs down
	   to the next section, which is what the client asked for. */
	.ee-intro-row .ee-intro-media .et_pb_image_wrap {
		flex: 1;
		display: block;
		min-height: clamp(380px, 40vw, 560px);
	}

	.ee-intro-row .ee-intro-media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Opt out of the tall crop for photos that must be seen whole.
	   The rules above force a landscape photo into a near-square box and
	   `cover` then takes the difference off BOTH sides: the team group shot
	   (1376x768, ratio 1.79) in a 510x560 box (ratio 0.91) showed barely half
	   its width, slicing a person off each edge and cutting the company sign
	   down to "ENVISIO / ENERGISE". A group photo is exactly the wrong thing
	   to crop horizontally, so this keeps the real aspect ratio and centres
	   the photo against the taller text column instead. */
	.ee-intro-row .ee-intro-media--full {
		align-items: center;
	}

	.ee-intro-row .ee-intro-media--full .et_pb_image_wrap {
		flex: 0 1 auto;
		min-height: 0;
	}

	.ee-intro-row .ee-intro-media--full img {
		height: auto;
		object-fit: contain;
		/* Same ceiling the cropped variant uses as its floor-to-max height, so
		   an intro photo that opts out of the crop still sits in the same
		   visual band as every other intro on the site. Without it a tall
		   portrait photo (the Tesla Powerwall install, 1086x1448) drives the
		   column to ~680px against ~300px of copy beside it. `contain` then
		   letterboxes it inside the column width, which is the intended
		   trade: transparent margin at the sides rather than a cropped
		   subject. Landscape photos on this modifier (the team group shot)
		   are well under the cap and are unaffected. */
		max-height: clamp(380px, 40vw, 560px);
	}
}

.ee-intro-media .et_pb_image_wrap {
	border-radius: var(--ee-radius);
	overflow: hidden;
}

/* --- crossfading photo (home intro) -------------------------------------- */
/* Base <img> is frame 1; the two pseudo-layers are frames 2 and 3, set from
   the ee_stock_images option in functions.php so deploys rewrite the URLs. */

/* The `.ee-photo-rotator` block that used to live here is gone (2026-08-31).
   It crossfaded the home INTRO photo; the client asked for the scrolling
   photos to be in the hero at the top of the page instead, so the rotation
   moved to `.ee-hero--rotate` above and `ee_intro()` lost its $rotate param.
   Deleted rather than left in place, so nothing can quietly half-work. */

/* --- home trust strip ---------------------------------------------------- */

/* Divi's own `.et_pb_text ul` rules outrank a bare class selector, so every
   custom list here is de-bulleted at the same specificity Divi uses. */
body #page-container .ee-trust-list,
body #page-container .ee-checklist ul,
body #page-container .ee-panel ul {
	list-style: none !important;
	padding: 0;
}

body #page-container .ee-trust-list li,
body #page-container .ee-checklist li,
body #page-container .ee-panel li {
	list-style: none !important;
}

.ee-trust-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 28px;
	margin: 0;
}

.ee-trust-list li {
	position: relative;
	padding-left: 22px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ee-coal);
	line-height: 1.4;
}

.ee-trust-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--ee-saffron);
	font-weight: 700;
}

.ee-strip .ee-note {
	font-size: 12px;
	opacity: 0.55;
	margin-top: 8px;
}

/* --- accreditation badges under the hero (client 2026-08-31) -------------
   "Need badges up top below the first initial photo." The artwork is the same
   set as the accreditation row in the partner strip further down the page.
   Height-capped rather than width-capped so four logos of very different
   aspect ratios read at the same optical size.

   Sized up and given room 2026-08-31 (second pass). The client's note was that
   they "look like they were slapped in there at the end" - they did, for two
   reasons. The artwork was flattened on white, which showed as four visible
   plates against this strip's #F7F7F7 (fixed at source: the four badges are
   now transparent PNGs, see prepare-partner-logos.php), and they were too
   small and too tightly packed against the claims below to read as a
   deliberate row. */
body #page-container .ee-badge-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 22px 58px;
	list-style: none !important;
	margin: 6px 0 30px;
	padding: 0 0 26px;
	/* A hairline under the badges separates them from the text claims, so the
	   strip reads as two deliberate tiers rather than one crowded block. */
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

body #page-container .ee-badge-row li {
	list-style: none !important;
	margin: 0;
	line-height: 0;
}

.ee-badge-row img {
	height: 76px;
	width: auto;
	max-width: 230px;
	object-fit: contain;
	display: block;
}

@media (max-width: 980px) {
	body #page-container .ee-badge-row {
		gap: 20px 36px;
		padding-bottom: 20px;
	}
	.ee-badge-row img {
		height: 56px;
		max-width: 165px;
	}
}

/* --- Divi bug: blurb icons stuck at opacity 0 ---------------------------- */
/* Divi ships `.et_animated { opacity: 0; animation-fill-mode: both !important }`
   and expects a companion class (.fade, .slideTop, …) to supply an
   animation-name that ends at opacity 1. The Divi 4 -> 5 converter puts
   `et_animated` on every blurb image WITHOUT that companion class, so
   animation-name stays `none`, the opacity is never animated away, and the
   icon is invisible on the front end — silently, in every browser.
   Restore opacity only where no animation class is actually present. */
.et_animated:not([class*='fade']):not([class*='slide']):not([class*='bounce']):not([class*='zoom']):not([class*='flip']):not([class*='roll']):not([class*='fold']) {
	opacity: 1;
}

/* --- icon card grids ----------------------------------------------------- */

/* Benefit tiles are a real panel, not floating text. The client's copy runs
   anywhere from one sentence to three, so without a bounded card the blocks
   read as ragged and unfinished; a panel plus equal heights makes the
   variation look deliberate. */
.ee-card-tile {
	padding: 30px 24px 26px !important;
	height: 100%;
	background: var(--ee-white);
	border: 1px solid #ececec;
	border-radius: var(--ee-radius);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.ee-section-dark .ee-card-tile {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: none;
}

.ee-card-tile .et_pb_module_header {
	font-size: 19px;
	margin-bottom: 0.5em;
}

/* Reserve two lines for the tile title so single-line titles don't pull their
   body copy up out of line with the two-line titles beside them. */
@media (min-width: 981px) {
	.ee-card-tile .et_pb_module_header {
		min-height: 2.5em;
	}
}

.ee-card-tile p {
	font-size: 15px;
	line-height: 1.6;
}

/* Centre a final row that doesn't fill its column count */
.ee-card-row--part {
	justify-content: center;
}

/* Converted blurbs drop icon_font_size — restore it here */
.ee-card-tile .et-pb-icon,
.ee-service-card .et-pb-icon {
	font-size: 40px !important;
}

.ee-audience-card .et_pb_module_header {
	font-size: 22px;
}

/* Label-only tile: icon and a name, no body copy. Client (2026-08-26) asked
   for the "Where We Work" boxes to carry just the location, matching the
   screenshot they sent. Without body text the shared .ee-card-tile rules leave
   a two-line title reserve and bottom padding sized for a paragraph, so the
   name floats high in a mostly empty box — both are undone here. The title is
   allowed to wrap to two lines ("Sunshine Coast") without changing the box
   height, so all four stay level. */
.ee-card-tile--label {
	padding: 32px 20px !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ee-card-tile--label .et_pb_module_header {
	font-size: 21px;
	margin-bottom: 0;
}

@media (min-width: 981px) {
	.ee-card-tile--label .et_pb_module_header {
		min-height: 2.6em;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.ee-card-tile--label .et_pb_main_blurb_image {
	margin-bottom: 14px;
}

/* --- "How It Works" timeline ---------------------------------------------
   Client (2026-08-04): as a 4-across grid these were tall narrow rectangles
   with the copy running down them, and hard to read. Each step is now a
   full-width row — gold number badge on the left, copy beside it, joined by a
   vertical connector so it reads as a sequence.

   This is CSS-only. ee_process() still emits four 1_4 columns, so all nine
   process sections (home + eight service pages) change together with no page
   rebuild, and the Visual Builder still sees a normal Divi row. */

body .ee-process {
	padding: var(--ee-section-pad) 0 !important;
}

/* Override Divi's own column widths — the shortcode is still a 1_4 grid. */
.ee-process-row {
	display: block;
	max-width: 860px;
	margin-left: auto !important;
	margin-right: auto !important;
}

.ee-process-row .et_pb_column {
	display: block;
	width: 100% !important;
	margin-right: 0 !important;
	margin-bottom: 0 !important;
}

.ee-step {
	position: relative;
	padding: 0 0 38px 96px !important;
	background: none;
	border: 0;
	border-radius: 0;
}

/* Divi's .et_pb_text_inner is itself position:relative, so it — not .ee-step —
   would be the badge's containing block, and left:0 would land the badge
   *inside* the padding, on top of the copy. Take it out of the chain. */
.ee-step .et_pb_text_inner {
	position: static;
}

/* Connector line, drawn from under the badge to the next step. Suppressed on
   the last step so the timeline ends on the badge rather than trailing off. */
.ee-step::before {
	content: "";
	position: absolute;
	left: 31px;
	top: 72px;
	bottom: 6px;
	width: 2px;
	background: linear-gradient(to bottom, var(--ee-saffron), rgba(233, 173, 54, 0.4));
}

.ee-process-row .et_pb_column:last-child .ee-step::before,
.ee-process-row .et_pb_column:last-of-type .ee-step::before {
	display: none;
}

.ee-process-row .et_pb_column:last-child .ee-step {
	padding-bottom: 0 !important;
}

/* `padding: 0` is load-bearing, not tidying. This is a <p>, and Divi ships
   `.et_pb_text p { padding-bottom: 1em }`. On a 64px circle that leaves a 38px
   content box, so `align-items: center` centred the digit in 38px and it sat
   3px from the top instead of 16px - it visibly rode the top of the circle. */
.ee-step-num {
	padding: 0 !important;
	position: absolute;
	left: 0;
	top: 0;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ee-saffron);
	color: var(--ee-coal);
	font-family: var(--ee-font-heading);
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	margin: 0 !important;
}

.ee-section-dark .ee-step-num {
	color: var(--ee-coal);
}

/* Title and the short lead line share one line — "STEP TITLE · lead copy".
   Both are inline so they flow into the same line box; the body paragraph
   below stays a block and starts its own line. */
.ee-step h3 {
	display: inline;
	font-size: 19px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0;
}

.ee-step-lead {
	display: inline;
	font-weight: 600;
	color: var(--ee-saffron);
	font-size: 15px;
	margin: 0 !important;
}

.ee-step-lead::before {
	content: " · ";
	color: var(--ee-saffron);
}

.ee-section-dark .ee-step-lead {
	color: var(--ee-saffron);
}

.ee-step p:last-child {
	font-size: 15px;
	line-height: 1.65;
	margin: 8px 0 0;
}

@media (max-width: 767px) {
	.ee-step {
		padding: 0 0 30px 62px !important;
	}

	.ee-step::before {
		left: 21px;
		top: 52px;
	}

	.ee-step-num {
		width: 44px;
		height: 44px;
		font-size: 20px;
	}

	.ee-step h3 {
		font-size: 17px;
	}
}

/* --- tick lists ---------------------------------------------------------- */

body .ee-checklist-section {
	padding: var(--ee-section-pad) 0 !important;
}

/* Client 2026-08-31: "this is not centered to the wording below."
   The list used to be `columns: 2` on a fixed 900px centred <ul>. CSS columns
   split the BOX, not the ink: with four short items the second column started
   at a fixed 472px offset and its text ended well short of the box's right
   edge, so the visible block of ticks sat left of the centred heading above it.
   An inline-grid with `auto` columns shrink-wraps to the actual content, so the
   pair of columns centres as a unit against the heading. The wrapper needs
   text-align:center to centre the inline-grid itself; the items re-align left
   inside it so the ticks stay in two straight lines. */
/* Divi's own text-module rule sets the alignment, so this has to match the
   specificity Divi uses (the same reason the de-bulleting rules above are
   written `body #page-container ...`). A bare `.ee-checklist` loses and the
   inline-grid stays hard left. */
body #page-container .ee-checklist,
body #page-container .ee-checklist .et_pb_text_inner {
	text-align: center;
}

.ee-checklist ul {
	display: inline-grid;
	grid-template-columns: repeat(2, auto);
	gap: 2px 56px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 100%;
	text-align: left;
}

.ee-checklist li {
	position: relative;
	padding: 9px 0 9px 32px;
	line-height: 1.5;
}

/* One column on phones — two `auto` columns of full-length labels overflow. */
@media (max-width: 680px) {
	.ee-checklist ul {
		grid-template-columns: auto;
		gap: 0;
	}
}

.ee-checklist li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 8px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--ee-saffron);
	color: var(--ee-coal);
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

@media (max-width: 767px) {
	.ee-checklist ul {
		columns: 1;
	}
}

/* --- side-by-side list panels (EV residential vs commercial) ------------- */

.ee-panel {
	background: var(--ee-white);
	border: 1px solid #ececec;
	border-top: 4px solid var(--ee-saffron);
	border-radius: var(--ee-radius);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
	padding: 32px 30px !important;
	height: 100%;
}

.ee-panel h3 {
	margin-bottom: 8px;
}

.ee-panel > p {
	font-weight: 600;
	margin-bottom: 16px;
}

.ee-panel ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ee-panel li {
	position: relative;
	padding: 7px 0 7px 26px;
	border-bottom: 1px solid #f0f0f0;
}

.ee-panel li:last-child {
	border-bottom: none;
}

.ee-panel li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 15px;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--ee-saffron);
}

/* --- comparison table (solar "Our Difference") --------------------------- */

.ee-compare {
	max-width: 940px;
	margin: 0 auto !important;
}

.ee-compare-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #e6e6e6;
	border-radius: var(--ee-radius);
	overflow: hidden;
}

.ee-compare-table th {
	padding: 16px 20px;
	font-family: var(--ee-font-heading);
	font-size: 15px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: left;
	background: #f2f2f2;
	color: #6a6a6a;
}

.ee-compare-table th:last-child {
	background: var(--ee-coal);
	color: var(--ee-saffron);
}

.ee-compare-table td {
	padding: 15px 20px;
	border-top: 1px solid #ededed;
	font-size: 15px;
	line-height: 1.5;
	width: 50%;
	vertical-align: top;
}

.ee-compare-table td:first-child {
	color: #8a8a8a;
}

.ee-compare-table td:last-child {
	font-weight: 600;
	color: var(--ee-coal);
	background: #fffdf7;
}

.ee-compare-table td:last-child::before {
	content: '✓ ';
	color: var(--ee-saffron);
	font-weight: 700;
}

/* Stack into labelled rows on small screens */
@media (max-width: 767px) {
	.ee-compare-table thead {
		display: none;
	}

	.ee-compare-table,
	.ee-compare-table tbody,
	.ee-compare-table tr,
	.ee-compare-table td {
		display: block;
		width: 100%;
	}

	.ee-compare-table tr {
		border-bottom: 2px solid #ececec;
	}

	.ee-compare-table td::after {
		content: attr(data-label);
		display: block;
		font-size: 11px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #a5a5a5;
		margin-top: 4px;
	}
}

/* --- FAQ accordion ------------------------------------------------------- */

body .ee-faq {
	padding: var(--ee-section-pad) 0 !important;
}

.ee-faq .et_pb_accordion {
	max-width: 880px;
	margin: 0 auto;
}

.ee-faq .et_pb_toggle {
	background: var(--ee-white);
	border: 1px solid #e8e8e8;
	border-radius: var(--ee-radius);
	margin-bottom: 12px;
	padding: 4px 24px;
}

.ee-faq .et_pb_toggle_open {
	border-color: var(--ee-saffron);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.ee-faq .et_pb_toggle_title {
	font-size: 17px;
	font-weight: 600;
	color: var(--ee-coal);
	padding: 16px 34px 16px 0 !important;
}

.ee-faq .et_pb_toggle_title::before {
	color: var(--ee-saffron);
	font-size: 22px;
	top: 14px;
	right: 0;
}

.ee-faq .et_pb_toggle_content {
	padding-bottom: 16px;
}

.ee-faq .et_pb_toggle_content p {
	font-size: 15.5px;
	line-height: 1.7;
}

/* --- statements, placeholders, CTA --------------------------------------- */

body .ee-statement {
	padding: var(--ee-section-pad) 0 !important;
}

.ee-statement p,
.ee-lead-copy p {
	max-width: 74ch;
	margin-left: auto;
	margin-right: auto;
	font-size: 17px;
	line-height: 1.75;
}

/* Placeholders are deliberately obvious so nothing ships by accident */
.ee-placeholder p,
.ee-placeholder-inline {
	background: repeating-linear-gradient(
		45deg,
		#f7f7f7,
		#f7f7f7 12px,
		#f1f1f1 12px,
		#f1f1f1 24px
	);
	border: 1px dashed #d5d5d5;
	border-radius: var(--ee-radius);
	color: #8a8a8a;
	padding: 60px 24px;
	text-align: center;
}

.ee-placeholder--wide p {
	padding: 130px 24px;
}

/* Gallery placeholders stand in for a photo grid — give them that footprint */
.ee-keyline--center .ee-placeholder p {
	padding: 110px 24px;
}

.ee-placeholder-inline {
	padding: 46px 24px !important;
}

.ee-section-dark .ee-placeholder p {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.6);
}

body .ee-cta {
	padding: clamp(3rem, 6vw, 4.5rem) 0 !important;
}

.ee-cta h2 {
	margin-bottom: 0.35em;
}

.ee-cta p {
	max-width: 62ch;
	margin: 0 auto 1.4em;
	font-size: 17px;
}

body .ee-team-hero {
	padding: var(--ee-section-pad) 0 !important;
}

.ee-team-photo {
	text-align: center;
}

.ee-team-photo img {
	max-width: 720px;
	width: 100%;
	margin: 0 auto;
	border-radius: var(--ee-radius);
}

/* Brand jump-nav on long product-list pages (e.g. Inverters) */
.ee-jump-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.ee-jump-nav a {
	display: inline-block;
	background: var(--ee-coal);
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	padding: 8px 18px;
	border-radius: 100px;
	text-decoration: none;
	transition: background-color 0.2s;
}

.ee-jump-nav a:hover {
	background: var(--ee-saffron);
	color: var(--ee-coal) !important;
}

/* Anchor targets of ee_jump_nav() land clear of the fixed header */
.ee-product-block[id] {
	scroll-margin-top: 100px;
}

/* --- referral form: two side-by-side detail panels ----------------------- */

.ee-form-columns {
	gap: 28px;
}

/* Fluent Forms builds its column gutter by zeroing the outer padding
   (`.ff-t-cell:first-of-type{padding-left:0}` / `:last-of-type{padding-right:0}`)
   and letting the last cell grow. Once each cell is a visible card that's wrong
   on both counts: the fields hug the outer edge of their panel and the right
   panel ends up wider. Re-state padding on both sides and pin both to 50%.
   The :first/:last selectors are repeated to match FF's specificity. */
.ee-form-columns .ff-t-cell,
.ee-form-columns .ff-t-cell:first-of-type,
.ee-form-columns .ff-t-cell:last-of-type {
	flex: 0 1 50%;
	padding: 24px 24px 10px !important;
	background: #fafafa;
	border: 1px solid #ececec;
	border-radius: var(--ee-radius);
}

.ee-form-heading {
	font-family: var(--ee-font-heading);
	font-size: 17px;
	font-weight: 700;
	color: var(--ee-coal);
	margin: 0 0 18px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--ee-saffron);
}

/* The permission checkbox sits after the two-column container and otherwise
   butts straight up against the bottom edge of the panels. */
.ee-form-columns + .ff-el-group {
	margin-top: 26px;
}

@media (max-width: 767px) {
	.ee-form-columns {
		gap: 0;
	}

	.ee-form-columns .ff-t-cell,
	.ee-form-columns .ff-t-cell:first-of-type,
	.ee-form-columns .ff-t-cell:last-of-type {
		flex-basis: 100%;
		margin-bottom: 20px;
	}
}

/* --------------------------------------------------------------------------
   Header: black bar, white links, saffron hover/active — owned here because
   Divi's customizer CSS generation proved unreliable for these values
   -------------------------------------------------------------------------- */

body #main-header,
body #main-header.et-fixed-header {
	background-color: var(--ee-coal) !important;
	box-shadow: none;
}

#main-header #top-menu > li > a {
	color: rgba(255, 255, 255, 0.85);
}

#main-header #top-menu > li > a:hover,
#main-header #top-menu > li.current-menu-item > a,
#main-header #top-menu > li.current-menu-ancestor > a {
	color: var(--ee-saffron);
	opacity: 1;
}

/* Dropdowns */
#main-header .nav li ul {
	background-color: var(--ee-coal);
	border-color: var(--ee-saffron);
}

#main-header #top-menu li li a {
	color: rgba(255, 255, 255, 0.8);
}

#main-header #top-menu li li a:hover {
	color: var(--ee-saffron);
	opacity: 1;
}

/* Mobile menu */
#main-header .mobile_menu_bar:before {
	color: var(--ee-saffron);
}

#main-header .et_mobile_menu {
	background-color: var(--ee-coal);
	border-top-color: var(--ee-saffron);
}

#main-header .et_mobile_menu li a {
	color: rgba(255, 255, 255, 0.85);
}

/* --------------------------------------------------------------------------
   Header: "Get a Free Quote" menu item styled as a gold button
   (class ee-cta-button is set on the menu item)
   -------------------------------------------------------------------------- */

#top-menu .ee-cta-button > a,
.et-menu .ee-cta-button > a {
	background: var(--ee-saffron);
	color: var(--ee-coal) !important;
	font-weight: 700;
	padding: 10px 22px !important;
	border-radius: var(--ee-radius);
	transition: background 0.2s ease;
}

#top-menu .ee-cta-button > a:hover,
.et-menu .ee-cta-button > a:hover {
	background: var(--ee-saffron-light);
	opacity: 1;
}

/* --- trusted partners strip ----------------------------------------------
   Client (2026-08-04) collapsed "Brands We Install" and "Trusted Partners"
   into this one section; product brands now live on the Products page and are
   reached from the button underneath.

   Logos have not arrived yet, so each entry is a name plate. The same grid
   takes an <img> without changing — see ee_partner_strip() in build-scripts. */

body .ee-partners {
	padding: var(--ee-section-pad) 0 !important;
}

.ee-partner-block {
	margin-bottom: 28px !important;
}

.ee-partner-label {
	text-align: center;
	font-family: var(--ee-font-heading);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ee-body);
	margin-bottom: 16px !important;
}

.ee-partner-grid {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0 auto !important;
	padding: 0 !important;
	max-width: 940px;
}

.ee-partner-grid li {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	padding: 14px 20px;
	background: var(--ee-white);
	border: 1px solid #e6e6e6;
	border-radius: var(--ee-radius);
	flex: 0 1 auto;
}

.ee-partner-grid li span {
	font-family: var(--ee-font-heading);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	color: var(--ee-coal);
	text-align: center;
}

/* Logos are supplied at mixed sizes; cap the height so the row stays even. */
.ee-partner-grid li img {
	max-height: 42px;
	width: auto;
	object-fit: contain;
}

/* Scrolling partner strip (client 2026-08-19: "an actual scrolling logo strip",
   ref solarpathnsw.com.au / qvoltsolar.com.au). Two identical tracks sit side by
   side and both translate by exactly one track width, so the second is in place
   the instant the first leaves: no jump at the loop point. The marquee row drops
   the card treatment the accreditation row keeps, because a moving row of boxed
   logos reads as clutter. */
.ee-logo-marquee {
	display: flex;
	overflow: hidden;
	width: 100%;
	/* Fade the logos out at both edges so they leave the row rather than being
	   sliced off by the container. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ee-logo-marquee:hover .ee-logo-track {
	animation-play-state: paused;
}

.ee-partner-grid.ee-logo-track {
	flex-wrap: nowrap;
	justify-content: flex-start;
	flex: 0 0 auto;
	max-width: none;
	gap: 56px;
	padding-right: 56px !important;
	/* Client 2026-08-26: "any way we can speed up the moving partners a bit so
	   it moves quicker?" The duration is per full track width, so adding the
	   GoodWe/Tesla/Sigenergy/Leisure Coast logos (10 -> 14) lengthens the track and would
	   have sped it up ~30% on its own. 42s -> 30s on top of that puts the
	   actual scroll speed at roughly 1.8x what they were looking at. */
	animation: ee-marquee 30s linear infinite;
}

.ee-logo-track li {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	min-height: 56px;
	flex: 0 0 auto;
}

.ee-logo-track li img {
	max-height: 52px;
	max-width: 190px;
}

/* Squarer, stacked lockups get a taller budget. Most logos here are wide
   wordmarks that hit the 190px width cap first and end up 36-52px tall; a
   ~2:1 stacked logo hits the 52px height cap while still only 114px wide, so
   it reads as half the size of its neighbours. 76px puts it at ~166x76, which
   is comparable optical mass without breaking the row. */
.ee-logo-track li.ee-logo-tall img {
	max-height: 76px;
}

@keyframes ee-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

/* Motion-sensitive visitors get the same logos as a static wrapped row. */
@media (prefers-reduced-motion: reduce) {
	.ee-logo-marquee {
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.ee-partner-grid.ee-logo-track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		gap: 40px;
	}

	.ee-logo-marquee .ee-logo-track[aria-hidden="true"] {
		display: none;
	}
}

@media (max-width: 767px) {
	.ee-partner-grid.ee-logo-track {
		gap: 36px;
		padding-right: 36px !important;
		/* Shorter track (tighter gaps, smaller logos) than desktop, so it needs
		   a shorter duration to scroll at a comparable speed. */
		animation-duration: 24s;
	}

	.ee-logo-track li img {
		max-height: 40px;
		max-width: 140px;
	}
}

/* The accreditation row reads as credentials rather than logos — gold keyline
   so it is visibly a different kind of thing to the partner names below. */
.ee-partner-grid--accred li {
	border-color: var(--ee-saffron);
	border-width: 1px 1px 1px 3px;
}

@media (max-width: 767px) {
	.ee-partner-grid {
		gap: 8px;
	}

	.ee-partner-grid li {
		min-height: 52px;
		padding: 10px 14px;
	}

	.ee-partner-grid li span {
		font-size: 13.5px;
	}
}

/* --- product blocks ------------------------------------------------------
   Client (2026-08-04) sent a reference screenshot they want matched across all
   four product pages: copy one side, product photo the other, brand logo and a
   Download Datasheet button under the copy. Consecutive blocks alternate.

   The DOM order is always copy-then-photo so the copy leads on mobile; the
   alternation is done with row-reverse at desktop only. */

body .ee-product-block {
	padding: clamp(2.5rem, 5vw, 4rem) 0 !important;
}

@media (min-width: 981px) {
	.ee-product-row {
		display: flex;
		align-items: center;
		gap: 4%;
	}

	/* Divi's inter-column margin would land on the wrong side once the row is
	   reversed — the gap above replaces it. */
	.ee-product-row .et_pb_column {
		margin-right: 0 !important;
	}

	.ee-product-block--flip .ee-product-row {
		flex-direction: row-reverse;
	}
}

.ee-product-copy h3 {
	font-size: clamp(24px, 2.4vw, 32px);
	margin-bottom: 10px;
}

.ee-product-copy h4 {
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ee-coal);
	margin: 26px 0 12px;
}

/* "Best for: …" — a single gold pill, not a full-width bar */
.ee-best-for {
	margin: 0 0 16px !important;
}

.ee-best-for span {
	display: inline-block;
	background: var(--ee-saffron);
	color: var(--ee-coal);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	padding: 6px 14px;
	border-radius: 100px;
}

/* Divi's .et_pb_text ul rule is more specific than a bare class, so without
   this the default bullet renders alongside the CSS tick. */
.ee-product-copy ul.ee-spec-list,
.ee-spec-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Sized down 2026-08-19 (client, Solar page: "features smaller text") so a
   long feature list doesn't visually outweigh the product photo beside it. */
.ee-spec-list li {
	position: relative;
	padding: 0 0 8px 24px;
	font-size: 14px;
	line-height: 1.55;
}

/* Tick drawn in CSS so screen readers don't announce a decorative character */
.ee-spec-list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 8px;
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--ee-saffron);
	border-bottom: 2px solid var(--ee-saffron);
	transform: rotate(-45deg);
}

.ee-spec-list--warranty li::before {
	border-color: var(--ee-coal);
}

.ee-product-logo {
	margin: 28px 0 18px !important;
}

/* Bumped 2026-08-19 (client: "make the sungrow/goodwe logos a bit bigger,
   same size as the Sigenergy one") alongside trimming the source files'
   whitespace in trim-logo-whitespace.php — both were needed, since a padded
   source file still renders small inside a fixed-height box. */
.ee-product-logo img {
	max-height: 46px;
	width: auto;
}

/* Several brands ship a logo on a white plate; on the grey blocks that reads
   as a visible box, so give every logo the same neutral breathing room. */
.ee-product-block .ee-product-logo .et_pb_image_wrap {
	display: inline-block;
}

.ee-datasheet-btn {
	margin-bottom: 10px !important;
}

.ee-datasheet-btn .et_pb_button::after {
	content: "\e092"; /* Divi icon font — download arrow */
}

.ee-product-photo {
	text-align: center;
}

/* Client asked twice (2026-08-19, again 2026-08-26) for the Tesla and the
   other battery photos to render at the size the SigenStor does.

   `max-height` was the wrong tool: it only caps, it never scales up. The
   SigenStor's source is 1068x2500 so it hit the cap and filled the band,
   while the Tesla's cropped source is 196x351 and simply rendered at 351px —
   its natural size. Cropping the dead margin out of the sources (see
   build-scripts/prepare-product-photos.php) removed the white boxes but could
   not fix the size, because nothing was asking the browser to scale anything.

   A fixed `height` does. Every product photo now renders in the same vertical
   band whatever its source resolution. `object-fit: contain` is load-bearing:
   a photo wider than its column (the Sigenergy inverter is 2.3:1) has its
   width clamped by max-width while the height stays fixed, which without
   `contain` would stretch it. */
.ee-product-photo img {
	height: clamp(300px, 32vw, 500px);
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

@media (max-width: 980px) {
	.ee-product-photo {
		margin-top: 26px !important;
	}

	.ee-product-photo img {
		height: clamp(240px, 52vw, 360px);
	}
}

/* ==========================================================================
   Refer-a-friend exit-intent popup (client 2026-08-31)
   Markup and behaviour live in functions.php (front page only, once per
   visitor per 30 days, pointer devices only). See the note there for why this
   is exit intent rather than a timer.

   Redesigned 2026-08-31 to Jeremy's mockup: wide dark card with a hairline
   gold border, copy left, gold line-art illustration right. It reads as a
   piece of brand collateral rather than a generic modal, and the black/gold
   matches the site's own CTA language.
   ========================================================================== */

.ee-popup {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.ee-popup[hidden] {
	display: none;
}

body.ee-popup-open {
	overflow: hidden;
}

.ee-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.78);
}

.ee-popup__card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	width: 100%;
	max-width: 880px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	background: #000000;
	border: 1px solid rgba(233, 173, 54, 0.42);
	border-radius: 14px;
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
	animation: ee-popup-in 260ms ease-out both;
}

@media (min-width: 760px) {
	.ee-popup__card {
		/* Copy gets the larger share; the art is decorative and takes what's
		   left rather than competing with the headline. */
		grid-template-columns: 1.15fr 0.85fr;
		align-items: center;
	}
}

@keyframes ee-popup-in {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ee-popup__card {
		animation: none;
	}
}

/* --- close ---------------------------------------------------------------- */

.ee-popup__close {
	position: absolute;
	top: 16px;
	right: 18px;
	z-index: 2;
	width: 38px;
	height: 38px;
	padding: 8px;
	background: none;
	border: 0;
	cursor: pointer;
	color: #ffffff;
	opacity: 0.85;
	transition: opacity 150ms ease;
}

.ee-popup__close:hover,
.ee-popup__close:focus-visible {
	opacity: 1;
}

.ee-popup__close svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
}

/* --- copy column ---------------------------------------------------------- */

.ee-popup__copy {
	padding: 52px 20px 46px 54px;
}

.ee-popup__kicker {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ee-saffron);
}

/* The heading is set on #page-container too because Divi's own h2 rules
   (colour, size, the ee-keyline ::after) otherwise reach into the popup. */
body #page-container .ee-popup__title,
.ee-popup__title {
	margin: 0 0 18px;
	padding: 0;
	font-size: clamp(34px, 5.2vw, 54px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: #ffffff;
}

.ee-popup__title::after {
	display: none; /* suppress the site-wide gold keyline under headings */
}

.ee-popup__title span {
	color: var(--ee-saffron);
}

.ee-popup__body {
	margin: 0 0 30px;
	max-width: 30em;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
}

.ee-popup__cta {
	display: inline-block;
	background: var(--ee-gold-gradient);
	color: var(--ee-coal) !important;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 18px 46px;
	border-radius: 4px;
	transition: filter 150ms ease;
}

.ee-popup__cta:hover,
.ee-popup__cta:focus-visible {
	filter: brightness(1.07);
}

.ee-popup__terms {
	margin: 18px 0 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.42);
}

/* --- illustration --------------------------------------------------------- */

/* Line art rather than a photo: it stays crisp at any size, weighs nothing,
   and inherits the brand gold instead of needing an asset from the client. */
.ee-popup__art {
	display: none;
	padding: 30px 34px 30px 0;
}

@media (min-width: 760px) {
	.ee-popup__art {
		display: block;
	}
}

.ee-popup__art svg {
	display: block;
	width: 100%;
	height: auto;
}

.ee-popup__arc {
	fill: none;
	stroke: var(--ee-saffron);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 1 14;
	opacity: 0.75;
}

.ee-popup__spark {
	fill: var(--ee-saffron);
}

.ee-popup__card-face {
	fill: var(--ee-saffron);
}

.ee-popup__ribbon {
	stroke: #ffffff;
	stroke-width: 5;
	fill: none;
	opacity: 0.95;
}

.ee-popup__bow {
	fill: none;
	stroke: #ffffff;
	stroke-width: 5;
	stroke-linejoin: round;
	opacity: 0.95;
}

/* --- narrow ---------------------------------------------------------------- */

@media (max-width: 759px) {
	.ee-popup__copy {
		padding: 46px 28px 36px;
	}
	.ee-popup__cta {
		display: block;
		text-align: center;
		padding: 17px 24px;
	}
}


/* ==========================================================================
   Our Service Area map (client 2026-08-31)
   Inline SVG traced from the client's own artwork, with the twelve council
   names as real HTML spans over the top. Their two supplied PNGs both have the
   names baked into the pixels, which is worth nothing for search - this keeps
   their design and makes every region name indexable text.
   ========================================================================== */

/* The label pills sit OUTSIDE the map's own box (that is the design: pill in
   the margin, leader line in to the region), so the wrapper carries the room
   for them and .ee-map stays exactly the SVG box that the percentages are
   measured against. */
.ee-map-wrap {
	padding: 0 clamp(74px, 15vw, 150px);
}

.ee-map {
	position: relative;
	max-width: 520px;
	margin: 0 auto;
}

.ee-map__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.ee-map__regions path {
	stroke: #ffffff;
	stroke-width: 3;
	stroke-linejoin: round;
}

.ee-map__leads line {
	stroke: #ffffff;
	stroke-width: 2.5;
}

.ee-map__leads circle {
	fill: #ffffff;
}

.ee-map__labels {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

body #page-container .ee-map__label {
	position: absolute;
	transform: translateY(-50%);
	white-space: nowrap;
	background: #FFD100;
	color: #111111;
	font-weight: 700;
	font-size: clamp(9px, 1.35vw, 14px);
	line-height: 1;
	padding: 7px 10px;
	border-radius: 3px;
}

.ee-map__label--noosa{right:51.11%;top:5.94%}
.ee-map__label--sunshine{left:83.14%;top:23.84%}
.ee-map__label--somerset{right:84.44%;top:36.59%}
.ee-map__label--moreton{left:87.32%;top:43.84%}
.ee-map__label--toowoomba{right:82.61%;top:52.23%}
.ee-map__label--brisbane{left:86.67%;top:55.55%}
.ee-map__label--redland{left:97.12%;top:63.67%}
.ee-map__label--lockyer{right:87.06%;top:74.85%}
.ee-map__label--logan{left:96.08%;top:75.28%}
.ee-map__label--ipswich{right:75.03%;top:82.97%}
.ee-map__label--scenicrim{right:63.40%;top:92.14%}
.ee-map__label--goldcoast{left:98.30%;top:92.14%}

/* Below this the pills cannot be placed around the map without colliding, so
   the SAME spans reflow into a list under it. One set of names in the DOM, so
   nothing is duplicated for search, and the leader lines are dropped because
   they would point at nothing. */
@media (max-width: 780px) {
	.ee-map-wrap {
		padding: 0;
	}
	.ee-map__labels {
		position: static;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
		margin-top: 22px;
	}
	body #page-container .ee-map__label {
		position: static;
		transform: none;
		font-size: 13px;
		padding: 8px 12px;
	}
	.ee-map__leads {
		display: none;
	}
}

/* --- warranty links inside claim rows (2026-08-31) -----------------------
   "10 Year Workmanship Warranty" in the home trust strip and the checklist
   blocks now links to /warranty/. It was a claim on every page with nowhere to
   click, which is the gap the competitor review flagged.

   Styled to inherit the claim's own colour with a faint underline rather than
   taking Divi's gold link colour: it is one item in a row of six, and colouring
   only that one made the row look like a mistake. The underline is enough to
   make it discoverable, and it goes gold on hover. */
body #page-container .ee-trust-list a,
body #page-container .ee-checklist a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
	opacity: 1;
	transition: color 150ms ease, border-color 150ms ease;
}

body #page-container .ee-trust-list a:hover,
body #page-container .ee-trust-list a:focus-visible,
body #page-container .ee-checklist a:hover,
body #page-container .ee-checklist a:focus-visible {
	color: var(--ee-saffron);
	border-bottom-color: var(--ee-saffron);
}

/* On the dark checklist sections the inherited colour is a translucent white,
   so the rule would be almost invisible. */
.ee-section-dark .ee-checklist a {
	border-bottom-color: rgba(255, 255, 255, 0.45);
}

/* ==========================================================================
   Animated stat counters (2026-08-31)
   Markup from ee_counters(); the counting is in functions.php. Numbers are
   printed in the HTML and animated up from zero, so with JavaScript off, or
   before the script runs, the real figures are already on the page.
   ========================================================================== */

body .ee-counters-section {
	padding: var(--ee-section-pad) 0 !important;
}

body #page-container .ee-counters ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 34px 20px;
	list-style: none !important;
	margin: 0;
	padding: 0;
}

body #page-container .ee-counters li {
	list-style: none !important;
	margin: 0;
	text-align: center;
}

.ee-counter {
	display: block;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--ee-saffron);
	font-size: clamp(38px, 5vw, 62px);
	/* Tabular figures stop the number jittering horizontally as it counts:
	   proportional digits change width between frames and the whole block
	   twitches. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

.ee-counter__suffix {
	font-size: 0.62em;
	vertical-align: baseline;
	margin-left: 1px;
}

.ee-counter__label {
	display: block;
	margin-top: 12px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 980px) {
	body #page-container .ee-counters ul {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px 16px;
	}
}

@media (max-width: 420px) {
	.ee-counter__label {
		font-size: 12px;
		letter-spacing: 0.04em;
	}
}

/* --- abutting same-tone sections (2026-08-31) ----------------------------
   ee_fix_section_contrast() flips one of two adjacent LIGHT sections so they
   don't merge. It cannot do the same for two adjacent DARK sections: the two
   dark tones in the palette are #000000 and #1A1A1A, a difference of 26/255
   that nobody can see, so swapping one changes nothing. Those get a hairline
   rule instead, which is what actually reads as a boundary.

   Applied by the build, not by hand: the class is added automatically when two
   same-tone sections end up next to each other. */
.ee-section-dark.ee-section-abut {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ee-section-gold.ee-section-abut {
	border-top: 1px solid rgba(0, 0, 0, 0.14);
}

/* --- consistent vertical rhythm (2026-08-31) -----------------------------
   Sections were inconsistent as well as generous: the ones built by ee_intro,
   ee_process and ee_checklist carried our own 104px padding, while the ee_cards
   sections fell through to Divi's default 4% (54px on a desktop). Two different
   gaps down the same page. Everything now starts from the one token; the rules
   that set it with !important elsewhere still win, so the hero, the trust strip
   and the footer keep their own spacing.

   Divi's own 27px top and bottom on every row sat on top of the section padding
   and added another 54px between sections. Trimmed to 16px, which still holds
   a heading off its cards without opening a hole. */
body #page-container .et_pb_section {
	padding: var(--ee-section-pad) 0;
}

body #page-container .et_pb_row {
	padding-top: 16px;
	padding-bottom: 16px;
}

/* The strip is deliberately slim and sets its own padding; keep its rows flat. */
body #page-container .ee-strip .et_pb_row,
body #page-container .ee-footer-bottom .et_pb_row {
	padding-top: 0;
	padding-bottom: 0;
}

/* --- "Our Services" given a background (2026-08-31) ----------------------
   Jeremy: "could we put something behind the Our Services section to make it
   stand out". The real problem was that the section was #FFFFFF and the service
   cards are white too, so the cards had nothing to sit against and the whole
   block read as flat text. A warm cream ground makes the white cards read as
   cards, and picks up the brand gold without shouting.

   The section is pinned with `ee-keep-bg` in build-home.php so the contrast
   pass never recolours it, and #FBF3E4 is registered as a light tone there so
   adjacency against its grey and dark neighbours is still checked properly. */
.ee-services-feature {
	position: relative;
	background-color: #FBF3E4 !important;
}

/* Soft gold glow behind the cards. Sits under the content, and is kept off the
   edges so the section still reads as one flat colour where it meets its
   neighbours. */
.ee-services-feature::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 55% at 50% 0%, rgba(233, 173, 54, 0.16), rgba(233, 173, 54, 0) 70%);
	pointer-events: none;
}

.ee-services-feature > .et_pb_row {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   Client round 8 (2026-09-01/02): captioned galleries, stacked home intro,
   black "Industries" band, per-page hero anchors
   ========================================================================== */

/* --- captioned photo grid (ee_gallery_captioned) -------------------------
   Built from image modules rather than Divi's gallery so each photo can carry
   its own caption per page. The crop is CSS, so a row can be landscape (4:3),
   portrait (3:4) or square without generating new thumbnails. */
.ee-cap-row {
	display: flex;
	flex-wrap: wrap;
}

.ee-cap-row > .et_pb_column {
	display: flex;
	flex-direction: column;
}

.ee-cap-photo {
	margin-bottom: 0 !important;
}

.ee-cap-photo .et_pb_image_wrap {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--ee-radius);
	overflow: hidden;
	background: #eee;
}

.ee-cap-row--portrait .ee-cap-photo .et_pb_image_wrap {
	aspect-ratio: 3 / 4;
}

.ee-cap-row--square .ee-cap-photo .et_pb_image_wrap {
	aspect-ratio: 1 / 1;
}

.ee-cap-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ee-cap-caption {
	margin: 12px 0 0 !important;
}

.ee-cap-caption p {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ee-coal);
	padding-bottom: 0 !important;
}

/* Two-up below Divi's stacking breakpoint: eight full-width photos in a
   column is a very long scroll, and a 4:3 tile at 50% still reads. */
@media (max-width: 980px) {
	.ee-cap-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}

	.ee-cap-row > .et_pb_column {
		width: 100% !important;
		margin: 0 !important;
	}
}

/* --- stacked home intro (client 2026-09-02) ------------------------------
   The team photo runs the full content width under the trust strip and the
   heading + copy sit beneath it, replacing the two-column intro. The photo is
   cropped to 2:1 and anchored a little below centre so the faces and the sign
   both stay in frame; on phones it relaxes to 4:3 so the faces stay legible. */
.ee-intro--stacked .ee-intro-media--stacked {
	margin-bottom: 0 !important;
}

.ee-intro--stacked .ee-intro-media--stacked .et_pb_image_wrap {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 1;
}

.ee-intro--stacked .ee-intro-media--stacked img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 60%;
}

.ee-intro--stacked .ee-intro-stacked-copy {
	max-width: 860px;
	margin: 40px auto 0 !important;
}

/* Phones show the whole photo. The 4:3 crop that used to be here cut the two
   people on the ends (client 2026-09-09: "the home page photo on the mobile
   cuts out the team photo and doesn't include the 2 on the end"). */
@media (max-width: 767px) {
	.ee-intro--stacked .ee-intro-media--stacked .et_pb_image_wrap {
		aspect-ratio: auto;
	}

	.ee-intro--stacked .ee-intro-media--stacked img {
		height: auto;
		object-fit: fill;
	}

	.ee-intro--stacked .ee-intro-stacked-copy {
		margin-top: 28px !important;
	}
}

/* --- "Industries We Specialise In" on black (client 2026-09-01) ----------
   The white service cards keep their own dark text on a dark section; the
   generic .ee-section-dark rules would otherwise paint their copy white on
   white. Scoped to the card so the section heading still goes white. */
.ee-section-dark .ee-service-card .et_pb_module_header,
.ee-section-dark .ee-service-card h4 {
	color: var(--ee-coal);
}

.ee-section-dark .ee-service-card p {
	color: var(--ee-grey-text);
}

/* --- per-page hero anchors (client 2026-09-01) ---------------------------
   Interior heroes anchor `center top` (right for rooftops). Two photos need a
   different band: the team photo on About Us, whose faces sit a third of the
   way down and whose sign sits at two-thirds, and the wide banner crop on Our
   Team, which the client cut to banner proportions themselves. */
body .ee-hero.ee-page-hero.ee-hero--band-mid {
	/* The faces sit at ~25% of the frame and the sign runs ~50-80%, so a
	   standard-height band cannot hold both: at the default padding the band
	   is 42% of the photo. Taller padding takes it to ~53%, and 42% is the
	   anchor that starts the band at the top of the heads. Measured against
	   the 4199x2426 source at a 1568px viewport. */
	background-position: center 42% !important;
	padding: clamp(4.5rem, 9.5vw, 9rem) 0 !important;
}

body .ee-hero.ee-page-hero.ee-hero--band-center {
	background-position: center center !important;
}

/* The client's page banners (2026-09-01) are cut to roughly 2.4:1, while the
   hero band at the default padding is nearer 4.7:1, so `center top` showed
   the top half of each: the Battery banner lost the battery, the Contact
   banner lost the faces. Taller padding takes the band to ~65% of the
   banner's height, and centring it keeps the subject the client composed
   around in the middle of the frame. */
body .ee-hero.ee-page-hero.ee-hero--banner {
	background-position: center center !important;
	padding: clamp(4rem, 8vw, 7.5rem) 0 !important;
}

/* --- per-page hero focal point below desktop (client 2026-09-09) ---------
   On a phone the hero is taller than it is wide, so `cover` scales a 2.4:1
   banner to the section's height and only the middle ~third of it shows,
   which for most banners is the wall the client left room for the copy on,
   not the person ("position it so that the image of the guy is visible
   instead of the wall"). Each page sets the horizontal focus of its own
   photo; vertical position stops mattering once the photo is height-bound.
   Keyed on WordPress's page-id body class: production's IDs are the ones
   the launch push carried over from local, so they match.
   Home is left alone: its rotating frames are positioned on the pseudo-
   elements in the `.ee-hero--rotate` block. */
@media (max-width: 980px) {
	html body .ee-hero.ee-page-hero:not(.ee-hero--rotate) {
		background-position: var(--ee-hero-focus-m, 50%) center !important;
	}

	body.page-id-20  { --ee-hero-focus-m: 88%; } /* Customer Reviews: both electricians + the battery */
	body.page-id-19  { --ee-hero-focus-m: 88%; } /* Referral: both faces + the $250 card */
	body.page-id-560 { --ee-hero-focus-m: 78%; } /* FAQ: electrician + customer at the battery */
	body.page-id-621 { --ee-hero-focus-m: 70%; } /* Finance: both faces at the table */
	body.page-id-618 { --ee-hero-focus-m: 66%; } /* Rebates: installers on the roof */
	body.page-id-564 { --ee-hero-focus-m: 76%; } /* Warranty: electrician at the switchboard */
	body.page-id-9   { --ee-hero-focus-m: 62%; } /* Services: panel going up the ladder */
	body.page-id-144 { --ee-hero-focus-m: 85%; } /* EV Charging: charger on the garage wall */
	body.page-id-13  { --ee-hero-focus-m: 40%; } /* Solar: the array */
	body.page-id-11  { --ee-hero-focus-m: 70%; } /* Commercial: the rooftop array */
	body.page-id-12  { --ee-hero-focus-m: 74%; } /* Insurance: installers on the roof */
	body.page-id-15  { --ee-hero-focus-m: 78%; } /* Electrical: the two electricians */
	body.page-id-14  { --ee-hero-focus-m: 66%; } /* Battery Storage: the battery */
	body.page-id-10  { --ee-hero-focus-m: 70%; } /* Residential: the house */
	body.page-id-21  { --ee-hero-focus-m: 70%; } /* Contact: the two right-hand electricians (all three never fit; 40% framed the gap) */
	body.page-id-18  { --ee-hero-focus-m: 88%; } /* Our Team: electrician at the battery */
	/* Product line-ups (16, 294-297) and the About Us group photo (17) are
	   symmetrical, so they keep the 50% default. */
}

/* --- finance provider panels (/finance/, 2026-09-02) --------------------- */
.ee-finance-panel .ee-finance-logo {
	margin: 0 0 18px !important;
	padding-bottom: 0 !important;
	min-height: 56px;
	display: flex;
	align-items: center;
}

.ee-finance-panel .ee-finance-logo img {
	max-height: 48px;
	width: auto;
	max-width: 180px;
}

.ee-finance-panel .ee-finance-link {
	font-weight: 700;
}

.ee-finance-panel .ee-finance-note {
	font-size: 14px;
	color: #666;
}

/* --- rebate savings tiles (/rebates/) ------------------------------------ */
.ee-saving-tile .et_pb_module_header {
	font-size: 30px;
	color: var(--ee-saffron);
}

/* --- footer Instagram link (client 2026-09-03) ---------------------------- */
.ee-footer .ee-footer-social {
	margin-top: 14px;
	padding-bottom: 0 !important;
}

.ee-footer .ee-footer-social a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: rgba(255, 255, 255, 0.82);
	font-weight: 600;
	text-decoration: none;
}

.ee-footer .ee-footer-social a:hover {
	color: var(--ee-saffron);
}

.ee-footer .ee-footer-social svg {
	flex: 0 0 auto;
	color: var(--ee-saffron);
}

/* --- Instagram feed (Smash Balloon, placed 2026-09-08) -------------------- */

/* Smash Balloon renders its own "Follow on Instagram" button immediately above
   the section's existing gold CTA. Two follow buttons stacked is clutter, and
   Instagram blue is the one colour in that section belonging to nobody's
   brand. The gold button below says the same thing and is ours, so this hides
   theirs rather than restyling it. Turn the button off in the feed settings
   too if it is ever rebuilt — this is the belt, not the braces. */
.ee-instagram .sbi_follow_btn {
	display: none !important;
}

/* Give the feed the same vertical rhythm as the rest of the section instead of
   Smash Balloon's default flush spacing against the copy above it. */
.ee-instagram .ee-instagram-feed {
	margin: 34px 0 6px;
}

/* --- Google Reviews widget (placed 2026-09-08) ---------------------------- */

/* The reviews widget renders its own small "review us on" pill inside its
   header. Hidden for two reasons, not one:
   
   1. On /customer-reviews/ it duplicates the "Leave Us a Review" section
      below it, which does the job better — brand-gold button, and copy
      explaining why a review helps.
   2. On the home page it is the wrong ask entirely. "Review us on Google"
      speaks to customers who have already had work done, competing for
      attention with "Request a Free Quote" in front of people who have not
      bought anything yet.

   The plugin has a native hide_writereview option in the feed editor if this
   should ever be turned off at source instead. */
.wp-google-wr {
	display: none !important;
}

/* Client request (Jade, 2026-09-08): show the posts "going across like the
   Google reviews" rather than as a block grid.

   Smash Balloon's carousel layout is a Pro feature — setting layout=carousel
   on the free plugin does nothing at all: it still renders sbi_col_4 with no
   slider script loaded. Rather than put the client on a paid plan for a
   layout change, the row is built here: one scroll-snapping line of posts,
   swipeable on touch, scrollable with a trackpad, and with the last tile
   deliberately part-visible so the row reads as continuing rather than
   ending. That part-visible tile IS the affordance — a row of exactly-fitting
   tiles gives a phone user no clue there is anything to the right. */
.ee-instagram #sbi_images {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;

	/* proximity rather than mandatory: the arrows already scroll to exact tile
	   boundaries, so hard snapping has nothing to correct and can only fight a
	   programmatic scroll that is already aligned. A finger swipe still snaps
	   tidily. Prefer proximity for a row driven by both touch and buttons. */
	scroll-snap-type: x proximity;

	/* Animation lives here rather than in the JS call, so the reduced-motion
	   override below applies to it. */
	scroll-behavior: smooth;

	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;                 /* Firefox */
	padding-bottom: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.ee-instagram #sbi_images {
		scroll-behavior: auto;
	}
}

.ee-instagram #sbi_images::-webkit-scrollbar {
	display: none;                         /* Chrome/Safari: scroll, don't show a bar */
}

/* 23%, not 25%. At 25% exactly four tiles fill the row, which looks like a
   finished grid of four and gives no reason to scroll — the other half of the
   feed is invisible and stays that way. At 23% a fifth tile breaks the edge,
   which is the only thing telling anyone there is more. */
.ee-instagram #sbi_images .sbi_item {
	flex: 0 0 calc(23% - 8px);
	width: auto !important;                /* the plugin sets a grid width inline */
	scroll-snap-align: start;
}

@media (max-width: 980px) {
	.ee-instagram #sbi_images .sbi_item {
		flex-basis: calc(33.333% - 8px);
	}
}

@media (max-width: 640px) {
	.ee-instagram #sbi_images .sbi_item {
		flex-basis: 70%;
	}
}

/* Arrows for the Instagram row.
   
   Built here rather than buying Smash Balloon Pro: the carousel is a paid
   feature at USD $49 then $98/year renewal, and a lapsed licence would
   silently revert the layout to a grid on a client site months later. This is
   the same outcome with nothing to renew.
   
   Hidden automatically when the row does not overflow, and each arrow
   disables itself at its end of the run, so they never invite a click that
   does nothing. */
.ee-instagram #sb_instagram {
	position: relative;
}

.ee-ig-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;                       /* 44px: the minimum comfortable tap target */
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(90deg, #F5D46A, #E9AD36);
	color: #000;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.ee-ig-nav:hover {
	transform: translateY(-50%) scale(1.06);
}

.ee-ig-nav:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}

.ee-ig-nav svg {
	display: block;
	width: 18px;
	height: 18px;
}

.ee-ig-nav--prev { left: -14px; }
.ee-ig-nav--next { right: -14px; }

/* Faded rather than removed: the row must not reflow when you reach an end. */
.ee-ig-nav[disabled] {
	opacity: 0;
	pointer-events: none;
}

.ee-ig-nav[hidden] {
	display: none;
}

@media (max-width: 640px) {
	/* A phone swipes the row. Arrows would sit on top of the images and cover
	   the thing they are meant to help you see. */
	.ee-ig-nav {
		display: none;
	}
}

/* --- Legal pages (Privacy Policy, 2026-09-09) ---------------------------- */

.ee-legal-hero {
	padding: 70px 0 60px;
}

.ee-legal-hero h1 {
	margin: 0;
	color: #fff;
}

/* Constrain the measure. The site's column is 1080px, which is right for
   marketing copy in short blocks but too wide for continuous prose — a legal
   page is the one place on this site someone reads line after line, and long
   lines are where the eye loses its place returning to the left margin. */
.ee-legal .et_pb_text_inner,
.ee-legal .et_pb_text > div {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}

.ee-legal h2 {
	margin: 42px 0 14px;
	font-size: 22px;
	line-height: 1.35;
}

.ee-legal h2:first-child {
	margin-top: 0;
}

.ee-legal p {
	margin: 0 0 16px;
}

.ee-legal ul {
	margin: 0 0 20px;
	padding-left: 22px;
	list-style: disc;
}

.ee-legal li {
	margin-bottom: 7px;
	padding-left: 4px;
}

.ee-legal a {
	color: #B98721;
	text-decoration: underline;
}

.ee-legal a:hover {
	color: #E9AD36;
}

.ee-legal-updated {
	margin-top: 34px;
	padding-top: 18px;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	color: #6a6a6a;
	font-size: 14px;
}