.burger-menu {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  justify-items: end;
  pointer-events: none;
}
.burger-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 20, 15, .5);
  opacity: 0;
  transition: opacity 360ms ease;
}
.burger-menu__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  min-height: 100svh;
  padding: 32px 16px 24px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #062b20 url("../../images/burger/background-burger.webp") center / cover no-repeat;
  box-shadow: -20px 0 54px rgba(0, 14, 10, .32);
  clip-path: circle(0 at calc(100% - 54px) 54px);
  opacity: .98;
  /* Keep the existing circular reveal, but avoid animating a full-screen
     blur. `filter` repaints the whole panel every frame on many phones,
     whereas opacity and transform can stay on a composited layer. */
  transform: translate3d(20px, 0, 0) scale(.985);
  transform-origin: top right;
  will-change: clip-path, transform, opacity;
  backface-visibility: hidden;
  contain: paint;
  transition: clip-path 720ms cubic-bezier(.16, 1, .3, 1), transform 520ms cubic-bezier(.16, 1, .3, 1), opacity 280ms ease;
}
.burger-menu--open { pointer-events: auto; }
.burger-menu--open .burger-menu__backdrop { opacity: 1; }
.burger-menu--open .burger-menu__panel {
  clip-path: circle(150% at calc(100% - 54px) 54px);
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.burger-menu__header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
}
.burger-menu__brand { display: block; width: min(210px, 58vw); }
.burger-menu__brand img { display: block; width: 100%; height: auto; }
.burger-menu__close {
  display: grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  position: relative;
  transition: background-color 180ms ease, transform 260ms ease;
}
.burger-menu__close::before,
.burger-menu__close::after {
  position: absolute;
  width: 21px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}
