/* Start:/local/templates/atonlab/template_styles.css?179018147423933*/
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/local/templates/atonlab/fonts/GolosText-Cyrillic-Variable.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 800;
  font-display: swap;
  src: url("/local/templates/atonlab/fonts/GolosText-Latin-Variable.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: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/local/templates/atonlab/fonts/JetBrainsMono-Cyrillic-Variable.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/local/templates/atonlab/fonts/JetBrainsMono-Latin-Variable.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 {
  --navy-900: #0B3E77;
  --navy-800: #0E4E8F;
  --blue-600: #0A67C2;
  --accent-ink: #082B57;
  --orange-400: #FFA13B;
  --orange-500: #F5820F;
  --orange-600: #D96C00;
  --orange-100: #F5C995;
  --amber-400: #FBB040;
  --eyebrow-on-dark: #FFF4E5;
  --ink: #33465E;
  --slate: #46586F; /* затемнён 2026-07-20: владелец отметил бледность текста */
  --muted: #566A84; /* затемнён 2026-07-20 */
  --footer-muted: #B9C8DC;
  --bg-page: #E9EDF2;
  --bg-soft: #F4F7FA;
  --border: #E3E9F0;
  --success: #1F7A38;
  --warn: #C24E1A;
  --radius-card: 16px;
  --radius-ctl: 10px;
  --pad-x: clamp(20px, 4.5vw, 64px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--bg-page);
  color: var(--ink);
  font-family: "Golos Text", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

img {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

/* При включённом JavaScript выбранный филиал уже представлен единственной
   ссылкой в блоке карты. Карточечные ссылки остаются серверным no-JS
   fallback, но не дублируют то же действие после enhancement. */
html.js .branch-card__map {
  display: none;
}

.icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-ctl);
  background: #fff;
  color: var(--navy-900);
  box-shadow: 0 8px 24px rgba(16, 35, 63, 0.2);
  transform: translateY(-160%);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

:focus-visible {
  outline: 3px solid var(--navy-900);
  outline-offset: 3px;
}

.site-shell {
  width: 100%;
  max-width: 1440px;
  min-height: 100vh;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 60px rgba(16, 35, 63, 0.12);
}

.promo-bar {
  position: relative;
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px 64px 8px 24px;
  background: var(--navy-900);
  color: #fff;
  font-size: 13.5px;
}

.promo-bar__badge {
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--orange-500);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 700;
}

.promo-bar p {
  margin: 0;
}

.promo-bar__link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 6px;
  color: var(--amber-400);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.promo-bar__close {
  position: absolute;
  right: 12px;
  display: inline-grid;
  width: 44px;
  min-height: 44px;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.site-header {
  position: relative;
  z-index: 100;
  background: #fff;
}

.topbar {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px var(--pad-x);
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--slate);
  font-size: 13px;
}

.topbar__group {
  display: flex;
  align-items: center;
  gap: 18px;
}

.topbar__group--location .icon {
  color: var(--blue-600);
}

.contact-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.contact-link--phone,
.contact-value--city {
  color: var(--navy-900);
  font-weight: 700;
}

.mainnav {
  position: relative;
  display: flex;
  min-height: 84px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px var(--pad-x);
  border-bottom: 1px solid #EEF1F5;
  background: #fff;
}

.brand {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 14px;
  flex: 0 1 auto;
}

.brand img {
  width: auto;
  height: 46px;
}

.brand__tagline {
  max-width: 164px;
  padding-left: 14px;
  border-left: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.menu-toggle {
  display: none;
  width: 44px;
  min-height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  background: #fff;
  color: var(--navy-900);
  cursor: pointer;
}

.menu-toggle__close,
.menu-toggle[aria-expanded="true"] .menu-toggle__open {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__close {
  display: block;
}

.site-navigation-panel {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(14px, 2vw, 28px);
  flex: 1 1 auto;
}

.navlinks {
  min-width: 0;
}

.menu__list,
.submenu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__list {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 26px);
}

.menu__item {
  position: relative;
}

.menu__parent-row {
  display: flex;
  align-items: center;
}

.menu__link,
.submenu__link {
  display: flex;
  min-height: 44px;
  align-items: center;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.menu__link:hover,
.menu__item.selected > .menu__parent-row .menu__link,
.submenu__item.selected .submenu__link,
.submenu__link:hover {
  color: var(--blue-600);
}

.submenu-toggle {
  display: none;
  width: 44px;
  min-height: 44px;
  place-items: center;
  margin-right: -12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--slate);
  cursor: pointer;
}

html.js .submenu-toggle {
  display: inline-grid;
}

.submenu-toggle .icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.submenu-toggle[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

.submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  display: none;
  width: max-content;
  min-width: 240px;
  max-width: 340px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(16, 35, 63, 0.16);
}

html.js .menu__item.is-open > .submenu,
html:not(.js) .menu__item:hover > .submenu,
html:not(.js) .menu__item:focus-within > .submenu {
  display: block;
}

.submenu__link {
  padding: 8px 12px;
  border-radius: 8px;
  white-space: normal;
}

.submenu__link:hover {
  background: var(--bg-soft);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.search-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  background: var(--bg-soft);
  color: var(--muted);
  font-size: 13.5px;
}

/* Поиск в шапке. Свёрнутое состояние занимает ровно столько же места, сколько
   занимала одна ссылка «Найти услугу»: обёртка ничего не добавляет к строке
   шапки. Раскрытое поле на широком экране висит карточкой под ссылкой — тем же
   приёмом, что выпадающее меню (.submenu), поэтому шапка не перестраивается и
   соседние элементы не сжимаются. Ссылка при этом остаётся на месте: по ней же
   поле и сворачивается. */
.header-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.search-link[aria-expanded="true"] {
  border-color: var(--blue-600);
  color: var(--navy-900);
}

.header-search__form {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(22rem, calc(100vw - 2 * var(--pad-x)));
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(16, 35, 63, 0.16);
}

/* Свёрнутое поле скрыто атрибутом hidden — правило обязательно, иначе
   display: flex выше показал бы форму и без скрипта. */
.header-search__form[hidden] {
  display: none;
}

.header-search__input {
  min-width: 0;
  min-height: 44px;
  flex: 1 1 auto;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.header-actions .header-search__submit {
  flex: 0 0 auto;
  padding-inline: 16px;
}

.button,
.btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-ctl);
  font-weight: 700;
  cursor: pointer;
}

.button--accent,
.btn--accent {
  background: var(--orange-500);
  color: var(--accent-ink);
}

.button--accent:hover,
.btn--accent:hover {
  background: var(--orange-400);
}

.button--accent:focus-visible,
.btn--accent:focus-visible {
  outline-color: var(--navy-900);
}

.button--accent:disabled,
.btn--accent:disabled {
  background: var(--orange-100);
  color: var(--accent-ink);
  opacity: 1;
  cursor: not-allowed;
}

.button--light,
.btn--light {
  background: #fff;
  color: var(--navy-900);
}

.button--outline,
.btn--outline {
  background: #fff;
  border-color: var(--navy-900);
  color: var(--navy-900);
}

.button--outline:hover,
.btn--outline:hover {
  background: var(--bg-soft);
  border-color: var(--blue-600);
  color: var(--blue-600);
}

.button--outline-dark,
.btn--outline-dark {
  background: #fff;
  border-color: var(--border);
  color: var(--navy-900);
}

.button--outline-dark:hover,
.btn--outline-dark:hover {
  border-color: var(--blue-600);
  color: var(--blue-600);
}

.button--text,
.btn--text {
  min-height: 44px;
  padding: 10px 6px;
  background: transparent;
  border: none;
  color: var(--blue-600);
  text-decoration: underline;
}

.button--text:hover,
.btn--text:hover {
  color: var(--navy-900);
  text-decoration: underline;
}

.main-content {
  min-width: 0;
  scroll-margin-top: 24px;
}

