/*
 Theme Name:   ValleyWide Child
 Theme URI:    https://valleywidehomepros.com
 Description:  Child theme for ValleyWide Home Pros. Design system + Theme Builder support for the Elementor build. Blue #2090E7 / Charcoal #404247 / Burgundy CTA #6C1329, Montserrat.
 Author:       Kline Interactive
 Template:     hello-elementor
 Version:      1.0.2
 Text Domain:  valleywide-child
*/

/* ============================================================
   VALLEYWIDE HOME PROS — DESIGN SYSTEM
   Single source of truth for every page. Section HTML that uses
   these classes is pasted into Elementor HTML Code widgets.
   ============================================================ */
:root{
  /* Brand tokens. These mirror the Elementor Kit Global Colors.
     The var(--e-global-color-*) bridge keeps CSS in sync with the
     Kit once it is imported; the hex is the fallback. */
  --blue:var(--e-global-color-primary,#2090E7);
  --ink:var(--e-global-color-secondary,#404247);
  --burgundy:var(--e-global-color-accent,#6C1329);

  --blue-dark:#1877c4;
  --blue-tint:rgba(32,144,231,.08);
  --ink-900:#2b2d31;
  --ink-700:#54565b;
  --ink-500:#6f7176;
  --burgundy-hover:#87182f;
  --paper:#ffffff;
  --paper-2:#f5f7f9;
  --line:rgba(64,66,71,.14);
  --line-soft:rgba(64,66,71,.09);
  --radius:3px;
  --font:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --nav-h:76px;
  --shadow-card:0 1px 2px rgba(43,45,49,.04),0 12px 30px -12px rgba(43,45,49,.18);
  --shadow-card-hover:0 2px 4px rgba(43,45,49,.06),0 26px 48px -18px rgba(43,45,49,.30);
}
*,*::before,*::after{box-sizing:border-box}
h1,h2,h3,h4,h5,h6,p,figure,ul,ol,dl,blockquote{margin:0}
ul,ol{padding:0}
body{font-family:var(--font);color:var(--ink);background:var(--paper);line-height:1.65;font-weight:400;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}

/* ------------------------------------------------------------
   FULL-BLEED SECTIONS
   Each section's background spans the full viewport straight from the HTML,
   so you never have to set the Elementor container to Full Width. The inner
   .wrap keeps content centered at 1200. body{overflow-x:clip} above absorbs
   the scrollbar-width overflow that 100vw introduces (clip keeps the sticky
   header working, unlike overflow:hidden).
   ------------------------------------------------------------ */
.hero,.trustbar,.preferred,.services,.process,.about,.beforeafter,.reviews,
.cta-band,.gallery,.why,.faqt,.intro,.sheens,.colorhoa,.site-footer{
  width:100vw !important;max-width:100vw !important;margin-left:calc(50% - 50vw) !important
}

h1,h2,h3{font-weight:800;line-height:1.08;letter-spacing:-.01em;color:var(--ink-900)}
.section-head{max-width:640px;margin-bottom:clamp(34px,5vw,52px)}
.section-head h2{font-size:clamp(1.9rem,3.6vw,2.75rem);margin:0}
.section-head p{margin-top:16px;font-size:1.05rem;color:var(--ink-700)}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font);font-weight:700;font-size:.92rem;letter-spacing:.01em;
  padding:15px 28px;border-radius:var(--radius);cursor:pointer;border:2px solid transparent;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease;
  white-space:nowrap;line-height:1;
}
.btn-primary{background:var(--burgundy);color:#fff;box-shadow:0 10px 24px -10px rgba(108,19,41,.7)}
.btn-primary:hover{background:var(--burgundy-hover);transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(108,19,41,.7)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;transform:translateY(-2px)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-dark);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--ink-900);border-color:var(--line)}
.btn-outline:hover{border-color:var(--ink-900);transform:translateY(-2px)}

