/* ═══════════════════════════════════════════════════════════
   СудБокс — выпадающее меню услуг в шапке
   Продолжает стиль «Веллум»: стекло, тонкая типографика, без теней-коробок
   Это боевой файл, а не демо-слой — переносится на сайт вместе с vellum.css
   ═══════════════════════════════════════════════════════════ */

header.site nav .navsub{position:relative;display:inline-flex;align-items:center}
header.site nav .navsub > a{display:inline-flex;align-items:center;gap:6px}

/* стрелка-галочка у пункта «Услуги» */
header.site nav .navsub > a::after{
  content:"";width:5px;height:5px;border-right:1.2px solid currentColor;border-bottom:1.2px solid currentColor;
  transform:rotate(45deg) translateY(-1px);transition:transform .3s ease,opacity .3s ease;opacity:.5
}
header.site nav .navsub:hover > a::after{transform:rotate(225deg) translateY(-2px);opacity:1}

/* зона наведения, чтобы курсор не «проваливался» между пунктом и панелью */
header.site nav .navsub::before{
  content:"";position:absolute;top:100%;left:-20px;right:-20px;height:22px;display:block
}

.submenu{
  position:absolute;top:calc(100% + 18px);left:-22px;z-index:70;
  min-width:640px;padding:14px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(24px) saturate(1.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid rgba(255,255,255,.7);border-radius:var(--r-nav);
  box-shadow:0 18px 54px rgba(50,45,42,.14);
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .28s ease,transform .34s cubic-bezier(.2,.7,.2,1)
}
header.site nav .navsub:hover .submenu,
header.site nav .navsub:focus-within .submenu{opacity:1;transform:none;pointer-events:auto}

.submenu a{
  display:grid;grid-template-columns:auto 1fr;gap:0 12px;align-items:baseline;
  padding:12px 14px;border-radius:11px;transition:background .22s ease
}
.submenu a:hover{background:rgba(50,45,42,.06)}
.submenu a .n{
  grid-row:span 2;font-weight:300;font-size:19px;line-height:1;color:var(--mercury);
  transition:color .22s ease;letter-spacing:.01em
}
.submenu a:hover .n{color:var(--blue)}
.submenu a b{font-weight:400;font-size:14.5px;line-height:1.2;color:var(--carbon)}
.submenu a i{font-style:normal;font-size:12.5px;color:var(--mercury);margin-top:3px}

/* нижняя строка панели — ссылка на весь раздел */
.submenu .all{
  grid-column:1/-1;margin-top:6px;padding:13px 14px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:0 0 11px 11px
}
.submenu .all:hover{background:rgba(50,45,42,.06)}
.submenu .all b{font-size:14px}
.submenu .all span{color:var(--blue);font-size:13px}

/* на мобильных шапка и так сворачивается — панель не показываем */
@media(max-width:1100px){
  .submenu{display:none}
  header.site nav .navsub > a::after{display:none}
}