/* >>> fusting:removed-dead-blocks-20260902 >>> */
/* 9 blocks were removed on 2026-09-02 after proving they style nothing on the live
   site. Evidence: every selector run through querySelectorAll on 38 published
   pages in 4 states (desktop/mobile x light/dark), re-checked against the front
   page and the query-string form pages, confirmed to match zero ELEMENTS (the
   few string hits were inside <style> text, i.e. the rules themselves), and
   absent from 448KB of the site's own JavaScript so nothing adds them at
   runtime. Removed: wpforms-icon-uniform-shrink, testimonial-mobile, bge-photo-review-sample-above, page-banner-title-centering, legacy-page-css-migration, fe-bigstars, fe-header-logo-horizontal-20260825, portrait-rails-20260828, portrait-rail-gap-20260828.
   If a feature that needed one of these ever comes back -- an Astra
   featured-image banner, the old About portrait rails, the uagb slider -- the
   styling will need rewriting rather than un-deleting; that is deliberate,
   because it had already stopped matching the markup. */
/* <<< fusting:removed-dead-blocks-20260902 <<< */

/* >>> fusting:third-party-widget-and-header-misc >>> */
/* Third-party widget and site-shell odds and ends that predate the block convention: the Instagram feed buttons, header/logo sizing, and assorted responsive tweaks. Wrapped in place 2026-09-01; nothing moved. Split it into smaller named blocks only by adding markers, never by reordering. */
#sb_instagram .sbi_follow_btn a,
#sb_instagram #sbi_load .sbi_load_btn {
    font-size: 15px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 30px;
    border: 0;
    box-shadow: none;
    color: #fff;
    background-color: var(--ast-global-color-1);
}

#sb_instagram .sbi_follow_btn a {
    background-color: var(--ast-global-color-0) !important;
}


/* BREAKS
Mobile:  767 and below
Tablet: 768-921
Desktop: 922px+
*/
.uagb-button__link,
.wp-block-button__link {
    overflow-wrap: break-word !important;
    /*text-wrap: wrap;
	min-width: 150px !important;*/
}

/*hide phone number for tablet & mobile*/
@media (max-width: 921px) {
    .phone-number-hide-mobile {
        display: none;
    }
}

/******LOGO************/
/* Add margins to logo */
.ast-builder-layout-element .ast-site-identity {
    margin-left: 2%;
    margin-right: 1%;
}

/*desktop - keep logo big enough*/
@media (min-width: 922px) {
    .ast-site-identity .site-logo-img img {
        min-width: 200px;
        height: auto;
    }
}

/* Prevent logo from crowding nav */
.astra-logo-svg {
    max-width: 100% !important;
}

/*tablet stacked logo */
@media (min-width: 301px) and (max-width: 921px) {
    .astra-logo-svg {
        content: url("/wp-content/uploads/2023/12/fusting-electric-logo-wide-white.svg");
        width: 100% !important;
        min-height: 75px !important;
    }
}

/* Smallest screens icon logo*/
@media (max-width: 300px) {
    .astra-logo-svg {
        content: url("/wp-content/uploads/2023/12/fusting-electric-icon-white.svg");
        max-height: 50px !important;
    }
}

/********MASTHEAD ********/
/* black bg header image on blog and homepage */
.blog .ast-primary-header-bar,
.home .ast-primary-header-bar {
    background-image: url("/wp-content/uploads/2023/09/black.png") !important;
}

/* black gradient header overlay for contrast */
.site-header {
    background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 80%);
}

/***CONTENT AREA*******/
/*add class for temporarily hidden items*/
.hidden-temp {
    display: none !important;
}

/* Add a smooth transition for any changes to the #content area */
#content {
    transition: all .3s ease-in-out;
}

/* stop hyphenating */
.wpforms-container {
    word-break: keep-all !important;
}

/* Add a slow transition to .body element */
/*body {
    transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
}*/

/***  SVG icons white */
.ast-svg-iconset {
    color: white;
}

/* Remove bottom margin from Jetpack contact info block for spacing consistency */
.wp-block-jetpack-contact-info {
    margin-bottom: 0px !important;
}

/*disable sticky mobile */
@media (max-width: 767px) {
    .wp-block-uagb-container.sticky-class {
        position: static !important;
    }
}

.ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle-close:focus {
    outline: none !important;
}

#primary {
    margin: 0px !important;
}

#primary,
#secondary {
    padding: 0;
}

/* Fix Font Awesome font-display for performance */
/*@font-face {
	  font-family: 'Font Awesome 6 Free';
	  font-display: swap;
	  src: url('https://use.fontawesome.com/releases/v6.4.0/webfonts/fa-solid-900.woff2') format('woff2');
}
@font-face {
	  font-family: 'Font Awesome 6 Brands';
	  font-display: swap;
	  src: url('https://use.fontawesome.com/releases/v6.4.0/webfonts/fa-brands-400.woff2') format('woff2');
}*/

/* ===== Header: keep the primary nav to 2 lines max (added 06/29/26) ===== */
/* The long menu + logo + Call Now button share one header row. As the window
   narrows: shrink the logo (frees menu width) and step the Call Now button
   down -> full number, then "Call Now", then a round phone icon. Desktop only;
   mobile (<=921px) hamburger is untouched. */
@media (min-width: 922px) {
  .ast-primary-header-bar .ast-site-identity .site-logo-img img,
  .ast-primary-header-bar .ast-site-identity img.custom-logo,
  .ast-primary-header-bar .ast-site-identity img {
    max-width: calc(100vw - 730px) !important;
    height: auto !important;
    min-width: 0 !important;
  }
}
/* Call Now button: drop the phone number below 1400px */
@media (max-width: 1399px) {
  .site-header .uagb-buttons-repeater .cn-num { display: none; }
}
/* Call Now button: collapse to a round phone icon below 1100px (matches the mobile button) */
@media (min-width: 922px) and (max-width: 1099px) {
  .site-header .uagb-block-ed4919c2 a.uagb-buttons-repeater {
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .site-header .uagb-block-ed4919c2 .uagb-button__link { display: none !important; }
  .site-header .uagb-block-ed4919c2 .uagb-button__icon { margin: 0 !important; }
  .site-header .uagb-block-ed4919c2 .uagb-button__icon svg { width: 22px !important; height: 22px !important; }
}

/* ===== Site bug fixes (moved from WPCode snippet #9731, 06/30/26) ===== */
/* Phone padding: text in full-bleed Spectra sections shouldn't touch the edges. */
@media (max-width: 782px) {
  .entry-content .wp-block-uagb-container.alignfull :is(h1,h2,h3,h4,h5,h6,p,ul,ol,.wp-block-buttons) {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}
/* Service-name headings: never split a word; fit the column (paired with the JS auto-fit). */
.entry-content .is-service-name {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  line-height: 1.2 !important;
  font-size: clamp(14px, 2vw, 26px) !important;
}
.entry-content .wp-block-column:has(.is-service-name) { min-width: 0 !important; }
/* WPForms labels: stop auto-hyphenation + mid-word breaks (any wording). */
.wpforms-image-choices-label,
.wpforms-field-label-inline,
.wpforms-image-choices-item label,
.wpforms-field-label,
.wpforms-field-description {
  hyphens: none !important;
  -webkit-hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}


/* <<< fusting:third-party-widget-and-header-misc <<< */
/* >>> fusting:footer-tap-targets >>> */
/* A11y: enlarge small footer tap targets (Privacy Policy + email) to >=24px on mobile */
@media (max-width: 782px){
  .ast-footer-copyright p a,
  .wp-block-jetpack-contact-info a{ display:inline-block; padding-top:6px; padding-bottom:6px; }
}
/* <<< fusting:footer-tap-targets <<< */





/* Electrical leads */
p.text-rectangle::before,
p.text-rectangle::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 48px;
	height: 1px;
	background: #000;
	transform: translateY(-50%);
}

p.text-rectangle::before {
	right: 100%;
}

p.text-rectangle::after {
	left: 100%;
}

/* RETIRED 2026-08-28: the Spectra-Legacy-era generic ".portrait-line-image"
 * block lived here (a horizontal 4px wire ::before, plus width/height/border
 * !important overrides on the img). It was dead code after the 2026-08-26
 * migration of About (page 1399) to core blocks - nothing else on the site
 * carries that class (checked: post_content across every post/page, and every
 * plugin + mu-plugin) - but it still MATCHED the same figures as the
 * ".page-id-1399 .portrait-line-image" block below, and corrupted them:
 *   - its "left: 4px; right: 4px; transform: translateY(-50%)" leaked into the
 *     page-1399 coin ::before, which sets only width/height and relies on
 *     being centred. Measured live at 1440px: the coin painted at x341-549
 *     while the photo sat at x383-591 - a 42px black crescent sticking out to
 *     the LEFT of both owner portraits.
 *   - its "!important" img rules beat the page-1399 img rule, forcing a 208px
 *     box and a "border: 4px solid #000" that the page block sets to 0.
 * The kid portraits never broke: ".portrait-line-image" does not match the
 * "kid-portrait-line-image" class token, so they only ever had the page-scoped
 * rule - they were the control that proved the diagnosis.
 * The ".page-id-1399" block below is now the single owner of these portraits.
 */



/* Paragraph styled like an IEC resistor */
p.text-rectangle {
	position: relative;
	display: block;
	width: fit-content;
	max-width: calc(100% - 96px);
	margin: 32px auto;
	padding: 14px 20px;
	border: 1px solid #000;
	border-radius: 0;
	box-sizing: border-box;
	background: #fff;
	text-align: center;
	overflow: visible;
}



/* About Us separators become horizontal inductor symbols */
.page-id-1399 hr.wp-block-separator.has-alpha-channel-opacity {
	display: block;
	width: 100% !important;
	max-width: 300px !important;
	height: 42px !important;
	margin: 32px auto !important;
	padding: 0 !important;
	border: 0 !important;
	opacity: 1 !important;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 42'%3E%3Cpath d='M4 21H86C86 7 108 7 108 21C108 7 130 7 130 21C130 7 152 7 152 21C152 7 174 7 174 21C174 7 196 7 196 21H296' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='square'/%3E%3C/svg%3E") center / 100% 42px no-repeat !important;
}

/* >>> fusting:about-family-circuit >>> */
/* About Us (page 1399): two-column owners layout + family circuit wire.
 * Replaces the ENTIRE old fusting:about-family-circuit block. The old block
 * assumed a Spectra-Legacy DOM depth (a uagb-image wrapper DIV around each
 * figure) that no longer exists now that the owners/kids sections are core
 * blocks — a figure IS the outermost element now, so the old
 * ".portrait-line-image figure" rule has no target and had to be merged
 * into ".portrait-line-image" itself. The decorative wire lines/dots
 * themselves moved out of CSS entirely: they are now one SVG <path> drawn
 * and animated by about-1399-circuit.js against the anchors below, because
 * a composable, extendable, length-timed wire needs real path geometry
 * (getTotalLength) that CSS pseudo-elements can't give it. Geometry is
 * commented at each rule so the next edit doesn't have to reverse-engineer it.
 */

/* ---------------------------------------------------------------------
   1. Portrait circle-crop (Steve / Ceanne)
   Figure itself now carries .portrait-line-image (core wp:image block has
   no extra wrapper div), so sizing + the currentColor "coin" behind the
   photo apply directly to the figure instead of a parent/child pair.
--------------------------------------------------------------------- */
.page-id-1399 .portrait-line-image {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 300px;
	height: 208px;
	margin: 0 auto;
	overflow: visible;
}

.page-id-1399 .portrait-line-image::before {
	content: "";
	position: absolute;
	z-index: 0;
	/* Centre the coin EXPLICITLY, the same way the kid rule below does. Do NOT
	   lean on the flex parent's align-items/justify-content to place it: an
	   absolutely positioned pseudo-element is not a flex item, so its static
	   position is a fallback, and any stray top/left/transform inherited from
	   another rule that happens to match the same element wins silently. That
	   is exactly what the retired generic block did to it. Spelling out
	   top/left/transform is what makes this rule self-contained. */
	top: 50%;
	left: 50%;
	width: 208px;
	height: 208px;
	border-radius: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
}

.page-id-1399 .portrait-line-image img {
	position: relative;
	z-index: 1;
	display: block;
	width: 206px;
	height: 206px;
	max-width: 206px;
	object-fit: cover;
	border: 0;
	border-radius: 50%;
	box-sizing: border-box;
}

/* Kid portraits: unchanged from the old block. The markup here was already
   a plain core wp:image (figure.kid-portrait-line-image), so nothing about
   the DOM depth changed and this rule carries forward as-is. */
.page-id-1399 figure.kid-portrait-line-image {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 298px;
	height: 208px;
	margin: 0 auto;
	overflow: visible;
}

.page-id-1399 figure.kid-portrait-line-image::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 50%;
	width: 204px;
	height: 204px;
	border-radius: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
}

.page-id-1399 figure.kid-portrait-line-image img {
	position: relative;
	z-index: 1;
	display: block;
	width: 202px;
	height: 202px;
	max-width: 202px;
	object-fit: cover;
	border: 0;
	border-radius: 50%;
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------
   2. Owners row — Steve and Ceanne side by side, each a self-contained
   column (photo -> name -> title -> bio). Core wp:columns is a flex row
   that stacks under 782px on its own (WordPress core block-library CSS,
   already loaded by Astra) — no custom breakpoint needed here for the
   stacking itself. Flex's default align-items:stretch is what gives both
   portraits a shared top offset and both bios a shared top offset: they
   are flex siblings starting at the same row edge regardless of content
   height differences.
--------------------------------------------------------------------- */
.page-id-1399 .family-circuit-owners-row {
	column-gap: clamp(24px, 4vw, 64px);
	row-gap: 40px;
}

.page-id-1399 .family-circuit-owner {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 16px;
}

.page-id-1399 .family-circuit-owner .owner-name {
	margin: 16px 0 2px;
}

.page-id-1399 .family-circuit-owner .owner-title {
	margin: 0 0 14px;
	opacity: 0.75;
	font-size: 0.9375rem;
}

.page-id-1399 .family-circuit-owner .owner-bio {
	max-width: var(--fe-measure, 54ch);
	margin: 0 auto;
	text-align: left;
}

/* ---------------------------------------------------------------------
   3. Kids row — same side-by-side-then-stack pattern, smaller scale.
   The two blurb paragraphs stay as one shared block below both photos
   (they were never split per-column in the source copy), centered under
   the row exactly as before.
--------------------------------------------------------------------- */
.page-id-1399 .family-circuit-kids-photos .wp-block-columns {
	column-gap: clamp(24px, 4vw, 64px);
	justify-content: center;
}

/* FIX 2026-08-26: this said flex-grow:0. Combined with core's flex-basis:0 on
   .wp-block-column that computes to width:0, and both kids' photos collapsed to
   slivers on the live page. max-width still caps them at the portrait size; the
   grow is what lets them actually occupy the row. Do not set grow to 0 here
   again without giving the column a real basis. */
.page-id-1399 .family-circuit-kids-photos .wp-block-column {
	flex: 1 1 0;
	min-width: 0;
	max-width: 298px;
}

.page-id-1399 .family-circuit-kids-blurbs {
	max-width: var(--fe-measure, 54ch);
	margin: 20px auto 0;
	padding: 0 16px;
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------
   4. The wire itself. about-1399-circuit.js injects one <svg> as the
   FIRST child of .entry-content (so normal content painting order keeps
   it visually behind the text/photos with no z-index tricks needed) and
   draws one continuous <path> plus junction <circle> dots inside it,
   using the getBoundingClientRect() of the elements carrying the
   fc-* HTML-anchor ids in about-1399-new-content.txt. This stylesheet
   only has to size/position the overlay and set the stroke's color.
--------------------------------------------------------------------- */
.page-id-1399 .entry-content {
	position: relative;
}

.page-id-1399 .family-circuit-wire-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 0;
	color: #000; /* DESIGN.md headings token; wire reads its color off this, not a literal */
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .page-id-1399 .family-circuit-wire-overlay {
		color: #f7f3ee; /* DESIGN.md dark-mode ink, matches the plugin's portrait-run wire */
	}
}

:root[data-theme="dark"] .page-id-1399 .family-circuit-wire-overlay {
	color: #f7f3ee;
}

.page-id-1399 .family-circuit-wire-path,
.page-id-1399 .family-circuit-wire-dot {
	transition: none; /* JS sets the real transition only once it is ready to animate */
}

/* Belt-and-suspenders: the JS already checks prefers-reduced-motion and
 * skips the animation entirely, but if a future edit adds a CSS-only
 * transition here, this keeps it honest too. */
@media (prefers-reduced-motion: reduce) {
	.page-id-1399 .family-circuit-wire-path,
	.page-id-1399 .family-circuit-wire-dot {
		transition: none !important;
	}
}
/* <<< fusting:about-family-circuit <<< */


/* >>> fusting:nightly-contrast-fixes >>> */
/* Contrast fixes confirmed by desktop/mobile light/dark QA. */
button.fusting-evpc-primary,
button.fusting-evpc-primary:hover,
button.fusting-evpc-primary:focus,
button.fusting-evpc-primary:active {
	color: #000 !important;
}

html.fe-dark-active footer.site-footer a:not(.wp-block-button__link):not(.uagb-buttons-repeater):not(.footer-social-item) {
	color: var(--fe-text, #f7f3ee) !important;
}
/* <<< fusting:nightly-contrast-fixes <<< */

/* >>> fusting:responsive-shell-polish >>> */
/* Site-shell behavior that belongs to Astra, not the Circuit Blocks plugin. */
.about-family-cta.fe-circuit-box {
	flex-direction: column;
	gap: 20px;
}

@media (max-width: 921px) {
	.ast-mobile-popup-content {
		display: flex;
		flex-direction: column;
		min-height: calc(100dvh - 53px);
	}

	.ast-mobile-popup-content .ast-builder-menu-mobile,
	.ast-mobile-popup-content .main-navigation {
		display: flex;
		flex: 1 1 auto;
		min-height: 0;
	}

	.ast-mobile-popup-content .main-header-menu {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		min-height: calc(100dvh - 53px);
		justify-content: space-evenly;
	}

	.ast-mobile-popup-content .main-header-menu > .menu-item {
		display: flex;
		flex: 1 1 0;
		align-items: center;
		min-height: 56px;
	}

	.ast-mobile-popup-content .main-header-menu > .menu-item > .menu-link {
		display: flex;
		align-items: center;
		width: 100%;
		height: auto;
		min-height: 56px;
		padding-block: 10px;
		font-size: clamp(24px, 4.5vh, 36px);
		line-height: 1.15;
	}
}

@media (max-width: 767px) {
	.page-id-1399 .about-family-cta.fe-circuit-box::before,
	.page-id-1399 .about-family-cta.fe-circuit-box::after {
		display: block;
	}

	.site-footer .wp-block-jetpack-email a[href^="mailto:"] {
		white-space: nowrap;
		overflow-wrap: normal;
		word-break: normal;
		font-size: clamp(12px, 4vw, 16px);
	}
}
/* <<< fusting:responsive-shell-polish <<< */

/* >>> fusting:darkmode-contrast-layer >>> */
/* The dark-mode and WCAG contrast layer: the largest single thing in this file (~69KB, ~331 rules). It had no block markers, so nothing could edit it by name. Its own internal section comments (Foundations, WordPress/Spectra surfaces, Buttons, Native controls and WPForms) are the map. Wrapped in place 2026-09-01; not a single rule moved. */
/* FUSTING STAGING DARK MODE BEGIN */
:root {
	--fe-orange: #ed6900;
	--fe-focus: #ffb16f;
	--fe-focus-light: #8f3c00;
}

/* WCAG 2.2 AA: visible keyboard focus in every color mode. */
:where(a[href], button, input, select, textarea, summary, iframe, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 3px solid var(--fe-focus-light) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 2px #fff !important;
	scroll-margin-block: 120px 96px;
}

/* The hamburger uses a color-and-scale focus cue, never a doubled stroke box. */
html body .ast-mobile-header-wrap .ast-button-wrap .menu-toggle.main-header-menu-toggle,
html body .ast-mobile-header-wrap .ast-button-wrap .menu-toggle.main-header-menu-toggle:focus,
html body .ast-mobile-header-wrap .ast-button-wrap .menu-toggle.main-header-menu-toggle:focus-visible,
html body .ast-mobile-popup-drawer .menu-toggle-close,
html body .ast-mobile-popup-drawer .menu-toggle-close:focus,
html body .ast-mobile-popup-drawer .menu-toggle-close:focus-visible {
	background: transparent !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
}

.ast-mobile-header-wrap .menu-toggle .ast-mobile-svg,
.ast-mobile-popup-drawer .menu-toggle-close .ast-mobile-svg {
	transform-origin: center;
	transition: color .16s ease, fill .16s ease, transform .16s ease;
}

html body .ast-mobile-header-wrap .ast-button-wrap .menu-toggle.main-header-menu-toggle:focus-visible,
html body .ast-mobile-popup-drawer .menu-toggle-close:focus-visible {
	color: #e36200 !important;
}

html body .ast-mobile-header-wrap .ast-button-wrap .menu-toggle.main-header-menu-toggle:focus-visible .ast-mobile-svg,
html body .ast-mobile-popup-drawer .menu-toggle-close:focus-visible .ast-mobile-svg {
	fill: #e36200 !important;
	transform: scale(1.08);
}

/* Links embedded in prose do not rely on orange alone. */
:where(.entry-content p, .entry-content li, .entry-content dd, .entry-content figcaption) a:not(.wp-element-button):not(.uagb-buttons-repeater) {
	text-decoration: underline;
	text-decoration-thickness: .09em;
	text-underline-offset: .18em;
}

:where(footer, #infinite-footer) a {
	text-decoration: none;
}

:where(footer, #infinite-footer) a[href*="privacy"] {
	font-weight: 700;
}

:where(footer, #infinite-footer) a:hover,
:where(footer, #infinite-footer) a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: .09em;
	text-underline-offset: .18em;
}

.blog-credits {
	color: #595959 !important;
}

/* Jetpack renders rating stars as text glyphs, so give them text-level contrast. */
figure.wp-block-jetpack-rating-star span {
	color: #8a6200 !important;
}

/* Rating stars over the homepage photo need the bright treatment in light mode too. */
.wp-block-cover figure.wp-block-jetpack-rating-star span {
	color: #f6bb06 !important;
}

iframe:focus {
	outline: 3px solid var(--fe-focus-light) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 2px #fff !important;
}

:where(object.wp-block-file__embed, #eere-laws-and-incentives-search):focus {
	outline: 3px solid var(--fe-focus-light) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 2px #fff !important;
	scroll-margin-block: 120px 96px;
}

/* Preserve third-party blue branding while keeping its CTA label readable. */
body a.btn-code-example.w-button {
	color: #fff !important;
}

/* Bring the two legacy blue WPForms themes into the Fusting orange system. */
body #wpforms-submit-1767,
body #wpforms-form-5461 .wpforms-page-button {
	background: var(--fe-orange) !important;
	border-color: var(--fe-orange) !important;
	color: #16110d !important;
}

body #wpforms-form-1767 .wpforms-uploader :where(.modern-title, .modern-title span, .modern-hint) {
	color: #666 !important;
}

/* This post's dark CTA inherited the site's generic dark text override. */
body.postid-4046 .uagb-block-febtn002 {
	background: var(--fe-orange) !important;
	border-color: var(--fe-orange) !important;
}

body.postid-4046 .uagb-block-febtn002 .uagb-button__link {
	color: #16110d !important;
}

/* Keep the contact cards as intentional light plates so official black marks remain intact. */
body:is(.page-id-5770, .page-id-2370) :where(
	.uagb-block-75240aef,
	.uagb-block-792e4b3a,
	.uagb-block-2a4129ff,
	.uagb-block-4d39c22d,
	.uagb-block-fb20c444,
	.uagb-block-f026a055,
	.uagb-modal-popup-content,
	.uagb-modal-popup-wrap
) {
	background: #f3f3f3 !important;
	border-color: #c7c7c7 !important;
	color: #242424 !important;
	color-scheme: light;
}

body:is(.page-id-5770, .page-id-2370) :where(
	.uagb-block-75240aef,
	.uagb-block-792e4b3a,
	.uagb-modal-popup-content
) :where(h1, h2, h3, h4, h5, h6, p, span, strong) {
	color: #242424 !important;
}

body:is(.page-id-5770, .page-id-2370) :where(
	.uagb-block-75240aef,
	.uagb-block-792e4b3a,
	.uagb-modal-popup-content
) a:not(.wp-element-button) {
	color: #a94700 !important;
}

body:is(.page-id-5770, .page-id-2370) :where(.uagb-icon-wrapper, .uagb-modal-trigger) svg path {
	fill: #a94700 !important;
}

body:is(.page-id-5770, .page-id-2370) .uagb-modal-popup-close svg path {
	fill: #242424 !important;
}

/* Stephen's native-block contact card is an intentional dark plate in every mode. */
body.page-id-2719 a.wp-block-button__link[href^="tel:"],
body.page-id-2719 a.wp-block-button__link[href="https://fustingelectric.com/"] {
	color: #f7f3ee !important;
}

body.page-id-2719 a[href*="linkedin.com/in/stephen-fusting"] {
	color: #ff9a47 !important;
}

@media (max-width: 600px) {
	body:is(.page-id-5770, .page-id-2370) .uagb-modal-popup-wrap {
		width: calc(100vw - 32px) !important;
		max-width: calc(100vw - 32px) !important;
	}

	body:is(.page-id-5770, .page-id-2370) .uagb-modal-popup-content,
	body:is(.page-id-5770, .page-id-2370) .uagb-modal-popup-content img {
		max-width: 100% !important;
		height: auto;
	}

	body:is(.page-id-5770, .page-id-2370) .uagb-modal-popup-close {
		top: 8px !important;
		right: 8px !important;
	}

	body.page-id-2649 .wp-block-button__link {
		font-size: 18px !important;
		line-height: 1.25 !important;
		padding: 16px 22px !important;
	}

	body.page-id-5239 .uagb-buttons__wrap {
		align-items: stretch !important;
		flex-direction: column !important;
	}

	body.page-id-5239 .wp-block-uagb-buttons-child,
	body.page-id-5239 .uagb-buttons-repeater {
		width: 100% !important;
	}
}

:where(.current-menu-item, .current_page_item) > .menu-link,
:where([aria-current="page"], [aria-current="true"]) {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: .25em;
}

/*
 * Keep the Services page in editable Gutenberg blocks while presenting the
 * four services as a compact 2-by-2 technical grid. The icon and title share
 * one row, so alignment does not require artificial empty space below titles.
 */
.page-id-4542 .fe-service-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(36px, 5vw, 72px) !important;
	row-gap: clamp(48px, 6vw, 80px) !important;
	align-items: stretch !important;
}

.page-id-4542 .fe-service-card {
	display: block !important;
	height: 100%;
	min-width: 0;
	margin: 0 !important;
}

.page-id-4542 .fe-service-card > .wp-block-group {
	display: flex !important;
	flex-direction: column;
	gap: 24px !important;
	height: 100%;
	width: 100%;
}

.page-id-4542 .fe-service-card > .wp-block-group > .wp-block-image,
.page-id-4542 .fe-service-card > .wp-block-group > .wp-block-image img {
	display: block;
	width: 100%;
}

.page-id-4542 .fe-service-card > .wp-block-group > .wp-block-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.page-id-4542 .fe-service-card > .wp-block-group > .wp-block-group {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 16px !important;
	flex: 1 1 auto;
	height: auto;
	width: 100%;
	text-align: center;
}

.page-id-4542 .fe-service-card > .wp-block-group > .wp-block-group > .wp-block-image {
	margin: 0 !important;
}

.page-id-4542 .fe-service-card > .wp-block-group > .wp-block-group > .wp-block-image img {
	display: block;
	width: 56px !important;
	height: 56px !important;
	object-fit: contain;
}

.page-id-4542 .fe-service-card .is-service-name {
	min-height: 0;
	margin: 0 !important;
	text-align: center !important;
}

.page-id-4542 .fe-service-card .fe-service-title-link {
	color: inherit !important;
	text-decoration: none !important;
}

.page-id-4542 .fe-service-card .fe-service-title-link:is(:hover, :focus-visible) {
	color: var(--fe-orange) !important;
}

.page-id-4542 .fe-service-card > .wp-block-group > .wp-block-group > p {
	margin: 0 !important;
	text-align: center !important;
	width: 100%;
}

.page-id-4542 .fe-services-shared-cta {
	justify-content: center !important;
	margin-block: clamp(42px, 6vw, 72px) 0 !important;
}

.page-id-4542 .fe-services-shared-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 14px 26px !important;
	font-size: 18px !important;
	line-height: 1.2;
}

/* Keep the homepage schematic CTA's native peach field visible even while Spectra rebuilds its generated CSS. */
body.home .uagb-block-75b4a6b0 {
	background-color: #f2bf99 !important;
}

@media (max-width: 781px) {
	.page-id-4542 .fe-service-grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 52px !important;
	}

	.page-id-4542 .fe-service-card > .wp-block-group > .wp-block-group > .wp-block-image img {
		width: 48px !important;
		height: 48px !important;
	}
}

.search-form .search-field {
	min-width: 0;
}

.search-form .search-field::placeholder {
	color: #6b6b6b !important;
	opacity: 1;
}

.search-form .search-submit {
	min-width: 72px;
	padding-inline: 14px !important;
	white-space: nowrap;
}

/* Astra emits an icon button and a labeled input for the 404 search form. */
.error404 .search-form button.search-submit {
	display: none !important;
}

/* Keep the slider dot visually small while providing a 24px target. */
.swiper-pagination .swiper-pagination-bullet {
	position: relative;
	width: 24px !important;
	height: 24px !important;
	margin-inline: 2px !important;
	background: transparent !important;
	opacity: 1 !important;
}

.swiper-pagination .swiper-pagination-bullet::after {
	content: "";
	position: absolute;
	top: 8px;
	left: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #6b6b6b;
}

.swiper-pagination .swiper-pagination-bullet-active::after {
	background: var(--fe-orange);
}

.fe-ev-benefits {
	margin: 36px 0 0;
	padding-left: 1.35em;
}

.fe-ev-benefits li {
	margin: 0 0 10px;
	padding-left: .3em;
}

.fe-ev-benefits li::marker {
	color: var(--fe-orange);
}

/* Keep the Astra footer compact while preserving accessible link targets. */
.site-primary-footer-wrap {
	padding-block: 14px !important;
}

.site-primary-footer-wrap :where(.widget, p) {
	margin-block: 0 !important;
}

.site-primary-footer-wrap :where(.site-footer-section, .ast-builder-layout-element) {
	min-height: 0 !important;
}

.site-primary-footer-wrap :where(p, a, span) {
	line-height: 1.35 !important;
}

/* Default/light link and orange-CTA contrast repairs found by the same matrix. */
@media not (prefers-color-scheme: dark) {
	html:not(.fe-dark-active) body :where(
		input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
		select,
		textarea,
		.choices__inner,
		.wpforms-uploader
	) {
		border-color: #767676 !important;
	}

	html:not(.fe-dark-active) body :where(.fe-card-sub, .fe-placeholder, .uagb-tm__company) {
		color: #5f5f5f !important;
	}

	html:not(.fe-dark-active) body .entry-content a:not(.wp-element-button):not(.uagb-buttons-repeater):not(.fe-terms-link):not(.fe-card),
	html:not(.fe-dark-active) body :where(
		.entry-title a,
		.wp-block-post-title a,
		.read-more a,
		.post-navigation a,
		.nav-links a,
		.page-numbers:not(.current),
		.site-footer a,
		.skip-link
	) {
		color: #b04e00 !important;
	}

	html:not(.fe-dark-active) body .wp-block-button__link:not(.has-ast-global-color-3-background-color),
	html:not(.fe-dark-active) body .wp-block-button__link.has-ast-global-color-0-background-color,
	html:not(.fe-dark-active) body .wp-block-button__link.has-ast-global-color-4-color,
	html:not(.fe-dark-active) body .uagb-buttons-repeater,
	html:not(.fe-dark-active) body .sbi_follow_btn a,
	html:not(.fe-dark-active) body #sb_instagram .sbi_follow_btn a,
	html:not(.fe-dark-active) body #sb_instagram .sbi_follow_btn a span,
	html:not(.fe-dark-active) body .uagb-buttons-repeater .uagb-button__link,
	html:not(.fe-dark-active) body .wp-block-uagb-buttons-child .uagb-button__wrapper .uagb-buttons-repeater .uagb-button__link,
	html:not(.fe-dark-active) body .wpforms-page-button,
	html:not(.fe-dark-active) body .wpforms-submit,
	html:not(.fe-dark-active) body .search-submit {
		color: #16110d !important;
	}

	html:not(.fe-dark-active) body .search-submit {
		background: #ed6900 !important;
		border-color: #ed6900 !important;
	}

	html:not(.fe-dark-active) body.page-id-2719 a.wp-block-button__link[href^="tel:"],
	html:not(.fe-dark-active) body.page-id-2719 a.wp-block-button__link[href="https://fustingelectric.com/"] {
		color: #f7f3ee !important;
	}

	html:not(.fe-dark-active) body.page-id-2719 a[href*="linkedin.com/in/stephen-fusting"] {
		color: #ff9a47 !important;
	}

	html:not(.fe-dark-active) #infinite-footer .container {
		background: #fff !important;
		border-color: #8f8f8f !important;
		color: #242424 !important;
	}

	html:not(.fe-dark-active) #infinite-footer .container a {
		color: #a94700 !important;
	}
}

