/* =========================================================
   LUMA PRISTINE CLEANING — PREMIUM BLACK & GOLD THEME
   Replace your current css/style.css with this file.
========================================================= */

:root{
  --black:#050505;
  --black-2:#0b0b0b;
  --black-3:#111111;
  --card:#171717;
  --card-2:#1d1d1d;
  --gold:#d4af37;
  --gold-light:#f4d35e;
  --gold-soft:#e8c87a;
  --white:#ffffff;
  --muted:#cfcfcf;
  --line:rgba(212,175,55,.22);
  --shadow:0 20px 55px rgba(0,0,0,.45);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{

    font-family:'Poppins',sans-serif;

    background:

    radial-gradient(circle at 20% 20%,
    rgba(255,220,120,.08),
    transparent 25%),

    radial-gradient(circle at 80% 30%,
    rgba(255,255,255,.05),
    transparent 30%),

    radial-gradient(circle at 50% 90%,
    rgba(212,175,55,.08),
    transparent 35%),

    linear-gradient(
    180deg,
    #030303,
    #070707,
    #0B0B0B,
    #070707,
    #030303);

    color:white;

}
img{max-width:100%;display:block}
.container{width:90%;max-width:1250px;margin:auto}
section{padding:100px 0}
section h2{
  color:var(--gold);
  text-align:center;
  font-size:clamp(34px,4vw,48px);
  line-height:1.2;
  margin-bottom:22px;
}
.section-subtitle{
  max-width:760px;
  margin:0 auto 48px;
  color:var(--muted);
  text-align:center;
  font-size:17px;
}

/* HEADER */
header{
  position:fixed;
  top:0;left:0;width:100%;
  z-index:1000;
  background:rgba(4,4,4,.74);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  transition:.35s ease;
}
header.scrolled{
  background:rgba(0,0,0,.96);
  box-shadow:0 12px 35px rgba(0,0,0,.48);
  border-bottom-color:rgba(212,175,55,.45);
}
nav{
  min-height:96px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.logo{display:flex;align-items:center;background:transparent}
.logo img{height:74px;width:auto;object-fit:contain}
.logo h2{font-size:30px;color:#fff}
.logo h2 span,.logo span{color:var(--gold)}
.nav-links,nav ul{
  display:flex;
  align-items:center;
  gap:38px;
  list-style:none;
}
.nav-links a,nav ul li a{
  position:relative;
  color:#d8ceb7;
  text-decoration:none;
  font-size:15px;
  font-weight:500;
  letter-spacing:.35px;
  transition:.3s ease;
}
.nav-links a:hover,nav ul li a:hover{color:#fff}
.nav-links a::after,nav ul li a::after{
  content:"";
  position:absolute;
  left:0;bottom:-9px;
  width:0;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
  transition:.35s ease;
}
.nav-links a:hover::after,nav ul li a:hover::after{width:100%}
.call-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
  background:linear-gradient(135deg,#b8861d,var(--gold-light));
  color:#111;
  padding:14px 24px;
  border-radius:999px;
  font-weight:700;
  box-shadow:0 10px 28px rgba(212,175,55,.22);
  transition:.3s ease;
}
.call-btn:hover{transform:translateY(-3px);box-shadow:0 16px 35px rgba(212,175,55,.36)}
.menu-btn{display:none;color:var(--gold);font-size:29px;cursor:pointer}

/* HERO */
.hero{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:150px 8% 110px;
  text-align:left;
  background:
    linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.82) 43%,rgba(0,0,0,.48) 100%),
    url("../images/hero.webp");
  background-size:cover;
  background-position:center;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 74% 25%,rgba(212,175,55,.09),transparent 26%),linear-gradient(to bottom,transparent 72%,rgba(0,0,0,.72));
  pointer-events:none;
}
.hero-content{position:relative;z-index:3;max-width:740px;color:#fff}
.badge{
  display:inline-block;
  background:none;
  color:var(--gold);
  margin-bottom:24px;
  font-size:14px;
  font-weight:600;
  letter-spacing:2.5px;
  text-transform:uppercase;
}
.hero h1{
  font-size:clamp(48px,6vw,78px);
  line-height:1.03;
  letter-spacing:-2px;
  font-weight:800;
  margin-bottom:24px;
}
.hero p{max-width:650px;color:#dedede;font-size:20px;line-height:1.75;margin-bottom:38px}
.buttons{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:17px}
.btn-primary,.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding:16px 32px;
  border-radius:999px;
  font-size:17px;
  font-weight:700;
  transition:.32s ease;
}
.btn-primary{color:#111;background:linear-gradient(135deg,#b8861d,var(--gold-light));box-shadow:0 12px 30px rgba(212,175,55,.25)}
.btn-secondary{color:var(--gold-soft);border:1px solid rgba(212,175,55,.58);background:rgba(255,255,255,.035);backdrop-filter:blur(10px)}
.btn-primary:hover,.btn-secondary:hover{transform:translateY(-4px)}
.btn-secondary:hover{color:#111;background:var(--gold)}

/* FLOATING STARS */
.floating-stars{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.floating-stars span{position:absolute;color:var(--gold-light);opacity:.52;font-size:12px;text-shadow:0 0 15px rgba(212,175,55,.85);animation:floatStar 6.5s ease-in-out infinite}
.floating-stars span:nth-child(1){top:18%;left:8%;animation-delay:0s}
.floating-stars span:nth-child(2){top:28%;left:34%;animation-delay:1s}
.floating-stars span:nth-child(3){top:18%;right:24%;animation-delay:2s}
.floating-stars span:nth-child(4){top:57%;right:12%;animation-delay:3s}
.floating-stars span:nth-child(5){bottom:19%;left:21%;animation-delay:4s}
.floating-stars span:nth-child(6){bottom:25%;right:38%;animation-delay:5s}
@keyframes floatStar{0%,100%{transform:translateY(0) scale(.8);opacity:.22}50%{transform:translateY(-22px) scale(1.25);opacity:1}}

/* MARQUEE */
.luxury-marquee{overflow:hidden;white-space:nowrap;background:#f4f1e8;border-top:1px solid rgba(212,175,55,.55);border-bottom:1px solid rgba(212,175,55,.55);padding:14px 0}
.marquee-track{display:inline-flex;align-items:center;gap:42px;min-width:max-content;animation:luxuryScroll 24s linear infinite}
.marquee-track span{color:#111;font-size:14px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
@keyframes luxuryScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.luxury-marquee:hover .marquee-track{animation-play-state:paused}

/* TRUST STRIP */
.trust-strip{background:#101010;padding:23px 0;border-top:1px solid rgba(212,175,55,.12);border-bottom:1px solid rgba(212,175,55,.12)}
.trust-strip .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;color:var(--gold-soft);font-weight:600;font-size:16px}
.trust-strip .container div{transition:.3s ease}
.trust-strip .container div:hover{color:var(--gold-light);transform:translateY(-2px)}

/* ABOUT */
.about{background:radial-gradient(circle at top right,rgba(212,175,55,.07),transparent 32%),#0b0b0b}
.about p{max-width:900px;margin:auto;color:var(--muted);text-align:center;font-size:18px}

/* STATS */
.stats{background:#080808}
.stats .container{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stat{position:relative;overflow:hidden;background:linear-gradient(145deg,#191919,#101010);padding:38px 28px;text-align:center;border-radius:20px;border:1px solid var(--line);box-shadow:var(--shadow);transition:.35s ease}
.stat::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.stat:hover{transform:translateY(-8px);border-color:rgba(212,175,55,.5)}
.stat h2{color:var(--gold-light);font-size:44px;margin-bottom:6px}
.stat p{color:var(--muted);font-weight:600}

/* SERVICES */
.services{background:#111}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:55px}
.card{position:relative;overflow:hidden;background:linear-gradient(145deg,#1b1b1b,#111);padding:40px 32px;border-radius:22px;border:1px solid rgba(212,175,55,.16);box-shadow:0 18px 45px rgba(0,0,0,.36);transition:.4s ease}
.card::after{content:"";position:absolute;width:150px;height:150px;right:-80px;bottom:-80px;border-radius:50%;background:radial-gradient(circle,rgba(212,175,55,.13),transparent 70%)}
.card:hover{transform:translateY(-10px);border-color:rgba(212,175,55,.5);box-shadow:0 25px 60px rgba(0,0,0,.5)}
.card i{font-size:50px;color:var(--gold);margin-bottom:22px}
.card h3{font-size:23px;color:#fff;margin-bottom:14px}
.card p{color:var(--muted)}

/* REVIEWS */
.reviews{background:#090909}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.review{background:linear-gradient(145deg,#1a1a1a,#101010);padding:32px;border-radius:20px;border:1px solid rgba(212,175,55,.16);box-shadow:0 16px 38px rgba(0,0,0,.34);transition:.35s ease}
.review:hover{transform:translateY(-7px);border-color:rgba(212,175,55,.45)}
.stars{color:var(--gold-light);font-size:21px;margin-bottom:14px;letter-spacing:2px}
.review p{color:var(--muted);margin-top:12px}
.review h4{color:#fff;margin-top:20px;font-size:20px}
.review span{color:var(--gold-soft);font-weight:600;font-size:14px}

/* WHY US */
.why-us{background:#111}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:55px}
.feature{background:linear-gradient(145deg,#1b1b1b,#111);padding:36px 26px;text-align:center;border-radius:20px;border:1px solid rgba(212,175,55,.16);box-shadow:0 16px 38px rgba(0,0,0,.34);transition:.35s ease}
.feature:hover{transform:translateY(-8px);border-color:rgba(212,175,55,.48)}
.feature i{font-size:48px;color:var(--gold);margin-bottom:18px}
.feature h3{color:#fff;margin-bottom:10px}
.feature p{color:var(--muted)}

/* GALLERY */
.gallery{background:#090909}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:45px}
.gallery-grid img{width:100%;height:280px;object-fit:cover;border-radius:18px;border:1px solid rgba(212,175,55,.14);transition:.4s ease;cursor:pointer}
.gallery-grid img:hover{transform:scale(1.035);border-color:rgba(212,175,55,.5);box-shadow:0 20px 45px rgba(0,0,0,.48)}

/* QUOTE */
.quote{position:relative;background:linear-gradient(rgba(0,0,0,.74),rgba(0,0,0,.82)),url("../images/hero.webp");background-size:cover;background-position:center;background-attachment:fixed;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.quote::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 18%,rgba(212,175,55,.12),transparent 34%);pointer-events:none}
.quote .container{position:relative;z-index:2}
.quote h2{
    color:var(--gold);
    font-family:"Cormorant Garamond",serif;
    font-size:clamp(56px,7vw,86px);
    font-weight:700;
    text-align:center;
    line-height:1.05;
    letter-spacing:.5px;
    text-shadow:
        0 2px 10px rgba(212,175,55,.35),
        0 0 28px rgba(212,175,55,.18);
}
.quote > .container > p{text-align:center;color:var(--muted);margin-bottom:36px}
.quote-form{max-width:900px;margin:48px auto 0;padding:38px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:26px;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 28px 65px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.09)}
.quote-form input,.quote-form select,.quote-form textarea{width:100%;padding:16px 17px;background:rgba(10,10,10,.5);color:#fff;border:1px solid rgba(212,175,55,.18);border-radius:12px;font-family:inherit;font-size:15px;outline:none;transition:.3s ease}
.quote-form input::placeholder,.quote-form textarea::placeholder{color:#aaa}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{border-color:var(--gold);background:rgba(255,255,255,.065);box-shadow:0 0 0 3px rgba(212,175,55,.12)}
.quote-form select option{background:#111;color:#fff}
.quote-form textarea{grid-column:1/-1;height:155px;resize:none}
.quote-form button{grid-column:1/-1;padding:17px;border:none;border-radius:999px;background:linear-gradient(135deg,#b8861d,var(--gold-light));color:#111;font-size:17px;font-weight:800;cursor:pointer;box-shadow:0 13px 32px rgba(212,175,55,.28);transition:.32s ease}
.quote-form button:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(212,175,55,.42)}

/* CTA */
.cta-banner{position:relative;overflow:hidden;text-align:center;background:linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.82)),url("../images/hero.webp");background-size:cover;background-position:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta-banner::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(212,175,55,.12),transparent 55%)}
.cta-banner .container{position:relative;z-index:2}
.cta-banner h2{color:var(--gold);font-size:clamp(36px,4vw,52px);margin-bottom:14px}
.cta-banner p{color:#e3e3e3;font-size:19px;margin-bottom:30px}

/* CONTACT */
.contact{background:radial-gradient(circle at bottom left,rgba(212,175,55,.08),transparent 32%),#0b0b0b}
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px}
.contact-box{position:relative;overflow:hidden;padding:34px;background:linear-gradient(145deg,#1b1b1b,#101010);border:1px solid rgba(212,175,55,.18);border-radius:20px;box-shadow:0 18px 45px rgba(0,0,0,.38);transition:.35s ease}
.contact-box::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.contact-box:hover{transform:translateY(-7px);border-color:rgba(212,175,55,.5)}
.contact-box i{font-size:34px;color:var(--gold);margin-bottom:14px}
.contact-box h3{color:#fff;margin-bottom:8px}
.contact-box p{color:var(--muted)}

/* MAP */
.map{padding:90px 0 0;background:#111;text-align:center}
.map h2{color:var(--gold);margin-bottom:38px}
.map iframe{display:block;width:100%;height:480px;border:none;filter:grayscale(90%) contrast(1.05) brightness(.78);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* FAQ */
.faq{background:#090909;padding:90px 0}
.faq h2{color:var(--gold);margin-bottom:42px}
.faq-item{max-width:950px;margin:14px auto;background:linear-gradient(145deg,#191919,#101010);border:1px solid rgba(212,175,55,.18);border-radius:15px;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.28);transition:.3s ease}
.faq-item:hover{border-color:rgba(212,175,55,.42)}
.question{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:21px 25px;color:#fff;font-size:17px;font-weight:600;cursor:pointer}
.question span{width:30px;height:30px;min-width:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(212,175,55,.1);color:var(--gold);font-size:20px;transition:.35s ease}
.answer{max-height:0;overflow:hidden;opacity:0;padding:0 25px;color:var(--muted);font-size:15px;line-height:1.75;transition:max-height .5s cubic-bezier(.22,1,.36,1),opacity .32s ease,padding .45s ease}
.faq-item.active{border-color:rgba(212,175,55,.4);background:#171717}
.faq-item.active .answer{max-height:260px;opacity:1;padding:0 25px 22px}
.faq-item.active .question span{transform:rotate(45deg);background:var(--gold);color:#111}

/* FOOTER */
footer{position:relative;background:#030303;border-top:1px solid rgba(212,175,55,.32);padding:76px 0 48px;text-align:center;color:#fff}
footer h2{color:var(--gold);font-size:33px}
footer h2 span{color:var(--gold-light)}
footer p{margin-top:10px;color:#c8c8c8}
footer a{color:var(--gold);text-decoration:none}
footer hr{border:none;height:1px;background:linear-gradient(90deg,transparent,rgba(212,175,55,.55),transparent)}

/* FLOATING BUTTONS */
.floating-call,.floating-quote,.floating-instagram,#topBtn{position:fixed;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:23px;text-decoration:none;border:1px solid rgba(212,175,55,.45);background:#111;color:var(--gold);box-shadow:0 13px 30px rgba(0,0,0,.34);z-index:999;transition:.3s ease}
.floating-call,.floating-quote,.floating-instagram{right:24px}
.floating-call{bottom:25px}
.floating-quote{bottom:95px}
.floating-instagram{bottom:165px}
#topBtn{left:24px;bottom:25px;border:none;cursor:pointer;display:none}
.floating-call:hover,.floating-quote:hover,.floating-instagram:hover,#topBtn:hover{background:var(--gold);color:#111;transform:scale(1.08)}

/* LOADER */
#loader{position:fixed;inset:0;background:#050505;display:flex;align-items:center;justify-content:center;z-index:999999}
.spinner{width:62px;height:62px;border-radius:50%;border:7px solid #202020;border-top-color:var(--gold);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* REVEAL ANIMATION */
.card,.review,.feature,.stat,.gallery-grid img,.contact-box{opacity:0;transform:translateY(36px);transition:opacity .75s ease,transform .75s ease}
.show{opacity:1;transform:translateY(0)}

/* RESPONSIVE */
@media(max-width:992px){
  .menu-btn{display:block}
  .nav-links{position:fixed;top:96px;left:-100%;width:100%;background:rgba(5,5,5,.98);display:flex;flex-direction:column;align-items:center;padding:38px 0;gap:28px;border-bottom:1px solid var(--line);transition:.4s ease}
  .nav-links.active{left:0}
  .call-btn{display:none}
  .hero{padding:145px 6% 100px}
  .hero-content{max-width:650px}
  .stats .container,.service-grid,.review-grid,.features,.gallery-grid,.contact-grid{grid-template-columns:repeat(2,1fr)}
  .quote{background-attachment:scroll}
}

@media(max-width:700px){
  nav{min-height:82px}
  .logo img{height:61px}
  .nav-links{top:82px}
  section{padding:78px 0}
  .hero{min-height:92vh;padding:125px 6% 82px;background-position:62% center}
  .hero h1{font-size:46px;letter-spacing:-1px}
  .hero p{font-size:17px}
  .buttons{flex-direction:column;align-items:stretch}
  .btn-primary,.btn-secondary{width:100%}
  .trust-strip .container{justify-content:center;text-align:center}
  .stats .container,.service-grid,.review-grid,.features,.gallery-grid,.contact-grid{grid-template-columns:1fr}
  .quote-form{grid-template-columns:1fr;padding:24px}
  .quote-form textarea,.quote-form button{grid-column:1}
  .gallery-grid img{height:240px}
  .map iframe{height:360px}
  .question{padding:19px 20px;font-size:16px}
  .answer{padding:0 20px}
  .faq-item.active .answer{padding:0 20px 20px}
  .floating-call,.floating-quote,.floating-instagram,#topBtn{width:52px;height:52px;font-size:20px}
}


.stat,
.review,
.feature,
.card,
.contact-box,
.faq-item{

    background:linear-gradient(
        145deg,
        rgba(255,255,255,.075),
        rgba(255,255,255,.018)
    );

    border:1px solid rgba(255,255,255,.09);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    box-shadow:
        0 30px 80px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.08);

}

.stat:hover,
.review:hover,
.feature:hover,
.card:hover,
.contact-box:hover,
.faq-item:hover{

    transform:translateY(-8px);

    border-color:rgba(212,175,55,.45);

    box-shadow:
        0 35px 90px rgba(0,0,0,.60),
        0 0 35px rgba(212,175,55,.08),
        inset 0 1px 0 rgba(255,255,255,.10);

}

.hero h1,
section h2,
.cta-banner h2,
footer h2{

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(48px,6vw,86px);

    font-weight:600;

    letter-spacing:-1px;

    line-height:1.05;

}



section h2,
.cta-banner h2{

    font-size:clamp(42px,4vw,64px);

}

body,
button,
input,
select,
textarea,
nav,
p,
a{

    font-family:"Poppins",sans-serif;

}

/* ===========================
   BEFORE & AFTER SLIDER
=========================== */

.before-after-section {
    padding: 120px 8%;
    background: #050505;
}

.before-after-heading {
    text-align: center;
    margin-bottom: 50px;
}

.before-after-heading span {
    color: #d4af37;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.before-after-heading h2 {
    color: #fff;
    margin: 15px 0;
}

.before-after-heading p {
    color: rgba(255,255,255,.7);
}

.comparison-slider{
    position:relative;
    width:min(1100px,100%);
    aspect-ratio:16/9;
    margin:auto;
    overflow:hidden;
    border-radius:28px;
    border:1px solid rgba(212,175,55,.35);
    box-shadow:0 35px 80px rgba(0,0,0,.5);
}

.comparison-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    user-select:none;
    pointer-events:none;
}

.before-image-wrapper{
    position:absolute;
    inset:0 auto 0 0;
    width:50%;
    overflow:hidden;
    z-index:2;
}

.before-image-wrapper img{
    width:1100px;
    max-width:none;
    height:100%;
}

.comparison-divider{
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:3px;
    background:#fff;
    transform:translateX(-50%);
    z-index:5;
}

.comparison-handle{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:70px;
    height:70px;
    border:none;
    border-radius:50%;
    background:linear-gradient(135deg,#f4d35e,#d4af37);
    color:#111;
    font-size:28px;
    font-weight:bold;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    box-shadow:0 15px 35px rgba(0,0,0,.4);
    pointer-events:none;
}

.comparison-label{
    position:absolute;
    top:20px;
    padding:12px 22px;
    border-radius:30px;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    z-index:6;
}

.before-label{
    left:20px;
    background:rgba(0,0,0,.65);
    color:#fff;
}

.after-label{
    right:20px;
    background:#d4af37;
    color:#111;
}

.comparison-range{
    position:absolute;
    inset:0;
    width:100%;
    opacity:0;
    cursor:ew-resize;
    z-index:20;
}

/* ==================================
   INTERACTIVE SQUEEGEE CLEANING
================================== */

.squeegee-clean {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    isolation: isolate;
    border-top: 1px solid rgba(212,175,55,.25);
    border-bottom: 1px solid rgba(212,175,55,.25);
}

/* Clean bright image underneath */
.clean-layer,
.dirty-layer {
    position: absolute;
    inset: 0;
    background-image: url("../images/banner-clean.webp");
    background-size: cover;
    background-position: center;
}

/* Bright clean result */
.clean-layer {
    z-index: 1;
    filter:
        brightness(1.12)
        contrast(1.08)
        saturate(1.12);
}

/* Dark dirty layer that gets wiped away */
.dirty-layer {
    z-index: 2;
    width: 50%;
    overflow: hidden;

    background-image:
        linear-gradient(
            rgba(0,0,0,.72),
            rgba(0,0,0,.8)
        ),
        url("../images/hero.webp");

    filter:
        grayscale(.35)
        brightness(.65)
        blur(.35px);

    border-right: 2px solid rgba(255,255,255,.85);
}

/* Dark overlay so text remains readable */
.squeegee-clean::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.5),
            rgba(0,0,0,.22),
            rgba(0,0,0,.5)
        );
}

.squeegee-content {
    position: relative;
    z-index: 5;
    max-width: 850px;
    padding: 50px 25px;
    pointer-events: none;
}

.squeegee-content h2 {
    color: #d4af37;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(40px, 5vw, 68px);
    line-height: 1.05;
    margin-bottom: 15px;
}

.squeegee-content p {
    color: rgba(255,255,255,.88);
    font-size: 17px;
    margin-bottom: 28px;
}

.squeegee-content .btn-primary {
    pointer-events: auto;
}

/* Vertical cleaning line */
.wipe-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    z-index: 7;
    transform: translateX(-50%);
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255,255,255,.95),
        transparent
    );

    box-shadow:
        0 0 14px rgba(255,255,255,.65),
        0 0 28px rgba(212,175,55,.35);

    pointer-events: none;
}

/* Squeegee object */
.squeegee-tool {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 110px;
    height: 150px;
    transform: translate(-50%, -50%) rotate(-12deg);
    filter: drop-shadow(0 18px 18px rgba(0,0,0,.55));
}

.squeegee-handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 24px;
    height: 105px;
    transform: translateX(-50%);
    border-radius: 14px 14px 6px 6px;

    background:
        linear-gradient(
            90deg,
            #151515,
            #353535,
            #101010
        );

    border: 1px solid rgba(212,175,55,.35);
}

.squeegee-handle::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 50%;
    width: 8px;
    height: 46px;
    transform: translateX(-50%);
    border-radius: 10px;
    background: rgba(212,175,55,.75);
}

.squeegee-head {
    position: absolute;
    left: 50%;
    bottom: 16px;
    width: 110px;
    height: 25px;
    transform: translateX(-50%);
    border-radius: 7px;

    background:
        linear-gradient(
            to bottom,
            #d4af37,
            #8e6b12
        );

    border-bottom: 7px solid #111;
    box-shadow: 0 6px 12px rgba(0,0,0,.45);
}

/* Invisible interactive slider */
.wipe-range {
    position: absolute;
    inset: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
}

/* Small shine near the cleaned edge */
/* Shine that follows the squeegee */
.wipe-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 50px;
    height: 100%;
    transform: translateX(-50%);

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );

    filter: blur(8px);
    pointer-events: none;
}

@media (max-width: 700px) {

    .squeegee-clean {
        min-height: 380px;
    }

    .squeegee-tool {
        transform:
            translate(-50%, -50%)
            rotate(-12deg)
            scale(.78);
    }

    .squeegee-content h2 {
        font-size: 42px;
    }

    .squeegee-content p {
        font-size: 15px;
    }
}
/* =========================================================
   RESTORED GALLERY VISIBILITY
========================================================= */
.gallery-grid img {
    opacity: 1 !important;
    transform: none;
}

/* =========================================================
   BEFORE & AFTER CAROUSEL
========================================================= */
.before-after-carousel {
    position: relative;
    width: min(1100px, 100%);
    margin: auto;
}

.ba-slide {
    display: none;
    animation: baFade .45s ease;
}

.ba-slide.active {
    display: block;
}

@keyframes baFade {
    from { opacity: 0; transform: translateX(18px); }
    to { opacity: 1; transform: translateX(0); }
}

.ba-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(212,175,55,.55);
    background: rgba(5,5,5,.78);
    color: #d4af37;
    font-size: 28px;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 15px 35px rgba(0,0,0,.42);
    transition: .3s ease;
}

.ba-arrow:hover {
    background: #d4af37;
    color: #111;
    transform: translateY(-50%) scale(1.08);
}

.ba-prev { left: -29px; }
.ba-next { right: -29px; }

.ba-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
}

.ba-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.25);
    cursor: pointer;
    transition: .3s ease;
}

.ba-dot.active {
    width: 30px;
    border-radius: 20px;
    background: #d4af37;
}

.form-status {
    grid-column: 1 / -1;
    margin-top: 15px;
    text-align: center;
    font-weight: 600;
    min-height: 24px;
}

.form-status.success { color: #53d769; }
.form-status.error { color: #ff4d4d; }
.quote-form button:disabled { opacity: .7; cursor: not-allowed; }

@media (max-width: 900px) {
    .ba-prev { left: 12px; }
    .ba-next { right: 12px; }
    .ba-arrow { width: 48px; height: 48px; font-size: 22px; }
}

@media (max-width: 600px) {
    .ba-arrow { width: 42px; height: 42px; font-size: 19px; }
    .comparison-label { top: 12px; padding: 9px 15px; font-size: 11px; }
    .before-label { left: 12px; }
    .after-label { right: 12px; }
}

/* =========================================================
   SAFE GALLERY LIGHTBOX PATCH
   Does not change the gallery grid, squeegee or before/after.
========================================================= */
.gallery-grid img {
    cursor: zoom-in;
}

.gallery-grid img:focus-visible {
    outline: 3px solid #d4af37;
    outline-offset: 4px;
}

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 80px 86px 50px;
    background: rgba(0, 0, 0, .94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.gallery-lightbox.open {
    display: flex;
}

body.lightbox-open {
    overflow: hidden;
}

.lightbox-figure {
    width: min(1120px, 100%);
    max-height: calc(100vh - 130px);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.lightbox-figure img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: calc(100vh - 185px);
    object-fit: contain;
    border-radius: 14px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .65);
}

.lightbox-figure figcaption {
    min-height: 22px;
    color: rgba(255, 255, 255, .82);
    text-align: center;
    font-size: 14px;
}

.lightbox-close,
.lightbox-arrow {
    position: absolute;
    z-index: 2;
    border: 1px solid rgba(212, 175, 55, .55);
    background: rgba(10, 10, 10, .82);
    color: #d4af37;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, color .2s ease;
}

.lightbox-close:hover,
.lightbox-arrow:hover {
    background: #d4af37;
    color: #111;
}

.lightbox-close:focus-visible,
.lightbox-arrow:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.lightbox-close {
    top: 22px;
    right: 26px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 34px;
    line-height: 1;
}

.lightbox-arrow {
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    font-size: 25px;
}

.lightbox-arrow:hover {
    transform: translateY(-50%) scale(1.07);
}

.lightbox-prev { left: 22px; }
.lightbox-next { right: 22px; }

@media (max-width: 700px) {
    .gallery-lightbox {
        padding: 74px 18px 28px;
    }

    .lightbox-figure img {
        max-height: calc(100vh - 170px);
    }

    .lightbox-close {
        top: 14px;
        right: 14px;
        width: 44px;
        height: 44px;
    }

    .lightbox-arrow {
        top: auto;
        bottom: 18px;
        width: 46px;
        height: 46px;
    }

    .lightbox-arrow:hover {
        transform: scale(1.07);
    }

    .lightbox-prev { left: calc(50% - 58px); }
    .lightbox-next { right: calc(50% - 58px); }
}

@media (prefers-reduced-motion: reduce) {
    .lightbox-close,
    .lightbox-arrow {
        transition: none;
    }
}

/* ================= SAFE REVIEWS CAROUSEL PATCH ================= */
.reviews .container {
    overflow: hidden;
}

.review-carousel-shell {
    position: relative;
    margin-top: 32px;
    padding: 0 58px;
}

.review-carousel-shell .review-grid {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    margin: 0;
    padding: 6px 2px 18px;
}

.review-carousel-shell .review-grid::-webkit-scrollbar {
    display: none;
}

.review-carousel-shell .review {
    flex: 0 0 calc((100% - 44px) / 3);
    scroll-snap-align: start;
    min-width: 0;
}

.review-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, .55);
    background: rgba(17, 17, 17, .94);
    color: var(--gold, #d4af37);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 2;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.review-carousel-btn:hover {
    background: var(--gold, #d4af37);
    color: #111;
    transform: translateY(-50%) scale(1.06);
}

.review-carousel-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.review-carousel-prev { left: 0; }
.review-carousel-next { right: 0; }

.review-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 4px;
}

.review-carousel-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(212, 175, 55, .32);
    cursor: pointer;
}

.review-carousel-dot.active {
    background: var(--gold, #d4af37);
    transform: scale(1.25);
}

@media (max-width: 950px) {
    .review-carousel-shell .review {
        flex-basis: calc((100% - 22px) / 2);
    }
}

@media (max-width: 650px) {
    .review-carousel-shell {
        padding: 0 4px;
    }

    .review-carousel-shell .review-grid {
        gap: 14px;
        padding-inline: 2px;
    }

    .review-carousel-shell .review {
        flex-basis: 100%;
    }

    .review-carousel-btn {
        top: auto;
        bottom: -58px;
        width: 42px;
        height: 42px;
    }

    .review-carousel-prev { left: calc(50% - 72px); }
    .review-carousel-next { right: calc(50% - 72px); }

    .review-carousel-dots {
        margin-top: 16px;
        margin-bottom: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .review-carousel-shell .review-grid {
        scroll-behavior: auto;
    }

    .review-carousel-btn,
    .review-carousel-dot {
        transition: none;
    }
}


/* Mobile sticky action bar — isolated from all interactive sections */
.mobile-action-bar {
    display: none;
}

@media (max-width: 700px) {
    body {
        padding-bottom: calc(74px + env(safe-area-inset-bottom));
    }

    .mobile-action-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9998;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: rgba(9, 9, 9, .96);
        border-top: 1px solid rgba(212, 175, 55, .38);
        box-shadow: 0 -10px 30px rgba(0, 0, 0, .36);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .mobile-action-link {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        border: 1px solid rgba(212, 175, 55, .55);
        border-radius: 999px;
        color: #fff;
        background: rgba(255, 255, 255, .04);
        text-decoration: none;
        font-weight: 600;
        font-size: .93rem;
        letter-spacing: .01em;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-action-primary {
        color: #111;
        background: linear-gradient(135deg, #f3d778, #d4af37);
        border-color: #d4af37;
    }

    .mobile-action-link:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 2px;
    }

    /* Prevent duplicated mobile controls and overlap */
    .floating-call,
    .floating-quote {
        display: none !important;
    }

    .floating-instagram {
        bottom: calc(88px + env(safe-area-inset-bottom));
    }

    #topBtn {
        bottom: calc(88px + env(safe-area-inset-bottom));
    }
}

/* =========================================================
   MOBILE VISUAL FIXES — comparison, navigation and reviews
   Added without changing desktop behaviour or JavaScript.
========================================================= */
@media (max-width: 700px) {
    /* Header: cleaner compact mobile navigation */
    header {
        background: rgba(3, 3, 3, .96);
    }

    header .container {
        width: 100%;
        padding-inline: 18px;
    }

    nav {
        min-height: 76px;
        gap: 14px;
    }

    .logo img {
        height: 52px;
        max-width: 142px;
    }

    .menu-btn {
        appearance: none;
        -webkit-appearance: none;
        width: 46px;
        height: 46px;
        padding: 0;
        border: 1px solid rgba(212, 175, 55, .68);
        border-radius: 12px;
        background: rgba(212, 175, 55, .08);
        color: #d4af37;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        box-shadow: none;
    }

    .menu-btn i {
        font-size: 23px;
        line-height: 1;
    }

    .menu-btn:focus-visible {
        outline: 3px solid rgba(212, 175, 55, .42);
        outline-offset: 3px;
    }

    .nav-links {
        top: 76px;
        max-height: calc(100vh - 76px);
        overflow-y: auto;
        padding: 28px 18px 34px;
        gap: 8px;
        background: rgba(3, 3, 3, .985);
    }

    .nav-links li {
        width: min(100%, 420px);
    }

    .nav-links a {
        display: block;
        width: 100%;
        padding: 13px 18px;
        border-radius: 10px;
        text-align: center;
    }

    .nav-links a:hover,
    .nav-links a:focus-visible {
        background: rgba(212, 175, 55, .10);
    }

    /* Before/after: keep both images at the actual mobile slider width. */
    .before-after-section {
        padding-inline: 16px;
    }

    .comparison-slider {
        width: 100%;
        aspect-ratio: 4 / 3;
        border-radius: 22px;
    }

    .before-image-wrapper img {
        width: calc(100vw - 32px);
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: center;
    }

    .comparison-image {
        object-position: center;
    }

    .comparison-handle {
        width: 58px;
        height: 58px;
        font-size: 22px;
    }

    .ba-arrow {
        top: 50%;
        width: 40px;
        height: 40px;
        font-size: 17px;
    }

    .ba-prev { left: 10px; }
    .ba-next { right: 10px; }

    /* Reviews: controls sit in one balanced row under the card. */
    .review-carousel-shell {
        padding: 0 2px 60px;
    }

    .review-carousel-shell .review-grid {
        padding-bottom: 8px;
    }

    .review-carousel-btn {
        top: auto;
        bottom: 0;
        width: 42px;
        height: 42px;
        transform: none;
    }

    .review-carousel-btn:hover {
        transform: scale(1.05);
    }

    .review-carousel-prev {
        left: calc(50% - 108px);
    }

    .review-carousel-next {
        right: calc(50% - 108px);
    }

    .review-carousel-dots {
        position: absolute;
        left: 50%;
        bottom: 15px;
        transform: translateX(-50%);
        width: 112px;
        margin: 0;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .review-carousel-dot {
        flex: 0 0 9px;
    }
}

@media (max-width: 390px) {
    .before-image-wrapper img {
        width: calc(100vw - 24px);
    }

    .before-after-section {
        padding-inline: 12px;
    }

    .review-carousel-prev {
        left: calc(50% - 96px);
    }

    .review-carousel-next {
        right: calc(50% - 96px);
    }
}

/* =========================================================
   MOBILE TOUCH + RESPONSIVE FIXES
   Prevents sticky hover states and keeps cards fluid on phones.
========================================================= */
@media (max-width: 700px) {
    .stats .container,
    .service-grid {
        width: 100%;
        max-width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .service-grid {
        margin-top: 34px;
    }

    .stat,
    .card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .stat {
        padding: 28px 20px;
    }

    .stat h2 {
        font-size: 38px;
    }

    .card {
        padding: 30px 22px;
        border-radius: 18px;
    }

    .card i {
        font-size: 43px;
        margin-bottom: 18px;
    }

    .card h3 {
        font-size: 21px;
    }

    /* No navigation item is highlighted by default. */
    .nav-links a,
    .nav-links a:visited {
        color: #d8ceb7;
        background: transparent;
    }

    .nav-links a::after {
        bottom: 4px;
    }
}

/* Phones/tablets do not have a real hover state. Some mobile browsers
   keep the last tapped element in :hover, making Services look selected. */
@media (hover: none), (pointer: coarse) {
    .nav-links a:hover,
    nav ul li a:hover {
        color: #d8ceb7;
        background: transparent;
    }

    .nav-links a:hover::after,
    nav ul li a:hover::after {
        width: 0;
    }

    .stat:hover,
    .card:hover,
    .review:hover,
    .feature:hover,
    .contact-box:hover,
    .faq-item:hover,
    .trust-strip .container div:hover {
        transform: none;
    }

    .stat:hover,
    .card:hover,
    .review:hover,
    .feature:hover {
        border-color: rgba(255,255,255,.09);
    }

    /* A short touch response replaces desktop hover. */
    .stat:active,
    .card:active,
    .review:active,
    .feature:active {
        transform: translateY(-3px) scale(.995);
        border-color: rgba(212,175,55,.55);
        box-shadow:
            0 24px 58px rgba(0,0,0,.52),
            0 0 24px rgba(212,175,55,.08);
    }

    .nav-links a:active,
    .nav-links a:focus-visible {
        color: #fff;
        background: rgba(212,175,55,.10);
    }

    .nav-links a:active::after,
    .nav-links a:focus-visible::after {
        width: 100%;
    }
}
/* =========================================================
   SMART RESPONSIVE QUOTE FORM
   ========================================================= */
.quote-introduction{max-width:720px;margin:0 auto 36px;color:#b8b8b8;text-align:center;line-height:1.8}
.smart-quote-form{display:block;max-width:980px;padding:clamp(20px,4vw,40px)}
.quote-progress{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:12px;margin-bottom:34px}
.quote-progress-item{display:flex;align-items:center;gap:9px;color:#8d8d8d;white-space:nowrap}
.quote-progress-item span{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(212,175,55,.35);border-radius:50%;font-weight:700}
.quote-progress-item strong{font-size:13px;font-weight:600}
.quote-progress-item.active{color:#fff}.quote-progress-item.active span,.quote-progress-item.complete span{color:#111;background:linear-gradient(135deg,#b8861d,#f3d675);border-color:#d4af37}
.quote-progress-line{height:1px;background:rgba(212,175,55,.2)}
.quote-step{display:none}.quote-step.active{display:block;animation:quoteStepIn .3s ease}
@keyframes quoteStepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.form-section-title{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:13px;border-bottom:1px solid rgba(212,175,55,.2)}
.form-section-title>span{width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;border-radius:50%;color:#111;background:linear-gradient(135deg,#b8861d,#f3d675);font-weight:800}
.form-section-title h3{margin:0;color:#fff;font-family:"Cormorant Garamond",serif;font-size:clamp(24px,3vw,30px)}
.service-choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;border:0;padding:0;margin:0}
.service-choice{position:relative;min-height:132px;padding:20px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;border:1px solid rgba(212,175,55,.2);border-radius:16px;background:rgba(10,10,10,.5);cursor:pointer;transition:.25s ease}
.service-choice input{position:absolute;opacity:0;pointer-events:none}.service-choice i{font-size:28px;color:#d4af37}.service-choice span{color:#e8e8e8;font-size:13px;font-weight:600;line-height:1.35}
.service-choice:hover,.service-choice:has(input:checked){border-color:#d4af37;background:rgba(212,175,55,.1);transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.3)}
.service-choice:has(input:focus-visible){outline:3px solid rgba(212,175,55,.35);outline-offset:3px}
.dynamic-service-fields,.common-job-fields,.contact-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.dynamic-service-fields{display:none}.dynamic-service-fields.active{display:grid}
.form-field{display:flex;flex-direction:column;gap:9px;min-width:0}.form-field-full{grid-column:1/-1}.form-field label{color:#e6e6e6;font-size:14px;font-weight:600}
.smart-quote-form input,.smart-quote-form select,.smart-quote-form textarea{width:100%;min-height:54px;padding:15px 16px;background:rgba(10,10,10,.5);color:#fff;border:1px solid rgba(212,175,55,.18);border-radius:12px;font:inherit;outline:none;transition:.25s ease}
.smart-quote-form textarea{min-height:145px;resize:vertical}.smart-quote-form input:focus,.smart-quote-form select:focus,.smart-quote-form textarea:focus{border-color:#d4af37;box-shadow:0 0 0 3px rgba(212,175,55,.12)}
.smart-quote-form select option{background:#111;color:#fff}.smart-quote-form input[type=date]{color-scheme:dark}
.common-job-fields{margin-top:18px;padding-top:22px;border-top:1px solid rgba(212,175,55,.16)}
.quote-step-actions{display:flex;justify-content:space-between;gap:14px;margin-top:28px}.quote-step-actions-end{justify-content:flex-end}
.quote-next-button,.quote-back-button,.quote-submit-button{min-height:52px;padding:14px 24px;border-radius:999px;font:inherit;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:.25s ease}
.quote-next-button,.quote-submit-button{border:0;color:#111;background:linear-gradient(135deg,#b8861d,#f4d35e)}.quote-back-button{border:1px solid rgba(212,175,55,.48);color:#d4af37;background:rgba(255,255,255,.03)}
.quote-next-button:hover,.quote-back-button:hover,.quote-submit-button:hover{transform:translateY(-2px)}.quote-submit-button:disabled{opacity:.65;cursor:not-allowed}
.quote-privacy-message{margin:18px 0 0;color:#929292;text-align:center;font-size:12px;line-height:1.7}.quote-privacy-message a{color:#d4af37}.form-status{margin-top:12px;text-align:center;min-height:24px;font-weight:600}.form-status.error{color:#ff6b6b}.form-status.success{color:#53d769}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.field-invalid{border-color:#ff6b6b!important;box-shadow:0 0 0 3px rgba(255,107,107,.12)!important}
@media(max-width:900px){.service-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.quote-progress{grid-template-columns:repeat(3,1fr);gap:8px}.quote-progress-line{display:none}.quote-progress-item{justify-content:center;flex-direction:column;gap:6px;text-align:center}.quote-progress-item strong{font-size:11px}.dynamic-service-fields,.common-job-fields,.contact-form-grid{grid-template-columns:1fr}.form-field-full{grid-column:1}.service-choice-grid{gap:10px}.service-choice{min-height:116px;padding:16px 10px}.quote-step-actions{flex-direction:column-reverse}.quote-step-actions-end{flex-direction:column}.quote-next-button,.quote-back-button,.quote-submit-button{width:100%;min-height:54px}.smart-quote-form{padding:20px 15px;border-radius:20px}}
@media(max-width:390px){.service-choice-grid{grid-template-columns:1fr 1fr}.service-choice span{font-size:12px}.quote-progress-item span{width:30px;height:30px}}
@media(hover:none),(pointer:coarse){.service-choice:hover,.quote-next-button:hover,.quote-back-button:hover,.quote-submit-button:hover{transform:none}}

/* =========================================================
   PREMIUM REVIEW SECTION
   ========================================================= */

.reviews-summary {
    max-width: 700px;
    margin: 0 auto 42px;
    text-align: center;
}

.reviews-summary-stars {
    margin-bottom: 10px;
    color: #d4af37;
    font-size: 22px;
    letter-spacing: 4px;
}

.google-review-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 16px;
    padding: 9px 17px;
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 999px;
    color: #d4af37;
    background: rgba(212, 175, 55, 0.05);
    font-size: 13px;
    font-weight: 500;
}

.google-review-label i {
    font-size: 17px;
}

.review {
    position: relative;
    padding: 28px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 20px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.015)
        );
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.review::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        #d4af37,
        transparent
    );
    opacity: 0.7;
}

.review:hover {
    transform: translateY(-7px);
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.32);
}

.review-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.review-top h4 {
    margin: 0 0 4px;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 600;
}

.review-top span {
    display: block;
    color: #969696;
    font-size: 12px;
}

.review-google-icon {
    flex-shrink: 0;
    color: #d4af37;
    font-size: 22px;
}

.review .stars {
    margin-bottom: 16px;
    color: #d4af37;
    font-size: 16px;
    letter-spacing: 3px;
}

.review p {
    margin: 0;
    color: #dddddd;
    font-size: 14px;
    line-height: 1.8;
}

@media (max-width: 768px) {
    .reviews-summary {
        margin-bottom: 30px;
    }

    .review {
        padding: 23px 20px;
    }

    .review-top {
        gap: 12px;
    }

    .review p {
        font-size: 13px;
        line-height: 1.75;
    }
}

/* =========================================================
   COMPLETE SERVICE-SPECIFIC QUOTE DETAILS
   Isolated to the smart quotation form only.
========================================================= */
.service-fields-heading {
    margin: 10px 0 0;
    padding: 15px 0 3px;
    border-bottom: 1px solid rgba(212, 175, 55, .22);
}

.service-fields-heading h4 {
    margin: 0 0 5px;
    color: #f3d675;
    font-family: "Cormorant Garamond", serif;
    font-size: 25px;
    font-weight: 600;
}

.service-fields-heading p {
    margin: 0 0 8px;
    color: #a9a9a9;
    font-size: 13px;
    line-height: 1.65;
}

.smart-quote-form .dynamic-service-fields .form-extras {
    grid-column: 1 / -1;
}

@media (max-width: 700px) {
    .service-fields-heading {
        padding-top: 10px;
    }

    .service-fields-heading h4 {
        font-size: 22px;
    }

    .smart-quote-form .dynamic-service-fields .form-extras {
        grid-column: 1;
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   CHECKBOX SIZE FIX ONLY
   This only affects the End-of-Lease extras checkboxes.
========================================================= */

.smart-quote-form .form-extras{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    border:0;
    padding:0;
    margin-top:12px;
}

.smart-quote-form .extra-option{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(212,175,55,.15);
    border-radius:10px;
}

.smart-quote-form .extra-option input[type="checkbox"]{
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    min-height:18px !important;
    max-width:18px !important;
    max-height:18px !important;
    margin:0;
    flex:0 0 18px;
    accent-color:#d4af37;
}

.smart-quote-form .extra-option label,
.smart-quote-form .extra-option span{
    flex:1;
}

@media (max-width:700px){
    .smart-quote-form .form-extras{
        grid-template-columns:1fr;
    }
}