/* Компания 2000 · базовые слои: шрифты, сброс, типографика, сетка, кнопки, ссылки, фокус, шапка и подвал.
   Токены (цвета, шкала, сетка, движение) лежат в tokens.css и подключаются перед этим файлом.
   Секции страницы добавляются в следующих задачах; здесь только то, что нужно любой странице. */

/* Запасной шрифт под метрики Onest: пока Onest грузится, текст не прыгает. */
@font-face { font-family: "Onest Fallback"; font-weight: 100 449; src: local("Helvetica Neue"), local("HelveticaNeue");
  size-adjust: 100.4%; ascent-override: 96.6%; descent-override: 29.9%; line-gap-override: 0%; }
@font-face { font-family: "Onest Fallback"; font-weight: 450 900; src: local("HelveticaNeue-Medium"), local("Helvetica Neue Medium");
  size-adjust: 98.2%; ascent-override: 98.8%; descent-override: 30.5%; line-gap-override: 0%; }
@font-face { font-family: "Onest Fallback Arial"; src: local("Arial"), local("ArialMT");
  size-adjust: 102.6%; ascent-override: 94.5%; descent-override: 29.2%; line-gap-override: 0%; }
:root { --font-sans: "Onest", "Onest Fallback", "Onest Fallback Arial", system-ui, sans-serif; }

/* Onest с нашего сервера: вариативный 300–700, три куска по unicode-range. */
@font-face { font-family: "Onest"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/onest-ru.woff2") format("woff2"); unicode-range: U+0400-045F, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/onest-lat.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0, U+00A7, U+00A9, U+00AB, U+00B0, U+00B7, U+00BB, U+00D7, U+2010-2014, U+2018-201E, U+2026, U+2190-2193, U+2212, U+2265; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/onest-rub.woff2") format("woff2"); unicode-range: U+20BD; }

/* ---------------------------------------------------------------- Сброс */
*, *::before, *::after { box-sizing: border-box; }
/* Фон холста = графит: при «резиновой» прокрутке за краем страницы виден цвет первого экрана и подвала, а не белая полоса.
   Сама страница белая за счёт body. */
html { -webkit-tap-highlight-color: transparent; text-size-adjust: 100%; background: var(--p-ink-1); }
html, body { overflow-x: clip; }
body { min-width: 320px; display: flex; flex-direction: column; min-height: 100svh; }
body > main { flex: 1 0 auto; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, fieldset { margin: 0; }
ol, ul { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
table { border-collapse: collapse; width: 100%; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
b { font-weight: var(--w-med); }
h1, h2, h3, h4 { font-weight: var(--w-med); }
[hidden] { display: none !important; }
.nw { white-space: nowrap; }

/* Телефон в альбомной ориентации: контент не уходит под вырез (viewport-fit=cover в index.html). */
.wrap { padding-inline: max(var(--grid-margin), env(safe-area-inset-left, 0px)) max(var(--grid-margin), env(safe-area-inset-right, 0px)); }

/* Абзацы и подписи без одиноких слов в последней строке. */
.t-small, .st__note, .st__br, .facts__r dd, .kv__q, .board__why { text-wrap: pretty; }

/* Касание: отклик сразу, без задержки двойного тапа и выделения подписи кнопки. */
a, button, [role="tab"], label { touch-action: manipulation; }
button, .btn { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* Тач: «залипшее» наведение после тапа не нужно. Наведение из tokens.css гасим там, где мыши нет;
   все наведения site.css живут под @media (hover: hover). Отклик на касание — :active. */
@media (hover: none) {
  .btn--solid:hover { background: var(--brand-text); border-color: var(--brand-text); }
  .app .btn--solid:hover { background: var(--brand); border-color: var(--brand); color: var(--p-ink-1); }
  a:hover { text-decoration-color: var(--rule-link); }
  a.inl:hover { text-decoration-color: currentColor; }
}
input, textarea, select { font: inherit; font-size: var(--t-body); color: inherit; } /* 16+ px: iOS не увеличивает страницу */
[data-price], .t-num, a[href^="tel:"] { font-variant-numeric: var(--font-num); }

/* ---------------------------------------------------------------- Ссылки
   Подчёркнуты только ссылки внутри текста (.inl); отдельные ссылки-действия выделены цветом. */
a { text-decoration-line: none; color: var(--accent); }
@media (hover: hover) { a:hover { color: var(--accent-press); } }
a:active { color: var(--fg-2); }
a.inl { color: var(--accent); text-decoration-line: underline; text-decoration-thickness: var(--line-w);
  text-underline-offset: .24em; text-decoration-color: currentColor; }
.nav a, .logo, .ftr a { text-decoration-line: none; }

/* Фокус виден только с клавиатуры (правило :focus-visible лежит в tokens.css). */
.skip { position: absolute; left: var(--s-2); top: calc(-1 * var(--s-12)); z-index: var(--z-skip); border-radius: var(--radius-s);
  background: var(--fg); color: var(--bg); padding: var(--s-3) var(--s-4); }
.skip:focus { top: var(--s-2); }

/* Кнопки: .btn (контурная) и .btn--solid (плоскость бренда); остальное в tokens.css. */
.btn { text-decoration-line: none; }
.btn:hover { color: var(--bg); }
.btn--solid:hover { color: var(--p-white); }

/* Разметка секций: ритм задан токенами --space-*. */
.sec { padding-top: var(--space-section); }
.sec:last-of-type { padding-bottom: var(--space-section); }

/* ---------------------------------------------------------------- Шапка
   Сплошная белая, липкая. Тёмный первый экран с прозрачной шапкой появится вместе с главным экраном. */
.hdr { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--bg); color: var(--fg);
  border-bottom: var(--line-w) solid var(--rule); padding-top: env(safe-area-inset-top, 0px); }
.hdr__in { display: flex; align-items: center; gap: var(--s-7); height: var(--hdr-h); }
.logo { display: inline-flex; align-items: center; flex: none; min-height: var(--tap); color: var(--fg);
  font-weight: var(--w-med); font-size: var(--t-h3); line-height: 1; letter-spacing: var(--tr-h3); }
@media (hover: hover) { .logo:hover { color: var(--fg); } }
.logo b { color: var(--brand); font-weight: var(--w-med); } /* --brand на белом 3.9:1: допустим только потому, что размер логотипа >= 24 px (--t-h3) */
.nav { display: none; gap: var(--s-6); font-size: var(--t-small); }
.nav a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--fg-2); }
.nav a[aria-current="true"] { color: var(--fg); }
@media (hover: hover) { .nav a:hover { color: var(--fg); } }
.hdr__aside { margin-left: auto; display: flex; align-items: center; gap: var(--s-6); font-size: var(--t-small); }
.menu-btn { display: none; min-height: var(--tap); min-width: var(--tap); padding: 0; background: none; border: 0;
  font-weight: var(--w-med); font-size: var(--t-small); cursor: pointer; }
.menu-btn:not([hidden]) { display: inline-flex; align-items: center; justify-content: flex-end; }
@media (min-width: 1200px) { .nav { display: flex; } .menu-btn { display: none !important; } }

/* Мобильное меню: панель под шапкой. */
.mnav { background: var(--bg); border-bottom: var(--line-w) solid var(--rule); max-height: calc(100svh - var(--hdr-h));
  overflow-y: auto; overscroll-behavior: contain; }
.mnav__in { display: flex; flex-direction: column; padding-top: var(--s-2); padding-bottom: var(--s-7); }
.mnav__in > a { min-height: 52px; display: flex; align-items: center; font-size: var(--t-h4); font-weight: var(--w-med);
  letter-spacing: var(--tr-h4); color: var(--fg); border-bottom: var(--line-w) solid var(--rule); }

/* ---------------------------------------------------------------- Подвал */
.ftr { background: var(--bg-inverse); color: var(--fg-2); padding: var(--s-10) 0 calc(var(--s-10) + env(safe-area-inset-bottom, 0px)); font-size: var(--t-small); }
.ftr a { color: var(--fg); }
.ftr__in { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); align-items: baseline; justify-content: space-between; }
.ftr :focus-visible { outline-color: var(--fg); }

