/* ==========================================================================
   NAVIGATION — transparent over the hero, solid once scrolled
   ========================================================================== */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 260ms var(--ease), border-color 260ms var(--ease),
              box-shadow 260ms var(--ease);
}
.nav.is-scrolled {
  background: rgba(11,31,23,0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--c-line-d);
}

.nav__inner {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--sp-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6);
}

/* Brand ------------------------------------------------------------------- */
.nav__brand {
  display: flex; align-items: center; gap: var(--sp-3);
  text-decoration: none; flex-shrink: 0;
}
.nav__brand:hover { color: inherit; }
.nav__logo { width: 34px; height: 34px; flex-shrink: 0; }
.nav__name {
  font-size: var(--fs-small); font-weight: var(--w-bold);
  letter-spacing: -0.01em; line-height: 1.15; color: var(--c-surface);
}
.nav__name span {
  display: block; font-size: 10px; font-weight: var(--w-medium);
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--c-energy); margin-top: 2px;
}

/* Links ------------------------------------------------------------------- */
.nav__links { display: flex; align-items: center; gap: var(--sp-6); }
.nav__links a {
  font-size: var(--fs-small); font-weight: var(--w-medium);
  color: rgba(247,245,240,0.80); text-decoration: none;
  position: relative; padding-block: var(--sp-2);
  transition: color 160ms var(--ease);
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--c-energy);
  transition: width 220ms var(--ease);
}
.nav__links a:hover { color: var(--c-surface); }
.nav__links a:hover::after { width: 100%; }

/* The generic `.nav__links a` rule above outranks `.btn--primary`, which was
   painting this button's label white-on-amber. Win it back explicitly. */
.nav__links a.nav__cta,
.nav__links a.nav__cta:hover { color: var(--c-base); }

.nav__cta { display: inline-flex; flex-shrink: 0; }

/* Desktop, but narrow: tighten the row so all links stay on one line. */
@media (min-width: 900px) and (max-width: 1150px) {
  .nav__inner { gap: var(--sp-4); }
  .nav__links { gap: var(--sp-4); }
}

/* Burger ------------------------------------------------------------------ */
.nav__burger {
  display: none;
  width: 42px; height: 42px; padding: 0;
  background: transparent; border: 1px solid var(--c-line-d);
  border-radius: var(--radius); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav__burger span {
  display: block; position: relative;
  width: 18px; height: 2px; background: var(--c-surface); border-radius: 2px;
  transition: background-color 160ms var(--ease);
}
.nav__burger span::before,
.nav__burger span::after {
  content: ''; position: absolute; left: 0;
  width: 18px; height: 2px; background: var(--c-surface); border-radius: 2px;
  transition: transform 240ms var(--ease), top 240ms var(--ease);
}
.nav__burger span::before { top: -6px; }
.nav__burger span::after  { top: 6px; }

.nav__burger[aria-expanded="true"] span { background: transparent; }
.nav__burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }


/* --- MOBILE --------------------------------------------------------------- */

@media (max-width: 899px) {
  .nav__burger { display: flex; }
  .nav__cta    { display: none; }

  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--sp-4) var(--sp-5) var(--sp-8);
    background: var(--c-base);
    border-bottom: 1px solid var(--c-line-d);
    transform: translateY(-120%);
    transition: transform 320ms var(--ease);
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
  }
  .nav__links.is-open { transform: translateY(0); }

  .nav__links a {
    padding: var(--sp-4) 0;
    font-size: var(--fs-h4); font-weight: var(--w-semi);
    color: var(--c-surface);
    border-bottom: 1px solid var(--c-line-d);
  }
  .nav__links a::after { display: none; }
  .nav__links .btn { margin-top: var(--sp-6); }
}