.breadcrumbs {
  padding: 16px var(--pad-x);
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.breadcrumbs__list {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 13px;
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.breadcrumbs__item:not(:last-child)::after {
  content: "/";
  color: #AAB6C5;
}

.breadcrumbs__link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.breadcrumbs__link:hover {
  color: var(--blue-600);
}

.breadcrumbs__current {
  color: var(--ink);
}

.site-footer {
  padding: 56px var(--pad-x) 28px;
  background: var(--navy-900);
  color: var(--footer-muted);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 36px;
}

.footer-column {
  min-width: 0;
}

.footer-column h3 {
  margin: 0 0 16px;
  color: #fff;
  font-size: 15px;
}

.footer-column > a {
  display: flex;
  min-height: 44px;
  align-items: center;
}

.footer-column a:hover {
  color: #fff;
}

.footer-column--brand p {
  max-width: 360px;
}

.footer-logo {
  display: inline-flex;
  padding: 12px 16px;
  border-radius: 10px;
  background: #fff;
}

.footer-logo img {
  width: auto;
  height: 42px;
}

.footer-contacts {
  display: grid;
  justify-items: start;
}

.footer-contacts .contact-link,
.footer-contacts .contact-value {
  color: var(--footer-muted);
}

.footer-contacts .contact-link {
  min-height: 44px;
}

.footer-contacts .contact-value--hours {
  min-height: 38px;
}

.footer-contacts .contact-link--phone {
  color: #fff;
  font-size: 20px;
  font-weight: 800;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--footer-muted);
  font-size: 13px;
}

.footer-bottom__links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-bottom a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.footer-bottom a:hover {
  color: #fff;
}

.footer-cookie-settings {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.footer-cookie-settings:hover {
  color: #fff;
}

@media (max-width: 1200px) and (min-width: 1024px) {
  .brand__tagline,
  .search-link span {
    display: none;
  }

  .mainnav,
  .site-navigation-panel,
  .menu__list {
    gap: 10px;
  }

  .menu__link {
    font-size: 14px;
  }
}

@media (max-width: 1023px) {
  .topbar__group--location .contact-value--coverage {
    display: none;
  }

  .mainnav {
    min-height: 72px;
    flex-wrap: wrap;
    padding-block: 12px;
  }

  .brand img {
    height: 42px;
  }

  .brand__tagline {
    display: none;
  }

  html:not(.js) .menu-toggle {
    display: none;
  }

  html.js .menu-toggle {
    display: inline-grid;
  }

  .site-navigation-panel {
    position: static;
    display: flex;
    width: 100%;
    max-height: none;
    overflow: visible;
    align-items: stretch;
    flex: 1 0 100%;
    flex-direction: column;
    order: 3;
    padding: 14px var(--pad-x) 24px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: #fff;
    box-shadow: none;
  }

  html:not(.js) .site-navigation-panel {
    display: flex;
  }

  html.js .site-navigation-panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    max-height: min(70dvh, 40rem);
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(16, 35, 63, 0.16);
  }

  html.js .site-navigation-panel.is-open {
    display: flex;
    flex-direction: column;
    /* Панель ограничена max-height и прокручивается. Без flex-start её
       содержимое центрируется по вертикали, а дети сжимаются — область
       прокрутки не растёт, и всё, что выше центра, уходит за верхний край
       без возможности к нему прокрутить. С коротким меню это было
       незаметно; список направлений по карте клиента (13 пунктов,
       14.09.2026) выше панели, и первые пункты становились недоступны
       на 390 px. */
    justify-content: flex-start;
  }

  html.js .site-navigation-panel.is-open > * {
    flex-shrink: 0;
  }

  .navlinks,
  .menu__list,
  .header-actions {
    width: 100%;
  }

  .menu__list {
    display: block;
  }

  .menu__item {
    border-bottom: 1px solid var(--border);
  }

  .menu__parent-row {
    justify-content: space-between;
  }

  .menu__link {
    flex: 1 1 auto;
  }

  .submenu-toggle {
    margin-right: 0;
  }

  .submenu {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0 0 10px 18px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  html:not(.js) .submenu {
    display: block;
  }

  html.js .submenu {
    display: none;
  }

  html.js .menu__item.is-open > .submenu {
    display: block;
  }

  .header-actions {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .search-link,
  .header-actions .button,
  .header-actions .btn {
    flex: 1 1 0;
  }

  /* Панель шапки здесь — колонка под бургером, и места для карточки-выпадашки
     нет: раскрытое поле встаёт прямо в потоке, во всю ширину панели, а кнопка
     заявки переносится на следующую строку. Свёрнутый блок занимает ровно
     половину строки — место прежней ссылки. */
  .header-search {
    min-width: 0;
    flex: 1 1 0;
  }

  .header-search.is-open {
    align-items: stretch;
    flex-basis: 100%;
    flex-direction: column;
  }

  .header-search__form {
    position: static;
    width: auto;
    margin-top: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  /* Повтор базового правила обязателен: правило выше («.search-link,
     .header-actions .button, .header-actions .btn») той же специфичности и
     стоит в этом медиазапросе раньше, поэтому без повтора кнопка «Найти»
     внутри формы растянулась бы наравне с полем. */
  .header-actions .header-search__submit {
    flex: 0 0 auto;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .promo-bar {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    padding: 10px 58px 10px 20px;
  }

  /* Городской блок обязан оставаться доступным на любом вьюпорте: раньше вся
     .topbar__group--location скрывалась, и посетитель с телефона не мог ни
     увидеть свой город, ни выбрать другой. На узком экране от блока остаётся
     компактная кнопка с названием города — адрес и федеральную формулировку
     уже сняло правило ≤1023px, поэтому строка помещается рядом с телефоном.
     display оставляем флексовым (базовое правило .topbar), иначе группы
     встают в две строки. */
  .topbar {
    gap: 10px;
    padding-block: 2px;
  }

  .topbar__group--contacts .contact-link--email {
    display: none;
  }

  .topbar__group--location {
    min-width: 0;
    gap: 6px;
  }

  .topbar__group--contacts {
    flex: none;
    justify-content: flex-end;
  }

  .brand img {
    height: 38px;
  }

  .header-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-bottom__links {
    display: grid;
    gap: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.site-footer :focus-visible {
  outline-color: var(--eyebrow-on-dark);
}

/* --- Слайс X3: филиалы, Telegram и мобильная CTA -------------------------- */

/* Полный NAP каждого офиса в подвале: плотные колонки-справка, не карточки —
   подвал не должен превращаться во вторую страницу контактов. */
.footer-branches {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-branches h3 {
  margin: 0 0 16px;
  color: #fff;
  font-size: 15px;
}

.footer-branches__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-branches__item {
  display: grid;
  justify-items: start;
  gap: 2px;
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
}

.footer-branches__city {
  color: #fff;
}

.footer-branches__address {
  font-style: normal;
}

.footer-branches__phone {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  color: #fff;
  font-weight: 700;
}

.footer-branches__hours {
  opacity: 0.85;
}

.footer-telegram {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  color: var(--footer-muted);
}

.footer-telegram:hover {
  color: #fff;
}

.footer-telegram__glyph {
  flex: none;
}

/* Адрес выбранного филиала в шапке: печатается вместо федеральной формулировки
   после выбора города (script.js переключает hidden у обоих узлов). */
.city-selector__address {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Оба состояния переключаются атрибутом hidden — явное правило страхует от
   будущего display у .contact-value, который перебил бы стиль браузера. */
.city-selector__address[hidden],
.contact-value--coverage[hidden] {
  display: none;
}

/* Липкая мобильная CTA: панель есть в разметке всегда, но показывается
   скриптом только на узких экранах после 600px прокрутки. */
.mobile-cta {
  display: none;
}

@media (max-width: 1023px) {
  .city-selector__address {
    display: none;
  }
}

@media (max-width: 760px) {
  .mobile-cta {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px rgba(16, 32, 56, 0.12);
  }

  .mobile-cta[hidden] {
    display: none;
  }

  .mobile-cta__request {
    flex: 1 1 auto;
    justify-content: center;
  }

  .mobile-cta__top {
    flex: none;
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    color: var(--navy-900);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }

  /* Место под панель резервируется только когда она реально видна. */
  body.atonlab-has-mobile-cta {
    padding-bottom: 76px;
  }
}

/* End */


/* Start:/local/templates/atonlab/styles.css?1790246277115665*/
.section {
  padding: 64px var(--pad-x);
}

/* S4: city selector is static server HTML; JavaScript only applies a saved manual choice. */
.city-selector {
  display: inline-flex;
  position: relative;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.city-selector__toggle,
.city-selector__option {
  border: 0;
  color: inherit;
  font: inherit;
}

.city-selector__toggle {
  min-height: 36px;
  /* Название филиала бывает длинным («Санкт-Петербург»), а на 390px кнопка
     делит строку с телефоном — подпись усекается, а не ломает шапку. */
  max-width: 100%;
  overflow: hidden;
  padding: 4px 0;
  color: var(--navy-900);
  background: transparent;
  cursor: pointer;
  font-weight: 700;
  text-decoration: underline;
  text-overflow: ellipsis;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.city-selector__options {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  display: grid;
  min-width: 210px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(16, 35, 63, .18);
}

.city-selector__option {
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.city-selector__option:hover,
.city-selector__option.is-selected {
  color: #fff;
  background: var(--blue-600);
}

.branch-selector__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 24px;
}

.branch-selector__links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--navy-900);
  background: #fff;
  font-weight: 700;
  text-decoration: none;
}

.branch-selector__links a:hover,
.branch-selector__links a.is-selected,
.branch-card.is-selected {
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(36, 112, 180, .16);
}

@media (max-width: 760px) {
  .city-selector {
    flex-wrap: wrap;
  }

  .city-selector__options {
    left: 0;
    min-width: min(260px, calc(100vw - 32px));
  }
}

.section--soft {
  background: var(--bg-soft);
}

.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  /* Колонка карточки формы ограничена 560px: при свободном 1fr на широких
     мониторах карточка растягивалась до ~800px и поля формы становились
     неоправданно длинными (замечание владельца 2026-08-12: на десктопе форма
     «выглядит странно»). Текстовая колонка забирает остаток, а ≤900px
     раскладка складывается в один столбец медиа-запросом ниже. */
  grid-template-columns: minmax(0, 1fr) minmax(min(420px, 100%), 560px);
  gap: 56px;
  align-items: center;
  padding: 72px var(--pad-x);
  /* Тематический фон (сгенерирован, обезличенный) под тёмным overlay:
     текст остаётся контрастным, фото задаёт индустриальный контекст. */
  background:
    linear-gradient(100deg, rgba(11, 31, 58, 0.94) 0%, rgba(11, 31, 58, 0.82) 45%, rgba(11, 31, 58, 0.62) 100%),
    url('/local/templates/atonlab/images/hero-bg.webp') center / cover no-repeat,
    linear-gradient(180deg, var(--navy-900), var(--navy-800));
  color: #fff;
}

.hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.15), transparent 70%);
}

.hero > * {
  min-width: 0;
  position: relative;
  z-index: 1;
}

.eyebrow {
  color: var(--navy-800);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero .eyebrow,
.page-hero .eyebrow,
.dark-cta .eyebrow,
.services-hub__hero .eyebrow,
.service-direction__hero .eyebrow,
.service-detail__hero .eyebrow,
.services-cta .eyebrow {
  color: var(--eyebrow-on-dark);
}

.hero h1,
.page-hero h1 {
  margin: 16px 0 20px;
  /* Нижняя граница 26px, а не 34px: на 390px в колонку шириной ~295px самое
     длинное слово корпуса («законодательства», 16 знаков) при 34px не влезает.
     Переносы (hyphens) спасают не везде — словарь переносов есть не в каждом
     браузере, и без него слово рвётся посередине без дефиса. Уменьшенный кегль
     решает это одинаково везде; 5vw держит прежний размер от 520px и выше. */
  font-size: clamp(26px, 5vw, 44px);
  line-height: 1.08;
  font-weight: 800;
}

.hero p,
.page-hero p {
  max-width: 680px;
  color: #D8E7F8;
  font-size: 17px;
}

/* D2 (390px, /news/): «законодательства» на 34px занимает 316px при 310px
   доступных. Герой — grid, у его детей min-width:auto, поэтому колонка
   растягивалась под самое длинное слово и текст уходил за правую границу.
   min-width:0 возвращает колонку в контейнер. Заголовки переносим только по
   реальным границам слов: browser hyphenation давал заметные «посе-тили» и
   «Реабилита-ция». Для поясняющих абзацев автоматические переносы допустимы. */
.hero > *,
.page-hero > *,
.services-hub__hero > *,
.service-direction__hero > *,
.service-direction__hero-copy > *,
.service-detail__hero > *,
.service-detail__hero-copy > * {
  min-width: 0;
}

.hero h1,
.page-hero h1,
.services-hub__hero h1,
.service-direction__hero h1,
.service-detail__hero h1,
.news-article__hero h1,
.reference-hub__hero h1,
.reference-page__hero h1 {
  -webkit-hyphens: none;
  hyphens: none;
  overflow-wrap: anywhere;
  word-break: normal;
  text-wrap: balance;
}

.hero p,
.page-hero p,
.services-hub__hero p,
.service-direction__hero p,
.service-detail__hero p,
.news-article__hero p,
.reference-hub__hero p,
.reference-page__hero p {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.hero-facts,
.home-study__categories,
.home-trust-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.hero-facts li,
.home-study__categories li,
.home-trust-facts li {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}

.request-card {
  padding: 28px;
  border-radius: 24px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 30px 60px rgba(0,0,0,.3);
}

.request-card h2 {
  margin: 0 0 16px;
  color: var(--navy-900);
  font-size: 24px;
}

/* Обе карточки — белые формы внутри тёмных секций (.hero,
   .service-detail__hero): без этого правила они наследуют
   `.service-detail__hero .eyebrow`/`.hero .eyebrow` (--eyebrow-on-dark,
   бледно-кремовый под тёмный фон) и становятся нечитаемыми на белом.
   navy-800 на белом даёт контраст ~8.4:1. Правило обязано идти позже
   правил для `.hero .eyebrow`/`.service-detail__hero .eyebrow` выше по
   файлу — при равной специфичности выигрывает более позднее объявление. */
.request-card .eyebrow,
.sout-calculator .eyebrow {
  color: var(--navy-800);
  font-size: 12px;
}

/* Секция заявки на /contacts/: на десктопе — две колонки (заголовок
   с обещанием слева, форма справа). Без сетки форма центрировалась
   34rem-колонкой внутри полнширинной карточки, и левая половина секции
   пустовала (замечание владельца 2026-08-12). На мобильном колонки
   складываются — прежний вертикальный вид сохранён. */
.contacts-request {
  display: grid;
  gap: 32px;
  align-items: center;
}

.contacts-request__copy p {
  margin: 12px 0 0;
  max-width: 460px;
  color: var(--slate);
}

@media (min-width: 900px) {
  .contacts-request {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 560px);
  }
}

/* Карта 2ГИС на /contacts/ (волна 48, немедленный показ — волна 32/33). Блок
   стоит под карточками филиалов и повторяет их воздух: подпись с выбранным
   филиалом, место под виджет и обязательная по соглашению подпись «Работает
   на API 2ГИС». Сам iframe вставляет скрипт сразу при инициализации блока —
   без JavaScript место под карту ничего не занимает, остаётся только
   карточная ссылка на фирму в 2ГИС. */
.branch-map-2gis {
  display: grid;
  gap: 12px;
  justify-items: start;
  margin-top: 28px;
}

.branch-map-2gis h2 {
  margin: 0;
}

.branch-map-2gis__where {
  margin: 0;
}

.branch-map-2gis__status,
.branch-map-2gis__legal {
  margin: 0;
  color: var(--slate);
  font-size: 13.5px;
}

.branch-map-2gis__open {
  margin: 0;
}

/* Без JavaScript вставлять iframe некому — остаётся обычная ссылка на
   карточку фирмы в 2ГИС. Подпись о состоянии карты по той же причине
   показывается только вместе со скриптом, который её обновляет. */
.branch-map-2gis__status {
  display: none;
}

html.js .branch-map-2gis__status {
  display: block;
}

.branch-map-2gis__frame {
  width: 100%;
}

/* Высота карты по правилам 2ГИС — не меньше 400px; на узких экранах виджет
   остаётся читаемым и при 360px. */
.branch-map-2gis__frame iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  border-radius: var(--radius-ctl);
}

@media (max-width: 760px) {
  .branch-map-2gis__frame iframe {
    height: 360px;
  }
}

/* U4/1: карточка формы героя (3 поля вместо 4 — «Коротко о задаче» скрыто
   параметром HIDDEN_FIELDS у самого этого вызова, не из общего шаблона
   формы) обязана целиком помещаться в первый экран вместе с шапкой на
   1024×768 — проверено headless-рендером. Ниже 1200px убираем запас,
   который здесь не нужен: резерв под текст ошибки (никогда не показывает
   несколько строк в компактной карточке) и увеличенные отступы. Область
   действия — `.hero .request-card`: это НЕ трогает `.request-card` на
   /contacts/ (section.request-card) и на странице программы
   (.request-card.course-detail__signup — у неё свой компактный режим). */
@media (max-width: 1200px) {
  .hero {
    padding-block: 28px;
  }

  .hero .request-card {
    padding: 18px;
  }

  .hero .request-card h2 {
    margin-bottom: 10px;
  }

  .hero .request-card .atonlab-lead-form__field {
    margin-bottom: 10px;
  }

  .hero .request-card .atonlab-lead-form__field-error {
    min-height: 0;
    margin-top: 2px;
  }

  .hero .request-card .atonlab-lead-form__consent {
    margin-block: 8px;
  }
}

/* Узкие экраны: карточка формы встаёт под текст героя, как было при
   auto-fit-раскладке до ограничения колонки. */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
  }
}

.form-grid {
  display: grid;
  gap: 12px;
}

.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  font: inherit;
}

.consent {
  color: var(--muted);
  font-size: 12px;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.section-head h2,
.page-section h2 {
  margin: 0;
  color: var(--navy-900);
  font-size: clamp(28px, 4vw, 34px);
  line-height: 1.15;
}

.section-head p {
  max-width: 620px;
  margin: 10px 0 0;
  color: var(--slate);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.home-direction-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 18px;
  align-items: stretch;
}

/* Группы направлений содержат разное число ссылок, но ряд должен быть ровным:
   карточка тянется на всю высоту строки, список забирает остаток и остаётся
   прижатым к заголовку. */
.home-direction-group {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--home-group-color, var(--bg-soft));
}

.home-direction-group h3,
.home-direction-group ul {
  margin: 0;
}

.home-direction-group h3 {
  color: var(--navy-900);
  font-size: 19px;
}

.home-direction-group ul {
  display: grid;
  align-content: start;
  flex: 1 1 auto;
  gap: 10px;
  margin-top: 18px;
  padding-left: 0;
  list-style: none;
}

.home-direction-group a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--navy-900);
  font-weight: 700;
}

