.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    /* A tinted off-white, not pure white — most of the site's sections
       are pure white too, so a plain white bar had nothing to separate
       it from the page underneath once you scrolled past the hero. */
    background: var(--color-gray-50);
    box-shadow: 0 2px 16px rgba(10,43,74,0.08);
    z-index: 1000;
    transition: background var(--transition), box-shadow var(--transition), padding var(--transition);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 24px;
}

/* Transparent, light-text header floating over the homepage hero photo */
.has-transparent-header .site-header {
    background: linear-gradient(180deg, rgba(6,28,51,0.65) 0%, rgba(6,28,51,0) 100%);
    box-shadow: none;
}
.has-transparent-header .site-header .primary-menu a,
.has-transparent-header .site-header .header-phone,
.has-transparent-header .site-header .site-title {
    color: var(--color-white);
}
.has-transparent-header .site-header .menu-toggle .bar {
    background: var(--color-white);
}
/* Hover/focus must win over the transparent-header and scrolled color
   overrides below, no matter which state the header is in — otherwise a
   link can silently stop changing color on hover (or, for the dropdown,
   render white text on its own white background). */
.has-transparent-header .site-header .primary-menu > li > a:hover,
.has-transparent-header .site-header.scrolled .primary-menu > li > a:hover {
    color: var(--color-accent);
}
.has-transparent-header .site-header .primary-menu .sub-menu a {
    color: var(--color-primary);
}
.has-transparent-header .site-header .primary-menu .sub-menu a:hover {
    color: var(--color-secondary);
    background: var(--color-gray-50);
}
.has-transparent-header .site-header.scrolled {
    background: rgba(245,247,250,0.97);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 16px rgba(10,43,74,0.08);
}
.has-transparent-header .site-header.scrolled .primary-menu a,
.has-transparent-header .site-header.scrolled .header-phone,
.has-transparent-header .site-header.scrolled .site-title {
    color: var(--color-primary);
}
.has-transparent-header .site-header.scrolled .menu-toggle .bar {
    background: var(--color-primary);
}

/* Logo */
.brand-wrapper { flex-shrink: 0; }
.site-logo img { height: 46px; width: auto; transition: filter var(--transition); }
/* Force the logo to solid white while the header floats transparent over
   the hero photo — same trick as the footer logo. It reverts to its
   original colors automatically once the header goes solid on scroll. */
.has-transparent-header .site-header:not(.scrolled) .site-logo img {
    filter: brightness(0) invert(1);
}
.site-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    color: var(--color-primary);
}

/* Hamburger */
.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: background var(--transition-fast);
}
.menu-toggle:hover,
.menu-toggle:focus-visible {
    background: rgba(30,111,159,0.1);
}
.has-transparent-header .site-header:not(.scrolled) .menu-toggle:hover,
.has-transparent-header .site-header:not(.scrolled) .menu-toggle:focus-visible {
    background: rgba(255,255,255,0.15);
}
.menu-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 24px;
}
.menu-toggle .bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
    transition: var(--transition);
}
.menu-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Navigation */
.site-navigation { display: flex; align-items: center; }
.primary-menu { display: flex; align-items: center; gap: 34px; }
.primary-menu > li { position: relative; }
.primary-menu a {
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: 0.3px;
    font-size: 0.95rem;
    text-transform: uppercase;
    transition: color var(--transition-fast);
}
.primary-menu > li > a { position: relative; padding: 10px 0; display: inline-block; }
.primary-menu > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 6px;
    height: 2px;
    background: currentColor;
    transition: right var(--transition);
}
.primary-menu a:hover { color: var(--color-accent); }
.primary-menu > li > a:hover::after { right: 0; }
.primary-menu .current-menu-item > a { color: var(--color-secondary); }

/* Dropdown (Services > Residential/Commercial/Industrial/Smart) */
.primary-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: -20px;
    min-width: 240px;
    background: var(--color-white);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 10px;
    z-index: 10;
}
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu { display: block; }
.primary-menu .sub-menu a {
    color: var(--color-primary);
    text-transform: none;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    display: block;
}
.primary-menu .sub-menu a:hover { background: var(--color-gray-50); color: var(--color-secondary); }

/* Desktop contact */
.header-contact { display: flex; align-items: center; gap: 22px; margin-left: 30px; }
.header-phone { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.header-phone__icon { display: inline-flex; align-items: center; justify-content: center; }
.header-phone__icon svg { display: block; width: 21px; height: 21px; }
.header-quote-btn { padding: 12px 22px; font-size: 0.85rem; }

.menu-close, .menu-cta { display: none; }

/* Mobile */
@media (max-width: 991px) {
    .menu-toggle { display: flex; }
    .header-quote-btn { display: none; }
    .site-navigation {
        position: fixed;
        top: 0;
        right: -320px;
        width: min(320px, 85vw);
        height: 100vh;
        background: var(--color-gray-50);
        box-shadow: -5px 0 25px rgba(0,0,0,0.15);
        transition: right var(--transition);
        padding: 24px;
        overflow-y: auto;
        align-items: flex-start;
    }
    .site-navigation.open { right: 0; }
    .menu-wrapper { width: 100%; }
    .menu-close {
        display: block;
        background: none;
        border: none;
        font-size: 2rem;
        cursor: pointer;
        margin-left: auto;
        padding: 0;
        color: var(--color-primary);
    }
    .primary-menu { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 30px; width: 100%; }
    .primary-menu > li { width: 100%; }
    .primary-menu > li > a { color: var(--color-primary) !important; font-size: 1.1rem; width: 100%; }
    .primary-menu > li > a:hover { color: var(--color-accent) !important; }
    .primary-menu > li > a::after { display: none; }
    .primary-menu .sub-menu {
        display: block;
        position: static;
        box-shadow: none;
        padding: 0 0 10px 16px;
        background: none;
    }
    .primary-menu .sub-menu a { color: var(--color-gray-700); }
    .menu-cta { display: block; margin-top: 24px; width: 100%; }
    .menu-cta .button { width: 100%; }
    .header-contact { display: none; }
    .menu-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(6,28,51,0.5);
        z-index: 999;
    }
    .menu-overlay.active { display: block; }
}