/* Shared homepage navigation, isolated from each page's content styles. */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap");

.site-header {
  --nav-height:82px;
  --nav-pad:clamp(20px,5vw,64px);
  position:fixed;
  z-index:50;
  inset:16px auto auto 50%;
  transform:translateX(-50%);
  box-sizing:border-box;
  width:min(1240px,calc(100% - var(--nav-pad)*2));
  height:var(--nav-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:10px 24px;
  border:1px solid rgba(246,239,213,.65);
  border-radius:24px 64px 24px 64px;
  background:rgba(232,227,202,.96);
  box-shadow:0 12px 36px rgba(15,35,24,.2),inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter:blur(18px) saturate(1.08);
  font:300 17px/1.65 "DM Sans",sans-serif;
  transition:box-shadow .25s ease;
}
.site-header.is-scrolled { box-shadow:0 14px 40px rgba(15,35,24,.3); }
.site-header .brand { display:inline-flex; align-items:center; gap:12px; min-width:0; color:#263c2d; font-size:12px; font-weight:600; letter-spacing:-.02em; }
.site-header .brand-logo { display:block; width:58px; height:58px; flex:0 0 58px; object-fit:contain; }
.site-header .header-nav { display:flex; align-items:center; gap:4px; }
.site-header .header-nav a { display:flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border-radius:999px; color:#334336; font-size:12px; font-weight:500; transition:background .2s,color .2s; }
.site-header .header-nav a:hover,.site-header .header-nav a:focus-visible { background:#d4d8b8; color:#203c2b; }
.site-header .header-cta { box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:15px; min-height:48px; padding:0 18px; border:0; border-radius:999px; background:#263c2d; color:#f4efd9; font-size:12px; font-weight:600; white-space:nowrap; transition:background .2s,transform .2s; }
.site-header .header-cta:hover { background:#3b5840; transform:translateY(-2px); }
.site-header a:focus-visible { outline:3px solid #397b58; outline-offset:4px; }

@media (max-width:1000px) {
  .site-header { gap:12px; padding-inline:18px; }
  .site-header .header-nav a { padding-inline:12px; }
}
@media (max-width:820px) {
  :root { --header-height:126px; }
  .site-header { --nav-height:126px; top:12px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; padding:10px 14px; border-radius:20px 44px 20px 44px; }
  .site-header .header-nav { grid-column:1 / -1; grid-row:2; justify-content:center; padding:0; }
  .site-header .header-nav a { flex:1; min-height:40px; }
  .site-header .header-cta { min-height:44px; }
}
@media (max-width:560px) {
  .site-header { --nav-pad:20px; padding:10px; gap:6px 8px; }
  .site-header .brand { gap:8px; font-size:10px; line-height:1.3; }
  .site-header .brand-logo { width:42px; height:42px; flex-basis:42px; }
  .site-header .header-nav a { min-height:44px; font-size:12px; }
  .site-header .header-cta { min-height:44px; gap:7px; padding-inline:10px; font-size:9px; }
}
@media (max-width:359px) {
  .site-header { gap:6px; padding-inline:8px; }
  .site-header .brand { gap:5px; font-size:9px; }
  .site-header .brand-logo { width:34px; height:34px; flex-basis:34px; }
  .site-header .header-cta { padding-inline:8px; font-size:8px; }
}