/* =========================================================
   SERVER-SAFE BASE CSS
   Rebuilt locally so the site no longer depends on cached/live CSS.
   ========================================================= */

:root{
  --navy:#07111F;
  --navy2:#0B1828;
  --dark:#050B14;
  --ink:#0c1320;
  --gold:#C8A86B;
  --gold2:#E0C078;
  --pink:#E22B79;
  --white:#ffffff;
  --muted:rgba(255,255,255,.68);
  --line:rgba(255,255,255,.12);
  --card:rgba(255,255,255,.055);
  --shadow:0 30px 90px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Nunito Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#fff;
  background:var(--navy);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
section{position:relative;z-index:2;padding:110px 0}
.container,.nav-inner,.hero-inner{
  width:min(1180px,calc(100% - 40px));
  margin-inline:auto;
}
::selection{background:var(--gold);color:#07111F}

/* NAV */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  padding:16px 0;
  background:rgba(7,17,31,.72);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-logo{display:flex;align-items:center;gap:10px}
.site-logo{max-height:46px;width:auto}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.nav-links a{font:800 12px/1 "Urbanist",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.72)}
.nav-links a:hover{color:var(--gold)}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-phone{font:900 13px/1 "Urbanist",system-ui,sans-serif;color:#fff;white-space:nowrap}
.hamburger{display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);border-radius:12px;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer}
.hamburger span{width:20px;height:2px;background:#fff;border-radius:2px}

/* Drawer */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.58);z-index:1200;opacity:0;visibility:hidden;transition:.25s ease}
.drawer-overlay.open,.drawer-overlay.active{opacity:1;visibility:visible}
.drawer{
  position:fixed;inset:0 auto 0 0;width:min(380px,88vw);
  background:#07111F;z-index:1300;
  transform:translateX(-100%);transition:transform .3s ease;
  padding:26px;box-shadow:30px 0 80px rgba(0,0,0,.35);
  border-right:1px solid rgba(200,168,107,.22);
}
.drawer.open,.drawer.active{transform:translateX(0)}
.drawer-logo{margin-bottom:28px}
.drawer-close{position:absolute;right:20px;top:20px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
.drawer-links{display:grid;gap:8px;margin-top:34px}
.drawer-links a{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08);font:900 20px/1 "Urbanist",system-ui,sans-serif}
.drawer-links .num{color:var(--gold);font-size:12px;margin-top:4px}
.drawer-btns{margin-top:30px}.drawer-phone{margin-bottom:16px;color:var(--gold);font-weight:900}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:15px 22px;border-radius:999px;
  border:1px solid rgba(200,168,107,.38);
  font:900 12px/1 "Urbanist",system-ui,sans-serif;
  text-transform:uppercase;letter-spacing:.07em;
  cursor:pointer;transition:.25s ease;
}
.btn-pink,.btn-gold{background:var(--gold);color:#07111F}
.btn-dark,.btn-outline{background:rgba(255,255,255,.045);color:#fff}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,.22)}

/* HERO */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:120px 0 80px;
  overflow:hidden;
}
.hero-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(390px,.78fr);
  gap:72px;
  align-items:center;
}
.hero-copy{position:relative;z-index:30;max-width:760px}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 16px;border-radius:999px;
  border:1px solid rgba(200,168,107,.34);
  color:var(--gold);font:900 11px/1 "Urbanist",system-ui,sans-serif;
  text-transform:uppercase;letter-spacing:.12em;
}
.hero-h1{
  margin:26px 0 24px;
  font-family:"Urbanist",system-ui,sans-serif;
  font-weight:900;
  font-size:clamp(56px,5.85vw,104px);
  line-height:.89;
  letter-spacing:-.075em;
}
.hero-h1 span,.hero-h1 em{color:var(--gold);font-style:normal}
.hero-sub{
  color:rgba(255,255,255,.76);
  font-size:clamp(16px,1.12vw,20px);
  line-height:1.68;
  max-width:660px;
  margin:0 0 30px;
}
.hero-btns{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero-proof{margin-top:22px;color:rgba(255,255,255,.6);font-size:13px}
.hero-image-panel{position:relative;z-index:30;width:100%;max-width:500px;justify-self:center}
.hero-image-card{overflow:hidden;border-radius:30px;border:1px solid rgba(200,168,107,.22);box-shadow:var(--shadow);background:rgba(255,255,255,.04)}
.hero-image-wrap{border-radius:30px;overflow:hidden;margin:0}
.hero-main-image{width:100%;height:auto}
.hero-project-stats,.hero-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:18px;
}
.stat{
  padding:14px 10px;text-align:center;border-radius:16px;
  background:rgba(7,17,31,.58);
  border:1px solid rgba(200,168,107,.18);
  backdrop-filter:blur(12px);
}
.stat-n{display:block;color:var(--gold);font:900 28px/1 "Urbanist",system-ui,sans-serif}
.stat-l{display:block;margin-top:5px;color:rgba(255,255,255,.62);font:800 11px/1.2 "Urbanist",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.05em}

/* Hero decorative layers should never cover content after hero */
.hero-sky,.hero-sun,.hero-water,.hero-sky-reflet,.hero-base,.hero-homes,.hero-boat,.hero-overlay{pointer-events:none}

/* Sections */
.section-head{max-width:850px;margin:0 auto 56px;text-align:center}
.section-kicker,.eyebrow,.kicker{
  color:var(--gold);
  font:900 12px/1 "Urbanist",system-ui,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:16px;
}
.section-title,h2{
  margin:0;
  font:900 clamp(38px,4.8vw,76px)/.95 "Urbanist",system-ui,sans-serif;
  letter-spacing:-.055em;
}
.section-sub,.section-desc{
  margin:18px auto 0;
  max-width:760px;
  color:rgba(255,255,255,.68);
  font-size:17px;line-height:1.7;
}

/* Generic grids/cards */
.grid,.service-grid,.services-grid,.cards-grid,.process-grid,.blog-grid,.testi-grid,.contractor-review-grid,.faq-grid{
  display:grid;
  gap:22px;
}
.service-grid,.services-grid,.cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.process-grid,.blog-grid,.contractor-review-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.faq-grid{grid-template-columns:1fr 1fr}
.card,.service-card,.process-card,.blog-card,.testi-card,.faq-item,.audit-card,.quote-card{
  position:relative;
  border:1px solid rgba(255,255,255,.11);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  box-shadow:0 24px 70px rgba(0,0,0,.18);
  padding:28px;
  overflow:hidden;
}
.card:hover,.service-card:hover,.blog-card:hover,.testi-card:hover{border-color:rgba(200,168,107,.28)}
.card h3,.service-card h3,.process-card h3,.blog-card h3{
  margin:0 0 12px;
  font:900 26px/1.05 "Urbanist",system-ui,sans-serif;
  letter-spacing:-.03em;
}
.card p,.service-card p,.process-card p,.blog-card p,.faq-item p,.testi-quote{
  color:rgba(255,255,255,.68);
  line-height:1.68;
}
.num,.step-num{color:var(--gold);font-weight:900}

/* Portfolio */
.port-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:34px;
}
.port-item{
  position:relative;
  min-width:0;
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.035);
  box-shadow:0 26px 75px rgba(0,0,0,.22);
}
.port-screen{width:100%;aspect-ratio:16/9;overflow:hidden;background:#07101d}
.port-img{width:100%;height:100%;object-fit:cover}
.port-base,.port-over{padding:20px}
.port-base-name,.port-over-name{font:900 24px/1 "Urbanist",system-ui,sans-serif;letter-spacing:-.03em}
.port-base-cat{margin-top:6px;color:rgba(255,255,255,.62);font-size:14px}
.port-over{
  position:absolute;inset:auto 0 0 0;
  background:linear-gradient(to top,rgba(2,8,18,.92),rgba(2,8,18,.10));
  opacity:0;transition:.25s ease;
}
.port-item:hover .port-over{opacity:1}
.port-tags,.port-featured-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ptag{display:inline-flex;padding:7px 10px;border-radius:999px;background:rgba(200,168,107,.1);border:1px solid rgba(200,168,107,.22);color:#fff;font-size:12px;font-weight:800}
.port-click{position:absolute;inset:0;z-index:8}
.port-link{display:inline-block;margin-top:14px;color:var(--gold);font-weight:900}

/* Marquee */
.marquee-wrap{overflow:hidden;border-top:1px solid rgba(200,168,107,.18);border-bottom:1px solid rgba(200,168,107,.18);background:rgba(0,0,0,.16);padding:14px 0}
.marquee{white-space:nowrap;animation:marquee 28s linear infinite;color:rgba(255,255,255,.72);font:900 12px/1 "Urbanist",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.12em}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Forms */
form{display:grid;gap:14px}
input,textarea,select{
  width:100%;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  background:rgba(255,255,255,.055);
  color:#fff;
  padding:15px 16px;
  outline:none;
}
textarea{min-height:130px;resize:vertical}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.45)}
label{font-weight:900;color:#fff}

/* FAQ */
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;font:900 20px/1.2 "Urbanist",system-ui,sans-serif}
.faq-a,.faq-answer{display:none;margin-top:12px;color:rgba(255,255,255,.68);line-height:1.65}
.faq-item.open .faq-a,.faq-item.open .faq-answer{display:block}

/* Footer */
footer,.footer{position:relative;z-index:5;background:#050B14;border-top:1px solid rgba(255,255,255,.08);padding:50px 0;color:rgba(255,255,255,.68)}

/* Animation fallback */
.reveal,.reveal.d1,.reveal.d2,.reveal.d3,.reveal.d4,.reveal.d5{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}

/* Responsive */
@media (max-width:1100px){
  .nav-links,.nav-phone,.nav-right .btn{display:none}
  .hamburger{display:flex}
  .hero-inner{grid-template-columns:1fr;gap:38px}
  .hero-image-panel{justify-self:start}
}
@media (max-width:900px){
  section{padding:82px 0}
  .service-grid,.services-grid,.cards-grid,.process-grid,.blog-grid,.contractor-review-grid,.faq-grid,.port-grid{grid-template-columns:1fr}
  .hero-project-stats,.hero-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .container,.nav-inner,.hero-inner{width:min(100% - 28px,1180px)}
  .hero{padding-top:90px}
  .hero-h1{font-size:clamp(44px,13vw,64px)}
  .hero-btns .btn{width:100%}
  .site-logo{max-height:38px}
  .card,.service-card,.process-card,.blog-card,.testi-card,.faq-item,.audit-card,.quote-card{padding:22px;border-radius:20px}
}


/* =========================================================
   ORIGINAL EXTRACTED CUSTOM CSS
   ========================================================= */

/* Extracted inline CSS from original index.html */

/* Premium static hero image replacement */
.hero-image-panel{position:relative;perspective:1100px;}
.hero-image-card{position:relative;overflow:hidden;border:1px solid rgba(200,168,107,.26);border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035));box-shadow:0 32px 90px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.05) inset;backdrop-filter:blur(18px);transform-style:preserve-3d;transition:transform .45s ease, box-shadow .45s ease;}
.hero-image-card:before{content:"";position:absolute;inset:-2px;background:radial-gradient(circle at 20% 0%,rgba(200,168,107,.28),transparent 34%),radial-gradient(circle at 100% 30%,rgba(226,43,121,.20),transparent 32%),linear-gradient(135deg,rgba(255,255,255,.12),transparent 42%);pointer-events:none;z-index:1;}
.hero-image-top{position:relative;z-index:3;border-bottom:1px solid rgba(255,255,255,.09);background:rgba(4,10,22,.42);}
.hero-image-wrap{position:relative;z-index:2;margin:16px;border-radius:24px;overflow:hidden;min-height:420px;background:#07101d;box-shadow:0 22px 50px rgba(0,0,0,.28);}
.hero-main-image{display:block;width:100%;height:100%;min-height:420px;object-fit:cover;object-position:center;transform:scale(1.012);transition:transform 1.1s cubic-bezier(.2,.8,.2,1),filter .6s ease;filter:saturate(1.03) contrast(1.02);}
.hero-image-card:hover .hero-main-image{transform:scale(1.045);}
.hero-live-pill{position:absolute;top:18px;left:18px;display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(3,8,18,.62);color:#fff;font:800 11px/1 Urbanist,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(14px);box-shadow:0 12px 30px rgba(0,0,0,.25);}
.hero-live-pill span{width:8px;height:8px;border-radius:50%;background:#C8A86B;box-shadow:0 0 0 6px rgba(200,168,107,.18);}
.hero-float-card{position:absolute;max-width:210px;padding:14px 16px;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(2,7,16,.70);backdrop-filter:blur(16px);box-shadow:0 18px 42px rgba(0,0,0,.28);color:#fff;}
.hero-float-card strong{display:block;font:800 14px/1.2 Urbanist,system-ui,sans-serif;margin-bottom:4px;}
.hero-float-card small{display:block;color:rgba(255,255,255,.72);font:600 12px/1.35 Nunito Sans,system-ui,sans-serif;}
.hero-float-card-one{right:18px;top:78px;animation:heroFloat 5.5s ease-in-out infinite;}
.hero-float-card-two{left:18px;bottom:18px;animation:heroFloat 6.5s ease-in-out infinite reverse;}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hero-image-footer{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 22px 22px;color:#fff;}
.hero-image-footer strong{display:block;font:900 18px/1.15 Urbanist,system-ui,sans-serif;letter-spacing:-.02em;}
.hero-image-footer small{display:block;margin-top:4px;color:rgba(255,255,255,.62);font:600 13px/1.35 Nunito Sans,system-ui,sans-serif;}
.hero-image-arrow{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(200,168,107,.35);background:rgba(200,168,107,.12);color:#C8A86B;font-size:20px;box-shadow:0 0 28px rgba(200,168,107,.12) inset;}
@media (max-width:980px){.hero-image-wrap{min-height:330px}.hero-main-image{min-height:330px}.hero-float-card{display:none}.hero-image-footer strong{font-size:16px}}
@media (max-width:560px){.hero-image-wrap{margin:10px;border-radius:18px;min-height:260px}.hero-main-image{min-height:260px}.hero-live-pill{top:12px;left:12px;font-size:9px;padding:8px 10px}.hero-image-footer{padding:0 16px 16px}.hero-image-card{border-radius:22px}}
@media (prefers-reduced-motion:reduce){.hero-float-card{animation:none}.hero-main-image,.hero-image-card{transition:none}}


/* Clean 2-column portfolio layout + full-width image previews */
.port-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:34px !important;
  align-items:stretch !important;
}
.port-item{
  min-width:0 !important;
}
.port-screen{
  width:100% !important;
  aspect-ratio:16/9 !important;
  height:auto !important;
  min-height:0 !important;
  overflow:hidden !important;
  border-radius:24px !important;
  background:#07101d !important;
}
.port-screen .port-img,
.port-img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}
.port-item.service-feature .port-screen .port-img,
.port-item.feat .port-screen .port-img{
  object-fit:cover !important;
  object-position:center center !important;
}
.port-screen--iframe{
  aspect-ratio:16/9 !important;
}
.port-iframe{
  width:100% !important;
  height:100% !important;
  transform:none !important;
}
@media (max-width:900px){
  .port-grid{grid-template-columns:1fr !important;gap:26px !important;}
  .port-screen{border-radius:20px !important;}
}


/* Featured portfolio piece - full width, premium but subtle */
.port-featured{
  grid-column:1 / -1 !important;
  position:relative !important;
  min-height:0 !important;
  border:1px solid rgba(200,168,107,.34) !important;
  border-radius:30px !important;
  overflow:hidden !important;
  background:linear-gradient(145deg,rgba(200,168,107,.105),rgba(255,255,255,.035)) !important;
  box-shadow:0 32px 90px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.035) !important;
}
.port-featured:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:30px;
  background:radial-gradient(circle at 18% 0%,rgba(200,168,107,.22),transparent 34%),radial-gradient(circle at 90% 18%,rgba(255,255,255,.08),transparent 30%);
  pointer-events:none;
  z-index:2;
}
.port-featured .port-screen{
  aspect-ratio:21/9 !important;
  border-radius:30px !important;
}
.port-featured .port-img{
  filter:saturate(1.04) contrast(1.02) brightness(.86) !important;
  transition:transform .75s cubic-bezier(.2,.8,.2,1), filter .55s ease !important;
}
.port-featured:hover .port-img{
  transform:scale(1.035) !important;
  filter:saturate(1.08) contrast(1.04) brightness(.78) !important;
}
.port-featured-badge{
  position:absolute;
  top:22px;
  left:22px;
  z-index:5;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(200,168,107,.45);
  background:rgba(5,10,21,.72);
  color:var(--gold);
  backdrop-filter:blur(14px);
  font:900 11px/1 Urbanist,system-ui,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}
.port-featured-badge:before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 6px rgba(200,168,107,.14);
}
.port-featured-content{
  position:absolute;
  z-index:5;
  left:26px;
  right:26px;
  bottom:26px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding:24px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  background:linear-gradient(135deg,rgba(3,8,18,.82),rgba(3,8,18,.48));
  backdrop-filter:blur(18px);
  box-shadow:0 20px 55px rgba(0,0,0,.32);
}
.port-featured-kicker{
  color:rgba(255,255,255,.62);
  font:800 12px/1 Urbanist,system-ui,sans-serif;
  letter-spacing:.11em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.port-featured-title{
  color:#fff;
  font:900 clamp(28px,3vw,48px)/.94 Urbanist,system-ui,sans-serif;
  letter-spacing:-.045em;
  margin-bottom:12px;
}
.port-featured-desc{
  max-width:720px;
  color:rgba(255,255,255,.72);
  font:600 15px/1.65 Nunito Sans,system-ui,sans-serif;
}
.port-featured-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}
.port-featured-tags .ptag{
  border-color:rgba(200,168,107,.28) !important;
  background:rgba(200,168,107,.10) !important;
}
.port-featured-action{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:180px;
  padding:15px 18px;
  border-radius:999px;
  background:var(--gold);
  color:#07101d;
  font:900 12px/1 Urbanist,system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:.08em;
}
@media (max-width:900px){
  .port-featured .port-screen{aspect-ratio:16/12 !important;}
  .port-featured-content{position:relative;left:auto;right:auto;bottom:auto;margin:14px;display:block;padding:20px;}
  .port-featured-action{margin-top:18px;width:100%;}
}
@media (max-width:560px){
  .port-featured,.port-featured:before,.port-featured .port-screen{border-radius:22px !important;}
  .port-featured-badge{top:14px;left:14px;font-size:9px;padding:8px 10px;}
  .port-featured-content{border-radius:18px;margin:10px;padding:18px;}
}


/* Contractor hero refresh - tighter headline, bigger proof image */
.hero{overflow:hidden;}
.hero-inner{grid-template-columns:minmax(0, .88fr) minmax(520px, 1.12fr) !important;gap:62px !important;align-items:center !important;}
.hero-copy{max-width:680px !important;}
.hero-badge{margin-bottom:22px !important;}
.hero-h1{font-size:clamp(58px, 6.1vw, 98px) !important;line-height:.92 !important;letter-spacing:-.075em !important;max-width:760px !important;margin-bottom:24px !important;}
.hero-h1 em{display:inline !important;}
.hero-h1 span{display:inline-block !important;}
.hero-sub{font-size:clamp(17px,1.25vw,20px) !important;line-height:1.68 !important;max-width:620px !important;margin-bottom:30px !important;}
.hero-btns{gap:14px !important;flex-wrap:wrap !important;}
.hero-proof{margin-top:22px !important;}
.hero-image-panel{width:100% !important;}
.hero-image-card{border-radius:32px !important;}
.hero-image-wrap{min-height:520px !important;margin:18px !important;}
.hero-main-image{min-height:520px !important;object-fit:cover !important;object-position:center center !important;}
.hero-float-card-one{right:20px !important;top:86px !important;}
.hero-float-card-two{left:22px !important;bottom:28px !important;}
.hero-image-footer{padding:0 24px 24px !important;}
.hero-stats{margin-top:48px !important;}
@media (max-width:1100px){.hero-inner{grid-template-columns:1fr !important;gap:42px !important}.hero-copy{max-width:820px !important}.hero-h1{font-size:clamp(52px,10vw,82px) !important}.hero-image-wrap,.hero-main-image{min-height:430px !important}}
@media (max-width:640px){.hero-h1{font-size:clamp(44px,13vw,64px) !important;letter-spacing:-.065em !important}.hero-sub{font-size:16px !important}.hero-image-wrap,.hero-main-image{min-height:300px !important}.hero-stats{grid-template-columns:repeat(2,1fr) !important}}


/* Clean hero mockup - no floating overlays */
.hero-image-card.clean-hero-card{
  padding:0 !important;
  border:0 !important;
  border-radius:28px !important;
  background:transparent !important;
  box-shadow:0 34px 90px rgba(0,0,0,.34) !important;
  backdrop-filter:none !important;
  overflow:hidden !important;
  transform:none !important;
}
.hero-image-card.clean-hero-card:before,
.hero-image-card.clean-hero-card .hero-image-top,
.hero-image-card.clean-hero-card .hero-live-pill,
.hero-image-card.clean-hero-card .hero-float-card,
.hero-image-card.clean-hero-card .hero-image-footer{
  display:none !important;
}
.clean-hero-card .hero-image-wrap{
  margin:0 !important;
  border-radius:28px !important;
  min-height:auto !important;
  background:transparent !important;
  box-shadow:none !important;
}
.clean-hero-card .hero-main-image{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
}
.hero-image-card.clean-hero-card:hover .hero-main-image{transform:none !important;}
@media (max-width:1100px){.clean-hero-card .hero-main-image{min-height:0 !important}}
@media (max-width:640px){.hero-image-card.clean-hero-card,.clean-hero-card .hero-image-wrap{border-radius:20px !important}}

/* Trustpilot review link */
.trustpilot-cta{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-top:34px;padding:20px 22px;border:1px solid rgba(0,182,122,.32);
  border-radius:18px;background:rgba(0,182,122,.07);color:#fff;text-align:center;
}
.trustpilot-cta strong{font:900 17px/1.2 Urbanist,system-ui,sans-serif;}
.trustpilot-cta span{color:rgba(255,255,255,.72);font:700 13px/1.4 Nunito Sans,system-ui,sans-serif;}
.trustpilot-cta a{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:999px;background:#00b67a;color:#07101d !important;font:900 12px/1 Urbanist,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;}



/* Clean vertical contractor hero - tighter copy and portrait project image */
.hero-inner{
  grid-template-columns:minmax(0,1fr) minmax(320px,430px) !important;
  gap:72px !important;
  align-items:center !important;
}
.hero-copy{max-width:650px !important;}
.hero-badge{margin-bottom:24px !important;}
.hero-h1{
  font-size:clamp(58px,5.15vw,86px) !important;
  line-height:.94 !important;
  letter-spacing:-.066em !important;
  max-width:650px !important;
  margin-bottom:28px !important;
}
.hero-h1 em{display:inline !important;color:inherit !important;font-style:normal !important;}
.hero-h1 span{display:inline-block !important;color:var(--gold) !important;}
.hero-sub{
  font-size:clamp(17px,1.15vw,19px) !important;
  line-height:1.72 !important;
  max-width:590px !important;
  margin-bottom:32px !important;
}
.hero-image-panel{max-width:430px !important;justify-self:end !important;width:100% !important;}
.hero-image-card.clean-hero-card{
  border-radius:34px !important;
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025)) !important;
  border:1px solid rgba(200,168,107,.28) !important;
  box-shadow:0 34px 90px rgba(0,0,0,.36), inset 0 0 0 1px rgba(255,255,255,.04) !important;
  padding:12px !important;
}
.hero-image-card.clean-hero-card:before,
.hero-image-card.clean-hero-card .hero-image-top,
.hero-image-card.clean-hero-card .hero-live-pill,
.hero-image-card.clean-hero-card .hero-float-card,
.hero-image-card.clean-hero-card .hero-image-footer{display:none !important;}
.clean-hero-card .hero-image-wrap{
  margin:0 !important;
  border-radius:26px !important;
  overflow:hidden !important;
  background:#f7f8fa !important;
  box-shadow:none !important;
  min-height:auto !important;
}
.clean-hero-card .hero-main-image{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  object-fit:contain !important;
  object-position:center !important;
  transform:none !important;
}
.hero-image-card.clean-hero-card:hover .hero-main-image{transform:none !important;}
.hero-proof{margin-top:24px !important;}
.hero-stats{margin-top:44px !important;}
@media (max-width:1100px){
  .hero-inner{grid-template-columns:1fr !important;gap:44px !important;}
  .hero-copy{max-width:760px !important;}
  .hero-image-panel{justify-self:start !important;max-width:460px !important;}
  .hero-h1{font-size:clamp(52px,9vw,76px) !important;max-width:720px !important;}
}
@media (max-width:640px){
  .hero-h1{font-size:clamp(44px,12.5vw,58px) !important;letter-spacing:-.058em !important;}
  .hero-sub{font-size:16px !important;line-height:1.65 !important;}
  .hero-image-panel{max-width:100% !important;}
  .hero-image-card.clean-hero-card{border-radius:24px !important;padding:8px !important;}
  .clean-hero-card .hero-image-wrap{border-radius:18px !important;}
}