/* ============================================================ HEADER (Theme Builder) */
.site-header{
  position:sticky;top:0;z-index:100;height:var(--nav-h);background:rgba(255,255,255,.96);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line-soft);
}
.header-inner{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:nowrap;max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}
.site-header .brand img{height:44px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:28px;flex-shrink:0}
.nav-link{
  font-size:.9rem;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:5px;
  padding:6px 0;position:relative;letter-spacing:.01em;white-space:nowrap;
}
.nav-link::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--blue);transition:width .22s ease}
.nav-link:hover{color:var(--blue-dark)}
.nav-link:hover::after{width:100%}
.caret{width:9px;height:9px;stroke:currentColor;stroke-width:2.4;fill:none;opacity:.6;transition:transform .2s ease}
.nav-item{position:relative;display:inline-flex;align-items:center}
.nav-item:hover .caret,.nav-item:focus-within .caret{transform:rotate(180deg)}
.nav-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);min-width:216px;
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow-card-hover);
  padding:8px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;
  transition:opacity .18s ease,transform .18s ease;z-index:120;
}
.nav-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-item:hover .nav-menu,.nav-item:focus-within .nav-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(6px)}
.nav-menu a{font-size:.88rem;font-weight:600;color:var(--ink);padding:11px 14px;border-radius:var(--radius);white-space:nowrap;transition:background .15s ease,color .15s ease}
.nav-menu a:hover{background:var(--blue-tint);color:var(--blue-dark)}
.header-cta{display:flex;align-items:center;gap:14px;flex-shrink:0}
.site-header .brand{flex-shrink:0}
.phone-btn{
  display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem;color:var(--ink-900);
  padding:10px 6px;white-space:nowrap;
}
.phone-btn svg{width:17px;height:17px;fill:var(--blue)}
.phone-btn:hover{color:var(--blue-dark)}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.menu-toggle span{width:24px;height:2px;background:var(--ink-900);display:block;border-radius:2px}

/* Mobile menu panel (toggled by site.js) */
.mobile-menu{display:none;position:absolute;top:var(--nav-h);left:0;right:0;background:#fff;
  border-bottom:1px solid var(--line-soft);box-shadow:var(--shadow-card);padding:8px clamp(20px,4vw,44px) 22px;z-index:99}
.site-header.open .mobile-menu{display:block}
.mobile-menu a{display:block;padding:13px 0;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line-soft)}
.mobile-menu a.sub{padding-left:16px;font-weight:500;font-size:.9rem;color:var(--ink-700)}
.mobile-menu .m-cta{margin-top:16px;width:100%}

