.nav-bar { position:relative;z-index:30;background:var(--ocf-primary);color:var(--ocf-primary-contrast); }
.ocf-utility { background:var(--ocf-bg-dark);color:var(--ocf-heading-alt);font-size:var(--ocf-font-small-size);font-weight:var(--font-weight-bold);padding:calc(var(--ocf-grid-gap) * 0.375) 0;line-height:calc(var(--ocf-grid-gap) * 0.6875); }
.ocf-utility .container-global { display:flex;justify-content:space-between;gap:calc(var(--ocf-grid-gap) * 0.75); }
.nav-inner { display:flex;align-items:center;gap:var(--ocf-grid-gap);min-height:var(--ocf-header-height); }
.nav-logo { flex:0 0 var(--ocf-logo-width); }.nav-logo-img { width:var(--ocf-logo-width);height:var(--ocf-logo-height);object-fit:contain; }
.nav-links { margin-left:auto;display:flex;align-items:center;gap:clamp(calc(var(--ocf-grid-gap) * 0.5),2vw,calc(var(--ocf-grid-gap) * 0.875));font-size:var(--ocf-font-small-size);font-weight:var(--font-weight-bold); }
.nav-link,.nav-dropdown-trigger { display:inline-flex;align-items:center;gap:calc(var(--ocf-grid-gap) * 0.25);padding:calc(var(--ocf-grid-gap) * 0.75) 0;background:none;border:0;color:inherit;white-space:nowrap; }
.nav-link:hover,.nav-dropdown-trigger:hover { color:var(--ocf-primary-contrast);text-decoration:underline; }
.nav-dropdown { position:relative; }.nav-dropdown-trigger svg { width:calc(var(--ocf-grid-gap) * 0.4375);height:calc(var(--ocf-grid-gap) * 0.4375); }
.nav-dropdown-panel { display:none;position:absolute;top:100%;left:0;width:var(--ocf-nav-dropdown-width);padding:calc(var(--ocf-grid-gap) * 0.5);background:var(--ocf-bg);color:var(--ocf-heading);border-top:calc(var(--card-border-width) * 4) solid var(--ocf-secondary);box-shadow:0 calc(var(--ocf-grid-gap) * 0.375) calc(var(--ocf-grid-gap) * 0.75) color-mix(in srgb,var(--ocf-bg-dark) 18%,transparent); }
.nav-dropdown-panel { display:block;opacity:0;visibility:hidden; }.nav-dropdown:focus-within>.nav-dropdown-panel { opacity:1;visibility:visible; }
.nav-dropdown-panel a { display:block;padding:calc(var(--ocf-grid-gap) * 0.375) calc(var(--ocf-grid-gap) * 0.5); }.nav-dropdown-panel a:hover { background:var(--neptune-bg-alt);color:var(--ocf-link); }
.nav-dropdown-panel svg { width:calc(var(--ocf-grid-gap) * 0.5);height:calc(var(--ocf-grid-gap) * 0.5); }.nav-dropdown-panel__grid { display:block; }.nav-dropdown-panel__heading { font-size:inherit; }
.nav-right { display:flex;align-items:center;gap:var(--ocf-grid-gap); }.nav-cta { order:-1;min-height:calc(var(--ocf-grid-gap) * 1.375);padding:calc(var(--ocf-grid-gap) * 0.3125) calc(var(--ocf-grid-gap) * 0.625);white-space:nowrap; }.nav-divider { display:none; }
.nav-phone { display:flex;flex-direction:column;font-size:var(--ocf-font-small-size);line-height:1.5;white-space:nowrap; }.nav-phone strong { font-family:var(--ocf-font-accent);font-size:var(--font-h3-size); }
.nav-mobile-btn { display:none;background:none;border:0;color:inherit; }.mobile-menu { display:none; }
@media(max-width:1439px) { .nav-phone { display:none; }.nav-inner { gap:calc(var(--ocf-grid-gap) * 0.75); }.nav-right { gap:calc(var(--ocf-grid-gap) * 0.5); } }
@media(max-width:980px) { .ocf-utility { text-align:center;padding:calc(var(--ocf-grid-gap) * 0.25) 0; }.ocf-utility .container-global { justify-content:center; }.ocf-utility__promise { display:none; }.nav-inner { justify-content:space-between;min-height:var(--ocf-header-height-mobile);gap:calc(var(--ocf-grid-gap) * 0.5); }.nav-logo { flex-basis:var(--ocf-logo-width-mobile); }.nav-logo-img { width:var(--ocf-logo-width-mobile);height:var(--ocf-logo-height-mobile); }.nav-links,.nav-right>.nav-cta { display:none; }.nav-mobile-btn { display:flex;padding:calc(var(--ocf-grid-gap) * 0.375); }.mobile-menu.is-open,.mobile-menu.open { display:block; }.mobile-menu-inner { padding:calc(var(--ocf-grid-gap) * 0.5) var(--container-pad) var(--ocf-grid-gap); }.mobile-menu a,.mobile-dropdown-trigger { display:flex;align-items:center;justify-content:space-between;width:100%;padding:calc(var(--ocf-grid-gap) * 0.4375) 0;background:none;border:0;color:inherit; }.mobile-menu svg { width:calc(var(--ocf-grid-gap) * 0.625);height:calc(var(--ocf-grid-gap) * 0.625); }.mobile-dropdown-menu { display:none;padding-left:calc(var(--ocf-grid-gap) * 0.625); }.mobile-dropdown.is-open .mobile-dropdown-menu { display:block; }.mobile-cta { background:var(--ocf-primary)!important;color:var(--ocf-primary-contrast)!important;justify-content:center!important;margin-top:calc(var(--ocf-grid-gap) * 0.5); }.mobile-phone { justify-content:center!important;gap:calc(var(--ocf-grid-gap) * 0.375); } }