@media (max-width: 399px) { .hdr__in, .hdr__aside { gap: var(--s-4); } }

/* ==========================================================================
   ГЛАВНАЯ. Разделы в порядке страницы: шапка над фото, первый экран и полоса цен,
   станции, прейскурант, приложение (графит и оранжевый свет), о компании,
   юрлицам, новости, контакты и реквизиты.
   Линии — только у табличных данных (станции, цены, документы, реквизиты).
   Оранжевая черта 4 px — одна на страницу, над прейскурантом: как полоса на фризе навеса АЗС.
   ========================================================================== */

/* Один фильтр на все снимки страницы: цвет навесов и колонок остаётся честным, чуть спокойнее. */
:root, [data-theme] { --photo-filter: saturate(.9) contrast(1.03); }
.ext { width: 10px; height: 10px; margin-left: var(--s-1); flex: none; }

/* Вторичные действия («Печать», «Показать карту здесь», «Скопировать реквизиты», «Сначала ближайшие ко мне») —
   текстовая команда цветом --accent, без подчёркивания и без рамки: подчёркнуты только ссылки внутри текста.
   Наведение и нажатие — как у навигации (.a-quiet): появляется подчёркивание, цвет темнеет. */
.btn:not(.btn--solid) {
  border: 0; padding: 0; background: none; justify-content: flex-start; color: var(--accent);
  text-decoration-line: none; text-decoration-thickness: var(--line-w); text-underline-offset: .32em; text-decoration-color: currentColor;
  transition: color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .btn:not(.btn--solid):hover { background: none; color: var(--accent-press); text-decoration-line: underline; } }
.btn:not(.btn--solid):active { background: none; color: var(--fg-2); }
.btn--lg { min-height: 56px; padding: 0 var(--s-7); font-size: var(--t-body); }
.btn[aria-busy="true"] { cursor: progress; }

/* ---------------------------------------------------------------- Шапка над фото */
.hdr { transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.hdr[data-theme="dark"] { border-bottom-color: transparent; }
.js .hdr:not(.is-solid):not(.menu-open) { background-color: transparent; }
/* Ниже первого экрана — сплошная белая плашка: без «стекла» и теней (система: полупрозрачные подложки — шум). */
.hdr.is-solid { background-color: var(--bg); border-bottom-color: var(--rule); }
.hdr.menu-open { background-color: var(--bg); }
.hdr__pay { display: none; align-items: center; min-height: var(--tap); font-weight: var(--w-med); color: var(--accent); white-space: nowrap; }
@media (hover: hover) { .hdr__pay:hover { color: var(--accent-press); } }
.mnav__in > a .ext { width: 12px; height: 12px; margin-left: var(--s-2); }
@media (min-width: 600px) { .hdr__pay { display: inline-flex; } }

/* ---------------------------------------------------------------- Первый экран
   Фото АЗС №8 в сумерках на весь экран; заголовок на небе слева, полоса цен на «полу» кадра. Высота ≤ 100svh. */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100vh; min-height: 100svh;
  margin-top: calc(-1 * (var(--hdr-h) + var(--line-w) + env(safe-area-inset-top, 0px))); /* шапка: высота + линия снизу */
  display: flex; flex-direction: column;
}
.hero__media { position: absolute; inset: 0; z-index: -2; background: var(--photo-bg); }
.hero__media picture, .hero__media img { display: block; width: 100%; height: 100%; }
.hero__media img { object-fit: cover; object-position: 66% 62%; filter: var(--photo-filter); }
/* Затемнение: слева и сверху под текстом (≥ .72 под мелкими строками), внизу кадр уходит в графит полосы цен. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(var(--scrim-rgb) / .62) 0%, rgb(var(--scrim-rgb) / .28) 30%, rgb(var(--scrim-rgb) / 0) 52%, rgb(var(--scrim-rgb) / .55) 82%, rgb(var(--scrim-rgb) / .92) 100%),
    linear-gradient(90deg, rgb(var(--scrim-rgb) / .7) 0%, rgb(var(--scrim-rgb) / .35) 38%, rgb(var(--scrim-rgb) / 0) 62%);
}
.hero__body {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start;
  padding-top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px) + clamp(32px, 9vh, 120px));
  padding-bottom: var(--s-7);
}
.hero__title { color: var(--p-white); max-width: 14ch; }
.hero__star { color: var(--brand); font-size: .5em; vertical-align: .85em; margin-left: .06em; letter-spacing: 0; }
.hero__lead { margin-top: var(--s-5); color: var(--fg); }
.hero__act { margin-top: var(--s-8); }
.hero__near { min-height: 56px; padding: 0 var(--s-7); font-size: var(--t-body); }
/* Сноска к заголовку живёт в сплошной графитовой полосе цен, а не на фото: на любом кадре контраст ≥ 4.5:1. */
.strip__note { grid-column: 1 / -1; margin-top: var(--s-3); color: var(--fg-2); max-width: 60ch; }

