/* Единая шапка, хлебные крошки и подвал студии VH (направление А «Каталог», утверждено 03.10.2026).
   Разметку вставляет scripts/build-layout.cjs — не править её на страницах вручную. */
.vh-header,.vh-footer{--vh-panel:#10131b;--vh-ink:#f6f3ee;--vh-soft:#b9b8bd;--vh-faint:#8f929a;--vh-rule:rgba(255,255,255,.12);--vh-accent:#ff6a3d;--vh-on-accent:#15100d;
  font-family:"Onest","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.4;
  /* страницы задают свои стили для header/footer — гасим их */
  display:block;width:auto;max-width:none;margin:0;padding:0;border:0;min-height:0;height:auto;gap:0;text-align:left;box-shadow:none;letter-spacing:normal}
.vh-header *,.vh-footer *{box-sizing:border-box}
.vh-header a,.vh-footer a,.vh-header button{color:inherit;text-decoration:none;text-transform:none;letter-spacing:normal;font-family:inherit}
:where(.vh-header) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;margin:0;min-height:0;box-shadow:none;width:auto}
:where(.vh-header,.vh-footer) :is(h2,p,ul,ol,li){margin:0;padding:0}
.vh-header :focus-visible,.vh-footer :focus-visible{outline:2px solid var(--vh-accent);outline-offset:3px;border-radius:6px}

/* Старые шапки были фиксированными, и страницы держали под них отступ сверху. Новая шапка стоит в потоке. */
body:has(> .vh-header){padding-top:0!important}
html:has(.vh-header){scroll-padding-top:112px}
/* ссылка «К содержанию» при фокусе с клавиатуры — поверх шапки */
a:is(.skip,.skip-link):focus{position:fixed!important;top:8px!important;left:8px!important;z-index:2147483647!important}
.vh-header{position:sticky;top:0;z-index:2147483000;color:var(--vh-ink);background:#0b0d13;border-bottom:1px solid var(--vh-rule)}
.vh-header.is-open{background:var(--vh-panel);backdrop-filter:none;-webkit-backdrop-filter:none}
.vh-bar{display:flex;align-items:center;gap:28px;height:68px;margin:0 auto;padding:0 24px;max-width:1240px}
.vh-brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.vh-brand img{width:56px;height:42px;object-fit:contain}
.vh-brand span{font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--vh-ink)}
.vh-nav{display:flex;align-items:center;gap:26px;margin-left:auto;font-size:15px}
.vh-nav>a,.vh-services-toggle{color:var(--vh-soft);transition:color .2s;white-space:nowrap}
@media (max-width:1100px){.vh-bar{gap:18px}.vh-nav{gap:18px}}
.vh-nav>a:hover,.vh-services-toggle:hover,.vh-header.is-open .vh-services-toggle,.vh-nav>a[aria-current]{color:var(--vh-ink)}
.vh-services-toggle{display:inline-flex;align-items:center;gap:6px}
.vh-services-toggle svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .2s}
.vh-header.is-open .vh-services-toggle svg{transform:rotate(180deg)}
.vh-actions{display:flex;align-items:center;gap:12px}
.vh-tg{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;min-width:40px;padding:0 11px;border-radius:12px;border:1px solid var(--vh-rule);color:var(--vh-soft);font-size:14px;white-space:nowrap}
.vh-tg:hover{color:var(--vh-ink);border-color:var(--vh-soft)}
.vh-tg svg{width:18px;height:18px;fill:currentColor;flex-shrink:0}
.vh-tg-text{display:none}
.vh-cta{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:12px;background:var(--vh-accent);color:var(--vh-on-accent)!important;font-weight:600;font-size:14px;white-space:nowrap;transition:filter .2s}
.vh-cta:hover{filter:brightness(1.08)}
.vh-burger{display:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--vh-rule)!important;position:relative}
.vh-burger span{position:absolute;left:11px;right:11px;height:1.6px;background:currentColor;transition:transform .2s,top .2s}
.vh-burger span:first-child{top:15px}.vh-burger span:last-child{top:23px}
.vh-header.is-open .vh-burger span:first-child{top:19px;transform:rotate(45deg)}
.vh-header.is-open .vh-burger span:last-child{top:19px;transform:rotate(-45deg)}

/* Главная: пока видна кнопка первого экрана, в шапке — «Написать в Telegram» вместо второй кнопки */
body.hero-cta-visible .vh-cta{display:none}
body.hero-cta-visible .vh-tg-text{display:inline}

/* Хлебные крошки — вторая строка шапки на внутренних страницах */
.vh-crumbs{border-top:1px solid var(--vh-rule)}
.vh-crumbs{display:block;position:static;text-align:left}
.vh-crumbs ol{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:4px 8px;list-style:none;max-width:1240px;margin:0 auto;padding:8px 24px;font-size:13px;line-height:1.4;color:var(--vh-faint);text-align:left;background:none;border:0}
.vh-crumbs li{margin:0;padding:0;list-style:none}
.vh-crumbs li+li:before{content:"›";margin-right:8px;color:var(--vh-faint)}
.vh-crumbs a:hover{color:var(--vh-ink)}
.vh-crumbs [aria-current]{color:var(--vh-soft)}
.vh-header.is-open .vh-crumbs{display:none}