html.fe-dark-active {
	--fe-bg: #000;
	--fe-surface: #000;
	--fe-surface-2: #000;
	--fe-surface-3: #000;
	--fe-text: #f7f3ee;
	--fe-muted: #cbc2b9;
	--fe-border: #655b52;
	--fe-link: #ff9a47;
	--fe-link-hover: #ffc08c;
	--fe-control: #000;
	--fe-control-disabled: #3b3631;
	--fe-error: #ff8d83;
	--fe-success: #86d9a1;
	background: var(--fe-bg);
	color: var(--fe-text);
}

/* Foundations and classic Astra regions. */
.fe-dark-active body,
.fe-dark-active #page,
.fe-dark-active .site,
.fe-dark-active .site-content,
.fe-dark-active .ast-container,
.fe-dark-active .site-main,
.fe-dark-active .entry-content,
.fe-dark-active .ast-separate-container,
.fe-dark-active .ast-plain-container,
.fe-dark-active .ast-page-builder-template {
	background-color: var(--fe-bg) !important;
	color: var(--fe-text) !important;
}

.fe-dark-active .site-header,
.fe-dark-active .ast-primary-header-bar,
.fe-dark-active .ast-mobile-header-wrap,
.fe-dark-active .ast-mobile-popup-inner,
.fe-dark-active .ast-mobile-popup-drawer,
.fe-dark-active .ast-mobile-popup-content,
.fe-dark-active .site-footer,
.fe-dark-active .site-primary-footer-wrap,
.fe-dark-active .site-below-footer-wrap {
	background-color: #000 !important;
	border-color: var(--fe-border) !important;
	color: var(--fe-text) !important;
}

.fe-dark-active :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, label, legend, address, summary),
.fe-dark-active .entry-title,
.fe-dark-active .page-title,
.fe-dark-active .wp-block-post-title,
.fe-dark-active .wp-block-post-excerpt,
.fe-dark-active .ast-archive-description,
.fe-dark-active .site-footer :where(p, li, span) {
	color: var(--fe-text) !important;
}

.fe-dark-active :where(.ast-meta, .entry-meta, .wp-block-post-date, .wp-block-post-author, .wp-block-post-terms, .wpforms-field-sublabel, .wpforms-field-description, .wpforms-field-limit-text) {
	color: var(--fe-muted) !important;
}

.fe-dark-active :where(.uagb-icon-list__label, .uagb-icon-list__label strong, .wpforms-image-choices-label, .fe-card-sub, .fe-placeholder, .uagb-tm__company) {
	color: var(--fe-text) !important;
}

.fe-dark-active :where(.uagb-tm__desc, .uagb-tm__author-name, .uagb-testimonial-details) {
	color: var(--fe-text) !important;
}

.fe-dark-active .blog-credits {
	color: var(--fe-muted) !important;
}

.fe-dark-active .search-form .search-field::placeholder {
	color: var(--fe-muted) !important;
}

.fe-dark-active .uagb-faq-icon-wrap svg {
	fill: var(--fe-orange) !important;
	color: var(--fe-orange) !important;
}

html.fe-dark-active body.page-id-1399 svg[role="img"][aria-label] :is(line, circle) {
	stroke: var(--fe-text) !important;
}

html.fe-dark-active body.page-id-1399 svg[role="img"][aria-label] + div[style*="color:#666"] {
	color: var(--fe-muted) !important;
}

html.fe-dark-active body.page-id-1402 :where(.fe-card, .fe-form-area) {
	background: var(--fe-surface) !important;
	border-color: var(--fe-border) !important;
}

html.fe-dark-active body.page-id-1402 .fe-card.active {
	background: var(--fe-surface-2) !important;
}

html.fe-dark-active body.page-id-1402 .fe-card-label {
	color: var(--fe-text) !important;
}

html.fe-dark-active body.page-id-1402 .fe-card::before {
	border-color: var(--fe-muted) !important;
}

.fe-dark-active figure.wp-block-jetpack-rating-star span {
	color: #f6bb06 !important;
}

.fe-dark-active .swiper-pagination .swiper-pagination-bullet::after {
	background: #b9afa6;
}

.fe-dark-active .swiper-pagination .swiper-pagination-bullet-active::after {
	background: var(--fe-orange);
}

.fe-dark-active :where(a:not(.wp-element-button):not(.uagb-buttons-repeater):not(.menu-link):not(.fe-card)) {
	color: var(--fe-link) !important;
}

.fe-dark-active :where(a:not(.wp-element-button):not(.uagb-buttons-repeater):not(.menu-link):not(.fe-card)):hover {
	color: var(--fe-link-hover) !important;
}

.fe-dark-active :where(.entry-title a, .wp-block-post-title a, .ast-archive-post .entry-title a, .search .entry-title a) {
	color: var(--fe-link) !important;
}

.fe-dark-active :where(p, li, figcaption, .wp-element-caption).has-text-color,
.fe-dark-active :where(.wp-block-paragraph, .wp-element-caption, figcaption) {
	color: var(--fe-text) !important;
}

.fe-dark-active :where(p, li, figcaption, .wp-element-caption).has-text-color a,
.fe-dark-active :where(.wp-block-paragraph, .wp-element-caption, figcaption) a {
	color: var(--fe-link) !important;
}

.fe-dark-active :where(.main-header-menu, .main-header-menu .sub-menu, .ast-header-break-point .main-header-menu, .ast-builder-menu-mobile .main-navigation) {
	background-color: #000 !important;
}

.fe-dark-active :where(.main-header-menu .menu-link, .ast-builder-menu-mobile .menu-link, .site-footer a) {
	color: var(--fe-text) !important;
}

.fe-dark-active :where(.main-header-menu .menu-link, .ast-builder-menu-mobile .menu-link, .site-footer a):hover,
.fe-dark-active :where(.current-menu-item, .current_page_item) > .menu-link {
	color: var(--fe-link-hover) !important;
}

/* Astra's social icons have an independent black SVG fill. */
.fe-dark-active .site-footer .ast-builder-social-element svg {
	fill: var(--fe-text) !important;
}

.fe-dark-active .site-footer .ast-builder-social-element:hover svg {
	fill: var(--fe-link-hover) !important;
}

.fe-dark-active #infinite-footer .container {
	background: #000 !important;
	border-color: var(--fe-border) !important;
	color: var(--fe-muted) !important;
}

.fe-dark-active #infinite-footer .container a {
	color: var(--fe-link) !important;
}

/* WordPress, Spectra, archive, and card surfaces. */
.fe-dark-active :where(
	.wp-block-uagb-container,
	.wp-block-uagb-container.uagb-is-root-container,
	.wp-block-group.has-background,
	.wp-block-columns.has-background,
	.wp-block-column.has-background,
	.wp-block-media-text.has-background,
	.wp-block-query,
	.wp-block-post,
	.uagb-container-inner-blocks-wrap,
	.uagb-infobox__content-wrap,
	.uagb-faq-item,
	.uagb-faq-questions,
	.uagb-faq-content,
	.ast-article-post,
	.ast-article-single,
	.search .ast-row,
	.error404 .page-content,
	.widget,
	.comments-area,
	.navigation.post-navigation,
	.wp-block-latest-posts__list
) {
	background-color: var(--fe-surface) !important;
	border-color: var(--fe-border) !important;
	color: var(--fe-text) !important;
}

.fe-dark-active header :where(.widget, .widget_block, .header-widget-area) {
	background: transparent !important;
	border-color: transparent !important;
}

html.fe-dark-active body :where(
	button,
	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	.wp-element-button,
	.wp-block-button__link,
	.uagb-buttons-repeater,
	.ast-button,
	.button,
	.sbi_follow_btn a
) {
	color: #16110d !important;
}

html.fe-dark-active body .wp-block-button .wp-block-button__link.wp-element-button,
html.fe-dark-active body .wp-block-button__link.has-text-color,
html.fe-dark-active body a.uagb-buttons-repeater.wp-block-button__link,
html.fe-dark-active body .uagb-buttons-repeater .uagb-button__link,
html.fe-dark-active body .wp-block-uagb-buttons-child .uagb-button__wrapper .uagb-buttons-repeater .uagb-button__link,
html.fe-dark-active body .sbi_follow_btn a,
html.fe-dark-active body #sb_instagram .sbi_follow_btn a span,
html.fe-dark-active body .wpforms-page-button,
html.fe-dark-active body .wpforms-submit {
	color: #16110d !important;
}

html.fe-dark-active body .wp-block-button__link.has-ast-global-color-3-background-color {
	background: var(--fe-orange) !important;
	border-color: var(--fe-orange) !important;
	color: #16110d !important;
}

html.fe-dark-active iframe:focus {
	outline-color: var(--fe-focus) !important;
	box-shadow: 0 0 0 2px var(--fe-bg) !important;
}

html.fe-dark-active :where(object.wp-block-file__embed, #eere-laws-and-incentives-search):focus {
	outline-color: var(--fe-focus) !important;
	box-shadow: 0 0 0 2px var(--fe-bg) !important;
}

.fe-dark-active .entry-content > .wp-block-uagb-container.uagb-is-root-container,
.fe-dark-active .entry-content > .wp-block-group.alignfull,
.fe-dark-active .entry-content > .wp-block-cover.alignfull {
	background-color: var(--fe-bg) !important;
}

.fe-dark-active :where(.has-white-background-color, .has-base-background-color, .has-ast-global-color-5-background-color, .has-ast-global-color-4-background-color) {
	background-color: var(--fe-surface) !important;
}

/* Keep ordinary layout groups on the single black canvas instead of stacking charcoal boxes. */
.fe-dark-active :where(
	.entry-content .wp-block-uagb-container,
	.entry-content .uagb-container-inner-blocks-wrap,
	.entry-content .wp-block-group,
	.entry-content .wp-block-columns,
	.entry-content .wp-block-column,
	.site-footer .widget,
	.site-footer .wp-block-jetpack-contact-info,
	#sb_instagram,
	#sb_instagram .sb_instagram_header
) {
	background-color: transparent !important;
	box-shadow: none !important;
}

/* The EV split layout belongs directly on the black page canvas. */
.fe-dark-active body.home :where(.uagb-block-f353d793, .uagb-block-49961fae, .uagb-block-f353d793 > .uagb-container-inner-blocks-wrap) {
	background: transparent !important;
	border-color: transparent !important;
}

/* Preserve the native schematic pattern while darkening its peach field. */
.fe-dark-active body.home .uagb-block-75b4a6b0 {
	background-color: #6f4732 !important;
}

.fe-dark-active body.home .uagb-block-75b4a6b0 > .uagb-container-inner-blocks-wrap {
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

.fe-dark-active body.home .uagb-block-75b4a6b0 :where(h2, p) {
	color: var(--fe-text) !important;
}

/* Maintain clear primary and secondary action hierarchy in the homepage CTA. */
.fe-dark-active body.home .uagb-block-75b4a6b0 .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link {
	color: var(--fe-text) !important;
	background: #000 !important;
	border: 2px solid var(--fe-text) !important;
}

.fe-dark-active :where(.wp-block-separator, hr) {
	border-color: var(--fe-border) !important;
	color: var(--fe-border) !important;
	opacity: 1;
}

/* The credential strip needs no decorative divider. */
body.home .uagb-block-a5071a24 + .wp-block-separator {
	display: none !important;
}

.fe-dark-active :where(.wp-block-cover, .wp-block-cover-image) {
	background-color: var(--fe-surface-2);
}

.fe-dark-active :where(.wp-block-cover__background, .wp-block-cover__gradient-background) {
	opacity: .58 !important;
}

/* The EV make chooser uses monochrome marks. Convert their original black art
 * to white on the black canvas. Do not use brand-orange as a substitute for a
 * logo. Colored photographs and marks outside this control retain their files. */
html.fe-dark-active body.page-id-4901 :is(
	#wpforms-5673-field_406-container,
	#wpforms-5673-field_348-container
) .wpforms-image-choices-image img {
	filter: brightness(0) invert(1) !important;
}

html.fe-dark-active body #wpforms-form-1767 .wpforms-uploader :where(.modern-title, .modern-title span, .modern-hint) {
	color: var(--fe-muted) !important;
}

html.fe-dark-active body #fe-pg2 .pg-opt {
	color: var(--fe-muted) !important;
}

html.fe-dark-active body .jobber-flash--error,
html.fe-dark-active body .jobber-flash--error :where(p, strong, span) {
	color: #3b1612 !important;
}

/* Keep photos and official marks intact. Marks receive a controlled light plate. */
.fe-dark-active :where(img, picture, video) {
	filter: none !important;
}

.fe-dark-active :where(
	img[alt*="Tesla Wall Connector Certified"],
	img[alt*="Master Electrician License"],
	img[alt*="Fully Insured"],
	img[alt*="Google rating"],
	img[alt*="Google Rating"]
) {
	background: #fff !important;
	box-shadow: 0 0 0 8px #fff;
}

/* The homepage EV panel uses Tesla's official white SVG directly on the black canvas. */
html.fe-dark-active body.home .uagb-block-49961fae img[alt*="Tesla Wall Connector Certified"] {
	content: url('/wp-content/uploads/2026/08/fusting-tesla-wall-connector-certified-white-61423592dc03.svg') !important;
	width: 300px !important;
	max-width: 100% !important;
	height: 55px !important;
	object-fit: contain !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* Preserve every official mark in the homepage credential carousel as drawn. */
.fe-dark-active body.home .uagb-block-a5071a24,
.fe-dark-active body.home .uagb-block-a5071a24 :where(.slick-list, .slick-track) {
	background: #fff !important;
}

.fe-dark-active body.home .uagb-block-a5071a24 {
	border: 0 !important;
	padding-block: 12px !important;
}

/* The orange schematic drawings remain technical line art on dark plates. */
.fe-dark-active :where(img[alt$="circuit symbol"], img[alt$="breaker symbol"], img[alt$="lamp symbol"]) {
	filter: none !important;
	isolation: isolate;
}

/* Buttons and interaction states. */
.fe-dark-active :where(
	button,
	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	.wp-element-button,
	.wp-block-button__link,
	.uagb-buttons-repeater,
	.ast-button,
	.button
) {
	background: var(--fe-orange) !important;
	border: 2px solid var(--fe-orange) !important;
	color: #16110d !important;
	box-shadow: none;
	text-decoration: none;
}

/* Preserve Astra's compact mobile header controls instead of treating them as CTAs. */
html.fe-dark-active body :where(
	.menu-toggle.main-header-menu-toggle,
	.ast-button-wrap .menu-toggle
) {
	background: transparent !important;
	border: 0 !important;
	color: var(--fe-text) !important;
}

html.fe-dark-active body header a[aria-label="Call Fusting Electric"] {
	border: 10px solid var(--fe-orange) !important;
}

.fe-dark-active :where(
	button,
	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	.wp-element-button,
	.wp-block-button__link,
	.uagb-buttons-repeater,
	.ast-button,
	.button
):hover {
	background: #ff8a2d !important;
	border-color: #ff8a2d !important;
	color: #120d09 !important;
}

.fe-dark-active :where(button, input, select, textarea, a, summary, iframe, [tabindex]):focus-visible {
	outline: 3px solid var(--fe-focus) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 2px var(--fe-bg) !important;
}

.fe-dark-active :where(button, input[type="button"], input[type="submit"], .wp-element-button, .button):disabled,
.fe-dark-active :where(button, input[type="button"], input[type="submit"], .wp-element-button, .button)[aria-disabled="true"] {
	background: var(--fe-control-disabled) !important;
	border-color: var(--fe-border) !important;
	color: #aaa19a !important;
	cursor: not-allowed;
	opacity: 1;
}

/* Native controls and WPForms. */
.fe-dark-active :where(
	input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
	select,
	textarea,
	.wpforms-form input:not([type="submit"]):not([type="button"]),
	.wpforms-form select,
	.wpforms-form textarea,
	.wpforms-field-file-upload .dz-message,
	.wpforms-uploader
) {
	background-color: var(--fe-control) !important;
	border: 1px solid var(--fe-border) !important;
	color: var(--fe-text) !important;
	-webkit-text-fill-color: var(--fe-text) !important;
	caret-color: var(--fe-text);
}

.fe-dark-active :where(input, textarea)::placeholder {
	color: #b9afa6 !important;
	opacity: 1;
}

.fe-dark-active :where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--fe-orange);
}

.fe-dark-active :where(label.wpforms-error, .wpforms-required-label, .wpforms-field-required > label, .wpforms-error-container, .wpforms-field-description.wpforms-error) {
	color: var(--fe-error) !important;
}

/* WPForms assigns .wpforms-error to invalid inputs too. The entered value is
 * content, not the error indicator, and stays readable while the border and
 * message carry error status. */
.fe-dark-active .wpforms-form :is(input, textarea, select).wpforms-error,
.fe-dark-active .wpforms-form :is(input, textarea, select).wpforms-error:focus {
	color: var(--fe-text) !important;
	-webkit-text-fill-color: var(--fe-text) !important;
	border-color: var(--fe-error) !important;
}

.fe-dark-active :where(.wpforms-confirmation-container, .wpforms-confirmation-container-full, .wpforms-confirmation-scroll) {
	background: #173321 !important;
	border-color: #397c50 !important;
	color: #eaf8ef !important;
}

.fe-dark-active :where(.wpforms-error-container, .wpforms-field-container .wpforms-error-container) {
	background: #3c1d1a !important;
	border-color: #9a4c43 !important;
	color: #ffe9e6 !important;
}

.fe-dark-active :where(.iti__country-list, .ui-autocomplete, .pac-container, .choices__list, .choices__inner, .flatpickr-calendar) {
	background: var(--fe-surface-2) !important;
	border-color: var(--fe-border) !important;
	color: var(--fe-text) !important;
}

/* Tables, code, quotations, pagination, and common notices. */
.fe-dark-active :where(table, th, td) {
	background: var(--fe-surface) !important;
	border-color: var(--fe-border) !important;
	color: var(--fe-text) !important;
}

.fe-dark-active :where(thead th, tbody tr:nth-child(even) td) {
	background: var(--fe-surface-2) !important;
}

.fe-dark-active :where(pre, code, kbd, samp) {
	background: #000 !important;
	border-color: var(--fe-border) !important;
	color: #ffe0c7 !important;
}

.fe-dark-active :where(blockquote, .wp-block-quote, .wp-block-pullquote) {
	background: var(--fe-surface-2) !important;
	border-color: var(--fe-orange) !important;
	color: var(--fe-text) !important;
}

.fe-dark-active :where(.page-numbers, .nav-links a, .post-page-numbers) {
	background: var(--fe-surface-2) !important;
	border-color: var(--fe-border) !important;
	color: var(--fe-text) !important;
}

.fe-dark-active :where(.page-numbers.current, .post-page-numbers.current) {
	background: var(--fe-orange) !important;
	color: #16110d !important;
}

.fe-dark-active :where(.notice, .wp-block-notice, .uagb-notice, .components-notice) {
	background: var(--fe-surface-2) !important;
	border-color: var(--fe-border) !important;
	color: var(--fe-text) !important;
}

/* CookieYes and modal surfaces retain every consent action. */
.fe-dark-active :where(.cky-consent-bar, .cky-modal, .cky-preference-center, .cky-audit-table, .cky-footer-wrapper, .cky-accordion-wrapper) {
	background: var(--fe-surface) !important;
	border-color: var(--fe-border) !important;
	color: var(--fe-text) !important;
}

.fe-dark-active :where(.cky-title, .cky-notice-des, .cky-notice-des p, .cky-preference-title, .cky-preference-content-wrapper, .cky-accordion-header-des, .cky-accordion-btn) {
	color: var(--fe-text) !important;
}

.fe-dark-active :where(.cky-btn, .cky-btn-customize, .cky-btn-reject, .cky-btn-accept) {
	border-color: var(--fe-orange) !important;
}

/* Cross-origin embeds cannot be recolored internally. Frame them coherently. */
.fe-dark-active :where(iframe, .wp-block-embed__wrapper, .wp-block-html:has(iframe)) {
	background: var(--fe-surface) !important;
	border-color: var(--fe-border) !important;
	color-scheme: light;
}

/* Search and 404 affordances. */
.fe-dark-active :where(.ast-search-menu-icon .search-form, .search-form, .wp-block-search__inside-wrapper) {
	background: var(--fe-surface-2) !important;
	border-color: var(--fe-border) !important;
}

/* Service names are native heading links. Keep them unmistakably clickable. */
@media (prefers-color-scheme: light) {
	html:not(.fe-dark-active) body.page-id-4542 .entry-content .fe-service-card .fe-service-title-link {
		color: #16110d !important;
		text-decoration: underline !important;
		text-decoration-color: currentColor !important;
		text-decoration-thickness: .08em !important;
		text-underline-offset: .16em !important;
	}

	html:not(.fe-dark-active) body.page-id-4542 .entry-content .fe-service-card .fe-service-title-link:is(:hover, :focus-visible) {
		color: #a94700 !important;
		text-decoration-thickness: .12em !important;
	}
}

html.fe-dark-active body.page-id-4542 .entry-content .fe-service-card .fe-service-title-link {
	color: var(--fe-text) !important;
	text-decoration: underline !important;
	text-decoration-color: currentColor !important;
	text-decoration-thickness: .08em !important;
	text-underline-offset: .16em !important;
}

html.fe-dark-active body.page-id-4542 .entry-content .fe-service-card .fe-service-title-link:is(:hover, :focus-visible) {
	color: var(--fe-orange) !important;
	text-decoration-thickness: .12em !important;
}

@media (prefers-color-scheme: dark) {
	html:not(.fe-dark-active) body.page-id-4542 .entry-content .fe-service-card .fe-service-title-link {
		color: var(--fe-text) !important;
		text-decoration: underline !important;
		text-decoration-color: currentColor !important;
		text-decoration-thickness: .08em !important;
		text-underline-offset: .16em !important;
	}

	html:not(.fe-dark-active) body.page-id-4542 .entry-content .fe-service-card .fe-service-title-link:is(:hover, :focus-visible) {
		color: var(--fe-orange) !important;
		text-decoration-thickness: .12em !important;
	}
}

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

@media (prefers-color-scheme: dark) {
html:not(.fe-dark-active) {
	--fe-orange: #ed6900;
	--fe-focus: #ffb16f;
	--fe-focus-light: #8f3c00;
}

/* WCAG 2.2 AA: visible keyboard focus in every color mode. */
html:not(.fe-dark-active) :where(a[href], button, input, select, textarea, summary, iframe, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 3px solid var(--fe-focus-light) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 2px #fff !important;
	scroll-margin-block: 120px 96px;
}

/* The hamburger uses a color-and-scale focus cue, never a doubled stroke box. */
html:not(.fe-dark-active) body .ast-mobile-header-wrap .ast-button-wrap .menu-toggle.main-header-menu-toggle,
html:not(.fe-dark-active) body .ast-mobile-header-wrap .ast-button-wrap .menu-toggle.main-header-menu-toggle:focus,
html:not(.fe-dark-active) body .ast-mobile-header-wrap .ast-button-wrap .menu-toggle.main-header-menu-toggle:focus-visible,
html:not(.fe-dark-active) body .ast-mobile-popup-drawer .menu-toggle-close,
html:not(.fe-dark-active) body .ast-mobile-popup-drawer .menu-toggle-close:focus,
html:not(.fe-dark-active) body .ast-mobile-popup-drawer .menu-toggle-close:focus-visible {
	background: transparent !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
}

html:not(.fe-dark-active) .ast-mobile-header-wrap .menu-toggle .ast-mobile-svg,
html:not(.fe-dark-active) .ast-mobile-popup-drawer .menu-toggle-close .ast-mobile-svg {
	transform-origin: center;
	transition: color .16s ease, fill .16s ease, transform .16s ease;
}

html:not(.fe-dark-active) body .ast-mobile-header-wrap .ast-button-wrap .menu-toggle.main-header-menu-toggle:focus-visible,
html:not(.fe-dark-active) body .ast-mobile-popup-drawer .menu-toggle-close:focus-visible {
	color: #e36200 !important;
}

html:not(.fe-dark-active) body .ast-mobile-header-wrap .ast-button-wrap .menu-toggle.main-header-menu-toggle:focus-visible .ast-mobile-svg,
html:not(.fe-dark-active) body .ast-mobile-popup-drawer .menu-toggle-close:focus-visible .ast-mobile-svg {
	fill: #e36200 !important;
	transform: scale(1.08);
}

/* Links embedded in prose do not rely on orange alone. */
html:not(.fe-dark-active) :where(.entry-content p, .entry-content li, .entry-content dd, .entry-content figcaption) a:not(.wp-element-button):not(.uagb-buttons-repeater) {
	text-decoration: underline;
	text-decoration-thickness: .09em;
	text-underline-offset: .18em;
}

html:not(.fe-dark-active) :where(footer, #infinite-footer) a {
	text-decoration: none;
}

html:not(.fe-dark-active) :where(footer, #infinite-footer) a[href*="privacy"] {
	font-weight: 700;
}

html:not(.fe-dark-active) :where(footer, #infinite-footer) a:hover,
html:not(.fe-dark-active) :where(footer, #infinite-footer) a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: .09em;
	text-underline-offset: .18em;
}

html:not(.fe-dark-active) .blog-credits {
	color: #595959 !important;
}

/* Jetpack renders rating stars as text glyphs, so give them text-level contrast. */
html:not(.fe-dark-active) figure.wp-block-jetpack-rating-star span {
	color: #8a6200 !important;
}

/* Rating stars over the homepage photo need the bright treatment in light mode too. */
html:not(.fe-dark-active) .wp-block-cover figure.wp-block-jetpack-rating-star span {
	color: #f6bb06 !important;
}

html:not(.fe-dark-active) iframe:focus {
	outline: 3px solid var(--fe-focus-light) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 2px #fff !important;
}

html:not(.fe-dark-active) :where(object.wp-block-file__embed, #eere-laws-and-incentives-search):focus {
	outline: 3px solid var(--fe-focus-light) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 2px #fff !important;
	scroll-margin-block: 120px 96px;
}

/* Preserve third-party blue branding while keeping its CTA label readable. */
html:not(.fe-dark-active) body a.btn-code-example.w-button {
	color: #fff !important;
}

/* Bring the two legacy blue WPForms themes into the Fusting orange system. */
html:not(.fe-dark-active) body #wpforms-submit-1767,
html:not(.fe-dark-active) body #wpforms-form-5461 .wpforms-page-button {
	background: var(--fe-orange) !important;
	border-color: var(--fe-orange) !important;
	color: #16110d !important;
}

html:not(.fe-dark-active) body #wpforms-form-1767 .wpforms-uploader :where(.modern-title, .modern-title span, .modern-hint) {
	color: #666 !important;
}

/* This post's dark CTA inherited the site's generic dark text override. */
html:not(.fe-dark-active) body.postid-4046 .uagb-block-febtn002 {
	background: var(--fe-orange) !important;
	border-color: var(--fe-orange) !important;
}

html:not(.fe-dark-active) body.postid-4046 .uagb-block-febtn002 .uagb-button__link {
	color: #16110d !important;
}

/* Keep the contact cards as intentional light plates so official black marks remain intact. */
html:not(.fe-dark-active) body:is(.page-id-5770, .page-id-2370) :where(
	.uagb-block-75240aef,
	.uagb-block-792e4b3a,
	.uagb-block-2a4129ff,
	.uagb-block-4d39c22d,
	.uagb-block-fb20c444,
	.uagb-block-f026a055,
	.uagb-modal-popup-content,
	.uagb-modal-popup-wrap
) {
	background: #f3f3f3 !important;
	border-color: #c7c7c7 !important;
	color: #242424 !important;
	color-scheme: light;
}

html:not(.fe-dark-active) body:is(.page-id-5770, .page-id-2370) :where(
	.uagb-block-75240aef,
	.uagb-block-792e4b3a,
	.uagb-modal-popup-content
) :where(h1, h2, h3, h4, h5, h6, p, span, strong) {
	color: #242424 !important;
}

html:not(.fe-dark-active) body:is(.page-id-5770, .page-id-2370) :where(
	.uagb-block-75240aef,
	.uagb-block-792e4b3a,
	.uagb-modal-popup-content
) a:not(.wp-element-button) {
	color: #a94700 !important;
}

html:not(.fe-dark-active) body:is(.page-id-5770, .page-id-2370) :where(.uagb-icon-wrapper, .uagb-modal-trigger) svg path {
	fill: #a94700 !important;
}

html:not(.fe-dark-active) body:is(.page-id-5770, .page-id-2370) .uagb-modal-popup-close svg path {
	fill: #242424 !important;
}

/* Stephen's native-block contact card is an intentional dark plate in every mode. */
html:not(.fe-dark-active) body.page-id-2719 a.wp-block-button__link[href^="tel:"],
html:not(.fe-dark-active) body.page-id-2719 a.wp-block-button__link[href="https://fustingelectric.com/"] {
	color: #f7f3ee !important;
}

html:not(.fe-dark-active) body.page-id-2719 a[href*="linkedin.com/in/stephen-fusting"] {
	color: #ff9a47 !important;
}

@media (max-width: 600px) {
	html:not(.fe-dark-active) body:is(.page-id-5770, .page-id-2370) .uagb-modal-popup-wrap {
		width: calc(100vw - 32px) !important;
		max-width: calc(100vw - 32px) !important;
	}

	html:not(.fe-dark-active) body:is(.page-id-5770, .page-id-2370) .uagb-modal-popup-content,
	html:not(.fe-dark-active) body:is(.page-id-5770, .page-id-2370) .uagb-modal-popup-content img {
		max-width: 100% !important;
		height: auto;
	}

	html:not(.fe-dark-active) body:is(.page-id-5770, .page-id-2370) .uagb-modal-popup-close {
		top: 8px !important;
		right: 8px !important;
	}

	html:not(.fe-dark-active) body.page-id-2649 .wp-block-button__link {
		font-size: 18px !important;
		line-height: 1.25 !important;
		padding: 16px 22px !important;
	}

	html:not(.fe-dark-active) body.page-id-5239 .uagb-buttons__wrap {
		align-items: stretch !important;
		flex-direction: column !important;
	}

	html:not(.fe-dark-active) body.page-id-5239 .wp-block-uagb-buttons-child,
	html:not(.fe-dark-active) body.page-id-5239 .uagb-buttons-repeater {
		width: 100% !important;
	}
}

html:not(.fe-dark-active) :where(.current-menu-item, .current_page_item) > .menu-link,
html:not(.fe-dark-active) :where([aria-current="page"], [aria-current="true"]) {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: .25em;
}

/*
 * Keep the Services page in editable Gutenberg blocks while presenting the
 * four services as a compact 2-by-2 technical grid. The icon and title share
 * one row, so alignment does not require artificial empty space below titles.
 */
html:not(.fe-dark-active) .page-id-4542 .fe-service-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(36px, 5vw, 72px) !important;
	row-gap: clamp(48px, 6vw, 80px) !important;
	align-items: stretch !important;
}

html:not(.fe-dark-active) .page-id-4542 .fe-service-card {
	display: block !important;
	height: 100%;
	min-width: 0;
	margin: 0 !important;
}

html:not(.fe-dark-active) .page-id-4542 .fe-service-card > .wp-block-group {
	display: flex !important;
	flex-direction: column;
	gap: 24px !important;
	height: 100%;
	width: 100%;
}

html:not(.fe-dark-active) .page-id-4542 .fe-service-card > .wp-block-group > .wp-block-image,
html:not(.fe-dark-active) .page-id-4542 .fe-service-card > .wp-block-group > .wp-block-image img {
	display: block;
	width: 100%;
}

html:not(.fe-dark-active) .page-id-4542 .fe-service-card > .wp-block-group > .wp-block-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

html:not(.fe-dark-active) .page-id-4542 .fe-service-card > .wp-block-group > .wp-block-group {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 16px !important;
	flex: 1 1 auto;
	height: auto;
	width: 100%;
	text-align: center;
}

html:not(.fe-dark-active) .page-id-4542 .fe-service-card > .wp-block-group > .wp-block-group > .wp-block-image {
	margin: 0 !important;
}

html:not(.fe-dark-active) .page-id-4542 .fe-service-card > .wp-block-group > .wp-block-group > .wp-block-image img {
	display: block;
	width: 56px !important;
	height: 56px !important;
	object-fit: contain;
}

