/* The site header (partials/site-header.hbs), loaded by BOTH layouts:
   home-layout.hbs (on top of home.css) and default.hbs (on top of Solo's
   built/screen.css). Every rule is scoped to header.site and carries its own
   tokens, so it renders the same under either stylesheet. Sizes are px because
   Solo sets html{font-size:62.5%}, which would shrink rems on Solo pages. */

header.site{
  --hd-ink:#15171a;--hd-paper:#f4f2ea;--hd-white:#fff;--hd-green:#184027;--hd-grey:#333;--hd-muted:#6b6b66;--hd-line:#e0ddd2;
  position:sticky;top:0;z-index:20;
  background:#f4f2eaf5;border-bottom:1px solid var(--hd-line);
  color:var(--hd-ink);
  font-family:"Space Grotesk","Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.6;letter-spacing:normal;
  -webkit-font-smoothing:auto;
}
header.site *{box-sizing:border-box}
/* The header is sticky, so anchor jumps (/hunt-me/#how-i-help) must stop below it. */
html{scroll-padding-top:84px}
header.site .wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
header.site .bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0}
/* .bar comes after .wrap in home.css, so its padding wins: no side gutter on
   desktop. At <=640px the .wrap rule wins instead (0 16px). Kept identical. */
header.site .wrap.bar{padding:12px 0}
header.site a{color:inherit;text-decoration:none}
header.site a:hover{opacity:1}

header.site .brand{display:flex;align-items:center;gap:12px;min-width:0}
header.site .brand .mark{display:block;flex:0 0 44px;width:44px;height:44px;padding:2px;object-fit:contain;background:var(--hd-white);border:1px solid var(--hd-line);border-radius:10px}
header.site .brand b{font-size:16.32px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
header.site .brand span{display:block;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.88px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--hd-muted)}

/* {{navigation}} emits ul.nav > li.nav-<slug> > a. The pill is targeted by its
   slug class: renaming "Book a Call" in Ghost Admin changes the slug and drops
   the pill styling, so update this selector with it. */
header.site nav.main{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px}
header.site nav.main ul.nav{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
header.site nav.main li{margin:0;padding:0;line-height:1.6}
header.site nav.main a{padding:8px 12px;border-radius:999px;color:var(--hd-grey);font-size:14.4px;font-weight:600}
header.site nav.main a:hover{background:var(--hd-white);color:var(--hd-ink)}
header.site nav.main a[aria-current=page]{color:var(--hd-ink);background:var(--hd-white);box-shadow:inset 0 0 0 1px var(--hd-line)}
header.site nav.main .nav-book-a-call a{background:var(--hd-green);color:#fff;border:1px solid var(--hd-green);padding:10px 16px;font-weight:700;box-shadow:none}
header.site nav.main .nav-book-a-call a:hover{background:var(--hd-green);color:#fff}

header.site .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
header.site .nav-toggle{display:none}

@media (max-width:640px){
  html{scroll-padding-top:60px}
  header.site .wrap,header.site .wrap.bar{padding:0 16px}
  header.site .bar{flex-wrap:wrap;gap:10px}
  header.site .brand .mark{flex-basis:40px;width:40px;height:40px}
  header.site .nav-toggle{display:inline-flex;justify-content:center;align-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;background:var(--hd-white);color:var(--hd-ink);border:1px solid var(--hd-line);border-radius:999px;cursor:pointer}
  header.site nav.main{display:none;flex-direction:column;align-items:stretch;flex-basis:100%;width:100%;gap:4px;padding-bottom:10px}
  header.site nav.main.is-open{display:flex}
  header.site nav.main ul.nav{flex-direction:column;align-items:stretch;gap:4px;width:100%}
  header.site nav.main a{display:flex;align-items:center;min-height:44px;padding:10px 14px;border-radius:12px}
  header.site nav.main .nav-book-a-call a{justify-content:center;padding:12px 18px;border-radius:999px}
}