.home-value__layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 32px;
  align-items: center;
}

.home-value__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 24px;
  max-width: 900px;
  margin-bottom: 24px;
}

.home-value__grid p,
.home-value__grid ul {
  margin: 0;
}

.home-value__grid ul {
  display: grid;
  gap: 10px;
  padding-left: 20px;
}

.home-value__grid li::marker {
  color: var(--orange-500);
}

.image-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 460px;
  justify-self: end;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--border);
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, #EAF1F9 0%, #F4F7FA 55%, #FBF4E4 100%);
}

.home-document-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 18px;
}

.home-document-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 140px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  color: var(--navy-900);
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}

.home-document-card:hover,
.home-document-card:focus-visible {
  border-color: var(--blue-600);
  box-shadow: 0 14px 30px rgba(16, 35, 63, .09);
}

/* Плитка документа: тот же линейный глиф из общего спрайта, что у направлений,
   на бледном фоне палитры — карточка перестаёт быть голым текстом. */
.home-document-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--blue-600);
  background: #EAF1F9;
}

.home-document-card__icon .direction-icon__glyph {
  width: 24px;
  height: 24px;
}

.home-document-card__label {
  color: var(--blue-600);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.home-document-card strong {
  margin-top: auto;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: #fff;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

.card:hover {
  border-color: var(--blue-600);
  box-shadow: 0 14px 30px rgba(16,35,63,.09);
  transform: translateY(-2px);
}

.card h3 {
  margin: 0;
  color: var(--navy-900);
  font-size: 18px;
}

.card p {
  margin: 0;
  color: var(--slate);
}

/* Приоритетные услуги главной: иконка направления, полоса его цвета сверху и
   строка-CTA внизу. Цвет направления приходит инлайном как --card-accent
   (палитра групп из include/home/settings.php). */
.home-top-services .card {
  gap: 12px;
  padding-top: 20px;
  border-top: 4px solid var(--card-accent, #EAF1F9);
}

.home-top-services .direction-icon {
  background-color: var(--card-accent, #EAF1F9);
}

/* Анонсы услуг разной длины не должны растягивать ряд: три строки и обрезка. */
.card__excerpt {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* Отдельной ссылки в карточке нет — вся карточка уже ведёт по ссылке заголовка,
   второй таб-стоп на то же место не нужен. */
.card__cta {
  margin-top: auto;
  color: var(--blue-600);
  font-weight: 700;
}

.card__cta::after {
  content: " →";
}

.icon-chip {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: #EAF1F9;
  color: var(--blue-600);
  font-weight: 800;
}

.meta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  color: var(--muted);
  font-size: 13px;
}

.meta-row span {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--bg-soft);
}

.dark-cta {
  padding: 64px var(--pad-x);
  background: linear-gradient(180deg, var(--navy-900), var(--navy-800));
  color: #fff;
}

/* Hero разделов держит тот же приём, что и .hero главной: тёмно-синий overlay
   поверх индустриального фото. Overlay плотнее, чем на главной, — здесь текст
   идёт во всю ширину, светлых участков фото под ним быть не должно. Последний
   слой градиента остаётся фолбэком, если webp не отдался. */
.page-hero {
  display: grid;
  gap: 20px;
  padding: clamp(48px, 5vw, 64px) var(--pad-x);
  color: #fff;
  background:
    linear-gradient(100deg, rgba(11, 31, 58, .95) 0%, rgba(11, 31, 58, .88) 55%, rgba(11, 62, 119, .84) 100%),
    url('/local/templates/atonlab/images/hero-bg.webp') center / cover no-repeat,
    linear-gradient(180deg, var(--navy-900), var(--navy-800));
}

/* «О компании» — собственный баннер вместо общего hero-bg: на сайте-источнике
   у страницы отдельный баннер (flat-lay «рабочий стол инженера»), а общее
   индустриальное фото делало раздел неотличимым от остальных
   (замечание владельца 2026-08-12). Overlay чуть прозрачнее справа —
   в баннере свободная от предметов середина, текст читается. */
.page-hero--about {
  background:
    linear-gradient(100deg, rgba(11, 31, 58, .93) 0%, rgba(11, 31, 58, .82) 55%, rgba(11, 62, 119, .66) 100%),
    url('/local/templates/atonlab/images/about-hero.webp') center / cover no-repeat,
    linear-gradient(180deg, var(--navy-900), var(--navy-800));
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  counter-reset: step;
  /* Список шагов размечен как <ol>: порядок здесь — смысл, а не оформление.
     Нумерацию рисует .step-card::before, поэтому маркер браузера убираем. */
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-card {
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--bg-soft);
}

.step-card::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  margin-bottom: 8px;
  color: var(--orange-500);
  font-family: "JetBrains Mono", monospace;
  font-weight: 800;
}

.contacts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  gap: 28px;
}

.map-placeholder {
  min-height: 360px;
  border-radius: 24px;
  background: linear-gradient(135deg, #EAF1F9, #FDF0E8);
  display: grid;
  place-items: center;
  color: var(--navy-900);
  font-weight: 800;
}

.search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  max-width: 860px;
}

.search-form input {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  font: inherit;
}

.muted-note {
  max-width: 760px;
  margin: 18px 0 0;
  color: var(--muted);
}

.search-results__summary {
  margin: 24px 0 16px;
  color: var(--slate);
}

.search-results {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-result {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.search-result__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--blue-600);
  text-decoration: none;
}

.search-result__title:hover {
  text-decoration: underline;
}

.search-result__body {
  margin: 8px 0 0;
  color: var(--slate);
}

.search-result__url {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  word-break: break-all;
}

.search-empty {
  max-width: 620px;
  margin: 24px 0 0;
  color: var(--slate);
}

.cookie-banner {
  position: fixed;
  z-index: 900;
  left: 0;
  right: 0;
  bottom: 0;
  max-block-size: min(70dvh, 40rem);
  overflow-y: auto;
  padding: 20px var(--pad-x);
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -20px 40px rgba(16, 35, 63, 0.14);
}

.cookie-banner__content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.cookie-banner__content p {
  flex: 1 1 360px;
  margin: 0;
  color: var(--slate);
}

.cookie-banner__content a {
  color: var(--blue-600);
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cookie-banner__settings {
  max-width: 1200px;
  margin: 16px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.cookie-banner__fieldset {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: none;
}

.cookie-banner__fieldset legend {
  margin-bottom: 4px;
  padding: 0;
  font-weight: 700;
  color: var(--navy-900);
}

.cookie-category {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--slate);
}

.cookie-category input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.cookie-banner__settings-actions {
  margin-top: 16px;
}

@media (max-width: 640px) {
  .cookie-banner {
    max-block-size: min(45dvh, 24rem);
    padding-block: 14px;
  }

  .cookie-banner__content {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .cookie-banner__content p {
    flex: 0 1 auto;
  }

  .cookie-banner__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .cookie-banner__actions .button,
  .cookie-banner__actions .btn {
    width: 100%;
  }
}

@media (max-width: 860px) {
  .section-head,
  .contacts-grid {
    display: block;
  }

  .map-placeholder {
    margin-top: 24px;
  }

  .search-form {
    grid-template-columns: 1fr;
  }
}

.services-hub,
.service-direction,
.service-detail {
  background: var(--bg, #fff);
}

.services-hub__inner {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: 32px var(--pad-x) 72px;
}

.services-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 14px;
}

.services-breadcrumbs a {
  color: inherit;
}

.services-hub__hero,
.service-direction__hero,
.service-detail__hero {
  display: grid;
  gap: 16px;
  padding: clamp(32px, 4.5vw, 64px) var(--pad-x);
  color: #fff;
  background:
    linear-gradient(var(--hero-tint-angle, 135deg), rgba(11, 31, 58, .95) 0%, rgba(11, 31, 58, .88) 50%, rgba(11, 62, 119, .82) 100%),
    url('/local/templates/atonlab/images/hero-bg.webp') center / cover no-repeat,
    linear-gradient(135deg, var(--navy-900), var(--navy-800));
}

/* Тонировка сдвигается только углом overlay: фото и палитра общие, а каталог,
   направление и услуга всё же не выглядят одной и той же шапкой. */
.service-direction__hero {
  --hero-tint-angle: 105deg;
}

/* Шапка направления со своими ссылками (сведения об образовательных
   организациях у «Учебного центра») — две колонки, как у шапки услуги.
   Появляется только при наличии ссылок: у остальных направлений разметка
   прежняя, одноколоночная. */
.service-direction__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

/* Обёртка левой колонки повторяет ритм самой шапки: та — grid с gap 16px,
   и без этого содержимое слиплось бы в один блок. */
.service-direction__hero-copy {
  display: grid;
  align-content: start;
  gap: 16px;
}

.service-direction__hero-links {
  display: grid;
  gap: 12px;
}

.service-direction__hero-links .btn {
  justify-content: center;
  text-align: center;
}

.service-detail__hero {
  --hero-tint-angle: 160deg;
}

.services-hub__hero {
  margin: 0 calc(var(--pad-x) * -1);
}

.services-hub__hero h1,
.service-direction__hero h1,
.service-detail__hero h1 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.08;
}

.services-hub__hero p,
.service-direction__hero p,
.service-detail__hero p {
  max-width: 780px;
  margin: 0;
  color: #d8e7f8;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.55;
}

/* Поиск по хабу услуг (волна 45) на месте прежней ленты направлений. Поле и
   кнопка повторяют форму общего поиска (search/index.php): та же высота
   поля, тот же контур, та же кнопка. Ряд не выравнивается по центру
   намеренно — растянутая кнопка совпадает с полем по высоте. */
.services-hub__search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  max-width: 860px;
  padding: 24px 0 8px;
}

.services-hub__search-label {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--slate);
  font-weight: 700;
}

.services-hub__search-field {
  position: relative;
}

.services-hub__search-input {
  width: 100%;
  min-height: 48px;
  /* Справа место под крестик очистки: он лежит поверх поля. */
  padding: 12px 44px 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  font: inherit;
}

/* Крестик у нас свой (он же очищает фильтр), браузерный лишний. */
.services-hub__search-input::-webkit-search-cancel-button {
  display: none;
}

.services-hub__search-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--slate);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.services-hub__search-clear:hover {
  color: var(--navy-900);
}

.services-hub__search-status {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
}

/* На узком экране поле занимает всю ширину, кнопка встаёт под ним. */
@media (max-width: 760px) {
  .services-hub__search {
    grid-template-columns: 1fr;
  }
}

.services-hub__direction {
  padding: 40px 0;
  scroll-margin-top: 24px;
}

.services-hub__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}

.services-hub__group {
  padding: 24px;
  border-radius: var(--radius-card);
}

.services-hub__group h2 {
  margin: 0 0 16px;
  color: var(--navy-900);
  font-size: 22px;
}

.services-hub__group-directions {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.services-hub__group-directions a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 8px;
  border-radius: 12px;
  color: var(--navy-900);
  background: rgba(255, 255, 255, .72);
  font-weight: 700;
  text-decoration: none;
}

