/* Top Tier header and footer. Ported from Ready Energy's nav.css (readyenergy-child).
   Colours are Astra globals with Top Tier hex fallbacks, so the customizer palette stays the
   single source of truth. Class prefix tth- because the sandbox chrome file already owns ttc-.
   Link rules start with `body .tth-hdr` / `body .tth-ftr`: Elementor's kit emits `a` colours at
   (0,1,1) after this file loads, and a single class loses to it. */
:root{
  --tth-teal:var(--ast-global-color-0,#0C6E8B);
  --tth-blue:var(--ast-global-color-1,#0F69DD);
  --tth-ink:var(--ast-global-color-2,#0B0C20);
  --tth-paper:var(--ast-global-color-6,#F9F9FF);
  --tth-mint:var(--ast-global-color-7,#ECF8F9);
  --tth-line:#E3E8EF;
  --tth-muted:#5A6577;
  --tth-sky:#6CB6F5;   /* footer headings, as the Astra footer had them */
  --tth-hover:#4CCEFC; /* footer link hover, as the Astra footer had it */
  --tth-gold:#FFC845;  /* rating stars */
}
.tth-wrap{max-width:1240px;margin:0 auto;padding:0 20px;box-sizing:border-box}
body .tth-hdr a,body .tth-ftr a{text-decoration:none}

/* ---- tier 1: utility bar ---- */
.tth-util{background:var(--tth-teal);color:#fff;font-size:14px;line-height:1.4}
.tth-util .tth-wrap{display:flex;align-items:center;justify-content:space-between;min-height:40px;gap:24px}
.tth-util-l,.tth-util-r{display:flex;align-items:center;gap:16px;white-space:nowrap}
.tth-sep{opacity:.45}
.tth-stars{color:var(--tth-gold);letter-spacing:1px}
/* On the teal bar the footer gold measures 3.76:1; this paler gold clears 4.5:1. */
.tth-util .tth-stars{color:#FFE39A}
body .tth-hdr .tth-util a{color:#fff}
body .tth-hdr .tth-util a:hover{text-decoration:underline}
body .tth-hdr .tth-util .tth-tel{font-weight:700;font-size:16px;white-space:nowrap}
.tth-soc{display:inline-flex;align-items:center;gap:12px}
body .tth-hdr .tth-soc a{display:inline-flex;align-items:center;justify-content:center;opacity:.85}
body .tth-hdr .tth-soc a:hover{opacity:1;color:var(--tth-hover);text-decoration:none}
.tth-soc svg{width:16px;height:16px;display:block;fill:currentColor}

/* ---- tier 2: logo, nav, button ---- */
.tth-bar{background:#fff;border-bottom:1px solid var(--tth-line)}
.tth-bar .tth-wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:128px;position:relative}
.tth-logo{flex:none;display:block;line-height:0}
/* Same widths the Astra builder had: 112 desktop, 92 tablet, 78 phone. */
.tth-logo img{width:112px;height:auto;display:block}
.tth-logo.tth-text{font-weight:700;font-size:20px;line-height:1.1;color:var(--tth-ink);max-width:180px}

.tth-nav{display:flex;align-items:center;gap:30px;flex:1;justify-content:flex-end}
.tth-item{position:relative}
.tth-item.tth-wide{position:static}
body .tth-hdr .tth-item > a{font-weight:500;font-size:16px;color:var(--tth-ink);display:flex;align-items:center;
  gap:7px;min-height:128px;white-space:nowrap}
body .tth-hdr .tth-item > a:hover,body .tth-hdr .tth-item:focus-within > a,body .tth-hdr .tth-item.tth-cur > a{color:var(--tth-teal)}
.tth-caret{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.tth-item:hover .tth-caret,.tth-item:focus-within .tth-caret,.tth-item.tth-open .tth-caret{transform:rotate(225deg) translateY(1px)}

/* The call to action keeps the Astra button's fill, size and radius. */
body .tth-hdr a.tth-btn{box-sizing:border-box;max-width:100%;background:var(--tth-blue);color:#fff;font-weight:600;
  font-size:15px;line-height:1.2;padding:14px 28px;border-radius:6px;white-space:nowrap;display:inline-block;
  text-align:center;flex:none;border:2px solid transparent;transition:background .2s,color .2s}
body .tth-hdr a.tth-btn:hover,body .tth-hdr a.tth-btn:focus{background:var(--tth-ink);color:#fff}
body .tth-hdr a.tth-btn.tth-ghost{background:#fff;color:var(--tth-teal);border-color:var(--tth-teal)}
body .tth-hdr a.tth-btn.tth-ghost:hover,body .tth-hdr a.tth-btn.tth-ghost:focus{background:var(--tth-teal);color:#fff}

/* ---- mega panel and dropdowns ---- */
.tth-mega{position:absolute;top:100%;background:#fff;border:1px solid var(--tth-line);border-top:3px solid var(--tth-blue);
  border-radius:0 0 8px 8px;box-shadow:0 24px 48px rgba(11,12,32,.14);opacity:0;visibility:hidden;
  transition:opacity .15s,visibility .15s;z-index:700;box-sizing:border-box}
.tth-item:hover > .tth-mega,.tth-item:focus-within > .tth-mega,.tth-item.tth-open > .tth-mega{opacity:1;visibility:visible}
/* Two groups, so the panel sits under the nav instead of spanning the whole container. */
.tth-mega.tth-full{right:20px;width:min(900px,calc(100% - 40px));padding:28px 34px 0}
.tth-mega.tth-small{left:-24px;min-width:320px;padding:12px 24px}
.tth-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
.tth-colh{font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--tth-teal);
  padding-bottom:10px;border-bottom:2px solid var(--tth-blue);margin:0 0 6px;line-height:1.3}
body .tth-hdr .tth-col a,body .tth-hdr .tth-mega.tth-small a{display:flex;align-items:flex-start;gap:12px;padding:10px 0;color:var(--tth-ink)}
.tth-lbl{display:block;line-height:1.35}
.tth-lbl b{display:block;font-weight:600;font-size:15px;transition:color .15s}
.tth-lbl small{display:block;font-size:13px;color:var(--tth-muted);font-weight:400;margin-top:3px}
body .tth-hdr .tth-col a:hover .tth-lbl b,body .tth-hdr .tth-mega.tth-small a:hover .tth-lbl b,
body .tth-hdr .tth-mega a[aria-current] .tth-lbl b{color:var(--tth-teal)}
body .tth-hdr .tth-mega.tth-small a{border-bottom:1px solid var(--tth-line)}
body .tth-hdr .tth-mega.tth-small a:last-child{border-bottom:0}
.tth-strip{margin:24px -34px 0;padding:15px 34px;background:var(--tth-paper);border-top:1px solid var(--tth-line);
  border-radius:0 0 8px 8px;display:flex;gap:30px;flex-wrap:wrap}
body .tth-hdr .tth-strip a{display:inline-flex;color:var(--tth-teal);font-size:14px}
body .tth-hdr .tth-strip a:hover{text-decoration:underline}
.tth-strip .tth-lbl b{font-size:14px}

/* ---- menu icons: teal body, blue accent, swapped on hover ---- */
.tth-ico{width:24px;height:24px;flex:none;color:var(--tth-teal);margin-top:-1px;transition:color .15s}
.tth-ico .a{stroke:var(--tth-blue)}
body .tth-hdr a:hover .tth-ico{color:var(--tth-blue)}
body .tth-hdr a:hover .tth-ico .a{stroke:var(--tth-teal)}

/* ---- controls Astra would otherwise repaint ----
   Astra styles every bare <button> with its own background, border, radius and padding. That is
   what turned Ready Energy's hamburger into an empty white box. Every property needs !important. */
.tth-burger,.tth-x,.tth-pback,.tth-drill{font-family:inherit!important;text-transform:none!important;letter-spacing:normal!important}
.tth-burger,.tth-x{display:none;background:none!important;border:0!important;box-shadow:none!important;
  padding:0!important;margin:0!important;cursor:pointer;color:var(--tth-ink)!important;line-height:0!important;min-height:0!important}
.tth-burger:hover,.tth-burger:focus,.tth-x:hover,.tth-x:focus{background:none!important;color:var(--tth-teal)!important}
.tth-burger svg{width:30px;height:30px;display:block}
.tth-x svg{width:26px;height:26px;display:block}

/* ---- both rows stick together. The WRAPPER is the sticky element: a sticky row is bounded by
   its own parent, so sticking the rows one by one lets them scroll away. ---- */
.tth-hdr{position:sticky;top:0;z-index:600}
.admin-bar .tth-hdr{top:32px}
@media(max-width:782px){ .admin-bar .tth-hdr{top:46px} }
@media(max-width:600px){ .admin-bar .tth-hdr{top:0} }

/* ---- footer ---- */
.tth-ftr{background:var(--tth-ink);color:#E3E8EF}
body .tth-ftr a{color:rgba(255,255,255,.9)}
body .tth-ftr a:hover,body .tth-ftr a:focus{color:var(--tth-hover);text-decoration:underline}
.tth-fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding:60px 0 44px}
.tth-fh{font-size:13px;letter-spacing:1.8px;text-transform:uppercase;color:var(--tth-sky);margin:0 0 14px;
  font-weight:700;line-height:1.3}
.tth-fh--sub{margin-top:26px}
.tth-fgrid a,.tth-fgrid p,.tth-fgrid .tth-fline{display:block;font-size:15px;padding:6px 0;line-height:1.5;margin:0;color:rgba(255,255,255,.9)}
.tth-fbrand .tth-flogo{display:inline-block;padding:0 0 12px}
.tth-fbrand .tth-flogo img{width:120px;height:auto;display:block}
.tth-fbrand p{color:#E3E8EF}
body .tth-ftr .tth-frate{color:#fff;font-weight:600}
body .tth-ftr .tth-ftel{color:#fff;font-size:19px;font-weight:700}
.tth-fsoc{display:flex;gap:12px;padding-top:12px}
body .tth-ftr .tth-fsoc a{width:36px;height:36px;border:1px solid rgba(255,255,255,.35);border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0}
body .tth-ftr .tth-fsoc a:hover{border-color:var(--tth-hover);text-decoration:none}
.tth-fsoc svg{width:15px;height:15px;fill:currentColor}
/* The bottom padding keeps the last line clear of the floating plus button (right) and Astra's
   scroll-to-top (left) when the page is scrolled to the very end: 24px offset + 60px button. */
.tth-legal{border-top:1px solid rgba(255,255,255,.14);padding:22px 0 104px;font-size:14px;color:#A9B4C4;
  display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap}
.tth-legal-links{display:flex;gap:20px;flex-wrap:wrap}
body .tth-ftr .tth-legal a{color:#fff}

/* ---- narrower desktops: tighten before collapsing ---- */
@media(max-width:1200px){
  .tth-nav{gap:22px}
  body .tth-hdr .tth-item > a{font-size:15px}
  body .tth-hdr .tth-bar a.tth-btn{padding:13px 20px;font-size:14px}
}

/* ---- mobile and tablet ---- */
.tth-panel{display:none}
@media(max-width:1024px){
  .tth-nav,body .tth-hdr .tth-bar a.tth-btn{display:none}
  .tth-burger,.tth-x{display:block}
  .tth-bar .tth-wrap{min-height:108px}
  .tth-logo img{width:92px}
  /* One compact centred row. Three stacked lines ate the first screen on Ready Energy. */
  .tth-util .tth-wrap{flex-wrap:wrap;justify-content:center;gap:4px 18px;padding:7px 16px;font-size:13px;
    text-align:center;min-height:0}
  .tth-util-l,.tth-util-r{gap:12px;flex-wrap:wrap;justify-content:center}
  body .tth-hdr .tth-util .tth-tel{font-size:14px}
  .tth-fgrid{grid-template-columns:1fr 1fr;gap:34px}
  .tth-panel{display:flex;flex-direction:column;position:fixed;inset:0;background:#fff;z-index:9000;
    transform:translateX(100%);transition:transform .25s,visibility .25s;visibility:hidden}
  .tth-panel.tth-open{transform:none;visibility:visible}
  .tth-phead{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;
    border-bottom:1px solid var(--tth-line);min-height:76px;box-sizing:border-box}
  .tth-phead .tth-logo img{width:64px}
  .tth-pback{display:flex!important;align-items:center;gap:12px;font-weight:700!important;font-size:18px!important;
    color:var(--tth-teal)!important;background:none!important;border:0!important;padding:0!important;cursor:pointer;box-shadow:none!important}
  .tth-plist{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}
  body .tth-hdr .tth-plist a,.tth-plist button.tth-drill{display:flex!important;width:100%;box-sizing:border-box;align-items:center;
    justify-content:space-between;gap:14px;padding:18px 22px!important;border:0!important;border-bottom:1px solid var(--tth-line)!important;
    border-radius:0!important;background:none!important;box-shadow:none!important;font-size:17px!important;font-weight:600!important;
    color:var(--tth-ink)!important;text-align:left;cursor:pointer;line-height:1.35!important;min-height:0!important}
  body .tth-hdr .tth-plist a{justify-content:flex-start}
  .tth-plist a .tth-lbl{flex:1}
  .tth-plist .tth-lbl b{font-size:17px;font-weight:600}
  .tth-cap{padding:20px 22px 8px;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--tth-teal);
    font-weight:700;background:var(--tth-paper)}
  .tth-chev{width:9px;height:9px;border-right:2px solid #9AA7B4;border-top:2px solid #9AA7B4;transform:rotate(45deg);flex:none}
  .tth-chev.tth-back{transform:rotate(-135deg);border-color:var(--tth-teal)}
  .tth-pcta{padding:16px 20px calc(22px + env(safe-area-inset-bottom));background:var(--tth-paper);
    border-top:1px solid var(--tth-line);display:grid;gap:12px}
  body .tth-hdr .tth-pcta a.tth-btn{display:block;white-space:normal}
}
@media(max-width:767px){
  /* Phones keep the two things a visitor acts on: the rating and the number. The hours and
     the service area are in the footer and on /contact/. */
  .tth-util-l,.tth-soc{display:none}
  .tth-util-r{gap:10px}
  .tth-bar .tth-wrap{min-height:96px}
  .tth-fgrid{grid-template-columns:1fr;gap:28px;padding:48px 0 36px}
  .tth-legal{flex-direction:column;align-items:flex-start;padding-bottom:96px}
}
@media(max-width:544px){
  .tth-logo img{width:78px}
  .tth-bar .tth-wrap{min-height:92px}
}

/* Nothing in the chrome may ever exceed its box, whatever happens to the stylesheet. Inline SVGs
   without a size once laid out at 300x150 when CSS failed (Ready Energy). */
.tth-hdr svg,.tth-ftr svg{max-width:100%;height:auto}

/* ---- 2026-10-06: navy header, Option 1 (Maxwell picked it on 10/6 from the two mock-ups) ----
   The new logo has white lettering, so the bar takes the navy his logo designer laid it on (#00113C)
   and the strip takes the button blue. #53B1E5 is the logo's own "CLEANING SOLUTIONS" blue, 7.7:1
   on the navy. The header button stays blue and turns white on hover (ink would vanish on navy).
   Mock-ups, both options and the review notes: design/header-color-2026-10-06/. */
:root{--tth-navy:#00113C;--tth-logoblue:#53B1E5}
.tth-util{background:var(--tth-blue)}
.tth-bar{background:var(--tth-navy);border-bottom:0}
body .tth-hdr .tth-bar .tth-item > a{color:#fff}
body .tth-hdr .tth-bar .tth-item > a:hover,body .tth-hdr .tth-bar .tth-item:focus-within > a,
body .tth-hdr .tth-bar .tth-item.tth-cur > a{color:var(--tth-logoblue)}
body .tth-hdr .tth-bar a.tth-btn:hover,body .tth-hdr .tth-bar a.tth-btn:focus{background:#fff;color:var(--tth-navy)}
.tth-burger,.tth-x{color:#fff!important}
.tth-burger:hover,.tth-burger:focus,.tth-x:hover,.tth-x:focus{color:var(--tth-logoblue)!important}
@media(max-width:1024px){
  .tth-phead{background:var(--tth-navy);border-bottom:0}
  .tth-pback{color:#fff!important}
  .tth-pback .tth-chev.tth-back{border-color:#fff}
}