:root{
  --black:#0B0B0D;
  --panel:#151619;
  --panel-2:#1C1E22;
  --line: rgba(246,245,242,0.10);
  --white:#F6F5F2;
  --steel:#9AA0A6;
  --gold:#008FEF;
  --gold-bright:#3FA6FF;
  --green:#3CB878;
  --maxw: 1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--black);
  color:var(--white);
  font-family:'Inter', sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:64px; /* room for sticky mobile bar */
}
h1,h2,h3,h4{
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.02em;
  font-weight:600;
  line-height:1.08;
}
.eyebrow{
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:12px;
  color:var(--gold);
  font-weight:500;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
button{font-family:inherit; cursor:pointer;}

/* ============ TOP BAR ============ */
.topbar{
  background:var(--black);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.topbar-inner{
  max-width:var(--maxw); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{height:42px; width:auto; flex:none; object-fit:contain;}
.brand-fallback{
  font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:0.04em;
  font-size:19px; color:var(--white); text-transform:uppercase;
}
.brand-fallback span{color:var(--gold);}
.topbar-cta{display:flex; align-items:center; gap:14px;}
.call-chip{
  display:flex; align-items:center; gap:8px;
  font-family:'Oswald', sans-serif; font-weight:600; font-size:15px;
  color:var(--white); white-space:nowrap;
}
.call-chip svg{flex:none;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:2px; border:1px solid transparent;
  font-family:'Oswald', sans-serif; font-weight:600; font-size:14px;
  letter-spacing:0.06em; text-transform:uppercase; transition:all .18s ease;
  cursor:pointer;
}
.btn-primary{background:var(--gold); color:#F6F5F2;}
.btn-primary:hover{background:var(--gold-bright); transform:translateY(-1px);}
.btn-outline{border-color:rgba(246,245,242,0.35); color:var(--white); background:transparent;}
.btn-outline:hover{border-color:var(--white); background:rgba(255,255,255,0.06);}
.btn-block{width:100%;}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:min(92vh, 780px);
  display:flex; align-items:flex-end;
  background:#000;
  overflow:hidden;
}
.hero-media{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
}
.hero-media video{
  display:none;
  width:100%; height:100%; object-fit:cover; opacity:0.6;
}
.hero-media video.is-active{display:block;}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,11,13,0.20) 0%, rgba(11,11,13,0.60) 55%, rgba(11,11,13,0.97) 100%),
    linear-gradient(90deg, rgba(11,11,13,0.85) 0%, rgba(11,11,13,0.25) 55%);
}
.hero-photo-block{padding:88px 0 0;}
.hero-photo-layout{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.hero-photo-layout img{border:1px solid var(--line); width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;}
.hero-photo-layout h2{font-size:clamp(24px,3.2vw,32px); color:var(--white); margin-bottom:14px;}
.hero-photo-layout p{color:var(--steel); font-size:15px; margin-bottom:10px;}
@media (max-width:900px){ .hero-photo-layout{grid-template-columns:1fr;} }
.hero-content{
  position:relative; z-index:2; width:100%;
  padding:120px 24px 56px;
  max-width:var(--maxw); margin:0 auto;
}
.hero-content .eyebrow{margin-bottom:16px; display:block;}
.hero h1{
  font-size:clamp(34px, 6vw, 68px);
  max-width:820px;
  color:var(--white);
}
.hero h1 em{color:var(--gold); font-style:normal;}
.hero-sub{
  margin-top:18px; font-size:clamp(16px,2vw,19px); color:#D9D8D4;
  max-width:560px; font-weight:400;
}
.hero-ctas{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px;}
.hero-ctas .btn{padding:16px 28px; font-size:15px;}

/* ============ SECTION GENERIC ============ */
section{padding:88px 0;}
.section-head{max-width:640px; margin-bottom:48px;}
.section-head .eyebrow{display:block; margin-bottom:10px;}
.section-head h2{font-size:clamp(28px,4vw,42px); color:var(--white);}
.section-head p{margin-top:14px; color:var(--steel); font-size:16px;}
.section-alt{background:var(--panel);}
.section-cta{margin-top:28px; display:flex; flex-wrap:wrap; gap:14px;}

/* ============ CHECK LIST (reused: included-items, how-it-works steps) ============ */
.check-list{list-style:none; display:flex; flex-direction:column; gap:14px; margin-top:8px;}
.included-grid{display:grid; grid-template-columns:1fr 1fr; gap:36px; max-width:760px;}
.included-label{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.08em; font-size:12.5px; color:var(--steel); display:block; margin-bottom:4px;}
.addon-list li svg{color:var(--steel);}
.addon-note{margin-top:10px; font-size:12.5px; color:var(--steel);}
@media (max-width:900px){ .included-grid{grid-template-columns:1fr;} }
.check-list li{display:flex; gap:12px; align-items:flex-start; color:#D3D2CE; font-size:14.5px;}
.check-list li svg{flex:none; color:var(--gold); margin-top:2px;}
.step-list{list-style:none; counter-reset:step; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px;}
.step-list li{
  counter-increment:step; background:var(--panel-2); border:1px solid var(--line); padding:22px 20px;
  position:relative;
}
.step-list li::before{
  content:counter(step); font-family:'Oswald',sans-serif; font-weight:700; color:var(--gold);
  font-size:13px; letter-spacing:0.08em; display:block; margin-bottom:10px;
}
.step-list h4{font-size:15.5px; color:var(--white); margin-bottom:6px;}
.step-list p{font-size:13.5px; color:var(--steel);}
@media (max-width:900px){ .step-list{grid-template-columns:1fr;} }

/* ============ SERVICES ============ */
.service-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.service-card{
  background:var(--panel-2); border:1px solid var(--line); padding:32px 26px;
  display:flex; flex-direction:column; gap:16px; transition:border-color .2s ease, transform .2s ease;
}
.service-card:hover{border-color:var(--gold); transform:translateY(-4px);}
.service-num{font-family:'Oswald',sans-serif; color:var(--gold); font-size:13px; letter-spacing:0.1em;}
.service-card h3{font-size:21px; color:var(--white);}
.service-card p{color:var(--steel); font-size:14.5px; flex:1;}
.service-card .btn{align-self:flex-start; padding:10px 18px; font-size:12.5px;}

/* ============ VISUAL PROOF ============ */
.proof-layout{display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:start;}
.proof-layout-single{grid-template-columns:1fr; max-width:640px; margin:0 auto;}

.compare{
  position:relative; width:100%; aspect-ratio:4/3; overflow:hidden;
  border:1px solid var(--line); user-select:none; touch-action:pan-y;
  background:#000;
}
.compare img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none;}
.compare .after-wrap{position:absolute; inset:0; overflow:hidden; width:50%;}
.compare .after-wrap img{width:var(--compare-w, 100vw); max-width:none; height:100%;}
.compare .handle{
  position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--gold);
  transform:translateX(-1px); cursor:ew-resize; z-index:3;
}
.compare .handle::after{
  content:"⟷"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; background:var(--gold); color:#F6F5F2; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:700;
}
.compare .tag{
  position:absolute; top:12px; z-index:4; font-family:'Oswald',sans-serif; font-size:11px;
  letter-spacing:0.08em; text-transform:uppercase; background:rgba(11,11,13,0.75); color:var(--white);
  padding:5px 10px; border:1px solid var(--line);
}
.compare .tag.before-tag{left:12px;}
.compare .tag.after-tag{right:12px;}
.compare-set{margin-bottom:26px;}
.compare-set:last-child{margin-bottom:0;}
.compare-caption{margin-top:10px; font-size:13.5px; color:var(--steel);}
.compare-nav{display:flex; gap:8px; margin-top:14px;}
.compare-nav button{
  flex:1; padding:9px; background:var(--panel-2); border:1px solid var(--line); color:var(--steel);
  font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
}
.compare-nav button.is-active{border-color:var(--gold); color:var(--gold);}

