/* Responsive navigation v3 — minimal desktop + dedicated mobile drawer */
:root{--nav-ink:#151515;--nav-muted:#6f6f6f;--nav-line:#e8e8e5;--nav-soft:#f7f7f4;--nav-white:#fff}

.wox-top{background:#f6f5f1!important;color:#343434!important;border-bottom:1px solid #ecebe6;position:relative;z-index:80}
.wox-top .container{padding:8px 0}
.wox-top span{border-right:1px solid #dddcd7!important;font-weight:700;color:#444!important}

.wox-site-header{overflow:visible!important;background:#fff!important;border-bottom:1px solid var(--nav-line)!important;box-shadow:none!important;position:sticky;top:0;z-index:90}
.wox-header-row{height:78px;gap:24px;position:relative}
.logo{font-size:21px;line-height:1.02;color:var(--nav-ink)!important;letter-spacing:-.035em;position:relative;z-index:1001}
.logo small{font-size:8px;line-height:1.2;margin-top:4px;color:#777!important;letter-spacing:.14em}

/* DESKTOP — quiet, editorial navigation */
.mega-nav{align-self:stretch;gap:2px;justify-content:flex-end;min-width:0;margin-left:auto}
.mega-nav>.mega-item,.mega-nav>.nav-direct{height:100%;display:flex;align-items:center;position:relative}
.mega-nav .mega-trigger,.mega-nav>.nav-direct{
  height:100%;min-height:0;padding:0 13px!important;display:flex;align-items:center;justify-content:center;
  color:var(--nav-ink)!important;font-size:12.5px!important;font-weight:700!important;line-height:1!important;
  text-transform:none!important;letter-spacing:.005em!important;white-space:nowrap;border:0!important;border-radius:0!important;background:transparent!important;
  position:relative;transition:color .16s ease,background .16s ease;
}
.mega-nav .mega-trigger:after,.mega-nav>.nav-direct:after{
  content:"";position:absolute;left:13px;right:13px;bottom:19px;height:1.5px;background:var(--nav-ink);transform:scaleX(0);transform-origin:left;transition:transform .18s ease
}
.mega-nav .mega-trigger:hover:after,.mega-nav>.nav-direct:hover:after,.mega-nav .nav-current:after,.mega-item.desktop-open>.mega-trigger:after{transform:scaleX(1)}
.mega-nav .mega-trigger:hover,.mega-nav>.nav-direct:hover,.mega-item.desktop-open>.mega-trigger,.mega-nav .nav-current{color:#000!important;opacity:1!important}
.mega-nav .mega-trigger span{font-size:11px;line-height:1;margin-left:7px;color:#777;transition:transform .18s ease}
.mega-item:hover>.mega-trigger span,.mega-item:focus-within>.mega-trigger span,.mega-item.desktop-open>.mega-trigger span{transform:rotate(180deg)}

/* Full-width desktop panel: no cards, no loud colors */
.mega-panel{
  top:100%!important;left:0!important;right:0!important;padding:28px 0 32px!important;background:#fff!important;
  border:0!important;border-top:1px solid var(--nav-line)!important;border-bottom:1px solid var(--nav-line)!important;
  box-shadow:0 14px 28px rgba(0,0,0,.055)!important;
}
.mega-item:hover>.mega-panel,.mega-item:focus-within>.mega-panel,.mega-item.desktop-open>.mega-panel{display:block}
.mega-grid{width:min(calc(100% - 64px),1180px);margin:0 auto;display:grid;grid-template-columns:1fr 1.15fr 1.05fr;gap:0!important;align-items:stretch}
.mega-col{padding:4px 30px!important;background:#fff!important;border:0!important;border-right:1px solid var(--nav-line)!important;border-radius:0!important}
.mega-col:first-child{padding-left:0!important}
.mega-label{font-size:10px!important;line-height:1.2;text-transform:uppercase;letter-spacing:.14em;color:#888!important;font-weight:800!important;margin:0 0 10px!important;padding:0!important;border:0!important}
.mega-col a{position:relative;display:flex!important;align-items:center;min-height:40px;padding:7px 24px 7px 0!important;margin:0!important;border:0!important;border-radius:0!important;color:#242424!important;font-size:13.5px!important;line-height:1.25!important;text-transform:none!important;letter-spacing:0!important;font-weight:600!important;transition:color .15s ease,padding-left .15s ease}
.mega-col a:after{content:"→";position:absolute;right:3px;color:#aaa;opacity:0;transition:opacity .15s ease,transform .15s ease}
.mega-col a:hover,.mega-col a:focus-visible{background:transparent!important;color:#000!important;text-decoration:none!important;opacity:1!important;padding-left:5px!important}
.mega-col a:hover:after,.mega-col a:focus-visible:after{opacity:1;transform:translateX(2px)}
.mega-col .mega-strong{font-size:15px!important;line-height:1.2!important;min-height:42px;font-weight:800!important;background:transparent!important}

.mega-feature,.mega-feature.dark,.mega-feature.print{position:relative;background:#f7f7f4!important;color:#171717!important;min-height:176px;padding:26px 28px!important;margin-left:30px;display:flex!important;height:auto!important;flex-direction:column;justify-content:flex-end;align-items:flex-start!important;text-transform:none!important;letter-spacing:0!important;border:0!important;border-radius:0!important;transition:background .16s ease}
.mega-feature:before{content:"";position:absolute;left:28px;top:27px;width:36px;height:1px;background:#222}
.mega-feature:after{content:"↗";position:absolute;right:24px;top:20px;font-size:18px;color:#555}
.mega-feature:hover,.mega-feature:focus-visible{background:#efefeb!important;transform:none!important;box-shadow:none!important;opacity:1!important}
.mega-feature span{font-size:9.5px!important;color:#777!important;font-weight:800!important;letter-spacing:.13em!important}
.mega-feature strong{font-size:23px!important;line-height:1.08!important;max-width:330px;color:#171717!important;margin:9px 0 7px!important}
.mega-feature small{font-size:12.5px!important;line-height:1.45!important;max-width:330px;color:#676767!important}

/* Direct actions remain simple; no dark/acid block */
.mega-nav>.nav-direct[href="order-sample.html"],.mega-nav>.nav-direct[href="tech-pack-support.html"],.mega-nav>.nav-direct[href="contact.html"]{background:transparent!important;color:var(--nav-ink)!important;border:0!important;margin:0!important;padding-left:13px!important;padding-right:13px!important;font-weight:700!important}
.mega-nav>.nav-direct[href="contact.html"]{margin-left:5px!important;height:40px!important;align-self:center!important;border:1px solid #202020!important;padding:0 16px!important}
.mega-nav>.nav-direct[href="contact.html"]:after{display:none}
.mega-nav>.nav-direct[href="contact.html"]:hover{background:#171717!important;color:#fff!important}
.mega-nav a:focus-visible,.mega-nav .mega-trigger:focus-visible{outline:2px solid #222;outline-offset:3px;opacity:1!important}
.menu-toggle{display:none!important}

@media(min-width:1081px) and (max-width:1320px){
  .container{width:min(calc(100% - 30px),var(--max))}
  .wox-header-row{gap:10px}.logo{font-size:19px}.logo small{font-size:7px}
  .mega-nav .mega-trigger,.mega-nav>.nav-direct{font-size:11.5px!important;padding-left:9px!important;padding-right:9px!important}
  .mega-nav .mega-trigger:after,.mega-nav>.nav-direct:after{left:9px;right:9px}
  .mega-nav>.nav-direct[href="contact.html"]{padding-left:12px!important;padding-right:12px!important}
}

/* MOBILE / TABLET — independent off-canvas drawer */
.nav-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.24);z-index:996;opacity:0;transition:opacity .22s ease}
body.nav-menu-open{overflow:hidden}
body.nav-menu-open .nav-backdrop{display:block;opacity:1}

@media(max-width:1080px){
  .wox-top{display:none!important}
  .wox-site-header{position:sticky!important;top:0!important;z-index:1000!important}
  .wox-header-row{height:68px;gap:12px}
  .logo{font-size:18px}.logo small{font-size:7px;letter-spacing:.11em}
  .menu-toggle{display:flex!important;width:44px;height:44px;align-items:center;justify-content:center;margin-left:auto;border:0!important;background:transparent!important;color:#151515!important;font-size:0!important;cursor:pointer;position:relative;z-index:1002;padding:0!important}
  .menu-toggle:before,.menu-toggle:after,.menu-toggle{--bar:#171717}
  .menu-toggle:before{content:"";position:absolute;width:24px;height:2px;background:var(--bar);transform:translateY(-5px);transition:transform .2s ease}
  .menu-toggle:after{content:"";position:absolute;width:24px;height:2px;background:var(--bar);transform:translateY(5px);transition:transform .2s ease}
  .menu-toggle .menu-mid{position:absolute;width:24px;height:2px;background:var(--bar);transition:opacity .18s ease}
  body.nav-menu-open .menu-toggle:before{transform:rotate(45deg)}
  body.nav-menu-open .menu-toggle:after{transform:rotate(-45deg)}
  body.nav-menu-open .menu-toggle .menu-mid{opacity:0}

  .mega-nav{
    display:flex!important;position:fixed!important;right:0!important;left:auto!important;top:0!important;width:min(88vw,390px)!important;height:100dvh!important;
    background:#fff!important;padding:86px 22px 28px!important;margin:0!important;gap:0!important;flex-direction:column!important;align-items:stretch!important;
    border:0!important;box-shadow:-16px 0 40px rgba(0,0,0,.10)!important;overflow-y:auto!important;overscroll-behavior:contain;
    transform:translateX(104%);visibility:hidden;transition:transform .24s ease,visibility .24s ease;z-index:999!important
  }
  .mega-nav[data-open="1"]{transform:translateX(0);visibility:visible}
  .mega-nav>.nav-drawer-title{position:absolute;left:22px;top:32px;font-size:11px;font-weight:800;letter-spacing:.16em;color:#888}
  .mega-nav>.mega-item,.mega-nav>.nav-direct{height:auto!important;display:block!important;border-bottom:1px solid #ececea!important;margin:0!important}
  .mega-nav .mega-trigger,.mega-nav>.nav-direct{height:auto!important;min-height:58px!important;padding:0!important;justify-content:space-between!important;width:100%;font-size:15px!important;font-weight:750!important;border:0!important;border-radius:0!important;background:#fff!important;color:#181818!important;text-align:left!important}
  .mega-nav .mega-trigger:after,.mega-nav>.nav-direct:after{display:none!important}
  .mega-nav .mega-trigger span{width:30px;height:30px;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;border:0!important;background:#f3f3f0!important;border-radius:50%;font-size:13px;color:#555;transition:transform .2s ease}
  .mega-item.mobile-open>.mega-trigger span{transform:rotate(180deg)}

  .mega-panel{position:static!important;display:none!important;box-shadow:none!important;border:0!important;background:#fff!important;padding:0 0 14px!important;margin:0!important}
  .mega-item.mobile-open>.mega-panel{display:block!important}
  .mega-item:hover>.mega-panel{display:none!important}.mega-item.mobile-open:hover>.mega-panel{display:block!important}
  .mega-grid{width:100%!important;margin:0!important;display:block!important}
  .mega-col{padding:5px 0 8px!important;background:#fff!important;border:0!important;border-top:1px solid #f1f1ef!important;border-radius:0!important}
  .mega-col+.mega-col{margin-top:5px}
  .mega-label{font-size:9px!important;color:#999!important;padding:14px 0 6px!important;margin:0!important;letter-spacing:.14em!important;border:0!important}
  .mega-col a{min-height:48px!important;padding:9px 34px 9px 0!important;margin:0!important;background:#fff!important;border:0!important;font-size:14px!important;font-weight:600!important;color:#262626!important}
  .mega-col a:after{content:"›";opacity:1!important;right:2px;color:#a0a0a0;font-size:19px;transform:none!important}
  .mega-col a:hover,.mega-col a:focus-visible{background:#fff!important;color:#000!important;padding-left:0!important}
  .mega-col .mega-strong{font-size:14px!important;font-weight:750!important;min-height:48px!important}
  .mega-feature,.mega-feature.dark,.mega-feature.print{display:none!important}

  /* High-intent links are visible but compact at the bottom */
  .mega-nav>.nav-direct[href="order-sample.html"],.mega-nav>.nav-direct[href="tech-pack-support.html"]{min-height:56px!important;font-size:14px!important;font-weight:650!important;color:#333!important}
  .mega-nav>.nav-direct[href="contact.html"]{height:50px!important;min-height:50px!important;margin:20px 0 0!important;border:1px solid #171717!important;display:flex!important;justify-content:center!important;background:#171717!important;color:#fff!important;font-size:14px!important}
  .mega-nav>.nav-direct[href="contact.html"]:hover{background:#fff!important;color:#171717!important}
}

@media(max-width:520px){
  .container{width:min(calc(100% - 28px),var(--max))}
  .wox-header-row{height:64px}.mega-nav{width:min(92vw,370px)!important;padding:78px 20px 24px!important}.mega-nav>.nav-drawer-title{left:20px;top:28px}
  .mega-nav .mega-trigger,.mega-nav>.nav-direct{min-height:56px!important;font-size:14.5px!important}
}

/* Keep the off-canvas drawer from widening the mobile page while hidden. */
@media(max-width:1080px){
  html{overflow-x:clip}
}