/* Полоса цен */
.strip { background: var(--bg); }
.strip__in { display: grid; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); column-gap: var(--grid-gutter); align-items: end; padding-block: var(--s-5) var(--s-6); }
.strip__t { grid-column: 1 / -1; color: var(--fg-2); margin-bottom: var(--s-2); }
.strip__t time { color: var(--fg); }
.strip__list { grid-column: 1 / -1; }
.strip__list > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding-block: var(--s-2); border-top: var(--line-w) solid var(--rule); }
.strip__list > div:first-child { border-top: 0; }
.strip__list dt { color: var(--fg-2); font-size: var(--t-small); }
.strip__list dd { color: var(--fg); white-space: nowrap; }
@media (hover: hover) { .strip__all:hover { color: var(--accent-press); } }
.strip__all { grid-column: 1 / -1; display: inline-flex; align-items: center; min-height: var(--tap); justify-self: start; color: var(--accent); }
@media (max-width: 599px) {
  /* Телефон: столбиком, без лишнего воздуха — заголовок, кнопка и цены помещаются в один экран. */
  .hero__body { padding-bottom: var(--s-5); padding-top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px) + clamp(24px, 6svh, 64px)); }
  .hero__act { margin-top: var(--s-6); }
  .strip__in { padding-block: var(--s-4) var(--s-2); }
  .strip__list > div { padding-block: var(--s-1); }
}
@media (min-width: 600px) {
  .strip__t { grid-column: 1 / span 3; margin-bottom: 0; align-self: center; }
  .strip__list { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gutter); }
  .strip__list > div { flex-direction: column; justify-content: flex-start; gap: var(--s-1); padding: 0; border: 0; }
  .strip__all { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .strip__in { padding-block: var(--s-6) var(--s-7); }
  .strip__list { grid-column: 4 / span 7; }
  .strip__all { grid-column: 11 / span 2; justify-self: end; align-self: center; white-space: nowrap; }
}
@media (max-width: 899px) {
  .hero__media img { object-position: 70% 60%; }
  /* Телефон: навес оказывается под лидом — затемнение плотнее в верхних двух третях. */
  .hero::before { background: linear-gradient(180deg, rgb(var(--scrim-rgb) / .66) 0%, rgb(var(--scrim-rgb) / .62) 40%, rgb(var(--scrim-rgb) / .46) 62%, rgb(var(--scrim-rgb) / .5) 84%, rgb(var(--scrim-rgb) / .92) 100%); }
}

/* Первый экран появляется один раз: строки поднимаются на 14 px, затем полоса цен. Без JS и при reduced-motion всё на месте. */
@media (prefers-reduced-motion: no-preference) {
  .hero__body > *, .strip__in { animation: rise var(--dur-slow) var(--ease-out) both; }
  .hero__body > :nth-child(2) { animation-delay: 60ms; }
  .hero__body > :nth-child(3) { animation-delay: 120ms; }
  .hero__body > :nth-child(4) { animation-delay: 180ms; }
  .strip__in { animation-delay: 240ms; }
  .hero__media img { animation: settle var(--dur-photo) var(--ease-out) both; } /* весь первый экран укладывается в 1 с */
}
@keyframes rise { from { transform: translateY(var(--reveal-shift)); } } /* без opacity: заголовок (кандидат LCP) рисуется сразу, движется только подъём */
@keyframes settle { from { transform: scale(var(--photo-scale-in)); } }

/* ---------------------------------------------------------------- Разделы: ритм */
.sec[data-theme] { padding-bottom: var(--space-section); }

/* ---------------------------------------------------------------- Станции */
.azs__head { row-gap: var(--s-6); align-items: end; margin-bottom: var(--space-head); }
.azs__head h2, .azs__ctl { grid-column: 1 / -1; }
.azs__ctl { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; }
.azs__pay { max-width: 40ch; }
.azs__status { max-width: 52ch; }
@media (min-width: 900px) {
  .azs__head h2 { grid-column: 1 / span 5; }
  .azs__ctl { grid-column: 7 / -1; }
}

.st__head { display: none; }
.st__r {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; column-gap: var(--s-4); row-gap: var(--s-3);
  grid-template-areas: "ph main main" "pr pr pr" "br br go"; /* перерывы во всю ширину: не три строки в колонке фото */
  padding-block: var(--s-5); border-top: var(--line-w) solid var(--rule); align-items: start;
}
.st__r:first-child { border-top-color: var(--rule-strong); }
.st__ph { grid-area: ph; aspect-ratio: 3 / 2; position: relative; }
/* Снежные кадры на белом поле: тонкий нейтральный контур изнутри, чтобы край фото не растворялся. */
.st__ph::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--line-w) var(--photo-outline); pointer-events: none; }
.st__main { grid-area: main; min-width: 0; }
.st__prices { grid-area: pr; }
.st__br { grid-area: br; align-self: center; }
.st__go { grid-area: go; align-self: center; justify-self: end; }

.st__t { font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); font-weight: var(--w-med); text-wrap: balance; }
.st__n { color: var(--fg-3); font-weight: var(--w-reg); font-variant-numeric: var(--font-num); }
.st__note { margin-top: var(--s-1); font-size: var(--t-small); line-height: var(--lh-small); color: var(--fg-2); }
.st__note a { color: inherit; }
.st__dist { display: block; margin-top: var(--s-1); font-size: var(--t-small); color: var(--fg-2); font-variant-numeric: var(--font-num); }

.st__prices:not(:empty) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-4); }
.st__prices.st__prices--ext, .st__prices.st__prices--off { display: block; }
.st__prices--ext { font-size: var(--t-small); color: var(--fg-2); }
.st__prices--ext a { display: inline-flex; align-items: center; min-height: var(--tap); margin-block: -10px; margin-left: var(--s-3); font-weight: var(--w-med); color: var(--accent); }
.st__fuel dt { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--fg-3); }
.st__fuel dd { font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: -.01em; font-variant-numeric: var(--font-num); white-space: nowrap; }
[data-na] { color: var(--fg-3); }
.st__ap { color: var(--accent); font-size: .6em; margin-left: .1em; }

