/* ===== Navigation: split layout with centred logo — split layout, centered logo, scroll transitions ===== */

/* ---- bar ---- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:9000;
  padding:20px 0;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .4s ease,border-color .4s ease,padding .35s ease,box-shadow .4s ease;
}
.site-header.scrolled{
  background:rgba(9,22,35,.88);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  padding:9px 0;
  box-shadow:0 8px 30px -12px rgba(0,0,0,.5);
}
body{padding-top:0}

/* ---- split row: left menu | logo | right menu ---- */
.header-inner{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:0;
  height:auto;
}
.nav-left,.nav-right{display:contents}

/* ---- centered logo ---- */
.brand{flex:0 0 auto;position:relative;display:inline-flex;align-items:center;justify-content:center;animation:brand-in 1.2s ease .2s both}
.brand img{height:auto;width:auto;max-height:48px;display:block;transition:max-height .4s ease,transform .3s ease}
.site-header.scrolled .brand img{max-height:38px}
.brand:hover img{transform:scale(1.04)}
@keyframes brand-in{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:none}}

/* ---- links ---- */
.nav-left>a,.nav-right>a,.nav-drop-toggle{
  font-family:var(--font-h);
  font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
  padding:.55rem .85rem;border-radius:100px;white-space:nowrap;
  transition:color .25s ease,background .25s ease;
  display:inline-flex;align-items:center;gap:6px;
}
.nav-left>a:hover,.nav-right>a:hover,.nav-drop:hover>.nav-drop-toggle{color:var(--accent)}
.nav-left>a.is-current{color:var(--ink)}
.nav-left>a.is-current::after{display:none}
.nav-drop-toggle svg{opacity:.7;transition:transform .25s ease}
.nav-drop:hover .nav-drop-toggle svg,.nav-drop.open .nav-drop-toggle svg{transform:rotate(180deg)}

/* ---- CTA pill ---- */
.navcta{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--accent);color:#04121c!important;
  padding:.7rem 1.25rem;border-radius:100px;
  font-family:var(--font-h);font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;transition:background .3s ease,transform .25s ease,box-shadow .3s ease;
  margin-left:6px;
}
.navcta span{transition:transform .25s ease}
.navcta:hover{background:#31ab88;transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(42,151,120,.6)}
.navcta:hover span{transform:translateX(3px)}

/* ---- dropdown wrapper ---- */
.nav-drop{position:relative;display:inline-flex;align-items:center}
.nav-drop::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px;display:none}
.nav-drop:hover::after,.nav-drop.open::after{display:block}

/* ---- dropdown panel ---- */
.nav-menu{
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(10px);
  pointer-events:none;
  min-width:240px;
  background:#0e2334;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 26px 54px -24px rgba(0,0,0,.6);
  padding:8px;display:flex;flex-direction:column;gap:1px;
  opacity:0;visibility:hidden;
  transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s;
  z-index:60;
}
.nav-drop:hover .nav-menu,.nav-drop.open .nav-menu,.nav-drop:focus-within .nav-menu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(4px);
  transition:opacity .25s ease,transform .25s ease,visibility 0s;
}
.nav-menu a{
  display:block;padding:.65rem .9rem;border-radius:9px;
  font-family:var(--font-b);font-size:.84rem;font-weight:500;letter-spacing:.02em;
  text-transform:none;color:var(--muted)!important;white-space:nowrap;
  transition:background .18s ease,color .18s ease;
}
.nav-menu a:hover{background:var(--surface);color:var(--ink)!important}