.dropdown-item-icon { display:none; }.mobile-accordion-panel { display:none; }.mobile-accordion-trigger { display:flex;width:100%;justify-content:space-between;align-items:center;padding:calc(var(--ocf-grid-gap) * 0.4375) 0;background:none;border:0;color:inherit; }.mobile-accordion-panel { padding-left:calc(var(--ocf-grid-gap) * 0.625); }.mobile-accordion-panel a { padding:calc(var(--ocf-grid-gap) * 0.375) 0; }


/* ─── Neptune header ───
 * Solid top bar (icons, hours, email) and solid nav row. --neptune-header-offset is the full header height (top bar + nav).
 * assets/main.js measures the real top bar / nav row heights into --neptune-utility-height / --neptune-nav-row-height,
 * so the sticky offsets stay exact regardless of fonts, wrapping or the WP admin bar; the calc values are fallbacks.
 */
:root {
    --neptune-utility-height: calc(var(--ocf-grid-gap) * 1.4375);
    --neptune-header-offset: calc(var(--ocf-header-height) + var(--neptune-utility-height));
    --neptune-glass-line: color-mix(in srgb, var(--ocf-heading-alt) 16%, transparent);
    /* Hero trust strip band color. */
    --neptune-deep: var(--neptune-band);
    /* Top offset for sticky page elements so they sit below the sticky nav row. */
    --neptune-sticky-top: calc(var(--wp-admin-bar-offset) + var(--neptune-nav-row-height, var(--ocf-header-height)) + var(--ocf-grid-gap) * 1.5);
}

/* Top bar: same page background as the nav row with a hairline separating it from the nav; follows dark mode. */
.ocf-utility {
    --neptune-utility-line: var(--ocf-border);
    border-bottom: var(--card-border-width) solid var(--ocf-primary);
    background: var(--ocf-bg);
    color: var(--ocf-heading);
}

.ocf-utility .container-global {
    align-items: center;
}

.ocf-utility__meta {
    display: flex;
    align-items: center;
    gap: var(--ocf-grid-gap);
}

.ocf-utility__item {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--ocf-space-unit) * 0.5);
    color: inherit;
}

.ocf-utility__meta .ocf-utility__item + .ocf-utility__item {
    padding-left: var(--ocf-grid-gap);
    border-left: var(--card-border-width) solid var(--neptune-utility-line);
}

