/*
Theme Name: Blancos Roofing
Theme URI: https://blancosroofing.com
Description: Child theme de Hello Elementor para Blancos Roofing. Estética "modern" — paleta verde forest + brass accent, tipografía Brunson/Chivo/Montserrat.
Author: Acción SEO
Author URI: https://accionseo.com
Template: hello-elementor
Version: 2.2.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: blancos-roofing
Tags: child-theme, roofing, baton-rouge, louisiana
*/

/* Styles in assets/css/ - modern.css + page-specific */

/* ============================================================================
   Elementor widget container — constrain to 1240px max-width (same as
   .blancos-container / .m-container) so all widget content is centered
   within the viewport on wide screens.
   ============================================================================ */
.elementor-widget-container {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
}

/* Content sections span the full viewport width (background edge-to-edge).
   Inner content is centered at 1240px by the container rule below.
   Hero, gallery, and service-area map keep full-width content. */

/* Hero section + Gallery section: full-width edge-to-edge (no max-width) */
.elementor-section-full_width.m-hero,
.elementor-section-full_width:has(.m-gallery) {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	overflow-x: clip;
}

/* Gallery itself: edge-to-edge grid (no max-width) */
.m-gallery {
	max-width: none !important;
	width: 100% !important;
}

/* Section inner container — center content at 1240px with horizontal gutter,
   while the section background stays full-bleed. Content area: 1160px. */
.elementor-section.elementor-section-full_width:not(.elementor-section-stretched):not(.m-hero):not(:has(.m-gallery)):not(.m-service-areas):not(:has(.m-service-areas)) > .elementor-container {
	max-width: 1240px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 40px;
	padding-right: 40px;
}
@media (max-width: 767px) {
	.elementor-section.elementor-section-full_width:not(.elementor-section-stretched):not(.m-hero):not(:has(.m-gallery)):not(.m-service-areas):not(:has(.m-service-areas)) > .elementor-container {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* Hero + Gallery sections: no padding on inner container (they have their own containers) */
.elementor-section-full_width.m-hero > .elementor-container,
.elementor-section-full_width:has(.m-gallery) > .elementor-container {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ============================================================================
   .m-container — 1240px max-width centered, NO horizontal padding.
   Mobile-only gutter handled in modern.css.
   Footer (rendered by footer.php, not Elementor) keeps its own gutter.
   ============================================================================ */
.m-container,
.blancos-container {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
}

/* Footer uses .m-container for its inner wrap; restore the original
   40px gutter so its columns don't sit on the container edge. */
.blancos-footer > .m-container,
.blancos-footer .blancos-footer__inner {
	padding-left: 40px;
	padding-right: 40px;
}
@media (max-width: 767px) {
	.blancos-footer > .m-container,
	.blancos-footer .blancos-footer__inner {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ============================================================================
   Blancos header (rendered by header.php)
   ============================================================================ */
.blancos-site-header {
	background: rgba(255, 255, 255, 0.97);
	border-bottom: 1px solid #e6e8e4;
	position: sticky;
	top: 0;
	z-index: 100;
}

.blancos-header__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 16px 40px;
	max-width: 1240px;
	margin: 0 auto;
}

.blancos-logo {
	flex-shrink: 0;
	display: block;
}

.blancos-logo__img {
	height: 44px;
	width: auto;
	display: block;
}

.blancos-nav {
	margin-left: auto;
}

.blancos-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 24px;
	align-items: center;
}

.blancos-nav__list > li {
	position: relative;
}

.blancos-nav__list > li > a {
	color: #0e1410;
	text-decoration: none;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 8px 0;
	display: inline-block;
}

.blancos-nav__list > li > a:hover {
	color: #1A7A3E;
}

.blancos-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	border: 1px solid #e6e8e4;
	border-radius: 0 0 6px 6px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.10);
	min-width: 220px;
	display: none;
	z-index: 200;
}

.blancos-nav__list > li:hover .sub-menu {
	display: block;
}

.blancos-nav__list .sub-menu > li > a {
	display: block;
	padding: 14px 20px;
	color: #0e1410;
	text-decoration: none;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.blancos-nav__list .sub-menu > li > a:hover {
	background: #f5f7f4;
	color: #1A7A3E;
}

.blancos-header__cta {
	background: #1A7A3E;
	color: #fff;
	padding: 12px 24px;
	border-radius: 6px;
	text-decoration: none;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	line-height: 1;
}
.blancos-header__cta > i.fa-arrow-right {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	font-size: 13px;
	transition: transform 0.2s ease;
}
.blancos-header__cta:hover > i.fa-arrow-right {
	transform: translateX(3px);
}

.blancos-header__cta:hover {
	background: #0F5C2F;
	color: #fff;
}

/* Hamburger toggle (hidden on desktop) */
.blancos-nav-toggle {
	display: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
	width: 40px;
	height: 40px;
	position: relative;
	flex-shrink: 0;
	margin-left: auto;
}

.blancos-nav-toggle span {
	display: block;
	width: 26px;
	height: 2px;
	background: #0e1410;
	margin: 6px auto;
	transition: transform 0.25s ease, opacity 0.2s ease;
	border-radius: 2px;
}

.blancos-nav-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.blancos-nav-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.blancos-nav-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* Mobile nav drawer (hidden on desktop) */
.blancos-mobile-nav {
	display: none;
	background: #fff;
	border-top: 1px solid #e6e8e4;
	border-bottom: 1px solid #e6e8e4;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
}

.blancos-mobile-nav.is-open {
	max-height: 800px;
}

.blancos-mobile-nav__list {
	list-style: none;
	margin: 0;
	padding: 8px 0 0;
}

.blancos-mobile-nav__list > li {
	display: block;
	border-bottom: 1px solid #f3f3f3;
}

.blancos-mobile-nav__list > li:last-child {
	border-bottom: 0;
}

.blancos-mobile-nav__list > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
	color: #0e1410;
	text-decoration: none;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: background 0.15s ease, color 0.15s ease;
}

.blancos-mobile-nav__list > li > a:hover,
.blancos-mobile-nav__list > li > a:focus {
	background: #f5f7f4;
	color: #1A7A3E;
}

.blancos-mobile-nav__list > li > a::after {
	content: "→";
	color: #1A7A3E;
	font-size: 16px;
	opacity: 0.4;
}

.blancos-mobile-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	background: #fff;
	border-top: 3px solid #1A7A3E;
}

