html {
  --navigation-height: 84px;
  scroll-padding-top: calc(var(--navigation-height) + 20px);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--navigation-height);
  max-width: none;
  padding-inline: max(32px, calc((100% - 1376px) / 2));
  background: var(--paper);
  box-shadow: 0 4px 16px #28362d0a;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: 1fr;
  grid-template-areas: "brand quotes navigation";
  column-gap: 20px;
}

.site-header .brand { grid-area: brand; justify-self: start; }
.site-header nav { grid-area: navigation; justify-self: end; gap: 20px; font-size: 12px; }
.site-header .nav-contact { padding-inline: 16px; }
.site-header .nav-contact span { margin-left: 18px; }
.site-header .menu-toggle { grid-area: menu; justify-self: end; }
.header-quotes {
  grid-area: quotes;
  justify-self: center;
  align-self: center;
  display: flex;
  gap: 12px;
}
.quote-pop {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  min-height: 44px;
  padding: 12px 16px;
  border: 0;
  border-radius: 4px;
  background: var(--aqua);
  color: #173a38;
  box-shadow: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transition: background .15s;
}
.quote-pop:hover { background: #17d9cf; }
.quote-pop:active { background: #00b8b0; }
.quote-pop span { font-size: 12px; }

@media (max-width: 1359px) {
  .site-header { grid-template-columns: auto minmax(0, 1fr) auto; padding-inline: 26px; column-gap: 16px; }
  .site-header .brand > span { font-size: 17px; }
  .site-header .brand img { width: 42px; }
  .site-header .brand small { font-size: 6px; }
  .site-header nav { gap: 16px; }
}

@media (max-width: 1099px) {
  .site-header { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "brand quotes menu"; }
  .site-header .menu-toggle {
    display: block;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 12px;
    padding: 10px 0 10px 15px;
  }
  .site-header .menu-toggle span { margin-left: 12px; }
  .site-header nav {
    display: none;
    position: absolute;
    top: calc(var(--navigation-height) - 1px);
    left: 0;
    right: 0;
    background: var(--paper);
    padding: 24px;
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    justify-self: stretch;
    gap: 19px;
    max-height: calc(100vh - var(--navigation-height));
    max-height: calc(100dvh - var(--navigation-height));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-header nav.open { display: flex; }
  .site-header .nav-contact { max-width: 180px; }
}

@media (max-width: 819px) {
  html { --navigation-height: 112px; }
  .site-header {
    padding-inline: 22px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 60px 52px;
    grid-template-areas: "brand menu" "quotes quotes";
  }
  .header-quotes { align-self: start; }
}

@media (max-width: 360px) {
  .site-header .brand { gap: 9px; }
  .site-header .brand img { width: 36px; }
  .site-header .brand > span { font-size: 14px; letter-spacing: .5px; }
  .site-header .brand small { font-size: 5px; letter-spacing: 1.2px; }
  .header-quotes { gap: 8px; }
  .quote-pop { padding-inline: 10px; gap: 6px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .quote-pop { transition: none; }
}