/* ------------------------------------------------------------------
   Shared site navigation. One component, loaded on every page.
   Structure and size are identical everywhere; only the colors change
   between the homepage (nav--home, light text/logo on dark) and the
   rest of the site (navy text/logo on a light bar). The logo is a mask,
   so it recolors with the text, no second image needed.
   ------------------------------------------------------------------ */
/* Offset in-page anchor jumps (e.g. #work, #contact) so the sticky nav
   doesn't cover the target heading. */
html{scroll-padding-top:92px}

.nav{
  position:sticky; top:0; z-index:40;
  line-height:1.2;   /* pin so the brand sits identically regardless of each page's body line-height */
  background:var(--nav-bg);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--nav-border);
  /* light (default) palette */
  --nav-bg:rgba(245,246,249,.86);
  --nav-fg:#1B2740;
  --nav-muted:#5B6880;
  --nav-accent:#2E5E97;
  --nav-border:#E6EAF1;
  --nav-cbtn:#253450;
  --nav-logo:#1B2740;
}
.nav .wrap{
  max-width:1180px; margin:0 auto; padding:0 clamp(16px,4vw,44px);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:70px;
}
.nav .brand{display:flex; align-items:center; gap:11px; text-decoration:none}
/* Two logomarks (navy + white) swapped by palette, so only the color changes. */
.nav .brand .klogo{height:30px; width:auto; display:none; flex:none}
.nav .brand .klogo--light{display:block}          /* default: navy mark */
.nav--home .brand .klogo--light{display:none}
.nav--home .brand .klogo--dark{display:block}      /* homepage: white mark */
.nav .brand .nm{font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.2em; color:var(--nav-fg)}
.nav .links{display:flex; align-items:center; gap:24px; font-size:.92rem; font-weight:500}
.nav .links a{text-decoration:none; color:var(--nav-fg); opacity:.72}
.nav .links a:hover{opacity:1}
.nav .links a.on{opacity:1; color:var(--nav-accent); font-weight:600}
.nav .connect{
  border:1px solid var(--nav-cbtn); color:var(--nav-fg);
  padding:9px 18px; border-radius:999px;
  font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em; text-decoration:none;
}
.nav .connect:hover{background:var(--nav-fg); color:var(--nav-bg)}

/* homepage palette: light text/logo on the dark hero */
.nav--home{
  --nav-bg:color-mix(in srgb, #253450 86%, transparent);
  --nav-fg:#F1F5FB;
  --nav-accent:#8FB9E8;
  --nav-border:rgba(241,245,251,.14);
  --nav-cbtn:rgba(241,245,251,.45);
  --nav-logo:#F1F5FB;
}
.nav--home .connect:hover{background:var(--nav-fg); color:#13203A}

/* hamburger (mobile only) */
.nav .nav-toggle{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.nav .burger{display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; padding:9px; margin:-9px -9px -9px 0; background:none; border:0; cursor:pointer}
.nav .burger span{display:block; height:2px; width:100%; border-radius:2px; background:var(--nav-fg);
  transition:transform .25s ease, opacity .2s ease}

@media(max-width:820px){
  .nav .burger{display:flex}
  .nav .connect{display:none}
  .nav .links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--nav-bg);
    -webkit-backdrop-filter:saturate(1.2) blur(10px); backdrop-filter:saturate(1.2) blur(10px);
    border-bottom:1px solid var(--nav-border);
    padding:6px 0 10px;
  }
  .nav .nav-toggle:checked ~ .links{display:flex}
  .nav .links a{padding:13px clamp(16px,4vw,44px); font-size:1rem; opacity:.9}
  .nav .links a.on{opacity:1}
  .nav .nav-toggle:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav .nav-toggle:checked ~ .burger span:nth-child(2){opacity:0}
  .nav .nav-toggle:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}