/* =========================================================================
   rm-bootstrap-theme.css — брендовая тема поверх Bootstrap 5.3.
   Добавлено 18.07.2026 (переезд с Webflow на Bootstrap, шаблон v2).

   Подключается ПОСЛЕ bootstrap.min.css. Переопределяет CSS-переменные
   Bootstrap под фирменный стиль rumonolit (жёлтый CTA, шрифт Golos,
   скругления), чтобы сайт не выглядел «дефолтным бутстрапом».
   Компонентные точечные правки блоки добавляют по мере переверстки.
   ========================================================================= */

/* --- Шрифт Golos Text (self-hosted, кириллица) -------------------------- */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/golos-400.woff2") format("woff2"); }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/golos-500.woff2") format("woff2"); }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/golos-600.woff2") format("woff2"); }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/golos-700.woff2") format("woff2"); }
/* Fallback с подогнанными метриками — чтобы при подмене шрифта не прыгала вёрстка (CLS). */
@font-face { font-family: 'Golos Fallback'; src: local('Arial'); size-adjust: 101%; ascent-override: 95%; descent-override: 24%; line-gap-override: 0%; }

/* --- Брендовые токены поверх переменных Bootstrap ----------------------- */
:root {
    /* фирменные цвета */
    --rm-yellow: #ffdd00;
    --rm-yellow-hover: #ffe94d;
    --rm-ink: #2c2c2c;
    --rm-muted: #5f5f5f;
    --rm-accent: #294875;
    --rm-accent-hover: #1d3557;

    /* типографика */
    --bs-body-font-family: 'Golos Text', 'Golos Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bs-body-color: var(--rm-ink);
    --bs-body-color-rgb: 44, 44, 44;

    /* акцент = синий бренда (ссылки) */
    --bs-primary: var(--rm-accent);
    --bs-primary-rgb: 41, 72, 117;
    --bs-link-color: var(--rm-accent);
    --bs-link-color-rgb: 41, 72, 117;
    --bs-link-hover-color: var(--rm-accent-hover);

    /* скругления — единые 10px, как в текущем дизайне */
    --bs-border-radius: .625rem;
    --bs-border-radius-sm: .5rem;
    --bs-border-radius-lg: .875rem;
    --bs-border-radius-xl: 1rem;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
}

/* --- Заголовки: плотнее и жирнее, как в текущем дизайне ----------------- */
h1, .h1 { font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; }
h2, .h2 { font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
h3, .h3 { font-weight: 600; line-height: 1.3; }

/* --- Главный CTA: жёлтая кнопка бренда (btn-primary в BS синий по умолчанию,
   поэтому для жёлтого используем .btn-cta — понятная семантика для агентов) - */
.btn-cta {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--rm-yellow);
    --bs-btn-border-color: var(--rm-yellow);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--rm-yellow-hover);
    --bs-btn-hover-border-color: var(--rm-yellow-hover);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--rm-yellow-hover);
    --bs-btn-active-border-color: var(--rm-yellow-hover);
    --bs-btn-focus-shadow-rgb: 228, 209, 3;
    --bs-btn-font-weight: 600;
    box-shadow: 0 2px 10px rgba(228, 209, 3, .35);
}
.btn-cta:hover { box-shadow: 0 6px 20px rgba(228, 209, 3, .45); }

/* Вторичная кнопка-контур в фирменном синем */
.btn-outline-accent {
    --bs-btn-color: var(--rm-accent);
    --bs-btn-border-color: var(--rm-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--rm-accent);
    --bs-btn-hover-border-color: var(--rm-accent);
    --bs-btn-active-bg: var(--rm-accent-hover);
    --bs-btn-font-weight: 600;
}

/* --- Жёлтое подчёркивание-акцент под заголовками секций (как сейчас) ---- */
.rm-h2-underline { position: relative; padding-bottom: 14px; }
.rm-h2-underline::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 54px; height: 4px; border-radius: 2px; background: var(--rm-yellow);
}
.text-center .rm-h2-underline::after,
.rm-h2-underline.text-center::after { left: 50%; transform: translateX(-50%); }

/* --- Кнопки: крупнее и «плотнее», как в оригинале --------------------- */
.btn { padding: .6rem 1.4rem; font-weight: 600; }
.btn-lg { padding: .85rem 2rem; font-size: 1.05rem; }
.btn-cta.btn-lg { padding: .95rem 2.2rem; }
/* .btn выше переопределил и .btn-sm — возвращаем компактный размер */
.btn-sm { padding: .4rem .95rem; font-size: .875rem; }

/* --- Поля ввода: выше и просторнее (в оригинале были крупные) ---------- */
.form-control, .form-select {
    min-height: 52px;
    padding: .7rem 1rem;
    font-size: 1rem;            /* 16px — чтобы iOS не зумил при фокусе */
    background-color: #f5f5f5;
    border-color: transparent;
    border-radius: var(--bs-border-radius);
}
.form-control:hover, .form-select:hover { background-color: #f0f0f0; }

/* --- Фокус: убираем «обводку при клике» мышью, оставляем для клавиатуры -
   Bootstrap по умолчанию рисует box-shadow-кольцо на :focus (в т.ч. по клику
   мышью). Показываем его только для :focus-visible (клавиатура), а активное
   поле обозначаем сменой цвета рамки — как было в исходном дизайне. */
/* Текстовые поля ВСЕГДА матчат :focus-visible (спец браузеров), поэтому
   кольцо лезло бы и по клику мышью. У полей — только смена цвета рамки,
   без кольца. Кольцо оставляем кнопкам/чекбоксам и только для клавиатуры. */
.form-control:focus, .form-select:focus {
    background-color: #fff;
    border-color: var(--rm-accent);
    box-shadow: none;
    outline: none;
}
.btn:focus:not(:focus-visible),
.form-check-input:focus:not(:focus-visible) { box-shadow: none; }
.btn:focus-visible,
.form-check-input:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(41, 72, 117, .18);
    outline: none;
}
.form-check-input:checked { background-color: var(--rm-accent); border-color: var(--rm-accent); }

