:root { --ink: #07101f; --white: #fff; --line: rgba(15,23,42,.14); --max: 1240px; --ease: cubic-bezier(.22,1,.36,1); }
body.menu-open { overflow: hidden; }
.nav .ri { width: 1em; height: 1em; display: inline-block; flex: 0 0 auto; fill: currentColor; }
.nav a:focus-visible, .nav button:focus-visible { outline: 2px solid #4d7cff; outline-offset: 5px; }
    .nav {
      position: fixed;
      z-index: 50;
      inset: 0 0 auto;
      height: 76px;
      color: var(--white);
      background: transparent;
      border-bottom: 1px solid transparent;
      transition: background .3s ease, color .3s ease, border-color .3s ease, height .3s ease;
    }
    .nav.scrolled {
      height: 66px;
      color: var(--ink);
      background: rgba(245, 247, 249, .88);
      border-color: var(--line);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
    }
    .nav-inner {
      width: min(calc(100% - 48px), var(--max));
      height: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
    }
    .brand {
      color: inherit;
      display: inline-flex;
      align-items: center;
      gap: 11px;
      font-size: 16px;
      font-weight: 740;
      letter-spacing: -.02em;
      text-decoration: none;
    }
    .brand-mark {
      width: 31px;
      height: 31px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      color: #fff;
      background: #16243a;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 0;
      box-shadow: 0 4px 14px rgba(0,0,0,.16);
    }
    .brand-mark .ri { width: 18px; height: 18px; }
    .nav.scrolled .brand-mark { color: #fff; border-color: rgba(15,23,42,.12); }
    .nav-links { display: flex; align-items: center; gap: 30px; }
    .nav-links > a:not(.nav-cta) {
      position: relative;
      color: currentColor;
      font-size: 13px;
      font-weight: 560;
      text-decoration: none;
      opacity: .78;
      transition: opacity .2s ease;
    }
    .nav-links > a:not(.nav-cta):hover,
    .nav-links > a:not(.nav-cta):focus-visible { opacity: 1; }
    .nav-cta {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 40px;
      padding: 0 16px;
      color: var(--ink);
      background: var(--white);
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 0;
      font-size: 12px;
      font-weight: 720;
      text-decoration: none;
      transition: transform .2s var(--ease), background .2s ease;
    }
    .nav.scrolled .nav-cta { color: var(--white); background: var(--ink); border-color: var(--ink); }
    .nav-cta:hover { transform: translateY(-2px); }
    .menu-button {
      display: none;
      width: 42px;
      height: 42px;
      padding: 0;
      color: currentColor;
      background: transparent;
      border: 0;
      cursor: pointer;
    }
    .menu-button .ri { width: 24px; height: 24px; }
    .menu-button .close-icon { display: none; }
    .menu-open .menu-button .menu-icon { display: none; }
    .menu-open .menu-button .close-icon { display: inline-block; }


@media (max-width: 820px) {
  /* Keep the fixed menu relative to the viewport during its closing transition. */
  .nav.scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(245,247,249,.98); }
  .nav-inner { width: min(calc(100% - 32px), var(--max)); }
      .nav-inner > .brand, .menu-button { position: relative; z-index: 2; }
      .menu-button { display: block; }
      .nav-links {
        position: fixed;
        inset: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 28px;
        padding: 90px 30px;
        color: var(--white);
        background: rgba(7,16,31,.98);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .25s ease, visibility .25s ease;
      }
      .menu-open .nav {
        color: var(--white);
        border-color: rgba(255,255,255,.1);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }
      .menu-open .nav-links { opacity: 1; visibility: visible; pointer-events: auto; }
      .nav-links > a:not(.nav-cta) { font-size: 30px; opacity: 1; letter-spacing: -.04em; }
      .nav.scrolled .nav-links { color: var(--white); }
      .nav.scrolled .nav-links .nav-cta { color: var(--ink); background: var(--white); }
}
@media (prefers-reduced-motion: reduce) { .nav, .nav *, .nav *::before { transition: none !important; } }