/* Base header/nav shared by SMB + Off-Ramp */
header.wrap { margin: 0 auto; max-width: 1100px; padding: 16px 20px; }
header .brand { font-weight: 700; margin-right: 16px; text-decoration: none; }
header nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
header .links { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
header .links a { text-decoration:none; }

/* Optional dropdown pattern you already use */
/* Dropdown base */
.has-sub { position: relative; display:inline-flex; align-items:center; gap:.25rem; }
.has-sub .sub-toggle { background:transparent; border:0; cursor:pointer; line-height:1; }

/* The menu */
.has-sub .sub{
  position:absolute;
  top:100%;           /* sit flush under the button (no gap) */
  left:0;
  min-width:220px;
  padding:.5rem 0;
  margin:0;           /* ← remove the old 6px gap */
  list-style:none;
  background:#fff;
  border:1px solid #E5E7EB;
  border-radius:.5rem;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  display:none;
  z-index:1000;
}

/* Invisible hover bridge to prevent flicker if any subpixel gap appears */
.has-sub .sub::before{
  content:"";
  position:absolute;
  top:-8px; left:0; right:0; height:8px;
}

/* Open states: hover, focus, or JS toggle */
.has-sub:hover .sub,
.has-sub:focus-within .sub,
.has-sub.open .sub { display:block; }

/* Small screens: keep your existing behavior */
@media (max-width: 800px){
  .has-sub .sub { position:static; box-shadow:none; border:0; margin:6px 0 0; }
}

/* Brand + tagline stacked */
.brandlockup { display:flex; flex-direction:column; }
.brandlockup .brand {
  font-weight:700; text-decoration:none; line-height:1.1;
}
.brandlockup .tagline {
  color:#64748b;           /* muted slate */
  font-size:.9rem;
  margin-top:2px;
}

/* Keep the header balanced */
header nav { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
header .links { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }

/* Small screens: hide tagline to reduce clutter */
@media (max-width: 760px) {
  .brandlockup .tagline { display:none; }
  header nav { align-items:center; } /* re-center vertically */
}

/* allow JS-opened menus to stay open */
.has-sub.open .sub { display:block; }

/* --- Header layout polish --- */
header nav{display:flex;align-items:center;justify-content:space-between;gap:1rem}
header .links{display:flex;align-items:center;gap:16px}
.sub-toggle{background:transparent;border:0;cursor:pointer;line-height:1;padding:6px 4px}

/* --- Dropdown: remove gap + add “bridge” so it never closes on the way down --- */
.has-sub{position:relative;display:inline-flex;align-items:center;gap:.25rem}
.has-sub .sub{
  position:absolute; top:100%; left:0; /* sits flush under button */
  min-width:220px; margin:0; padding:.5rem 0; list-style:none;
  background:#fff; border:1px solid #E5E7EB; border-radius:.5rem;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  display:none; z-index:1000;
}
/* invisible hover bridge */
.has-sub .sub::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}

/* items inside the dropdown */
.has-sub .sub a{display:block;padding:8px 12px;text-decoration:none;color:#1F2937}
.has-sub .sub a:hover{background:#f8fafc}

/* open states: hover, focus, or JS .open */
.has-sub:hover .sub,
.has-sub:focus-within .sub,
.has-sub.open .sub{display:block}

/* Mobile: stack menu inline */
@media (max-width:800px){
  .has-sub .sub{position:static;box-shadow:none;border:0;margin:6px 0 0}
}

/* prevents any other .links on the page from affecting the header*/
header .links a,
header .links button { font-family: var(--ui); font-weight: 600; }

<!-- put this after your CSS links on the index page -->
<style>
  header .links a,
  header .links button {
    font-family: var(--ui);
    font-weight: 600;
    letter-spacing: .01em;
  }
</style>

/* Header menu: force same typography on anchors as on the two buttons */
header .links a,
header .links button {
  font-family: var(--ui) !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Optional: unify hover look */
header .links a:hover { text-decoration: underline; }

/* Force identical typography for header menu items */
header .links a,
header .links button {
  font-family: var(--ui) !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
}