/* ============ REVIEWS ============ */
.reviews-top{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; margin-bottom:30px;}
.rating-badge{display:flex; align-items:center; gap:14px;}
.rating-badge .num{font-family:'Oswald',sans-serif; font-size:44px; font-weight:700; color:var(--white);}
.stars{color:var(--gold); font-size:16px; letter-spacing:2px;}
.rating-meta{font-size:13px; color:var(--steel);}
.rating-meta a{color:var(--gold); border-bottom:1px solid rgba(0,143,239,0.45);}
.google-mark{display:flex; align-items:center; gap:6px; font-family:'Oswald',sans-serif; font-size:13px; color:var(--steel);}

.review-track-wrap{position:relative;}
.review-track{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px;
  scrollbar-width:none;
}
.review-track::-webkit-scrollbar{display:none;}
.review-card{
  scroll-snap-align:start; flex:0 0 320px; background:var(--panel-2); border:1px solid var(--line);
  padding:22px; display:flex; flex-direction:column; gap:12px;
}
.review-head{display:flex; align-items:center; gap:10px;}
.review-head img{width:38px; height:38px; border-radius:50%; object-fit:cover;}
.avatar-fallback{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:'Oswald',sans-serif; font-weight:600; font-size:15px; color:#fff;
}
.av-1{background:#3E7CB1;} .av-2{background:#C2571B;} .av-3{background:#5B8C5A;}
.av-4{background:#8E5A9E;} .av-5{background:#C94F6D;} .av-6{background:#2E9E9E;} .av-7{background:#B08900;}
.review-name{font-size:14.5px; font-weight:600; color:var(--white);}
.review-date{font-size:11.5px; color:var(--steel);}
.review-stars{color:var(--gold); font-size:13px; letter-spacing:1.5px;}
.review-text{font-size:14px; color:#D3D2CE; flex:1;}
.review-source{font-size:11.5px; color:var(--steel); display:flex; align-items:center; gap:6px;}
.review-arrows{display:flex; gap:10px; margin-top:18px;}
.arrow-btn{
  width:40px; height:40px; border:1px solid var(--line); background:var(--panel-2); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.arrow-btn:hover{border-color:var(--gold); color:var(--gold);}

/* ============ SERVICE AREA ============ */
.area-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.area-card{
  position:relative; aspect-ratio:3/4; overflow:hidden; border:1px solid var(--line);
  background:var(--panel-2);
}
.area-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease, filter .5s ease; filter:saturate(0.85) brightness(0.85);
}
.area-card:hover img{transform:scale(1.08); filter:saturate(1) brightness(0.7);}
.area-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,11,13,0) 35%, rgba(11,11,13,0.92) 100%);
}
.area-card .pin{
  position:absolute; top:12px; left:12px; z-index:2; width:26px; height:26px;
  border:1px solid rgba(246,245,242,0.4); background:rgba(11,11,13,0.55);
  display:flex; align-items:center; justify-content:center; color:var(--gold);
}
.area-card .label{
  position:absolute; left:14px; right:14px; bottom:13px; z-index:2;
  font-family:'Oswald',sans-serif; font-weight:600; font-size:16px; letter-spacing:0.02em;
  color:var(--white); text-transform:uppercase;
}
.area-card.is-hq{border-color:var(--gold);}
.area-card .hq-badge{
  position:absolute; top:12px; right:12px; z-index:2; font-family:'Oswald',sans-serif;
  font-size:10.5px; letter-spacing:0.1em; background:var(--gold); color:#F6F5F2;
  padding:4px 8px; text-transform:uppercase;
}
.area-note{
  margin-top:26px; color:var(--steel); font-size:14.5px; display:flex; align-items:center; gap:10px;
}

