/*
  Final topbar layer.
  Default: readable dark header over light pages.
  Add body.topbar-on-dark for dark hero pages that need white type at the top.
*/
body:not(.menu-active) .topbar:not(.is-scrolled):not(.menu-open){
  background:rgba(255,255,255,.32);
  border-bottom-color:rgba(22,20,17,.12);
  box-shadow:none;
  color:var(--ink);
  opacity:1;
  pointer-events:auto;
  transform:none;
  backdrop-filter:blur(22px) saturate(1.18);
  -webkit-backdrop-filter:blur(22px) saturate(1.18);
}

.topbar{
  font-size:1rem!important;
}

.topbar .nav,
.topbar .nav a,
.topbar .nav-link,
.topbar .top-cta,
.topbar .mobile-menu-button{
  text-transform:uppercase!important;
  letter-spacing:.12em!important;
}

.topbar .nav,
.topbar .nav a,
.topbar .nav-link{
  font-size:12.5px!important;
}

.topbar .top-cta,
.topbar .mobile-menu-button{
  font-size:12px!important;
}

.nav-item.has-menu.is-open .mega-menu{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translate(-50%,0)!important;
}

@media (min-width:1181px){
  .topbar .nav{
    gap:clamp(8px,1.1vw,16px)!important;
  }
}

body:not(.menu-active) .topbar:not(.is-scrolled):not(.menu-open) .brand img{
  filter:none;
}

body:not(.menu-active) .topbar:not(.is-scrolled):not(.menu-open) .top-cta{
  background:rgba(20,20,18,.88);
  border-color:rgba(20,20,18,.88);
  color:#fff;
}

body:not(.menu-active) .topbar:not(.is-scrolled):not(.menu-open) .mobile-menu-button{
  background:rgba(255,255,255,.42);
  border-color:rgba(22,20,17,.2);
  color:var(--ink);
}

body.topbar-on-dark:not(.menu-active) .topbar:not(.is-scrolled):not(.menu-open){
  border-bottom-color:rgba(255,255,255,.24);
  color:#fff;
}

body.topbar-on-dark:not(.menu-active) .topbar:not(.is-scrolled):not(.menu-open) .brand img{
  filter:brightness(0) invert(1);
}

body.topbar-on-dark:not(.menu-active) .topbar:not(.is-scrolled):not(.menu-open) .mobile-menu-button{
  background:rgba(20,20,18,.18);
  border-color:rgba(255,255,255,.44);
  color:#fff;
}

.topbar.is-scrolled,
.topbar.menu-open{
  background:rgba(255,255,255,.94);
  color:var(--ink);
  border-bottom-color:rgba(22,20,17,.14);
  box-shadow:0 12px 42px rgba(22,20,17,.14);
  opacity:1;
  pointer-events:auto;
  transform:none;
}

.topbar.menu-open{
  background:rgba(255,255,255,.985);
}

.topbar.menu-open .brand img,
.topbar.is-scrolled .brand img{
  filter:none;
}