/* ================= NAV ================= */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(10,34,51,.96);
  backdrop-filter:blur(8px);
  box-shadow:0 4px 24px -8px rgba(0,0,0,.25);
  transition:box-shadow .35s ease, padding .35s ease;
  padding:14px 0;
}
header.scrolled{
  box-shadow:0 4px 24px -8px rgba(0,0,0,.35);
  padding:12px 0;
}
nav{display:flex;align-items:center;justify-content:space-between;}
.logo-mark{display:flex;align-items:center;gap:10px;}
.logo-mark img{height:64px;width:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.3));transition:transform .25s ease;}
.logo-mark:hover img{transform:scale(1.03);}
.nav-links{display:flex;align-items:center;gap:36px;}
.nav-links a{
  font-size:14.5px;font-weight:500;color:#DCE7EC;
  position:relative;padding:4px 0;
}
.nav-links a::after{
  content:"";position:absolute;bottom:0;left:0;width:0;height:2px;
  background:var(--green);transition:width .25s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}
.nav-links a.active{color:#fff;}
.nav-cta{display:flex;align-items:center;gap:18px;}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.nav-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;border-radius:2px;}


  /* dark-hero pages (home, about): header starts transparent and blends
     with the navy hero, then solidifies once the user scrolls */
  body.nav-on-dark header{
    background:rgba(10,34,51,0);
    transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
    padding:20px 0;
    box-shadow:none;
  }
  body.nav-on-dark header.scrolled{
    background:rgba(10,34,51,.96);
    backdrop-filter:blur(8px);
    box-shadow:0 4px 24px -8px rgba(0,0,0,.35);
    padding:12px 0;
  }

  @media(max-width:720px){
    .nav-links, .nav-cta .btn-primary{display:none;}
    .nav-toggle{display:block;}
  }