/* <site-header> — top bar, desktop nav, burger + mobile menu */
site-header { display: block; position: sticky; top: 0; z-index: 50; min-height: 77px; background: var(--navy); }
.site-header { background: var(--navy); border-bottom: 1px solid var(--line); }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 14px; }
.site-header__logo { display: flex; flex: none; }
.site-header__logo img { height: clamp(38px, 9vw, 48px); width: auto; }

.site-nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 28px); }
.site-nav__link { color: var(--cream); text-decoration: none; font: 600 14px/1 var(--body); padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.site-nav__link:hover { color: var(--orange); }
.site-nav__link[aria-current="page"] { color: var(--orange); border-bottom-color: var(--orange); }
.site-nav .btn { white-space: nowrap; }

.lang { display: flex; flex: none; border: 1px solid rgba(244, 240, 232, .25); border-radius: 999px; padding: 3px; }
.lang button { background: transparent; border: 0; color: var(--cream); padding: 6px 11px; border-radius: 999px; font: 700 11px/1 var(--body); cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--cream); color: var(--navy); }

/* Burger: two cream lines + a short orange one (the logo's underline). Turns into an X. */
.burger { display: none; flex: none; width: 48px; height: 48px; padding: 0 12px; background: none; border: 1px solid rgba(244, 240, 232, .2); border-radius: 6px; cursor: pointer; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.burger span { display: block; height: 2px; background: var(--cream); border-radius: 1px; transition: transform .25s ease, width .25s ease, opacity .2s ease; }
.burger span:nth-child(1) { width: 24px; }
.burger span:nth-child(2) { width: 14px; background: var(--orange); }
.burger span:nth-child(3) { width: 18px; }
.burger[aria-expanded="true"] { border-color: var(--orange); }
.burger[aria-expanded="true"] span:nth-child(1) { width: 22px; transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { width: 22px; transform: translateY(-8px) rotate(-45deg); }

.mobile-menu { position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 49; background: var(--navy); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 28px; padding: 16px clamp(20px, 6vw, 40px) calc(32px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease; }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu__link { display: flex; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(244, 240, 232, .1); color: var(--cream); text-decoration: none; }
.mobile-menu__link:hover { color: var(--orange); }
.mobile-menu__num { flex: none; width: 24px; font: 600 12px/1 var(--display); letter-spacing: .2em; color: var(--orange); }
.mobile-menu__label { font: 700 clamp(30px, 9vw, 44px)/1 var(--display); text-transform: uppercase; }
.mobile-menu__link[aria-current="page"] .mobile-menu__label { color: var(--orange); }
.mobile-menu__bar { display: block; width: 64px; height: 6px; background: var(--orange); flex: none; }
.mobile-menu__foot { margin-top: auto; display: flex; flex-direction: column; gap: 16px; }
.mobile-menu__foot .btn { width: 100%; padding: 18px; font-size: 16px; }
.mobile-menu__socials { justify-content: center; }
.mobile-menu__social { color: var(--cream); border-color: rgba(244, 240, 232, .25); }
.mobile-menu__social:hover { color: var(--orange); border-color: var(--orange); }
.mobile-menu .lang { align-self: center; }
.mobile-menu .lang button { padding: 10px 20px; font-size: 13px; }

@media (max-width: 899px) {
  .site-nav { display: none; }
  .burger { display: flex; }
}
@media (min-width: 900px) {
  .mobile-menu { display: none; }
}