.blancos-mobile-nav__list .sub-menu > li {
	border-bottom: 1px solid #e6e8e4;
	height: 49px;
	display: flex;
	align-items: center;
}

.blancos-mobile-nav__list .sub-menu > li:last-child {
	border-bottom: 0;
}

.blancos-mobile-nav__list .sub-menu > li > a {
	padding: 0 24px 0 48px;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #0e1410;
	text-decoration: none;
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
}

.blancos-mobile-nav__list .sub-menu > li > a::after {
	display: none;
}

.blancos-mobile-nav__list .sub-menu > li > a:hover {
	background: #f5f7f4;
	color: #1A7A3E;
}


/* Responsive — show hamburger + hide inline nav on mobile */
@media (max-width: 900px) {
	.blancos-header__inner {
		padding: 14px 20px;
		gap: 12px;
	}
	.blancos-logo__img {
		height: 32px;
	}
	.blancos-nav {
		display: none;
	}
	.blancos-nav-toggle {
		display: block;
	}
	.blancos-mobile-nav {
		display: block;
	}
}

/* On phones (≤599px) the header CTA overflows the viewport alongside the
   hamburger. Hide it — the contact link is exposed inside the mobile-nav
   drawer via a fallback CTA. */
@media (max-width: 599px) {
	.blancos-header__cta {
		display: none;
	}
}

/* Mobile drawer contact CTA (replaces the hidden desktop header CTA on phones) */
.blancos-mobile-nav__cta {
	padding: 16px 24px 24px;
	border-top: 1px solid #ececec;
}
.blancos-mobile-nav__cta .blancos-cta {
	display: flex;
	width: 100%;
	justify-content: center;
	padding: 14px 20px;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-radius: 6px;
	text-decoration: none;
	background: #1A7A3E;
	color: #fff;
}

/* ============================================================================
   Blancos footer (rendered by footer.php)
   ============================================================================ */
.blancos-footer {
	background: #0e1410;
	color: #fff;
	padding: 80px 0 0;
	position: relative;
	overflow: hidden;
}

.blancos-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 64px;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: contain;
	position: relative;
}
/* Translucent overlay that fades the inline footer-houses-bg.png so it reads as a
   recessive background texture instead of competing with the footer content. */
.blancos-footer__grid::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(14, 20, 16, 0.55);
	pointer-events: none;
	z-index: 0;
}
.blancos-footer__grid > * {
	position: relative;
	z-index: 1;
}

.blancos-footer__logo {
	display: inline-block;
	margin-bottom: 16px;
}

.blancos-footer__logo-img {
	height: 56px;
	width: auto;
	display: block;
}

.blancos-footer__tagline {
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.65);
	margin: 0;
	max-width: 280px;
}

.blancos-footer__heading {
	font-family: 'Chivo', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #C9A96E;
	margin: 0 0 16px;
}

.blancos-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
}

.blancos-footer__list a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: color 0.2s;
}

.blancos-footer__list a:hover {
	color: #fff;
}

.blancos-footer__emergency {
	color: #C9A96E;
	font-weight: 600;
}

.blancos-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.10);
	padding: 24px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
}

.blancos-footer__bottom p {
	margin: 0;
}

.blancos-footer__socials {
	display: flex;
	gap: 12px;
}

.blancos-footer__socials a {
	width: 32px;
	height: 32px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	font-size: 14px;
	transition: all 0.2s;
}

.blancos-footer__socials a:hover {
	background: #fff;
	color: #0e1410;
}

@media (max-width: 768px) {
	.blancos-footer__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.blancos-footer__bottom {
		flex-direction: column;
		gap: 16px;
	}
}

/* ============================================================================
   Force fonts on .m-* elements — modern.css uses CSS variables, but
   Elementor sometimes overrides body.blancos-roofing. Explicit declarations
   here ensure consistency across all .m-* elements.
   ============================================================================ */
.m-eyebrow,
.m-eyebrow--light,
.m-h2,
.m-h2--md,
.m-h2--xl,
.m-h2--light,
.m-section__lede,
.m-section__lede--narrow,
.m-cta,
.m-cta__arrow,
.m-feature__title,
.m-feature__desc,
.m-feature__num,
.m-testimonial__quote,
.m-testimonial__author strong,
.m-testimonial__author span,
.m-faq__q,
.m-faq__qtext,
.m-faq__a p,
.m-form input,
.m-form__title,
.m-cta-form__lede,
.m-cta-form__perks li,
.m-service__title,
.m-service__desc,
.m-cities li,
.m-service-areas__phone,
.m-service-areas__address,
.m-service-areas__lede {
	font-family: var(--m-font-body, 'Montserrat', sans-serif);
}

.m-h2,
.m-h2--md,
.m-h2--xl {
	font-family: var(--m-font-heading, 'Chivo', sans-serif) !important;
	font-weight: 900;
}

.m-feature__num,
.m-faq__num {
	font-family: var(--m-font-display, 'Brunson', Georgia, serif) !important;
}

.m-hero__title {
	font-family: var(--m-font-display, 'Brunson', Georgia, serif) !important;
	font-weight: 400 !important;
}

/* ============================================================================
   Max-width constraints on content (per mockup design)
   ============================================================================ */
.m-section__header {
	max-width: 760px;
	margin-left: 0;
	margin-right: auto;
	margin-bottom: 64px;
}

.m-section__header--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.m-section__lede {
	max-width: 640px;
}

/* Gallery edge-to-edge (full width within section) */
.m-section--gallery {
	padding-left: 0;
	padding-right: 0;
}

