/* ──────────────────────────────────────────────────────────────────────────
   Zengo Mobility — "stairlift repairs north london".
   Colours and navigation follow zengomobilitystairlifts.com.

   Varela Round ships in a single weight (400). Rather than let the browser
   fake a bold — which looks poor on a rounded face — hierarchy here comes
   from size and colour. Nothing is set above 400.
   ────────────────────────────────────────────────────────────────────────── */
:root{
  --indigo:#332877;
  --indigo-deep:#241B59;
  --indigo-soft:#F1EFFA;
  --crimson:#CC1611;
  --crimson-deep:#A81009;
  --ink:#1C1A2E;
  --body:#53506B;
  --muted:#7E7B95;
  --line:#E6E4F0;
  --grey:#F7F6FB;
  --font:'Varela Round',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --max:1350px;
  --gut:clamp(18px,4vw,46px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--body);font-family:var(--font);font-weight:400;
     font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--crimson)}
:focus-visible{outline:3px solid var(--crimson);outline-offset:3px;border-radius:5px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

h1,h2,h3,h4{font-family:var(--font);font-weight:400;color:var(--ink);margin:0;
            line-height:1.15;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(34px,4.7vw,58px);color:#fff;line-height:1.08}
h2{font-size:clamp(28px,3.4vw,44px)}
h3{font-size:clamp(20px,1.8vw,26px)}
h4{font-size:19px}
p{margin:0}
.hl{color:var(--crimson)}
.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}
.on-dark .hl{color:#FF8D82}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.band{padding-block:clamp(62px,7.5vw,106px)}
.grey{background:var(--grey)}
.indigo{background:var(--indigo);color:rgba(255,255,255,.85)}

.kicker{font-size:14.5px;color:var(--crimson);letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.on-dark .kicker{color:#FF9A90}
.opener{text-align:center;max-width:760px;margin-inline:auto;margin-bottom:clamp(40px,5vw,60px)}
.opener p{margin-top:14px;font-size:17px;color:var(--body)}
.on-dark .opener p{color:rgba(255,255,255,.78)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--crimson);
     color:#fff;border:2px solid var(--crimson);border-radius:999px;padding:15px 30px;font-size:16px;
     text-decoration:none;cursor:pointer;transition:background .18s,border-color .18s,transform .18s}
.btn:hover{background:var(--crimson-deep);border-color:var(--crimson-deep);transform:translateY(-1px)}
.btn.line{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn.line:hover{background:#fff;color:var(--indigo);border-color:#fff}
.btn.ind{background:var(--indigo);border-color:var(--indigo);color:#fff}
.btn.ind:hover{background:var(--indigo-deep);border-color:var(--indigo-deep)}
.btn.block{width:100%}

/* ── Utility bar ───────────────────────────────────────────────────────── */
.util{background:var(--indigo-deep);color:rgba(255,255,255,.85);font-size:14px}
.util .wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding-block:9px}
.util a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util a:hover{color:#FFB3AC}
.util .right{margin-left:auto;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
@media (max-width:820px){.util .hide-sm{display:none}}

/* ── Header — menu mirrors zengomobilitystairlifts.com ─────────────────── */
header.site{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:70;
            box-shadow:0 1px 16px rgba(28,26,46,.06)}
header.site > .wrap{display:flex;align-items:center;gap:16px;min-height:96px}
.brand{flex:0 0 auto}
.brand img{height:76px;width:auto}
nav.main{display:flex;gap:2px;margin-left:auto}
nav.main > div{position:relative}
nav.main a.top{display:inline-flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none;
               font-size:16px;padding:12px 14px;border-radius:9px;white-space:nowrap}
nav.main a.top:hover,nav.main > div:hover > a.top{color:var(--crimson);background:var(--indigo-soft)}
/* Sized on the class itself, not just inside the nav. An SVG with a
   viewBox and no width or height falls back to the browser default — a
   stray caret rendered at 349px square and covered a card heading. */
svg.caret{width:9px;height:9px;flex:0 0 auto}
nav.main .caret{width:9px;height:9px;flex:0 0 auto;opacity:.6}
.sub{position:absolute;top:100%;left:0;min-width:262px;background:#fff;border:1px solid var(--line);
     border-radius:12px;box-shadow:0 18px 44px rgba(28,26,46,.16);padding:8px;
     opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s,transform .16s,visibility .16s}
nav.main > div:hover .sub,nav.main > div:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0)}
.sub a{display:block;padding:11px 14px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:15.5px}
.sub a:hover{background:var(--indigo-soft);color:var(--crimson)}
header.site .btn{flex:0 0 auto;padding:13px 24px;font-size:15.5px;white-space:nowrap}
@media (max-width:1400px){nav.main a.top{font-size:15px;padding:12px 10px}header.site > .wrap{gap:10px}}

.burger{display:none;margin-left:auto;background:var(--indigo-soft);border:1px solid var(--line);
        border-radius:11px;width:50px;height:46px;align-items:center;justify-content:center;
        cursor:pointer;color:var(--indigo);flex:0 0 auto}
.burger svg{width:24px;height:24px}
.burger[aria-expanded="true"]{background:var(--indigo);border-color:var(--indigo);color:#fff}
.drawer{display:none;border-top:1px solid var(--line);background:#fff;max-height:74vh;overflow-y:auto}
.drawer[data-open="true"]{display:block}
.drawer > .wrap{display:block;padding-block:6px 20px}
.drawer a{display:block;padding:15px 0;color:var(--ink);text-decoration:none;font-size:17px;
          border-bottom:1px solid var(--line)}
.drawer a:hover{color:var(--crimson)}
.drawer a.ind{padding-left:20px;font-size:15.5px;color:var(--body)}
.drawer a.btn{margin-top:18px;border-bottom:0;color:#fff}
@media (max-width:1180px){nav.main{display:none}.burger{display:flex;order:3}header.site .btn{order:2;margin-left:0}
  header.site > .wrap{min-height:88px}}
@media (max-width:620px){header.site > .wrap > .btn{display:none}.brand img{height:62px}.burger{margin-left:auto}
  header.site > .wrap{min-height:78px}}

/* ── Hero — image led, one line of copy, two buttons ───────────────────── */
.hero{position:relative;background:var(--indigo-deep);overflow:hidden}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38}
.hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(36,27,89,.94) 0%,rgba(51,40,119,.84) 52%,rgba(51,40,119,.5) 100%)}
.hero .wrap{position:relative;z-index:2;padding-block:clamp(104px,12vw,182px)}
.hero p{color:rgba(255,255,255,.92);margin-top:22px;max-width:46ch;font-size:clamp(17px,1.4vw,21px)}
.hero .acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}

/* ── Brand strip ───────────────────────────────────────────────────────── */
.brands{border-bottom:1px solid var(--line);background:#fff}
.brands .wrap{padding-block:30px}
.brands p{text-align:center;color:var(--muted);font-size:15.5px;margin-bottom:22px}
.brand-row{display:flex;align-items:center;justify-content:center;gap:clamp(24px,5vw,62px);flex-wrap:wrap}
.brand-row img{height:clamp(28px,3vw,40px);width:auto;opacity:.75;filter:grayscale(1);transition:opacity .2s,filter .2s}
.brand-row img:hover{opacity:1;filter:grayscale(0)}

/* ── Fault cards ───────────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px)}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.cards{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 28px;
      transition:border-color .2s,box-shadow .2s,transform .2s}
.card:hover{border-color:var(--indigo);box-shadow:0 16px 40px rgba(51,40,119,.12);transform:translateY(-3px)}
.card .ic{width:62px;height:62px;border-radius:17px;background:var(--indigo-soft);
          display:grid;place-items:center;margin-bottom:20px}
.card .ic svg{width:30px;height:30px}
.card h3{font-size:20px;margin-bottom:9px}
.card p{font-size:15.5px;line-height:1.68}

/* ── Alternating image / text ──────────────────────────────────────────── */
.alt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(34px,5vw,80px);align-items:center}
@media (max-width:940px){.alt{grid-template-columns:1fr;gap:34px}.alt.flip > *:first-child{order:2}}
.shot{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 24px 58px rgba(28,26,46,.2)}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover}
.shot .tag{position:absolute;left:0;bottom:0;background:var(--crimson);color:#fff;font-size:14.5px;
           padding:12px 22px;border-top-right-radius:16px}
ul.ticks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
ul.ticks li{display:grid;grid-template-columns:26px 1fr;gap:13px;align-items:start;color:var(--ink);font-size:16.5px}
ul.ticks svg{width:23px;height:23px;margin-top:3px}

/* ── Process ───────────────────────────────────────────────────────────── */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,24px);margin-top:clamp(46px,5vw,66px)}
@media (max-width:980px){.flow{grid-template-columns:repeat(2,1fr);gap:34px 20px}}
@media (max-width:560px){.flow{grid-template-columns:1fr;gap:34px}}
.pane{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.17);border-radius:20px;
      padding:38px 26px 30px;position:relative;transition:background .2s,border-color .2s}