html:not(.fe-dark-active) .page-id-4542 .fe-service-card .is-service-name {
	min-height: 0;
	margin: 0 !important;
	text-align: center !important;
}

html:not(.fe-dark-active) .page-id-4542 .fe-service-card .fe-service-title-link {
	color: inherit !important;
	text-decoration: none !important;
}

html:not(.fe-dark-active) .page-id-4542 .fe-service-card .fe-service-title-link:is(:hover, :focus-visible) {
	color: var(--fe-orange) !important;
}

html:not(.fe-dark-active) .page-id-4542 .fe-service-card > .wp-block-group > .wp-block-group > p {
	margin: 0 !important;
	text-align: center !important;
	width: 100%;
}

html:not(.fe-dark-active) .page-id-4542 .fe-services-shared-cta {
	justify-content: center !important;
	margin-block: clamp(42px, 6vw, 72px) 0 !important;
}

html:not(.fe-dark-active) .page-id-4542 .fe-services-shared-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 14px 26px !important;
	font-size: 18px !important;
	line-height: 1.2;
}

/* Keep the homepage schematic CTA's native peach field visible even while Spectra rebuilds its generated CSS. */
html:not(.fe-dark-active) body.home .uagb-block-75b4a6b0 {
	background-color: #f2bf99 !important;
}

@media (max-width: 781px) {
	html:not(.fe-dark-active) .page-id-4542 .fe-service-grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 52px !important;
	}

	html:not(.fe-dark-active) .page-id-4542 .fe-service-card > .wp-block-group > .wp-block-group > .wp-block-image img {
		width: 48px !important;
		height: 48px !important;
	}
}

html:not(.fe-dark-active) .search-form .search-field {
	min-width: 0;
}

html:not(.fe-dark-active) .search-form .search-field::placeholder {
	color: #6b6b6b !important;
	opacity: 1;
}

html:not(.fe-dark-active) .search-form .search-submit {
	min-width: 72px;
	padding-inline: 14px !important;
	white-space: nowrap;
}

/* Astra emits an icon button and a labeled input for the 404 search form. */
html:not(.fe-dark-active) .error404 .search-form button.search-submit {
	display: none !important;
}

/* Keep the slider dot visually small while providing a 24px target. */
html:not(.fe-dark-active) .swiper-pagination .swiper-pagination-bullet {
	position: relative;
	width: 24px !important;
	height: 24px !important;
	margin-inline: 2px !important;
	background: transparent !important;
	opacity: 1 !important;
}

html:not(.fe-dark-active) .swiper-pagination .swiper-pagination-bullet::after {
	content: "";
	position: absolute;
	top: 8px;
	left: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #6b6b6b;
}

html:not(.fe-dark-active) .swiper-pagination .swiper-pagination-bullet-active::after {
	background: var(--fe-orange);
}

html:not(.fe-dark-active) .fe-ev-benefits {
	margin: 36px 0 0;
	padding-left: 1.35em;
}

html:not(.fe-dark-active) .fe-ev-benefits li {
	margin: 0 0 10px;
	padding-left: .3em;
}

html:not(.fe-dark-active) .fe-ev-benefits li::marker {
	color: var(--fe-orange);
}

/* Keep the Astra footer compact while preserving accessible link targets. */
html:not(.fe-dark-active) .site-primary-footer-wrap {
	padding-block: 14px !important;
}

html:not(.fe-dark-active) .site-primary-footer-wrap :where(.widget, p) {
	margin-block: 0 !important;
}

html:not(.fe-dark-active) .site-primary-footer-wrap :where(.site-footer-section, .ast-builder-layout-element) {
	min-height: 0 !important;
}

html:not(.fe-dark-active) .site-primary-footer-wrap :where(p, a, span) {
	line-height: 1.35 !important;
}

html:not(.fe-dark-active) {
	--fe-bg: #000;
	--fe-surface: #000;
	--fe-surface-2: #000;
	--fe-surface-3: #000;
	--fe-text: #f7f3ee;
	--fe-muted: #cbc2b9;
	--fe-border: #655b52;
	--fe-link: #ff9a47;
	--fe-link-hover: #ffc08c;
	--fe-control: #000;
	--fe-control-disabled: #3b3631;
	--fe-error: #ff8d83;
	--fe-success: #86d9a1;
	background: var(--fe-bg);
	color: var(--fe-text);
}

/* Foundations and classic Astra regions. */
html:not(.fe-dark-active) body,
html:not(.fe-dark-active) #page,
html:not(.fe-dark-active) .site,
html:not(.fe-dark-active) .site-content,
html:not(.fe-dark-active) .ast-container,
html:not(.fe-dark-active) .site-main,
html:not(.fe-dark-active) .entry-content,
html:not(.fe-dark-active) .ast-separate-container,
html:not(.fe-dark-active) .ast-plain-container,
html:not(.fe-dark-active) .ast-page-builder-template {
	background-color: var(--fe-bg) !important;
	color: var(--fe-text) !important;
}

html:not(.fe-dark-active) .site-header,
html:not(.fe-dark-active) .ast-primary-header-bar,
html:not(.fe-dark-active) .ast-mobile-header-wrap,
html:not(.fe-dark-active) .ast-mobile-popup-inner,
html:not(.fe-dark-active) .ast-mobile-popup-drawer,
html:not(.fe-dark-active) .ast-mobile-popup-content,
html:not(.fe-dark-active) .site-footer,
html:not(.fe-dark-active) .site-primary-footer-wrap,
html:not(.fe-dark-active) .site-below-footer-wrap {
	background-color: #000 !important;
	border-color: var(--fe-border) !important;
	color: var(--fe-text) !important;
}

html:not(.fe-dark-active) :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, label, legend, address, summary),
html:not(.fe-dark-active) .entry-title,
html:not(.fe-dark-active) .page-title,
html:not(.fe-dark-active) .wp-block-post-title,
html:not(.fe-dark-active) .wp-block-post-excerpt,
html:not(.fe-dark-active) .ast-archive-description,
html:not(.fe-dark-active) .site-footer :where(p, li, span) {
	color: var(--fe-text) !important;
}

html:not(.fe-dark-active) :where(.ast-meta, .entry-meta, .wp-block-post-date, .wp-block-post-author, .wp-block-post-terms, .wpforms-field-sublabel, .wpforms-field-description, .wpforms-field-limit-text) {
	color: var(--fe-muted) !important;
}

html:not(.fe-dark-active) :where(.uagb-icon-list__label, .uagb-icon-list__label strong, .wpforms-image-choices-label, .fe-card-sub, .fe-placeholder, .uagb-tm__company) {
	color: var(--fe-text) !important;
}

html:not(.fe-dark-active) :where(.uagb-tm__desc, .uagb-tm__author-name, .uagb-testimonial-details) {
	color: var(--fe-text) !important;
}

html:not(.fe-dark-active) .blog-credits {
	color: var(--fe-muted) !important;
}

html:not(.fe-dark-active) .search-form .search-field::placeholder {
	color: var(--fe-muted) !important;
}

html:not(.fe-dark-active) .uagb-faq-icon-wrap svg {
	fill: var(--fe-orange) !important;
	color: var(--fe-orange) !important;
}

html:not(.fe-dark-active) body.page-id-1399 svg[role="img"][aria-label] :is(line, circle) {
	stroke: var(--fe-text) !important;
}

html:not(.fe-dark-active) body.page-id-1399 svg[role="img"][aria-label] + div[style*="color:#666"] {
	color: var(--fe-muted) !important;
}

html:not(.fe-dark-active) body.page-id-1402 :where(.fe-card, .fe-form-area) {
	background: var(--fe-surface) !important;
	border-color: var(--fe-border) !important;
}

html:not(.fe-dark-active) body.page-id-1402 .fe-card.active {
	background: var(--fe-surface-2) !important;
}

html:not(.fe-dark-active) body.page-id-1402 .fe-card-label {
	color: var(--fe-text) !important;
}

html:not(.fe-dark-active) body.page-id-1402 .fe-card::before {
	border-color: var(--fe-muted) !important;
}

html:not(.fe-dark-active) figure.wp-block-jetpack-rating-star span {
	color: #f6bb06 !important;
}

html:not(.fe-dark-active) .swiper-pagination .swiper-pagination-bullet::after {
	background: #b9afa6;
}

html:not(.fe-dark-active) .swiper-pagination .swiper-pagination-bullet-active::after {
	background: var(--fe-orange);
}

html:not(.fe-dark-active) :where(a:not(.wp-element-button):not(.uagb-buttons-repeater):not(.menu-link):not(.fe-card)) {
	color: var(--fe-link) !important;
}

html:not(.fe-dark-active) :where(a:not(.wp-element-button):not(.uagb-buttons-repeater):not(.menu-link):not(.fe-card)):hover {
	color: var(--fe-link-hover) !important;
}

html:not(.fe-dark-active) :where(.entry-title a, .wp-block-post-title a, .ast-archive-post .entry-title a, .search .entry-title a) {
	color: var(--fe-link) !important;
}

html:not(.fe-dark-active) :where(p, li, figcaption, .wp-element-caption).has-text-color,
html:not(.fe-dark-active) :where(.wp-block-paragraph, .wp-element-caption, figcaption) {
	color: var(--fe-text) !important;
}

html:not(.fe-dark-active) :where(p, li, figcaption, .wp-element-caption).has-text-color a,
html:not(.fe-dark-active) :where(.wp-block-paragraph, .wp-element-caption, figcaption) a {
	color: var(--fe-link) !important;
}

html:not(.fe-dark-active) :where(.main-header-menu, .main-header-menu .sub-menu, .ast-header-break-point .main-header-menu, .ast-builder-menu-mobile .main-navigation) {
	background-color: #000 !important;
}

html:not(.fe-dark-active) :where(.main-header-menu .menu-link, .ast-builder-menu-mobile .menu-link, .site-footer a) {
	color: var(--fe-text) !important;
}

html:not(.fe-dark-active) :where(.main-header-menu .menu-link, .ast-builder-menu-mobile .menu-link, .site-footer a):hover,
html:not(.fe-dark-active) :where(.current-menu-item, .current_page_item) > .menu-link {
	color: var(--fe-link-hover) !important;
}

/* Astra's social icons have an independent black SVG fill. */
html:not(.fe-dark-active) .site-footer .ast-builder-social-element svg {
	fill: var(--fe-text) !important;
}

html:not(.fe-dark-active) .site-footer .ast-builder-social-element:hover svg {
	fill: var(--fe-link-hover) !important;
}

html:not(.fe-dark-active) #infinite-footer .container {
	background: #000 !important;
	border-color: var(--fe-border) !important;
	color: var(--fe-muted) !important;
}

html:not(.fe-dark-active) #infinite-footer .container a {
	color: var(--fe-link) !important;
}

/* WordPress, Spectra, archive, and card surfaces. */
html:not(.fe-dark-active) :where(
	.wp-block-uagb-container,
	.wp-block-uagb-container.uagb-is-root-container,
	.wp-block-group.has-background,
	.wp-block-columns.has-background,
	.wp-block-column.has-background,
	.wp-block-media-text.has-background,
	.wp-block-query,
	.wp-block-post,
	.uagb-container-inner-blocks-wrap,
	.uagb-infobox__content-wrap,
	.uagb-faq-item,
	.uagb-faq-questions,
	.uagb-faq-content,
	.ast-article-post,
	.ast-article-single,
	.search .ast-row,
	.error404 .page-content,
	.widget,
	.comments-area,
	.navigation.post-navigation,
	.wp-block-latest-posts__list
) {
	background-color: var(--fe-surface) !important;
	border-color: var(--fe-border) !important;
	color: var(--fe-text) !important;
}

html:not(.fe-dark-active) header :where(.widget, .widget_block, .header-widget-area) {
	background: transparent !important;
	border-color: transparent !important;
}

html:not(.fe-dark-active) body :where(
	button,
	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	.wp-element-button,
	.wp-block-button__link,
	.uagb-buttons-repeater,
	.ast-button,
	.button,
	.sbi_follow_btn a
) {
	color: #16110d !important;
}

html:not(.fe-dark-active) body .wp-block-button .wp-block-button__link.wp-element-button,
html:not(.fe-dark-active) body .wp-block-button__link.has-text-color,
html:not(.fe-dark-active) body a.uagb-buttons-repeater.wp-block-button__link,
html:not(.fe-dark-active) body .uagb-buttons-repeater .uagb-button__link,
html:not(.fe-dark-active) body .wp-block-uagb-buttons-child .uagb-button__wrapper .uagb-buttons-repeater .uagb-button__link,
html:not(.fe-dark-active) body .sbi_follow_btn a,
html:not(.fe-dark-active) body #sb_instagram .sbi_follow_btn a span,
html:not(.fe-dark-active) body .wpforms-page-button,
html:not(.fe-dark-active) body .wpforms-submit {
	color: #16110d !important;
}

html:not(.fe-dark-active) body .wp-block-button__link.has-ast-global-color-3-background-color {
	background: var(--fe-orange) !important;
	border-color: var(--fe-orange) !important;
	color: #16110d !important;
}

html:not(.fe-dark-active) iframe:focus {
	outline-color: var(--fe-focus) !important;
	box-shadow: 0 0 0 2px var(--fe-bg) !important;
}

html:not(.fe-dark-active) :where(object.wp-block-file__embed, #eere-laws-and-incentives-search):focus {
	outline-color: var(--fe-focus) !important;
	box-shadow: 0 0 0 2px var(--fe-bg) !important;
}

html:not(.fe-dark-active) .entry-content > .wp-block-uagb-container.uagb-is-root-container,
html:not(.fe-dark-active) .entry-content > .wp-block-group.alignfull,
html:not(.fe-dark-active) .entry-content > .wp-block-cover.alignfull {
	background-color: var(--fe-bg) !important;
}

html:not(.fe-dark-active) :where(.has-white-background-color, .has-base-background-color, .has-ast-global-color-5-background-color, .has-ast-global-color-4-background-color) {
	background-color: var(--fe-surface) !important;
}

/* Keep ordinary layout groups on the single black canvas instead of stacking charcoal boxes. */
html:not(.fe-dark-active) :where(
	.entry-content .wp-block-uagb-container,
	.entry-content .uagb-container-inner-blocks-wrap,
	.entry-content .wp-block-group,
	.entry-content .wp-block-columns,
	.entry-content .wp-block-column,
	.site-footer .widget,
	.site-footer .wp-block-jetpack-contact-info,
	#sb_instagram,
	#sb_instagram .sb_instagram_header
) {
	background-color: transparent !important;
	box-shadow: none !important;
}

/* The EV split layout belongs directly on the black page canvas. */
html:not(.fe-dark-active) body.home :where(.uagb-block-f353d793, .uagb-block-49961fae, .uagb-block-f353d793 > .uagb-container-inner-blocks-wrap) {
	background: transparent !important;
	border-color: transparent !important;
}

/* Preserve the native schematic pattern while darkening its peach field. */
html:not(.fe-dark-active) body.home .uagb-block-75b4a6b0 {
	background-color: #6f4732 !important;
}

html:not(.fe-dark-active) body.home .uagb-block-75b4a6b0 > .uagb-container-inner-blocks-wrap {
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

html:not(.fe-dark-active) body.home .uagb-block-75b4a6b0 :where(h2, p) {
	color: var(--fe-text) !important;
}

/* Maintain clear primary and secondary action hierarchy in the homepage CTA. */
html:not(.fe-dark-active) body.home .uagb-block-75b4a6b0 .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link {
	color: var(--fe-text) !important;
	background: #000 !important;
	border: 2px solid var(--fe-text) !important;
}

html:not(.fe-dark-active) :where(.wp-block-separator, hr) {
	border-color: var(--fe-border) !important;
	color: var(--fe-border) !important;
	opacity: 1;
}

/* The credential strip needs no decorative divider. */
html:not(.fe-dark-active) body.home .uagb-block-a5071a24 + .wp-block-separator {
	display: none !important;
}

html:not(.fe-dark-active) :where(.wp-block-cover, .wp-block-cover-image) {
	background-color: var(--fe-surface-2);
}

html:not(.fe-dark-active) :where(.wp-block-cover__background, .wp-block-cover__gradient-background) {
	opacity: .58 !important;
}

/* The EV make chooser uses monochrome marks. Convert their original black art
 * to white on the black canvas. Do not use brand-orange as a substitute for a
 * logo. Colored photographs and marks outside this control retain their files. */
html:not(.fe-dark-active) body.page-id-4901 :is(
	#wpforms-5673-field_406-container,
	#wpforms-5673-field_348-container
) .wpforms-image-choices-image img {
	filter: brightness(0) invert(1) !important;
}

html:not(.fe-dark-active) body #wpforms-form-1767 .wpforms-uploader :where(.modern-title, .modern-title span, .modern-hint) {
	color: var(--fe-muted) !important;
}

html:not(.fe-dark-active) body #fe-pg2 .pg-opt {
	color: var(--fe-muted) !important;
}

html:not(.fe-dark-active) body .jobber-flash--error,
html:not(.fe-dark-active) body .jobber-flash--error :where(p, strong, span) {
	color: #3b1612 !important;
}

/* Keep photos and official marks intact. Marks receive a controlled light plate. */
html:not(.fe-dark-active) :where(img, picture, video) {
	filter: none !important;
}

html:not(.fe-dark-active) :where(
	img[alt*="Tesla Wall Connector Certified"],
	img[alt*="Master Electrician License"],
	img[alt*="Fully Insured"],
	img[alt*="Google rating"],
	img[alt*="Google Rating"]
) {
	background: #fff !important;
	box-shadow: 0 0 0 8px #fff;
}

/* The homepage EV panel uses Tesla's official white SVG directly on the black canvas. */
html:not(.fe-dark-active) body.home .uagb-block-49961fae img[alt*="Tesla Wall Connector Certified"] {
	content: url('/wp-content/uploads/2026/08/fusting-tesla-wall-connector-certified-white-61423592dc03.svg') !important;
	width: 300px !important;
	max-width: 100% !important;
	height: 55px !important;
	object-fit: contain !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* Preserve every official mark in the homepage credential carousel as drawn. */
html:not(.fe-dark-active) body.home .uagb-block-a5071a24,
html:not(.fe-dark-active) body.home .uagb-block-a5071a24 :where(.slick-list, .slick-track) {
	background: #fff !important;
}

html:not(.fe-dark-active) body.home .uagb-block-a5071a24 {
	border: 0 !important;
	padding-block: 12px !important;
}

/* The orange schematic drawings remain technical line art on dark plates. */
html:not(.fe-dark-active) :where(img[alt$="circuit symbol"], img[alt$="breaker symbol"], img[alt$="lamp symbol"]) {
	filter: none !important;
	isolation: isolate;
}

/* Buttons and interaction states. */
html:not(.fe-dark-active) :where(
	button,
	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	.wp-element-button,
	.wp-block-button__link,
	.uagb-buttons-repeater,
	.ast-button,
	.button
) {
	background: var(--fe-orange) !important;
	border: 2px solid var(--fe-orange) !important;
	color: #16110d !important;
	box-shadow: none;
	text-decoration: none;
}

/* Preserve Astra's compact mobile header controls instead of treating them as CTAs. */
html:not(.fe-dark-active) body :where(
	.menu-toggle.main-header-menu-toggle,
	.ast-button-wrap .menu-toggle
) {
	background: transparent !important;
	border: 0 !important;
	color: var(--fe-text) !important;
}

html:not(.fe-dark-active) body header a[aria-label="Call Fusting Electric"] {
	border: 10px solid var(--fe-orange) !important;
}

html:not(.fe-dark-active) :where(
	button,
	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	.wp-element-button,
	.wp-block-button__link,
	.uagb-buttons-repeater,
	.ast-button,
	.button
):hover {
	background: #ff8a2d !important;
	border-color: #ff8a2d !important;
	color: #120d09 !important;
}

html:not(.fe-dark-active) :where(button, input, select, textarea, a, summary, iframe, [tabindex]):focus-visible {
	outline: 3px solid var(--fe-focus) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 2px var(--fe-bg) !important;
}

html:not(.fe-dark-active) :where(button, input[type="button"], input[type="submit"], .wp-element-button, .button):disabled,
html:not(.fe-dark-active) :where(button, input[type="button"], input[type="submit"], .wp-element-button, .button)[aria-disabled="true"] {
	background: var(--fe-control-disabled) !important;
	border-color: var(--fe-border) !important;
	color: #aaa19a !important;
	cursor: not-allowed;
	opacity: 1;
}

/* Native controls and WPForms. */
html:not(.fe-dark-active) :where(
	input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
	select,
	textarea,
	.wpforms-form input:not([type="submit"]):not([type="button"]),
	.wpforms-form select,
	.wpforms-form textarea,
	.wpforms-field-file-upload .dz-message,
	.wpforms-uploader
) {
	background-color: var(--fe-control) !important;
	border: 1px solid var(--fe-border) !important;
	color: var(--fe-text) !important;
	-webkit-text-fill-color: var(--fe-text) !important;
	caret-color: var(--fe-text);
}

html:not(.fe-dark-active) :where(input, textarea)::placeholder {
	color: #b9afa6 !important;
	opacity: 1;
}

html:not(.fe-dark-active) :where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--fe-orange);
}

html:not(.fe-dark-active) :where(label.wpforms-error, .wpforms-required-label, .wpforms-field-required > label, .wpforms-error-container, .wpforms-field-description.wpforms-error) {
	color: var(--fe-error) !important;
}

/* WPForms assigns .wpforms-error to invalid inputs too. The entered value is
 * content, not the error indicator, and stays readable while the border and
 * message carry error status. */
html:not(.fe-dark-active) .wpforms-form :is(input, textarea, select).wpforms-error,
html:not(.fe-dark-active) .wpforms-form :is(input, textarea, select).wpforms-error:focus {
	color: var(--fe-text) !important;
	-webkit-text-fill-color: var(--fe-text) !important;
	border-color: var(--fe-error) !important;
}

html:not(.fe-dark-active) :where(.wpforms-confirmation-container, .wpforms-confirmation-container-full, .wpforms-confirmation-scroll) {
	background: #173321 !important;
	border-color: #397c50 !important;
	color: #eaf8ef !important;
}

html:not(.fe-dark-active) :where(.wpforms-error-container, .wpforms-field-container .wpforms-error-container) {
	background: #3c1d1a !important;
	border-color: #9a4c43 !important;
	color: #ffe9e6 !important;
}

html:not(.fe-dark-active) :where(.iti__country-list, .ui-autocomplete, .pac-container, .choices__list, .choices__inner, .flatpickr-calendar) {
	background: var(--fe-surface-2) !important;
	border-color: var(--fe-border) !important;
	color: var(--fe-text) !important;
}

/* Tables, code, quotations, pagination, and common notices. */
html:not(.fe-dark-active) :where(table, th, td) {
	background: var(--fe-surface) !important;
	border-color: var(--fe-border) !important;
	color: var(--fe-text) !important;
}

html:not(.fe-dark-active) :where(thead th, tbody tr:nth-child(even) td) {
	background: var(--fe-surface-2) !important;
}

html:not(.fe-dark-active) :where(pre, code, kbd, samp) {
	background: #000 !important;
	border-color: var(--fe-border) !important;
	color: #ffe0c7 !important;
}

html:not(.fe-dark-active) :where(blockquote, .wp-block-quote, .wp-block-pullquote) {
	background: var(--fe-surface-2) !important;
	border-color: var(--fe-orange) !important;
	color: var(--fe-text) !important;
}

html:not(.fe-dark-active) :where(.page-numbers, .nav-links a, .post-page-numbers) {
	background: var(--fe-surface-2) !important;
	border-color: var(--fe-border) !important;
	color: var(--fe-text) !important;
}

html:not(.fe-dark-active) :where(.page-numbers.current, .post-page-numbers.current) {
	background: var(--fe-orange) !important;
	color: #16110d !important;
}

html:not(.fe-dark-active) :where(.notice, .wp-block-notice, .uagb-notice, .components-notice) {
	background: var(--fe-surface-2) !important;
	border-color: var(--fe-border) !important;
	color: var(--fe-text) !important;
}

/* CookieYes and modal surfaces retain every consent action. */
html:not(.fe-dark-active) :where(.cky-consent-bar, .cky-modal, .cky-preference-center, .cky-audit-table, .cky-footer-wrapper, .cky-accordion-wrapper) {
	background: var(--fe-surface) !important;
	border-color: var(--fe-border) !important;
	color: var(--fe-text) !important;
}

html:not(.fe-dark-active) :where(.cky-title, .cky-notice-des, .cky-notice-des p, .cky-preference-title, .cky-preference-content-wrapper, .cky-accordion-header-des, .cky-accordion-btn) {
	color: var(--fe-text) !important;
}

html:not(.fe-dark-active) :where(.cky-btn, .cky-btn-customize, .cky-btn-reject, .cky-btn-accept) {
	border-color: var(--fe-orange) !important;
}

/* Cross-origin embeds cannot be recolored internally. Frame them coherently. */
html:not(.fe-dark-active) :where(iframe, .wp-block-embed__wrapper, .wp-block-html:has(iframe)) {
	background: var(--fe-surface) !important;
	border-color: var(--fe-border) !important;
	color-scheme: light;
}

/* Search and 404 affordances. */
html:not(.fe-dark-active) :where(.ast-search-menu-icon .search-form, .search-form, .wp-block-search__inside-wrapper) {
	background: var(--fe-surface-2) !important;
	border-color: var(--fe-border) !important;
}

/* Service names are native heading links. Keep them unmistakably clickable. */
html:not(.fe-dark-active) body.page-id-4542 .entry-content .fe-service-card .fe-service-title-link {
	color: var(--fe-text) !important;
	text-decoration: underline !important;
	text-decoration-color: currentColor !important;
	text-decoration-thickness: .08em !important;
	text-underline-offset: .16em !important;
}

html:not(.fe-dark-active) body.page-id-4542 .entry-content .fe-service-card .fe-service-title-link:is(:hover, :focus-visible) {
	color: var(--fe-orange) !important;
	text-decoration-thickness: .12em !important;
}

@media (prefers-reduced-motion: reduce) {
	html:not(.fe-dark-active) *,
	html:not(.fe-dark-active) *::before,
	html:not(.fe-dark-active) *::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}
}
/* FUSTING STAGING DARK MODE END */


/* <<< fusting:darkmode-contrast-layer <<< */
/* >>> fusting:evpc-intro-copy-visible >>> */
/* EV Charger Quote form (5673) intro copy field (id 481) must stay visible
   even before the property-confirmation gate opens — the plugin's JS hides
   any field not on its explicit allowlist via .fusting-evpc-downstream. */
#wpforms-5673-field_481-container.fusting-evpc-downstream {
	display: block !important;
}
/* <<< fusting:evpc-intro-copy-visible <<< */

/* >>> fusting:orange-button-text-a11y >>> */
/* WCAG 2.2 AA: the "Default w/orange" WPForms theme sets buttonTextColor
   #ffffff on #e36200 (3.49:1, fails AA for normal text). Each form embeds
   its own copy of the theme JSON (not a live shared reference — editing
   one form's theme via the API does not update the others), and a full
   round-trip write via wp_wpforms_update_form is unsafe for these two
   forms (their `fields` payload is too large and gets silently truncated
   on read, so a full-replace write risks dropping fields). Overriding at
   render via custom CSS, same pattern as the pre-existing
   #wpforms-submit-1767 rule below, is the safe fix. Form 1767 itself is
   already covered by that pre-existing rule (#16110d, 5.91:1, passes) so
   it is not repeated here. */
body #wpforms-submit-5673,
body #wpforms-form-5673 .wpforms-page-button,
body #wpforms-submit-6825,
body #wpforms-form-6825 .wpforms-page-button {
	color: #000000 !important;
}
/* <<< fusting:orange-button-text-a11y <<< */

/* >>> fusting:orange-unify-e36200 >>> */
/* STILL LIVE, verified 2026-09-01: this block's own selectors match 8 elements across eight live pages. The text below describes what it REPLACED, not this block. Do not delete it on the strength of the word retired -- re-run the match first. */
/* WCAG unification: canonical brand orange is #e36200 (confirmed by Ceanne, 2026-08-18). The
   --fe-orange token (consumed by dark-mode buttons/borders/link-hover/icons) and the light-mode
   .search-submit button were both hardcoded to the retired shade #ed6900. This block redefines
   --fe-orange at the SAME selector specificity (:root) later in the cascade, which wins by
   source order per CSS custom-property cascade rules (no !important needed) -- so every existing
   var(--fe-orange) consumer picks up #e36200 without touching their original declarations. The
   .search-submit override below matches the ORIGINAL rule's exact selector + media scope so it
   wins by the same later-source-order rule, not a specificity fight. Verified rendered contrast:
   #16110d text on #e36200 = 5.37:1 (passes AA 4.5:1; was 5.91:1 on #ed6900). --fe-orange as
   link/icon text on dark backgrounds stays >=6.0:1. --fe-orange as hover-link text on white
   (.fe-service-title-link:hover) was ALREADY failing AA before this change (3.17:1) and is not
   made worse (3.49:1 after) -- pre-existing, out of scope of this unification. */
:root {
	--fe-orange: #e36200;
}
@media (prefers-color-scheme: dark) {
	:root {
		--fe-orange: #e36200;
	}
}
@media not (prefers-color-scheme: dark) {
	html:not(.fe-dark-active) body .search-submit {
		background: #e36200 !important;
		border-color: #e36200 !important;
	}
}
/* <<< fusting:orange-unify-e36200 <<< */

/* >>> fusting:cookie-revisit-mobile-offset >>> */
/* The CookieYes "revisit consent" widget is position:fixed, bottom-LEFT, z-index 999999 — which on
   a phone is exactly where the WPForms Next/Submit button sits. Measured live at 375px on
   /dedicated-circuit-estimate-request/ (2026-08-21): widget occupies x 15-60 / 45x45px, the Next
   button spans x 26-116, so the widget covered its left third and swallowed the tap. It is fixed,
   so it collides with whatever scrolls under it, not just Next. Nothing else occupies the
   bottom-RIGHT on these pages, so move it there on narrow viewports only — still fully reachable,
   just out of the form's way. Desktop is untouched (the button is nowhere near the corner there). */
@media (max-width: 782px) {
  .cky-btn-revisit-wrapper.cky-revisit-bottom-left {
    left: auto !important;
    right: 15px !important;
  }
}
/* <<< fusting:cookie-revisit-mobile-offset <<< */

/* >>> fusting:fe-cert-logos >>> */
/* Certification logo strip on the homepage.
   The logos are SVGs with wildly different intrinsic sizes (Leviton is 432x432,
   Enphase is 160x27.7) and several carry no width/height at all, so they either
   render enormous or collapse. WordPress strips inline style= off block images,
   so the sizing has to live here. Normalise every badge to one optical height.
   UPDATE 2026-08-25: the fixed per-badge heights below were fighting the trust-
   bar worker's new area-matched inline width/height attributes (SPAN 60px,
   Leviton 56px, Annapolis Moms 56px, Tesla 130px, Enphase 79px, EcoFlow
   100px) - an external stylesheet rule beats a plain HTML width/height
   attribute even without !important, so this file's height:44px (etc.) was
   winning and forcing wide wordmarks to render enormous next to the square
   badges. Removed; only layout (not sizing) rules remain here. */
.fe-cert-logos {
	align-items: center;
	row-gap: 22px;
}

.fe-cert-logos figure.wp-block-image {
	margin: 0;
	display: flex;
	align-items: center;
}

@media (max-width: 767px) {
	.fe-cert-logos {
		gap: 20px 26px;
	}
}
/* <<< fusting:fe-cert-logos <<< */

/* >>> fusting:fe-service-thumbs >>> */
/* Service card thumbnails on the homepage.
   WordPress strips inline style= off block images, so the crop and radius
   have to live here rather than on the img tag. */
.fe-service-thumb {
	margin: 0 0 16px;
}

.fe-service-thumb img {
	width: 100%;
	height: 150px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

@media (max-width: 781px) {
	.fe-service-thumb img {
		height: 190px;
	}
}
/* <<< fusting:fe-service-thumbs <<< */

/* >>> fusting:fe-homepage-v2 >>> */
/* ---- Homepage v2 hero ---------------------------------------------------
   Wide hero, caption overlaid on the family photo, rating card in-hero.
   NOTE: WordPress strips inline style= off block images, so image sizing
   and the caption overlay have to live here rather than on the markup. */

.fe-hero .fe-hero-cols {
	max-width: 1320px;
	margin-inline: auto;
	gap: 56px;
}

.fe-hero .fe-eyebrow {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	margin: 0 0 14px;
}

.fe-hero .fe-hero-h1 {
	font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.6rem);
	line-height: 1.07;
	font-weight: 700;
	margin: 0;
}

.fe-hero .fe-hero-accent {
	color: #f0a06a;
	display: block;
}

