/* We Fix White Goods — front-end styles */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* The mobile nav drawer (position:fixed, right:0) has been observed
   computing its containing-block width incorrectly on some renderers,
   pushing it — and the page's scrollable area — past the true viewport
   edge. Rather than depend on that calculation being right everywhere,
   guarantee the symptom (unwanted sideways scroll) can't happen at all. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Shimmer sweep — hover-triggered, gradient CTA buttons only.
   Elementor puts _css_classes on the widget's wrapper div, not the
   actual <a class="elementor-button">, so target the real button
   element itself — it's the one with the true border-radius and
   visible bounds, which keeps the clip correct at every button size. */
.wfwg-shimmer-btn .elementor-button {
	position: relative;
	overflow: hidden;
}
.wfwg-shimmer-btn .elementor-button::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 45%;
	height: 100%;
	background: linear-gradient(115deg, transparent, rgba(255,255,255,0.65), transparent);
	transform: skewX(-18deg);
	transition: left 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
	pointer-events: none;
}
.wfwg-shimmer-btn .elementor-button:hover::after { left: 130%; }
@media (prefers-reduced-motion: reduce) {
	.wfwg-shimmer-btn .elementor-button::after { transition: none; }
}
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a, a:hover, a:focus, a:active { text-decoration: none !important; }
::selection { background: #B8A6E6; color: #10222B; }

/* Header (native rebuild) */
.wfwg-header-outer { position: sticky; top: 0; z-index: 50; background: rgba(18,58,74,0.96); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(184,166,230,0.22); }
.wfwg-header-outer .elementor-column, .wfwg-header-outer .elementor-widget-wrap { height: auto !important; min-height: 0 !important; padding: 0 !important; }
.wfwg-header-outer .elementor-top-column { align-self: center; }
.wfwg-header-outer .elementor-container { align-items: center; height: auto !important; min-height: 0 !important; }
/* No content-width cap at all for the header row (unlike the rest of the
   site's 1240px boxed content) — the phone button should sit at the true
   right edge of the browser on any screen, not stop partway there once a
   fixed max-width is reached on a wide monitor. */
.wfwg-header-outer .elementor-section-boxed > .elementor-container { max-width: none !important; }
.wfwg-header-logo img { height: auto !important; max-width: 100% !important; width: auto !important; display: block; }
.wfwg-phone-btn .elementor-button { box-shadow: 0 6px 18px rgba(43,154,217,0.3); }

@media (max-width: 767px) {
	/* Aligned to Elementor's own mobile-visibility cutoff (hide_mobile /
	   hide_desktop switch here too) so tablet widths (768-1024px) get the
	   normal desktop header instead of being squeezed into the compact
	   mobile layout designed for phone-width screens. Elementor stacks a
	   header's columns to 100% width by default below this breakpoint —
	   keep the compact mobile header (icon logo / Call Now) in a single
	   row instead. */
	.wfwg-header-outer .elementor-container {
		flex-wrap: nowrap !important;
		justify-content: space-between !important;
		padding: 10px 26px 10px 14px !important;
	}
	/* The boxed inner section carries its own symmetric 32px desktop
	   padding, which stacks with the container padding above and pushes
	   the logo further right than needed on a narrow header row — pull
	   just the left side in to bring the logo closer to the edge. */
	.wfwg-header-outer .elementor-element-bf41c07 {
		padding-left: 8px !important;
	}
	/* The inner row's flex container consistently renders narrower than
	   its own parent regardless of width overrides — an Elementor 4.x
	   nested-flex sizing quirk. justify-content:space-between above still
	   spreads the logo and actions group apart within whatever width it
	   does get, which is enough — add a bit more explicit breathing room
	   between them directly rather than continue fighting that container. */
	.wfwg-header-outer .elementor-col-15 {
		margin-right: 24px;
	}
	.wfwg-header-outer .elementor-column {
		width: auto !important;
		flex: none !important;
	}
	/* Pin the Call Now column to the header's own right edge directly,
	   bypassing the narrow inner flex container entirely. This only works
	   if every ancestor between it and the header stops being its own
	   containing block (Elementor sets position:relative on all of them
	   by default, which is what made an earlier attempt at this anchor to
	   the wrong, narrower box instead of the header). */
	.wfwg-header-outer .elementor-inner-section,
	.wfwg-header-outer .elementor-inner-section > .elementor-container,
	.wfwg-header-outer .elementor-col-100,
	.wfwg-header-outer .elementor-col-100 > .elementor-widget-wrap {
		position: static !important;
	}
	.wfwg-header-outer .elementor-col-25 {
		position: absolute !important;
		right: 26px;
		top: 50%;
		transform: translateY(-50%);
	}
	/* The header row's gap_columns_custom setting (32px) is implemented by
	   Elementor as left/right padding on each column's wrap, via a highly
	   specific auto-generated rule. That's fine on desktop where the row
	   has room to spare, but combined with the width:auto override above
	   it was pushing the last column (Call Now + hamburger) further right
	   than the visible container, clipped by the rounded corner. Win back
	   the horizontal padding with equally targeted specificity. */
	.wfwg-header-outer .elementor-column > .elementor-widget-wrap {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.wfwg-header-outer a[href^="tel:"] {
		padding: 9px 12px !important;
		font-size: 13px !important;
		gap: 5px !important;
	}

	/* backdrop-filter creates a new containing block for descendant
	   position:fixed elements, which broke the full-height nav drawer
	   (it was fixing itself relative to this short header instead of the
	   viewport). The frosted-glass effect isn't essential on the compact
	   mobile header, so drop it here and keep the drawer working. */
	.wfwg-header-outer {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}
}

/* Footer (native rebuild) */
.wfwg-footer-outer { background: #0A2430; }
.wfwg-footer-outer h4 { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff; margin: 0 0 16px; }
.wfwg-footer-logo img { height: 52px; width: auto; display: block; margin-bottom: 20px; }
@media (max-width: 767px) {
	/* Same gap-as-padding story as everywhere else on mobile: Elementor's
	   row gap here is implemented as column-wrap padding, zeroed out by
	   the mobile-stacking reset, so the four footer columns (brand blurb,
	   Services, Areas, Get in touch) end up stacked with no separation at
	   all once they wrap to a single column. */
	.wfwg-footer-outer .elementor-inner-section .elementor-column {
		margin-bottom: 36px;
	}
	.wfwg-footer-outer .elementor-inner-section .elementor-column:last-child {
		margin-bottom: 0;
	}
}

.wfwg-phone-btn { transition: filter .15s ease; }
.wfwg-phone-btn:hover { filter: brightness(1.07); }

/* Buttons */
.wfwg-btn-primary { transition: transform .18s ease; }
.wfwg-btn-primary:hover { transform: translateY(-2px); }
.wfwg-btn-outline { transition: border-color .18s ease, color .18s ease; }
.wfwg-btn-outline:hover { border-color: #B8A6E6 !important; color: #ffffff !important; }
.wfwg-btn-outline-dark { transition: border-color .18s ease; }
.wfwg-btn-outline-dark:hover { border-color: #B8A6E6 !important; }
.wfwg-btn-dark { transition: background .18s ease; }
.wfwg-btn-dark:hover { background: #1B5468 !important; }
.wfwg-link-underline { transition: opacity .15s ease; }
.wfwg-link-underline:hover { opacity: .75; }

/* Service cards */
.wfwg-service-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.wfwg-service-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16,34,43,0.10); border-color: #B8A6E6; }

/* Town links */
.wfwg-town-card { transition: border-color .15s ease, color .15s ease; }
.wfwg-town-card:hover { border-color: #2B9AD9; color: #1E7FB8 !important; }
.wfwg-town-pill { transition: background .15s ease; }
.wfwg-town-pill:hover { background: rgba(184,166,230,0.18) !important; }

/* Blog cards */
.wfwg-blog-card { transition: border-color .18s ease, box-shadow .18s ease; }
.wfwg-blog-card:hover { border-color: #B8A6E6; box-shadow: 0 16px 36px rgba(16,34,43,0.08); }

/* Footer links */
.wfwg-footer-link { color: #A9C1CC; transition: color .15s ease; }
.wfwg-footer-link:hover { color: #B8A6E6; }
.wfwg-footer-bottom-link { color: #7C939E; transition: color .15s ease; }
.wfwg-footer-bottom-link:hover { color: #B8A6E6; }

/* FAQ accordion (native details/summary, no JS required) */
.wfwg-faq { border: 1px solid #E2EBEF; border-radius: 14px; overflow: hidden; background: #F9FBFC; margin-bottom: 12px; }
.wfwg-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 26px; font-family: 'Poppins', sans-serif; font-size: 18.5px; font-weight: 600; color: #10222B; }
.wfwg-faq summary::-webkit-details-marker { display: none; }
.wfwg-faq summary .wfwg-faq-icon { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #ffffff; border: 1px solid #D9E6EC; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: #1E7FB8; }
.wfwg-faq summary .wfwg-faq-icon::before { content: "+"; }
.wfwg-faq[open] summary .wfwg-faq-icon::before { content: "\2212"; }
.wfwg-faq-answer { padding: 0 26px 26px; font-size: 17px; line-height: 1.68; color: #4C6570; max-width: 720px; }

/* "What we repair" mobile accordion — individual rounded cards, each with
   its own icon (reused from the desktop service cards) and a "Repairs"
   sub-label, in the same native details/summary fashion as the FAQ. */
.wfwg-repair-list { display: flex; flex-direction: column; gap: 14px; }
.wfwg-repair-item { background: #ffffff; border: 1px solid #E2EBEF; border-radius: 18px; box-shadow: 0 8px 22px rgba(16,34,43,0.06); overflow: hidden; }
.wfwg-repair-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.wfwg-repair-item summary::-webkit-details-marker { display: none; }
.wfwg-repair-icon { flex: none; width: 56px; height: 56px; border-radius: 14px; background: #F5F8FA; border: 1px solid #E2EBEF; display: inline-flex; align-items: center; justify-content: center; }
.wfwg-repair-icon svg { width: 32px; height: 32px; }
.wfwg-repair-title-wrap { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wfwg-repair-title { font-family: Poppins, sans-serif; font-size: 17px; font-weight: 700; color: #10222B; }
.wfwg-repair-subtitle { font-family: Poppins, sans-serif; font-size: 14px; font-weight: 600; color: #2B9AD9; }
/* Solid brand-gradient button (not just an outline) so it reads as an
   obviously tappable control, the same way the Call Now button does. */
.wfwg-repair-chevron {
	position: relative;
	overflow: hidden;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: linear-gradient(100deg, #2B9AD9 0%, #B8A6E6 100%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease;
}
.wfwg-repair-item[open] .wfwg-repair-chevron { transform: rotate(180deg); }

/* Glimmer sweep on hover — same light-sweep technique as the Call Now
   button's shimmer, scaled down for the small circular chevron. */
.wfwg-repair-chevron::after {
	content: "";
	position: absolute;
	top: -60%;
	left: -70%;
	width: 55%;
	height: 220%;
	background: linear-gradient(115deg, transparent, rgba(255,255,255,0.85), transparent);
	transform: skewX(-18deg);
	transition: left 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
	pointer-events: none;
}
.wfwg-repair-item summary:hover .wfwg-repair-chevron::after { left: 140%; }
@media (prefers-reduced-motion: reduce) {
	.wfwg-repair-chevron::after { transition: none; }
}
.wfwg-repair-body { padding: 0 20px 22px; }
.wfwg-repair-link { display: block; margin-top: 6px; text-align: center; font-family: Poppins, sans-serif; font-size: 15.5px; font-weight: 700; color: #1E7FB8; text-decoration: none; }

/* Shimmering brand-gradient glow around each card — box-shadow is outside
   the border box so it isn't clipped by the item's own overflow:hidden. */
.wfwg-repair-item {
	animation: wfwg-repair-glow 3.4s ease-in-out infinite;
}
@keyframes wfwg-repair-glow {
	0%, 100% { box-shadow: 0 0 0 1px rgba(43,154,217,0.28), 0 10px 26px rgba(43,154,217,0.16), 0 8px 22px rgba(16,34,43,0.06); }
	50% { box-shadow: 0 0 0 1.5px rgba(184,166,230,0.4), 0 12px 32px rgba(184,166,230,0.26), 0 8px 22px rgba(16,34,43,0.06); }
}
@media (prefers-reduced-motion: reduce) {
	.wfwg-repair-item { animation: none; }
}

/* Scroll reveal — each card slides up into place the first time it enters
   the viewport. JS-driven (see main.js) so a card is only ever hidden by
   script that's actually running; without JS every card just shows
   normally, no fallback state needed. */
.wfwg-repair-item {
	transition: opacity 0.55s ease, transform 0.55s ease;
}
.wfwg-repair-item.wfwg-reveal-hidden {
	opacity: 0;
	transform: translateY(30px);
}
@media (prefers-reduced-motion: reduce) {
	.wfwg-repair-item { transition: none; }
	.wfwg-repair-item.wfwg-reveal-hidden { opacity: 1; transform: none; }
}

/* "How it works" step cards — lift on hover, and slide in from a
   different direction per step (1: left, 2: right, 3: up) the first time
   the row scrolls into view. */
.wfwg-step-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.6s ease;
}
.wfwg-step-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 45px rgba(0,0,0,0.35);
}
.wfwg-step-card.wfwg-reveal-hidden { opacity: 0; }
.wfwg-step-card-1.wfwg-reveal-hidden { transform: translateX(-50px); }
.wfwg-step-card-2.wfwg-reveal-hidden { transform: translateX(50px); }
.wfwg-step-card-3.wfwg-reveal-hidden { transform: translateY(50px); }
@media (prefers-reduced-motion: reduce) {
	.wfwg-step-card { transition: none; }
	.wfwg-step-card.wfwg-reveal-hidden { opacity: 1; transform: none; }
}
@media (max-width: 767px) {
	/* Elementor's row gap is implemented as column-wrap padding, which the
	   mobile-stacking reset above zeroes out for every inner-section row —
	   these cards need some of that breathing room back once stacked. */
	.wfwg-step-card { margin-bottom: 20px; }
	.wfwg-step-card-3 { margin-bottom: 0; }
}

/* "Areas we cover" mobile accordion — one row per town hub, expanding to
   the smaller villages/areas nearby. Same native details/summary pattern
   as the FAQ and "What we repair" accordions. */
/* This widget was inserted directly as a sibling inside an existing
   shared column (rather than its own dedicated 100%-width column), so it
   sits in a row-direction flex wrap and shrinks to its content's width by
   default instead of filling the row — force it to take the full row. */
.elementor-element-a7c3e91 { width: 100% !important; flex-basis: 100% !important; }
.wfwg-area-list { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.wfwg-area-item { background: #ffffff; border: 1px solid #E2EBEF; border-radius: 16px; overflow: hidden; }
.wfwg-area-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 22px 22px; }
.wfwg-area-item summary::-webkit-details-marker { display: none; }
.wfwg-area-icon { flex: none; width: 38px; height: 38px; border-radius: 50%; background: rgba(43,154,217,0.1); display: inline-flex; align-items: center; justify-content: center; }
.wfwg-area-title { flex: 1 1 auto; font-family: Poppins, sans-serif; font-size: 17.5px; font-weight: 700; color: #10222B; }
.wfwg-area-chevron { position: relative; overflow: hidden; flex: none; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(100deg, #2B9AD9 0%, #B8A6E6 100%); display: inline-flex; align-items: center; justify-content: center; transition: transform 0.2s ease; }
.wfwg-area-item[open] .wfwg-area-chevron { transform: rotate(180deg); }
.wfwg-area-chevron::after {
	content: "";
	position: absolute;
	top: -60%;
	left: -70%;
	width: 55%;
	height: 220%;
	background: linear-gradient(115deg, transparent, rgba(255,255,255,0.85), transparent);
	transform: skewX(-18deg);
	transition: left 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
	pointer-events: none;
}
.wfwg-area-item summary:hover .wfwg-area-chevron::after { left: 140%; }
.wfwg-area-body { padding: 0 18px 20px 64px; }
.wfwg-area-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
/* Longer place names (e.g. "South Woodham Ferrers") don't fit this
   column on one line — a pill-shaped (999px) radius turns into a blob
   once it wraps, so cap it at a normal rounded-rectangle radius instead. */
.wfwg-area-pills .wfwg-town-pill { border-radius: 12px !important; max-width: 100%; }
.wfwg-area-note { margin: 0 0 12px; font-family: Poppins, sans-serif; font-size: 14.5px; color: #4C6570; }
.wfwg-area-link { display: inline-block; font-family: Poppins, sans-serif; font-size: 14.5px; font-weight: 700; color: #1E7FB8; text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
	.wfwg-area-chevron::after { transition: none; }
}
@media (max-width: 767px) {
	/* The "See every town we cover" link's purple underline sits directly
	   against the first accordion card once columns stack on mobile —
	   give it some breathing room. */
	.wfwg-areas-outer .wfwg-link-underline {
		margin-bottom: 28px;
	}
}

/* Grids: desktop defaults, collapse responsively */
.wfwg-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.wfwg-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.wfwg-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; max-width: 1240px; margin: 0 auto; padding: 84px 32px 96px; position: relative; }
.wfwg-why-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.wfwg-areas-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; }
.wfwg-towns-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.wfwg-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 44px; }

@media (max-width: 767px) {
	.wfwg-hero-grid, .wfwg-why-grid, .wfwg-areas-grid { grid-template-columns: 1fr; }
	.wfwg-grid-3, .wfwg-grid-2, .wfwg-towns-grid { grid-template-columns: repeat(2, 1fr); }
	.wfwg-footer-grid { grid-template-columns: 1fr 1fr; }
	.wfwg-hero-card { display: none !important; }
	h1 { font-size: 44px !important; }
	h2 { font-size: 32px !important; }
}

@media (max-width: 600px) {
	.wfwg-grid-3, .wfwg-grid-2, .wfwg-towns-grid, .wfwg-footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	/* The 44px tablet-oriented H1 size is still too large on real phone
	   widths — each forced <br> line (White Goods / Appliance Repair /
	   Across Essex) ends up filling the screen edge-to-edge, pushing every
	   CTA and trust signal below the fold. Scale it down further here. */
	.wfwg-hero-h1 h1 { font-size: 32px !important; line-height: 1.15 !important; }
	.wfwg-hero-eyebrow { font-size: 11px; padding: 7px 14px 7px 12px; margin-bottom: 20px; }
	.wfwg-hero-subtext p { font-size: 16px; }
}

/* Final CTA (native-widget rebuild) */
.wfwg-final-cta-outer { background: radial-gradient(110% 120% at 85% 10%, #1B5468 0%, #123A4A 55%, #0E2C39 100%); }

/* Hero (native-widget rebuild) */
.wfwg-hero-section-bg { background: radial-gradient(120% 100% at 12% 0%, #1B5468 0%, #123A4A 55%, #0E2C39 100%); position: relative; overflow: hidden; }
.wfwg-hero-section-bg::before { content: ""; position: absolute; top: -180px; right: -120px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(184,166,230,0.20) 0%, rgba(184,166,230,0) 70%); pointer-events: none; }
.wfwg-hero-eyebrow { display: inline-flex; align-items: center; gap: 11px; border: 1px solid rgba(184,166,230,0.45); border-radius: 999px; padding: 9px 18px 9px 14px; margin-bottom: 30px; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #C9D9E1; }
.wfwg-hero-eyebrow-dot { width: 9px; height: 9px; border-radius: 50%; background: #B8A6E6; display: inline-block; }
.wfwg-hero-h1 h1 { font-size: 68px; line-height: 1.02; font-weight: 800; letter-spacing: -0.025em; color: #ffffff; margin: 0; }
.wfwg-hero-h1 .wfwg-gradient-text { background: linear-gradient(96deg, #4FB3E8 0%, #B8A6E6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wfwg-hero-subtext p { font-size: 19px; line-height: 1.62; color: #BFD3DC; max-width: 540px; margin: 0; }
.wfwg-hero-divider { height: 1px; background: linear-gradient(90deg, rgba(201,217,225,0.28), rgba(201,217,225,0)); margin: 0 0 26px; }
.wfwg-hero-badges-row { display: flex; flex-wrap: wrap; gap: 10px; }
.wfwg-hero-badge { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,0.06); border: 1px solid rgba(201,217,225,0.18); border-radius: 999px; padding: 10px 17px; font-size: 14.5px; font-weight: 500; color: #E4EEF3; }
.wfwg-hero-image-wrap { position: relative; }
.wfwg-hero-section-bg .elementor-container { align-items: center !important; }
.wfwg-hero-image-wrap { height: auto !important; }
.wfwg-hero-image-wrap > .elementor-widget-wrap { position: static; height: 520px !important; }
.wfwg-hero-image-wrap > .elementor-widget-wrap > .elementor-element,
.wfwg-hero-image-wrap > .elementor-widget-wrap > .elementor-element > .elementor-widget-container { position: static !important; padding: 0 !important; height: auto !important; min-height: 0 !important; }
.wfwg-hero-image-wrap img { width: 100% !important; height: 520px !important; max-width: 100% !important; object-fit: cover !important; border-radius: 22px !important; display: block !important; box-shadow: 0 30px 70px rgba(0,0,0,0.42) !important; }
.wfwg-hero-card { position: absolute; background: #ffffff; border-radius: 14px; padding: 15px 20px; box-shadow: 0 16px 40px rgba(0,0,0,0.28); display: flex; align-items: center; gap: 13px; z-index: 2; }
.wfwg-hero-card-top { top: 26px; right: -22px; }
.wfwg-hero-card-bottom { bottom: 26px; left: -22px; }
.wfwg-hero-buttons-row > .elementor-widget-wrap { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.wfwg-hero-buttons-row > .elementor-widget-wrap > .elementor-widget { width: auto; margin: 0 !important; }
.wfwg-final-cta-outer .wfwg-hero-buttons-row > .elementor-widget-wrap { justify-content: center; }
.wfwg-hero-badges-row-col > .elementor-widget-wrap { display: block; }
.wfwg-hero-trust-row > .elementor-widget-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
.wfwg-hero-trust-row > .elementor-widget-wrap > .elementor-widget { width: auto; margin: 0 !important; }

.wfwg-faq-outer .elementor-accordion { border: none; }
.wfwg-faq-outer .elementor-accordion-item { border: none !important; border-bottom: 1px solid #E7ECEF !important; }
.wfwg-faq-outer .elementor-accordion-item:first-child { border-top: none !important; }
.wfwg-faq-outer .elementor-accordion-item:has(.elementor-tab-title.elementor-active) { border-bottom-color: transparent !important; margin: 8px 0 18px; }
.wfwg-faq-outer .elementor-tab-title { border: none !important; padding: 22px 26px !important; border-radius: 16px; transition: background-color 0.2s ease; }
.wfwg-faq-outer .elementor-tab-title.elementor-active { background-color: #F4F5F6 !important; border-radius: 16px 16px 0 0; }
.wfwg-faq-outer .elementor-tab-content { border: none !important; background-color: #F4F5F6 !important; border-radius: 0 0 16px 16px; padding: 0 26px 26px !important; margin-top: -2px; }
.wfwg-faq-outer .elementor-accordion-icon { color: #10222B; }
.wfwg-faq-outer .elementor-tab-title.elementor-active .elementor-accordion-icon { color: #10222B; }
.wfwg-faq-outer .elementor-accordion-icon svg,
.wfwg-faq-outer .elementor-accordion-icon i { width: 15px; height: 15px; font-size: 15px; }
/* These chevrons are Elementor's inline-SVG icons (fill: currentColor),
   which CSS can't gradient directly — point fill at the shared
   <linearGradient> def main.js adds to the page, matching the brand
   gradient used on the other accordions' chevron buttons. */
.wfwg-faq-outer .elementor-accordion-icon svg path { fill: url(#wfwg-brand-grad) !important; }
.wfwg-faq-footer { margin-top: 40px; font-family: Poppins, sans-serif; font-size: 15px; color: #6C8793; text-align: center; line-height: 1.6; }
.wfwg-faq-footer a { color: #10222B; font-weight: 700; text-decoration: none; border-bottom: 2px solid #B8A6E6; padding-bottom: 1px; }
.wfwg-faq-footer a:hover { color: #1E7FB8; }

.wfwg-contact-section .wpforms-container { max-width: 640px; margin: 0 auto; }

/* Contact page — booking request form (WPForms #24) */
.wfwg-contact-section .wpforms-field { margin-bottom: 22px; }
.wfwg-contact-section .wpforms-field-label,
.wfwg-contact-section fieldset > legend.wpforms-field-label {
	font-family: Poppins, sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #10222B;
	margin-bottom: 10px;
	display: block;
	padding: 0;
}
.wfwg-contact-section .wpforms-required-label { color: #B8A6E6; }
.wfwg-contact-section .wpforms-field-sublabel { font-family: Poppins, sans-serif; font-size: 12.5px; color: #7C919B; }
.wfwg-contact-section .wpforms-field input[type="text"],
.wfwg-contact-section .wpforms-field input[type="email"],
.wfwg-contact-section .wpforms-field input[type="tel"],
.wfwg-contact-section .wpforms-field select,
.wfwg-contact-section .wpforms-field textarea {
	width: 100%;
	font-family: Poppins, sans-serif;
	font-size: 15.5px;
	color: #10222B;
	background-color: #ffffff;
	border: 1.5px solid #DCE6EB;
	border-radius: 14px;
	padding: 15px 18px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wfwg-contact-section .wpforms-field select {
	/* Browsers don't grow a <select> box to fit vertical padding the way
	   they do for <input>, so the padded text was clipping against the
	   element's intrinsic height — force an explicit height and centre
	   the single line of text within it instead. */
	height: 54px;
	line-height: 54px;
	padding-top: 0;
	padding-bottom: 0;
}
.wfwg-contact-section .wpforms-field input:focus,
.wfwg-contact-section .wpforms-field select:focus,
.wfwg-contact-section .wpforms-field textarea:focus {
	outline: none;
	border-color: #2B9AD9;
	box-shadow: 0 0 0 4px rgba(43,154,217,0.12);
}
.wfwg-contact-section .wpforms-field textarea { min-height: 132px; resize: vertical; }
.wfwg-contact-section .wpforms-field-row-block { position: relative; }
.wfwg-contact-section .wpforms-field-name input,
.wfwg-contact-section #wpforms-24-field_2,
.wfwg-contact-section #wpforms-24-field_3,
.wfwg-contact-section #wpforms-24-field_5,
.wfwg-contact-section #wpforms-24-field_6 {
	background-repeat: no-repeat;
	background-position: 17px center;
	background-size: 18px 18px;
	padding-left: 46px;
}
.wfwg-contact-section .wpforms-field-name input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA6AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
}
.wfwg-contact-section #wpforms-24-field_2 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA6AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.362 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.338 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
.wfwg-contact-section #wpforms-24-field_3 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA6AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E");
}
.wfwg-contact-section #wpforms-24-field_6 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA6AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
.wfwg-contact-section #wpforms-24-field_5 {
	appearance: none;
	-webkit-appearance: none;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA6AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA6AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat, no-repeat;
	background-position: 17px center, right 16px center;
	background-size: 18px 18px, 16px 16px;
	padding-right: 42px;
}
@media (max-width: 600px) {
	/* Mobile browsers render the closed <select> box with native OS chrome
	   that centres the label and ignores padding/background-image, so the
	   custom icon collides with the text — drop it and fall back to a plain
	   field with the platform's own picker affordance. */
	.wfwg-contact-section #wpforms-24-field_5 {
		background-image: none;
		padding-left: 18px;
		padding-right: 18px;
	}
}

.wfwg-contact-section .wpforms-submit-container { margin-top: 30px; }
.wfwg-contact-section .wpforms-submit {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	background: linear-gradient(100deg, #2B9AD9 0%, #B8A6E6 100%);
	color: #0E2C39;
	font-family: Poppins, sans-serif;
	font-weight: 700;
	font-size: 18px;
	border: none;
	border-radius: 12px;
	padding: 18px 30px;
	cursor: pointer;
	box-shadow: 0 12px 30px rgba(43,154,217,0.32);
	transition: transform 0.2s ease;
}
.wfwg-contact-section .wpforms-submit:hover { transform: scale(1.02); }
.wfwg-contact-section .wpforms-submit::before {
	content: "\2192";
	font-size: 18px;
	order: 2;
}
.wfwg-contact-section .wpforms-submit::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 45%;
	height: 100%;
	background: linear-gradient(115deg, transparent, rgba(255,255,255,0.65), transparent);
	transform: skewX(-18deg);
	transition: left 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
	pointer-events: none;
}
.wfwg-contact-section .wpforms-submit:hover::after { left: 130%; }
@media (prefers-reduced-motion: reduce) {
	.wfwg-contact-section .wpforms-submit::after { transition: none; }
}

@media (max-width: 767px) {
	/* Elementor's "custom gap" setting on multi-column inner-section rows
	   is implemented as full padding on every column's widget-wrap (not a
	   true horizontal-only gap), so a gap meant to sit between side-by-side
	   columns survives as large top/bottom padding once those columns stack
	   on mobile. Reset it site-wide for nested/inner rows only — top-level
	   sections use their own explicit padding on a different element and
	   are unaffected. */
	.elementor-inner-section .elementor-column > .elementor-widget-wrap {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	/* Some inner-section rows (the "extended" gap variant, seen on the
	   hero) put that same gap-padding directly on the <section> itself
	   rather than on each column's wrap — cover that variant too. */
	.elementor-section.elementor-inner-section {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* Top-level section padding (typically 96px, sometimes more) is sized
	   for desktop breathing room. Two consecutive sections compound to
	   ~190px of dead space on a narrow screen — cap it at a still-generous
	   but mobile-appropriate value. This only ever tightens spacing: every
	   section on the site currently uses more than this cap, so it can't
	   make an already-tight section look cramped. */
	.elementor-top-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}
	/* The header bar isn't one of the tall content sections that rule is
	   for — it needs to stay a slim, compact strip. Win back the override
	   with a more specific selector. */
	.wfwg-header-outer.elementor-top-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* Two-column rows use align-items:center so the shorter column sits
	   nicely centred against a taller sibling on desktop (e.g. the hero
	   text column next to the fixed-height 520px photo column). Once the
	   columns wrap to stack on mobile, that same centring pushes the first
	   column down by half the height difference, appearing as a phantom
	   gap above it. Top-align everything once stacked. */
	.elementor-inner-section > .elementor-container {
		align-items: flex-start !important;
	}
}

/* Homepage hero — mobile-only redesign. Scoped to page-id-8 so the hero
   background swap never affects any other page's mobile view. The site
   header itself now gets a shared compact mobile layout (see the header
   rules above) that applies everywhere, homepage included. */
@media (max-width: 767px) {
	body.page-id-8 .wfwg-hero-section-bg {
		background: #0A2430;
	}

	body.page-id-8 .wfwg-hero-h1 h1 {
		text-align: left;
		text-transform: uppercase;
	}
	body.page-id-8 .elementor-element-1f88311 h5,
	body.page-id-8 .elementor-element-6e0b309 p {
		text-align: left !important;
	}
	body.page-id-8 .wfwg-hero-section-bg::before { display: none; }

	/* The "Book a repair online" button next to it is desktop-only, so
	   on mobile the Call button is alone in this row — centre it rather
	   than leaving it stuck to the left edge. */
	body.page-id-8 .wfwg-hero-buttons-row > .elementor-widget-wrap {
		justify-content: center;
	}

	/* Move the Call button below the checklist on mobile (source order
	   otherwise has it before). The column's own flex layout lets this
	   happen with just an order swap — no need to touch the DB content. */
	body.page-id-8 .elementor-element-1e28035 {
		order: 10;
		margin-top: 26px !important;
	}

	/* Elementor's desktop padding (84px 32px 96px) on the hero's inner
	   section has no mobile-responsive override of its own, so it eats
	   64px of horizontal space here and forces "Appliance Repair" onto
	   two lines, plus 180px of vertical padding that pushes the checklist
	   off the bottom of the screen on a real phone. Compact all four
	   sides so the whole card fits above the fold. */
	body.page-id-8 .elementor-element-bd89de0 {
		padding: 20px 14px 20px !important;
	}
	/* The sitewide 56px top-section wrap padding (see the mobile rule
	   above) double-stacks with the padding already on this inner
	   section, and the hero card is tall enough already — win it back
	   to zero here, same technique used for the header override. */
	body.page-id-8 .wfwg-hero-section-bg.elementor-top-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* The Google-rating pill and the "what we fix" paragraph both eat
	   more vertical space than the card can afford on a real phone
	   viewport (Safari's toolbars leave well under 700px visible), so
	   trim their spacing and the paragraph's line-height/size here. */
	body.page-id-8 .wfwg-hero-badge {
		margin-bottom: 8px !important;
	}
	body.page-id-8 .elementor-element-6e0b309 p {
		font-size: 13.5px !important;
		line-height: 1.5 !important;
		margin: 0 0 8px !important;
	}
	body.page-id-8 .wfwg-hero-divider {
		display: none !important;
	}

	.wfwg-hero-checklist { display: flex; flex-direction: column; gap: 14px; margin: 0; }
	.wfwg-hero-check-item {
		display: flex;
		align-items: center;
		gap: 12px;
		font-family: Poppins, sans-serif;
		font-size: 15.5px;
		font-weight: 600;
		color: #EAF3F7;
	}
	.wfwg-hero-check-icon {
		flex: none;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background: linear-gradient(100deg, #2B9AD9 0%, #B8A6E6 100%);
		background-repeat: no-repeat;
		background-position: center;
		position: relative;
	}
	.wfwg-hero-check-icon::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 10px;
		height: 6px;
		border-left: 2px solid #0E2C39;
		border-bottom: 2px solid #0E2C39;
		transform: translate(-50%, -60%) rotate(-45deg);
	}
}

@media (max-width: 767px) {
	/* "Floating card" mobile layout — header and hero sit as separate
	   rounded, inset containers on a white page background instead of
	   full-bleed edge-to-edge sections. Sitewide (the header is a shared
	   template, and every page's hero uses this same class), so no page
	   ends up with a different treatment than its neighbours. */
	body { background: #ffffff !important; }

	.wfwg-header-outer {
		margin: 12px 12px 0;
		border-radius: 20px;
		overflow: hidden;
	}

	.wfwg-hero-section-bg {
		margin: 12px;
		border-radius: 20px;
	}
}

/* Amelia booking widget — the real cause of "Continue is a scroll away":
   .am-fs__wrapper is a flex row (step sidebar + step content), and with
   the default align-items:stretch every step's content column is forced
   to match the height of whichever is tallest — normally the sidebar's
   own 4-item list (~560px). A short step like the service dropdown still
   rendered that same tall column, pushing Continue far below it for no
   reason. Switching to flex-start lets each column size to its own real
   content instead. */
.am-fs__wrapper {
	align-items: flex-start !important;
	/* Amelia also hardcodes this outer wrapper itself to height:560px
	   (sized for its own default sidebar), independently of the content-box
	   fix below — so even once a step's content genuinely grew taller, the
	   wrapper's own box stayed pinned at 560px. overflow:visible let the
	   content spill out visibly, but a box that visually overflows its own
	   bounds doesn't push following siblings down — so the page's "Booking
	   Enabled by Amelia" credit line (a sibling right after this wrapper)
	   kept landing at the old 560px mark, overlapping the real content and
	   burying the Continue button under it. Growing the wrapper itself to
	   match fixes that at the source. */
	height: auto !important;
}
/* Amelia's own CSS hardcodes .am-fs__main-content to height:444px. Combined
   with its overflow-x:hidden, the CSS spec's auto overflow-y quirk turns
   that into a real (invisible) internal scrollbox once a step's content
   (e.g. the Date & Time step's calendar + full slot list) is taller than
   444px — and Amelia's own JS scrolls that inner box to a varying position,
   which is what made the "last slot hidden behind Continue" bug look
   inconsistent between visits. Letting the box grow to its real content
   height removes the internal scroll entirely, so every step just extends
   the page's own scroll instead of clipping itself. */
.am-fs__main-content {
	height: auto !important;
	overflow-y: visible !important;
}
/* With columns no longer stretched (see .am-fs__wrapper above) and content
   no longer clipped to a fixed height, the footer (Amelia's own
   position:absolute + bottom:0) sits flush against the content box's true
   bottom edge. A reserved space under the content keeps the footer clear
   of the last row on every step. This needs to be generous: testing showed
   the true content height (scrollHeight) can end up a little taller than
   the auto-computed height itself by a variable amount — apparently some
   timing/rounding slack in Amelia's own slot-grid rendering, not something
   any CSS rule here is capping — so a small reserve isn't reliable; this
   value was set with real margin above the worst case measured. */
.am-fs__main-content {
	padding-bottom: 160px !important;
}
.am-fs__main-footer .am-button-continue,
.am-fs__main-footer .am-button {
	font-size: 16px !important;
	font-weight: 700 !important;
	padding: 14px 34px !important;
	border-radius: 10px !important;
}

/* Every service is a fixed call-out price, but the real job may cost more
   once Jake's seen it — label it "From £X" in the service picker so that's
   clear up front. Scoped to the dropdown list item only (.am-select-service-
   price), not the Payments step's total, which is a real total for the
   selected service and shouldn't read as a range. */
.am-select-service-price::before {
	content: "From ";
}

/* Payments-step summary (see main.js for the row it injects/rewrites):
   the "Total Amount" row is repurposed into a placeholder-booking notice
   instead of a firm price, since Jake only confirms the real cost after
   seeing the job. Style it as a helpful note rather than Amelia's native
   flex price row (label left, amount right). */
.am-fs__payments-app-info-total.wfwg-am-placeholder-note {
	display: block !important;
	background: rgba(43, 154, 217, 0.08);
	border: 1px solid rgba(43, 154, 217, 0.25);
	border-radius: 8px;
	padding: 12px 14px !important;
}
.am-fs__payments-app-info-total.wfwg-am-placeholder-note span {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--am-c-pay-text, #1a2c37);
}

/* Amelia Lite's own "Booking Enabled by Amelia" attribution footer. */
.am-lite-footer {
	display: none !important;
}

/* The Book Online page's own theme-generated page title ("Book Online",
   Hello Elementor's default .entry-title/.page-header) is redundant with
   the "Book a repair online" heading already in the page's own Elementor
   content just below it — hide it on this page only. */
body.page-id-82 .page-header,
body.page-id-85 .page-header {
	display: none;
}

/* Get Protected page — the appliance-cover callback request form. WPForms'
   own "modern" theme is plain/generic by default; restyle it to match the
   rest of the site (same card treatment as the Amelia booking widget,
   same brand blue, same type). Scoped to this page only. */
body.page-id-85 .wpforms-container {
	max-width: 640px;
	margin: 0 auto 80px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 30px 40px rgba(0, 0, 0, 0.08);
	padding: 40px;
	box-sizing: border-box;
	/* The step wizard below drives this form as its submission backend
	   (see main.js) — it's never meant to be seen or filled in directly,
	   only populated by JS and submitted programmatically once the wizard
	   finishes. display:none doesn't stop JS reading/setting its field
	   values or its own AJAX submit handler from running; WPForms swaps
	   this container's own class off (to .wpforms-confirmation-container-
	   full) on success, so the confirmation below isn't hidden by this. */
	display: none;
}
body.page-id-85 .wpforms-field-label {
	font-family: Poppins, sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: #10222b;
}
body.page-id-85 .wpforms-field-required {
	color: #10222b;
}
body.page-id-85 .wpforms-field input[type="text"],
body.page-id-85 .wpforms-field input[type="email"],
body.page-id-85 .wpforms-field select {
	border: 1px solid #d7e2e8 !important;
	border-radius: 8px !important;
	padding: 12px 14px !important;
	font-family: "DM Sans", sans-serif;
	font-size: 15px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.page-id-85 .wpforms-field input[type="text"]:focus,
body.page-id-85 .wpforms-field input[type="email"]:focus,
body.page-id-85 .wpforms-field select:focus {
	border-color: #2b9ad9 !important;
	outline: none;
	box-shadow: 0 0 0 3px rgba(43, 154, 217, 0.15);
}
body.page-id-85 .wpforms-submit {
	background: #2b9ad9 !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 14px 34px !important;
	font-family: Poppins, sans-serif !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	color: #fff !important;
	cursor: pointer;
	transition: background 0.15s ease;
}
body.page-id-85 .wpforms-submit:hover {
	background: #1e7fb8 !important;
}
body.page-id-85 .wpforms-confirmation-container-full {
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #10222b;
	background: rgba(43, 154, 217, 0.08);
	border: 1px solid rgba(43, 154, 217, 0.25);
	border-radius: 16px;
	padding: 32px;
	max-width: 640px;
	margin: 0 auto 80px;
	box-sizing: border-box;
}
@media (max-width: 767px) {
	body.page-id-85 .wpforms-container,
	body.page-id-85 .wpforms-confirmation-container-full {
		margin-left: 16px;
		margin-right: 16px;
		padding: 24px;
	}
}

/* Get Protected — interactive step wizard (see main.js for the step logic
   and the bridge that copies each answer into the hidden WPForms fields
   above, then triggers WPForms' own proven submit/notify pipeline once the
   last step completes). */
.wfwg-cover-wizard {
	max-width: 640px;
	margin: 0 auto 80px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 30px 40px rgba(0, 0, 0, 0.08);
	padding: 40px;
	box-sizing: border-box;
}
/* The theme reset stylesheet styles every [type="button"] with a pink
   default border and pink text at the same specificity as a single class
   selector (an attribute selector counts the same as a class), winning
   ties purely on source order — every button selector below is qualified
   with the `button` tag too, bumping specificity just enough to always
   win regardless of stylesheet order. */
.wfwg-cover-wizard button {
	font: inherit;
	white-space: normal;
}
.wfwg-cover-progress {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 28px;
}
.wfwg-cover-progress-label {
	font-family: Poppins, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #7c919b;
}
.wfwg-cover-progress-bar {
	height: 4px;
	border-radius: 999px;
	background: #eef3f6;
	overflow: hidden;
}
.wfwg-cover-progress-fill {
	height: 100%;
	width: 25%;
	border-radius: 999px;
	background: linear-gradient(100deg, #2b9ad9 0%, #b8a6e6 100%);
	transition: width 0.3s ease;
}
.wfwg-cover-step {
	display: none;
}
.wfwg-cover-step.is-active {
	display: block;
	animation: wfwg-cover-step-in 0.25s ease;
}
@keyframes wfwg-cover-step-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}
button.wfwg-cover-back {
	display: inline-flex;
	align-items: center;
	background: none;
	border: none;
	padding: 0;
	margin-bottom: 18px;
	font-family: Poppins, sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #7c919b;
	cursor: pointer;
	transition: color 0.15s ease;
}
button.wfwg-cover-back:hover,
button.wfwg-cover-back:focus {
	background: none;
	color: #1e7fb8;
}
.wfwg-cover-question {
	font-family: Poppins, sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: #10222b;
	margin: 0 0 24px;
}
.wfwg-cover-tiles {
	display: grid;
	gap: 12px;
}
.wfwg-cover-tiles-appliance {
	grid-template-columns: repeat(3, 1fr);
}
.wfwg-cover-tiles-brand,
.wfwg-cover-tiles-age {
	grid-template-columns: repeat(2, 1fr);
}
button.wfwg-cover-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: #f5f8fa;
	border: 1.5px solid #e2ebef;
	border-radius: 14px;
	padding: 20px 12px;
	font-family: Poppins, sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	color: #10222b;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
button.wfwg-cover-tile:hover,
button.wfwg-cover-tile:focus {
	border-color: #2b9ad9;
	background: #f5f8fa;
	color: #10222b;
	transform: translateY(-2px);
}
button.wfwg-cover-tile.is-selected,
button.wfwg-cover-tile.is-selected:hover,
button.wfwg-cover-tile.is-selected:focus {
	border-color: #2b9ad9;
	background: rgba(43, 154, 217, 0.08);
	color: #1e7fb8;
}
.wfwg-cover-tile-icon {
	color: #2b9ad9;
	display: inline-flex;
}
.wfwg-cover-tile-text {
	padding: 16px 14px;
	flex-direction: row;
}
.wfwg-cover-other-field {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.wfwg-cover-other-field label {
	font-family: Poppins, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #10222b;
}
.wfwg-cover-other-brand-input,
.wfwg-cover-input {
	width: 100%;
	font-family: "DM Sans", sans-serif;
	font-size: 15px;
	color: #10222b;
	background: #fff;
	border: 1.5px solid #dce6eb;
	border-radius: 10px;
	padding: 13px 15px;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wfwg-cover-other-brand-input:focus,
.wfwg-cover-input:focus {
	outline: none;
	border-color: #2b9ad9;
	box-shadow: 0 0 0 3px rgba(43, 154, 217, 0.12);
}
button.wfwg-cover-continue-btn,
button.wfwg-cover-submit {
	background: #2b9ad9;
	border: none;
	border-radius: 10px;
	padding: 14px 30px;
	font-family: Poppins, sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: #fff;
	cursor: pointer;
	transition: background 0.15s ease;
}
button.wfwg-cover-continue-btn:hover,
button.wfwg-cover-continue-btn:focus,
button.wfwg-cover-submit:hover,
button.wfwg-cover-submit:focus {
	background: #1e7fb8;
	color: #fff;
}
button.wfwg-cover-submit {
	width: 100%;
	margin-top: 8px;
}
.wfwg-cover-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 18px;
}
.wfwg-cover-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 18px;
}
.wfwg-cover-field label {
	font-family: Poppins, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #10222b;
}
.wfwg-cover-error {
	font-family: "DM Sans", sans-serif;
	font-size: 14px;
	color: #c0392b;
	margin: -6px 0 14px;
}
.wfwg-cover-confirm-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 24px;
}
.wfwg-cover-confirm-item {
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(43, 154, 217, 0.08);
	border: 1px solid rgba(43, 154, 217, 0.24);
	border-radius: 10px;
	padding: 14px 16px;
	font-family: Poppins, sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	color: #10222b;
}
.wfwg-cover-confirm-item svg {
	flex: none;
	color: #2b9ad9;
}
.wfwg-cover-confirm-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
button.wfwg-cover-confirm-yes,
button.wfwg-cover-confirm-no {
	border-radius: 10px;
	padding: 14px 20px;
	font-family: Poppins, sans-serif;
	font-weight: 700;
	font-size: 15.5px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
button.wfwg-cover-confirm-yes {
	background: #fff;
	border: 1.5px solid #2b9ad9;
	color: #1e7fb8;
}
button.wfwg-cover-confirm-yes:hover,
button.wfwg-cover-confirm-yes:focus {
	background: rgba(43, 154, 217, 0.08);
	color: #1e7fb8;
}
button.wfwg-cover-confirm-no {
	background: #2b9ad9;
	border: 1.5px solid #2b9ad9;
	color: #fff;
}
button.wfwg-cover-confirm-no:hover,
button.wfwg-cover-confirm-no:focus {
	background: #1e7fb8;
	border-color: #1e7fb8;
	color: #fff;
}
@media (max-width: 600px) {
	.wfwg-cover-confirm-buttons {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 600px) {
	.wfwg-cover-wizard {
		padding: 24px;
		margin-left: 16px;
		margin-right: 16px;
		width: auto;
	}
	.wfwg-cover-tiles-appliance {
		grid-template-columns: repeat(2, 1fr);
	}
	.wfwg-cover-field-row {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 767px) {
	.am-fs__main-footer {
		padding: 14px 16px !important;
	}
	.am-fs__main-footer .am-button-continue,
	.am-fs__main-footer .am-button {
		width: 100%;
	}
	/* Amelia's own 100px top/bottom margin around the whole widget is sized
	   for a spacious desktop page — on a phone screen it's most of the gap
	   pushing Continue below the fold on short steps. */
	.am-fs__wrapper {
		margin-top: 20px !important;
		margin-bottom: 20px !important;
	}
}

/* Header nav (Xpro Horizontal Menu widget replacing the old hand-coded
   <nav>). The widget's own submenu width/style controls only support a
   single flat column — the "Areas We Cover" dropdown needs two ("Main
   areas" / "Also serving") to fit 13 towns without an overly tall list.
   Scoped to that specific menu item (id 94, the "Areas We Cover" item
   created via wp_update_nav_menu_item) so "Services"' dropdown stays a
   normal single column. */
.menu-item-94 > .xpro-elementor-dropdown-menu {
	width: 420px !important;
	column-count: 2;
	column-gap: 8px;
}

/* Contact page — "get in touch" info cards + form card layout. */
.wfwg-contact-info-card {
	background: #ffffff;
	border: 1px solid #E2EBEF;
	border-radius: 18px;
	box-shadow: 0 8px 22px rgba(16,34,43,0.06);
	padding: 26px 26px 24px;
	margin-bottom: 16px;
}
.wfwg-contact-info-icon {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: linear-gradient(100deg, #2B9AD9 0%, #B8A6E6 100%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.wfwg-contact-info-icon svg { width: 20px; height: 20px; stroke: #fff; }
.wfwg-contact-info-label {
	display: block;
	font-family: Poppins, sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #7C919B;
	margin-bottom: 8px;
}
.wfwg-contact-info-value {
	display: block;
	font-family: Poppins, sans-serif;
	font-size: 21px;
	font-weight: 700;
	color: #10222B;
	text-decoration: none;
	margin-bottom: 8px;
	overflow-wrap: break-word;
	word-break: break-word;
}
a.wfwg-contact-info-value:hover { color: #1E7FB8; }
.wfwg-contact-info-note {
	font-size: 14.5px;
	line-height: 1.55;
	color: #6C8793;
}
.wfwg-contact-info-note a { color: #10222B; font-weight: 700; text-decoration: none; border-bottom: 2px solid #B8A6E6; }
.wfwg-contact-info-note a:hover { color: #1E7FB8; }

.wfwg-contact-tips { margin-top: 6px; padding: 0 4px; }
.wfwg-contact-tips-title {
	font-family: Poppins, sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #10222B;
	margin-bottom: 10px;
}
.wfwg-contact-tips ul { margin: 0; padding: 0; list-style: none; }
.wfwg-contact-tips li {
	position: relative;
	padding-left: 20px;
	font-size: 14.5px;
	line-height: 1.6;
	color: #6C8793;
	margin-bottom: 8px;
}
.wfwg-contact-tips li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #B8A6E6;
}
.wfwg-contact-tips { margin-bottom: 24px; }

.wfwg-contact-info-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.wfwg-contact-info-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16,34,43,0.10); border-color: #B8A6E6; }

/* Elementor's own responsive stylesheet forces
   ".elementor-inner-section .elementor-column > .elementor-widget-wrap"
   padding-top/bottom to 0 with !important below 767px (three classes'
   worth of specificity) — the card's own selector needs to out-rank that,
   not just out-declare it, so the class is doubled up rather than relying
   on !important alone. */
.wfwg-contact-form-card.wfwg-contact-form-card > .elementor-widget-wrap {
	background: #ffffff;
	border: 1px solid #E2EBEF;
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(16,34,43,0.07);
	padding: 40px !important;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wfwg-contact-form-card:hover > .elementor-widget-wrap {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(16,34,43,0.10);
	border-color: #B8A6E6;
}
@media (max-width: 767px) {
	.wfwg-contact-form-card.wfwg-contact-form-card > .elementor-widget-wrap { padding: 28px 22px !important; }
}