/* BookMyRight service pages: one stylesheet shared by /cleaning /ac-repair /plumbing /electrician.
   Brand colours live ONLY in this :root block. Change them here and all four services follow. */
:root{--p:#f23a3b;--p2:#ff7a45;--n:#14213d;--n2:#22345f;--bg:#f5f6fa;--t:#1f2937;--m:#64748b;--l:#e6e9f0;--s:#fff1f0;--ok:#16a34a;--g:linear-gradient(135deg,var(--p),var(--p2));--r:16px;--sd:0 2px 10px #14213d14}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--t);background:var(--bg);padding-bottom:56px;-webkit-text-size-adjust:100%}
a{color:var(--p);text-decoration:none}
ul,ol{list-style:none;padding:0}
.w{max-width:1160px;margin:auto;padding:0 14px}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* header */
.hd{background:#fff;position:sticky;top:0;z-index:30;border-bottom:1px solid var(--l)}
.hw{display:flex;align-items:center;gap:8px;height:56px}
.logo{display:flex;align-items:center;gap:8px;margin-right:auto;min-width:0}
.logo img{height:30px;width:auto;display:block}
.lt{font-size:.66rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--p);background:var(--s);padding:3px 8px;border-radius:12px;white-space:nowrap}
.dd{position:relative}
.dd summary:after{content:none}.dd summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:3px;white-space:nowrap;font-size:.84rem;font-weight:600;color:var(--n);padding:6px 9px;border:1px solid var(--l);border-radius:20px}
.dd summary::-webkit-details-marker{display:none}.dd .i{width:15px;height:15px}.dd summary .i:first-child{color:var(--p)}
.dm{position:absolute;right:0;top:44px;background:#fff;border-radius:12px;box-shadow:0 10px 30px #14213d33;min-width:180px;padding:6px;display:grid}
.dm a,.dm span{padding:9px 12px;border-radius:8px;font-size:.92rem}.dm a{color:var(--n);font-weight:600}.dm a:hover{background:var(--s)}.dm span{color:#94a3b8}
.dm em{font-size:.68rem;background:var(--l);border-radius:8px;padding:1px 6px;font-style:normal}
.hd .hq{display:none}
.hc{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--g);color:#fff;width:38px;height:38px;border-radius:50%;font-size:.85rem;font-weight:700}
.hc b{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--g);color:#fff!important;font-weight:700;padding:11px 18px;border-radius:26px;font-size:.92rem;border:0;cursor:pointer;box-shadow:0 4px 12px #f23a3b40;font-family:inherit}
.btn .i{width:17px;height:17px}.btn.g{background:#ffffff1c;box-shadow:none;border:1px solid #ffffff55}
.btn.g2{background:#fff;color:var(--n)!important;border:1px solid var(--l);box-shadow:none}

/* hero */
.hero{position:relative;overflow:hidden;color:#fff;padding:20px 0 46px;background:radial-gradient(circle at 90% 8%,#f23a3b59 0,transparent 45%),radial-gradient(circle at 0 110%,#ff7a4538 0,transparent 42%),linear-gradient(135deg,var(--n),var(--n2))}
.hg{position:relative}.ht{position:relative;z-index:1;max-width:640px}
.hero h1{font-size:1.6rem;line-height:1.2;margin:8px 0}
.hero h1 em{font-style:normal;color:#ffa58a}
.lead{opacity:.9;font-size:.96rem}
.bc{font-size:.78rem;opacity:.85}.bc a{color:#fff}
.chp{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.chp span{display:flex;align-items:center;gap:4px;background:#ffffff1c;border-radius:16px;padding:3px 10px;font-size:.78rem}.chp .i{width:14px;height:14px}
.hb{display:flex;flex-wrap:wrap;gap:8px}.hb .btn{flex:1 1 40%;padding:11px 12px}.hb .btn:first-child{flex-basis:100%}
.hv{position:absolute;right:-6px;bottom:-22px;width:150px;height:150px;opacity:.2;stroke:#fff;stroke-width:1.6}

/* trust strip */
.tr{margin-top:-26px;position:relative;z-index:2}
.tr ul{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:var(--r);box-shadow:var(--sd)}
.tr li{padding:12px 2px;text-align:center;font-size:.7rem;color:var(--m);border-right:1px solid var(--l)}.tr li:last-child{border:0}
.tr b{display:block;font-size:1rem;color:var(--p)}

/* sections */
.sec{padding:22px 0}.sec.alt{background:#fff}
.sh{margin-bottom:14px}.sh h2{font-size:1.22rem;line-height:1.25}.sh p{color:var(--m);font-size:.9rem;margin-top:3px}
.eb{display:block;font-size:.68rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--p);margin-bottom:2px}
.dk{background:var(--n);color:#fff}.dk .sh p{color:#cbd5e1}.dk .eb{color:#ff9a7a}

/* side-scrollers on mobile, grids on desktop (keeps pages short and DOM small) */
.sc{display:flex;gap:10px;overflow-x:auto;margin:0 -14px;padding:2px 14px 8px;scroll-padding:0 14px;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sc::-webkit-scrollbar{display:none}
.sc>*{flex:0 0 76%;scroll-snap-align:start}
.sc2{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:46%}.sc2>*{flex:none}
.cd .sc{margin:0 -14px}

/* service tiles */
.tc{position:relative;display:flex;flex-direction:column;gap:2px;height:100%;background:#fff;border:1px solid var(--l);border-radius:14px;padding:12px;color:var(--t)}
.alt .tc{background:var(--bg)}
.ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--s);color:var(--p);margin-bottom:6px}.ic .i{width:22px;height:22px}
.tc b{font-size:.88rem;line-height:1.25}.tc small{font-size:.74rem;color:var(--m);line-height:1.3}
.tc.hot{border-color:#f23a3b66}.tg{position:absolute;right:8px;top:8px;background:var(--g);color:#fff;font-size:.62rem;font-weight:700;border-radius:10px;padding:1px 7px}

/* problems */
.pg li{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--l);border-radius:12px;padding:10px;font-size:.84rem;font-weight:600;line-height:1.25}.pg .i{color:var(--p);width:22px;height:22px}

/* steps */
.st li{position:relative;background:#fff;border:1px solid var(--l);border-radius:14px;padding:14px}
.alt .st li,.cd .st li{background:var(--bg)}
.st b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--g);color:#fff;margin-bottom:8px}
.st h4{font-size:.95rem}.st p{font-size:.84rem;color:var(--m)}

/* why us */
.wy li{background:#ffffff12;border:1px solid #ffffff22;border-radius:14px;padding:14px}
.wy .i{color:#ff9a7a;width:26px;height:26px;margin-bottom:6px}.wy b{display:block}.wy span{font-size:.86rem;color:#cbd5e1}

/* reviews */
.rv blockquote{position:relative;background:var(--bg);border-radius:14px;padding:14px;font-size:.9rem}
.rv blockquote:before{content:"\201C";position:absolute;right:12px;top:-2px;font:700 3rem/1 Georgia,serif;color:#f23a3b2e}
.stars{color:#f59e0b;letter-spacing:2px}.rv cite{display:block;margin-top:8px;font-size:.76rem;color:var(--m);font-style:normal}

/* areas: two-row side scroller on mobile */
.ar{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:max-content;gap:6px;overflow-x:auto;margin:0 -14px;padding:0 14px 6px;scrollbar-width:none}
.ar::-webkit-scrollbar{display:none}
.ar span{background:var(--s);color:var(--n);border-radius:16px;padding:3px 11px;font-size:.84rem;white-space:nowrap}

/* city cards */
.cy li{display:flex}.cy a,.cy li.off{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 6px;background:#fff;border:1px solid var(--l);border-radius:14px;color:var(--t)}
.cy .i{color:var(--p);width:24px;height:24px}.cy small{color:var(--m)}.cy .off{opacity:.5}.cy li{flex:0 0 38%}

/* content cards (service page) */
.lay{display:grid;gap:14px}.mc,.side{display:grid;gap:14px;align-content:start;min-width:0}
.cd{background:#fff;border-radius:var(--r);padding:16px;box-shadow:var(--sd);min-width:0}
.ov{font-size:.96rem}
.inc{display:grid;gap:8px}.inc li{display:flex;gap:8px;font-size:.9rem;background:var(--bg);border-radius:10px;padding:9px}.inc .i{color:var(--ok);width:18px;height:18px;margin-top:2px}
.cd details{background:var(--bg);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.cd summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:8px}
.cd summary::-webkit-details-marker{display:none}.cd summary:after{content:"+";color:var(--p);font-weight:700}.cd details[open]>summary:after{content:"\2212"}
.cd details p{margin-top:6px;font-size:.92rem;color:#475569}
.cl{display:grid;gap:8px}.cl .btn{width:100%}
.ol h3{font-size:1rem;margin-bottom:8px}.ol ul{display:grid;gap:2px}.ol a{display:flex;align-items:center;gap:8px;padding:8px 6px;border-radius:8px;color:var(--t);font-size:.9rem;font-weight:600}.ol a:hover{background:var(--s)}.ol .i{color:var(--p);width:18px;height:18px}

/* service photo (real image if /img/services/<slug>.webp|jpg exists, otherwise icon banner) */
.ph{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;max-height:340px;width:100%;box-shadow:var(--sd);background:var(--n)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph.bn{aspect-ratio:auto;max-height:none;display:grid;grid-template-columns:1.2fr 1fr;gap:8px 4px;padding:14px;color:var(--t);background:radial-gradient(circle at 82% 38%,#f23a3b1f 0,transparent 55%),linear-gradient(135deg,#fff,#fff1f0)}
.bt{display:flex;flex-direction:column;gap:6px;align-self:center;min-width:0}
.bs{align-self:flex-start;font-size:.64rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--p);background:#fff;border:1px solid #f23a3b33;border-radius:12px;padding:2px 9px}
.bh{font-size:1.4rem;line-height:1.12;font-weight:800;color:var(--n)}.bh b{color:var(--p)}
.bp{font-size:.8rem;color:var(--m);line-height:1.4}
.bq{align-self:flex-start;background:var(--g);color:#fff;border-radius:12px;padding:7px 14px;margin-top:2px}.bq small{display:block;font-size:.58rem;letter-spacing:.8px;opacity:.9}.bq b{font-size:1.1rem}
.ph .ba{width:100%;max-width:250px;height:auto;aspect-ratio:1;align-self:end;justify-self:center}
.bv{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border-radius:12px;box-shadow:var(--sd)}
.bv li{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px;font-size:.68rem;font-weight:600;text-align:center;line-height:1.25;border-right:1px solid var(--l)}.bv li:last-child{border:0}.bv .i{color:var(--p);width:20px;height:20px}
.bb{grid-column:1/-1;display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:9px 12px;box-shadow:var(--sd);color:var(--n)}
.bb span:nth-child(2){flex:1;display:flex;flex-direction:column;line-height:1.25}.bb b{font-size:.92rem}.bb small{font-size:.74rem;color:var(--m)}
.bi{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--s);color:var(--p)}.bb .bg{width:30px;height:30px;padding:7px;border-radius:50%;background:var(--g);color:#fff}
@media(min-width:520px){.ph.bn{padding:20px 22px}.bh{font-size:2rem}.bp{font-size:.92rem}.bv li{flex-direction:row;justify-content:center;font-size:.8rem;gap:6px;padding:11px 6px}}

/* quote form */
.fc{background:#fff;color:var(--t);border-radius:var(--r);padding:16px;box-shadow:var(--sd)}
.fc h2{font-size:1.15rem;margin-bottom:2px}.sub{font-size:.84rem;color:var(--m);margin-bottom:10px}
form.l{display:grid;gap:8px}
form input,form select,form button{font:inherit;font-size:16px;padding:11px 12px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;width:100%}
form input:focus,form select:focus{outline:2px solid #f23a3b55;border-color:var(--p)}
form button{background:var(--g);color:#fff;border:0;font-weight:700;cursor:pointer}form button:disabled{opacity:.6}
form input.hp{position:absolute;left:-9999px;width:1px;height:1px;padding:0;border:0;opacity:0}
.ok{color:#15803d;font-weight:700}.er{color:#b91c1c;margin-top:6px;font-size:.9rem}
.fq{padding:26px 0;background:radial-gradient(circle at 100% 0,#ffffff2e 0,transparent 40%),var(--g);color:#fff;scroll-margin-top:60px}
.fqg{display:grid;gap:16px}.fq h2{font-size:1.4rem;line-height:1.25;margin-bottom:6px}.fq .eb{color:#fff;opacity:.85}.fq p{opacity:.95}.fq .chp span{background:#ffffff26}
.fq .fc h2{font-size:1.15rem}.fq .fc .sub{opacity:1}
#q{scroll-margin-top:68px}

/* dialog */
dialog{margin:auto;border:0;border-radius:16px;padding:0;width:min(92vw,400px);max-height:92vh;overflow:auto}dialog::backdrop{background:#0009}
#qb{padding:16px}.x{position:absolute;right:10px;top:4px;background:0;border:0;font-size:30px;line-height:1;cursor:pointer;color:var(--m)}

/* footer */
footer{background:#0f1a30;color:#aab4c8;margin-top:22px;padding-top:26px;font-size:.9rem}footer a{color:#aab4c8}
footer h3{color:#fff;font-size:1rem;margin-bottom:10px}
.fg{display:grid;gap:20px;grid-template-columns:1fr 1fr}.fa{grid-column:1/-1}
.fi{display:flex;gap:8px;margin-bottom:10px}.fi .i{width:16px;height:16px;margin-top:3px;color:#ff9a7a}
.fl li{margin-bottom:8px}.fl li:before{content:"\203A";margin-right:6px;color:#667085}.fl span{color:#7b879c}
.fb{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:16px;padding-bottom:20px;margin-top:18px;border-top:1px solid #ffffff1c;font-size:.84rem}
.mx{color:#ff6b6c}.so{display:flex;gap:14px}.so a{color:#fff}
.cta{position:fixed;bottom:0;left:0;right:0;display:flex;background:#fff;border-top:1px solid var(--l);z-index:30;padding-bottom:env(safe-area-inset-bottom)}
.cta a{flex:1;display:flex;justify-content:center;align-items:center;gap:6px;padding:13px 0;font-weight:700;font-size:.9rem;color:var(--n)}.cta .q{background:var(--g);color:#fff}

@media(min-width:520px){
.sc>*{flex-basis:44%}.sc2{grid-auto-columns:30%}.inc{grid-template-columns:1fr 1fr}.cy li{flex-basis:22%}.hero h1{font-size:1.9rem}
}
@media(min-width:720px){
.sc{display:grid;grid-template-columns:repeat(var(--c,3),1fr);overflow:visible;margin:0;padding:0}.sc>*{flex:none}.cd .sc{margin:0}
.sc2{grid-auto-flow:row;grid-template-rows:none;grid-auto-columns:auto;grid-template-columns:repeat(3,1fr)}
.st{--c:4}.wy,.rv{--c:3}.pg{--c:4}.cy{--c:4}.cy li{flex:none}
.ar{display:flex;flex-wrap:wrap;margin:0;padding:0;overflow:visible}
.fg{grid-template-columns:1.5fr 1fr 1fr 1.2fr 1fr}.fa{grid-column:auto}
.fqg{grid-template-columns:1fr 400px;align-items:center;gap:32px}
}
@media(min-width:960px){
body{padding:0}.cta{display:none}
.hw{height:64px;gap:14px}.logo img{height:36px}
.hd .hq{display:inline-flex;padding:8px 18px;font-size:.88rem}
.hc{width:auto;height:auto;padding:8px 16px;border-radius:24px;background:var(--n)}.hc b{display:inline}
.w{padding:0 24px}
.hero{padding:44px 0 64px}.hero h1{font-size:2.5rem}.lead{font-size:1.08rem}
.hb .btn{flex:0 0 auto;padding:11px 20px}.hb .btn:first-child{flex-basis:auto}.hv{width:300px;height:300px;right:24px;top:50%;bottom:auto;margin-top:-150px;opacity:.28}
.tr{margin-top:-32px}.tr li{padding:18px;font-size:.84rem}.tr b{font-size:1.5rem}
.sec{padding:38px 0}.sh{margin-bottom:20px}.sh h2{font-size:1.6rem}
.sc2{grid-template-columns:repeat(4,1fr);gap:14px}.sc{gap:14px}
.tc{padding:16px;transition:.15s}.tc:hover{transform:translateY(-3px);box-shadow:0 8px 20px #f23a3b24;border-color:var(--p)}
.lay{grid-template-columns:minmax(0,1fr) 350px;gap:22px;align-items:start}
.side{position:sticky;top:84px}
.cd{padding:22px}.inc{grid-template-columns:1fr 1fr}
.fq{padding:44px 0}.fq h2{font-size:1.9rem}
}
@media(min-width:1180px){.sc2{grid-template-columns:repeat(5,1fr)}.lay .sc2{grid-template-columns:repeat(4,1fr)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tc{transition:none}}