.m-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}

@media (max-width: 767px) {
	.m-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Apply .m-h2 styling to H2 inside HTML widget containers (since the widget heading
   is wrapped in elementor-widget-container). */
.elementor-widget-container h2.m-h2,
.elementor-widget-container h2.m-h2--md,
.elementor-widget-container h2.m-h2--xl,
.elementor-widget-container h2.m-h2--light {
    font-family: var(--m-font-heading, 'Chivo', sans-serif) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -1.5px !important;
    color: var(--m-text, #0E1410) !important;
    margin: 0 0 24px !important;
}
.elementor-widget-container h2.m-h2--md {
    font-size: 44px !important;
    line-height: 48px !important;
}
.elementor-widget-container h2.m-h2--xl {
    font-size: 56px !important;
    line-height: 60px !important;
}
.elementor-widget-container h2.m-h2--light {
    color: #FFFFFF !important;
}

/* Metal (66) CTA wrapper: dark background full-bleed, no padding. */
.elementor-66 .elementor-element.elementor-element-d39c3200 {
	padding: 0px 0px 0px 0px;
	background-color: #0E1410;
}

/* Service-area map: let the map widget span full width inside its full-bleed section. */
.m-service-areas .elementor-widget-container {
	max-width: none;
}

/* Home is built with Elementor flex containers. Align boxed containers to the
   site's 1240 grid (40px gutter -> 1160 content) so their content lines up with
   the .m-container sections. Hero, gallery, and map keep full-width content. */
.e-con.e-con-boxed:not(.m-hero):not(.m-service-areas):not(:has(.m-gallery)) {
	--container-max-width: 1240px;
}
.e-con.e-con-boxed:not(.m-hero):not(.m-service-areas):not(:has(.m-gallery)) > .e-con-inner {
	padding-inline-start: 40px;
	padding-inline-end: 40px;
}
@media (max-width: 767px) {
	.e-con.e-con-boxed:not(.m-hero):not(.m-service-areas):not(:has(.m-gallery)) > .e-con-inner {
		padding-inline-start: 16px;
		padding-inline-end: 16px;
	}
}

/* Residential (64) Storm & insurance (4ad10d33): soft-bg accent (!important to beat Elementor's CSS var). */
.elementor-64 .elementor-element.elementor-element-4ad10d33:not(.elementor-motion-effects-element-type-background),
.elementor-64 .elementor-element.elementor-element-4ad10d33 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #F5F7F4 !important;
}

/* Commercial (65) Four flat roofing systems (661d0b5b): dark radial gradient
   (green top, gold bottom-right), eyebrow + h2 white, accent gold, lede soft-white. */
.elementor-65 .elementor-element.elementor-element-661d0b5b:not(.elementor-motion-effects-element-type-background),
.elementor-65 .elementor-element.elementor-element-661d0b5b > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(26, 122, 62, 0.18) 0%, transparent 58%),
    radial-gradient(ellipse at 85% 110%, rgba(201, 169, 110, 0.12) 0%, transparent 55%),
    #0e1410 !important;
}
.elementor-65 .elementor-element.elementor-element-661d0b5b .m-eyebrow { color: var(--m-accent) !important; }
.elementor-65 .elementor-element.elementor-element-661d0b5b .m-h2 { color: #fff !important; }
.elementor-65 .elementor-element.elementor-element-661d0b5b .m-h2__accent { color: var(--m-accent) !important; }
.elementor-65 .elementor-element.elementor-element-661d0b5b .m-section__lede { color: rgba(255,255,255,0.78) !important; }
/* Commercial (65) Roof coatings featured (abf73bce): dark CTA style. */
.elementor-65 .elementor-element.elementor-element-abf73bce:not(.elementor-motion-effects-element-type-background),
.elementor-65 .elementor-element.elementor-element-abf73bce > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #0E1410 !important;
}
.elementor-65 .elementor-element.elementor-element-abf73bce .m-eyebrow { color: var(--m-accent) !important; }
.elementor-65 .elementor-element.elementor-element-abf73bce .m-h2 { color: #fff !important; }
.elementor-65 .elementor-element.elementor-element-abf73bce .m-h2__accent { color: var(--m-accent) !important; }
.elementor-65 .elementor-element.elementor-element-abf73bce .r-featured__lede { color: rgba(255,255,255,0.78) !important; }
/* Commercial (65) Commercial systems bento (d0af8bec): match site standard 80px vertical padding. */
.elementor-65 .elementor-element.elementor-element-d0af8bec:not(.elementor-motion-effects-element-type-background) {
  padding: 100px 40px !important;
}
/* Commercial (65) Four flat roofing systems (661d0b5b): center the header and drop its margin. */
.elementor-65 .elementor-element.elementor-element-661d0b5b .m-section__header { text-align: center !important; margin-bottom: 0 !important; }
/* Commercial (65) flat-roof systems: center the lede inside the 760px header. */
.elementor-65 .elementor-element.elementor-element-661d0b5b .m-section__lede { margin: 0 auto !important; }

/* Commercial (65) Commercial roof preventative maintenance (f3f363e2):
   the section has soft-gray bg from its data, but m-section--alt forces
   the eyebrow and accent to gold. Override to primary green to match the
   metal m-section--bg-soft look (a561b34a). */
.elementor-65 .elementor-element.elementor-element-f3f363e2 .m-eyebrow { color: var(--m-primary) !important; }
.elementor-65 .elementor-element.elementor-element-f3f363e2 .m-h2__accent { color: var(--m-primary) !important; }

/* Commercial (65) Commercial roof preventative maintenance (f3f363e2):
   disable the .m-section--alt green radial glow (the section is light, not dark). */
.elementor-65 .elementor-element.elementor-element-f3f363e2::before { display: none; }
/* Commercial (65) Why us (27f45c23): dark radial gradient + center header + drop margin. */
.elementor-65 .elementor-element.elementor-element-27f45c23:not(.elementor-motion-effects-element-type-background),
.elementor-65 .elementor-element.elementor-element-27f45c23 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(26, 122, 62, 0.18) 0%, transparent 58%),
    radial-gradient(ellipse at 85% 110%, rgba(201, 169, 110, 0.12) 0%, transparent 55%),
    #0e1410 !important;
}
.elementor-65 .elementor-element.elementor-element-27f45c23 .m-section__header { text-align: center !important; margin-bottom: 0 !important; }

