@font-face{
  font-family:"Montserrat";
  src:url("../../tokens/fonts/montserrat/Montserrat-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Montserrat";
  src:url("../../tokens/fonts/montserrat/Montserrat-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Montserrat";
  src:url("../../tokens/fonts/montserrat/Montserrat-SemiBold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Montserrat";
  src:url("../../tokens/fonts/montserrat/Montserrat-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
:root{
  --bg:#f3ede1;
  --ink:#1c1a16;
  --muted:#948e80;
  --orange:#e07020;
  --border:#e5ddcc;
  --top-bg:#15130f;
  --top-ink:#f3ede1;
  --top-muted:#8f8a80;
}
*{box-sizing:border-box;}
body{ margin:0; font-family:"Montserrat",-apple-system,Segoe UI,Roboto,Arial,sans-serif; }

.zbs-hdr{ position:relative; z-index:200; }

/* Sticky must anchor on the mount point (direct child of body) — see
   header.css for why .zbs-hdr-main alone isn't enough for a full-page scroll. */
#zb-header-mount{ position:sticky; top:0; z-index:200; }

/* ---- Top network bar (same language as app header, for network consistency) ---- */
.zbs-hdr-top{
  position:relative; z-index:20;
  background:var(--top-bg); color:var(--top-ink);
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 24px; font-size:12.5px;
  transform:translateY(0); opacity:1;
  transition:transform .25s ease, opacity .2s ease;
}
.zbs-hdr-top.zbs-is-collapsed{ transform:translateY(-100%); opacity:0; }
.zbs-hdr-main{ position:sticky; top:0; z-index:10; }
.zbs-top-brand{ display:flex; align-items:center; gap:8px; font-weight:700; letter-spacing:.6px; color:#fff; text-decoration:none; }
.zbs-top-brand svg{ width:16px; height:16px; color:#fff; }
.zbs-top-nav{ display:flex; align-items:center; gap:6px; position:relative; }
.zbs-top-link{
  display:flex; align-items:center; gap:6px; color:var(--top-ink); text-decoration:none;
  padding:6px 10px; border-radius:8px; font-weight:500; cursor:pointer;
  background:none; border:none; font-family:inherit; font-size:12.5px;
}
.zbs-top-link:hover{ background:rgba(255,255,255,.08); }
.zbs-top-link svg{ width:14px; height:14px; opacity:.7; }
.zbs-top-link .zb-chev{ width:11px; height:11px; transition:transform .15s ease; }
.zbs-top-link[aria-expanded="true"] .zb-chev{ transform:rotate(180deg); }

.zbs-network-panel{
  position:absolute; top:calc(100% + 8px); right:0; min-width:230px;
  background:var(--top-bg); border:1px solid rgba(255,255,255,.1); border-radius:10px;
  padding:6px; box-shadow:0 12px 30px rgba(0,0,0,.35);
  display:none; flex-direction:column; z-index:100;
}
.zbs-network-panel.is-open{ display:flex; }
.zbs-network-group{ display:flex; flex-direction:column; }
.zbs-network-group-btn{
  display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left;
  background:none; border:none; color:var(--top-ink); font-family:inherit; font-size:12.5px; font-weight:600;
  padding:9px 10px; border-radius:6px; cursor:pointer;
}
.zbs-network-group-btn:hover{ background:rgba(255,255,255,.08); }
.zbs-network-group-btn svg{ width:12px; height:12px; transition:transform .15s ease; }
.zbs-network-group-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
.zbs-network-sites{ display:none; flex-direction:column; padding:2px 4px 8px 20px; }
.zbs-network-sites.is-open{ display:flex; }
.zbs-network-sites a{ color:var(--top-muted); text-decoration:none; font-size:12px; padding:6px 8px; border-radius:5px; }
.zbs-network-sites a:hover{ background:rgba(255,255,255,.06); color:#fff; }

/* ---- Main editorial bar: bigger brand, flat nav, CTA ---- */
.zbs-hdr-main{
  background:#fff;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  padding:20px 28px;
}
.zbs-brand{ display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink); }
.zbs-brand-logo{ width:46px; height:46px; flex:0 0 46px; display:flex; align-items:center; justify-content:center; }
.zbs-brand-logo img{ width:100%; height:100%; object-fit:contain; }
.zbs-brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.zbs-brand-text strong{ font-size:19px; font-weight:700; letter-spacing:-.2px; }
.zbs-brand-text small{ font-size:12px; color:var(--muted); font-weight:500; }

.zbs-nav{ display:flex; align-items:center; gap:30px; flex:1; justify-content:center; }
.zbs-navlink{
  position:relative;
  display:inline-flex; align-items:center; gap:5px;
  color:var(--ink); text-decoration:none; font-size:14px; font-weight:600;
  padding:6px 0; background:none; border:none; cursor:pointer; font-family:inherit;
}
.zbs-navlink::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--orange); transition:right .18s ease;
}
.zbs-navlink:hover{ color:var(--orange); }
.zbs-navlink:hover::after{ right:0; }
.zbs-navlink svg{ width:12px; height:12px; transition:transform .15s ease; opacity:.6; }
.zbs-navlink[aria-expanded="true"] svg{ transform:rotate(180deg); }

.zbs-navdrop{ position:static; }
.zbs-navdrop-panel{
  position:absolute; left:0; right:0; top:100%;
  margin-top:1px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:2px 20px;
  max-width:1180px; margin-left:auto; margin-right:auto;
  background:#fff; border:1px solid var(--border); border-top:none;
  border-radius:0 0 16px 16px;
  padding:20px 28px 26px;
  box-shadow:0 24px 44px rgba(20,16,8,.14);
  z-index:150;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.zbs-navdrop-panel.is-open{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.zbs-navdrop-panel a{
  display:flex; flex-direction:column; gap:3px;
  padding:12px 12px; border-radius:10px;
  color:var(--ink); text-decoration:none;
}
.zbs-navdrop-panel a:hover{ background:#f8f3ea; }
.zbs-navdrop-panel a strong{ font-size:13.5px; font-weight:700; }
.zbs-navdrop-panel a:hover strong{ color:var(--orange); }
.zbs-navdrop-panel a span{ font-size:12px; color:var(--muted); line-height:1.4; }

.zbs-actions{ display:flex; align-items:center; gap:14px; }
.zbs-cta{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--orange); color:#fff; text-decoration:none;
  font-size:13px; font-weight:700; letter-spacing:.2px;
  padding:11px 22px; border-radius:999px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.zbs-cta:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.16); }

.zbs-menu-btn{
  display:none; width:40px; height:40px; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--ink); cursor:pointer;
}
.zbs-menu-btn svg{ width:18px; height:18px; }

/* ---- Liquid-glass divider strip below the navbar ---- */
.zbs-glass{
  position:relative;
  height:14px;
  overflow:hidden;
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(10px) saturate(160%);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -6px 10px -6px rgba(20,16,8,.08);
}
@supports (backdrop-filter: url(#a)) or (-webkit-backdrop-filter: url(#a)){
  .zbs-glass{
    backdrop-filter:url(#zbs-glass-distort) blur(3px) saturate(180%);
  }
}
.zbs-glass::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(255,60,170,.16) 0%,
    rgba(90,180,255,.12) 20%,
    transparent 42%, transparent 58%,
    rgba(255,210,40,.12) 80%,
    rgba(255,60,170,.16) 100%);
  mix-blend-mode:overlay;
  pointer-events:none;
}

.zbs-mobile-panel{
  display:none;
  flex-direction:column;
  background:#fff; border-bottom:1px solid var(--border);
  padding:8px 16px 16px;
}
.zbs-mobile-panel.is-open{ display:flex; }
.zbs-mobile-panel a{
  color:var(--ink); text-decoration:none; font-size:15px; font-weight:600;
  padding:12px 8px; border-bottom:1px solid var(--border);
}
.zbs-mobile-panel a:hover{ color:var(--orange); }

@media (max-width: 900px){
  .zbs-nav{ display:none; }
  .zbs-menu-btn{ display:flex; }
  .zbs-hdr-main{ padding:16px 20px; }
  .zbs-brand-text small{ display:none; }
  .zbs-cta{ padding:9px 16px; font-size:12.5px; }
}