@import url("nav-premium.css");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: clip;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--dark-bg);
    color: var(--light-text);
    line-height: 1.6;
    overflow-x: clip;
}

:root {
    --primary-gold: #b3a17d;
    --secondary-gold: #E2CFB5;
    --dark-bg: #080B0F;
    --darker-bg: #050810;
    --light-text: #FFFFFF;
    --gray-text: #A0A0A0;
    --field-bg: rgba(26, 31, 46, 0.7);
    --success-green: #2a571f;
    --danger-red: #FF3B3B;
}

nav {
    /* Small gap so the menu reads as part of the bar, not a free-floating box. */
    --nav-dropdown-drop: 0.28rem;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
    max-width: 1060px;
    z-index: 1000;
    /* Matches premium bar compact height (Think Bank-approved 64px). */
    height: 64px;
    display: flex;
    align-items: center;
    border-radius: 60px;
    box-sizing: border-box;
    overflow: visible;
}

.nav-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.logo,
.logo-nav {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1100;
}

.logo img,
.logo-nav img,
.nav-brand img,
.nav-logo {
    width: 40px;
    height: 40px;
    max-height: 40px;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: drop-shadow(0 2px 6px rgba(201, 176, 55, 0.2));
}

.logo img:hover,
.logo-nav img:hover,
.nav-brand img:hover,
.nav-logo:hover {
    transform: scale(1.05);
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav-links a {
    color: var(--light-text);
    text-decoration: none;
    font-weight: 500;
    position: relative;
    transition: color 0.3s ease;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--primary-gold);
    transition: width 0.35s ease;
}

.nav-links a:hover {
    color: var(--primary-gold);
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-links .nav-auth-chip::after,
.nav-links .login-btn::after,
.nav-links .logout-btn::after {
    display: none;
}

.nav-dashboard-link {
    color: var(--primary-gold) !important;
    font-weight: 600;
}

/* Auth chip styles live in nav-premium.css (.nav-auth-chip) */

.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
    position: relative;
    z-index: 1100;
}

.hamburger-menu .bar {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--primary-gold);
    border-radius: 2px;
    transition: transform 0.35s ease, opacity 0.35s ease;
    transform-origin: center;
}

