/* ===========================================================================
 * WillFix — global brand & accessibility layer
 * Implements willfix-brand-guidelines.html (v1.0). Enqueued LAST (PHP_INT_MAX)
 * so it reliably overrides theme + plugin CSS.
 *
 * Palette (WCAG 2.1 AA on the stated background):
 *   navy        #304366  headings, emphasis            9.9:1 / white
 *   navy-deep   #1B2940  body ink, dark sections       14.6:1 / white
 *   ink-soft    #46536B  secondary text                7.2:1 / white
 *   teal-brand  #65C8D0  DECORATIVE ONLY (≥3px, navy text) — never text on white
 *   teal-aa     #258193  links / interactive on white  4.5:1 (AA)
 *   teal-aaa    #1B5D6A  link hover on white           7.5:1
 *   teal-600    #2F949D  large display / borders / stat numerals  3.6:1
 *   teal-700    #246F75  secondary buttons / hover     5.8:1
 *   teal-tint   #C4EAED  panels w/ navy text        teal-wash #EBF7F8
 *   teal-light  #9DDCE1  links/buttons on dark navy    9.6:1 / ink
 *   line #D5DCE4 · yellow #FFC629 (single strongest CTA, ink text)
 * ======================================================================== */
:root {
	--wf-navy: #304366;
	--wf-navy-deep: #1B2940;
	--wf-ink: #1B2940;
	--wf-ink-soft: #46536B;
	--wf-teal-brand: #65C8D0;
	--wf-teal-aa: #258193;
	--wf-teal-aaa: #1B5D6A;
	--wf-teal-600: #2F949D;
	--wf-teal-700: #246F75;
	--wf-teal-tint: #C4EAED;
	--wf-teal-wash: #EBF7F8;
	--wf-teal-light: #9DDCE1;
	--wf-line: #D5DCE4;
	--wf-yellow: #FFC629;
}

/* ---- Content / body links on light: action teal, underlined (WCAG 1.4.1) ----
 * The theme's global rule paints links brand teal #65C8D0 (1.96:1 — fails).
 * Restrict to readable content contexts; nav, hero, footer and buttons keep
 * their own treatment. */
.wpb_text_column a:not(.btn):not([class*="vc_btn"]):not(.vc_single_image-wrapper):not(.new_posts-custom-item__wrapper):not(.wf-viewall-btn),
.main__content p a,
.main__content li a,
.blog-post-content a,
.gfield_consent_label a,
.gfield_consent_description a {
	/* color intentionally not set — links inherit the surrounding text color */
	text-decoration: underline !important;
	text-decoration-thickness: 1px !important;
	text-underline-offset: 3px !important;
	font-weight: 600;
}
.wpb_text_column a:not(.btn):not([class*="vc_btn"]):not(.vc_single_image-wrapper):not(.new_posts-custom-item__wrapper):not(.wf-viewall-btn):hover,
.main__content p a:hover,
.main__content li a:hover,
.blog-post-content a:hover,
.gfield_consent_label a:hover,
.gfield_consent_description a:hover,
.jfaq-wrap div[class*="--jfaq-theme-"] .jfaq--answer-content a:hover {
	/* color inherited (matches the no-color base rule above) */
	text-decoration: none !important;            /* underline disappears on hover */
	text-decoration-color: transparent !important;
}
/* FAQ answer links — match the FAQ block's specificity so this wins */
.jfaq-wrap div[class*="--jfaq-theme-"] .jfaq--answer-content a {
	color: var(--wf-teal-aa) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	font-weight: 600;
}
.jfaq-wrap div[class*="--jfaq-theme-"] .jfaq--answer-content a:hover { color: var(--wf-teal-aaa) !important; }

/* Content links on DARK backgrounds (hero banner text + dark benefit cards):
 * the action-teal #258193 used on white is too dark here, so use teal-light
 * #9DDCE1 and BRIGHTEN to #C4EAED on hover (underline still disappears).
 * Extra ancestor class out-specifies the white-bg content-link rule above. */
.wpb_text_column.servicetopbanner-container-left-text a:not(.btn):not(.new_posts-custom-item__wrapper):not(.wf-viewall-btn),
.servicebenifits-content-single-text.wpb_text_column a:not(.btn):not(.new_posts-custom-item__wrapper):not(.wf-viewall-btn) {
	color: var(--wf-teal-light) !important;
	text-decoration: underline !important;
}
.wpb_text_column.servicetopbanner-container-left-text a:not(.btn):not([class*="vc_btn"]):not(.vc_single_image-wrapper):not(.new_posts-custom-item__wrapper):not(.wf-viewall-btn):hover,
.servicebenifits-content-single-text.wpb_text_column a:not(.btn):not([class*="vc_btn"]):not(.vc_single_image-wrapper):not(.new_posts-custom-item__wrapper):not(.wf-viewall-btn):hover {
	color: var(--wf-teal-tint) !important;
	text-decoration: none !important;
}

/* ---- Body paragraph color: brand ink #1B2940 (14.6:1 on white) instead of the
 *      Redux default #565656. The parent's slcr-custom-style.php emits
 *      .wpb-js-composer p{color:#565656}; this overrides it for light sections.
 *      Paragraphs on dark backgrounds are re-asserted to light below so they
 *      don't go invisible (other dark spots can be added as found). ---- */
.wpb-js-composer p { color: var(--wf-ink) !important; }
/* White text ONLY where the background is actually dark (hero image + the
 * why-choose/stats section). The .servicesectionheading-text class is reused on
 * light sections too (Testimonials, How-we-do-it, Protection, Blog...), so it is
 * scoped to .whywillbg-section here — elsewhere those paragraphs keep the navy
 * ink from the global rule. Benefit-tile body is set to #C9D3E2 in its block. */
