.top-bar {
    background: var(--color-navy-900);
    color: var(--color-gray-300);
    font-size: var(--fs-sm);
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(244, 178, 35, 0.15);
}

.top-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    row-gap: var(--space-4);
}

/* The utility row mirrors the header below it: a left item on the
   container's left edge, a centred item on the container's centre
   line, and the trailing items on the container's right edge.

   `space-between` cannot do this — it only centres the middle item
   when the two outer items are the same width, so the email drifted
   left of the navigation menu below it. */
.top-bar__info {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-6);
}

.top-bar__link--start {
    grid-column: 1;
    justify-self: start;
}

.top-bar__link--center {
    grid-column: 2;
    justify-self: center;
}

.top-bar__end {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.top-bar__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-gray-300);
    transition: color var(--t-base);
    font-size: 1.2rem;
    text-align: center;
}

.top-bar__link:hover {
    color: var(--color-gold-500);
}

.top-bar__link i {
    color: var(--color-gold-500);
    font-size: 0.85em;
}

.top-bar__social {
    display: flex;
    gap: var(--space-3);
}

.top-bar__social a {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    color: var(--color-gray-300);
    transition: all var(--t-base);
}

.top-bar__social a:hover {
    background: var(--color-gold-500);
    color: var(--color-navy-900);
}

@media (max-width: 768px) {.top-bar__hours { display: none; }
.top-bar__info { gap: var(--space-4); }}

.header {
    background: var(--color-white);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--t-base);
}

.header.is-scrolled {
    box-shadow: var(--shadow-md);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding-block: var(--space-4);
}

.nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
}

.nav__list {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
}

.nav__item {
    position: relative;
}

.nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.6rem 0.9rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--color-gray-700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
    position: relative;
    transition: color var(--t-base), background-color var(--t-base), box-shadow var(--t-base);
}

.nav__link:hover,
.nav__link--active {
    color: var(--color-gold-600);
}

.nav__link--active {
    background: linear-gradient(135deg, rgba(244, 178, 35, 0.12) 0%, rgba(216, 154, 18, 0.12) 100%);
    box-shadow: none;
}

li.nav__link--active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0.15rem;
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--color-gold-500), var(--color-gold-600));
    transform: translateX(-50%);
    transition: width var(--t-base);
}

li.nav__link--active:hover::after {
    width: 26px;
}

.nav__caret {
    font-size: 0.7em;
    transition: transform var(--t-base);
}

.nav__item--dropdown:hover > .nav__caret {
    transform: rotate(180deg);
}

/* Nested parents fly out sideways, so their chevron starts pointing
   right and rotates down when the sub-menu opens. */
.nav__caret--side {
    font-size: 0.65em;
}

.nav__item--dropdown:hover > .nav__caret--side,
.nav__item--dropdown:focus-within > .nav__caret--side {
    transform: rotate(90deg);
}

/* Second-level parents (Installation & Upgrades, Service & Repair)
   are a flex row: the label takes the free space and the caret is
   pushed to the trailing edge of the panel, vertically centered. */
.nav__dropdown > .nav__item--dropdown > .nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--space-3);
}

.nav__dropdown li {
    margin: 5px auto;
}

/* Keep the label from being squeezed by a long caret-free sibling. */
.nav__dropdown > .nav__item--dropdown > .nav__link .nav__caret--side {
    flex: 0 0 auto;
    margin-left: auto;
}

/* A parent whose descendant is the current page keeps the accent
   treatment, so the active branch stays visible while the pointer
   travels down the tree.

   The child combinator is load-bearing: a descendant selector would
   tint and underline *every* link inside the panel, because the
   current item sits inside this parent's <ul>. */
.nav__item--has-active > .nav__link {
    color: var(--color-gold-600);
    background: linear-gradient(135deg, rgba(244, 178, 35, 0.12) 0%, rgba(216, 154, 18, 0.12) 100%);
}

/* The rule under a parent of the current page. It hangs off the <li>
   for the same reason as the rule above — the <a> is a full-width
   block inside a dropdown panel, so centring on it would put the
   rule in the middle of the panel instead of under the label. */
