.site-header {
  background:white;
  border-bottom:1px solid var(--color-border)
}
.header-inner {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-block:.85rem
}

.brand {
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:var(--color-primary);
  line-height:1.15;
  flex-shrink:0
}
.site-header .brand--header {
  width:min(10rem,48vw);
  gap:.2rem
}
.brand-wordmark {
  display:block;
  width:100%;
  height:auto
}
.brand strong {
  font-size:1.65rem;
  letter-spacing:-.04em
}
.brand span {
  font-size:.875rem;
  letter-spacing:.08em;
  margin-top:.25rem
}

.site-nav {
  width:100%
}
.site-nav ul {
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.3rem;
  margin:0;
  padding:0
}
.site-nav li {
  margin:0
}
.site-nav a {
  display:block;
  padding:.65rem .75rem;
  text-decoration:none;
  color:var(--color-text);
  font-size:var(--font-size-sm);
  border-radius:var(--radius-sm)
}
.site-nav a:hover {
  background:var(--color-bg-soft)
}
.site-nav a[aria-current=page] {
  font-weight:700;
  color:var(--color-link);
  box-shadow:inset 0 -2px var(--color-accent)
}
.site-nav .nav-contact {
  border:1px solid var(--color-primary);
  margin-left:.25rem;
  color:var(--color-primary);
  font-weight:700
}

.menu-toggle {
  display:none;
  align-items:center;
  gap:.65rem;
  background:white;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  padding:.6rem .8rem;
  min-height:44px;
  color:var(--color-primary)
}
.menu-toggle svg {
  width:20px;
  height:20px
}

.nav-ready .menu-toggle {
  display:inline-flex
}
.nav-ready .site-nav:not(.is-open) {
  display:none
}
.nav-ready .site-nav ul {
  flex-direction:column
}
.nav-ready .site-nav a {
  padding:.85rem 1rem
}
.nav-ready .site-nav .nav-contact {
  margin:.4rem 0 0
}

.preview-note {
  padding:.4rem var(--page-gutter);
  text-align:center;
  background:var(--color-bg-soft);
  color:var(--color-muted);
  font-size:.875rem;
  border-bottom:1px solid var(--color-border)
}

@media(min-width:1024px) {
  .header-inner {
  flex-wrap:nowrap;
  gap:.5rem
}
.site-nav,.nav-ready .site-nav:not(.is-open) {
  display:block;
  width:auto
}
.nav-ready .site-nav ul {
  flex-direction:row
}
.nav-ready .site-nav a {
  padding:.65rem .55rem
}
.nav-ready .site-nav .nav-contact {
  margin:0 0 0 .4rem
}
.nav-ready .menu-toggle {
  display:none
}
.site-header .brand--header {
  width:10rem
}

}