:root{
  /* Brand tokens (kept) */
  --green:#14532d;
  --green-700:#0b3d1b;
  --orange:#f97316;
  --orange-700:#ea580c;
  --white:#fff;
  --border:#e5e7eb;

  /* Additions */
  --shadow-sm: 0 6px 14px rgba(15,23,42,.06);
  --shadow:    0 10px 24px rgba(15,23,42,.08);
  --ring:      0 0 0 3px rgba(34,197,94,.18);
  --blur-bg:   rgba(255,255,255,.86);
}

/* Smooth scroll */
html{ scroll-behavior:smooth; }

/* Layout offsets for a FIXED header */
.site-main{ padding-top: max(68px, calc(68px + env(safe-area-inset-top))); }
.section{ padding:36px 0; }
.section--home{ padding:0; margin-top:-68px; }

/* =========================
   FIXED HEADER
   ========================= */
.topbar{
  position:fixed; inset:0 auto auto 0; right:0;
  background:var(--white);
  backdrop-filter: none;                   /* Fallback */
  border-bottom:1px solid var(--border);
  z-index:10000;
  box-shadow: var(--shadow-sm);
}
@supports (backdrop-filter: blur(8px)) {
  .topbar{
    background:var(--blur-bg);
    backdrop-filter:saturate(160%) blur(8px);
  }
}
/* Soft bottom hairline */
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.06),transparent);
}

.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; height:68px;
}

/* Brand */
.brand{
  display:flex; align-items:center; gap:10px;
  color:var(--green); font-weight:800; letter-spacing:.2px;
  text-decoration:none;
}
.brand__logo{ display:block; max-height:44px }

/* =========================
   DESKTOP NAV
   ========================= */
.nav .menu{
  display:flex; align-items:center; gap:22px;
  list-style:none; margin:0; padding:0;
}
.menu__link{
  color:var(--green); font-weight:700; text-decoration:none;
  padding:8px 0; border-bottom:2px solid transparent;
  transition: color .15s ease, border-color .15s ease, opacity .15s ease;
}
.menu__link:hover{ color:var(--green-700); }
.menu__link.is-active,
.menu__link[aria-current="page"]{
  border-bottom-color:var(--green);
}
.menu__link:focus-visible{
  outline: none; box-shadow: var(--ring);
  border-radius:6px; padding:8px 6px; margin:0 -6px; /* keep layout */
}

/* =========================
   CTA (orange pill, with shine on hover)
   ========================= */
.cta{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:8px;
  background: linear-gradient(180deg,var(--orange) 0%,var(--orange-700) 100%);
  color:var(--white);
  padding:10px 14px; border-radius:999px; font-weight:800;
  border:1px solid #d65e0f;
  box-shadow:0 10px 18px rgba(249,115,22,.22), inset 0 -2px 0 rgba(0,0,0,.10);
  text-decoration:none;
  transition: transform .08s ease, box-shadow .18s ease, filter .15s ease;
}
.cta__icon{ width:18px; height:18px; fill:currentColor }
.cta:hover{
  transform:translateY(-1px);
  box-shadow:0 0 0 3px rgba(249,115,22,.18),
             0 16px 30px rgba(234,88,12,.34),
             inset 0 -2px 0 rgba(0,0,0,.10);
  filter:none;
}
/* Shine sweep on hover only (no continuous animation) */
.cta::before{
  content:""; position:absolute; inset:-2px; pointer-events:none;
  transform:translateX(-120%);
  background:linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 70%);
  mix-blend-mode:screen; opacity:.65;
}
.cta:hover::before{ animation: cta-shine 1.35s ease; }
@keyframes cta-shine{ to{ transform:translateX(120%);} }

/* =========================
   BURGER
   ========================= */
.burger{
  display:none;
  width:40px; height:40px; min-width:40px;
  border:1px solid var(--border); background:#fff; border-radius:10px; cursor:pointer;
  position:relative; z-index:10001;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .18s ease, background .15s ease;
}
.burger:hover{ transform:translateY(-1px); box-shadow: var(--shadow); }
.burger span,
.burger::before,
.burger::after{
  content:""; display:block; position:absolute; left:50%;
  width:22px; height:2px; background:#0f172a; border-radius:2px;
  transform:translateX(-50%); transition: transform .18s ease, opacity .18s ease;
}
.burger span{ top:50%; transform:translate(-50%,-50%); }
.burger::before{ top:12px; }
.burger::after{  bottom:12px; }

/* Animate to “X” when .is-active is applied (your JS can toggle this) */
.burger.is-active span{ opacity:0; }
.burger.is-active::before{ transform:translateX(-50%) rotate(45deg); top:19px; }
.burger.is-active::after{  transform:translateX(-50%) rotate(-45deg); bottom:19px; }

/* =========================
   MOBILE DRAWER
   ========================= */
.mobile-panel{ display:none; }
.mobile-panel ul{ list-style:none; margin:0; padding:0; }

@media (max-width:980px){
  .nav, .cta{ display:none; }
  .burger{ display:block; }

  .mobile-panel{
    position:fixed; left:0; right:0; top:68px;
    background:#fff; border-bottom:1px solid var(--border);
    z-index:9999; padding:12px 16px 16px;
    box-shadow: var(--shadow);
    /* enter/exit animation */
    transform: translateY(-8px);
    opacity:0; visibility:hidden;
    transition: transform .18s ease, opacity .18s ease, visibility 0s linear .18s;
  }
  .mobile-panel.open{
    display:block;                /* keep for legacy code */
    transform:none; opacity:1; visibility:visible;
    transition: transform .18s ease, opacity .18s ease, visibility 0s;
  }

  .mobile-panel .menu__link{
    display:block; padding:12px 2px;
    font-weight:700; color:var(--green); text-decoration:none;
  }
  .mobile-panel .menu__link:focus-visible{
    outline:none; box-shadow: var(--ring); border-radius:6px; padding:12px 8px; margin:0 -6px;
  }
  .cta--mobile{ margin-top:10px; width:100%; justify-content:center; }
}

/* Make sure header remains clickable even if sections use overlays */
.topbar, .topbar *{ pointer-events:auto; }

/* Prevent page scroll when drawer is open (you already toggle .no-scroll) */
.no-scroll{ overflow:hidden; }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  .cta, .burger, .mobile-panel, .menu__link{ transition:none !important; }
  .cta::before{ display:none; }
}