/* --- Навбар: чуть плотнее и «фирменнее», не дефолтный ------------------ */
.navbar .nav-link { font-weight: 500; color: var(--rm-ink); }
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-item.show > .nav-link { color: var(--rm-accent); }
.navbar .dropdown-menu { border-radius: var(--bs-border-radius); border-color: #eee; box-shadow: 0 12px 30px rgba(0,0,0,.1); }
.navbar .dropdown-item:active { background-color: var(--rm-accent); }
/* Жёлтые точки-разделители между пунктами (как в оригинале), только десктоп */
@media (min-width: 992px) {
    .navbar-nav > .nav-item { display: flex; align-items: center; }
    .navbar-nav > .nav-item + .nav-item::before {
        content: "•"; color: var(--rm-yellow); font-weight: 700;
        margin: 0 .35rem 0 -.1rem; line-height: 1;
    }
    .navbar-nav > .nav-item .nav-link { padding-left: .6rem; padding-right: .6rem; }
}

/* --- Блок преимуществ: единый вид (аккуратные карточки) ---------------- */
.rm-adv {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 28px 22px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .04);
    transition: transform .15s ease, box-shadow .15s ease;
}
.rm-adv:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, .08); }
.rm-adv__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(41, 72, 117, .08);
    color: var(--rm-accent);
}
.rm-adv__ico svg { width: 30px; height: 30px; }
.rm-adv__text { font-weight: 500; line-height: 1.4; color: var(--rm-ink); }

/* --- CTA-блок в hero: подпись внутри блока кнопки, не шире её ----------- */
.rm-cta { max-width: 320px; }
.rm-cta__note {
    margin-top: .55rem;
    font-size: 13px;
    line-height: 1.4;
    color: var(--rm-muted);
    text-align: center;
}

/* --- Шапка: контакты с иконками, телефон крупный ----------------------- */
.rm-hdr-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: var(--rm-ink);
    text-decoration: none;
}
.rm-hdr-link:hover { color: var(--rm-accent); }
.rm-hdr-link svg { width: 17px; height: 17px; color: var(--rm-accent); flex: 0 0 auto; }
.rm-hdr-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 19px;
    font-weight: 700;
    color: var(--rm-ink);
    text-decoration: none;
    white-space: nowrap;
}
.rm-hdr-phone:hover { color: var(--rm-accent); }
.rm-hdr-phone svg { width: 18px; height: 18px; color: var(--rm-accent); }

/* --- Поля с ведущей иконкой (input-group) под наш стиль ----------------- */
.input-group > .rm-ig-ico {
    display: flex;
    align-items: center;
    padding-left: 14px;
    padding-right: 6px;
    background: #f5f5f5;
    border: 1px solid transparent;
    border-right: 0;
    border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
    color: #9aa3ad;
}
.input-group > .rm-ig-ico svg { width: 20px; height: 20px; }
.input-group > .rm-ig-ico + .form-control { border-left: 0; padding-left: 8px; border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0; }
.input-group:focus-within > .rm-ig-ico { background: #fff; border-color: var(--rm-accent); color: var(--rm-accent); }
.input-group:focus-within > .rm-ig-ico + .form-control { background: #fff; border-color: var(--rm-accent); }

/* --- Блок «позвоните сами» в попапе ------------------------------------ */
.rm-modal-call {
    margin-top: 6px;
    padding: 14px 16px;
    background: #f7f9fc;
    border: 1px solid #e9eef5;
    border-radius: var(--bs-border-radius);
    text-align: center;
}
.rm-modal-call__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    font-weight: 700;
    color: var(--rm-ink);
    text-decoration: none;
}
.rm-modal-call__phone svg { width: 20px; height: 20px; color: var(--rm-accent); }
.rm-modal-call__phone:hover { color: var(--rm-accent); }

/* --- Модалка: крупные отступы и скругление (на десктопе было тесно) ---- */
.modal-content { border-radius: 16px; border: none; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }
.modal-header { padding: 1.5rem 1.9rem 1rem; border-bottom: 1px solid #eef0f3; }
.modal-header .modal-title { font-weight: 700; }
.modal-body { padding: 1.35rem 1.9rem 1.9rem; }
.modal .form-label { font-weight: 500; margin-bottom: .4rem; }
@media (max-width: 575.98px) {
    .modal-header { padding: 1.15rem 1.15rem .85rem; }
    .modal-body { padding: 1.1rem 1.15rem 1.4rem; }
}

/* --- Триггеры доверия в hero: чипы с галочкой (как в оригинале) -------- */
.rm-hero-trust { gap: 8px 10px !important; }
.rm-hero-trust li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--rm-ink);
}
.rm-hero-trust li::before { content: "✓"; color: #1e9e4a; font-weight: 700; }

/* =========================================================================
   Второй срез главной (18.07.2026): технология, виды стяжки, сравнение,
   объекты. Общий язык — белая карточка, скругление 14px, лёгкая тень,
   hover-lift 2px (тот же приём, что и в .rm-adv выше).
   ========================================================================= */

/* --- Технология: карточки-этапы с фото и номером шага ------------------- */
.rm-stage {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .04);
    transition: transform .15s ease, box-shadow .15s ease;
}
.rm-stage:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, .08); }
.rm-stage__img-wrap { position: relative; aspect-ratio: 8 / 5; overflow: hidden; background: #f0f0f0; }
.rm-stage__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rm-stage__num {
    position: absolute; top: 12px; left: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--rm-yellow); color: #000;
    font-weight: 700; font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.rm-stage__body { padding: 18px 20px 22px; }
.rm-stage__title { font-size: 1.05rem; margin-bottom: 8px; }
.rm-stage__text { font-size: .9rem; color: var(--bs-secondary-color); margin: 0; line-height: 1.5; }

/* --- Виды стяжки: карточки с 3D-иллюстрацией и ценой -------------------- */
.rm-screed-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .04);
    transition: transform .15s ease, box-shadow .15s ease;
}
.rm-screed-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, .08); }
.rm-screed-card__img-wrap {
    aspect-ratio: 4 / 3;
    background: #fff;                /* было #f7f7f7 — расходилось с телом карточки */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 22px 6px;
}
.rm-screed-card__img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rm-screed-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 18px 22px 22px;        /* сверху 18 вместо 4 — заголовок не липнет к картинке */
    text-align: center;
}
.rm-screed-card__title { font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
.rm-screed-card__badge {
    display: inline-flex;
    align-self: center;
    align-items: center;
    gap: 5px;
    font-size: .8rem;
    font-weight: 500;
    color: #1e9e4a;
    margin-bottom: 12px;
}
.rm-screed-card__badge::before { content: "✓"; font-weight: 700; }
.rm-screed-card__price { font-size: 1.1rem; font-weight: 700; color: var(--rm-accent); margin-bottom: 16px; }
.rm-screed-card__price span { font-size: 1.3rem; }
.rm-screed-card .btn { margin-top: auto; }

/* --- Таблица сравнения полусухой/мокрой стяжки --------------------------- */
.rm-compare-wrap {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .05);
    border: 1px solid #ececec;
}
.rm-compare-table { margin-bottom: 0; }
.rm-compare-table th, .rm-compare-table td { vertical-align: middle; padding: .85rem 1rem; }
.rm-compare-table thead th {
    background: var(--rm-accent);
    color: #fff;
    text-align: center;
    font-weight: 600;
    border-color: var(--rm-accent-hover);
}
.rm-compare-table tbody th { text-align: left; font-weight: 500; background: #fafafa; }
.rm-compare-table tbody td { text-align: center; }

/* --- Приглашение на замер: карточка с фото и встроенной формой ---------- */
.rm-measure {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .05);
    padding: 28px;
}
.rm-measure__img { width: 100%; height: auto; border-radius: 12px; object-fit: cover; }
.rm-measure__title { margin-bottom: 14px; }
.rm-measure__text { color: var(--bs-secondary-color); margin-bottom: 10px; }
.rm-measure__text:last-of-type { margin-bottom: 0; }
.rm-measure__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 19px;
    font-weight: 700;
    color: var(--rm-ink);
    text-decoration: none;
}
.rm-measure__phone:hover { color: var(--rm-accent); }
.rm-measure__phone svg { width: 19px; height: 19px; color: var(--rm-accent); }
.rm-measure__schedule { font-size: 13px; color: var(--bs-secondary-color); }

