/* ===== VARIABLES - shared with footer ===== */
:root {
    --navy-900: #0F2439;
    --navy-800: #1B3A57;
    --brass:    #B98B3E;
    --brass-dim: rgba(185,139,62,.22);
    --ink-100:  #EDF2F7;
    --ink-300:  #93A9BF;
    --line:     rgba(255,255,255,.10);
}

.header-survey {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    position: sticky;
    top: 0;
    z-index: 999;
    background: var(--navy-900);
}

/* ===== TOP BAR ===== */
.header-top {
    background: var(--navy-800);
    border-bottom: 1px solid var(--line);
}

.logo-img { height: 52px; }
.logo-img-sm { height: 38px; }

.brand-name {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    color: var(--ink-100) !important;
    letter-spacing: -0.01em;
}

.mobile-menu-btn {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink-100);
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ===== MAIN NAV ===== */
.navbar {
    background: var(--navy-900);
}

.nav-link-group {
    display: flex;
    align-items: center;
}

.navbar-nav .nav-link {
    color: var(--ink-100) !important;
    font-weight: 600;
    font-size: 14.5px;
    padding: 10px 14px;
    border-radius: 8px;
    transition: background .2s ease, color .2s ease;
}

.navbar-nav .nav-link:hover {
    background: var(--brass-dim);
    color: var(--brass) !important;
}

.dropdown-toggle-btn {
    background: transparent;
    border: none;
    color: var(--ink-300);
    padding: 6px;
    cursor: pointer;
}

.caret {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-top: -4px;
}

/* ===== DROPDOWN ===== */
.dropdown-menu {
    background: var(--navy-800);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 6px;
}

.dropdown-menu .dropdown-item {
    color: var(--ink-300);
    font-weight: 500;
    font-size: 13.5px;
    padding: 9px 14px;
    border-radius: 6px;
}

.dropdown-menu .dropdown-item:hover {
    background: var(--brass-dim);
    color: var(--brass);
}

/* ===== MOBILE MENU ===== */
.mobile-offcanvas {
    background: var(--navy-900);
}

.offcanvas-header {
    background: var(--navy-800);
    color: var(--ink-100);
    border-bottom: 1px solid var(--line);
}

.mobile-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mobile-card {
    background: var(--navy-800);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}

.mobile-menu a, .mobile-toggle, .mobile-card-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--ink-100);
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.submenu {
    background: rgba(0,0,0,.15);
}

.submenu a {
    padding: 10px 22px;
    display: block;
    font-weight: 500;
    color: var(--ink-300);
}

.arrow {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    color: var(--brass);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.mobile-toggle.is-open .arrow {
    transform: rotate(225deg);
}