/* Expand mobile navigation in normal flow: page content moves below it. */
@media (max-width: 1050px) {
  body > header { position: relative; z-index: 101; background: #faf8f1; }
  body > header .brand-image { flex-shrink: 1; min-width: 0; }
  body > header .menu { display: inline-flex; }
  body > header > nav { display: none; }
  body > header.mobile-menu-open {
    height: auto; min-height: 100px; flex-wrap: wrap;
    padding-top: 12px; padding-bottom: 12px;
  }
  body > header > nav.open {
    display: flex; position: static; inset: auto; order: 10;
    flex: 0 0 100%; width: 100%; min-width: 0;
    max-height: 65vh;
    max-height: min(65dvh, calc(100dvh - 150px));
    overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    flex-direction: column; align-items: stretch; gap: 4px;
    margin: 10px 0 0; padding: 8px 6px;
    background: #faf8f1; color: #51432e;
    border: 0; border-top: 1px solid #d8c49c;
    opacity: 1; transform: none; animation: none;
  }
  body > header > nav.open > a {
    flex: 0 0 auto; display: block; min-height: 44px; padding: 12px 10px;
    font-size: 15px; line-height: 1.4; white-space: normal;
    overflow-wrap: anywhere; border-radius: 6px;
  }
  body > header > nav.open > a:hover,
  body > header > nav.open > a:focus-visible {
    background: #f0e5cf; outline-offset: -3px;
  }
  body > header > nav.open > .small-cta { display: none; }
}
@media (max-width: 620px) {
  body > header.mobile-menu-open { min-height: 85px; }
}