/* Site header, shared by the home page (React) and every other page. The only place header styles live.
   Wide screens: logo | menu | Talk to us, lined up with the content column.
   Phones and small tablets: logo | Talk to us | menu button; the menu opens as a panel under the bar. */
header.top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  min-height: 4.25rem;
  padding: .6rem max(var(--gutter, 1rem), calc((100% - var(--wrap, 72rem)) / 2));
  background: color-mix(in srgb, var(--paper, #FAF7F2) 94%, transparent);
  backdrop-filter: blur(8px);
}
header.top .brand { display: flex; align-items: center; flex: none; }
header.top .brand img { height: 2.1rem; width: auto; display: block; }
header.top nav { margin-left: auto; display: flex; align-items: center; gap: .4rem 1.1rem; font-size: .95rem; }
header.top nav a { color: var(--ink, #2E2925); text-decoration: none; font-weight: 500; }
header.top nav a:hover { color: var(--accent-d, #7E5339); text-decoration: underline; text-underline-offset: .3em; }
header.top .header-cta { flex: none; }
header.top .menu-btn { display: none; }

@media (max-width: 899px) {
  header.top { gap: .6rem; min-height: 3.75rem; }
  header.top .brand img { height: 1.8rem; }
  header.top .header-cta { margin-left: auto; padding: .5rem 1rem; font-size: .92rem; }
  header.top .menu-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--line, #E4DCD1); border-radius: 999px;
    background: #fff; color: var(--ink, #2E2925); cursor: pointer;
  }
  header.top .menu-btn span, header.top .menu-btn span::before, header.top .menu-btn span::after {
    display: block; width: 1.05rem; height: 2px; background: currentColor; border-radius: 2px; position: relative; content: ""; transition: transform .25s, opacity .25s;
  }
  header.top .menu-btn span::before { position: absolute; top: -6px; left: 0; }
  header.top .menu-btn span::after { position: absolute; top: 6px; left: 0; }
  header.top.open .menu-btn span { background: transparent; }
  header.top.open .menu-btn span::before { transform: translateY(6px) rotate(45deg); }
  header.top.open .menu-btn span::after { transform: translateY(-6px) rotate(-45deg); }
  header.top nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .25rem var(--gutter, 1rem) 1rem;
    background: var(--paper, #FAF7F2); border-bottom: 1px solid var(--line, #E4DCD1);
    box-shadow: 0 12px 24px rgba(46, 41, 37, .08);
  }
  header.top.open nav { display: flex; }
  header.top nav a { padding: .8rem 0; border-bottom: 1px solid var(--line, #E4DCD1); font-size: 1.05rem; }
  header.top nav a:last-child { border-bottom: 0; }
}