.services-hub__group-directions small {
  color: var(--slate);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.section-head__title {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Плитка направления: фон — из палитры групп, глиф — линейный SVG из общего
   спрайта, цвет наследуется через currentColor (см. DirectionIconRenderer). */
.direction-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  color: var(--navy-900);
}

.direction-icon__glyph {
  display: block;
  width: 32px;
  height: 32px;
}

.direction-icon--sm {
  width: 28px;
  height: 28px;
  border-radius: 999px;
}

.direction-icon--sm .direction-icon__glyph {
  width: 18px;
  height: 18px;
}

.services-cards,
.mandatory-law-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 18px;
  margin-bottom: 24px;
}

.service-card,
.mandatory-law-card,
.service-stage,
.sout-calculator,
.sout-penalty,
.faq__item {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 35, 63, .06);
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 24px;
}

.service-card h3,
.service-card p,
.mandatory-law-card p,
.service-stage h3,
.service-stage p {
  margin: 0;
}

.service-card h3,
.service-stage h3 {
  color: var(--navy-900);
  font-size: 19px;
}

.service-card h3 a {
  color: inherit;
}

.service-card p,
.mandatory-law-card p,
.service-stage p {
  color: var(--slate);
  line-height: 1.55;
}

.service-card__meta,
.service-detail__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.service-card__meta span {
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--navy-900);
  background: var(--bg-soft);
  font-size: 14px;
  font-weight: 700;
}

.service-card__hot {
  align-self: flex-start;
  padding: 5px 9px;
  border-radius: 999px;
  color: #8a3512;
  background: #fdf0e8;
  font-size: 12px;
  font-weight: 800;
}

.mandatory-law-card {
  padding: 22px;
  border-left: 4px solid var(--amber-400);
}

.service-direction__hero,
.service-detail__hero {
  padding-inline: var(--pad-x);
}

.service-direction__hero .services-breadcrumbs,
.service-detail__hero .services-breadcrumbs {
  color: #b9c8dc;
}

.service-detail__metrics > div {
  min-width: min(180px, 100%);
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 14px;
  background: rgba(255, 255, 255, .08);
}

.service-detail__metrics dt {
  color: #b9c8dc;
  font-size: 13px;
}

.service-detail__metrics dd {
  margin: 5px 0 0;
  font-size: 20px;
  font-weight: 800;
}

.sout-calculator,
.sout-penalty,
.services-cta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 28px;
  align-items: start;
  width: min(100% - (var(--pad-x) * 2), 1180px);
  margin: 40px auto;
  padding: clamp(24px, 4vw, 40px);
}

.sout-calculator h2,
.sout-penalty h2,
.services-cta h2 {
  margin: 6px 0 0;
  color: var(--navy-900);
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.15;
}

.sout-calculator p,
.sout-penalty p {
  color: var(--slate);
  line-height: 1.55;
}

.sout-calculator__form {
  display: grid;
  gap: 8px;
}

.sout-calculator__form label {
  color: var(--navy-900);
  font-size: 14px;
  font-weight: 700;
}

.sout-calculator__form input {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  font: inherit;
}

.sout-calculator__form button {
  min-height: 44px;
  margin-top: 8px;
}

/* S2: коммерческая услуга и управляемый DETAIL_TEXT. */
.service-detail {
  overflow-x: clip;
}

.service-detail__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  width: min(100%, 1180px);
  margin-inline: auto;
}

.service-detail__hero-copy {
  min-width: 0;
}

.service-detail__compact-cta {
  width: auto;
  margin: 0;
  color: var(--ink);
}

.service-detail__section > :not(.section-head),
.service-detail__content {
  width: min(100%, 70ch);
  margin-inline: auto;
}

.service-detail__facts-content > :first-child {
  margin-top: 0;
}

.service-detail__periodicity,
.service-detail__price p {
  margin: 18px 0 0;
  color: var(--slate);
}

.service-detail__price p {
  color: var(--navy-900);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 800;
}

.service-detail__content {
  margin-block: clamp(32px, 5vw, 64px);
  color: var(--ink);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.7;
}

.service-detail__content :is(h2, h3, h4) {
  margin: 1.8em 0 .7em;
  color: var(--navy-900);
  line-height: 1.2;
}

.service-detail__content :is(p, ul, ol, blockquote) {
  margin: 0 0 1em;
}

.service-detail__content .managed-html__list {
  padding-left: 1.35em;
}

.service-detail__content .managed-html__list li + li {
  margin-top: .45em;
}

.service-detail__content .managed-html__contents {
  margin: 0 0 1.5em;
  padding: 1.25em 1.5em;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg-soft);
}

.service-detail__content .managed-html__contents h2 {
  margin: 0 0 .65em;
  font-size: 1.05em;
}

.service-detail__content .managed-html__contents .managed-html__list {
  margin: 0;
}

.service-detail__content .managed-html__service-cta {
  margin: 1.5em 0 2em;
}

.managed-html__list > .managed-html__list-item--figure {
  list-style: none;
}

.managed-html__figure {
  width: fit-content;
  max-width: 100%;
  margin: 1.5em auto;
}

/* Фигуры в теле услуги обтекаются текстом, «как в книге» (владелец
   2026-08-20): картинка уходит вправо, текст обнимает её слева. Заголовки
   секций начинают новую «страницу» — clear. На узких экранах обтекание
   теряет смысл — фигура снова во всю колонку по центру. */
.service-detail__content .managed-html__figure {
  float: right;
  width: min(40%, 480px);
  margin: .3em 0 1em 1.5em;
}

.service-detail__content .managed-html__figure .managed-html__image {
  max-width: 100% !important;
}

/* Обтекание определяется ОРИЕНТАЦИЕЙ картинки, а не обёрткой (волна 36).
   Старый сайт оборачивал в div.imgm любые картинки, и импорт это сохранил:
   исключение «по центру», придуманное для трёх портретных сканов (они при
   обтекании рвали заголовок соседней секции — замечание клиента 2026-08-20),
   прятало в блок 28 альбомных фотографий. Теперь по центру остаются только
   портретные, а альбомные и квадратные внутри .imgm обтекаются как обычные
   иллюстрации. Ориентацию проставляет ManagedHtmlRenderer по размерам файла;
   без модификатора (файл недоступен) поведение прежнее — по центру. */
.service-detail__content .imgm .managed-html__figure:not(.managed-html__figure--landscape) {
  float: none;
  width: fit-content;
  margin: 1.5em auto;
}

.service-detail__content .imgm + :is(h2, h3),
.service-detail__content .imgm + div + :is(h2, h3) {
  clear: both;
}

@media (max-width: 700px) {
  .service-detail__content .managed-html__figure {
    float: none;
    width: fit-content;
    margin: 1.5em auto;
  }
}

/* U4/3: тело услуги — колонка до ~70ch (.service-detail__content); без
   собственного предела инлайновая картинка (например, знак «100 лучших
   товаров» на СОУТ) растягивается на всю её ширину. 480px — соразмерный
   потолок для иллюстрации/значка внутри тела, фигура и подпись остаются
   центрированы (.managed-html__figure: width:fit-content; margin:auto).
   Фикс. px, а не min(480px, 100%): для <img> с width/height:auto +
   object-fit:contain движок разметки игнорирует max-width как
   мат.функцию в алгоритме сайзинга заменяемого элемента — с min() картинка
   реально рендерилась шире 480 (проверено headless-рендером). Ниже 500px
   ширина колонки тела и так меньше 480 — переключаемся на относительный
   100%, чтобы не перекрыть узкий контейнер на мобильных. */
.managed-html__image {
  width: auto !important;
  max-width: 480px !important;
  height: auto !important;
  max-height: 520px;
  margin: 0 auto;
  border-radius: var(--radius-card);
  object-fit: contain;
}

@media (max-width: 500px) {
  .managed-html__image {
    max-width: 100% !important;
  }
}

.managed-html__caption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.managed-html__table-scroll {
  max-width: 100%;
  margin: 1.5em 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

.managed-html__table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
}

.managed-html__table :is(th, td) {
  padding: .6em .75em;
  border: 1px solid var(--border);
  vertical-align: top;
  text-align: left;
}

/* Таблица в теле услуги: наименования отчётов — целые предложения, поэтому
   здесь колонки переносятся по словам и таблица укладывается в ширину
   колонки вместо горизонтальной прокрутки (как в .reference-price-table).
   Общий managed-html__table берёт max-content и рассчитан на узкие ячейки. */
.service-detail__content .managed-html__table {
  width: 100%;
  min-width: 0;
  table-layout: auto;
}

.service-detail__content .managed-html__table :is(th, td) {
  white-space: normal;
}

/* Колонка дат — короткие значения вида «до 15 января»: перенос внутри неё
   читается как две разные даты, поэтому держим строкой. */
.service-detail__content .managed-html__table :is(th, td):nth-child(2) {
  white-space: nowrap;
}

/* Таблица программ в теле курса (электробезопасность, промышленная
   безопасность): колонка цены узкая, а тела печатаются с переносами по
   слогам — «Стоимость» рвалась на три строки, «3 000» — на две. Заголовки
   и колонку цены держим строкой, переносы в таблице выключаем; длинные
   названия программ в первой колонке по-прежнему переносятся по словам. */
/* Легаси-блок «Стоимость и время обучения» в теле курса: подпись идёт перед
   значением (правка клиента 25.08). Одинаковыми абзацами с равными отступами
   пара не читается — прижимаем значение к подписи и выделяем его, как в
   плашках шапки курса. */
.course-detail__content p:has(+ p.uc) {
  margin-bottom: .15em;
}

.course-detail__content p.uc {
  margin-top: 0;
  color: var(--navy-900);
  font-weight: 700;
}

/* Таблица в теле курса (области аттестации, программы обучения): названия —
   целые предложения, поэтому таблица укладывается в ширину колонки и
   переносит их по словам. Без этого она уезжала в горизонтальную прокрутку,
   и колонки с ценами оказывались за краем экрана. */
.course-detail__content .managed-html__table {
  width: 100%;
  min-width: 0;
  table-layout: auto;
}

.course-detail__content .managed-html__table :is(th, td) {
  -webkit-hyphens: none;
  hyphens: none;
}

/* Строкой держим только подписи колонок и колонку цены. Заголовок раздела
   внутри таблицы (th на всю ширину) переносится по словам — иначе одна
   длинная строка растягивает таблицу и выталкивает цены за край. */
.course-detail__content .managed-html__table thead th,
.course-detail__content .managed-html__table td:last-child {
  white-space: nowrap;
}

/* Суммы штрафов в карточках перенесённых страниц: «1 000 000» разорванное
   переносом читается как два числа. */
.service-detail__content .ecol {
  white-space: nowrap;
}

.managed-html__table th {
  color: var(--navy-900);
  background: var(--bg-soft);
  font-weight: 800;
}

.managed-html__document-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  align-items: center;
  margin: 1em 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  color: var(--navy-900);
  background: var(--bg-soft);
}

.managed-html__document-kind {
  grid-row: span 2;
  padding: 3px 7px;
  border-radius: 6px;
  color: var(--accent-ink);
  background: var(--orange-500);
  font-size: 12px;
  font-weight: 800;
}

.managed-html__document-title {
  color: var(--blue-600);
  font-weight: 700;
}

.managed-html__document-name {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* Reusable scanned-document card: galleries, reviews and licence evidence. */
.document-gallery,
.reviews-cards,
.managed-typed-block__document-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 18px;
  padding: 0;
  list-style: none;
}

/* Обычная карточка — это только превью документа: строки сетки задаются
   содержимым, потому что подпись и ссылка на оригинал остались лишь у файлов,
   которые лайтбокс не показывает. */
.document-card {
  display: grid;
  align-content: start;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}

.document-card__preview {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  background: #f5f7fa;
  outline-offset: 3px;
}

/* Пропорция 4:3 держит ряды карточек-сканов одинаковыми, но в теле услуги
   карточка стоит одна и выравнивать её не с чем: широкая схема вписывалась по
   ширине и оставляла под собой полосу пустого фона (страница СЗЗ, 21.08).
   Здесь высота — по изображению, с ограничением сверху. */
.service-detail__content .document-card__preview {
  aspect-ratio: auto;
  max-height: 460px;
}

.service-detail__content .document-card .document-card__image {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 460px;
  margin-inline: auto;
}

/* Селектор из двух классов: правило `.managed-page__content img` задаёт
   `height: auto` и без этого веса ряды карточек выходили разной высоты.
   Скан вписывается целиком (`contain`) — обрезать документ нельзя, срежется
   текст; кадрирование `cover` уместно только в фотогалерее. */
.document-card .document-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Подпись и прямая ссылка остаются у карточек файлов (PDF и прочее) и там,
   где оригинал — действительно другой файл, а не тот же самый. */
.document-card__caption {
  color: var(--navy-900);
  font-weight: 700;
  line-height: 1.35;
}

.document-card__original {
  width: max-content;
  max-width: 100%;
  color: var(--blue-600);
  font-size: 14px;
  font-weight: 700;
}