.fe-hero .fe-hero-sub {
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
	line-height: 1.6;
	margin: 20px 0 0;
	max-width: 34em;
}

.fe-hero .fe-hero-flag {
	font-size: 1rem;
	font-weight: 600;
	margin: 14px 0 0;
}

/* Secondary CTA: near-black with a grey outline so it recedes behind the
   orange primary instead of competing with it. */
.fe-hero .fe-btn-ghost .wp-block-button__link {
	background-color: #141414;
	border: 1px solid #4a4a4a;
}

.fe-hero .fe-btn-ghost .wp-block-button__link:hover,
.fe-hero .fe-btn-ghost .wp-block-button__link:focus {
}

/* Rating + licence proof card */
.fe-hero .fe-proof {
	margin-top: 34px;
	gap: 0;
	background: #161616;
	border: 1px solid #2b2b2b;
	border-radius: 12px;
	padding: 16px 20px;
	align-items: center;
}

.fe-hero .fe-proof-rating {
	gap: 12px;
	align-items: center;
}

.fe-hero .fe-proof-score {
	font-size: 2.25rem;
	font-weight: 700;
	color: #ffffff;
	margin: 0;
	line-height: 1;
}

.fe-hero .fe-proof-detail,
.fe-hero .fe-proof-licence {
	margin: 0;
}

.fe-hero .fe-proof-stars {
	color: #f5a623;
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	margin: 0;
	line-height: 1.2;
}

.fe-hero .fe-proof-sub {
	color: #9a9a9a;
	font-size: 0.8125rem;
	margin: 3px 0 0;
	line-height: 1.4;
}

.fe-hero .fe-proof-licence {
	border-left: 1px solid #2b2b2b;
	padding-left: 20px;
}

.fe-hero .fe-proof-licence-num {
	color: #ffffff;
	font-size: 0.9375rem;
	font-weight: 700;
	margin: 0;
	line-height: 1.2;
}

/* Family photo with the caption sitting on the image */
.fe-hero .fe-hero-photo {
	position: relative;
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
}

.fe-hero .fe-hero-photo img {
	display: block;
	width: 100%;
	height: 560px;
	object-fit: cover;
	border-radius: 14px;
}

.fe-hero .fe-hero-photo figcaption {
	position: absolute;
	inset: auto 0 0 0;
	margin: 0;
	padding: 56px 24px 20px;
	color: #ffffff;
	font-size: 0.9375rem;
	text-align: left;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));
}

.fe-hero .fe-hero-photo figcaption strong {
	font-size: 1.0625rem;
	font-weight: 700;
}

/* ---- Step numbers as the Fusting circuit mark ---------------------------
   Mirrors the logo: a ring with a lead running out each side. */
.fe-step-num {
	position: relative;
	width: 58px;
	height: 58px;
	margin: 0 0 18px 20px;
	border: 2px solid #e36200;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
}

.fe-step-num::before,
.fe-step-num::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 18px;
	height: 2px;
	background: #e36200;
	transform: translateY(-50%);
}

.fe-step-num::before {
	right: 100%;
}

.fe-step-num::after {
	left: 100%;
}

@media (max-width: 781px) {
	.fe-hero .fe-hero-cols {
	}

	.fe-hero .fe-hero-photo img {
	}

	.fe-hero .fe-proof {
	}

	.fe-hero .fe-proof-licence {
	}

	.fe-hero .fe-proof-rating {
		padding-right: 0;
	}
}
/* <<< fusting:fe-homepage-v2 <<< */

/* >>> fusting:fe-homepage-v2-fixes >>> */
/* Ghost CTA. The label was painting rgb(22,17,13) on a rgb(20,20,20) pill even
   though both the inline style and an !important rule set white - the giveaway
   is that -webkit-text-fill-color wins over color at paint time regardless of
   specificity, and it is used elsewhere in this stylesheet. Set both. */
.fe-hero .fe-btn-ghost .wp-block-button__link,
.fe-hero .fe-btn-ghost .wp-block-button__link:visited {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	background-color: #141414 !important;
	border: 1px solid #4a4a4a;
}

.fe-hero .fe-btn-ghost .wp-block-button__link:hover,
.fe-hero .fe-btn-ghost .wp-block-button__link:focus {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	background-color: #1f1f1f !important;
	border-color: #7a7a7a;
}

/* Circuit symbol dividers deliberately run their leads out past their own 96px
   box to the viewport edge. In a constrained page that widened the document by
   ~330px, which read as the whole site squashing left. Clip at the content
   wrapper so the leads still reach the edge without growing the page. */
.entry-content:has(.fe-hero) {
	overflow-x: clip;
}

.fe-circuit-symbol {
	max-width: 100%;
}
/* <<< fusting:fe-homepage-v2-fixes <<< */

/* >>> fusting:fe-homepage-v2-sections >>> */
/* ---- Shared section headings -------------------------------------------
   spectra/container lays children out as flex items, so a heading shrinks to
   its own text width and text-align has nothing to centre inside. Give the
   block full width first, then centre. */
.fe-sec-h2 {
	width: 100%;
	text-align: center;
	line-height: 1.2;
	margin: 0;
}

.fe-sec-intro {
	width: 100%;
	text-align: center;
	margin: 14px auto 0;
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* ---- Reviews ------------------------------------------------------------ */
.fe-reviews .fe-review-row {
	max-width: 1180px;
	margin-inline: auto;
	width: 100%;
}

.fe-reviews .fe-review {
	background: #161616;
	border: 1px solid #262626;
	border-radius: 12px;
	padding: 24px 22px;
}

.fe-reviews .fe-review-stars {
	color: #f5a623;
	letter-spacing: 0.09em;
	font-size: 0.9375rem;
	margin: 0 0 10px;
}

.fe-reviews .fe-review-text {
	color: #ededed;
	font-size: 1rem;
	line-height: 1.55;
	margin: 0;
}

.fe-reviews .fe-review-who {
	color: #8f8f8f;
	font-size: 0.8125rem;
	margin: 14px 0 0;
}

.fe-reviews .fe-review-who a {
	color: #f0a06a;
	font-weight: 700;
}

.fe-reviews .fe-review-cta {
	background: #e36200;
	border-color: #e36200;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.fe-reviews .fe-review-cta .fe-review-score {
	color: #ffffff;
	font-size: 2.75rem;
	font-weight: 700;
	line-height: 1;
	margin: 0;
}

.fe-reviews .fe-review-cta .fe-review-text,
.fe-reviews .fe-review-cta .fe-review-who {
	color: #ffffff;
}

.fe-reviews .fe-review-cta .fe-review-who a {
	color: #ffffff;
	text-decoration: underline;
}

/* ---- Service area ------------------------------------------------------- */
.fe-towns {
	width: 100%;
	text-align: center;
	max-width: 900px;
	margin: 30px auto 0;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 2;
}

.fe-area-note,
.fe-area-local {
	width: 100%;
	text-align: center;
	max-width: 780px;
	margin: 20px auto 0;
	line-height: 1.6;
}

.fe-area-local {
	color: #e36200;
	font-weight: 700;
}

/* ---- FAQ ---------------------------------------------------------------- */
.fe-faq-list {
	width: 100%;
	margin-top: 36px;
}

.fe-faq .fe-faq-item {
	background: #ffffff;
	border: 1px solid #e4e4e4;
	border-radius: 10px;
	padding: 4px 20px;
	margin-bottom: 12px;
}

.fe-faq .fe-faq-item summary {
	font-weight: 700;
	font-size: 1.0625rem;
	padding: 16px 0;
	cursor: pointer;
	list-style-position: outside;
}

.fe-faq .fe-faq-item summary::marker {
	color: #e36200;
}

.fe-faq .fe-faq-item p {
	margin: 0 0 18px;
	line-height: 1.6;
}

.fe-faq-all {
	width: 100%;
	text-align: center;
	font-weight: 700;
}

/* ---- Final CTA ---------------------------------------------------------- */
.fe-cta .fe-cta-buttons {
	width: 100%;
	justify-content: center;
}

.fe-cta .fe-btn-ghost .wp-block-button__link,
.fe-cta .fe-btn-ghost .wp-block-button__link:visited {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	background-color: #141414 !important;
	border: 1px solid #4a4a4a;
}

.fe-cta .fe-btn-ghost .wp-block-button__link:hover,
.fe-cta .fe-btn-ghost .wp-block-button__link:focus {
	background-color: #1f1f1f !important;
	border-color: #7a7a7a;
}

.fe-cta-mail {
	width: 100%;
	text-align: center;
	font-size: 0.9375rem;
}

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 781px) {
	.fe-reviews .fe-review {
		padding: 20px 18px;
	}

	.fe-towns {
		font-size: 1rem;
		line-height: 1.9;
	}
}
/* <<< fusting:fe-homepage-v2-sections <<< */

/* >>> fusting:fe-hero-mobile >>> */
/* On a phone the hero stacks in source order, which buries the family photo
   below the whole text block. Put the photo first so it lands above the fold. */
@media (max-width: 781px) {
	.fe-hero .fe-hero-cols {
		display: flex;
		flex-direction: column;
		padding: 0 0 36px !important;
		gap: 0;
	}

	.fe-hero .fe-hero-cols > .wp-block-column:last-child {
		order: -1;
		margin-bottom: 26px;
	}

	.fe-hero .fe-hero-cols > .wp-block-column:first-child {
		padding: 0 22px !important;
	}

	/* Taller frame and a high crop anchor so the four faces sit in the upper
	   half. At 300px with a centred crop the caption band landed straight
	   across the boys' faces. */
	.fe-hero .fe-hero-photo img {
		height: 430px;
		border-radius: 0;
		object-position: center 16%;
	}

	.fe-hero .fe-hero-photo,
	.fe-hero .fe-hero-photo img {
		border-radius: 0;
	}

	/* Tighter caption so it occupies less of the frame, and a shorter gradient
	   so it does not wash up over anyone. */
	.fe-hero .fe-hero-photo figcaption {
		padding: 34px 22px 14px;
		font-size: 0.875rem;
		line-height: 1.35;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.7) 45%, rgba(0, 0, 0, 0) 100%);
	}

	.fe-hero .fe-hero-photo figcaption strong {
		font-size: 1rem;
		margin-bottom: 0;
	}

	.fe-hero .fe-eyebrow {
		font-size: 0.75rem;
		margin-bottom: 10px;
	}

	.fe-hero .fe-hero-sub {
		margin-top: 14px;
	}

	.fe-hero .fe-proof {
		margin-top: 24px;
	}
}
/* <<< fusting:fe-hero-mobile <<< */

/* >>> fusting:fe-homepage-v2-polish >>> */
/* Phone icon on the call CTA. The data URI must be URL-encoded (< > #) or the
   browser silently drops the mask. */
.fe-btn-ghost .wp-block-button__link::before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 9px;
	vertical-align: -2px;
	background-color: #ffffff;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Proof card: rating and licence sit on one row, never wrapping. */
.fe-hero .fe-proof {
	flex-wrap: nowrap;
	max-width: 560px;
}

.fe-hero .fe-proof-rating {
	flex: 0 0 auto;
	padding-right: 0;
}

/* Circuit divider colour/weight rules removed 2026-08-25. They were unscoped, so
   the homepage's #cfcfcf grey and a hard-coded 1.5px stroke were also painting
   /about/'s migrated divider and pinning its wire weight against the plugin's
   own --fe-circuit-stroke token. Colour and weight now come from the plugin. */

/* Wire the 1-2-3 steps together like a real run. */
.fe-howquote .wp-block-columns {
	position: relative;
}

.fe-howquote .wp-block-columns::before {
	content: "";
	position: absolute;
	left: 40px;
	right: 40px;
	top: 29px;
	height: 2px;
	background: #e36200;
	z-index: 0;
}

.fe-howquote .wp-block-column {
	position: relative;
	z-index: 1;
}

.fe-step-num {
	background: #ffffff;
	z-index: 1;
}

/* Annapolis Moms fixed-height rule REMOVED 2026-08-25 - see fusting:fe-cert-logos
   for why: it fought the trust-bar worker's new area-matched inline sizing
   (Annapolis Moms 56px). */

@media (max-width: 781px) {
	.fe-howquote .wp-block-columns::before {
		display: none;
	}

	.fe-hero .fe-proof {
		flex-wrap: wrap;
		max-width: none;
	}
}
/* <<< fusting:fe-homepage-v2-polish <<< */

/* >>> fusting:fe-licence-lockup >>> */
/* Maryland state seal with the licence text beside it, in the hero proof card. */
.fe-hero .fe-licence-lockup {
	gap: 12px;
	align-items: center;
	flex-wrap: nowrap;
	min-width: 0;
	/* NOTE 2026-08-25: this used to ALSO draw its own border-left (+ matching
	   margin/padding), stacked right after the outer .fe-proof-licence's own
	   border-left. That drew TWO parallel vertical rules in the proof card
	   (Ceanne, 2026-08-25). The outer .fe-proof-licence divider is the only one
	   now -- don't re-add a border/margin-left/padding-left here. */
}

.fe-hero .fe-licence-lockup .fe-md-seal {
	margin: 0;
	flex: 0 0 auto;
}

.fe-hero .fe-licence-lockup .fe-md-seal img {
	height: 42px;
	width: auto;
	display: block;
}

.fe-hero .fe-licence-lockup .fe-licence-text {
	margin: 0;
	min-width: 0;
	flex: 0 1 auto;
}

.fe-hero .fe-licence-lockup .fe-proof-licence-num {
	color: #ffffff;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	/* NOTE 2026-08-25: this line used to force white-space: nowrap. "MD Master
	   Electrician" measured exactly 159px (the .fe-licence-text width) in one
	   browser, so it happened to just fit there -- but it renders wider in
	   Chrome and clipped past the card edge for Ceanne. Letting it wrap (plus
	   min-width:0/flex:0 1 auto above) makes the card survive a wider render
	   in any browser instead of depending on an exact-fit measurement. */
}

@media (max-width: 781px) {
	/* The outer .fe-proof-licence already draws the divider on mobile. The
	   lockup nested inside it was drawing a second one, so the card showed
	   two rules between the rating and the licence. Only the outer one. */
	.fe-hero .fe-licence-lockup {
		border-left: 0;
		border-top: 0;
		padding: 0;
		margin: 0;
		width: 100%;
	}

	.fe-hero .fe-proof-licence {
		border-left: 0;
		border-top: 1px solid #2b2b2b;
		padding: 14px 0 0;
		margin-top: 14px;
		width: 100%;
	}
}
/* <<< fusting:fe-licence-lockup <<< */

/* >>> fusting:fe-story >>> */
/* Short "who you are hiring" block. Deliberately text-only - it sits between
   two image-heavy sections and gives the page a rhythm break. */
.fe-story .fe-story-text {
	width: 100%;
	text-align: center;
	max-width: 720px;
	margin: 18px auto 0;
	font-size: 1.0625rem;
	line-height: 1.7;
}

.fe-story .fe-story-link {
	width: 100%;
	text-align: center;
}
/* <<< fusting:fe-story <<< */


/* >>> fusting:fe-step-wiring >>> */
/* Step wiring.
   Desktop: one horizontal run passing through all three rings.
   Mobile: the run turns 90 degrees and becomes a vertical bus down the left,
   branching into each ring, with every right lead carrying on off the page. */

.fe-howquote .wp-block-columns {
	position: relative;
}

.fe-howquote .wp-block-column {
	position: relative;
	z-index: 1;
}

.fe-step-num {
	background: #ffffff;
	z-index: 1;
}

/* --- Desktop: horizontal run ------------------------------------------- */
@media (min-width: 782px) {
	.fe-howquote .wp-block-columns::before {
		content: "";
		position: absolute;
		left: 40px;
		right: 40px;
		top: 29px;
		height: 2px;
		background: #e36200;
		z-index: 0;
	}
}

/* --- Mobile: vertical bus + branches ----------------------------------- */
@media (max-width: 781px) {
	.fe-howquote .wp-block-columns {
		gap: 40px;
	}

	/* No horizontal run when stacked. */
	.fe-howquote .wp-block-columns::before {
		display: none;
	}

	/* Each step drops a vertical wire from its own ring down into the next
	   ring, so 1 connects to 2 connects to 3. The last one has nothing below
	   it to reach, so it does not draw. */
	.fe-howquote .wp-block-column::before {
		content: "";
		position: absolute;
		left: 2px;
		width: 2px;
		top: 29px;
		bottom: -69px;
		background: #e36200;
		z-index: 0;
	}

	.fe-howquote .wp-block-column:last-child::before {
		display: none;
	}

	/* Right-hand lead runs out to the edge of the page. The content wrapper
	   is already clipped, so this cannot widen the document. */
	.fe-howquote .fe-step-num::after {
		width: 100vw;
	}
}
/* <<< fusting:fe-step-wiring <<< */

/* >>> fusting:fe-people >>> */
/* Headshots framed as the Fusting circuit mark: a ring with a lead running
   out each side, same language as the step numbers and the logo. */
.fe-story .fe-people {
	width: 100%;
	justify-content: center;
	gap: 64px;
	margin: 30px 0 8px;
}

.fe-story .fe-person {
	margin: 0;
	text-align: center;
	flex: 0 0 auto;
}

.fe-story .fe-person-photo {
	position: relative;
	margin: 0 auto;
	width: 128px;
	height: 128px;
}

.fe-story .fe-person-photo img {
	width: 128px;
	height: 128px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	border: 2px solid #e36200;
	background: #f7f7f7;
}

/* The wire that used to be drawn here as two 2px #e36200 pseudo-elements now lives in
   the fusting-circuit-blocks plugin (assets/circuit-portraits.js, v0.9.0, 2026-08-25) as a
   masked SVG run on --fe-circuit-stroke with the shared scroll reveal. */

.fe-story .fe-person-name {
	margin: 16px 0 0;
	font-weight: 700;
	font-size: 1.0625rem;
	text-align: center;
}

.fe-story .fe-person-role {
	margin: 2px 0 0;
	font-size: 0.875rem;
	color: #5a5a5a;
	text-align: center;
}

@media (max-width: 781px) {
	.fe-story .fe-people {
		gap: 42px;
	}

	.fe-story .fe-person-photo,
	.fe-story .fe-person-photo img {
		width: 104px;
		height: 104px;
	}
}
/* <<< fusting:fe-people <<< */

/* >>> fusting:fe-typography >>> */
/* Stop single-word orphans on the last line of headings and intros.
   text-wrap: balance evens out the line lengths instead of leaving one word
   stranded, which is what left "A" hanging at the end of the reviews heading. */
.fe-sec-h2,
.fe-hero-h1 {
	text-wrap: balance;
}

.fe-sec-intro,
.fe-story-text,
.fe-area-note,
.fe-towns {
	text-wrap: pretty;
}
/* <<< fusting:fe-typography <<< */

/* >>> fusting:fe-homepage-v2-rounds >>> */
/* ---------------------------------------------------------------------------
   Rounds 2-15 of the 2026-08-25 homepage build, merged into ONE block on
   2026-08-25 (Phase 2). They were already CONTIGUOUS in the stylesheet with only
   whitespace between them, so concatenating them in the same order is a no-op for
   the cascade -- nothing moved relative to anything else.
   What was NOT done, and why: the fifteen rounds look like accretion but measure
   as 98%% non-overlapping. Only 39 declarations across the whole family were
   provably dead (identical media + identical selector + same property, later
   wins); those have been removed. The rest target different selectors -- they are
   sequential refinements of DIFFERENT parts of the page, not repeated overrides of
   the same one. A deeper semantic merge would mean re-deriving specificity by hand
   across four pages for a few hundred more characters, which is not a good trade
   against this being the live styling.
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   "Who you are hiring" headshots: black ring, and one continuous bus that runs
   off both edges of the screen and joins the two portraits to each other. The
   leads are 100vw and sit behind the photos, so each face reads as a component
   sitting on the same conductor rather than two isolated stubs.
   --------------------------------------------------------------------------- */
.fe-story .fe-person-photo img {
	border-color: #0a0a0a;
	position: relative;
	z-index: 2;
}

.fe-story .fe-people {
	position: relative;
	overflow: visible;
}

/* ---------------------------------------------------------------------------
   Steps 1-2-3: run the bus out to the viewport edges, not just to the content
   column. 100vw centred on the row beats width:100% now that the row itself is
   clamped to --fe-shell above.
   --------------------------------------------------------------------------- */
.fe-howquote .wp-block-columns::before {
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	right: auto;
}

/* ---------------------------------------------------------------------------
   FAQ markers drawn as a diode: outlined triangle plus its cathode bar, the
   same stroked-symbol language as the dividers. Rotates a quarter turn open.
   --------------------------------------------------------------------------- */
/* Flat rows, not a card per question: a hairline rule between each one on the
   section's own background, with the marker pushed out to the right. */
/* The list group is the 1180px shell while its items are constrained to 820px,
   so a border-top here would overhang the rows it is supposed to cap. Put the
   opening rule on the first item instead, where it lines up. */
.fe-faq .fe-faq-item:first-of-type {
	border-top: 1px solid #e4e4e4;
}

.fe-faq .fe-faq-item {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-bottom: 1px solid #e4e4e4;
	border-radius: 0;
	box-shadow: none;
}

.fe-faq .fe-faq-item > summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	padding: 22px 4px;
	cursor: pointer;
	font-weight: 700;
	font-size: 1.0625rem;
}

.fe-faq .fe-faq-item > summary:hover {
	color: #e36200;
}

.fe-faq .fe-faq-item > :not(summary) {
	padding: 0 4px 22px;
	margin: 0;
	max-width: 62ch;
	color: #5a5a5a;
}

.fe-faq .fe-faq-item > summary::-webkit-details-marker,
.fe-faq .fe-faq-item > summary::marker {
	display: none;
	content: "";
}

.fe-faq .fe-faq-item > summary::before {
	content: "";
	flex: 0 0 auto;
	width: 28px;
	height: 16px;
	background: #e36200;
	-webkit-mask: var(--fe-diode) center / contain no-repeat;
	mask: var(--fe-diode) center / contain no-repeat;
}

.fe-faq .fe-faq-list {
	--fe-diode: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 8 H8'/%3E%3Cpath d='M8 3 L8 13 L18 8 Z'/%3E%3Cpath d='M18 3 L18 13'/%3E%3Cpath d='M18 8 H28'/%3E%3C/g%3E%3C/svg%3E");
	--fe-diode-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Cg stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 8 H8' fill='none'/%3E%3Cpath d='M8 3 L8 13 L18 8 Z' fill='black'/%3E%3Cpath d='M18 3 L18 13' fill='none'/%3E%3Cpath d='M18 8 H28' fill='none'/%3E%3C/g%3E%3C/svg%3E");
}

.fe-faq .fe-faq-item[open] > summary::before {
	-webkit-mask-image: var(--fe-diode-on);
	mask-image: var(--fe-diode-on);
}

/* ---------------------------------------------------------------------------
   Service area: the town list was one long bold run-on. Chips wrap instead.
   --------------------------------------------------------------------------- */
.fe-area .fe-sec-intro {
	max-width: 640px;
}

.fe-area .fe-towns {
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.fe-area .fe-towns span {
	line-height: 1.3;
	color: #242424;
}

.fe-area .fe-area-note {
	max-width: 640px;
	margin-top: 26px;
	font-size: 0.9375rem;
	color: #5a5a5a;
}

/* ---------------------------------------------------------------------------
   CookieYes revisit badge ships Cookie Yes blue; brand it orange.
   --------------------------------------------------------------------------- */
.cky-btn-revisit-wrapper,
.cky-btn-revisit-wrapper .cky-btn-revisit {
	background: #e36200 !important;
}

@media (max-width: 781px) {
	.fe-area .fe-towns {
		gap: 6px;
	}

	.fe-area .fe-towns span {
	}
}

/* ---------------------------------------------------------------------------
   Constrained content column, take 2.
   The round-2 rule lost the cascade: Astra ships
     .ast-page-builder-template .entry-content[data-ast-blocks-layout] > * ...
   at specificity (0,3,0) forcing max-width:none, against our (0,2,0). Adding the
   same hook. Note :is() contributes only its most specific ARGUMENT (one class),
   so .entry-content[attr] :is(...) is (0,3,0), still short. Astra's winning
   selector is ... > .alignfull:where(...) > * at (0,4,0), so we match on
   .alignfull too and land at (0,5,0) -- decisive, and no !important.
   --------------------------------------------------------------------------- */
.entry-content[data-ast-blocks-layout]:has(.fe-hero) {
	--fe-shell: 1180px;
}

.ast-page-builder-template .entry-content[data-ast-blocks-layout] :is(.fe-hero,
	.fe-trustbar, .fe-howquote, .fe-services, .fe-whyus, .fe-story, .fe-reviews,
	.fe-area, .fe-faq, .fe-cta, .fe-instagram).alignfull > * {
	max-width: var(--fe-shell, 1180px);
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/* ---------------------------------------------------------------------------
   Astra underlines every content link. On a page this link-dense it turns every
   card CTA into a ruled line. Drop the underline and let colour plus a hover
   underline carry the affordance instead.
   --------------------------------------------------------------------------- */
.entry-content[data-ast-blocks-layout]:has(.fe-hero) a:where(:not(.wp-block-button__link)) {
	text-decoration: none;
	text-underline-offset: 3px;
}

.entry-content[data-ast-blocks-layout]:has(.fe-hero) a:where(:not(.wp-block-button__link)):hover,
.entry-content[data-ast-blocks-layout]:has(.fe-hero) a:where(:not(.wp-block-button__link)):focus-visible {
	text-decoration: underline;
}

/* The card CTAs read as actions, so give them a chevron that slides on hover
   rather than a permanent rule under the words. */
.fe-services .wp-block-column > p:last-child > a::after,
.fe-area a::after {
}

.fe-services .wp-block-column > p:last-child > a:hover::after {
}

/* ---------------------------------------------------------------------------
   Circuit symbol overflow + wire-junction overlap rules removed 2026-08-25.
   `svg { overflow: visible }` now ships in the plugin, and the two
   `right/left: calc(100% - 1px)` rules defeated the plugin's connector-point
   positioning: on the 0.5.0 artwork the inductor's start connector sits 4.42%
   in, so pinning the wire 1px from the box edge left a ~3.9px gap between the
   wire and the coil. Positioning is the plugin's job now.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Service-area towns: chips put a box around every town, which is the same
   thing that was wrong with the boxed FAQ. Plain text, middot separated,
   sitting straight on the background.
   --------------------------------------------------------------------------- */
.fe-area .fe-towns {
	display: block;
	margin: 24px auto 0;
	font-weight: 400;
	font-size: 1rem;
	line-height: 2;
	color: #242424;
}

.fe-area .fe-towns span {
	border: 0;
	border-radius: 0;
	padding: 0;
	background: none;
	font-size: inherit;
	white-space: nowrap;
}

.fe-area .fe-towns span:not(:last-child)::after {
	content: " \00b7 ";
	color: #b5b5b5;
	padding: 0 6px;
}

@media (max-width: 781px) {
	.fe-area .fe-towns {
		font-size: 0.9375rem;
		line-height: 1.9;
	}

	.fe-area .fe-towns span {
		padding: 0;
		font-size: inherit;
	}
}

/* ---------------------------------------------------------------------------
   Step 1-2-3 wiring: the long bus and the short leads off each ring were drawn
   from two different reference points and missed each other by 3px.
   The ring is 58px tall, so its electrical centreline is 29px below the row top.
     - the bus was top:29px h:2px  -> occupied 29..31, centre 30 (1px low)
     - the leads were top:27px + translateY(-1px) -> 26..28, centre 27 (2px high)
   Both now straddle 29 exactly. Leads use 50% of their own 58px ring so they stay
   centred if the ring size ever changes; the bus cannot (its parent is the whole
   186px row), so it is pinned to the same 28px.
   --------------------------------------------------------------------------- */
.fe-howquote .wp-block-columns::before {
	top: 28px;
}

.fe-howquote .fe-step-num::before,
.fe-howquote .fe-step-num::after {
	top: 50%;
	transform: translateY(-50%);
}

/* ---------------------------------------------------------------------------
   Sharp corners. The logo's stroke ends are square, so cards and images are too.
   Deliberate exceptions, do NOT square these:
     - .wp-block-button__link  (Ceanne: "buttons is fine rounded")
     - .fe-step-num and the headshots -- those are circles, not rounded rectangles
   --------------------------------------------------------------------------- */
.fe-hero .fe-hero-photo,
.fe-hero .fe-hero-photo img,
.fe-hero .fe-proof,
.fe-services .wp-block-column,
.fe-services .wp-block-column img,
.fe-whyus .wp-block-column,
.fe-reviews .fe-review {
	border-radius: 0;
}

/* ---------------------------------------------------------------------------
   Proof card: the rating half and the licence half each drew their own divider,
   so the seam showed as two parallel lines. Keep one.
   --------------------------------------------------------------------------- */
.fe-hero .fe-proof-rating {
	border-right: 0;
}

/* ---------------------------------------------------------------------------
   Hero caption: the two lines were floating apart.
   --------------------------------------------------------------------------- */
.fe-hero .fe-hero-photo figcaption {
	line-height: 1.3;
}

.fe-hero .fe-hero-photo figcaption br {
	line-height: 0.6;
}

/* ---------------------------------------------------------------------------
   The phone button carries an icon and the primary one did not, so the pair
   looked mismatched. A camera reinforces the actual mechanic: you send photos.
   --------------------------------------------------------------------------- */
.fe-hero .wp-block-buttons > .wp-block-button:not(.fe-btn-ghost) > .wp-block-button__link::before,
.fe-cta .wp-block-buttons > .wp-block-button:not(.fe-btn-ghost) > .wp-block-button__link::before {
	content: "";
	display: inline-block;
	width: 17px;
	height: 17px;
	margin-right: 9px;
	vertical-align: -3px;
	background: currentColor;
	-webkit-mask: var(--fe-camera) center / contain no-repeat;
	mask: var(--fe-camera) center / contain no-repeat;
}

.entry-content:has(.fe-hero) {
	--fe-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h3.5l1.5-2h8l1.5 2H21v12H3z'/%3E%3Ccircle cx='12' cy='13' r='3.6'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   Diode marker rotates a quarter turn as the answer opens (and still fills in,
   from the round-2 rule). Honours reduced-motion.
   --------------------------------------------------------------------------- */
.fe-faq .fe-faq-item > summary::before {
	transition: transform 0.2s ease;
}

.fe-faq .fe-faq-item[open] > summary::before {
	transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
	.fe-faq .fe-faq-item > summary::before {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Section header system: small orange eyebrow, then a heading a good step
   larger than before. Every section announces itself the same way, so the
   layouts underneath are free to differ.
   UNGATED 2026-08-25 (Phase 2): was .entry-content:has(.fe-hero), i.e. homepage
   only. Now every page carrying these classes (FAQ, Services) inherits it.
   --------------------------------------------------------------------------- */
.entry-content .fe-sec-eyebrow {
	margin: 0 0 10px;
	color: #e36200;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.3;
	text-align: center;
}

/* Bigger. Was clamp(1.75rem .. 2.5rem); the concept sits nearer 3rem at desktop. */
.entry-content :is(.fe-howquote, .fe-services, .fe-whyus, .fe-story,
	.fe-reviews, .fe-area, .fe-faq, .fe-cta) h2 {
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	max-width: 20ch;
	margin-left: auto;
	margin-right: auto;
}

/* Dark sections need the eyebrow lifted off near-black. */
.fe-reviews .fe-sec-eyebrow,
.fe-cta .fe-sec-eyebrow {
	color: #ffb877;
}

/* The sharp-corner rule now works from the stylesheet (the inline radii were
   stripped out of the block markup), so the service cards need their border and
   thumbnails restated here rather than inline. */
.fe-services .wp-block-column,
.fe-services .wp-block-column img,
.fe-service-thumb img {
	border-radius: 0;
}

/* ---------------------------------------------------------------------------
   "The difference": asymmetric two-column. Big left-set statement + a stacked
   list on the right, instead of a centred heading over three equal cards.
   --------------------------------------------------------------------------- */
.fe-whyus .fe-sec-eyebrow,
.fe-whyus .fe-diff-head,
.fe-whyus .fe-diff-lede {
	text-align: left;
	margin-left: 0;
	margin-right: 0;
}

.fe-whyus .fe-diff-head {
	max-width: 15ch;
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.025em;
	margin: 0;
}

.fe-whyus .fe-diff-lede {
	margin-top: 20px;
	max-width: 42ch;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: #4a4a4a;
}

.fe-whyus .fe-diff-item {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 18px;
	margin: 0 0 30px;
}

.fe-whyus .fe-diff-item:last-child {
	margin-bottom: 0;
}

.fe-whyus .fe-diff-icon {
	flex: 0 0 40px;
	margin: 2px 0 0;
}

.fe-whyus .fe-diff-icon img {
	display: block;
	width: 40px;
	height: auto;
}

.fe-whyus .fe-diff-h {
	margin: 0;
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
}

.fe-whyus .fe-diff-p {
	margin: 7px 0 0;
	line-height: 1.62;
	color: #4a4a4a;
}

@media (max-width: 781px) {
	.fe-whyus .fe-diff-head {
		max-width: none;
	}

	.fe-whyus .fe-diff-item {
		margin-bottom: 26px;
	}
}

/* ---------------------------------------------------------------------------
   Type scale, measured against the concept rather than guessed.
   At 1440 the concept renders section headings at 42px and body copy at
   15.5-17px; this page was at 37.5px and 14.06px. The headings were close --
   the undersized BODY copy is what made the page read smaller.
   Concept values: h2 clamp(29px,3.6vw,42px), body 15.5-17px, maxw 1180px.
   NOTE: Astra sets the root font-size to 15px, not 16px, so every rem here is
   6.7% smaller than its number implies (2.625rem rendered 39.4px, not 42px).
   These are absolute px on purpose so the scale matches the concept exactly.
   --------------------------------------------------------------------------- */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] :is(.fe-howquote, .fe-services, .fe-whyus, .fe-story,
	.fe-reviews, .fe-area, .fe-faq, .fe-cta) h2 {
	font-size: clamp(29px, 3.6vw, 42px);
}

.fe-whyus .fe-diff-head {
	font-size: clamp(30px, 4vw, 46px);
}

/* Body copy up to the concept's 16-17px, with the line-height to match. */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] :is(.fe-services, .fe-whyus, .fe-story, .fe-area).alignfull p:not(.fe-sec-eyebrow) {
	font-size: 16px;
	line-height: 1.65;
}

.fe-services .wp-block-column h3,
.fe-whyus .fe-diff-h {
	font-size: 19px;
}

.ast-page-builder-template .entry-content[data-ast-blocks-layout] .fe-sec-intro {
	font-size: 17px;
	line-height: 1.62;
}

.fe-reviews .fe-review-text {
	font-size: 16px;
	line-height: 1.62;
}

/* ---------------------------------------------------------------------------
   MOBILE FIXES
   --------------------------------------------------------------------------- */

/* 1. Town list ran off the right edge. The spans are emitted with no whitespace
      between them and each carries white-space:nowrap, so the separator (an
      ::after inside the nowrap span) gave the line no break opportunity at all
      and the whole run became one unbreakable string. Letting the separator
      wrap restores the break points while "Glen Burnie" still holds together. */
.fe-area .fe-towns span::after {
	white-space: normal;
}

.fe-area .fe-towns {
	overflow-wrap: break-word;
}

/* 2. "Read them all on Google" was orphaning its first word onto the sentence
      above. Give the link its own line. */
.fe-reviews .fe-sec-intro a {
	display: block;
	margin-top: 4px;
}

/* 3. Stacked steps: the vertical bus was drawn at the column's left edge, which
      is exactly where the heading and body text start, so the wire ran straight
      through the words. Give the rings their own gutter and indent the text past
      it, so the bus has somewhere to live.
      Ring is 58px; bus sits on its centreline at 28px (2px wide -> 28..30). */
@media (max-width: 781px) {
	.fe-howquote .wp-block-columns {
		display: block;
	}

	.fe-howquote .wp-block-column {
		position: relative;
		padding-left: 82px;
		margin: 0 0 34px;
	}

	.fe-howquote .wp-block-column:last-child {
		margin-bottom: 0;
	}

	.fe-howquote .fe-step-num {
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
	}

	/* the run between this ring and the next one down */
	.fe-howquote .wp-block-column::before {
		content: "";
		position: absolute;
		left: 28px;
		top: 58px;
		bottom: -34px;
		width: 2px;
		height: auto;
		background: #e36200;
	}

	.fe-howquote .wp-block-column:last-child::before {
		display: none;
	}

	/* right lead still runs off the edge of the screen */
	.fe-howquote .fe-step-num::after {
		width: 100vw;
	}

	.fe-howquote .wp-block-column > :not(.fe-step-num):first-of-type {
		margin-top: 4px;
	}
}

/* FAQ questions must not change colour on hover -- the orange read as a state
   change on the heading itself. The diode marker is the affordance. */
.fe-faq .fe-faq-item > summary:hover,
.fe-faq .fe-faq-item > summary:focus {
	color: inherit;
}

/* Secondary (phone) button sits below the primary in importance, so size it
   that way instead of matching it pixel for pixel. */
.fe-hero .fe-btn-ghost > .wp-block-button__link,
.fe-cta .fe-btn-ghost > .wp-block-button__link {
	padding: 11px 22px;
	font-size: 15px;
}

.fe-hero .fe-btn-ghost > .wp-block-button__link::before,
.fe-cta .fe-btn-ghost > .wp-block-button__link::before {
	width: 15px;
	height: 15px;
	margin-right: 7px;
}

/* Instagram grid was 4 columns of 78px on a 390px screen -- thumbnails too small
   to read, which is most of why the section looks like it is not there. Two
   bigger tiles per row on phones, three on tablets. */
@media (max-width: 600px) {
	.fe-instagram #sbi_images {
		grid-template-columns: 1fr 1fr !important;
		gap: 8px !important;
	}

	.fe-instagram #sbi_images .sbi_item {
		width: auto !important;
	}
}