/* Final contractor hero polish + review grid fix */
.hero{position:relative !important;padding-top:112px !important;padding-bottom:92px !important;}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 28%,rgba(200,168,107,.14),transparent 28%),radial-gradient(circle at 72% 34%,rgba(44,117,255,.12),transparent 32%);pointer-events:none;}
.hero-inner{position:relative;z-index:1;grid-template-columns:minmax(0,1.05fr) minmax(390px,.78fr) !important;gap:78px !important;align-items:center !important;}
.hero-copy{max-width:760px !important;}
.hero-badge{font-size:12px !important;letter-spacing:.12em !important;padding:13px 20px !important;margin-bottom:30px !important;}
.hero-h1{font-size:clamp(76px,6.75vw,124px) !important;line-height:.86 !important;letter-spacing:-.08em !important;max-width:760px !important;margin-bottom:28px !important;}
.hero-h1 span{color:var(--gold) !important;display:inline-block !important;}
.hero-sub{font-size:clamp(18px,1.22vw,21px) !important;line-height:1.7 !important;max-width:690px !important;color:rgba(255,255,255,.72) !important;margin-bottom:34px !important;}
.hero-btns .btn{min-width:220px;justify-content:center;}
.hero-proof{margin-top:28px !important;color:rgba(255,255,255,.62) !important;}
.hero-image-panel{max-width:465px !important;justify-self:center !important;}
.hero-image-card.clean-hero-card{padding:0 !important;border:1px solid rgba(200,168,107,.22) !important;border-radius:30px !important;background:rgba(255,255,255,.035) !important;box-shadow:0 42px 110px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.03) inset !important;overflow:hidden !important;}
.clean-hero-card .hero-image-wrap{border-radius:30px !important;background:transparent !important;}
.clean-hero-card .hero-main-image{width:100% !important;height:auto !important;display:block !important;}
.hero-stats{grid-column:1 / -1 !important;margin-top:18px !important;}
.contractor-review-grid{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:18px !important;align-items:stretch !important;}
.contractor-review-grid .testi-card{min-width:0 !important;height:100% !important;display:flex !important;flex-direction:column !important;}
.contractor-review-grid .testi-quote{font-size:15px !important;line-height:1.72 !important;}
.contractor-review-grid .testi-author{margin-top:auto !important;}
.trustpilot-verify-card{border-color:rgba(0,182,122,.28) !important;background:linear-gradient(145deg,rgba(0,182,122,.07),rgba(255,255,255,.025)) !important;}
.trustpilot-cta{margin-top:28px !important;}
@media (max-width:1180px){.hero-inner{grid-template-columns:1fr !important;gap:46px !important}.hero-image-panel{justify-self:start !important;max-width:500px !important}.hero-h1{font-size:clamp(64px,10vw,100px) !important}.contractor-review-grid{grid-template-columns:1fr !important;}}
@media (max-width:640px){.hero{padding-top:92px !important;padding-bottom:70px !important}.hero-h1{font-size:clamp(48px,14vw,68px) !important;letter-spacing:-.065em !important}.hero-sub{font-size:16px !important}.hero-btns .btn{width:100%;min-width:0}.hero-image-panel{max-width:100% !important}.hero-stats{grid-template-columns:repeat(2,1fr) !important}.contractor-review-grid{gap:16px !important;}}



/* Final hero update: smaller headline, image pulled up, stats under project image */
.hero{
  padding-top:108px !important;
  padding-bottom:84px !important;
}
.hero-inner{
  grid-template-columns:minmax(0,1fr) minmax(420px,.82fr) !important;
  gap:72px !important;
  align-items:center !important;
}
.hero-copy{max-width:720px !important;}
.hero-h1{
  font-size:clamp(66px,5.85vw,104px) !important;
  line-height:.89 !important;
  letter-spacing:-.075em !important;
  max-width:720px !important;
  margin-bottom:26px !important;
}
.hero-sub{
  max-width:650px !important;
  font-size:clamp(17px,1.12vw,20px) !important;
  line-height:1.68 !important;
}
.hero-image-panel{
  transform:translateY(-34px) !important;
  max-width:500px !important;
  justify-self:center !important;
}
.hero-project-stats{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
  margin-top:18px !important;
  opacity:1 !important;
  animation:none !important;
  grid-column:auto !important;
}
.hero-project-stats .stat{
  padding:13px 10px !important;
  text-align:center !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(200,168,107,.16) !important;
}
.hero-project-stats .stat-n{
  color:var(--gold) !important;
  font-size:clamp(22px,1.55vw,30px) !important;
}
.hero-project-stats .stat-l{
  font-size:11px !important;
  line-height:1.2 !important;
  margin-top:5px !important;
}
.contractor-review-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
@media (max-width:1180px){
  .hero-inner{grid-template-columns:1fr !important;gap:38px !important;}
  .hero-image-panel{transform:none !important;justify-self:start !important;max-width:520px !important;}
  .hero-h1{font-size:clamp(58px,9vw,88px) !important;}
  .contractor-review-grid{grid-template-columns:1fr !important;}
}
@media (max-width:640px){
  .hero-h1{font-size:clamp(44px,12.5vw,62px) !important;}
  .hero-project-stats{grid-template-columns:repeat(2,1fr) !important;}
}

/* ─── Miami Sunset City Animation — scoped to .hero ─── */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 120px 0 80px;
}

/* Sky background — sunset gradient fills the hero */
.hero-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, #F28322, #F2622E, #733641, #0D0D0D);
  z-index: 0;
}

