:is(#hero,#lc-site-header) .hero-nav {
    position: fixed;
    inset: clamp(10px, 1.74vw, 25px) 0 auto 0;
    z-index: 60;
  }
  :is(#hero,#lc-site-header) .hero-nav__bar {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    min-height: 65px;
    padding: 10px 14px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(var(--blur-glass));
    -webkit-backdrop-filter: blur(var(--blur-glass));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
    transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  :is(#hero,#lc-site-header) .hero-nav.is-stuck .hero-nav__bar {
    background: rgba(8, 13, 24, .78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 12px 34px rgba(0, 0, 0, .45);
  }

  :is(#hero,#lc-site-header) .hero-brand { display: inline-flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }
  :is(#hero,#lc-site-header) .hero-brand img { width: 48px; height: 33px; }
  :is(#hero,#lc-site-header) .hero-brand__word {
    font-size: 1.0625rem;
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
  }
  @media (min-width: 1100px) { :is(#hero,#lc-site-header) .hero-brand__word { display: none; } }

  :is(#hero,#lc-site-header) .hero-nav__links {
    display: none;
    margin-inline: auto;
    align-items: center;
    gap: 36px;
  }
  /* Figma has no hover/pressed/current art for the nav — it is a single static
     frame — so the states below are the house convention, not a transcription:
     colour for hover, a gradient rule for "you are here". The rule matters for
     more than looks. `.is-active` alone is a COLOUR-ONLY distinction (WCAG
     1.4.1), and because it repaints the text with background-clip it also
     out-specifies the hover colour, so before this the current link had no
     hover feedback at all. The underline gives both: a non-colour current
     marker, and a hover response that still reads on the active item. */
  :is(#hero,#lc-site-header) .hero-nav__links a {
    position: relative;
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    line-height: var(--lh-ui);
    color: var(--text);
    /* 12px, not 6 — makes the row a 44px pointer target inside the 65px bar
       without touching the 36px horizontal rhythm Figma sets. */
    padding-block: 12px;
    transition: color var(--dur) var(--ease);
  }
  :is(#hero,#lc-site-header) .hero-nav__links a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 7px;
    height: 2px;
    border-radius: 2px;
    background: var(--vos-grad);
    opacity: 0;
    transform: scaleX(.4);
    transform-origin: left center;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  :is(#hero,#lc-site-header) .hero-nav__links a:hover,
  :is(#hero,#lc-site-header) .hero-nav__links a:focus-visible { color: var(--vos-blue); }
  :is(#hero,#lc-site-header) .hero-nav__links a:hover::after,
  :is(#hero,#lc-site-header) .hero-nav__links a:focus-visible::after { opacity: .6; transform: scaleX(1); }
  /* Pressed: the rule goes solid mint and the label drops a hair. Distinct
     from hover, and not an opacity tweak. */
  :is(#hero,#lc-site-header) .hero-nav__links a:active { color: var(--vos-mint); }
  :is(#hero,#lc-site-header) .hero-nav__links a:active::after { opacity: 1; transform: scaleX(1) translateY(1px); }
  :is(#hero,#lc-site-header) .hero-nav__links a.is-active {
    background: var(--vos-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  :is(#hero,#lc-site-header) .hero-nav__links a.is-active::after { opacity: 1; transform: scaleX(1); }
  /* background-clip:text + transparent colour renders as nothing once the UA
     drops backgrounds. Put the label back in a system colour. */
  @media (forced-colors: active) {
    :is(#hero,#lc-site-header) .hero-nav__links a.is-active {
      color: LinkText;
      -webkit-text-fill-color: LinkText;
      background: none;
    }
    :is(#hero,#lc-site-header) .hero-nav__links a::after { background: LinkText; }
  }
  /* 174px was the measured width of the old "Meet Our Team" label, so the
     min-width held the button at its natural size and never actually did
     anything. "Book a clarity call" measures 192px, so the floor is now dead
     weight that would only bind if the label got SHORTER. Kept, lowered to a
     real floor: it stops a future short label (say "Book") from collapsing
     into a stub next to Client Login. */
  :is(#hero,#lc-site-header) .hero-nav__cta { display: none; min-width: 140px; }

  /* Client Login — plain text, and that is the point.

     It already sat in the right SLOT: convention across every SaaS header is
     login immediately left of the primary CTA, because the rightmost position
     is the loudest and belongs to the action you want from a NEW visitor.
     Login is a utility for people who already bought; they will hunt for it.

     What was wrong was its WEIGHT. It carried a gold liquid-glass outline —
     a gradient border, a gold tint and a bloom — so the bar held two
     decorated buttons side by side and neither won. Stripped back to a bare
     label: no border, no fill, no glow, just muted text that brightens on
     hover. "Meet Our Team" is now the only button in the bar, which is what
     makes it read as the thing to press.

     Worth knowing: it is the only link in the nav that leaves the site
     (app.vaultedos.com) and it carries no outbound indicator. Left as-is —
     "Client Login" is unambiguous about where it goes — but flagged. */
  :is(#hero,#lc-site-header) .hero-nav__login {
    display: none;
    align-items: center;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1;
    white-space: nowrap;
    /* --text-muted, not --text-dim. Measured on the composited pixels of the
       rendered bar (render twice, text visible then transparent, diff to
       isolate the glyphs): --text-dim lands at 4.21:1 against the nav's own
       surface, which is under the 4.5 AA needs for normal-size text. This is
       a real navigation link, not decoration, so it has to clear the bar.
       --text-muted is the next step up and the quietest token that does. */
    color: var(--text-muted);
    transition: color var(--dur) var(--ease);
  }
  :is(#hero,#lc-site-header) .hero-nav__login:hover,
  :is(#hero,#lc-site-header) .hero-nav__login:focus-visible { color: var(--text-strong); }
  
  /* The gold glass edge. This USED to be shared with the nav's Client Login;
     that one is plain text now (see above), so only the mobile-menu login
     still wears it — a full-screen menu is a different context, and a
     bordered target reads fine there where it does not have to share a bar
     with the primary CTA. Gradient border via the same padded-mask technique
     as .vos-card--edge. */
  :is(#hero,#lc-site-header) .hero-menu__login::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
                rgba(255, 224, 130, .60) 0%,
                rgba(255, 195, 0, .10) 30%,
                rgba(255, 195, 0, .08) 64%,
                rgba(255, 195, 0, .42) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
  :is(#hero,#lc-site-header) .hero-menu__login:hover::before,
  :is(#hero,#lc-site-header) .hero-menu__login:focus-visible::before {
    background: linear-gradient(135deg,
                rgba(255, 224, 130, .85) 0%,
                rgba(255, 195, 0, .22) 30%,
                rgba(255, 195, 0, .18) 64%,
                rgba(255, 195, 0, .60) 100%);
  }

  @media (min-width: 1100px) {
    :is(#hero,#lc-site-header) .hero-nav__links { display: flex; }
    :is(#hero,#lc-site-header) .hero-nav__login { display: inline-flex; }
    :is(#hero,#lc-site-header) .hero-nav__cta { display: inline-flex; }
  }

  /* ---- mobile menu ------------------------------------------------------ */
  :is(#hero,#lc-site-header) .hero-burger {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--stroke);
    border-radius: var(--r-sm);
    background: var(--bg-panel);
    color: var(--text);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
  }
  /* Was a control with no hover, no pressed and no open state — only the
     invisible aria-expanded told you anything had happened. */
  :is(#hero,#lc-site-header) .hero-burger:hover { border-color: var(--stroke-strong); background: var(--bg-panel-2); }
  :is(#hero,#lc-site-header) .hero-burger:active { border-color: var(--vos-blue); background: rgba(80, 161, 249, .18); }
  :is(#hero,#lc-site-header) .hero-burger[aria-expanded="true"] {
    border-color: var(--vos-blue);
    background: rgba(80, 161, 249, .12);
    color: var(--vos-blue);
  }
  @media (min-width: 1100px) { :is(#hero,#lc-site-header) .hero-burger { display: none; } }
  :is(#hero,#lc-site-header) .hero-burger svg { width: 20px; height: 20px; }
  /* Bars ⇄ cross, so the open state is legible without reading ARIA. */
  :is(#hero,#lc-site-header) .hero-burger .hero-burger__close,
  :is(#hero,#lc-site-header) .hero-burger[aria-expanded="true"] .hero-burger__open { display: none; }
  :is(#hero,#lc-site-header) .hero-burger[aria-expanded="true"] .hero-burger__close { display: block; }

  :is(#hero,#lc-site-header) .hero-menu {
    margin-top: var(--sp-2);
    padding: var(--sp-4);
    border-radius: var(--r-md);
    border: 1px solid var(--stroke);
    background: rgba(8, 13, 24, .92);
    backdrop-filter: blur(var(--blur-glass));
    -webkit-backdrop-filter: blur(var(--blur-glass));
    box-shadow: var(--shadow-card);
  }
  :is(#hero,#lc-site-header) .hero-menu[hidden] { display: none; }
  /* Belt-and-braces: the burger is display:none from 900up, so an open panel
     must never survive the breakpoint even if the JS resize sync misses. */
  @media (min-width: 1100px) { :is(#hero,#lc-site-header) .hero-menu { display: none; } }
  :is(#hero,#lc-site-header) .hero-menu ul { display: grid; gap: var(--sp-1); }
  :is(#hero,#lc-site-header) .hero-menu a:not(.vos-btn) {
    display: block;
    position: relative;
    padding: var(--sp-3) var(--sp-2);
    font-size: var(--fs-body);
    border-radius: var(--r-sm);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  :is(#hero,#lc-site-header) .hero-menu a:not(.vos-btn):hover { background: var(--bg-panel-2); }
  :is(#hero,#lc-site-header) .hero-menu a:not(.vos-btn):active { background: rgba(80, 161, 249, .18); color: var(--vos-blue); }
  /* The shared scroll-spy sets .is-active on EVERY nav anchor, including the
     ones in this panel — which had no rule for it, so the mobile menu silently
     never showed where you were. Bar + tint, so it is not colour-only. */
  :is(#hero,#lc-site-header) .hero-menu a:not(.vos-btn).is-active {
    color: var(--vos-blue);
    background: rgba(80, 161, 249, .10);
  }
  :is(#hero,#lc-site-header) .hero-menu a:not(.vos-btn).is-active::before {
    content: '';
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 2px;
    border-radius: 2px;
    background: var(--vos-grad);
  }
  :is(#hero,#lc-site-header) .hero-menu .vos-btn { width: 100%; margin-top: var(--sp-3); }

  /* Mobile-menu Client Login — matching (not identical) gold glass edge on
     .vos-btn geometry: same corner-lit gold hairline (shared ::before above),
     same faint gold tint, still visibly secondary to the primary above it. */
  :is(#hero,#lc-site-header) .hero-menu__login {
    color: var(--text-strong);
    background: rgba(255, 195, 0, .04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  }
  :is(#hero,#lc-site-header) .hero-menu__login:hover,
  :is(#hero,#lc-site-header) .hero-menu__login:focus-visible {
    color: var(--text);
    background: rgba(255, 195, 0, .09);
  }
  :is(#hero,#lc-site-header) .hero-menu__login:active {
    color: var(--vos-gold);
    background: rgba(255, 195, 0, .14);
  }


/* Shared full-width navigation glass; its inner container sets content alignment. */
:is(#hero,#lc-site-header) .hero-nav{inset:0 0 auto;padding-top:env(safe-area-inset-top,0px);background:rgba(8,13,24,.86);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid #a6c7d51c}
:is(#hero,#lc-site-header) .hero-nav__bar,:is(#hero,#lc-site-header) .hero-nav.is-stuck .hero-nav__bar{border-radius:0;background:transparent;box-shadow:none;padding-inline:0;backdrop-filter:none;-webkit-backdrop-filter:none}
:is(#hero,#lc-site-header) .hero-menu{margin-top:0;padding:16px 0 24px;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;max-height:calc(100dvh - 65px - env(safe-area-inset-top,0px));overflow-y:auto}
:is(#hero,#lc-site-header) .hero-nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;background:radial-gradient(180px 2px at var(--nav-light-x,48px) 50%,var(--vos-blue),#8be3cacc 35%,transparent 100%);opacity:.9}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){:is(#hero,#lc-site-header) .hero-nav::after{--nav-light-x:48px!important}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){:is(#hero,#lc-site-header) .hero-nav{background:#080d18;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(forced-colors:active){:is(#hero,#lc-site-header) .hero-nav::after{display:none}}

:is(#hero,#lc-site-header) .hero-nav:has(.hero-menu:not([hidden])){background:rgba(8,13,24,.97)}

/* Gold lettering, with one quiet light pass when the link becomes visible. */
:is(#hero,#lc-site-header) .college-nav-link .college-nav-label{color:#e8ce8c;font-weight:500;white-space:nowrap}
@supports (-webkit-background-clip:text) or (background-clip:text){
:is(#hero,#lc-site-header) .college-nav-label{background:linear-gradient(110deg,#d8b765 0%,#e8ce8c 40%,#fff3cf 49%,#e8ce8c 58%,#d8b765 100%);background-size:240% 100%;background-position:100% 0;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:college-gold-intro 1800ms ease 500ms 1 both}
:is(#hero,#lc-site-header) .college-nav-link:hover .college-nav-label,:is(#hero,#lc-site-header) .college-nav-link:focus-visible .college-nav-label{animation:college-gold-hover 1400ms ease 1 both}
}
@keyframes college-gold-intro{from{background-position:100% 0}to{background-position:0% 0}}
@keyframes college-gold-hover{from{background-position:100% 0}to{background-position:0% 0}}
@media(prefers-reduced-motion:reduce){:is(#hero,#lc-site-header) .college-nav-label,:is(#hero,#lc-site-header) .college-nav-link:hover .college-nav-label,:is(#hero,#lc-site-header) .college-nav-link:focus-visible .college-nav-label{animation:none;background:none;-webkit-text-fill-color:currentColor}}
@media(forced-colors:active){:is(#hero,#lc-site-header) .college-nav-link .college-nav-label{color:LinkText;background:none;-webkit-text-fill-color:LinkText;animation:none}}

:is(#hero,#lc-site-header) .hero-nav__links{gap:24px}

/* Keep page-specific editorial styles out of the shared navigation. */
:is(#hero,#lc-site-header) .hero-nav ul{padding:0;list-style:none}
:is(#hero,#lc-site-header) .hero-nav li{margin:0;padding:0;font-size:1rem;line-height:1.6;color:#fff}
:is(#hero,#lc-site-header) .hero-nav a{text-decoration:none}
:is(#hero,#lc-site-header) .hero-brand{color:#fff}