/* Transparent over each page's own photo; readable on a light bar after scrolling. */
#site-header { position: sticky; top: 0; z-index: 30; height: 82px; margin-bottom: -82px; }
.site-header, body[data-page="home"] .site-header { position: relative; background: #fff; border-bottom: 1px solid rgba(18,59,93,.1); transition: background-color .2s ease, border-color .2s ease; }
.brand { position: relative; }
.brand .logo-reverse { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none; }
.site-header.is-over-hero, body[data-page="home"] .site-header.is-over-hero { background: rgba(25,29,34,.58); border-color: rgba(255,255,255,.15); }
.is-over-hero .brand { border-right-color: rgba(255,255,255,.3); }
.is-over-hero .brand img:first-child { opacity: 0; }
.is-over-hero .brand .logo-reverse { opacity: 1; }
.is-over-hero .main-nav a, .is-over-hero .header-phone { color: #fff; }
.is-over-hero .header-phone svg { color: #fff; }
.is-over-hero .main-nav a[aria-current="page"]::after { background: #fff; }
body:not([data-page="partner"]) .page-hero { min-height: 390px; padding-top: 82px; }
body[data-page="home"] .hero { padding-top: 82px; }
body[data-page="service"] .service-page-hero .page-hero-shade { background: rgba(42,26,25,.62); }
body[data-page="service"] .inspection-process { border-top: 6px solid #c76d3c; }
body[data-page="service"] .promise-band { border-bottom: 8px solid #d6e5ee; }
body[data-page="service"] .service-news { position: relative; isolation: isolate; }
body[data-page="service"] .service-news::before { position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #edf4f8; content: ""; }
body[data-page="service"] .mobile-contact { border-top-color: rgba(255,255,255,.55); box-shadow: 0 -4px 16px rgba(18,59,93,.13); }
@media (max-width: 960px) {
  #site-header { height: 70px; margin-bottom: -70px; }
  body:not([data-page="partner"]) .page-hero { min-height: 350px; padding-top: 70px; }
  body[data-page="home"] .hero { padding-top: 70px; }
  .is-over-hero .menu-toggle { background: rgba(18,38,52,.65); border-color: rgba(255,255,255,.6); color: #fff; }
  .is-over-hero .main-nav a { color: var(--navy); }
  .is-over-hero .main-nav a[aria-current="page"] { color: var(--blue); }
  body[data-page="service"] .inspection-process { border-top-color: #769bb8; }
}