[class*="servicetopbanner-container-left"] p,
.servicebenifits-content-single-text p,
.whywillbg-section .servicesectionheading-text p,
.whywillbg-section .whywillbg-header-number p { color: #fff !important; }
[data-footer-scheme="dark"] .footer__desc p,
[data-footer-scheme="dark"] .footer__main p { color: #C9D3E2 !important; }

/* ---- Content rhythm: only inside editorial content (WPBakery text columns +
 *      blog post body) — never nav, footer, FAQ or other UI lists. ---- */
.wpb_text_column ul,
.blog-post-content ul {
	padding-top: 24px !important;
	padding-bottom: 24px !important;
}
.wpb_text_column p,
.blog-post-content p {
	font-size: 17px !important;  /* brand body baseline. NOTE: this theme sets html{font-size:10px}
	                                (62.5% trick), so 1.0625rem would be ~10px — use px here. */
	line-height: 1.7 !important;
	margin-bottom: 18px !important;   /* was bootstrap's 10px */
}

/* ---- Buttons: ink/navy label on fills (never white-on-teal). ---- */
.btn--primary,
.gform_wrapper .gform_button.button,
.gform_button.button,
.gform_button {
	background: var(--wf-yellow) !important;
	border-color: var(--wf-yellow) !important;
	color: var(--wf-ink) !important;
	font-weight: 700 !important;
}
.btn--primary:hover, .gform_button:hover, .gform_button.button:hover {
	background: #EBAD0A !important;
	color: var(--wf-ink) !important;
}
/* Any explicitly teal-filled button must carry an ink label (brand teal is decorative) */
.btn[style*="65C8D0"], .btn[style*="101, 200, 208"],
.btn--secondary[style*="65C8D0"] { color: var(--wf-ink) !important; }

/* ---- Visible keyboard focus: 3px action-teal ring (checklist item) ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .btn:focus-visible, [tabindex]:focus-visible {
	outline: 3px solid var(--wf-teal-aa) !important;
	outline-offset: 2px !important;
}

/* ---- Cards / tiles: 1px line border, hover lifts to teal-600 ---- */
.new_posts-custom-item__wrapper:hover { border-color: var(--wf-teal-600) !important; }

/* ---- Dropdown indicator: animated Lucide chevron-down on nav items that have
 *      a submenu (.menu-item-has-children). Rendered as a CSS mask so it inherits
 *      the link color (currentColor) and works on both light/dark header schemes
 *      with no JS. Rotates 180° on hover/keyboard focus. ---- */
.nav__main .nav__item.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	margin-left: .2em;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transform-origin: 50% 50%;
	transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.nav__main .nav__item.menu-item-has-children:hover > a::after,
.nav__main .nav__item.menu-item-has-children:focus-within > a::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
	.nav__main .nav__item.menu-item-has-children > a::after { transition: none; }
}

/* ===========================================================================
 * Homepage WPBakery blocks (brand guidelines §03/§05)
 * ======================================================================== */

/* -- Header FREE ESTIMATE button (menu "Menu Buttons" -> secondary-menu
 *    location, item class .round-button, renders in .nav__second which the
 *    theme floats right). Yellow emphasis CTA: #FFC629 + ink 9.3:1, hover
 *    #EBAD0A. opacity:1 beats the theme's dark-scheme a{opacity:.7}. -- */
.nav__second .nav__list .nav__item.round-button a {
	background: var(--wf-yellow) !important;
	color: var(--wf-ink) !important;
	opacity: 1 !important;
	font-weight: 700 !important;
	padding: 10px 22px !important;
	border-radius: 999px !important;
	line-height: 1 !important;
}
.nav__second .nav__list .nav__item.round-button a:hover { background: #EBAD0A !important; color: var(--wf-ink) !important; }
.nav__second .nav__list .nav__item.round-button { margin-right: 0 !important; }

/* ===========================================================================
 * SECTION VERTICAL RHYTHM — even, responsive padding on every WPBakery section.
 * Replaces the removed global `section{margin-bottom:120px}` (which double-
 * stacked and caused giant gaps). One file-based system → survives DB pulls and
 * scales down on mobile. The hero (.landing-first-block) keeps its own height.
 * Any section needing bespoke spacing can still set it natively via WPBakery's
 * `css=` design option (it carries !important and overrides this baseline).
 * ======================================================================== */
/* Spacing model (hero `.landing-first-block` excluded — keeps its own height):
 *  - GAP between sections = transparent margin-bottom (no color bleed into gaps).
 *  - FILL sections (vc_section-has-fill: colored/image bg) ALSO get internal
 *    padding so their content isn't flush to the color edge.
 *  - PLAIN sections get NO padding — the margin gaps handle their spacing.
 *  Strips the chaotic per-section vc_custom margins (100px / -75px / -15px …).
 *  Responsive: gaps + padding shrink on tablet/mobile. */
.vc_section:not(.landing-first-block) {
	margin-top: 0 !important;
	margin-bottom: 0 !important;       /* NO section margins — kills stray gaps */
	padding-top: 56px !important;
	padding-bottom: 56px !important;   /* even spacing comes from padding only */
}
@media (max-width: 991px) {
	.vc_section:not(.landing-first-block) { padding-top: 40px !important; padding-bottom: 40px !important; }
}
@media (max-width: 600px) {
	.vc_section:not(.landing-first-block) { padding-top: 28px !important; padding-bottom: 28px !important; }
}
/* The HERO is the first section (servicetopbanner / landing-first-block). Give
 * it consistent top/bottom padding so the heading/form breathe over the bg
 * image. (The phantom space before the hero was a separate empty CSS-injection
 * row — collapsed below — not the hero's own padding.) Set here, not via
 * WPBakery's css=, because that padding lives in _wpb_shortcodes_custom_css
 * meta that only regenerates on an editor-save and is wiped on every DB pull. */
.wpb-content-wrapper > .vc_section:first-of-type {
	padding-top: 45px !important;
	padding-bottom: 45px !important;
}
@media (max-width: 991px) {
	.wpb-content-wrapper > .vc_section:first-of-type { padding-top: 30px !important; padding-bottom: 30px !important; }
}
@media (max-width: 600px) {
	.wpb-content-wrapper > .vc_section:first-of-type { padding-top: 24px !important; padding-bottom: 24px !important; }
}
/* Some pages build "sections" as LOOSE vc_rows (no <section> wrapper), so the
 * section padding above can't reach them. Give those loose blocks top spacing
 * with PADDING (not margin), consistent with the section rhythm.
 *  - Loose heading rows (.servicesectionheading): padding-top; zeroed when the
 *    heading already lives inside a padded section.
 *  - Generic loose group-start rows (e.g. "Other Approaches…"): WPBakery prints
 *    .vc_row-full-width.vc_clearfix (+ a <style>) after each full-width section,
 *    so the next loose .vc_row is the group start — pad only that one. */
.servicesectionheading { padding-top: 56px !important; }
.vc_section .servicesectionheading { padding-top: 0 !important; }
.wpb-content-wrapper > .vc_row-full-width.vc_clearfix + .vc_row,
.wpb-content-wrapper > .vc_row-full-width.vc_clearfix + style + .vc_row { padding-top: 56px !important; }
@media (max-width: 991px) {
	.servicesectionheading,
	.wpb-content-wrapper > .vc_row-full-width.vc_clearfix + .vc_row,
	.wpb-content-wrapper > .vc_row-full-width.vc_clearfix + style + .vc_row { padding-top: 40px !important; }
	.vc_section .servicesectionheading { padding-top: 0 !important; }
}
@media (max-width: 600px) {
	.servicesectionheading,
	.wpb-content-wrapper > .vc_row-full-width.vc_clearfix + .vc_row,
	.wpb-content-wrapper > .vc_row-full-width.vc_clearfix + style + .vc_row { padding-top: 28px !important; }
	.vc_section .servicesectionheading { padding-top: 0 !important; }
}
/* Hide stray EMPTY sections (leftover spacers with no content). With the fill
 * padding they'd otherwise render as an empty colored band. Catches truly-empty
 * sections and ones whose only child is WPBakery's empty <style> tag. */
.vc_section:empty,
.vc_section:has(> style:only-child) { display: none !important; padding: 0 !important; margin: 0 !important; }
/* Last content block (blog) sits flush to the footer — no trailing gap. */
.vc_section.blog-section-new { margin-bottom: 0 !important; }

/* FAQ page (8998) — Gutenberg content lives in the `allow-gutenberg` wrapper
 * (not vc_sections), so the section-padding system can't reach it. Pad it here.
 * Scoped to this page id because the wrapper is also used to host WPBakery on
 * other pages. */
.page-id-8998 .allow-gutenberg { padding-top: 64px !important; padding-bottom: 64px !important; }
.page-id-8998 .allow-gutenberg .wp-block-paragraph:empty { display: none !important; }
.page-id-8998 .allow-gutenberg h2.wp-block-heading { margin-top: 48px !important; }
@media (max-width: 600px) {
	.page-id-8998 .allow-gutenberg { padding-top: 36px !important; padding-bottom: 36px !important; }
	.page-id-8998 .allow-gutenberg h2.wp-block-heading { margin-top: 32px !important; }
}

/* -- Alternating section backgrounds: flat gray -> brand teal wash
 *    (padding handled by the rhythm system above) -- */
.testimonials-section { background-color: var(--wf-teal-wash) !important; }
.protection-section   { background-color: var(--wf-teal-wash) !important; }

/* -- Service-category SECONDARY NAV (.services-heading-tabs): a CONNECTED
 *    SEGMENTED tab bar matching the theme's tabbed strip — equal segments joined
 *    by dividers, rounded ends (overflow-clipped), teal text; hover/focus fills
 *    the segment solid teal with white text. Accessible: AA contrast, 48px
 *    targets, visible focus. Applies wherever this nav exists. -- */
.services-heading-tabs { text-align: left !important; }
.services-heading-tabs > .wpb_wrapper {
	display: flex !important;
	width: 100% !important;
	flex-wrap: nowrap !important;        /* one row of equal segments */
	align-items: stretch !important;
	gap: 0 !important;
	background: var(--wf-teal-wash) !important;   /* light teal bar */
	border: 1px solid var(--wf-teal-tint) !important;
	border-radius: 12px !important;
	overflow: hidden !important;         /* clip the teal fill to the rounded ends */
	box-sizing: border-box !important;
}
.services-heading-tabs a.services-heading-tabs-single,
.services-heading-tabs a {
	flex: 1 1 0 !important;              /* equal-width segments */
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	border: 0 !important;
	border-right: 1px solid var(--wf-teal-tint) !important;  /* divider */
	border-radius: 0 !important;
	margin: 0 !important;
	color: var(--wf-teal-aa) !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	padding: 13px 12px !important;
	min-height: 48px !important;
	line-height: 1.3 !important;
	text-align: center !important;
	white-space: normal !important;      /* long labels wrap within the segment */
	transition: background-color .2s ease, color .2s ease;
}
.services-heading-tabs a:last-child { border-right: 0 !important; }
.services-heading-tabs a:hover,
.services-heading-tabs a:focus-visible {
	background: var(--wf-teal-aa) !important;   /* active/hover segment, like the screenshot */
	color: #fff !important;
}
/* mobile: stack segments full-width (5 segments won't fit one row) */
@media (max-width: 782px) {
	.services-heading-tabs > .wpb_wrapper { flex-wrap: wrap !important; }
	.services-heading-tabs a.services-heading-tabs-single,
	.services-heading-tabs a { flex: 1 1 100% !important; border-right: 0 !important; border-bottom: 1px solid var(--wf-teal-tint) !important; }
	.services-heading-tabs a:last-child { border-bottom: 0 !important; }
}

/* -- Blog section: teal-wash panel + sane vertical spacing on EVERY page.
 *    The home block's bg/padding live in WPBakery's per-page _wpb_shortcodes_custom_css
 *    meta (only regenerated on editor-save), so DB-inserted copies render bare.
 *    Style the class directly so all blog sections match home regardless of meta,
 *    and kill the oversized bottom margin (footer follows cleanly). -- */
.blog-section-new {
	background-color: var(--wf-teal-wash) !important;
	margin-bottom: 0 !important;   /* padding handled by the rhythm system */
}

/* -- Service-areas / locations section: white bg, city links as light-teal
 *    pills (full-width wrap), rounded soft-bordered map. Markup/content
 *    untouched — pure styling on the existing nav-menu links + map iframe.
 *    The city menu's inner column is now full width (WPBakery) so the pills
 *    flow 3–4 per row instead of cramming into two. -- */
.locations-section { background-color: #fff !important; }  /* padding handled by the rhythm system */

/* left column vertical rhythm + gutter from the map */
.locations-section .locations-content-left { padding-right: 28px !important; }
/* neutralise the theme's legacy flex (justify-content:space-between) on this
 * wrapper — it was built for an old 3-column menu and spreads the pills. */
.locations-section .locations-content-left-menus { display: block !important; }
.locations-section .locations-content-left .vc_custom_heading { margin: 0 0 18px !important; }
.locations-section .locations-content-left-menus { margin: 0 0 22px !important; padding-top: 14px !important; }
/* strip the nav-menu widget's own wrappers so spacing is fully controlled here */
.locations-section .locations-content-left-menus .vc_column-inner,
.locations-section .locations-content-left-menus .wpb_wrapper,
.locations-section .locations-content-left-menus .vc_wp_custommenu,
.locations-section .locations-content-left-menus .widget_nav_menu,
.locations-section .locations-content-left-menus [class*="-container"] { margin: 0 !important; padding: 0 !important; }

/* city links -> light-teal pills, wrapping across the full column width */
.locations-section .locations-content-left-menus .menu {
	display: flex !important; flex-wrap: wrap !important; gap: 10px !important;
	list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.locations-section .locations-content-left-menus .menu li { margin: 0 !important; padding: 0 !important; }
.locations-section .locations-content-left-menus .menu li a {
	display: inline-block !important;
	background: var(--wf-teal-wash) !important;
	border: 1px solid var(--wf-teal-tint) !important;
	color: var(--wf-navy) !important;
	font-size: 14px !important; font-weight: 600 !important; line-height: 1.2 !important;
	padding: 9px 18px !important;
	border-radius: 999px !important;
	text-decoration: none !important;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.locations-section .locations-content-left-menus .menu li a:hover {
	background: var(--wf-teal-tint) !important;
	border-color: var(--wf-teal-aa) !important;
	color: var(--wf-teal-aaa) !important;
}
/* "don't spot your area" trailing text */
.locations-section .locations-content-left .wpb_text_column p { margin: 0 0 8px !important; }

/* map: rounded + soft border, fills its column and balances the left height */
.locations-section .areas-section-locations-map iframe {
	width: 100% !important;
	min-height: 440px !important;
	height: 100% !important;
	border: 1px solid var(--wf-line) !important;
	border-radius: 14px !important;
	display: block !important;
}

/* "How we do it" process tiles: left fully native to WPBakery — the original
 * numbered SVG images (one.svg/2.svg…), VC column grid, and theme content-dark
 * text styling all apply unchanged. No counter, no image-hide, no card override. */

/* -- Dark feature tiles (protection / hazard cards): deep-navy variant.
 *    #1B2940 fill, #3A4A66 border, body #C9D3E2 (9.7:1), white headings. -- */
.wpb_raw_code[class*="protection-con"] {
	background: var(--wf-navy-deep) !important;
	border: 1px solid #3A4A66 !important;
	border-radius: 16px !important;
}
.wpb_raw_code[class*="protection-con"] p { color: #C9D3E2 !important; }
.wpb_raw_code[class*="protection-con"] h1,
.wpb_raw_code[class*="protection-con"] h2,
.wpb_raw_code[class*="protection-con"] h3,
.wpb_raw_code[class*="protection-con"] h4 { color: #fff !important; }

/* -- Links on dark navy (footer): teal-light #9DDCE1 (9.6:1), hover tint.
 *    Specificity (0,4,3)+ needed to beat the parent theme's
 *    .slcr-sidebar[data-footer-scheme="dark"] ul li a { #fff !important }. -- */
.slcr-sidebar[data-footer-scheme="dark"] .footer__main ul li a,
.slcr-sidebar[data-footer-scheme="dark"] .footer__cont ul li a,
[data-footer-scheme="dark"] .footer__main a,
[data-footer-scheme="dark"] .footer__bottom a,
[data-footer-scheme="dark"] .footer__desc a,
[data-footer-scheme="dark"] .footer__cont a,
[data-footer-scheme="dark"] .copyright__text a { color: var(--wf-teal-light) !important; }
.slcr-sidebar[data-footer-scheme="dark"] .footer__main ul li a:hover,
.slcr-sidebar[data-footer-scheme="dark"] .footer__cont ul li a:hover,
[data-footer-scheme="dark"] .footer__main a:hover,
[data-footer-scheme="dark"] .footer__cont a:hover,
[data-footer-scheme="dark"] .copyright__text a:hover { color: var(--wf-teal-tint) !important; }

/* ===========================================================================
 * Hero quote form (#gform_2) — compact + brand inputs, accessible hidden labels.
 * Goal: shrink the form's footprint in the hero. Field labels are visually
 * hidden (NOT display:none) so screen readers + the programmatic label/for
 * association are preserved (WCAG 1.3.1 / 3.3.2 / 4.1.2); the placeholder is
 * only a supplementary cue. The consent checkbox label + its description stay
 * fully visible (legal + required). Selectors carry #gform_2 + .gform_fields so
 * they outrank the Customizer's #gform_2 rules regardless of load order.
 * (Other forms to be done later.)
 * ======================================================================== */

/* Visually hide field labels + the consent fieldset legend, keep them for a11y */
#gform_2 .gfield_label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
/* …but the consent label + description must remain visible */
#gform_2 .gfield_consent_label,
#gform_2 .gfield_consent_description {
	position: static !important;
	width: auto !important;
	height: auto !important;
	clip: auto !important;
	overflow: visible !important;
	white-space: normal !important;
}

/* (Input appearance reverted to the existing Customizer styling — to be adjusted later.) */

/* Select fix: appearance:none strips the native arrow, so draw a Lucide
 * chevron-down on the right; background-image only keeps the Customizer's
 * background-color/border. line-height:normal stops the option text being
 * vertically clipped. */
#gform_2 .gform_fields select {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23304366'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 18px !important;
	padding-right: 42px !important;
	padding-left: 16px !important; /* align selected text with the other inputs */
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	height: 48px !important;
	min-height: 48px !important;
	line-height: 46px !important;   /* = content height, vertically centers the single line */
	text-overflow: ellipsis;
}

/* Placeholders match the select's selected-text color (#333) for a consistent
 * filled/empty look across the form, per request. */
#gform_2 input::placeholder,
#gform_2 .gform_fields input::placeholder { color: #333 !important; opacity: 1 !important; }

/* "FREE Estimation" emphasis — colored deep-teal (AAA 7.5:1, clearly distinct
 * from the navy heading) with a thicker brand-teal accent underline. Reads as a
 * deliberate highlight without a highlighter block. Overrides inline var(--blue). */
.servicetopbanner-container-right-text h3 span[style] {
	color: var(--wf-ink) !important; /* dark text on top */
	font-weight: 800 !important;
	background: #9DDCE1 no-repeat !important;  /* solid light brand teal */
	background-position: 0 100% !important;   /* band sits at the bottom… */
	background-size: 100% 42% !important;      /* …covering the lower ~42% (highlighter swipe) */
	padding: 0 .08em .02em !important;
	text-decoration: none !important;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ===========================================================================
 * Homepage "Why Choose" benefit tiles → brand dark feature-tile.
 * Cards the .vc_column-inner (so the VC column gutters become the gaps), flexes
 * the rows for equal height, gives the benefit icon the rounded teal-tint box,
 * white headings + soft body. Content untouched.
 * NOTE: border-color stays in the transition for the hover effect — it renders
 * with #3A4A66 from first paint (the "stuck #565656" was a live-injection quirk).
 * ======================================================================== */
/* Equal-height rows: flex the row, stretch columns, card fills the column */
/* Equal-height columns via VC's OWN flex mechanism (mirrors the row "Equal
 * height" option: .vc_row-flex). The key line is disabling the row's clearfix
 * ::before/::after — in a flex row those pseudo-elements become flex items and
 * stack the columns (that was the 1-column bug). With them gone, VC's native
 * column widths (col-sm-6 → 2-up, col-sm-4 → 3-up) lay out side-by-side and
 * stretch to equal height. Uniform spacing comes from VC's column gutter. */
.whywillbg-content,
.servicebenifits-content { box-sizing: border-box; display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; row-gap: 30px !important; }
.whywillbg-content::before, .whywillbg-content::after,
.servicebenifits-content::before, .servicebenifits-content::after { display: none !important; }
.whywillbg-content > .vc_column_container,
.servicebenifits-content > .vc_column_container { display: flex !important; }
.whywillbg-content > .vc_column_container > .vc_column-inner,
.servicebenifits-content > .vc_column_container > .vc_column-inner { display: flex !important; flex-direction: column !important; flex-grow: 1 !important; }

/* Same equal-height + row spacing for ANY row of benefit tiles whose row does
 * NOT carry the servicebenifits-content/whywillbg-content class (some sections
 * use a plain vc_row). Matched by the tile children via :has, so spacing is
 * consistent across every tile section without per-section WPBakery edits. */
.vc_row:has(> .servicebenifits-content-single) { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; row-gap: 30px !important; }
.vc_row:has(> .servicebenifits-content-single)::before,
.vc_row:has(> .servicebenifits-content-single)::after { display: none !important; }
.vc_row:has(> .servicebenifits-content-single) > .servicebenifits-content-single { display: flex !important; }
.vc_row:has(> .servicebenifits-content-single) > .servicebenifits-content-single > .vc_column-inner { width: 100% !important; }

.servicebenifits-content-single > .vc_column-inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;       /* center the icon + content */
	text-align: center !important;
	background: var(--wf-navy-deep) !important;
	border: 1px solid #3A4A66 !important;
	border-radius: 16px !important;
	padding: 26px 24px !important;
	transition: transform .25s ease, border-color .25s ease, background-color .2s ease;
}
.servicebenifits-content-single:hover > .vc_column-inner {
	border-color: var(--wf-teal-brand) !important;
	transform: translateY(-4px);
}
/* Icon: no box, centered */
.servicebenifits-content-single-img { margin: 0 auto 18px !important; text-align: center !important; }
.servicebenifits-content-single-img,
.servicebenifits-content-single-img.vc_align_center { text-align: center !important; }
.servicebenifits-content-single-img .vc_single_image-wrapper {
	display: inline-block !important;
	width: auto !important;
	height: auto !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.servicebenifits-content-single-img img { width: auto !important; height: 72px !important; }
/* Heading — white + bold on the dark card, regardless of tag (h3, h4 or .h4).
 * (Some sections use <h4><b>…</b></h4>, which the h3-only rule left dark = invisible.) */
.servicebenifits-content-single .servicebenifits-content-single-text h3,
.servicebenifits-content-single .servicebenifits-content-single-text h4,
.servicebenifits-content-single .servicebenifits-content-single-text .h4,
.servicebenifits-content-single .servicebenifits-content-single-text h3.h4 {
	color: #fff !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	margin: 0 0 10px !important;
}
.servicebenifits-content-single .servicebenifits-content-single-text h3 b,
.servicebenifits-content-single .servicebenifits-content-single-text h4 b { color: #fff !important; font-weight: 700 !important; }
.servicebenifits-content-single-text p { color: #C9D3E2 !important; }
/* multi-tile columns (2 benefits stacked in one card): space the 2nd benefit
 * block off the first, and the icon above each */
.servicebenifits-content-single .vc_empty_space { height: 26px !important; }
.servicebenifits-content-single .servicebenifits-content-single-img ~ .servicebenifits-content-single-img,
.servicebenifits-content-single-text + .servicebenifits-content-single-img { margin-top: 8px !important; }

/* The "Get A Free Quote" slot (the only non-benefit column in the content rows):
 * center its icon + button both horizontally and vertically in the tall cell. */
.whywillbg-content > .wpb_column:not(.servicebenifits-content-single) > .vc_column-inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	height: 100% !important;
}

/* ===========================================================================
 * Blog section tiles → brand "light tile 3" (blog teaser).
 * Inset 16:9 image w/ radius, deep-teal uppercase meta, navy linked title
 * (underline on hover), 2-line excerpt, "Read more" arrow. White card, #D5DCE4
 * border, 16px radius, equal-height, hover lift + #2F949D border.
 * Overrides the earlier edge-to-edge grid in style.css (loads last).
 * ======================================================================== */
.new_posts-custom-items {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* minmax(0,..) stops images blowing the tracks wider than the container */
	gap: 24px !important;
	margin: 0 !important;   /* kill the old -20px gutter margins that pushed the wrapper past its parent */
	width: 100% !important;
}
.new_posts-custom-item { padding: 0 !important; margin: 0 !important; width: auto !important; min-width: 0 !important; display: block !important; }
.new_posts-custom-item__wrapper {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	height: 100% !important;
	min-width: 0 !important;
	background: #fff !important;
	border: 1px solid var(--wf-line) !important;
	border-radius: 16px !important;
	padding: 26px !important;
	text-decoration: none !important;
	overflow: visible !important;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
.new_posts-custom-item__wrapper:hover {
	transform: translateY(-3px) !important;
	border-color: var(--wf-teal-600) !important;
	box-shadow: 0 10px 28px rgba(48, 67, 102, .10) !important;
}
/* inset 16:9 image with rounded corners; teal-wash placeholder when missing */
.new_posts-custom-item__img {
	margin: 0 !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	height: auto !important;          /* override the old fixed height:260px so aspect-ratio controls it */
	aspect-ratio: 16 / 9 !important;
	background: var(--wf-teal-wash) !important;
	width: 100% !important;
}
.new_posts-custom-item__img img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.new_posts-custom-item__content { padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 12px !important; flex: 1 !important; }
/* meta — deep teal, uppercase */
.new_posts-custom-item__meta { margin: 0 !important; }
.new_posts-custom-item__date { color: var(--wf-teal-aa) !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .08em !important; font-size: 12px !important; padding: 0 !important; }
.new_posts-custom-item__date:before { display: none !important; }
/* title — navy, 2 lines, underline on hover */
.new_posts-custom-item__title {
	color: var(--wf-navy) !important;
	font-weight: 700 !important;
	font-size: 19px !important;
	line-height: 1.35 !important;
	margin: 0 !important;
	display: block !important;          /* full title, no clamp */
	overflow: visible !important;
}
.new_posts-custom-item__wrapper:hover .new_posts-custom-item__title { text-decoration: none !important; }
/* excerpt — 2 lines */
.new_posts-custom-item__excerpt {
	color: var(--wf-ink-soft) !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	margin: 0 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}
/* "Read the article" — deep teal, Lucide arrow that slides on hover, pinned bottom */
.new_posts-custom-item__more {
	margin-top: auto !important;
	padding-top: 4px;
	display: inline-flex !important;
	align-items: center !important;
	line-height: 1 !important;
	gap: 6px;
	color: var(--wf-teal-aa) !important;   /* brand action teal #258193 */
	font-weight: 600 !important;
	font-size: 14px !important;
}
.new_posts-custom-item__wrapper:hover .new_posts-custom-item__more { color: var(--wf-teal-aaa) !important; } /* #1B5D6A on hover */
.new_posts-custom-item__more .wf-arrow {
	display: block !important;   /* kill inline-SVG baseline gap so it centers */
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	transition: transform .2s ease;
}
.new_posts-custom-item__wrapper:hover .new_posts-custom-item__more .wf-arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .new_posts-custom-item__more .wf-arrow { transition: none; } }

/* "View All Articles" — centered navy button under the grid */
.new_posts-custom-viewall { text-align: center !important; margin-top: 36px !important; }
.new_posts-custom-viewall .wf-viewall-btn {
	display: inline-block;
	background: var(--wf-navy) !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	padding: 14px 32px !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	transition: background .15s ease, transform .15s ease;
}
.new_posts-custom-viewall .wf-viewall-btn:hover { background: var(--wf-navy-deep) !important; transform: translateY(-1px); }
@media (max-width: 1024px) { .new_posts-custom-items { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px)  { .new_posts-custom-items { grid-template-columns: 1fr !important; } }

/* ===========================================================================
 * Tiles — left-aligned content + responsive stacking (feature / numbered).
 * Blog tiles already use a responsive grid above.
 * ======================================================================== */
/* NUMBERED tiles: text alignment (heading + body) is left to WPBakery's own
 * per-element alignment setting — no forced text-align here. The generated
 * number glyph follows VC's native `vc_align_left` class on each image. */

/* (Benefit-tile column widths are left to VC's native float grid — see note above.) */

/* Benefit-tile hover (see below). */

/* The theme paints a light #F7F7F7 card-back behind these tiles via a
 * `> div > div::after` (z-index:-1) — it conflicts with our navy card and the
 * hover lift reveals it as a white block. Our navy .vc_column-inner IS the card
 * now, so disable that pseudo. */
.servicebenifits-section-landing-new .servicebenifits-content-single > div > div::after,
.servicebenifits-content-single > .vc_column-inner > .wpb_wrapper::after { display: none !important; }
/* (No hover background override needed — the card .vc_column-inner is navy +
 * rounded in all states. The previous rule painted a square navy on the column
 * itself on hover, squaring the corners. Hover effect = lift + teal border only.) */

/* ---------------------------------------------------------------------------
 * Utility: add the class "no-border" to a WPBakery row/column ("Extra class
 * name" field) to strip the card treatment (border, fill, radius, padding,
 * shadow, hover lift) from its tiles — for sections you want borderless.
 * ------------------------------------------------------------------------- */
.no-border > .vc_column-inner,
.no-border .vc_column-inner,
.no-border.vc_column_container > .vc_column-inner {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.no-border > .vc_column-inner:hover,
.no-border .vc_column-inner:hover { transform: none !important; border-color: transparent !important; }

/* ===========================================================================
 * Kill the load-time left→center shift on full-width sections WITHOUT breaking
 * centering. js_composer sets these full-bleed via JS after load; we replicate
 * the same geometry in CSS up front — 100vw width + a centering side padding
 * that matches the theme container per breakpoint — so content is centered from
 * first paint (no shift) and the JS adds nothing visible.
 * ======================================================================== */
[data-vc-full-width="true"] {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	left: auto !important;
	right: auto !important;
	box-sizing: border-box !important;
}
/* centering padding = (100vw − container) / 2, per Bootstrap container width */
@media (min-width: 1200px) {
	[data-vc-full-width="true"] { padding-left: calc((100vw - 1170px) / 2) !important; padding-right: calc((100vw - 1170px) / 2) !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
	[data-vc-full-width="true"] { padding-left: calc((100vw - 970px) / 2) !important; padding-right: calc((100vw - 970px) / 2) !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
	[data-vc-full-width="true"] { padding-left: calc((100vw - 750px) / 2) !important; padding-right: calc((100vw - 750px) / 2) !important; }
}
@media (max-width: 767.98px) {
	[data-vc-full-width="true"] { padding-left: 15px !important; padding-right: 15px !important; }
}

/* ===========================================================================
 * BLOG archive + single post — child-theme templates (archive.php / single.php)
 * Tiles reuse .new_posts-custom-* (homepage blog grid) so they match site-wide.
 * !important throughout — the theme has higher-priority h1 / spacing rules that
 * otherwise win over these.
 * ======================================================================== */
.wf-archive { padding: 104px 0 80px !important; }   /* extra top space to clear the nav */
.wf-archive__head { text-align: center !important; max-width: 760px !important; margin: 0 auto 48px !important; }
.wf-archive__eyebrow { display: block !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--wf-teal-aa) !important; margin: 0 0 12px !important; }
.wf-archive__title { font-size: 44px !important; font-weight: 700 !important; color: var(--wf-navy) !important; line-height: 1.12 !important; letter-spacing: -.01em !important; margin: 0 !important; }
.wf-archive__desc { margin: 14px auto 0 !important; color: var(--wf-ink-soft) !important; font-size: 16px !important; line-height: 1.7 !important; }
.wf-archive__grid { margin: 0 0 80px !important; }   /* clear gap before pagination */
.wf-archive__empty { text-align: center !important; color: var(--wf-ink-soft) !important; }
/* pagination — brand pills, generous space above */
.wf-archive__pagination { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; margin-top: 16px !important; }
.wf-archive__pagination .page-numbers {
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	min-width: 44px !important; min-height: 44px !important; padding: 0 14px !important; margin: 0 !important;
	border: 1px solid var(--wf-teal-tint) !important; border-radius: 999px !important;
	background: var(--wf-teal-wash) !important; color: var(--wf-navy) !important;
	font-weight: 600 !important; font-size: 14px !important; text-decoration: none !important; line-height: 1 !important;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.wf-archive__pagination .page-numbers:hover,
.wf-archive__pagination .page-numbers:focus-visible { background: var(--wf-teal-tint) !important; border-color: var(--wf-teal-aa) !important; color: var(--wf-teal-aaa) !important; }
.wf-archive__pagination .page-numbers.current { background: var(--wf-teal-aa) !important; border-color: var(--wf-teal-aa) !important; color: #fff !important; }

/* single post — centered readable column */
.wf-single { padding: 104px 0 80px !important; }   /* extra top space to clear the nav */
.wf-single__head,
.wf-single__content,
.wf-single__footer { max-width: 680px !important; margin-left: auto !important; margin-right: auto !important; float: none !important; width: auto !important; }
.wf-single__hero { max-width: 820px !important; margin: 0 auto 44px !important; float: none !important; }
.wf-single__head { text-align: center !important; margin-bottom: 40px !important; }
.wf-single__meta { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--wf-teal-aa) !important; margin: 0 0 16px !important; }
.wf-single__title { font-size: 40px !important; font-weight: 700 !important; color: var(--wf-navy) !important; line-height: 1.18 !important; letter-spacing: -.015em !important; margin: 0 !important; }
.wf-single__hero img { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; max-height: 460px !important; object-fit: cover !important; border-radius: 18px !important; display: block !important; }
.wf-single__content { color: var(--wf-ink) !important; font-size: 18px !important; line-height: 1.85 !important; }
.wf-single__content > *:first-child { margin-top: 0 !important; }
.wf-single__content h2 { font-size: 28px !important; font-weight: 700 !important; color: var(--wf-navy) !important; line-height: 1.3 !important; margin: 1.8em 0 .5em !important; }
.wf-single__content h3 { font-size: 22px !important; font-weight: 700 !important; color: var(--wf-navy) !important; line-height: 1.3 !important; margin: 1.6em 0 .4em !important; }
/* FAQ accordions embedded in a post keep their own layout — don't apply the
 * editorial h3 top-margin (it made the FAQ titles lopsided). */
.wf-single__content .jfaq-wrap h3,
.wf-single__content .jfaq--title { margin: 0 !important; font-size: inherit !important; }
.wf-single__content p { margin: 0 0 1.4em !important; }
.wf-single__content ul, .wf-single__content ol { margin: 0 0 1.4em !important; padding-left: 1.3em !important; }
.wf-single__content li { margin-bottom: .55em !important; }
.wf-single__content img { max-width: 100% !important; height: auto !important; border-radius: 12px !important; margin: 1.4em 0 !important; }
.wf-single__content blockquote { margin: 1.6em 0 !important; padding: 10px 0 10px 22px !important; border-left: 3px solid var(--wf-teal-brand) !important; color: var(--wf-ink-soft) !important; font-style: italic !important; font-size: 19px !important; }
.wf-single__footer { margin-top: 48px !important; padding-top: 28px !important; border-top: 1px solid var(--wf-line) !important; }
.wf-single__tags { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 18px !important; }
.wf-single__tag { background: var(--wf-teal-wash) !important; border: 1px solid var(--wf-teal-tint) !important; color: var(--wf-navy) !important; font-size: 13px !important; font-weight: 600 !important; padding: 6px 14px !important; border-radius: 999px !important; }
.wf-single__back { color: var(--wf-teal-aa) !important; font-weight: 600 !important; text-decoration: none !important; }
.wf-single__back:hover { color: var(--wf-teal-aaa) !important; }

@media (max-width: 991px) {
	.wf-archive, .wf-single { padding: 72px 0 56px !important; }
	.wf-archive__title, .wf-single__title { font-size: 32px !important; }
}
@media (max-width: 600px) {
	.wf-archive, .wf-single { padding: 56px 0 40px !important; }
	.wf-archive__title, .wf-single__title { font-size: 27px !important; }
	.wf-single__content { font-size: 17px !important; }
}

/* ===========================================================================
 * Main desktop nav dropdown (.nav__main .submenu__dropdown.depth_0) — modern.
 *  - PROPORTIONATE width: items stack in one ~240px column and only wrap to a
 *    second column when there are many (flex column-wrap + max-height). So a
 *    2-3 item menu is one narrow column; the big services menu is two.
 *  - Sits closer to the nav item, with an arrow/triangle pointing up to it.
 *  - Hover + current-page states; focus ring INSET so it doesn't double up with
 *    the rounded fill. Scoped to .depth_0 so nested flyouts keep theme behavior.
 * ======================================================================== */
.nav__main .nav__list .submenu__dropdown.depth_0 {
	display: grid !important;
	grid-auto-flow: column !important;            /* fill a column, then start a new one */
	grid-template-rows: repeat(8, auto) !important; /* up to 8 items per column */
	grid-auto-columns: 244px !important;
	width: auto !important;                        /* grid is a block → bg fills every column */
	min-width: 0 !important;
	max-width: 92vw !important;
	gap: 2px 6px !important;
	top: 78px !important;               /* just below the nav bar */
	padding: 10px !important;
	border: 1px solid var(--wf-line) !important;
	border-radius: 14px !important;
	box-shadow: 0 18px 46px rgba(27, 41, 64, .16) !important;
	background: #fff !important;
	overflow: visible !important;
}
/* up-pointing arrow connecting the panel to its nav item */
.nav__main .nav__list .submenu__dropdown.depth_0::before {
	content: "" !important;
	position: absolute !important;
	top: -7px !important;
	left: 24px !important;
	width: 13px !important;
	height: 13px !important;
	background: #fff !important;
	border-left: 1px solid var(--wf-line) !important;
	border-top: 1px solid var(--wf-line) !important;
	transform: rotate(45deg) !important;
}
.nav__main .nav__list .submenu__dropdown.depth_0 > .dropdown__item {
	width: auto !important;   /* fills the 244px grid track */
	margin: 0 !important;
}
.nav__main .nav__list .submenu__dropdown.depth_0 > .dropdown__item > a {
	display: flex !important;
	align-items: center !important;
	min-height: 44px !important;
	height: 100% !important;
	padding: 8px 14px !important;
	border-radius: 9px !important;
	color: var(--wf-navy) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	line-height: 1.3 !important;
	white-space: normal !important;
	transition: background-color .18s ease, color .18s ease !important;
}
/* kill the theme's saturated #65c8d0 background on the LI (and JS .active class)
 * — it stacked behind our rounded <a> fill, causing the harsh teal + dual edge */
.nav__main .nav__list .submenu__dropdown.depth_0 .dropdown__item:hover,
.nav__main .nav__list .submenu__dropdown.depth_0 .dropdown__item.active__dropdown-item,
.nav__main .nav__list .submenu__dropdown.depth_0 .active__dropdown-item,
.nav__main .nav__list .submenu__dropdown.depth_0 .white__hovered { background: transparent !important; border-radius: 0 !important; color: inherit !important; }
.nav__main .nav__list .submenu__dropdown.depth_0 > .dropdown__item > a:hover,
.nav__main .nav__list .submenu__dropdown.depth_0 > .dropdown__item > a.active__dropdown-item {
	background: var(--wf-teal-wash) !important;
	color: var(--wf-teal-aaa) !important;
}
/* focus ring sits INSIDE the rounded row (no square dual-border over the fill) */
.nav__main .nav__list .submenu__dropdown.depth_0 > .dropdown__item > a:focus-visible {
	background: var(--wf-teal-wash) !important;
	color: var(--wf-teal-aaa) !important;
	outline: 2px solid var(--wf-teal-aa) !important;
	outline-offset: -2px !important;
}
/* current page: subtle tint + a thin left accent (not a heavy block) */
.nav__main .nav__list .submenu__dropdown.depth_0 > .current-menu-item > a,
.nav__main .nav__list .submenu__dropdown.depth_0 > .current_page_item > a {
	background: var(--wf-teal-wash) !important;
	color: var(--wf-teal-aaa) !important;
}
.nav__main .nav__list .submenu__dropdown.depth_0 > .dropdown__item.has-child:after { color: var(--wf-teal-aa) !important; }
/* narrow viewports: never wrap to columns */
@media (max-width: 600px) {
	.nav__main .nav__list .submenu__dropdown.depth_0 {
		grid-auto-flow: row !important;
		grid-template-rows: none !important;
		grid-auto-columns: auto !important;
		width: 230px !important;
	}
}

/* ===========================================================================
 * Mobile off-canvas menu (.nav__mobile) — tap targets, even spacing, clean
 * submenu accordion. Color scheme left to the theme (white-on-overlay).
 * ======================================================================== */
.nav__mobile_list .nav__mobile_item { margin-bottom: 2px !important; line-height: 1.3 !important; }
.nav__mobile_list .nav__mobile_item > a {
	display: flex !important;
	align-items: center !important;
	min-height: 48px !important;          /* WCAG tap target */
	padding: 8px 2px !important;
	font-size: 17px !important;
	font-weight: 600 !important;
}
.nav__mobile_list .nav__mobile_item .child {
	padding-left: 16px !important;
	border-left: 2px solid rgba(255,255,255,.18) !important;   /* subtle indent guide */
	margin-left: 2px !important;
}
.sub-menu .nav__mobile_item { margin: 0 !important; }
.sub-menu .nav__mobile_item > a { min-height: 42px !important; font-size: 15px !important; font-weight: 500 !important; padding: 6px 2px !important; }
/* expand/collapse chevron — comfortable tap area */
.nav__mobile_list li .dropdown-toggle { min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }


/* ===========================================================================
 * Font Awesome removed for performance (was 124KB woff2 + render-blocking CSS,
 * site-wide, for ONE icon). The only glyph used is the hero phone button
 * (<i class="fa-solid fa-phone">) — draw it here as a CSS mask in currentColor.
 * ======================================================================== */
i.fa-phone, i.fa-solid.fa-phone, .fa-solid.fa-phone {
	display: inline-block !important;
	width: 1em; height: 1em;
	vertical-align: -0.125em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64 0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.1 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64 0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.1 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ===========================================================================
 * Phantom space before the hero (e.g. Mississauga): WPBakery wraps injected
 * <style> blocks in a stray <p> and/or a full vc_row (a "Text" element holding
 * only CSS). They render as empty boxes (paragraph margin / column padding).
 * Collapse them — a <style> tag still applies even when its parent is hidden.
 * ======================================================================== */
.wpb-content-wrapper > p:has(> style) { display: none !important; }
/* loose top-level row whose only real content is a style-only Text element */
.wpb-content-wrapper > .vc_row:has(.wpb_text_column .wpb_wrapper > style:only-child) { display: none !important; }