/* ═══════════════════════════════════════════════════════════════════
   IT INSPECTORS — Chrome v6 (header · footer · preloader)
   Light, calm agency look: white / pale mint surfaces, deep green for
   actions, soft lime for highlights. Loaded after chrome.css and only
   overrides it, so the markup and site.js behaviour stay the same.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Header ── */
.hdr { --hdr-fg: var(--ink); --hdr-fg-soft: rgba(11,26,22,.5); --hdr-line: rgba(11,26,22,.08); --hdr-glass: rgba(255,255,255,.86); }
.hdr.is-scrolled .hdr-bar { box-shadow: 0 10px 30px rgba(11,26,22,.06); }
.hdr-in { gap: 2rem; }
.hdr-in > nav { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.hdr-in > nav .hdr-nav { margin: 0; }
.hdr-actions { gap: 1.4rem; }
.brand-mark { border-radius: 12px; background: var(--navy) !important; color: var(--lime) !important; }
.hdr.over-dark .brand-mark { background: var(--lime) !important; color: var(--navy) !important; }
.brand-text { font-family: var(--font-h); font-weight: 600; font-size: 1.14rem; letter-spacing: -.03em; }
.brand-text b { color: var(--acc); font-weight: 600; }
.hdr.over-dark .brand-text b { color: var(--lime); }
.brand-text small { font-family: var(--font-b); font-weight: 600; font-size: .56rem; letter-spacing: .18em; margin-top: .32rem; }

.hdr-nav { gap: .35rem; }
.hdr-link { font-family: var(--font-h); font-weight: 400; font-size: .93rem; color: var(--hdr-fg); opacity: .78; padding: .6rem .85rem; transition: opacity .2s; }
.hdr-link:hover, .hdr-link[aria-current="page"], .has-mega.is-open > .hdr-link { opacity: 1; }
.hdr-link[aria-current="page"] { font-weight: 500; }
.rt::after { color: var(--acc); }
.hdr.over-dark .rt::after { color: var(--lime); }
.hdr-ind { height: 3px; bottom: 2px; background: var(--lime); box-shadow: 0 0 0 1px rgba(14,59,50,.08); }
.hdr.over-dark .hdr-ind { background: var(--lime); }

.hdr-phone { font-family: var(--font-h); font-weight: 400; font-size: .88rem; opacity: .75; }
.hdr-phone i { color: var(--acc); }
.hdr-cta { border: 0; background: var(--navy); color: #fff; padding: .32rem .32rem .32rem 1.25rem; font-family: var(--font-h); font-weight: 500; font-size: .9rem; box-shadow: 0 10px 24px rgba(14,59,50,.18); }
.hdr-cta .ic { width: 36px; height: 36px; background: var(--lime); color: var(--navy) !important; }
.hdr-cta:hover { background: var(--ink); color: #fff !important; }
.hdr:not(.over-dark) .hdr-cta:hover { color: #fff; }
.hdr.over-dark .hdr-cta { background: var(--lime); color: var(--navy); }
.hdr.over-dark .hdr-cta .ic { background: var(--navy); color: var(--lime) !important; }
.hdr-burger { background: #fff; border-color: var(--line); color: var(--ink); }
.hdr.over-dark .hdr-burger { background: transparent; color: #fff; }

.mega { border-radius: 22px; border-color: var(--line); }
.mega-item:hover { background: var(--paper); }
.mega-item b, .ms-title, .ms-score .t b { font-family: var(--font-h); font-weight: 500; }
.ms-kicker { color: var(--lime); font-weight: 700; }
.ms-ring .val { stroke: var(--lime); }
.ms-score { background: var(--navy-2); }

.ovl-link { font-family: var(--font-h); font-weight: 500; }
.ovl-link:hover, .ovl-link[aria-current="page"] { color: var(--lime); }
.ovl-sub a i, .ovl-contact a i { color: var(--lime); }

/* ── Preloader ── */
.pre-word { font-family: var(--font-h); font-weight: 500; }
.pre-line i { background: var(--lime); }
.pre-num { font-family: var(--font-h); font-weight: 500; color: var(--lime); }

/* ── Footer: light with a deep-green base bar ── */
.ftr { background: #fff; color: var(--body); border-top: 1px solid var(--line); }
.ftr-call { padding: 96px 0 84px; border-bottom: 0; text-align: center; }
.ftr-kicker { color: var(--acc); font-weight: 700; justify-content: center; font-size: .72rem; }
.ftr-kicker::before { background: var(--lime); height: 3px; border-radius: 3px; }
.ftr-line { flex-direction: column; justify-content: center; gap: 1.8rem; }
.ftr-line h2 { font-family: var(--font-h); font-weight: 500; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.12; letter-spacing: -.035em; color: var(--ink); max-width: 18ch; margin: 0 auto; }
.ftr-line h2 em { font-style: normal; color: var(--ink); background: var(--lime); border-radius: 12px; padding: 0 .18em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ftr-go { background: var(--navy); color: #fff; border-radius: 999px; padding: .4rem 1.4rem .4rem .4rem; gap: .9rem; font-family: var(--font-h); font-weight: 500; font-size: 1rem; box-shadow: 0 14px 30px rgba(14,59,50,.2); transition: background .3s, transform .3s; }
.ftr-go:hover { background: var(--ink); color: #fff; }
.ftr-go .ring { width: 48px; height: 48px; border: 0; background: var(--lime); color: var(--navy); font-size: .9rem; }
.ftr-go:hover .ring { background: #fff; color: var(--navy); transform: none; }
.ftr-go small { color: rgba(255,255,255,.6); font-family: var(--font-b); letter-spacing: .04em; text-transform: none; font-size: .74rem; }
.ftr-go > span:last-child { text-align: left; }

.ftr-main { padding: 64px 0 48px; border-top: 1px solid var(--line); }
.ftr-brand, .ftr-brand:hover { color: var(--ink); }
.ftr-brand .brand-text { color: var(--ink); }
.ftr-brand .brand-text b { color: var(--acc); }
.ftr-brand .brand-text small { color: var(--muted); }
.ftr-blurb { color: var(--body); }
.ftr-status { background: var(--paper); color: var(--acc); font-family: var(--font-b); font-weight: 600; letter-spacing: 0; font-size: .76rem; border: 1px solid var(--line); }
.sig-dot { background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.ftr-social a { background: var(--paper); color: var(--acc); border: 1px solid var(--line); border-radius: 50%; }
.ftr-social a:hover { background: var(--navy); color: var(--lime); border-color: var(--navy); }
.ftr-title { font-family: var(--font-h); font-weight: 500; font-size: 1rem; letter-spacing: -.01em; text-transform: none; color: var(--ink); }
.ftr-links a { color: var(--body); font-size: .93rem; }
.ftr-links a { gap: 0; }
.ftr-links a::before { display: none; }
.ftr-links a:hover { color: var(--acc); }
.ftr-contact i { color: var(--acc); }
.ftr-contact a { color: var(--body); }
.ftr-contact a:hover { color: var(--acc); }
.ftr-contact span { color: var(--body); }

.ftr-health { border-color: var(--line); background: var(--paper); }
.fh + .fh { border-left-color: var(--line); }
.fh .ic { background: #fff; color: var(--acc); }
.fh b { color: var(--ink); font-family: var(--font-h); font-weight: 500; }
.fh small { color: var(--muted); }
.fh-cur { display: none; }

.ftr > .container:last-child { max-width: none; background: var(--navy); padding: 0; }
.ftr-bottom { max-width: 1320px; margin: 0 auto; padding: 20px 12px; border-top: 0; color: rgba(255,255,255,.66); }
.ftr-bottom a { color: rgba(255,255,255,.72); }
.ftr-bottom a:hover { color: var(--lime); }

.totop { background: var(--navy); }
.totop:hover { background: var(--ink); }
.totop svg circle { stroke: var(--lime); }

@media (max-width: 575.98px) {
  .ftr-call { padding: 70px 0 60px; }
  .ftr-bottom { padding: 18px 16px; }
}

/* Floating WhatsApp button — the business takes enquiries on WhatsApp, so it
   sits permanently in reach, stacked above the back-to-top control (which is
   at right 18px / bottom 20px, 54px square). */
.wa-float {
  position: fixed;
  right: 18px;
  bottom: 86px;
  z-index: 1050;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25D366;
  color: #fff;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .38);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s;
}
.wa-float:hover { color: #fff; transform: translateY(-2px) scale(1.05); box-shadow: 0 14px 32px rgba(37, 211, 102, .5); }
.wa-float:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.wa-float svg { width: 28px; height: 28px; fill: currentColor; }

/* Clear of the consent bar while it is showing. */
.cc.is-in ~ .wa-float,
body:has(.cc.is-in) .wa-float { bottom: 150px; }

@media (max-width: 600px) { .wa-float { right: 14px; bottom: 80px; width: 50px; height: 50px; } .wa-float svg { width: 25px; height: 25px; } }
@media print { .wa-float { display: none; } }