.burger-menu__close::before { transform: rotate(45deg); }
.burger-menu__close::after { transform: rotate(-45deg); }
.burger-menu__close:hover { background: transparent; transform: rotate(90deg); }
.burger-menu__panel :is(a, button):focus-visible { outline: 2px solid #e5c996; outline-offset: 4px; }
.burger-menu__content { display: flex; flex: 1; flex-direction: column; }
.burger-menu__nav { margin: clamp(42px, 8vh, 86px) 0 28px; }
.burger-menu__nav a,
.burger-menu__contact {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #fff;
  text-decoration: none;
}
.burger-menu__nav a {
  min-height: 62px;
  font-size: clamp(25px, 5.4vw, 34px);
  font-weight: 500;
  letter-spacing: -.035em;
  transition: color 180ms ease, transform 220ms ease;
  color: rgba(255,255,255,.72);
}
.burger-menu__nav a:hover { color: #fff; transform: translateX(7px); }
.burger-menu__icon {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  color: rgba(255,255,255,.72);
}
.burger-menu__icon svg,
.burger-menu__action svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}
.burger-menu__divider { height: 1px; margin: 6px 0 22px; border: 0; background: rgba(233, 244, 237, .36); }
.burger-menu__contact { min-height: 52px; font-size: clamp(20px, 4.6vw, 28px); font-weight: 500; }
.burger-menu__contact .burger-menu__icon { color: #e5c996; }
.burger-menu__actions { display: flex; gap: 14px; margin: 18px 0 26px; }
.burger-menu__action {
  position: relative;
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  background: rgba(255, 255, 255, .075);
  color: #fff;
  text-decoration: none;
  transition: background-color 180ms ease, transform 200ms ease;
}
.burger-menu__action:hover { background: rgba(255, 255, 255, .16); transform: translateY(-3px); }
.burger-menu__action svg { width: 31px; height: 31px; }
.burger-menu__badge {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #4d9e84;
  color: #fff;
  font: 700 12px/1 var(--font-sans);
}
.burger-menu__socials { display: flex; flex-wrap: wrap; gap: 13px; padding-top: 27px; }
.burger-menu__socials a {
  display: grid;
  width: 61px;
  height: 61px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease, transform 200ms ease;
}
.burger-menu__socials a:hover { background: #fff; color: var(--color-brand); transform: translateY(-3px); }
.burger-menu__panel > *, .burger-menu__nav a { opacity: 0; transform: translateY(18px); transition: opacity 380ms ease, transform 500ms cubic-bezier(.16, 1, .3, 1); }
.burger-menu--open .burger-menu__panel > *, .burger-menu--open .burger-menu__nav a { opacity: 1; transform: translateY(0); }
.burger-menu--open .burger-menu__header { transition-delay: 170ms; }
.burger-menu--open .burger-menu__content { transition-delay: 250ms; }
.burger-menu--open .burger-menu__nav a:nth-child(1) { transition-delay: 290ms; }
.burger-menu--open .burger-menu__nav a:nth-child(2) { transition-delay: 340ms; }
.burger-menu--open .burger-menu__nav a:nth-child(3) { transition-delay: 390ms; }
.burger-menu--open .burger-menu__nav a:nth-child(4) { transition-delay: 440ms; }
.burger-menu--open .burger-menu__nav a:nth-child(5) { transition-delay: 490ms; }
body.burger-menu-open { overflow: hidden; }
body.burger-menu-open .site-header-anchor {
  opacity: 0;
  pointer-events: none;
}
/* The menu is rendered inside the WordPress template-part stacking context.
   Raise that context above the local WordPress admin bar while the menu is open. */
body.burger-menu-open .wp-site-blocks > header.wp-block-template-part { z-index: 100000; }
@media (min-width: 1051px) { .burger-menu { display: none; } }
/* The overlay itself sits underneath the WordPress admin bar in local previews.
   Keep its controls in a safe area rather than letting the bar cover them. */
@media (max-width: 1050px) {
  .burger-menu__header { margin-top: 0; }
  body.admin-bar .burger-menu__header { margin-top: 46px; }
}
@media (max-width: 430px) {
  /* A narrow phone gets its own compact rhythm: all controls remain visible at
     430 × 932 without a scroll, while the header stays below the admin bar. */
  .burger-menu__panel { padding: 18px 16px 20px; }
  .burger-menu__header { min-height: 54px; }
  /* Match the mobile site header: 16px gutters, 140px logo and a 28px control. */
  .burger-menu__brand { width: 140px; }
  .burger-menu__close { width: 28px; height: 28px; }
  .burger-menu__close::before,
  .burger-menu__close::after { width: 24px; }
  .burger-menu__nav { margin: 16px 0 10px; }
  .burger-menu__nav a { min-height: 45px; gap: 16px; font-size: 24px; }
  .burger-menu__icon { flex-basis: 39px; width: 39px; height: 39px; }
  .burger-menu__icon svg { width: 27px; height: 27px; }
  .burger-menu__divider { margin: 3px 0 9px; }
  .burger-menu__contact { min-height: 40px; font-size: 20px; }
  .burger-menu__actions { gap: 11px; margin: 9px 0 10px; }
  .burger-menu__action { width: 54px; height: 54px; border-radius: 16px; }
  .burger-menu__action svg { width: 27px; height: 27px; }
  .burger-menu__socials { gap: 10px; padding-top: 10px; }
  .burger-menu__socials a { width: 46px; height: 46px; font-size: 13px; }
}
/* Compact layout for short mobile viewports, e.g. 518 × 605 in DevTools. */
@media (max-width: 1050px) and (max-height: 700px) {
  .burger-menu__panel { padding: 14px 16px 16px; }
  .burger-menu__header { min-height: 42px; }
  .burger-menu__brand { width: 124px; }
  .burger-menu__close { width: 28px; height: 28px; }
  .burger-menu__close::before,
  .burger-menu__close::after { width: 20px; }
  .burger-menu__nav { margin: 14px 0 7px; }
  .burger-menu__nav a { min-height: 38px; gap: 11px; font-size: 20px; }
  .burger-menu__icon { flex-basis: 30px; width: 30px; height: 30px; }
  .burger-menu__icon svg { width: 22px; height: 22px; }
  .burger-menu__divider { margin: 3px 0 7px; }
  .burger-menu__contact { min-height: 32px; gap: 11px; font-size: 16px; }
  .burger-menu__contact .burger-menu__icon svg { width: 21px; height: 21px; }
  .burger-menu__actions { gap: 9px; margin: 7px 0 9px; }
  .burger-menu__action { width: 46px; height: 46px; border-radius: 13px; }
  .burger-menu__action svg { width: 22px; height: 22px; }
  .burger-menu__badge { top: -6px; right: -6px; width: 20px; height: 20px; font-size: 9px; }
  .burger-menu__socials { gap: 9px; padding-top: 8px; }
  .burger-menu__socials a { width: 40px; height: 40px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .burger-menu__backdrop, .burger-menu__panel, .burger-menu__panel > *, .burger-menu__nav a { transition: none; }
  .burger-menu__panel { will-change: auto; }
}

@media (max-width: 1050px) {
  .burger-menu__panel { padding-top: 8px; }
  .burger-menu__header { min-height: 64px; }
}
@media (max-width: 430px) {
  .burger-menu__action { width: 48px; height: 48px; border-radius: 14px; }
  .burger-menu__action svg { width: 24px; height: 24px; }
}