@media screen and (max-width: 768px) {


    nav {
        top: 8px;
        left: 0.5rem;
        right: 0.5rem;
        width: auto;
        transform: none;
        padding: 0.4rem 1rem;
        border-radius: 50px;
    }


    nav.menu-open {
        border-color: transparent;
        box-shadow: none;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }


    .hamburger-menu {
        display: flex;
    }


    .nav-container {
        position: relative;
    }

    .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }


    .nav-links {
        position: fixed;
        inset: 0;
        min-width: 0;
        min-height: 0;
        width: auto;
        height: auto;
        background: #050810;
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding:
            calc(6rem + env(safe-area-inset-top, 0px))
            calc(2.5rem + env(safe-area-inset-right, 0px))
            calc(3rem + env(safe-area-inset-bottom, 0px))
            calc(2.5rem + env(safe-area-inset-left, 0px));
        gap: 0;
        list-style: none;
        z-index: 1060;
        overflow-x: clip;
        overflow-y: auto;
        overscroll-behavior: contain;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.4s ease, visibility 0s linear 0.4s;
    }

    /* inherit, not visible — see the note in nav-premium.css. An explicit
       `visible` here would let an open mobile drawer paint through the
       member-page auth gate. */
    .nav-links.active {
        opacity: 1;
        visibility: inherit;
        pointer-events: all;
        transition: opacity 0.4s ease, visibility 0s linear 0s;
    }


    .nav-links > li {
        width: 100%;
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 0.45s ease, transform 0.45s ease;
    }

    .nav-links.active > li:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.04s; }
    .nav-links.active > li:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.09s; }
    .nav-links.active > li:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.14s; }
    .nav-links.active > li:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.19s; }
    .nav-links.active > li:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.24s; }
    .nav-links.active > li:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.29s; }
    .nav-links.active > li:nth-child(7) { opacity: 1; transform: none; transition-delay: 0.34s; }
    .nav-links.active > li:nth-child(8) { opacity: 1; transform: none; transition-delay: 0.39s; }
    .nav-links.active > li:nth-child(9) { opacity: 1; transform: none; transition-delay: 0.44s; }
    .nav-links.active > li:nth-child(10) { opacity: 1; transform: none; transition-delay: 0.49s; }
    .nav-links.active > li:nth-child(11) { opacity: 1; transform: none; transition-delay: 0.54s; }
    .nav-links.active > li:nth-child(12) { opacity: 1; transform: none; transition-delay: 0.59s; }


    .nav-links > li > a {
        display: block;
        font-size: clamp(1.05rem, 4.5vw, 1.3rem);
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: var(--light-text);
        padding: 0.45rem 0;
        border: none;
        line-height: 1.2;
        transition: color 0.25s ease;
    }

    .nav-links > li > a:hover,
    .nav-links > li > a:active {
        color: var(--primary-gold);
    }


    .nav-links > li > a::after {
        display: none;
    }


    /* Auth CTA is pinned to the foot of the drawer rather than sitting in the
       link stack, so the nav items stay optically centred and the action lives
       where the thumb is. Absolute, so it takes no part in the centring. */
    .nav-links > li:has(.nav-auth-chip),
    .nav-links > li:has(.login-btn),
    .nav-links > li:has(.logout-btn) {
        position: absolute;
        left: calc(2.5rem + env(safe-area-inset-left, 0px));
        right: calc(2.5rem + env(safe-area-inset-right, 0px));
        bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
        width: auto;
        margin-top: 0;
        /* The li spans the drawer gutters, so centring its inline-flex chip
           centres the button in the panel. */
        text-align: center;
    }

    /* Wordmark only in the drawer — the key reads as chrome at this size. */
    .nav-links > li .nav-auth-chip i,
    .nav-links > li .login-btn i,
    .nav-links > li .logout-btn i {
        display: none;
    }

    .nav-links > li:last-child .nav-auth-chip,
    .nav-links > li:last-child .login-btn,
    .nav-links > li:last-child .logout-btn {
        display: inline-block;
        width: auto;
        padding: 0.8rem 2.4rem;
        border-radius: 50px;
        font-size: 0.95rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }


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

    .hamburger-menu.is-open .bar:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

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

@media screen and (max-width: 600px) {
    .nav-container {
        padding: 0 1rem;
    }

    .logo img,
    .logo-nav img,
    .nav-brand img,
    .nav-logo {
        width: 40px;
        height: 40px;
    }
}

@media screen and (max-width: 375px) {
    .nav-container {
        padding: 0 0.5rem;
    }
}

footer {
    padding: 2rem 1rem;
    margin-top: 2rem;
    border-top: 1px solid rgba(201, 176, 55, 0.1);
    color: var(--gray-text);
    font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   PUBLIC FOOTER  (footer-component.js, any page without
   data-footer-scope="member"). Member pages keep the .footer-shell bar.
   ═══════════════════════════════════════════════════════════════════════ */

/* CLS guard: the footer is injected at runtime (footer-component.js replaces
   #footer-placeholder). Reserve the rendered height so the swap never shifts
   the page bottom. Values are measured after the public footer CTA removal;
   keep them in step with the .bcs-footer breakpoints below. */
#footer-placeholder {
    display: block;
    min-height: 780px;
}

#footer-placeholder[data-footer-scope="member"] {
    min-height: 120px;
}

@media screen and (max-width: 960px) {
    #footer-placeholder { min-height: 930px; }
    #footer-placeholder[data-footer-scope="member"] { min-height: 150px; }
}

@media screen and (max-width: 620px) {
    #footer-placeholder { min-height: clamp(1080px, calc(1892px - 192vw), 1280px); }
    #footer-placeholder[data-footer-scope="member"] { min-height: 180px; }
}

.bcs-footer {
    --ff-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    --ff-rule: rgba(255, 255, 255, 0.08);
    --ff-dim: rgba(160, 160, 160, 0.8);
    --ff-gutter: clamp(1.25rem, 3vw, 2.5rem);
    position: relative;
    padding: 0;
    /* The band carries its own surface, so it butts against the last section.
       A margin here exposes the body background as a seam (index.html hit
       exactly that with the old footer). */
    margin-top: 0;
    border-top: 1px solid rgba(179, 161, 125, 0.16);
    background: var(--darker-bg);
    color: var(--gray-text);
    font-size: 0.85rem;
    /* Clip so the bottom floral is half-visible only */
    overflow-x: clip;
    overflow-y: clip;
}