.st__br { font-size: var(--t-small); line-height: var(--lh-small); color: var(--fg-2); }
.st__now { color: var(--fg); font-weight: var(--w-med); }
.st__go { display: inline-flex; align-items: center; min-height: var(--tap); margin-block: -8px; font-weight: var(--w-med); color: var(--accent); white-space: nowrap; }
@media (hover: hover) { .st__go:hover { color: var(--accent-press); } }

/* Закрытые станции: строка серая, фото без цвета, без цен и перерывов. */
.st__r[data-closed] { grid-template-areas: "ph main main"; }
.st__r[data-closed] .st__a { color: var(--fg-3); }
.st__r[data-closed] .st__note:first-of-type { color: var(--fg); }
.st__r[data-closed] .st__ph img { filter: grayscale(1) contrast(.9); opacity: .7; }
.st__r[data-closed] .st__prices, .st__r[data-closed] .st__br { display: none; }

/* Ближайшая открытая: без второй оранжевой черты (она одна на страницу, над ценами).
   Её выделяют номер и подпись «Ближайшая к вам, N км» цветом --accent; линия над строкой — структурная. */
.st__r.is-near .st__n, .st__r.is-near .st__dist { color: var(--accent); }
.st__r.is-near .st__dist { font-weight: var(--w-med); }

@media (min-width: 600px) {
  .st__r { grid-template-columns: 176px minmax(0, 1fr) auto; }
}
@media (min-width: 900px) {
  .st__head, .st__r {
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 3.7fr) minmax(0, 3.6fr) minmax(0, 2.2fr) 5.5rem;
    column-gap: var(--grid-gutter);
  }
  .st__head { display: grid; padding-bottom: var(--s-3); }
  .st__r { grid-template-areas: "ph main pr br go"; align-items: start; padding-block: var(--s-6); }
  .st__ph { aspect-ratio: 16 / 10; } /* ниже, чем 3:2: высота строки задаётся текстом, а не фото */
  .st__r[data-closed] { grid-template-areas: "ph main main main main"; }
  .st__prices:not(:empty) { column-gap: var(--s-5); }
  .st__fuel dd { font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); }
  .st__prices--ext { padding-top: var(--s-1); }
  .st__prices--ext .st__fl { display: block; }
  .st__prices--ext a { margin-left: 0; }
  .st__br, .st__go { align-self: start; }
  .st__br { padding-top: var(--s-1); }
  .st__go { margin-block: -10px; }
}
.azs__approx { margin-top: var(--s-5); }

/* Карта. В покое — одна строка под списком: «Все АЗС на карте», ссылка на Яндекс Карты (работает без JS)
   и команда «Показать карту здесь» (только с JS). Пустой серой коробки нет: iframe появляется по нажатию. */
.map { margin-top: var(--space-block); padding-top: var(--s-5); border-top: var(--line-w) solid var(--rule-strong); }
.map__ph { display: grid; gap: var(--s-2) var(--grid-gutter); align-items: baseline; }
.map__t { font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); font-weight: var(--w-med); }
.map__acts { display: flex; flex-wrap: wrap; gap: 0 var(--s-7); }
.map__open { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--accent); }
/* Ссылка и команда в строке карты — одного кегля и веса: две равноправные возможности. */
.map__acts > .map__open, .map__acts > .btn { font: var(--w-med) var(--t-small)/1 var(--font-sans); letter-spacing: var(--tr-small); }
@media (hover: hover) { .map__open:hover { color: var(--accent-press); } }
.map__load { display: none; }
.js .map__load { display: inline-flex; }
.map.is-on .map__note { display: none; }
.map__frame { position: relative; margin-top: var(--s-5); aspect-ratio: 4 / 3; background: var(--bg-sunken); border-radius: var(--radius); overflow: hidden; }
.map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 900px) {
  .map__ph { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .map__t { grid-column: 1 / span 5; }
  .map__acts { grid-column: 7 / -1; }
  .map__note { grid-column: 7 / -1; margin-top: calc(-1 * var(--s-2)); }
  .map__frame { aspect-ratio: 21 / 8; }
}

/* ---------------------------------------------------------------- Прейскурант */
/* Оранжевая черта над всем прейскурантом — единственная на странице.
   Телефон: заголовок, табло, под ним подпись, путь к ценам по АЗС и «Печать» (.prices__side раскрыта через display: contents).
   С 900 px: слева колонка 1–4 — заголовок, подпись, путь к ценам по АЗС и «Печать»; она липнет под шапкой, пока справа (6–12)
   прокручивается табло. Как в системе: «Табло цен 6–12, пояснение 1–4». */
.prices { padding-bottom: var(--space-block); }
.prices__in { display: grid; grid-template-columns: minmax(0, 1fr); }
.prices__in::before { content: ""; display: block; order: -1; height: var(--line-w-signal); background: var(--brand); border-radius: var(--radius-s); margin-bottom: var(--s-6); }
.prices__side { display: contents; }
.prices__title { margin-bottom: var(--s-8); }
.prices__meta { order: 2; margin-top: var(--s-7); padding-top: var(--s-5); border-top: var(--line-w) solid var(--rule); }
.prices__upd { max-width: 34ch; }
.prices__to { order: 3; margin-top: var(--s-3); }
.prices__to a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--fg); }
.prices__act { order: 4; margin-top: var(--s-2); }
@media (min-width: 900px) {
  .prices__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter);
    grid-template-areas: "rule rule rule rule rule rule rule rule rule rule rule rule" "side side side side . body body body body body body body"; }
  .prices__in::before { grid-area: rule; }
  .prices__side { display: block; grid-area: side; align-self: start; position: sticky; top: calc(var(--hdr-h) + var(--s-8)); }
  .prices__title { margin-bottom: var(--s-9); }
  .prices__meta { margin-top: 0; }
  .prices__body { grid-area: body; padding-top: var(--s-3); }
}
.prices__body .seg { margin-bottom: var(--s-6); }
.board__why { max-width: 60ch; margin-bottom: var(--s-3); }
.board__why:empty, .board__valid:has(> :empty) { display: none; }
.board__valid { margin-top: var(--s-3); }
.seg { position: relative; display: inline-grid; grid-auto-flow: column; gap: var(--s-6); box-shadow: inset 0 -1px 0 var(--rule); }
.seg__btn { position: relative; z-index: 1; min-height: var(--tap); padding: 0; border: 0; background: none; cursor: pointer;
  font-size: var(--t-small); font-weight: var(--w-med); color: var(--fg-2); white-space: nowrap; transition: color var(--dur-fast) var(--ease-out); }
