/* ── Site menu: mega menu (desktop) / drawer (≤1280px). Markup is rendered by menu.js ── */
.mm {
  --mm-h: 96px; --mm-ease: cubic-bezier(.2, .7, .2, 1);
  position: sticky; top: 0; z-index: 30; min-height: calc(var(--mm-h) + 2px); font-family: var(--sans); color: #fff;
  transition: transform .45s var(--mm-ease);
}
.mm a:hover { opacity: 1; }
/* Sticky behaviour (classes set by menu.js): hides while scrolling down, returns on scroll up */
.mm.is-hidden { transform: translateY(-100%); }

.mm-bar {
  position: relative; z-index: 2; display: flex; align-items: stretch; justify-content: space-between; gap: 24px;
  height: calc(var(--mm-h) + 2px); padding: 0 var(--pad-x); background: var(--forest); border-bottom: 2px solid rgba(242,235,179,.25);
  transition: box-shadow .3s ease;
}
.mm.is-stuck .mm-bar { box-shadow: 0 12px 32px rgba(15,22,18,.22); }
.mm-brand { display: flex; align-items: baseline; align-self: center; gap: 10px; flex: none; }
.mm-brand-name { font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.mm-brand-place { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--cream); }

.mm-nav { display: flex; align-items: stretch; }
.mm-list { display: flex; align-items: stretch; gap: clamp(18px, 1.6vw, 32px); margin: 0; padding: 0; list-style: none; }
.mm-item { display: flex; }
.mm-trigger, .mm-toplink {
  display: flex; align-items: center; gap: 6px; margin: 0 0 -2px; padding: 0; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  color: #fff; font: 500 15px var(--sans); white-space: nowrap; cursor: pointer; transition: color .2s, border-color .2s;
}
.mm-trigger svg { flex: none; transition: transform .35s var(--mm-ease); }
.mm-trigger:hover, .mm-toplink:hover { color: var(--cream); }
.mm-trigger.is-current, .mm-toplink[aria-current] { border-bottom-color: rgba(242,235,179,.45); }
.mm-trigger[aria-expanded="true"] { color: var(--cream); border-bottom-color: var(--cream); }
.mm-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.mm-tools { display: flex; align-items: center; gap: 24px; flex: none; font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.mm-lang { white-space: nowrap; color: rgba(255,255,255,.6); }
.mm-lang a { color: rgba(255,255,255,.6); transition: color .2s; }
.mm-lang a:hover, .mm-lang a[aria-current] { color: #fff; }
.mm-cta { display: flex; justify-content: space-between; gap: 28px; padding: 12px 18px; background: var(--cream); color: var(--ink); font-weight: 700; white-space: nowrap; transition: background .2s; }
.mm-cta:hover { background: #fff; }
.mm-cta--drawer, .mm-toggle { display: none; }

/* Full-width panel */
.mm-panel {
  position: absolute; left: 0; right: 0; top: 100%; margin-top: 2px;
  display: grid; grid-template-columns: 3fr 6fr 3fr; gap: 48px; padding: 48px var(--pad-x) 56px;
  background: var(--paper); color: var(--ink);
  visibility: hidden; opacity: 0; transform: translateY(-10px);
  transition: opacity .25s ease, transform .4s var(--mm-ease), visibility 0s linear .4s;
}
.mm.is-open .mm-panel { transform: none; }          /* switching between open panels only cross-fades */
.mm-panel.is-active { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.mm-panel :focus-visible { outline-color: var(--forest); }

.mm-panel-n { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--forest); }
.mm-panel-t { margin-top: 12px; font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -.03em; text-wrap: pretty; }
.mm-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-content: start; }
.mm-col-t { padding-top: 12px; border-top: 2px solid var(--ink); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.mm-links { margin: 8px 0 0; padding: 0; list-style: none; }
.mm-link { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(29,38,32,.15); font-size: 17px; font-weight: 500; transition: color .2s; }
.mm-link span:last-child { color: var(--forest); transition: transform .3s var(--mm-ease); }
.mm-link:hover, .mm-link[aria-current] { color: var(--forest); }
.mm-link:hover span:last-child { transform: translateX(4px); }
.mm-link[aria-current] { font-weight: 700; }

.mm-feature { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 240px; padding: 28px; background: var(--forest); color: #fff; transition: background .25s; }
.mm-feature:hover { background: var(--forest-deep); }
.mm-feature-k { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cream); }
.mm-feature-t { font-family: var(--serif); font-weight: 300; font-size: 28px; line-height: 1.15; text-wrap: pretty; }
.mm-feature-c { display: flex; justify-content: space-between; padding-top: 12px; border-top: 2px solid var(--cream); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cream); }
.mm-feature-c span:last-child { transition: transform .3s var(--mm-ease); }
.mm-feature:hover .mm-feature-c span:last-child { transform: translateX(4px); }

/* Pages not published yet (no href): visible for structure, greyed and inert */
.mm .is-off { cursor: default; }
.mm-link.is-off, .mm-link.is-off:hover { color: rgba(29,38,32,.36); }
.mm-link.is-off span:last-child { visibility: hidden; }
.mm-feature.is-off:hover { background: var(--forest); }
.mm-feature.is-off .mm-feature-c { color: rgba(242,235,179,.4); border-top-color: rgba(242,235,179,.4); }
.mm-feature.is-off .mm-feature-c span:last-child { visibility: hidden; }
.mm-toplink.is-off, .mm-toplink.is-off:hover { color: rgba(255,255,255,.4); }
.mm-cta.is-off, .mm-cta.is-off:hover { background: rgba(242,235,179,.35); }

/* Panel contents rise in when a panel opens */
.mm-panel.is-active .mm-panel-head,
.mm-panel.is-active .mm-col-t,
.mm-panel.is-active .mm-link,
.mm-panel.is-active .mm-feature { animation: mmRise .45s var(--mm-ease) both; }
.mm-panel.is-active .mm-link { animation-delay: calc(40ms + var(--i, 0) * 25ms); }
.mm-panel.is-active .mm-feature { animation-delay: 80ms; }
@keyframes mmRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.mm-scrim {
  position: fixed; inset: 0; background: rgba(31,42,35,.6);
  visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility 0s linear .3s;
}
.mm.is-open .mm-scrim { visibility: visible; opacity: 1; transition-delay: 0s; }

/* Narrow desktops: tighten the right-hand tools so the bar fits */
@media (max-width: 1440px) {
  .mm-tools { gap: 18px; }
  .mm-cta { gap: 16px; padding: 12px 14px; }
}

/* ── Drawer (tablets & phones) ── */
@media (max-width: 1280px) {
  .mm { --mm-h: 78px; }
  .mm-tools .mm-cta { display: none; }
  .mm-toggle {
    display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: transparent; border: 2px solid var(--cream); border-radius: 0;
    color: #fff; font: 600 13px var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s;
  }
  .mm-toggle:hover, .mm-toggle[aria-expanded="true"] { background: var(--cream); color: var(--ink); }
  .mm-toggle-icon { position: relative; width: 18px; height: 12px; }
  .mm-toggle-icon i { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform .3s var(--mm-ease), opacity .2s; }
  .mm-toggle-icon i:nth-child(1) { top: 0; }
  .mm-toggle-icon i:nth-child(2) { top: 5px; }
  .mm-toggle-icon i:nth-child(3) { top: 10px; }
  .mm-toggle[aria-expanded="true"] .mm-toggle-icon i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .mm-toggle[aria-expanded="true"] .mm-toggle-icon i:nth-child(2) { opacity: 0; }
  .mm-toggle[aria-expanded="true"] .mm-toggle-icon i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  .mm-nav {
    position: fixed; left: 0; right: 0; top: var(--mm-top, var(--mm-h)); bottom: 0; display: flex; flex-direction: column; gap: 32px;
    padding: 8px var(--pad-x) 32px; overflow-y: auto; overscroll-behavior: contain; background: var(--forest-night);
    visibility: hidden; opacity: 0; transform: translateY(-12px);
    transition: opacity .3s ease, transform .45s var(--mm-ease), visibility 0s linear .45s;
  }
  .mm.is-drawer .mm-nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .mm-list { flex-direction: column; gap: 0; }
  .mm-item { display: block; border-bottom: 1px solid rgba(242,235,179,.2); }
  .mm-trigger, .mm-toplink { width: 100%; justify-content: space-between; margin: 0; padding: 18px 0; border: 0; font-size: clamp(22px, 5vw, 30px); font-weight: 700; letter-spacing: -.02em; }
  .mm-trigger svg { width: 20px; height: 20px; }

  .mm-panel { position: static; display: none; grid-template-columns: 1fr; gap: 20px; margin: 0; padding: 0 0 24px; background: none; color: #fff; visibility: visible; opacity: 1; transform: none; transition: none; }
  .mm-panel.is-active { display: grid; }
  .mm-panel-head, .mm-feature, .mm-cols.is-single .mm-col-t { display: none; }
  .mm-panel :focus-visible { outline-color: var(--cream); }
  .mm-cols { grid-template-columns: 1fr; gap: 20px; }
  .mm-col-t { border-top-color: rgba(242,235,179,.35); color: var(--cream); }
  .mm-links { margin-top: 0; }
  .mm-link { border-bottom-color: rgba(242,235,179,.12); }
  .mm-link span:last-child { color: var(--cream); }
  .mm-link:hover, .mm-link[aria-current] { color: var(--cream); }
  .mm-link.is-off, .mm-link.is-off:hover { color: rgba(255,255,255,.32); }

  .mm-cta--drawer { display: flex; margin-top: auto; padding: 18px 24px; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
  .mm-scrim { display: none; }
}
@media (max-width: 520px) {
  .mm-tools { gap: 16px; }
  .mm-toggle { padding: 10px 12px; }
  .mm-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 400px) {
  .mm-bar { gap: 12px; }
  .mm-brand-place { display: none; }
}

.mm-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mm, .mm *, .mm *::before, .mm *::after { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; }
}