/* Premium navigation v4 — editorial luxury, light palette, desktop + mobile */
:root{
  --pn-ink:#171714;
  --pn-muted:#716f68;
  --pn-line:#e4e1d8;
  --pn-soft:#f7f4ec;
  --pn-soft-2:#fbfaf6;
  --pn-gold:#a58d60;
  --pn-gold-soft:#d8c9aa;
  --pn-white:rgba(255,255,253,.94);
  --pn-shadow:0 26px 70px rgba(31,28,21,.11),0 4px 16px rgba(31,28,21,.035);
}

/* top utility strip */
.wox-top{
  background:#f3f0e8!important;
  color:#4b4944!important;
  border-bottom:1px solid rgba(165,141,96,.16)!important;
}
.wox-top .container{padding:7px 0!important;min-height:30px;align-items:center}
.wox-top span{
  color:#55524c!important;
  border-right:1px solid #d9d4c8!important;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important;
  font-size:9.5px!important;
  font-weight:600!important;
  letter-spacing:.095em!important;
  text-transform:uppercase!important;
}

/* glassy sticky shell */
.wox-site-header{
  background:var(--pn-white)!important;
  border-bottom:1px solid rgba(202,197,184,.72)!important;
  box-shadow:0 2px 0 rgba(255,255,255,.7),0 8px 30px rgba(33,30,24,.025)!important;
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  backdrop-filter:blur(18px) saturate(145%);
  transition:box-shadow .28s ease,background .28s ease;
}
.wox-site-header.is-scrolled{
  background:rgba(255,255,253,.975)!important;
  box-shadow:0 10px 35px rgba(32,29,22,.065)!important;
}
.wox-header-row{
  height:86px!important;
  gap:22px!important;
  transition:height .28s cubic-bezier(.22,.61,.36,1);
}
.wox-site-header.is-scrolled .wox-header-row{height:76px!important}

/* brand lockup */
.wox-header-row>.logo{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important;
  font-size:20px!important;
  font-weight:700!important;
  line-height:.96!important;
  letter-spacing:-.035em!important;
  color:var(--pn-ink)!important;
  padding-right:22px;
  margin-right:4px!important;
  position:relative;
}
.wox-header-row>.logo:after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  width:1px;
  height:30px;
  background:linear-gradient(to bottom,transparent,var(--pn-line),transparent);
  transform:translateY(-50%);
}
.wox-header-row>.logo small{
  margin-top:6px!important;
  color:#807d75!important;
  font-size:7.5px!important;
  font-weight:600!important;
  letter-spacing:.145em!important;
}

/* desktop menu typography */
.mega-nav{gap:0!important}
.mega-nav .mega-trigger,.mega-nav>.nav-direct{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important;
  font-size:12.75px!important;
  font-weight:500!important;
  letter-spacing:.018em!important;
  color:#24221e!important;
  padding:0 15px!important;
  transition:color .18s ease,opacity .18s ease,transform .18s ease!important;
}
.mega-nav .mega-trigger:hover,.mega-nav>.nav-direct:hover,.mega-item.desktop-open>.mega-trigger,.mega-nav .nav-current{
  color:#090909!important;
  transform:translateY(-1px);
}