@media (hover: hover) { .seg__btn:hover { color: var(--fg); } }
.seg__btn[aria-selected="true"] { color: var(--fg); box-shadow: inset 0 calc(-1 * var(--line-w-strong)) 0 var(--fg); }
/* Выбранная вкладка отмечена чертой у самой кнопки: работает и до загрузки цен, и без JS. */
.seg__thumb { display: none; }

.board:focus-visible { outline-offset: 8px; }
.board__t th, .board__t td { padding: var(--s-5) 0; border-top: var(--line-w) solid var(--rule); vertical-align: baseline; }
.board__t tr:first-child th, .board__t tr:first-child td { border-top: 0; }
.board__t th { text-align: left; font-weight: var(--w-reg); }
.board__fuel { display: block; font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: var(--w-med); white-space: nowrap; }
.board__kind { display: block; margin-top: var(--s-1); }
.board__t td { text-align: right; white-space: nowrap; }
@media (min-width: 900px) { .board__num { font-size: var(--t-figure); } }

.stale, [data-stale-text] { color: var(--signal); }

/* ---------------------------------------------------------------- Приложение: без рамок, на поле страницы
   Светлая секция (data-theme="light", спецификация §5.4; решение пользователя 22.10.2026: «без обводки, минималистично»).
   Ни панели, ни плашек, ни рамок: блок стоит на белом поле страницы, от соседей его отделяет только воздух секции.
   Оранжевый — только кнопка (--brand с графитовым текстом, 4.8:1) и мелкие акценты --brand-text (надзаголовок, номер и черта шага).
   Телефон — силуэт без корпуса: сам экран с крупным скруглением и одной рассеянной тенью. */
.sec.app { overflow: clip; /* clip, а не hidden: sticky внутри продолжает работать */ }

/* Сетка блока — своя, по областям: надзаголовок, заголовок, лид и шаги; телефон(ы); кнопка; QR.
   Телефон: < 900 — лента трёх экранов со scroll-snap; ≥ 900 — один телефон, экраны лежат друг на друге
   (без JS виден первый, за ним второй «в глубине»); prefers-reduced-motion ≥ 900 — три экрана в ряд. */
.app__in { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "phones" "act"; row-gap: var(--s-9); }
.app__head { grid-area: head; }
.app__phones { grid-area: phones; }
.app__act { grid-area: act; }
.app__qr { grid-area: qr; display: none; }
/* Надзаголовок — строчными, без капса и разрядки; --brand-text (≥ 4.5 на бумаге). */
.app__kick { margin-bottom: var(--s-4); font-size: var(--t-small); line-height: var(--lh-small); font-weight: var(--w-med); color: var(--brand-text); }
.app__lead { margin-top: var(--s-5); max-width: var(--measure-lead); color: var(--fg-2); text-wrap: pretty; }
.app__steps { margin-top: var(--s-9); display: grid; gap: var(--s-4); counter-reset: step; }
.app__steps li { counter-increment: step; display: grid; grid-template-columns: 1.6em 1fr; align-items: baseline;
  font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); font-weight: var(--w-med); }
.app__steps li::before { content: counter(step); font-weight: var(--w-light); color: var(--fg-3); font-variant-numeric: var(--font-num); }
/* Кнопка — сам цвет навесов #DE5316 с графитовым текстом (4.8:1, AA); наведение и нажатие — светлее (--brand-on-dark, графит 6.4:1):
   тёмный оранжевый под графитом не проходит AA, а белый на #DE5316 — только для крупного текста. */
.app .btn--solid { min-height: 56px; padding: 0 var(--s-7); font-size: var(--t-lead); font-weight: var(--w-med);
  background: var(--brand); border-color: var(--brand); color: var(--p-ink-1); }
@media (hover: hover) { .app .btn--solid:hover { background: var(--brand-on-dark); border-color: var(--brand-on-dark); color: var(--p-ink-1); } }
.app .btn--solid:active { background: var(--brand-on-dark); border-color: var(--brand-on-dark); color: var(--p-ink-1); }
.app .btn--solid:focus-visible { outline-color: var(--fg); }
.app__mark { display: none; }

/* Телефон: без корпуса и без обводки — экран приложения со скруглением как у iPhone (≈ 55 pt из 390), «остров» сверху
   и одна рассеянная тень (ближняя едва заметна, дальняя широкая и бледная): край читается тоном, а не линией.
   Все размеры — от ширины --pw, высота ≈ 2.28 × --pw (снимок 390 × 844 + полоса статуса); один и тот же экран работает и в ленте, и в большом телефоне. */
.phone { --pw: 280px; width: var(--pw); border-radius: calc(var(--pw) * .14);
  box-shadow: 0 0 calc(var(--pw) * .006) rgb(10 10 10 / .07), 0 calc(var(--pw) * .006) calc(var(--pw) * .02) rgb(10 10 10 / .05),
    0 calc(var(--pw) * .1) calc(var(--pw) * .24) calc(var(--pw) * -.06) rgb(10 10 10 / .14); }
.phone__scr { position: relative; overflow: hidden; border-radius: inherit;
  background: #f6f7f4; /* фон самого приложения */ padding-top: 11.3%; /* полоса статуса: 44 pt из 390 */ }
.phone__scr::before { content: ""; position: absolute; z-index: 1; top: calc(var(--pw) * .028); left: 50%;
  width: calc(var(--pw) * .3); height: calc(var(--pw) * .086); margin-left: calc(var(--pw) * -.15);
  border-radius: calc(var(--pw) * .043); background: var(--p-g-900); }
.phone__scr picture, .phone__scr img { display: block; width: 100%; height: auto; }
.app__scr figcaption { display: grid; grid-template-columns: 1.4em 1fr; align-items: baseline; margin-top: var(--s-5);
  font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); font-weight: var(--w-med); }
.app__n { font-weight: var(--w-med); color: var(--brand-text); font-variant-numeric: var(--font-num); }