/* Фотогалерея: снимки техники и работ. Подписи и ссылки на «оригинал» здесь
   не нужны — открывается тот же лайтбокс, что и у карточки документа. */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 14px;
  margin: 18px 0;
}

.photo-gallery__item {
  margin: 0;
}

.photo-gallery__link {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: #f5f7fa;
  outline-offset: 3px;
}

.photo-gallery__link:focus-visible {
  outline: 3px solid var(--navy-900);
  outline-offset: 3px;
}

/* Селектор из двух классов: правило `.managed-page__content img` задаёт
   `height: auto` и без этого веса ломало бы одинаковую высоту миниатюр. */
.photo-gallery .photo-gallery__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.document-lightbox {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 20, 36, .82);
}

.document-lightbox[hidden] {
  display: none;
}

.document-lightbox__frame {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 1100px);
  max-height: 100%;
}

.document-lightbox__image {
  max-width: 100%;
  max-height: calc(100vh - 80px);
  object-fit: contain;
  background: #fff;
}

.document-lightbox__close {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 10px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #fff;
  border-radius: 8px;
  color: #fff;
  background: rgba(8, 20, 36, .78);
  cursor: pointer;
}

.managed-html__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 12px;
  margin: 24px 0;
}

.managed-html__metric {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}

.managed-html__metric dt {
  color: var(--blue-600);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  line-height: 1;
}

.managed-html__metric dd {
  margin: 10px 0 0;
  color: var(--slate);
  line-height: 1.4;
}

.case-status {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.service-detail__final-cta {
  width: min(calc(100% - (var(--pad-x) * 2)), 1180px);
  margin: 40px auto 72px;
}

@media (max-width: 760px) {
  .service-detail__hero-grid,
  .service-direction__hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-detail__compact-cta {
    width: 100%;
  }
}

.sout-penalty {
  border-left: 5px solid var(--orange-500);
}

.included-list,
.documents-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 12px;
  padding: 0;
  list-style: none;
}

.included-list li,
.documents-list li {
  min-height: 44px;
  padding: 16px 18px 16px 42px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--slate);
  background: #fff;
  line-height: 1.45;
}

.included-list li::before,
.documents-list li::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 12px 0 -24px;
  border-radius: 50%;
  background: var(--blue-600);
}

.service-stages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 18px;
  padding: 0;
  list-style: none;
}

.service-stage {
  padding: 24px;
}

.service-stage__number {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--orange-500);
  font-family: "JetBrains Mono", monospace;
  font-weight: 800;
}

.faq {
  display: grid;
  gap: 12px;
}

.faq__item {
  padding: 0;
}

.faq__item summary {
  min-height: 44px;
  padding: 18px 52px 18px 20px;
  color: var(--navy-900);
  font-weight: 800;
  cursor: pointer;
}

.faq__item p {
  margin: 0;
  padding: 0 20px 20px;
  color: var(--slate);
  line-height: 1.55;
}

.services-cta {
  margin-bottom: 72px;
  border-radius: var(--radius-card);
  color: #fff;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-800));
}

.services-cta h2 {
  color: #fff;
}

.services-cta .btn {
  align-self: center;
  justify-self: start;
  min-height: 44px;
}

.services-hub a:focus-visible,
.service-direction a:focus-visible,
.service-detail a:focus-visible,
.service-detail button:focus-visible,
.service-detail input:focus-visible,
.faq__item summary:focus-visible {
  /* Контур берётся из --focus-ring. На светлом это по-прежнему navy-900.
     Внутри тёмной секции (финальная CTA услуги) navy сливался с фоном — прежде
     это лечили отдельным правилом на каждый архетип, а для .service-detail
     такого правила просто не написали. */
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .services-hub__groups {
    grid-template-columns: 1fr;
  }

  .services-hub__inner {
    padding-top: 20px;
  }

  .services-hub__hero,
  .service-direction__hero,
  .service-detail__hero {
    padding-block: 36px;
  }

  .sout-calculator,
  .sout-penalty,
  .services-cta {
    width: calc(100% - (var(--pad-x) * 2));
    margin-block: 24px;
  }
}

/* Managed page runtime */
.managed-page {
  min-width: 0;
  overflow-x: clip;
  color: var(--navy-900);
  background: var(--bg-soft);
  font-family: inherit;
}

.managed-page > .breadcrumbs {
  padding-inline: var(--pad-x);
  border-color: var(--border);
}

.managed-page > .breadcrumbs .breadcrumbs__list {
  width: min(100%, 1180px);
  margin-inline: auto;
}

/* Контентная колонка центрируется целиком, а не каждый ребёнок по отдельности:
   при margin-inline:auto у детей eyebrow и lead (у них своя max-width) уезжали
   к центру, а h1 оставался слева (/about/). Фон — общий фото-hero из .page-hero. */
.managed-page > .page-hero {
  grid-template-columns: minmax(0, 1180px);
  justify-content: center;
  gap: clamp(14px, 2vw, 20px);
  padding: clamp(40px, 5vw, 64px) var(--pad-x);
}

.managed-page > .page-hero > * {
  min-width: 0;
}

.managed-page > .page-hero .page-hero__eyebrow {
  color: var(--eyebrow-on-dark);
}

.managed-page__content {
  width: min(100%, 1180px);
  max-width: 100%;
  min-width: 0;
  margin: clamp(24px, 5vw, 56px) auto;
  padding: clamp(24px, 4vw, 48px) var(--pad-x);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow-wrap: anywhere;
  background: #fff;
}

.managed-page__content h2,
.managed-page__content h3,
.managed-page__content h4 {
  margin: 1.5em 0 .65em;
  color: var(--navy-900);
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.managed-page__content h2:first-child,
.managed-page__content h3:first-child,
.managed-page__content h4:first-child {
  margin-top: 0;
}

.managed-page__content p {
  margin: 0 0 1em;
}

.managed-page__content p:empty {
  display: none;
  margin: 0;
}

.managed-page__content a {
  color: var(--blue-600);
}

.managed-page__content p a {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.managed-page__content p a:hover {
  color: var(--navy-900);
  text-decoration-thickness: 2px;
}

.managed-page__content p a:focus-visible {
  outline: 3px solid var(--navy-900);
  outline-offset: 3px;
  border-radius: var(--radius-ctl);
}

.managed-page__content a:focus-visible {
  outline: 3px solid var(--navy-900);
  outline-offset: 3px;
  border-radius: var(--radius-ctl);
}

.managed-page__content img,
.managed-page__content svg {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.managed-page__content .clients-page {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  min-width: 0;
  margin: 0;
  padding: 0;
}

.managed-page__content .clients-page .row {
  display: contents;
}

.managed-page__content .clients-page [class*="col-"] {
  float: none !important;
  width: auto !important;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 35, 63, .06);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.managed-page__content .clients-page [class*="col-"]:hover {
  border-color: var(--blue-600);
  box-shadow: 0 14px 32px rgba(16, 35, 63, .12);
  transform: translateY(-2px);
}

.managed-page__content .clients-page > a {
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background-color: #fff;
}

.managed-page__content .clients-page a[style*="background-image"] {
  display: block;
  min-width: 44px;
  min-height: 140px;
  aspect-ratio: 16 / 10;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

@media (max-width: 1024px) {
  .managed-page__content .clients-page {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .managed-page__content {
    margin-block: 20px;
    border-radius: var(--radius-ctl);
  }

  .managed-page__content .clients-page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .managed-page > .page-hero,
  .managed-page__content {
    max-width: 100%;
    padding-inline: var(--pad-x);
  }

  .managed-page__content .clients-page {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .managed-page__content .clients-page [class*="col-"] {
    transition: none;
  }

  .managed-page__content .clients-page [class*="col-"]:hover {
    transform: none;
  }
}

/* Task 2026-07-20 verstka: news list + detail (Д5). */
.news-index,
.news-article {
  background: var(--bg, #fff);
}

.news-index__inner,
.news-article__inner {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: 32px var(--pad-x) 72px;
}

/* D3: форма поиска по материалам не имела ни одного правила — подпись, поле и
   кнопка раскладывались строчным потоком, поле упиралось в край экрана, а
   «Найти» переносилось на отдельную строку под подписью. Собираем их в один
   блок на той же сетке отступов, что и карточки ниже. */
.news-list__search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: center;
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg-soft);
}

.news-list__search label {
  grid-column: 1 / -1;
  color: var(--navy-900);
  font-size: 14px;
  font-weight: 700;
}

.news-list__search input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  color: var(--ink);
  background: #fff;
}

.news-list__search .button {
  min-height: 44px;
  justify-content: center;
}

/* На узком экране кнопка встаёт под поле во всю ширину: рядом с полем на 390px
   от поля остаётся полоска в ~180px, вводить в неё неудобно. */
@media (max-width: 480px) {
  .news-list__search {
    grid-template-columns: minmax(0, 1fr);
  }
}

.news-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 18px;
  margin-top: 32px;
}

.news-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 35, 63, .06);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

.news-card:hover {
  border-color: var(--blue-600);
  box-shadow: 0 14px 30px rgba(16, 35, 63, .09);
  transform: translateY(-2px);
}

/* Одни пропорции у фото материалов и в ленте /news/, и в блоке из 3 материалов
   на главной. Карточка без ссылки-обёртки печатает <img class="news-card__media">
   напрямую — ей нужны те же width/object-fit, иначе фото растягивается. */
.news-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

/* Внутри ссылки-обёртки фото позиционируется абсолютно: height:100% у обычного
   потока не «прибивается» к высоте из aspect-ratio, и вертикальный снимок
   растягивал карточку на всю свою высоту (проверено в Chrome 1440px). */
a.news-card__media {
  position: relative;
}

.news-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

img.news-card__media {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Карточка без превью получает компактную шапку в палитре бренда: ряд не
   разваливается на «карточка с фото — карточка из голого текста». */
.news-card__cap {
  display: block;
  height: 72px;
  background:
    linear-gradient(120deg, var(--navy-900) 0%, var(--blue-600) 65%, var(--navy-800) 100%);
}

.news-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}

.news-card__date,
.news-article__date {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.news-article__updated {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* Заголовок и анонс клампятся: один длинный анонс не должен тянуть весь ряд. */
.news-card__body h3 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--navy-900);
  font-size: 18px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.news-card__body h3 a {
  color: inherit;
}

.news-card__body p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--slate);
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.news-card__link {
  margin-top: auto;
  color: var(--blue-600);
  font-weight: 700;
  text-decoration: none;
}

/* Решение владельца 2026-08-20: редакционные тела — выключка по обоим краям
   по всему сайту, единообразно для абзацев И пунктов списков (прежний
   разнобой был из-за justified-абзацев при левых списках). Переносы слов
   смягчают «реки» в узкой колонке. Карточки, hero и CTA не трогаем —
   короткие строки не выключаются. */
.managed-html p,
.service-detail__content p,
.news-article__content p,
.course-detail__content p,
.managed-page__content p,
.managed-html li,
.service-detail__content li,
.news-article__content li,
.course-detail__content li,
.managed-page__content li {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  text-wrap: pretty;
}

/* Вводная строка тела, которую клиент просит печатать «как названия разделов»
   (Брускова, 21.08). Настоящим заголовком она быть не может: текст дословно
   повторяет H1 страницы, и рендерер такой заголовок понижает — иначе документ
   дважды объявляет одну тему. Поэтому абзац с классом печатается заголовком.
   Селектор с типом p — чтобы перебить выключку по обоим краям. */
:is(.managed-html, .service-detail__content, .news-article__content, .course-detail__content, .managed-page__content) p.managed-html__lead-heading {
  margin: 1.6em 0 .7em;
  color: var(--navy-900);
  /* Размер первого заголовка тела (h2 после нормализации уровней) — клиент
     просил «как Законодательство», а это именно он, а не разделы ниже. */
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

/* Таблица рядом с плавающей иллюстрацией сжимается до половины колонки, и
   длинные ячейки обрываются в горизонтальный скролл (таблица штрафов на ПЭК,
   21.08). Таблицам обтекание не нужно — они занимают всю ширину колонки. */
.service-detail__content .managed-html__table-scroll {
  clear: both;
}

/* Подчёркнутый термин в редакционном теле (правка Брусковой 21.08): отбиваем
   линию от букв, чтобы подчёркивание читалось как акцент, а не как ссылка —
   ссылки в телах остаются цветными. */
.managed-html u,
.service-detail__content u,
.news-article__content u,
.course-detail__content u,
.managed-page__content u {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 40px;
}

.pagination a,
.pagination b,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--navy-900);
  text-decoration: none;
}

.pagination a:hover {
  border-color: var(--blue-600);
  color: var(--blue-600);
}

.atonlab-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
}