li.nav__item--has-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0.15rem;
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--color-gold-500), var(--color-gold-600));
    transform: translateX(-50%);
}

@media (max-width: 1279px) {
    li.nav__item--has-active::after {
        display: none;
    }
}

.nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: max-content;
    word-wrap: break-word;
    /* No `overflow` here: a clipping ancestor would cut off the
       third-level flyout that renders outside this panel. */
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--t-base);
    border-top: 3px solid var(--color-gold-500);
}

/* Reveal only the dropdown belonging to the item actually hovered.
   This must stay a child combinator: a descendant selector would
   open both flyouts at once the moment Services is hovered, since
   they sit inside it. */
.nav__item--dropdown:hover > .nav__dropdown,
.nav__item--dropdown:focus-within > .nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ---------- Third-level flyout ----------
   Menus nested deeper than two levels (Services → Installation &
   Upgrades → Panel Upgrades) fly out to the side instead of stacking
   downward, so the third level stays visible instead of overflowing
   off-screen. */
.nav__dropdown .nav__dropdown {
    /* Align the flyout's top edge with the parent row rather than
       hanging below it, so the first child reads as a continuation
       of the row it belongs to. */
    top: 0;
    left: 100%;
    border-top: 0;
    border-left: 3px solid var(--color-gold-500);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    transform: translateX(10px);
    /* Long lists scroll within the flyout instead of running past
       the viewport. Clipping is safe here because this panel's own
       children are what scroll. */
    max-height: min(70vh, 420px);
    overflow-y: auto;
}

/* Hover bridge: the flyout is offset sideways by its transform while
   entering, and the parent row's padding leaves a small gap before
   it. This invisible strip spans that gap so the pointer can cross
   without momentarily leaving every ancestor and snapping the menu
   shut. */
.nav__dropdown .nav__dropdown::before {
    content: "";
    position: absolute;
    top: 0;
    right: 100%;
    width: 12px;
    height: 100%;
}

/* The desktop safety net in responsive.css targets every .nav__dropdown
   descendant, so re-open the third level when any ancestor is hovered. */
.nav__item--dropdown:hover > .nav__dropdown .nav__dropdown:hover {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.nav__dropdown li a {
    display: block;
    padding: 0.7rem 1rem;
    font-size: var(--fs-sm);
    color: var(--color-gray-700);
    border-radius: var(--radius-sm);
    position: relative;
    transition: all var(--t-fast);
}

.nav__dropdown li a:hover {
    background: var(--color-gray-50);
    color: var(--color-gold-600);
}

.nav__dropdown li a.current-menu-item,
.nav__dropdown li a.is-active,
.nav__dropdown li a.active {
    color: var(--color-gold-600);
    font-weight: 600;
    background: linear-gradient(90deg, rgba(244, 178, 35, 0.10) 0%, rgba(244, 178, 35, 0) 100%);
}

.nav__dropdown li a.current-menu-item::before,
.nav__dropdown li a.is-active::before,
.nav__dropdown li a.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--color-gold-500), var(--color-gold-600));
}

/* Inside a dropdown the <li> is as wide as the panel, so the rule
   can't be centered on it — it has to hug the label instead. The label
   starts at the link's 1rem padding, and the rule is 18px wide, so
   its center belongs 9px further right. A percentage would drift as
   the panel grows with the longest label. Both the current item and
   its parents need the same offset. */
ul ul > li.nav__link--active::after,
ul ul > li.nav__item--has-active::after {
    left: calc(1rem + 9px);
}

/* ---------- Third-level links ----------
   Declared after the base `.nav__dropdown li a` rules above so these
   values aren't overridden by them. */
.nav__dropdown .nav__dropdown {
    /* Room for service names such as "Safety Inspections & Code
       Compliance" without wrapping, since this panel holds the
       longest labels. */
    min-width: 280px;
    /* No bullets at this level — the flyout is already visually
       nested, and a marker here reads as an odd floating dot. */
    list-style: none;
}