/* QR: просто код на белом поле (без плашки и рамки — у кода своё белое поле), тихая подпись рядом. */
.app__qr { align-items: center; gap: var(--s-4); }
.app__qr img { width: 88px; height: 88px; }
.app__qr figcaption { font-size: var(--t-small); line-height: var(--lh-small); color: var(--fg-2); white-space: nowrap; font-variant-numeric: var(--font-num); }

/* < 900: шаги — подписями под экранами; экраны — лента на всю ширину окна, листается пальцем,
   следующий экран выглядывает справа (подсказка, что лента листается). */
@media (max-width: 899px) {
  .app__steps { display: none; }
  .app__phones { display: flex; gap: var(--s-4); margin-inline: calc(-1 * var(--grid-margin)); padding-inline: var(--grid-margin);
    padding-block: 2px var(--s-6); margin-bottom: calc(-1 * var(--s-6)); /* тень корпуса не обрезается краем ленты */
    scroll-padding-inline: var(--grid-margin); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .app__phones::-webkit-scrollbar { display: none; }
  .app__scr { flex: none; scroll-snap-align: start; }
  .app__scr .phone { --pw: min(68vw, 300px); }
  .app__scr figcaption { width: min(68vw, 300px); }
}

@media (min-width: 900px) {
  /* Компьютер: слева надзаголовок, заголовок, лид, шаги, под ними кнопка и QR (в своей ячейке, не на телефоне);
     справа телефон. Левая колонка — по центру высоты телефона. */
  .app__in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". . phones" "head head phones" "act qr phones" ". . phones"; column-gap: var(--s-7); row-gap: 0; }
  .app__act { margin-top: var(--s-9); align-self: center; }
  .app__qr { margin-top: var(--s-9); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .app__phones { display: grid; justify-self: end; align-self: start; grid-row: 1 / -1; margin-left: calc(var(--grid-gutter) * 2); }
  .app__scr { grid-area: 1 / 1; }
  .app__scr figcaption { display: none; }
  /* Высота телефона — по окну: целиком помещается под шапкой с полями 64 px сверху и снизу. */
  .app { --app-pw: clamp(240px, (100vh - var(--hdr-h) - 128px) / 2.28, 320px); }
  .app__scr .phone { --pw: var(--app-pw); }
  .app__scr:not(:first-child) { visibility: hidden; }
}
@media (min-width: 1200px) {
  .app__qr { flex-direction: row; align-items: center; gap: var(--s-4); }
}

/* Компьютер с движением (и без JS): за телефоном — второй экран «в глубине»
   (меньше, повёрнут на −6°, приглушён). Место под него — отступ слева у колонки телефона, на QR он не заходит. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .app__phones { position: relative; padding-left: calc(var(--app-pw) * .46); }
  .app__scr { --app-back: translate(-42%, 3%) rotate(-6deg) scale(.86); position: relative; z-index: 0; }
  .app__scr:first-child { z-index: 2; }
  .app:not(.is-anim) .app__scr:nth-child(2) { visibility: visible; opacity: .5; transform: var(--app-back); z-index: 1; }
  /* Экран в глубине — под белой вуалью (цвет поля) (не filter — дешевле и без размытия текста); читается силуэт, не слова.
     Без JS вуаль у всех экранов, кроме первого; в анимации — у всех, у экрана шага она гаснет (ниже, .is-on). */
  .app__scr:not(:first-child) .phone__scr::after, .app.is-anim .app__scr .phone__scr::after { content: ""; position: absolute; inset: 0;
    z-index: 2; pointer-events: none; background: rgb(255 255 255 / .62); }
}

/* Анимация (js/app.js, ≥ 900 px, без reduced-motion). Дорожка выше окна на --app-run: пока она прокручивается,
   сцена стоит под шапкой, а три невидимые метки по 1/3 пути делят прокрутку на шаги (их пересекает середина окна). */
.app.is-anim { --app-run: 135vh; padding-top: calc(var(--space-section) - var(--s-10)); padding-bottom: calc(var(--space-section) - var(--s-10)); }
.app.is-anim .app__track { position: relative; height: calc(100vh - var(--hdr-h) - var(--line-w) + var(--app-run)); }
/* Сцена своей высоты (телефон + поля), по вертикали — посередине окна под шапкой. */
.app.is-anim .app__in { position: sticky; padding-block: var(--s-10);
  top: calc(var(--hdr-h) + var(--line-w) + max(0px, (100vh - var(--hdr-h) - var(--line-w) - 128px - 2.28 * var(--app-pw)) / 2)); }
.app.is-anim .app__mark { display: block; position: absolute; left: 0; width: 1px; height: calc(var(--app-run) / 3);
  top: calc(50vh - var(--hdr-h) + var(--app-run) / 3 * var(--i)); pointer-events: none; }
.app__mark:nth-of-type(1) { --i: 0; } .app__mark:nth-of-type(2) { --i: 1; } .app__mark:nth-of-type(3) { --i: 2; }

/* Активный шаг: вес 500, цвет текста полный, слева от цифры — оранжевая черта 3 px (индикатор, не рамка и не плашка).
   Черта висячая, в поле сетки: цифры стоят ровно по краю колонки, как надзаголовок и кнопка.
   Остальные шаги тише: вес 300, --fg-2 (6.4:1 на бумаге). */