/* --- Объекты: карточки-локации с подписью поверх фото -------------------- */
.rm-loc-card {
    display: block;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .06);
    transition: transform .15s ease, box-shadow .15s ease;
    aspect-ratio: 4 / 3;
}
.rm-loc-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, .14); }
.rm-loc-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rm-loc-card__label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 12px 12px 10px;
    background: linear-gradient(0deg, rgba(0, 0, 0, .64), rgba(0, 0, 0, 0));
    color: #fff;
    font-weight: 600;
    font-size: .85rem;
    line-height: 1.25;
}

/* =========================================================================
   Третий срез главной (18.07.2026): портфолио, отзывы, о компании, FAQ,
   контакты+карта, футер, cookie-баннер. Тот же язык карточек, что и выше
   (белая карточка, border #ececec, radius 14px, тень 0 2px 14px, hover-lift).
   ========================================================================= */

/* --- Портфолио: карточка проекта с Bootstrap-каруселью фото ------------- */
.rm-portfolio-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .04);
    transition: transform .15s ease, box-shadow .15s ease;
}
.rm-portfolio-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, .08); }
.rm-portfolio-card__carousel .carousel-item img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #f0f0f0;
}
/* Стрелки: тёмная круглая подложка — дефолтные белые шевроны Bootstrap
   теряются на светлых фото объектов. */
.rm-portfolio-card__carousel .carousel-control-prev,
.rm-portfolio-card__carousel .carousel-control-next {
    width: 44px;
    opacity: 0;
    transition: opacity .15s ease;
}
.rm-portfolio-card__carousel:hover .carousel-control-prev,
.rm-portfolio-card__carousel:hover .carousel-control-next,
.rm-portfolio-card__carousel .carousel-control-prev:focus-visible,
.rm-portfolio-card__carousel .carousel-control-next:focus-visible { opacity: 1; }
.rm-portfolio-card__carousel .carousel-control-prev-icon,
.rm-portfolio-card__carousel .carousel-control-next-icon {
    width: 30px; height: 30px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .45);
    background-size: 16px;
    padding: 7px;
}
.rm-portfolio-card__carousel .carousel-indicators {
    margin-bottom: .6rem;
}
.rm-portfolio-card__carousel .carousel-indicators [data-bs-target] {
    width: 7px; height: 7px;
    border-radius: 50%;
    background-color: #fff;
    opacity: .55;
    border: 0;
    margin: 0 3px;
}
.rm-portfolio-card__carousel .carousel-indicators .active { opacity: 1; }
.rm-portfolio-card__body { padding: 18px 20px 20px; }
.rm-portfolio-card__title {
    display: block;
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--rm-ink);
    text-decoration: none;
    margin-bottom: 4px;
}
.rm-portfolio-card__title:hover { color: var(--rm-accent); }
.rm-portfolio-card__customer { color: var(--bs-secondary-color); font-size: .9rem; margin-bottom: 14px; }
.rm-portfolio-card__stats {
    display: flex;
    gap: 22px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
}
.rm-portfolio-card__stat-label { display: block; font-size: .75rem; color: var(--bs-secondary-color); }
.rm-portfolio-card__stat-value { display: block; font-weight: 700; color: var(--rm-ink); }