.pane:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34)}
.pane .num{position:absolute;top:-22px;left:26px;width:44px;height:44px;border-radius:50%;
           background:var(--crimson);color:#fff;display:grid;place-items:center;font-size:19px;
           box-shadow:0 8px 22px rgba(204,22,17,.45)}
.pane h4{color:#fff;margin-bottom:9px;font-size:19px}
.pane p{font-size:15.5px;color:rgba(255,255,255,.76);line-height:1.68}

/* ── Gallery ───────────────────────────────────────────────────────────── */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px)}
@media (max-width:860px){.gal{grid-template-columns:repeat(2,1fr)}}
.gal figure{margin:0;border-radius:16px;overflow:hidden;background:var(--grey)}
.gal img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .5s ease}
.gal figure:hover img{transform:scale(1.06)}

/* ── Makes ─────────────────────────────────────────────────────────────── */
.makes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
@media (max-width:980px){.makes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.makes{grid-template-columns:1fr}}
.make{border:1px solid var(--line);border-radius:18px;padding:28px 26px;background:#fff;
      transition:border-color .2s,box-shadow .2s}
.make:hover{border-color:var(--indigo);box-shadow:0 14px 34px rgba(51,40,119,.1)}
.make .mk{height:32px;margin-bottom:18px;display:flex;align-items:center}
.make .mk img{height:100%;width:auto;max-width:140px;object-fit:contain}
.make h4{margin-bottom:8px;font-size:18px}
.make p{font-size:15.5px;line-height:1.66}
.make .models{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}