.app.is-anim .app__steps li { position: relative; font-weight: var(--w-light); color: var(--fg-2);
  transition: font-weight var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.app.is-anim .app__steps li::after { content: ""; position: absolute; left: calc(-1 * var(--s-4)); top: .18em; bottom: .18em;
  width: 3px; border-radius: 2px; background: var(--brand-text); transform: scaleY(0);
  transition: transform var(--dur-base) var(--ease-out); }
.app.is-anim .app__steps li[aria-current="step"] { font-weight: var(--w-med); color: var(--fg); }
.app.is-anim .app__steps li[aria-current="step"]::before { color: var(--brand-text); }
.app.is-anim .app__steps li[aria-current="step"]::after { transform: none; }

/* Смена экрана — как стопка: новый экран выходит из глубины вперёд (пружина --spring, только transform и opacity),
   прежний уходит назад и приглушается; соседний по шагу стоит «в глубине». Невидимые ждут там же, прозрачными.
   Движение сообщает шаг: следующий экран уже виден за текущим. Прерываемо: CSS-переходы, не ключевые кадры. */
.app.is-anim .app__scr { visibility: visible; opacity: 0; z-index: 0; transform: var(--app-back);
  transition: transform var(--spring-dur) var(--spring), opacity var(--dur-slow) var(--ease-out); }
.app.is-anim .app__scr.is-back { opacity: .5; z-index: 1; }
.app.is-anim .app__scr .phone__scr::after { opacity: 1; transition: opacity var(--dur-slow) var(--ease-out); }
.app.is-anim .app__scr.is-on .phone__scr::after { opacity: 0; }
.app.is-anim .app__scr.is-on { opacity: 1; z-index: 2; transform: none; }
/* QR появляется рядом с кнопкой на третьем шаге: «теперь отсканируйте». */
.app.is-anim .app__qr { transition: opacity var(--dur-slow) var(--ease-out), transform var(--spring-dur) var(--spring), visibility 0s; }
.app.is-anim:not([data-step="3"]) .app__qr { opacity: 0; visibility: hidden; transform: translateY(var(--reveal-shift));
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }

/* Меньше движения: три экрана в ряд по всей ширине сетки, подписи под каждым, без прилипания, смен и экрана «в глубине».
   Кнопка и QR — под заголовком. */
@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .app__in { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto;
    grid-template-areas: "head head" "act qr" "phones phones"; }
  .app__steps { display: none; }
  .app__phones { --rm-pw: clamp(220px, (min(100vw - 2 * var(--grid-margin), var(--grid-max)) - 4 * var(--grid-gutter)) / 3, 300px);
    grid-row: auto; display: flex; justify-content: space-between; gap: calc(var(--grid-gutter) * 2); justify-self: stretch;
    margin-left: 0; margin-top: var(--s-10); }
  .app__scr { grid-area: auto; }
  .app__scr:not(:first-child) { visibility: visible; }
  .app__scr figcaption { display: grid; width: var(--rm-pw); }
  .app__scr .phone { --pw: var(--rm-pw); }
}
/* Лента на телефоне листается и с клавиатуры (tabindex="0", стрелки): рамка фокуса внутри ленты, а не за краем экрана. */
.app__phones:focus-visible { outline-offset: -3px; border-radius: var(--radius); }

/* ---------------------------------------------------------------- О компании (тёмная) */
.about__top { row-gap: var(--s-6); align-items: end; }
.about__h, .about__lead { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .about__h { grid-column: 1 / span 5; }
  .about__lead { grid-column: 7 / -1; max-width: 46ch; }
}
.facts { margin-top: var(--space-block); display: grid; gap: var(--s-9) var(--grid-gutter); }
.facts__r { display: grid; gap: var(--s-3); align-content: start; }
.facts__fig { margin-left: -.05em; /* оптически по левому краю: у крупных цифр свой боковой пробел */ font-size: clamp(72px, 1.5rem + 10vw, 176px); line-height: .86; letter-spacing: -.04em; font-weight: var(--w-light); font-variant-numeric: proportional-nums lining-nums; white-space: nowrap; } /* не столбец цифр, а слово: пропорциональные, без дыры после «1» */
.facts__star { color: var(--brand); font-size: .4em; vertical-align: 1.1em; margin-left: .04em; }
.facts__r:first-child .facts__fig { margin-left: -.03em; } /* у ведущей «1» в «1999» широкий левый пробел */
.facts__r dd { font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--fg-2); max-width: 30ch; }
.facts__note { display: block; margin-top: var(--s-3); max-width: 44ch; }
@media (min-width: 900px) {
  .facts { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .facts__r:first-child { grid-column: 1 / span 6; }
  .facts__r:last-child { grid-column: 7 / -1; }
  /* Факты правят в админке (до четырёх): один — во всю ширину, три и четыре — по два в ряд. */
  .facts__r:only-child { grid-column: 1 / -1; }
  .facts__r:first-child:nth-last-child(n+3), .facts__r:first-child:nth-last-child(n+3) ~ .facts__r { grid-column: auto / span 6; }
}
.docs { margin-top: var(--space-block); }
.docs__h { margin-bottom: var(--s-4); }
.docs__t th, .docs__t td { padding: var(--s-4) 0; border-top: var(--line-w) solid var(--rule); text-align: left; font-weight: var(--w-reg); vertical-align: baseline; }
.docs__t tr:first-child > * { border-top-color: var(--rule-strong); }
.docs__t td { padding-left: var(--s-6); white-space: nowrap; width: 1%; }
.docs__t a { display: inline-flex; align-items: center; min-height: var(--tap); margin-block: -12px; font-weight: var(--w-med); color: var(--accent); }

/* ---------------------------------------------------------------- Юрлицам */
/* Один абзац между двумя тёмными разделами: узкая светлая полоса, ритм плотнее секционного (space-block сверху и снизу). */
.sec.biz { padding-block: var(--space-block); }
.biz__in { row-gap: var(--s-5); align-items: baseline; }
.biz__h, .biz__p { grid-column: 1 / -1; }
@media (min-width: 900px) { .biz__h { grid-column: 1 / span 5; } .biz__p { grid-column: 7 / -1; } }

/* ---------------------------------------------------------------- Новости (секции нет, пока нет новостей)
   Три последние строками: линия сверху, дата тихой строкой над заголовком; на широком экране — три колонки. */
.news__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-4); margin-bottom: var(--space-head); }
.news__all { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--w-med); color: var(--accent); }
.news__list { display: grid; }
.news__i { display: grid; gap: var(--s-2); align-content: start; padding-block: var(--s-6); border-top: var(--line-w) solid var(--rule); }
.news__i:first-child { border-top-color: var(--rule-strong); }
.news__d { font-variant-numeric: tabular-nums lining-nums; }
.news__t { color: var(--fg); font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); font-weight: var(--w-med); text-decoration: none; text-wrap: balance; max-width: 32ch; }
@media (hover: hover) { .news__t:hover { text-decoration-line: underline; text-decoration-color: var(--rule-link); } }
@media (min-width: 900px) {
  .news__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gutter); }
  .news__i { border-top-color: var(--rule-strong); }
}

/* ---------------------------------------------------------------- Акции (секции нет, пока нет действующих акций)
   Строки, а не карточки: линия сверху, баннер слева (если есть), срок — тихой строкой над названием. */