/* --- Отзывы: карточка с рейтингом-звёздами (жёлтый бренд) --------------- */
.rm-review {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 22px 22px 18px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .04);
    transition: transform .15s ease, box-shadow .15s ease;
}
.rm-review:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, .08); }
.rm-review__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.rm-review__author { font-weight: 600; color: var(--rm-ink); }
.rm-review__stars { color: var(--rm-yellow); text-shadow: 0 0 0 1px rgba(0,0,0,.12); letter-spacing: 1px; font-size: .95rem; }
.rm-review__text { color: var(--rm-ink); font-size: .93rem; line-height: 1.55; flex: 1 1 auto; margin-bottom: 12px; }
.rm-review__meta { font-size: .8rem; color: var(--bs-secondary-color); border-top: 1px solid #f0f0f0; padding-top: 10px; }
.rm-reviews__note { font-size: .9rem; color: var(--bs-secondary-color); }

/* --- О компании: фото директора + текст ---------------------------------- */
.rm-about__photo {
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .1);
    margin-bottom: 16px;
}
.rm-about__name { font-weight: 700; color: var(--rm-ink); }
.rm-about__role { font-size: .88rem; color: var(--bs-secondary-color); }
.rm-about p { color: var(--rm-ink); line-height: 1.65; margin-bottom: 14px; }
/* Задел под будущую сетку сотрудников (см. закомментированный пример в about-team-v2) */
.rm-team-card { text-align: center; }
.rm-team-card__photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; margin-bottom: 10px; }
.rm-team-card__name { font-weight: 600; font-size: .92rem; color: var(--rm-ink); }
.rm-team-card__role { font-size: .8rem; color: var(--bs-secondary-color); }

/* --- FAQ: accordion в фирменном стиле (плоские панели, жёлтый акцент) --- */
.rm-faq-accordion .accordion-item {
    border: 1px solid #ececec;
    border-radius: 14px !important;
    overflow: hidden;
    margin-bottom: 14px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .04);
}
.rm-faq-accordion .accordion-item:last-child { margin-bottom: 0; }
.rm-faq-accordion .accordion-button {
    font-weight: 600;
    color: var(--rm-ink);
    padding: 18px 22px;
    background: #fff;
}
.rm-faq-accordion .accordion-button:not(.collapsed) {
    color: var(--rm-accent);
    background: #fff;
    box-shadow: inset 0 -1px 0 #f0f0f0;
}
.rm-faq-accordion .accordion-button:focus { box-shadow: none; }
.rm-faq-accordion .accordion-button:focus-visible { box-shadow: 0 0 0 .2rem rgba(41, 72, 117, .18); }
/* Плюс/минус вместо дефолтного bootstrap-шеврона — крупнее, в акцентном цвете */
.rm-faq-accordion .accordion-button::after {
    width: 1.1rem; height: 1.1rem;
    background-size: 1.1rem;
    filter: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23294875' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M12 5v14M5 12h14'/%3e%3c/svg%3e");
}
.rm-faq-accordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23294875' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M5 12h14'/%3e%3c/svg%3e");
}
.rm-faq-accordion .accordion-body { padding: 4px 22px 22px; color: var(--rm-ink); line-height: 1.6; }

/* --- Контакты + карта ---------------------------------------------------- */
.rm-contact-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .05);
    padding: 30px 28px;
}
.rm-contact-card__phone {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 700;
    color: var(--rm-ink);
    text-decoration: none;
    margin-bottom: 16px;
}
.rm-contact-card__phone:hover { color: var(--rm-accent); }
.rm-contact-card__phone svg { width: 21px; height: 21px; color: var(--rm-accent); flex: 0 0 auto; }
.rm-contact-card__row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .95rem;
    color: var(--rm-ink);
    text-decoration: none;
    padding: 9px 0;
    border-top: 1px solid #f0f0f0;
}
.rm-contact-card__row svg { width: 19px; height: 19px; color: var(--rm-accent); flex: 0 0 auto; }
a.rm-contact-card__row:hover { color: var(--rm-accent); }
.rm-contact-card__row--hours span { line-height: 1.4; }

.ymap-lazy { position: relative; min-height: 340px; height: 100%; border-radius: 16px; overflow: hidden; }
.ymap-lazy iframe { border-radius: 16px; }
.ymap-lazy--stub {
    background-image: url("../images/map-stub.jpg");
    background-size: cover;
    background-position: center;
}
.ymap-stub {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 340px;
    height: 100%;
    padding: 24px;
    background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .75));
    text-align: center;
}
.ymap-stub p {
    max-width: 360px;
    margin: 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .92);
    font-size: 14px;
    line-height: 1.45;
    color: var(--rm-ink);
}
@media (max-width: 767.98px) {
    .ymap-lazy, .ymap-stub { min-height: 280px; }
}

/* --- Футер ---------------------------------------------------------------- */
/* display:flow-root — обязательно: первый потомок футера это .row с gy-4,
   у которого в Bootstrap margin-top: -1.5rem (компенсация gutter'а). У футера
   нет padding/border сверху, поэтому этот отрицательный margin СХЛОПЫВАЛСЯ
   наружу и тянул весь футер на 24px вверх — тёмная плашка наезжала на
   последний ряд ссылок перелинковки (.rm-geo). flow-root создаёт BFC и
   схлопывание margin'ов отключает. */