/* ============================================================ HERO */
.hero{position:relative;min-height:clamp(560px,82vh,760px);display:flex;align-items:center;color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(31,33,37,.94) 0%,rgba(33,35,39,.78) 38%,rgba(33,35,39,.34) 68%,rgba(33,35,39,.12) 100%);
}
.hero-inner{position:relative;z-index:1;padding:56px 0}
.hero h1{color:#fff;font-size:clamp(2.7rem,6vw,4.4rem);margin:0;letter-spacing:-.02em;max-width:15ch}
.hero-sub{margin-top:22px;font-size:clamp(1.1rem,2vw,1.4rem);font-weight:500;color:#eef1f4;max-width:34ch}
.hero-lede{margin-top:14px;font-size:1.02rem;color:#cfd4d9;max-width:46ch;font-weight:400}
.hero-actions{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px}

/* ============================================================ TRUST BAR */
.trustbar{background:var(--paper-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.trustbar-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:26px 44px;padding:clamp(28px,4vw,40px) 0}
.trust-points{display:flex;flex-wrap:wrap;gap:26px 40px;justify-content:space-between;width:100%}
.trust-point{display:flex;align-items:center;gap:14px}
.trust-point svg{width:32px;height:32px;flex-shrink:0;stroke:var(--blue);stroke-width:1.6;fill:none}
.tp-title{font-size:1rem;font-weight:700;color:var(--ink-900);line-height:1.2}
.tp-sub{font-size:.8rem;color:var(--ink-500);margin-top:2px}
.trust-brands{display:flex;align-items:center;gap:22px}
.trust-brands .lbl{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-500);max-width:92px;line-height:1.4}
.trust-brands img{height:46px;width:auto;opacity:.92}

/* ============================================================ PREFERRED CONTRACTOR */
.preferred{background:var(--paper);padding:clamp(40px,6vw,64px) 0;text-align:center}
.preferred-label{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-500);margin-bottom:26px}
.preferred-logos{display:flex;align-items:center;justify-content:center;gap:clamp(36px,7vw,72px);flex-wrap:wrap}
.preferred-logos img{height:clamp(46px,6vw,62px);width:auto;opacity:.92}
.preferred-cta{margin-top:30px}

/* ============================================================ SERVICES (3-up / 2-up cards) */
.services{background:var(--paper-2);padding:clamp(64px,9vw,104px) 0}
.services .section-head{max-width:900px}
.services .section-head p{max-width:640px}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.service-grid.two{grid-template-columns:repeat(2,1fr);gap:30px}
.service-card{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-card);transition:transform .22s ease,box-shadow .22s ease;display:flex;flex-direction:column;
}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover)}
.service-media{aspect-ratio:16/9;overflow:hidden;position:relative}
.service-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.service-card:hover .service-media img{transform:scale(1.05)}
.service-tag{
  position:absolute;top:14px;left:14px;background:rgba(43,45,49,.86);color:#fff;
  font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:var(--radius);
}
.media-placeholder{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(150deg,#3a3c41,#2b2d31);color:#fff;position:relative}
.media-placeholder svg{width:46px;height:46px;stroke:var(--blue);stroke-width:1.6;fill:none}
.media-placeholder .ph-note{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.service-body{padding:30px 32px 34px;display:flex;flex-direction:column;flex:1}
.service-body h3{font-size:1.55rem;margin-bottom:12px}
.service-body p{font-size:.98rem;color:var(--ink-700)}
.service-points{list-style:none;display:flex;flex-direction:column;gap:11px;margin:20px 0 0}
.service-points li{display:flex;align-items:center;gap:11px;font-size:.94rem;font-weight:600;color:var(--ink-900)}
.service-points svg{width:19px;height:19px;flex:0 0 auto;stroke:var(--blue);stroke-width:2.4;fill:none}
.service-cta{margin-top:26px;align-self:flex-start}
.service-link{margin-top:auto;padding-top:20px;font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-dark);display:inline-flex;align-items:center;gap:8px}
.service-link svg{width:16px;height:16px;transition:transform .2s ease}
.service-card:hover .service-link{color:var(--blue)}
.service-card:hover .service-link svg{transform:translateX(4px)}

/* ============================================================ PROCESS (connected flow) */
.process{position:relative;background:linear-gradient(155deg,#3b3d43 0%,#26282c 58%,#1f2124 100%);color:#fff;padding:clamp(52px,7vw,84px) 0;overflow:hidden}
.process::before{content:"";position:absolute;right:-6%;top:50%;transform:translateY(-50%);
  width:min(52vw,640px);aspect-ratio:991/780;background:url("assets/vw.png") center/contain no-repeat;
  opacity:.14;pointer-events:none;z-index:0}
.process .wrap{position:relative;z-index:1}
.process .section-head{margin-bottom:clamp(30px,4vw,44px)}
.process .section-head h2{color:#fff}
.process .section-head p{color:#c3c7cd}
.flow{position:relative;max-width:900px;margin:0 auto;display:flex;flex-direction:column}
.flow-step{position:relative;display:grid;grid-template-columns:64px 1fr;align-items:start;column-gap:clamp(18px,3vw,30px);padding-bottom:clamp(22px,3vw,34px)}
.flow-rail{position:relative;display:flex;justify-content:center}
.flow-num-box{width:64px;height:64px;border-radius:var(--radius);background:linear-gradient(150deg,var(--blue),var(--blue-dark));
  display:flex;align-items:center;justify-content:center;font-size:1.55rem;font-weight:800;color:#fff;letter-spacing:.02em;
  box-shadow:0 10px 22px -8px rgba(32,144,231,.65);position:relative;z-index:2;font-variant-numeric:tabular-nums}
.flow-step:not(:last-child) .flow-rail::before{content:"";position:absolute;top:64px;bottom:calc(-1 * clamp(22px,3vw,34px));left:50%;transform:translateX(-50%);width:2px;background:linear-gradient(180deg,rgba(32,144,231,.75),rgba(255,255,255,.1))}
.flow-content{padding-top:8px}
.flow-content h3{color:#fff;font-size:1.2rem;margin-bottom:6px}
.flow-content p{color:#c3c7cd;font-size:.95rem;max-width:54ch}

/* ============================================================ ABOUT */
.about{padding:clamp(64px,9vw,104px) 0}
.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,72px);align-items:center}
.about-copy h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:0 0 20px}
.about-copy p{font-size:1.04rem;color:var(--ink-700);margin-bottom:16px}
.about-chips{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 30px}
.chip{display:inline-flex;align-items:center;gap:9px;background:var(--blue-tint);color:var(--ink-900);border:1px solid rgba(32,144,231,.2);
  font-size:.84rem;font-weight:600;padding:9px 15px;border-radius:var(--radius)}
.chip svg{width:15px;height:15px;stroke:var(--blue);stroke-width:2.2;fill:none}
.about-media{position:relative}
.about-media img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-card-hover)}
.about-media .badge{
  position:absolute;left:-18px;bottom:26px;background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:16px 20px;box-shadow:var(--shadow-card);display:flex;align-items:center;gap:13px;
}
.about-media .badge .big{font-size:1.6rem;font-weight:800;color:var(--blue-dark);line-height:1}
.about-media .badge .lbl{font-size:.76rem;font-weight:600;color:var(--ink-700);line-height:1.3;max-width:120px}

/* ============================================================ BEFORE / AFTER SLIDER */
.beforeafter{background:var(--paper-2);padding:clamp(64px,9vw,104px) 0}
.beforeafter .section-head{max-width:640px;margin:0 auto clamp(30px,4vw,44px);text-align:center}
.ba-slider{position:relative;width:100%;max-width:940px;margin:0 auto;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-card-hover);--p:50%;user-select:none;touch-action:none;cursor:ew-resize;background:#222}
.ba-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.ba-before{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba-divider{position:absolute;top:0;bottom:0;left:var(--p);width:3px;background:#fff;transform:translateX(-1.5px);pointer-events:none;box-shadow:0 0 8px rgba(0,0,0,.35);z-index:2}
.ba-handle{position:absolute;top:50%;left:var(--p);transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;
  background:#fff;border:0;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.4);
  cursor:ew-resize;color:var(--ink-900);z-index:3;pointer-events:none}
.ba-handle svg{width:24px;height:24px;stroke:currentColor;stroke-width:2.4;fill:none}
.ba-label{position:absolute;top:16px;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:rgba(32,144,231,.92);padding:7px 13px;border-radius:var(--radius);pointer-events:none;z-index:2}
.ba-label-before{left:16px}
.ba-label-after{right:16px}
.ba-hint{margin:22px auto 0;text-align:center;font-size:.84rem;font-weight:500;color:var(--ink-500);display:flex;align-items:center;justify-content:center;gap:8px}
.ba-hint svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}

/* ============================================================ REVIEWS (GHL widget) */
.reviews{padding:clamp(56px,8vw,88px) 0}
.reviews .section-head{max-width:680px;margin:0 auto clamp(30px,4vw,40px);text-align:center}
.reviews-embed{max-width:1000px;margin:0 auto}
.reviews-embed iframe{width:100%;min-height:420px;border:0;display:block;border-radius:var(--radius)}

/* ============================================================ CTA BANNER */
.cta-band{background:linear-gradient(150deg,#33353a,#2b2d31);color:#fff;padding:clamp(56px,8vw,88px) 0}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
.cta-inner h2{color:#fff;font-size:clamp(1.7rem,3.3vw,2.5rem);max-width:18ch}
.cta-inner p{margin-top:12px;color:#c3c7cd;font-size:1.02rem;max-width:44ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px}

/* ============================================================ FOOTER (Theme Builder) */
.site-footer{background:#25272b;color:#c3c7cd;border-top:3px solid var(--blue)}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px;padding:clamp(52px,7vw,76px) 0 44px}
.f-logo{display:inline-block;margin-bottom:4px}
.site-footer .f-logo img{height:48px;width:auto;max-width:100%;display:block}
.f-desc{margin-top:16px;font-size:.9rem;line-height:1.7;max-width:34ch}
.f-license{margin-top:16px;font-size:.82rem;font-weight:600;color:#e6e8ea;display:inline-flex;align-items:center;gap:8px}
.f-license svg{width:16px;height:16px;stroke:var(--blue);stroke-width:1.8;fill:none;flex-shrink:0}
.f-col h4{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:18px}
.f-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.f-col a{font-size:.9rem;color:#c3c7cd;transition:color .18s ease}
.f-col a:hover{color:var(--blue)}
.f-contact div{font-size:.9rem;margin-bottom:12px;line-height:1.6}
.f-contact .f-phone{font-size:1.25rem;font-weight:800;color:#fff}
.f-contact .f-phone a{color:#fff}
.f-pay{margin-top:16px}
.f-pay .lbl{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500);margin-bottom:8px}
.f-pay .methods{font-size:.84rem;color:#d3d6d9}
.footer-bottom{border-top:1px solid rgba(255,255,255,.09);padding:20px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.8rem;color:var(--ink-500)}
.footer-bottom a:hover{color:var(--blue)}

/* ============================================================ GOOGLE REVIEW BADGE */
.g-review{display:flex;align-items:center;gap:12px}
.g-logo{font-size:1.25rem;font-weight:700;letter-spacing:-.02em}
.g-logo .b{color:#4285F4}.g-logo .r{color:#EA4335}.g-logo .y{color:#FBBC05}.g-logo .g{color:#34A853}
.g-meta{display:flex;flex-direction:column}
.g-stars{display:flex;gap:1px}
.g-stars svg{width:15px;height:15px;fill:#FBBC05}
.g-score{font-size:.76rem;color:var(--ink-500);font-weight:600;margin-top:2px}

/* ============================================================ SERVICE INTRO */
.intro{padding:clamp(56px,8vw,90px) 0}
.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,60px);align-items:center}
.intro-copy h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin-bottom:20px}
.intro-copy p{font-size:1.05rem;color:var(--ink-700);margin-bottom:24px}
.intro-points{list-style:none;display:flex;flex-direction:column;gap:13px}
.intro-points li{display:flex;align-items:center;gap:12px;font-size:.98rem;font-weight:600;color:var(--ink-900)}
.intro-points svg{width:20px;height:20px;stroke:var(--blue);stroke-width:2.4;fill:none;flex-shrink:0}
.intro-google{width:210px;max-width:62%;height:auto;display:block;margin:0 0 16px}
.intro-media .intro-photo{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-card-hover)}
.cover-strip{margin-top:clamp(36px,5vw,54px);padding-top:clamp(28px,4vw,38px);border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.cover-label{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-500)}
.cover-chips{display:flex;flex-wrap:wrap;gap:12px 26px}
.cover-chips span{display:inline-flex;align-items:center;gap:9px;font-size:.94rem;font-weight:600;color:var(--ink-900)}
.cover-chips span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);flex-shrink:0}

/* ============================================================ SHEENS */
.sheens{background:var(--paper-2);padding:clamp(56px,8vw,90px) 0}
.sheen-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.sheen-card{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card)}
.sheen-preview{height:104px;display:flex;align-items:flex-end;padding:16px 20px}
.sheen-preview.matte{background:#9a8f7d}
.sheen-preview.satin{background:linear-gradient(115deg,#6e5f4d 0%,#8a7a63 34%,#e6dbc6 50%,#8a7a63 66%,#6e5f4d 100%)}
.sheen-badge{background:rgba(255,255,255,.94);color:var(--ink-900);font-size:.74rem;font-weight:700;letter-spacing:.04em;padding:7px 13px;border-radius:var(--radius);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.sheen-body{padding:24px 28px 28px}
.sheen-surface{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-dark);margin-bottom:16px}
.sheen-row{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--line-soft)}
.sheen-row:first-of-type{border-top:0;padding-top:2px}
.sheen-k{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500)}
.sheen-v{font-size:.93rem;color:var(--ink-700)}
.sheen-note{margin-top:24px;font-size:.9rem;color:var(--ink-500);text-align:center}

/* ============================================================ COLOR + HOA */
.colorhoa{padding:clamp(56px,8vw,90px) 0}
.ch-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,52px);align-items:start}
.ch-panel h2{font-size:clamp(1.5rem,2.8vw,2rem);margin-bottom:14px}
.ch-panel > p{color:var(--ink-700);margin-bottom:18px}
.swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:0 0 24px}
.swatch{aspect-ratio:1;border-radius:var(--radius);border:1px solid rgba(0,0,0,.07)}
.ch-brands{display:flex;align-items:center;gap:22px;margin:0 0 24px;flex-wrap:wrap}
.ch-brands img{height:36px;width:auto;opacity:.92}
.ch-panel.hoa{background:var(--paper-2);border:1px solid var(--line-soft);border-radius:var(--radius);padding:clamp(24px,3vw,34px)}
.hoa-steps{list-style:none;display:flex;flex-direction:column;gap:16px;margin-top:6px}
.hoa-step{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start}
.hoa-step .n{width:36px;height:36px;border-radius:var(--radius);background:var(--blue);color:#fff;font-weight:800;font-size:.9rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hoa-step h4{font-size:1rem;margin-bottom:3px;color:var(--ink-900)}
.hoa-step p{font-size:.92rem;color:var(--ink-700);margin:0}

/* ============================================================ GALLERY */
.gallery{background:var(--paper-2);padding:clamp(56px,8vw,90px) 0}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-card)}

/* ============================================================ WHY CHOOSE */
.why{padding:clamp(56px,8vw,90px) 0}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.why-card{background:var(--paper);border:1px solid var(--line-soft);border-top:3px solid var(--blue);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-card)}
.why-icon{width:52px;height:52px;border-radius:var(--radius);background:var(--blue-tint);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.why-icon svg{width:26px;height:26px;stroke:var(--blue);stroke-width:1.8;fill:none}
.why-card h3{font-size:1.2rem;margin-bottom:8px}
.why-card p{font-size:.95rem;color:var(--ink-700)}

/* ============================================================ FAQ TEASER */
.faqt{background:var(--paper-2);padding:clamp(56px,8vw,90px) 0}
.faqt-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faqt-item{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius);padding:22px 26px}
.faqt-item h3{font-size:1.05rem;margin-bottom:8px;color:var(--ink-900)}
.faqt-item p{font-size:.95rem;color:var(--ink-700)}
.faqt-more{text-align:center;margin-top:30px}

.sheens .section-head,.gallery .section-head,.why .section-head,.faqt .section-head{max-width:660px;margin-left:auto;margin-right:auto;text-align:center}

/* ============================================================ FULL-BLEED THEME BUILDER HEADER/FOOTER
   Forces the Elementor container in the header + footer locations to span the full
   viewport even if its Content Width is left "Boxed". Our .wrap handles the gutters.
   Scoped to the header/footer locations so page content is never affected. */
.elementor-location-header .e-con,
.elementor-location-footer .e-con{--content-width:100% !important;max-width:100% !important;padding-left:0 !important;padding-right:0 !important}
.elementor-location-header .e-con-inner,
.elementor-location-footer .e-con-inner{max-width:100% !important}
.elementor-location-header .elementor-container,
.elementor-location-footer .elementor-container{max-width:100% !important}

/* ============================================================ RESPONSIVE */
@media (max-width:960px){
  .nav,.phone-btn{display:none}
  .menu-toggle{display:flex}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .ch-grid{grid-template-columns:1fr;gap:36px}
  .intro-grid{grid-template-columns:1fr;gap:32px}
  .why-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .about-media .badge{left:16px}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:620px){
  .service-grid,.service-grid.two{grid-template-columns:1fr}
  .sheen-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .flow-step{grid-template-columns:54px 1fr;column-gap:16px}
  .flow-num-box{width:54px;height:54px;font-size:1.3rem}
  .flow-step:not(:last-child) .flow-rail::before{top:54px}
  .trustbar-inner{flex-direction:column;align-items:flex-start}
  .hero-actions .btn{flex:1}
  .footer-top{grid-template-columns:1fr}
  .cta-actions{width:100%}
  .cta-actions .btn{flex:1}
}
















/* ============================================================
   ELEMENTOR WIDGET COMPANION STYLES  ·  wrapper-independent (v5)
   ------------------------------------------------------------
   Styles native widget output (heading / text-editor / button) that
   would otherwise fall back to Elementor's global-color defaults
   (blue headings, green buttons).

   Specificity is bumped by DOUBLING the widget's own class
   (".vw-x.vw-x .child" = 0,3,0) instead of scoping under an Elementor
   wrapper (.elementor / .elementor-widget). The wrapper classes are
   NOT reliably present inside the Elementor editor preview, which is
   why earlier versions showed defaults while editing. The vw- class
   IS always on the widget in both the editor and the front end, so
   this matches in both — the editor preview now equals the live page.

   Container-level look (backgrounds, padding, boxed width, gaps, card
   surface, hero overlay, row direction/widths) is set as NATIVE
   container settings in the template JSON, not here.
   ============================================================ */

/* ---- Buttons ---- */
.vw-btn.vw-btn .elementor-button{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font);font-weight:700;font-size:.92rem;letter-spacing:.01em;
  padding:15px 28px;border-radius:var(--radius);border:2px solid transparent;line-height:1;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease;
}
.vw-btn-primary.vw-btn-primary .elementor-button{background:var(--burgundy) !important;color:#fff !important;box-shadow:0 10px 24px -10px rgba(108,19,41,.7)}
.vw-btn-primary.vw-btn-primary .elementor-button:hover{background:var(--burgundy-hover) !important;transform:translateY(-2px)}
.vw-btn-ghost.vw-btn-ghost .elementor-button{background:transparent !important;color:#fff !important;border-color:rgba(255,255,255,.5) !important}
.vw-btn-ghost.vw-btn-ghost .elementor-button:hover{background:rgba(255,255,255,.1) !important;border-color:#fff !important;transform:translateY(-2px)}
.vw-btn-blue.vw-btn-blue .elementor-button{background:var(--blue) !important;color:#fff !important}
.vw-btn-blue.vw-btn-blue .elementor-button:hover{background:var(--blue-dark) !important;transform:translateY(-2px)}
.vw-btn-outline.vw-btn-outline .elementor-button{background:transparent !important;color:var(--ink-900) !important;border-color:var(--line) !important}
.vw-btn-outline.vw-btn-outline .elementor-button:hover{border-color:var(--ink-900) !important;transform:translateY(-2px)}

/* ---- Headings + body text (override Elementor global colors) ---- */
.vw-hero-title.vw-hero-title .elementor-heading-title{color:#fff !important;font-size:clamp(2.7rem,6vw,4.4rem);font-weight:800;line-height:1.08;letter-spacing:-.02em;max-width:15ch}
.vw-hero-sub.vw-hero-sub p{margin-top:22px;font-size:clamp(1.1rem,2vw,1.4rem);font-weight:500;color:#eef1f4 !important;max-width:34ch;line-height:1.4}
.vw-hero-lede.vw-hero-lede p{margin-top:14px;font-size:1.02rem;color:#cfd4d9 !important;max-width:46ch;line-height:1.65}
.vw-section-title.vw-section-title .elementor-heading-title{font-size:clamp(1.9rem,3.6vw,2.75rem);font-weight:800;line-height:1.08;letter-spacing:-.01em;color:var(--ink-900) !important}
.vw-section-sub.vw-section-sub p{margin-top:16px;font-size:1.05rem;color:var(--ink-700) !important;line-height:1.65}
.vw-tp-title.vw-tp-title .elementor-heading-title{font-size:1rem;font-weight:700;color:var(--ink-900) !important;line-height:1.2}
.vw-tp-sub.vw-tp-sub p{font-size:.8rem;color:var(--ink-500) !important;margin-top:2px}
.vw-preferred-label.vw-preferred-label p{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-500) !important}
.vw-service-name.vw-service-name .elementor-heading-title{font-size:1.55rem;font-weight:800;color:var(--ink-900) !important;line-height:1.1;margin-bottom:12px}
.vw-service-desc.vw-service-desc p{font-size:.98rem;color:var(--ink-700) !important;line-height:1.6}
.vw-about-title.vw-about-title .elementor-heading-title{font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:800;color:var(--ink-900) !important;line-height:1.08;margin-bottom:20px}
.vw-about-p.vw-about-p p{font-size:1.04rem;color:var(--ink-700) !important;line-height:1.65;margin-bottom:16px}
.vw-cta-title.vw-cta-title .elementor-heading-title{color:#fff !important;font-size:clamp(1.7rem,3.3vw,2.5rem);font-weight:800;line-height:1.08;max-width:18ch}
.vw-cta-p.vw-cta-p p{margin-top:12px;color:#c3c7cd !important;font-size:1.02rem;max-width:44ch;line-height:1.6}

/* ---- Service card "link" (Button widget styled as a text link + arrow) ---- */
.vw-service-link.vw-service-link{margin-top:auto;padding-top:20px}
.vw-service-link.vw-service-link .elementor-button{background:none !important;border:0;box-shadow:none;padding:0;color:var(--blue-dark) !important;font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.vw-service-link.vw-service-link .elementor-button::after{content:"\2192";margin-left:8px}

/* ---- Image widgets: size to their role (logos fixed height, card/photo fill) ---- */
.vw-preferred-logo.vw-preferred-logo img{height:clamp(46px,6vw,62px) !important;width:auto !important;opacity:.92;display:block}
.vw-service-media.vw-service-media img{width:100% !important;aspect-ratio:16/9;object-fit:cover !important;display:block}
.vw-about-img.vw-about-img img{width:100% !important;border-radius:var(--radius);box-shadow:var(--shadow-card-hover);display:block}

/* ---- Inner content of HTML widgets (no Elementor default to beat → single class) ---- */
.vw-tp-icon svg{width:32px;height:32px;flex-shrink:0;stroke:var(--blue);stroke-width:1.6;fill:none}
.vw-chip-row{display:flex;flex-wrap:wrap;gap:12px}
.vw-service-placeholder{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(150deg,#3a3c41,#2b2d31) !important;color:#fff !important}
.vw-service-placeholder svg{width:46px;height:46px;stroke:var(--blue);stroke-width:1.6;fill:none}
.vw-service-placeholder span{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55) !important}
.vw-about-badge .badge{background:#fff !important;border:1px solid var(--line-soft);border-radius:var(--radius);padding:16px 20px;box-shadow:var(--shadow-card);display:flex;align-items:center;gap:13px}
.vw-about-badge .big{font-size:1.6rem;font-weight:800;color:var(--blue-dark) !important;line-height:1}
.vw-about-badge .lbl{font-size:.76rem;font-weight:600;color:var(--ink-700) !important;line-height:1.3;max-width:120px}

/* ============================================================
   EXTERIOR PAGE — sheens / color+HOA / gallery widget text
   (container look is native settings; these style widget output) */
.vw-gallery-img.vw-gallery-img img{width:100% !important;aspect-ratio:4/3;object-fit:cover !important;border-radius:var(--radius);box-shadow:var(--shadow-card);display:block}

.vw-sheen-surface.vw-sheen-surface p{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-dark) !important;margin:0 0 4px}
.vw-sheen-k.vw-sheen-k{flex:0 0 110px}
.vw-sheen-k.vw-sheen-k p{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500) !important;margin:0}
.vw-sheen-v.vw-sheen-v{flex:1 1 0}
.vw-sheen-v.vw-sheen-v p{font-size:.93rem;color:var(--ink-700) !important;margin:0}
.vw-sheen-badge.vw-sheen-badge .elementor-heading-title{display:inline-block;background:rgba(255,255,255,.94);color:var(--ink-900) !important;font-size:.74rem;font-weight:700;letter-spacing:.04em;padding:7px 13px;border-radius:var(--radius);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.vw-sheen-note.vw-sheen-note p{font-size:.9rem;color:var(--ink-500) !important;text-align:center}

.vw-ch-title.vw-ch-title .elementor-heading-title{font-size:clamp(1.5rem,2.8vw,2rem);font-weight:800;color:var(--ink-900) !important;margin-bottom:14px}
.vw-hoa-num.vw-hoa-num .elementor-heading-title{width:36px;height:36px;border-radius:var(--radius);background:var(--blue) !important;color:#fff !important;font-weight:800;font-size:.9rem;display:flex;align-items:center;justify-content:center}
.vw-hoa-title.vw-hoa-title .elementor-heading-title{font-size:1rem;font-weight:800;color:var(--ink-900) !important;margin-bottom:3px}

.vw-hoa-num.vw-hoa-num{flex:0 0 36px !important;width:36px !important;max-width:36px !important}

/* HOA step row must never wrap the number onto its own line (container class is stripped on import, so target by contents) */
.e-con:has(> .vw-hoa-num),.e-con:has(.vw-hoa-num){flex-wrap:nowrap !important}

/* ============================================================
   BLOG SINGLE-POST TEMPLATE
   ============================================================ */
.vw-blog-title.vw-blog-title .elementor-heading-title{color:#fff !important;font-size:clamp(1.9rem,4vw,3rem);font-weight:800;line-height:1.14;letter-spacing:-.01em;max-width:22ch;margin-inline:auto;text-align:center}
.vw-blog-featured.vw-blog-featured img{width:100% !important;border-radius:var(--radius);box-shadow:var(--shadow-card);display:block;margin-bottom:30px}

/* Table of contents (left rail) */
.vw-blog-toc.vw-blog-toc{background:var(--paper-2);border:1px solid var(--line-soft);border-radius:var(--radius);padding:18px 20px}
.vw-blog-toc .elementor-toc__header-title{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-500)}
.vw-blog-toc .elementor-toc__list-item-text{color:var(--ink-700);font-size:.92rem;text-decoration:none}
.vw-blog-toc .elementor-toc__list-item-text:hover{color:var(--blue-dark)}
.vw-blog-toc .elementor-item-active>.elementor-toc__list-item-text{color:var(--blue-dark);font-weight:700}
@media(min-width:1025px){.vw-blog-toc.vw-blog-toc{position:sticky;top:96px}}

/* Post content prose */
.vw-blog-content h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;color:var(--ink-900);line-height:1.15;margin:1.8em 0 .5em;scroll-margin-top:96px}
.vw-blog-content h3{font-size:1.25rem;font-weight:800;color:var(--ink-900);margin:1.5em 0 .4em;scroll-margin-top:96px}
.vw-blog-content p{margin:0 0 1.2em;font-size:1.06rem;line-height:1.8;color:var(--ink-700)}
.vw-blog-content ul,.vw-blog-content ol{margin:0 0 1.3em 1.3em;font-size:1.06rem;line-height:1.8;color:var(--ink-700)}
.vw-blog-content li{margin:.4em 0}
.vw-blog-content a{color:var(--blue-dark);text-decoration:underline}
.vw-blog-content img{max-width:100%;height:auto;border-radius:var(--radius);margin:1.5em 0}
.vw-blog-content blockquote{border-left:3px solid var(--blue);padding-left:1.1em;margin:1.5em 0;color:var(--ink-900);font-style:italic}
.vw-blog-content strong{color:var(--ink-900)}

/* ============================================================
   BLOG LIST / ARCHIVE — Posts widget cards
   ============================================================ */
.vw-postgrid .elementor-post{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);transition:transform .22s ease,box-shadow .22s ease;display:flex;flex-direction:column}
.vw-postgrid .elementor-post:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover)}
.vw-postgrid .elementor-post__thumbnail{aspect-ratio:16/9;overflow:hidden;margin:0;position:relative}
.vw-postgrid .elementor-post__thumbnail__link{display:block;position:absolute;inset:0}
.vw-postgrid .elementor-post__thumbnail img{width:100% !important;height:100% !important;object-fit:cover !important;display:block}
.vw-postgrid .elementor-post__text{padding:22px 26px 26px;display:flex;flex-direction:column;flex:1}
.vw-postgrid .elementor-post__meta-data{font-size:.76rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-500);margin-bottom:10px}
.vw-postgrid .elementor-post__title{font-size:1.2rem;font-weight:800;line-height:1.22;margin:0 0 10px}
.vw-postgrid .elementor-post__title a{color:var(--ink-900);text-decoration:none}
.vw-postgrid .elementor-post__title a:hover{color:var(--blue-dark)}
.vw-postgrid .elementor-post__excerpt p{font-size:.95rem;color:var(--ink-700);line-height:1.6;margin:0}
.vw-postgrid .elementor-post__read-more{margin-top:16px;color:var(--blue-dark) !important;font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;align-self:flex-start}
.vw-postgrid .elementor-post__read-more:hover{color:var(--blue) !important}
.vw-postgrid .elementor-pagination .page-numbers{color:var(--ink-700);font-weight:600;padding:6px 12px;border-radius:var(--radius)}
.vw-postgrid .elementor-pagination .page-numbers.current{background:var(--blue);color:#fff}