/* ============================================================
   SITE-WIDE HEADER — single source of truth (pairs with header.js).
   ⚠️ RULE (Billy 2026-07-18): every page uses THIS header, no deviation.
   Edit here and every page updates. Never re-create a per-page nav.
   Self-contained on purpose: hardcoded colors + scoped selectors so page
   stylesheets (admin/portal/blog/quote) can't make it drift.
   ============================================================ */
#nav{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(255,255,255,.69);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s;font-family:'Inter',system-ui,sans-serif;line-height:1.65}
#nav.scrolled{border-color:rgba(85,88,97,.14);box-shadow:0 10px 30px -22px rgba(63,66,75,.4)}
#nav .nav-wrap{max-width:1180px;margin:0 auto;padding:0 22px}
#nav .nav-in{display:flex;align-items:center;justify-content:space-between;height:74px;gap:12px}
#nav .brand{flex-shrink:0}
#nav .brand img{height:70px;width:auto;display:block} /* bar stays 74px; logo fills it minus 2px breathing room each side */
#nav a{color:inherit;text-decoration:none}
#nav .nav-links{display:flex;align-items:center;gap:26px;font-weight:600;font-size:.95rem;color:#3F424B;flex-wrap:nowrap;white-space:nowrap}
@media(max-width:1420px){#nav .nav-links{gap:18px;font-size:.9rem}}
#nav .nav-links a:not(.btn){position:relative;padding:4px 0}
#nav .nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:2px;background:#66B595;transition:width .22s}
#nav .nav-links a:not(.btn):hover::after{width:100%}
#nav .btn,#mmenu .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:'Manrope',sans-serif;font-weight:800;border-radius:999px;border:0;cursor:pointer;transition:transform .18s ease,background .18s ease,box-shadow .18s ease}
#nav .btn{padding:10px 18px;font-size:.86rem;white-space:nowrap;flex-shrink:0}
#nav .btn-primary,#mmenu .btn-primary{background:#66B595;color:#fff;box-shadow:0 14px 30px -14px rgba(102,181,149,.7)}
#nav .btn-primary:hover,#mmenu .btn-primary:hover{background:#4E9C7D;transform:translateY(-2px)}
#nav .btn-ghost,#mmenu .btn-ghost{background:transparent;color:#3F424B;border:2px solid rgba(85,88,97,.14)}
#nav .btn-ghost{padding:8px 16px}
#nav .btn-ghost:hover,#mmenu .btn-ghost:hover{border-color:#66B595;color:#3E8A6B}
#nav .nav-social{display:flex;align-items:center;gap:14px;padding-left:6px;border-left:1px solid rgba(85,88,97,.14);margin-left:2px}
#nav .nav-social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#3F424B;transition:color .2s,transform .2s}
#nav .nav-social a:hover{transform:translateY(-2px)}
#nav .nav-social-yt:hover{color:#ff0000}
#nav .nav-social-ig:hover{color:#e1306c}
#nav .nav-social-fb:hover{color:#1877f2}
#nav .nav-social svg{width:26px;height:26px}
@media(max-width:1300px) and (min-width:901px){#nav .nav-social{display:none}}
#nav .burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
#nav .burger span{display:block;width:24px;height:2.5px;background:#3F424B;margin:5px 0;border-radius:2px;transition:.25s}
#mmenu{position:fixed;inset:0;z-index:55;background:rgba(255,255,255,.98);backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:88px 28px 24px;gap:0;font-family:'Manrope',sans-serif;font-size:1.1rem;font-weight:700;color:#3F424B;opacity:0;pointer-events:none;transition:opacity .25s;overflow-y:auto}
#mmenu.open{opacity:1;pointer-events:auto}
#mmenu a{color:inherit;text-decoration:none}
#mmenu a:hover{color:#3E8A6B}
#mmenu a:not(.btn){width:100%;max-width:340px;text-align:center;padding:12px 0;border-bottom:1px solid rgba(85,88,97,.14)}
#mmenu a:not(.btn):last-of-type{border-bottom:0}
#mmenu .btn{width:100%;max-width:340px;font-size:1rem;padding:13px 22px;margin-top:12px}
#mmenu .btn-primary{margin-top:18px}
@media(max-width:900px){
  /* Shift the whole icon row (logo, socials, burger) left a touch so the
     burger gets breathing room off the right edge. Internal spacing between
     the icons is untouched — same total width, just slid left. */
  #nav .nav-wrap{padding:0 32px 0 12px}
  #nav .nav-links > a{display:none} /* links + CTA collapse into the burger menu; socials stay */
  #nav .nav-links{gap:0}
  #nav .nav-social{display:flex;border-left:0;padding-left:0;margin-left:0;gap:8px;margin-right:6px}
  #nav .nav-social a{width:52px;height:52px}
  #nav .nav-social svg{width:33px;height:33px}
  #nav .burger{display:block}
}
/* Pages whose content starts below the fixed bar get this spacer
   (header.js adds it when the script tag carries data-spacer). */
.pp-nav-spacer{height:74px}