/* mobile.css v1.2 : Zoe's Plumbing & Heating burger menu and phone sizing for every page, loaded after the page styles */
@media (max-width:760px){
.bento .b-areas .num{font-size:1.55rem;line-height:1.05}
.b-areas{padding:1.5rem 1.4rem}
.b-areas .sub{font-size:.92rem}
.b-areas ul{grid-template-columns:auto auto;justify-content:space-between;gap:.45rem .5rem;font-size:clamp(.8rem,3.6vw,.9rem)}
.b-areas li{white-space:nowrap;gap:.4rem}
.xbody b{font-size:7.9cqi}
.bento .u-rv b{font-size:11cqi}
.revs .u-rv b{font-size:7.4cqi}
.u-rv .qm{font-size:6.5rem;top:-.2rem;right:.7rem}
body .ft-brand img.ft-pipes{display:none}
}
@media (max-width:359px){.b-areas ul{grid-template-columns:1fr}}
.burger{display:none;position:relative;flex:none;width:46px;height:46px;padding:0;border:0;border-radius:9px;background:var(--char);cursor:pointer}
.burger i{position:absolute;left:12px;right:12px;height:2px;background:var(--off);transition:top .25s,transform .25s,opacity .2s}
.burger i:nth-child(1){top:15px}.burger i:nth-child(2){top:22px}.burger i:nth-child(3){top:29px}
.burger[aria-expanded="true"] i:nth-child(1){top:22px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){top:22px;transform:rotate(-45deg)}
.mnav{position:fixed;left:0;right:0;bottom:0;z-index:39;display:flex;flex-direction:column;overflow:auto;padding:.8rem 20px calc(1.4rem + env(safe-area-inset-bottom,0px));background:var(--char);color:var(--off);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .22s,transform .22s,visibility .22s}
.mnav.open{opacity:1;visibility:visible;transform:none}
.mnav .ml{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;border-bottom:1px solid rgba(250,248,245,.14);font:800 2.3rem/1 "Big Shoulders Display",system-ui,sans-serif;letter-spacing:.01em;text-transform:uppercase;text-decoration:none;color:var(--off)}
.mnav .ml[aria-current]{color:#E8474F}
.mnav .ml svg{width:22px;height:22px;fill:none;stroke:#E8474F;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mnav .mfoot{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:auto;padding-top:1.6rem}
.mnav .mfoot a{display:flex;align-items:center;justify-content:center;padding:.95rem .6rem;border-radius:9px;font-weight:700;font-size:1rem;text-decoration:none;color:#fff;background:var(--brand-red,var(--red))}
.mnav .mfoot a.lt{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(250,248,245,.5);color:var(--off)}
html.mopen{overflow:hidden}
@media (max-width:1180px){.burger{display:block}.nav{gap:.7rem}}
@media (min-width:1181px){.mnav{display:none}}
@media (max-width:860px){.hero .ph-col img.wm{width:62px;inset:auto auto .7rem .8rem;opacity:.8}}
@media (max-width:760px){body .eyebrow{gap:0;font-size:min(.66rem,2.75vw);letter-spacing:.14em;white-space:nowrap}body .eyebrow::before{display:none}}
@media (max-width:760px){.trust-l{flex-wrap:nowrap;white-space:nowrap;justify-content:center;gap:.6rem;font-size:4.6vw}.trust-l b{padding-left:.6rem}}
@media (max-width:760px){.bento .b-urgent{padding:1.7rem 1.4rem}.b-urgent h2{font-size:8.2vw;line-height:1.05;text-wrap:balance}.b-urgent p{font-size:1rem}}
@media (max-width:760px){.b-hours .hstat{font-size:5.4vw}}
@media (max-width:760px){
.band h2:not(.b-urgent h2){font-size:7.2vw;line-height:1.08}
.help h2{margin-top:.7rem}
.help .wrap>p,.help p,.meet p,.meet p.big,.book .lede,.bk-hours,.band .lede{font-size:1rem;line-height:1.5}
.help h3,.qf h3{font-size:7.2vw;line-height:1.08}
.bento .wrap{padding-block:2rem 1.2rem}
.help .wrap{padding-block:1.2rem 2.4rem}
.book .wrap{padding-top:1.8rem}
.foot .ft-bar{justify-content:flex-start;text-align:left}
.book .wrap>*{min-width:0}
.qf{padding-inline:1.2rem}
.qf h3{font-size:6.5vw}
.revs .wrap{padding-bottom:2rem}
}
@media (max-width:760px){body .meet p.big,body .meet p.small{font-size:1rem;line-height:1.5;color:var(--ink)}}
@media (max-width:760px){.tick.logos div{animation-duration:25s}}
@media (max-width:760px){section.sec>.wrap{padding-block:2rem}}
@media (max-width:760px){
body .intro h1{font-size:8.6vw;line-height:1;letter-spacing:-.02em;margin-top:.8rem}
body .intro p{font-size:1rem;line-height:1.5}
.split .il .in{padding:1.8rem 0 1.6rem}
.stats{flex-wrap:nowrap;justify-content:space-between;gap:.8rem;margin-top:1.2rem;padding-top:1rem}
.stats b{font-size:1.7rem}
.stats span{font-size:.6rem;letter-spacing:.1em;white-space:nowrap}
.head .nav .btn{padding:.8rem 1rem;font-size:.95rem;line-height:1;white-space:nowrap;flex:none}
.head .wrap{gap:.8rem}
.head .logo img{height:64px}
.head.scrolled .logo img{height:56px}
body .cards .card h2{font-size:5.2vw;line-height:1.1}
.card .meta{flex-direction:column;align-items:flex-start;gap:.15rem}
.stats div{align-items:center;text-align:center}
.filters .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
.filters .tabs::-webkit-scrollbar{display:none}
.filters .tabs>*{flex:none}
.filters .count{display:none}
}
@media (max-width:760px){
.list .wrap{padding-bottom:1.6rem}
.cta .wrap{flex-direction:column;justify-content:center;align-items:center;text-align:center}
}
@media (max-width:760px){
.intro .wrap{padding-block:1.8rem 1.6rem}
.svs .wrap{padding-block:2rem}
.svs h3{font-size:5.5vw;line-height:1.1}
.svs p,.cta p{font-size:1rem;line-height:1.5}
.cta .wrap{padding-block:2rem}
}
@media (max-width:760px){
.jump .wrap{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:.5rem}
.jump .wrap::-webkit-scrollbar{display:none}
.jump a{flex:none;padding:.35rem .8rem .35rem .4rem}
.jump img{height:32px;width:auto}
}
body footer.foot a[href*="a91design"]{color:#E8474F}
@media (max-width:760px){
body .foot .ft{grid-template-columns:1fr 1fr;gap:1.6rem 1rem;padding-block:2rem 1.2rem}
.foot .ft-brand{grid-column:1/-1}
.foot .ft-brand img{height:64px}
.foot .ft-brand p{margin-top:.6rem}
.foot .ft-areas{grid-column:1/-1;order:3}
.foot .ft-col h4{margin-bottom:.5rem}
.foot .ft-col li{margin-bottom:.1rem}
.foot .ft-bar{gap:.3rem 1rem;padding-block:.9rem .7rem;font-size:.8rem}
.foot .ft-legal,.foot .wrap.ft-legal{font-size:.76rem;padding-bottom:1rem}
}
/* footer.php needs the text after the company name wrapped in <span class="ft-xtra"> on all three footers */
@media (max-width:760px){.ft-xtra{display:none}}
@media (max-width:760px){.cta .wrap>*{width:100%}.cta .btns,.cta .row,.cta .wrap>div{display:flex;flex-wrap:wrap;justify-content:center}}
@media (max-width:760px){
.formsec .wrap{padding-block:2rem}
.formsec p{font-size:1rem;line-height:1.5}
legend{font-size:5.5vw;line-height:1.1}
.aside h3,.aside .box h3{font-size:5.5vw}
}
.ipic figcaption{display:none}
@media (max-width:760px){
#jf .row2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
#jf .row2>*{min-width:0}
#jf input:not([type=radio]):not([type=checkbox]),#jf select{padding-block:.6rem;min-height:44px}
#jf .f{margin-top:.6rem}
.send .btns{gap:.5rem}
.send small{font-size:.8rem;line-height:1.4}
}
@media (max-width:760px){
main>.wrap{padding-block:1.8rem 2rem}
main>.wrap h1{font-size:8.6vw;line-height:1}
body main>.wrap.wrap h2{font-size:5.5vw;line-height:1.15}
main>.wrap p,main>.wrap li{font-size:1rem;line-height:1.5}
}
@media (max-width:1180px){.nav a:not(.btn):not(.ph){display:none}}
@media (max-width:760px){body main>.wrap p.sum{font-size:1.1rem;line-height:1.45}}
@media (max-width:860px){.hero .ph-col{margin:14px 16px 0;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.1)}}
@media (max-width:760px){.meet .wrap>*{min-width:0}}
@media (max-width:640px){.meet ul.does{grid-template-columns:minmax(0,1fr)}.meet ul.does li{white-space:normal;min-width:0}}