/* ==========================================================
   YASHWEI V8 GLOBAL HEADER / NAVIGATION SHELL
   Purpose: identical header experience across all pages.
   ========================================================== */

.site-header,
.header{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:0!important;
  width:100%!important;
  z-index:1000!important;
  background:rgba(5,8,10,.90)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

.site-header .container,
.header .container{
  width:min(1280px,calc(100% - 48px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.site-header .header-inner,
.header .header-inner{
  height:82px!important;
  min-height:82px!important;
  display:flex!important;
  align-items:center!important;
  gap:18px!important;
  padding:0!important;
}

.site-header .brand,
.header .brand{
  display:flex!important;
  align-items:center!important;
  flex:0 0 170px!important;
  width:170px!important;
  margin-right:10px!important;
  line-height:1!important;
}

.site-header .brand img,
.header .brand img{
  display:block!important;
  width:168px!important;
  height:45px!important;
  max-width:168px!important;
  object-fit:contain!important;
  object-position:left center!important;
  border-radius:0!important;
}

/* Option 2 image already contains the wordmark.
   Never show legacy HTML wordmark beside it. */
.site-header .brand-text,
.header .brand-text,
.site-header .brand > div,
.header .brand > div,
.site-header .brand > span:not(.nav-item),
.header .brand > span:not(.nav-item){
  display:none!important;
}

.site-header .nav,
.header .nav{
  display:flex!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:15px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  font-size:10.5px!important;
  font-weight:700!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}

.site-header .nav-item,
.header .nav-item{
  position:relative!important;
  display:flex!important;
  align-items:stretch!important;
}

.site-header .nav-item > a,
.header .nav-item > a{
  height:82px!important;
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  padding:0!important;
  color:#f3f5f6!important;
  line-height:1!important;
}

.site-header .nav-item > a:hover,
.header .nav-item > a:hover,
.site-header .nav-item > a.active,
.header .nav-item > a.active{
  color:#ef7415!important;
}

.site-header .nav-item.has-menu > a:after,
.header .nav-item.has-menu > a:after{
  content:"▾"!important;
  font-size:8px!important;
  opacity:.72!important;
  margin-left:2px!important;
}

.site-header .nav-menu,
.header .nav-menu{
  display:none!important;
  position:absolute!important;
  top:82px!important;
  left:0!important;
  min-width:235px!important;
  padding:9px 0!important;
  background:#0c1013!important;
  border:1px solid #2a3035!important;
  box-shadow:0 14px 30px rgba(0,0,0,.42)!important;
  z-index:2000!important;
}

.site-header .nav-item:hover > .nav-menu,
.header .nav-item:hover > .nav-menu,
.site-header .nav-item:focus-within > .nav-menu,
.header .nav-item:focus-within > .nav-menu{
  display:block!important;
}

.site-header .nav-menu a,
.header .nav-menu a{
  display:block!important;
  height:auto!important;
  padding:9px 14px!important;
  color:#d5dadd!important;
  font-size:10px!important;
  font-weight:600!important;
  line-height:1.3!important;
  text-transform:none!important;
  white-space:nowrap!important;
}

.site-header .nav-menu a:hover,
.header .nav-menu a:hover{
  background:#171c20!important;
  color:#ef7415!important;
}

/* Keep whatever CTA wording each page already uses,
   but make the header button visually identical. */
.site-header .header-inner > .btn,
.header .header-inner > .btn{
  min-width:142px!important;
  height:42px!important;
  padding:0 18px!important;
  margin-left:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:1px!important;
  background:#ef7415!important;
  border:1px solid #ef7415!important;
  color:#0b0d0f!important;
  font-size:10px!important;
  font-weight:800!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}

/* Ensure the first visual section consistently sits beneath the same 82px header. */
body{margin:0!important;}

@media(max-width:1180px){
  .site-header .nav,
  .header .nav{gap:11px!important;font-size:9.5px!important;}
  .site-header .brand,
  .header .brand{flex-basis:150px!important;width:150px!important;}
  .site-header .brand img,
  .header .brand img{width:148px!important;max-width:148px!important;}
  .site-header .header-inner > .btn,
  .header .header-inner > .btn{min-width:120px!important;padding:0 12px!important;}
}

@media(max-width:1000px){
  .site-header .nav,
  .header .nav{display:none!important;}
  .site-header .brand,
  .header .brand{flex-basis:145px!important;width:145px!important;}
  .site-header .brand img,
  .header .brand img{width:142px!important;max-width:142px!important;height:40px!important;}
}

@media(max-width:600px){
  .site-header .container,
  .header .container{width:calc(100% - 28px)!important;}
  .site-header .header-inner,
  .header .header-inner{height:72px!important;min-height:72px!important;}
  .site-header .header-inner > .btn,
  .header .header-inner > .btn{display:none!important;}
}