/* Metal-5 and metal-6 in commercial gallery: no border-radius (raw edge-to-edge). */
img[src*="metal-5-opaque"],
img[src*="metal-6-opaque"] { border-radius: 0 !important; box-shadow: none !important; }

/* New-construction (67) Residential new construction (5e71efa5): soft-bg accent. */
.elementor-67 .elementor-element.elementor-element-5e71efa5:not(.elementor-motion-effects-element-type-background),
.elementor-67 .elementor-element.elementor-element-5e71efa5 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #F5F7F4 !important;
}

/* New-construction (67) Commercial new construction (70394685): keep white bg. */
.elementor-67 .elementor-element.elementor-element-70394685:not(.elementor-motion-effects-element-type-background),
.elementor-67 .elementor-element.elementor-element-70394685 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #ffffff !important;
}

/* New-construction (67) Three roofing systems (18c7a8a7): dark radial gradient + center header. */
.elementor-67 .elementor-element.elementor-element-18c7a8a7:not(.elementor-motion-effects-element-type-background),
.elementor-67 .elementor-element.elementor-element-18c7a8a7 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(26, 122, 62, 0.18) 0%, transparent 58%),
    radial-gradient(ellipse at 85% 110%, rgba(201, 169, 110, 0.12) 0%, transparent 55%),
    #0e1410 !important;
}
.elementor-67 .elementor-element.elementor-element-18c7a8a7 .m-eyebrow { color: var(--m-accent) !important; }
.elementor-67 .elementor-element.elementor-element-18c7a8a7 .m-h2 { color: #fff !important; }
.elementor-67 .elementor-element.elementor-element-18c7a8a7 .m-h2__accent { color: var(--m-accent) !important; }
.elementor-67 .elementor-element.elementor-element-18c7a8a7 .m-section__lede { color: rgba(255,255,255,0.78) !important; }
.elementor-67 .elementor-element.elementor-element-18c7a8a7 .m-section__header { text-align: center !important; margin-bottom: 0 !important; }
.elementor-67 .elementor-element.elementor-element-18c7a8a7::before { display: none; }

/* New-construction (67) Three roofing systems (18c7a8a7): center the lede inside the 760px header. */
.elementor-67 .elementor-element.elementor-element-18c7a8a7 .m-section__lede { margin: 0 auto !important; }

/* New-construction (67) Three materials bento (4e77dc55): white bg, 100px vertical padding. */
.elementor-67 .elementor-element.elementor-element-4e77dc55:not(.elementor-motion-effects-element-type-background),
.elementor-67 .elementor-element.elementor-element-4e77dc55 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #ffffff !important;
}
.elementor-67 .elementor-element.elementor-element-4e77dc55:not(.elementor-motion-effects-element-type-background) {
  padding: 100px 40px !important;
}



/* New-construction (67) Why Blancos section (8cbce818): full-bleed soft bg. */
.elementor-67 .elementor-element.elementor-element-8cbce818:not(.elementor-motion-effects-element-type-background),
.elementor-67 .elementor-element.elementor-element-8cbce818 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #F5F7F4 !important;
}

/* Contact (68) service areas (8183a9be): full-bleed map + inner, like home (e5156e3). */
.elementor-68 .elementor-element.elementor-element-8183a9be .m-service-areas .m-service-areas__inner.m-container {
  left: 0 !important; right: 0 !important; width: 100% !important;
  max-width: none !important;
}
.elementor-68 .elementor-element.elementor-element-8183a9be .m-service-areas {
  left: 0 !important;
  right: 0 !important;
}

/* Contact (68) service areas (8183a9be): match home (e5156e3) layout. */
.elementor-68 .elementor-element.elementor-element-8183a9be .m-service-areas__inner.m-container {
  position: relative !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
  overflow: visible;
}
.elementor-68 .elementor-element.elementor-element-8183a9be .m-service-areas__map { height: 746px !important; }
.elementor-68 .elementor-element.elementor-element-8183a9be .m-service-areas__overlay { height: 746px !important; }
/* Theme Name: Blancos Roofing
Theme URI: https://blancosroofing.com
Description: Child theme de Hello Elementor para Blancos Roofing. Estética "modern" — paleta verde forest + brass accent, tipografía Brunson/Chivo/Montserrat.
Author: Acción SEO
Author URI: https://accionseo.com
Template: hello-elementor
Version: 2.2.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: blancos-roofing
Tags: child-theme, roofing, baton-rouge, louisiana
*/

/* Styles in assets/css/ - modern.css + page-specific */

/* ============================================================================
   Elementor widget container — constrain to 1240px max-width (same as
   .blancos-container / .m-container) so all widget content is centered
   within the viewport on wide screens.
   ============================================================================ */
.elementor-widget-container {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
}

/* Content sections span the full viewport width (background edge-to-edge).
   Inner content is centered at 1240px by the container rule below.
   Hero, gallery, and service-area map keep full-width content. */

/* Hero section + Gallery section: full-width edge-to-edge (no max-width) */
.elementor-section-full_width.m-hero,
.elementor-section-full_width:has(.m-gallery) {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	overflow-x: clip;
}

/* Gallery itself: edge-to-edge grid (no max-width) */
.m-gallery {
	max-width: none !important;
	width: 100% !important;
}

/* Section inner container — center content at 1240px with horizontal gutter,
   while the section background stays full-bleed. Content area: 1160px. */