/* Full bleed: the footer is the page's closing band, so its rows run the
   viewport width with only a gutter. The legal prose stays capped so it does
   not run to a single long line. */
.bcs-footer .ff-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0;
    padding: clamp(3rem, 6vw, 4.75rem) var(--ff-gutter) clamp(1.5rem, 3vw, 2rem);
    text-align: left;
}

/* Wrapped Flower 2 — horizontal vine along the footer bottom edge.
   translateY(50%) parks half the art below the footer so it reads cut off. */
.bcs-footer .ff-floral {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 0;
    width: min(1400px, 160%);
    transform: translate(-50%, 48%);
    pointer-events: none;
    user-select: none;
}
.bcs-footer .ff-floral img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    opacity: 0.21;
}
@media (max-width: 720px) {
    /* Phone: park only ~25% of the vine below the edge instead of half, so the
       bloom reads whole rather than sliced, and drop the empty strip under the
       copyright line so no dark band sits between the art and the page end. */
    .bcs-footer .ff-floral {
        width: min(1400px, 200%);
        transform: translate(-50%, 25%);
    }
    .bcs-footer .ff-floral img {
        opacity: 0.16;
    }
    .bcs-footer .ff-inner {
        padding-bottom: 0.5rem;
    }
}

/* Wrapped Flower 2 — the footer's vine mirrored to the top of a page, so the
   page opens and closes on the same bloom. Same geometry as .ff-floral above,
   flipped on Y, with translateY(-48%) parking half the art above the page edge.
   Width matches the footer vine (native 1400px, min 160% of host).
   Host element must be position: relative, and the content that sits over it
   needs position: relative + z-index: 1. Desktop only — below the 1080px
   breakpoint it crowds the nav pill and the page heading. */
.bcs-top-floral {
    position: absolute;
    left: 50%;
    /* Hangs from the PAGE's top edge, never the host's. Hosts that clear the
       fixed nav with their own margin-top (.sp-hero, briefings main) set
       --bcs-top-floral-offset to the negative of that margin so the vine lands
       in the same place on every page. Without it, a nav-offset host pushes the
       art down by its margin and shows more of the bloom than the others. */
    top: var(--bcs-top-floral-offset, 0px);
    z-index: 0;
    /* Same width rule as .bcs-footer .ff-floral / .tr-top-floral so the top
       and bottom vines read as one continuous brand mark. */
    width: min(1400px, 160%);
    transform: translate(-50%, -48%) scaleY(-1);
    pointer-events: none;
    user-select: none;
}
.bcs-top-floral img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    opacity: 0.21;
}
/* Hosts that force every child to position:relative must not re-anchor the vine. */
:is(.bd-hero, .login-wrapper, .faq-page-wrap, .contact-page-wrap, .legal-layout) > .bcs-top-floral {
    position: absolute;
    z-index: 0;
}
@media (max-width: 1080px) {
    .bcs-top-floral { display: none; }
}

.bcs-footer .ff-eyebrow {
    display: block;
    font-family: var(--ff-mono);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: rgba(179, 161, 125, 0.72);
}

/* ── Link columns ── */

.bcs-footer .ff-cols {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2rem 1.5rem;
    padding: clamp(2.25rem, 4vw, 3rem) 0;
    border-top: 1px solid var(--ff-rule);
}

.bcs-footer .ff-col ul {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}

.bcs-footer .ff-col li + li {
    margin-top: 0.5rem;
}

.bcs-footer .ff-col a {
    display: inline-block;
    font-size: 0.82rem;
    line-height: 1.4;
    color: rgba(214, 216, 222, 0.82);
    text-decoration: none;
    transition: color 0.2s ease;
}

.bcs-footer .ff-col a:hover {
    color: var(--light-text);
}

/* ── Follow row ── */

.bcs-footer .ff-follow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 1.75rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--ff-rule);
}

.bcs-footer .ff-follow .ff-eyebrow {
    flex: 0 0 auto;
}