/* Sun */
.hero-sun {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(#ffffffaa, #f7a21b);
  backdrop-filter: blur(15px);
  opacity: 0.75;
  box-shadow: 0 0 120px #f7a21b66;
  position: absolute;
  bottom: 28%; /* sits above the waterline */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}

/* Water / reflection strip at the bottom */
.hero-water {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(to right top, #07111F, #1a2a5e);
  opacity: 0.55;
  z-index: 2;
  pointer-events: none;
}
.hero-water-light {
  position: absolute;
  width: 180px;
  height: 3px;
  background: linear-gradient(to right, transparent, #C8A86B, #fff, #C8A86B, transparent);
  border-radius: 120px;
  pointer-events: none;
  animation: wlMove 3s ease-in-out infinite alternate;
}
.hero-water-light:nth-child(1) { left: 15%; top: 22%; animation-delay: 0s; animation-duration: 2.8s; }
.hero-water-light:nth-child(2) { left: 38%; top: 12%; animation-delay: 0.7s; animation-duration: 3.4s; }
.hero-water-light:nth-child(3) { left: 62%; top: 28%; animation-delay: 1.2s; animation-duration: 2.4s; }
.hero-water-light:nth-child(4) { left: 78%; top: 18%; animation-delay: 0.4s; animation-duration: 3.1s; }
@keyframes wlMove { 0% { opacity: 0.25; transform: scaleX(0.7); } 100% { opacity: 0.9; transform: scaleX(1.2); } }

/* Reflected sky at bottom — blurred, flipped */
.hero-sky-reflet {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(to bottom right, #F28322, #F2622E, #733641, #0D0D0D);
  opacity: 0.18;
  filter: blur(8px);
  transform: scaleY(-1);
  z-index: 3;
  pointer-events: none;
}

/* Ground / horizon base bar */
.hero-base {
  position: absolute;
  left: 0; right: 0;
  bottom: 29.5%; /* sits right at waterline */
  height: 38px;
  background: hsl(353, 22%, 10%);
  z-index: 10;
  pointer-events: none;
}

/* Homes container — all three layers share this wrapper pattern */
.hero-homes {
  position: absolute;
  bottom: 29.5%;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 8;
  pointer-events: none;
}
.hero-homes.back   { z-index: 6;  bottom: calc(29.5% - 20px); }
.hero-homes.moreback { z-index: 4; bottom: calc(29.5% - 38px); }

/* Scrolling animations — each layer at a different speed */
.hero-homes.front   { animation: cityScroll 80s  linear infinite; }
.hero-homes.back    { animation: cityScroll 160s linear infinite; }
.hero-homes.moreback{ animation: cityScroll 260s linear infinite; }

@keyframes cityScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Building colors per layer */
.hero-homes .hb { background: hsl(353, 22%, 10%); }
.hero-homes.back .hb,
.hero-homes.back .hb::before,
.hero-homes.back .hb::after { background: hsl(353, 12%, 17%); }
.hero-homes.moreback .hb,
.hero-homes.moreback .hb::before,
.hero-homes.moreback .hb::after { background: hsl(353, 12%, 22%); }

/* Individual building shapes — reused from the original pen */
.hero-homes .hb { position: absolute; bottom: 38px; }

.hb-1 { left: 40px;   width: 20px; height: 110px; }
.hb-1::before { content:""; position:absolute; left:-20px; bottom:0; width:20px; height:80px;  background:inherit; display:block; }
.hb-1::after  { content:""; position:absolute; left:20px;  bottom:0; width:30px; height:50px;  background:inherit; display:block; clip-path:polygon(0 0,100% 10%,100% 100%,0% 100%); }

.hb-2 { left: 160px;  width: 20px; height: 140px; }
.hb-2::before { content:""; position:absolute; left:-20px; bottom:0; width:60px; height:100px; background:inherit; display:block; }
.hb-2::after  { content:""; position:absolute; left:-40px; bottom:0; width:100px;height:50px;  background:inherit; display:block; }

.hb-3 { left: 270px;  width: 20px; height: 110px; }
.hb-3::after  { content:""; position:absolute; left:20px;  bottom:0; width:20px; height:80px;  background:inherit; display:block; }
.hb-3::before { content:""; position:absolute; left:-20px; bottom:0; width:30px; height:50px;  background:inherit; display:block; clip-path:polygon(0 14%,100% 0,100% 100%,0% 100%); }

.hb-4 { left: 390px;  width: 90px; height: 140px; clip-path:polygon(50% 0%,100% 38%,100% 100%,0 100%,0% 38%); }

.hb-5 { left: 540px;  width: 20px; height: 110px; }
.hb-5::before { content:""; position:absolute; left:-20px; bottom:0; width:20px; height:80px;  background:inherit; display:block; }
.hb-5::after  { content:""; position:absolute; left:20px;  bottom:0; width:30px; height:50px;  background:inherit; display:block; clip-path:polygon(0 0,100% 10%,100% 100%,0% 100%); }

.hb-6 { left: 660px;  width: 20px; height: 140px; }
.hb-6::before { content:""; position:absolute; left:-20px; bottom:0; width:60px; height:100px; background:inherit; display:block; }
.hb-6::after  { content:""; position:absolute; left:-40px; bottom:0; width:100px;height:50px;  background:inherit; display:block; }

.hb-7 { left: 770px;  width: 20px; height: 110px; }
.hb-7::after  { content:""; position:absolute; left:20px;  bottom:0; width:20px; height:80px;  background:inherit; display:block; }
.hb-7::before { content:""; position:absolute; left:-20px; bottom:0; width:30px; height:50px;  background:inherit; display:block; clip-path:polygon(0 14%,100% 0,100% 100%,0% 100%); }

.hb-8 { left: 840px;  width: 20px; height: 110px; }
.hb-8::before { content:""; position:absolute; left:-20px; bottom:0; width:20px; height:80px;  background:inherit; display:block; }
.hb-8::after  { content:""; position:absolute; left:20px;  bottom:0; width:30px; height:50px;  background:inherit; display:block; clip-path:polygon(0 0,100% 10%,100% 100%,0% 100%); }

.hb-9 { left: 960px;  width: 20px; height: 140px; }
.hb-9::before { content:""; position:absolute; left:-20px; bottom:0; width:60px; height:100px; background:inherit; display:block; }
.hb-9::after  { content:""; position:absolute; left:-40px; bottom:0; width:100px;height:50px;  background:inherit; display:block; }

.hb-10{ left: 1070px; width: 20px; height: 110px; }
.hb-10::after  { content:""; position:absolute; left:20px;  bottom:0; width:20px; height:80px;  background:inherit; display:block; }
.hb-10::before { content:""; position:absolute; left:-20px; bottom:0; width:30px; height:50px;  background:inherit; display:block; clip-path:polygon(0 14%,100% 0,100% 100%,0% 100%); }

.hb-11{ left: 1190px; width: 90px; height: 140px; clip-path:polygon(50% 0%,100% 38%,100% 100%,0 100%,0% 38%); }

.hb-12{ left: 1240px; width: 20px; height: 110px; }
.hb-12::before{ content:""; position:absolute; left:-20px; bottom:0; width:20px; height:80px;  background:inherit; display:block; }
.hb-12::after { content:""; position:absolute; left:20px;  bottom:0; width:30px; height:50px;  background:inherit; display:block; clip-path:polygon(0 0,100% 10%,100% 100%,0% 100%); }

.hb-13{ left: 1360px; width: 20px; height: 140px; }
.hb-13::before{ content:""; position:absolute; left:-20px; bottom:0; width:60px; height:100px; background:inherit; display:block; }
.hb-13::after { content:""; position:absolute; left:-40px; bottom:0; width:100px;height:50px;  background:inherit; display:block; }

.hb-14{ left: 1470px; width: 20px; height: 110px; }
.hb-14::after { content:""; position:absolute; left:20px;  bottom:0; width:20px; height:80px;  background:inherit; display:block; }
.hb-14::before{ content:""; position:absolute; left:-20px; bottom:0; width:30px; height:50px;  background:inherit; display:block; clip-path:polygon(0 14%,100% 0,100% 100%,0% 100%); }

/* Boat */
.hero-boat {
  position: absolute;
  bottom: 22%;
  left: 18%;
  width: 220px;
  height: 36px;
  background: linear-gradient(to right, #07111F, #0C1728);
  border-radius: 0 0 50px 50px;
  z-index: 11;
  animation: boatRock 6s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes boatRock {
  0%   { transform: rotate(-0.4deg) translateX(0); }
  50%  { transform: rotate(-1.2deg) translateX(4px); }
  100% { transform: rotate(-0.4deg) translateX(-2px); }
}
.hero-boat::before {
  content:""; position:absolute; bottom:36px; left:100px;
  width:4px; height:85px; background:#07111F; z-index:-1;
}
.hero-vela { border-style:solid; border-color:transparent; position:absolute; }
.hero-vela:nth-child(1) {
  border-width:40px; border-left-color:#0C1728; border-left-width:80px;
  top:-80px; left:104px;
}
.hero-vela:nth-child(1)::before {
  content:""; width:80px; height:36px; background:#0C1728;
  position:absolute; top:0; right:0; border-radius:0 0 24px 0;
}
.hero-vela:nth-child(2) {
  border-width:40px; border-right-color:#0C1728; border-right-width:80px;
  top:-80px; left:-16px;
}
.hero-vela:nth-child(2)::before {
  content:""; width:80px; height:36px; background:#0C1728;
  position:absolute; top:0; left:0; border-radius:0 0 0 24px;
}

/* City panorama spacer — only shown on mobile via media query */
.hero-city-band { display: none; }

/* Dark gradient overlay so hero copy stays readable on top of sunset */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(7,17,31,0.82) 0%, rgba(7,17,31,0.55) 55%, rgba(7,17,31,0.18) 100%),
    linear-gradient(to top, rgba(7,17,31,0.6) 0%, transparent 35%);
  z-index: 12;
  pointer-events: none;
}

/* Hero content sits above everything */
.hero .hero-inner {
  position: relative;
  z-index: 20;
}

/* Override hero-h1 color to be cream/white against sunset */
.hero .hero-h1 span { color: var(--gold); }

/* Stat cards — slightly frosted since bg is now colorful */
.hero .stat {
  background: rgba(7,17,31,0.55) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(200,168,107,0.22) !important;
}

/* Badge gets blur since it now sits on sunset */
.hero .hero-badge {
  background: rgba(7,17,31,0.55);
  backdrop-filter: blur(12px);
}

/* ─── MOBILE: make the city actually visible ─── */
@media (max-width: 980px) {

  /* Let hero grow naturally; remove flex centering */
  .hero {
    min-height: auto !important;
    padding: 100px 0 0 !important;
    display: block !important;
    align-items: unset !important;
  }

  /* Copy sits normally at top in single-col */
  .hero .hero-inner {
    padding: 0 24px 20px;
    width: 100%;
    max-width: 100%;
  }

  /* Hide the mockup panel — the city IS the visual on mobile */
  .hero .hero-panel,
  .hero .hero-image-panel {
    display: none !important;
  }

  /* Pull the horizon UP so buildings land in the bottom third of the frame */
  .hero-base           { bottom: 30%; }
  .hero-homes          { bottom: 30%; }
  .hero-homes.back     { bottom: calc(30% - 16px); }
  .hero-homes.moreback { bottom: calc(30% - 30px); }

  /* Water fills the bottom 30% */
  .hero-water      { height: 30%; }
  .hero-sky-reflet { height: 30%; }

  /* Sun positions above buildings */
  .hero-sun {
    width: 150px;
    height: 150px;
    bottom: 30%;
  }

  /* Scale whole building layers to fit narrow mobile widths */
  .hero-homes.front {
    transform-origin: bottom left;
    transform: scaleX(0.52) translateX(0);
    animation: cityScrollMobile 50s linear infinite;
  }
  .hero-homes.back {
    transform-origin: bottom left;
    transform: scaleX(0.52) translateX(0);
    animation: cityScrollMobile 100s linear infinite;
  }
  .hero-homes.moreback {
    transform-origin: bottom left;
    transform: scaleX(0.52) translateX(0);
    animation: cityScrollMobile 160s linear infinite;
  }

  @keyframes cityScrollMobile {
    0%   { transform: scaleX(0.52) translateX(0); }
    100% { transform: scaleX(0.52) translateX(-96.15%); }
  }

  /* Gradient: heavy dark at top (text), fades out toward cityscape */
  .hero-overlay {
    background:
      linear-gradient(to bottom,
        rgba(7,17,31,0.85) 0%,
        rgba(7,17,31,0.50) 40%,
        rgba(7,17,31,0.08) 68%,
        transparent 100%
      ) !important;
  }

  /* City panorama strip below copy — explicit height so it's always seen */
  .hero-city-band {
    display: block;
    position: relative;
    height: 200px;
    width: 100%;
    flex-shrink: 0;
  }

  /* Boat hidden — too small at this scale */
  .hero-boat { display: none; }
}

@media (max-width: 600px) {
  .hero { padding-top: 82px !important; }
  .hero .hero-inner { padding: 0 16px 16px; }

  .hero-sun { width: 110px; height: 110px; }

  .hero-homes.front {
    transform: scaleX(0.38) translateX(0);
    animation: cityScrollSm 40s linear infinite;
  }
  .hero-homes.back {
    transform: scaleX(0.38) translateX(0);
    animation: cityScrollSm 80s linear infinite;
  }
  .hero-homes.moreback {
    transform: scaleX(0.38) translateX(0);
    animation: cityScrollSm 130s linear infinite;
  }

  @keyframes cityScrollSm {
    0%   { transform: scaleX(0.38) translateX(0); }
    100% { transform: scaleX(0.38) translateX(-131.6%); }
  }

  .hero-city-band { height: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-homes.front,
  .hero-homes.back,
  .hero-homes.moreback { animation: none !important; }
  .hero-boat { animation: none; }
  .hero-water-light { animation: none; }
}


/* Safety patch: prevents page sections from disappearing if the original animation JS is missing or delayed. */
.reveal,
.reveal.d1,
.reveal.d2,
.reveal.d3,
.reveal.d4,
.reveal.d5{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}

/* Keep regular page sections above decorative absolute hero layers. */
section:not(.hero),
.marquee-wrap,
footer{
  position:relative;
  z-index:5;
}

/* Desktop hero sanity: prevents the animated background from creating a giant empty dead zone. */
@media (min-width:981px){
  .hero{
    min-height:760px !important;
  }
}



/* =========================================================
   EMERGENCY RESTORE PATCH — WeDoMedia contractor homepage
   Adds the missing section CSS/classes that were lost when
   inline/external styles got split. Keep this at bottom.
   ========================================================= */
:root{--bg:#07111F;--bg2:#0C1728;--bg3:#122038;--gold:#C8A86B;--gold2:#9D7F43;--champagne:#F2E4C3;--cream:#F5F3EE;--muted:rgba(245,243,238,.62);--faint:rgba(245,243,238,.055);--border:rgba(200,168,107,.16);--pink:#C8A86B;--pink-dim:rgba(200,168,107,.12);--peach:#C8A86B;--ocean:#C8A86B;--turquoise:#C8A86B;--neon-blue:#C8A86B;}
body{background:#07111F;color:var(--cream);font-family:'Nunito Sans',system-ui,sans-serif;line-height:1.6;overflow-x:hidden;}
body:before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(circle at 18% 8%,rgba(200,168,107,.13),transparent 28%),radial-gradient(circle at 82% 22%,rgba(200,168,107,.08),transparent 32%),linear-gradient(180deg,#07111F,#081421 45%,#06101B);}
.container{width:min(1200px,calc(100% - 40px));margin:0 auto;}
section{padding:6rem 0;position:relative;z-index:2;}
img{max-width:100%;height:auto;display:block}.txt-pink,.txt-gold{color:var(--gold)!important}.section-h em{color:var(--gold);font-style:italic}.u-style-009{text-align:center;margin-bottom:3rem}.u-style-011{margin-inline:auto}.tag{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .9rem;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.045);color:var(--champagne);font:800 .72rem/1 'Urbanist',sans-serif;text-transform:uppercase;letter-spacing:.12em;margin-bottom:1.35rem}.tag-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 16px rgba(200,168,107,.5)}.section-h{font:900 clamp(2rem,4.8vw,4.2rem)/.98 'Urbanist',sans-serif;letter-spacing:-.045em;margin:0 0 1rem}.section-sub{color:var(--muted);font-size:1.03rem;line-height:1.75;max-width:640px;margin:0 auto}.dark-section,.services-bg,.proc-bg,.blog-section,.form-section{background:linear-gradient(180deg,rgba(12,23,40,.45),rgba(7,17,31,0));}

/* NAV restore */
.nav{position:fixed;top:1rem;left:50%;transform:translateX(-50%);z-index:800;width:min(1200px,calc(100% - 2rem));}.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.72rem 1.1rem;background:rgba(7,17,31,.86);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:1rem;box-shadow:0 10px 40px rgba(0,0,0,.35)}.site-logo{height:44px;width:auto;max-width:190px;object-fit:contain}.nav-links{display:flex;list-style:none;gap:.2rem}.nav-links a{display:block;padding:.45rem .75rem;color:rgba(245,243,238,.64);font-size:.86rem;border-radius:.55rem}.nav-links a:hover{background:var(--faint);color:#fff}.nav-right{display:flex;align-items:center;gap:.7rem}.nav-phone{color:var(--muted);font-size:.8rem}.hamburger{display:none;flex-direction:column;gap:4px;border:1px solid var(--border);border-radius:.65rem;background:transparent;padding:.5rem}.hamburger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.72rem 1.15rem;border-radius:.75rem;border:1px solid rgba(200,168,107,.28);font:800 .88rem/1 'Urbanist',sans-serif;transition:.2s ease;cursor:pointer}.btn-pink,.btn-gold{background:linear-gradient(135deg,#F2E4C3,#C8A86B);color:#07111F!important}.btn-outline{background:rgba(255,255,255,.035);color:#fff}.btn-lg{padding:.88rem 1.75rem;font-size:.98rem}.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.26)}
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:900;opacity:0;pointer-events:none;transition:.25s}.drawer-overlay.open,.drawer-overlay.active{opacity:1;pointer-events:auto}.drawer{position:fixed;inset:0 auto 0 0;width:min(340px,88vw);background:#07111F;border-right:1px solid var(--border);z-index:901;transform:translateX(-100%);transition:.3s;padding:2rem;display:flex;flex-direction:column}.drawer.open,.drawer.active{transform:translateX(0)}.drawer-close{position:absolute;right:1.2rem;top:1.2rem;width:38px;height:38px;border:1px solid var(--border);border-radius:50%;background:transparent;color:#fff}.drawer-links{display:grid;gap:.25rem;margin-top:2rem}.drawer-links a{display:flex;gap:.6rem;padding:.75rem .35rem;border-radius:.6rem;color:var(--muted);font:800 1.1rem/1.2 'Urbanist',sans-serif}.drawer-links .num{color:var(--gold);font-size:.75rem}.drawer-btns{margin-top:auto}.drawer-phone{text-align:center;color:var(--muted);margin-bottom:1rem}

/* Hero desktop restore while preserving city animation */
.hero{min-height:100vh;padding:8rem 0 5rem;overflow:hidden}.hero-inner{width:min(1200px,calc(100% - 40px));margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,500px);gap:4.5rem;align-items:center;position:relative;z-index:20}.hero-copy{max-width:720px}.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .9rem;border:1px solid rgba(200,168,107,.35);border-radius:999px;background:rgba(7,17,31,.52);color:var(--champagne);font:900 .7rem/1 'Urbanist',sans-serif;text-transform:uppercase;letter-spacing:.12em;margin-bottom:1.4rem}.hero-h1{font:900 clamp(3rem,6vw,6.4rem)/.9 'Urbanist',sans-serif;letter-spacing:-.065em;margin:0 0 1.25rem}.hero-h1 span,.hero-h1 em{color:var(--gold);font-style:normal}.hero-sub{font-size:1.08rem;color:rgba(245,243,238,.68);max-width:640px;line-height:1.75;margin-bottom:1.8rem}.hero-btns{display:flex;gap:.9rem;flex-wrap:wrap}.hero-proof{display:flex;gap:.9rem;align-items:center;margin-top:1.15rem;color:rgba(245,243,238,.58);font-size:.84rem}.hero-proof-line{width:44px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}.hero-image-panel{position:relative;z-index:22;max-width:500px;width:100%;justify-self:center}.hero-image-card{border-radius:1.8rem;overflow:hidden;border:1px solid rgba(200,168,107,.25);box-shadow:0 34px 90px rgba(0,0,0,.44);background:rgba(255,255,255,.04)}.hero-project-stats,.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-top:1rem;position:relative;z-index:22}.stat{padding:.9rem .8rem;border-radius:.8rem;text-align:center;background:rgba(7,17,31,.72);border:1px solid rgba(200,168,107,.18);backdrop-filter:blur(10px)}.stat-n{font:900 1.7rem/1 'Urbanist',sans-serif;color:var(--gold)}.stat-l{font-size:.68rem;color:var(--muted);margin-top:.25rem}

/* About / feature */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center}.about-art,.about-slider-card{position:relative;border-radius:1.5rem;overflow:hidden;border:1px solid var(--border);background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));box-shadow:0 28px 80px rgba(0,0,0,.32)}.checks,.check-group{display:grid;gap:.75rem;margin:1.6rem 0}.check-row,.check-label{display:flex;align-items:center;gap:.7rem;color:var(--muted);font-weight:700}.check-icon{width:28px;height:28px;border-radius:.55rem;background:rgba(200,168,107,.12);border:1px solid rgba(200,168,107,.24);display:grid;place-items:center;color:var(--gold)}.ba-slider{position:relative;border-radius:1.35rem;overflow:hidden;background:#06101D;border:1px solid rgba(255,255,255,.1)}.ba-image-wrap{position:relative;aspect-ratio:16/10;overflow:hidden}.ba-image-wrap img{width:100%;height:100%;object-fit:cover}.ba-focus{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}.ba-divider{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--gold);z-index:5}.ba-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:var(--gold);color:#07111F;display:grid;place-items:center;font-weight:900;box-shadow:0 12px 30px rgba(0,0,0,.35)}.ba-range{position:absolute;inset:0;opacity:0;z-index:7;cursor:ew-resize}.ba-label{position:absolute;top:1rem;z-index:6;padding:.35rem .65rem;border-radius:999px;background:rgba(7,17,31,.72);font:900 .7rem/1 'Urbanist',sans-serif;text-transform:uppercase}.ba-label-before{left:1rem}.ba-label-after{right:1rem}.ba-footer{display:flex;justify-content:space-between;padding:1rem;color:var(--muted)}

/* Services */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:3rem}.svc{position:relative;padding:1.65rem;border-radius:1.15rem;border:1px solid var(--border);background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025));box-shadow:0 22px 64px rgba(0,0,0,.18);transition:.25s}.svc:hover{transform:translateY(-5px);border-color:rgba(200,168,107,.35)}.svc-num{font:900 .72rem/1 'Urbanist',sans-serif;color:var(--gold);letter-spacing:.13em;margin-bottom:.75rem}.svc-icon{width:44px;height:44px;border-radius:.85rem;background:rgba(200,168,107,.1);border:1px solid rgba(200,168,107,.22);display:grid;place-items:center;margin-bottom:1rem}.svc-name{font:900 1.35rem/1.1 'Urbanist',sans-serif;margin-bottom:.65rem}.svc-desc{color:var(--muted);font-size:.95rem;line-height:1.65}

