/* Floating glass pill nav, shared by every page.
   Home page (full-bleed video hero) uses it as-is; inner pages add body.has-pill. */
.pill-wrap {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 60;
  display: flex; justify-content: center; padding: 0 14px; pointer-events: none;
}
.pill-nav {
  pointer-events: auto; position: relative;
  display: flex; align-items: center; gap: 26px;
  padding: 8px 10px 8px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.8);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 6px 24px rgba(15,77,46,0.14);
  animation: pill-drop .6s ease-out both;
}
.pill-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 18px; color: var(--green-dark); }
.pill-brand img { width: 28px; height: 28px; }
.pill-links { display: flex; align-items: center; gap: 22px; }
.pill-links a { font-size: 13.5px; font-weight: 500; color: rgba(26,31,28,0.75); text-decoration: none; white-space: nowrap; transition: color .2s; }
.pill-links a:hover, .pill-links a.active { color: var(--green-dark); }
.pill-links a.active { font-weight: 600; }
.pill-cta {
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
  color: #fff; background: var(--green-dark); padding: 9px 18px; border-radius: 999px; transition: transform .2s, background .2s;
}
.pill-cta:hover { background: var(--green-mid); transform: translateY(-1px); }
.pill-toggle { display: none; background: none; border: 0; font-size: 22px; line-height: 1; color: var(--green-dark); cursor: pointer; padding: 4px 8px; }
@keyframes pill-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* inner pages: the nav is fixed, so keep the space the old header took */
body.has-pill { padding-top: 76px; }
body.has-pill .pill-nav { border-color: rgba(15,77,46,0.12); }

@media (max-width: 860px) {
  .pill-wrap { padding: 0 12px; }
  .pill-nav { width: 100%; max-width: 560px; justify-content: space-between; gap: 10px; padding: 8px 10px 8px 16px; }
  .pill-toggle { display: block; margin-left: auto; }
  .pill-cta { display: none; }
  .pill-links {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 18px;
    background: rgba(255,255,255,0.96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.9); border-radius: 22px; box-shadow: 0 10px 30px rgba(15,77,46,0.18);
  }
  .pill-links.open { display: flex; }
  .pill-links a { padding: 13px 0; font-size: 15px; border-bottom: 1px solid var(--border); }
  .pill-links a:last-child { border-bottom: 0; color: var(--green-dark); font-weight: 600; }
  body.has-pill { padding-top: 70px; }
}
@media (min-width: 861px) { .pill-links .pill-mobile-only { display: none; } }
@media (prefers-reduced-motion: reduce) { .pill-nav { animation: none; } }