.atonlab-pagination__summary {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.atonlab-pagination__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.atonlab-pagination__chip {
  min-width: 38px;
  min-height: 38px;
  padding: 6px 10px;
}

.atonlab-pagination__chip--current,
.atonlab-pagination__chip--current:hover {
  border-color: var(--orange-500);
  background: var(--orange-500);
  color: var(--accent-ink);
  cursor: default;
}

.atonlab-pagination__ellipsis {
  display: inline-grid;
  min-width: 24px;
  min-height: 38px;
  place-items: center;
  color: var(--muted);
}

@media (max-width: 640px) {
  .atonlab-pagination {
    justify-content: center;
  }

  .atonlab-pagination__summary {
    display: none;
  }
}

.news-article__hero {
  max-width: 820px;
  margin: 24px 0 32px;
}

.news-article__hero h1 {
  margin: 12px 0 10px;
  color: var(--navy-900);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
}

.news-article__media {
  display: block;
  width: 100%;
  max-width: 900px;
  border-radius: var(--radius-card);
  object-fit: cover;
}

.news-article__content {
  max-width: 780px;
  margin-top: 28px;
  color: var(--ink);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.news-article__content h2,
.news-article__content h3 {
  color: var(--navy-900);
}

.news-article__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

/* Карточки филиалов на контактах */
.branch-card__badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #EAF1F9;
    color: var(--navy-900, #0B3E77);
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
}
.branch-card__address { color: var(--slate); margin: 6px 0 10px; }
.branch-card__contacts { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.branch-card__contacts a { color: var(--blue-600); text-decoration: none; }
.branch-card__contacts a:hover { text-decoration: underline; }

/* Компонент lead.form: поля и кнопка в дизайн-системе сайта */

/* Токены формы. Одна и та же форма выводится и на белой карточке, и прямо
   внутри тёмной секции (.dark-cta на главной, .services-cta у направления,
   услуги и справочной страницы). Цвет подписей поэтому не зашит в правило, а
   берётся из токена: светлая поверхность — значения по умолчанию ниже, тёмная
   переопределяет их у себя. Так новая тёмная секция получает читаемую форму
   без ещё одного точечного правила «на каждое место» — именно от этого
   подписи и уехали в --ink на синем фоне (замечание владельца 03.08.2026).
   --focus-ring живёт здесь же: контур фокуса тоже зависит от поверхности, и
   архетипные правила ниже по файлу берут его вместо зашитого navy-900. */
:root {
    --form-label: var(--ink);
    --form-hint: var(--slate);
    --form-link: var(--blue-600);
    --focus-ring: var(--navy-900);
}

/* Тёмные поверхности сайта. Токены наследуются, поэтому объявления достаточно
   на самой секции — форму искать не нужно. */
.hero,
.page-hero,
.dark-cta,
.services-cta,
.services-hub__hero,
.service-direction__hero,
.service-detail__hero {
    --form-label: var(--eyebrow-on-dark);
    --form-hint: var(--eyebrow-on-dark);
    --form-link: var(--eyebrow-on-dark);
    --focus-ring: var(--eyebrow-on-dark);
}

/* Белые карточки живут внутри тёмных секций (форма героя, калькулятор СОУТ,
   запись на программу) и наследовали бы светлый набор — возвращаем тёмный. */
.request-card,
.sout-calculator,
.sout-penalty,
.card {
    --form-label: var(--ink);
    --form-hint: var(--slate);
    --form-link: var(--blue-600);
    --focus-ring: var(--navy-900);
}

.atonlab-lead-form {
    /* D5: без ограничения форма растягивалась на всю ширину секции (1384px на
       мониторе 1920) — поля были неудобны для ввода. 34rem держит поле в
       комфортных ~544px, внутри узкой карточки героя правило не мешает. */
    width: 100%;
    max-width: 34rem;
    margin-inline: auto;
}
.atonlab-lead-form__field { margin-bottom: 14px; }
.atonlab-lead-form__field label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--form-label);
}
.atonlab-lead-form input[type="text"],
.atonlab-lead-form input[type="tel"],
.atonlab-lead-form input[type="email"],
.atonlab-lead-form select,
.atonlab-lead-form textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-ctl);
    font: inherit;
    color: var(--ink);
    background: #fff;
}
.atonlab-lead-form textarea { min-height: 88px; resize: vertical; }
/* Контур фокуса — тоже из токена: на тёмной секции navy-900 сливался с фоном
   (контраст ~1:1), и раньше это лечили отдельным правилом на каждую секцию. */
.atonlab-lead-form input:focus,
.atonlab-lead-form select:focus,
.atonlab-lead-form textarea:focus {
    outline: 3px solid var(--focus-ring);
    outline-offset: 1px;
    border-color: var(--blue-600);
}
.atonlab-lead-form button[type="submit"] {
    display: inline-block;
    width: 100%;
    padding: 13px 22px;
    border: 0;
    border-radius: var(--radius-ctl);
    background: var(--orange-500);
    color: var(--accent-ink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}
.atonlab-lead-form button[type="submit"]:hover { background: var(--orange-400); }
.atonlab-lead-form button[type="submit"]:focus-visible { outline-color: var(--focus-ring); }
.atonlab-lead-form button[type="submit"]:disabled { background: var(--orange-100); color: var(--accent-ink); opacity: 1; cursor: not-allowed; }
.atonlab-lead-form__consent { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; font-size: 13px; color: var(--form-hint); }
.atonlab-lead-form__consent input { margin-top: 3px; }
.atonlab-lead-form__consent a,
.atonlab-lead-form__consent a:hover { color: var(--form-link); text-decoration: underline; }
/* Подпись-обещание под кнопкой — тот же вспомогательный тон, что и согласие. */
.atonlab-lead-form__note { color: var(--form-hint); }
.atonlab-lead-form__error { color: var(--warn); font-size: 13px; margin-top: 4px; }
.atonlab-lead-form__general-error { color: var(--warn); margin-bottom: 10px; }
.atonlab-lead-form__honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.atonlab-lead-form__success { padding: 14px 16px; border-radius: var(--radius-ctl); background: #EAF7EE; border: 1px solid #BEE3C8; color: var(--success); }

/* Тёмные секции: явные светлые цвета — переменные slate/muted затемнены под
   светлый фон и на тёмном нечитаемы (замечание владельца 2026-07-20). */
.dark-cta h2,
.dark-cta .section-head h2 { color: #fff; }
.dark-cta > p,
.dark-cta > .section-head > p { color: #D8E7F8; }

.hero .button--outline,
.hero .btn--outline,
.page-hero .button--outline,
.page-hero .btn--outline,
.dark-cta .button--outline,
.dark-cta .btn--outline,
.services-hub__hero .button--outline,
.services-hub__hero .btn--outline,
.service-direction__hero .button--outline,
.service-direction__hero .btn--outline,
.service-detail__hero .button--outline,
.service-detail__hero .btn--outline,
.services-cta .button--outline,
.services-cta .btn--outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

.hero .button--outline:hover,
.hero .btn--outline:hover,
.page-hero .button--outline:hover,
.page-hero .btn--outline:hover,
.dark-cta .button--outline:hover,
.dark-cta .btn--outline:hover,
.services-hub__hero .button--outline:hover,
.services-hub__hero .btn--outline:hover,
.service-direction__hero .button--outline:hover,
.service-direction__hero .btn--outline:hover,
.service-detail__hero .button--outline:hover,
.service-detail__hero .btn--outline:hover,
.services-cta .button--outline:hover,
.services-cta .btn--outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

.hero :is(.button--text, .btn--text),
.page-hero :is(.button--text, .btn--text),
.dark-cta :is(.button--text, .btn--text),
.services-hub__hero :is(.button--text, .btn--text),
.service-direction__hero :is(.button--text, .btn--text),
.service-detail__hero :is(.button--text, .btn--text),
.services-cta :is(.button--text, .btn--text) {
  color: var(--eyebrow-on-dark);
  text-decoration: underline;
}

.hero :is(.button--text, .btn--text):hover,
.page-hero :is(.button--text, .btn--text):hover,
.dark-cta :is(.button--text, .btn--text):hover,
.services-hub__hero :is(.button--text, .btn--text):hover,
.service-direction__hero :is(.button--text, .btn--text):hover,
.service-detail__hero :is(.button--text, .btn--text):hover,
.services-cta :is(.button--text, .btn--text):hover {
  color: var(--eyebrow-on-dark);
  text-decoration: underline;
}

.hero :focus-visible,
.page-hero :focus-visible,
.dark-cta :focus-visible,
.services-hub__hero :focus-visible,
.service-direction__hero :focus-visible,
.service-detail__hero :focus-visible,
.services-cta :focus-visible {
  outline-color: var(--eyebrow-on-dark);
}

.services-hub__hero a:focus-visible,
.service-direction__hero a:focus-visible,
.service-detail__hero a:focus-visible {
  outline-color: var(--eyebrow-on-dark);
}

.request-card :focus-visible,
.dark-cta .card :focus-visible,
.managed-page__content :focus-visible {
  outline-color: var(--navy-900);
}

.dark-cta > .atonlab-lead-form input:focus,
.dark-cta > .atonlab-lead-form select:focus,
.dark-cta > .atonlab-lead-form textarea:focus,
.dark-cta > .atonlab-lead-form button[type="submit"]:focus-visible {
  outline-color: var(--eyebrow-on-dark);
}

.service-direction > .services-cta a:focus-visible,
.service-direction > .services-cta input:focus,
.service-direction > .services-cta select:focus,
.service-direction > .services-cta textarea:focus,
.service-direction > .services-cta button:focus-visible,
.service-direction > .services-cta button[type="submit"]:focus-visible {
  /* Цвет подписей и ссылки согласия в этой секции задают токены --form-*
     из блока lead.form выше. Здесь остаётся только контур фокуса. */
  outline-color: var(--eyebrow-on-dark);
}

/* Контентные изображения из перенесённого HTML: гасим легаси-инлайн
   (width:100%, float) и ограничиваем габариты, чтобы баннеры старого сайта
   не разрывали страницу.
   U4/3: атрибутный селектор здесь специфичнее класса `.managed-html__image`
   (см. ниже по файлу), поэтому именно ЭТО правило реально определяло ширину
   картинок в теле услуги/новости — 480px нужно держать здесь же, иначе тело
   услуги (например знак «100 лучших товаров» на СОУТ) по-прежнему растянуто
   на всю колонку. Обложка новости в этот селектор не входит: у неё отдельный
   широкий контракт `.news-article__media`. Ниже 500px сама колонка уже меньше
   480 — используем 100%. */
[data-service-detail-body] img,
.news-article__content img {
    max-width: 480px !important;
    width: auto !important;
    height: auto !important;
    max-height: 520px;
    float: none !important;
    display: block;
    margin: 18px auto;
    border-radius: 10px;
}

@media (max-width: 500px) {
  [data-service-detail-body] img,
  .news-article__content img {
    max-width: 100% !important;
  }
}

/* Courses: compact catalog cards and a readable, source-managed detail body. */

/* Facet pills replace the old select+"Применить" filter form (Task U2):
   each pill is a plain GET link, so the filter still narrows results with
   JavaScript fully disabled — clicking IS the "apply immediately" action. */
.course-catalog__facets {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.course-catalog__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.course-catalog__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--navy-900);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.course-catalog__pill:hover {
  border-color: var(--blue-600);
}

.course-catalog__pill:focus-visible {
  outline: 3px solid var(--navy-900);
  outline-offset: 2px;
}

.course-catalog__pill--active {
  border-color: var(--navy-900);
  background: var(--navy-900);
  color: #fff;
}

.course-catalog__pill-count {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.course-catalog__pill--active .course-catalog__pill-count {
  color: #fff;
  opacity: .8;
}

.course-catalog__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 20px;
}

.course-catalog__count {
  margin: 0;
  color: var(--slate);
  font-weight: 600;
}

.course-catalog__sort {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.course-catalog__sort-link {
  color: var(--muted);
  font-weight: 700;
  text-decoration: underline;
}

.course-catalog__sort-link:hover {
  color: var(--navy-900);
}

.course-catalog__sort-link:focus-visible {
  outline: 3px solid var(--navy-900);
  outline-offset: 2px;
}

.course-catalog__sort-link--active {
  color: var(--navy-900);
  font-weight: 800;
  text-decoration: none;
}

.course-catalog .course-card h2 {
  margin: 0;
  color: var(--navy-900);
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.25;
}

.course-catalog .course-card h2 a {
  color: inherit;
}

/* Category eyebrow and format badge share a row above the title. */
.course-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.course-card__meta .eyebrow {
  margin: 0;
}

.course-card__format {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

/* Background-as-signal + a text colour that clears 4.5:1 on that exact
   background (checked against --warn/--success/--amber-400 directly, not
   their pale tints, which fall short of AA at this text size). */
.course-card__format--onsite {
  background: var(--warn);
  color: #fff;
}

.course-card__format--onsite_blended {
  /* Очно-заочный — разновидность очного: тот же сигнал фона, проверенный на
     контраст с белым текстом. Без своего правила пилюля осталась бы без
     заливки (базовый класс её не задаёт). */
  background: var(--warn);
  color: #fff;
}

.course-card__format--remote {
  background: var(--success);
  color: #fff;
}

.course-card__format--mixed {
  background: var(--amber-400);
  color: var(--accent-ink);
}

.course-card__format--other {
  background: var(--bg-soft);
  color: var(--ink);
}

.course-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.course-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

/* Footer is pinned to the bottom of every card via the shared .card
   min-height:100% + flex-column layout, so a short card's footer still lines
   up with its taller neighbours in the same grid row. */
.course-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.course-card__price {
  margin: 0;
  color: var(--navy-900);
  font-family: "JetBrains Mono", monospace;
  font-weight: 800;
  white-space: nowrap;
}

.course-card__cta {
  margin-left: auto;
}

.course-detail {
  overflow-x: clip;
}

.course-detail__inner,
.course-detail__content,
.course-detail__hero-copy,
.course-detail__body-main {
  min-width: 0;
}

.course-detail__content {
  color: var(--ink);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.7;
}

/* U3: герой программы — две колонки, справа карточка записи. Первый экран
   должен содержать и факты программы, и саму точку записи: до этого форма
   жила только в подвале страницы. */
.course-detail .page-hero {
  grid-template-columns: minmax(0, 1fr);
}

.course-detail__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: clamp(24px, 4vw, 48px);
  /* Карточка записи выше заголовка с фактами — текст выравнивается по её
     середине, иначе под ним остаётся пустая тёмная полоса в пол-экрана. */
  align-items: center;
  width: min(100%, 1180px);
  margin-inline: auto;
}

.course-detail__signup {
  position: sticky;
  top: 24px;
  align-self: start;
  width: auto;
  margin: 0;
  scroll-margin-top: 24px;
  color: var(--ink);
}

/* Заголовок карточки — цель якоря #course-signup-title, по которому в неё
   приходят из каталога и из нижнего CTA. */
.course-detail__signup h2 {
  scroll-margin-top: 24px;
}

.course-detail__signup-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin: 0 0 18px;
}

.course-detail__signup-facts :is(dt, dd) {
  margin: 0;
}

.course-detail__signup-facts dt {
  color: var(--muted);
  font-size: 13px;
}

.course-detail__signup-facts dd {
  color: var(--navy-900);
  font-weight: 800;
}

.course-detail__signup-price {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  font-size: 22px;
  line-height: 1.2;
}

/* Карточка белая, а лежит она внутри тёмного героя, где .page-hero p светлый:
   возвращаем тексту карточки тёмный цвет. */
.course-detail__signup p {
  max-width: none;
  color: var(--ink);
  font-size: 15px;
}

.course-detail__signup-secondary {
  margin: 12px 0 0;
}

.course-detail__signup-secondary a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--blue-600);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Тело: липкое оглавление слева, читаемая колонка 700–760px справа. */
.course-detail__body {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 760px);
  gap: clamp(20px, 2.5vw, 40px);
  justify-content: center;
  padding-inline: var(--pad-x);
}

.course-detail__body--without-toc {
  grid-template-columns: minmax(0, 760px);
}

.course-detail__toc {
  position: sticky;
  top: 24px;
  align-self: start;
  margin-top: 48px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: #fff;
}

.course-detail__toc ol {
  display: grid;
  gap: 2px;
  margin: 0;
  padding-left: 1.1em;
}

.course-detail__toc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--slate);
  font-weight: 600;
}