/* ── Areas ─────────────────────────────────────────────────────────────── */
.boroughs{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:clamp(30px,3.5vw,42px)}
@media (max-width:900px){.boroughs{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.boroughs{grid-template-columns:repeat(2,1fr)}}
.boroughs span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:12px;
  padding:13px 16px;font-size:15.5px;color:#fff;display:flex;align-items:center;gap:10px}
.boroughs span::before{content:'';width:7px;height:7px;border-radius:50%;background:#FF8D82;flex:0 0 auto}

/* ── Reviews ───────────────────────────────────────────────────────────── */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px)}
@media (max-width:980px){.quotes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.quotes{grid-template-columns:1fr}}
.qt{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 28px}
.qt .stars{color:#F5A623;letter-spacing:3px;font-size:16px;margin-bottom:13px}
.qt p{font-size:16px;color:var(--ink);line-height:1.7}
.qt .by{margin-top:18px;padding-top:15px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.qt .by b{display:block;font-weight:400;font-size:16px;color:var(--ink)}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq{max-width:920px;margin-inline:auto}
.faq details{border:1px solid var(--line);border-radius:14px;margin-bottom:12px;background:#fff;overflow:hidden}
.faq details[open]{border-color:var(--indigo)}
.faq summary{list-style:none;cursor:pointer;padding:21px 26px;display:flex;gap:18px;align-items:center;
             font-size:17.5px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--crimson)}
.faq .sign{margin-left:auto;flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--indigo-soft);
           color:var(--indigo);display:grid;place-items:center;font-size:18px;line-height:1}
.faq details[open] .sign{background:var(--crimson);color:#fff}
.faq .sign::before{content:'+'}
.faq details[open] .sign::before{content:'\2013'}
.faq .ans{padding:0 26px 23px;font-size:16px;line-height:1.75;max-width:74ch}

/* ── Closing CTA ───────────────────────────────────────────────────────── */
.close-cta{background:var(--indigo)}
.close-cta .inner{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
                  gap:clamp(26px,4vw,56px);align-items:center}
@media (max-width:860px){.close-cta .inner{grid-template-columns:1fr;gap:26px}}
.close-cta h2{color:#fff}
.close-cta p{color:rgba(255,255,255,.85);margin-top:14px;font-size:17.5px}
.close-cta .nums{display:flex;gap:13px;flex-wrap:wrap}

/* ── Footer ────────────────────────────────────────────────────────────── */
footer.site{background:var(--indigo-deep);color:rgba(255,255,255,.72);padding-block:clamp(50px,6vw,74px) 26px;font-size:15.5px}
.fcols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(26px,3vw,46px)}
@media (max-width:900px){.fcols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fcols{grid-template-columns:1fr}}
footer.site img.flogo{height:76px;width:auto;margin-bottom:18px;border-radius:8px}
footer.site h4{color:#fff;font-size:17px;margin-bottom:15px}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
footer.site a{color:rgba(255,255,255,.75);text-decoration:none}
footer.site a:hover{color:#fff}
footer.site .ft-contact li{display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start}
footer.site .ft-contact svg{width:17px;height:17px;margin-top:5px;flex:0 0 auto}
.fbase{border-top:1px solid rgba(255,255,255,.14);margin-top:clamp(34px,4vw,48px);padding-top:22px;
       display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13.5px;color:rgba(255,255,255,.5)}

.callbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;background:var(--indigo-deep);
         border-top:3px solid var(--crimson)}
.callbar a{flex:1;padding:16px 6px;text-align:center;text-decoration:none;color:#fff;font-size:16px}
.callbar a+a{border-left:1px solid rgba(255,255,255,.18);color:#FFB3AC}
@media (max-width:760px){.callbar{display:flex}body{padding-bottom:60px}}

/* ── Inner-page hero — shorter than the home hero ──────────────────────── */
.phero{position:relative;background:var(--indigo-deep);overflow:hidden}
.phero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3}
.phero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(36,27,89,.95) 0%,rgba(51,40,119,.88) 60%,rgba(51,40,119,.62) 100%)}
.phero .wrap{position:relative;z-index:2;padding-block:clamp(62px,8vw,104px)}
.phero h1{font-size:clamp(32px,4.1vw,50px)}
.phero p{color:rgba(255,255,255,.9);margin-top:18px;max-width:62ch;font-size:clamp(16.5px,1.3vw,19.5px)}

/* ── Breadcrumbs ───────────────────────────────────────────────────────── */
.crumb{font-size:14px;color:rgba(255,255,255,.62);margin-bottom:16px}
.crumb a{color:rgba(255,255,255,.82);text-decoration:none}
.crumb a:hover{color:#fff}
.crumb span{margin-inline:8px;opacity:.5}

/* ── Current page in the navigation ────────────────────────────────────── */
nav.main a.top.on{color:var(--crimson);background:var(--indigo-soft)}
.drawer a.on{color:var(--crimson)}

/* ── Specification lists ───────────────────────────────────────────────── */
.spec{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:0;
      border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.spec li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:13px 20px;
         font-size:15.5px;border-bottom:1px solid var(--line);align-items:baseline}
.spec li:last-child{border-bottom:0}
.spec li b{font-weight:400;color:var(--ink);text-align:right}
.spec li:nth-child(odd){background:var(--grey)}

/* ── Highlighted aside ─────────────────────────────────────────────────── */
.note{background:var(--indigo-soft);border-left:4px solid var(--indigo);border-radius:0 14px 14px 0;
      padding:24px 28px;margin-top:28px}
.note h4{margin-bottom:8px;color:var(--indigo)}
.note p{font-size:16px;line-height:1.74}
.on-dark .note{background:rgba(255,255,255,.08);border-left-color:#FF8D82}
.on-dark .note p{color:rgba(255,255,255,.82)}

/* ── Light-background numbered steps ───────────────────────────────────── */
.steps{display:grid;gap:clamp(18px,2vw,26px);margin-top:clamp(38px,4.5vw,56px);
       grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:780px){.steps{grid-template-columns:1fr}}
.step{display:grid;grid-template-columns:58px minmax(0,1fr);gap:20px;align-items:start}
.step .n{width:58px;height:58px;border-radius:50%;background:var(--indigo);color:#fff;
         display:grid;place-items:center;font-size:21px;flex:0 0 auto}
.step h4{margin-bottom:7px;font-size:19px}
.step p{font-size:15.8px;line-height:1.7}

/* ── Two columns of prose ──────────────────────────────────────────────── */
.prose{max-width:76ch}
.prose p + p{margin-top:17px}
.prose h3{margin-top:34px;margin-bottom:11px}
.prose ul{margin:16px 0 0;padding-left:22px;display:grid;gap:10px}
.prose li{font-size:16.5px}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,4vw,58px)}
@media (max-width:860px){.duo{grid-template-columns:1fr;gap:30px}}

/* ── Contact detail panels ─────────────────────────────────────────────── */
.cinfo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,26px)}
@media (max-width:900px){.cinfo{grid-template-columns:1fr}}
.cbox{border:1px solid var(--line);border-radius:18px;padding:32px 28px;background:#fff;text-align:center}
.cbox .ic{width:62px;height:62px;border-radius:17px;background:var(--indigo-soft);
          display:grid;place-items:center;margin:0 auto 18px}
.cbox .ic svg{width:29px;height:29px;color:var(--indigo)}
.cbox h3{font-size:19px;margin-bottom:9px}
.cbox a.big{display:block;font-size:22px;color:var(--crimson);text-decoration:none;
            margin-bottom:6px;word-break:break-word}
.cbox a.big:hover{text-decoration:underline}
.cbox p{font-size:15.5px}

/* ── Hours ─────────────────────────────────────────────────────────────── */
.hours{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:0;max-width:430px}
.hours li{display:flex;justify-content:space-between;gap:18px;padding:12px 0;
          border-bottom:1px solid var(--line);font-size:16px}
.hours li:last-child{border-bottom:0}
.hours li b{font-weight:400;color:var(--ink)}


/* ── Ticked lists on a dark band ───────────────────────────────────────────
   ul.ticks sets colour:var(--ink), which is near-black. On the indigo band
   that measured 1.24:1 against the background — the text was effectively
   invisible. .on-dark only restyled headings, so the list was never covered. */
.on-dark ul.ticks li{color:rgba(255,255,255,.9)}

/* ── Product shots ─────────────────────────────────────────────────────────
   A cutout of a stairlift on a plain background is portrait and has no
   margin to lose. Cropping it to the 4:3 photo frame chopped the chair in
   half, so these are contained and centred on a tint instead. */
/* The panel takes the cutout's own ground colour, so the photo does not
   sit as a visible rectangle inside a differently-tinted frame. */
.shot.product{box-shadow:none;border:1px solid var(--line);background:#E7DDD1}
.shot.product img{object-fit:contain;padding:clamp(20px,3vw,38px);aspect-ratio:4/3}

/* ── Enquiry form ──────────────────────────────────────────────────────────
   Sits in the hero on the home page and in its own band on contact. Dark
   label text on a white card, so it reads the same in both places. */
.quote{background:#fff;border-radius:20px;padding:clamp(24px,2.6vw,34px);
       box-shadow:0 26px 64px rgba(20,14,54,.34)}
.quote h3{font-size:clamp(20px,1.7vw,24px);margin-bottom:5px}
/* .qsub, not .sub: .sub is the nav dropdown in this sheet — absolutely
   positioned and visibility:hidden — so the form subtitle vanished. */
.quote .qsub{font-size:14.5px;color:var(--muted);margin-bottom:20px}
.qgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.qgrid .wide{grid-column:1/-1}
@media (max-width:560px){.qgrid{grid-template-columns:minmax(0,1fr)}}
.fld{display:grid;gap:5px}
.fld label{font-size:13px;color:var(--ink)}
.fld input,.fld select,.fld textarea{
  font-family:var(--font);font-size:16px;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;width:100%;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  border-color:var(--indigo);outline:none;box-shadow:0 0 0 4px var(--indigo-soft)}
.fld textarea{resize:vertical;min-height:84px}
.quote .btn{width:100%;margin-top:4px}
.quote .small{font-size:12.5px;color:var(--muted);margin-top:13px;line-height:1.6}
/* Honeypot: a real person never sees it, a bot fills it in. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.formnote{border-radius:14px;padding:16px 20px;margin-bottom:22px;font-size:15.5px}
.formnote.good{background:#E9F7EE;border:1px solid #BFE3CC;color:#176A33}
.formnote.bad{background:#FBEBEA;border:1px solid #F0C9C6;color:var(--crimson-deep)}

/* ── Hero with a form beside it ────────────────────────────────────────── */
.hero.withform .wrap{padding-block:clamp(56px,6.5vw,92px)}
.herogrid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
          gap:clamp(34px,4.5vw,70px);align-items:center}
@media (max-width:1000px){.herogrid{grid-template-columns:minmax(0,1fr);gap:34px}}

/* ── Mobile: centre everything ────────────────────────────────────────────
   Last in the sheet on purpose — these override the layout rules above, and
   equal-specificity rules are settled by source order. Tick lists keep their
   rows left-aligned but centre as a block, which stays readable where fully
   centred list text would not. */
@media (max-width:860px){
  .hero,.hero .wrap,.alt > div,.card,.make,.qt,.close-cta .inner,
  footer.site,footer.site .fcols > div{text-align:center}

  .hero p,.alt > div > p{margin-inline:auto}
  .hero .acts,.close-cta .nums{justify-content:center}
  .alt > div > div[style*="display:flex"]{justify-content:center}
  .alt > div > div:last-child{display:flex;justify-content:center;flex-wrap:wrap}

  .card .ic{margin-inline:auto}
  .make .mk{justify-content:center}
  .make .mk img{margin-inline:auto}

  ul.ticks{width:fit-content;max-width:100%;margin-inline:auto;text-align:left}

  .boroughs span{justify-content:center}

  footer.site ul{justify-items:center}
  footer.site .ft-contact li{grid-template-columns:auto auto;justify-content:center;text-align:left}
  footer.site img.flogo{margin-inline:auto}
  .fbase{justify-content:center;text-align:center}
  .util .wrap{justify-content:center}
  .util .right{margin-left:0}

  .faq .ans{text-align:center;margin-inline:auto}
  .shot .tag{left:50%;transform:translateX(-50%);border-radius:14px 14px 0 0}
}

/* A taller hero on phones, where it is the whole first screen. The h1 is
   sized off the viewport here rather than the shared clamp, which bottomed
   out at its 34px minimum on a 390px screen. */
@media (max-width:620px){
  .hero .wrap{padding-block:clamp(118px,26vw,156px)}
  h1{font-size:clamp(42px,12vw,56px);line-height:1.1}
  .hero p{font-size:18px;margin-top:20px}
}

/* ── Mobile: the four-page additions ───────────────────────────────────── */
@media (max-width:860px){
  .phero,.phero .wrap,.prose,.step,.cbox,.note{text-align:center}
  .phero p,.prose{margin-inline:auto}
  .crumb{text-align:center}
  .prose ul{text-align:left;width:fit-content;max-width:100%;margin-inline:auto}
  .step{grid-template-columns:1fr;justify-items:center;gap:14px}
  .step .n{margin-inline:auto}
  .note{border-left:0;border-top:4px solid var(--indigo);border-radius:0 0 14px 14px}
  .hours{margin-inline:auto}
  .spec li{grid-template-columns:1fr;gap:3px;text-align:center}
  .spec li b{text-align:center}
}
@media (max-width:620px){
  .phero h1{font-size:clamp(30px,8.4vw,42px)}
  .phero .wrap{padding-block:clamp(54px,14vw,86px)}
}

/* ── Mobile: form and hero-with-form ───────────────────────────────────── */
@media (max-width:1000px){
  /* The form goes under the copy on a narrow screen, and the copy centres
     with everything else. */
  .hero.withform .herogrid > div:first-child{text-align:center}
  .hero.withform .herogrid > div:first-child p{margin-inline:auto}
}
@media (max-width:860px){
  /* Labels and inputs stay left-aligned inside the card even where the rest
     of the page centres — a centred form field is hard to scan. */
  .quote,.quote .fld,.quote .fld label{text-align:left}
  .quote h3,.quote .qsub,.quote .small{text-align:center}
}