.rm-footer { background: var(--rm-accent-hover); color: rgba(255, 255, 255, .82); display: flow-root; }
.rm-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    font-size: .85rem;
    line-height: 1.35;
}
.rm-footer__logo img { border-radius: 8px; background: #fff; padding: 4px; }
.rm-footer__links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin: 0;
    padding: 0;
    justify-content: flex-start;
    font-size: .88rem;
}
@media (min-width: 768px) { .rm-footer__links { justify-content: flex-end; } }
.rm-footer__links a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.rm-footer__links a:hover { color: #fff; text-decoration: underline; }

/* --- Cookie-баннер (классы из modx/chunks/43_cookie-consent.html) ------- */
.rm-cookie {
    position: fixed;
    left: 16px; right: 16px; bottom: 16px;
    z-index: 1080;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 18px;
    max-width: 900px;
    margin: 0 auto;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .18);
}
.rm-cookie__text { flex: 1 1 320px; font-size: .88rem; line-height: 1.5; color: var(--rm-ink); margin: 0; }
.rm-cookie__text a { color: var(--rm-accent); }
.rm-cookie__buttons { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; }
.rm-cookie__btn {
    border: 0;
    border-radius: var(--bs-border-radius);
    padding: .6rem 1.3rem;
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
    cursor: pointer;
}
.rm-cookie__btn--accept {
    background: var(--rm-yellow);
    color: #000;
    box-shadow: 0 2px 10px rgba(228, 209, 3, .35);
}
.rm-cookie__btn--accept:hover { background: var(--rm-yellow-hover); }
.rm-cookie__btn--decline {
    background: #fff;
    color: var(--rm-accent);
    border: 1px solid var(--rm-accent);
}
.rm-cookie__btn--decline:hover { background: #f7f9fc; }
@media (max-width: 575.98px) {
    .rm-cookie { left: 10px; right: 10px; bottom: 10px; padding: 16px; }
    .rm-cookie__buttons { width: 100%; }
    .rm-cookie__btn { flex: 1 1 auto; }
}

/* --- О компании (текст) + Наша команда (сетка сотрудников) ------------- */
.rm-about-text { max-width: 820px; }
.rm-about-text p { line-height: 1.65; }
.rm-team-card { text-align: center; }
.rm-team-card__photo {
    width: 100%;
    aspect-ratio: 2 / 3;            /* книжная (вертикальная) — как оригинал 333×500 */
    object-fit: cover;
    object-position: center;        /* пропорция совпадает с фото → без обрезки */
    border-radius: 14px;
    margin-bottom: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}
.rm-team-card__name { font-weight: 600; line-height: 1.25; color: var(--rm-ink); }
.rm-team-card__role { font-size: .85rem; color: var(--rm-muted); }

/* --- Качественный слайдер (scroll-snap + стрелки, пара к rm-slider.js) --- */
.rm-slider__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.75rem;
}
.rm-slider__head .rm-h2-underline { margin-bottom: 0; }
.rm-slider__nav { display: flex; gap: .5rem; flex: 0 0 auto; }
.rm-slider__arrow {
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--rm-accent); background: #fff; color: var(--rm-accent);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}
.rm-slider__arrow:hover:not(:disabled) { background: var(--rm-accent); color: #fff; }
.rm-slider__arrow:disabled { opacity: .35; cursor: default; border-color: #cfd4da; color: #cfd4da; }
.rm-slider__arrow svg { width: 20px; height: 20px; }
.rm-slider__track {
    display: flex; gap: 1rem;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px;
}
.rm-slider__track::-webkit-scrollbar { display: none; }
.rm-slider__item { flex: 0 0 auto; scroll-snap-align: start; width: calc((100% - 3rem) / 4); }
@media (max-width: 991px) { .rm-slider__item { width: calc((100% - 1rem) / 2.2); } }
@media (max-width: 575px) { .rm-slider__item { width: 80%; } }

/* --- Теги (перелинковка): облако пилюль-ссылок ------------------------- */
.rm-tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.rm-tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: #f5f5f5;
    border: 1px solid transparent;
    border-radius: 20px;
    font-size: 14px;
    color: var(--rm-ink);
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.rm-tag:hover { background: #fff; border-color: var(--rm-accent); color: var(--rm-accent); }

/* --- Схема сотрудничества: нумерованные шаги --------------------------- */
.rm-step {
    display: flex; gap: 16px; align-items: flex-start; height: 100%;
    padding: 22px; background: #fff; border: 1px solid #ececec;
    border-radius: 14px; box-shadow: 0 2px 14px rgba(0, 0, 0, .04);
    transition: transform .15s ease, box-shadow .15s ease;
}
.rm-step:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, .08); }
.rm-step__num {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
    background: var(--rm-accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.1rem;
}
.rm-step__title { font-weight: 600; margin-bottom: 4px; }
.rm-step__text { font-size: .9rem; color: var(--rm-muted); line-height: 1.45; }

/* =========================================================================
   .rm-content — типографика richtext-контента внутренних страниц (page-v2).
   Добавлено 18.07.2026 (общий шаблон услуг/кейсов/статей, template id=1).

   Контент приходит из старого MODX/Webflow-редактора как есть (заголовки,
   абзацы, списки, таблицы, картинки), иногда с мёртвыми классами вида
   table-1 / w-richtext / w-container / _4em — их больше никто не стилизует
   (custom.css/rm-theme.css сюда не подключены), поэтому все правила ниже
   бьют по ТЕГАМ, а не по классам — читаемость не должна зависеть от того,
   какой класс достался странице от старого экспорта. На всю ширину
   .container (без искусственного max-width): в контенте вперемешку узкая
   проза и широкие блоки (таблицы, картинки) — сжимать всё в колонку чтения
   было бы неверно для таблиц сравнения. ========================================================================= */
.rm-content { font-size: 1.05rem; line-height: 1.7; color: var(--rm-ink); }

.rm-content > *:first-child { margin-top: 0; }
.rm-content > *:last-child { margin-bottom: 0; }

.rm-content h2 {
    position: relative;
    margin-top: 2.75rem; margin-bottom: 1.25rem;
    padding-bottom: 14px;
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
}
.rm-content h2::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 54px; height: 4px; border-radius: 2px; background: var(--rm-yellow);
}
.rm-content h3 {
    margin-top: 2.25rem; margin-bottom: 1rem;
    font-size: clamp(1.15rem, 1rem + .5vw, 1.35rem);
}
.rm-content h4, .rm-content h5, .rm-content h6 {
    margin-top: 1.75rem; margin-bottom: .75rem;
    font-weight: 600;
}
.rm-content h2:first-child, .rm-content h3:first-child { margin-top: 0; }

.rm-content p { margin-bottom: 1.25rem; }
.rm-content p:last-child { margin-bottom: 0; }

.rm-content ul, .rm-content ol { margin-bottom: 1.25rem; padding-left: 1.35rem; }
.rm-content li { margin-bottom: .5rem; line-height: 1.65; }
.rm-content li:last-child { margin-bottom: 0; }
.rm-content ul ul, .rm-content ul ol,
.rm-content ol ul, .rm-content ol ol { margin-top: .5rem; margin-bottom: 0; }
/* Старый Webflow-экспорт заворачивал текст пункта списка в <li><p>...</p></li> —
   без сброса это давало двойной вертикальный отступ на каждом пункте. */
.rm-content li > p { margin-bottom: 0; }
.rm-content li > p + p { margin-top: .5rem; }

/* Подчёркивание — только у ссылок в прозе. Компоненты внутри контента
   (пилюли .rm-tag, карточки .rm-loc-card/.rm-case-card, кнопки) подчёркивать
   не надо: у них своя форма, подчёркивание читается как артефакт. Отсюда
   :not([class*="rm-"]) — все наши блочные классы идут с этим префиксом. */
.rm-content a:not(.btn):not([class*="rm-"]) {
    color: var(--rm-accent);
    text-decoration: underline;
    text-decoration-color: rgba(41, 72, 117, .35);
    text-underline-offset: 2px;
}
.rm-content a:not(.btn):not([class*="rm-"]):hover { color: var(--rm-accent-hover); text-decoration-color: currentColor; }

.rm-content img {
    max-width: 100%; height: auto;
    border-radius: var(--bs-border-radius);
    display: block; margin: 1.5rem auto;
}
.rm-content figure { margin: 1.5rem 0; }
.rm-content figure img { margin: 0 auto; }
.rm-content figcaption {
    margin-top: .5rem; text-align: center;
    font-size: .875rem; color: var(--rm-muted);
}

.rm-content blockquote {
    margin: 1.75rem 0; padding: 1rem 1.5rem;
    border-left: 4px solid var(--rm-accent);
    background: #f5f5f5; border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
    color: var(--rm-muted); font-style: italic;
}
.rm-content blockquote p:last-child { margin-bottom: 0; }

/* Таблицы: прокрутку даёт ОБЁРТКА .table-wrap (её проставляет скрипт в page-v2
   всем незавёрнутым таблицам контента), а не сама таблица. Раньше здесь стоял
   display:block на <table> — тогда таблица сжималась по содержимому внутри
   полноширинной коробки и выглядела обрезанной (колонки не растягивались на
   ширину контента). display:table + width:100% возвращает нормальный расчёт
   колонок. */
.rm-content table {
    display: table; width: 100%; max-width: 100%;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
    font-size: .95rem;
}
/* Обёртка таблицы = карточка: скругление, рамка, тень. Один и тот же вид у
   всех таблиц контента — и у прайса (.rm-price-wrap), и у легаси-таблиц из
   старого экспорта, которые скрипт page-v2 заворачивает в .table-wrap. Раньше
   рамка была только у прайса, поэтому таблицы шли вперемешку: то скруглённые,
   то с острыми краями. */
.rm-content .table-wrap,
.rm-content .rm-price-wrap {
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    border-radius: 14px;
    border: 1px solid #ececec;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .05);
    margin-bottom: 2rem;
}
/* Рамку рисует обёртка — внешние границы крайних ячеек убираем, иначе на
   скруглённых углах видно обрубленный прямой угол ячейки. */
.rm-content .table-wrap > table,
.rm-content .rm-price-wrap > table { border: 0; }
.rm-content .table-wrap tr > *:first-child,
.rm-content .rm-price-wrap tr > *:first-child { border-left: 0; }
.rm-content .table-wrap tr > *:last-child,
.rm-content .rm-price-wrap tr > *:last-child { border-right: 0; }
.rm-content .table-wrap thead tr:first-child > *,
.rm-content .rm-price-wrap thead tr:first-child > * { border-top: 0; }
.rm-content .table-wrap tr:last-child > *,
.rm-content .rm-price-wrap tr:last-child > * { border-bottom: 0; }

/* Таблица за таблицей (на /tseny они идут подряд отдельными секциями) —
   между ними нужен воздух, иначе карточки слипаются в одну простыню. */
.rm-content > section.py-2 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.rm-content .table-wrap + .table-wrap,
.rm-content .rm-price-wrap + .table-wrap,
.rm-content .table-wrap + .rm-price-wrap,
.rm-content .rm-price-wrap + .rm-price-wrap { margin-top: 2rem; }
/* Подсказка «таблица прокручивается» — ставится скриптом page-v2 только тем
   таблицам, которые реально не влезли по ширине. */
.rm-table-hint {
    margin: -1rem 0 1.5rem; font-size: .8rem; color: var(--rm-muted); text-align: right;
}
.rm-content .table-wrap table { margin-bottom: 0; }
.rm-content th, .rm-content td {
    padding: .65rem 1rem;
    border: 1px solid #e5e5e5;
    text-align: left;
    vertical-align: top;
}
.rm-content th { background: #f5f5f5; font-weight: 600; }
.rm-content tbody tr:nth-child(even) { background: #fafafa; }

/* --- Статьи (шаблон article-v2) ---------------------------------------- */
/* Колонка чтения уже, чем у страниц услуг: на 1176px строка статьи получается
   ~140 знаков, это некомфортно. Таблицы и картинки внутри статьи при этом
   растягиваются на всю колонку — они и так узкие. */
.rm-article__head, article > .rm-content { max-width: 900px; }
.rm-article__meta { font-size: .85rem; color: var(--rm-muted); margin-bottom: 1rem; }
.rm-article__lead {
    font-size: 1.15rem; line-height: 1.65; color: var(--rm-muted);
    margin-bottom: 2rem; padding-left: 1rem; border-left: 3px solid var(--rm-yellow);
}

/* Webflow-контейнеры (class="w-container") совпадают по имени с BS-классом —
   сбрасываем только их, чтобы не мешать Bootstrap-.container v2-блоков. */
.rm-content .w-container {
    width: auto; max-width: none; padding-left: 0; padding-right: 0;
}

/* v2-блоки внутри контента — секции с фоном (bg-light и т.п.) должны идти
   на ВСЮ ширину экрана, как на главной, а не бокситься в контейнере контента
   («заливка обрезалась»). Секцию тянем на 100vw, внутренний .container снова
   центрируем к читаемой ширине.
   ВАЖНО: тянем на 100vw ТОЛЬКО секции со своим .container внутри. Секции без
   контейнера (например обёртки таблиц прайса в контенте /tseny) иначе уезжали
   содержимым в край экрана — «на всю ширину» вместо колонки чтения. */
.rm-content > section:has(> .container) {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
}
.rm-content > section > .container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
}
/* Страховка от горизонтального скролла из-за 100vw при наличии вертикальной полосы */
body { overflow-x: hidden; }

/* Единая ширина контента по всему сайту. Bootstrap-.container сам раздвигается
   на широких мониторах (1140px на xl, 1320px на xxl ≥1400px), из-за чего главная
   на большом экране была шире внутренних страниц и легаси-страниц (Webflow
   .w-container = 1140px). Фиксируем один максимум 1200px на всех десктопных
   ширинах — главная, сервисные и служебные страницы совпадают. */
@media (min-width: 1200px) {
    .container,
    .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
        max-width: 1200px;
    }
}

/* =========================================================================
   Недостающие v2-блоки сервисных страниц (price-table-v2/related-v2/form-v2).
   Добавлено 18.07.2026.
   ========================================================================= */

/* --- Таблица цен полусухой стяжки: высота слоя × площадь помещения ------- */
.rm-price-wrap {
    border-radius: 14px;
    /* overflow-x: auto, а НЕ hidden: обёртка идёт вместе с .table-responsive,
       и общий overflow:hidden убивал горизонтальную прокрутку — широкий
       прайс на мобильном просто обрезался по краю. Скругления по-прежнему
       обрезают содержимое (overflow != visible). */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .05);
    border: 1px solid #ececec;
}
.rm-price-table { margin-bottom: 0; }
.rm-price-table th, .rm-price-table td { vertical-align: middle; padding: .85rem 1rem; text-align: center; }
.rm-price-table thead th {
    background: var(--rm-accent);
    color: #fff;
    font-weight: 600;
    border-color: var(--rm-accent-hover);
}
.rm-price-table tbody th { text-align: left; font-weight: 600; }
.rm-price-table tbody td { font-weight: 500; color: var(--rm-ink); }
.rm-price-table tbody tr:nth-child(even) { background: #fafafa; }
/* На узком экране прайс не ужимаем до состояния, когда «от 671 руб» ломается
   в три строки: даём таблице её естественную ширину, а .rm-price-wrap выше
   прокручивает по горизонтали. */
@media (max-width: 575.98px) {
    .rm-price-table { min-width: max-content; }
    .rm-price-table th, .rm-price-table td { padding: .7rem .75rem; }
}

/* --- Перелинковка «Другие виды стяжки»: денежные ссылки под облаком тегов - */
.rm-related-v2__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* --- «Остались вопросы?»: инлайн-форма обратной связи -------------------- */
.rm-faqform {
    max-width: 640px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .05);
    padding: 32px;
}
@media (max-width: 575px) { .rm-faqform { padding: 22px; } }