.nav__dropdown .nav__dropdown li {
    list-style: none;
}

/* Match the second level's inset exactly (see `.nav__dropdown li a`)
   so both panels line up on their left edge. */
.nav__dropdown .nav__dropdown li a {
    padding-left: 1rem;
}

.nav__cta {
    padding: 0.7rem 1.4rem;
    font-size: var(--fs-sm);
}

/* The logo, the menu and the call to action share one row, with the
   menu centred on the container itself — not on the space left over
   after the logo, which is what kept it off the top bar's centre line.
   `display: contents` lifts the nav's children into the header's flex
   row without moving them in the markup, so the slide-in drawer below
   1280px keeps its own layout.

   The two `auto` margins split the free space evenly, which puts the
   menu exactly in the middle of the row.

   This block has to come after the `.nav` rules above: they have the
   same specificity, so the later one wins. */
@media (min-width: 1280px) {
    .nav {
        display: contents;
    }

    .header__logo,
    .custom-logo-link {
        margin-right: auto;
    }

    .nav__list {
        flex: 0 0 auto;
        width: auto;
    }

    .nav__cta {
        margin-left: auto;
    }
}

.hamburger {
    display: none;
    width: 36px;
    height: 36px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    z-index: 110;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 3px;
    background: var(--color-navy-900);
    border-radius: 2px;
    transition: all var(--t-base);
}

.hamburger.is-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.is-active span:nth-child(2) {
    opacity: 0;
}

.hamburger.is-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* The slide-in drawer. The desktop nav needs the full 1240px
   container to sit the logo, the five menu links and the call to
   action on one row without crowding, so it hands over to the drawer
   below 1280px. `main.js` uses the same 1279px cut-off. */
@media (max-width: 1279px) {.hamburger { display: flex; }
    .nav {
        position: fixed;
        top: 0;
        right: 0;
        width: 320px;
        max-width: 85vw;
        height: 100vh;
        background: var(--color-white);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 5rem 1.5rem 1.5rem;
        gap: var(--space-4);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
        transform: translateX(100%);
        transition: transform var(--t-base);
        overflow-y: auto;
    }
    .nav.is-open {
        transform: translateX(0);
    }
    .nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .nav__link {
        padding: 0.9rem 1rem;
        border-bottom: 1px solid var(--color-gray-100);
        border-radius: var(--radius-md);
    }
    .nav__link--active {
        background: linear-gradient(90deg, rgba(244, 178, 35, 0.14) 0%, rgba(244, 178, 35, 0) 100%);
        box-shadow: none;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    /* The drawer marks the active branch with the left-hand bar
       instead of the rule that sits under the label on desktop. */
    .nav__item--has-active > .nav__link {
        background: linear-gradient(90deg, rgba(244, 178, 35, 0.14) 0%, rgba(244, 178, 35, 0) 100%);
        box-shadow: none;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .nav__link--active::after,
    li.nav__link--active::after {
        display: none;
    }
    li.nav__link--active li.nav__link--active li.nav__link--active {
        padding-left: 0;
    }
    li.nav__link--active li.nav__link--active::after {
        display: none;
    }
    .nav__link--active li:last-of-type {
        margin-bottom: 15px;
    }
    .nav__dropdown {
        position: static;
        min-width: auto;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding: 0;
        border: none;
        margin-left: var(--space-4);
    }
    .nav__dropdown li a {
        padding: 0.6rem 0.75rem;
    }
    .nav__dropdown li a.current-menu-item,
    .nav__dropdown li a.is-active,
    .nav__dropdown li a.active {
        background: linear-gradient(90deg, rgba(244, 178, 35, 0.12) 0%, rgba(244, 178, 35, 0) 100%);
    }
    .nav__cta {
        margin-top: var(--space-4);
    }
    .nav__caret { display: none; }}

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    background: var(--color-gold-500);
    color: var(--color-navy-900);
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--t-base);
    z-index: 99;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--color-gold-600);
    transform: translateY(-4px);
}

.container.header__inner .custom-logo {
    display: block;
    margin-left: 0;
    max-width: 200px;
}