.elementor-section.elementor-section-full_width:not(.elementor-section-stretched):not(.m-hero):not(:has(.m-gallery)):not(.m-service-areas):not(:has(.m-service-areas)) > .elementor-container {
	max-width: 1240px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 40px;
	padding-right: 40px;
}
@media (max-width: 767px) {
	.elementor-section.elementor-section-full_width:not(.elementor-section-stretched):not(.m-hero):not(:has(.m-gallery)):not(.m-service-areas):not(:has(.m-service-areas)) > .elementor-container {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* Hero + Gallery sections: no padding on inner container (they have their own containers) */
.elementor-section-full_width.m-hero > .elementor-container,
.elementor-section-full_width:has(.m-gallery) > .elementor-container {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ============================================================================
   .m-container — 1240px max-width centered, NO horizontal padding.
   Mobile-only gutter handled in modern.css.
   Footer (rendered by footer.php, not Elementor) keeps its own gutter.
   ============================================================================ */
.m-container,
.blancos-container {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
}

/* Footer uses .m-container for its inner wrap; restore the original
   40px gutter so its columns don't sit on the container edge. */
.blancos-footer > .m-container,
.blancos-footer .blancos-footer__inner {
	padding-left: 40px;
	padding-right: 40px;
}
@media (max-width: 767px) {
	.blancos-footer > .m-container,
	.blancos-footer .blancos-footer__inner {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ============================================================================
   Blancos header (rendered by header.php)
   ============================================================================ */
.blancos-site-header {
	background: rgba(255, 255, 255, 0.97);
	border-bottom: 1px solid #e6e8e4;
	position: sticky;
	top: 0;
	z-index: 100;
}

.blancos-header__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 16px 40px;
	max-width: 1240px;
	margin: 0 auto;
}

.blancos-logo {
	flex-shrink: 0;
	display: block;
}

.blancos-logo__img {
	height: 44px;
	width: auto;
	display: block;
}

.blancos-nav {
	margin-left: auto;
}

.blancos-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 24px;
	align-items: center;
}

.blancos-nav__list > li {
	position: relative;
}

.blancos-nav__list > li > a {
	color: #0e1410;
	text-decoration: none;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 8px 0;
	display: inline-block;
}

.blancos-nav__list > li > a:hover {
	color: #1A7A3E;
}

.blancos-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	border: 1px solid #e6e8e4;
	border-radius: 0 0 6px 6px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.10);
	min-width: 220px;
	display: none;
	z-index: 200;
}

.blancos-nav__list > li:hover .sub-menu {
	display: block;
}

.blancos-nav__list .sub-menu > li > a {
	display: block;
	padding: 14px 20px;
	color: #0e1410;
	text-decoration: none;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.blancos-nav__list .sub-menu > li > a:hover {
	background: #f5f7f4;
	color: #1A7A3E;
}

.blancos-header__cta {
	background: #1A7A3E;
	color: #fff;
	padding: 12px 24px;
	border-radius: 6px;
	text-decoration: none;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	line-height: 1;
}
.blancos-header__cta > i.fa-arrow-right {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	font-size: 13px;
	transition: transform 0.2s ease;
}
.blancos-header__cta:hover > i.fa-arrow-right {
	transform: translateX(3px);
}

.blancos-header__cta:hover {
	background: #0F5C2F;
	color: #fff;
}

/* Hamburger toggle (hidden on desktop) */
.blancos-nav-toggle {
	display: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
	width: 40px;
	height: 40px;
	position: relative;
	flex-shrink: 0;
	margin-left: auto;
}

.blancos-nav-toggle span {
	display: block;
	width: 26px;
	height: 2px;
	background: #0e1410;
	margin: 6px auto;
	transition: transform 0.25s ease, opacity 0.2s ease;
	border-radius: 2px;
}

.blancos-nav-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.blancos-nav-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.blancos-nav-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* Mobile nav drawer (hidden on desktop) */
.blancos-mobile-nav {
	display: none;
	background: #fff;
	border-top: 1px solid #e6e8e4;
	border-bottom: 1px solid #e6e8e4;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
}

.blancos-mobile-nav.is-open {
	max-height: 800px;
}

.blancos-mobile-nav__list {
	list-style: none;
	margin: 0;
	padding: 8px 0 0;
}

.blancos-mobile-nav__list > li {
	display: block;
	border-bottom: 1px solid #f3f3f3;
}

.blancos-mobile-nav__list > li:last-child {
	border-bottom: 0;
}

.blancos-mobile-nav__list > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
	color: #0e1410;
	text-decoration: none;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: background 0.15s ease, color 0.15s ease;
}

.blancos-mobile-nav__list > li > a:hover,
.blancos-mobile-nav__list > li > a:focus {
	background: #f5f7f4;
	color: #1A7A3E;
}

.blancos-mobile-nav__list > li > a::after {
	content: "→";
	color: #1A7A3E;
	font-size: 16px;
	opacity: 0.4;
}

.blancos-mobile-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	background: #fff;
	border-top: 3px solid #1A7A3E;
}

.blancos-mobile-nav__list .sub-menu > li {
	border-bottom: 1px solid #e6e8e4;
	height: 49px;
	display: flex;
	align-items: center;
}

.blancos-mobile-nav__list .sub-menu > li:last-child {
	border-bottom: 0;
}

.blancos-mobile-nav__list .sub-menu > li > a {
	padding: 0 24px 0 48px;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #0e1410;
	text-decoration: none;
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
}

.blancos-mobile-nav__list .sub-menu > li > a::after {
	display: none;
}

.blancos-mobile-nav__list .sub-menu > li > a:hover {
	background: #f5f7f4;
	color: #1A7A3E;
}


/* Responsive — show hamburger + hide inline nav on mobile */
@media (max-width: 900px) {
	.blancos-header__inner {
		padding: 14px 20px;
		gap: 12px;
	}
	.blancos-logo__img {
		height: 32px;
	}
	.blancos-nav {
		display: none;
	}
	.blancos-nav-toggle {
		display: block;
	}
	.blancos-mobile-nav {
		display: block;
	}
}

