.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:40;
  padding:14px 0;
  transition:padding .18s ease;
}

.site-header.is-scrolled{padding:10px 0}

.header-inner{
  min-height:var(--header-h);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  border:1px solid var(--stroke);
  border-radius:24px;
  padding:12px 16px;
  background:rgba(10,10,10,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 42px rgba(0,0,0,.26);
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.brand-logo{
  width:58px;
  height:58px;
  border-radius:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  place-items:center;
  background:linear-gradient(135deg, #6c0808 0%, var(--red-2) 60%, #ff6767 100%);
  box-shadow:0 16px 36px rgba(225,28,28,.28), inset 0 1px 0 rgba(255,255,255,.2);
  font-weight:900;
  text-transform:uppercase;
}

.brand-logo.small{
  width:46px;
  height:46px;
  border-radius:14px;
  font-size:.85rem;
}

.brand-text{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.brand-text small{
  color:#d2d7df;
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
}

.brand-text strong{
  color:#fff;
  font-size:.98rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}

.site-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.site-nav a{
  min-height:42px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  color:#eef1f6;
  font-size:.93rem;
  font-weight:700;
  text-transform:lowercase;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
  border:1px solid transparent;
}

.site-nav a:hover,
.site-nav a.active{
  background:rgba(255,255,255,.05);
  border-color:var(--stroke);
}

.nav-cta{
  min-height:48px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  color:#fff;
  font-size:.94rem;
  font-weight:900;
  text-transform:lowercase;
  background:linear-gradient(135deg, #7b0c0c 0%, var(--red) 50%, var(--red-3) 100%);
  box-shadow:0 14px 34px rgba(185,15,15,.22);
}

.nav-toggle{
  display:none;
  width:50px;
  height:50px;
  border:none;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--stroke);
  padding:0;
  cursor:pointer;
}

.nav-toggle span{
  display:block;
  width:20px;
  height:2px;
  margin:5px auto;
  background:#fff;
  border-radius:999px;
  transition:transform .18s ease, opacity .18s ease;
}

/* brand image override: blackline.jpg */
.brand-logo{
  display:block;
  overflow:hidden;
  padding:0;
  background:
    url("../img/blackline.jpg") center 42% / cover no-repeat !important;
}

.brand-logo span{
  display:none !important;
}

.brand-logo.small{
  background:
    url("../img/blackline.jpg") center 42% / cover no-repeat !important;
}

/* brand wordmark image override */
.brand-text{
  display:flex;
  align-items:center;
  min-width:0;
}

.brand-wordmark{
  display:block;
  width:auto;
  height:56px;
  max-width:100%;
  object-fit:contain;
  image-rendering:auto;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.18));
}

.footer-brand-link .brand-wordmark{
  height:44px;
}

@media (max-width: 640px){
  .brand-wordmark{
    height:44px;
  }

  .footer-brand-link .brand-wordmark{
    height:36px;
  }
}

/* header wordmark balanced final fix */
.site-header{
  padding:8px 0 !important;
}

.site-header.is-scrolled{
  padding:6px 0 !important;
}

.site-header .header-inner{
  min-height:62px !important;
  padding:7px 11px !important;
  border-radius:19px !important;
}

.site-header .brand{
  gap:7px !important;
  align-items:center !important;
}

.site-header .brand-logo{
  width:40px !important;
  height:40px !important;
  border-radius:12px !important;
}

.site-header .brand-text{
  flex:0 1 auto !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
}

.site-header .brand-wordmark{
  display:block !important;
  width:auto !important;
  height:36px !important;
  max-width:200px !important;
  object-fit:contain !important;
  image-rendering:auto !important;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.12)) !important;
}

.site-header .nav-toggle{
  width:40px !important;
  height:40px !important;
  border-radius:12px !important;
}

.site-header .nav-toggle span{
  width:18px !important;
  margin:3px auto !important;
}

.site-footer .brand-text,
.footer-brand-link .brand-text{
  flex:0 1 auto !important;
}

.site-footer .brand-wordmark,
.footer-brand-link .brand-wordmark{
  width:auto !important;
  height:30px !important;
  max-width:135px !important;
}

@media (max-width: 820px){
  .site-header{
    padding:8px 0 !important;
  }

  .site-header .header-inner{
    min-height:60px !important;
    padding:7px 10px !important;
    border-radius:18px !important;
  }

  .site-header .brand-logo{
    width:39px !important;
    height:39px !important;
    border-radius:11px !important;
  }

  .site-header .brand-wordmark{
    height:35px !important;
    max-width:186px !important;
  }

  .site-header .nav-toggle{
    width:39px !important;
    height:39px !important;
    border-radius:11px !important;
  }
}

@media (max-width: 640px){
  .site-header{
    padding:7px 0 !important;
  }

  .site-header .header-inner{
    min-height:58px !important;
    padding:6px 9px !important;
    border-radius:17px !important;
  }

  .site-header .brand{
    gap:6px !important;
  }

  .site-header .brand-logo{
    width:38px !important;
    height:38px !important;
    border-radius:11px !important;
  }

  .site-header .brand-wordmark{
    height:36px !important;
    max-width:190px !important;
  }

  .site-header .nav-toggle{
    width:38px !important;
    height:38px !important;
    border-radius:11px !important;
  }

  .site-header .nav-toggle span{
    width:17px !important;
    margin:3px auto !important;
  }

  .site-footer .brand-wordmark,
  .footer-brand-link .brand-wordmark{
    height:28px !important;
    max-width:125px !important;
  }
}