/* elegant active / hover line */
.mega-nav .mega-trigger:after,.mega-nav>.nav-direct:after{
  left:15px!important;
  right:15px!important;
  bottom:22px!important;
  height:1px!important;
  background:linear-gradient(90deg,var(--pn-gold),#d8c9aa)!important;
  transform-origin:center!important;
}
.wox-site-header.is-scrolled .mega-nav .mega-trigger:after,
.wox-site-header.is-scrolled .mega-nav>.nav-direct:after{bottom:18px!important}

/* replace text glyph with a crisp CSS chevron */
.mega-nav .mega-trigger span{
  display:inline-block!important;
  width:7px!important;
  height:7px!important;
  margin-left:8px!important;
  font-size:0!important;
  color:transparent!important;
  border-right:1.25px solid #807b70!important;
  border-bottom:1.25px solid #807b70!important;
  transform:rotate(45deg) translateY(-1px)!important;
  transform-origin:center!important;
  transition:transform .22s ease,border-color .18s ease!important;
}
.mega-item:hover>.mega-trigger span,.mega-item:focus-within>.mega-trigger span,.mega-item.desktop-open>.mega-trigger span{
  transform:rotate(225deg) translate(-1px,-1px)!important;
  border-color:var(--pn-gold)!important;
}

/* refined direct actions */
.mega-nav>.nav-direct[href="order-sample.html"],
.mega-nav>.nav-direct[href="tech-pack-support.html"]{
  color:#4b4841!important;
}
.mega-nav>.nav-direct[href="contact.html"]{
  margin-left:10px!important;
  height:42px!important;
  padding:0 18px!important;
  border:1px solid #c9bea8!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#fffefb,#f7f2e8)!important;
  box-shadow:inset 0 1px 0 #fff,0 5px 16px rgba(78,65,42,.06)!important;
  color:#26231e!important;
  font-weight:600!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}
.mega-nav>.nav-direct[href="contact.html"]:after{display:none!important}
.mega-nav>.nav-direct[href="contact.html"]:hover{
  background:#fffdfa!important;
  color:#171512!important;
  border-color:var(--pn-gold)!important;
  transform:translateY(-2px)!important;
  box-shadow:inset 0 1px 0 #fff,0 9px 24px rgba(78,65,42,.10)!important;
}

/* desktop floating mega menu */
@media(min-width:1081px){
  .mega-item{position:static!important}
  .mega-panel{
    display:block!important;
    left:50%!important;
    right:auto!important;
    top:100%!important;
    width:min(calc(100vw - 48px),1180px)!important;
    padding:0!important;
    background:linear-gradient(180deg,rgba(255,255,253,.99),rgba(250,248,242,.99))!important;
    border:1px solid rgba(205,198,183,.82)!important;
    border-radius:18px!important;
    box-shadow:var(--pn-shadow)!important;
    overflow:hidden!important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate(-50%,10px)!important;
    transition:opacity .2s ease,transform .24s cubic-bezier(.22,.61,.36,1),visibility .2s ease!important;
  }
  .mega-panel:before{
    content:"";
    position:absolute;
    left:0;right:0;top:0;height:2px;
    background:linear-gradient(90deg,transparent,var(--pn-gold-soft) 28%,var(--pn-gold) 50%,var(--pn-gold-soft) 72%,transparent);
  }
  .mega-item:hover>.mega-panel,.mega-item:focus-within>.mega-panel,.mega-item.desktop-open>.mega-panel{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(-50%,0)!important;
  }
  .mega-grid{
    width:100%!important;
    margin:0!important;
    padding:34px 36px 36px!important;
    grid-template-columns:.9fr 1.15fr 1.08fr!important;
    gap:0!important;
  }
  .mega-col{
    padding:4px 32px!important;
    border-right:1px solid var(--pn-line)!important;
  }
  .mega-col:first-child{padding-left:6px!important}
  .mega-label{
    margin-bottom:13px!important;
    font-size:9.25px!important;
    font-weight:650!important;
    letter-spacing:.18em!important;
    color:#8a8478!important;
  }
  .mega-col a{
    min-height:42px!important;
    padding:8px 26px 8px 0!important;
    font-size:13.5px!important;
    font-weight:450!important;
    letter-spacing:.005em!important;
    color:#3a3731!important;
  }
  .mega-col a:before{
    content:"";
    width:0;height:1px;
    background:var(--pn-gold);
    margin-right:0;
    transition:width .16s ease,margin-right .16s ease;
  }
  .mega-col a:hover:before,.mega-col a:focus-visible:before{width:13px;margin-right:8px}
  .mega-col a:hover,.mega-col a:focus-visible{
    color:#11100e!important;
    padding-left:0!important;
  }
  .mega-col a:after{color:#a79a80!important;right:4px!important}
  .mega-col .mega-strong{
    min-height:44px!important;
    font-size:15.5px!important;
    font-weight:650!important;
    color:#1d1b17!important;
  }
  .mega-feature,.mega-feature.dark,.mega-feature.print{
    margin-left:34px!important;
    min-height:188px!important;
    padding:30px 30px 28px!important;
    border:1px solid rgba(194,183,160,.52)!important;
    border-radius:14px!important;
    background:
      radial-gradient(circle at 90% 8%,rgba(218,205,178,.42),transparent 34%),
      linear-gradient(145deg,#f5f1e8,#fcfbf7)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important;
    overflow:hidden;
  }
  .mega-feature:before{
    left:30px!important;top:29px!important;width:34px!important;
    background:var(--pn-gold)!important;
  }
  .mega-feature:after{
    right:25px!important;top:20px!important;
    color:#7e735f!important;
    font-size:17px!important;
  }
  .mega-feature:hover,.mega-feature:focus-visible{
    background:
      radial-gradient(circle at 90% 8%,rgba(218,205,178,.58),transparent 35%),
      linear-gradient(145deg,#f8f4eb,#fffefb)!important;
    border-color:#b9aa8c!important;
    box-shadow:0 10px 30px rgba(80,66,42,.07)!important;
  }
  .mega-feature span{
    font-size:9px!important;
    font-weight:650!important;
    letter-spacing:.17em!important;
    color:#8a806f!important;
  }
  .mega-feature strong{
    margin:10px 0 8px!important;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important;
    font-size:24px!important;
    line-height:1.06!important;
    font-weight:590!important;
    letter-spacing:-.035em!important;
    color:#1f1c18!important;
  }
  .mega-feature small{
    font-size:12.25px!important;
    line-height:1.55!important;
    color:#716b61!important;
  }
}

/* intermediate desktop: preserve elegance without crowding */
@media(min-width:1081px) and (max-width:1320px){
  .wox-header-row{gap:10px!important}
  .wox-header-row>.logo{font-size:18.5px!important;padding-right:14px!important}
  .wox-header-row>.logo small{font-size:6.8px!important;letter-spacing:.11em!important}
  .mega-nav .mega-trigger,.mega-nav>.nav-direct{font-size:11.7px!important;padding-left:9px!important;padding-right:9px!important}
  .mega-nav .mega-trigger:after,.mega-nav>.nav-direct:after{left:9px!important;right:9px!important}
  .mega-nav>.nav-direct[href="contact.html"]{padding-left:13px!important;padding-right:13px!important;margin-left:5px!important}
}

/* mobile / tablet: keep the current off-canvas behavior but make it feel premium */
@media(max-width:1080px){
  .wox-site-header{background:rgba(255,255,253,.975)!important}
  .wox-header-row,.wox-site-header.is-scrolled .wox-header-row{height:70px!important}
  .wox-header-row>.logo{font-size:18.5px!important;padding-right:0!important}
  .wox-header-row>.logo:after{display:none!important}
  .wox-header-row>.logo small{font-size:6.8px!important;margin-top:5px!important}
  .menu-toggle{
    width:46px!important;height:46px!important;
    border:1px solid #e2ddd2!important;
    border-radius:50%!important;
    background:#fffdf8!important;
    box-shadow:0 5px 15px rgba(62,53,38,.05)!important;
  }
  .menu-toggle:before,.menu-toggle:after,.menu-toggle .menu-mid{width:20px!important;height:1.5px!important;background:#29261f!important}
  .menu-toggle:before{transform:translateY(-5px)!important}
  .menu-toggle:after{transform:translateY(5px)!important}
  body.nav-menu-open .menu-toggle:before{transform:rotate(45deg)!important}
  body.nav-menu-open .menu-toggle:after{transform:rotate(-45deg)!important}

  .nav-backdrop{background:rgba(24,22,18,.24)!important;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  .mega-nav{
    width:min(91vw,410px)!important;
    padding:92px 24px 32px!important;
    background:linear-gradient(180deg,#fffefb,#faf7f0)!important;
    border-left:1px solid #e3ded3!important;
    box-shadow:-24px 0 70px rgba(35,31,24,.14)!important;
  }
  .mega-nav>.nav-drawer-title{
    
    left:25px!important;top:34px!important;
    font-size:9px!important;
    font-weight:650!important;
    letter-spacing:.21em!important;
    color:#938b7d!important;
  }
  .mega-nav:after{
    content:"";
    position:absolute;left:24px;right:24px;top:58px;height:1px;
    background:linear-gradient(90deg,var(--pn-gold),transparent 72%);
    opacity:.65;
  }
  .mega-nav>.mega-item,.mega-nav>.nav-direct{border-bottom:1px solid #e8e3d9!important}
  .mega-nav .mega-trigger,.mega-nav>.nav-direct{
    min-height:62px!important;
    font-size:15.25px!important;
    font-weight:550!important;
    letter-spacing:.008em!important;
    color:#24211c!important;
    transform:none!important;
  }
  .mega-nav .mega-trigger span{
    width:8px!important;height:8px!important;margin-right:5px!important;
    border-right:1.2px solid #918675!important;
    border-bottom:1.2px solid #918675!important;
  }
  .mega-item.mobile-open>.mega-trigger{color:#171512!important}
  .mega-item.mobile-open>.mega-trigger span{border-color:var(--pn-gold)!important;transform:rotate(225deg) translate(-1px,-1px)!important}

  .mega-panel{
    position:static!important;
    width:auto!important;
    margin:0 0 14px!important;
    padding:7px 0 14px!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow:visible!important;
    transform:none!important;
  }
  .mega-grid{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:0!important;padding:0!important}
  .mega-col{padding:0 0 6px 15px!important;border:0!important;border-left:1px solid #ded6c6!important;margin:2px 0 7px 6px!important}
  .mega-label{font-size:8.5px!important;letter-spacing:.18em!important;color:#999083!important;margin:9px 0 7px!important}
  .mega-col a,.mega-col .mega-strong{
    min-height:43px!important;
    padding:8px 10px 8px 17px!important;
    font-size:13.5px!important;
    font-weight:450!important;
    color:#4a463f!important;
  }
  .mega-col .mega-strong{font-weight:600!important;color:#24211d!important}
  .mega-col a:after{display:none!important}
  .mega-feature,.mega-feature.dark,.mega-feature.print{display:none!important}

  .mega-nav>.nav-direct[href="order-sample.html"],
  .mega-nav>.nav-direct[href="tech-pack-support.html"]{
    color:#514c43!important;
  }
  .mega-nav>.nav-direct[href="contact.html"]{
    margin:18px 0 0!important;
    min-height:50px!important;
    height:50px!important;
    display:flex!important;
    justify-content:center!important;
    border:1px solid #c4b28e!important;
    border-radius:999px!important;
    background:linear-gradient(180deg,#fffefb,#f4eee2)!important;
    box-shadow:0 7px 18px rgba(72,60,38,.07)!important;
    font-weight:600!important;
  }
}

@media(max-width:680px){
  .wox-header-row>.logo{font-size:17.5px!important}
  .mega-nav{width:min(94vw,390px)!important;padding-left:22px!important;padding-right:22px!important}
  .mega-nav .mega-trigger,.mega-nav>.nav-direct{font-size:15px!important;min-height:60px!important}
}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  .wox-header-row,.mega-panel,.mega-nav .mega-trigger,.mega-nav>.nav-direct,.menu-toggle:before,.menu-toggle:after{transition:none!important}
}

/* factory-blog-nav-fit */
@media(min-width:1081px) and (max-width:1480px){
  .mega-nav .mega-trigger,.mega-nav>.nav-direct{padding-left:10px!important;padding-right:10px!important;font-size:11.9px!important}
  .wox-header-row{gap:12px!important}
  .wox-header-row>.logo{padding-right:16px!important;margin-right:0!important}
}