*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

html{scrollbar-gutter:stable}
body{background:var(--n-950);color:var(--white);font-family:var(--font-body)}
a{color:inherit;text-decoration:none;border-bottom:none}
a:hover{color:var(--white)}

:root{--bar-h:65px}
html{scroll-padding-top:var(--bar-h)}
.top{flex:0 0 auto;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-10);gap:var(--sp-8);position:relative;isolation:isolate}

.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.55);pointer-events:none}
.brand{display:flex;align-items:center;gap:var(--sp-3)}
.brand img{height:40px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:var(--sp-8)}
.nav a{position:relative;font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--n-300);padding:var(--sp-2) 0;transition:color var(--dur-fast) var(--ease-standard)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--white);transition:right var(--dur-base) var(--ease-standard)}
.nav a:hover{color:var(--white)}
.nav a:hover::after{right:0}
.nav a[aria-current]{color:var(--white)}
.nav a[aria-current]::after{right:0}
.nav .cta{color:var(--n-950);background:var(--white);border:1px solid var(--white);border-radius:0;padding:calc(var(--sp-2) - 1px) var(--sp-4);transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.nav .cta::after{display:none}
.nav .cta:hover{background:var(--orange);border-color:var(--orange);color:var(--n-950)}
.nav .cta[aria-current]{background:var(--orange);border-color:var(--orange);color:var(--n-950)}

@media(min-width:821px) and (max-width:980px){.top{padding-left:var(--sp-5);padding-right:var(--sp-5)}}
@media(max-width:820px){

  :root{--bar-h:60px}
  .top{padding:var(--sp-2) var(--sp-4);gap:var(--sp-4)}
  .brand{min-height:44px;min-width:44px;justify-content:flex-start}
  .brand img{height:32px}
  .nav{gap:var(--sp-4)}
  .nav a{font-size:var(--fs-2xs);padding:0;min-height:44px;display:flex;align-items:center}
  .nav a::after{bottom:8px}
  .nav .cta{padding:0 var(--sp-3);justify-content:center}
}
@media(max-width:400px){.nav{gap:var(--sp-3)}.nav .cta{padding:0 var(--sp-2)}}
@media(max-width:360px){.top{gap:var(--sp-2);padding-left:var(--sp-3);padding-right:var(--sp-3)}.nav{gap:var(--sp-2)}}

@media(max-width:304px){.top{gap:var(--sp-1);padding-left:var(--sp-2);padding-right:var(--sp-2)}.nav{gap:var(--sp-1)}.nav .cta{padding:0 var(--sp-1)}}