@media (min-width: 651px) {
  .site-header { gap: 18px; }
  .site-header .brand-logo { width: 175px; flex: 0 0 175px; }
  .site-header .site-nav { margin-left: auto; gap: 22px; flex-shrink: 0; }
  .site-header .header-cta { display: inline-flex !important; flex: 0 0 auto; white-space: nowrap; padding: 12px 16px; font-size: 13px; }
  .site-header .menu-toggle { display: none; }
}

@media (max-width: 900px) {
  .site-header .menu-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; }
  .site-header .header-cta { display: none !important; }
  .site-header .brand-logo { width: 185px; flex-basis: 185px; }
  .site-header .site-nav { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; display: flex; flex-direction: column; gap: 0; padding: 22px 6%; background: var(--cream); border-bottom: 1px solid var(--line); visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-12px); transition: opacity .28s ease, transform .38s cubic-bezier(.22,1,.36,1), visibility .38s; }
  .site-header .site-nav.open { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); }
}

@media (max-width: 650px) {
  .site-header .header-cta { display: inline-flex !important; width: 38px; height: 38px; flex: 0 0 38px; padding: 0; border-radius: 50%; font-size: 0; gap: 0; }
  .site-header .header-cta::after { content: '↗'; font-size: 17px; line-height: 1; }
}