.bcs-footer .ff-social-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.bcs-footer .ff-social {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: rgba(214, 216, 222, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.bcs-footer .ff-social svg {
    width: 0.95rem;
    height: 0.95rem;
    display: block;
    flex: 0 0 auto;
}

.bcs-footer .ff-social span {
    font-family: var(--ff-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bcs-footer .ff-social:hover {
    color: var(--secondary-gold);
}

/* Support channels sit in the follow row but read as their own group. */
.bcs-footer .ff-support {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding-left: 1.75rem;
    border-left: 1px solid var(--ff-rule);
}

@media (max-width: 700px) {
    .bcs-footer .ff-support {
        padding-left: 0;
        border-left: none;
    }
}

.bcs-footer .ff-trust {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-left: auto;
}

.bcs-footer .ff-trust-link {
    font-family: var(--ff-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(160, 160, 160, 0.72);
    text-decoration: none;
    transition: color 0.2s ease;
}

.bcs-footer .ff-trust-link:hover {
    color: var(--secondary-gold);
}

.bcs-footer .ff-badge {
    display: inline-flex;
    align-items: center;
    opacity: 0.55;
    transition: opacity 0.25s ease;
}

.bcs-footer .ff-badge:hover {
    opacity: 1;
}

.bcs-footer .ff-badge img {
    display: block;
    max-width: min(156px, 100%);
    height: auto;
}

/* ── Wordmark + back to top ── */

.bcs-footer .ff-mark {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(0.75rem, 2vw, 1.25rem);
    overflow-x: clip;
}

.bcs-footer .ff-mark-text {
    flex: 1 1 auto;
    display: block;
    /* Sized to span the row minus both gutters and the back-to-top control
       (46px + 16px gap + scrollbar slack). The divisor is the measured
       cap-height advance ratio of the wordmark, padded so a wider glyph set
       (Segoe UI on Windows) leaves a gap instead of clipping. */
    font-size: clamp(1rem, calc((100vw - 2 * var(--ff-gutter) - 78px) / 9.1), 22rem);
    font-weight: 800;
    line-height: 0.86;
    letter-spacing: -0.045em;
    white-space: nowrap;
    color: rgba(226, 207, 181, 0.12);
    user-select: none;
}

.bcs-footer .ff-totop {
    flex: 0 0 auto;
    width: 2.85rem;
    height: 2.85rem;
    margin-bottom: 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(179, 161, 125, 0.28);
    background: none;
    color: rgba(226, 207, 181, 0.85);
    cursor: pointer;
    transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.bcs-footer .ff-totop svg {
    width: 1.05rem;
    height: 1.05rem;
}

.bcs-footer .ff-totop:hover {
    border-color: rgba(179, 161, 125, 0.65);
    color: var(--light-text);
    transform: translateY(-2px);
}

/* ── Legal ── */

.bcs-footer .ff-legal {
    padding-top: 1.25rem;
    border-top: 1px solid var(--ff-rule);
}

.bcs-footer .ff-legal p {
    margin: 0;
    max-width: 78ch;
    font-size: 0.7rem;
    line-height: 1.7;
    color: rgba(160, 160, 160, 0.62);
}

.bcs-footer .ff-legal p a {
    color: rgba(179, 161, 125, 0.85);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bcs-footer .ff-legal p a:hover {
    color: var(--secondary-gold);
}

.bcs-footer .ff-base {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 1.35rem;
    font-family: var(--ff-mono);
    font-size: 0.6rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(160, 160, 160, 0.55);
}

.bcs-footer .ff-base a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.bcs-footer .ff-base a:hover {
    color: var(--secondary-gold);
}

@media screen and (max-width: 960px) {
    .bcs-footer .ff-cols {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 620px) {
    .bcs-footer .ff-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.75rem 1.25rem;
    }

    .bcs-footer .ff-follow {
        align-items: flex-start;
        gap: 0.9rem;
    }

    .bcs-footer .ff-trust {
        margin-left: 0;
        flex-wrap: wrap;
        gap: 0.75rem 1rem;
    }

    .bcs-footer .ff-mark {
        align-items: center;
    }

    .bcs-footer .ff-totop {
        width: 2.4rem;
        height: 2.4rem;
        margin-bottom: 0;
    }

    .bcs-footer .ff-base {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bcs-footer .ff-totop {
        transition: none;
    }

    .bcs-footer .ff-totop:hover {
        transform: none;
    }
}

.footer-shell {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    text-align: left;
}

.footer-shell .footer-copy {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    line-height: 1.6;
}

.footer-shell .footer-copy a {
    color: var(--primary-gold);
    text-decoration: none;
}

.footer-shell .footer-copy a:hover {
    color: var(--secondary-gold);
    text-decoration: underline;
}

.footer-separator {
    color: rgba(255, 255, 255, 0.22);
}

.footer-shell .footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer-shell .footer-social {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    position: static;
    right: auto;
    top: auto;
    transform: none;
    margin-top: 0;
}

.footer-shell .footer-social a {
    color: var(--primary-gold);
    font-size: 1.35rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    position: static;
    overflow: visible;
    border-radius: 0;
    background: none;
    border: none;
    box-shadow: none;
    transition: color 0.3s, transform 0.3s;
}

.footer-shell .footer-social a:hover {
    color: var(--secondary-gold);
    transform: translateY(-1px);
    box-shadow: none;
}

.footer-shell .footer-social svg,
.footer-shell .footer-trust svg {
    width: 1em;
    height: 1em;
    display: block;
}

.footer-shell .footer-trust {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding-left: 1rem;
    border-left: 1px solid rgba(201, 176, 55, 0.16);
}

.footer-shell .footer-trust-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(201, 176, 55, 0.16);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(216, 196, 154, 0.88);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    transition: border-color 0.3s, background 0.3s, color 0.3s, transform 0.3s;
}

.footer-shell .footer-trust-link:hover {
    color: var(--light-text);
    border-color: rgba(201, 176, 55, 0.3);
    background: rgba(201, 176, 55, 0.07);
    transform: translateY(-1px);
}

.footer-shell .footer-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.95rem;
    height: 0.95rem;
    color: var(--primary-gold);
}

.footer-shell .footer-trustpilot-icon {
    color: var(--primary-gold);
}

.footer-shell .footer-badge {
    display: flex;
    align-items: center;
}

.footer-shell .footer-badge a {
    display: inline-flex;
    align-items: center;
    opacity: 0.9;
    transition: opacity 0.3s, transform 0.3s;
}

.footer-shell .footer-badge a:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.footer-shell .footer-badge img {
    display: block;
    max-width: min(156px, 100%);
    height: auto;
}

@media screen and (max-width: 900px) {
    .footer-shell {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        text-align: center;
    }

    .footer-shell .footer-copy,
    .footer-shell .footer-actions,
    .footer-shell .footer-trust {
        justify-content: center;
    }

    .footer-shell .footer-trust {
        padding-left: 0;
        border-left: none;
    }
}

@media screen and (max-width: 560px) {
    .footer-shell .footer-actions {
        flex-direction: column;
        gap: 0.85rem;
    }

    .footer-shell .footer-trust {
        flex-wrap: wrap;
    }
}

.nav-stocks-dropdown,
.nav-about-dropdown,
.nav-admin-dropdown {
    display: none;
}

.nav-sub-panel {
    display: none;
}

@media screen and (min-width: 769px) {
    .nav-stocks-item,
    .nav-about-item,
    .nav-admin-item {
        position: relative;
    }


    .nav-stocks-mobile-li,
    .nav-about-mobile-li,
    .nav-admin-mobile-li {
        display: none;
    }

    .nav-stocks-mobile-btn {
        display: none;
    }

    .nav-stocks-trigger,
    .nav-about-trigger,
    .nav-admin-trigger {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        cursor: pointer;
    }

    .stocks-caret {
        font-size: 0.6rem;
        opacity: 0.7;
        transition: transform 0.25s ease;
    }

    .magnetic-dropdown.is-open .stocks-caret {
        transform: rotate(180deg);
    }

    .nav-stocks-dropdown,
    .nav-about-dropdown,
    .nav-admin-dropdown {
        position: absolute;
        top: calc(100% + var(--nav-dropdown-drop, 0));
        left: 0;
        transform: none;
        min-width: max-content;
        margin: 0;
        padding: 0.2rem 0 0;
        list-style: none;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        z-index: 3000;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
        pointer-events: none;
    }

    /* Invisible bridge filling only the drop gap — must not overlap the trigger */
    .nav-stocks-dropdown::before,
    .nav-about-dropdown::before,
    .nav-admin-dropdown::before {
        content: '';
        position: absolute;
        top: calc(-1 * var(--nav-dropdown-drop, 0px));
        left: -8px;
        right: -8px;
        height: var(--nav-dropdown-drop, 0px);
    }

    .magnetic-dropdown.is-open .magnetic-dropdown__menu,
    .magnetic-dropdown.is-open .nav-stocks-dropdown,
    .magnetic-dropdown.is-open .nav-about-dropdown,
    .magnetic-dropdown.is-open .nav-admin-dropdown,
    .magnetic-dropdown.is-closing .magnetic-dropdown__menu,
    .magnetic-dropdown.is-closing .nav-stocks-dropdown,
    .magnetic-dropdown.is-closing .nav-about-dropdown,
    .magnetic-dropdown.is-closing .nav-admin-dropdown {
        display: flex;
    }

    .magnetic-dropdown.is-open:not(.is-closing) .magnetic-dropdown__menu,
    .magnetic-dropdown.is-open:not(.is-closing) .nav-stocks-dropdown,
    .magnetic-dropdown.is-open:not(.is-closing) .nav-about-dropdown,
    .magnetic-dropdown.is-open:not(.is-closing) .nav-admin-dropdown {
        pointer-events: auto;
    }

    .magnetic-dropdown.is-closing .magnetic-dropdown__menu,
    .magnetic-dropdown.is-closing .nav-stocks-dropdown,
    .magnetic-dropdown.is-closing .nav-about-dropdown,
    .magnetic-dropdown.is-closing .nav-admin-dropdown {
        pointer-events: none;
    }

    .magnetic-dropdown__link,
    .nav-stocks-dropdown li a,
    .nav-about-dropdown li a,
    .nav-admin-dropdown li a {
        display: inline-block;
        padding: 0.42rem 0.2rem;
        color: var(--light-text);
        text-transform: none;
        font-size: 0.9rem;
        font-weight: 500;
        letter-spacing: 0.05em;
        text-decoration: none;
        white-space: nowrap;
        background: transparent;
        transform: translate3d(0, 0, 0) scale(1);
        transition:
            color 0.3s ease,
            transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
            text-shadow 0.3s ease,
            filter 0.28s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform, filter;
        outline: none;
    }

    .nav-stocks-dropdown li a::after,
    .nav-about-dropdown li a::after,
    .nav-admin-dropdown li a::after {
        display: none;
    }

    .magnetic-dropdown__link:hover,
    .magnetic-dropdown__link:focus-visible,
    .magnetic-dropdown__link.is-magnetic,
    .nav-stocks-dropdown li a:hover,
    .nav-stocks-dropdown li a:focus-visible,
    .nav-about-dropdown li a:hover,
    .nav-about-dropdown li a:focus-visible,
    .nav-admin-dropdown li a:hover,
    .nav-admin-dropdown li a:focus-visible {
        background: transparent;
        color: var(--primary-gold);
        text-shadow: 0 0 14px rgba(179, 161, 125, 0.42);
    }

    .magnetic-dropdown__link:focus-visible,
    .nav-stocks-dropdown li a:focus-visible,
    .nav-about-dropdown li a:focus-visible,
    .nav-admin-dropdown li a:focus-visible {
        outline: 1px solid rgba(179, 161, 125, 0.55);
        outline-offset: 3px;
    }

    .magnetic-dropdown__link.is-magnetic,
    .nav-stocks-dropdown li a.is-magnetic,
    .nav-about-dropdown li a.is-magnetic,
    .nav-admin-dropdown li a.is-magnetic {
        filter:
            drop-shadow(
                var(--magnetic-shadow-x, 0px)
                var(--magnetic-shadow-y, 6px)
                6px
                rgba(0, 0, 0, 0.52)
            )
            drop-shadow(0 2px 10px rgba(179, 161, 125, 0.32));
    }

    /* Nav dropdowns hang from the trigger and unfurl downward as one surface. */
    .nav-stocks-dropdown.magnetic-dropdown--deck,
    .nav-about-dropdown.magnetic-dropdown--deck,
    .nav-admin-dropdown.magnetic-dropdown--deck {
        position: absolute;
        top: calc(100% + var(--nav-dropdown-drop, 0.28rem));
        left: 0;
        min-width: 8.75rem;
        padding: 0.55rem 0.78rem 0.62rem;
        gap: 0.08rem;
        background: #080b10;
        border: 1px solid rgba(255, 255, 255, 0.13);
        /* Top corners stay tight to the bar; bottom opens into the panel. */
        border-radius: 0 0 12px 12px;
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.04) inset,
            0 14px 30px rgba(0, 0, 0, 0.48);
        clip-path: inset(0 0 100% 0);
        transform-origin: top center;
        will-change: clip-path;
    }

    .magnetic-dropdown--deck {
        --deck-reveal-duration: 0.22s;
        --deck-reveal-step: 0.07s;
        --deck-panel-duration: 0.42s;
        --deck-max: 5;
    }

    .magnetic-dropdown--deck li {
        opacity: 0;
        pointer-events: none;
        transform: translate3d(0, -8px, 0);
    }

    .magnetic-dropdown--deck li:nth-child(1) { --deck-slot: 0; }
    .magnetic-dropdown--deck li:nth-child(2) { --deck-slot: 1; }
    .magnetic-dropdown--deck li:nth-child(3) { --deck-slot: 2; }
    .magnetic-dropdown--deck li:nth-child(4) { --deck-slot: 3; }
    .magnetic-dropdown--deck li:nth-child(5) { --deck-slot: 4; }
    .magnetic-dropdown--deck li:nth-child(6) { --deck-slot: 5; }

    .magnetic-dropdown.is-open:not(.is-closing) .magnetic-dropdown--deck > li {
        pointer-events: auto;
        animation: bcs-deck-reveal var(--deck-reveal-duration) cubic-bezier(0.22, 1, 0.36, 1) both;
        animation-delay: calc(var(--deck-slot) * var(--deck-reveal-step));
    }

    .magnetic-dropdown.is-open:not(.is-closing) .magnetic-dropdown--deck {
        animation: bcs-deck-panel-open var(--deck-panel-duration) cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .magnetic-dropdown.is-closing .magnetic-dropdown--deck > li {
        pointer-events: none;
        animation: bcs-deck-collapse var(--deck-reveal-duration) cubic-bezier(0.4, 0, 0.8, 1) both;
        animation-delay: calc((var(--deck-max) - var(--deck-slot)) * var(--deck-reveal-step));
    }

    .magnetic-dropdown.is-closing .magnetic-dropdown--deck {
        animation: bcs-deck-panel-close var(--deck-panel-duration) cubic-bezier(0.4, 0, 0.8, 1) both;
    }

    /* Clip-path only on the panel — leave transform free for magnetic links. */
    @keyframes bcs-deck-panel-open {
        from { clip-path: inset(0 0 100% 0); }
        to   { clip-path: inset(0 0 0 0); }
    }

    @keyframes bcs-deck-panel-close {
        from { clip-path: inset(0 0 0 0); }
        to   { clip-path: inset(0 0 100% 0); }
    }

    @keyframes bcs-deck-reveal {
        0% {
            opacity: 0;
            transform: translate3d(0, -10px, 0);
        }
        100% {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }

    @keyframes bcs-deck-collapse {
        0% {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
        100% {
            opacity: 0;
            transform: translate3d(0, -10px, 0);
        }
    }

}

@media screen and (max-width: 768px) {

    .nav-stocks-item,
    .nav-about-item,
    .nav-admin-item {
        display: none;
    }

    .nav-about-mobile-li,
    .nav-admin-mobile-li {
        display: list-item;
    }

    .nav-stocks-mobile-btn {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--light-text);
        font-size: clamp(1.05rem, 4.5vw, 1.3rem);
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0.45rem 0;
        font-family: inherit;
    }

    .nav-stocks-mobile-btn span {
        font-size: 1.4rem;
        color: var(--primary-gold);
        line-height: 1;
    }

    .nav-about-mobile-btn,
    .nav-admin-mobile-btn {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--light-text);
        font-size: clamp(1.05rem, 4.5vw, 1.3rem);
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0.45rem 0;
        font-family: inherit;
    }

    .nav-about-mobile-btn span,
    .nav-admin-mobile-btn span {
        font-size: 1.4rem;
        color: var(--primary-gold);
        line-height: 1;
    }


    .nav-links.stocks-open > li,
    .nav-links.active.stocks-open > li,
    .nav-links.about-open > li,
    .nav-links.active.about-open > li,
    .nav-links.admin-open > li,
    .nav-links.active.admin-open > li {
        opacity: 0 !important;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }


    /* The sub-panel is the same drawer one level down, so it uses the drawer's
       own geometry: identical gutters, list optically centred, back control
       pinned above it. */
    .nav-sub-panel {
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: fixed;
        inset: 0;
        z-index: 1070;
        background: rgba(5, 8, 16, 0.97);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        padding:
            calc(6rem + env(safe-area-inset-top, 0px))
            calc(2.5rem + env(safe-area-inset-right, 0px))
            calc(3rem + env(safe-area-inset-bottom, 0px))
            calc(2.5rem + env(safe-area-inset-left, 0px));
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.35s ease, visibility 0s linear 0.35s;
    }

    .nav-sub-panel.active {
        opacity: 1;
        visibility: inherit;
        pointer-events: all;
        transition: opacity 0.35s ease, visibility 0s linear 0s;
    }

    .sub-panel-back {
        position: absolute;
        top: calc(5rem + env(safe-area-inset-top, 0px));
        left: calc(2.5rem + env(safe-area-inset-left, 0px));
        background: none;
        border: none;
        color: var(--primary-gold);
        font-size: 1rem;
        font-family: inherit;
        cursor: pointer;
        margin-bottom: 0;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 0.4rem;
        letter-spacing: 0.03em;
    }

    .sub-panel-list {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
    }

    /* Type matches the top-level rows: weight, case and row padding here, with
       size and tracking owned by the shared rule in nav-premium.css so the two
       levels cannot drift. No rules between rows; the top level has none. */
    .sub-panel-list li a {
        display: flex;
        align-items: center;
        gap: 1rem;
        font-weight: 600;
        text-transform: uppercase;
        line-height: 1.2;
        padding: 0.45rem 0;
        border-bottom: none;
        color: var(--light-text);
        text-decoration: none;
        transition: color 0.2s;
    }

    .sub-panel-list li a:hover {
        color: var(--primary-gold);
    }
}

.sd-ticker {
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
    letter-spacing: inherit;
}

.sd-name {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .magnetic-dropdown__link,
    .nav-stocks-dropdown li a,
    .nav-about-dropdown li a,
    .nav-admin-dropdown li a {
        transition: color 0.2s ease, text-shadow 0.2s ease;
        filter: none;
    }

    .magnetic-dropdown--deck li {
        opacity: 1;
        pointer-events: auto;
        animation: none !important;
        transform: none;
    }

    .magnetic-dropdown.is-open .magnetic-dropdown--deck,
    .magnetic-dropdown.is-closing .magnetic-dropdown--deck {
        clip-path: none;
        animation: none !important;
    }

    .magnetic-dropdown.is-closing .magnetic-dropdown--deck > li {
        animation: none !important;
    }
}

#bcs-pt-iris {
    position: fixed;
    z-index: 99999;
    inset: 0;
    background: #050810;
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
    will-change: opacity;
}

/* Enter: page arrived from an in-site click — start dark, fade out to reveal it.
   Pure CSS (class added by nav-component.js before first paint) so a slow or failed
   page-transitions.js can never trap the page under the overlay. */
#bcs-pt-iris.bcs-pt-entering {
    animation: bcs-pt-fade-out 460ms ease forwards;
}

@keyframes bcs-pt-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    #bcs-pt-iris { display: none !important; }
}

/* Mobile scroll-perf: the sticky nav repaints every scroll frame, so its
   backdrop blur is sampled continuously on the GPU. Backgrounds here are
   92-100% opaque, so the heavy blur is barely visible. Cap it on small
   screens to cut per-frame paint cost without changing the look. Desktop
   values (blur 14px / 24px) are untouched above. */
@media (max-width: 768px) {
    nav {
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    .nav-sub-panel {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}