.bv-header {
    position: sticky;
    top: 0;
    z-index: 30;
    /* Solid background, not translucent+backdrop-filter: filter/backdrop-filter on this
       ancestor would establish a new containing block for the position:fixed mobile menu
       panel below, sizing it to the header's own ~64px height instead of the viewport. */
    background: var(--bv-surface);
    border-bottom: 1px solid var(--bv-border);
}

.bv-header__inner {
    max-width: var(--bv-max-width);
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.bv-header__brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.bv-logo {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-decoration: none;
    line-height: 1.2;
    min-width: 0;
}

/* Top edge sits on the cap height of the first "B", bottom of the shadow on the baseline of the
   "T" in the tagline (Inter, measured), not on the line boxes. */
.bv-logo__mark {
    flex-shrink: 0;
    width: 1.5075rem;
    height: 1.725rem;
    overflow: visible;
    margin-top: 0.2375rem;
    color: var(--bv-primary-dark);
}

.bv-logo__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bv-logo__full {
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    color: var(--bv-primary-dark);
}

.bv-logo__short {
    display: none;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--bv-primary-dark);
}

.bv-logo__tagline {
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--bv-text-muted);
}

.bv-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 1px solid var(--bv-border);
    border-radius: var(--bv-radius-sm);
    background: var(--bv-surface);
    cursor: pointer;
}

.bv-menu-toggle span {
    width: 18px;
    height: 2px;
    background: var(--bv-primary-dark);
    border-radius: 999px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.bv-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bv-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bv-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.bv-header__menu {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 2;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.bv-nav {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.bv-nav a {
    text-decoration: none;
    color: var(--bv-text);
    font-weight: 500;
    font-size: 0.92rem;
    white-space: nowrap;
}

.bv-nav a:hover, .bv-nav a[aria-current="page"] {
    color: var(--bv-primary-dark);
}

.bv-header__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bv-background);
    border: 1px solid var(--bv-border);
    border-radius: 999px;
    padding: 4px 4px 4px 14px;
}

.bv-header__search input {
    border: 0;
    background: transparent;
    outline: none;
    width: 200px;
    min-height: 36px;
}

.bv-header__search button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--bv-primary);
    color: #fff;
    cursor: pointer;
}

.bv-header__cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: var(--bv-radius-sm);
    background: var(--bv-primary);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.bv-header__cta:hover {
    background: var(--bv-primary-dark);
}

/* UI-165-1 (PO 2026-10-30): in its old 2/3 share the menu dropped to a second row at ≤ 1100 px. The menu now
   takes its own width and the brand gives way, so the header stays on one row from 961 px; the tagline is
   dropped where it would otherwise run under the menu. */
@media (min-width: 961px) {
    .bv-header__brand { flex: 0 1 auto; min-width: 0; }
    .bv-header__menu { flex: 1 0 auto; gap: 12px; }
    .bv-nav { gap: 14px; }
}

@media (min-width: 961px) and (max-width: 1199px) {
    .bv-logo__tagline { display: none; }
}

@media (max-width: 960px) {
    .bv-logo__full { display: none; }
    .bv-logo__short { display: block; }
    .bv-logo__tagline { display: none; }
    /* Single text line here: keep the desktop icon size, centred on that line. */
    .bv-logo { align-items: center; }
    .bv-logo__mark { margin-top: 0; }

    .bv-menu-toggle { display: flex; }

    .bv-header__menu {
        position: fixed;
        top: 64px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 40;
        background: var(--bv-surface);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 20px 16px 32px;
        gap: 16px;
        overflow-y: auto;
        border-top: 1px solid var(--bv-border);
    }

    .bv-header__menu[hidden] { display: none; }

    .bv-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .bv-nav a {
        padding: 12px 8px;
        border-bottom: 1px solid var(--bv-border);
    }

    .bv-header__search input { width: 100%; flex: 1; }
}