.site-header {
  --nav-top: max(18px, env(safe-area-inset-top));
  --nav-bottom: max(18px, env(safe-area-inset-bottom));
  position: fixed;
  inset: var(--nav-top) 0 auto;
  z-index: 50;
  padding: 0 20px;
}

.nav {
  width: min(100%, 1260px);
  min-height: 72px;
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 20px 70px rgba(19, 47, 60, 0.13);
  backdrop-filter: blur(18px);
  transition: box-shadow 180ms ease, background 180ms ease;
}

.site-header.is-scrolled .nav {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 54px rgba(19, 47, 60, 0.16);
}

.brand { display: inline-flex; align-items: center; width: 166px; }
.brand img { width: 100%; height: auto; }
.nav__links { display: flex; align-items: center; justify-content: center; gap: 2px; }
.nav__links a, .nav__cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 10px;
  border-radius: 12px;
  color: rgba(19, 47, 60, 0.78);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 170ms ease, background 170ms ease, transform 170ms ease;
}
.nav__links a:hover { color: var(--ink); background: rgba(19, 47, 60, 0.07); }
.nav__links > a[aria-current="location"] { color: var(--red-dark); background: rgba(222, 74, 83, 0.08); }
.nav__links .nav__link--accent, .nav__links .nav__link--accent:hover,
.nav__links .nav__link--accent[aria-current="location"] { color: var(--red); }
.nav__links .nav__link--accent:hover { background: rgba(222, 74, 83, 0.08); }
.nav__cta, .nav__links .nav__cta { color: #fff; background: var(--red); padding: 0 18px; }
.nav__cta:hover, .nav__links .nav__cta:hover { color: #fff; background: var(--red-dark); }
.nav__cta--desktop { grid-column: 4; justify-self: end; }
.nav__actions, .nav__arrow { display: none; }

.nav__account, .nav__toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  line-height: 0;
  color: var(--ink);
  background: #e9eeee;
  transition: background 170ms ease, color 170ms ease;
}
.nav__account { grid-column: 3; }
.nav__account .soto-icon { width: 22px; height: 22px; }
.nav__account:hover, .nav__toggle:hover { color: #fff; background: var(--ink); }
.nav a:focus-visible, .nav button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.nav__toggle { display: none; justify-self: end; cursor: pointer; }
.nav__toggle .soto-icon--close,
.nav__toggle[aria-expanded="true"] .soto-icon--burger_menu { display: none; }
.nav__toggle[aria-expanded="true"] .soto-icon--close { display: inline-block; }
.nav-backdrop { position: fixed; inset: 0; z-index: 49; background: rgba(19, 47, 60, 0.38); }
.nav-backdrop[hidden] { display: none; }
html.has-nav-open { overflow: hidden; }
body.is-nav-locked { position: fixed; inset-inline: 0; top: var(--nav-scroll-top); width: 100%; overflow: hidden; }

@media (max-width: 1240px) {
  .nav { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: 50px; gap: 10px; align-content: start; }
  .brand { grid-column: 1; grid-row: 1; }
  .nav__account { grid-column: 2; grid-row: 1; }
  .nav__toggle { display: grid; grid-column: 3; grid-row: 1; }
  .nav__cta--desktop { display: none; }
  .site-header.is-nav-open .nav {
    height: calc(100dvh - var(--nav-top) - var(--nav-bottom));
    background: #fff;
    box-shadow: 0 24px 80px rgba(19, 47, 60, 0.18);
    backdrop-filter: none;
  }
  .site-header.is-nav-open .nav__account { visibility: hidden; pointer-events: none; }
  .nav__links {
    position: absolute;
    inset: 88px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    max-width: 680px;
    margin: 0 auto;
    padding: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 180ms ease, transform 180ms ease;
    scrollbar-width: thin;
  }
  .site-header.is-nav-open .nav__links { visibility: visible; opacity: 1; transform: none; }
  .nav__links > a {
    flex: 0 0 auto;
    min-height: 64px;
    justify-content: space-between;
    padding: 12px 14px;
    color: var(--ink);
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.025em;
    white-space: normal;
  }
  .nav__arrow { display: inline-block; flex: 0 0 20px; opacity: 0.4; }
  .nav__links > a:hover .nav__arrow, .nav__links a[aria-current] .nav__arrow { opacity: 1; }
  .nav__actions { display: grid; flex: 0 0 auto; gap: 10px; margin-top: auto; padding-top: 28px; }
  .nav__actions a { width: 100%; min-height: 54px; padding: 14px 18px; font-size: 19px; font-weight: 700; line-height: 1.3; white-space: normal; }
  .nav__actions .soto-icon { width: 20px; height: 20px; }
  .nav__links .nav__account-link { color: var(--ink); background: #e9eeee; }
  .nav__links .nav__account-link:hover { color: var(--ink); background: #dce5e6; }
}

@media (max-width: 820px) {
  .site-header { --nav-top: max(12px, env(safe-area-inset-top)); --nav-bottom: max(12px, env(safe-area-inset-bottom)); padding: 0 12px; }
  .nav { min-height: 66px; grid-template-rows: 44px; border-radius: 18px; padding: 10px 14px; gap: 8px; }
  .brand { width: 136px; }
  .nav__links { inset: 80px 10px 10px; }
}

@media (max-width: 1240px) and (max-height: 600px) {
  .nav__links { inset-block-start: 72px; }
  .nav__links > a { min-height: 48px; padding-block: 8px; font-size: 24px; }
  .nav__actions { padding-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav, .nav__links, .nav a, .nav button { transition: none; }
}