/*
 * О компании и Контакты. Контрольные ширины: 1920, 1440, 990, 375 — как
 * на остальных страницах сайта. «О компании» сверху вниз: крошки, hero
 * «текст + фото» с раскрытием, «чем отвечаем», «как работаем», пять шагов,
 * банки, офисы, реквизиты, призыв. «Контакты» переиспользуют карточку
 * города, реквизиты и призыв.
 *
 * Один файл на две страницы намеренно: карточка города у них одна и та же,
 * и во втором файле она разошлась бы с первым на первой же правке.
 *
 * Страница сделана по образцу ориентира (ВЗ, /o-kompanii/), но на палитре
 * и компонентах этого сайта: зелёный --w-green, Bebas в заголовках,
 * белые карточки на сером фоне.
 *
 * Отступы секций и .w-title повторяют главную: там они объявлены в home.css,
 * который сюда не подключается, а тащить весь файл главной ради двух правил
 * дороже, чем повторить их здесь.
 */

:root {
    /* Отступы секций — роль --w-section-gap из layout.css (26.10, система отступов). */
    --w-gap-l: var(--w-section-gap);
    --w-gap-m: var(--w-section-gap);
    --w-title: 60px;
}

@media (max-width: 1919px) {
    :root { --w-title: 48px; }
}

@media (max-width: 1439px) {
    :root { --w-title: 40px; }
}

@media (max-width: 989px) {
    :root { --w-title: 32px; }
}

.w-section { margin-top: var(--w-gap-l); }
.w-section--m { margin-top: var(--w-gap-m); }
.w-section--m:last-child { margin-bottom: var(--w-gap-m); }

.w-title {
    margin: 0;
    font-family: var(--w-font-display);
    font-size: var(--w-title);
    font-weight: 400;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    color: var(--w-ink);
}

/* --- Крошки: те же, что на ипотеке и в каталоге --- */
.w-crumbs {
    margin-top: 60px;
    color: #1e2529;
    font-size: 14px;
    line-height: 1;
}

.w-crumbs__link { color: inherit; text-decoration: none; transition: color var(--w-ease); }
.w-crumbs__current { color: #8b8b8b; }

/* --- Контакты: заголовок страницы --- */
.w-contacts-intro { margin-top: 40px; }

.w-contacts-intro__title {
    margin: 0;
    font-family: var(--w-font-display);
    font-size: var(--w-title);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    color: var(--w-ink);
}

.w-contacts-intro__text {
    max-width: 640px;
    margin: 16px 0 0;
    color: #4d4d4d;
    font-size: 20px;
    line-height: 1.45;
}

/* Ни один город не заполнен — страница всё равно даёт оставить заявку. */
.w-contacts-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 40px;
    border-radius: 10px;
    background: #fff;
}

.w-contacts-empty__text {
    margin: 0;
    color: #4d4d4d;
    font-size: 18px;
    line-height: 1.5;
}

@media (hover: hover) {
    .w-crumbs__link:hover { color: var(--w-green); }
}

/* --- 1440 --- */
@media (max-width: 1919px) {
    .w-crumbs { margin-top: 48px; }
    .w-contacts-intro__text { font-size: 18px; }
}

/* --- 990 --- */
@media (max-width: 1439px) {
    .w-crumbs { margin-top: 30px; }
    .w-contacts-empty { padding: 28px; }
}

/* --- Мобильный --- */
@media (max-width: 989px) {
    .w-contacts-intro { margin-top: 24px; }
    .w-contacts-intro__text { font-size: 16px; }
    .w-contacts-empty { padding: 20px; }
    .w-contacts-empty__text { font-size: 16px; }
    .w-contacts-empty .w-button { width: 100%; }
}

/* =====================================================================
   «О компании», hero (26.10, Анастасия, вариант «2 доработан»):
   текст на фирменном зелёном градиенте поверх фото — слева плотный
   (≈0,92 под колонкой текста), к 65% ширины уходит в ноль. Телефон — фото
   сверху, текст на сплошном зелёном. Отступы — роли (spacing.md).
   ===================================================================== */