@media (min-width: 601px) and (max-width: 900px) {
	.fe-instagram #sbi_images {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 10px !important;
	}
}

/* ---------------------------------------------------------------------------
   Hero photo on mobile.
   The crop sat at 50% 16%, anchored near the top of a 683x1024 portrait, so it
   showed a band of wall above and cut the bottom off. The image overflows its
   430px window by 155px, so 28% slides it down without clipping the adults' faces.
   The caption broke twice between the two lines: <strong> is already display:block
   AND the markup carries a <br> after it. Drop the <br>.
   --------------------------------------------------------------------------- */
@media (max-width: 781px) {
	.fe-hero .fe-hero-photo img {
	}
}

.fe-hero .fe-hero-photo figcaption br {
	display: none;
}

.fe-hero .fe-hero-photo figcaption strong {
	display: block;
	margin-bottom: 3px;
}

/* Stacked steps connect to each other vertically, so the left-hand horizontal
   stub on each ring is a lead to nowhere. The glyph is just the numbered circle;
   the wires are supplied by context (vertical bus between rings, right lead to
   the screen edge). */
@media (max-width: 781px) {
	.fe-howquote .fe-step-num::before {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   Card CTAs: swap the text chevron for the diode mark, with real spacing.
   --------------------------------------------------------------------------- */
.fe-services .wp-block-column > p:last-child > a::after,
.fe-area a::after {
	content: "";
	display: inline-block;
	width: 22px;
	height: 13px;
	margin-left: 10px;
	vertical-align: -1px;
	background: currentColor;
	-webkit-mask: var(--fe-diode-inline) center / contain no-repeat;
	mask: var(--fe-diode-inline) center / contain no-repeat;
	transition: transform 0.16s ease;
}

.entry-content:has(.fe-hero) {
	--fe-diode-inline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 8 H8'/%3E%3Cpath d='M8 3 L8 13 L18 8 Z'/%3E%3Cpath d='M18 3 L18 13'/%3E%3Cpath d='M18 8 H28'/%3E%3C/g%3E%3C/svg%3E");
}

.fe-services .wp-block-column > p:last-child > a:hover::after {
	transform: translateX(3px);
}

/* NOTE 2026-08-25: this rule used to force white-space: nowrap on the whole CTA
   link "to keep the mark from being orphaned onto its own line." That made the
   longest of the four card CTAs -- "Get a free EV charger quote" (bold, 700
   weight) -- an unbreakable string 260px wide inside a 229px-wide card slot, so
   it overflowed the card by ~7px (Ceanne, 2026-08-25). Three of the four card
   CTAs are short enough that this was invisible. Letting the link wrap fixes
   the overflow for every card without a per-card fix; the diode mark landing
   on its own line for the longest CTA is a smaller cosmetic tradeoff than text
   spilling out of the card border. */
.fe-services .wp-block-column > p:last-child > a {
	white-space: normal;
}

/* ---------------------------------------------------------------------------
   Circuit dividers were sitting in their own empty band between two sections,
   reading as an orphan block. Collapse that band and let the symbol straddle
   the seam, so it works as a separator ON the boundary rather than beside it.
   Half of the 48px symbol sits in each neighbouring section.
   --------------------------------------------------------------------------- */
.entry-content:has(.fe-hero) .wp-block-fusting-circuit-symbol {
	position: relative;
	z-index: 4;
	margin-top: -24px;
	margin-bottom: -24px;
}

/* ---------------------------------------------------------------------------
   Reviews header: left-set headline with the rating card floated beside it,
   rather than a centred stack of stars over a heading.
   --------------------------------------------------------------------------- */
/* The header's own bottom margin stacked on top of the review row's 40px
   top margin, leaving ~84px of dead space. Zero the header side and let the
   row's existing margin do the spacing. */
.fe-reviews .fe-rev-head {
	margin-bottom: 0;
}

.fe-reviews .fe-review-row:first-of-type {
	margin-top: 44px;
}

.fe-reviews .fe-rev-head .fe-sec-eyebrow {
	text-align: left;
}

.fe-reviews .fe-rev-h2 {
	margin: 0;
	text-align: left;
	max-width: 16ch;
	font-size: clamp(29px, 3.6vw, 42px);
	line-height: 1.12;
	letter-spacing: -0.02em;
}

.fe-reviews .fe-rev-sub {
	margin: 16px 0 0;
	text-align: left;
	font-size: 16px;
	line-height: 1.6;
}

.fe-reviews .fe-rev-sub a {
	display: inline;
	color: #ffb877;
}

/* the floating rating card */
.fe-reviews .fe-rev-card {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: auto;
	width: fit-content;
	padding: 18px 26px;
	background: #161616;
	border: 1px solid #2a2a2a;
}

.fe-reviews .fe-rev-score {
	margin: 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
}

.fe-reviews .fe-rev-card-stars {
	margin: 0;
	color: #f5a623;
	font-size: 16px;
	letter-spacing: 2px;
	line-height: 1.2;
}

.fe-reviews .fe-rev-card-meta {
	margin: 3px 0 0;
	font-size: 14px;
	color: #9a9a9a;
}

/* ---------------------------------------------------------------------------
   Review attributions get an initials avatar, separated from the quote.
   --------------------------------------------------------------------------- */
.fe-reviews .fe-review-who {
	display: flex;
	align-items: center;
	padding-top: 16px;
	border-top: 1px solid #262626;
	font-size: 14px;
	color: #9a9a9a;
}

.fe-reviews .fe-avatar {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #2a2118;
	color: #e8a061;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------------------
   Small "Full terms" link beside every warranty mention.
   --------------------------------------------------------------------------- */
.entry-content:has(.fe-hero) .fe-terms-link {
	display: inline-block;
	margin-left: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #e36200;
	white-space: nowrap;
}

.entry-content:has(.fe-hero) .fe-terms-link::after {
}

@media (max-width: 781px) {
	.fe-reviews .fe-rev-card {
		margin-left: 0;
		margin-top: 8px;
	}

	.fe-reviews .fe-rev-h2 {
		max-width: none;
	}
}

/* ---------------------------------------------------------------------------
   MOBILE ABOVE-THE-FOLD
   Goal (Ceanne 2026-08-25): five stars, "Master Electrician" and the CTA all
   visible without scrolling on a phone. Measured before: the proof block with
   the stars started at 924px, roughly 240px below a ~700px Safari fold.
   Reclaimed by shrinking the header, shortening the hero photo, putting the two
   buttons on one row, and tightening the gaps between the text blocks.
   --------------------------------------------------------------------------- */
@media (max-width: 781px) {

	/* Header: 158px of transparent overlay was eating the top of a shorter photo. */
	/* Padding goes on the INNER bar only. Padding the outer wrap let the hero photo
	   show through as a 6px strip of barn wall above the black header on device. */
	.ast-header-break-point .ast-mobile-header-wrap,
	.ast-header-break-point .ast-main-header-wrap {
		min-height: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.ast-header-break-point .site-header .ast-builder-grid-row,
	.ast-header-break-point .main-header-bar,
	.ast-header-break-point .ast-primary-header-bar {
		min-height: 0 !important;
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}

	/* The header was 174px because a legacy Spectra (uagb/buttons) "Call Now"
	   widget sits in the header widget area at 126px. On mobile it duplicates the
	   orange tap-to-call circle. Hiding it on mobile takes the header from 174px
	   to ~112px, which is what makes the family photo readable instead of a 90px
	   sliver. The call action is NOT lost -- the hero's own 410-921-9524 button
	   sits ~60px below, above the fold, with the number spelled out. Desktop is
	   untouched. */
	.ast-header-break-point .header-widget-area {
	}

	/* The two sections were sized by that widget. */
	.ast-header-break-point .site-header-primary-section-left,
	.ast-header-break-point .site-header-primary-section-right,
	.ast-header-break-point .site-header-section {
	}


	/* NOTE: do NOT set max-height/width on the logo img here. Astra sizes it via
	   the builder; forcing width:auto collapsed it to 0x0 and the logo vanished
	   from the live header (2026-08-25). Shrink the header with padding only. */

	/* Hero photo crop, made proportional 2026-08-28 (faces were being cut off).
	   HISTORY: this was a fixed pixel height, nudged 430 -> 264 -> 300, each time
	   to fix the crop at whatever width was being looked at that day.
	   ROOT CAUSE of all of those: the photo is PORTRAIT (2:3), so a fixed height
	   shows a different FRACTION of it at every screen width. 300px showed about
	   half the photo at 375px but only a quarter at 745px, which is why heads kept
	   getting clipped on tablet widths while phones looked fine.
	   FIX: an aspect-ratio shows the SAME 56% of the photo at every width, so the
	   framing holds everywhere and never needs another per-width nudge. 15% lifts
	   the window enough to keep headroom above Ceanne and Steve while still
	   including both boys. Verified at 500px and 745px. */
	.fe-hero .fe-hero-photo img {
		height: auto;
		aspect-ratio: 6 / 5;
		object-position: 50% 15%;
	}

	.fe-hero .fe-hero-photo figcaption {
		padding-top: 20px;
	}

	/* Tighten the text stack. */
	.fe-hero .fe-eyebrow {
		margin: 18px 0 6px;
	}

	/* 40px wrapped to FOUR lines (173px). 32px fits it in three and buys back
	   ~60px, which is what actually lifts the stars above the fold. */
	.fe-hero .fe-hero-h1 {
		margin: 0;
		font-size: 32px;
		line-height: 1.1;
	}

	.fe-hero .fe-hero-sub {
		margin: 12px 0 0;
		font-size: 16px;
		line-height: 1.5;
	}

	.fe-hero .fe-hero-flag {
		margin: 12px 0 0;
		font-size: 15px;
		line-height: 1.45;
	}

	/* Both CTAs on one row instead of stacked: saves ~57px. */
	.fe-hero .wp-block-buttons {
		display: flex;
		flex-wrap: nowrap;
		gap: 10px;
		margin-top: 18px !important;
	}

	.fe-hero .wp-block-buttons > .wp-block-button {
		flex: 1 1 auto;
		min-width: 0;
	}

	.fe-hero .wp-block-buttons .wp-block-button__link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 13px 12px !important;
		font-size: 15px;
		white-space: nowrap;
	}

	.fe-hero .fe-btn-ghost > .wp-block-button__link {
		padding: 13px 12px !important;
		font-size: 15px;
	}

	/* Proof block pulled up under the buttons. */
	.fe-hero .fe-proof {
		margin-top: 18px !important;
		padding: 14px 16px !important;
		gap: 14px !important;
	}
}

/* ---------------------------------------------------------------------------
   Hero must clear the overlaying header.
   Astra's transparent header is position:absolute at top:0, so it sits ON the
   hero rather than pushing it down. The hero's own 64px top padding was less
   than the header's height (101px at desktop, taller when the nav wraps to two
   rows at mid widths), so the eyebrow was fully hidden and the first line of the
   H1 was clipped -- "Your Master" disappeared behind the black bar.
   Padding is generous enough to survive a two-row nav.
   --------------------------------------------------------------------------- */
@media (min-width: 782px) {
	.entry-content .fe-hero > .wp-block-columns {
		padding-top: 150px !important;
	}
}

/* Between the mobile breakpoint and full desktop the nav wraps to two rows and
   the header grows past 140px, so give that band more room again. */
@media (min-width: 782px) and (max-width: 1300px) {
	.entry-content .fe-hero > .wp-block-columns {
		padding-top: 185px !important;
	}
}
/* <<< fusting:fe-homepage-v2-rounds <<< */

/* >>> fusting:fe-montserrat-700-local >>> */
/* ---------------------------------------------------------------------------
   Self-hosted Montserrat 700 (bold).
   Measured 2026-08-25: 74 elements on the homepage use font-weight:700, but
   Astra's "Load Google Fonts Locally" pipeline only ever fetched 400/500/600
   -- document.fonts had no 700 face at all, so every bold element rendered as
   browser-synthesized "faux bold" instead of the real Montserrat Bold glyphs.
   Faux bold is drawn at a different width per browser/OS, which is exactly
   why the "MD Master Electrician" licence text (font-weight:700) fit inside
   its box in one browser and clipped in Ceanne's Chrome.
   The page also links a Google Fonts stylesheet
   (fonts.googleapis.com/css2?family=Montserrat:...) but with
   rel="preload" as="font" -- the wrong `as` for a stylesheet, so it downloads
   and is discarded (link.sheet is null) and contributes no weights. That
   preload is unrelated to this file and lives in theme header markup, not
   Additional CSS, so it isn't touched here.
   Fix: self-host the missing weight the same way the other three already
   are, from an uploaded media-library file, so 700 is a real loaded face
   instead of a synthesized one. woff2, latin subset (matches this site's
   content), uploaded via wp_insert_attachment 2026-08-25, confirmed HTTP 200
   with content-type application/font-woff2 before wiring it in below.
   --------------------------------------------------------------------------- */
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("https://fustingelectric.com/wp-content/uploads/2026/08/montserrat-v31-latin-700.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* <<< fusting:fe-montserrat-700-local <<< */

/* >>> fusting:spectra-header-callnow-migration-2026-08-25 >>> */
/* Spectra migration (2026-08-25): header Call Now button moved from uagb/buttons to
   spectra/buttons + spectra/button (header-widget-1, was block-49, now block-50).
   Spectra's data-spectra-id is regenerated randomly on every single page render (verified
   live via do_blocks() — two renders of the same saved block produced two different ids),
   so it cannot be used as a CSS hook the way the old block-id-keyed .uagb-block-ed4919c2
   selector was. Using the stable .wp-block-spectra-button class instead, scoped to
   .site-header so it only matches this one button. The legacy .uagb-buttons-repeater /
   .uagb-block-ed4919c2 rules elsewhere in this stylesheet are left untouched — other
   uagb/buttons instances on the site (e.g. page-id-5239) still use them. */
@media (max-width: 1399px) {
  .site-header .wp-block-spectra-button .cn-num { display: none; }
}
@media (min-width: 922px) and (max-width: 1099px) {
  .site-header .wp-block-spectra-button {
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .site-header .wp-block-spectra-button .spectra-button__link { display: none !important; }
  .site-header .wp-block-spectra-button .spectra-button__icon { margin: 0 !important; }
  .site-header .wp-block-spectra-button .spectra-button__icon svg { width: 22px !important; height: 22px !important; }
}
/* <<< fusting:spectra-header-callnow-migration-2026-08-25 <<< */

/* >>> fusting:fe-proof-divider-gap-and-trustbar-rows-20260825 >>> */
/* ---------------------------------------------------------------------------
   1) Hero proof card: breathing room before the divider. Unchanged.
   2) Trust bar badge rows. REWRITTEN 2026-08-26.
      Authored when there were NINE badges, so it used a flex-basis of one
      fifth to force 5 + 4. There are now SIX badges, and that same one-fifth
      basis packs 5 across and strands the 6th alone.
      Ceanne: "no orphaned badges (just do one row of 6 or 2 rows of 3)".
      Permitted layouts are therefore 6-across and 3 + 3, nothing else.
      The old max-width:600px rule (half basis = 2 + 2 + 2) is DELETED:
      three rows of two is just as forbidden as 5 + 1.
      NOTE: this divisor is hand-maintained and silently goes wrong whenever
      the badge count changes. The better home for "six per row" is the block
      itself (a Gutenberg grid layout with columnCount 6), where the number is
      visible while editing. Convert when the block can be read untruncated.
   --------------------------------------------------------------------------- */
.fe-hero .fe-proof-rating { padding-right: 20px; }

.fe-trustbar .fe-cert-logos > * {
	flex: 0 0 calc((100% - (5 * 34px)) / 6);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}

.fe-trustbar .fe-cert-logos > * img { max-width: 100%; height: auto; }

@media (max-width: 900px) {
	.fe-trustbar .fe-cert-logos > * { flex: 0 0 calc((100% - (2 * 34px)) / 3); }
}
/* <<< fusting:fe-proof-divider-gap-and-trustbar-rows-20260825 <<< */

/* >>> fusting:fe-widow-orphan-control-20260825 >>> */
/* ---------------------------------------------------------------------------
   Widows and orphans, site-wide.
   text-wrap:pretty tells the browser to avoid leaving a single word alone on a
   paragraph's last line (a widow); text-wrap:balance evens the line lengths of
   short blocks like headings so you don't get a long line over a stub.
   Why not white-space:nowrap -- that is what USED to be on the service-card CTA
   ("Get a free EV charger quote"), and it is exactly what made that card
   overflow its box on 2026-08-25. nowrap trades a widow for an overflow; these
   properties fix the widow without ever forcing the box wider.
   balance is capped by browsers at a handful of lines, so it is scoped to
   headings and short lead-ins, with pretty doing the work on body copy.
   --------------------------------------------------------------------------- */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content .fe-eyebrow,
.entry-content .wp-block-button__link,
.entry-content figcaption {
	text-wrap: balance;
}

.entry-content p,
.entry-content li,
.entry-content .fe-review,
.entry-content .fe-review-who,
.entry-content blockquote {
	text-wrap: pretty;
}

/* The service-card CTA is a short bold link that ends in the diode arrow glyph.
   Balance keeps "Get a free EV charger quote" from breaking to a lone trailing
   word, and the arrow is bound to the final word below so it can never strand
   on its own line. */
.fe-services .wp-block-column > p:last-child > a {
	text-wrap: balance;
}
/* <<< fusting:fe-widow-orphan-control-20260825 <<< */

/* >>> fusting:fe-diff-head-accent-20260825 >>> */
/* "Master Electrician" picked out inside the fe-whyus heading -- the licence is
   the whole selling point of that section, so it gets the same orange accent the
   hero already uses on "Severn" (.fe-hero-accent), for one consistent way of
   emphasising a phrase inside a heading rather than a second invented style. */
.entry-content .fe-diff-head .fe-diff-accent {
	color: #e36200;
}
/* <<< fusting:fe-diff-head-accent-20260825 <<< */

/* >>> fusting:fe-cta-widow-fix-20260825 >>> */
/* Service-card CTA widow, take two.
   text-wrap:balance/pretty only apply to a BLOCK container. The first attempt
   targeted the inline <a>, so it was inert and "quote" still dropped to a line
   of its own. Target the wrapping <p> instead, and bind the final two words
   with a non-breaking space at the CSS level is not possible -- so balance on
   the block is the fix, verified by counting words on the last visual line. */
.fe-services .wp-block-column > p:last-child {
	text-wrap: balance;
}
/* <<< fusting:fe-cta-widow-fix-20260825 <<< */

/* >>> fusting:fe-reviews-area-polish-20260825 >>> */
/* City on its own line in each review attribution. The name/job/city used to be
   one run, so the separator dot could strand at the end of a line ("Charmaine B.
   · Troubleshooting" / "· Pasadena"). The city is now its own block, and the
   leading separator went with it. */
.fe-reviews .fe-review-who .fe-review-city {
	display: block;
	margin-left: 44px;
}

/* Google mark in the rating badge, in place of the word "Google". */
.fe-reviews .fe-rev-card-meta .fe-g-logo {
	width: 16px;
	height: 16px;
	vertical-align: -3px;
	margin-right: 7px;
	display: inline-block;
}

/* "Read them all on Google" now sits under the cards. */
.fe-reviews .fe-rev-readall {
	margin-top: 32px;
}

/* Service-area town list: it was inheriting the full section width and running
   almost edge to edge on a wide screen, far wider than the intro paragraph above
   it. Constrain it so it wraps into a few tidy centred rows instead of one very
   long line. */
.fe-area .fe-towns {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
/* <<< fusting:fe-reviews-area-polish-20260825 <<< */

/* >>> fusting:fe-towns-width-20260825 >>> */
/* Town list width, take two.
   .fe-area .fe-towns (0,2,0) lost to the section-shell rule
   .ast-page-builder-template .entry-content[data-ast-blocks-layout]
     :is(...).alignfull > *  which is (0,5,0) and pins every direct child of the
   section to --fe-shell (1180px). Match that shape so the override actually
   wins, instead of reaching for !important. */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] .fe-area.alignfull > .fe-towns {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
/* <<< fusting:fe-towns-width-20260825 <<< */

/* >>> fusting:fe-reviews-layout-and-marker-20260825 >>> */
/* ---------------------------------------------------------------------------
   1) Review attribution: name + job on row one, city directly underneath.
      .fe-review-who is a FLEX row (avatar + text). Setting the city to
      display:block did nothing useful -- a block child of a flex container is
      still a flex ITEM, so the city sat BESIDE the text in its own column and
      squeezed "Odenton" into "Odento / n". The fix is to let the row wrap and
      give the city a full-width basis so it is pushed onto its own line.
   --------------------------------------------------------------------------- */
.fe-reviews .fe-review-who {
	flex-wrap: wrap;
}

.fe-reviews .fe-review-who .fe-review-city {
	flex: 0 0 100%;
	display: block;
	/* line up under the name, clearing the avatar (33px) + the 11px flex gap */
	margin-left: 44px;
	margin-top: 2px;
}

/* 2) Five big stars under the Reviews eyebrow. */
.fe-reviews .fe-rev-bigstars {
	color: #f5a623;
	font-size: clamp(28px, 3.4vw, 40px);
	letter-spacing: 0.06em;
	line-height: 1;
	margin: 0 0 14px;
}

/* 3) The rating badge now sits BELOW the review cards rather than beside the
      heading, and carries the "Read them all on Google" link inside it. */
.fe-reviews .fe-rev-cardwrap {
	display: flex;
	justify-content: center;
	margin-top: 36px;
}

.fe-reviews .fe-rev-cardwrap .fe-rev-card {
	display: inline-flex;
	align-items: center;
	gap: 18px;
}

.fe-reviews .fe-rev-card-link {
	margin: 6px 0 0;
	font-size: 0.875rem;
}

/* ---------------------------------------------------------------------------
   4) Circuit marker: drop the diode's cathode bar.
      The mark was lead + triangle + vertical bar + lead (a diode). Ceanne
      pointed at a digital-buffer symbol as the reference, which is the same
      shape WITHOUT that bar, so the `M18 3 L18 13` path is removed from all
      three variants. Kept in one place so the FAQ markers and the inline
      service-card arrows stay the same symbol as each other.
   --------------------------------------------------------------------------- */
:root {
	--fe-diode: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 8 H8'/%3E%3Cpath d='M8 3 L8 13 L18 8 Z'/%3E%3Cpath d='M18 8 H28'/%3E%3C/g%3E%3C/svg%3E");
	--fe-diode-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Cg stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 8 H8' fill='none'/%3E%3Cpath d='M8 3 L8 13 L18 8 Z' fill='black'/%3E%3Cpath d='M18 8 H28' fill='none'/%3E%3C/g%3E%3C/svg%3E");
	--fe-diode-inline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 8 H8'/%3E%3Cpath d='M8 3 L8 13 L18 8 Z'/%3E%3Cpath d='M18 8 H28'/%3E%3C/g%3E%3C/svg%3E");
}
/* <<< fusting:fe-reviews-layout-and-marker-20260825 <<< */

/* >>> fusting:fe-attrib-badge-story-tidy-20260825 >>> */
/* 1) Attribution: kill the gap between the name row and the city row.
      .fe-review-who is a wrapping flex row with gap:11px, and that gap applies
      to the ROW axis too once it wraps, so the city sat ~11px lower than it
      should. Keep the horizontal gap, zero the vertical one. */
.fe-reviews .fe-review-who {
	gap: 0 11px;
}

.fe-reviews .fe-review-who .fe-review-city {
	margin-top: 0;
}

/* 2) Rating badge sits to the RIGHT under the review grid. */
.fe-reviews .fe-rev-cardwrap {
	justify-content: flex-end;
}

/* 3) The story paragraph ran the full 1180px shell, so lines were far longer
      than comfortable reading measure. Constrain it and centre it. */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] .fe-story.alignfull .fe-story-lede,
.ast-page-builder-template .entry-content[data-ast-blocks-layout] .fe-story.alignfull > p {
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
}
/* <<< fusting:fe-attrib-badge-story-tidy-20260825 <<< */

/* >>> fusting:fe-badge-align-fix-20260825 >>> */
/* The badge wrapper is a Gutenberg "constrained" group, so its inner width was
   capped well short of the review grid and justify-content:flex-end aligned it
   to that narrower box (right edge 789px vs the grid's 1230px). Let the wrapper
   span the grid so "right" means the same right. */
.fe-reviews .fe-rev-cardwrap {
	width: 100%;
	max-width: none;
}
/* <<< fusting:fe-badge-align-fix-20260825 <<< */

/* >>> fusting:fe-financing-prequalify-orange-20260825 >>> */
/* Financing page: the Wisetack-supplied "PREQUALIFY NOW" button and the
   "Prequalify today" inline link both ship in Wisetack's own blue. Bring them
   onto the brand orange so the page matches every other CTA on the site.
   Scoped to the financing page markup (.btn-code-example / .link-blue come from
   Wisetack's embed snippet, not from the theme). */
.btn-code-example.w-button {
	background-color: #e36200 !important;
	border-color: #e36200 !important;
}

.btn-code-example.w-button:hover,
.btn-code-example.w-button:focus-visible {
	background-color: #c85600 !important;
	border-color: #c85600 !important;
}

a.link-blue {
	color: #e36200;
}
/* <<< fusting:fe-financing-prequalify-orange-20260825 <<< */

/* >>> fusting:fe-homepage-2026-08-25-terms-ig-area >>> */
/* ---------------------------------------------------------------------------
   fe-terms-link restyle (Ceanne 2026-08-25): "Small muted grey Terms apply,
   underlined on hover only." Supersedes the bold-orange-with-arrow treatment
   from fe-homepage-v2-round13 -- same selector specificity (0,3,0)/(0,2,0),
   this block sits later in the sheet so it wins the cascade. Text itself was
   changed in the page content ("Full terms"/"full terms" -> "Terms apply").
   --------------------------------------------------------------------------- */
.entry-content:has(.fe-hero) .fe-terms-link,
.entry-content:has(.fe-hero) .fe-terms-link:visited {
	display: inline !important;
	margin-left: 0 !important;
	font-size: 0.8125rem !important;
	font-weight: 400 !important;
	color: #6b6b6b !important;
	white-space: normal !important;
	text-decoration: none !important;
}

.fe-reviews .fe-terms-link,
.fe-reviews .fe-terms-link:visited,
.fe-cta .fe-terms-link,
.fe-cta .fe-terms-link:visited {
	color: #b9b9b9 !important;
}

.entry-content:has(.fe-hero) .fe-terms-link::after {
	content: none;
}

.entry-content:has(.fe-hero) .fe-terms-link:hover,
.entry-content:has(.fe-hero) .fe-terms-link:focus-visible {
	text-decoration: underline !important;
}

/* ---------------------------------------------------------------------------
   Instagram section (Ceanne 2026-08-25): eyebrow + h2 to match every other
   section (round9's active h2 clamp, not round7's older values), and bring
   the Smash Balloon plugin's two buttons in line with the site's own button
   treatment instead of its defaults (dark grey Load More, plain-link-styled
   orange Follow).
   --------------------------------------------------------------------------- */
.entry-content:has(.fe-hero) .fe-instagram h2 {
	font-size: clamp(29px, 3.6vw, 42px);
	line-height: 1.12;
	letter-spacing: -0.02em;
	max-width: 20ch;
	margin-left: auto;
	margin-right: auto;
}

.fe-instagram #sb_instagram > div:has(.sbi_load_btn) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 14px;
	margin-top: 8px;
}

.fe-instagram #sb_instagram .sbi_load_btn,
.fe-instagram #sb_instagram #sbi_load .sbi_load_btn,
.fe-instagram #sb_instagram .sbi_follow_btn a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 999px !important;
	padding: 16px 32px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	text-decoration: none !important;
	margin: 0 !important;
	position: static !important;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.fe-instagram #sb_instagram .sbi_load_btn,
.fe-instagram #sb_instagram #sbi_load .sbi_load_btn {
	background-color: transparent !important;
	color: #242424 !important;
	border: 1px solid #cfcfcf !important;
}

.fe-instagram #sb_instagram .sbi_load_btn:hover,
.fe-instagram #sb_instagram .sbi_load_btn:focus-visible,
.fe-instagram #sb_instagram #sbi_load .sbi_load_btn:hover,
.fe-instagram #sb_instagram #sbi_load .sbi_load_btn:focus-visible {
	background-color: #f2f2f2 !important;
	border-color: #a8a8a8 !important;
}

.fe-instagram #sb_instagram .sbi_follow_btn a,
.fe-instagram #sb_instagram .sbi_follow_btn a:visited {
	background-color: #e36200 !important;
	color: #16110d !important;
	border: 0 !important;
}

.fe-instagram #sb_instagram .sbi_follow_btn a:hover,
.fe-instagram #sb_instagram .sbi_follow_btn a:focus-visible {
	background-color: #cf5800 !important;
}

