header.site {
  position: sticky; top: env(safe-area-inset-top,0px); z-index: 50;
  background: var(--bg); border-bottom: 1px solid var(--line);

  .wrap.hdr { display: flex; align-items: center; gap: 28px; min-height: 0; padding-block: 10px; }
  .logo {
    display: block; flex: none;

    img { height: 90px; width: auto; display: block; }
  }
  .hright { flex: 1; min-width: 0; display: grid; gap: 12px 6px; }
  .hcontact {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 22px;
    font-size: 13.5px; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--line);
  }
  .hc {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;

    .icon { width: 14px; font-size: 14px; color: var(--magenta); flex: none; }
    .location-dot { width: 11px; }
  }
  .hc-tel { color: var(--blue-deep); font-weight: 600; }
  .hnav { display: flex; justify-content: flex-end; align-items: center; }
  .burger {
    display: none; margin-left: auto; background: none; border: 2px solid var(--line);
    border-radius: var(--r); padding: 10px 12px; font: 600 15px var(--f-body); color: var(--ink); cursor: pointer;
  }

  @media (max-width: 1320px) { .hc-adr { display: none; } }
  @media (max-width: 1320px) {
    .burger { display: block; }
    .hnav { position: static; }
    .hcontact { border-bottom: 0; padding-bottom: 0; }
    .hright { grid-template-columns: 1fr auto; align-items: center; }
  }
  @media (max-width: 640px) {
    .hc-mail { display: none; }
    .logo img { height: 56px; }
  }
  @media (max-width: 380px) {
    .wrap.hdr { gap: 8px; }
    .logo img { height: 48px; }
    .hc-tel { font-size: 12px; }
    .burger { padding: 8px; }
  }
}

nav.main {
  margin-left: auto;

  > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
  li { position: relative; }
  > ul > li > a {
    display: block; white-space: nowrap; padding: 12px 11px; font: 600 17px/1 var(--f-display);
    text-decoration: none; color: var(--ink); border-radius: var(--r);

    &:hover, &[aria-current] { color: var(--blue); background: var(--tint); }
  }
  .has > a::after {
    content: ""; display: inline-block; width: 6px; height: 6px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); margin-left: 8px; position: relative; top: -3px;
  }
  .dd {
    position: absolute; left: 0; top: 100%; min-width: 250px; background: #fff;
    border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 14px 30px rgba(11,76,120,.14);
    padding: 8px; list-style: none; margin: 0; opacity: 0; visibility: hidden;
    transform: translateY(6px); transition: .15s;

    a { display: block; padding: 10px 12px; border-radius: 4px; text-decoration: none; font-weight: 500; }
    a:hover { background: var(--tint); color: var(--blue); }
    small { display: block; color: var(--muted); font-size: 13px; font-weight: 400; }
  }
  li:not(.--dismissed):is(:hover, :focus-within) > .dd { opacity: 1; visibility: visible; transform: none; }
  li.end > .dd { left: auto; right: 0; }

  @media (max-width: 1320px) {
    display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff;
    border-bottom: 1px solid var(--line); max-height: 75vh; overflow: auto;
    padding: 8px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px));

    &.open { display: block; }
    > ul { flex-direction: column; }
    li.end > .dd { right: auto; }
    .dd {
      position: static; opacity: 1; visibility: visible; transform: none;
      box-shadow: none; border: 0; padding: 0 0 6px 14px; min-width: 0;
    }
  }
}