.site-header {
  position: sticky; top: 0; z-index: 1000;
  min-height: var(--zm-header-height);
  border-bottom: 1px solid var(--zm-border-soft);
  background: color-mix(in srgb, var(--zm-bg) 92%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.site-header-inner { min-height: var(--zm-header-height); display: flex; align-items: center; gap: 20px; }
.site-branding { flex: 0 1 auto; min-width: 0; }
.site-branding__link { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1; }
.site-branding__title { color: #fff; font-size: clamp(18px, 2vw, 25px); font-weight: 900; letter-spacing: .045em; text-transform: uppercase; white-space: nowrap; }
.site-branding__subtitle { margin-top: 5px; color: #f0a48f; font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; }
.site-nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-left: auto;
  border: 1px solid var(--zm-border); border-radius: var(--zm-radius-control); background: var(--zm-surface); color: var(--zm-text);
}
.site-nav-toggle svg { width: 24px; height: 24px; }
.site-nav-toggle .icon-close { display: none; }
.site-nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.site-nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.site-header-panel {
  position: fixed; inset: var(--zm-header-height) 0 auto; max-height: calc(100dvh - var(--zm-header-height)); overflow: auto;
  padding: 20px var(--zm-gutter) 28px; border-bottom: 1px solid var(--zm-border);
  background: color-mix(in srgb, var(--zm-bg) 98.5%, transparent); transform: translateY(-115%); visibility: hidden;
  transition: transform 220ms ease, visibility 220ms step-end;
}
.site-header-panel.is-open { transform: translateY(0); visibility: visible; transition: transform 220ms ease, visibility 0s; }
.site-nav { width: 100%; }
.site-nav .menu, .site-nav ul { display: grid; list-style: none; margin: 0; padding: 0; }
.site-nav li { margin: 0; }
.site-nav a {
  display: flex; align-items: center; min-height: 48px; padding: 9px 0; border-bottom: 1px solid var(--zm-border-soft);
  color: #e8edf5; font-size: 15px; font-weight: 750; letter-spacing: .035em; text-decoration: none; text-transform: uppercase;
}
.site-nav a:hover { color: #fff; }
.site-nav .current-menu-item > a, .site-nav .current_page_item > a, .site-nav a[aria-current="page"] {
  color: #fff; box-shadow: inset 3px 0 0 var(--zm-brand); padding-left: 14px;
}
.site-header-cta-wrap { margin-top: 18px; }
.site-header-cta { width: 100%; }
.site-nav-overlay { position: fixed; inset: var(--zm-header-height) 0 0; z-index: -1; border: 0; background: rgba(0,0,0,.62); opacity: 0; visibility: hidden; transition: opacity var(--zm-transition), visibility var(--zm-transition); }
.site-nav-overlay.is-open { opacity: 1; visibility: visible; }
@media (min-width: 900px) {
  /* Fixed desktop header: remains visible regardless of document height or parent layout. */
  body { padding-top: var(--zm-header-height); }
  .site-header {
    position: fixed;
    inset: 0 0 auto;
    width: 100%;
  }
  body.admin-bar .site-header { top: 32px; }

  /* Equal outer columns keep the navigation centered in the viewport, not pushed by the logo. */
  .site-header-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(0, auto) minmax(150px, 1fr);
    align-items: center;
    column-gap: clamp(10px, 1.6vw, 24px);
  }
  .site-branding {
    grid-column: 1;
    justify-self: start;
    max-width: min(220px, 100%);
  }
  .site-nav-toggle, .site-nav-overlay { display: none; }

  /*
   * Desktop reset for the mobile drawer state. The panel is an independent
   * three-column grid: this keeps the menu truly centered and the CTA aligned
   * right without relying on `display: contents`.
   */
  .site-header-panel {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(0, auto) minmax(150px, 1fr);
    align-items: center;
    column-gap: clamp(10px, 1.6vw, 24px);
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
    background: transparent;
    transform: none;
    visibility: visible;
    transition: none;
    pointer-events: none;
  }
  .site-header-nav-wrap {
    grid-column: 2;
    min-width: 0;
    justify-self: center;
    pointer-events: auto;
  }
  .site-nav {
    width: auto;
    max-width: 100%;
  }
  .site-nav .menu, .site-nav ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(9px, 1.25vw, 22px);
  }
  .site-nav a {
    position: relative;
    min-height: 44px;
    padding: 10px 0;
    border: 0;
    font-size: clamp(11px, 1.05vw, 13px);
    white-space: nowrap;
  }
  .site-nav .current-menu-item > a, .site-nav .current_page_item > a, .site-nav a[aria-current="page"] { box-shadow: none; padding-left: 0; }
  .site-nav .current-menu-item > a::after, .site-nav .current_page_item > a::after, .site-nav a[aria-current="page"]::after {
    content: ""; position: absolute; right: 0; bottom: 4px; left: 0; height: 2px; border-radius: 2px; background: var(--zm-brand);
  }
  .site-header-cta-wrap {
    grid-column: 3;
    justify-self: end;
    margin: 0;
    pointer-events: auto;
  }
  .site-header-cta {
    width: auto;
    padding-inline: clamp(14px, 1.6vw, 20px);
    white-space: nowrap;
  }
}

@media (min-width: 900px) and (max-width: 1080px) {
  .site-header-inner,
  .site-header-panel {
    grid-template-columns: minmax(140px, 1fr) minmax(0, auto) minmax(140px, 1fr);
    column-gap: 10px;
  }
  .site-branding { max-width: 175px; }
  .site-branding__subtitle { display: none; }
  .site-nav .menu, .site-nav ul { gap: 9px; }
  .site-nav a { font-size: 11px; }
  .site-header-cta { min-height: 44px; padding-inline: 12px; font-size: 11px; }
}

.site-branding, .site-nav-toggle { position: relative; z-index: 3; }
.site-header-panel { z-index: 2; }
.site-nav-overlay { z-index: 1; }
.site-branding .custom-logo-link { display: inline-flex; align-items: center; min-height: 44px; }
.site-branding .custom-logo { width: auto; max-width: min(210px, 44vw); max-height: 52px; border-radius: 0; }

@media (min-width: 900px) and (max-width: 1080px) {
  .site-branding .custom-logo { max-width: 175px; }
}