/* nav.css — sticky navbar */
.navbar {
  position: sticky; top: 12px; z-index: 100;
  padding: 0 var(--gutter);
  margin-top: 12px;
}
.navbar__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h);
  padding: 0 10px 0 18px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border: 1.5px solid var(--ink);
  border-radius: 20px;
  box-shadow: 4px 4px 0 var(--ink);
  transition: box-shadow 0.25s ease;
}
.navbar.scrolled .navbar__inner { box-shadow: 6px 6px 0 var(--ink); }

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.18rem; color: var(--ink); letter-spacing: -0.02em; }
.brand:hover { color: var(--ink); }
.brand__mark {
  width: 30px; height: 30px;
  display: grid; place-items: center; flex: none;
}
.brand__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--ink-soft); font-weight: 600; font-size: 0.95rem; }
.nav-links a:hover { color: var(--blue-deep); }
.nav-links .nav-cta { color: #fff; }
.nav-links .nav-cta:hover { color: #fff; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 10px; background: none; border: 0; cursor: pointer; }
.nav-toggle span { width: 24px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; display: block; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: calc(100% + 10px); left: var(--gutter); right: var(--gutter);
    flex-direction: column; align-items: stretch; gap: 4px;
    background: #fff; border: 1.5px solid var(--ink); border-radius: 18px;
    box-shadow: 5px 5px 0 var(--ink);
    padding: 12px; display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 14px; border-radius: 12px; }
  .nav-links a:not(.nav-cta):hover { background: var(--blue-pale); }
  .nav-links .nav-cta:hover { background: #000; color: #fff; }
  .nav-links .nav-cta { text-align: center; margin-top: 6px; }
}