.fe-instagram #sb_instagram .sbi_follow_btn a svg {
	display: none;
}

/* ---------------------------------------------------------------------------
   fe-area intro (Ceanne 2026-08-25, revised): each sentence on one line
   whenever the screen is wide enough. Measured at 16px Montserrat 500:
   sentence 1 (with the "in Anne Arundel County" addition) = 927px,
   sentence 2 = 789px -- 960px fits the longer one with slack, and the section
   shell is 1180px so there's room. Astra's section-shell rule pins every
   direct child of .fe-area.alignfull to the shell at (0,5,0) -- match that
   pattern (as already done for .fe-towns) rather than a plain
   .fe-area .fe-sec-intro at (0,2,0), which loses silently. fe-intro-break is
   a span (not <br>/<wbr>) so the forced line is undoable in CSS alone.
   --------------------------------------------------------------------------- */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] .fe-area.alignfull > .fe-sec-intro {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

.fe-area .fe-sec-intro .fe-intro-break {
	display: block;
}

.fe-area .fe-sec-intro .fe-area-accent {
	color: #e36200;
}

/* ---------------------------------------------------------------------------
   Circuit-symbol spine (Ceanne 2026-08-25): the three fe-whyus icons keep
   their own short stub lines removed via clip-path (see the JS-drawn spine
   inserted after the icon list, which supplies those stubs as one continuous
   animated line broken only where a symbol's body sits). Percentages are the
   symbol's body range inside its own 0-64 viewBox:
     voltmeter body 16-48   -> inset(25% 0 25% 0)
     resistor  body 14-46   -> inset(21.875% 0 28.125% 0)
     ground    body 34-52, no lead-out (nothing below it in the list)
                            -> inset(53.125% 0 0 0)
   --------------------------------------------------------------------------- */
.fe-diff-list {
	position: relative;
}

.fe-whyus .wp-image-9919 {
	clip-path: inset(25% 0 25% 0);
}

.fe-whyus .wp-image-9920 {
	clip-path: inset(21.875% 0 28.125% 0);
}

.fe-whyus .wp-image-9921 {
	clip-path: inset(53.125% 0 0 0);
}

.fe-spine {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	overflow: visible;
	z-index: 0;
}

.fe-diff-item {
	position: relative;
	z-index: 1;
}

.fe-spine-path {
	fill: none;
	stroke: #e36200;
	stroke-width: 2.6px;
	stroke-linecap: square;
	transition: stroke-dashoffset 1.1s ease;
}

@media (prefers-reduced-motion: reduce) {
	.fe-spine-path {
		transition: none !important;
	}
}

/* ---------------------------------------------------------------------------
   Rating badge right-alignment (Ceanne 2026-08-25, corrects the earlier
   round-20260825 attempt). The wrapper (.fe-rev-cardwrap) already spans the
   full 1180px review-row width, but its CHILD .fe-rev-card sits inside a
   Gutenberg "constrained" layout group, and core's own
   `.is-layout-constrained > *` rule sets margin-inline:auto on that child --
   equal auto margins on both sides center it regardless of the wrapper's
   justify-content:flex-end. Four classes here (0,4,0) beats core's two-class
   rule so the override actually sticks; margin-right:0 (not auto) is what
   pushes the card to the wrapper's true right edge.
   --------------------------------------------------------------------------- */
.fe-reviews .fe-rev-cardwrap.is-layout-constrained > .fe-rev-card,
.fe-reviews .fe-rev-cardwrap > .fe-rev-card {
	/* Core's own .is-layout-constrained > :where(...) rule sets both margins
	   to auto with !important, which is what centers this card regardless of
	   specificity -- match its weight and rely on source order (Additional
	   CSS prints after core's block-support stylesheet) to win the tie. */
	margin-left: auto !important;
	margin-right: 0 !important;
}

/* Phone-number buttons: the hyphenated number is a valid line-break point in
   some browsers, so pin it as one unit. */
.wp-block-button__link[href^="tel:"] {
	white-space: nowrap;
}

/* Scroll-scrubbed draw where the browser supports it (Chrome 115+ etc.);
   IntersectionObserver in the JS handles the rest via a plain transition. The
   JS sets --fe-spine-len (the path's real drawn length) and stroke-dashoffset
   starts there; this keyframe scrubs it to 0 as the section enters view. */
@supports (animation-timeline: view()) {
	.fe-spine-scrubbed .fe-spine-path {
		stroke-dashoffset: var(--fe-spine-len, 0px);
		animation: fe-spine-draw linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 55%;
	}

	@keyframes fe-spine-draw {
		from { stroke-dashoffset: var(--fe-spine-len, 0px); }
		to { stroke-dashoffset: 0px; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.fe-spine-scrubbed .fe-spine-path {
		animation: none !important;
		stroke-dashoffset: 0px !important;
	}
}

/* ---------------------------------------------------------------------------
   Reviews header, restructured back to a two-column layout (Ceanne
   2026-08-25): badge moved back beside the header text instead of below the
   review grid, for vertical compactness. Left column (eyebrow/stars/h2/sub)
   stays left-aligned; the badge column sits at the right, vertically centred.
   --------------------------------------------------------------------------- */
.fe-reviews .fe-rev-h2 {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.fe-reviews .fe-rev-cardwrap {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	max-width: none;
}

.fe-reviews .fe-rev-cardwrap .fe-rev-card {
	margin-left: auto;
	margin-right: 0;
}

@media (max-width: 781px) {
	.fe-reviews .fe-rev-head {
		flex-wrap: wrap;
	}

	.fe-reviews .fe-rev-cardwrap {
		justify-content: flex-start;
		margin-top: 20px;
	}
}

/* ---------------------------------------------------------------------------
   Review-card attribution alignment (Ceanne 2026-08-25): quotes are different
   lengths, so the name/city line (and its hairline divider, which is a
   border-top on .fe-review-who itself) landed at different heights across a
   row. Make each card a column and pin the attribution to the bottom so all
   three in a row share one baseline regardless of quote length.
   --------------------------------------------------------------------------- */
.fe-reviews .fe-review-row {
	align-items: stretch;
}

.fe-reviews .fe-review {
	display: flex;
	flex-direction: column;
}

.fe-reviews .fe-review-who {
	margin-top: auto;
}

@media (max-width: 781px) {
	.fe-reviews .fe-review-who {
		margin-top: 18px;
	}
}

/* ---------------------------------------------------------------------------
   Restore the mobile tap-to-call circle (Ceanne 2026-08-25): the earlier
   above-the-fold pass hid .header-widget-area on mobile entirely on the
   theory the hero's own phone button covers the need. Ceanne wants it back
   even with a hamburger menu, so un-hide it; the header grows back toward its
   original height, which is an accepted tradeoff.
   --------------------------------------------------------------------------- */
@media (max-width: 781px) {
	.ast-header-break-point .header-widget-area {
		display: block !important;
	}

	.ast-header-break-point .site-header-primary-section-left,
	.ast-header-break-point .site-header-primary-section-right,
	.ast-header-break-point .site-header-section {
		min-height: auto !important;
	}
}

/* ---------------------------------------------------------------------------
   Town list line-wrap (Ceanne 2026-08-25): 720px wrapped to 3 rows (7/7/2),
   stranding "Columbia / Ellicott City" alone on a third line. `text-wrap:
   pretty` (inherited from the site-wide body rule) only optimises the LAST
   line of prose, which is the wrong tool for a wrapped list -- `balance`
   evens out every line. Widened past the bare half-of-1388px so balance has
   room to actually land on two rows instead of overflowing to three.
   Overrides fustingelectric-com's own fe-towns-width-20260825 block, which
   sits earlier in the file at the same (0,5,0)-matching specificity.
   --------------------------------------------------------------------------- */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] .fe-area.alignfull > .fe-towns {
	max-width: 850px;
	margin-left: auto;
	margin-right: auto;
	text-wrap: balance;
}
/* <<< fusting:fe-homepage-2026-08-25-terms-ig-area <<< */

/* >>> fusting:fe-circuit-stroke-variable-20260825 >>> */
/* ---------------------------------------------------------------------------
   Circuit line strokes: ONE variable, one colour, site-wide.
   Ceanne 2026-08-25: "ensure all circuit diagram shit, lines, etc. are all
   lines with a stroke & that stroke is a variable that changes site-wide."
   Change --fe-circuit-stroke / --fe-circuit-ink here and every CSS-drawn
   circuit wire follows. Previously each wire hard-coded 1px and #242424
   independently, so they could (and did) drift apart.
   --------------------------------------------------------------------------- */
/* The stroke token now lives ONLY in the plugin (assets/circuit-blocks.css).
   The :root override that used to sit here beat it site-wide, because Customizer
   CSS loads after the plugin stylesheet at equal specificity, so wires kept the
   old weight while symbols followed the plugin. Deleted 2026-08-25 - one source
   of truth. --fe-circuit-ink stays: it is this stylesheet's own colour token. */
:root {
	--fe-circuit-ink: #242424;
}

/* Only the two classes that still exist. .fe-circuit-box, the inductor row and
   .family-circuit-inductor were all replaced by plugin blocks on 2026-08-25. */
.family-circuit-row::after,
.family-circuit-return::after {
	height: var(--fe-circuit-stroke);
	background-color: var(--fe-circuit-ink);
	border-top-color: var(--fe-circuit-ink);
}
/* <<< fusting:fe-circuit-stroke-variable-20260825 <<< */

/* >>> fusting:fe-terms-link-grey-fix-20260825 >>> */
/* "Terms apply" must read as quiet body text, not a CTA: small, grey, underlined.
   ROOT CAUSE, fixed at source 2026-08-25: the site-wide rule
   `html:not(.fe-dark-active) body .entry-content a:not(.wp-element-button):not(.uagb-buttons-repeater)`
   carries `color:#b04e00 !important` at specificity (0,4,3) and was beating every
   override stacked here. Rather than escalate again, that rule now ends in
   `:not(.fe-terms-link)`, so this block simply styles the link. */
.entry-content .fe-terms-link,
.entry-content .fe-terms-link:link,
.entry-content .fe-terms-link:visited,
.entry-content .fe-terms-link:active,
.fe-whyus .fe-terms-link,
.fe-whyus .fe-terms-link:visited,
.fe-faq .fe-terms-link,
.fe-faq .fe-terms-link:visited {
	color: #6b6b6b !important;
	font-weight: 400 !important;
	font-size: 0.8125rem !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
}

/* On the dark reviews / CTA sections the same link needs a lighter grey. */
.fe-reviews .fe-terms-link,
.fe-reviews .fe-terms-link:visited,
.fe-cta .fe-terms-link,
.fe-cta .fe-terms-link:visited {
	color: #b9b9b9 !important;
}

.entry-content .fe-terms-link:hover,
.entry-content .fe-terms-link:focus-visible {
	text-decoration: underline !important;
}

.entry-content .fe-terms-link::after {
	content: none !important;
}
/* <<< fusting:fe-terms-link-grey-fix-20260825 <<< */


/* >>> fusting:fe-footer-4col-20260825 >>> */
/* ---------------------------------------------------------------------------
   Four-column content footer, on the black footer background.
   Astra Footer Builder owns the structure: Primary row = html-1 + social-icons-1,
   html-2, widget-2, widget-1; Below row = copyright. Background, column count,
   row/section alignment, social colours and the below-row separator are all NATIVE
   Astra settings. What is here is only what Astra ships no control for.

   Colours (all measured against #000, the new footer background):
     #f7f3ee  headings, brand                      19.01:1
     #cbc2b9  body and legal copy                  11.96:1
     #ffb877  links (DESIGN.md `link-on-dark`)     12.37:1
   The footer is black in both colour schemes, so `link-on-dark` is the right token
   here; `link-on-light` (#b04e00) would measure 3.71:1 on this background.
   ------------------------------------------------------------------------ */

/* ROOT CAUSE of the mid-word breaking ("Severn, Marylan / d").
   Astra's own theme CSS ships `.ast-builder-grid-row { overflow-wrap: anywhere }`,
   which inherits into every header and footer builder cell and lets the browser
   break ANY word at ANY point. Reset it on the same selector, same specificity,
   later in the cascade, so no !important arms race is needed. break-word is the
   safety valve: it only breaks a word that cannot fit on a line by itself. */
.ast-builder-grid-row {
	overflow-wrap: break-word;
}

.site-footer :where(p, li, a, h2, span) {
	word-break: normal;
	hyphens: none;
}

/* Column width. Astra's 4-equal grid is 1fr columns with a 110px gutter, which
   starved column one down to ~125px and wrapped its logo, copy and social row.
   Astra exposes no gutter control, so narrow it here; the columns widen to match. */
.site-primary-footer-wrap {
	padding-block: clamp(24px, 4.5vw, 60px) !important;
}

/* Astra's own 4-equal gutter (110px) is left alone - it reads well at 1440 and
   the column starvation was the flex-row stacking below, not the gutter. Only the
   row gap needs setting, for the stacked mobile order. */
.site-primary-footer-wrap .ast-builder-grid-row {
	grid-row-gap: 36px;
}

/* Astra lays each footer section out as a flex ROW, so column one put its social
   icons BESIDE the brand block and halved the width of both. Stack them. */
.site-footer .site-footer-section {
	align-items: flex-start;
}

.site-footer-primary-section-1 {
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.site-footer-primary-section-1 > * {
	width: 100%;
}

/* Brand lockup */
.site-footer .fe-ftr-logo {
	margin: 0 !important;
	line-height: 0 !important;
}

.site-footer .fe-ftr-logo img {
	display: block;
	width: 100%;
	max-width: 200px;
	height: auto;
}

.site-footer .fe-ftr-blurb {
	margin: 12px 0 0 !important;
	max-width: 34ch;
	font-size: 14px;
	line-height: 1.6 !important;
	text-wrap: pretty;
}

/* Column headings: Material 3 "title" role, one step above body at 600. */
.site-footer .fe-ftr-head {
	margin: 0 0 10px !important;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3 !important;
	letter-spacing: 0.01em;
	text-wrap: balance;
}

/* Link columns. 44px rows so the tap target never depends on the text height. */
.site-footer .fe-ftr-links,
.site-footer .fe-ftr-links li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.site-footer .fe-ftr-links li::marker {
	content: none;
}

.site-footer .fe-ftr-links a {
	display: block;
	padding-block: 12px;
	min-height: 44px;
	font-size: 14px;
	line-height: 1.4 !important;
	text-decoration: none;
}

.site-footer .fe-ftr-links a:hover,
.site-footer .fe-ftr-links a:focus-visible {
	text-decoration: underline;
}

/* Get in touch */
.site-footer .fe-ftr-phone {
	margin: 0 !important;
}

.site-footer .fe-ftr-phone a {
	display: inline-block;
	padding-block: 8px;
	min-height: 44px;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3 !important;
	text-decoration: none;
}

.site-footer .fe-ftr-phone a:hover,
.site-footer .fe-ftr-phone a:focus-visible {
	text-decoration: underline;
}

.site-footer .fe-ftr-nap {
	margin: 6px 0 14px !important;
	font-size: 14px;
	line-height: 1.6 !important;
}

.site-footer .fe-ftr-nap a {
	display: inline-block;
	padding-block: 11px;
	min-height: 44px;
	text-decoration: none;
}

.site-footer .fe-ftr-nap a:hover,
.site-footer .fe-ftr-nap a:focus-visible {
	text-decoration: underline;
}

.site-footer .fe-ftr-lic {
	margin: 0 !important;
	font-size: 14px;
	line-height: 1.6 !important;
}

/* Social row: one line at every width, even spacing, equal glyph size.
   Astra sizes the wrapper but lets the row wrap and lets each SVG keep its own
   intrinsic ratio, which is why Instagram rendered larger than its neighbours. */
.site-footer .ast-footer-social-wrap {
	width: 100%;
	margin-inline: 0;
	text-align: left;
}

.site-footer .footer-social-inner-wrap {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
}

.site-footer .ast-builder-social-element {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: 0 !important;
}

.site-footer .ast-builder-social-element svg {
	width: 21px;
	height: 21px;
}

/* Bottom bar */
.site-below-footer-wrap {
	padding-block: clamp(12px, 2vw, 18px) !important;
}

.site-below-footer-wrap .ast-footer-copyright p {
	margin: 0 0 2px !important;
	font-size: 13px;
	line-height: 1.6 !important;
}

.site-below-footer-wrap .ast-footer-copyright p:last-child {
	margin-bottom: 0 !important;
}

/* The three legal links must read identically. A theme-level rule
   `:where(footer, #infinite-footer) a[href*="privacy"] { font-weight: 700 }`
   was singling Privacy Policy out in bold; this normalises all three. */
.site-below-footer-wrap .ast-footer-copyright a {
	display: inline-block;
	padding: 11px 4px;
	min-height: 44px;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}

.site-below-footer-wrap .ast-footer-copyright a:hover,
.site-below-footer-wrap .ast-footer-copyright a:focus-visible {
	text-decoration: underline;
}

/* Colours. The footer is black in BOTH schemes now, so one set serves both. */
.site-footer .fe-ftr-head,
.site-footer .fe-ftr-brand,
.fe-dark-active .site-footer .fe-ftr-head {
	color: #f7f3ee !important;
}

.site-footer .fe-ftr-blurb,
.site-footer .fe-ftr-nap,
.site-footer .fe-ftr-lic,
.site-below-footer-wrap .ast-footer-copyright p,
.fe-dark-active .site-footer .fe-ftr-blurb,
.fe-dark-active .site-footer .fe-ftr-nap,
.fe-dark-active .site-footer .fe-ftr-lic,
.fe-dark-active .site-below-footer-wrap .ast-footer-copyright p {
	color: #cbc2b9 !important;
}

.site-footer .fe-ftr-links a,
.site-footer .fe-ftr-phone a,
.site-footer .fe-ftr-nap a,
.site-below-footer-wrap .ast-footer-copyright a,
.fe-dark-active .site-footer .fe-ftr-links a,
.fe-dark-active .site-footer .fe-ftr-phone a,
.fe-dark-active .site-footer .fe-ftr-nap a,
.fe-dark-active .site-below-footer-wrap .ast-footer-copyright a {
	color: #ffb877 !important;
}

/* Catch-all: the site-wide light-scheme rule lists `.site-footer a`, and its
   `link-on-light` token cannot pass on this black footer. Every footer link takes
   `link-on-dark` instead. */
.site-footer a:not(.ast-builder-social-element),
.fe-dark-active .site-footer a:not(.ast-builder-social-element) {
	color: #ffb877 !important;
}

/* Focus ring. WCAG 2.4.7 - Astra ships no control for this. */
.site-footer a:focus-visible,
.fe-dark-active .site-footer a:focus-visible {
	outline: 2px solid #f7f3ee;
	outline-offset: 3px;
	border-radius: 3px;
}

@media (max-width: 921px) {
	.site-footer .fe-ftr-blurb {
		max-width: none;
	}
}
/* <<< fusting:fe-footer-4col-20260825 <<< */

/* >>> fusting:fe-wordbreak-fixes-20260825 >>> */
/* Mid-word breaking, the cases left after the footer fix (Ceanne 2026-08-25:
   "dont let any words break"). The site-wide root cause was Astra's
   `.ast-builder-grid-row { overflow-wrap: anywhere }`, reset in the footer block
   above. These two are the remaining page-content cases, and both are the same
   shape: a container far too narrow for its text, so the fix widens the container
   rather than switching wrapping off and trading a break for an overflow. */

/* /tesla/ (page 5991) at tablet: the Spectra flex row keeps its two-up split all
   the way down to 768px, squeezing the estimate card to ~140px and the body column
   with it, so text renders one or two words per line and words split mid-word.
   Stack the split below the desktop breakpoint. Scoped to this page so other
   two-up rows on the site are untouched. */
@media (min-width: 768px) and (max-width: 921px) {
	body.page-id-5991 .entry-content .uagb-layout-flex {
		flex-wrap: wrap;
	}

	/* A floor, not a blanket 100%: any cell squeezed below 320px grows and pushes its
	   siblings onto the next line. An earlier `flex: 1 1 100%` on every nested
	   container did stack the row but blew the page out to 2391px at 375px wide. */
	body.page-id-5991 .entry-content .uagb-layout-flex > *,
	body.page-id-5991 .entry-content .uagb-icon-list__wrap > * {
		min-width: min(100%, 300px);
	}
}

/* Business-card pages: the email and domain are single unbreakable tokens and the
   heading carries `word-break: break-word`, which splits them at any character
   ("FustingElectri / c.com"). word-break:normal keeps the token whole;
   overflow-wrap:break-word stays as the last-resort valve, and the size step down
   at narrow widths is what actually makes the token fit on one line. */
body:is(.page-id-5770, .page-id-2370, .page-id-2719) .uagb-heading-text a,
body:is(.page-id-5770, .page-id-2370, .page-id-2719) .uagb-heading-text {
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: none;
}

@media (max-width: 480px) {
	body:is(.page-id-5770, .page-id-2370, .page-id-2719) .uagb-heading-text a {
		font-size: clamp(13px, 4.6vw, 18px);
	}
}

/* /about/ (page 1399) scrolled sideways at every width: the decorative circuit run
   `.fe-circuit__wire--end` is absolutely positioned at a fixed 1440px width and
   reached x=2214 on a 1440px viewport, with nothing clipping it. Measured live
   2026-08-25: body.scrollWidth 617 against a 375px viewport.

   Clipped rather than resized, because the wire geometry belongs to the circuit
   system that is still mid-migration and must not be redrawn from here. `clip`,
   not `hidden`: clip creates no scroll container, so absolutely positioned and
   sticky descendants keep the exact positions they have now. Verified live that
   the Astra off-canvas menu still opens full width (0 to 375) with the rule on,
   and scrollWidth drops from 617 to 375. */
body.page-id-1399 #page {
	overflow-x: clip;
}

/* Spectra button groups take the full row on phones instead of keeping a desktop
   width. Kept because it is the right mobile behaviour for these button groups.
   ⚠️ It did NOT fix the one case it was written for: a "Get a Free Quote" button
   on /does-my-electrician-need-to-be-licensed/ still measures a 102px anchor with
   a 50px inner label box at 375px and breaks "Quote" mid-word. That instance sits
   outside .entry-content, so this rule never matches it. Left as a known open
   issue rather than widened blindly across every Spectra button on the site. */
@media (max-width: 600px) {
	.entry-content .uagb-buttons__wrap > .wp-block-uagb-buttons-child {
		flex: 1 1 100%;
		max-width: 100%;
	}
}
/* <<< fusting:fe-wordbreak-fixes-20260825 <<< */

/* >>> fusting:fe-link-on-dark-bands-20260825 >>> */
/* link-on-dark for the page's dark bands (DESIGN.md, 2026-08-25).
   The site-wide content-link token is `link-on-light` #b04e00, which is correct on
   white, #f7f7f7, #faf1e9 and #f3f3f3 but measures only 3.39:1 on the #161616
   reviews / CTA bands. Measured live on /reviews/ and the homepage: "Read them all
   on Google" was rendering at 3.39:1. `link-on-dark` #ffb877 measures 12.37:1 on
   #000 and 11.67:1 on #0a0a0a, so these bands take that token instead. */
/* Real class specificity, NOT :where() - the site-wide rule this has to beat is
   `html:not(.fe-dark-active) body .entry-content a:not(.wp-element-button):not(.uagb-buttons-repeater)`
   at (0,4,3) with !important, and a :where() wrapper contributes nothing, so a
   first attempt at this rule silently lost. These land at (0,5,1). */
.entry-content .fe-reviews a:not(.wp-element-button):not(.wp-block-button__link):not(.uagb-buttons-repeater):not(.fe-terms-link),
.entry-content .fe-cta a:not(.wp-element-button):not(.wp-block-button__link):not(.uagb-buttons-repeater):not(.fe-terms-link) {
	color: #ffb877 !important;
}

/* "Terms apply" stays deliberately muted grey, but #6b6b6b measures 3.94:1 on the
   black canvas in the site's dark scheme. The lighter grey already used on the
   dark reviews / CTA bands (#b9b9b9, 10.7:1 on black) carries the same muted
   intent and clears AA. */
.fe-dark-active .fe-terms-link,
.fe-dark-active .fe-terms-link:link,
.fe-dark-active .fe-terms-link:visited,
.fe-dark-active .entry-content .fe-terms-link {
	color: #b9b9b9 !important;
}
/* <<< fusting:fe-link-on-dark-bands-20260825 <<< */

/* >>> fusting:fe-button-label-fit-20260825 >>> */
/* Spectra button rows inside post/page content.
   An earlier rule set every .wp-block-uagb-buttons-child to `flex: 1 1 100%`
   while the row stayed `flex-wrap: nowrap`, so two buttons on one row each
   asked for the full width, then shrank to min-content. At 375px that left
   a 106px anchor whose label wrapped to three lines and spilled out.
   Let the row wrap, let each button keep at least its label width, and hold
   a 44px minimum touch target. row-gap only applies once the row wraps, so
   side-by-side desktop spacing is untouched. */
.entry-content .uagb-buttons__wrap {
  flex-wrap: wrap;
  row-gap: 10px;
}
.entry-content .uagb-buttons__wrap > .wp-block-uagb-buttons-child {
  flex: 0 1 auto;
  min-width: min(100%, max-content);
  max-width: 100%;
}
.entry-content .uagb-buttons__wrap > .wp-block-uagb-buttons-child > .uagb-button__wrapper > a.uagb-buttons-repeater {
  min-height: 44px;
}

/* Same CTA, second button: the orange fill was painted on the wrapper div
   (square corners) instead of the rounded anchor, so a square orange block
   sat behind a transparent pill. Same colour, correct element. The
   html:not(.fe-dark-active) pair matches the specificity of the dark-scheme
   rule it corrects. */
body.postid-4046 .uagb-block-febtn002,
html:not(.fe-dark-active) body.postid-4046 .uagb-block-febtn002 {
  background: transparent !important;
}
body.postid-4046 .uagb-block-febtn002 > .uagb-button__wrapper > a.uagb-buttons-repeater,
html:not(.fe-dark-active) body.postid-4046 .uagb-block-febtn002 > .uagb-button__wrapper > a.uagb-buttons-repeater {
  background: var(--fe-orange) !important;
  border-color: var(--fe-orange) !important;
}

/* Holds a hyphenated token together so it cannot break mid-word: model
   numbers such as NEMA 14-50 on /tesla/, statute citations such as
   MD Code Business Occupations and Professions 6-101 on the licence post. */
.fe-nowrap {
  white-space: nowrap;
}
/* <<< fusting:fe-button-label-fit-20260825 <<< */

/* >>> fusting:fe-link-color-restraint-20260825 >>> */
/* Ceanne 2026-08-25, verbatim: "I don't like the light orange on black. I dont
   even like orange I only want it for calls to action highlight certain words
   etc." Retires DESIGN.md's link-on-light (#b04e00) / link-on-dark (#ffb877)
   pair: ordinary links no longer carry brand orange AT REST anywhere on the
   site. CTA buttons and the deliberate .fe-*-accent / highlight spans (hero
   "Master Electrician", .fe-area-accent, licence callouts) are UNTOUCHED -
   this block only ever targets plain <a> elements via the same :not(...)
   exclusions the rules it supersedes already used.
   Rest state: white (#f7f3ee, the site's own dark-mode text token) on dark
   backgrounds; near-black (#242424, the body-text token) on light
   backgrounds. Underline replaces colour as the link cue - the accessibility
   trade for removing colour as the signal.
   Hover: colour shifts to brand orange - acceptable because hover is
   transient, not a resting state, and it satisfies Ceanne's separate ask for
   the footer phone number to underline on hover (already underlined at rest
   here, so hover is differentiated by colour, not by adding underline).
   Layered LAST with !important to beat the existing orange rules
   (b04e00 / ffb877 / a94700 / ff9a47 / ffc08c) without editing 20+ scattered
   declarations in place across a heavily contended stylesheet. Those
   declarations are left as dead weight rather than deleted, so a future pass
   can retire them alongside this block; DESIGN.md's Content Links section
   carries the contrast table this note retires.
   FIX 2026-08-25 (v2): the light-scheme rule below was NOT wrapped in
   `@media not (prefers-color-scheme: dark)` on first pass, so it fired in
   dark mode too and painted near-black #242424 body-copy links (e.g. the
   "Tesla Support - Wall/Mobile Connector" sources on /tesla/, page 5991)
   onto a section that turns black under dark scheme - ~1.1:1 contrast,
   effectively invisible. Root cause: colour was being chosen by
   `html:not(.fe-dark-active)` (true whenever the manual dark TOGGLE isn't
   set) instead of by the section's actual rendered background, which is
   exactly the flaw `link-on-light`/`link-on-dark` had. Re-adding the media
   guard restores the split this stylesheet already uses everywhere else:
   `@media not (prefers-color-scheme: dark)` for light-surface links, the
   `@media (prefers-color-scheme: dark)` + `.fe-dark-active` pair below for
   dark-surface ones - so a body-copy link paints correctly whichever way a
   VISITOR'S OWN scheme is set, matching the actual black/white bands on the
   page rather than guessing from one flag. */

/* The two CSS custom properties that drive every "ordinary dark-mode link"
   rule already in the stylesheet (site-footer, #infinite-footer, entry-title
   links, reviews/CTA bands, and now any plain body-copy link, under
   .fe-dark-active or system dark). Redeclaring them here - same selectors,
   later in source - recolors every consumer at once. */
html.fe-dark-active {
	--fe-link: #f7f3ee !important;
	--fe-link-hover: #e36200 !important;
}

@media (prefers-color-scheme: dark) {
	html:not(.fe-dark-active) {
		--fe-link: #f7f3ee !important;
		--fe-link-hover: #e36200 !important;
	}
}

/* Generic "any ordinary link, dark scheme" rule - colour via the variables
   above PLUS underline (the pre-existing rule relied on colour alone). This
   is what recolors body-copy links like the Tesla support sources once the
   light-scheme rule below is correctly scoped out of dark mode. */
html.fe-dark-active :where(a:not(.wp-element-button):not(.uagb-buttons-repeater):not(.menu-link):not(.fe-card)) {
	color: var(--fe-link) !important;
	text-decoration: underline !important;
}

@media (prefers-color-scheme: dark) {
	html:not(.fe-dark-active) :where(a:not(.wp-element-button):not(.uagb-buttons-repeater):not(.menu-link):not(.fe-card)) {
		color: var(--fe-link) !important;
		text-decoration: underline !important;
	}
}

/* Ordinary links on light-scheme surfaces: #b04e00 -> #242424 + underline.
   MUST stay inside this media guard (see the v2 fix note above) or it wins
   over the dark-mode rule above on any visitor actually in dark mode. */
@media not (prefers-color-scheme: dark) {
	html:not(.fe-dark-active) body .entry-content a:not(.wp-element-button):not(.uagb-buttons-repeater):not(.fe-terms-link):not(.fe-card),
	html:not(.fe-dark-active) body :where(
		.entry-title a,
		.wp-block-post-title a,
		.read-more a,
		.post-navigation a,
		.nav-links a,
		.page-numbers:not(.current),
		.skip-link
	) {
		color: #242424 !important;
		text-decoration: underline !important;
	}

	/* #infinite-footer sits on a WHITE plate (background:#fff) in light
	   scheme - a94700 -> #242424 + underline, same reasoning as above. */
	html:not(.fe-dark-active) #infinite-footer .container a {
		color: #242424 !important;
		text-decoration: underline !important;
	}
}

/* Contact-card light plates (page-id-5770 / 2370, background:#f3f3f3): the
   plate is light in EVERY colour scheme (not media-query gated), so its link
   and icon fill match the plate's own #242424 body-text colour, not
   link-on-dark. */
body:is(.page-id-5770, .page-id-2370) :where(
	.uagb-block-75240aef,
	.uagb-block-792e4b3a,
	.uagb-modal-popup-content
) a:not(.wp-element-button) {
	color: #242424 !important;
	text-decoration: underline !important;
}

body:is(.page-id-5770, .page-id-2370) :where(.uagb-icon-wrapper, .uagb-modal-trigger) svg path {
	fill: #242424 !important;
}

/* Stephen's native-block contact card (page-id-2719) is an intentional DARK
   plate in every mode (its tel: button already renders white) - the LinkedIn
   link sitting in the same plate takes the same white, not near-black. */
body.page-id-2719 a[href*="linkedin.com/in/stephen-fusting"] {
	color: #f7f3ee !important;
	text-decoration: underline !important;
}

/* The footer is black in BOTH colour schemes - link-on-dark's white token,
   not link-on-light, and this catch-all beats every footer-scoped ffb877
   rule that came before it (fe-ftr-links/phone/nap/copyright + the generic
   .site-footer a catch-all). Not media-query gated: the footer is always
   dark regardless of visitor colour scheme. */
.site-footer a:not(.ast-builder-social-element) {
	color: #f7f3ee !important;
	text-decoration: underline !important;
}

/* Footer hover: colour shift to link-on-dark orange (12.37:1 on #000), kept
   from the pre-existing hover treatment - transient state, acceptable orange. */
.site-footer a:hover:not(.ast-builder-social-element),
.site-footer a:focus-visible:not(.ast-builder-social-element) {
	color: #ffb877 !important;
	text-decoration: underline !important;
}

/* Reviews / CTA dark bands (#161616) and the inline "Read them all on
   Google" link: same white-at-rest treatment as the footer. Not media-query
   gated: these bands are black in every colour scheme. */
.entry-content .fe-reviews a:not(.wp-element-button):not(.wp-block-button__link):not(.uagb-buttons-repeater):not(.fe-terms-link),
.entry-content .fe-cta a:not(.wp-element-button):not(.wp-block-button__link):not(.uagb-buttons-repeater):not(.fe-terms-link),
.fe-reviews .fe-rev-sub a {
	color: #f7f3ee !important;
	text-decoration: underline !important;
}

/* fusting:fe-area-accent-note-fix-20260825 - PRE-EXISTING bug found while
   verifying this block, fixed in the same pass. `.fe-area .fe-area-note`
   sets its paragraph text to muted grey (#5a5a5a), and "Anne Arundel",
   "Howard", "Licensed Master Electrician" and "Maryland license #15121" all
   live inside that paragraph as `.fe-area-accent` spans - but the ONLY
   existing rule that paints `.fe-area-accent` orange is scoped to
   `.fe-area .fe-sec-intro .fe-area-accent`, a DIFFERENT paragraph, so these
   four inherited the surrounding grey instead of orange. All four are on
   Ceanne's explicit "must stay orange" list. */
.fe-area .fe-area-note .fe-area-accent {
	color: #e36200 !important;
}

/* fusting:fe-camera-global-fallback-20260825 - --fe-camera was declared ONLY
   inside `.entry-content:has(.fe-hero)` (see the fe-hero styling block
   earlier in this stylesheet), so any page/button using --fe-camera WITHOUT
   a hero on the page (e.g. "Request an Estimate" on /services/, /faq/,
   /contact/ - anywhere .fe-cta appears without .fe-hero) got an invalid mask
   (undefined custom property -> `mask: none` -> no masking at all), and
   because the element also sets `background: currentColor`, the whole
   17x17px icon box painted solid black instead of masking to the camera
   glyph. A global :root fallback fixes every non-hero page in one place; the
   more specific .entry-content:has(.fe-hero) declaration still wins on hero
   pages (identical value, so no visual change there). */
:root {
	--fe-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h3.5l1.5-2h8l1.5 2H21v12H3z'/%3E%3Ccircle cx='12' cy='13' r='3.6'/%3E%3C/svg%3E");
}
/* <<< fusting:fe-link-color-restraint-20260825 <<< */

/* >>> fusting:fe-sentence-wrap-utility-20260825 >>> */
/* Ceanne 2026-08-25, verbatim: "can we do something as like a suggested word
   wrap? like when I start making the screen smaleer, I want the two
   sentences each on their own row" (COI block subhead on the homepage: at
   full width the two sentences share one line; as the viewport narrows the
   browser wraps wherever it runs out of room, which can land mid-link. This
   wants a break at the SENTENCE boundary instead.)

   GENERIC UTILITY - reusable on any subhead/hero-line/caption made of two (or
   more) short phrases that should share a line when they fit and stack whole
   when they don't. Wrap EACH sentence/phrase in its own <span> (or similar
   inline element) carrying this class; leave a normal space between them in
   the markup (inline-block preserves that inter-element whitespace as a
   regular space - do not strip it).

   Mechanism: `display: inline-block` makes each phrase a single wrap unit.
   Adjacent inline-block units share a line while they fit; the moment they
   don't, the browser drops the next unit to a new line WHOLE, rather than
   breaking wherever the text ran out (which is how "View our COI / and
   license" happened - a plain inline run has no unit boundary to prefer).

   Degrades, does not trap: `max-width: 100%` keeps a single inline-block from
   forcing the line wider than its container, and text INSIDE the inline-block
   still wraps normally at word boundaries - so a sentence too wide for the
   viewport on its own still wraps internally instead of overflowing. Verify
   at 320px specifically, not just 375: a long sentence in one inline-block is
   exactly how horizontal overflow happens, and no-mid-word-breaking is a
   standing site-wide rule (word-break/hyphens are intentionally left at their
   normal inherited values here - this utility does not change how a single
   phrase itself wraps or hyphenates). */
.fe-wrap-unit {
	display: inline-block;
	max-width: 100%;
}

/* Companion utility: a short inline link must never split across a line
   break, whether or not it sits inside a .fe-wrap-unit phrase (the COI
   subhead's failure mode was the break landing INSIDE the link text). Use
   only on short link text (a few words) - white-space:nowrap has no internal
   wrap fallback, so a long link would overflow instead of degrading. */
.fe-nowrap-link {
	white-space: nowrap;
}
/* <<< fusting:fe-sentence-wrap-utility-20260825 <<< */

/* >>> fusting:fe-footer-link-underline-hover-20260825 >>> */
/* Ceanne 2026-08-25, verbatim: "i dont like all the underlines in the footer.
   just make them chnage to orange on hover" - but the footer holds TWO kinds
   of link, and only one is safe to strip the underline from:

   (1) List/nav links - the Services column, the Company column, and the
       phone number (a standalone CTA-weight line, not sentence prose). A
       screen reader announces these as a list; colour + position already
       mark them as interactive. No underline at rest; hover/focus shifts to
       brand orange only (no underline change - already legible via colour).

   (2) Inline links sitting IN running text - "Contact Us" next to
       "Severn, MD 21144" in the Get In Touch block, and Privacy Policy /
       Cookie Policy / Terms and Conditions inline in the copyright line.
       With the underline gone AND the same white as the surrounding text,
       these would have no visible marker at all - a real regression, not a
       style choice. CHOSEN FIX: keep a subtle underline on these at rest
       (one of the three options offered); hover still shifts to orange.

   Keyboard focus is unaffected either way: `.site-footer a:focus-visible`
   (fusting:fe-footer-4col-20260825, earlier in this stylesheet) already
   draws a 2px solid outline regardless of underline/colour state.

   Contrast, footer background #000:
     white #f7f3ee (rest)              19.01:1
     brand orange #e36200 (hover)       6.01:1  <- passes 4.5:1, checked
   Brand orange DOES clear AA on pure black (DESIGN.md's own Content Links
   table already recorded this: 6.01:1 on #000, 5.67:1 on #0a0a0a), so no
   lighter substitute is needed for the footer specifically - it only fails
   on LIGHT backgrounds, which the footer never is. */

/* (1) List/nav links + phone: no underline at rest. */
.site-footer .fe-ftr-links a,
.site-footer .fe-ftr-phone a {
	text-decoration: none !important;
}

.site-footer .fe-ftr-links a:hover,
.site-footer .fe-ftr-links a:focus-visible,
.site-footer .fe-ftr-phone a:hover,
.site-footer .fe-ftr-phone a:focus-visible {
	color: #e36200 !important;
	text-decoration: none !important;
}

/* (2) Inline links: keep the underline, rest AND hover; hover still shifts
   to orange. fe-ftr-nap = "Contact Us" beside the street address;
   .ast-footer-copyright a = the three policy links in the copyright line. */
.site-footer .fe-ftr-nap a,
.site-below-footer-wrap .ast-footer-copyright a {
	text-decoration: underline !important;
}

.site-footer .fe-ftr-nap a:hover,
.site-footer .fe-ftr-nap a:focus-visible,
.site-below-footer-wrap .ast-footer-copyright a:hover,
.site-below-footer-wrap .ast-footer-copyright a:focus-visible {
	color: #e36200 !important;
	text-decoration: underline !important;
}

/* The copyright line now uses .fe-wrap-unit (fusting:fe-sentence-wrap-utility-
   20260825) so it degrades to "copyright on one line, links on another"
   instead of wrapping mid-run - Ceanne 2026-08-25: "when the display is
   shrunk i want the copyright on one line and the links on antoher." Centred
   alignment must hold on both lines; the existing
   `.site-below-footer-wrap .ast-footer-copyright p { text-align: ... }`
   inherited from Astra's own copyright-bar centring, unaffected by
   inline-block children. */
/* <<< fusting:fe-footer-link-underline-hover-20260825 <<< */


/* >>> fusting:fe-tesla-darkmode-20260825 >>> */
/* Page 5991 (/tesla/) dark-mode fixes, scoped to this page's own block
   classes only -- does not touch any other page or any existing rule.

   1) Badge light/dark swap. Each certification badge that needed a dark
      counterpart (Tesla Wall Connector Certified Installer -- both the
      hero placement and the trust-bar row copy -- the Maryland Master
      Electrician license glyph, and the Google "5.0" rating) now has TWO
      <img> elements in the markup: the original light-mode asset (existing
      classes wp-image-6336 / uag-image-6336 / uag-image-6322 / uag-image-
      6319) and a sibling .fe-badge-dark element carrying the recolored
      asset. Default = light version visible, dark version hidden; flipped
      under system dark scheme OR the site's manual .fe-dark-active toggle,
      matching the pattern already used for links elsewhere on this site
      (@media (prefers-color-scheme: dark) { html:not(.fe-dark-active) }
      paired with html.fe-dark-active). */
.fe-badge-dark { display: none; }

@media (prefers-color-scheme: dark) {
	html:not(.fe-dark-active) .fe-badge-dark { display: inline-block; }
	html:not(.fe-dark-active) .wp-image-6336,
	html:not(.fe-dark-active) .uag-image-6336,
	html:not(.fe-dark-active) .uag-image-6322,
	html:not(.fe-dark-active) .uag-image-6319 { display: none; }
}

html.fe-dark-active .fe-badge-dark { display: inline-block; }
html.fe-dark-active .wp-image-6336,
html.fe-dark-active .uag-image-6322,
html.fe-dark-active .uag-image-6336,
html.fe-dark-active .uag-image-6319 { display: none; }

/* 2) Charging-speed comparison chart: the three Tesla product photos are
   real photography with a white studio background baked into the raster
   file (JPEG/AVIF -- can't carry transparency), so on this page's black
   background they need a deliberate white "card" treatment rather than a
   floating unstyled white rectangle. Scoped to the three image wrappers
   inside the comparison chart only. */
.uagb-block-2b02ee47 .wp-block-uagb-image__figure,
.uagb-block-a0bcfb62 .wp-block-uagb-image__figure,
.uagb-block-108cd973 .wp-block-uagb-image__figure {
	background: #ffffff;
	border-radius: 8px;
	padding: 6px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
/* <<< fusting:fe-tesla-darkmode-20260825 <<< */

/* >>> fusting:fe-page-title-readable-stopgap-20260825 >>> */
/* STILL LIVE, verified 2026-09-01: this block's own selectors match 1 elements across eight live pages. The text below describes what it REPLACED, not this block. Do not delete it on the strength of the word retired -- re-run the match first. */
/* ---------------------------------------------------------------------------
   STOPGAP 2026-08-25 — page title was invisible (white on white).
   Root cause is NOT this rule: the dark-mode palette is declared on bare `html`
   (`html { --fe-text:#f7f3ee; --fe-bg:#000; … }`) instead of only on
   `html.fe-dark-active`, so `html .entry-title { color: var(--fe-text) !important }`
   paints EVERY heading near-white site-wide. That was invisible until Banner
   Layout 1 removed the dark image behind the page title.
   The real fix is scoping that palette to dark mode, which is a site-wide change
   and is being planned in the Additional CSS audit. This narrow override just
   keeps the title readable in the meantime. DELETE THIS once the palette is scoped.
   --------------------------------------------------------------------------- */
html:not(.fe-dark-active) body:not(.home) .entry-title,
html:not(.fe-dark-active) body:not(.home) .page-title {
	color: #242424 !important;
}
/* <<< fusting:fe-page-title-readable-stopgap-20260825 <<< */


/* >>> fusting:fe-cert-logos-sizing-20260825 >>> */
/* Trust-bar badge sizing — RESTORED 2026-08-25.

   The fusting:fe-cert-logos block removed its per-badge heights on the premise that the
   page content now carries "area-matched inline width/height attributes". It does not:
   the content carries inline style="width:60px;height:auto", and WordPress strips
   style= off core block images (the fe-cert-logos comment says so itself). WordPress
   then injects the FILE'S NATIVE dimensions as width/height attributes instead, so
   Leviton rendered at its native 432x432 and every badge stretched to the flex track
   (209px at 1440, 147px at 375 — measured live on 2026-08-25).

   Sizing therefore has to live in CSS. These are the worker's own area-matched values,
   read out of the inline styles in the page content, keyed to the stable wp-image-NNNN
   classes rather than to src filenames. Plain declarations, no !important: a stylesheet
   rule already beats an HTML presentational width/height attribute. */
.fe-cert-logos img.wp-image-6313 { width: 60px; height: auto; }   /* SPAN Authorized Installer */
.fe-cert-logos img.wp-image-6202 { width: 56px; height: auto; }   /* Leviton Certified EV Charging Installer */
.fe-cert-logos img.wp-image-5883 { width: 56px; height: auto; }   /* Annapolis Moms Thumbs Up Business */
.fe-cert-logos img.wp-image-6336 { width: 130px; height: auto; }  /* Tesla Wall Connector Certified Installer */
.fe-cert-logos img.wp-image-4482 { width: 79px; height: auto; }   /* Enphase EV Charger Recommended Installer */
.fe-cert-logos img.wp-image-8196 { width: 100px; height: auto; }  /* EcoFlow Authorized Installer */

/* Belt-and-braces: any badge added to this row later without its own rule still gets a
   sane cap instead of inheriting the full flex track width. */
.fe-cert-logos figure.wp-block-image img { max-width: 100%; }
/* <<< fusting:fe-cert-logos-sizing-20260825 <<< */

/* >>> fusting:fe-global-system-20260825 >>> */
/* ===========================================================================
   FE GLOBAL SYSTEM - theme-scoped design layer (Phase 2, 2026-08-25)
   Anything Astra can express natively lives in the Customizer, NOT here:
   heading family/size/weight (font-h1..h6 are now 700 with tablet + mobile
   steps), body font, buttons, container layout, link underline, palette.
   This block holds only what Astra has no setting for.
   =========================================================================== */

:root {
	/* Fluid vertical rhythm. ONE scale for every stacked section and for the
	   footer, so spacing shrinks with the viewport instead of carrying a
	   1440px-tuned value onto a 375px phone. */
	--fe-space-xs: clamp(8px, 1.2vw, 14px);
	--fe-space-sm: clamp(12px, 1.8vw, 20px);
	--fe-space-md: clamp(18px, 2.6vw, 28px);
	--fe-space-lg: clamp(24px, 3.6vw, 40px);
	--fe-space-xl: clamp(32px, 5vw, 56px);
	--fe-space-2xl: clamp(40px, 6.5vw, 80px);
	/* Comfortable reading measure for centred body prose. 54ch of Montserrat
	   at the 17px intro size is 612px, about 76 characters a line. The content
	   shell it replaces is 1180px, about 150 characters. */
	--fe-measure: 54ch;
	/* Astra publishes the blog card title weight as a CSS variable and never
	   sets it, so archive post titles fell back to normal (400) while every
	   other heading is 700. Setting Astra own hook rather than out-specifying
	   its rule. */
	--ast-blog-title-font-weight: 700;
}

/* --- Prose measure --------------------------------------------------------
   A centred intro paragraph inherits the 1180px content shell set by the
   --fe-shell rule above, so it runs far past a comfortable measure and its
   first character sits left of the narrower column beneath it. Capped once,
   here, for every page instead of per page.
   The selector deliberately mirrors the shell rule's shape: that rule is
   (0,5,0), so this one adds one more class to land at (0,6,0) and win without
   !important. .fe-area is EXCLUDED on purpose - its intro is the service-town
   list, which is meant to run wide at 960px. */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] :is(.fe-howquote,
	.fe-services, .fe-whyus, .fe-story, .fe-reviews, .fe-faq, .fe-cta,
	.fe-instagram).alignfull > :is(.fe-sec-intro, .fe-prose-measure) {
	max-width: min(100%, var(--fe-measure));
	margin-left: auto;
	margin-right: auto;
}

/* --- Fluid section rhythm, tablet and below -------------------------------
   Full-width sections author their own desktop padding block by block (28 to
   88px on the homepage). Below 921px that padding is the largest single
   contributor to page length after the content itself, so it is replaced by
   the fluid token. The hero sets its own zero padding and is excluded. */
@media (max-width: 921px) {
	body .entry-content[data-ast-blocks-layout] > .alignfull:is(.wp-block-spectra-container, .wp-block-uagb-container):not(.fe-hero) {
		padding-top: var(--fe-space-xl);
		padding-bottom: var(--fe-space-xl);
	}
}

/* --- Footer rhythm, tablet and below --------------------------------------
   Measured on staging at 375px BEFORE this pass: footer 1194px tall = 859px of
   column content + 108px of inter-column row-gap + 72px wrap padding + 155px
   below-footer. The 36px row-gap is a HORIZONTAL gutter tuned for the 4-column
   desktop row; once the columns stack it becomes vertical space and is the
   biggest non-content contributor. Line-height is NOT the main cause and stays
   above 1.4 so the address and licence number stay easy to read.
   The two padding values themselves live in fusting:fe-footer-4col-20260825
   (they carry !important there); their clamp floors were lowered rather than
   being overridden a second time here. */
@media (max-width: 921px) {
	.site-primary-footer-wrap .ast-builder-footer-grid-columns {
		row-gap: var(--fe-space-md);
	}

	/* The footer row is 2-up on mobile as of 2026-08-25 (Astra hb-footer-layout
	   mobile = 2-equal). Astra keeps emitting the DESKTOP 110px column gutter and
	   35px side padding at every width. At 375px that left only 99px per column
	   and overflowed the viewport by 6px; measured 4-line wrap on "Tesla Wall
	   Connector installation". Narrow both so the columns get a usable measure. */
	#colophon .site-primary-footer-wrap[data-section] .ast-builder-grid-row {
		grid-column-gap: var(--fe-space-sm);
		column-gap: var(--fe-space-sm);
		padding-left: var(--fe-space-sm);
		padding-right: var(--fe-space-sm);
	}

	/* A narrow measure needs less leading than a wide one. 1.5 sits well above
	   the 1.4 readability floor. */
	#colophon,
	#colophon p,
	#colophon li {
		line-height: 1.5;
	}
}
/* <<< fusting:fe-global-system-20260825 <<< */

