/* ════════════════════════════════════════════════════════════════
   Site navigation — one stylesheet for every page.
   Desktop: the links sit in the bar. Phones and tablets (≤ 960px):
   a menu button opens a side drawer; the main call-to-action stays in the bar.
   Uses the colour variables each page already defines. Behaviour: site-nav.js.
   ════════════════════════════════════════════════════════════════ */
nav.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 32px; background: rgba(252,242,234,.97); box-shadow: 0 1px 0 var(--c-line);
  transition: background .4s, box-shadow .4s, padding .3s;
}
/* The home page lets its hero show through until you scroll (its script adds .scrolled) */
nav.site-nav.nav-clear:not(.scrolled):not(.menu-open) { background: rgba(252,242,234,0); box-shadow: none; padding: 20px 32px; }
.nav-brand { font-family: var(--f-display); font-size: 22px; color: var(--c-coral); font-weight: 500; letter-spacing: -.02em; white-space: nowrap; }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--c-ink); opacity: .75; transition: opacity .2s; white-space: nowrap; }
.nav-links a:hover { opacity: 1; }
.nav-links a[aria-current="page"] { opacity: 1; box-shadow: 0 2px 0 var(--c-coral); }
.nav-cta {
  background: var(--c-coral); color: #fff !important; opacity: 1 !important;
  padding: 9px 18px; border-radius: 100px; font-size: 13.5px; transition: background .25s, transform .2s;
}
.nav-links a.nav-cta[aria-current] { box-shadow: none; }
.nav-cta:hover { background: var(--c-burg); transform: translateY(-1px); }
.nav-menu { display: contents; }
.nav-toggle, .nav-close { display: none; }
.nav-scrim { display: none; }

@media (max-width: 960px) {
  nav.site-nav, nav.site-nav.nav-clear:not(.scrolled):not(.menu-open) { padding: 12px 10px 12px 20px; gap: 8px; }
  .nav-links { gap: 4px; }
  .nav-brand { font-size: 19px; }
  .nav-cta { padding: 8px 14px; font-size: 13px; white-space: nowrap; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
    width: 40px; height: 40px; background: none; border: 0; cursor: pointer; border-radius: 10px; color: var(--c-ink);
  }
  .nav-toggle span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; }
  .nav-toggle:focus-visible, .nav-close:focus-visible { outline: 3px solid rgba(234,90,87,.4); outline-offset: 2px; }

  /* The side drawer */
  .nav-menu {
    display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; z-index: 2;
    width: min(86vw, 340px); padding: 76px 26px 28px; overflow-y: auto;
    background: var(--c-bg); box-shadow: -28px 0 56px -28px rgba(36,27,25,.4);
    transform: translateX(100%); visibility: hidden;
    transition: transform .32s cubic-bezier(.2,.7,.2,1), visibility 0s linear .32s;
  }
  nav.site-nav.menu-open .nav-menu { transform: none; visibility: visible; transition: transform .32s cubic-bezier(.2,.7,.2,1), visibility 0s; }
  .nav-links .nav-menu a { display: block; padding: 17px 2px; font-size: 18px; font-weight: 500; opacity: 1; border-bottom: 1px solid var(--c-line); box-shadow: none; }
  .nav-links .nav-menu a:last-of-type { border-bottom: 0; }
  .nav-links .nav-menu a[aria-current="page"] { color: var(--c-coral); font-weight: 600; box-shadow: none; }
  .nav-close {
    display: grid; place-items: center; position: absolute; top: 14px; right: 12px; width: 44px; height: 44px;
    background: none; border: 0; border-radius: 10px; cursor: pointer; color: var(--c-ink); font-size: 32px; line-height: 1;
  }
  .nav-scrim { display: block; position: fixed; inset: 0; z-index: 99; background: rgba(36,27,25,.42); opacity: 0; transition: opacity .3s; }
  .nav-scrim.show { opacity: 1; }
  .nav-scrim[hidden] { display: none; }
  html.nav-locked { overflow: hidden; }
}
@media (max-width: 400px) { .nav-brand { font-size: 17px; } .nav-cta { padding: 7px 12px; font-size: 12.5px; } }
@media (prefers-reduced-motion: reduce) { .nav-menu, .nav-scrim { transition: none !important; } }