/* Mobile menu: burger in the header + full-screen overlay. Shown where the pill menu is hidden (≤1100px). */
.burger { display: none; position: relative; width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgb(237 237 237 / .4); background: none; color: var(--text); cursor: pointer; place-items: center; transition: scale .15s ease-out; }
.burger:active { scale: .96; }
.burger:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.burger i { position: absolute; left: 14px; right: 14px; height: 1.5px; background: currentColor; border-radius: 2px; transition: translate .3s var(--ease-out, ease-out), rotate .3s var(--ease-out, ease-out); }
.burger i:first-child { translate: 0 -4px; }
.burger i:last-child { translate: 0 4px; }
.menu-open .burger i:first-child { translate: 0 0; rotate: 45deg; }
.menu-open .burger i:last-child { translate: 0 0; rotate: -45deg; }
.header__end { position: relative; display: flex; align-items: center; gap: 12px; }

.mmenu { position: fixed; inset: 0; z-index: 55; background: var(--bg); padding: 112px var(--m) 32px; display: flex; flex-direction: column; overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity .3s ease-out, visibility 0s linear .3s; }
.menu-open .mmenu { opacity: 1; visibility: visible; transition: opacity .3s ease-out; }
.menu-open .header { z-index: 65; }
.mmenu__list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--divider); }
.mmenu__list li { border-bottom: 1px solid var(--divider); opacity: 0; translate: 0 16px; transition: opacity .5s var(--ease-out, ease-out), translate .5s var(--ease-out, ease-out); transition-delay: calc(var(--i) * 50ms); }
.menu-open .mmenu__list li { opacity: 1; translate: 0 0; }
.mmenu__list a { display: flex; align-items: baseline; gap: 16px; padding-block: 18px; font-family: var(--display); font-weight: 300; font-size: clamp(28px, 8vw, 40px); letter-spacing: -.03em; line-height: 1.1; }
.mmenu__list a span { font-family: var(--mono); font-size: 12px; letter-spacing: 0; color: var(--text-2); }
.mmenu__list a[aria-current="page"] { color: var(--text-2); }
.mmenu__foot { margin-top: auto; padding-top: 40px; display: grid; gap: 20px; }
.mmenu__foot .btn { width: 100%; }
.mmenu__contacts { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; color: var(--text-2); }
.mmenu__contacts a { color: var(--text); }

@media (max-width: 1100px) { .burger { display: grid; } }
/* On phones the header CTA moves into the menu: logo + burger only */
@media (max-width: 700px) { .header__end > .btn { display: none; } .proto-note { display: none; } }
@media (prefers-reduced-motion: reduce) { .mmenu, .mmenu__list li, .burger i { transition: none; } }