.course-detail__toc a:hover {
  color: var(--blue-600);
  text-decoration: underline;
}

.course-detail__list {
  margin: 0;
  padding-left: 1.35em;
  color: var(--ink);
}

/* Нижний якорь к карточке записи. Своего заголовка у блока нет (он призыв к
   действию, а не раздел материала), поэтому отбивку сверху и снизу держит сам
   блок — правило двухклассовое, иначе его перебивает `.course-detail__section.section`. */
.course-detail__section.section.course-detail__cta {
  padding: 40px 0 72px;
}

.course-detail__cta .btn {
  margin-top: 0;
}

.course-detail__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block: 4px 0;
}

.course-detail__facts > div {
  min-width: min(180px, 100%);
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--radius-ctl);
  background: rgba(255, 255, 255, .08);
}

.course-detail__facts :is(dt, dd) {
  margin: 0;
}

.course-detail__facts dt {
  color: #D8E7F8;
  font-size: 13px;
}

.course-detail__facts dd {
  color: #fff;
  font-weight: 800;
}

.course-detail__media,
.course-detail__section {
  display: block;
  width: min(100%, 760px);
  margin-inline: auto;
}

.course-detail__media {
  height: auto;
  margin-top: 32px;
  border-radius: var(--radius-card);
}

.course-detail__section.section {
  padding: 48px 0 0;
  scroll-margin-top: 24px;
}

.course-detail__section > h2 {
  margin: 0 0 18px;
  color: var(--navy-900);
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.2;
}

.course-detail__content :is(h2, h3, h4) {
  margin: 1.8em 0 .7em;
  color: var(--navy-900);
  line-height: 1.2;
}

.course-detail__content p,
.course-detail__content :is(ul, ol) {
  margin: 0 0 1em;
}

.course-detail__content :is(ul, ol) {
  padding-left: 1.35em;
}

.course-detail__content :is(.container, .container-fluid, .row),
.course-detail__content :is([class^="col-"], [class*=" col-"]) {
  box-sizing: border-box;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  float: none !important;
}

.course-detail__content .row {
  display: block;
}

.course-detail__content table {
  display: block;
  box-sizing: border-box;
  width: max-content !important;
  min-width: 100%;
  max-width: 100%;
  margin: 1.5em 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

.course-detail__content :is(th, td) {
  padding: .55em .7em;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  overflow-wrap: anywhere;
}

.course-detail__content th {
  background: var(--bg-soft);
  color: var(--navy-900);
  font-weight: 800;
  text-align: left;
}

.course-detail__content tr > :last-child {
  border-right: 0;
}

.course-detail__content tbody tr:last-child > * {
  border-bottom: 0;
}

.course-detail__content img {
  display: block;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  margin: 1.25em auto;
  float: none !important;
}

/* Ниже 1200px карточка записи ужимается: на ноутбучном 1024×768 форма должна
   целиком помещаться в первый экран вместе с заголовком программы. */
@media (max-width: 1200px) {
  .course-detail__hero {
    padding-block: 28px;
  }

  .course-detail__signup {
    padding: 20px 22px;
  }

  .course-detail__signup h2 {
    margin-bottom: 10px;
    font-size: 20px;
  }

  .course-detail__signup-facts {
    margin-bottom: 10px;
  }

  .course-detail__signup .atonlab-lead-form__field {
    margin-bottom: 12px;
  }

  .course-detail__signup .atonlab-lead-form__field textarea {
    min-height: 60px;
  }

  .course-detail__signup .atonlab-lead-form__consent {
    margin-block: 8px;
  }
}

/* Ниже 1000px оглавление перестаёт быть колонкой и встаёт над телом: держать
   и его, и читаемую колонку 700+ на такой ширине уже нечем. */
@media (max-width: 1000px) {
  .course-detail__body {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }

  .course-detail__toc {
    position: static;
    margin-top: 32px;
  }
}

/* 768 и уже: карточка записи уходит под герой — но остаётся выше тела. */
@media (max-width: 900px) {
  .course-detail__hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .course-detail__signup {
    position: static;
    width: 100%;
  }
}

@media (max-width: 640px) {
  /* Односложное название («Электробезопасность») в 34px не помещается в 390 —
     заголовок уезжал под обрез. */
  .course-detail__hero-copy h1 {
    font-size: clamp(26px, 6.5vw, 34px);
    overflow-wrap: break-word;
  }

  .course-detail__facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .course-detail__facts > div {
    min-width: 0;
  }

  .course-detail__signup {
    padding: 22px;
  }
}

.image-slot--filled { padding: 0; overflow: hidden; }
.image-slot--filled img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

.home-study__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 40px; align-items: center; }
.home-study__photo { width: 100%; height: auto; border-radius: 14px; display: block; }

/* Legacy-галереи перенесённых страниц (/about/ и др.): старая bootstrap-
   разметка row/photogallery/photo-item складывала документ-карточки по одной
   во всю ширину — сканы выходили гигантскими (замечание владельца
   2026-07-26). Складываем в плотную сетку; карточка держит пропорцию сама.
   Правило осталось нужным и после появления архетипа `.photo-gallery`: в ту
   же обёртку без маркера `data-gallery="photos"` попадают блоки настоящих
   документов (на /about/ это восемь блоков аттестатов и лицензий) — они
   по-прежнему рендерятся карточками, и сетку им держит именно это правило. */
.managed-page__content .photogallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.managed-page__content .photogallery .photo-item { margin: 0; }
.managed-page__content .photogallery .document-card { max-width: none; }
.managed-page__content .row { display: block; }

/* Служебная строка группы документов на «О компании»: видна только в режиме
   правки (about/index.php передаёт режим параметром компонента), поэтому
   оформление минимальное — не мешать редактору и не менять вид страницы. */
.documents-gallery__admin {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 12px;
  font-size: 14px;
}

.documents-gallery__admin-link {
  color: var(--blue-600);
  font-weight: 700;
}

.reviews-cards__company { margin: 0 0 8px; font-size: 16px; line-height: 1.3; color: var(--navy-900); }

/* Полоса писем: название компании бывает в одну и в две строки — без резерва
   под вторую строку карточки стартовали на разной высоте и ряд плясал
   (замечание владельца 2026-08-20). Флекс-колонка + равные карточки. */
.reviews-strip__list > li {
  display: flex;
  flex-direction: column;
}

.reviews-strip__list .reviews-cards__company {
  min-height: 2.6em;
}

.reviews-strip__list .document-card {
  flex: 1;
}
.reviews-cards__next { margin-top: 40px; }
.reviews-cards__next ul { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; list-style: none; }
.reviews-cards__next a { display: inline-flex; min-height: 40px; align-items: center; padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; font-weight: 700; color: var(--navy-900); text-decoration: none; }

/* --- Слайс X3: карточки-факты, врезка писем, баннер-акция ----------------- */

/* Легаси-блок штрафов старого сайта: bootstrap-строка, дети которой — колонки
   .col-md-4 («На должностных лиц», «Для ИП», «Для юрлиц»). Санитайзер снимает
   инлайновые стили, и без правил ниже такие факты складывались в один
   безликий столбец. Стилизуем ТОЛЬКО этот паттерн — `:has(> .col-md-4)`, а не
   каждую легаси-строку: обычные .row по-прежнему просто блоки (см. правило
   `.managed-page__content .row { display: block; }` выше). */
.managed-page__content .row:has(> .col-md-4),
.service-detail__content .row:has(> .col-md-4),
.news-article__content .row:has(> .col-md-4),
.course-detail__content .row:has(> .col-md-4) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
  margin: 18px 0;
}

/* В таких строках рядом с колонками часто стоит вводный абзац (в блоке штрафов
   — норма ТК РФ). Он не факт-карточка: тянем его на всю ширину, иначе он
   занял бы первую ячейку сетки и разорвал ряд карточек. */
.managed-page__content .row:has(> .col-md-4) > :not(.col-md-4),
.service-detail__content .row:has(> .col-md-4) > :not(.col-md-4),
.news-article__content .row:has(> .col-md-4) > :not(.col-md-4),
.course-detail__content .row:has(> .col-md-4) > :not(.col-md-4) {
  grid-column: 1 / -1;
}

/* Карточка-факт: колонка без картинки. Ячейки галерей (в них лежит <img>)
   остаются просто ячейками сетки — рамка и фон вокруг скана лишние. */
.managed-page__content .row:has(> .col-md-4) > .col-md-4:not(:has(img)),
.service-detail__content .row:has(> .col-md-4) > .col-md-4:not(:has(img)),
.news-article__content .row:has(> .col-md-4) > .col-md-4:not(:has(img)),
.course-detail__content .row:has(> .col-md-4) > .col-md-4:not(:has(img)) {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--orange-500);
  border-radius: 12px;
  background: var(--surface-soft, #f7f9fc);
  text-align: left;
  line-height: 1.5;
}

.managed-page__content .row:has(> .col-md-4) > .col-md-4 > b,
.service-detail__content .row:has(> .col-md-4) > .col-md-4 > b,
.news-article__content .row:has(> .col-md-4) > .col-md-4 > b,
.course-detail__content .row:has(> .col-md-4) > .col-md-4 > b {
  display: block;
  margin-bottom: 6px;
  color: var(--navy-900);
}

