/* ==========================================================================
«О компании» v2 (03.10.2026) — на утверждении, /company/?v2=1
Язык сайта: hero = формат дизайнерских баннеров главной (neo-hero),
плитки/бренды/отзывы/FAQ/форма — общие компоненты.
Щиты !important — глобальный бандл перекрашивает заголовки, ссылки, кнопки.
========================================================================== */
.ab2 { overflow-x: clip; }
.ab2-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ab2-crumbs { padding: var(--nt-crumbs-pad); font-family: var(--nt-crumbs-font); font-size: var(--nt-crumbs-size); font-weight: var(--nt-crumbs-weight); text-transform: uppercase; letter-spacing: var(--nt-crumbs-track); color: var(--nt-crumbs-path); }
.ab2-crumbs a { color: var(--nt-crumbs-path) !important; text-decoration: none !important; }
.ab2-crumbs span { color: var(--nt-crumbs-current); }
/* ---------- 1. HERO: размеры neo-hero главной (420px, 72/36/17) ---------- */
.ab2-hero {
position: relative;
display: flex;
align-items: center;
min-height: 420px;
border: 2px solid #000;
margin: 0 14px 14px 0;
background-color: #E3EFF8;
background-image: var(--ab2-banner);
background-size: cover;
background-position: right center;
background-repeat: no-repeat;
}
/* изокоробка — скосы как у слайдера главной; на странице их две: hero и форма */
.ab2-hero::after { content: ""; position: absolute; left: -2px; bottom: -14px; width: calc(100% + 4px); height: 12px; background: #D6D6D6; border: 2px solid #000; border-top: none; border-right: none; transform: skewX(45deg); transform-origin: top left; }
.ab2-hero::before { content: ""; position: absolute; top: -2px; right: -14px; width: 12px; height: calc(100% + 4px); background: #E2E2E2; border: 2px solid #000; border-left: none; transform: skewY(45deg); transform-origin: top left; }
/* колонка текста фиксированной ширины: плата в картинке начинается с ~64% —
текст и кнопки физически не могут заехать на неё */
.ab2-hero__text { padding: 48px 64px; width: 100%; max-width: 640px; }
.ab2 .ab2-hero__title { font-size: 4.5rem !important; font-weight: 900 !important; text-transform: uppercase; line-height: 1.05 !important; letter-spacing: -.01em; color: #000 !important; margin: 0 0 8px !important; }
.ab2 .ab2-hero__accent { font-size: 2.25rem !important; font-weight: 900 !important; text-transform: uppercase; line-height: 1.1 !important; color: var(--nt-blue) !important; margin: 0 0 16px !important; }
.ab2 .ab2-hero__sub { font-size: 17px !important; line-height: 1.5 !important; color: rgba(0,0,0,.6) !important; font-weight: 600; max-width: 500px; margin: 0 0 24px !important; }
/* кнопки — точная копия nt-hero-cta главной; nowrap + flex-shrink:0 — не «плавают» */
.ab2-hero__btns { display: flex; flex-wrap: wrap; gap: 14px; }
.ab2 a.ab2-btn {
display: inline-flex !important; align-items: center; justify-content: center;
flex-shrink: 0; white-space: nowrap;
padding: 16px 24px !important;
border: 2px solid #000 !important; border-radius: 0 !important;
background: #fff !important; color: #000 !important;
font-size: 1rem !important; font-weight: 900 !important;
text-transform: uppercase; letter-spacing: .05em;
text-decoration: none !important;
box-shadow: 4px 4px 0 0 #000 !important;
transition: transform .15s ease, box-shadow .15s ease;
}
.ab2 a.ab2-btn--blue { background: var(--nt-blue) !important; color: #fff !important; }
.ab2 a.ab2-btn:hover { transform: translate(3px, 3px); box-shadow: none !important; }
/* ---------- 2. плитки: только отступы, сам компонент общий ---------- */
.ab2-adv { padding: 34px 0 0 !important; }
/* ---------- заголовки секций (тихий регистр) ---------- */
.ab2 .ab2-title { font-size: clamp(26px, 3vw, 34px) !important; font-weight: 900 !important; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.05 !important; color: #000 !important; text-align: center; margin: 0 0 8px !important; }
.ab2 .ab2-sub { font-size: var(--nt-text2-size); font-weight: var(--nt-text2-weight); color: var(--nt-text2-color) !important; text-align: center; margin: 0 0 28px !important; }
/* ---------- 3. бенто «Что мы делаем» ---------- */
.ab2-do { padding-top: 72px !important; }
.ab2-cell { padding: 32px 34px 28px; border-right: 2px solid #000; border-bottom: 2px solid #000; min-width: 0; }
.ab2-cell__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.ab2-cell__num { font-family: var(--nt-font-digits); font-weight: 500; font-size: 20px; line-height: 1; color: var(--nt-blue); }
/* 06.10.2026: жёлтые квадраты-иконки сняты; текст вырос до 17px — заголовок ячейки 17 → 22px, номер синий, как у шагов, иначе заголовок сливался с текстом */
.ab2 .ab2-cell h3 { font-size: 22px !important; font-weight: 900 !important; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.15 !important; color: #000 !important; margin: 0 !important; }
.ab2 .ab2-cell p { font-size: var(--nt-text-size); font-weight: var(--nt-text-weight); line-height: var(--nt-text-line); color: var(--nt-text-color) !important; margin: 0 0 16px !important; }
.ab2 a.ab2-go, .ab2 span.ab2-go { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--nt-blue) !important; text-decoration: none !important; }
/* ячейка-ссылка целиком (06.10.2026): подпись ссылки не повторяет заголовок, вся ячейка кликабельна */
.ab2 a.ab2-cell--link { display: block; color: inherit !important; text-decoration: none !important; transition: background .15s ease; }
.ab2 a.ab2-cell--link:hover { background: var(--nt-hover-bg); }
.ab2 a.ab2-cell--link:hover .ab2-go { text-decoration: underline !important; }
.ab2 a.ab2-go:hover { text-decoration: underline !important; }
.ab2-bento__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 2px solid #000; padding: 16px 28px; }
.ab2-bento__foot span { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--nt-blue); }
.ab2 .ab2-bento__foot a { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: #000 !important; text-decoration: none !important; }
.ab2 .ab2-bento__foot a:hover { color: var(--nt-blue) !important; }
/* ---------- 4. ребрендинг: плакат + маркиза ---------- */
.ab2-rb { padding-top: 80px; }
.ab2-chip { display: inline-block; background: #000; color: #fff; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .15em; padding: 6px 16px; margin-bottom: 16px; }
.ab2 .ab2-poster { font-size: clamp(32px, 4.5vw, 52px) !important; font-weight: 900 !important; text-transform: uppercase; letter-spacing: -.03em; line-height: .95 !important; color: #000 !important; margin: 0 !important; }
.ab2-accent { display: inline-block; color: var(--nt-blue); transform: skewX(-6deg); }
.ab2-marquee { position: relative; width: 100vw; margin-left: calc(50% - 50vw); transform: rotate(-1.6deg); background: #fff; border-top: 4px solid #000; border-bottom: 4px solid #000; box-shadow: 0 6px 0 0 #000; padding: 14px 0; margin-top: 28px; margin-bottom: 36px; overflow: hidden; user-select: none; }
.ab2-marquee__track { display: flex; width: max-content; animation: ab2-mq 36s linear infinite; }
.ab2-marquee:hover .ab2-marquee__track { animation-play-state: paused; }
@keyframes ab2-mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ab2-marquee__track { animation: none; } }
.ab2-marquee__run { display: flex; align-items: baseline; white-space: nowrap; }
.ab2-marquee__run span { font-size: 54px; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: 1; color: #fff; -webkit-text-stroke: 3px #000; paint-order: stroke fill; padding: 0 18px; }
.ab2-marquee__run span.ab2-f-blue { color: var(--nt-blue); -webkit-text-stroke: 0; }
.ab2-marquee__run span.ab2-f-pink { color: #FFB7CD; }
.ab2-marquee__run i { font-style: normal; font-size: 26px; color: var(--nt-blue); transform: translateY(-8px); }
.ab2-rb__text { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1040px; margin-top: 24px; }
.ab2 .ab2-rb__text p { font-size: var(--nt-text-size); font-weight: var(--nt-text-weight); line-height: var(--nt-text-line); color: var(--nt-text-color) !important; margin: 0 !important; }
.ab2 .ab2-rb__text strong { font-weight: 800; color: #000; }
/* ---------- 5. производители: общий блок, только воздух ---------- */
.ab2-brands { padding-top: 40px; }
/* ---------- 7. этапы (тихий нео) ---------- */
.ab2-steps { padding-top: 72px !important; padding-bottom: 24px !important; }
/* ---------- 10. SEO-текст = текстовый блок карточки товара ---------- */
.ab2-seo { padding-top: 24px !important; padding-bottom: 80px !important; }
.ab2-seo > * { max-width: 900px; }
.ab2 .ab2-seo h2 { display: flex; align-items: center; gap: 12px; font-size: 22px !important; font-weight: 800 !important; color: #000 !important; margin: 48px 0 10px !important; text-transform: none; }
.ab2 .ab2-seo h2::before { content: ""; width: 10px; height: 10px; background: var(--nt-blue); flex-shrink: 0; }
.ab2 .ab2-seo p { font-size: var(--nt-text-size); font-weight: var(--nt-text-weight); line-height: 1.75; color: var(--nt-text-color) !important; margin: 0 0 16px !important; }
.ab2 .ab2-seo a { color: var(--nt-blue) !important; font-weight: 700; text-decoration: none !important; }
.ab2 .ab2-seo a:hover { text-decoration: underline !important; }
/* ==========================================================================
Адаптив. До 1100px картинка уходит ПОД текст: в узком баннере плата
иначе заезжает под заголовок и кнопки (кроп платы из той же сцены).
========================================================================== */
@media (max-width: 1100px) {
.ab2-hero {
display: block;
min-height: 0;
background-image: linear-gradient(to bottom, #E3EFF8 0, #E3EFF8 calc(100% - 340px), rgba(227,239,248,0) calc(100% - 250px)), var(--ab2-banner);
background-size: 100% 100%, 1000px auto;
background-position: 0 0, 97% 100%;
}
.ab2-hero__text { max-width: 640px; padding: 36px 40px 300px; }
.ab2 .ab2-hero__title { font-size: 3.5rem !important; }
.ab2 .ab2-hero__accent { font-size: 1.9rem !important; }
}
@media (max-width: 768px) {
.ab2-hero__text { padding: 26px 22px 290px; }
.ab2 .ab2-hero__title { font-size: 2.5rem !important; }
.ab2 .ab2-hero__accent { font-size: 1.5rem !important; }
.ab2 .ab2-hero__sub { font-size: 15px !important; }
.ab2 a.ab2-btn { font-size: 13px !important; padding: 13px 18px !important; }
.ab2-cell { padding: 24px 20px; }
.ab2 .ab2-cell h3 { font-size: 19px !important; }
.ab2-cell__num { font-size: 17px; }
.ab2-bento__foot { flex-wrap: wrap; padding: 14px 20px; }
.ab2-rb { padding-top: 56px; }
.ab2 .ab2-poster { font-size: 27px !important; overflow-wrap: anywhere; }
.ab2-marquee { margin-top: 24px; margin-bottom: 28px; padding: 10px 0; border-width: 3px 0; box-shadow: 0 4px 0 0 #000; }
.ab2-marquee__run span { font-size: 34px; -webkit-text-stroke-width: 2px; padding: 0 12px; }
.ab2-marquee__run i { font-size: 18px; }
.ab2-rb__text { grid-template-columns: 1fr; gap: 14px; }
.ab2-seo h2 { font-size: 19px !important; }
/* размер текста на телефоне — токен --nt-text-size (tokens.css) */
}
@media (max-width: 420px) {
/* две кнопки на узком экране — одной ровной колонкой, одной ширины */
.ab2-hero__btns { flex-direction: column; align-items: stretch; max-width: 280px; }
}
/* Щит шрифта: глобалка ставит h1/h2 на Unbounded (у него нет 900 —
браузер синтезировал тонкое начертание). Голос заголовков — Montserrat 900 */
.ab2 .ab2-hero__title, .ab2 .ab2-hero__accent, .ab2 .ab2-hero__sub,
.ab2 .ab2-title, .ab2 .ab2-sub, .ab2 .ab2-poster, .ab2 .ab2-chip,
.ab2 .ab2-cell h3, .ab2 .ab2-seo h2, .ab2 a.ab2-btn {
font-family: 'Montserrat', -apple-system, sans-serif !important;
}
/* Мобильный кроп платы пропорционален ширине: картинка = 3 ширины баннера,
плата (65–95% сцены) занимает 5–95% баннера на любом экране 320–768 */
@media (max-width: 768px) {
.ab2-hero {
background-image: linear-gradient(to bottom, #E3EFF8 0, #E3EFF8 calc(100% - 92vw), rgba(227,239,248,0) calc(100% - 72vw)), var(--ab2-banner);
background-size: 100% 100%, 300% auto;
background-position: 0 0, 95% 100%;
}
.ab2-hero__text { padding-bottom: 84vw; }
}
/* ==========================================================================
Ровность (03.10.2026, «уверен, что блоки ровные?»): у всех секций один
край — контейнер; текстовые блоки в две колонки вместо обрезки 900/1040px;
единый шаг между секциями 72px.
========================================================================== */
.ab2-rb { padding-top: 72px !important; }
.ab2-rb__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.ab2 .ab2-poster { font-size: clamp(32px, 3.6vw, 52px) !important; }
.ab2-rb__text { display: block !important; max-width: none !important; margin: 0 !important; }
.ab2 .ab2-rb__text p + p { margin-top: 14px !important; }
.ab2-brands { padding-top: 0 !important; }
.ab2-seo { padding-top: 72px !important; padding-bottom: 72px !important; }
.ab2-seo > * { max-width: none !important; }
.ab2-seo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.ab2 .ab2-seo__grid h2 { margin-top: 0 !important; }
@media (max-width: 900px) {
.ab2-rb__grid, .ab2-seo__grid { grid-template-columns: 1fr; gap: 20px; }
.ab2-rb { padding-top: 56px !important; }
.ab2-seo { padding-top: 48px !important; padding-bottom: 48px !important; }
.ab2-seo__grid { gap: 8px; }
.ab2 .ab2-seo__grid > div + div h2 { margin-top: 28px !important; }
}
/* Единый шаг 96px между секциями (замер 03.10.2026: было 72/96/120/168).
Общие компоненты (бренды, отзывы, FAQ, форма) несут свои 96 — свои секции
добирают отступ так, чтобы расстояние блок→блок везде было 96. */
.ab2-do { padding-top: 48px !important; }
.ab2-rb { padding-top: 96px !important; }
.ab2-steps { padding-top: 0 !important; padding-bottom: 0 !important; }
.ab2-seo { padding-top: 0 !important; padding-bottom: 96px !important; }
@media (max-width: 900px) {
.ab2-rb { padding-top: 64px !important; }
.ab2-seo { padding-top: 0 !important; padding-bottom: 64px !important; }
}
/* мобильный шаг общих компонентов — 56px; свои секции под него */
@media (max-width: 768px) {
.ab2-do { padding-top: 8px !important; }
.ab2-rb { padding-top: 56px !important; }
.ab2-seo { padding-bottom: 56px !important; }
}
/* маркер-квадрат — по первой строке заголовка, не по центру двухстрочного */
.ab2 .ab2-seo h2 { align-items: flex-start !important; }
.ab2 .ab2-seo h2::before { margin-top: .42em; }
/* ==========================================================================
Общие компоненты для страниц в языке /company/ (03.10.2026):
«Гарантия и сервис», «Обучение». Всё в скоупе .ab2.
========================================================================== */
/* hero: мобильный кроп сцены задаётся переменными на самой секции */
@media (max-width: 768px) {
.ab2-hero {
background-size: 100% 100%, var(--ab2-msize, 300%) auto !important;
background-position: 0 0, var(--ab2-mpos, 95%) var(--ab2-mposy, 100%) !important;
}
.ab2-hero__text { padding-bottom: var(--ab2-mpad, 84vw) !important; }
}
/* шаг между своими секциями — 96 / 56, как на /company/ */
.ab2-steps--gap, .ab2-do--gap, .ab2-terms, .ab2-cases { padding-top: 96px !important; }
@media (max-width: 768px) { .ab2-steps--gap, .ab2-do--gap, .ab2-terms, .ab2-cases { padding-top: 56px !important; } }
/* таблица сроков: строки-ссылки с рамкой, термин — чёрная плашка */
.ab2-table { border: 2px solid #000; background: #fff; }
.ab2 .ab2-table__row { display: grid; grid-template-columns: 220px 1fr auto; gap: 20px; align-items: center; padding: 18px 24px; border-bottom: 2px solid #000; color: #000 !important; text-decoration: none !important; transition: background .15s; }
.ab2 .ab2-table__row:last-child { border-bottom: 0; }
.ab2 a.ab2-table__row:hover { background: #F4F5FF; }
.ab2-table__name { font-size: 16px; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
.ab2-table__note { font-size: var(--nt-text2-size); font-weight: var(--nt-text2-weight); color: var(--nt-text2-color); }
.ab2-table__term { font-family: 'Unbounded', sans-serif; font-weight: 500; font-size: 15px; background: var(--nt-blue); color: #fff; padding: 8px 14px; white-space: nowrap; }
.ab2-table__term--alt { background: #000; }
/* условия: две колонки текстовых блоков с маркером-квадратом */
.ab2-terms__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 48px; }
.ab2 .ab2-terms__grid h3 { display: flex; align-items: flex-start; gap: 12px; font-size: 18px !important; font-weight: 900 !important; text-transform: uppercase; color: #000 !important; margin: 0 0 10px !important; font-family: 'Montserrat', sans-serif !important; }
.ab2 .ab2-terms__grid h3::before { content: ""; width: 10px; height: 10px; background: var(--nt-blue); flex-shrink: 0; margin-top: .4em; }
.ab2 .ab2-terms__grid p { font-size: var(--nt-text-size); font-weight: var(--nt-text-weight); line-height: 1.7; color: var(--nt-text-color) !important; margin: 0 !important; }
.ab2 .ab2-terms__grid a, .ab2 .ab2-cases a, .ab2 .ab2-cell p a { color: var(--nt-blue) !important; font-weight: 700; text-decoration: none !important; }
/* кейсы: тихий нео, без цветных плашек и иконок */
.ab2-cases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ab2-case { display: flex; flex-direction: column; border: 2px solid #000; box-shadow: 4px 4px 0 #000; background: #fff; padding: 24px 22px; }
.ab2-case__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ab2-case__n { font-family: 'Unbounded', sans-serif; font-weight: 500; font-size: 26px; color: var(--nt-blue); line-height: 1; }
.ab2-case__region { background: #000; color: #fff; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; padding: 5px 10px; }
.ab2 .ab2-case h3 { font-size: 17px !important; font-weight: 900 !important; text-transform: uppercase; color: #000 !important; margin: 0 0 10px !important; font-family: 'Montserrat', sans-serif !important; line-height: 1.2 !important; }
.ab2 .ab2-case p { font-size: var(--nt-text-size); font-weight: var(--nt-text-weight); line-height: var(--nt-text-line); color: var(--nt-text-color) !important; margin: 0 0 18px !important; }
.ab2-case__res { margin-top: auto; border-top: 2px solid #000; padding-top: 14px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--nt-blue); }
@media (max-width: 900px) {
.ab2 .ab2-table__row { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px; }
.ab2-table__note { grid-column: 1; grid-row: 2; }
.ab2-table__term { grid-column: 2; grid-row: 1 / span 2; }
.ab2-terms__grid { grid-template-columns: 1fr; gap: 28px; }
.ab2-cases__grid { grid-template-columns: 1fr; }
}
/* отступ под плитками — фиксированный, глобальные правила на разных страницах дают 48 или 60 */
.ab2 .ab2-adv { margin-bottom: 48px !important; }
@media (max-width: 768px) { .ab2 .ab2-adv { margin-bottom: 48px !important; } }
/* Заливка hero = фон сцены дизайнера, задаётся на секции (--ab2-fill).
Без этого на узких экранах верх баннера был голубым (цвет сцены /company/),
а низ — цветом другой сцены: шов посередине (03.10.2026). */
.ab2-hero { background-color: var(--ab2-fill, #E3EFF8) !important; }
@media (max-width: 1100px) {
.ab2-hero {
background-image: linear-gradient(to bottom, var(--ab2-fill, #E3EFF8) 0, var(--ab2-fill, #E3EFF8) calc(100% - 340px), transparent calc(100% - 250px)), var(--ab2-banner) !important;
}
}
@media (max-width: 768px) {
.ab2-hero {
background-image: linear-gradient(to bottom, var(--ab2-fill, #E3EFF8) 0, var(--ab2-fill, #E3EFF8) calc(100% - 92vw), transparent calc(100% - 72vw)), var(--ab2-banner) !important;
}
}
/* ══ Справочник фототипов (/education/, 03.10.2026) ══════════════════════
Разметка прежняя — на классах nt-edu-fitz* висит page-education.js.
Вид — как таблица сроков: рамка 2px, ячейки через линию, без скруглений и теней. */
.ab2-fitz { padding-top: 96px !important; }
@media (max-width: 768px) { .ab2-fitz { padding-top: 56px !important; } }
.ab2 .nt-edu-fitz { border: 2px solid #000; background: #fff; }
.ab2 .nt-edu-fitz__types { display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 2px solid #000; }
.ab2 .nt-edu-fitz__type { appearance: none; background: #fff; border: 0; border-right: 2px solid #000; border-radius: 0; box-shadow: none; padding: 0 0 16px; cursor: pointer; text-align: left; color: #000; font-family: 'Montserrat', sans-serif; transition: background .15s ease; }
.ab2 .nt-edu-fitz__type:last-child { border-right: 0; }
.ab2 .nt-edu-fitz__type::before { content: ""; display: block; height: 14px; background: var(--swatch); border-bottom: 2px solid #000; margin-bottom: 14px; }
.ab2 .nt-edu-fitz__type:hover { background: #F4F5FF; }
.ab2 .nt-edu-fitz__type.is-active { background: var(--nt-selected-bg); color: var(--nt-selected-fg); }
.ab2 .nt-edu-fitz__type-roman { font-family: 'Unbounded', sans-serif; font-weight: 500; font-size: 26px; line-height: 1; padding: 0 18px; margin-bottom: 8px; }
.ab2 .nt-edu-fitz__type-name { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; padding: 0 18px; }
.ab2 .nt-edu-fitz__panel { padding: 32px 36px; }
.ab2 .nt-edu-fitz__panel-head { display: flex; align-items: center; gap: 22px; margin-bottom: 26px; }
.ab2 .nt-edu-fitz__panel-roman { flex: 0 0 64px; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: var(--nt-blue); color: #fff; font-family: 'Unbounded', sans-serif; font-weight: 500; font-size: 28px; line-height: 1; }
.ab2 .nt-edu-fitz__panel-title h3 { font-family: 'Montserrat', sans-serif !important; font-size: 20px !important; font-weight: 900 !important; text-transform: uppercase; color: #000 !important; margin: 0 0 6px !important; }
.ab2 .nt-edu-fitz__panel-title p { font-size: 15px; line-height: 1.6; color: #16181D !important; margin: 0 !important; }
.ab2 .nt-edu-fitz__panel-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid #000; margin-bottom: 22px; }
.ab2 .nt-edu-fitz__metric { padding: 18px 22px; border-right: 2px solid #000; }
.ab2 .nt-edu-fitz__metric:last-child { border-right: 0; }
.ab2 .nt-edu-fitz__metric-lbl { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: rgba(33,55,119,.6); margin-bottom: 8px; }
.ab2 .nt-edu-fitz__metric-val { font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 900; color: var(--nt-blue); line-height: 1.2; }
.ab2 .nt-edu-fitz__panel-note { display: flex; gap: 12px; font-size: 15px; line-height: 1.65; color: #16181D; margin-bottom: 20px; }
.ab2 .nt-edu-fitz__panel-note::before { content: ""; width: 10px; height: 10px; background: var(--nt-blue); flex-shrink: 0; margin-top: .5em; }
.ab2 .nt-edu-fitz__panel-footer { border-top: 2px solid #000; padding-top: 16px; font-size: 13px; line-height: 1.6; color: rgba(33,55,119,.75); }
.ab2 .nt-edu-fitz__panel-footer a { color: var(--nt-blue) !important; font-weight: 700; text-decoration: none !important; }
@media (max-width: 900px) {
.ab2 .nt-edu-fitz__types { grid-template-columns: repeat(3, 1fr); }
.ab2 .nt-edu-fitz__type:nth-child(3) { border-right: 0; }
.ab2 .nt-edu-fitz__type:nth-child(-n+3) { border-bottom: 2px solid #000; }
}
@media (max-width: 768px) {
.ab2 .nt-edu-fitz__type-roman { font-size: 22px; padding: 0 12px; }
.ab2 .nt-edu-fitz__type-name { font-size: 10px; letter-spacing: .04em; padding: 0 12px; }
.ab2 .nt-edu-fitz__panel { padding: 22px 18px; }
.ab2 .nt-edu-fitz__panel-head { gap: 14px; }
.ab2 .nt-edu-fitz__panel-roman { flex-basis: 52px; width: 52px; height: 52px; font-size: 22px; }
.ab2 .nt-edu-fitz__panel-title h3 { font-size: 17px !important; }
.ab2 .nt-edu-fitz__panel-grid { grid-template-columns: 1fr; }
.ab2 .nt-edu-fitz__metric { border-right: 0; border-bottom: 2px solid #000; padding: 14px 16px; }
.ab2 .nt-edu-fitz__metric:last-child { border-bottom: 0; }
}
/* якорь формы: отступ под липкую шапку (03.10.2026) */
.nt-cta-neo-section[id] { scroll-margin-top: 110px; }
/* ══ Hero «текст + блок справа» (03.10.2026): /brand/ — фото-миниатюра, /payment/ — поиск срока ══
Без сцены-баннера: картинка/инструмент стоит отдельным блоком, текст не перекрывает. */
.ab2 .ab2-hero.ab2-hero--split { background-image: none !important; display: grid !important; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); align-items: center; min-height: 420px; }
.ab2 .ab2-hero--split .ab2-hero__text { padding-bottom: 48px !important; }
.ab2-hero__aside { padding: 40px 56px 40px 0; display: flex; justify-content: center; min-width: 0; }
@media (max-width: 1100px) {
.ab2 .ab2-hero.ab2-hero--split { grid-template-columns: 1fr; }
.ab2 .ab2-hero--split .ab2-hero__text { padding-bottom: 12px !important; }
.ab2-hero__aside { padding: 0 40px 36px; justify-content: flex-start; }
}
@media (max-width: 768px) {
.ab2 .ab2-hero--split .ab2-hero__text { padding-bottom: 12px !important; }
.ab2-hero__aside { padding: 0 22px 26px; }
}
/* фото-миниатюра в рамке */
.ab2-photo { margin: 0; width: 100%; max-width: 460px; background: #fff; border: 2px solid #000; box-shadow: 6px 6px 0 0 #000; padding: 10px; }
.ab2-photo img { display: block; width: 100%; height: auto; border: 0; border-radius: 0 !important; }
.ab2-photo figcaption { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: rgba(33,55,119,.6); padding: 10px 2px 0; }
/* поиск срока доставки (разметка .nt-pay-*, логика — page-payment.js) */
.ab2-calc { width: 100%; max-width: 460px; background: #fff; border: 2px solid #000; box-shadow: 6px 6px 0 0 #000; }
.ab2-calc__head { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: #000; padding: 16px 20px; border-bottom: 2px solid #000; }
.ab2 .nt-pay-calc { padding: 16px 20px 18px; }
.ab2 .nt-pay-calc__input-wrap { position: relative; }
.ab2 .nt-pay-calc__label { display: block; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: rgba(33,55,119,.6); margin-bottom: 8px; }
.ab2 .nt-pay-calc__input { width: 100%; box-sizing: border-box; height: 52px; padding: 0 16px !important; border: 2px solid #000 !important; border-radius: 0 !important; background: #fff !important; font-family: 'Montserrat', sans-serif; font-size: 16px !important; font-weight: 700; color: #000 !important; outline: none; box-shadow: none !important; }
.ab2 .nt-pay-calc__input:focus { border-color: var(--nt-blue) !important; }
.ab2 .nt-pay-calc__suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: #fff; border: 2px solid #000; border-top: 0; max-height: 260px; overflow-y: auto; }
.ab2 .nt-pay-calc__suggest[hidden] { display: none; }
.ab2 .nt-pay-calc__suggest-item { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: 14px; font-weight: 700; color: #000; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,.1); }
.ab2 .nt-pay-calc__suggest-item:last-child { border-bottom: 0; }
.ab2 .nt-pay-calc__suggest-item:hover { background: #F4F5FF; }
.ab2 .nt-pay-calc__suggest-item-days { color: var(--nt-blue); white-space: nowrap; }
.ab2 .nt-pay-result { border-top: 2px solid #000; }
.ab2 .nt-pay-result[hidden], .ab2 .nt-pay-empty[hidden] { display: none; }
.ab2 .nt-pay-result__city { padding: 14px 20px 0; }
.ab2 .nt-pay-result__city-name { font-size: 20px; font-weight: 900; text-transform: uppercase; color: #000; }
.ab2 .nt-pay-result__country { font-size: 12px; font-weight: 700; color: var(--nt-blue); margin-top: 4px; }
.ab2 .nt-pay-result__metrics { display: grid; grid-template-columns: 1fr 1fr; margin-top: 12px; border-top: 2px solid #000; }
.ab2 .nt-pay-result__metric { padding: 12px 20px 14px; }
.ab2 .nt-pay-result__metric + .nt-pay-result__metric { border-left: 2px solid #000; }
.ab2 .nt-pay-result__metric-label { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: rgba(33,55,119,.6); margin-bottom: 6px; }
.ab2 .nt-pay-result__metric-value { font-size: 18px; font-weight: 900; color: var(--nt-blue); }
.ab2 .nt-pay-empty { border-top: 2px solid #000; padding: 14px 20px; font-size: 14px; line-height: 1.55; color: #16181D; }
.ab2 .nt-pay-empty a { color: var(--nt-blue) !important; font-weight: 700; text-decoration: none !important; }
.ab2-calc__foot { border-top: 2px solid #000; padding: 10px 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(33,55,119,.6); }
.ab2 .ab2-table__row .ab2-table__note a { color: var(--nt-blue) !important; font-weight: 700; text-decoration: none !important; }
@media (max-width: 768px) {
.ab2-photo, .ab2-calc { box-shadow: 4px 4px 0 0 #000; }
.ab2-calc__head, .ab2 .nt-pay-calc, .ab2 .nt-pay-result__city, .ab2 .nt-pay-result__metric, .ab2 .nt-pay-empty, .ab2-calc__foot { padding-left: 16px; padding-right: 16px; }
}
/* длинное слово в h1 («Производители») — без переноса по слогам */
.ab2 .ab2-hero__title--long { font-size: 3.25rem !important; hyphens: none; }
@media (max-width: 768px) { .ab2 .ab2-hero__title--long { font-size: 1.85rem !important; } }
/* /brand/: блок брендов сам несёт нижний отступ 96 — следующей секции свой не нужен; плитки без лишнего margin-top от homepage-v3 */
.ab2-brands + .ab2-terms { padding-top: 0 !important; }
.ab2 .ab2-adv { margin-top: 0 !important; }
/* hero без картинки и без блока справа — текст во всю ширину */
.ab2 .ab2-hero.ab2-hero--solo { grid-template-columns: 1fr; }
.ab2 .ab2-hero--solo .ab2-hero__text { max-width: 820px; }
/* /payment/: марка СДЭК в hero — маленькая, без рамки-карточки (владелец: «маленький логотип, возим только СДЭКом») */
.ab2-carrier { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ab2-carrier__logo { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 56px; line-height: 1; letter-spacing: -.01em; color: #1AB248; }
.ab2-carrier__note { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; line-height: 1.6; color: rgba(33,55,119,.6); }
@media (max-width: 768px) { .ab2-carrier__logo { font-size: 40px; } }
/* поиск срока — отдельной секцией по центру */
.ab2-pay-calc .ab2-calc { margin: 0 auto; max-width: 560px; }
/* иллюстрация в hero без рамки — прямо на фоне (/education/) */
.ab2 img.ab2-illo { display: block; width: auto; max-width: 100%; max-height: 440px; height: auto; border: 0; border-radius: 0 !important; box-shadow: none; margin: 0 auto; }
@media (max-width: 1100px) { .ab2 img.ab2-illo { max-height: 380px; margin: 0; } }
@media (max-width: 768px) { .ab2 img.ab2-illo { max-height: 340px; margin: 0 auto; } }
/* Тона фона hero по страницам (03.10.2026): /company/ #E3EFF8 голубой, гарантия #F6F7F9 серый (фон фото стека),
обучение #EAF5EF мятный (розовая иллюстрация читается), оплата #FFF6DC тёплый, производители #EEECFB сиреневый. */
/* /education/: иллюстрация миниатюрой («раз текста нет — меньше, чтобы было мило», 03.10.2026) */
.ab2 img.ab2-illo { max-height: 300px !important; }
@media (max-width: 1100px) { .ab2 img.ab2-illo { max-height: 260px !important; } }
@media (max-width: 768px) { .ab2 img.ab2-illo { max-height: 230px !important; } }
/* /contacts/: четыре кнопки связи в hero — геометрия кнопок шапки (.hn__msgr), только крупнее:
квадрат, рамка 2px, жёсткая тень, белая иконка в левом верхнем углу, подпись внизу */
.ab2-reach { display: grid; grid-template-columns: repeat(2, 132px); gap: 18px; }
.ab2 a.ab2-reach__btn { position: relative; display: block; width: 132px; height: 132px; box-sizing: border-box; padding: 12px; border: 2px solid #000 !important; border-radius: 0 !important; box-shadow: 4px 4px 0 0 #000; color: #fff !important; text-decoration: none !important; transition: transform .14s ease, box-shadow .14s ease; }
.ab2 a.ab2-reach__btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 #000; }
.ab2-reach__btn svg { display: block; width: 40px; height: 40px; fill: #fff; }
.ab2-reach__name { position: absolute; left: 12px; bottom: 10px; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: #fff; }
.ab2-reach__btn--wa { background: #25D366 !important; }
.ab2-reach__btn--tg { background: #229ED9 !important; }
.ab2-reach__btn--max { background: #8A63F5 !important; }
.ab2-reach__btn--call { background: var(--nt-blue) !important; }
@media (max-width: 1100px) { .ab2-reach { grid-template-columns: repeat(4, 112px); } .ab2 a.ab2-reach__btn { width: 112px; height: 112px; } }
@media (max-width: 768px) {
.ab2-reach { grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; max-width: 300px; }
.ab2 a.ab2-reach__btn { width: auto; height: 104px; box-shadow: 3px 3px 0 0 #000; }
.ab2-reach__btn svg { width: 34px; height: 34px; }
}
/* /contacts/: кнопки связи миниатюрами («уменьши, миниатюрки, милые», 03.10.2026) */
.ab2-reach { grid-template-columns: repeat(2, 84px) !important; gap: 14px !important; }
.ab2 a.ab2-reach__btn { width: 84px !important; height: 84px !important; padding: 8px !important; box-shadow: 3px 3px 0 0 #000; }
.ab2 a.ab2-reach__btn:hover { box-shadow: 4px 4px 0 0 #000; }
.ab2-reach__btn svg { width: 24px !important; height: 24px !important; }
.ab2-reach__name { left: 8px !important; bottom: 7px !important; font-size: 9px !important; letter-spacing: .05em !important; }
@media (max-width: 1100px) { .ab2-reach { grid-template-columns: repeat(4, 76px) !important; } .ab2 a.ab2-reach__btn { width: 76px !important; height: 76px !important; } }
@media (max-width: 768px) { .ab2-reach { grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; max-width: 340px !important; } .ab2 a.ab2-reach__btn { width: auto !important; height: auto !important; aspect-ratio: 1 / 1; } }
/* /payment/: миниатюра фургона СДЭК прямо на фоне hero */
.ab2 svg.ab2-van { display: block; width: 260px; max-width: 100%; height: auto; margin: 0 auto; }
@media (max-width: 1100px) { .ab2 svg.ab2-van { width: 220px; margin: 0; } }
@media (max-width: 768px) { .ab2 svg.ab2-van { width: 200px; margin: 0 auto; } }
/* /payment/: логотип СДЭК на мягком салатовом фоне; акцент заголовка — в тон зелёному СДЭК.
Обучение переведено на песочный #F7F0E6, чтобы два зелёных hero не повторялись (03.10.2026). */
.ab2 img.ab2-logo { display: block; width: 280px; max-width: 100%; height: auto; margin: 0 auto; border: 0; }
.ab2 .ab2-hero--cdek .ab2-hero__accent { color: #2F8A1F !important; }
@media (max-width: 1100px) { .ab2 img.ab2-logo { width: 240px; margin: 0; } }
@media (max-width: 768px) { .ab2 img.ab2-logo { width: 210px; margin: 0 auto; } }
/* Одна высота hero на всех инфо-страницах (владелец 03.10.2026: «это hero выше остальных»): тексты укорочены до 420px,
на десктопе высота фиксируется — разница в контенте не растягивает блок. */
@media (min-width: 1101px) { .ab2 .ab2-hero { height: 420px; min-height: 420px; } }
/* === Мобильный hero инфо-страниц как на главной (04.10.2026, владелец): миниатюра в правом нижнем
углу, две кнопки — в две строки. === */
@media (max-width: 768px) {
.ab2 .ab2-hero__btns { flex-direction: column !important; align-items: stretch !important; max-width: 260px !important; gap: 12px !important; }
.ab2 .ab2-hero__btns .ab2-btn { justify-content: center !important; }
/* блок справа — в правый нижний угол, миниатюрой */
.ab2 .ab2-hero--split .ab2-hero__aside { justify-content: flex-end !important; padding: 0 18px 18px !important; }
.ab2 img.ab2-illo { max-height: 150px !important; margin: 0 !important; }
.ab2 img.ab2-logo { width: 150px !important; margin: 0 !important; }
.ab2 .ab2-reach { margin-left: auto !important; }
}
/* ════════ ПРАВИЛО МОБИЛЬНОГО HERO (04.10.2026, владелец: «брать за правила, а не по элементам») ════════
Одно для главной (homepage-v3.css, .neo-hero) и инфо-страниц (.ab2-hero):
1) кнопки по ширине текста, поля 12×18, шрифт 13/900 — как CTA главной; две кнопки — в две строки, влево;
2) кнопка — сразу за текстом (24px), до миниатюры не меньше 24px; лишнее место — над миниатюрой, не между
текстом и кнопкой; миниатюра в правом нижнем углу, 18px от края;
3) от текста до кнопки 24px; боковые поля текста 24px.
Баннерные hero (/company/, гарантия): --ab2-mpad = высота миниатюры от низа + 24px. */
@media (max-width: 768px) {
.ab2 .ab2-hero__text { padding-left: var(--nt-m-gutter) !important; padding-right: var(--nt-m-gutter) !important; padding-top: 28px !important; }
.ab2 .ab2-hero__sub { margin-bottom: var(--nt-m-text-btn) !important; }
.ab2 .ab2-hero__btns { align-items: flex-start !important; max-width: none !important; gap: 12px !important; }
.ab2 a.ab2-btn { padding: 12px 18px !important; font-size: 13px !important; box-shadow: var(--nt-shadow-btn) !important; width: auto !important; }
.ab2 .ab2-hero--split .ab2-hero__text { padding-bottom: 0 !important; }
.ab2 .ab2-hero--split .ab2-hero__aside { padding: 24px 18px 18px !important; }
}
/* ══ НУМЕРОВАННАЯ СЕТКА — единый компонент (06.10.2026, владелец: «по типу одинаковые блоки») ══
Заменила четыре разных рисунка: бенто «Что мы делаем», карточки шагов с тенью («Как проходит ремонт»),
«Четыре правила» и полосу из 6 шагов на /agentam/. Разметка:
01
Заголовок
Текст
[Подпись →]