/* Меню услуг */
.vh-services[hidden]{display:none}
.vh-services{position:absolute;left:0;right:0;top:68px;background:var(--vh-panel);border-bottom:1px solid var(--vh-rule);box-shadow:0 30px 60px rgba(0,0,0,.45);max-height:calc(100vh - 68px);overflow-y:auto}
.vh-services-in{display:grid;grid-template-columns:repeat(var(--vh-cols,4),1fr);gap:40px;max-width:1240px;margin:0 auto;padding:32px 24px 26px}
.vh-group-title{pointer-events:none;display:block;width:100%;padding:0 0 12px;margin:0 0 6px;border-bottom:1px solid var(--vh-rule);font-weight:600;font-size:13.5px;color:var(--vh-faint);text-align:left}
.vh-group ul{list-style:none}
.vh-group li a{display:block;padding:9px 0}
.vh-group li b{display:block;font-weight:600;font-size:15px;color:var(--vh-ink);transition:color .2s}
.vh-group li span{display:block;font-size:13.5px;color:var(--vh-faint);margin-top:2px}
.vh-group li a:hover b,.vh-group li a[aria-current] b{color:var(--vh-accent)}
.vh-product{display:block;margin-top:18px;padding:14px 16px;border-radius:14px;border:1px solid var(--vh-rule)}
.vh-group-title+.vh-product{margin-top:15px}
.vh-product small{display:block;font-size:12px;color:var(--vh-faint)}
.vh-product b{display:block;font-size:15px;margin:2px 0;color:var(--vh-ink)}
.vh-product span{font-size:13.5px;color:var(--vh-soft)}
.vh-product:hover{border-color:var(--vh-accent)}
.vh-services-foot{display:flex;flex-wrap:wrap;gap:6px 14px;max-width:1240px;margin:0 auto;padding:16px 24px 22px;border-top:1px solid var(--vh-rule);font-size:14px;color:var(--vh-faint)}
.vh-services-foot a{color:var(--vh-accent);font-weight:600}
.vh-mobile-links{display:none}

/* Подвал */
.vh-footer{background:#080a0f;color:var(--vh-soft);font-size:14.5px}
.vh-footer-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;max-width:1240px;margin:0 auto;padding:56px 24px 32px}
.vh-footer-brand p{margin-top:16px;max-width:340px}
.vh-contacts{display:flex;flex-direction:column;gap:6px}
.vh-contacts a{color:var(--vh-ink)}
.vh-footer-col h2{font-size:13.5px;font-weight:600;color:var(--vh-faint);margin:0 0 12px;font-family:inherit;letter-spacing:0;line-height:1.4;text-transform:none}
.vh-footer-col a{display:block;padding:5px 0}
.vh-footer a:hover{color:var(--vh-accent)}
.vh-footer-legal{max-width:1240px;margin:0 auto;padding:18px 24px 36px;border-top:1px solid var(--vh-rule);font-size:13px;color:var(--vh-faint)}

@media (max-width:960px){
  .vh-bar{height:60px;padding:0 16px;gap:12px}
  .vh-brand img{width:44px;height:33px}
  .vh-brand span{font-size:13.5px}
  .vh-nav{display:none}
  .vh-actions{margin-left:auto;gap:8px}
  .vh-cta{height:38px;padding:0 14px;font-size:13px}
  body.hero-cta-visible .vh-tg-text{display:none}
  .vh-burger{display:block}
  .vh-crumbs ol{padding:7px 16px;font-size:12.5px}
  .vh-services{position:fixed;top:60px;bottom:0;left:0;right:0;max-height:none;box-shadow:none;border:0;padding:8px 16px 32px}
  .vh-services-in{display:block;padding:0}
  .vh-group{border-bottom:1px solid var(--vh-rule)}
  .vh-group-title{pointer-events:auto;display:flex;justify-content:space-between;align-items:center;padding:18px 0;margin:0;border:0;font-size:18px;color:var(--vh-ink)}
  .vh-group-title:after{content:"";width:9px;height:9px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin-right:4px;transition:transform .2s}
  .vh-group.is-active .vh-group-title:after{transform:rotate(-135deg)}
  .vh-group:not(.is-active) ul,.vh-group:not(.is-active) .vh-product{display:none}
  .vh-group ul{padding-bottom:12px}
  .vh-product{margin:4px 0 16px}
  .vh-services-foot{padding:20px 0 8px;border:0}
  .vh-mobile-links{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding-top:8px;text-align:left;position:static;background:none;border:0;width:auto;height:auto}
  .vh-mobile-links a{display:block;padding:10px 0;font-size:17px;color:var(--vh-ink);text-align:left;width:auto;border:0;background:none}
  html.vh-menu-open{overflow:hidden}
  .vh-footer-in{grid-template-columns:1fr 1fr;padding:44px 16px 24px}
  .vh-footer-brand{grid-column:1/-1}
  .vh-footer-legal{padding:16px 16px 32px}
}
/* На телефоне значок Telegram и кнопка сменяют друг друга (решение владельца 30.09) */
@media (max-width:600px){
  .vh-tg{display:none}
  body.hero-cta-visible .vh-tg{display:inline-flex}
}
@media (max-width:420px){
  .vh-brand span{display:none}
  .vh-footer-in{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .vh-header *,.vh-footer *{transition:none!important}
}