/* Navigation */
#nav {
    --logo: 52px;
    --logo-big: clamp(64px, calc((100vw - 1100px) / 4.1), 100px);
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--bg);
    color: var(--ink);
    padding: 16px 0;
    box-shadow: 0 1px 0 var(--line);
    transition: background .25s, color .25s, padding .25s, box-shadow .25s;
}
#nav.over {
    position: fixed;
    background: transparent;
    color: #fff;
    padding: 24px 0;
    box-shadow: none;
}
#nav.over.solid {
    background: var(--bg);
    color: var(--ink);
    padding: 16px 0;
    box-shadow: 0 1px 0 var(--line);
}
/* The bar spans the window on every page with 32px gutters: logo at the far left, links at the far right.
   On photo-hero pages (nav "over") the logo starts big and the row is centered on it; on scroll it only
   shrinks upward (logo down to bar size, background in), nothing moves sideways. */
#nav .wrap {
    position: relative;
    display: flex;
    align-items: center;
    max-width: none;
    padding-left: 32px;
    padding-right: 32px;
    min-height: var(--logo);
    transition: min-height .25s;
}
#nav.over:not(.solid) .wrap {
    min-height: var(--logo-big);
}
#nav .logo {
    position: absolute;
    top: 0;
    left: 32px;
    display: block;
    height: var(--logo);
    transition: height .25s, top .25s;
}
#nav.over:not(.solid) .logo {
    height: var(--logo-big);
}
#nav .logo img {
    display: block;
    height: 100%;
    width: auto;
    transition: opacity .25s;
}
#nav .logo-light {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
#nav.over:not(.solid) .logo-dark {
    opacity: 0;
}
#nav.over:not(.solid) .logo-light {
    opacity: 1;
}
#nav .right {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-left: auto;
}
#nav .links {
    display: flex;
    gap: 22px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
#nav .links a {
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1.5px solid transparent;
}
#nav .links a.on,
#nav .links a:hover {
    border-color: currentColor;
}
#nav .phone {
    font-weight: 600;
    font-size: 17px;
    text-decoration: none;
}
.burger {
    display: none;
    width: 28px;
    height: 20px;
    padding: 0;
    background: none;
    border: 0;
    border-top: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    position: relative;
    color: inherit;
    cursor: pointer;
}
.burger:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin-top: -1.25px;
    border-top: 2.5px solid currentColor;
}

/* Below 1360px the phone number leaves the bar (it stays in the hero, the Visit section, the footer, and the phone bar)
   and the link text steps down, so the row fits beside the big logo. The big logo scales with the window in each band. */
@media (max-width: 1359px) {
    #nav {
        --logo-big: clamp(48px, calc((100vw - 865px) / 4.1), 100px);
    }
    #nav .phone {
        display: none;
    }
    #nav .links {
        gap: 18px;
        font-size: 13px;
    }
}
@media (max-width: 1140px) {
    #nav {
        --logo-big: clamp(44px, calc((100vw - 795px) / 4.1), 100px);
    }
    #nav .links {
        gap: 14px;
        font-size: 12px;
    }
}