.preview-notice{position:relative;z-index:1000;background:#fff1cf;color:#453a24;font:14px/1.45 Arial,sans-serif;padding:12px 24px;text-align:center;border-bottom:1px solid #ead69e}.preview-notice a{color:#345f50;margin-left:12px;white-space:nowrap}.preview-detail,.preview-form-note{padding:12px;background:#fff1cf;color:#453a24;border-radius:6px}.preview-form-note{grid-column:1/-1}iframe{display:none!important}video{max-width:100%}

[hidden]{display:none!important}
.preview-no-photo{display:block!important;aspect-ratio:auto!important;min-height:0!important;height:auto!important;background:#edf3ee!important;padding:12px 20px!important;text-decoration:none!important}
.preview-missing-label{display:block;font:13px/1.5 Onest,Arial,sans-serif;color:#60756a}
/* shortcut: keep visible saved text when unsupported scene animations cannot run locally. */
.reveal-on-scroll{opacity:1!important;transform:none!important}
@media(max-width:560px){.preview-notice{padding:9px 12px;font-size:12px}}

.site-header {
  position: relative;
  inset: auto;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 76px;
  padding: 10px var(--page-pad);
  border-bottom: 1px solid rgba(21, 51, 45, 0.1);
  background: rgba(248, 251, 248, 0.94);
  box-shadow: none;
  backdrop-filter: blur(18px) saturate(1.2);
}
.site-header .brand-box { display: flex; flex: none; align-items: center; gap: 16px; }
.site-header .brand { display: inline-flex; flex: none; align-items: center; gap: 11px; }
.site-header .brand-mark { position: static; display: block; flex: 0 0 68px; width: 68px; height: 46px; overflow: visible; }
.site-header .brand-mark img { position: static; display: block; width: 100%; max-width: 100%; height: 100%; object-fit: contain; }
.site-header .brand-name { display: block; color: rgba(21, 51, 45, 0.62); font-size: 16px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.site-header .brand-name strong { font-weight: 680; }

/* Переключатель городов: белая подложка скользит к городу при наведении и нажатии (как на nsk) */
.city-switch { position: relative; isolation: isolate; display: inline-grid; grid-template-columns: 1fr 1fr; flex: none; padding: 3px; border-radius: 999px; background: rgba(21, 51, 45, 0.07); font-size: 13px; line-height: 1; white-space: nowrap; }
.city-switch::before { content: ""; position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(21, 51, 45, 0.14); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.city-switch strong, .city-switch a { position: relative; z-index: 1; padding: 7px 11px; border-radius: 999px; font-weight: 600; text-align: center; transition: color 0.25s; }
.city-switch strong { color: var(--ink); }
.city-switch a { color: rgba(21, 51, 45, 0.7); text-decoration: none; }
.city-switch:has(a:hover)::before, .city-switch.is-go::before { transform: translateX(100%); }
.city-switch:has(a:hover) strong, .city-switch.is-go strong { color: rgba(21, 51, 45, 0.7); }
.city-switch a:hover, .city-switch.is-go a { color: var(--ink); }

.site-header .main-nav { position: static; order: 0; display: flex; flex: 1 1 auto; justify-content: center; gap: clamp(20px, 1.7vw, 34px); width: auto; min-width: 0; overflow: visible; padding: 0; color: rgba(21, 51, 45, 0.72); font-size: 15px; font-weight: 500; }
.site-header .main-nav a { white-space: nowrap; }
.site-header .main-nav a:hover, .site-header .main-nav a:focus-visible, .header-phone:hover, .header-phone:focus-visible { color: var(--ayan); text-decoration: underline; text-underline-offset: 5px; }
.site-header .nav-phone { display: none; }

.header-actions { display: flex; flex: none; align-items: center; gap: 10px; margin-left: auto; }
.header-phone { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; color: var(--ink); font-size: 15px; font-weight: 570; white-space: nowrap; }
.header-calculation { display: inline-flex; align-items: center; min-height: 44px; border: 1px solid var(--ayan); border-radius: 7px; padding: 0 17px; color: #fff; background: var(--ayan); box-shadow: 0 9px 22px rgba(18, 155, 131, 0.17); font: inherit; font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.header-calculation:hover, .header-calculation:focus-visible { color: #fff; background: #0d846f; box-shadow: 0 13px 28px rgba(18, 155, 131, 0.22); transform: translateY(-1px); }
.header-calculation:active { transform: none; }
.header-calculation-short, .menu-toggle { display: none; }

@media (max-width: 1439px) {
  .site-header .main-nav { gap: clamp(12px, 1.4vw, 22px); font-size: 14px; }
  .header-phone { font-size: 14px; }
  .header-calculation { padding-inline: 18px; font-size: 14px; }
  .header-calculation-long { display: none; }
  .header-calculation-short { display: inline; }
}

@media (max-width: 1599px) {
  .header-calculation { font-size: 15px; }
  .header-calculation-long { display: inline; }
  .header-calculation-short { display: none; }
  .header-phone { font-size: 15px; }
  .site-header .main-nav {
    position: absolute; z-index: 20; top: 100%; left: 0; right: 0;
    display: grid; justify-content: stretch; gap: 0;
    border-bottom: 1px solid rgba(21, 51, 45, 0.12);
    padding: 8px var(--page-pad) 18px;
    background: rgba(248, 251, 248, 0.98);
    box-shadow: 0 22px 44px rgba(21, 51, 45, 0.13);
    font-size: 16px;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s 180ms;
  }
  .site-header.is-menu-open .main-nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .site-header .main-nav a { min-height: 46px; border-bottom: 1px solid rgba(21, 51, 45, 0.08); padding: 13px 2px; }
  .site-header .main-nav a:last-child { border-bottom: 0; }
  .menu-toggle { display: grid; place-items: center; align-content: center; gap: 6px; width: 42px; height: 42px; border: 1px solid rgba(21, 51, 45, 0.14); border-radius: 50%; padding: 0; background: rgba(255, 255, 255, 0.78); cursor: pointer; }
  .menu-toggle span { display: block; width: 17px; height: 1.5px; background: var(--ink); transition: transform 180ms ease; }
  .site-header.is-menu-open .menu-toggle span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .site-header.is-menu-open .menu-toggle span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
}

@media (max-width: 900px) {
  .header-phone { display: none; }
  .site-header .nav-phone { display: flex; font-weight: 570; color: var(--ink); }
}

@media (max-width: 720px) {
  .site-header { flex-wrap: wrap; gap: 10px 8px; min-height: 0; }
  .site-header .brand-box { display: contents; }
  .site-header .brand-mark { flex-basis: 52px; width: 52px; height: 36px; }
  .city-switch { order: 10; flex: 0 0 100%; }
  .city-switch strong, .city-switch a { padding: 9px 12px; font-size: 14px; }
  .header-actions { gap: 8px; }
  .header-calculation { min-height: 40px; padding-inline: 13px; font-size: 14px; }
  .header-calculation-long { display: none; }
  .header-calculation-short { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .city-switch::before, .city-switch strong, .city-switch a, .site-header .main-nav, .header-calculation, .menu-toggle span { transition: none; }
}


.site-header {--page-pad:clamp(18px,4vw,64px);--ayan:#129b83;--ink:#15332d;font-family:Onest,Arial,sans-serif}
.site-header a:not(.header-calculation):not(.ayan-account){text-decoration:none}
.site-header .city-switch--nsk::before{transform:translateX(100%)}
.site-header .city-switch--nsk:has(a:hover)::before,.site-header .city-switch--nsk.is-go::before{transform:none}
header .ayan-account {
  display:inline-flex; flex:none; align-items:center; justify-content:center; gap:8px;
  height:44px; min-width:44px; padding:0 12px; box-sizing:border-box;
  border:1px solid #c6d8d2; border-radius:30px; background:#edf4f0; color:#185448;
  font-family:inherit; font-size:14px; font-weight:600; line-height:1;
  text-decoration:none; white-space:nowrap;
}
header .ayan-account svg {display:block; flex:none; width:18px; height:18px}
header .ayan-account:hover {background:#dcebe4; border-color:#97b6a9}
header .ayan-account:focus-visible {outline:2px solid #17675a; outline-offset:2px}
header .ayan-account span {display:inline}
@media(max-width:1599px) and (min-width:1280px), (max-width:1100px) {
  header .ayan-account {padding:0; width:44px}
  header .ayan-account span {display:none}
}
@media(max-width:380px){.site-header .brand-name{display:none}}
@media(max-width:560px){
  .header__in {gap:8px}
  .header__in .ayan-account {margin-left:auto}
  .header__in .burger {margin-left:0}
}


@media (min-width:1600px) and (max-width:1679px) {
  .site-header {gap:16px}
  .site-header .main-nav {gap:10px;font-size:14px}
}
.site-header {line-height:1.25}
.site-header .main-nav {line-height:1.25}
.hm-pts {overflow:clip}

.site-header .brand img.ayan-wordmark{position:static;display:block;width:clamp(120px,9vw,152px);max-width:none;height:auto;object-fit:contain}
@media(max-width:720px){.site-header .brand img.ayan-wordmark{width:clamp(68px,calc(100vw - 252px),112px)}}

/* The header is in normal flow; internal pages no longer need its fixed offset. */
.article-main { padding-top: clamp(52px, 7vw, 94px); }
.hub-map iframe { display: block !important; }
.news-card:not(:has(> .news-card__media:not([hidden]))) > .news-card__body { grid-column: 1 / -1; }