/* On phones (≤599px) the header CTA overflows the viewport alongside the
   hamburger. Hide it — the contact link is exposed inside the mobile-nav
   drawer via a fallback CTA. */
@media (max-width: 599px) {
	.blancos-header__cta {
		display: none;
	}
}

/* Mobile drawer contact CTA (replaces the hidden desktop header CTA on phones) */
.blancos-mobile-nav__cta {
	padding: 16px 24px 24px;
	border-top: 1px solid #ececec;
}
.blancos-mobile-nav__cta .blancos-cta {
	display: flex;
	width: 100%;
	justify-content: center;
	padding: 14px 20px;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-radius: 6px;
	text-decoration: none;
	background: #1A7A3E;
	color: #fff;
}

/* ============================================================================
   Blancos footer (rendered by footer.php)
   ============================================================================ */
.blancos-footer {
	background: #0e1410;
	color: #fff;
	padding: 80px 0 0;
	position: relative;
	overflow: hidden;
}

.blancos-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 64px;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: contain;
	position: relative;
}
/* Translucent overlay that fades the inline footer-houses-bg.png so it reads as a
   recessive background texture instead of competing with the footer content. */
.blancos-footer__grid::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(14, 20, 16, 0.55);
	pointer-events: none;
	z-index: 0;
}
.blancos-footer__grid > * {
	position: relative;
	z-index: 1;
}

.blancos-footer__logo {
	display: inline-block;
	margin-bottom: 16px;
}

.blancos-footer__logo-img {
	height: 56px;
	width: auto;
	display: block;
}

.blancos-footer__tagline {
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.65);
	margin: 0;
	max-width: 280px;
}

.blancos-footer__heading {
	font-family: 'Chivo', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #C9A96E;
	margin: 0 0 16px;
}

.blancos-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
}

.blancos-footer__list a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: color 0.2s;
}

.blancos-footer__list a:hover {
	color: #fff;
}

.blancos-footer__emergency {
	color: #C9A96E;
	font-weight: 600;
}

.blancos-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.10);
	padding: 24px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
}

.blancos-footer__bottom p {
	margin: 0;
}

.blancos-footer__socials {
	display: flex;
	gap: 12px;
}

.blancos-footer__socials a {
	width: 32px;
	height: 32px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	font-size: 14px;
	transition: all 0.2s;
}

.blancos-footer__socials a:hover {
	background: #fff;
	color: #0e1410;
}

@media (max-width: 768px) {
	.blancos-footer__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.blancos-footer__bottom {
		flex-direction: column;
		gap: 16px;
	}
}

/* ============================================================================
   Force fonts on .m-* elements — modern.css uses CSS variables, but
   Elementor sometimes overrides body.blancos-roofing. Explicit declarations
   here ensure consistency across all .m-* elements.
   ============================================================================ */
.m-eyebrow,
.m-eyebrow--light,
.m-h2,
.m-h2--md,
.m-h2--xl,
.m-h2--light,
.m-section__lede,
.m-section__lede--narrow,
.m-cta,
.m-cta__arrow,
.m-feature__title,
.m-feature__desc,
.m-feature__num,
.m-testimonial__quote,
.m-testimonial__author strong,
.m-testimonial__author span,
.m-faq__q,
.m-faq__qtext,
.m-faq__a p,
.m-form input,
.m-form__title,
.m-cta-form__lede,
.m-cta-form__perks li,
.m-service__title,
.m-service__desc,
.m-cities li,
.m-service-areas__phone,
.m-service-areas__address,
.m-service-areas__lede {
	font-family: var(--m-font-body, 'Montserrat', sans-serif);
}

.m-h2,
.m-h2--md,
.m-h2--xl {
	font-family: var(--m-font-heading, 'Chivo', sans-serif) !important;
	font-weight: 900;
}

.m-feature__num,
.m-faq__num {
	font-family: var(--m-font-display, 'Brunson', Georgia, serif) !important;
}

.m-hero__title {
	font-family: var(--m-font-display, 'Brunson', Georgia, serif) !important;
	font-weight: 400 !important;
}

/* ============================================================================
   Max-width constraints on content (per mockup design)
   ============================================================================ */
.m-section__header {
	max-width: 760px;
	margin-left: 0;
	margin-right: auto;
	margin-bottom: 64px;
}

.m-section__header--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.m-section__lede {
	max-width: 640px;
}

/* Gallery edge-to-edge (full width within section) */
.m-section--gallery {
	padding-left: 0;
	padding-right: 0;
}

.m-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}