/* ============ WARRANTY / GUARANTEE STRIP ============ */
.guarantee{
  display:flex; align-items:center; gap:22px; border:1px solid var(--gold); padding:26px 30px;
  background:linear-gradient(90deg, rgba(0,143,239,0.12), transparent);
}
.guarantee svg{flex:none; color:var(--gold);}
.guarantee h4{font-size:18px; color:var(--white); margin-bottom:6px;}
.guarantee p{color:var(--steel); font-size:14px;}

/* ============ LEAD FORM ============ */
.form-layout{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center;}
.form-panel{background:var(--panel-2); border:1px solid var(--line); padding:36px;}
.form-panel h3{font-size:22px; color:var(--white); margin-bottom:6px;}
.form-panel .sub{color:var(--steel); font-size:14px; margin-bottom:24px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--steel); margin-bottom:7px; font-family:'Oswald',sans-serif;}
.field input, .field select{
  width:100%; padding:13px 14px; background:var(--black); border:1px solid var(--line); color:var(--white);
  font-size:15px; font-family:'Inter',sans-serif;
}
.field input:focus, .field select:focus{outline:none; border-color:var(--gold);}
.consent{display:flex; gap:10px; align-items:flex-start; margin:18px 0 20px;}
.consent input{margin-top:3px;}
.consent p{font-size:12px; color:var(--steel); line-height:1.5;}
.form-note{font-size:12px; color:var(--steel); margin-top:14px; text-align:center;}
.form-success{display:none; text-align:center; padding:30px 10px;}
.form-success.show{display:block;}
.form-success svg{color:var(--green); margin-bottom:14px;}
.form-success h4{color:var(--white); font-size:20px; margin-bottom:8px;}
.form-success p{color:var(--steel); font-size:14px;}

.form-side .eyebrow{display:block; margin-bottom:12px;}
.form-side h2{font-size:clamp(26px,3.6vw,36px); color:var(--white); margin-bottom:16px;}
.form-side ul{margin-top:20px;}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--line); padding:44px 0 30px; background:var(--black);}
.footer-inner{display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; align-items:center;}
.footer-brand{display:flex; align-items:center; gap:10px;}
.footer-brand img{height:32px; width:auto; flex:none; object-fit:contain;}
.footer-links{display:flex; gap:22px; flex-wrap:wrap; font-size:13px; color:var(--steel);}
.footer-links a:hover{color:var(--gold);}
.footer-copy{font-size:12px; color:#5C5E62; margin-top:26px; text-align:center;}

/* ============ STICKY MOBILE BAR ============ */
.mobile-bar{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:60;
  background:var(--black); border-top:1px solid var(--line);
}
.mobile-bar-inner{display:flex;}
.mobile-bar a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 10px; font-family:'Oswald',sans-serif; font-size:13.5px; letter-spacing:0.05em;
  text-transform:uppercase; font-weight:600;
}
.mobile-bar a.call{color:var(--white); border-right:1px solid var(--line);}
.mobile-bar a.quote{background:var(--gold); color:#F6F5F2;}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .service-grid{grid-template-columns:1fr;}
  .proof-layout{grid-template-columns:1fr;}
  .form-layout{grid-template-columns:1fr;}
  .area-grid{grid-template-columns:repeat(2,1fr);}
  .call-chip span.call-text{display:none;}
  .mobile-bar{display:block;}
  body{padding-bottom:64px;}
  .hero-content{padding-top:96px;}
  .guarantee{flex-direction:column; text-align:center;}
}
@media (min-width:901px){
  .mobile-bar{display:none !important;}
}
@media (max-width:520px){
  .review-card{flex-basis:82vw;}
  .topbar-cta .btn-outline{display:none;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}