.promos__h { margin-bottom: var(--space-head); }
.promos__list { display: grid; }
.promo { display: grid; gap: var(--s-5); padding-block: var(--s-7); border-top: var(--line-w) solid var(--rule); }
.promo:first-child { border-top-color: var(--rule-strong); }
.promo__ph { display: block; }
.promo__ph img { width: 100%; height: auto; max-height: 360px; object-fit: cover; background: var(--bg-sunken); }
.promo__main { display: grid; gap: var(--s-3); align-content: start; min-width: 0; }
.promo__d { font-variant-numeric: tabular-nums lining-nums; }
.promo__b { max-width: 56ch; color: var(--fg-2); }
.promo__b p + p, .promo__b p + ul, .promo__b ul + p { margin-top: var(--s-3); }
.promo__b ul { list-style: disc; padding-left: 1.2em; }
.promo__b a { color: var(--accent); text-decoration-line: underline; text-decoration-thickness: var(--line-w); text-underline-offset: .24em; }
.promo__b strong { color: var(--fg); font-weight: var(--w-med); }
.promo__f a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--w-med); color: var(--accent); }
@media (min-width: 900px) {
  .promo { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); align-items: start; }
  .promo__ph { grid-column: 1 / span 5; }
  .promo__ph + .promo__main { grid-column: 7 / -1; }
  .promo > .promo__main:first-child { grid-column: 1 / span 8; }
}

/* ---------------------------------------------------------------- Контакты и реквизиты (тёмная) */
.contacts__h { margin-bottom: var(--space-head); }
.contacts__top { row-gap: var(--s-8); align-items: end; }
.contacts__main, .contacts__list { grid-column: 1 / -1; }
.contacts__main { display: grid; gap: var(--s-3); }
.contacts__tel {
  justify-self: start; font-size: clamp(36px, .6rem + 6.4vw, 96px); line-height: 1; letter-spacing: -.04em; font-weight: var(--w-med);
  color: var(--fg); padding-bottom: var(--s-2);
  background: linear-gradient(var(--brand), var(--brand)) 0 100% / 100% var(--line-w-strong) no-repeat;
}
@media (hover: hover) { .contacts__tel:hover { color: var(--fg); background-image: linear-gradient(var(--fg), var(--fg)); } }
.contacts__list { display: grid; gap: var(--s-5); }
.contacts__list dd { margin-top: var(--s-1); min-width: 0; overflow-wrap: anywhere; }
.contacts__list a { color: var(--fg); font-weight: var(--w-med); }
@media (min-width: 900px) {
  .contacts__list { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); }
  .contacts__list > div:first-child { grid-column: 1 / span 4; }
  .contacts__list > div:nth-child(2) { grid-column: 5 / span 6; }
  .contacts__list > div:nth-child(n+3) { grid-column: auto / span 4; } /* почта и другие телефоны — следующими строками */
}
.req { margin-top: var(--space-block); row-gap: var(--s-7); }
.req__side, .kv { grid-column: 1 / -1; }
.req__side { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; }
@media (min-width: 900px) {
  .req__side { grid-column: 1 / span 4; position: sticky; top: calc(var(--hdr-h) + var(--s-8)); align-self: start; }
  .kv { grid-column: 6 / -1; }
}
.kv__r { display: grid; gap: var(--s-1); padding-block: var(--s-4); border-top: var(--line-w) solid var(--rule); }
.kv__r:first-child { border-top-color: var(--rule-strong); }
.kv__r dt { font-size: var(--t-small); color: var(--fg-3); }
.kv__r dd { min-width: 0; overflow-wrap: anywhere; }
.kv__q { display: block; margin-top: var(--s-1); }
@media (min-width: 600px) { .kv__r { grid-template-columns: 13rem minmax(0, 1fr); column-gap: var(--grid-gutter); } .kv__r dt { padding-top: 2px; } }

/* ---------------------------------------------------------------- Подвал */
.ftr { border-top: var(--line-w) solid var(--rule); }

/* ==========================================================================
   СЛУЖЕБНЫЕ СТРАНИЦЫ: новости (news.html), политика (privacy.html) и 404. Шапка и подвал те же, что на главной.
   ========================================================================== */
.pg { padding-block: var(--space-block) var(--space-section); }
.pg__in { display: grid; gap: var(--s-6); align-content: start; min-height: 50svh; }
.pg__h { max-width: 14ch; }
.pg__code { font-size: var(--t-h4); letter-spacing: var(--tr-h4); }
.pg .t-lead { max-width: 40ch; }
.pg__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-8); margin-top: var(--s-4); font-size: var(--t-h4); letter-spacing: var(--tr-h4); font-weight: var(--w-med); }
.pg__links a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* Новости: годы заголовками, внутри — записи с датой. Заглушка, пока записей нет. */
.posts { margin-top: var(--space-block); max-width: var(--measure); }
.posts__empty { display: grid; gap: var(--s-3); }
.posts__y { margin-bottom: var(--s-6); padding-top: var(--s-4); border-top: var(--line-w) solid var(--rule-strong); }
.posts__year + .posts__year { margin-top: var(--space-block); }
.post { display: grid; gap: var(--s-3); padding-block: var(--s-7); border-top: var(--line-w) solid var(--rule); }
.posts__y + .post { border-top: 0; padding-top: 0; }
.post__t { max-width: 28ch; }
.post__body { display: grid; gap: var(--s-4); overflow-wrap: anywhere; }
.post__body a { color: var(--accent); text-decoration-line: underline; text-decoration-thickness: var(--line-w); text-underline-offset: .24em; }
.post__body ul, .post__body ol { padding-left: 1.2em; list-style: revert; }
.post__pdf { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--w-med); }
.post__ph { display: block; margin-block: var(--s-2); }
.post__ph img { width: 100%; height: auto; max-height: 480px; object-fit: cover; background: var(--bg-sunken); }

/* Политика конфиденциальности: разделы под линией, данные оператора таблицей «название — значение». */
.legal__h { max-width: 18ch; overflow-wrap: break-word; hyphens: auto; }
.legal__s { display: grid; gap: var(--s-4); max-width: var(--measure); padding-top: var(--s-6); border-top: var(--line-w) solid var(--rule); }
.legal__op { margin-top: var(--s-2); }
.legal__op a { overflow-wrap: anywhere; }