/* шрифты лежат на самом сайте (Google Fonts не нужен) */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/golos-400-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/golos-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/golos-600-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/golos-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/golos-700-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/golos-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/unbounded-600-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/unbounded-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/unbounded-700-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/unbounded-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/unbounded-800-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/unbounded-800-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Палитра: снег, ель, лёд, свет фары */
:root {
  --snow: #F2F6F8;
  --spruce: #173A33;
  --spruce-2: #22524A;
  --ink: #1C2426;
  --ice: #BFD6DF;
  --muted: #56666A;
  --headlight: #F2B705;
  --line: #D5E1E6;
  --danger: #B3261E;

  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --body: "Golos Text", "Segoe UI", Roboto, Arial, sans-serif;

  --wrap: 1120px;
  --text: 68ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--snow);
  color: var(--ink);
  font: 400 18px/1.55 var(--body);
}
img { max-width: 100%; display: block; }
a { color: var(--spruce-2); text-underline-offset: .18em; }
a:hover { color: var(--spruce); }
:focus-visible { outline: 3px solid var(--headlight); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { font-family: var(--display); line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.2rem, 6vw, 4.6rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }
p { margin: 0 0 1em; max-width: var(--text); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.section { padding: 72px 0; }
.lead { font-size: 1.2rem; color: var(--muted); }

/* ---------- шапка ---------- */
/* шапка fixed, а место под неё зарезервировано: сжатие шапки не сдвигает страницу и не дёргается */
body { padding-top: 125px; }
/* зелёная подложка под зарезервированным местом: при раскрытии шапки белое поле не видно */
body::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 125px; background: #1F7A3E; z-index: -1; }
.top {
  /* раскрытая шапка 125px: равные зазоры --g сверху до надписи, от надписи до меню и от меню до низа шапки */
  --g: 12px; --nav-ink: 17px; --phone-size: 40.6px;
  --tw: calc((125px - 3 * var(--g) - var(--nav-ink)) / 0.209); /* ширина надписи клуба */
  --tc: calc(var(--g) + (125px - 3 * var(--g) - var(--nav-ink)) / 2); /* вертикальный центр надписи клуба */
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: #1F7A3E;
  color: #fff;
}
/* тень только когда шапка действительно над контентом — иначе она темнит зелёную подложку */
.top.scrolled { box-shadow: 0 2px 10px rgba(0,0,0,.18); transition: box-shadow .25s; }
.top .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; max-width: 1400px; min-height: 125px; transition: min-height .25s; }
.menu { display: contents; }
.nav { grid-column: 1; grid-row: 1; justify-self: start; transform: translateY(calc(125px - var(--g) - var(--nav-ink) / 2 - 62.5px)); transition: transform .25s; }
.top.shrink .nav { transform: none; width: auto; justify-content: flex-start; gap: 16px; }
.top.measuring, .top.measuring * { transition: none !important; }
.logo { grid-column: 2; grid-row: 1; }
/* справа от логотипа: внизу меню (Полезное, Как записаться) и сразу справа от него кнопка сертификата; телефон — точно над этим меню; телефон и кнопка по вертикали на середине логотипа (62.5px) */
.top-right { position: relative; grid-column: 3; grid-row: 1; margin-left: -16px; align-self: stretch; justify-self: stretch; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
.top-right > * { grid-row: 1; align-self: center; }
.top-phone { position: absolute; top: calc(62.5px - var(--phone-size) / 2); right: calc(var(--btn-w, 200px) + 16px); width: var(--n2-w, auto); display: flex; justify-content: center; }
.nav2 { grid-column: 2; display: flex; gap: 16px; margin-right: 16px; transform: translateY(calc(125px - var(--g) - var(--nav-ink) / 2 - 62.5px)); }
.top-actions { grid-column: 3; align-self: center; }
.top.shrink .top-right { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-left: 16px; }
.top.shrink .nav2 { gap: 12px; margin-right: 0; }
.top.shrink .top-phone { order: 0; }
.top.shrink .nav2 { order: 1; }
.top.shrink .top-actions { order: 2; }
.top.shrink .top-phone, .top.shrink .top-actions, .top.shrink .nav2 { transform: none; margin: 0; align-self: center; }
.top.shrink .top-phone { position: static; width: auto; display: block; }
.burger { grid-column: 3; grid-row: 1; justify-self: end; }
/* надпись «Спортивно-туристский клуб Вездеходия» по центру левого меню над ним (ширина меню --nav-w задаётся скриптом); при сжатии шапки уезжает вверх и исчезает */
.top-title { position: absolute; left: max(24px, calc(24px + (var(--nav-w, 0px) - var(--tw)) / 2)); top: var(--g); z-index: 1; transition: transform .25s, opacity .25s; }
.top-title img { display: block; width: var(--tw); height: auto; }
.top.shrink .top-title { transform: translateY(-160%); opacity: 0; pointer-events: none; }
.logo { display: block; flex: none; }
.logo img { display: block; height: 112px; width: auto; transition: height .25s; }
.top.shrink .wrap { min-height: 56px; }
.top.shrink .logo img { height: 50px; }
.nav { display: flex; align-items: center; gap: 16px; }
/* ширина задаётся скриптом (--nav-w): пункты распределены поровну, «О нас» стоит от логотипа так же далеко, как «Полезное» */
.nav { width: var(--nav-w, auto); min-width: max-content; justify-content: space-between; }
.nav > a, .nav2 > a, .more-btn { color: #fff; text-decoration: none; font: 700 1.105rem/1 var(--body); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; background: none; border: 0; padding: 10px 0; cursor: pointer; transition: font-size .25s; }
.top.shrink .nav > a, .top.shrink .nav2 > a, .top.shrink .more-btn { padding: 8px 0; } /* размер шрифта пунктов меню в сжатой шапке не меняется */
.nav > a:hover, .nav > a[aria-current], .nav2 > a:hover, .nav2 > a[aria-current], .more-btn:hover { color: var(--headlight); }
.more { position: relative; }
.more-btn::after { content: ""; display: inline-block; margin-left: 6px; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.more-list { display: none; position: absolute; top: 100%; left: -14px; min-width: 170px; margin: 0; padding: 8px 0; list-style: none; background: #17612F; border-radius: 6px; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.more:hover .more-list, .more.open .more-list, .more:focus-within .more-list { display: block; }
.more-list a { display: block; padding: 10px 18px; color: #fff; text-decoration: none; font-size: .95rem; }
.more-list a:hover { background: rgba(255,255,255,.12); color: var(--headlight); }
/* телефон: основной шрифт сайта; высота цифр = высоте слова «ВЕЗДЕХОДИЯ» (≈41px), по ширине сжат, чтобы поместиться между логотипом и кнопкой */
.top-phone { color: #FFBA38; font: 700 var(--phone-size)/1 var(--body); transform: scaleX(.67); transform-origin: center; transition: font-size .25s; text-decoration: none; white-space: nowrap; }
.top-phone:hover { color: #fff; }
.top.shrink .top-phone { font-size: 18px; }
.top-actions { display: flex; gap: 10px; }
.top .btn { padding: 24px 12px; font-size: .95rem; text-transform: uppercase; white-space: nowrap; transition: padding .25s; }
.top.shrink .btn { padding: 9px 10px; font-size: .75rem; }
.top .btn-ghost { color: #fff; border-color: #fff; background: transparent; }
.top .btn-ghost:hover { background: #fff; color: #1F7A3E; }
.burger { display: none; margin-left: auto; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; position: relative; }
.burger span, .burger span::before, .burger span::after { position: absolute; left: 10px; width: 24px; height: 3px; background: #fff; content: ""; }
.burger span { top: 20px; }
.burger span::before { left: 0; top: -8px; }
.burger span::after { left: 0; top: 8px; }
@media (max-width: 1400px) {
  .top { --nav-ink: 15.5px; }
  .top.shrink .top-right { gap: 8px; }
  .top.shrink .nav2 { gap: 10px; }
  .top.shrink .top-phone { font-size: 16px; }
  .top.shrink .btn { padding: 9px 8px; font-size: .7rem; }
  .top .wrap { gap: 16px; }
  .menu { gap: 14px; }
  .nav { gap: 14px; }
  .nav > a, .nav2 > a, .more-btn { font-size: 1rem; }
  .top .btn { padding: 21px 12px; font-size: .95rem; }
}
@media (max-width: 1180px) {
  .top { --nav-ink: 14px; }
  .nav > a, .nav2 > a, .more-btn { font-size: .9rem; }
  .top .btn { padding: 18px 10px; font-size: .85rem; }
}
@media (max-width: 1340px) {
  body { padding-top: 72px; }
  body::before { height: 72px; }
  .burger { display: block; }
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 16px; padding: 20px 24px 24px; background: #1F7A3E; box-shadow: 0 8px 14px rgba(0,0,0,.2); }
  .top.open .menu { display: flex; }
  .nav { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 14px; transform: none; width: auto; min-width: 0; }
  .top-right { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .top-right { margin-left: 0; }
  .top-right > * { align-self: flex-start; }
  .top-right > .top-actions { align-self: stretch; }
  .top-phone, .top-actions, .nav2 { transform: none; margin: 0; }
  .top-phone { position: static; width: auto; display: block; }
  .top-phone { font-size: 22px; }
  .nav2 { flex-direction: column; gap: 14px; padding-left: 0; }
  .top-title { top: 8px; }
  .top-title img { width: min(156px, calc(50vw - 68px)); }
  .more-list { position: static; display: block; background: none; box-shadow: none; padding: 6px 0 0 12px; }
  .more-btn::after { display: none; }
  .top-actions { flex-direction: column; }
  .top .wrap { min-height: 72px; }
  .logo img { height: 56px; }
}

/* ---------- кнопки ---------- */
.btn {
  display: inline-block;
  font: 600 1rem/1 var(--body);
  padding: 16px 26px;
  border-radius: 6px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
}
.btn-main { background: var(--headlight); color: var(--ink); }
.btn-main:hover { background: #FFC71F; color: var(--ink); }
.btn-ghost { border-color: currentColor; color: inherit; background: none; }

/* ---------- первый экран ---------- */
.hero {
  position: relative;
  display: flex; align-items: flex-start;
  --sub-size: clamp(1.2rem, 4.4vw, 2.8rem);
  --sub-gap: clamp(12px, 2.4vw, 32px);
  /* фото обрезано снизу по нижней кромке снегоходов (они на ~34% ширины фото) */
  min-height: calc(34vw + var(--sub-gap));
  padding: clamp(14px, 2vw, 28px) 0 0;
  background: var(--spruce) center top / cover no-repeat;
  color: var(--snow);
  overflow: hidden;
}
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,30,22,.55) 0%, rgba(10,30,22,.2) 35%, rgba(10,30,22,0) 60%),
    linear-gradient(0deg, rgba(10,30,22,.65) 0%, rgba(10,30,22,0) 35%);
}
.hero .wrap { position: relative; z-index: 2; width: 100%; }
.hero h1 { margin: 0; text-align: center; color: var(--snow); }
.hero-sub {
  display: inline-block; line-height: 1.1; padding: .2em .65em; border-radius: 999px; background: #1F7A3E; /* зелёная плашка цвета шапки */
  font-family: var(--display); font-weight: 800; letter-spacing: .02em;
  font-size: var(--sub-size); color: #FFBA38; text-shadow: 0 2px 14px rgba(0,0,0,.55);
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* След гусеницы — единственный декоративный элемент сайта */
.track {
  height: 44px;
  background:
    repeating-linear-gradient(90deg,
      var(--snow) 0 14px, transparent 14px 26px) center / 100% 26px no-repeat,
    var(--spruce);
}
.hero .track {
  position: absolute; left: 0; right: 0; bottom: 0;
  animation: roll 1.6s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes roll { from { background-position: -400px center, 0 0; } to { background-position: 0 center, 0 0; } }
@media (prefers-reduced-motion: reduce) { .hero .track { animation: none; } }

/* ---------- программы: список-таблица ---------- */
.programs { border-top: 2px solid var(--ink); margin-top: 32px; }
.prog {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1.1fr 140px;
  gap: 16px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.prog h3 { margin: 0 0 4px; }
.prog h3 a { color: var(--ink); text-decoration: none; }
.prog h3 a:hover { text-decoration: underline; }
.prog .short { color: var(--muted); font-size: .95rem; margin: 0; }
.prog .tag { font-size: .8rem; color: var(--spruce-2); font-weight: 600; }
.prog .num { font-variant-numeric: tabular-nums; }
.prog .price { font-weight: 700; font-size: 1.1rem; }
.prog .price small { display: block; font-weight: 400; font-size: .8rem; color: var(--muted); }
.cols-head { color: var(--muted); font-size: .85rem; padding: 10px 0; border-bottom: 1px solid var(--line); }

/* ---------- шаги ---------- */
.steps { counter-reset: s; list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.steps li { counter-increment: s; border-top: 3px solid var(--headlight); padding-top: 16px; }
.steps li::before { content: counter(s); font: 800 2rem/1 var(--display); color: var(--spruce); display: block; margin-bottom: 10px; }
.steps b { display: block; margin-bottom: 6px; }
.steps span { color: var(--muted); font-size: .95rem; }

/* ---------- включено ---------- */
.band { background: var(--ice); }
.band .wrap, .included { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; }
.included { margin-top: 64px; padding-top: 40px; border-top: 2px solid var(--ink); }
.included h3 { margin: 0 0 .4em; }
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { padding: 10px 0 10px 34px; border-bottom: 1px solid rgba(23,58,51,.18); position: relative; }
.checks li::before { content: ""; position: absolute; left: 4px; top: 18px; width: 14px; height: 8px; border-left: 3px solid var(--spruce); border-bottom: 3px solid var(--spruce); transform: rotate(-45deg); }

/* ---------- вопросы ---------- */
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--display); color: var(--spruce-2); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 12px 0 0; color: var(--muted); white-space: pre-line; }

/* ---------- страница программы ---------- */
.page-head { background: var(--spruce); color: var(--snow); padding: 56px 0 0; }
.page-head h1 { color: var(--snow); font-size: clamp(2rem, 5vw, 3.4rem); }
.page-head p { color: var(--ice); }
.page-head .inner { padding-bottom: 48px; }
.facts { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 12px 48px; margin: 28px 0 0; }
.facts dt { color: var(--ice); font-size: .85rem; }
.facts dd { margin: 0; font-weight: 700; font-size: 1.15rem; }
.two { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; }
.aside { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 28px; align-self: start; }
.aside .price { font: 700 2rem/1 var(--display); margin: 0 0 6px; }

/* ---------- как одеться ---------- */
.dl { margin: 32px 0 0; }
.dl div { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.dl dt { font-family: var(--display); font-weight: 600; }
.dl dd { margin: 0; max-width: var(--text); }

/* ---------- форма ---------- */
.form { max-width: 620px; }
.field { margin-bottom: 22px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.field .hint { font-size: .85rem; color: var(--muted); margin-top: 4px; }
input[type=text], input[type=tel], input[type=date], input[type=number], select, textarea {
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--spruce-2); outline: none; box-shadow: 0 0 0 3px rgba(242,183,5,.45); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.err { color: var(--danger); font-size: .9rem; margin-top: 4px; }
.field.bad input, .field.bad select { border-color: var(--danger); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.check input { margin-top: 5px; width: 18px; height: 18px; }
.hp { position: absolute; left: -9999px; }
.switch { display: inline-flex; border: 2px solid var(--spruce); border-radius: 6px; overflow: hidden; margin-bottom: 28px; }
.switch a { padding: 10px 18px; text-decoration: none; color: var(--spruce); font-weight: 600; }
.switch a[aria-current] { background: var(--spruce); color: var(--snow); }

/* ---------- подвал ---------- */
.foot { background: #1F7A3E; color: #E8F3EC; padding: 48px 0; font-size: .95rem; }
.foot .wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px 32px; align-items: center; }
.foot-navs { display: flex; gap: 48px; }
.foot-nav { display: flex; flex-direction: column; font-size: 1.05rem; font-weight: 600; line-height: 1.1; }
.foot-contacts { display: flex; flex-direction: column; text-align: right; font-size: 1.15rem; font-weight: 600; line-height: 1.1; }
.foot-copy { margin: 0; max-width: none; text-align: left; font-size: 1.15rem; font-weight: 600; line-height: 1.1; }
.foot-nav a, .foot-contacts a { text-decoration: none; }
.foot-nav a:hover, .foot-contacts a:hover { color: var(--headlight); }
.foot-logo { justify-self: center; }
.foot-logo img { display: block; width: clamp(112px, 14vw, 182px); height: auto; }
.foot a { color: var(--snow); }
.foot b { color: var(--snow); display: block; margin-bottom: 8px; }
.foot p { margin: 0 0 6px; }
.foot .small { max-width: none; color: #CFE6D6; margin-top: 12px; grid-column: 1 / -1; font-size: .85rem; }

/* ---------- мобильная версия ---------- */
@media (max-width: 900px) {
  .hero .wrap, .band .wrap, .included, .two, .foot .wrap { grid-template-columns: 1fr; }
  .foot .wrap { row-gap: 32px; }
  .foot-contacts, .foot-copy { text-align: left; }
  .foot-logo { justify-self: start; }
  .foot .small { margin-top: 0; }
  .steps { grid-template-columns: 1fr 1fr; }
  .prog { grid-template-columns: 1fr 1fr; }
  .prog .main { grid-column: 1 / -1; }
  .cols-head { display: none; }
  .facts { grid-template-columns: repeat(2, auto); }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .section { padding: 52px 0; }
  .nav { margin-left: 0; gap: 14px; }
  .steps, .row2 { grid-template-columns: 1fr; }
  .dl div { grid-template-columns: 1fr; gap: 6px; }
  .prog .num { font-size: .9rem; }
}
/* при переходе из шапки сверху должна быть видна линия-след: сжатая шапка 56px + высота линии (толстая 56px перед «Как происходит», обычная 31px перед остальными) + запас */
#kak { scroll-margin-top: 118px; }
#programmy, #zapis-kak, #foto, #doehat, #otzyvy, #voprosy { scroll-margin-top: 93px; }

/* Разделитель между секциями: след снегохода, серый (#646E73) на белом; толстый вариант — под шапкой и фото */
.trail { height: 31px; background: #fff url("../img/trail-half.svg") repeat-x 0 0 / 42px 31px; }
.trail-thick { height: 56px; background-image: url("../img/trail-thick.svg"); background-size: 42px 56px; }

/* ---------- фото, видео, отзывы на главной ---------- */
.empty { max-width: none; color: var(--muted); font-size: 1.05rem; margin: 24px 0 0; padding: 40px 24px; border: 2px dashed var(--line); border-radius: 8px; text-align: center; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 32px; }
.gallery-item { display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--spruce-2); }
.gallery-item img, .gallery-item iframe { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-top: 32px; }
.review { margin: 0; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.review p { margin: 0 0 16px; }
.review footer { color: var(--muted); font-size: .95rem; }
.review footer b { color: var(--ink); }

/* условия под заголовком «Цены и маршруты» */
.price-notes { max-width: none; margin: 24px 0 0; padding: 0 0 0 1.2em; color: var(--muted); font-size: 1.05rem; }
.price-notes + .price-notes { margin-top: 28px; }
.price-notes li { padding: 3px 0 3px .3em; }
.price-notes li::marker { color: var(--spruce-2); }

/* раздел «Как к нам добраться?» */
#doehat .btn { margin: 8px 0 8px; }
/* шрифт как в разделе «Цены и маршруты»: .95rem, приглушённый цвет; выделенное — жирным 1rem */
.route-intro, .route-warning, .route-list details p { max-width: none; color: var(--muted); font-size: .95rem; line-height: 1.65; }
.route-warning { color: var(--ink); font-size: 1rem; font-weight: 700; }
.route-list summary { font-size: 1rem; }
.route-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-top: 32px; }
.route-map { display: block; width: 100%; aspect-ratio: 1 / 1; min-height: 360px; height: var(--route-h, auto); border: 1px solid var(--line); border-radius: 8px; }
@media (max-width: 900px) { .route-cols { grid-template-columns: 1fr; gap: 24px; } .route-map { aspect-ratio: 4 / 3; height: auto; } }

/* раздел «Цены и маршруты»: шрифт как в «Как происходит катание», маршруты — вертикальные карточки */
.price-text, .price-notes { max-width: none; color: var(--muted); font-size: .95rem; line-height: 1.65; }
.price-text b { color: var(--ink); font-size: 1rem; }
.route-cards { margin-bottom: 32px; }
.route-cards li { display: flex; flex-direction: column; border-bottom: 3px solid var(--headlight); padding-bottom: 16px; }
.route-cards span { display: block; margin-top: 4px; }
.route-cards .route-price { margin-top: auto; padding-top: 12px; color: var(--ink); font: 800 1.15rem/1.2 var(--display); }
.price-caption { margin-top: 16px; }
.price-inc { margin-top: 8px; }
@media (min-width: 901px) { .steps-3 { grid-template-columns: repeat(3, 1fr); } }

/* видео в разделе «Наши фото и видео» */
.gallery { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.gallery-fig { margin: 0; }
.gallery-video { aspect-ratio: 16 / 9; }
.gallery-fig figcaption { margin-top: 10px; color: var(--muted); font-size: .95rem; line-height: 1.4; }

/* фото: колонки с естественными пропорциями, просмотр крупно */
.photos { column-count: 3; column-gap: 16px; margin-top: 40px; }
.photo { display: block; margin: 0 0 16px; break-inside: avoid; border-radius: 8px; overflow: hidden; background: var(--spruce-2); }
.photo img { display: block; width: 100%; height: auto; transition: transform .3s; }
.photo:hover img { transform: scale(1.03); }
@media (max-width: 900px) { .photos { column-count: 2; } }
@media (max-width: 480px) { .photos { column-count: 1; } }
.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(8,20,16,.94); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 92vw; max-height: 90vh; object-fit: contain; border-radius: 6px; }
.lightbox button { position: absolute; background: none; border: 0; color: #fff; font: 400 3rem/1 var(--body); cursor: pointer; padding: 12px 18px; opacity: .85; }
.lightbox button:hover { opacity: 1; color: var(--headlight); }
.lb-close { top: 8px; right: 8px; font-size: 2.6rem; }
.lb-prev { left: 4px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 4px; top: 50%; transform: translateY(-50%); }

.more-link { margin: 24px 0 0; font-size: 1.05rem; font-weight: 600; }
.photos { margin-top: 32px; }

/* страница «О нас» */

/* раздел «Как записаться у нас на катание на снегоходах» */
.notes-ol { padding-left: 1.8em; }

.ymaps-shot { display: block; max-width: 760px; margin: 24px 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ymaps-shot img { display: block; width: 100%; height: auto; transition: opacity .15s; }
.ymaps-shot:hover img { opacity: .92; }
#otzyvy .safety-text:last-of-type { margin-bottom: 0; }

.safety-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.safety-main h2 { margin-top: 0; }
.safety-side .ymaps-shot { max-width: 100%; margin: 0 0 20px; }
.safety-side p { margin: 0; }
@media (max-width: 900px) { .safety-cols { grid-template-columns: 1fr; gap: 24px; } }
#foto .gallery:has(.gallery-video) { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { #foto .gallery:has(.gallery-video) { grid-template-columns: 1fr; } }

/* ---------- «Полезное»: статьи (вид как страница новости) ---------- */
.art-h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.art-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; margin-top: 32px; }
.art-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; color: var(--ink); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s, background-color .2s; }
.art-card:hover, .art-card:focus-visible { transform: translateY(-6px); border-color: var(--headlight); background: #FFFCEE; box-shadow: 0 10px 24px rgba(0,0,0,.14), 0 0 18px rgba(242,183,5,.45); }
.art-card-photo { display: block; aspect-ratio: 16 / 9; background: center/cover no-repeat; transition: filter .2s; }
.art-card:hover .art-card-photo, .art-card:focus-visible .art-card-photo { filter: brightness(.82); }
.art-card-title { display: block; padding: 16px 16px 6px; font: 700 1.05rem/1.3 var(--display); }
.art-card-text { display: block; padding: 0 16px 18px; color: var(--muted); font-size: .95rem; }
.art-detail { max-width: none; margin: 0 auto; }
.art-detail-body { display: flow-root; }
/* фото слева, текст обтекает его по высоте фото и дальше идёт на всю ширину */
.art-detail-photo { float: left; width: calc(50% - 20px); margin: 0 40px 16px 0; aspect-ratio: 4 / 3; border-radius: 8px; background: center/cover no-repeat; }
@media (max-width: 900px) { .art-detail-photo { float: none; width: 100%; margin: 0 0 20px; } }
.art-detail-title { font-size: 32px; font-weight: 700; margin-bottom: 20px; }
.art-detail-content { color: #333; font-size: 16px; line-height: 1.7; text-align: justify; }
.art-detail-content p { max-width: none; margin: 0 0 12px; }
.art-detail-top-row { display: flex; justify-content: flex-end; margin-top: 32px; }
.scroll-top-btn { background: none; border: 0; color: var(--spruce-2); font: 700 15px var(--body); cursor: pointer; padding: 0; }
.scroll-top-btn:hover { text-decoration: underline; }
@media (max-width: 767.98px) { .art-detail-title { font-size: 24px; } }

.art-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 40px; }

/* «Вопрос - ответ»: две колонки (колонки независимы, раскрытие одного ответа не сдвигает соседнюю), ответы мельче */
.faq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; align-items: start; }
.faq-col { min-width: 0; }
#voprosy .faq details p { font-size: .9rem; line-height: 1.55; max-width: none; }
@media (max-width: 900px) { .faq-cols { grid-template-columns: 1fr; } }

.faq-call { margin: 32px 0 0; max-width: none; font-size: 1.05rem; font-weight: 600; }
.faq-call { text-align: center; }
.faq-call a { color: #F08A00; text-decoration: none; font-weight: 700; }
.faq-call a:hover { color: #C97000; }

.foot-contacts { width: fit-content; justify-self: end; }
.foot-contacts .foot-vk { align-self: center; margin-bottom: 8px; line-height: 0; }
.foot-vk img { display: block; width: 40px; height: 40px; transition: transform .15s, filter .15s; }
.foot-vk:hover img { transform: scale(1.1); filter: brightness(1.08); }
@media (max-width: 900px) { .foot-contacts { justify-self: start; } }

/* ---------- страница «О нас» ---------- */
.about-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 32px; }
.about-col { border-top: 3px solid var(--headlight); padding-top: 16px; }
.about-col h3 { margin: 0 0 8px; }
.about-col p { margin: 0; color: var(--muted); font-size: .95rem; max-width: none; }
@media (max-width: 900px) { .about-cols { grid-template-columns: 1fr; gap: 24px; } }
#zimoj p { max-width: none; }
#zimoj .wrap { grid-template-columns: 1fr 1.4fr; }
@media (max-width: 900px) { #zimoj .wrap { grid-template-columns: 1fr; gap: 16px; } }
.contacts { font-style: normal; margin-top: 24px; }
.contacts p { max-width: none; margin: 0 0 12px; }
.contacts ul { margin: 0 0 12px; padding-left: 1.2em; }
.contacts a, .story a { color: #F08A00; text-decoration: none; font-weight: 700; }
.contacts a:hover, .story a:hover { color: #C97000; }

/* «О нас»: раздел «Мы катаем интересно и безопасно» — заголовок в две строки, текст мельче, видео по высоте колонки */
#bezopasno .safety-cols { grid-template-columns: 1.2fr 1fr; align-items: stretch; gap: 40px; }
#bezopasno .safety-main h2 { margin: 0 0 .5em; text-wrap: balance; }
#bezopasno .safety-text { font-size: .9rem; line-height: 1.55; max-width: none; }
#bezopasno .safety-side { display: flex; }
#bezopasno .safety-side .gallery-video { aspect-ratio: auto; width: 100%; min-height: 220px; }
@media (max-width: 900px) {
  #bezopasno .safety-cols { grid-template-columns: 1fr; gap: 24px; }
  #bezopasno .safety-side .gallery-video { aspect-ratio: 16 / 9; min-height: 0; }
}

/* «О нас»: большой текст */
.story-lead { max-width: none; margin: 0 0 8px; font-size: 1.15rem; line-height: 1.7; color: var(--ink); }
.story-h { font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin: 48px 0 16px; }
.story-p { max-width: none; font-size: 1rem; line-height: 1.7; color: #333; }
.story-lead + h2 { margin-top: 40px; }
.page-h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 700; margin-bottom: 24px; }

/* ---------- слайдер фото (три фото в ряд) ---------- */
.slider { position: relative; margin-top: 24px; }
.slider-track { --gap: 16px; display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.slider-track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 calc((100% - 2 * var(--gap)) / 3); scroll-snap-align: start; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: var(--spruce-2); }
.slide img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.slide:hover img { transform: scale(1.04); }
.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--ink); font: 700 1.8rem/1 var(--body); cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.slider-btn:hover { background: var(--headlight); }
.slider-prev { left: 10px; }
.slider-next { right: 10px; }
@media (max-width: 900px) { .slide { flex-basis: calc((100% - var(--gap)) / 2); } }
@media (max-width: 560px) { .slide { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .slide img { transition: none; } .slider-track { scroll-behavior: auto; } }
.tech-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
@media (max-width: 700px) { .tech-videos { grid-template-columns: 1fr; } }

/* ---------- тексты на сайте — по ширине ---------- */
main p, .steps span, .about-col p, .art-card-text, .faq details p { text-align: justify; hyphens: manual; -webkit-hyphens: manual; }
/* центрированные и «служебные» строки остаются как есть */
.faq-call, .hero p, .slider-btn { text-align: center; hyphens: manual; }
.more-link { text-align: left; }
#foto .more-link .btn { text-transform: uppercase; }
.art-detail-content, .art-detail-content p { text-align: justify; }

/* пункты обычных списков — по левому краю */
main ul li, main ol:not(.steps) li { text-align: left; }
.safety-main .safety-text:last-of-type { font-weight: 700; }

/* «Подарочный сертификат»: две колонки */
.gift-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-top: 8px; }
.gift-col .story-h { margin-top: 0; }
.gift-list { margin: 0; padding-left: 1.2em; line-height: 1.65; }
.gift-list li { margin: 0 0 10px; }
@media (max-width: 900px) { .gift-cols { grid-template-columns: 1fr; gap: 8px; } }
.gift-col { border-top: 3px solid var(--headlight); padding-top: 16px; }
.faq details p a { color: #F08A00; text-decoration: none; font-weight: 700; }
.faq details p a:hover { color: #C97000; }

/* график работы над телефоном (только в развёрнутой широкой шапке) */
.top-hours { position: absolute; top: var(--hours-top, 10px); right: calc(var(--btn-w, 200px) + 16px); width: var(--n2-w, auto); text-align: center; color: #FFBA38; font: 700 var(--hours-size, 1.105rem)/1 var(--body); letter-spacing: .03em; white-space: nowrap; pointer-events: none; }
.top.shrink .top-hours { display: none; }
@media (max-width: 1340px) { .top-hours { display: none; } }
.page-caps .btn { text-transform: uppercase; }
.gift-list li { text-align: justify; }

/* статьи: подзаголовки и списки внутри текста, фото остаётся на виду при прокрутке длинного текста */
.art-detail-content h3 { font-size: 1.25rem; margin: 28px 0 10px; }
.art-detail-content h3:first-child { margin-top: 0; }
.art-detail-content ul { margin: 0 0 12px; padding-left: 1.2em; }
.art-detail-content li { margin: 0 0 8px; text-align: left; }

/* видео: заглушка с кнопкой «play», сам плеер грузится по клику (templates/base.html) */
.vfacade { position: relative; display: block; width: 100%; height: 100%; min-height: 100%; padding: 0; border: 0; cursor: pointer; border-radius: inherit;
  background: linear-gradient(135deg, #1F7A3E, #0f4a24) center/cover no-repeat; }
.vfacade::after { content: ""; position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%;
  background: #F2B500 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23222' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/52% no-repeat;
  box-shadow: 0 4px 14px rgba(0,0,0,.35); transition: transform .15s; }
.vfacade:hover::after, .vfacade:focus-visible::after { transform: scale(1.1); }

/* «Читайте также» и «Подбор катания» под статьёй */
.related { margin-top: 40px; }
.related h3 { font-size: 1.15rem; margin: 24px 0 10px; }
.related-list { margin: 0; padding-left: 1.2em; }
.related-list li { margin: 0 0 8px; }
.related-list a { color: #1F7A3E; }
.landing-cta { margin-top: 28px; font-weight: 600; text-align: left; }

/* «Наши фото» и «Наши Видео»: заголовок того же размера, что «Как проходит» на главной (h2) */
.page-caps h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 700; }

/* подпись видео поверх заставки, как в RuTube */
.vfacade::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 45%; border-radius: inherit; pointer-events: none;
  background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,0)); }
.vfacade .vtitle { position: absolute; z-index: 1; left: 0; top: 0; right: 0; padding: 12px 16px; color: #fff; font: 600 1rem/1.3 var(--body, inherit);
  text-align: left; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
@media (max-width: 560px) { .vfacade .vtitle { font-size: .9rem; padding: 10px 12px; } }

.art-more { margin: 32px 0 0; font-weight: 600; }
.art-more a { color: #1F7A3E; }

/* подписи внизу первого экрана: одна строка на всю ширину фото, шрифт как у пунктов меню в шапке */
.hero-facts { position: absolute; z-index: 2; left: clamp(14px, 3vw, 44px); right: clamp(14px, 3vw, 44px); bottom: clamp(12px, 2vw, 28px); margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px 14px; }
.hero-facts li { flex: 1 1 auto; text-align: center; padding: 9px 14px; border-radius: 999px; background: #1F7A3E; color: #FFBA38; font: 700 clamp(.8rem, 1.35vw, 1.6rem)/1.15 var(--body); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
@media (max-width: 700px) { .hero { min-height: calc(34vw + 120px); } .hero-facts { flex-direction: column; align-items: flex-start; gap: 8px; } .hero-facts li { flex: none; text-align: left; font-size: .75rem; padding: 6px 11px; } }

/* ссылки в статьях: без подчёркивания, при наведении зелёный меняется на оранжевый */
.art-detail a:not(.btn), .art-detail .related-list a, .art-detail .art-more a { color: #1F7A3E; text-decoration: none; transition: color .15s; }
.art-detail a:not(.btn):hover, .art-detail .related-list a:hover, .art-detail .art-more a:hover { color: #F08A00; text-decoration: none; }

/* «Полезное» на главной: три карточки в ряд */
.home-articles .art-list { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .home-articles .art-list { grid-template-columns: 1fr; } }

/* все ссылки в тексте: зелёные, без подчёркивания, при наведении оранжевые */
section p a:not(.btn), section li a:not(.btn), section dd a:not(.btn), section td a:not(.btn) { color: #1F7A3E; text-decoration: none; transition: color .15s; }
section p a:not(.btn):hover, section li a:not(.btn):hover, section dd a:not(.btn):hover, section td a:not(.btn):hover,
section p a:not(.btn):focus-visible, section li a:not(.btn):focus-visible { color: #F08A00; text-decoration: none; }

/* в статьях: нумерованные шаги, как «Как проходит» на главной (на всю ширину, ниже фото) */
.art-steps { clear: both; margin: 36px 0 28px; }
.art-steps h2 { margin: 0; text-align: left; }
.art-detail-content .steps li { margin: 0; }

/* кнопки «Предыдущая/Следующая статья» под разделами страницы: отступ от текста как в обычных статьях */
.art-bottom { padding-top: 0; margin-top: -84px; position: relative; }
@media (max-width: 560px) { .art-bottom { margin-top: -64px; } }

/* живой виджет отзывов Яндекса (вместо скриншота) */
.reviews-widget { display: block; width: 100%; max-width: 560px; height: 640px; margin: 24px 0; border: 1px solid #e6e6e6; border-radius: 8px; box-sizing: border-box; background: #fff; }
@media (max-width: 900px) { .reviews-widget { max-width: none; height: 560px; } }