.w-ab-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 640px;
    margin-top: var(--space-l);
    overflow: hidden;
    border-radius: 28px;
    background: #143528;
    color: #fff;
}

.w-ab-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }

.w-ab-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(20, 53, 40, .95) 0%, rgba(29, 96, 71, .92) 28%, rgba(29, 96, 71, .9) 50%, rgba(29, 96, 71, .45) 59%, rgba(29, 96, 71, 0) 66%),
        linear-gradient(0deg, rgba(20, 53, 40, .35) 0%, rgba(20, 53, 40, 0) 40%);
}

.w-ab-hero__body { position: relative; z-index: 2; max-width: 860px; padding: var(--space-3xl); }

.w-ab-hero__title { margin: 0; font: 400 76px/1 var(--w-font-display); text-transform: uppercase; text-wrap: balance; }
.w-ab-hero__lead { max-width: 600px; margin: var(--space-l) 0 0; color: rgba(255, 255, 255, .92); font-size: 18px; line-height: 1.5; }

.w-ab-hero__chips { display: grid; grid-template-columns: repeat(2, max-content); gap: var(--space-s); margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.w-ab-hero__chips li {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding: 10px 20px 10px 10px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    font-size: 16px;
    font-weight: 600;
}
.w-ab-hero__check { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #1D6047; }

.w-ab-hero__btns { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-2xl); }
body.w-page .w-button.w-ab-hero__btn { background: #fff; color: var(--w-btn-ink); }
body.w-page .w-button.w-ab-hero__btn::after { background-color: var(--w-btn); background-image: var(--w-btn-arrow-white); }
body.w-page .w-button.w-ab-hero__btn--line { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8); color: #fff; }
body.w-page .w-button.w-ab-hero__btn--line::after { background-color: rgba(255, 255, 255, .16); }
/* Контурная кнопка на тёмном: на наведении и в фокусе — белая с зелёным текстом и зелёным кругом стрелки
   (26.10: был светлый полупрозрачный фон с зелёным текстом — не читалось). Контраст 7,3:1. */
@media (hover: hover) {
    body.w-page .w-button.w-ab-hero__btn:hover { background: #fff; }
    body.w-page .w-button.w-button--outline.w-ab-hero__btn--line:hover { background: #fff; box-shadow: none; color: #1D6047; }
    body.w-page .w-button.w-button--outline.w-ab-hero__btn--line:hover::after { background-color: #1D6047; background-image: var(--w-btn-arrow-white); }
}
body.w-page .w-button.w-button--outline.w-ab-hero__btn--line:focus-visible { background: #fff; box-shadow: none; color: #1D6047; outline: 2px solid #fff; outline-offset: 3px; }
body.w-page .w-button.w-button--outline.w-ab-hero__btn--line:active { background: #e9efeb; color: #143528; }

@media (max-width: 1279px) {
    .w-ab-hero__body { padding: var(--space-2xl); }
    .w-ab-hero__title { font-size: 60px; }
    /* Колонка текста шире доли фото — градиент держится дольше. */
    .w-ab-hero::before {
        background:
            linear-gradient(90deg, rgba(20, 53, 40, .94) 0%, rgba(29, 96, 71, .92) 45%, rgba(29, 96, 71, .7) 60%, rgba(29, 96, 71, 0) 82%),
            linear-gradient(0deg, rgba(20, 53, 40, .35) 0%, rgba(20, 53, 40, 0) 40%);
    }
}

/* Планшет и телефон: фото сверху, текст на сплошном зелёном — на узком кадре фото под текстом не читается. */
@media (max-width: 1023px) {
    .w-ab-hero { display: block; min-height: 0; border-radius: 20px; }
    .w-ab-hero::before { display: none; }
    .w-ab-hero__img { position: static; display: block; height: 360px; object-position: center 60%; }
    .w-ab-hero__body { max-width: none; background: #1D6047; }
    .w-ab-hero__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .w-ab-hero__chips li { padding-right: var(--space-m); }
}

@media (max-width: 767px) {
    .w-ab-hero__img { height: 240px; }
    .w-ab-hero__body { padding: var(--space-l) var(--w-card-pad) var(--space-xl); background: #1D6047; }
    .w-ab-hero__title { font-size: clamp(36px, 10.4vw, 44px); }
    .w-ab-hero__title br { display: none; }
    .w-ab-hero__lead { margin-top: var(--space-m); font-size: 16px; }
    .w-ab-hero__chips { grid-template-columns: 1fr; gap: var(--space-xs); margin-top: var(--space-l); }
    .w-ab-hero__chips li { font-size: 15px; }
    .w-ab-hero__btns { margin-top: var(--space-xl); }

}

/* =====================================================================
   «Чем мы отвечаем за результат» (26.10, Анастасия, вариант 2b «как в договоре»):
   лист выдержки 560px по центру, пункты с крупными зелёными номерами, печать
   на строке «Подрядчик»; по бокам выноски Bebas с тонкой линией и точкой к пункту.
   С 1279 выноски — над своим пунктом, лист во всю колонку.
   ===================================================================== */
.w-ab-promises { text-align: center; }
.w-ab-lead { max-width: 640px; margin-inline: auto; color: #5f6762; font-size: 17px; line-height: 1.55; }

.w-ab-contract { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 560px minmax(0, 1fr); margin-top: var(--w-group-gap); text-align: left; }
.w-ab-contract__paper { position: relative; grid-column: 2; grid-row: 1 / 6; border-radius: 8px; background: #fff; box-shadow: 0 2px 0 #e9ece9, 0 28px 70px rgba(20, 35, 28, .14); }
.w-ab-contract__paper::before { content: ''; position: absolute; inset: 14px -12px -12px 14px; z-index: -1; border-radius: 8px; background: #f7f8f6; box-shadow: 0 10px 30px rgba(20, 35, 28, .08); transform: rotate(1.6deg); }
.w-ab-contract__top { position: relative; grid-column: 2; grid-row: 1; padding: var(--space-2xl) var(--space-2xl) var(--space-xs); text-align: center; }
.w-ab-contract__title { color: var(--w-ink); font: 400 30px/1 var(--w-font-display); letter-spacing: .06em; text-transform: uppercase; }
.w-ab-contract__sub { margin-top: var(--space-xs); color: #6b736e; font-size: 15px; }

.w-ab-contract__clause { position: relative; display: grid; grid-column: 2; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-s); margin: 0 var(--space-2xl); padding: var(--space-l) 0; border-top: 1px solid #e3e7e4; }
.w-ab-contract__clause[style*="row: 4"] { border-bottom: 1px solid #e3e7e4; }
.w-ab-contract__num { color: #1D6047; font: 400 40px/1 var(--w-font-display); }
.w-ab-contract__num small { display: block; margin-bottom: 6px; color: #6b736e; font: 700 12px/1 var(--w-font); letter-spacing: .08em; text-transform: uppercase; }
.w-ab-contract__text { margin: 0; color: #26322c; font-size: 17px; line-height: 1.35; }
.w-ab-contract__text b { color: var(--w-ink); }
/* Маркер — тонкая полоса по нижним ~35% букв; фраза (1–3 слова) не рвётся между строками. */
.w-ab-contract__text em { padding: 0; background-image: linear-gradient(transparent 62%, rgba(29, 96, 71, .22) 62%); color: var(--w-ink); font-style: normal; font-weight: 700; white-space: nowrap; }
.w-ab-contract__inline { display: none; grid-column: 1 / -1; color: #1D6047; font: 400 34px/1 var(--w-font-display); text-transform: uppercase; }
.w-ab-contract__inline span { color: #6b736e; font: 700 14px var(--w-font); text-transform: none; }

.w-ab-contract__callout { display: flex; align-items: center; align-self: center; min-width: 0; }
.w-ab-contract__callout--L { grid-column: 1; justify-content: flex-end; padding-left: var(--space-xl); }
.w-ab-contract__callout--R { flex-direction: row-reverse; grid-column: 3; justify-content: flex-end; padding-right: var(--space-xl); text-align: right; }
.w-ab-contract__big { flex: none; color: #1D6047; font: 400 48px/1 var(--w-font-display); text-transform: uppercase; white-space: nowrap; }
.w-ab-contract__big span { display: block; margin-top: 6px; color: #6b736e; font: 700 15px/1.2 var(--w-font); text-transform: none; }
.w-ab-contract__callout i { position: relative; flex: 1 1 auto; min-width: 24px; max-width: 200px; height: 1px; margin: 0 0 0 var(--space-m); background: rgba(29, 96, 71, .5); }
.w-ab-contract__callout--R i { margin: 0 var(--space-m) 0 0; }
.w-ab-contract__callout i::after { content: ''; position: absolute; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: #1D6047; }
.w-ab-contract__callout--L i::after { right: -4px; }
.w-ab-contract__callout--R i::after { left: -4px; }

.w-ab-contract__sign { position: relative; grid-column: 2; grid-row: 5; height: 110px; margin: var(--space-2xl) var(--space-2xl) var(--space-xl); }
.w-ab-contract__line { position: absolute; bottom: 16px; left: 0; width: 240px; padding-top: var(--space-xs); border-top: 1px solid #9aa7a0; color: #6b736e; font-size: 15px; }
.w-ab-contract__stamp { position: absolute; z-index: 1; right: 0; bottom: -2px; display: grid; place-items: center; width: 112px; height: 112px; border: 3px solid #1D6047; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 7px #fff, inset 0 0 0 8px #1D6047, 0 8px 20px rgba(0, 0, 0, .18); color: #1D6047; font: 400 19px/1.05 var(--w-font-display); text-align: center; text-transform: uppercase; transform: rotate(-14deg); }

/* Цвет (26.10, Анастасия, C2): фирменная зелёная плашка с градиентом, белые заголовок
   и выноски, линии белые 40%; лист белый с глубокой тенью, второй лист выглядывает снизу.
   Ключевые слова — маркером светло-зелёного (22%), печать — фирменная зелёная на листе. */
.w-ab-promises { overflow: hidden; padding: var(--space-3xl) var(--space-2xl); border-radius: 28px; background: linear-gradient(160deg, #1D6047 0%, #143528 100%); color: #fff; }
body.w-page .w-ab-promises .w-title { color: #fff; }
.w-ab-promises .w-ab-lead { color: rgba(255, 255, 255, .82); }
.w-ab-promises .w-ab-contract__paper { box-shadow: 0 2px 0 rgba(0, 0, 0, .08), 0 30px 80px rgba(0, 0, 0, .35); }
.w-ab-promises .w-ab-contract__paper::before { background: #e9eeea; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
.w-ab-promises .w-ab-contract__big { color: #fff; }
.w-ab-promises .w-ab-contract__big span { color: rgba(255, 255, 255, .75); }
.w-ab-promises .w-ab-contract__callout i { background: rgba(255, 255, 255, .4); }
.w-ab-promises .w-ab-contract__callout i::after { background: #fff; }

@media (max-width: 1279px) {
    .w-ab-promises { padding: var(--space-2xl) var(--space-l); }
    .w-ab-contract { grid-template-columns: minmax(0, 640px); justify-content: center; }
    .w-ab-contract__paper, .w-ab-contract__top, .w-ab-contract__clause, .w-ab-contract__sign { grid-column: 1; }
    .w-ab-contract__callout { display: none; }
    .w-ab-contract__inline { display: block; }
    /* Планшет — как телефон (28.10, Анастасия: «много всего на один квадрат»): без «пункт N»,
       без повтора «Цена.» перед текстом, выделения только жирным. */
    .w-ab-contract__clause { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
    .w-ab-contract__num { display: none; }
    .w-ab-contract__text { line-height: 1.45; }
    .w-ab-contract__text b { display: none; }
    .w-ab-contract__text em { background: none; white-space: normal; }
    .w-ab-contract__inline span { display: block; margin-top: 4px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
}

@media (max-width: 767px) {
    .w-ab-lead { font-size: 16px; }
    .w-ab-promises { padding: var(--space-xl) var(--space-s) var(--space-l); border-radius: 20px; }
    .w-ab-contract { grid-template-columns: minmax(0, 1fr); }
    .w-ab-contract__paper::before { display: none; }
    .w-ab-contract__top { padding: var(--space-xl) var(--w-card-pad) var(--space-2xs); }
    .w-ab-contract__title { font-size: 26px; }
    .w-ab-contract__clause, .w-ab-contract__sign { margin-inline: var(--w-card-pad); }
    .w-ab-contract__clause { padding: var(--space-l) 0; }
    .w-ab-contract__text { font-size: 16px; }
    .w-ab-contract__inline { font-size: 30px; }
    .w-ab-contract__sign { height: 100px; margin-top: var(--space-xl); margin-bottom: var(--space-l); }
    .w-ab-contract__line { width: 200px; }
    .w-ab-contract__stamp { right: 0; bottom: 0; width: 92px; height: 92px; font-size: 15px; }
}

/* =====================================================================
   «Аккредитация в ведущих банках» (26.10, Анастасия, вариант 2):
   заголовок и текст по центру, логотипы одним рядом на белых плашках,
   кнопка «Условия ипотеки» под ними. Список банков — config/mortgage.php.
   ===================================================================== */
.w-ab-banks { display: flex; flex-direction: column; align-items: center; text-align: center; }

.w-ab-banks__grid {
    display: grid;
    grid-template-columns: repeat(var(--banks, 5), minmax(0, 1fr));
    gap: var(--w-card-gap);
    width: 100%;
    padding: 0;
    list-style: none;
}
.w-ab-banks__item { display: flex; align-items: center; justify-content: center; height: 96px; padding: var(--space-m) var(--space-l); border-radius: 16px; background: #fff; }
/* Логотип ~80% прежнего (26.10, Анастасия): чуть меньше и спокойнее; холсты 800×180 уже выровнены по оптической величине. */
.w-ab-banks__logo { display: block; width: 80%; height: 80%; object-fit: contain; }
.w-ab-banks__btn { margin-top: var(--space-xl); }

@media (max-width: 1023px) {
    .w-ab-banks__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .w-ab-banks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Нечётное число банков: последний — на всю ширину, без дыры справа. */
    .w-ab-banks__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .w-ab-banks__item:last-child:nth-child(odd) .w-ab-banks__logo { width: 40%; }
    .w-ab-banks__item { height: 76px; padding: var(--space-s) var(--space-m); border-radius: 14px; }
    .w-ab-banks__btn { align-self: stretch; }
}

/* =====================================================================
   «Наши офисы» (26.10, Анастасия, вариант 1): две карточки рядом —
   статичная карта Яндекса сверху (ссылка в Карты), город, адрес,
   телефон, «Записаться на встречу» и «Маршрут». С 1024 — в колонку.
   ===================================================================== */
.w-ab-offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--w-card-gap); margin-top: var(--w-group-gap); }
.w-ab-office { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: #fff; }
.w-ab-office__map { aspect-ratio: 650 / 300; }
.w-ab-office__body { display: flex; flex: 1; flex-direction: column; padding: var(--w-card-pad); }
.w-ab-office__city { margin: 0; color: var(--w-ink); font: 400 32px/1 var(--w-font-display); text-transform: uppercase; }
.w-ab-office__address { display: flex; gap: var(--space-xs); margin: var(--space-s) 0 0; color: #5f6762; font-size: 16px; line-height: 1.45; }
.w-ab-office__address svg { flex: none; margin-top: 2px; color: #1D6047; }
.w-ab-office__hours { margin: var(--space-xs) 0 0; color: #5f6762; font-size: 15px; line-height: 1.3; }
.w-ab-office__phone { margin-top: var(--space-s); color: var(--w-ink); font-size: 22px; font-weight: 700; text-decoration: none; }
.w-ab-office__btns { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: auto; padding-top: var(--space-l); }

@media (hover: hover) { .w-ab-office__phone:hover { color: #1D6047; } }

@media (max-width: 1023px) {
    .w-ab-offices { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
    .w-ab-office { border-radius: 16px; }
    .w-ab-office__map { aspect-ratio: 650 / 360; }
    .w-ab-office__city { font-size: 28px; }
    .w-ab-office__phone { font-size: 20px; }
    .w-ab-office__btns .w-button { width: 100%; }
}

/* =====================================================================
   Реквизиты (26.10, Анастасия, вариант 2): аккордеон на <details>,
   свёрнут по умолчанию; внутри — строки и «Скопировать реквизиты».
   ===================================================================== */
/* Реквизиты — продолжение блока офиса: на всю ширину контейнера, как карточка офиса, и близко к ней
   (28.10, Анастасия: «беда с отступами» — был узкий блок по центру с отступом секции 120px). */
.w-ab-req { overflow: hidden; border-radius: 20px; background: #fff; }
.w-section + .w-ab-req-section { margin-top: var(--space-l); }
.w-ab-req__head { position: relative; display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--w-card-pad); padding-right: calc(var(--w-card-pad) + 40px); cursor: pointer; list-style: none; }
.w-ab-req__head::-webkit-details-marker { display: none; }
.w-ab-req__title { color: var(--w-ink); font-size: 20px; font-weight: 700; }
.w-ab-req__sub { color: #6b736e; font-size: 15px; }
.w-ab-req__chev { position: absolute; top: 50%; right: var(--w-card-pad); color: #1D6047; transform: translateY(-50%); transition: transform .25s ease; }
.w-ab-req[open] .w-ab-req__chev { transform: translateY(-50%) rotate(180deg); }
.w-ab-req__list { margin: 0; padding: var(--space-m) var(--w-card-pad) 0; border-top: 1px solid #ececec; }
.w-ab-req__row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-m); padding: var(--space-xs) 0; }
.w-ab-req__label { color: #6b736e; font-size: 15px; }
.w-ab-req__value { margin: 0; color: var(--w-ink); font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
.w-ab-req__copy { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; margin: var(--space-s) var(--w-card-pad) var(--w-card-pad); padding: 0; border: 0; background: none; color: #1D6047; font: 600 16px var(--w-font); cursor: pointer; }
@media (hover: hover) { .w-ab-req__copy:hover { color: #164C38; } }
@media (prefers-reduced-motion: reduce) { .w-ab-req__chev { transition: none; } }

@media (max-width: 767px) {
    .w-ab-req { border-radius: 16px; }
    .w-ab-req__title { font-size: 18px; }
    .w-ab-req__row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: var(--space-xs) 0; }
}

/* =====================================================================
   Карточки с кадром 16:10 (web.partials.photo-slot): фото из config/about.php,
   а пока его нет — 3D-иконка по центру на светлой подложке.
   ===================================================================== */
.w-photo-slot { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #eef2ef; }
.w-photo-slot__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.w-photo-slot--icon { display: grid; place-items: center; }
/* multiply: у части иконок белый фон, на светлой подложке он растворяется. */
.w-photo-slot__icon { display: block; width: 44%; max-width: 200px; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }

/* «Как мы работаем»: 8 вертикальных карточек, кадр сверху; 4×2 с 1280, 2 колонки на планшете, 1 на телефоне. */
.w-ab-work { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--w-group-gap) 0 0; padding: 0; list-style: none; }
.w-ab-work__card { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: #fff; }
.w-ab-work__body { padding: var(--w-card-pad); }
.w-ab-work__title { margin: 0; color: var(--w-ink); font-size: 18px; font-weight: 700; line-height: 1.3; text-wrap: balance; }
.w-ab-work__text { margin: var(--space-xs) 0 0; color: #5f6762; font-size: 15px; line-height: 1.5; text-wrap: pretty; }

@media (max-width: 1279px) {
    .w-ab-work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .w-ab-work { grid-template-columns: minmax(0, 1fr); }
    .w-ab-work__card { border-radius: 16px; }
}

/* =====================================================================
   «Контакты» (28.10, Анастасия, вариант 1): три карточки связи — позвонить, написать,
   приехать. Карточки одной высоты, кнопки прижаты к низу; в «Приехать» обе кнопки
   одной ширины (замечание: «кнопки одинаковые по ширине»).
   ===================================================================== */
.w-ct-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--w-card-gap); }
/* На планшете — в столбик, а не 2 + 1 с одинокой третьей карточкой. */
@media (max-width: 1023px) { .w-ct-ways { grid-template-columns: minmax(0, 1fr); } }
.w-ct-way { display: flex; flex-direction: column; padding: var(--w-card-pad); border-radius: 24px; background: #fff; }
.w-ct-way__kicker { color: #1D6047; font: 600 14px/1.2 var(--w-font); letter-spacing: .06em; text-transform: uppercase; }
.w-ct-way__value { margin-top: var(--space-s); color: var(--w-ink); font: 700 28px/1.2 var(--w-font); text-decoration: none; }
.w-ct-way__value--nowrap { white-space: nowrap; }
.w-ct-way__text { margin-top: var(--space-xs); color: #5b6762; font-size: 16px; line-height: 1.4; }
/* Кнопки — своей ширины, не на всю карточку (28.10: «не хочу такие длинные кнопки»).
   Колонка шириной по самой длинной кнопке: в «Приехать» «Маршрут» тянется до ширины «Записаться на встречу». */
.w-ct-way__acts { display: flex; flex-direction: column; align-items: flex-start; margin-top: auto; padding-top: var(--space-l); }
/* Одна залитая кнопка на блок — главное действие «Записаться на встречу»; «Позвонить» контуром,
   маршрут — подчёркнутой ссылкой (28.10: «кнопки смущают, цвета»). */
.w-ct-way__btns { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-s); }
/* «Построить маршрут» — всегда под кнопкой, не рядом (28.10); оптически по левому краю кнопки:
   скругление «съедает» край, поэтому текст сдвинут на 6px, чтобы читался ровно под кнопкой. */
.w-ct-way__btns .w-ct-way__link { margin-left: 6px; }
.w-ct-way__link { color: #1D6047; font: 600 16px/1.3 var(--w-font); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color .15s; }
.w-ct-way__acts--msg { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.w-ct-msg { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px 0 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px #d5dcd8; color: var(--w-ink); font: 700 17px/1.2 var(--w-font); text-decoration: none; transition: box-shadow .15s, color .15s; }
.w-ct-msg__ic { flex: none; width: 32px; height: 32px; border-radius: 50%; }
.w-ct-msg__ic--tg { display: grid; place-items: center; background: #2AABEE; color: #fff; }
.w-ct-msg__ic--tg .w-icon { width: 16px; height: 14px; margin-left: -2px; }
.w-ct-ways + .w-ab-req-section { margin-top: var(--w-card-gap); }

@media (hover: hover) {
    a.w-ct-way__value:hover { color: #1D6047; }
    .w-ct-way__link:hover { color: #143528; }
    .w-ct-msg:hover { box-shadow: inset 0 0 0 1.5px #1D6047; color: #1D6047; }
}

@media (max-width: 767px) {
    /* На телефоне кнопки на всю ширину карточки, как было (28.10: «в мобилке ок»). */
    .w-ct-way__acts { align-items: stretch; }
    .w-ct-way__btns { flex-direction: column; align-items: stretch; text-align: center; }
    .w-ct-way__btns .w-ct-way__link { margin-left: 0; }
    .w-ct-way__btns .w-button, .w-ct-way__acts > .w-button { width: 100%; }
    .w-ct-msg { flex: 1 1 0; justify-content: center; }
    .w-ct-way { border-radius: 16px; }
    .w-ct-way__value { font-size: 24px; }
}
}

/* Одна карточка офиса (на «О компании», если заполнен только один город) — в ширину: карта слева, текст справа. */
.w-ab-offices--single { grid-template-columns: minmax(0, 1fr); }
.w-ab-offices--single .w-ab-office { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.w-ab-offices--single .w-ab-office__map { height: 360px; aspect-ratio: auto; }
.w-ab-offices--single .w-ab-office__body { justify-content: center; }
.w-ab-offices--single .w-ab-office__btns { margin-top: 0; padding-top: var(--space-l); }
@media (max-width: 767px) {
    .w-ab-offices--single .w-ab-office { grid-template-columns: minmax(0, 1fr); }
    .w-ab-offices--single .w-ab-office__map { height: auto; aspect-ratio: 650 / 360; }
}