/* =============================================================
   Blancos Roofing — modern variant (v2)
   Pilot: home-v2.html. Same content, modern aesthetic.

   Design principles:
   - Oversized typography, bold display
   - Asymmetric layouts (split sections, bento grids)
   - Generous whitespace
   - Subtle shadows + smooth transitions
   - Numbered features, accent color on key words
   ============================================================= */

@font-face {
  font-family: 'Brunson';
  src: url('../fonts/Brunson.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─── Color ─────────────────────────────────────────────────────── */
  --m-primary: #1A7A3E;
  --m-primary-dark: #0F5C2F;
  --m-accent: #C9A96E;
  --m-text: #0e1410;
  --m-text-muted: #5a6660;
  --m-bg: #ffffff;
  --m-bg-alt: #f5f7f4;
  --m-border: #e6e8e4;
  --m-footer: #0e1410;

  /* ─── Typography ────────────────────────────────────────────────── */
  --m-font-display: 'Brunson', Georgia, 'Times New Roman', serif;
  --m-font-heading: 'Chivo', sans-serif;
  --m-font-body: 'Montserrat', system-ui, sans-serif;

  /* Type scale (clamp values for fluid type — see .m-h2 for example) */
  --m-text-xs: 12px;
  --m-text-sm: 13px;
  --m-text-base: 16px;
  --m-text-md: 19px;
  --m-text-lg: 22px;
  --m-text-xl: 28px;
  --m-text-2xl: clamp(28px, 4vw, 48px);
  --m-text-3xl: clamp(36px, 5vw, 64px);
  --m-text-4xl: clamp(40px, 6vw, 72px);
  --m-text-hero: clamp(32px, 4vw, 48px);

  /* ─── Radius ────────────────────────────────────────────────────── */
  --m-radius-sm: 4px;
  --m-radius-md: 6px;
  --m-radius-lg: 8px;
  --m-radius-pill: 6px;

  /* ─── Shadow ────────────────────────────────────────────────────── */
  --m-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --m-shadow-md: 0 8px 24px rgba(0,0,0,0.06);
  --m-shadow-lg: 0 24px 48px rgba(0,0,0,0.10);

  /* ─── Spacing scale (8px base, also covers 4px half-steps) ──────── */
  /* Use ONLY these for padding, margin, gap. Ad-hoc values rejected. */
  --space-1:  4px;     /* hairline — icon nudges, badge inner */
  --space-2:  8px;     /* tight — icon+text, button internal */
  --space-3:  12px;    /* compact — FAQ items, small card inner */
  --space-4:  16px;    /* STANDARD grid gap — service cards, features */
  --space-5:  24px;    /* generous — card inner padding */
  --space-6:  32px;    /* section inner — split between media+copy */
  --space-7:  40px;    /* large inner — hero card padding desktop */
  --space-8:  48px;    /* section break — alt band separator */
  --space-10: 64px;    /* major section break */
  --space-12: 80px;    /* page-level vertical (compact section) */
  --space-13: 100px;   /* DEFAULT section vertical padding (m-section-y) */
  --space-16: 120px;   /* hero section vertical padding */
  --space-20: 160px;   /* full-page vertical (rare) */

  /* ─── Layout ────────────────────────────────────────────────────── */
  --m-container-max: 1240px;
  --m-container-pad: 40px;   /* desktop padding-inline */
  --m-container-pad-mobile: 24px;
  --m-section-y: var(--space-13);  /* 100px — keep alias for backward compat */

  /* ─── Breakpoints (informational; use @media queries) ──────────── */
  /*  --bp-sm: 500px;  --bp-md: 767px;  --bp-lg: 900px;  --bp-xl: 1024px;  --bp-2xl: 1240px; */

  /* ─── Z-index scale ─────────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   1000;

  /* ─── Transitions ───────────────────────────────────────────────── */
  --t-fast:   120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:   320ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring: 600ms cubic-bezier(0.16, 1, 0.3, 1);  /* hero fade-up */

  /* ─── Elementor column gap (legacy alias — use --space-4 instead) ── */
  --m-gap-default: var(--space-5);  /* 24px — matches Elementor column-gap-default 12+12 */
  --m-grid-gap: var(--space-4);     /* 16px — DESIGN.md grid-gap token */
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body.blancos-modern {
  font-family: var(--m-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--m-text);
  background: var(--m-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.m-container {
  max-width: var(--m-container-max);
  margin: 0 auto;
  padding: 0;
}
@media (max-width: 767px) { .m-container { padding: 0 16px; } }

/* ─── Typography ─── */
.m-eyebrow {
  font-family: var(--m-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--m-primary);
  margin: 0 0 16px;
}
.m-eyebrow--light { color: rgba(255,255,255,0.85); }

.m-h2 {
  font-family: var(--m-font-heading);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: var(--m-text);
  margin: 0 0 24px;
}
.m-h2--md { font-size: clamp(28px, 4vw, 48px); }
.m-h2--xl { font-size: clamp(40px, 6vw, 72px); }
.m-h2--light { color: #fff; }
.m-h2__accent { color: var(--m-primary); }
.m-h2__accent--light { color: var(--m-accent); }

/* ─── Buttons ─── */
.m-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--m-font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: var(--m-radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all .2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.m-cta__arrow { transition: transform .2s ease; display: inline-block; font-style: normal; }
.m-cta:hover .m-cta__arrow { transform: translateX(4px); }
.m-cta--primary { background: var(--m-primary); color: #fff; }
.m-cta--primary:hover { background: var(--m-primary-dark); transform: translateY(-1px); box-shadow: var(--m-shadow-md); }
.m-cta--ghost { background: transparent; color: var(--m-text); border-color: var(--m-text); }
.m-cta--ghost:hover { background: var(--m-text); color: #fff; }
.m-cta--lg { padding: 16px 32px; font-size: 16px; }
.m-header__cta { text-transform: uppercase; font-size: 13px; letter-spacing: 1px; }

/* ─── Section primitives ─── */
.m-section { padding: var(--m-section-y) 0; }
.m-section--alt { background: var(--m-bg-alt); }
.m-section--no-padding { padding: 0 0 var(--m-section-y); }

.m-section__header { max-width: 760px; margin-bottom: 64px; }
.m-section__header--sticky { position: sticky; top: 96px; align-self: start; }
.m-section__header--inline {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
  max-width: 100%;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.m-section__lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--m-text-muted);
  margin: 0;
  max-width: 640px;
}
.m-section__header p:not(.m-eyebrow):not(.m-h2) {
  font-size: 19px;
  line-height: 1.55 !important;
}
/* Elementor widget-container sometimes inherits odd line-height (30px) —
   force lede consistency on any <p> wrapped by elementor widgets */
.elementor-widget-container p:not(.m-eyebrow):not(.m-h2):not(.m-h2--light) {
  line-height: 1.55 !important;
}
.m-section__lede--narrow { max-width: 420px; }
.m-section__footer { text-align: center; margin-top: 48px; }

/* ─── Header (modern minimal) ─── */
.m-header {
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--m-border);
}
.m-header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 16px 40px;
}
.m-header__nav { margin-left: auto; }
.m-header__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--m-text);
}
.m-header__logo-mark {
  width: 40px; height: 40px;
  background: var(--m-primary);
  color: #fff;
  border-radius: var(--m-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--m-font-heading);
  font-weight: 900;
  font-size: 22px;
}
.m-header__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.m-header__logo-text strong {
  font-family: var(--m-font-heading);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0;
}
.m-header__logo-text small {
  font-size: 11px;
  color: var(--m-text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.m-header__logo-img {
  display: block;
  height: 44px;
  width: auto;
}
.m-header__nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.m-header__nav a {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--m-text);
  position: relative;
  padding: 4px 0;
  transition: color .2s ease;
}
.m-header__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--m-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.m-header__nav a:hover { color: var(--m-primary); }
.m-header__nav a:hover::after { transform: scaleX(1); }

/* Dropdown */
.m-header__dropdown {
  position: relative;
  padding-bottom: 16px;  /* gap invisible que mantiene el hover */
  margin-bottom: -16px;  /* compensa el padding visualmente */
}
.m-header__dropdown-toggle { cursor: pointer; }
.m-header__dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-md);
  padding: 8px 0;
  min-width: 220px;
  display: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  z-index: 200;
}
.m-header__dropdown:hover .m-header__dropdown-menu,
.m-header__dropdown:focus-within .m-header__dropdown-menu {
  display: block;
}
.m-header__dropdown-menu a {
  display: block;
  padding: 10px 20px;
  color: var(--m-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.m-header__dropdown-menu a::after { display: none; }
.m-header__dropdown-menu a:hover {
  background: var(--m-bg-alt);
  color: var(--m-primary);
}
@media (max-width: 900px) { .m-header__nav { display: none; } }

/* ─── Hero — bg image full bleed + white card centered (1240 container) ─── */
.m-hero {
  position: relative;
  min-height: 80vh;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 120px 0;
  overflow: hidden;
}
/* Section element + container chain: full-width so bg image bleeds */
.m-hero.elementor-section,
.m-hero .elementor-container,
.m-hero .elementor-widget-container,
.m-hero .elementor-column,
.m-hero .elementor-column-wrap,
.m-hero .elementor-widget-wrap {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  z-index: 2;
  min-height: 600px;
  display: flex !important;
  align-items: center !important;
}
/* Card wrapper: 1240 max-width, centered like .m-container */
.m-hero__inner {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
@media (min-width: 1024px) {
  .m-hero__inner { padding-left: 40px !important; padding-right: 40px !important; }
}
.m-hero__card {
  background: #fff;
  padding: 56px 48px;
  max-width: 540px;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left;
  border-radius: var(--m-radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  box-sizing: border-box !important;
}
.m-hero__title {
  font-family: var(--m-font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--m-text);
  margin: 0 0 20px;
}
.m-hero__lede {
  font-family: var(--m-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--m-text-muted);
  margin: 0 0 28px;
}
.m-hero__cta {
  font-size: 15px;
  padding: 14px 24px;
}
@media (max-width: 767px) {
  .m-hero { min-height: 0; padding: 60px 0; }
  .m-hero.elementor-section,
  .m-hero .elementor-container,
  .m-hero .elementor-widget-container,
  .m-hero .elementor-column,
  .m-hero .elementor-column-wrap,
  .m-hero .elementor-widget-wrap { min-height: 0; }
  .m-hero__inner { padding: 32px 16px !important; }
  .m-hero__card {
    padding: 32px 24px !important;
    max-width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  .m-hero__title { font-size: 28px; letter-spacing: 1px; }
  .m-hero__lede { font-size: 15px; }
  .m-hero__cta { width: 100%; justify-content: center; }
}

/* Form perks widget (92251ac) mobile: add breathing room before the form */
@media (max-width: 767px) {
  .elementor-element-92251ac { margin-bottom: 32px !important; }
}

/* FAQ section (c059ee0) mobile: Elementor sets 100px top/bottom via
   inline --padding-top/--padding-bottom CSS vars. Reduce to 50px
   on small screens to keep the section tighter. */
@media (max-width: 767px) {
  .elementor-element-c059ee0 {
    --padding-top: 50px;
    --padding-bottom: 50px;
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  .elementor-element-d378cfc,
  .elementor-element-269e467 {
    --padding-top: 50px;
    --padding-bottom: 50px;
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
}

/* Default horizontal padding for e-con-inner on tablet + mobile.
   Some sections (intro, why-blancos, faq, form) use plain e-con-inner
   that Elementor leaves at padding: 0 — without this rule the headings
   sit flush against the screen edge. */
@media (max-width: 1023px) {
  .elementor-element-d378cfc .e-con-inner,
  .elementor-element-269e467 .e-con-inner,
  .elementor-element-c059ee0 .e-con-inner,
  .elementor-element-59e440a .e-con-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
@media (min-width: 1024px) {
  .elementor-element-d378cfc .e-con-inner,
  .elementor-element-269e467 .e-con-inner,
  .elementor-element-c059ee0 .e-con-inner,
  .elementor-element-59e440a .e-con-inner {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/* ─── Services (4-up grid, equal heights, no empty space) ─── */
.m-services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.m-service {
  position: relative;
  aspect-ratio: 5/6;
  background-size: cover;
  background-position: center;
  border-radius: var(--m-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  color: #fff;
  transition: filter .3s ease;
}
.m-service:hover { filter: brightness(1.08); }
.m-service__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(14, 20, 16, 0) 0%,
    rgba(14, 20, 16, 0.35) 35%,
    rgba(14, 20, 16, 0.75) 65%,
    rgba(14, 20, 16, 0.95) 100%
  );
  z-index: 1;
}
.m-service__content {
  position: relative;
  z-index: 3;
  padding: 96px 24px 24px;
  display: flex;
  flex-direction: column;
}
.m-service__icon {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 4;
  width: 52px; height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-service__icon img { width: 32px; height: 32px; object-fit: contain; }
.m-service__title {
  font-family: var(--m-font-heading);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.3px;
  margin: 0 0 8px;
  line-height: 1.15;
}
.m-service__desc {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  color: rgba(255,255,255,0.85);
}
@media (max-width: 900px) { .m-services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) {
  .m-services__grid { grid-template-columns: 1fr; }
  .m-service { aspect-ratio: 4/3; }
}

/* FIX 2026-07-06 — Visual issues reported by user */

/* Service area: make the parent container the positioning context for the
   map. m-service-areas__map is absolute; force e5156e3 + e-child chain to
   100% width and position:relative so map bleeds across full viewport.
   Zero out horizontal padding on every .e-con in the chain — .e-con has a
   10px --padding-default which otherwise creates a gap around the map. */
.elementor-element-e5156e3,
.elementor-element-e5156e3 > .e-con-inner,
.elementor-element-e5156e3 > .e-con-inner > .e-child,
.elementor-element-e5156e3 > .e-con-inner > .e-child > .e-con-inner,
.elementor-element-e5156e3 .elementor-widget-container,
.elementor-element-e5156e3 .m-service-areas,
.elementor-element-e5156e3 .e-con,
.elementor-element-e5156e3 .e-con-inner {
  position: relative !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* Service area + Why + FAQ — all are <div class="e-con"> in Elementor 4.x.
   Drop the section prefix so the selector matches. Apply full-viewport
   breakout so inner .elementor-widget-container stops constraining to
   1240px. Testimonials (b7f4071) is special: section is full-bleed (for
   gradient bg) but content stays inside 1240 — handled separately below. */
.elementor-element-e5156e3,
.elementor-element-269e467,
.elementor-element-c059ee0,
.elementor-element-e5156e3 > .e-con-inner,
.elementor-element-269e467 > .e-con-inner,
.elementor-element-c059ee0 > .e-con-inner,
.elementor-element-e5156e3 .elementor-widget-container,
.elementor-element-269e467 .elementor-widget-container,
.elementor-element-c059ee0 .elementor-widget-container {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Testimonials section — full-bleed gradient bg, content stays in 1240 */
.elementor-element-b7f4071,
.elementor-element-b7f4071 > .e-con-inner {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  position: relative !important;
}
.elementor-element-b7f4071 .elementor-widget-container {
  max-width: 1240px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 2 !important;
}
@media (min-width: 1024px) {
  .elementor-element-b7f4071 .elementor-widget-container {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}
/* Testimonials bg — dark with radial gradient overlay (matches ref) */
.elementor-element-b7f4071 {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(26, 122, 62, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(201, 169, 110, 0.10) 0%, transparent 50%),
    #0e1410 !important;
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}
@media (max-width: 900px) {
  .elementor-element-b7f4071 { padding-top: 60px !important; padding-bottom: 60px !important; }
}
/* Force testimonials text colors (override theme defaults since section
   has no m-section--alt class). Use higher specificity selectors to
   beat style.css's `.elementor-widget-container h2.m-h2` rule. */
.elementor-element-b7f4071 .m-eyebrow { color: #fff !important; }
.elementor-element-b7f4071 .elementor-widget-container h2.m-h2,
.elementor-element-b7f4071 .elementor-widget-container h2.m-h2--md,
.elementor-element-b7f4071 .elementor-widget-container h2.m-h2--xl,
.elementor-element-b7f4071 .elementor-widget-container h2.m-h2--light {
  color: #fff !important;
}
.elementor-element-b7f4071 .m-h2__accent,
.elementor-element-b7f4071 .elementor-widget-container .m-h2__accent { color: var(--m-accent) !important; }
.elementor-element-b7f4071 .m-section__header p,
.elementor-element-b7f4071 .m-section__header h2 { color: #fff !important; }
.elementor-element-b7f4071 .m-section__header .m-eyebrow { color: #fff !important; }
.elementor-element-b7f4071 .m-testimonial__quote { color: #fff !important; }
.elementor-element-b7f4071 .m-testimonial__author strong { color: #fff !important; }
.elementor-element-b7f4071 .m-testimonial__author span { color: rgba(255,255,255,0.6) !important; }
.elementor-element-b7f4071 .m-testimonial__rating { color: var(--m-accent) !important; }
.elementor-element-b7f4071 .m-section__footer { margin-top: 56px !important; text-align: center !important; }
/* Service area inner panel — 1240 max-width centered like other sections */
.m-service-areas .m-service-areas__inner.m-container {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 50px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 100px;
}
.m-service-areas__panel {
  max-width: 100% !important;
  width: 60% !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.m-service-areas {
  position: relative;
  overflow: hidden;
  min-height: 600px;
  display: flex;
  align-items: flex-start;
  padding: 100px 0 60px !important;
  color: #fff;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  left: 0 !important;
  right: 0 !important;
  box-sizing: border-box !important;
}

/* Testimonials: explicit color on native elements that don't inherit reliably */
.m-testimonial__quote { color: #fff; }
.m-testimonial__quote::before,
.m-testimonial__quote::after { color: rgba(255,255,255,0.4); }
.m-testimonial__author strong { color: #fff; display: block; font-weight: 700; font-size: 12px; }

/* Gallery: force full-viewport-width edge-to-edge for the 4-cell grid */
section.elementor-element-112eb60 .m-gallery,
.m-gallery {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}


/* ─── Service areas (map as full-section background) ─── */
/* .m-service-areas declaration moved up near top of file to ensure
   single source of truth (avoids cascade conflicts). */
.m-service-areas__map {
  position: absolute;
  inset: 0;
  z-index: 0;
  filter: grayscale(35%) brightness(0.75) contrast(1.05);
}
.m-service-areas__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(14, 20, 16, 0.97) 0%,
    rgba(14, 20, 16, 0.92) 25%,
    rgba(14, 20, 16, 0.5) 55%,
    rgba(14, 20, 16, 0) 100%
  );
  pointer-events: none;
}
.m-service-areas::before {
  content: "";
  position: absolute;
  top: -200px; right: -100px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--m-primary) 0%, transparent 70%);
  opacity: 0.2;
  pointer-events: none;
  z-index: 1;
}
.m-service-areas__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
.m-service-areas__panel {
  width: 60%;
}
.m-service-areas__lede {
  font-size: 19px;
  line-height: 1.55;
  color: rgba(255,255,255,0.9);
  margin: 0 0 24px;
}
.m-cities {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
  font-family: var(--m-font-heading);
  font-weight: 600;
  font-size: 16px;
  color: #fff;
}
.m-cities li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.m-cities li::before {
  content: "→";
  color: var(--m-accent);
  font-weight: 700;
}
.m-service-areas__contact {
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.m-service-areas__phone {
  font-family: var(--m-font-heading);
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.m-service-areas__phone i { font-size: 16px; }
.m-service-areas__phone:hover { color: var(--m-accent); }
.m-service-areas__address {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  margin: 0;
  line-height: 1.5;
}
.m-service-areas__address strong { color: #fff; }
@media (max-width: 900px) {
  .m-service-areas { min-height: 0; padding: 80px 0; }
  .m-service-areas__overlay {
    background: linear-gradient(180deg,
      rgba(14, 20, 16, 0.92) 0%,
      rgba(15, 50, 28, 0.85) 100%
    );
  }
  .m-service-areas::before { display: none; }
  .m-service-areas__panel { max-width: 100%; width: 100% !important; }
  .m-service-areas .m-service-areas__inner.m-container { padding: 60px 24px !important; }
}
@media (max-width: 767px) {
  .m-service-areas .m-service-areas__inner.m-container { padding: 48px 35px !important; }
  .m-service-areas__phone { font-size: 22px; }
  .m-service-areas__phone a { word-break: break-all; }
}

/* ─── Features (numbered) ─── */
.m-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.m-feature {
  background: var(--m-bg);
  border-radius: var(--m-radius-md);
  padding: 32px 28px;
  transition: background .3s ease;
}
.m-feature:hover { background: var(--m-bg-alt); }
.m-feature__num {
  font-family: var(--m-font-display);
  font-size: 56px;
  line-height: 1;
  color: var(--m-primary);
  margin-bottom: 16px;
  opacity: 0.7;
}
.m-feature__title {
  font-family: var(--m-font-heading);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.3px;
  margin: 0 0 12px;
  line-height: 1.2;
}
.m-feature__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--m-text-muted);
  margin: 0;
}
@media (max-width: 900px) { .m-features { grid-template-columns: 1fr; } }

/* ─── Testimonials (option L: 4 cards en row, full text, DARK GREEN BAND) ─── */
.m-section--alt {
  background: var(--m-text);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.m-section--alt::before {
  content: "";
  position: absolute;
  top: 320px; left: 50%;
  width: 1200px; height: 500px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--m-primary) 0%, transparent 70%);
  opacity: 0.3;
  pointer-events: none;
}
.m-section--alt .m-eyebrow,
body.elementor-page .elementor-63 .elementor-element-142434e .m-eyebrow { color: var(--m-accent); }
.m-section--alt .m-h2,
body.elementor-page .elementor-63 .elementor-element-142434e .m-h2 { color: #fff !important; }
.m-section--alt .m-h2__accent,
body.elementor-page .elementor-63 .elementor-element-142434e .m-h2__accent { color: var(--m-accent) !important; }
.m-testimonials-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
  z-index: 1;
}
.m-testimonial {
  background: rgba(26, 42, 32, 0.55);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--m-radius-md);
  padding: 24px;
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
}
.m-testimonial__rating {
  color: var(--m-accent);
  font-size: 14px;
  letter-spacing: 3px;
  margin-bottom: 16px;
}
.m-testimonial__quote {
  font-family: var(--m-font-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  letter-spacing: -0.1px;
  flex: 1;
}
.m-testimonial__author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  margin-top: auto;
}
.m-testimonial__author-avatar {
  width: 36px; height: 36px;
  background: var(--m-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}
.m-testimonial__author strong { display: block; font-weight: 700; font-size: 12px; }
.m-testimonial__author span { color: rgba(255,255,255,0.6); font-size: 11px; }
@media (max-width: 1000px) { .m-testimonials-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .m-testimonials-row { grid-template-columns: 1fr; } }

/* ─── Gallery (simple, no AI vibes) ─── */
.m-section--gallery { padding: 100px 0 0; }
@media (max-width: 767px) {
  .elementor-element-112eb60,
  .m-section--gallery {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
}
.m-gallery__header {
	max-width: 1240px;
	margin: 0 auto 40px;
	padding: 0 24px;
	box-sizing: border-box;
}
@media (min-width: 1024px) { .m-gallery__header { padding: 0 40px; } }

.m-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.m-gallery__cell {
  position: relative;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  display: block;
  overflow: hidden;
}
.m-gallery__cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 50, 28, 0);
  transition: background 0.25s ease;
}
.m-gallery__cell:hover::after { background: rgba(15, 50, 28, 0.15); }
.m-gallery__cell img,
.m-gallery__cell { transition: transform 0.4s ease; }

@media (max-width: 767px) {
  .m-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .m-gallery {
    grid-template-columns: 1fr;
    gap: 0 !important;
    row-gap: 0 !important;
  }
  .m-gallery__cell { margin: 0 !important; }
}

/* ─── FAQ (modern split layout) ─── */
.m-faq__layout {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) 1.4fr;
  gap: 64px;
  align-items: start;
}
.m-faq__list { display: flex; flex-direction: column; gap: 8px; }
.m-faq {
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-md);
  transition: border-color .2s ease, background-color .2s ease;
}
.m-faq:hover { border-color: var(--m-primary); }
.m-faq[open] {
  border-color: var(--m-primary);
  background: rgba(26, 122, 62, 0.04);
}
.m-faq__q {
  list-style: none;
  cursor: pointer;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--m-font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--m-text);
  letter-spacing: -0.2px;
}
.m-faq__q::-webkit-details-marker { display: none; }
.m-faq__num {
  font-family: var(--m-font-display);
  font-size: 14px;
  color: var(--m-primary);
  opacity: 0.6;
  font-weight: 400;
  letter-spacing: 1px;
  flex-shrink: 0;
}
.m-faq__qtext { flex: 1; min-width: 0; }
.m-faq__icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--m-bg-alt);
  color: var(--m-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  transition: all .2s ease;
}
.m-faq[open] .m-faq__icon { background: var(--m-primary); color: #fff; transform: rotate(45deg); }
.m-faq__a { padding: 0 24px 24px 24px; }
.m-faq__a p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--m-text-muted);
  margin: 0;
}
.m-faq__cta { margin-top: 24px; }
@media (max-width: 900px) { .m-faq__layout { grid-template-columns: 1fr; gap: 32px; } }

/* ─── Dark section footer (CTA centered) ─── */
.m-section--alt .m-section__footer { margin-top: 56px; }

/* ─── CTA + Form (split modern) ─── */
.m-cta-form {
  background: var(--m-text);
  color: #fff;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.m-cta-form::before {
  content: "";
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--m-primary) 0%, transparent 70%);
  opacity: 0.3;
  pointer-events: none;
}
.m-cta-form__layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.m-cta-form__intro .m-h2 { font-size: clamp(32px, 4vw, 52px); }
.m-cta-form__lede {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  margin: 0 0 24px;
  max-width: 500px;
}
.m-cta-form__perks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.m-cta-form__perks li {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  color: #FFFFFF;
  padding: 8px 16px;
  border-radius: var(--m-radius-md);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.m-form {
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--m-radius-lg);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.m-form__title {
  font-family: var(--m-font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--m-accent);
  margin: 0 0 8px;
}
.m-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m-form input {
  font-family: var(--m-font-body);
  font-size: 15px;
  padding: 14px 18px;
  background: #fff;
  color: var(--m-text);
  border: 1.5px solid transparent;
  border-radius: var(--m-radius-sm);
  outline: none;
  transition: border-color .2s ease;
}
.m-form input::placeholder { color: var(--m-text-muted); font-weight: 500; }
.m-form input:focus { border-color: var(--m-accent); }
.m-form__submit { width: 100%; justify-content: center; margin-top: 8px; }
.m-form__smallprint {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  text-align: center;
  margin: 8px 0 0;
}
@media (max-width: 900px) {
  .m-cta-form__layout { grid-template-columns: 1fr; gap: 40px; }
  .m-form__row { grid-template-columns: 1fr; }
  .m-cta-form { padding: 60px 0; }
  .m-form { padding: 28px; }
}

/* ─── Footer (modern minimal) ─── */
.m-footer {
  position: relative;
  background: var(--m-footer);
  color: #fff;
  padding: 80px 0 0;
  overflow: hidden;
}
.m-footer__bg {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 240px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  opacity: 0.06;
  pointer-events: none;
}
.m-footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 64px;
}
.m-footer__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.m-footer__logo-img {
  display: block;
  height: 56px;
  width: auto;
}
.m-footer__tagline {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.65);
  margin: 0;
  max-width: 280px;
}
.m-footer__heading {
  font-family: var(--m-font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--m-accent);
  margin: 0 0 16px;
}
.m-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
}
.m-footer__list a { color: rgba(255,255,255,0.85); transition: color .2s ease; }
.m-footer__list a:hover { color: #fff; }
.m-footer__emergency { color: var(--m-accent); font-weight: 600; }
.m-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 24px 0;
  position: relative;
  z-index: 1;
}
.m-footer__bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}
.m-footer__bottom p { margin: 0; }
.m-footer__socials { display: flex; gap: 12px; }
.m-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;
  font-size: 14px;
  transition: all .2s ease;
}
.m-footer__socials a:hover { background: #fff; color: var(--m-footer); }
@media (max-width: 900px) {
  .m-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .m-footer__bottom-inner { flex-direction: column; gap: 16px; }
}
@media (max-width: 500px) {
  .m-footer__inner { grid-template-columns: 1fr; gap: 28px; }
  .m-footer { padding-top: 60px; }
}

/* ============================================================
   ANIMATIONS — scroll reveals + hero load stagger
   Only active when JS toggles html.js-anim AND user hasn't
   requested reduced motion. Otherwise content shows as-is.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* Reduced reveal — start at opacity 0.001 (not 0) to avoid
     white/dark "voids" appearing in screenshots or fast scrolling.
     Elements still animate in but with less travel and shorter duration. */
  html.js-anim .reveal,
  html.js-anim .reveal-stagger > *,
  html.js-anim .reveal-split > * {
    opacity: 0.001;
    transition:
      opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }

  html.js-anim .reveal,
  html.js-anim .reveal-stagger > * {
    transform: translateY(12px);
  }

  html.js-anim .reveal-split > *:first-child {
    transform: translateX(-12px);
  }

  html.js-anim .reveal-split > *:last-child {
    transform: translateX(12px);
  }

  html.js-anim .reveal.is-visible,
  html.js-anim .reveal-stagger.is-visible > *,
  html.js-anim .reveal-split.is-visible > * {
    opacity: 1;
    transform: translate(0, 0);
  }
  html.js-anim .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
  html.js-anim .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 70ms; }
  html.js-anim .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 140ms; }
  html.js-anim .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 210ms; }
  html.js-anim .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 280ms; }
  html.js-anim .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 350ms; }
  html.js-anim .reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 420ms; }
  html.js-anim .reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 490ms; }

  html.js-anim .m-hero__card > * {
    opacity: 0;
    animation: hero-fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  html.js-anim .m-hero__card > *:nth-child(1) { animation-delay: 0.10s; }
  html.js-anim .m-hero__card > *:nth-child(2) { animation-delay: 0.22s; }
  html.js-anim .m-hero__card > *:nth-child(3) { animation-delay: 0.34s; }

  html { scroll-behavior: smooth; }
}

/* Bypass animations for screenshot capture (?no-anim) — keeps markup static */
html.is-no-anim .reveal,
html.is-no-anim .reveal-stagger,
html.is-no-anim .reveal-split,
html.is-no-anim .reveal > *,
html.is-no-anim .reveal-stagger > *,
html.is-no-anim .reveal-split > * {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* Fix: Why Blancos section (3) has a duplicate eyebrow h4 (e3e2f50) right
   after the h2 "Three children. One standard." — it was a leftover from
   a copy/paste of the section header. The h2 already titles the section. */
.elementor-element-e3e2f50 { display: none !important; }

/* Fix: Elementor applies 24px horizontal padding to full_width sections.
   For our contact form template (id 937c6eb), we need zero padding
   so the form fills its parent column completely. */
[data-id="937c6eb"] > .elementor-container.elementor-column-gap-no {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}

/* Eliminate Elementor's default margin: 0 auto on widget containers inside the CTA templates (58, 57) so they fill their parent column edge-to-edge with no horizontal spacing. */
/* CTA templates (58, 57): eliminate ALL Elementor default margins/spacing on widget containers
   so widgets fill their parent column edge-to-edge. */
[data-id="71f5e56"] .elementor-widget-container,
[data-id="937c6eb"] .elementor-widget-container,
[data-id="71f5e56"] .elementor-shortcode,
[data-id="937c6eb"] .elementor-shortcode,
[data-id="71f5e56"] .elementor-widget,
[data-id="937c6eb"] .elementor-widget,
[data-id="71f5e56"] .elementor-widget-wrap,
[data-id="937c6eb"] .elementor-widget-wrap,
[data-id="71f5e56"] .elementor-column,
[data-id="937c6eb"] .elementor-column,
[data-id="71f5e56"] .elementor-container,
[data-id="937c6eb"] .elementor-container {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Shortcode widget that renders the CTA Final (template 58) on ANY page.
   Same bg as section 71f5e56 inside template 58 (#0E1410) so the widget wrapper blends
   seamlessly with the rendered dark CTA section — no white/transparent gap on the sides.
   Uses :has() to catch all 6 pages (Home, Residential, Metal, Commercial,
   New Construction, Contact) without hardcoding the per-page data-id of the wrapper
   widget (199421a / 448801c / cc990c7 / f6b6dcf / 5279974 / shortcode1). */
.elementor-widget-shortcode:has(.elementor-58) {
  background-color: #0E1410;
}

/* ─── r-split: image | copy two-column component (shared across all pages) ─── */
.r-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.r-split--reverse > :first-child { order: 2; }
.r-split__copy { display: flex; flex-direction: column; gap: 20px; }
.r-split__copy .m-section__header { margin-bottom: 0; }
.r-split__divider { width: 56px; height: 3px; background: var(--m-primary); border: 0; margin: 0; }
.r-split__lede { font-size: 17px; line-height: 1.6; color: var(--m-text-muted); margin: 0; }
.r-split__media img { width: 100%; height: auto; border-radius: var(--m-radius-md); box-shadow: var(--m-shadow-md); display: block; }
@media (max-width: 900px) {
  .r-split,
  .r-split--reverse { grid-template-columns: 1fr; gap: 32px; }
  .r-split--reverse > :first-child { order: 0; }
}

/* Gallery header lede: smaller than the generic 19px section lede. */
.m-gallery__header .m-section__lede { font-size: 16px; }