/* ---- mega menu (Products) ---- */
@media(min-width:1101px){
  .nav-mega-menu{
    min-width:720px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:24px;
    left:0;transform:translateX(0) translateY(10px);
  }
  .nav-drop.nav-mega:hover .nav-mega-menu,.nav-drop.nav-mega.open .nav-mega-menu,.nav-drop.nav-mega:focus-within .nav-mega-menu{transform:translateX(0) translateY(4px)}
  .nav-mega-menu .nav-col{display:flex;flex-direction:column;gap:1px}
  .nav-mega-menu .nav-col-head{
    color:var(--accent)!important;font-family:var(--font-h);font-weight:600;
    font-size:.8rem!important;letter-spacing:.04em;
    padding:8px 12px!important;margin-bottom:4px;
    border-bottom:1px solid var(--line);border-radius:0;
  }
  .nav-mega-menu .nav-col-head:hover{background:transparent;color:var(--ink)!important}
  .nav-mega-menu .nav-col a:not(.nav-col-head){padding:.55rem .8rem;font-size:.82rem}
}
@media(min-width:901px) and (max-width:1100px){
  .nav-left>a,.nav-right>a,.nav-drop-toggle{font-size:.7rem;letter-spacing:.08em;padding:.5rem .55rem}
  .navcta{font-size:.7rem;padding:.6rem .9rem;letter-spacing:.06em}
  .brand img{max-height:42px}
  .nav-mega-menu{min-width:min(620px,calc(100vw - 40px));display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:18px;left:auto;right:0;transform:translateX(0) translateY(10px)}
  .nav-drop.nav-mega:hover .nav-mega-menu,.nav-drop.nav-mega.open .nav-mega-menu{transform:translateX(0) translateY(4px)}
  .nav-mega-menu .nav-col-head{font-size:.74rem!important;color:var(--accent)!important;border-bottom:1px solid var(--line);padding:6px 8px!important}
  .nav-mega-menu .nav-col a:not(.nav-col-head){padding:.45rem .6rem;font-size:.76rem}
}

/* ---- burger ---- */
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:10}
.nav-toggle span{width:26px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}



@media(prefers-reduced-motion:reduce){
  .site-header,.brand,.brand img,.nav-menu,.navcta{transition:none;animation:none}
}

/* fixed-header offset */
/* hero sections already have large top padding and sit under the transparent bar by design */
main{padding-top:0}
/* interior page heroes need clearance so the fixed bar doesn't cover the breadcrumb */
.interior .page-hero{padding-top:clamp(120px,12vw,170px)}
.v2hero{padding-top:clamp(120px,13vw,180px)}
/* anchor offset so in-page jumps aren't hidden behind the bar */
section[id]{scroll-margin-top:90px}
@media(max-width:900px){.interior .page-hero{padding-top:104px}.v2hero{padding-top:110px}section[id]{scroll-margin-top:70px}}

/* mega menu recenter */
@media(min-width:1101px){
  .nav-mega-menu{left:50%;transform:translateX(-50%) translateY(10px);right:auto}
  .nav-drop.nav-mega:hover .nav-mega-menu,.nav-drop.nav-mega.open .nav-mega-menu,.nav-drop.nav-mega:focus-within .nav-mega-menu{transform:translateX(-50%) translateY(4px);pointer-events:auto}
}
@media(min-width:901px) and (max-width:1100px){
  .nav-mega-menu{left:50%;right:auto;transform:translateX(-50%) translateY(10px)}
  .nav-drop.nav-mega:hover .nav-mega-menu,.nav-drop.nav-mega.open .nav-mega-menu{transform:translateX(-50%) translateY(4px)}
}


/* balanced center alignment */
@media(min-width:901px){
  .header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;justify-content:initial}
  .nav-left,.nav-right{display:flex;align-items:center;gap:14px}
  .nav-left{justify-content:flex-end}
  .nav-right{justify-content:flex-start}
  .brand{justify-self:center}
  .navcta{margin-left:auto}
}

/* mega menu recenter */
@media(min-width:1101px){
  .nav-mega-menu{left:50%;transform:translateX(-50%) translateY(10px);right:auto}
  .nav-drop.nav-mega:hover .nav-mega-menu,.nav-drop.nav-mega.open .nav-mega-menu,.nav-drop.nav-mega:focus-within .nav-mega-menu{transform:translateX(-50%) translateY(4px);pointer-events:auto}
}
@media(min-width:901px) and (max-width:1100px){
  .nav-mega-menu{left:50%;right:auto;transform:translateX(-50%) translateY(10px)}
  .nav-drop.nav-mega:hover .nav-mega-menu,.nav-drop.nav-mega.open .nav-mega-menu{transform:translateX(-50%) translateY(4px)}
}






