


.nav{
  position:fixed;inset:0 0 auto;z-index:50;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:rgba(11,10,8,.92);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  transition:background-color .2s cubic-bezier(.2,.7,.2,1),border-color .2s cubic-bezier(.2,.7,.2,1)}
.nav.solid{background:rgba(11,10,8,.92);border-color:rgba(255,255,255,.09)}
.nav-inner{width:min(calc(100% - (2 * var(--pad,clamp(22px,3vw,44px)))),var(--max,1320px));
  height:60px;display:flex;align-items:center;gap:34px;margin-inline:auto}
.brand{display:flex;align-items:center;flex:none}
.brand img{width:112px;height:auto}
.nav-links{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav-links>.nav-flat{position:relative;display:flex;align-items:center;min-height:44px;
  font-size:14px;color:rgba(255,253,249,.72)}

.nav-signin{position:relative;display:inline-flex;align-items:center;min-height:44px;
  margin-left:14px;margin-right:-22px;
  font-size:14px;color:rgba(255,253,249,.72);
  transition:color .15s cubic-bezier(.2,.7,.2,1)}
.nav-signin:hover{color:#fff}

.nav-signin::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;
  background:var(--cognac,#D4754E);transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.nav-signin:hover::after{transform:scaleX(1)}
.nav-signin:focus-visible{outline:2px solid var(--cognac,#D4754E);outline-offset:5px;border-radius:3px}
.nav-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:40px;
  margin-left:4px;padding:0 19px;border:0;border-radius:999px;background:#fffdf9;color:#17130f;
  font-family:var(--display,'Satoshi','Switzer',sans-serif);font-size:14px;font-weight:500;cursor:pointer;
  transition:background-color .12s cubic-bezier(.2,.7,.2,1)}
.nav-cta:hover{background:#fff;transform:none}
.nav-short{display:none}
.menu-button{display:none;flex:0 0 44px;margin-left:auto;width:44px;height:44px;border:0;
  background:transparent;color:#fff;align-items:center;justify-content:center}
.mobile-menu{display:none}


.arrow{display:inline-block;width:18px;height:18px;flex:0 0 18px;font-size:0;line-height:0;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M200 64v104a8 8 0 0 1-16 0V83.31L69.66 197.66a8 8 0 0 1-11.32-11.32L172.69 72H88a8 8 0 0 1 0-16h104a8 8 0 0 1 8 8Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M200 64v104a8 8 0 0 1-16 0V83.31L69.66 197.66a8 8 0 0 1-11.32-11.32L172.69 72H88a8 8 0 0 1 0-16h104a8 8 0 0 1 8 8Z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .34s cubic-bezier(.19,1,.22,1)}
:is(.nav-cta,.primary-cta,.ghost-cta,.ask-primary,.pf-hand-cta):is(:hover,:focus-visible) .arrow,
.host-card .host-go:is(:hover,:focus-visible) .arrow,
.nf-routes>a:is(:hover,:focus-visible) .arrow{transform:translate(3px,-3px)}

.nav-group{position:relative;display:inline-flex}

.nav-trigger{
  display:inline-flex;align-items:center;gap:7px;
  min-height:44px;
  padding:0;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:400;
  color:rgba(255,253,249,.72);
  transition:color .15s cubic-bezier(.2,.7,.2,1)}
.nav-trigger:hover,.nav-group.is-open .nav-trigger{color:#fff}
.nav-trigger[aria-current="page"]{position:relative;color:#fff}
.nav-trigger[aria-current="page"]::after{content:"";position:absolute;right:15px;bottom:-9px;left:0;
  height:1px;background:var(--cognac,#D4754E)}
.nav-trigger:focus-visible{outline:2px solid var(--cognac,#D4754E);outline-offset:5px;border-radius:3px}


.nav-chev{width:7px;height:7px;border-right:1.4px solid currentColor;
  border-bottom:1.4px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);
  opacity:.62;transition:transform .16s cubic-bezier(.2,.7,.2,1)}
.nav-group.is-open .nav-chev{transform:rotate(225deg) translate(-1px,-1px)}

.nav-panel{
  position:absolute;top:calc(100% + 15px);left:-18px;z-index:60;
  min-width:350px;padding:8px;
  
  border-radius:6px;border:1px solid rgba(255,253,249,.13);
  background:#12100d;
  box-shadow:0 20px 50px -18px rgba(0,0,0,.7),0 1px 0 rgba(255,253,249,.05) inset;
  display:grid;gap:4px;
  opacity:0;visibility:hidden;transform:translateY(-5px);
  pointer-events:none;
  transition:opacity .12s cubic-bezier(.2,.7,.2,1),
             transform .12s cubic-bezier(.2,.7,.2,1),
             visibility 0s linear .12s}
.nav-group.is-open .nav-panel{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition-delay:0s,0s,0s}


.nav-panel::before{content:"";position:absolute;left:0;right:0;top:-17px;height:17px}

.nav-panel a{
  display:grid;grid-template-columns:24px minmax(0,1fr);grid-template-rows:auto auto;
  align-content:center;column-gap:13px;min-height:64px;padding:10px 12px;border-radius:5px;
  color:rgba(255,253,249,.92);text-decoration:none;
  transition:background-color .12s cubic-bezier(.2,.7,.2,1),color .12s cubic-bezier(.2,.7,.2,1)}
.nav-panel a::after{content:none}
.nav-ico{grid-column:1;grid-row:1 / span 2;align-self:center;justify-self:center;
  width:20px;height:20px;margin:0;color:rgba(255,253,249,.46);
  transition:color .12s cubic-bezier(.2,.7,.2,1)}
.nav-panel a:hover .nav-ico,.nav-panel a:focus-visible .nav-ico{color:var(--cognac,#D4754E)}
.nav-panel a:hover,.nav-panel a:focus-visible{background:rgba(255,253,249,.085);outline:0}
.nav-panel a[aria-current="page"]{background:rgba(255,253,249,.085);color:#fff}
.nav-panel a[aria-current="page"] .nav-ico{color:var(--cognac,#D4754E)}
.nav-panel a:focus-visible{box-shadow:inset 0 0 0 2px var(--cognac,#D4754E)}
.nav-panel b{grid-column:2;font-weight:500;font-size:14.5px;letter-spacing:-.005em}
.nav-panel span{grid-column:2;font-size:13px;line-height:1.4;color:rgba(255,253,249,.5)}
.nav-flat{color:rgba(255,253,249,.72);transition:color .15s cubic-bezier(.2,.7,.2,1)}
.nav-flat:hover{color:#fff}

.mobile-label{margin:16px 0 2px;font-size:11px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,253,249,.42)}
.mobile-label:first-child{margin-top:0}
.mobile-menu a[aria-current="page"]{padding-left:14px;box-shadow:inset 2px 0 var(--cognac,#D4754E);color:#fff}

@media(max-width:1100px){
  .nav-inner{height:56px;gap:24px}
  .brand{min-height:44px}
  .brand img{width:100px}
  .nav-links{display:none}
  .nav-group,.nav-flat,.nav-signin{display:none}
  .menu-button{display:flex;position:relative}
  .nav-cta{min-height:44px;margin-left:0;padding-inline:15px;font-size:13px}
  .mobile-menu{display:grid;position:fixed;inset:56px 0 auto;z-index:49;
    max-height:calc(100dvh - 56px);overflow-y:auto;overscroll-behavior:contain;
    padding:18px var(--pad,clamp(22px,3vw,44px)) 24px;border-bottom:1px solid rgba(255,255,255,.1);
    background:#0b0a08;opacity:0;visibility:hidden;transform:translateY(-12px);
    transition:opacity .25s,transform .25s,visibility 0s linear .25s}
  .mobile-menu.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .mobile-menu a{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.09);
    color:rgba(255,255,255,.76);font-size:15px}
}
@media(max-width:600px){
  .nav-inner{gap:12px}
  .nav-cta{padding-inline:13px}
  .nav-cta .nav-full{display:none}
  .nav-cta .nav-short{display:inline}
}
@media(prefers-reduced-motion:reduce){
  .nav,.nav-panel,.nav-chev,.mobile-menu,.arrow{transition:none}
}