.ocf-utility svg {
    flex-shrink: 0;
    width: calc(var(--ocf-space-unit) * 0.9);
    height: calc(var(--ocf-space-unit) * 0.9);
    color: var(--ocf-link);
}

a.ocf-utility__item:hover {
    color: var(--ocf-link);
}

.nav-link,
.nav-dropdown-trigger {
    text-underline-offset: 0.45em;
    text-decoration-thickness: calc(var(--card-border-width) * 2);
}

/* Sticky header (Lightning precedent: the nav stays reachable). The top bar scrolls away; the nav row sticks.
 * Three steps: deep navy top bar, light nav row, then the hero photo. */
.nav-bar {
    position: sticky;
    top: calc(var(--wp-admin-bar-offset) - var(--neptune-utility-height));
    z-index: 100;
    border-bottom: var(--card-border-width) solid var(--ocf-border);
    background: var(--ocf-bg);
    color: var(--ocf-heading);
    box-shadow: 0 10px 24px -20px color-mix(in srgb, var(--ocf-dark-bg) 70%, transparent);
}

.nav-links .nav-link,
.nav-links .nav-dropdown-trigger {
    position: relative;
}

.nav-links .nav-link::after,
.nav-links .nav-dropdown-trigger::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: calc(var(--ocf-grid-gap) * 0.45);
    left: 0;
    height: calc(var(--card-border-width) * 2);
    border-radius: var(--radius-full);
    background: var(--ocf-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration) var(--ease);
}

.nav-links .nav-link:hover,
.nav-links .nav-dropdown-trigger:hover,
.nav-links [aria-current="page"] {
    color: var(--ocf-link);
    text-decoration: none;
}

.nav-links .nav-link:hover::after,
.nav-links .nav-dropdown-trigger:hover::after,
.nav-links [aria-current="page"]::after {
    transform: scaleX(1);
}

.nav-phone {
    grid-template-columns: auto auto;
    column-gap: calc(var(--ocf-space-unit) * 0.625);
    align-items: center;
    color: var(--ocf-heading);
}

@media (min-width: 1440px) {
    .nav-phone {
        display: grid;
    }
}

.nav-phone__icon {
    display: inline-grid;
    grid-row: span 2;
    place-items: center;
    width: calc(var(--ocf-space-unit) * 2.5);
    height: calc(var(--ocf-space-unit) * 2.5);
    border-radius: var(--radius-full);
    background: var(--neptune-bg-alt);
    color: var(--ocf-link);
}

.nav-phone__icon svg {
    display: block;
    width: calc(var(--ocf-space-unit) * 1.125);
    height: calc(var(--ocf-space-unit) * 1.125);
    overflow: visible;
}

.nav-phone .nav-call-label {
    color: var(--ocf-body);
    font-size: var(--ocf-font-small-size);
    line-height: 1.2;
}

.nav-phone strong {
    font-size: var(--font-body-size);
    line-height: 1.3;
}

.nav-phone:hover strong {
    color: var(--ocf-link);
}

@media (prefers-reduced-motion: reduce) {
    .nav-links .nav-link::after,
    .nav-links .nav-dropdown-trigger::after {
        transition: none;
    }
}

@media (max-width: 980px) {
    :root {
        --neptune-utility-height: calc(var(--ocf-grid-gap) * 1.1875);
        --neptune-header-offset: calc(var(--ocf-header-height-mobile) + var(--neptune-utility-height));
        --neptune-sticky-top: calc(var(--wp-admin-bar-offset) + var(--neptune-nav-row-height, var(--ocf-header-height-mobile)) + var(--ocf-grid-gap) * 1.5);
    }

    .ocf-utility__promise,
    .ocf-utility__meta .ocf-utility__item + .ocf-utility__item {
        display: none;
    }
}

/* Long menus (open Services list on short phones) scroll inside the sticky nav instead of running off-screen.
 * The menu opens via an inline display style (no class), so the limit sits on the base selector. */
.mobile-menu {
    max-height: calc(100dvh - var(--neptune-utility-height, 0px) - var(--neptune-nav-row-height, var(--ocf-header-height-mobile)) - var(--wp-admin-bar-offset, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
}