/* Sticky call / WhatsApp / quote bar, phones only.
   Someone reading a service page on a phone should never have to scroll back up to contact us. */
.kc-bar{display:none}

@media (max-width:760px){
  .kc-bar{
    display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:#d9dde2;
    padding-bottom:env(safe-area-inset-bottom,0);
    box-shadow:0 -2px 14px rgba(0,0,0,.13);
    transform:translateY(110%);transition:transform .22s ease-out
  }
  .kc-bar.on{transform:none}
  .kc-bar a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:58px;background:#fff;text-decoration:none;color:#111;
    font:700 12px/1.1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.01em
  }
  .kc-bar a svg{width:20px;height:20px;display:block}
  .kc-bar .kc-bar-quote{background:#c4161c;color:#fff}
  .kc-bar .kc-bar-wa{color:#128c7e}
  .kc-bar a:active{filter:brightness(.94)}

  /* Keep the bar off the last of the page and off the WhatsApp bubble. */
  body{padding-bottom:62px}
  .wa-float,.whatsapp-float,[class*="whatsapp"]{bottom:76px!important}
}
@media (prefers-reduced-motion:reduce){
  .kc-bar{transition:none}
}

/* Mobile safety net for inline two-column grids.

   A number of sections set grid-template-columns in a style attribute. An inline style outranks
   every stylesheet rule, including a media query, so those sections stayed two columns on a phone
   and the right-hand column was pushed off the screen -- where body{overflow-x:hidden} hid it
   rather than letting it scroll. On /about-us that silently removed the whole KITH Bodyworks
   block from a 360px screen. These rules are deliberately !important: nothing weaker can beat an
   inline style, and this file is loaded by every page on the site. */
@media (max-width:768px){
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:3fr 2fr"],
  [style*="grid-template-columns: 3fr 2fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"]{
    grid-template-columns:1fr !important;
    gap:2rem !important
  }
}

/* WhatsApp in the header, on every page. It goes in this file because every page loads it, and
   the header markup differs slightly between the homepage and the generated pages. Green, so it
   reads as WhatsApp at a glance rather than as another grey link. */
.header-wa{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:999px;
  background:#25D366;color:#073b22;font-weight:700;font-size:14px;
  text-decoration:none;white-space:nowrap;line-height:1;
  transition:background .15s,transform .15s
}
.header-wa:hover{background:#1fb855;color:#052b18}
.header-wa:active{transform:translateY(1px)}
.header-wa svg{flex:none}
.header-wa:focus-visible{outline:3px solid #0b7a46;outline-offset:2px}

/* Tight headers: keep the icon, drop the word before anything else has to give. */
@media (max-width:1100px){
  .header-wa span{display:none}
  .header-wa{padding:8px 10px}
}
/* On a phone the sticky bar at the bottom already carries WhatsApp, so the header one would be
   the third copy on one screen. */
@media (max-width:760px){
  .header-wa{display:none}
}

/* Same iOS default: the call bar's links must state their own colour, or iOS paints them
   in its own link blue. */
.kc-bar a { color: var(--ink, #15151a); }
.kc-bar .kc-bar-wa { color: #0b7a53; }
.kc-bar .kc-bar-quote { color: #fff; }
.header-wa, .header-wa:hover { color: #fff; }