/* Шапка таблиц в контенте: синий фон + белый текст (у чанка price была инлайн
   color:#fff на светлом фоне .rm-content th — нечитаемо). Делаем thead акцентным. */
.rm-content thead th { background: var(--rm-accent); color: #fff; border-color: var(--rm-accent); }
.rm-content thead th a { color: #fff; }

/* =========================================================================
   Липкая мобильная панель связи (rm-sticky, чанк sticky-v2). Сайт —
   лидогенератор: на длинной мобильной странице способ связаться должен быть
   всегда под рукой. На десктопе не нужна — телефон и CTA всегда в шапке.
   ========================================================================= */
.rm-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: flex; gap: 8px; padding: 8px 10px;
    background: #fff; border-top: 1px solid #e9e9e9;
    box-shadow: 0 -6px 22px rgba(0, 0, 0, .10);
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}
.rm-sticky__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 50px; padding: 0 14px; border-radius: var(--bs-border-radius, 10px);
    font-weight: 600; font-size: .95rem; line-height: 1; text-decoration: none;
    border: 1.5px solid transparent; white-space: nowrap;
}
.rm-sticky__btn--call {
    flex: 0 0 auto; background: #fff; color: var(--rm-accent, #294875);
    border-color: var(--rm-accent, #294875);
}
.rm-sticky__btn--wa { flex: 0 0 auto; background: #25D366; color: #fff; padding: 0 16px; font-size: 1.15rem; }
.rm-sticky__btn--lead { flex: 1 1 auto; background: #ffdd00; color: #1a1a1a; }
.rm-sticky__btn--lead:hover, .rm-sticky__btn--lead:active { background: #ffe94d; color: #1a1a1a; }
@media (min-width: 992px) { .rm-sticky { display: none !important; } }

/* =========================================================================
   Калькулятор стоимости (страница /kalkulyator, чанк calc). Мигрирован с
   легаси-стека на Bootstrap v2. Поля — обычные form-control/form-select;
   выделяем блок результата и строку-расшифровку.
   ========================================================================= */
.rm-calc { background: #fff; border: 1px solid #ececec; border-radius: 16px; padding: 28px 26px; box-shadow: 0 2px 14px rgba(0,0,0,.04); }
.rm-calc-result { margin-top: 4px; }
.rm-calc-result__label { font-weight: 600; margin-bottom: 6px; color: var(--rm-ink); }
.rm-calc-result__price {
    min-height: 60px; font-size: 1.5rem; font-weight: 700; color: var(--rm-accent);
    background: #fffbea; border: 1.5px solid var(--rm-yellow);
}
.rm-calc-result__price::placeholder { color: #b9b9b9; font-weight: 400; }
.rm-calc-detail { margin-top: 8px; font-size: .9rem; color: var(--rm-muted); line-height: 1.5; }
.rm-calc__cta { margin-top: 22px; text-align: center; }
.rm-calc__note { margin: 12px auto 0; max-width: 620px; font-size: .9rem; color: var(--rm-muted); }
@media (max-width: 575px) { .rm-calc { padding: 20px 16px; } }

/* Гео-перелинковка в футере — города Подмосковья (страницы styazhka-pola-v-<город>) */
.rm-geo { border-top: 1px solid #ececec; }
.rm-geo__title { font-weight: 600; color: var(--rm-ink); margin-bottom: 12px; }
.rm-geo__links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 0; margin: 0; }
.rm-geo__links a {
    display: inline-block; padding: 6px 14px; border: 1px solid #e2e2e2; border-radius: 999px;
    color: var(--rm-accent); text-decoration: none; font-size: .92rem; background: #fff; transition: all .15s ease;
}
.rm-geo__links a:hover { border-color: var(--rm-accent); background: var(--rm-accent); color: #fff; }

/* =========================================================================
   Портфолио/галерея v2 (страница /gallery — карточки кейсов; детальные
   страницы кейсов — сетка фото + лайтбокс rm-lightbox.js вместо fancybox).
   ========================================================================= */
.rm-case-card {
    display: block; height: 100%; text-decoration: none; color: inherit;
    background: #fff; border: 1px solid #ececec; border-radius: 14px; overflow: hidden;
    box-shadow: 0 2px 14px rgba(0,0,0,.04); transition: transform .15s ease, box-shadow .15s ease;
}
.rm-case-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.10); }
.rm-case-card__img { position: relative; aspect-ratio: 16/10; background: #f2f2f2; overflow: hidden; }
.rm-case-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rm-case-card__count {
    position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.65); color: #fff;
    font-size: .8rem; padding: 3px 10px; border-radius: 999px;
}
.rm-case-card__body { padding: 16px 18px 18px; }
.rm-case-card__title { font-weight: 600; color: var(--rm-ink); margin-bottom: 8px; line-height: 1.3; }
.rm-case-card__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .9rem; color: var(--rm-muted); }
.rm-case-card__meta b { color: var(--rm-ink); }

/* Сетка фото на детальной странице кейса */
.rm-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.rm-gallery a { display: block; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; background: #f2f2f2; }
.rm-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.rm-gallery a:hover img { transform: scale(1.04); }

/* Лайтбокс */
.rm-lb { position: fixed; inset: 0; z-index: 1090; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.9); padding: 40px; }
.rm-lb[aria-hidden="true"] { display: none; }
.rm-lb__fig { margin: 0; max-width: 92vw; max-height: 88vh; display: flex; }
.rm-lb__img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 6px; }
.rm-lb__close { position: absolute; top: 16px; right: 20px; background: none; border: none; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; }
.rm-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.12); border: none; color: #fff; width: 52px; height: 52px; border-radius: 50%; font-size: 30px; cursor: pointer; transition: background .15s; }
.rm-lb__nav:hover { background: rgba(255,255,255,.25); }
.rm-lb__prev { left: 18px; } .rm-lb__next { right: 18px; }
@media (max-width: 575px) { .rm-lb { padding: 12px; } .rm-lb__nav { width: 42px; height: 42px; font-size: 24px; } }

/* Факты на странице «О компании» */
.rm-fact { padding: 18px 12px; background: #fff; border: 1px solid #ececec; border-radius: 14px; height: 100%; box-shadow: 0 2px 14px rgba(0,0,0,.04); }
.rm-fact__n { font-size: 1.6rem; font-weight: 700; color: var(--rm-accent); line-height: 1.1; }
.rm-fact__t { font-size: .88rem; color: var(--rm-muted); margin-top: 6px; }

/* Cookie-баннер: компактнее на мобильном — чтобы не быть LCP-элементом и не
   перекрывать первый экран (по данным аудита он «перетягивал» LCP на главной). */
@media (max-width: 767.98px) {
    .rm-cookie { padding: 12px 14px; gap: 10px; border-radius: 12px; }
    .rm-cookie__text { font-size: .8rem; line-height: 1.4; }
    .rm-cookie__btn { min-height: 42px; padding: 8px 12px; font-size: .85rem; }
}

/* Заголовок: «в Москве и области» (span.sp в longtitle) переносим на отдельную
   строку на десктопе, чтобы длинный H1 смотрелся аккуратно в две строки.
   На мобильном оставляем естественный перенос по ширине. */
@media (min-width: 768px) {
    h1 .sp, .h1 .sp { display: block; }
}

/* Гео-страницы городов: аккуратный FAQ (не «портянка»), lead-абзац.
   Карточки «почему выбирают» переиспользуют .rm-adv (как на главной). */
.rm-geo-lead { max-width: 900px; }
.rm-faq-geo { max-width: 860px; }
.rm-faq-geo__item {
    padding: 16px 0; margin: 0; border-bottom: 1px solid #ececec; line-height: 1.6; color: var(--rm-muted);
}
.rm-faq-geo__item:last-child { border-bottom: none; }
.rm-faq-geo__item strong {
    display: block; margin-bottom: 6px; font-size: 1.05rem; font-weight: 600; color: var(--rm-ink);
}

/* Ссылки — без подчёркивания по всему сайту, только цвет (по просьбе заказчика). */
:root { --bs-link-decoration: none; }
a { text-decoration: none; }
a:hover { text-decoration: none; }

/* Гео-страницы v2: длинный SEO-текст внизу (менее акцентный) + блок видов стяжки */
.rm-geo-seo { border-top: 1px solid #ececec; }
.rm-geo-seo h2 { font-size: 1.25rem; }
.rm-geo-seo p { color: var(--rm-muted); line-height: 1.7; max-width: 900px; }
.rm-geo-types { border-top: 1px solid #ececec; }