/* >>> fusting:fe-divider-suppress-20260825 >>> */
/* STILL LIVE, verified 2026-09-01: this block's own selectors match 88 elements across eight live pages. The text below describes what it REPLACED, not this block. Do not delete it on the strength of the word retired -- re-run the match first. */
/* Footer circuit dividers stay hidden until the band divider is redesigned.
   Ceanne rejected the shipped version. This part is deliberate — keep it.

   The USP spine stopgap that used to live here has been REMOVED (2026-08-26).
   It was based on a wrong diagnosis. The scroll reveal DOES fire on production:
   measured in a visible Chrome, scrolling past the spine sets the path's inline
   transition to "stroke-dashoffset 1695ms cubic-bezier(0.4,0,0.2,1)" and animates
   stroke-dashoffset 542.27px -> 0px. What made it look broken was the stopgap
   itself — "stroke-dashoffset: 0 !important" beat the inline animated value and
   pinned the computed offset at 0 for the whole transition, so the wire was always
   fully drawn and the animation could never be seen.
   The original "the observer never triggers" reading came from measuring in a
   hidden/background tab, where requestAnimationFrame and IntersectionObserver are
   frozen and every IO test reports "never fires" regardless of the code. */

.fe-circuit-divider,
.fe-circuit-divider__wire,
.fe-circuit-divider__part { display: none !important; }
/* <<< fusting:fe-divider-suppress-20260825 <<< */

/* >>> fusting:fe-motion-slowdown-20260826 >>> */
/* Animation legibility pass, 2026-08-26.
   Ceanne: "make all the animations slower they're stilll hard to notice".

   Roughly 1.8x the previous durations. The USP spine is deliberately NOT retimed —
   it is already 1695ms and has never actually been visible (see the divider-suppress
   block); un-suppressing it is the change there. The Instagram load button and the
   mobile menu toggle are also left alone: those are affordance feedback, and slowing
   them makes the UI feel laggy rather than legible.

   NOTE ON THE REDUCE GUARDS BELOW — they are load-bearing, not boilerplate.
   The site's global reduce rule is html:not(.fe-dark-active) * { transition: 0.01ms },
   specificity (0,1,1). Every selector re-timed here is (0,3,x), so it OUT-RANKS the
   global rule. Without an explicit guard a slowed transition would keep running under
   prefers-reduced-motion. This also FIXES an existing bug: the inline link arrow
   already ignored reduced motion (measured 0.16s in both states before this block). */

/* FAQ circuit block. Rail height, branch width, diode rotate + fill and the panel
   reveal all read this one token, so the whole gesture slows together. */
.wp-block-fusting-circuit-faq.fe-circuit-faq { --fe-faq-duration: 480ms; }

/* Legacy FAQ marker chevron. */
.fe-faq .fe-faq-item > summary::before { transition: transform 0.4s; }

/* Inline link arrows on Services and the service-area list. */
.fe-services .wp-block-column > p:last-child > a::after,
.fe-area a::after { transition: transform 0.3s; }

/* The Services CTA reuses the homepage rating card, which is right-aligned beside a
   headline there. In a centred CTA it has to centre. */
.fe-cta .fe-rev-card { margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
	.wp-block-fusting-circuit-faq.fe-circuit-faq { --fe-faq-duration: 0.01ms; }
	.fe-faq .fe-faq-item > summary::before { transition: none; }
	.fe-services .wp-block-column > p:last-child > a::after,
	.fe-area a::after { transition: none; }
}
/* <<< fusting:fe-motion-slowdown-20260826 <<< */

/* >>> fusting:fe-panel-replacement-trustlist-20260826 >>> */
/* /electric-panel-replacement/ — trust list was collapsing and breaking words.
   2026-08-26.

   Symptom: the "Homeowners love Fusting Electric / Family Owned / Master Electrician
   Installed" list rendered in a ~70px column, one word per line, with words split
   mid-syllable ("Hom eow ners", "Fusti ng Elec tric"). Mid-word breaking is a hard
   site-wide rule.

   Cause: it is a Spectra LEGACY uagb-icon-list inside a nowrap flex row, so it gets
   squeezed to whatever is left after its siblings; an inherited overflow-wrap:anywhere
   then lets the text break inside words rather than overflow. Confirmed pre-existing,
   not caused by the full-width layout change — reverting that layout made the column
   NARROWER, not wider.

   Scoped to this block id rather than to .uagb-icon-list generally, because other
   pages use the same legacy block correctly and must not be touched. Proper fix is
   migrating this page off Spectra Legacy; this stops the visible damage until then. */

.wp-block-uagb-icon-list.uagb-block-7690f65b {
	flex: 1 1 320px;
	min-width: 260px;
}