/* ============ Mobile drawer — single .nav-panel ============ */
@media(max-width:900px){
  .site-header{padding:10px 0}
  .header-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;position:relative}
  .brand{order:1;margin:0}
  .nav-toggle{order:2;display:flex;position:relative;z-index:10002}
  .nav-panel{
    position:fixed;left:0;right:0;top:62px;bottom:0;
    display:flex;flex-direction:column;
    background:#0a1926;
    padding:14px 22px 28px;
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    border-top:1px solid var(--line);
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);
    transition:opacity .26s ease,transform .28s ease,visibility 0s linear .28s;
    z-index:10000;
  }
  .site-header.open .nav-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .26s ease,transform .28s ease,visibility 0s}
  .nav-panel .nav-left,.nav-panel .nav-right{
    position:static!important;display:flex;flex-direction:column;align-items:stretch;
    width:100%;max-height:none;overflow:visible;opacity:1;visibility:visible;
    background:transparent;padding:0;margin:0;gap:0;transform:none;
  }
  .nav-left>a,.nav-right>a,.nav-drop-toggle{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;padding:14px 0;margin:0;
    font-family:var(--font-h);font-weight:600;font-size:.9rem;
    letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
    border-radius:0;border-bottom:1px solid rgba(30,58,82,.5);
  }
  .nav-drop{width:100%;display:block;position:static}
  .nav-drop::after{display:none}
  .nav-drop-toggle svg{transition:transform .25s ease;opacity:.75;flex:0 0 auto}
  .nav-drop.open .nav-drop-toggle svg{transform:rotate(180deg)}
  .nav-menu,.nav-mega-menu{
    position:static!important;transform:none!important;visibility:visible!important;pointer-events:auto!important;
    min-width:0;width:100%;background:transparent;border:none;box-shadow:none;
    display:block!important;padding:0;margin:0;
    max-height:0;overflow:hidden;opacity:0;
    transition:max-height .28s ease-out,opacity .18s ease-out,padding .28s ease-out;
  }
  .nav-drop.open .nav-menu,.nav-drop.open .nav-mega-menu{max-height:1400px;opacity:1;padding:4px 0 10px 12px}
  .nav-menu::before{display:none}
  .nav-mega-menu{grid-template-columns:1fr!important;gap:0}
  .nav-mega-menu .nav-col{margin:0 0 4px}
  .nav-mega-menu .nav-col-head{display:block;color:var(--accent)!important;font-size:.7rem!important;letter-spacing:.14em;text-transform:uppercase;padding:9px 0 3px!important;border-bottom:none}
  .nav-menu a,.nav-mega-menu .nav-col a:not(.nav-col-head){display:block;padding:10px 0;font-family:var(--font-b);font-size:.9rem;text-transform:none;letter-spacing:.01em;color:var(--muted)!important;white-space:normal;border-radius:0}
  .navcta{width:100%;justify-content:center;margin:16px 0 0;padding:14px!important;font-size:.8rem!important;border-bottom:none!important}
  body.nav-open{overflow:hidden}
}

/* touch guard — stop desktop hover rules firing on touch devices */
@media(max-width:900px){
  .nav-drop:hover .nav-menu,.nav-drop:hover .nav-mega-menu{opacity:0;max-height:0}
  .nav-drop.open .nav-menu,.nav-drop.open .nav-mega-menu{opacity:1!important;max-height:1400px!important;visibility:visible!important}
}

/* CLS fix: pre-JS mobile state only.
   Before main.js runs, .nav-left/.nav-right sit inline in the header and would paint
   as a fully-open menu, then vanish once the drawer is built - a large layout shift.
   main.js removes .nav-prepanel from <html> as soon as the panel exists, so this rule
   applies ONLY during that first pre-JS moment and can never hide the real drawer links.
   Scoped to html.js so no-JS users always keep a usable inline nav. */
@media(max-width:900px){
  html.js.nav-prepanel .header-inner>.nav-left,
  html.js.nav-prepanel .header-inner>.nav-right{display:none}
}
/* Safety net: the drawer and its contents are never hidden by the guard above. */
@media(max-width:900px){
  .nav-panel,
  .nav-panel .nav-left,
  .nav-panel .nav-right{display:flex!important}
}