/* Portfolio */
.port-intro{max-width:780px;margin:0 auto 2.5rem;text-align:center}.port-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:1.6rem!important}.port-item{position:relative;min-width:0;border-radius:1.25rem;overflow:hidden;border:1px solid var(--border);background:rgba(255,255,255,.035);box-shadow:0 24px 70px rgba(0,0,0,.28)}.port-screen{width:100%;aspect-ratio:16/9;overflow:hidden;background:#06101D}.port-img{width:100%;height:100%;object-fit:cover;transition:.4s}.port-item:hover .port-img{transform:scale(1.035)}.port-base{padding:1rem 1.1rem}.port-base-name{font:900 1.15rem/1.1 'Urbanist',sans-serif}.port-base-cat{color:var(--muted);font-size:.84rem;margin-top:.25rem}.port-over{position:absolute;inset:auto 0 0;padding:1.25rem;background:linear-gradient(to top,rgba(3,8,16,.94),rgba(3,8,16,.1));opacity:0;transition:.25s}.port-item:hover .port-over{opacity:1}.port-over-name{font:900 1.25rem/1 'Urbanist',sans-serif}.port-tags,.port-featured-tags{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.8rem}.ptag{display:inline-flex;padding:.35rem .55rem;border-radius:999px;background:rgba(200,168,107,.1);border:1px solid rgba(200,168,107,.22);font-size:.72rem;color:#fff}.port-link{display:inline-block;color:var(--gold);font-weight:900;margin-top:.8rem}.port-click{position:absolute;inset:0;z-index:8}.port-featured{grid-column:1/-1!important}.port-featured .port-screen{aspect-ratio:21/9!important}.port-featured-content{position:absolute;left:1.4rem;right:1.4rem;bottom:1.4rem;z-index:4;padding:1.3rem;border:1px solid rgba(255,255,255,.14);border-radius:1rem;background:rgba(3,8,18,.72);backdrop-filter:blur(14px)}.port-featured-badge{position:absolute;top:1rem;left:1rem;z-index:5;padding:.45rem .75rem;border-radius:999px;background:rgba(3,8,18,.76);border:1px solid rgba(200,168,107,.35);color:var(--gold);font:900 .7rem/1 'Urbanist',sans-serif;text-transform:uppercase;letter-spacing:.1em}.port-featured-title{font:900 clamp(1.8rem,4vw,3.3rem)/.95 'Urbanist',sans-serif}.port-featured-kicker{color:var(--gold);font:900 .75rem/1 'Urbanist',sans-serif;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem}.port-featured-desc{color:var(--muted);max-width:720px}.port-featured-action{display:inline-flex;margin-top:1rem}.port-cta-strip{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-top:2rem;padding:1.4rem;border:1px solid var(--border);border-radius:1rem;background:linear-gradient(135deg,rgba(200,168,107,.1),rgba(255,255,255,.025))}.port-cta-strip p{color:var(--muted);max-width:820px}

/* Process / testimonials / blog */
.proc-grid,.testi-grid,.contractor-review-grid,.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem}.proc-grid{grid-template-columns:repeat(4,1fr)}.proc-step,.testi-card,.blog-card{position:relative;padding:1.45rem;border:1px solid var(--border);border-radius:1.15rem;background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025));box-shadow:0 22px 62px rgba(0,0,0,.18)}.proc-num{font:900 1rem/1 'Urbanist',sans-serif;color:var(--gold);margin-bottom:1rem}.proc-title{font:900 1.15rem/1.1 'Urbanist',sans-serif;margin-bottom:.65rem}.proc-desc,.testi-quote,.blog-card-excerpt{color:var(--muted);font-size:.94rem;line-height:1.65}.testi-card{display:flex;flex-direction:column;min-height:260px}.quote-mark{position:absolute;right:1.2rem;top:.5rem;font:700 4rem/1 Georgia,serif;color:rgba(200,168,107,.12)}.testi-stars,.star{color:var(--gold);letter-spacing:.05em}.testi-author{display:flex;gap:.8rem;align-items:center;margin-top:auto;padding-top:1.1rem}.testi-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(200,168,107,.12);border:1px solid rgba(200,168,107,.24);font-weight:900}.testi-name{font-weight:900}.testi-role{font-size:.78rem;color:var(--muted)}.trustpilot-cta{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:1.5rem;padding:1.2rem;border-radius:1rem;border:1px solid rgba(0,182,122,.28);background:rgba(0,182,122,.06)}.trustpilot-cta a{background:#00b67a;color:#07111F!important;border-radius:999px;padding:.75rem 1rem;font-weight:900}.blog-card{overflow:hidden;padding:0}.blog-card-img{aspect-ratio:16/10;overflow:hidden;background:#06101D}.blog-card-img img{width:100%;height:100%;object-fit:cover}.blog-card-body{padding:1.2rem}.blog-card-cat,.blog-card-date{color:var(--gold);font:900 .72rem/1 'Urbanist',sans-serif;text-transform:uppercase;letter-spacing:.1em}.blog-card-title{font:900 1.25rem/1.1 'Urbanist',sans-serif;margin:.55rem 0}.blog-card-foot{margin-top:1rem}.blog-card-link{color:var(--gold);font-weight:900}.blog-view-all{text-align:center;margin-top:1.7rem}

/* Audit/form */
.audit-section-wrap{position:relative;overflow:hidden;background:#07111F}.audit-section-wrap:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 15% 35%,rgba(200,168,107,.14),transparent 55%),radial-gradient(ellipse at 85% 60%,rgba(200,168,107,.08),transparent 58%);pointer-events:none}.audit-inner{position:relative;z-index:1}.audit-headline-block{text-align:center;margin-bottom:3rem}.audit-eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem 1rem;border:1px solid rgba(200,168,107,.32);border-radius:999px;background:rgba(200,168,107,.08);color:var(--gold);font:900 .72rem/1 'Urbanist',sans-serif;text-transform:uppercase;letter-spacing:.13em;margin-bottom:1.4rem}.audit-big-h{font:900 clamp(2.4rem,6vw,5rem)/.95 'Urbanist',sans-serif;letter-spacing:-.045em;margin:0 0 1rem}.audit-big-h span{display:block}.audit-lede{max-width:620px;margin:0 auto;color:var(--muted);font-size:1.05rem;line-height:1.75}.audit-cols{display:grid;grid-template-columns:.9fr 1.1fr;gap:1.3rem;align-items:start}.audit-step-v2,.audit-card,.form-card{border:1px solid var(--border);border-radius:1.15rem;background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025));box-shadow:0 24px 70px rgba(0,0,0,.2)}.audit-step-v2{display:flex;gap:1rem;padding:1rem;margin-bottom:.8rem}.audit-step-circle{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(200,168,107,.12);border:1px solid rgba(200,168,107,.25);font:900 1rem/1 'Urbanist',sans-serif;color:var(--gold);flex:0 0 auto}.audit-step-content strong{display:block;font:900 1rem/1.2 'Urbanist',sans-serif}.audit-step-content span{display:block;color:var(--muted);font-size:.9rem;margin-top:.2rem}.audit-card{overflow:hidden}.audit-card-top{display:flex;justify-content:space-between;gap:1rem;padding:1.2rem;border-bottom:1px solid var(--border);background:rgba(200,168,107,.06)}.audit-card-top-tag{color:var(--gold);font:900 .72rem/1 'Urbanist',sans-serif;text-transform:uppercase;letter-spacing:.1em}.audit-card-body{padding:1.25rem}.audit-field,.form-group{display:grid;gap:.45rem;margin-bottom:.9rem}.audit-field label,.form-group label{font-weight:900;font-size:.85rem;color:#fff}input,textarea,select{width:100%;border:1px solid rgba(255,255,255,.12);border-radius:.65rem;background:rgba(255,255,255,.055);color:#fff;padding:.85rem .9rem;outline:none}textarea{min-height:120px;resize:vertical}input::placeholder,textarea::placeholder{color:rgba(255,255,255,.38)}.audit-submit-btn{width:100%;border:0;border-radius:.85rem;padding:1rem;background:linear-gradient(135deg,#F2E4C3,#C8A86B);color:#07111F;font:900 .9rem/1 'Urbanist',sans-serif;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.audit-checklist{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.audit-check-pill{padding:.45rem .65rem;border:1px solid rgba(200,168,107,.2);border-radius:999px;background:rgba(200,168,107,.08);font-size:.78rem;color:var(--muted)}.captcha-box{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}.captcha-box input{max-width:140px}.audit-fine-print,.form-note{color:var(--muted);font-size:.8rem;margin-top:.75rem}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.form-row.triple{grid-template-columns:repeat(3,1fr)}.form-progress{height:6px;border-radius:999px;background:rgba(255,255,255,.08);margin-bottom:1rem;overflow:hidden}.progress-line{height:100%;width:33%;background:var(--gold)}.form-step{display:none}.form-step.active{display:block}.form-nav{display:flex;gap:.75rem;justify-content:space-between;margin-top:1rem}.radio-group{display:grid;gap:.5rem}.radio-label{display:flex;align-items:center;gap:.5rem;padding:.8rem;border:1px solid rgba(255,255,255,.1);border-radius:.75rem;background:rgba(255,255,255,.035)}

/* FAQ / CTA / Footer */
.faq-wrap{max-width:980px;margin:2.5rem auto 0;display:grid;grid-template-columns:1fr 1fr;gap:1rem}.faq-column{display:grid;gap:.8rem}.faq-item{border:1px solid var(--border);border-radius:.9rem;background:rgba(255,255,255,.035);overflow:hidden}.faq-q{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem;cursor:pointer;font:900 1rem/1.2 'Urbanist',sans-serif}.faq-ico{color:var(--gold);font-weight:900}.faq-a{display:none;padding:0 1rem 1rem;color:var(--muted);font-size:.92rem}.faq-item.open .faq-a{display:block}.faq-note{text-align:center;color:var(--muted);margin-top:1.3rem}.cta-card{text-align:center;padding:3rem 2rem;border:1px solid var(--border);border-radius:1.5rem;background:radial-gradient(circle at 50% 0%,rgba(200,168,107,.14),transparent 40%),linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025));box-shadow:0 30px 90px rgba(0,0,0,.26)}.cta-h{font:900 clamp(2rem,5vw,4rem)/.98 'Urbanist',sans-serif;letter-spacing:-.045em;margin-bottom:1rem}.cta-sub{color:var(--muted);max-width:700px;margin:0 auto 1.5rem}.cta-btns{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}.footer{background:#050D18;border-top:1px solid var(--border);padding:4rem 0 2rem}.foot-grid{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:2rem}.foot-desc{color:var(--muted);margin-top:1rem;max-width:360px}.foot-col h5{font:900 1rem/1 'Urbanist',sans-serif;margin-bottom:1rem;color:#fff}.foot-col ul{list-style:none;display:grid;gap:.55rem}.foot-col a{color:var(--muted);font-size:.9rem}.foot-col a:hover{color:var(--gold)}.foot-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--border);margin-top:2rem;padding-top:1.3rem;color:var(--muted);font-size:.85rem}.whatsapp-cta{position:fixed;right:18px;bottom:18px;z-index:700;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#25D366;color:#07111F;font-size:1.5rem;box-shadow:0 14px 35px rgba(0,0,0,.28)}

.reveal{opacity:1!important;visibility:visible!important;transform:none!important}.success-msg,.audit-success{display:none}.success-msg.show,.audit-success.show{display:block;color:#45d483;margin-top:1rem}

@media(max-width:1100px){.nav-links,.nav-phone,.nav-right>.btn{display:none}.hamburger{display:flex}.hero-inner,.about-grid,.audit-cols{grid-template-columns:1fr}.hero-image-panel{justify-self:start}.proc-grid{grid-template-columns:repeat(2,1fr)}.foot-grid{grid-template-columns:1fr 1fr}.port-featured .port-screen{aspect-ratio:16/11!important}.port-featured-content{position:relative;left:auto;right:auto;bottom:auto;margin:.8rem}}
@media(max-width:800px){section{padding:4.5rem 0}.services-grid,.port-grid,.proc-grid,.testi-grid,.contractor-review-grid,.blog-grid,.faq-wrap{grid-template-columns:1fr!important}.hero-project-stats,.hero-stats{grid-template-columns:repeat(2,1fr)}.form-row,.form-row.triple{grid-template-columns:1fr}.port-cta-strip{display:block}.port-cta-strip .btn{margin-top:1rem}.foot-grid{grid-template-columns:1fr}.foot-bottom{display:grid}.container,.hero-inner{width:min(100% - 28px,1200px)}.hero{padding-top:6.2rem}.hero-h1{font-size:clamp(2.55rem,12.5vw,4rem)}.hero-btns .btn{width:100%}.faq-wrap{gap:.75rem}.audit-card-top{display:block}}
@media(max-width:560px){.site-logo{height:38px}.hero-image-panel{max-width:100%}.port-screen{border-radius:0}.hero-city-band{height:160px}.audit-big-h,.section-h{letter-spacing:-.035em}.svc,.proc-step,.testi-card,.audit-card-body,.form-card{padding:1rem}.blog-card-body{padding:1rem}}


/* =========================================================
   WEDOMEDIA LIVE REPAIR PATCH - forms, marquee, FAQ, blog, modal
   ========================================================= */
html,body{margin:0!important;overflow-x:hidden!important;background:#07111F!important;color:#fff!important;font-family:"Nunito Sans",Arial,sans-serif!important;}
body{min-width:320px!important;}
body.drawer-open{overflow:hidden!important;}
.container,.nav-inner,.hero-inner,.foot-grid{width:min(1180px,calc(100% - 44px))!important;margin-left:auto!important;margin-right:auto!important;max-width:1180px!important;}
section{position:relative!important;z-index:2!important;padding:110px 0!important;clear:both!important;}
img{max-width:100%!important;height:auto;}
a{text-decoration:none;}

/* 1. Hide mobile drawer junk unless opened */
.drawer-overlay{position:fixed!important;inset:0!important;background:rgba(0,0,0,.62)!important;z-index:9998!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:.25s ease!important;}
.drawer-overlay.open,.drawer-overlay.active{opacity:1!important;visibility:visible!important;pointer-events:auto!important;}
.drawer{position:fixed!important;top:0!important;left:0!important;height:100vh!important;width:min(390px,88vw)!important;background:#07111F!important;z-index:9999!important;transform:translateX(-105%)!important;transition:transform .3s ease!important;padding:28px!important;overflow:auto!important;box-shadow:35px 0 80px rgba(0,0,0,.45)!important;border-right:1px solid rgba(200,168,107,.25)!important;display:block!important;}
.drawer.open,.drawer.active{transform:translateX(0)!important;}
.drawer-close{position:absolute!important;right:18px!important;top:18px!important;display:grid!important;place-items:center!important;width:42px!important;height:42px!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.16)!important;background:rgba(255,255,255,.06)!important;color:#fff!important;cursor:pointer!important;}
.drawer-links{display:grid!important;gap:0!important;margin-top:30px!important;}
.drawer-links a{display:flex!important;gap:12px!important;padding:15px 0!important;border-bottom:1px solid rgba(255,255,255,.09)!important;font:900 20px/1.05 "Urbanist",Arial,sans-serif!important;color:#fff!important;}
.drawer-links .num{color:var(--gold,#C8A86B)!important;font-size:12px!important;}

/* Nav */
.nav{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:5000!important;padding:14px 0!important;background:rgba(7,17,31,.76)!important;backdrop-filter:blur(18px)!important;border-bottom:1px solid rgba(255,255,255,.08)!important;}
.nav-inner{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:20px!important;}
.nav-links{display:flex!important;align-items:center!important;gap:24px!important;list-style:none!important;margin:0!important;padding:0!important;}
.nav-links a{font:900 12px/1 "Urbanist",Arial,sans-serif!important;color:rgba(255,255,255,.75)!important;text-transform:uppercase!important;letter-spacing:.08em!important;}
.nav-right{display:flex!important;align-items:center!important;gap:14px!important;}
.site-logo{max-height:46px!important;width:auto!important;}
.hamburger{display:none!important;}

/* Hero */
.hero{min-height:850px!important;display:flex!important;align-items:center!important;padding:120px 0 80px!important;overflow:hidden!important;}
.hero-inner{position:relative!important;z-index:25!important;display:grid!important;grid-template-columns:minmax(0,1.06fr) minmax(380px,.78fr)!important;gap:70px!important;align-items:center!important;}
.hero-copy{max-width:720px!important;position:relative!important;z-index:30!important;}
.hero-badge{display:inline-flex!important;padding:12px 18px!important;border-radius:999px!important;border:1px solid rgba(200,168,107,.34)!important;background:rgba(7,17,31,.52)!important;color:#C8A86B!important;font:900 11px/1 "Urbanist",Arial,sans-serif!important;text-transform:uppercase!important;letter-spacing:.12em!important;}
.hero-h1{font:900 clamp(58px,5.8vw,104px)/.89 "Urbanist",Arial,sans-serif!important;letter-spacing:-.075em!important;margin:26px 0!important;color:#fff!important;}
.hero-h1 span,.hero-h1 em{color:#C8A86B!important;font-style:normal!important;}
.hero-sub{font-size:clamp(16px,1.15vw,20px)!important;line-height:1.68!important;color:rgba(255,255,255,.75)!important;margin:0 0 30px!important;max-width:650px!important;}
.hero-btns{display:flex!important;gap:14px!important;flex-wrap:wrap!important;}
.hero-image-panel{position:relative!important;z-index:30!important;max-width:500px!important;justify-self:center!important;width:100%!important;}
.hero-project-stats{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:10px!important;margin-top:18px!important;}
.hero-project-stats .stat{padding:14px 8px!important;border-radius:16px!important;background:rgba(7,17,31,.60)!important;border:1px solid rgba(200,168,107,.18)!important;text-align:center!important;}
.stat-n{display:block!important;color:#C8A86B!important;font:900 26px/1 "Urbanist",Arial,sans-serif!important;}
.stat-l{display:block!important;margin-top:5px!important;color:rgba(255,255,255,.64)!important;font:800 10px/1.2 "Urbanist",Arial,sans-serif!important;text-transform:uppercase!important;}

/* Buttons and tags */
.btn,.audit-submit-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;min-height:48px!important;padding:14px 22px!important;border-radius:999px!important;font:900 12px/1 "Urbanist",Arial,sans-serif!important;text-transform:uppercase!important;letter-spacing:.07em!important;cursor:pointer!important;transition:.25s ease!important;border:1px solid rgba(200,168,107,.35)!important;}
.btn-pink,.btn-gold,.audit-submit-btn{background:#C8A86B!important;color:#07111F!important;}
.btn-outline{background:rgba(255,255,255,.04)!important;color:#fff!important;}
.btn:hover,.audit-submit-btn:hover{transform:translateY(-2px)!important;}
.tag{display:inline-flex!important;align-items:center!important;gap:9px!important;padding:10px 14px!important;border-radius:999px!important;color:#C8A86B!important;background:rgba(200,168,107,.08)!important;border:1px solid rgba(200,168,107,.22)!important;font:900 11px/1 "Urbanist",Arial,sans-serif!important;letter-spacing:.11em!important;text-transform:uppercase!important;}
.tag-dot{display:block!important;width:8px!important;height:8px!important;border-radius:50%!important;background:#C8A86B!important;}
.section-h{font:900 clamp(38px,4.7vw,76px)/.95 "Urbanist",Arial,sans-serif!important;letter-spacing:-.055em!important;margin:18px 0!important;color:#fff!important;}
.section-h em,.txt-pink{color:#C8A86B!important;font-style:normal!important;}
.section-sub{font-size:17px!important;line-height:1.72!important;color:rgba(255,255,255,.70)!important;max-width:760px!important;}
.u-style-009,.u-style-041{text-align:center!important;margin-bottom:54px!important;display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:24px!important;}
.u-style-009{display:block!important;}
.u-style-041{text-align:left!important;}

/* 2. Marquee */
.marquee-wrap{position:relative!important;z-index:6!important;overflow:hidden!important;width:100%!important;background:rgba(2,8,18,.75)!important;border-top:1px solid rgba(200,168,107,.20)!important;border-bottom:1px solid rgba(200,168,107,.20)!important;padding:15px 0!important;white-space:nowrap!important;}
.marquee-track{display:flex!important;align-items:center!important;width:max-content!important;gap:20px!important;animation:wedoMarquee 34s linear infinite!important;will-change:transform!important;}
.marquee-item{display:inline-flex!important;align-items:center!important;gap:14px!important;color:rgba(255,255,255,.72)!important;font:900 12px/1 "Urbanist",Arial,sans-serif!important;letter-spacing:.12em!important;text-transform:uppercase!important;white-space:nowrap!important;}
.msep{color:#C8A86B!important;margin:0 12px!important;}
@keyframes wedoMarquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* About + Before/After */
.about-premium{background:#07111F!important;}
.about-grid{display:grid!important;grid-template-columns:minmax(320px,.96fr) minmax(0,1.04fr)!important;gap:64px!important;align-items:center!important;}
.about-slider-card{position:relative!important;}
.ba-slider{border-radius:28px!important;overflow:hidden!important;border:1px solid rgba(200,168,107,.25)!important;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025))!important;box-shadow:0 28px 80px rgba(0,0,0,.28)!important;cursor:zoom-in!important;}
.ba-image-wrap{position:relative!important;overflow:hidden!important;aspect-ratio:16/11!important;background:#091524!important;border-radius:24px 24px 0 0!important;}
.ba-image-wrap>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;}
.ba-focus{position:absolute!important;inset:0!important;background-image:url('/images/After.png'),url('/images/Before-After.png')!important;background-size:cover!important;background-position:center!important;clip-path:inset(0 50% 0 0)!important;z-index:2!important;}
.ba-divider{position:absolute!important;top:0!important;bottom:0!important;left:50%!important;width:2px!important;background:#C8A86B!important;z-index:4!important;box-shadow:0 0 24px rgba(200,168,107,.6)!important;}
.ba-handle{position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;width:58px!important;height:58px!important;border-radius:50%!important;background:#C8A86B!important;color:#07111F!important;display:grid!important;place-items:center!important;box-shadow:0 14px 34px rgba(0,0,0,.35)!important;}
.ba-range{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:0!important;cursor:ew-resize!important;z-index:5!important;padding:0!important;margin:0!important;}
.ba-label{position:absolute!important;top:16px!important;z-index:6!important;border-radius:999px!important;background:rgba(2,8,18,.7)!important;color:#fff!important;padding:8px 12px!important;font:900 11px/1 "Urbanist",Arial,sans-serif!important;text-transform:uppercase!important;letter-spacing:.08em!important;}
.ba-label-before{left:16px!important}.ba-label-after{right:16px!important}
.ba-footer{display:flex!important;justify-content:space-between!important;gap:14px!important;align-items:center!important;padding:16px 18px!important;color:#fff!important;}
.ba-footer small{color:rgba(255,255,255,.58)!important;}
.wedo-ba-modal{position:fixed!important;inset:0!important;z-index:10000!important;background:rgba(0,0,0,.84)!important;display:none!important;align-items:center!important;justify-content:center!important;padding:30px!important;}
.wedo-ba-modal.open{display:flex!important;}
.wedo-ba-modal-inner{position:relative!important;width:min(1100px,96vw)!important;background:#07111F!important;border:1px solid rgba(200,168,107,.32)!important;border-radius:28px!important;padding:18px!important;box-shadow:0 30px 120px rgba(0,0,0,.6)!important;}
.wedo-ba-modal-close{position:absolute!important;right:18px!important;top:18px!important;z-index:4!important;width:44px!important;height:44px!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.2)!important;background:rgba(0,0,0,.55)!important;color:#fff!important;font-size:24px!important;cursor:pointer!important;}

/* Cards/grids */
.services-grid,.proc-grid,.contractor-review-grid,.blog-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:22px!important;}
.svc,.proc-step,.testi-card,.blog-card,.faq-item,.audit-card,.form-card,.cta-card{border:1px solid rgba(255,255,255,.11)!important;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025))!important;border-radius:24px!important;box-shadow:0 24px 70px rgba(0,0,0,.20)!important;overflow:hidden!important;}
.svc,.proc-step,.testi-card{padding:28px!important;}
.svc-num,.proc-num{color:#C8A86B!important;font:900 28px/1 "Urbanist",Arial,sans-serif!important;margin-bottom:20px!important;}
.svc-name,.proc-title{font:900 26px/1.05 "Urbanist",Arial,sans-serif!important;letter-spacing:-.03em!important;color:#fff!important;margin-bottom:12px!important;}
.svc-desc,.proc-desc,.testi-quote{color:rgba(255,255,255,.68)!important;line-height:1.68!important;}
.port-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:30px!important;}
.port-featured{grid-column:1/-1!important;}

/* 4. Audit form repair */
.audit-section-wrap{background:radial-gradient(circle at top left,rgba(200,168,107,.09),transparent 30%),#07111F!important;}
.audit-inner{display:block!important;}
.audit-headline-block{text-align:center!important;max-width:920px!important;margin:0 auto 58px!important;}
.audit-eyebrow{display:inline-flex!important;align-items:center!important;gap:9px!important;color:#C8A86B!important;border:1px solid rgba(200,168,107,.25)!important;background:rgba(200,168,107,.08)!important;border-radius:999px!important;padding:10px 14px!important;font:900 11px/1 "Urbanist",Arial,sans-serif!important;letter-spacing:.10em!important;text-transform:uppercase!important;}
.audit-big-h{font:900 clamp(42px,5vw,82px)/.92 "Urbanist",Arial,sans-serif!important;letter-spacing:-.06em!important;margin:22px 0!important;color:#fff!important;}
.audit-big-h span{display:inline!important;}.line-pink,.line-gold{color:#C8A86B!important;}
.audit-lede{font-size:18px!important;line-height:1.7!important;color:rgba(255,255,255,.70)!important;max-width:780px!important;margin:0 auto!important;}
.audit-cols{display:grid!important;grid-template-columns:minmax(0,.92fr) minmax(380px,1.08fr)!important;gap:40px!important;align-items:start!important;}
.audit-steps-label{color:#C8A86B!important;font:900 12px/1 "Urbanist",Arial,sans-serif!important;text-transform:uppercase!important;letter-spacing:.12em!important;margin-bottom:20px!important;}
.audit-step-v2{display:grid!important;grid-template-columns:60px 1fr!important;gap:18px!important;margin-bottom:20px!important;}
.audit-step-circle{width:50px!important;height:50px!important;border-radius:50%!important;background:#C8A86B!important;color:#07111F!important;display:grid!important;place-items:center!important;font:900 13px/1 "Urbanist",Arial,sans-serif!important;}
.audit-step-line{width:1px!important;height:54px!important;background:rgba(200,168,107,.26)!important;margin:8px auto 0!important;}
.audit-step-content h4{font:900 21px/1.1 "Urbanist",Arial,sans-serif!important;margin:0 0 8px!important;color:#fff!important;}
.audit-step-content p{margin:0!important;color:rgba(255,255,255,.66)!important;line-height:1.6!important;}
.audit-card{padding:0!important;border-radius:30px!important;}
.audit-card-top{padding:30px!important;background:linear-gradient(145deg,rgba(200,168,107,.13),rgba(255,255,255,.035))!important;border-bottom:1px solid rgba(255,255,255,.09)!important;}
.audit-card-top-tag{display:inline-flex!important;color:#C8A86B!important;font:900 11px/1 "Urbanist",Arial,sans-serif!important;letter-spacing:.10em!important;text-transform:uppercase!important;margin-bottom:14px!important;}
.audit-card-top h3{font:900 clamp(28px,3vw,42px)/1 "Urbanist",Arial,sans-serif!important;letter-spacing:-.04em!important;color:#fff!important;margin:0 0 12px!important;}
.audit-card-top h3 em{font-style:normal!important;color:#C8A86B!important;}
.audit-card-top p{color:rgba(255,255,255,.68)!important;line-height:1.6!important;margin:0 0 18px!important;}
.audit-checklist{display:flex!important;gap:8px!important;flex-wrap:wrap!important;}
.audit-check-pill{display:inline-flex!important;align-items:center!important;gap:7px!important;padding:8px 10px!important;border-radius:999px!important;background:rgba(0,0,0,.18)!important;border:1px solid rgba(200,168,107,.18)!important;color:#fff!important;font-size:12px!important;font-weight:800!important;}
.audit-card-body{padding:28px!important;}
#auditForm{display:grid!important;gap:16px!important;}
.audit-field label,.form-group label{display:block!important;margin-bottom:8px!important;color:#fff!important;font:900 13px/1 "Urbanist",Arial,sans-serif!important;letter-spacing:.03em!important;}
.audit-field input,.audit-field select,.form-group input,.form-group select,.form-group textarea{width:100%!important;min-height:50px!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:14px!important;background:rgba(255,255,255,.065)!important;color:#fff!important;padding:14px 15px!important;outline:none!important;box-shadow:none!important;}
.audit-field select,.form-group select{appearance:auto!important;color:#fff!important;background-color:#101b2b!important;}
.audit-fine-print{color:rgba(255,255,255,.52)!important;font-size:12px!important;text-align:center!important;margin:0!important;}
.audit-success{display:none!important;}
.audit-trust{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:14px!important;margin-top:24px!important;}
.audit-trust-item{padding:16px!important;border-radius:18px!important;border:1px solid rgba(200,168,107,.16)!important;background:rgba(255,255,255,.04)!important;text-align:center!important;color:#fff!important;}

/* 5. Blog repair */
.blog-section{background:#07111F!important;}
.blog-card{display:flex!important;flex-direction:column!important;min-height:100%!important;padding:0!important;}
.blog-card-img{display:block!important;aspect-ratio:16/10!important;overflow:hidden!important;background:#111!important;}
.blog-card-img img{width:100%!important;height:100%!important;object-fit:cover!important;transition:transform .35s ease!important;}
.blog-card:hover .blog-card-img img{transform:scale(1.04)!important;}
.blog-card-body{display:flex!important;flex-direction:column!important;gap:10px!important;padding:22px!important;flex:1!important;}
.blog-card-cat{color:#C8A86B!important;font:900 11px/1 "Urbanist",Arial,sans-serif!important;text-transform:uppercase!important;letter-spacing:.11em!important;}
.blog-card-title{font:900 22px/1.08 "Urbanist",Arial,sans-serif!important;letter-spacing:-.03em!important;margin:0!important;color:#fff!important;}
.blog-card-title a{color:#fff!important;}
.blog-card-excerpt{color:rgba(255,255,255,.66)!important;line-height:1.58!important;margin:0!important;}
.blog-card-foot{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;margin-top:auto!important;padding-top:10px!important;}
.blog-card-date{color:rgba(255,255,255,.52)!important;font-size:13px!important;}
.blog-card-link{color:#C8A86B!important;font-weight:900!important;}

/* 6. FAQ repair */
.faq-wrap{display:grid!important;grid-template-columns:1fr!important;gap:18px!important;max-width:980px!important;margin:0 auto!important;}
.faq-column{display:grid!important;gap:14px!important;}
.faq-item{padding:0!important;}
.faq-q{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;width:100%!important;padding:20px 22px!important;cursor:pointer!important;color:#fff!important;font:900 18px/1.2 "Urbanist",Arial,sans-serif!important;}
.faq-ico{width:34px!important;height:34px!important;min-width:34px!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:rgba(200,168,107,.12)!important;color:#C8A86B!important;border:1px solid rgba(200,168,107,.22)!important;transition:.25s ease!important;}
.faq-a{display:none!important;padding:0 22px 22px!important;color:rgba(255,255,255,.68)!important;line-height:1.68!important;}
.faq-item.open .faq-a{display:block!important;}
.faq-item.open .faq-ico{transform:rotate(45deg)!important;background:#C8A86B!important;color:#07111F!important;}

/* 7. Quote multi step repair */
.form-bg{background:radial-gradient(circle at 50% 0,rgba(200,168,107,.08),transparent 30%),#07111F!important;}
.form-card{max-width:960px!important;margin:0 auto!important;padding:34px!important;border-radius:30px!important;}
.form-progress{display:grid!important;grid-template-columns:1fr 70px 1fr 70px 1fr!important;align-items:center!important;gap:12px!important;margin-bottom:32px!important;}
.progress-step{display:flex!important;align-items:center!important;gap:10px!important;color:rgba(255,255,255,.56)!important;font:900 13px/1 "Urbanist",Arial,sans-serif!important;text-transform:uppercase!important;letter-spacing:.06em!important;}
.progress-step span{width:34px!important;height:34px!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.16)!important;display:grid!important;place-items:center!important;background:rgba(255,255,255,.05)!important;color:#fff!important;}
.progress-step.active{color:#C8A86B!important;}.progress-step.active span{background:#C8A86B!important;color:#07111F!important;border-color:#C8A86B!important;}
.progress-line{height:1px!important;background:rgba(255,255,255,.13)!important;}
.form-step{display:none!important;}
.form-step.active{display:block!important;}
.form-section-title{font:900 24px/1 "Urbanist",Arial,sans-serif!important;color:#fff!important;letter-spacing:-.02em!important;margin-bottom:22px!important;}
.form-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;margin-bottom:18px!important;}
.form-row.single{grid-template-columns:1fr!important;}
.form-group textarea{min-height:130px!important;resize:vertical!important;}
.radio-group,.check-group{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
.radio-label,.check-label{display:flex!important;align-items:center!important;gap:10px!important;padding:13px!important;border-radius:14px!important;border:1px solid rgba(255,255,255,.12)!important;background:rgba(255,255,255,.045)!important;color:rgba(255,255,255,.78)!important;font-size:14px!important;line-height:1.35!important;}
.radio-label input,.check-label input{width:auto!important;min-height:0!important;}
.form-nav{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;margin-top:26px!important;}
.form-note{color:rgba(255,255,255,.56)!important;font-size:12px!important;margin-top:12px!important;}
.captcha-box{display:flex!important;align-items:center!important;gap:12px!important;padding:14px!important;border-radius:16px!important;background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.12)!important;}
.success-msg{display:none!important;}

/* CTA / footer */
.cta-card{position:relative!important;text-align:center!important;padding:70px 36px!important;border-radius:34px!important;overflow:hidden!important;background:radial-gradient(circle at 50% 50%,rgba(200,168,107,.12),transparent 45%),linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025))!important;}
.cta-h{font:900 clamp(38px,4.5vw,72px)/.95 "Urbanist",Arial,sans-serif!important;letter-spacing:-.055em!important;color:#fff!important;margin:18px 0!important;}.cta-h em{color:#C8A86B!important;font-style:normal!important;}
.cta-sub{max-width:700px!important;margin:0 auto 28px!important;color:rgba(255,255,255,.70)!important;font-size:18px!important;line-height:1.68!important;}.cta-btns{display:flex!important;justify-content:center!important;gap:14px!important;flex-wrap:wrap!important;}
footer{position:relative!important;z-index:5!important;background:#050B14!important;border-top:1px solid rgba(255,255,255,.08)!important;padding:60px 0 28px!important;}
.foot-grid{display:grid!important;grid-template-columns:1.3fr repeat(3,1fr)!important;gap:40px!important;}
.foot-desc{color:rgba(255,255,255,.62)!important;line-height:1.68!important;max-width:360px!important;}.foot-col h5{font:900 16px/1 "Urbanist",Arial,sans-serif!important;color:#fff!important;text-transform:uppercase!important;letter-spacing:.08em!important;margin:0 0 16px!important;}.foot-col ul{list-style:none!important;padding:0!important;margin:0!important;display:grid!important;gap:10px!important;}.foot-col a{color:rgba(255,255,255,.62)!important;}.foot-col a:hover{color:#C8A86B!important;}.foot-bottom{width:min(1180px,calc(100% - 44px))!important;margin:36px auto 0!important;padding-top:22px!important;border-top:1px solid rgba(255,255,255,.08)!important;color:rgba(255,255,255,.46)!important;font-size:13px!important;}

@media(max-width:1100px){.nav-links,.nav-phone,.nav-right>.btn{display:none!important}.hamburger{display:flex!important;width:44px!important;height:44px!important;border:1px solid rgba(255,255,255,.16)!important;background:rgba(255,255,255,.06)!important;border-radius:12px!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;gap:5px!important}.hamburger span{display:block!important;width:21px!important;height:2px!important;background:#fff!important}.hero-inner,.about-grid,.audit-cols{grid-template-columns:1fr!important}.hero-image-panel{justify-self:start!important}.foot-grid{grid-template-columns:1fr 1fr!important}}
@media(max-width:900px){section{padding:82px 0!important}.services-grid,.proc-grid,.contractor-review-grid,.blog-grid,.port-grid{grid-template-columns:1fr!important}.form-progress{grid-template-columns:1fr!important}.progress-line{display:none!important}.audit-trust{grid-template-columns:1fr 1fr!important}.radio-group,.check-group,.form-row{grid-template-columns:1fr!important}.u-style-041{display:block!important;text-align:center!important}.blog-view-all{margin-top:18px!important}.hero{min-height:auto!important;padding-top:100px!important}.hero-project-stats{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:640px){.container,.nav-inner,.hero-inner,.foot-grid{width:min(100% - 28px,1180px)!important}.hero-h1{font-size:clamp(44px,13vw,62px)!important}.btn,.audit-submit-btn{width:100%!important}.audit-card-top,.audit-card-body,.form-card{padding:22px!important}.foot-grid{grid-template-columns:1fr!important}.cta-card{padding:46px 20px!important}.ba-handle{width:48px!important;height:48px!important}.site-logo{max-height:38px!important}}




/* =========================================================
   ROUND 2 LIVE REPAIR PATCH
   Fixes nav alignment, audit form top, 4-step row, FAQ grid,
   before/after layout, quote form steps, CTA spacing, footer.
   ========================================================= */

/* 1) Center nav and stop it hugging the left */
.nav{
  left:0 !important;
  right:0 !important;
  width:100% !important;
}
.nav-inner{
  width:min(1240px, calc(100% - 48px)) !important;
  max-width:1240px !important;
  margin:0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}
.nav-logo{flex:0 0 auto !important;}
.nav-links{
  flex:1 1 auto !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:22px !important;
}
.nav-right{flex:0 0 auto !important;}

/* Clean stray hidden/text fragments under nav/hero */
body > script,
.hero > script{display:none !important;}
.hero .debug,
.hero .code,
.hero [class*="debug"],
.hero [id*="debug"]{display:none !important;}

/* 2) Marquee animation restore */
.marquee-wrap{
  overflow:hidden !important;
  white-space:nowrap !important;
  position:relative !important;
}
.marquee,
.marquee-track{
  display:inline-flex !important;
  align-items:center !important;
  gap:34px !important;
  width:max-content !important;
  min-width:200% !important;
  animation:wdmMarquee 28s linear infinite !important;
  will-change:transform !important;
}
.marquee span,
.marquee-track span{
  flex:0 0 auto !important;
}
@keyframes wdmMarquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* 3) Before/after slider + popup visual repair */
.ba-card,
.ba-slider,
.before-after,
[class*="before-after"],
[class*="ba-card"]{
  position:relative !important;
  overflow:hidden !important;
}
.ba-slider img,
.before-after img,
.ba-card img{
  user-select:none !important;
}
.ba-range{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  opacity:0 !important;
  cursor:ew-resize !important;
  z-index:20 !important;
}
.ba-divider{
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  left:var(--pos,50%) !important;
  width:2px !important;
  background:rgba(255,255,255,.88) !important;
  z-index:16 !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 0 28px rgba(200,168,107,.35) !important;
}
.ba-divider:before,
.ba-handle{
  content:"↔" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:46px !important;
  height:46px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  background:var(--gold,#C8A86B) !important;
  color:#07111F !important;
  font-weight:900 !important;
  box-shadow:0 12px 34px rgba(0,0,0,.3) !important;
}
.wdm-ba-pop-hint{
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:21;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(7,17,31,.78);
  border:1px solid rgba(200,168,107,.3);
  color:#fff;
  font:900 11px/1 "Urbanist",system-ui,sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  pointer-events:none;
}
.wdm-lightbox{
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(1,5,12,.88);
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px;
}
.wdm-lightbox.open{display:flex !important;}
.wdm-lightbox-inner{
  position:relative;
  width:min(1120px,96vw);
  max-height:92vh;
  border-radius:26px;
  overflow:hidden;
  background:#07111F;
  border:1px solid rgba(200,168,107,.35);
  box-shadow:0 40px 120px rgba(0,0,0,.55);
}
.wdm-lightbox img{
  width:100%;
  max-height:88vh;
  object-fit:contain;
  background:#050b14;
}
.wdm-lightbox-close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(7,17,31,.82);
  color:#fff;
  font-size:22px;
  cursor:pointer;
}

/* 4) Audit form top section repair */
.audit-card,
#audit .audit-card,
.audit-wrap,
#audit form{
  max-width:1120px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
#audit .audit-card{
  border-radius:32px !important;
  overflow:hidden !important;
}
#audit .audit-top,
#audit .audit-head,
#audit .audit-intro,
#audit .form-top,
#audit .audit-card > .audit-header{
  display:grid !important;
  grid-template-columns:1.05fr .8fr .75fr !important;
  gap:34px !important;
  align-items:start !important;
  padding:44px 48px !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
}
#audit .audit-top h2,
#audit .audit-head h2,
#audit .audit-intro h2,
#audit .form-top h2{
  font-size:clamp(48px,4.4vw,78px) !important;
  line-height:.9 !important;
  letter-spacing:-.065em !important;
  max-width:420px !important;
  margin:0 !important;
}
#audit .audit-top p,
#audit .audit-head p,
#audit .audit-intro p,
#audit .form-top p{
  font-size:clamp(18px,1.4vw,26px) !important;
  line-height:1.45 !important;
  color:rgba(255,255,255,.78) !important;
  margin:0 !important;
}
#audit .audit-pills,
#audit .audit-tags,
#audit .audit-checks{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  justify-content:flex-start !important;
  align-content:flex-start !important;
}
#audit .audit-pills span,
#audit .audit-tags span,
#audit .audit-checks span,
#audit .audit-pill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:13px 18px !important;
  min-height:46px !important;
  border-radius:999px !important;
  border:1px solid rgba(200,168,107,.25) !important;
  background:rgba(7,17,31,.42) !important;
  color:#fff !important;
  font-weight:900 !important;
}
#audit form{
  padding:32px 48px 44px !important;
}
#audit label{
  display:block !important;
  margin:0 0 10px !important;
}
#audit input,
#audit select,
#audit textarea{
  min-height:56px !important;
}

/* 5) Blog text restore */
.blog-card{
  display:flex !important;
  flex-direction:column !important;
  min-height:100% !important;
}
.blog-card img,
.blog-img,
.blog-card .blog-media img{
  width:100% !important;
  aspect-ratio:16/10 !important;
  height:auto !important;
  object-fit:cover !important;
}
.blog-card .blog-content,
.blog-card .card-body,
.blog-card > div:not(.blog-media){
  display:block !important;
}
.blog-card h3,
.blog-card .blog-title{
  display:block !important;
  margin-top:16px !important;
  color:#fff !important;
}
.blog-card p,
.blog-card .blog-excerpt{
  display:block !important;
  color:rgba(255,255,255,.68) !important;
}

/* 6) 4 steps in one line */
#process .process-grid,
.process-grid,
.steps-grid,
.launch-steps,
#process .cards-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important;
  align-items:stretch !important;
}
#process .process-card,
.step-card{
  min-width:0 !important;
}

/* 7) FAQ two columns + working opened state */
#faq .faq-grid,
.faq-grid,
.faq-list{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
  align-items:start !important;
}
.faq-item{
  cursor:pointer !important;
}
.faq-q,
.faq-question{
  cursor:pointer !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:18px !important;
}
.faq-q:after,
.faq-question:after{
  content:"+" !important;
  color:var(--gold,#C8A86B) !important;
  font-weight:900 !important;
  flex:0 0 auto !important;
}
.faq-item.open .faq-q:after,
.faq-item.active .faq-q:after,
.faq-item.open .faq-question:after,
.faq-item.active .faq-question:after{
  content:"–" !important;
}
.faq-a,
.faq-answer,
.faq-item p:not(.faq-q):not(.faq-question){
  display:none !important;
}
.faq-item.open .faq-a,
.faq-item.active .faq-a,
.faq-item.open .faq-answer,
.faq-item.active .faq-answer,
.faq-item.open p:not(.faq-q):not(.faq-question),
.faq-item.active p:not(.faq-q):not(.faq-question){
  display:block !important;
}

/* 8) Start project multi-step form display */
.quote-step,
.form-step,
[data-step]{
  display:none;
}
.quote-step.active,
.form-step.active,
[data-step].active{
  display:block !important;
}
.quote-card form,
#quote form{
  position:relative !important;
}
.quote-actions,
.form-actions{
  display:flex !important;
  gap:12px !important;
  align-items:center !important;
  justify-content:space-between !important;
  margin-top:20px !important;
}
.step-indicator,
.form-progress{
  display:flex !important;
  gap:8px !important;
  margin-bottom:20px !important;
}
.step-indicator span,
.form-progress span{
  width:10px !important;
  height:10px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.18) !important;
}
.step-indicator span.active,
.form-progress span.active{
  background:var(--gold,#C8A86B) !important;
}

/* 9) Let's talk section / CTA spacing */
.lets-talk,
.talk-section,
.final-cta,
.cta-section,
#quote + section{
  padding-top:70px !important;
  padding-bottom:70px !important;
}
.final-cta .container,
.cta-section .container,
.lets-talk .container,
.talk-section .container{
  max-width:1120px !important;
}
.final-cta-card,
.cta-card,
.lets-talk-card{
  padding:52px !important;
  border-radius:28px !important;
  min-height:0 !important;
}

/* 10) Footer polish */
.footer,
footer{
  padding:56px 0 28px !important;
  background:#050B14 !important;
  border-top:1px solid rgba(200,168,107,.16) !important;
}
.footer .container,
footer .container{
  max-width:1180px !important;
  margin:0 auto !important;
}
.footer-grid,
footer .footer-grid{
  display:grid !important;
  grid-template-columns:1.2fr repeat(3,1fr) !important;
  gap:34px !important;
}
.footer a{color:rgba(255,255,255,.68) !important;}
.footer a:hover{color:var(--gold,#C8A86B) !important;}

/* Responsive repair */
@media (max-width:1100px){
  .nav-links{display:none !important;}
  .hamburger{display:flex !important;}
  #process .process-grid,
  .process-grid,
  .steps-grid,
  .launch-steps,
  #process .cards-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  #audit .audit-top,
  #audit .audit-head,
  #audit .audit-intro,
  #audit .form-top,
  #audit .audit-card > .audit-header{
    grid-template-columns:1fr !important;
    padding:34px 28px !important;
  }
}
@media (max-width:760px){
  .nav-inner{width:min(100% - 28px,1240px) !important;}
  #faq .faq-grid,
  .faq-grid,
  .faq-list{
    grid-template-columns:1fr !important;
  }
  #process .process-grid,
  .process-grid,
  .steps-grid,
  .launch-steps,
  #process .cards-grid{
    grid-template-columns:1fr !important;
  }
  #audit form{padding:26px 22px 34px !important;}
  .footer-grid,
  footer .footer-grid{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   ROUND 3 — DEFINITIVE FIXES (overrides all prior patches)
   ========================================================= */

/* ── NAV: force full-width, kill the pill-float transform ── */
.nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  transform: none !important;
  border-radius: 0 !important;
  padding: 14px 0 !important;
  background: rgba(7,17,31,.82) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.28) !important;
  z-index: 9000 !important;
}
.nav-inner {
  width: min(1200px, calc(100% - 48px)) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.nav-logo { flex: 0 0 auto !important; }
.nav-links {
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 24px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.nav-links a {
  font: 900 12px/1 "Urbanist", Arial, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: rgba(255,255,255,.75) !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
}
.nav-links a:hover { color: #C8A86B !important; background: none !important; }
.nav-right { flex: 0 0 auto !important; display: flex !important; align-items: center !important; gap: 12px !important; }
.nav-phone { font: 900 13px/1 "Urbanist", Arial, sans-serif !important; color: #fff !important; white-space: nowrap !important; }
.hamburger { display: none !important; }

@media (max-width: 1060px) {
  .nav-links, .nav-phone, .nav-right .btn { display: none !important; }
  .hamburger {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 44px !important;
    height: 44px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(255,255,255,.06) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
  }
  .hamburger span { display: block !important; width: 20px !important; height: 2px !important; background: #fff !important; border-radius: 2px !important; }
}

/* ── PROCESS: force proc-grid to 4 columns ── */
.proc-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}
@media (max-width: 1060px) {
  .proc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  .proc-grid { grid-template-columns: 1fr !important; }
}

/* ── FAQ: animated accordion ── */
.faq-a {
  display: block !important; /* block so scrollHeight works; JS controls max-height */
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition: max-height .3s ease, opacity .25s ease !important;
  color: rgba(255,255,255,.68) !important;
  line-height: 1.7 !important;
  padding: 0 !important;
  margin-top: 0 !important;
}
.faq-item.open .faq-a {
  max-height: 600px !important;
  opacity: 1 !important;
  padding-top: 12px !important;
}
/* Remove the CSS :after +/– so JS controls it */
.faq-q:after, .faq-question:after { display: none !important; }
/* Instead use the .faq-ico SVG that's already in HTML */
.faq-ico { flex: 0 0 auto; display: flex; align-items: center; color: #C8A86B; transition: transform .25s ease; }
.faq-item.open .faq-ico { transform: rotate(45deg); }
.faq-q {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  cursor: pointer !important;
  padding: 4px 0 !important;
  font-weight: 900 !important;
  user-select: none !important;
}

/* ── QUOTE MULTI-STEP FORM ── */
.form-step { display: none !important; }
.form-step.active { display: block !important; }

/* Progress bar styling */
.form-progress {
  display: grid !important;
  grid-template-columns: 1fr 48px 1fr 48px 1fr !important;
  align-items: center !important;
  gap: 0 !important;
  margin-bottom: 32px !important;
}
.progress-step {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: rgba(255,255,255,.45) !important;
  font: 900 12px/1 "Urbanist", Arial, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  cursor: pointer !important;
  transition: color .2s !important;
}
.progress-step span {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.04) !important;
  color: #fff !important;
  flex: 0 0 auto !important;
  font: 900 13px/1 "Urbanist", Arial, sans-serif !important;
}
.progress-step strong { font: 900 11px/1 "Urbanist", Arial, sans-serif !important; }
.progress-step.active { color: #C8A86B !important; }
.progress-step.active span { background: #C8A86B !important; color: #07111F !important; border-color: #C8A86B !important; }
.progress-line {
  height: 2px !important;
  background: rgba(255,255,255,.12) !important;
  border-radius: 2px !important;
  width: 100% !important;
}
@media (max-width: 640px) {
  .form-progress { grid-template-columns: 1fr 24px 1fr 24px 1fr !important; }
  .progress-step strong { display: none !important; }
  .progress-line { display: block !important; }
}

/* ── AUDIT FORM TOP section: clean layout ── */
.audit-card-top {
  padding: 28px 32px !important;
  background: linear-gradient(145deg, rgba(200,168,107,.12), rgba(255,255,255,.03)) !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  display: block !important;
}
.audit-card-top-tag {
  display: inline-block !important;
  color: #C8A86B !important;
  font: 900 11px/1 "Urbanist", Arial, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .10em !important;
  margin-bottom: 14px !important;
  padding: 6px 14px !important;
  border: 1px solid rgba(200,168,107,.3) !important;
  border-radius: 999px !important;
  background: rgba(200,168,107,.08) !important;
}
.audit-card-top h3 {
  font: 900 clamp(26px, 2.8vw, 38px)/1.05 "Urbanist", Arial, sans-serif !important;
  letter-spacing: -.04em !important;
  margin: 0 0 12px !important;
}
.audit-card-top h3 em { font-style: normal !important; color: #C8A86B !important; }
.audit-card-top p { color: rgba(255,255,255,.7) !important; line-height: 1.6 !important; margin: 0 0 16px !important; font-size: 15px !important; }
.audit-checklist { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 0 !important; }
.audit-check-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 7px 13px !important;
  border: 1px solid rgba(200,168,107,.22) !important;
  border-radius: 999px !important;
  background: rgba(200,168,107,.07) !important;
  font-size: 12px !important;
  color: rgba(255,255,255,.8) !important;
  white-space: nowrap !important;
}

/* ── BEFORE/AFTER MODAL ── */
.wdm-ba-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(1,5,12,.9);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.wdm-ba-modal.open { display: flex !important; }
.wdm-ba-modal-box {
  position: relative;
  width: min(1000px, 96vw);
  max-height: 90vh;
  border-radius: 24px;
  overflow: hidden;
  background: #07111F;
  border: 1px solid rgba(200,168,107,.3);
  box-shadow: 0 40px 120px rgba(0,0,0,.6);
}
.wdm-ba-modal-body { width: 100%; }
.wdm-ba-modal-body .ba-slider { cursor: default !important; border-radius: 0 !important; }
.wdm-ba-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(7,17,31,.85);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 1;
}

/* Click-to-enlarge hint on BA slider */
.ba-pop-hint {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 22;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(7,17,31,.76);
  border: 1px solid rgba(200,168,107,.28);
  color: #fff;
  font: 900 11px/1 "Urbanist", sans-serif;
  pointer-events: none;
  letter-spacing: .04em;
}

/* BA focus overlay: must sit above base image */
.ba-image-wrap {
  position: relative !important;
  overflow: hidden !important;
}
.ba-focus {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
}

/* ── BA: since a single composite image is used, make
        .ba-focus overlay show image via background clone ──  */
.ba-image-wrap img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  position: relative !important;
  z-index: 1 !important;
}
.ba-label {
  position: absolute !important;
  top: 14px !important;
  z-index: 10 !important;
  background: rgba(7,17,31,.72) !important;
  color: #fff !important;
  font: 900 11px/1 "Urbanist", sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  pointer-events: none !important;
}
.ba-label-before { left: 14px !important; }
.ba-label-after  { right: 14px !important; }
.ba-range {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: ew-resize !important;
  z-index: 20 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.ba-divider {
  position: absolute !important;
  top: 0 !important; bottom: 0 !important;
  left: var(--pos, 50%) !important;
  width: 2px !important;
  background: rgba(255,255,255,.9) !important;
  z-index: 15 !important;
  pointer-events: none !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 0 18px rgba(200,168,107,.4) !important;
}
.ba-handle {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: #C8A86B !important;
  color: #07111F !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
}


/* =========================================================
   ROUND 4 — TARGETED FIXES
   ========================================================= */

/* ── 1. FORM PROGRESS BAR: fix clipping of circles ── */
/* form-card has overflow:hidden which clips the progress circles */
.form-card {
  overflow: visible !important;
  padding: 40px 36px 36px !important;
}
/* The form itself needs overflow visible too */
#quoteForm {
  overflow: visible !important;
}
.form-progress {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin-bottom: 36px !important;
  padding: 4px 0 8px !important;
  grid-template-columns: unset !important; /* kill the grid from round 3 */
}
.progress-step {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: rgba(255,255,255,.45) !important;
  font: 900 12px/1 "Urbanist", Arial, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
.progress-step span {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,.2) !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.55) !important;
  flex: 0 0 auto !important;
  font: 900 14px/1 "Urbanist", Arial, sans-serif !important;
  transition: background .25s, border-color .25s, color .25s !important;
}
.progress-step strong {
  font: 900 11px/1 "Urbanist", Arial, sans-serif !important;
  transition: color .25s !important;
}
.progress-step.active {
  color: #C8A86B !important;
}
.progress-step.active span {
  background: #C8A86B !important;
  color: #07111F !important;
  border-color: #C8A86B !important;
  box-shadow: 0 0 0 4px rgba(200,168,107,.2) !important;
}
.progress-line {
  flex: 1 1 auto !important;
  height: 2px !important;
  background: rgba(255,255,255,.12) !important;
  border-radius: 2px !important;
  margin: 0 10px !important;
  width: auto !important;
  display: block !important;
}
@media (max-width: 640px) {
  .progress-step strong { display: none !important; }
  .progress-step span { width: 30px !important; height: 30px !important; font-size: 12px !important; }
  .form-card { padding: 24px 18px 28px !important; }
}

/* ── 2. CTA SECTION: kill the massive top padding ── */
/* The u-style-048 SVG element is absolutely positioned but sitting in flow */
.u-style-048 {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
}
.u-style-048 svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
.cta-card {
  position: relative !important;
  text-align: center !important;
  padding: 72px 48px 56px !important;
  border-radius: 32px !important;
  overflow: hidden !important;
  background: radial-gradient(ellipse at 50% 0%, rgba(200,168,107,.16), transparent 55%),
              linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)) !important;
  border: 1px solid rgba(200,168,107,.18) !important;
  box-shadow: 0 30px 100px rgba(0,0,0,.3) !important;
}
/* All direct children of cta-card need z-index above the abs SVG */
.cta-card > *:not(.u-style-048) {
  position: relative !important;
  z-index: 1 !important;
}
.u-style-049 {
  color: rgba(255,255,255,.48) !important;
  font-size: 13px !important;
  margin-top: 18px !important;
  letter-spacing: .02em !important;
}

/* ── 3. FAQ: 2-column layout with proper spacing ── */
.faq-wrap {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 28px !important;
  max-width: 1060px !important;
  margin: 2rem auto 0 !important;
  align-items: start !important;
}
.faq-column {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.faq-item {
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.02)) !important;
  overflow: hidden !important;
  transition: border-color .2s !important;
}
.faq-item:hover {
  border-color: rgba(200,168,107,.25) !important;
}
.faq-item.open {
  border-color: rgba(200,168,107,.3) !important;
  background: linear-gradient(145deg, rgba(200,168,107,.07), rgba(255,255,255,.025)) !important;
}
.faq-q {
  padding: 18px 20px !important;
  font: 900 15px/1.35 "Urbanist", Arial, sans-serif !important;
}
.faq-ico svg {
  stroke: #C8A86B !important;
  transition: transform .25s ease !important;
  width: 14px !important;
  height: 14px !important;
}
.faq-item.open .faq-ico svg {
  transform: rotate(45deg) !important;
}
.faq-a {
  padding: 0 20px !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,.65) !important;
}
.faq-item.open .faq-a {
  padding-bottom: 18px !important;
}
@media (max-width: 760px) {
  .faq-wrap { grid-template-columns: 1fr !important; gap: 10px !important; }
}

/* ── 4. AUDIT TRUST BADGES: redesigned as inline strip ── */
.audit-trust {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  margin-top: 22px !important;
  padding: 18px 22px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(200,168,107,.18) !important;
  background: rgba(7,17,31,.5) !important;
  grid-template-columns: unset !important;
}
.audit-trust-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 20px !important;
  font: 900 12px/1 "Urbanist", Arial, sans-serif !important;
  color: rgba(255,255,255,.82) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  white-space: nowrap !important;
  border: none !important;
  background: none !important;
  border-radius: 0 !important;
}
.audit-trust-item svg {
  flex: 0 0 auto !important;
  opacity: .9 !important;
}
.audit-trust-div {
  width: 1px !important;
  height: 28px !important;
  background: rgba(200,168,107,.25) !important;
  flex: 0 0 auto !important;
  display: block !important;
  border-radius: 1px !important;
}
@media (max-width: 860px) {
  .audit-trust { justify-content: flex-start !important; padding: 14px 16px !important; }
  .audit-trust-div { display: none !important; }
  .audit-trust-item { padding: 6px 14px 6px 0 !important; }
}

/* ── 5. BEFORE/AFTER: placeholder images via SVG data URIs ── */
/* We inject placeholder before/after via CSS until real images are ready */
.ba-image-wrap {
  aspect-ratio: 4/3 !important;
  background: #06101D !important;
}
.ba-image-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* Focus overlay: shows "Before" side (left half of composite) */
.ba-focus {
  background-image: url('/images/Before-After.png') !important;
  background-size: cover !important;
  background-position: left center !important;
}
/* Placeholder if image not found — styled dark card */
.ba-placeholder-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
  z-index: 0;
}

/* ── BEFORE/AFTER: two-layer SVG placeholder structure ── */
.ba-image-wrap {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  aspect-ratio: 4 / 3 !important;
  background: #06101D !important;
}
.ba-img-after,
.ba-svg-after {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
}
.ba-img-before,
.ba-svg-before {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 3 !important;
  clip-path: inset(0 50% 0 0) !important; /* initial 50% reveal */
}
/* Remove old single-image focus overlay */
.ba-focus { display: none !important; }


/* =========================================================
   ROUND 5 — DEFINITIVE FIXES: Progress bar + BA slider
   ========================================================= */

/* ── PROGRESS BAR: nuclear option — push it down with padding ──
   The card may have overflow:hidden at any ancestor level.
   Solution: give the progress area top padding so circles are never at the edge,
   and wrap the form-card in an outer container that IS overflow:visible.
   ── */
.form-card,
.form-card *:not(input):not(select):not(textarea):not(.ba-range) {
  overflow: visible !important;
}
/* But BA image-wrap and BA slider still need hidden */
.ba-image-wrap,
.ba-slider,
[data-ba-slider] {
  overflow: hidden !important;
}

/* The reveal wrapper around form-card also clips */
.reveal.form-card-wrap,
.form-card-wrap {
  overflow: visible !important;
}

/* Push form-progress down from the card edge so circles aren't clipped */
#quoteForm {
  padding-top: 8px !important;
  overflow: visible !important;
}
.form-progress {
  display: flex !important;
  align-items: center !important;
  padding: 12px 4px 16px !important;
  margin-bottom: 24px !important;
  overflow: visible !important;
}
.progress-step {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
.progress-step span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.55) !important;
  font: 900 14px/1 "Urbanist", Arial, sans-serif !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}
.progress-step.active span {
  background: #C8A86B !important;
  color: #07111F !important;
  border-color: #C8A86B !important;
  box-shadow: 0 0 0 5px rgba(200,168,107,.18) !important;
}
.progress-step.active {
  color: #C8A86B !important;
}
.progress-line {
  flex: 1 !important;
  height: 2px !important;
  background: rgba(255,255,255,.1) !important;
  margin: 0 8px !important;
  display: block !important;
  width: auto !important;
  border-radius: 2px !important;
  overflow: visible !important;
}

/* ── BEFORE/AFTER SLIDER: clean two-image reveal ── */
/* 
  Structure:
    .ba-slider
      .ba-image-wrap
        img.ba-img-after      ← full size AFTER image (base)
        svg.ba-svg-after      ← fallback SVG for after
        img.ba-img-before     ← full size BEFORE image (clipped left portion)
        svg.ba-svg-before     ← fallback SVG for before (clipped)
        .ba-divider > .ba-handle
        input.ba-range
        .ba-label-before / .ba-label-after
*/

.ba-slider,
[data-ba-slider] {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  cursor: ew-resize !important;
}

.ba-image-wrap {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 11 !important;
  background: #06101D !important;
}

/* AFTER layer — sits in full behind everything */
img.ba-img-after,
svg.ba-svg-after {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
  display: block !important;
  clip-path: none !important;
}

/* BEFORE layer — clips from right; JS moves clip as slider moves */
img.ba-img-before,
svg.ba-svg-before {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 3 !important;
  display: block !important;
  /* Start at 50% reveal, JS updates this */
  clip-path: inset(0 50% 0 0) !important;
  transition: none !important;
}

/* Divider line */
.ba-divider {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important; /* JS sets inline style */
  width: 3px !important;
  background: #fff !important;
  z-index: 10 !important;
  pointer-events: none !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 0 20px rgba(200,168,107,.5) !important;
  transform: translateX(-50%) !important;
}

/* Handle circle on divider */
.ba-handle {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: #C8A86B !important;
  color: #07111F !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.4) !important;
  border: 3px solid #fff !important;
}

/* Range input — invisible but covers the whole slider for drag */
.ba-range {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: ew-resize !important;
  z-index: 20 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Labels */
.ba-label {
  position: absolute !important;
  top: 14px !important;
  z-index: 8 !important;
  background: rgba(5,11,20,.75) !important;
  backdrop-filter: blur(6px) !important;
  color: #fff !important;
  font: 900 11px/1 "Urbanist", Arial, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  pointer-events: none !important;
}
.ba-label-before { left: 14px !important; }
.ba-label-after  { right: 14px !important; }

/* Enlarge hint */
.ba-pop-hint {
  position: absolute !important;
  bottom: 14px !important;
  right: 14px !important;
  z-index: 9 !important;
  background: rgba(5,11,20,.72) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(200,168,107,.3) !important;
  color: #fff !important;
  font: 900 11px/1 "Urbanist", sans-serif !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  letter-spacing: .05em !important;
}

/* Kill old .ba-focus (single-image approach) */
.ba-focus { display: none !important; }


/* =========================================================
   ROUND 6 — BEFORE/AFTER SLIDER (clean rebuild, width-based)
   ========================================================= */

/* Outer slider box */
.ba-slider {
  position: relative !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  cursor: col-resize !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.35) !important;
  border: 1px solid rgba(200,168,107,.2) !important;
}

/* The comparison wrap — contains both sides */
.ba-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 600 / 420 !important;
  overflow: hidden !important;
  display: block !important;
}

/* Each side fills the full wrap */
.ba-side {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
}
.ba-side svg,
.ba-side img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* AFTER: full width, sits beneath */
.ba-after {
  z-index: 1 !important;
  width: 100% !important;
}

/* BEFORE: clips from left — JS sets width to reveal left portion */
.ba-before {
  z-index: 3 !important;
  width: 50% !important;       /* JS updates this */
  right: auto !important;
  left: 0 !important;
}

/* Labels (Before / After tags) */
.ba-tag {
  position: absolute !important;
  top: 12px !important;
  z-index: 10 !important;
  background: rgba(5,11,20,.8) !important;
  backdrop-filter: blur(6px) !important;
  color: #fff !important;
  font: 900 11px/1 "Urbanist", Arial, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  pointer-events: none !important;
}
.ba-tag-before { left: 12px !important; }
.ba-tag-after  { right: 12px !important; }

/* Vertical divider line */
.ba-divider-line {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;        /* JS updates this */
  width: 3px !important;
  background: #fff !important;
  z-index: 20 !important;
  pointer-events: none !important;
  transform: translateX(-50%) !important;
  box-shadow: 0 0 12px rgba(200,168,107,.6), 0 0 0 1px rgba(0,0,0,.15) !important;
}

/* Arrow handle on divider */
.ba-handle-btn {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: #C8A86B !important;
  color: #07111F !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 3px solid #fff !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.4) !important;
}

/* Invisible full-cover range input */
.ba-range-input {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: col-resize !important;
  z-index: 30 !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-appearance: none !important;
}


/* =========================================================
   ROUND 7 — BA SLIDER: width + overflow fix
   ========================================================= */

/* About grid column for slider — no overflow:hidden, no border clipping */
.about-slider-col {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* BA slider fills its column completely */
.ba-slider {
  position: relative !important;
  width: 100% !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  cursor: col-resize !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.4) !important;
  border: 1px solid rgba(200,168,107,.22) !important;
  background: #06101D !important;
  display: block !important;
}

/* The comparison wrap — square-ish aspect, fills slider width */
.ba-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 600 / 420 !important;
  overflow: hidden !important;
  display: block !important;
}

/* Both sides fill the wrap absolutely */
.ba-side {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  overflow: hidden !important;
}
.ba-side svg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* AFTER: always full width, base layer */
.ba-after {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1 !important;
}

/* BEFORE: starts at 50% width, JS changes this on drag */
.ba-before {
  left: 0 !important;
  width: 50% !important;
  z-index: 3 !important;
  right: auto !important;
}

/* Tags */
.ba-tag {
  position: absolute !important;
  top: 12px !important;
  z-index: 10 !important;
  background: rgba(5,11,20,.82) !important;
  color: #fff !important;
  font: 900 11px/1 "Urbanist", Arial, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}
.ba-tag-before { left: 12px !important; }
/* After tag sits inside .ba-after which is full width, so right:12px works */
.ba-tag-after  { right: 12px !important; position: absolute !important; }

/* Divider line — JS sets left% */
.ba-divider-line {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 3px !important;
  background: #fff !important;
  z-index: 20 !important;
  pointer-events: none !important;
  transform: translateX(-50%) !important;
  box-shadow: 0 0 16px rgba(200,168,107,.7) !important;
}

/* Handle */
.ba-handle-btn {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: #C8A86B !important;
  color: #07111F !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 3px solid #fff !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.5) !important;
}

/* Invisible range input — covers entire ba-wrap */
.ba-range-input {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: col-resize !important;
  z-index: 30 !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Footer bar */
.ba-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 18px !important;
  color: rgba(255,255,255,.55) !important;
  font-size: 13px !important;
  background: rgba(5,11,20,.5) !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
}
.ba-footer strong { color: #fff !important; }

/* About grid: equal columns, aligned center */
.about-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 60px !important;
  align-items: center !important;
}
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .about-slider-col { order: -1 !important; }
}


/* =========================================================
   ROUND 8 — ABOUT SECTION: 2-col layout + self-contained BA
   ========================================================= */

.about-2col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 64px !important;
  align-items: center !important;
}
@media (max-width: 960px) {
  .about-2col { grid-template-columns: 1fr !important; gap: 40px !important; }
}

.about-slider-col { min-width: 0; }
.about-text-col   { min-width: 0; }
.about-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

/* ── Self-contained BA comparator ── */
.ba-comp {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(0,0,0,.45);
  border: 1px solid rgba(200,168,107,.22);
  background: #06101D;
  width: 100%;
  display: block;
}

.ba-comp-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 420;
  overflow: hidden;
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
  display: block;
}

/* After layer — always full width, sits below */
.bac-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}
.bac-after svg { width: 100%; height: 100%; display: block; }

/* Before layer — starts at 50%, JS shrinks/grows via .style.width */
.bac-before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50%;     /* JS controls this */
  height: 100%;
  z-index: 3;
  overflow: hidden;
}
.bac-before svg { 
  position: absolute;
  top: 0; left: 0;
  width: 600px;   /* fixed px so SVG doesn't squash — scales via transform */
  height: 420px;
  max-width: none; /* prevent img{max-width:100%} from squashing it */
}

/* Labels */
.bac-label {
  position: absolute;
  top: 12px;
  z-index: 10;
  background: rgba(5,11,20,.82);
  color: #fff;
  font: 900 11px/1 "Urbanist", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 7px 14px;
  border-radius: 999px;
  pointer-events: none;
}
.bac-label-before { left: 12px; }
.bac-label-after  { right: 12px; }

/* Vertical divider line — JS sets left% */
.bac-line {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 3px;
  background: #fff;
  z-index: 20;
  pointer-events: none;
  transform: translateX(-50%);
  box-shadow: 0 0 16px rgba(200,168,107,.65);
}

/* Handle circle */
.bac-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #C8A86B;
  color: #07111F;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}

.bac-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 18px;
  color: rgba(255,255,255,.5);
  font-size: 13px;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(5,11,20,.4);
}
.bac-footer strong { color: #fff; }

/* Fix: before SVG must fill its container at correct scale */
.bac-before {
  overflow: hidden !important;
}
.bac-before svg {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important;   /* fill the before container width */
  height: 100% !important;
  max-width: none !important;
}
.bac-after svg {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}


/* =========================================================
   ROUND 9 — INTERACTIVE EFFECTS
   ========================================================= */

/* ── 1. FORM FIELD FOCUS GLOW ── */
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: #C8A86B !important;
  box-shadow: 0 0 0 3px rgba(200,168,107,.18), 0 0 16px rgba(200,168,107,.12) !important;
  background: rgba(200,168,107,.04) !important;
  transition: border-color .2s, box-shadow .2s, background .2s !important;
}

/* ── 2. CTA CARD: flashlight / spotlight on hover ── */
.cta-card {
  --fx: 50%;
  --fy: 50%;
  position: relative !important;
  transition: box-shadow .3s !important;
}
.cta-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: radial-gradient(
    circle 380px at var(--fx) var(--fy),
    rgba(200,168,107,.13) 0%,
    transparent 70%
  ) !important;
  opacity: 0 !important;
  transition: opacity .25s !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.cta-card:hover::after {
  opacity: 1 !important;
}
/* keep text above the spotlight layer */
.cta-card > *:not(.u-style-048) {
  position: relative !important;
  z-index: 3 !important;
}

/* ── 3. PORTFOLIO CARD: subtle border shine on hover ── */
.port-item {
  position: relative !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  transition: border-color .3s, box-shadow .3s, transform .3s !important;
}
.port-item::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  border: 1px solid transparent !important;
  background: linear-gradient(135deg, rgba(200,168,107,.0) 0%, rgba(200,168,107,.35) 50%, rgba(200,168,107,.0) 100%) border-box !important;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: destination-out !important;
  mask-composite: exclude !important;
  opacity: 0 !important;
  transition: opacity .3s !important;
  pointer-events: none !important;
  z-index: 9 !important;
}
.port-item:hover {
  border-color: rgba(200,168,107,.2) !important;
  box-shadow: 0 0 0 1px rgba(200,168,107,.15), 0 20px 50px rgba(0,0,0,.3) !important;
  transform: translateY(-2px) !important;
}
.port-item:hover::before {
  opacity: 1 !important;
}

/* ── 4. BA COMP: click-to-expand hint on footer ── */
.bac-footer {
  cursor: pointer !important;
  transition: background .2s !important;
}
.bac-footer:hover {
  background: rgba(200,168,107,.08) !important;
}
.bac-footer::after {
  content: '⤢ Click to expand' !important;
  font-size: 11px !important;
  color: rgba(200,168,107,.7) !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}


/* =========================================================
   ROUND 10 — BAC (Before/After Comparator) DEFINITIVE CSS
   All previous .ba-* rules are overridden below.
   ========================================================= */

/* Card wrapper */
.bac-card {
  width: 100% !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #06101D !important;
  border: 1px solid rgba(200,168,107,.22) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.45) !important;
  display: block !important;
}

/* Drag arena — maintains aspect ratio, clips both layers */
.bac-arena {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 600 / 420 !important;
  overflow: hidden !important;
  cursor: col-resize !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  display: block !important;
}

/* Both layers fill arena absolutely */
.bac-layer {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  overflow: hidden !important;
}
.bac-layer svg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  max-width: none !important;
}

/* AFTER: always full width, z-index 1 (base) */
.bac-layer-after {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1 !important;
}

/* BEFORE: starts 50% from left, JS sets .style.width */
.bac-layer-before {
  left: 0 !important;
  right: auto !important;
  width: 50% !important;
  z-index: 3 !important;
}

/* Pills (Before / After labels) */
.bac-pill {
  position: absolute !important;
  top: 12px !important;
  z-index: 10 !important;
  background: rgba(4,10,20,.85) !important;
  color: #fff !important;
  font: 900 11px/1 "Urbanist", Arial, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

/* Divider line */
.bac-divider {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 3px !important;
  background: #fff !important;
  z-index: 20 !important;
  pointer-events: none !important;
  transform: translateX(-50%) !important;
  box-shadow: 0 0 16px rgba(200,168,107,.65) !important;
}

/* Handle circle */
.bac-handle-circle {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: #C8A86B !important;
  color: #07111F !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 3px solid #fff !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.55) !important;
}

/* Footer bar */
.bac-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 13px 18px !important;
  color: rgba(255,255,255,.5) !important;
  font-size: 13px !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  background: rgba(4,10,20,.5) !important;
  cursor: pointer !important;
  transition: background .2s !important;
}
.bac-bar:hover { background: rgba(200,168,107,.08) !important; }
.bac-bar strong { color: #fff !important; }
.bac-expand-hint {
  font: 900 11px/1 "Urbanist", Arial, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: rgba(200,168,107,.75) !important;
}


/* =========================================================
   ROUND 11 — BAC FINAL: override ALL previous bac/ba rules
   ========================================================= */

/* Card */
.bac-card {
  width: 100% !important; display: block !important;
  border-radius: 18px !important; overflow: hidden !important;
  background: #06101D !important;
  border: 1px solid rgba(200,168,107,.22) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.45) !important;
}

/* Arena: relative container, clips both layers */
.bac-arena {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 600 / 420 !important;
  overflow: hidden !important;
  cursor: col-resize !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  display: block !important;
  /* kill any inherited transforms or transitions on children */
}

/* Both layers: absolute, fill arena height */
.bac-layer {
  position: absolute !important;
  top: 0 !important; bottom: 0 !important;
  overflow: hidden !important;
  /* NO width here — set per-layer below */
}

/* SVG inside each layer: fill the layer 100% */
.bac-layer > svg {
  display: block !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  /* Override any inherited max-width from global img/svg rules */
  max-width: none !important;
  max-height: none !important;
}

/* AFTER layer: full width, base, z-index 1 */
.bac-layer-after {
  left: 0 !important; right: 0 !important;
  width: 100% !important;
  z-index: 1 !important;
}

/* BEFORE layer: left-anchored, JS sets width 0-100%, z-index 3 */
.bac-layer-before {
  left: 0 !important; right: auto !important;
  width: 50% !important; /* JS overrides this */
  z-index: 3 !important;
}

/* Pills */
.bac-pill {
  position: absolute !important; top: 12px !important; z-index: 10 !important;
  background: rgba(4,10,20,.88) !important; color: #fff !important;
  font: 900 11px/1 "Urbanist", Arial, sans-serif !important;
  text-transform: uppercase !important; letter-spacing: .1em !important;
  padding: 7px 14px !important; border-radius: 999px !important;
  pointer-events: none !important; white-space: nowrap !important;
}
.bac-pill-before { left: 12px !important; }
.bac-pill-after  { right: 12px !important; left: auto !important; }

/* Divider line */
.bac-divider {
  position: absolute !important;
  top: 0 !important; bottom: 0 !important;
  left: 50% !important; /* JS overrides */
  width: 3px !important;
  background: #fff !important;
  z-index: 20 !important;
  pointer-events: none !important;
  transform: translateX(-50%) !important;
  box-shadow: 0 0 16px rgba(200,168,107,.65) !important;
}

/* Handle */
.bac-handle-circle {
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 46px !important; height: 46px !important;
  border-radius: 50% !important;
  background: #C8A86B !important; color: #07111F !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border: 3px solid #fff !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.55) !important;
}

/* Footer/bar */
.bac-bar {
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  padding: 13px 18px !important;
  color: rgba(255,255,255,.5) !important; font-size: 13px !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  background: rgba(4,10,20,.5) !important;
  cursor: pointer !important;
  transition: background .2s !important;
}
.bac-bar:hover { background: rgba(200,168,107,.08) !important; }
.bac-bar strong { color: #fff !important; }
.bac-expand-hint {
  font: 900 11px/1 "Urbanist", Arial, sans-serif !important;
  text-transform: uppercase !important; letter-spacing: .06em !important;
  color: rgba(200,168,107,.8) !important;
}

/* Kill ALL old ba-* rules that may still bleed in */
.ba-slider, .ba-wrap, .ba-side, .ba-before, .ba-after,
.ba-focus, .bac-before, .bac-after, .bac-layer-before,
.ba-range, .ba-range-input, .ba-divider-line { all: unset !important; }

/* Re-apply only what our new classes need */
.bac-layer-before {
  position: absolute !important; top: 0 !important; bottom: 0 !important;
  left: 0 !important; right: auto !important; width: 50% !important;
  overflow: hidden !important; z-index: 3 !important;
}
.bac-layer-before > svg {
  display: block !important; position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  max-width: none !important; max-height: none !important;
}


/* =========================================================
   ROUND 12 — DEFINITIVE: undo all:unset damage, portfolio glow
   ========================================================= */

/* Remove the all:unset damage from Round 11 */
.ba-slider, .ba-wrap, .ba-side, .ba-before, .ba-after,
.ba-focus, .bac-before, .bac-after,
.ba-range, .ba-range-input, .ba-divider-line { all: revert !important; display:none !important; }

/* The NEW bac-* elements get clean styles — no all:unset */
.bac-arena {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 600 / 420 !important;
  overflow: hidden !important;
  cursor: col-resize !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  display: block !important;
}
.bac-layer {
  position: absolute !important;
  top: 0 !important; bottom: 0 !important;
  overflow: hidden !important;
}
.bac-layer > svg {
  display: block !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  max-width: none !important; max-height: none !important;
}
.bac-layer-after {
  left: 0 !important; right: 0 !important;
  width: 100% !important; z-index: 1 !important;
}
.bac-layer-before {
  left: 0 !important; right: auto !important;
  width: 50% !important; z-index: 3 !important;
}

/* ── PORTFOLIO: stronger hover glow ── */
.port-item {
  position: relative !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
  border: 1px solid rgba(255,255,255,.07) !important;
}
.port-item:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(200,168,107,.55) !important;
  box-shadow:
    0 0 0 1px rgba(200,168,107,.4),
    0 0 30px rgba(200,168,107,.18),
    0 20px 60px rgba(0,0,0,.4) !important;
}
/* Brighter gradient sweep on hover */
.port-item::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background: linear-gradient(135deg, rgba(200,168,107,.0) 0%, rgba(200,168,107,.12) 50%, rgba(200,168,107,.0) 100%) !important;
  opacity: 0 !important;
  transition: opacity .25s ease !important;
  z-index: 2 !important;
}
.port-item:hover::after { opacity: 1 !important; }


/* =========================================================
   ROUND 13 — IMG-BASED BA SLIDER (same technique as Verdana)
   ========================================================= */

.bac-card {
  width: 100% !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #06101D !important;
  border: 1px solid rgba(200,168,107,.22) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.45) !important;
  display: block !important;
}

.bac-arena {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 600 / 420 !important;
  overflow: hidden !important;
  cursor: col-resize !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  display: block !important;
}

/* Both images: absolutely fill the arena */
.bac-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  max-width: none !important;
  -webkit-user-drag: none !important;
  pointer-events: none !important;
}

.bac-img-after  { z-index: 1 !important; }

/* Before image: clip-path clips from the right; JS sets it */
.bac-img-before {
  z-index: 3 !important;
  clip-path: inset(0 50% 0 0) !important; /* JS overrides inline */
}

/* Divider */
.bac-divider {
  position: absolute !important;
  top: 0 !important; bottom: 0 !important;
  left: 50% !important;
  width: 3px !important;
  background: #fff !important;
  z-index: 20 !important;
  pointer-events: none !important;
  transform: translateX(-50%) !important;
  box-shadow: 0 0 16px rgba(200,168,107,.65) !important;
}

.bac-handle-circle {
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 46px !important; height: 46px !important;
  border-radius: 50% !important;
  background: #C8A86B !important;
  color: #07111F !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  border: 3px solid #fff !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.55) !important;
}

/* Pills */
.bac-pill {
  position: absolute !important; top: 12px !important; z-index: 10 !important;
  background: rgba(4,10,20,.88) !important; color: #fff !important;
  font: 900 11px/1 "Urbanist", Arial, sans-serif !important;
  text-transform: uppercase !important; letter-spacing: .1em !important;
  padding: 7px 14px !important; border-radius: 999px !important;
  pointer-events: none !important;
}
.bac-pill-before { left: 12px !important; }
.bac-pill-after  { right: 12px !important; }

/* Footer */
.bac-bar {
  display: flex !important; justify-content: space-between !important;
  align-items: center !important; padding: 13px 18px !important;
  color: rgba(255,255,255,.5) !important; font-size: 13px !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  background: rgba(4,10,20,.5) !important;
  cursor: pointer !important; transition: background .2s !important;
}
.bac-bar:hover { background: rgba(200,168,107,.08) !important; }
.bac-bar strong { color: #fff !important; }
.bac-expand-hint {
  font: 900 11px/1 "Urbanist", Arial, sans-serif !important;
  text-transform: uppercase !important; letter-spacing: .06em !important;
  color: rgba(200,168,107,.8) !important;
}


/* =========================================================
   ROUND 14 — FIX: arena must receive mouse events
   ========================================================= */
.bac-arena {
  pointer-events: all !important;
  touch-action: none !important;
}
/* Images inside arena: no pointer events (arena catches all) */
.bac-img {
  pointer-events: none !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
}
/* Divider: no pointer events */
.bac-divider,
.bac-handle-circle,
.bac-pill {
  pointer-events: none !important;
}
/* Kill any stray overlay from accumulated rounds */
.bac-card::before,
.bac-card::after,
.bac-arena::before,
.bac-arena::after,
.about-slider-col::before,
.about-slider-col::after {
  display: none !important;
  content: none !important;
}


/* =========================================================
   ROUND 15 — FORM: dropdown dark, captcha, success states
   ========================================================= */

/* Dark dropdown — override browser white default */
select,
select option {
  background-color: #0D1826 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
select:focus {
  border-color: #C8A86B !important;
  box-shadow: 0 0 0 3px rgba(200,168,107,.18) !important;
}
/* Firefox needs color on the select element itself */
select {
  color: #fff !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
/* Placeholder option */
select option[value=""] {
  color: rgba(255,255,255,.4) !important;
}

/* Captcha box */
.captcha-box {
  margin: 20px 0 8px !important;
  padding: 18px 20px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(200,168,107,.2) !important;
  border-radius: 12px !important;
}
.captcha-box label {
  color: rgba(255,255,255,.75) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
  display: block !important;
}
.captcha-box input {
  max-width: 200px !important;
  display: block !important;
}

/* Success messages */
.audit-success,
.success-msg {
  display: none !important;
}
.audit-success.show,
.success-msg.show {
  display: block !important;
  padding: 32px !important;
  text-align: center !important;
  background: linear-gradient(135deg, rgba(200,168,107,.1), rgba(200,168,107,.04)) !important;
  border: 1px solid rgba(200,168,107,.3) !important;
  border-radius: 16px !important;
  color: #fff !important;
}
.audit-success.show h3,
.success-msg.show h3 {
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #fff !important;
  margin: 0 0 12px !important;
}
.audit-success.show p,
.success-msg.show p {
  color: rgba(255,255,255,.7) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}


/* =========================================================
   MOBILE HERO UPGRADE — stronger first impression
   ========================================================= */
.hero-h1-mobile,.hero-sub-mobile{display:none!important;}
@media (max-width:640px){
  body{background:#07111F!important;}
  .nav{padding:10px 0!important;background:rgba(7,17,31,.92)!important;box-shadow:0 16px 40px rgba(0,0,0,.28)!important;}
  .nav-inner{width:calc(100% - 28px)!important;min-height:58px!important;}
  .site-logo{max-height:58px!important;width:auto!important;}
  .hamburger{width:44px!important;height:44px!important;border-radius:14px!important;background:rgba(255,255,255,.075)!important;border-color:rgba(200,168,107,.28)!important;box-shadow:0 10px 26px rgba(0,0,0,.22)!important;}
  .hamburger span{width:21px!important;height:2px!important;background:#fff!important;}
  .hero{min-height:100svh!important;padding:92px 0 0!important;align-items:flex-start!important;background:radial-gradient(circle at 78% 18%,rgba(200,168,107,.22),transparent 28%),radial-gradient(circle at 18% 28%,rgba(226,43,121,.18),transparent 26%),linear-gradient(180deg,#07111F 0%,#111827 42%,#47242b 72%,#A85B35 100%)!important;}
  .hero-inner{width:calc(100% - 26px)!important;display:block!important;position:relative!important;z-index:30!important;}
  .hero-copy{max-width:100%!important;padding-top:8px!important;}
  .hero-badge{font-size:10px!important;line-height:1.15!important;letter-spacing:.105em!important;padding:10px 14px!important;margin-bottom:18px!important;background:rgba(7,17,31,.58)!important;border-color:rgba(200,168,107,.48)!important;box-shadow:0 18px 36px rgba(0,0,0,.22)!important;max-width:100%!important;}
  .hero-h1-desktop,.hero-sub-desktop{display:none!important;}
  .hero-h1-mobile,.hero-sub-mobile{display:block!important;}
  .hero-h1{font-size:clamp(58px,16.8vw,76px)!important;line-height:.82!important;letter-spacing:-.075em!important;margin:0 0 16px!important;max-width:385px!important;text-wrap:balance!important;text-shadow:0 18px 42px rgba(0,0,0,.42)!important;}
  .hero-h1 span{color:var(--gold)!important;display:block!important;}
  .hero-sub{font-size:18px!important;line-height:1.48!important;max-width:355px!important;margin:0 0 20px!important;color:rgba(255,255,255,.9)!important;text-shadow:0 10px 28px rgba(0,0,0,.32)!important;}
  .hero-btns{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin-top:8px!important;max-width:350px!important;}
  .hero-btns .btn{width:100%!important;min-height:54px!important;border-radius:16px!important;font-size:12px!important;letter-spacing:.075em!important;box-shadow:0 18px 42px rgba(0,0,0,.30)!important;}
  .hero-btns .btn-pink{background:linear-gradient(135deg,#E8C77D,#B98942)!important;color:#07111F!important;border-color:rgba(255,255,255,.24)!important;}
  .hero-btns .btn-outline{background:rgba(7,17,31,.62)!important;border-color:rgba(255,255,255,.20)!important;color:#fff!important;}
  .hero-proof{display:grid!important;gap:8px!important;margin:16px 0 0!important;padding:12px 14px!important;max-width:350px!important;border:1px solid rgba(200,168,107,.22)!important;border-radius:16px!important;background:rgba(7,17,31,.46)!important;backdrop-filter:blur(12px)!important;color:rgba(255,255,255,.74)!important;font:800 11px/1.35 Urbanist,system-ui,sans-serif!important;text-transform:uppercase!important;letter-spacing:.08em!important;}
  .hero-proof-line{display:none!important;}
  .hero-image-panel{display:none!important;}
  .hero-city-band{height:170px!important;display:block!important;}
  .hero-sky,.hero-sun,.hero-overlay{display:none!important;}
  .hero-homes{opacity:.95!important;bottom:76px!important;transform:scale(.95)!important;transform-origin:bottom left!important;}
  .hero-homes.moreback{opacity:.22!important;filter:blur(.3px)!important;}
  .hero-homes.back{opacity:.45!important;}
  .hero-homes.front{opacity:.85!important;}
  .hero-base{height:18px!important;bottom:76px!important;background:#07111F!important;box-shadow:0 -12px 35px rgba(0,0,0,.34)!important;}
  .hero-water{height:78px!important;bottom:0!important;background:linear-gradient(180deg,rgba(200,168,107,.86),rgba(200,168,107,.68))!important;}
  .hero-sky-reflet{display:none!important;}
  .hero-boat{bottom:72px!important;left:11%!important;transform:scale(.72)!important;opacity:.95!important;}
  .marquee-wrap{margin-top:0!important;}
}
@media (max-width:380px){.hero-h1{font-size:clamp(52px,16vw,65px)!important}.hero-sub{font-size:16.5px!important}.site-logo{max-height:52px!important}.hero-city-band{height:145px!important}}

/* =========================================================
   MOBILE HERO LUXURY REBUILD — Round 3
   Desktop stays untouched. Mobile gets premium first impression.
   ========================================================= */
@media (max-width:980px){
  body{background:#050b14!important;}
  .nav{top:0!important;left:0!important;right:0!important;width:100%!important;transform:none!important;z-index:1200!important;padding:0!important;background:linear-gradient(180deg,rgba(5,11,20,.98),rgba(5,11,20,.88))!important;border-bottom:1px solid rgba(200,168,107,.14)!important;box-shadow:0 14px 42px rgba(0,0,0,.28)!important;transition:all .28s ease!important;}
  .nav-inner{width:100%!important;max-width:none!important;margin:0!important;padding:22px 22px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:blur(18px)!important;display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:132px!important;transition:all .28s ease!important;}
  .nav-logo{display:flex!important;align-items:center!important;gap:17px!important;min-width:0!important;}
  .nav-logo:after{content:"CONTRACTOR WEBSITE SPECIALISTS  •  EST. 2006";display:block;max-width:210px;border-left:1px solid rgba(200,168,107,.38);padding-left:16px;color:rgba(255,255,255,.9);font:900 12px/1.55 'Urbanist',system-ui,sans-serif;letter-spacing:.17em;text-transform:uppercase;}
  .site-logo{height:72px!important;max-height:72px!important;max-width:190px!important;filter:drop-shadow(0 10px 22px rgba(200,168,107,.18));transition:all .28s ease!important;}
  .hamburger{display:flex!important;width:58px!important;height:58px!important;border-radius:16px!important;border:1px solid rgba(255,255,255,.18)!important;background:rgba(255,255,255,.045)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 12px 28px rgba(0,0,0,.2)!important;gap:6px!important;flex:0 0 auto!important;}
  .hamburger span{width:27px!important;height:3px!important;background:#fff!important;border-radius:3px!important;}
  .nav.is-scrolled{background:rgba(5,11,20,.94)!important;box-shadow:0 12px 34px rgba(0,0,0,.34)!important;}
  .nav.is-scrolled .nav-inner{min-height:76px!important;padding:11px 18px!important;}
  .nav.is-scrolled .site-logo{height:44px!important;max-height:44px!important;}
  .nav.is-scrolled .nav-logo:after{opacity:0;max-width:0;padding-left:0;border-left-color:transparent;overflow:hidden;}
  .nav.is-scrolled .hamburger{width:48px!important;height:48px!important;border-radius:14px!important;}

  .hero{display:block!important;min-height:100svh!important;padding:170px 0 36px!important;overflow:hidden!important;background:radial-gradient(circle at 86% 44%,rgba(192,91,38,.52),transparent 23%),radial-gradient(circle at 20% 8%,rgba(200,168,107,.14),transparent 26%),linear-gradient(145deg,#050b14 0%,#081321 50%,#170f15 100%)!important;}
  .hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(200,168,107,.95),rgba(200,168,107,0));width:2px;height:315px;top:340px;left:24px;z-index:15;box-shadow:0 0 24px rgba(200,168,107,.36);}
  .hero .hero-inner{display:block!important;width:100%!important;max-width:none!important;padding:0 24px!important;margin:0!important;position:relative!important;z-index:25!important;}
  .hero-copy{max-width:none!important;width:100%!important;}
  .hero-badge{display:flex!important;justify-content:center!important;width:100%!important;margin:0 0 28px!important;padding:14px 15px!important;border-radius:999px!important;border:1px solid rgba(200,168,107,.48)!important;background:rgba(7,17,31,.42)!important;color:#d8b66f!important;text-align:center!important;font-size:11px!important;letter-spacing:.18em!important;box-shadow:0 0 28px rgba(200,168,107,.08) inset!important;}
  .hero-h1{font-size:clamp(60px,17vw,86px)!important;line-height:.91!important;letter-spacing:-.072em!important;margin:0 0 24px!important;max-width:100%!important;text-shadow:0 16px 42px rgba(0,0,0,.36)!important;}
  .hero-h1 span{color:var(--gold)!important;text-shadow:0 10px 34px rgba(200,168,107,.18)!important;}
  .hero-sub{font-size:20px!important;line-height:1.55!important;color:rgba(255,255,255,.91)!important;max-width:100%!important;margin:0 0 28px!important;text-shadow:0 8px 24px rgba(0,0,0,.35)!important;}
  .hero-sub:after{content:"";display:block;margin-top:0;}
  .hero-sub strong,.hero-sub b{color:var(--gold)!important;}
  .hero-panel,.hero-image-panel{display:none!important;}
  .hero-stats,.hero-project-stats{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:0!important;margin:22px 0 24px!important;border:1px solid rgba(200,168,107,.42)!important;border-radius:24px!important;background:rgba(5,11,20,.62)!important;backdrop-filter:blur(16px)!important;box-shadow:0 18px 44px rgba(0,0,0,.26)!important;overflow:hidden!important;}
  .hero-stats .stat,.hero-project-stats .stat{display:block!important;border:0!important;border-right:1px solid rgba(200,168,107,.22)!important;border-radius:0!important;background:transparent!important;padding:18px 8px!important;box-shadow:none!important;}
  .hero-stats .stat:nth-child(2),.hero-project-stats .stat:nth-child(2){display:none!important;}
  .hero-stats .stat:last-child,.hero-project-stats .stat:last-child{border-right:0!important;}
  .stat-n{font-size:33px!important;color:var(--gold)!important;letter-spacing:-.04em!important;}
  .stat-l{font-size:10px!important;line-height:1.15!important;color:rgba(255,255,255,.9)!important;letter-spacing:.08em!important;}
  .hero-btns{display:grid!important;gap:14px!important;margin-top:0!important;}
  .hero-btns .btn{width:100%!important;min-height:66px!important;border-radius:999px!important;font-size:14px!important;letter-spacing:.08em!important;box-shadow:0 18px 44px rgba(0,0,0,.28)!important;}
  .hero-btns .btn-pink{background:linear-gradient(135deg,#ffe7a6,#c8a86b 52%,#a77d36)!important;color:#050b14!important;border-color:rgba(255,230,170,.42)!important;}
  .hero-btns .btn-outline{background:rgba(5,11,20,.34)!important;border:1px solid rgba(200,168,107,.44)!important;color:#fff!important;}
  .hero-proof{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:0!important;margin:26px 0 0!important;color:#fff!important;text-align:center!important;font:900 11px/1.25 'Urbanist',system-ui,sans-serif;text-transform:uppercase;letter-spacing:.05em!important;}
  .hero-proof-line{display:none!important;}
  .hero-proof span:last-child{display:contents!important;}
  .hero-proof span:last-child:before{content:"◎\A Built For Results";white-space:pre-line;color:#e3bd72;border-right:1px solid rgba(200,168,107,.26);padding:0 7px;}
  .hero-proof span:last-child{font-size:0!important;}
  .hero-proof:before{content:"▯\A Mobile Optimized";white-space:pre-line;color:#e3bd72;border-right:1px solid rgba(200,168,107,.26);padding:0 7px;}
  .hero-proof:after{content:"G\A Local SEO Ready";white-space:pre-line;color:#e3bd72;border-right:1px solid rgba(200,168,107,.26);padding:0 7px;}
  .hero-copy:after{content:"⌄";display:block;text-align:center;color:var(--gold);font:900 34px/1 'Urbanist',system-ui,sans-serif;margin-top:22px;opacity:.9;}
  .hero-sky,.hero-water,.hero-sky-reflet,.hero-boat{display:none!important;}
  .hero-base{bottom:0!important;height:92px!important;background:linear-gradient(180deg,transparent,rgba(5,11,20,.86))!important;z-index:14!important;}
  .hero-homes{display:block!important;bottom:16%!important;opacity:.58!important;filter:drop-shadow(0 18px 22px rgba(0,0,0,.38));z-index:13!important;}
  .hero-homes.front{opacity:.72!important;}
  .hero-sun{display:block!important;width:230px!important;height:230px!important;right:-48px!important;left:auto!important;bottom:36%!important;background:radial-gradient(circle,#d1813e 0%,#b96531 38%,rgba(185,101,49,.12) 70%,transparent 72%)!important;opacity:.84!important;z-index:10!important;}
  .hero-overlay{display:block!important;background:linear-gradient(180deg,rgba(5,11,20,.12) 0%,rgba(5,11,20,.08) 45%,rgba(5,11,20,.54) 100%),linear-gradient(90deg,rgba(5,11,20,.28),transparent 58%)!important;z-index:12!important;}
  .hero-city-band{height:0!important;display:block!important;}
  .marquee-wrap{margin-top:0!important;}
}
@media (max-width:520px){
  .nav-inner{min-height:120px!important;padding:18px 16px!important;}
  .site-logo{height:62px!important;max-height:62px!important;max-width:154px!important;}
  .nav-logo{gap:11px!important;}
  .nav-logo:after{max-width:150px;font-size:9px!important;line-height:1.55!important;letter-spacing:.15em!important;padding-left:11px!important;}
  .hamburger{width:52px!important;height:52px!important;border-radius:15px!important;}
  .hamburger span{width:24px!important;height:3px!important;}
  .hero{padding-top:148px!important;}
  .hero .hero-inner{padding:0 20px!important;}
  .hero:before{left:18px;top:310px;height:280px;}
  .hero-badge{font-size:10px!important;letter-spacing:.14em!important;padding:12px 10px!important;margin-bottom:24px!important;}
  .hero-h1{font-size:clamp(54px,16.4vw,74px)!important;line-height:.92!important;}
  .hero-sub{font-size:18px!important;line-height:1.56!important;}
  .hero-sun{width:190px!important;height:190px!important;right:-54px!important;bottom:39%!important;}
  .hero-stats,.hero-project-stats{border-radius:22px!important;margin-top:20px!important;}
  .stat-n{font-size:29px!important;}
  .stat-l{font-size:9px!important;}
  .hero-btns .btn{min-height:61px!important;font-size:12px!important;}
}
@media (max-width:380px){.hero-h1{font-size:50px!important}.hero-sub{font-size:17px!important}.nav-logo:after{display:none!important}.site-logo{height:58px!important;max-height:58px!important}}


/* =========================================================
   MOBILE HERO FINAL FIX — header fit, real icons, no mobile WhatsApp/chat
   ========================================================= */
.mobile-hero-stats,.mobile-feature-icons{display:none;}
@media (max-width:980px){
  html,body{max-width:100%!important;overflow-x:hidden!important;}
  .nav{overflow:hidden!important;}
  .nav-inner{position:relative!important;min-height:116px!important;padding:18px 88px 18px 18px!important;overflow:hidden!important;}
  .nav-logo{flex:1 1 auto!important;max-width:100%!important;min-width:0!important;overflow:hidden!important;}
  .nav-logo:after{max-width:clamp(118px,38vw,205px)!important;font-size:clamp(8px,2.3vw,12px)!important;line-height:1.5!important;letter-spacing:.14em!important;white-space:normal!important;flex:0 1 auto!important;}
  .site-logo{height:62px!important;max-height:62px!important;max-width:clamp(126px,38vw,185px)!important;object-fit:contain!important;}
  .hamburger{position:absolute!important;right:18px!important;top:50%!important;transform:translateY(-50%)!important;width:54px!important;height:54px!important;z-index:5!important;}
  .nav.is-scrolled .nav-inner{min-height:74px!important;padding:10px 78px 10px 16px!important;}
  .nav.is-scrolled .site-logo{height:44px!important;max-height:44px!important;max-width:120px!important;}
  .nav.is-scrolled .hamburger{right:16px!important;width:48px!important;height:48px!important;}
  .hero{padding-top:136px!important;}
  .hero .hero-inner{padding:0 22px!important;}
  .hero-h1{font-size:clamp(50px,15.5vw,74px)!important;line-height:.92!important;margin-bottom:22px!important;}
  .hero-sub{font-size:18px!important;line-height:1.55!important;margin-bottom:22px!important;}
  .mobile-hero-stats{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:0!important;margin:22px 0 24px!important;border:1px solid rgba(200,168,107,.44)!important;border-radius:24px!important;background:rgba(5,11,20,.64)!important;backdrop-filter:blur(16px)!important;box-shadow:0 18px 44px rgba(0,0,0,.28)!important;overflow:hidden!important;}
  .mobile-stat{padding:16px 7px!important;text-align:center!important;border-right:1px solid rgba(200,168,107,.24)!important;}
  .mobile-stat:last-child{border-right:0!important;}
  .mobile-stat img{width:26px!important;height:26px!important;margin:0 auto 7px!important;display:block!important;}
  .mobile-stat strong{display:block!important;color:var(--gold)!important;font:900 30px/1 'Urbanist',system-ui,sans-serif!important;letter-spacing:-.04em!important;}
  .mobile-stat span{display:block!important;margin-top:4px!important;color:#fff!important;font:900 9px/1.15 'Urbanist',system-ui,sans-serif!important;text-transform:uppercase!important;letter-spacing:.08em!important;}
  .hero-stats,.hero-project-stats{display:none!important;}
  .mobile-feature-icons{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:0!important;margin:24px 0 0!important;text-align:center!important;}
  .mobile-feature-icons div{padding:0 7px!important;border-right:1px solid rgba(200,168,107,.30)!important;}
  .mobile-feature-icons div:last-child{border-right:0!important;}
  .mobile-feature-icons img{width:30px!important;height:30px!important;margin:0 auto 9px!important;display:block!important;filter:drop-shadow(0 8px 14px rgba(200,168,107,.12));}
  .mobile-feature-icons span{display:block!important;color:#fff!important;font:900 10px/1.18 'Urbanist',system-ui,sans-serif!important;text-transform:uppercase!important;letter-spacing:.05em!important;}
  .hero-proof{display:none!important;}
  .hero-copy:after{display:none!important;content:none!important;}
  .hero-btns .btn{min-height:62px!important;}
  .hero-city-band:after{content:"";display:block;width:18px;height:18px;margin:28px auto 0;border-right:4px solid var(--gold);border-bottom:4px solid var(--gold);transform:rotate(45deg);opacity:.85;}
  a.whatsapp-cta,.whatsapp-cta{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;}
  #chat-widget-container,.lc-iframe,iframe[src*="livechat"],iframe[title*="chat"],iframe[title*="Chat"]{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;}
}
@media (max-width:430px){
  .nav-inner{min-height:112px!important;padding:16px 82px 16px 14px!important;}
  .site-logo{height:58px!important;max-height:58px!important;max-width:132px!important;}
  .nav-logo{gap:9px!important;}
  .nav-logo:after{max-width:145px!important;font-size:9px!important;padding-left:10px!important;}
  .hamburger{right:14px!important;width:50px!important;height:50px!important;}
  .hero{padding-top:128px!important;}
  .hero .hero-inner{padding:0 20px!important;}
  .hero-h1{font-size:clamp(48px,15.2vw,66px)!important;}
  .mobile-stat strong{font-size:27px!important;}
  .mobile-feature-icons img{width:27px!important;height:27px!important;}
  .mobile-feature-icons span{font-size:9px!important;}
}
@media (max-width:370px){.nav-logo:after{display:none!important}.site-logo{max-width:150px!important}.hero-h1{font-size:46px!important}}