.wp-block-uagb-icon-list.uagb-block-7690f65b,
.wp-block-uagb-icon-list.uagb-block-7690f65b * {
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

@media (max-width: 781px) {
	.wp-block-uagb-icon-list.uagb-block-7690f65b {
		flex-basis: 100%;
		min-width: 0;
	}
}
/* <<< fusting:fe-panel-replacement-trustlist-20260826 <<< */

/* >>> fusting:fe-pullquote-and-band-separation-20260826 >>> */
/* ---------------------------------------------------------------------------
   PULL QUOTE. Ceanne 2026-08-26: "we need space between the words and the
   quotes also I dont love the loook of those quote icons".
   The glyphs were rendering in Montserrat, whose quote marks are heavy
   squared-off slabs that read as two commas rather than quotation marks. A
   serif face gives the classic curved shape at the same size, and the marks
   now have real breathing room instead of touching the first and last word.
   Size is the live H3 token from DESIGN.md. Orange stays on the GLYPHS only,
   never the quoted words. The review text itself is untouched: verbatim or
   not at all.
   --------------------------------------------------------------------------- */
.fe-pullquote .fe-pullquote-blockquote {
	border-left: 0;
	padding-left: 0;
	position: relative;
}

.fe-pullquote .fe-pullquote-text {
	font-size: 30px;
	line-height: 1.3;
	font-weight: 600;
	color: #242424;
}

.fe-pullquote .fe-pullquote-text::before,
.fe-pullquote .fe-pullquote-text::after {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 3.25rem;
	font-weight: 400;
	line-height: 0;
	color: #e36200;
	vertical-align: -0.28em;
	display: inline;
}

.fe-pullquote .fe-pullquote-text::before {
	content: "\201C";
	margin-right: 0.16em;
}

.fe-pullquote .fe-pullquote-text::after {
	content: "\201D";
	margin-left: 0.16em;
}

.fe-pullquote .fe-pullquote-cite {
	font-size: 0.9375rem;
	color: #6b6b6b;
	margin-top: 0.75rem;
}

@media (max-width: 781px) {
	.fe-pullquote .fe-pullquote-text { font-size: 24px; }
	.fe-pullquote .fe-pullquote-text::before,
	.fe-pullquote .fe-pullquote-text::after { font-size: 2.5rem; }
}

/* ---------------------------------------------------------------------------
   BAND SEPARATION. Colour, not the circuit divider rejected 2026-08-25.
   .fe-whyus keeps its cream deliberately: that peach band is the approved look
   and it hosts the circuit spine. Spectra paints section background on a
   ::before, hence the override.
   --------------------------------------------------------------------------- */
.fe-bryan { background-color: #ffffff; }
.fe-bryan::before { background-color: #ffffff !important; }
.fe-coi { background-color: #faf1e9; }
/* <<< fusting:fe-pullquote-and-band-separation-20260826 <<< */

/* >>> fusting:fe-license-link-contrast-20260826 >>> */
/* The #15121 links added 2026-08-26 were rendering #242424 on the hero's
   #161616 card. Cause: an existing rule
   `html:not(.fe-dark-active) body .entry-content a:not(...)` sets
   color:#242424 !important and outranked a plain `.fe-hero .fe-proof-sub a`.
   The repeated [href] attribute selectors are deliberate specificity padding
   to clear that rule; verified live in Chrome, not assumed. */
html body .entry-content .fe-hero .fe-proof-sub a[href][href][href],
html body .entry-content .fe-licence-text .fe-proof-sub a[href][href][href] {
	color: #9a9a9a !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}
html body .entry-content .fe-hero .fe-proof-sub a[href][href][href]:hover,
html body .entry-content .fe-licence-text .fe-proof-sub a[href][href][href]:hover {
	color: #e36200 !important;
}
.fe-ftr-lic a {
	color: #f7f3ee !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.fe-ftr-lic a:hover { color: #e36200 !important; }
/* <<< fusting:fe-license-link-contrast-20260826 <<< */

/* >>> fusting:fe-howquote-line-anim >>> */
/* "Getting a price is easy" 1-2-3 connector lines, draw left to right.
   Two things this block has to respect, both found the hard way:

   1. The earlier version animated .fe-step-num::after, an 18px stub sitting
      behind the numbered ring on desktop, so nothing visible ever moved.
      The real lines are:
        desktop (>=782px) -> .fe-howquote .wp-block-columns::before
        stacked (<=781px) -> .fe-howquote .fe-step-num::after (100vw lead)

   2. BOTH of those already carry a transform of their own, and `transform`
      is a single property, so a keyframe that animates bare scaleX() WIPES
      it. Desktop's full-bleed rule centres the bar with
      `left:50%; width:100vw; transform:translateX(-50%)`, so dropping that
      translate shoved the whole line half a viewport to the right (this is
      exactly what Ceanne saw: line hanging off to the right of step 3).
      The stacked lead carries translateY(-50%) to sit on its ring's centre.
      So each keyframe below re-states its element's own transform and only
      adds scaleX to it. Do not "simplify" these back to bare scaleX().

   .fe-lines-go is added once, on first scroll-in, by the "Fusting step line
   draw" WPCode snippet. No class, no animation, so the lines just sit
   finished for anyone the observer never fires for. */

/* Desktop bar: keeps its centring translate. */
@keyframes fe-step-line-draw-h {
	from { transform: translateX(-50%) scaleX(0); }
	to   { transform: translateX(-50%) scaleX(1); }
}

/* Stacked lead: keeps its vertical centring translate. */
@keyframes fe-step-line-draw-v {
	from { transform: translateY(-50%) scaleX(0); }
	to   { transform: translateY(-50%) scaleX(1); }
}

/* Desktop: one continuous line, one draw. */
@media (min-width: 782px) {
	.fe-howquote.fe-lines-armed .wp-block-columns::before {
		transform-origin: left center;
		transform: translateX(-50%) scaleX(0);
	}
	.fe-howquote.fe-lines-go .wp-block-columns::before {
		animation: fe-step-line-draw-h 0.9s ease-out both;
	}
}

/* Stacked: three separate leads, strictly one after another. Each run is
   0.55s and the next starts at 0.55s, so a line always finishes before the
   next one starts. */
@media (max-width: 781px) {
	.fe-howquote.fe-lines-armed .fe-step-num::after {
		transform-origin: left center;
		transform: translateY(-50%) scaleX(0);
	}
	.fe-howquote.fe-lines-go .wp-block-column:nth-child(1) .fe-step-num::after {
		animation: fe-step-line-draw-v 0.55s ease-out 0s both;
	}
	.fe-howquote.fe-lines-go .wp-block-column:nth-child(2) .fe-step-num::after {
		animation: fe-step-line-draw-v 0.55s ease-out 0.55s both;
	}
	.fe-howquote.fe-lines-go .wp-block-column:nth-child(3) .fe-step-num::after {
		animation: fe-step-line-draw-v 0.55s ease-out 1.1s both;
	}
}

/* Reduced motion resolves to the finished state, never a half-drawn line.
   Each still re-states its own transform rather than using `none`, or the
   line would lose its centring and sit in the wrong place. */
@media (prefers-reduced-motion: reduce) {
	.fe-howquote.fe-lines-armed .wp-block-columns::before,
	.fe-howquote.fe-lines-go .wp-block-columns::before {
		animation: none;
		transform: translateX(-50%) scaleX(1);
	}
	.fe-howquote.fe-lines-armed .fe-step-num::after,
	.fe-howquote.fe-lines-go .fe-step-num::after {
		animation: none;
		transform: translateY(-50%) scaleX(1);
	}
}
/* <<< fusting:fe-howquote-line-anim <<< */

/* >>> fusting:fe-step-num-bare-circles-20260826 >>> */
/* Before a connector line is drawn, a numbered step is JUST a circle.
   Ceanne, 2026-08-26, universal rule: "make the numbers just be circles not
   circles with lines. for before the line gets drawn. that's a universal rule
   eveywehre."
   On desktop the two 18px stubs on either side of each ring were visible at
   rest, so the section read as three circles with little leads to nowhere
   until the real line arrived. The real desktop line is
   .wp-block-columns::before, which passes BEHIND the rings, so the stubs are
   redundant once it draws and wrong before it does. Hidden outright on
   desktop.
   Stacked layout is untouched: there .fe-step-num::before is already hidden by
   the fe-step-wiring block, and ::after IS the line that draws, so it must
   stay. It starts at scaleX(0), which is already "no line". */
@media (min-width: 782px) {
	.fe-howquote .fe-step-num::before,
	.fe-howquote .fe-step-num::after {
		display: none;
	}
}
/* <<< fusting:fe-step-num-bare-circles-20260826 <<< */

/* >>> fusting:fe-body-copy-black-20260826 >>> */
/* Body copy reads BLACK, not grey.
   Ceanne, 2026-08-26, pointing at an FAQ answer: "is this text dark grey? if
   so I want it black edit that everywhere."
   Three places carried #5a5a5a, a mid grey, for what is ordinary body copy:
   the FAQ answers, the service-area note, and the person role line under the
   About headshots. All three become #000000 here.
   Deliberately NOT changed: the site-wide body token #242424 (a near-black),
   which is the canonical value in ~/.config/fusting-electric/DESIGN.md. That
   is a brand-token change, not a one-off, so it stays until Ceanne says so. */
.fe-faq .fe-faq-item > :not(summary),
.fe-area .fe-area-note,
.fe-story .fe-person-role {
	color: #000000;
}
/* <<< fusting:fe-body-copy-black-20260826 <<< */

/* >>> fusting:fe-hero-proof-responsive-20260826 >>> */
/* Hero proof card: never crush, wrap instead.
   The card is a nowrap flex row (5.0 rating | MD seal + licence). The hero
   column it sits in is `flex: 0 1 54%`, so between the desktop layout and the
   mobile stack the column narrows enough that the licence text box was being
   squeezed toward zero and "MD Master Electrician" wrapped one or two letters
   per line. Ceanne's rule: things adjust responsively and do not stack for no
   reason, and nothing should ever break mid-word.

   Fix is two parts:
   1. A real minimum on each half, so the flex container is forced to WRAP to a
      second row (a reason to stack) rather than keep shrinking the text.
   2. A word-breaking safety net, so even in an unforeseen squeeze the text
      breaks between words, never inside them. */
.fe-hero .fe-proof {
	flex-wrap: wrap;
	row-gap: 0;
}

.fe-hero .fe-proof-rating,
.fe-hero .fe-proof-licence {
	flex: 1 1 auto;
	min-width: 190px;
}

.fe-hero .fe-licence-lockup,
.fe-hero .fe-licence-text {
	min-width: 0;
}

/* Safety net. `min-width: 0` on a flex child permits an overflow-driven
   character break; these keep any break on a word boundary. */
.fe-hero .fe-proof-licence-num,
.fe-hero .fe-proof-licence .fe-proof-sub,
.fe-hero .fe-proof-rating .fe-proof-sub {
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

/* Once the two halves wrap onto separate rows the vertical seam is wrong, so
   it becomes a horizontal one. Matched to the min-width above: two 190px
   halves plus the card's own padding stop fitting side by side below roughly
   this width. */
@media (min-width: 782px) and (max-width: 1040px) {
	.fe-hero .fe-proof-rating,
	.fe-hero .fe-proof-licence {
		flex: 1 1 100%;
	}
	.fe-hero .fe-proof-licence {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		padding-left: 0;
		padding-top: 14px;
		margin-top: 14px;
	}
}
/* <<< fusting:fe-hero-proof-responsive-20260826 <<< */

/* >>> fusting:fe-license-insurance-page-20260826 >>> */
/* /license-and-insurance/ — proof card + document images.
   The card deliberately mirrors the homepage hero's .fe-proof card (dark
   panel, big figure on the left, MD seal lockup on the right) so a visitor
   who saw it on the homepage recognises the same shape here. New class
   names because the hero rules are all scoped `.fe-hero ...` and will not
   fire outside it. */
.fe-lic-intro {
	font-size: 1.125rem;
	line-height: 1.6;
	max-width: 46rem;
}

.fe-lic-proof {
	background: #161616;
	border: 1px solid rgba(255, 255, 255, 0.12);
	padding: 28px 24px;
	margin: 28px 0 40px;
	gap: 0;
	align-items: stretch;
}

.fe-lic-cell {
	flex: 1 1 260px;
	min-width: 0;
	text-align: center;
	padding: 4px 28px;
}

/* One seam only, drawn by the second cell, same technique the hero card uses. */
.fe-lic-cell-lic {
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}

/* The dollar figure and the seal are different natural heights, so each cell's
   top element gets the same fixed box. Without this the two "General liability
   coverage" / "MD Master Electrician" labels sit at different heights and the
   card reads as broken. */
.fe-lic-figure,
.fe-lic-seal {
	height: 62px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}

.fe-lic-figure {
	font-size: 2.5rem;
	font-weight: 700;
	color: #ffffff;
	line-height: 1;
}

.fe-lic-seal img {
	width: 56px;
	height: auto;
}

.fe-lic-label {
	font-size: 1.0625rem;
	font-weight: 700;
	color: #ffffff;
	margin: 12px 0 0;
	line-height: 1.3;
}

.fe-lic-sub {
	font-size: 0.875rem;
	color: #9a9a9a;
	margin: 6px 0 0;
	line-height: 1.45;
	min-height: 2.6em;
}

.fe-lic-link {
	margin: 10px 0 0;
	font-size: 0.9375rem;
	font-weight: 700;
}

html body .entry-content .fe-lic-link a[href][href][href] {
	color: #e36200 !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

html body .entry-content .fe-lic-link a[href][href][href]:hover {
	color: #ffffff !important;
}

.fe-lic-h2 {
	margin-top: 48px;
}

/* The certificate and the licence: a plain image on a drop shadow that opens
   the real PDF, instead of an embedded PDF viewer. The viewer shipped its own
   toolbar, thumbnail rail and zoom control, and collapsed to an unreadable
   postage stamp on a phone. */
.fe-lic-doc {
	margin: 24px 0 8px;
	max-width: 100%;
}

.fe-lic-doc img {
	max-width: 100%;
	height: auto;
	border: 1px solid rgba(0, 0, 0, 0.12);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
	display: block;
}

.fe-lic-doc a {
	display: block;
}

.fe-lic-doc figcaption {
	font-size: 0.8125rem;
	color: #6b6b6b;
	margin-top: 10px;
}

.fe-lic-rule {
	margin: 52px 0 0;
}

@media (max-width: 700px) {
	.fe-lic-cell {
		flex: 1 1 100%;
		padding: 18px 0;
	}
	.fe-lic-cell-lic {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}
	.fe-lic-proof {
		padding: 20px 18px;
	}
	.fe-lic-sub {
		min-height: 0;
	}
}
/* <<< fusting:fe-license-insurance-page-20260826 <<< */

/* >>> fusting:fe-license-insurance-page-spacing-20260826 >>> */
/* Spacing patch for the /license-and-insurance/ proof card.
   The base rules live in fusting:fe-license-insurance-page-20260826. Astra's
   own `.entry-content p` margin (0,1,1) outranks a bare `.fe-lic-figure`
   (0,1,0), so the dollar figure kept a ~1.5em bottom margin the seal did not
   have and the two column labels sat ~30px apart. Verified live in Chrome
   2026-08-26. Prefixing with .entry-content wins the cascade honestly, no
   !important needed. */
.entry-content .fe-lic-figure,
.entry-content .fe-lic-seal {
	height: 62px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 0 0;
}

.entry-content .fe-lic-label {
	margin: 12px 0 0;
}

.entry-content .fe-lic-sub {
	margin: 6px 0 0;
}

.entry-content .fe-lic-link {
	margin: 10px 0 0;
}

.entry-content .fe-lic-intro {
	margin-bottom: 0;
}
/* <<< fusting:fe-license-insurance-page-spacing-20260826 <<< */

/* >>> fusting:fe-license-insurance-split-20260826 >>> */
/* Two-column layout for /license-and-insurance/ — the certificate and the
   licence side by side. Promoted from the staging preview page 2026-08-26
   after Ceanne picked this variant over the stacked one.
   The headings are the site's normal h2 scale, which wraps to three and four
   lines inside a half-width column, so they step down here. The two documents
   are genuinely different shapes (the certificate is a full portrait page,
   the licence is a short landscape band), so the columns are top-aligned and
   each document is capped rather than stretched to match the other. */
.fe-lic-split {
	gap: 48px;
	align-items: flex-start;
	margin-top: 40px;
}

.fe-lic-split .fe-lic-h2 {
	font-size: 1.75rem;
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 18px;
}

.fe-lic-split .fe-lic-doc {
	margin-top: 0;
}

.fe-lic-split .fe-lic-doc img {
	width: 100%;
}

@media (max-width: 781px) {
	.fe-lic-split {
		gap: 40px;
	}
	.fe-lic-split .fe-lic-h2 {
		font-size: 1.5rem;
	}
}
/* <<< fusting:fe-license-insurance-split-20260826 <<< */

/* >>> fusting:fe-license-mobile-order-20260827 >>> */
/* /license-and-insurance/ on a phone: keep insurance with insurance and the
   licence with the licence.

   Document order is intro -> proof card (insurance cell, licence cell) ->
   columns (COI doc, licence doc). Stacked naively that reads
   $1M, licence #, COI, licence image -- the two insurance items split apart.
   Ceanne wants $1M -> COI -> licence # -> licence image (2026-08-27).

   The proof card and the columns block are SIBLINGS in .entry-content, so no
   single container can reorder across both. Both go display:contents at the
   phone breakpoint, which promotes their children to flex items of
   .entry-content, and order: does the interleaving there. Scoped to
   .page-id-4257 -- .entry-content must never become a flex container sitewide.

   781px matches WordPress core's own column-stacking breakpoint, so the
   reorder switches on exactly when the two columns collapse. */
@media (max-width: 781px) {

	.page-id-4257 .entry-content {
		display: flex;
		flex-direction: column;
		gap: 40px;
	}

	.page-id-4257 .fe-lic-proof,
	.page-id-4257 .fe-lic-split {
		display: contents;
	}

	.page-id-4257 .entry-content > .fe-lic-intro { order: 1; }
	.page-id-4257 .fe-lic-cell-ins { order: 2; }
	.page-id-4257 .fe-lic-split > .wp-block-column:first-child { order: 3; }
	.page-id-4257 .fe-lic-cell-lic { order: 4; }
	.page-id-4257 .fe-lic-split > .wp-block-column:last-child { order: 5; }

	/* The gap above owns all the vertical rhythm now, so the items must not
	   also carry their own margins or the spacing doubles. */
	.page-id-4257 .entry-content > .fe-lic-intro,
	.page-id-4257 .fe-lic-cell-ins,
	.page-id-4257 .fe-lic-cell-lic,
	.page-id-4257 .fe-lic-split > .wp-block-column {
		margin: 0;
		flex: 0 0 auto;
	}

	/* display:contents removes .fe-lic-proof's box, so each cell has to carry
	   the dark card itself. Two cards instead of one split card -- which is
	   the point: each one now sits with the document it describes. The
	   700px rules zero out .fe-lic-cell-lic's left border for the old
	   single-card seam; re-assert a full border here. */
	.page-id-4257 .fe-lic-cell {
		background: #161616;
		border: 1px solid rgba(255, 255, 255, 0.12);
		padding: 22px 18px;
	}
	.page-id-4257 .fe-lic-cell-lic {
		border-left: 1px solid rgba(255, 255, 255, 0.12);
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}
}
/* <<< fusting:fe-license-mobile-order-20260827 <<< */

/* >>> fusting:fe-panel-hero-proportions-20260827 >>> */
/* /electric-panel-replacement/ hero row: the family photo was eating the row.

   Measured live 2026-08-27 at a 1440px window: the row is 937px, the photo's
   container took 715px of it, and the three trust bullets beside it were
   crushed to 195px -- roughly one word per line, unreadable (Ceanne: "teh imag
   of us is way too big"). The photo container is flex: 0 1 auto with a
   content-derived basis, so it never yields; the bullets absorbed the whole
   overflow instead.

   Cap the photo and let the bullets take the rest. Percentage basis so it
   still scales down between 782px and desktop, with a hard ceiling so it can
   never dominate again.

   Block hashes (uagb-block-*) come from the saved Spectra markup and are
   stable while the block exists; the :has() rule below repeats the cap keyed
   on the attachment's own class as a backstop if the block is ever rebuilt.
   They are separate rules on purpose -- a :has() in a shared selector list
   invalidates the whole list in a browser that does not support it. */
@media (min-width: 782px) {

	.page-id-6943 .uagb-block-de0f9f4a {
		gap: 36px;
		align-items: flex-start;
	}

	.page-id-6943 .uagb-block-3c52cef8 {
		flex: 0 0 38%;
		max-width: 380px;
		min-width: 240px;
	}

	.page-id-6943 .uagb-block-7690f65b {
		flex: 1 1 auto;
		min-width: 0;
	}
}

@media (min-width: 782px) {
	.page-id-6943 .wp-block-uagb-container:has(> .wp-block-uagb-image .uag-image-9175) {
		flex: 0 0 38%;
		max-width: 380px;
		min-width: 240px;
	}
}
/* <<< fusting:fe-panel-hero-proportions-20260827 <<< */

/* >>> fusting:fe-sec-eyebrow-centring-20260827 >>> */
/* The orange section eyebrow must actually centre.

   A Spectra container is a flex column. Where its align-items is flex-start
   (the FAQ page's containers, unlike the homepage's) every child shrink-wraps,
   so the eyebrow paragraph became 90px wide and its own text-align: center had
   nothing to centre inside -- it read as left-aligned under a centred heading.
   Measured live 2026-08-27: "QUESTIONS" sat at 140..231 inside a 140..1060
   content box.

   Give it the full line so text-align does the work, the same way the heading
   beside it already behaves. Harmless where the parent already centres: the
   text lands in the same place either way. */
.entry-content .wp-block-spectra-container > .fe-sec-eyebrow {
	width: 100%;
}
/* <<< fusting:fe-sec-eyebrow-centring-20260827 <<< */

/* >>> fusting:fe-faq-cta-full-bleed-20260827 >>> */
/* FAQ closing CTA: black band edge to edge, text still on the reading measure.
   Ceanne, 2026-08-27: "make ask us anything else full width background but
   cosntrained text."

   Two ancestors were capping the paint, not one. Measured live at a 1900px
   viewport: Astra's boxed layout caps .ast-container at 1040px, and the shared
   --fe-shell rule caps .fe-cta at 1180px. The block's own alignfull breakout
   only reached 1000px, so the band read as a floating black rectangle.

   A max-width release alone cannot escape .ast-container -- it just refills the
   800px content column (that is exactly what the first version of this block
   did, and it made the band NARROWER). The viewport-margin trick is what
   actually breaks out: 50% resolves against the content column, 50vw against
   the window, so the negative margin is precisely the gutter on each side.
   Verified no ancestor sets overflow-x: hidden, so this cannot clip. */
.page-id-1401 .entry-content[data-ast-blocks-layout] .fe-cta {
	max-width: none;
	width: auto;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Put the reading measure back on the contents so only the paint went wide. */
.page-id-1401 .entry-content .fe-cta > * {
	max-width: var(--fe-shell, 1180px);
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
/* <<< fusting:fe-faq-cta-full-bleed-20260827 <<< */

/* >>> fusting:fe-panel-sticky-fix-20260827 >>> */
/* /electric-panel-replacement/ "Get your free estimate" card: keep it in its
   own column instead of flying to the left edge.

   Ceanne, 2026-08-27: "get your free estimate is getting stickied in the wrong
   place" -- the card pinned over the reviews at the far left of the window.

   Cause is Spectra's own sticky script, not the layout around it. On scroll it
   adds .uagb-position__sticky--stuck and writes an inline left/top measured
   against the element's offsetParent, then positions the card against the
   VIEWPORT. Read live 2026-08-27: it sets left: 13px while the card actually
   sits at x=1266, so the card lands 13px from the window edge. The same tiny
   left value appears on staging, and nothing in the panel-hero rules above can
   reach this element, so this is Spectra behaviour rather than a knock-on.

   Native CSS sticky does the same job correctly: it stays in normal flow, so it
   cannot leave its column, and it needs no measurement. !important is required
   because the values being overridden are inline styles written by that script.
   align-self keeps the card at its natural height -- a stretched flex item
   fills the row and has no travel to stick through. */
@media (min-width: 782px) {
	.page-id-6943 .uagb-position__sticky {
		position: sticky !important;
		top: 24px !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		align-self: flex-start;
	}
}
/* <<< fusting:fe-panel-sticky-fix-20260827 <<< */

/* >>> fusting:fe-step-num-dark-contrast-20260827 >>> */
/* Homepage 1-2-3 circles: keep the numeral readable in dark mode.

   Measured live 2026-08-27 with prefers-color-scheme: dark and .fe-dark-active
   on <html>: the circle stays white (#ffffff) while the numeral renders
   #f7f3ee -- a contrast ratio of 1.10:1, so the numbers were effectively
   invisible. WCAG wants 3:1 for large text. Light mode intends orange #e36200
   on the white circle (about 3.6:1 at 22.5px bold, which clears that bar).

   The block already sets color:#e36200 INLINE on each numeral, so whatever the
   dark-mode layer uses to recolour body text is beating an inline style, which
   means it is itself !important. That is why this rule has to be !important
   too: it is not specificity padding, it is the only thing that can win against
   an important declaration overriding an inline one. Confirmed empirically in
   the live page before writing -- injecting exactly this rule restored
   rgb(227, 98, 0) and removing it dropped back to rgb(247, 243, 238). */
html.fe-dark-active .fe-step-num,
html.fe-dark-active .fe-howquote .fe-step-num {
	color: #e36200 !important;
}

@media (prefers-color-scheme: dark) {
	.fe-step-num,
	.fe-howquote .fe-step-num {
		color: #e36200 !important;
	}
}
/* <<< fusting:fe-step-num-dark-contrast-20260827 <<< */



/* The 100vw rails above must never widen the page. fusting-circuit-blocks
   already sets overflow-x: clip on html/body, but only via :has() when a
   circuit BLOCK is on the page - today that is true here only because the CTA
   uses one. The rails must not silently depend on that block staying put, so
   pin the clip to the page itself as well. Same html+body pair the plugin
   uses: clipping body alone leaves html scrollable. */
html:has(body.page-id-1399),
body.page-id-1399 {
	overflow-x: clip;
}

/* >>> fusting:wire-behind-content-20260828 >>> */
/* Ceanne: "make sure lines are always behind all content."
   A positioned element with z-index 0 paints ABOVE ordinary in-flow text, so
   both the rails and the drop were sitting on top of the bios. z-index -1 puts
   them behind every child of .entry-content while still painting above
   .entry-content's own background.
   The isolation: isolate is what makes that safe - without a stacking context
   here, a negative z-index escapes upward and the lines can vanish behind the
   page background entirely. Keep the two together. */
.page-id-1399 .entry-content {
	isolation: isolate;
}
.page-id-1399 .portrait-line-image::after,
.page-id-1399 figure.kid-portrait-line-image::after,
.page-id-1399 .family-circuit-wire-overlay {
	z-index: -1;
}
/* <<< fusting:wire-behind-content-20260828 <<< */

/* >>> fusting:page-top-breathing-room-20260828 >>> */
/* Ceanne: the page title is "so close to the top bar".
   Scope check done against every published page, not assumed: only TWO open
   with a full-bleed hero that is SUPPOSED to sit flush under the black nav -
   the homepage (10215) and Maryland EV Charger Rebates (5239). Both are
   excluded by id. Every other page opens with a heading, paragraph or boxed
   container and wants air above it.
   If a future page starts with its own full-bleed hero, add its id here rather
   than deleting the rule. */
body:not(.page-id-10215):not(.page-id-5239) .entry-content {
	padding-top: 40px;
}
/* <<< fusting:page-top-breathing-room-20260828 <<< */


/* >>> fusting:about-timeline >>> */
/* STILL LIVE, verified 2026-09-01: this block's own selectors match 80 elements across eight live pages. The text below describes what it REPLACED, not this block. Do not delete it on the strength of the word retired -- re-run the match first. */
/* RETIRED 2026-08-29: this block used to style .fe-timeline / .fe-timeline__node,
   the hand-rolled About timeline delivered via WPCode snippet 10628. SUPERSEDED
   by the fusting/circuit-timeline block in plugin 0.11.4 - the page now uses
   .fe-circuit-timeline__* and snippet 10628 is deactivated, so every one of those
   rules had lost its target. Removed rather than left to rot. */

/* MOBILE PHOTO COLLAPSE.
   At 375px all 11 timeline photos DOWNLOADED and rendered at 105-126px inside a
   292px column - thumbnails where faces are unreadable. Desktop was unaffected
   (334-686px), which is why it hides.
   Measured cause: the <img> carries loading="lazy" + sizes="auto" and no width
   declaration of its own, so it lays out at its INTRINSIC size; sizes="auto" then
   measures that small box and locks in the smallest srcset candidate, which keeps
   it small. Proven live: forcing a width jumped it 126px -> 252px and the browser
   re-fetched a larger file.
   !important is deliberate. Without it the identical declaration did NOT win -
   verified live, computed width stayed 126px while the rule was present and
   matching. Do not drop the flag without re-measuring naturalWidth at 375px.
   DO NOT also override max-height. A first pass added max-height:none and
   regressed DESKTOP: the plugin's max-height:560px + object-fit:cover is what
   keeps a tall portrait from running 915px down the page, and removing it grew
   the page from 10,729px to 12,496px. Width was the only broken thing. */
.page-id-1399 .fe-circuit-timeline__photo img {
	width: 100% !important;
	height: auto !important;
}

/* TWO PHOTOS PER ROW ON MOBILE (Ceanne, 2026-08-29).
   Flex rather than grid because .fe-circuit-timeline__content mixes prose and
   figures: paragraphs (and the multi-photo gallery wrapper) are forced back to a
   full-width row, and only the figures take half. A plain grid on the container
   would have made the body copy a column too. The gallery gets the same treatment
   one level down, since its figures are nested inside it rather than being direct
   children of the content box.

   :only-of-type is the important part. Pairing EVERY photo was measured first and
   looked worse than the bug it replaced: only 2 of 9 photo rows actually held two
   images, because most milestones carry a single photo - so seven of them shrank
   to 140px and sat alone with dead space beside them. A lone photo therefore keeps
   the full column; only milestones that genuinely have two or more photos pair up.
   Among its siblings a single <figure> IS :only-of-type (the paragraphs are <p>,
   the gallery is a <div>), which is exactly the distinction needed. */
@media (max-width: 767px) {
	.page-id-1399 .fe-circuit-timeline__content,
	.page-id-1399 .fe-circuit-timeline__gallery {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
	}
	.page-id-1399 .fe-circuit-timeline__content > *,
	.page-id-1399 .fe-circuit-timeline__gallery > * {
		flex: 1 1 100%;
	}
	.page-id-1399 .fe-circuit-timeline__photo {
		flex: 0 1 calc(50% - 6px);
		max-width: calc(50% - 6px);
		margin: 0;
	}
	.page-id-1399 .fe-circuit-timeline__content > .fe-circuit-timeline__photo:only-of-type {
		flex-basis: 100%;
		max-width: 100%;
	}
	.page-id-1399 .fe-circuit-timeline__photo figcaption {
		margin-top: 6px;
		font-size: 0.75rem;
		line-height: 1.35;
	}
}
/* <<< fusting:about-timeline <<< */

/* >>> fusting:panel-process-timeline >>> */
/* Panel-FAQ process timeline.
   The step marker is the Fusting mark itself: a ring with a horizontal line stub either
   side. Geometry taken from the logo SVG (fusting-electric-logo-horizontal-white.svg,
   first path): circle r 20.5, stubs 15.8 long, stroke 1.8 -- so stub = 0.77r and
   stroke = 0.088r, kept in proportion here at a 26px ring. The LEFT stub is what joins
   the ring to the vertical rail, which is why the rail stops short of the marker rather
   than running behind it: the branch does the connecting, like an actual tap off a run. */
.fe-proc {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  position: relative;
}

.fe-proc > li {
  position: relative;
  margin: 0;
  padding: 0 0 26px 70px;
  /* The two horizontal stubs of the mark, drawn as background bars so the ring
     (::before) and the rail (::after) can keep their own pseudo-elements. The ring
     spans x 16-42, so the stubs run 0-16 and 42-58, meeting it flush on both sides
     exactly as they do in the logo. */
  background-image: linear-gradient(#e36200, #e36200), linear-gradient(#e36200, #e36200);
  background-repeat: no-repeat, no-repeat;
  background-size: 16px 2px, 16px 2px;
  background-position: 0 12px, 42px 12px;
}

.fe-proc > li:last-child { padding-bottom: 0; }

/* Vertical rail. It runs down the LEFT END of the stubs, not through the ring
   centres, so each ring branches off the run instead of being skewered by it --
   which is how a tap off a circuit actually looks. The rail therefore starts at
   the stub's own y (12px), not below the ring. */
.fe-proc > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: -4px;
  width: 2px;
  background: #e2e2e2;
}

/* The ring. */
.fe-proc > li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 0;
  width: 26px;
  height: 26px;
  border: 2px solid #e36200;
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
}

.fe-proc > li > strong {
  display: block;
  color: #242424;
  font-size: 1.0625rem;
  line-height: 1.3;
}

.fe-proc > li > em {
  display: block;
  margin: 2px 0 6px;
  color: #b04e00;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  /* Same mark, tightened: ring 22px spanning x 11-33, stubs 0-11 and 33-44. */
  .fe-proc > li {
    padding-left: 56px;
    background-size: 11px 2px, 11px 2px;
    background-position: 0 10px, 33px 10px;
  }
  .fe-proc > li::before { left: 11px; width: 22px; height: 22px; }
  .fe-proc > li:not(:last-child)::after { left: 0; top: 10px; }
}

/* Payment methods: monochrome chips so eleven options read as one set instead of
   eleven competing brand colours. */
.fe-pay-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

.fe-pay {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  background: #fff;
  font-size: 0.9375rem;
  line-height: 1.25;
  color: #242424;
}

.fe-pay-grid--preferred .fe-pay {
  border-color: #f0c9a4;
  background: #fff8f2;
  font-weight: 700;
}

.fe-pay__icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: #e36200;
}

/* Brand marks are wordmarks or two-circle symbols, so they need a wider, shorter box
   than the square monochrome glyphs; each SVG keeps its own viewBox and colours. */
.fe-pay__icon--brand {
  width: 34px;
  height: 24px;
  color: inherit;
}

.fe-pay-also {
  margin: 0 0 10px;
  font-weight: 700;
}

.fe-inspect-nums { margin: 0; padding-left: 1.1em; }
.fe-inspect-nums > li { margin: 0 0 4px; }
/* <<< fusting:panel-process-timeline <<< */

/* >>> fusting:inspection-page >>> */
/* --- Defect photos on the inspection page -------------------------------
   Real photographs cropped out of inspection reports on jobs we quoted.
   Sized down and floated on desktop so the section reads as prose with
   evidence beside it, rather than a slideshow interrupting every paragraph. */
.fe-defect-shot { margin: 6px 0 26px; }

.fe-defect-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #dcdcdc;
  border-radius: 3px;
}

.fe-defect-shot figcaption {
  margin-top: 8px;
  color: #5a5a5a;
  font-size: 0.875rem;
  line-height: 1.45;
}

@media (min-width: 900px) {
  .fe-defect-shot {
    float: right;
    width: 300px;
    margin: 0 0 20px 28px;
  }
  /* Stop a floated photo from lapping into the next section's heading. */
  .entry-content h2, .entry-content h3 { clear: both; }
}

/* --- Per-document explainer sitting beside its own field in the request form ---
   One of these appears directly above the inspection-report fields and another
   above the Property Inspections Notice upload, so the picture of the document
   is next to the box that asks for it. */
.fe-form-doc {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid #f0c9a4;
  border-radius: 6px;
  background: #fff8f2;
}

.fe-form-doc__shot {
  flex: 0 0 auto;
  width: auto;
  max-width: 120px;
  max-height: 110px;
  border: 1px solid #dcdcdc;
  border-radius: 3px;
  background: #fff;
}

.fe-form-doc__text {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #444;
}

/* Only the leading title goes on its own line. An inline <strong> inside the body
   copy (e.g. "Section 2B") must stay inline, or the sentence breaks into three. */
.fe-form-doc__text > strong:first-child {
  display: block;
  margin-bottom: 4px;
  color: #242424;
}

@media (max-width: 600px) {
  .fe-form-doc { gap: 12px; padding: 12px; }
  .fe-form-doc__shot { max-width: 82px; max-height: 82px; }
}

/* Verbatim COMAR list — set apart so it reads as a quotation of the regulation
   rather than as our own prose. Numbering matches COMAR 09.36.07.08.A(1)-(11). */
.fe-comar-quote {
  margin: 0 0 20px;
  padding: 4px 0 4px 1.4em;
  border-left: 3px solid #f0c9a4;
  padding-left: 22px;
  margin-left: 4px;
}

.fe-comar-quote > li {
  margin: 0 0 6px;
  padding-left: 4px;
}

/* The inspection-report block offers TWO options because the two fields under it do:
   a link to the online report, or the PDF. Show one picture of each, side by side. */
.fe-form-doc--pair { gap: 20px; }
.fe-form-doc--pair .fe-form-doc__opt { flex: 1 1 0; margin: 0; min-width: 0; }
.fe-form-doc--pair .fe-form-doc__shot { max-width: 100%; max-height: 100px; margin-bottom: 8px; }
.fe-form-doc--pair figcaption { font-size: 0.875rem; line-height: 1.45; color: #444; }
.fe-form-doc--pair figcaption strong { display: block; color: #242424; }

@media (max-width: 600px) {
  .fe-form-doc--pair { flex-direction: column; }
  .fe-form-doc--pair .fe-form-doc__shot { max-height: 84px; }
}
/* <<< fusting:inspection-page <<< */

/* >>> fusting:about-timeline-portrait-crop >>> */
/* DESKTOP PORTRAIT GUILLOTINE + PHOTO SIZE (2026-09-02, both reported by Ceanne).

   PART 1, THE CROP. Six of the twelve timeline photos were center-cropped on
   desktop, five of them losing ~49% of the frame -- graduation, Career Day, bucket
   truck, newborn Dylan, and the work-van shot all had every face sliced off.
   Measured live at vw=1585: an 832px-wide slot, natural height 1102-1109px,
   painted box 832x560.

   Cause is the sibling MOBILE PHOTO COLLAPSE rule above. It sets
   width:100% !important with no media query, so it applies on DESKTOP too, where
   there was never a collapse to fix. Two consequences:
     1. it overrides the plugin's own .fe-circuit-timeline__photo--portrait rule
        (width:min(100%, 420px)), which existed precisely to keep tall photos narrow;
     2. it forces a 3:4 photo into a 4:3 box, and the plugin's max-height:560px +
        object-fit:cover then eats the difference off the top and bottom equally.
   The crop was never deliberate art direction -- it is collateral from an unscoped
   mobile fix. Constraining by HEIGHT instead of width fixes it: a tall photo shrinks
   to fit whole rather than being cut. Verified live, all twelve now report a 0% crop.

   PART 2, THE SIZE. Ceanne asked for every photo smaller. Done by lowering the cap
   from the plugin's 560px to 400px and capping the figure at 620px wide, which also
   narrows the two-up work gallery's columns from 407px to ~301px so the gallery
   shrinks with everything else rather than staying the one full-size holdout.

   Note the max-height above this block warns that removing max-height grew the page
   from 10,729px to 12,496px. This does not remove it, it TIGHTENS it, so that
   failure mode cannot recur -- every photo slot is now shorter than it was.

   Scoped to min-width:768px, above BOTH mobile breakpoints in play (this block's
   767px pairing rule and the plugin's 600px sizing rules), so phone rendering is
   byte-for-byte what it was.

   object-fit:contain is a belt-and-braces guard, not the mechanism -- once the box
   matches the image ratio it is a no-op, but it means no future width change can
   silently reintroduce a center crop. Do not swap this back to cover. */
@media (min-width: 768px) {
	.page-id-1399 .fe-circuit-timeline__photo img {
		width: auto !important;
		max-width: 100%;
		height: auto !important;
		max-height: 400px;
		object-fit: contain;
	}

	.page-id-1399 .fe-circuit-timeline__photo,
	.page-id-1399 .fe-circuit-timeline__gallery--work {
		max-width: 620px;
	}
}
/* <<< fusting:about-timeline-portrait-crop <<< */

/* >>> fusting:fe-rebates-secondary-btn-20260903 >>> */
/* Secondary (outline) treatment for the "All Maryland Grants..." button on the
   EV Charger Rebates page. Primary (EVSE program) stays filled orange; this one
   is the quieter catch-all link. Text colour is intentionally NOT set here --
   the site-wide orange-button-text-a11y rule owns button label colour (#16110d),
   which reads fine on both the white and the orange-hover state. */
.uagb-block-34cdd4af .wp-block-button__link,
.uagb-block-34cdd4af a.uagb-buttons-repeater {
	background: transparent !important;
	background-color: transparent !important;
	border-color: #b04e00 !important;
}

.uagb-block-34cdd4af .wp-block-button__link:hover,
.uagb-block-34cdd4af .wp-block-button__link:focus-visible,
.uagb-block-34cdd4af a.uagb-buttons-repeater:hover,
.uagb-block-34cdd4af a.uagb-buttons-repeater:focus-visible {
	background: #e36200 !important;
	background-color: #e36200 !important;
	border-color: #b04e00 !important;
}
/* <<< fusting:fe-rebates-secondary-btn-20260903 <<< */