/* ===== r22 (Nov 8 2026, Louis 7:37 PM voice note + 7:39 PM "look how clean it looks here on the mobile version"):
   the bottom of every page on tablet/desktop (768px and up) gets the same clean, centered, stacked look as on phones.
   - Bottom CTA: centered headline + sub, one big Book Online button. While the CTA band is on screen the top-bar
     Book Online steps aside (home-r22.js), so two Book Online buttons are never on screen together.
   - "We're here to help": centered heading, 4 even centered cards, Hours (small table, like phones) and Address centered below.
   - Footer: centered logo + slogan, Privacy Policy · SMS Terms, copyright. No "Licensed · Insured", no "Log in" (Log in stays in the top bar).
   Phones (767px and below) are untouched: every rule here sits inside min-width:768px. */
@media (min-width:768px){
  /* --- bottom CTA --- */
  .cta{padding:64px 0}
  .cta-in{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:26px}
  .cta h2{font-size:44px;line-height:1.05}
  .cta p{font-size:18px;margin-top:10px}
  .cta .btn-book.btn-lg{font-size:20px;padding:19px 46px;border-radius:12px;gap:12px;min-width:280px;box-shadow:0 12px 26px -10px rgba(224,38,43,.55)}
  .cta .btn-book.btn-lg svg{width:22px;height:22px}
  .js.cta-in-view .hdr-book{opacity:0;visibility:hidden;transform:translateY(-4px)}

  /* --- We're here to help --- */
  #contact .sec-hd{text-align:center;margin-left:auto;margin-right:auto}
  #contact .sec-hd h2::after{content:'';display:block;width:48px;height:3px;border-radius:3px;background:var(--steel);margin:14px auto 0;opacity:.8}
  #contact .ct-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;max-width:1040px;margin:0 auto}
  #contact .ct{flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:14px;padding:28px 16px 24px}
  #contact .ct-ic{width:56px;height:56px}
  #contact .ct-ic svg{width:24px;height:24px}
  #contact .ct-tx{align-items:center;gap:4px}
  #contact .ct-t{font-size:21px}
  #contact .ct-d{font-size:15px}
  #contact .ct-info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;max-width:760px;margin:40px auto 0;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:15px}
  #contact .ct-info>span{flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:10px;padding:0 28px}
  #contact .ct-info>span+span{border-left:1px solid var(--line)}
  #contact .ct-info>span>svg{width:22px;height:22px;color:var(--steel)}
  #contact .ct-info b{display:block;margin:0 0 8px;color:var(--gray);font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;line-height:1.2}
  #contact .hr-w{display:flex;flex-direction:column;align-items:center;width:100%;max-width:260px}
  #contact .hr-1{display:none}
  #contact .hr-t{display:flex;flex-direction:column;width:100%}
  #contact .hr-t>span{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:6px 0;border-bottom:1px solid #E6EBF2}
  #contact .hr-t>span:last-child{border-bottom:0}
  #contact .hr-t>span>span:first-child{color:var(--gray);text-align:left}
  #contact .hr-t>span>span:last-child{color:var(--ink);font-weight:600;text-align:right;white-space:nowrap}
  #contact .ct-info>span:last-child>span{display:flex;flex-direction:column;align-items:center;color:var(--ink);line-height:1.5}

  /* --- footer --- */
  .ftr-in{flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:center;text-align:center;gap:10px;padding-top:36px;padding-bottom:28px}
  .ftr-brand{flex-direction:column;align-items:center;justify-content:center;gap:12px;width:auto;text-align:center}
  .ftr-logo{padding:6px 10px;border-radius:8px}
  .ftr-logo img{height:32px}
  .ftr-tag{font-size:15px;max-width:none;line-height:1.4}
  .ftr-legal{order:2;font-size:14px;margin-top:8px}
  .ftr-legal a:hover{color:#fff}
  .ftr-copy{order:3;font-size:13px;opacity:.75}
  .ftr-copy::after{content:none}
  .ftr-login,.ftr-lic{display:none}
}
/* tablets: the 4 help cards stay in one row, a little tighter */
@media (min-width:768px) and (max-width:1023px){
  .cta h2{font-size:38px}
  #contact .ct-grid{gap:12px}
  #contact .ct{padding:22px 10px 20px;gap:12px}
  #contact .ct-ic{width:50px;height:50px}
  #contact .ct-t{font-size:19px}
  #contact .ct-d{font-size:13px}
  #contact .ct-info>span{padding:0 20px}
}

/* r22 addendum (Louis 7:46 PM "What customers say also in the middle"): reviews heading, rating and the Google link centered on tablet/desktop
   like the other sections; review cards, clamp and Read more (r21) unchanged. */
@media (min-width:768px){
  #reviews .sec-hd{display:flex;justify-content:center;text-align:center}
  #reviews .sec-hd h2::after{content:'';display:block;width:48px;height:3px;border-radius:3px;background:var(--steel);margin:14px auto 0;opacity:.8}
  #reviews .rating{justify-content:center;margin-top:14px}
  #reviews .rev-more{text-align:center}
}

/* r22: the top bar is solid white on tablet/desktop. It was 96% see-through with a blur, so page content scrolling under it
   (e.g. the reviews dots) showed through as a small gray dash left of "Services" (Louis's laptop photo, Nov 8 7:36 PM). */
@media (min-width:768px){
  .hdr{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* r22b (Louis WhatsApp Nov 8 7:58 PM "the email is going on 2 lines... take away the text under it, just leave Call, Text, WhatsApp, Email"):
   on tablet/desktop the 4 help cards show only the icon (a little bigger) and the label; links unchanged. Phones untouched. */
@media (min-width:768px){
  #contact .ct-d{display:none}
  #contact .ct{gap:16px;padding:30px 16px 26px}
  #contact .ct-ic{width:68px;height:68px}
  #contact .ct-ic svg{width:30px;height:30px}
  #contact .ct-grid{max-width:960px}
}
@media (min-width:768px) and (max-width:1023px){
  #contact .ct{gap:14px;padding:26px 10px 22px}
  #contact .ct-ic{width:62px;height:62px}
  #contact .ct-ic svg{width:28px;height:28px}
}