@media (max-width: 767px) {
	.m-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Apply .m-h2 styling to H2 inside HTML widget containers (since the widget heading
   is wrapped in elementor-widget-container). */
.elementor-widget-container h2.m-h2,
.elementor-widget-container h2.m-h2--md,
.elementor-widget-container h2.m-h2--xl,
.elementor-widget-container h2.m-h2--light {
    font-family: var(--m-font-heading, 'Chivo', sans-serif) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -1.5px !important;
    color: var(--m-text, #0E1410) !important;
    margin: 0 0 24px !important;
}
.elementor-widget-container h2.m-h2--md {
    font-size: 44px !important;
    line-height: 48px !important;
}
.elementor-widget-container h2.m-h2--xl {
    font-size: 56px !important;
    line-height: 60px !important;
}
.elementor-widget-container h2.m-h2--light {
    color: #FFFFFF !important;
}

/* Metal (66) CTA wrapper: dark background full-bleed, no padding. */
.elementor-66 .elementor-element.elementor-element-d39c3200 {
	padding: 0px 0px 0px 0px;
	background-color: #0E1410;
}

/* Service-area map: let the map widget span full width inside its full-bleed section. */
.m-service-areas .elementor-widget-container {
	max-width: none;
}

/* Home is built with Elementor flex containers. Align boxed containers to the
   site's 1240 grid (40px gutter -> 1160 content) so their content lines up with
   the .m-container sections. Hero, gallery, and map keep full-width content. */
.e-con.e-con-boxed:not(.m-hero):not(.m-service-areas):not(:has(.m-gallery)) {
	--container-max-width: 1240px;
}
.e-con.e-con-boxed:not(.m-hero):not(.m-service-areas):not(:has(.m-gallery)) > .e-con-inner {
	padding-inline-start: 40px;
	padding-inline-end: 40px;
}
@media (max-width: 767px) {
	.e-con.e-con-boxed:not(.m-hero):not(.m-service-areas):not(:has(.m-gallery)) > .e-con-inner {
		padding-inline-start: 16px;
		padding-inline-end: 16px;
	}
}

/* Residential (64) Storm & insurance (4ad10d33): soft-bg accent (!important to beat Elementor's CSS var). */
.elementor-64 .elementor-element.elementor-element-4ad10d33:not(.elementor-motion-effects-element-type-background),
.elementor-64 .elementor-element.elementor-element-4ad10d33 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #F5F7F4 !important;
}

/* Commercial (65) Four flat roofing systems (661d0b5b): dark radial gradient
   (green top, gold bottom-right), eyebrow + h2 white, accent gold, lede soft-white. */
.elementor-65 .elementor-element.elementor-element-661d0b5b:not(.elementor-motion-effects-element-type-background),
.elementor-65 .elementor-element.elementor-element-661d0b5b > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(26, 122, 62, 0.18) 0%, transparent 58%),
    radial-gradient(ellipse at 85% 110%, rgba(201, 169, 110, 0.12) 0%, transparent 55%),
    #0e1410 !important;
}
.elementor-65 .elementor-element.elementor-element-661d0b5b .m-eyebrow { color: var(--m-accent) !important; }
.elementor-65 .elementor-element.elementor-element-661d0b5b .m-h2 { color: #fff !important; }
.elementor-65 .elementor-element.elementor-element-661d0b5b .m-h2__accent { color: var(--m-accent) !important; }
.elementor-65 .elementor-element.elementor-element-661d0b5b .m-section__lede { color: rgba(255,255,255,0.78) !important; }
/* Commercial (65) Roof coatings featured (abf73bce): dark CTA style. */
.elementor-65 .elementor-element.elementor-element-abf73bce:not(.elementor-motion-effects-element-type-background),
.elementor-65 .elementor-element.elementor-element-abf73bce > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #0E1410 !important;
}
.elementor-65 .elementor-element.elementor-element-abf73bce .m-eyebrow { color: var(--m-accent) !important; }
.elementor-65 .elementor-element.elementor-element-abf73bce .m-h2 { color: #fff !important; }
.elementor-65 .elementor-element.elementor-element-abf73bce .m-h2__accent { color: var(--m-accent) !important; }
.elementor-65 .elementor-element.elementor-element-abf73bce .r-featured__lede { color: rgba(255,255,255,0.78) !important; }
/* Commercial (65) Commercial systems bento (d0af8bec): match site standard 80px vertical padding. */
.elementor-65 .elementor-element.elementor-element-d0af8bec:not(.elementor-motion-effects-element-type-background) {
  padding: 100px 40px !important;
}
/* Commercial (65) Four flat roofing systems (661d0b5b): center the header and drop its margin. */
.elementor-65 .elementor-element.elementor-element-661d0b5b .m-section__header { text-align: center !important; margin-bottom: 0 !important; }
/* Commercial (65) flat-roof systems: center the lede inside the 760px header. */
.elementor-65 .elementor-element.elementor-element-661d0b5b .m-section__lede { margin: 0 auto !important; }

/* Commercial (65) Commercial roof preventative maintenance (f3f363e2):
   the section has soft-gray bg from its data, but m-section--alt forces
   the eyebrow and accent to gold. Override to primary green to match the
   metal m-section--bg-soft look (a561b34a). */
.elementor-65 .elementor-element.elementor-element-f3f363e2 .m-eyebrow { color: var(--m-primary) !important; }
.elementor-65 .elementor-element.elementor-element-f3f363e2 .m-h2__accent { color: var(--m-primary) !important; }

/* Commercial (65) Commercial roof preventative maintenance (f3f363e2):
   disable the .m-section--alt green radial glow (the section is light, not dark). */
.elementor-65 .elementor-element.elementor-element-f3f363e2::before { display: none; }
/* Commercial (65) Why us (27f45c23): dark radial gradient + center header + drop margin. */
.elementor-65 .elementor-element.elementor-element-27f45c23:not(.elementor-motion-effects-element-type-background),
.elementor-65 .elementor-element.elementor-element-27f45c23 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(26, 122, 62, 0.18) 0%, transparent 58%),
    radial-gradient(ellipse at 85% 110%, rgba(201, 169, 110, 0.12) 0%, transparent 55%),
    #0e1410 !important;
}
.elementor-65 .elementor-element.elementor-element-27f45c23 .m-section__header { text-align: center !important; margin-bottom: 0 !important; }

/* Metal-5 and metal-6 in commercial gallery: no border-radius (raw edge-to-edge). */
img[src*="metal-5-opaque"],
img[src*="metal-6-opaque"] { border-radius: 0 !important; box-shadow: none !important; }

/* New-construction (67) Residential new construction (5e71efa5): soft-bg accent. */
.elementor-67 .elementor-element.elementor-element-5e71efa5:not(.elementor-motion-effects-element-type-background),
.elementor-67 .elementor-element.elementor-element-5e71efa5 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #F5F7F4 !important;
}

/* New-construction (67) Commercial new construction (70394685): keep white bg. */
.elementor-67 .elementor-element.elementor-element-70394685:not(.elementor-motion-effects-element-type-background),
.elementor-67 .elementor-element.elementor-element-70394685 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #ffffff !important;
}

