/* Flash Quality Multiservice — bright, clean, professional cleaning brand */
:root{
  --navy:#16243F; --slate:#445064; --muted:#828BA0; --ink:#16243F;
  --bg:#FFFFFF; --bg-soft:#F5F8FC; --bg-tint:#EEF4FB;
  --line:#E4EAF2;
  --pink:#E5208A; --purple:#7C53D6; --cyan:#1FBFD4;
  --grad:linear-gradient(90deg,#E5208A 0%,#7C53D6 50%,#1FBFD4 100%);
  --grad-soft:linear-gradient(90deg,#FCE9F3 0%,#EBE7FA 50%,#E2F6F9 100%);
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--slate);
  font-family:"Inter",system-ui,sans-serif; font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
h1,h2,h3,h4{font-family:"Poppins",system-ui,sans-serif; color:var(--navy); margin:0; line-height:1.15}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 1.5rem}
.eyebrow{font-family:"Poppins",sans-serif; font-weight:600; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin:0 0 .8rem}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* buttons */
.btn{font-family:"Poppins",sans-serif; font-weight:600; font-size:.95rem; padding:.85rem 1.6rem; border-radius:10px; display:inline-block; transition:transform .15s, box-shadow .15s; cursor:pointer}
.btn-grad{background:var(--grad); color:#fff; box-shadow:0 6px 18px rgba(124,83,214,.28)}
.btn-grad:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(124,83,214,.34)}
.btn-ghost{border:1.5px solid var(--line); color:var(--navy)}
.btn-ghost:hover{border-color:var(--purple); color:var(--purple)}

/* nav */
.nav{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:.7rem 1.5rem; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:.7rem}
.brand img{height:38px; width:auto; display:block}
.brand-name{font-family:"Poppins",sans-serif; font-weight:700; color:var(--navy); font-size:1.05rem; line-height:1.1}
.brand-name span{display:block; font-weight:500; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.nav-links{display:flex; align-items:center; gap:1.7rem; font-size:.92rem; font-weight:500}
.nav-links a{color:var(--slate); transition:color .2s}
.nav-links a:hover{color:var(--purple)}
.nav-links .btn{padding:.6rem 1.2rem}

/* hero */
.hero{position:relative; overflow:hidden; background:var(--bg-soft)}
.hero::before{content:""; position:absolute; inset:0; background:radial-gradient(800px 400px at 85% -10%, rgba(31,191,212,.14), transparent), radial-gradient(700px 360px at 0% 110%, rgba(229,32,138,.10), transparent)}
.hero-inner{position:relative; max-width:var(--maxw); margin:0 auto; padding:5rem 1.5rem 4.5rem; text-align:center}
.hero h1{font-weight:700; font-size:clamp(2.6rem,6.5vw,4.6rem); letter-spacing:-.02em; margin:.6rem 0 1.2rem}
.hero p.sub{font-size:1.22rem; color:var(--slate); max-width:46ch; margin:0 auto 1.4rem}
.trust{display:flex; gap:.6rem 1.4rem; justify-content:center; flex-wrap:wrap; font-size:.92rem; font-weight:500; color:var(--navy); margin:0 0 2.2rem}
.trust span{display:inline-flex; align-items:center; gap:.4rem}
.stars{color:#F5A623; letter-spacing:.05em}
.hero-actions{display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap}

/* sections */
section{padding:4.8rem 0}
.section-soft{background:var(--bg-soft)}
.section-head{text-align:center; max-width:60ch; margin:0 auto 3rem}
.section-head h2{font-weight:700; font-size:clamp(2rem,4.4vw,2.9rem); letter-spacing:-.01em; margin:.4rem 0 .8rem}
.section-head p{font-size:1.08rem; color:var(--slate); margin:0}

/* services grid */
.services{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.1rem}
.svc{background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.7rem 1.6rem; transition:transform .18s, box-shadow .18s, border-color .18s}
.svc:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(22,36,63,.08); border-color:transparent}
.svc .ic{width:46px; height:46px; border-radius:12px; background:var(--grad-soft); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:1rem}
.svc h3{font-size:1.18rem; font-weight:600; margin:0 0 .5rem}
.svc p{font-size:.98rem; color:var(--slate); margin:0}

/* why / features */
.feats{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.4rem}
.feat{padding:0}
.feat .n{font-family:"Poppins",sans-serif; font-weight:700; font-size:2.6rem; line-height:1; margin-bottom:.4rem}
.feat h3{font-size:1.12rem; font-weight:600; margin:0 0 .4rem}
.feat p{font-size:.98rem; color:var(--slate); margin:0}

/* eco split */
.split{display:grid; grid-template-columns:1.1fr 1fr; gap:3rem; align-items:center}
.split .eco-card{background:var(--grad-soft); border-radius:20px; padding:2.6rem 2.4rem}
.split h2{font-size:clamp(1.9rem,4vw,2.6rem); font-weight:700; margin:.4rem 0 1rem}
.split ul{list-style:none; padding:0; margin:1.2rem 0 0}
.split li{padding:.45rem 0 .45rem 1.9rem; position:relative; color:var(--slate)}
.split li::before{content:"✦"; position:absolute; left:0; color:var(--purple)}

/* reviews */
.reviews{text-align:center}
.rating-big{font-family:"Poppins",sans-serif; font-weight:700; font-size:4rem; color:var(--navy); line-height:1}
.review-quote{font-size:1.3rem; color:var(--navy); max-width:40ch; margin:1.6rem auto; font-weight:500; font-style:italic}

/* process */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.4rem; counter-reset:step}
.step{position:relative; background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.6rem 1.5rem 1.5rem}
.step .sn{font-family:"Poppins",sans-serif; font-weight:700; font-size:.9rem; color:#fff; background:var(--grad); width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:.9rem}
.step h3{font-size:1.08rem; font-weight:600; margin:0 0 .4rem}
.step p{font-size:.95rem; color:var(--slate); margin:0}

/* area */
.area-tags{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:1.6rem}
.area-tags span{background:var(--bg-tint); color:var(--navy); font-weight:500; font-size:.92rem; padding:.5rem 1.1rem; border-radius:999px}

/* contact */
.contact-card{background:var(--navy); border-radius:24px; padding:3.4rem 2.6rem; text-align:center; color:#fff}
.contact-card h2{color:#fff; font-size:clamp(2rem,4.4vw,2.9rem); font-weight:700; margin:0 0 .7rem}
.contact-card p.lead{color:#C4CDDD; font-size:1.1rem; margin:0 auto 2rem; max-width:44ch}
.contact-rows{display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-bottom:2rem}
.contact-rows a{display:inline-flex; align-items:center; gap:.6rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); padding:.8rem 1.3rem; border-radius:12px; font-weight:500; transition:background .2s}
.contact-rows a:hover{background:rgba(255,255,255,.16)}

/* footer */
.footer{background:#0E1320; color:#9AA3B5; padding:3rem 0 2.2rem}
.footer-inner{max-width:var(--maxw); margin:0 auto; padding:0 1.5rem; display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; align-items:center}
.footer img{width:190px; height:auto}
.footer .fcontact{font-size:.92rem; line-height:1.9}
.footer .fcontact a:hover{color:#fff}
.copyright{max-width:var(--maxw); margin:2rem auto 0; padding:1.4rem 1.5rem 0; border-top:1px solid rgba(255,255,255,.08); font-size:.82rem; color:#6B7488}

@media (max-width:820px){
  .split{grid-template-columns:1fr; gap:2rem}
  .nav-links a:not(.btn){display:none}
}
@media (max-width:560px){
  body{font-size:16px}
  section{padding:3.4rem 0}
  .brand-name span{display:none}
}
:focus-visible{outline:2px solid var(--purple); outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto}}

/* ============ v2: clickable service cards, service pages, quote form ============ */

/* service cards become links */
.svc{display:flex; flex-direction:column; text-decoration:none}
.svc .svc-link{margin-top:auto; padding-top:1rem; font-family:"Poppins",sans-serif; font-weight:600; font-size:.9rem; color:var(--purple)}
.svc:hover .svc-link{color:var(--pink)}

/* service detail hero */
.svc-hero{background:var(--bg-soft); position:relative; overflow:hidden; padding:2.4rem 0 3.4rem}
.svc-hero::before{content:""; position:absolute; inset:0; background:radial-gradient(700px 360px at 90% -20%, rgba(31,191,212,.16), transparent), radial-gradient(600px 300px at 5% 120%, rgba(229,32,138,.12), transparent)}
.svc-hero .wrap{position:relative}
.back{display:inline-block; font-weight:500; font-size:.9rem; color:var(--slate); margin-bottom:1.6rem; transition:color .2s}
.back:hover{color:var(--purple)}
.svc-hero-icon{width:78px; height:78px; border-radius:20px; background:var(--grad-soft); display:flex; align-items:center; justify-content:center; font-size:2.6rem; margin-bottom:1.1rem}
.svc-hero h1{font-size:clamp(2.2rem,5vw,3.4rem); font-weight:700; letter-spacing:-.01em; margin:0 0 .5rem}
.svc-tag{font-size:1.25rem; color:var(--slate); margin:0 0 1.8rem}

/* service body */
.narrow{max-width:760px}
.svc-body{padding:3.6rem 0}
.lead-p{font-size:1.22rem; color:var(--navy); line-height:1.65; margin:0 0 2.4rem}
.svc-body h2{font-size:1.7rem; font-weight:700; margin:2.4rem 0 1rem}
.muted-p{color:var(--muted); margin:.2rem 0 1.4rem}
.check{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1.6rem}
.check li{position:relative; padding-left:1.9rem; color:var(--slate)}
.check li::before{content:"✓"; position:absolute; left:0; top:-1px; width:1.3rem; height:1.3rem; background:var(--grad); color:#fff; border-radius:50%; font-size:.75rem; display:flex; align-items:center; justify-content:center; font-weight:700}
.goodfor{background:var(--bg-tint); border-radius:14px; padding:1.2rem 1.4rem; margin:2rem 0 0; color:var(--slate)}
.goodfor strong{color:var(--navy)}

/* photo gallery + empty placeholders */
.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem}
.shot{aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:var(--grad-soft)}
.shot img{width:100%; height:100%; object-fit:cover; display:block}
.shot.empty{display:flex; align-items:center; justify-content:center}
.shot.empty::after{content:attr(data-ic); font-size:3rem; opacity:.4}

/* shared CTA band wrapper */
.cta-band-wrap{padding:4.6rem 0}

/* quote page */
.quote-hero{background:var(--bg-soft); position:relative; overflow:hidden; padding:3.4rem 0 3rem; text-align:center}
.quote-hero::before{content:""; position:absolute; inset:0; background:radial-gradient(700px 360px at 80% -20%, rgba(124,83,214,.14), transparent)}
.quote-hero .wrap{position:relative}
.quote-hero h1{font-size:clamp(2.2rem,5vw,3.4rem); font-weight:700; margin:.3rem 0 .8rem}
.quote-hero .sub{font-size:1.15rem; color:var(--slate); max-width:48ch; margin:0 auto}
.quote-form-wrap{padding:3rem 0 4.6rem}

.qform fieldset{border:1px solid var(--line); border-radius:18px; padding:1.8rem 1.6rem; margin:0 0 1.4rem}
.qform legend{font-family:"Poppins",sans-serif; font-weight:600; color:var(--navy); padding:0 .6rem; font-size:1.05rem}
.field{margin:0 0 1.1rem}
.field:last-child{margin-bottom:0}
.field label{display:block; font-weight:500; color:var(--navy); margin-bottom:.45rem; font-size:.95rem}
.field input, .field textarea{width:100%; border:1.5px solid var(--line); border-radius:10px; padding:.75rem .9rem; font-family:inherit; font-size:1rem; color:var(--navy); background:#fff; transition:border-color .15s}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--purple)}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
.chk-grid{display:grid; grid-template-columns:1fr 1fr; gap:.7rem}
.chk, .rad{display:flex; align-items:center; gap:.55rem; font-size:.97rem; color:var(--slate); cursor:pointer; padding:.2rem 0}
.chk input, .rad input{width:18px; height:18px; accent-color:var(--purple); cursor:pointer}
.radio-row{display:flex; flex-wrap:wrap; gap:.4rem 1.3rem}
.btn-big{width:100%; text-align:center; padding:1.05rem; font-size:1.05rem; border:none}
.form-note{text-align:center; color:var(--muted); font-size:.92rem; margin:1rem 0 0}
.form-note a{color:var(--purple); font-weight:600}
.success{text-align:center; padding:3rem 1.5rem; font-family:"Poppins",sans-serif; font-weight:600; font-size:1.3rem; color:var(--navy); background:var(--grad-soft); border-radius:18px}

@media (max-width:560px){
  .check{grid-template-columns:1fr}
  .grid-2, .chk-grid{grid-template-columns:1fr}
}