/* Header and mobile menu */
.hdr-r {
  display:flex;
  align-items:center;
  gap:var(--space-2);
}
.menu {
  position:static;
}
.menu summary {
  list-style:none;
  display:grid;
  place-items:center;
  width:var(--tap-size);
  height:var(--tap-size);
  border-radius:var(--radius-lg);
  border:1.5px solid var(--color-border-strong);
  color:var(--color-primary);
  cursor:pointer;
  background:transparent;
}
.menu summary::-webkit-details-marker {
  display:none;
}
.menu[open] summary {
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:var(--color-white);
}
.menu-panel {
  position:absolute;
  left:0;
  right:0;
  top:100%;
  background:var(--color-background);
  border-bottom:1px solid var(--color-border);
  box-shadow:var(--shadow-lift);
  padding:var(--space-1) var(--space-5) var(--space-5);
}
.menu-panel .ml {
  display:flex;
  align-items:center;
  min-height:54px;
  border-bottom:1px solid var(--color-border-soft);
  font-size:var(--fs-18);
  font-weight:600;
  color:var(--color-text);
  text-decoration:none;
}
.menu-panel .ml[aria-current="page"] {
  color:var(--color-accent);
}
.menu-panel .btn {
  width:100%;
  margin-top:var(--space-4);
}
.nav a[aria-current="page"] {
  color:var(--color-accent);
  font-weight:600;
}
@media (min-width:860px){
  .hdr .wrap {
    max-width:1440px;
    padding-inline:var(--space-10);
  }
  .hdr-r {
    gap:var(--space-4);
  }
  .nav {
    display:none;
  }
  .hdr-phone {
    display:none;
  }
  .call {
    display:grid;
  }
  .menu {
    display:block;
  }
  .hdr-r {
    display:flex;
    align-items:center;
    gap:22px;
  }
}
@media (min-width:1100px){
  .nav {
    display:flex;
    gap:var(--space-6);
  }
  .menu {
    display:none;
  }
  .hdr-r {
    gap:var(--space-5);
  }
}
@media (min-width:1280px){
  .nav {
    gap:28px;
  }
  .hdr-phone {
    display:inline-flex;
  }
  .call {
    display:none;
  }
  .hdr-r {
    gap:var(--space-6);
  }
}

/*
 * Header fit fix. In the design the desktop navigation, phone number and button do not fit in one row
 * (links and the button wrapped onto two lines at every desktop width). Keep every item on one line and let the
 * full navigation appear only where it fits; narrower desktops keep the menu button, and the phone number
 * shows as text from 1440px (an icon button before that).
 */
.nav a,
.hdr-phone,
.hdr-cta {
  white-space:nowrap;
}
@media (min-width:1100px) {
  .nav {
    display:none;
  }
  .menu {
    display:block;
  }
  .hdr-phone {
    display:none;
  }
  .call {
    display:grid;
  }
}
@media (min-width:1320px) {
  .nav {
    display:flex;
    gap:20px;
  }
  .menu {
    display:none;
  }
  .hdr-r {
    gap:var(--space-5);
  }
  .hdr-cta {
    font-size:15px;
    padding:0 var(--space-5);
  }
}
@media (min-width:1440px) {
  .nav {
    gap:22px;
  }
  .hdr-phone {
    display:inline-flex;
  }
  .call {
    display:none;
  }
}