/* Врезка благодарственных писем на главной и в детальной услуге. */
.reviews-strip__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Баннер-акция под героем главной: управляется include/site/promo-banner.php. */
.home-promo-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft, #f7f9fc);
}

.home-promo-banner--with-image {
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
}

.home-promo-banner__image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

.home-promo-banner h2 {
  margin: 0 0 8px;
  font-size: 22px;
}

.home-promo-banner p {
  margin: 0 0 12px;
}

@media (max-width: 640px) {
  .home-promo-banner--with-image {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Сведения об образовательной организации на /study/. */
.education-info__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.education-info__list a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--navy-900);
  font-weight: 700;
}

/* ==========================================================================
   Справочный (регуляторный) архетип: /offer/<направление>/ с
   PAGE_ARCHETYPE=reference и его подстраницы-сведения.

   Экран публикует обязательную информацию, а не продаёт: шапка светлая (тёмный
   герой каталога здесь читается как рекламный), карточки сведений без цен и
   кнопок, тело — читаемая колонка 700–760px с липким оглавлением слева, как у
   страницы программы обучения.
   ========================================================================== */
.reference-hub,
.reference-page {
  overflow-x: clip;
  background: #fff;
}

.reference-hub__hero,
.reference-page__hero {
  padding: clamp(28px, 4vw, 48px) var(--pad-x) clamp(24px, 3.5vw, 40px);
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}

.reference-hub__hero .breadcrumbs,
.reference-page__hero .breadcrumbs {
  margin: calc(clamp(28px, 4vw, 48px) * -1) calc(var(--pad-x) * -1) clamp(20px, 2.5vw, 32px);
}

.reference-hub__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  width: min(100%, 1180px);
  margin-inline: auto;
}

.reference-hub__hero-copy,
.reference-page__hero-copy {
  min-width: 0;
}

.reference-page__hero-copy {
  width: min(100%, 1180px);
  margin-inline: auto;
}

.reference-hub__hero h1,
.reference-page__hero h1 {
  margin: 8px 0 16px;
  color: var(--navy-900);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.12;
  font-weight: 800;
}

.reference-hub__lead,
.reference-page__lead {
  max-width: 70ch;
  margin: 0;
  color: var(--slate);
  font-size: 17px;
}

.reference-page__updated {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 14px;
}

/* Карточка реквизитов — редакторские свойства направления. Пустая строка не
   печатается, поэтому карточка всегда состоит только из подтверждённых фактов. */
.reference-card {
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: #fff;
}

.reference-card__title {
  margin: 0 0 14px;
  color: var(--navy-900);
  font-size: 18px;
  line-height: 1.25;
}

.reference-card__list {
  display: grid;
  gap: 12px;
  margin: 0;
}

.reference-card__list > div {
  display: grid;
  gap: 2px;
}

.reference-card__list dt {
  color: var(--muted);
  font-size: 13px;
}

.reference-card__list dd {
  margin: 0;
  color: var(--navy-900);
  font-weight: 700;
}

/* Список обязательных сведений: тип, дата, название, одна строка пояснения. */
.reference-docs {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reference-docs__item {
  display: grid;
  gap: 8px;
  padding: 18px clamp(18px, 2.2vw, 24px);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: #fff;
}

.reference-docs__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}

.reference-docs__tag {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--slate);
  font-size: 13px;
  font-weight: 700;
}

.reference-docs__tag--service {
  border-color: var(--orange-100);
  background: #FBF4E4;
  color: #8A5A12;
}

.reference-docs__date {
  color: var(--muted);
  font-size: 13px;
}

.reference-docs__title {
  margin: 0;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.3;
}

.reference-docs__title a {
  color: var(--navy-900);
  font-weight: 700;
}

.reference-docs__note {
  max-width: 70ch;
  margin: 0;
  color: var(--slate);
}

.reference-docs__action {
  justify-self: start;
  min-height: 44px;
}

.reference-hub__documents,
.reference-hub__body {
  padding-block: clamp(36px, 4vw, 56px);
}

.reference-hub__documents > *,
.reference-hub__body-inner {
  width: min(100%, 1180px);
  margin-inline: auto;
}

.reference-hub__body-inner {
  max-width: 70ch;
  color: var(--ink);
  line-height: 1.7;
}

/* Тело подстраницы: липкое оглавление слева, читаемая колонка 700–760px. */
.reference-page__body {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 760px);
  gap: clamp(20px, 2.5vw, 40px);
  justify-content: center;
  padding: clamp(28px, 3.5vw, 48px) var(--pad-x) 0;
}

.reference-page__body--single {
  grid-template-columns: minmax(0, 760px);
}

.reference-page__body-main {
  min-width: 0;
}

.reference-page__toc {
  position: sticky;
  top: 24px;
  align-self: start;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: #fff;
}

.reference-page__toc ol {
  display: grid;
  gap: 2px;
  margin: 0;
  padding-left: 1.1em;
}

.reference-page__toc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--slate);
  font-weight: 600;
}

.reference-page__toc a:hover {
  color: var(--blue-600);
  text-decoration: underline;
}

.reference-page__toc-sub {
  padding-left: .9em;
  font-size: 14px;
}

.reference-page__content {
  min-width: 0;
  color: var(--ink);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.7;
}

.reference-page__content :is(h2, h3, h4) {
  margin: 1.8em 0 .7em;
  color: var(--navy-900);
  line-height: 1.2;
  scroll-margin-top: 24px;
}

.reference-page__content :is(p, ul, ol, blockquote) {
  margin: 0 0 1em;
}

.reference-page__content .managed-html__list {
  padding-left: 1.35em;
}

.reference-page__siblings {
  padding: clamp(28px, 3.5vw, 48px) 0 0;
}

.reference-page__siblings h2 {
  margin: 0 0 20px;
  color: var(--navy-900);
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.2;
  scroll-margin-top: 24px;
}

/* Прайс перенесённой страницы: настоящая таблица вместо сетки старой темы.
   Общий managed-html__table рассчитан на узкие ячейки и берёт max-content;
   в прайсе наименование услуги — целое предложение, поэтому здесь колонки
   переносятся по словам и таблица укладывается в читаемую колонку. */
.reference-price-table {
  width: 100%;
  min-width: 0;
  table-layout: auto;
}

.reference-price-table :is(th, td) {
  white-space: normal;
  overflow-wrap: anywhere;
}

.reference-price-table :is(thead th:first-child, th[scope="row"]) {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.reference-price-table td:last-child {
  width: 22%;
}

.reference-page__request h2,
.reference-hub__request h2 {
  scroll-margin-top: 24px;
}

.reference-page__request {
  width: 100%;
  margin-inline: 0;
}

/* Форма запроса лежит в тёмной карточке .services-cta: подписи и ссылку
   согласия красят токены --form-* этой секции (см. блок lead.form). Здесь —
   только контур фокуса. */
.reference-hub .services-cta a:focus-visible,
.reference-hub .services-cta input:focus,
.reference-hub .services-cta select:focus,
.reference-hub .services-cta textarea:focus,
.reference-hub .services-cta button:focus-visible,
.reference-page .services-cta a:focus-visible,
.reference-page .services-cta input:focus,
.reference-page .services-cta select:focus,
.reference-page .services-cta textarea:focus,
.reference-page .services-cta button:focus-visible {
  outline-color: var(--eyebrow-on-dark);
}

.reference-hub a:focus-visible,
.reference-page a:focus-visible,
.reference-page button:focus-visible,
.reference-page input:focus-visible {
  outline: 3px solid var(--navy-900);
  outline-offset: 3px;
}

@media (max-width: 1080px) {
  .reference-hub__hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .reference-page__body {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }

  .reference-page__toc {
    position: static;
    max-width: 760px;
    margin-inline: auto;
  }

  .reference-page__body-main {
    max-width: 760px;
    margin-inline: auto;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .reference-hub__hero,
  .reference-page__hero {
    padding-block: 24px;
  }

  .reference-docs__item {
    padding: 16px;
  }
}

/* Волна 3: полоса подтверждённых фактов под героем и вход по задаче. */
.home-metrics {
  padding-block: 40px;
}

.home-metrics__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 18px;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg-soft);
}

.home-metrics__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.home-metrics__value {
  color: var(--navy-900);
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 800;
  line-height: 1.1;
}

.home-metrics__label {
  margin: 0;
  color: var(--slate);
  font-size: 15px;
  line-height: 1.45;
}

.home-tasks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
}

.home-task {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--blue-600);
  border-radius: var(--radius-card);
  background: #fff;
  transition: box-shadow .18s ease, transform .18s ease;
}

.home-task:hover,
.home-task:focus-within {
  box-shadow: 0 12px 28px rgba(16, 35, 63, .12);
  transform: translateY(-2px);
}

.home-task--alert { border-left-color: var(--warn); }
.home-task--eco { border-left-color: var(--success); }
.home-task--study { border-left-color: var(--orange-600); }

.home-task__title {
  margin: 0;
  color: var(--navy-900);
  font-size: 19px;
  line-height: 1.25;
}

.home-task__link {
  color: inherit;
  text-decoration: none;
}

/* Кликабельна вся карточка, но в дереве доступности ссылка остаётся одна. */
.home-task__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.home-task__link:hover,
.home-task__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home-task__text {
  margin: 0;
  color: var(--slate);
  font-size: 15px;
  line-height: 1.5;
}

.home-task__action {
  margin-top: auto;
  color: var(--blue-600);
  font-size: 14px;
  font-weight: 700;
}

.home-task__action::after {
  content: " →";
}

@media (max-width: 640px) {
  .home-metrics {
    padding-block: 28px;
  }

  .home-metrics__list {
    padding: 18px;
  }

  .home-task {
    padding: 18px;
  }
}

/* Региональные услуги и направления (волна 35, уточнено волной 55).
   Региональная карточка всегда есть в HTML с data-branch-only, а прячет её
   этот класс. По умолчанию серверная разметка одинакова для всех, и класс
   снимает JS по городу, выбранному в шапке
   (local/templates/atonlab/script.js). Исключение — блок направлений главной:
   там филиал входит в ключ кэша компонента, и карточку своего города сервер
   печатает уже без этого класса. Без JS карточка остаётся скрытой — без JS и
   выбор города не работает. */
.is-region-hidden {
  display: none !important;
}

/* Поиск по хабу услуг (волна 45) прячет несовпавшее своим классом, а не
   региональным: город и запрос действуют независимо, и снятие одного не
   должно возвращать элемент, скрытый другим. */
.is-search-hidden {
  display: none !important;
}

/* Плашка на самой странице региональной услуги: страница открывается по
   прямой ссылке всегда, плашка объясняет, где услуга оказывается. Скрывается
   тем же классом, когда выбранный город совпал. */
.region-notice {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(2, 80, 118, 0.18);
  background: #eaf1f9;
  color: #123356;
  font-size: 14px;
  line-height: 1.4;
}
/* В тёмном герое абзацы белые с прозрачностью — правило героя специфичнее
   и делало текст плашки нечитаемым на светлой подложке (снимок 03.09).
   Плашка внутри героя: свой цвет и воздух от заголовка. */
.service-detail__hero .region-notice,
.service-direction__hero .region-notice {
  color: #123356;
  opacity: 1;
  margin: 18px 0 6px;
  width: fit-content;
  max-width: 100%;
}

/* Плашка подтверждения города (волна 47). Стоит в потоке сразу под шапкой, а
   не поверх страницы: вопрос не срочный, перекрывать им первый экран (тем
   более на 390 px, где и так тесно) нельзя. Тон и токены — как у баннера
   cookie, чтобы два служебных сообщения сайта выглядели одинаково. */
.geo-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px var(--pad-x);
  background: #eaf1f9;
  border-bottom: 1px solid var(--border);
  color: var(--slate);
}

.geo-banner[hidden] {
  /* display у класса перекрывает встроенное поведение [hidden]: без этого
     правила скрытая плашка осталась бы на экране. */
  display: none;
}

.geo-banner__content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  flex: 1 1 auto;
  max-width: 1200px;
  margin: 0 auto;
}

.geo-banner__question {
  margin: 0;
  color: var(--navy-900);
  font-weight: 600;
}

.geo-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.geo-banner__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--navy-900);
  cursor: pointer;
}

.geo-banner__close:hover {
  background: rgba(11, 62, 119, 0.08);
}

@media (max-width: 760px) {
  .geo-banner {
    padding-block: 10px;
  }

  .geo-banner__content {
    align-items: stretch;
  }

  .geo-banner__actions {
    width: 100%;
  }

  .geo-banner__actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* End */
/* /local/templates/atonlab/template_styles.css?179018147423933 */
/* /local/templates/atonlab/styles.css?1790246277115665 */