/* New-construction (67) Three roofing systems (18c7a8a7): dark radial gradient + center header. */
.elementor-67 .elementor-element.elementor-element-18c7a8a7:not(.elementor-motion-effects-element-type-background),
.elementor-67 .elementor-element.elementor-element-18c7a8a7 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(26, 122, 62, 0.18) 0%, transparent 58%),
    radial-gradient(ellipse at 85% 110%, rgba(201, 169, 110, 0.12) 0%, transparent 55%),
    #0e1410 !important;
}
.elementor-67 .elementor-element.elementor-element-18c7a8a7 .m-eyebrow { color: var(--m-accent) !important; }
.elementor-67 .elementor-element.elementor-element-18c7a8a7 .m-h2 { color: #fff !important; }
.elementor-67 .elementor-element.elementor-element-18c7a8a7 .m-h2__accent { color: var(--m-accent) !important; }
.elementor-67 .elementor-element.elementor-element-18c7a8a7 .m-section__lede { color: rgba(255,255,255,0.78) !important; }
.elementor-67 .elementor-element.elementor-element-18c7a8a7 .m-section__header { text-align: center !important; margin-bottom: 0 !important; }
.elementor-67 .elementor-element.elementor-element-18c7a8a7::before { display: none; }

/* New-construction (67) Three roofing systems (18c7a8a7): center the lede inside the 760px header. */
.elementor-67 .elementor-element.elementor-element-18c7a8a7 .m-section__lede { margin: 0 auto !important; }

/* New-construction (67) Three materials bento (4e77dc55): white bg, 100px vertical padding. */
.elementor-67 .elementor-element.elementor-element-4e77dc55:not(.elementor-motion-effects-element-type-background),
.elementor-67 .elementor-element.elementor-element-4e77dc55 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #ffffff !important;
}
.elementor-67 .elementor-element.elementor-element-4e77dc55:not(.elementor-motion-effects-element-type-background) {
  padding: 100px 40px !important;
}



/* New-construction (67) Why Blancos section (8cbce818): full-bleed soft bg. */
.elementor-67 .elementor-element.elementor-element-8cbce818:not(.elementor-motion-effects-element-type-background),
.elementor-67 .elementor-element.elementor-element-8cbce818 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #F5F7F4 !important;
}

/* Contact (68) service areas (8183a9be): full-bleed map + inner, like home (e5156e3). */
.elementor-68 .elementor-element.elementor-element-8183a9be .m-service-areas .m-service-areas__inner.m-container {
  left: 0 !important; right: 0 !important; width: 100% !important;
  max-width: none !important;
}
.elementor-68 .elementor-element.elementor-element-8183a9be .m-service-areas {
  left: 0 !important;
  right: 0 !important;
}

/* Contact (68) service areas (8183a9be): match home (e5156e3) — no padding, 746px tall. */
.elementor-68 .elementor-element.elementor-element-8183a9be {
  padding: 0 !important;
  height: 746px !important;
}
.elementor-68 .elementor-element.elementor-element-8183a9be .m-service-areas__map { height: 746px !important; }
.elementor-68 .elementor-element.elementor-element-8183a9be .m-service-areas__overlay { height: 746px !important; }

.elementor-68 .elementor-element.elementor-element-8183a9be > .elementor-container { height: 746px !important; max-height: 746px !important; overflow: hidden; }

.elementor-68 .elementor-element.elementor-element-051d9aa2 { height: 746px !important; max-height: 746px !important; overflow: hidden; }

.elementor-68 .elementor-element.elementor-element-8183a9be .m-service-areas__panel { position: absolute !important; top: 100px !important; left: max(20px, calc(50vw - 580px)) !important; right: auto !important; width: 700px !important; max-width: none !important; height: auto; z-index: 3 !important; }

.elementor-68 .elementor-element.elementor-element-8183a9be .m-service-areas { padding: 0 !important; align-items: stretch !important; }

.elementor-68 .elementor-element.elementor-element-8183a9be .m-service-areas .m-service-areas__inner.m-container { left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; }

.elementor-68 .elementor-element.elementor-element-8183a9be .m-service-areas__inner.m-container { position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; width: auto !important; max-width: none !important; padding: 0 !important; height: 100% !important; z-index: 2 !important; }

.elementor-68 .elementor-element.elementor-element-8183a9be { display: block !important; position: relative !important; overflow: visible !important; }

/* Contact (68) service areas (8183a9be): map bg full-viewport width.
   Targets both the section ID (8183a9be, per live DB) and the alternate
   flex-container ID (e5156e3, per pasted DOM) plus every intermediate
   Elementor wrapper, so the Leaflet map bleeds edge-to-edge regardless
   of whether the page uses .elementor-section or .e-con containers. */
.elementor-68 .elementor-element-8183a9be,
.elementor-68 .elementor-element-8183a9be > .elementor-container,
.elementor-68 .elementor-element-8183a9be > .elementor-container > .elementor-column,
.elementor-68 .elementor-element-8183a9be > .e-con-inner,
.elementor-68 .elementor-element-e5156e3,
.elementor-68 .elementor-element-e5156e3 > .e-con-inner,
.elementor-68 .elementor-element-e5156e3 > .e-con-inner > .e-child,
.elementor-68 .elementor-element-e5156e3 .e-con,
.elementor-68 .elementor-element-e5156e3 .elementor-widget-container,
.elementor-68 .elementor-element-8183a9be .elementor-widget-container,
.elementor-68 .elementor-element-8183a9be .m-service-areas,
.elementor-68 .elementor-element-e5156e3 .m-service-areas,
.elementor-68 .elementor-element-8183a9be .m-service-areas__map,
.elementor-68 .elementor-element-e5156e3 .m-service-areas__map {
  position: relative !important;
  max-width: none !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}


/* m-cta__arrow: center the fontawesome icon inside flex CTAs */
.m-cta__arrow {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  font-size: 1em;
  vertical-align: middle;
  margin-top: 5px;
}

/* Prevent any sub-pixel overflow from causing horizontal page scroll.
   .m-gallery uses width:100vw + margin-left:-50vw (full-bleed trick),
   which can be a hair wider than the section on viewports where the
   scrollbar reserves space. overflow-x:clip on both <html> and <body>
   hides the overshoot without breaking layout. */
html, body {
  overflow-x: clip;
}