@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@500;600;700&display=swap');

/* The one site header: a floating dark pill. Every page uses the same markup
   (<nav class="topnav site-nav">) and loads this file after its own <style>,
   so these rules win over each page's older nav CSS. */
nav.site-nav { position: fixed; top: 14px; left: 50%; right: auto; transform: translateX(-50%); z-index: 100; width: min(1320px, calc(100% - 56px)); height: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 8px 8px 20px; margin: 0; border: 0; border-radius: 999px; background: rgba(27, 20, 17, 0.94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: #fff; font-family: 'Host Grotesk', -apple-system, 'Segoe UI', sans-serif; line-height: 1.4; }
nav.site-nav .nav-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; color: #fff; text-decoration: none; }
nav.site-nav .nav-logo img { width: 28px; height: 28px; border-radius: 8px; }
nav.site-nav .nav-logo span { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
nav.site-nav .nav-links { position: static; display: flex; flex: 0 1 auto; flex-direction: row; align-items: center; justify-content: center; gap: 26px; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; }
nav.site-nav .nav-links a { padding: 0; border: 0; font-size: 14.5px; font-weight: 500; color: #fff; opacity: 0.88; text-decoration: none; white-space: nowrap; transition: color 0.2s, opacity 0.2s; }
nav.site-nav .nav-links a:hover { opacity: 1; color: #33cc7a; }
nav.site-nav .nav-links a[aria-current='page'] { opacity: 1; color: #33cc7a; }
nav.site-nav .nav-cta { flex-shrink: 0; display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px; background: #33cc7a; color: #1b1411; font-size: 14px; font-weight: 600; text-decoration: none; transition: transform 0.2s; }
nav.site-nav .nav-cta:hover { transform: translateY(-1px); color: #1b1411; }
nav.site-nav .nav-toggle { display: none; flex-shrink: 0; width: 40px; height: 40px; padding: 0; background: none; border: 0; cursor: pointer; }
nav.site-nav .nav-toggle span { display: block; width: 20px; height: 2px; margin: 4px auto; background: #fff; border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
nav.site-nav .nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
nav.site-nav .nav-toggle.open span:nth-child(2) { opacity: 0; }
nav.site-nav .nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1000px) {
  nav.site-nav { width: calc(100% - 24px); top: 10px; }
  nav.site-nav .nav-links { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px; border-radius: 24px; background: rgba(27, 20, 17, 0.96); }
  nav.site-nav .nav-links.open { display: flex; }
  nav.site-nav .nav-links a { padding: 12px 14px; }
  nav.site-nav .nav-toggle { display: block; }
  nav.site-nav .nav-cta { margin-left: auto; }
}
@media (max-width: 560px) {
  nav.site-nav .nav-cta { display: none; }
}