/* ═════════════════ ЗАКРЕПЛЁННАЯ ШАПКА ═════════════════
   Просьба директолога 15.09: «закрепить верхнее меню с контактами при прокрутке».
   Родная шапка стоит в первом экране абсолютно по макету — её не трогаем.
   После первого экрана сверху выезжают отдельные острова из тех же ссылок
   (js/sticky-head.js). Решение Германа 15.09:
   — стекло без обводки, островами: меню отдельно, контакты отдельно;
   — логотип без подложки, режим difference — белый на тёмном, тёмный на белом.
   🔴 Острова лежат прямо в body, без общего контейнера (см. комментарий в js):
   иначе логотип с mix-blend-mode изолирует группу и стекло перестаёт размывать.
   Анимируется каждый остров сам. */

.sh__i{position:fixed; top:1.6rem; z-index:60;
  opacity:0; transform:translateY(-2.4rem); visibility:hidden; pointer-events:none;
  transition:opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1), visibility 0s linear .6s}
.sh__i.is-on{opacity:1; transform:none; visibility:visible; pointer-events:auto;
  transition:opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1)}
.sh__nav.is-on{transition-delay:.05s}
.sh__contacts.is-on{transition-delay:.1s}

/* стекло: тёмное настолько, чтобы белый текст читался и над белыми блоками */
.sh__glass{height:5.2rem; display:flex; align-items:center; border-radius:100rem;
  background:rgba(14,14,18,.62); color:#fff;
  -webkit-backdrop-filter:blur(2rem) saturate(1.6); backdrop-filter:blur(2rem) saturate(1.6)}

/* логотип в своём стеклянном острове — выбор Германа 15.09
   (вариант без подложки с difference наезжал на текст страницы) */
.sh__logo{left:6rem; top:1.6rem; height:5.2rem; padding:0 2.2rem;
  display:flex; align-items:center; border-radius:100rem; background:rgba(14,14,18,.62);
  -webkit-backdrop-filter:blur(2rem) saturate(1.6); backdrop-filter:blur(2rem) saturate(1.6)}
.sh__logo img{width:7.2rem; height:auto; display:block}

/* меню — на месте родного меню по макету (left 32.9rem), до контактов остаётся воздух */
.sh__nav{left:30.1rem; gap:3.6rem; padding:0 2.8rem}
.sh__nav a{font-size:1.4rem; font-weight:500; white-space:nowrap; position:relative; padding:.4rem 0}
.sh__nav a::after{content:''; position:absolute; left:0; bottom:0; width:100%; height:.1rem; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .45s cubic-bezier(.65,0,.2,1)}
.sh__nav a:hover::after,.sh__nav a.is-here::after{transform:scaleX(1); transform-origin:left}

.sh__contacts{right:6rem; gap:.6rem; padding:0 .6rem 0 2.4rem}
.sh__tel{font-size:1.4rem; font-weight:500; white-space:nowrap; margin-right:1rem}
.sh__soc{width:4rem; height:4rem; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.1); transition:background .25s ease}
.sh__soc:hover{background:rgba(255,255,255,.22)}
/* значок в svg нарисован мелко в центре квадрата 32×32 — картинку растягиваем на круг */
.sh__soc img{width:3.2rem; height:3.2rem}
.sh__cta{height:4rem; padding:0 2rem; margin-left:.4rem; border:0; border-radius:100rem; cursor:pointer;
  background:var(--mag,#d2147e); color:#fff; font-family:inherit; font-size:1.4rem; font-weight:500; white-space:nowrap;
  transition:background .3s ease, color .3s ease}
.sh__cta:hover{background:#fff; color:var(--mag,#d2147e)}

.sh__mob{display:none}

/* ── Телефон и планшет: логотип слева, телефон и бургер островом справа ── */
@media (max-width:1023px){
  .sh__i{top:1.2rem}
  .sh__nav,.sh__contacts{display:none}
  .sh__logo{left:2rem; top:1.2rem; height:4.8rem; padding:0 1.8rem}
  .sh__logo img{width:7.4rem}
  .sh__mob{display:flex; right:2rem; height:4.8rem; gap:.2rem; padding:0 .4rem}
  .sh__mob a,.sh__mob button{width:4rem; height:4rem; border:0; background:none; color:#fff; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center}
  .sh__mob svg{width:2rem; height:2rem}
  .sh__mob button span{display:block; height:.3rem; background:#fff}
  .sh__mob button span:nth-child(1){width:2rem}
  .sh__mob button span:nth-child(2){width:1.4rem; margin-top:.4rem; align-self:center; transform:translateX(.3rem)}
}