/* =========================================================================
   ТВОЙ ДОМ — оформление сайта

   Палитра построена от логотипа: он нарисован тонкими линиями цвета
   #465207 и набран заглавными с широким трекингом. Раньше сайт этого
   не поддерживал — кнопки были дефолтного синего Bootstrap, иконки
   залитые, тени плотные, и логотип выглядел чужим на собственном сайте.
   Здесь всё сведено к его языку: оливковый как фирменный, тонкие линии,
   широкий трекинг в надзаголовках, мягкие тени.
   ========================================================================= */

:root {
    /* Фирменный — прямо из логотипа */
    --brand:        #465207;
    --brand-deep:   #333C05;
    --brand-mid:    #6B7A1F;
    --brand-pale:   #EFF2E3;
    --brand-wash:   #F7F9F0;

    /* Латунь — для цен и всего, на что должен упасть взгляд.
       Из той же природной гаммы, что оливковый, поэтому не спорит с ним. */
    --accent:       #A8792C;
    --accent-deep:  #8A6122;
    --accent-pale:  #FAF3E6;

    /* Нейтральные с лёгким оливковым уклоном — чистый серый рядом
       с #465207 выглядит грязным */
    --ink:          #1B1E12;
    --ink-mid:      #565C46;
    --ink-soft:     #858B74;
    --line:         #DFE3D2;
    --line-soft:    #ECEFE2;
    --surface:      #FFFFFF;
    --ground:       #FAFBF6;

    --shadow-sm: 0 1px 2px rgba(27, 30, 18, .06);
    --shadow-md: 0 4px 16px rgba(27, 30, 18, .08);
    --shadow-lg: 0 12px 32px rgba(27, 30, 18, .12);

    --radius:    14px;
    --radius-sm: 10px;
    --tracking:  .16em;

    /* Bootstrap рисует ссылки, фокус и часть компонентов по своим
       переменным — переопределяем, иначе синий полезет из щелей */
    --bs-primary:     #465207;
    --bs-primary-rgb: 70, 82, 7;
    --bs-link-color:  #465207;
    --bs-link-hover-color: #333C05;
    --bs-border-color: #DFE3D2;
    --bs-body-color:  #1B1E12;
}

* { -webkit-tap-highlight-color: transparent; }

body {
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    background-color: var(--surface);
    color: var(--ink);
    overflow-x: hidden;
}

::selection { background: var(--brand-pale); color: var(--brand-deep); }

a { color: var(--brand); }
a:hover { color: var(--brand-deep); }

:focus-visible {
    outline: 2px solid var(--brand-mid);
    outline-offset: 2px;
}

/* --- Надзаголовок: заглавные с трекингом, как в логотипе ------------------ */

.eyebrow {
    display: block;
    /* Было .72rem — 11,5 точки капсом с широкой разрядкой, то есть в самом
       трудном для чтения виде. На телефоне это первое, что видит человек. */
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    color: var(--brand-mid);
    margin-bottom: .6rem;
}

/* --- Навигация ------------------------------------------------------------ */

.navbar {
    background-color: var(--surface) !important;
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    padding-top: .9rem;
    padding-bottom: .9rem;
}
.navbar.scrolled { box-shadow: var(--shadow-sm); }

.navbar-brand img {
    transition: opacity .2s;
}
.navbar-brand:hover img { opacity: .75; }

.navbar-nav .nav-link {
    color: var(--ink) !important;
    font-weight: 500;
    font-size: .92rem;
    letter-spacing: .01em;
    padding: .5rem .9rem !important;
    border-radius: var(--radius-sm);
    transition: color .15s ease, background-color .15s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--brand) !important;
    background-color: var(--brand-pale);
}
.navbar-nav .nav-link.active {
    color: var(--brand) !important;
    background-color: var(--brand-pale);
    font-weight: 600;
}
.navbar-toggler { border-color: var(--line); }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23465207' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- Кнопки --------------------------------------------------------------- */

.btn {
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: var(--radius-sm);
    padding: .6rem 1.4rem;
    transition: background-color .18s ease, border-color .18s ease,
                transform .18s ease, box-shadow .18s ease;
}
.btn-lg { padding: .82rem 1.8rem; font-size: 1rem; }

.btn-primary {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--brand-deep) !important;
    border-color: var(--brand-deep) !important;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-outline-primary {
    color: var(--brand);
    border-color: var(--line);
    background: var(--surface);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.active {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* Кнопка-«латунь» для самого горячего действия */
.btn-accent {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.btn-accent:hover { background-color: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }

.btn-light {
    background: var(--surface);
    border-color: var(--surface);
    color: var(--brand);
}
.btn-light:hover { background: var(--brand-pale); color: var(--brand-deep); }

/* --- Заголовки секций ----------------------------------------------------- */

h1, h2, h3, h4, h5 { letter-spacing: -.015em; text-wrap: balance; }

.section-title {
    font-weight: 700;
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
}
.section-title::after {
    content: '';
    display: block;
    width: 44px;
    height: 2px;
    background: var(--brand);
    margin-top: 10px;
}

/* Чередование фона, чтобы страница не была плоской простынёй */
.band {
    background: var(--brand-wash);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    padding: 3.5rem 0;
    margin: 3.5rem 0;
}

/* --- Карточки ------------------------------------------------------------- */

.card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--brand-mid);
}
/* Кадр карточки держит пропорцию, а не фиксированную высоту.
   Было height:230px при ширине карточки 240 — почти квадрат, а фотографии
   домов сняты в 16:9. object-fit:cover вписывал широкий кадр в квадрат,
   срезая по бокам сорок процентов: у «Твой дом №1» и «№2» дом не помещался
   в карточку целиком.

   16:9 — ровно та пропорция, в которой сняты все главные фото, так что кадр
   виден полностью и без полей. contain, а не cover, на будущее: если однажды
   загрузят фотографию другой формы, по краям появятся аккуратные поля, а не
   обрезанный наполовину дом. */
.card-img-top {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: var(--brand-wash);
}
/* Приближение при наведении убрано: оно срезало края кадра, ради которых всё
   и затевалось. Карточка и так приподнимается — этого достаточно. */
.card > a { display: block; overflow: hidden; }

.card-title { font-weight: 600; font-size: 1.05rem; }

/* Бейджи на карточке — тонкие, без заливки во всю ширину */
.badge {
    font-weight: 600;
    letter-spacing: .04em;
    border-radius: 999px;
}
.badge.bg-warning {
    background: var(--accent-pale) !important;
    color: var(--accent-deep) !important;
    border: 1px solid rgba(168, 121, 44, .3);
}
.badge.bg-primary {
    background: var(--brand-pale) !important;
    color: var(--brand-deep) !important;
    border: 1px solid rgba(70, 82, 7, .25);
}

/* --- Иконки --------------------------------------------------------------- */

.feature-icon {
    font-size: 1.6rem;
    color: var(--brand);
    margin-right: 14px;
    width: 1.6rem;
    text-align: center;
}
.text-primary { color: var(--brand) !important; }
.bg-primary   { background-color: var(--brand) !important; }
.border-primary { border-color: var(--brand) !important; }

/* --- Первый экран --------------------------------------------------------- */

.hero {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: flex-end;
    padding: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--brand-deep);
    isolation: isolate;
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Затемнение снизу, чтобы текст читался на любой фотографии */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            to top,
            rgba(20, 24, 8, .93) 0%,
            rgba(20, 24, 8, .80) 34%,
            rgba(20, 24, 8, .38) 64%,
            rgba(20, 24, 8, .16) 100%
        ),
        linear-gradient(
            to right,
            rgba(20, 24, 8, .55) 0%,
            rgba(20, 24, 8, .15) 45%,
            rgba(20, 24, 8, 0) 75%
        );
}

.hero-inner {
    width: 100%;
    padding: 3rem 2.6rem 2.4rem;
    color: #fff;
}

.hero-title {
    margin: 0 0 14px;
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.025em;
    color: #fff;
}

.hero-lead {
    max-width: 54ch;
    margin: 0 0 28px;
    font-size: 1.08rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .88);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
}
.hero-actions .btn-primary {
    background: var(--accent);
    border-color: var(--accent);
}
.hero-actions .btn-primary:hover {
    background: var(--accent-deep) !important;
    border-color: var(--accent-deep) !important;
}
.hero-actions .btn-outline-primary {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
    backdrop-filter: blur(4px);
}
.hero-actions .btn-outline-primary:hover {
    background: #fff;
    border-color: #fff;
    color: var(--brand-deep);
}

.hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 30px;
    margin: 0;
    padding: 22px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .22);
    list-style: none;
    font-size: .9rem;
    color: rgba(255, 255, 255, .9);
}
.hero-facts li { display: flex; align-items: center; gap: 9px; }
.hero-facts i { color: var(--accent); font-size: .95rem; }

@media (max-width: 767.98px) {
    .hero { min-height: 480px; border-radius: var(--radius-sm); }
    .hero-inner { padding: 2rem 1.4rem 1.8rem; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; }
    .hero-facts { gap: 10px 0; flex-direction: column; font-size: .85rem; }
}

/* --- Полоса цифр ---------------------------------------------------------- */

.stats {
    display: grid;
    /* строго 4 колонки: при auto-fit неполный ряд оставлял пустую заливку */
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1.5rem 1.4rem;
    text-align: center;
}
.stat-n {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--brand);
    letter-spacing: -.03em;
}
.stat-l {
    font-size: .84rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: .55rem;
}

/* --- Характеристики в карточке каталога ----------------------------------- */

.house-specs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0 0 .8rem;
    padding: 0;
}
.house-specs li {
    font-size: .8rem;
    line-height: 1.2;
    color: var(--ink-mid);
    background: var(--brand-wash);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    padding: .24rem .62rem;
    white-space: nowrap;
}
.card:hover .house-specs li { border-color: var(--line); }

/* Цена в карточке — латунью, это то, что ищут глазами */
.card .price,
.card-text.fw-bold.text-primary,
.fw-bold.text-primary {
    color: var(--accent-deep) !important;
    font-size: 1.12rem;
    letter-spacing: -.01em;
}

/* --- Характеристики проекта по группам ------------------------------------ */

.spec-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.4rem 2.2rem;
    margin-bottom: 1rem;
}
.spec-group-title {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    color: var(--brand-mid);
    margin: 0 0 .6rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--line);
}
.spec-group ul { list-style: none; margin: 0; padding: 0; }
.spec-group li {
    position: relative;
    padding-left: 1rem;
    margin-bottom: .45rem;
    font-size: .92rem;
    line-height: 1.45;
    color: var(--ink-mid);
}
.spec-group li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand);
    opacity: .5;
}

/* --- Формы ---------------------------------------------------------------- */

.form-control, .form-select {
    border-color: var(--line);
    border-radius: var(--radius-sm);
    padding: .62rem .85rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-mid);
    box-shadow: 0 0 0 3px var(--brand-pale);
}
.form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}
.form-label { font-weight: 500; font-size: .9rem; color: var(--ink-mid); }

.mortgage-cta {
    background: var(--brand-wash);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1.1rem;
}

/* --- Плавающая кнопка ----------------------------------------------------- */

.floating-call-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background-color: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 6px 20px rgba(168, 121, 44, .38);
    z-index: 9999;
    cursor: pointer;
    border: none;
    transition: transform .2s, background-color .2s;
}
.floating-call-btn:hover {
    transform: scale(1.08);
    background-color: var(--accent-deep);
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .card:hover { transform: none; }
}

/* --- Подвал --------------------------------------------------------------- */

.site-footer {
    background: var(--brand-deep);
    color: rgba(255, 255, 255, .72);
    padding: 3.5rem 0 0;
    margin-top: 4rem;
    position: relative;
    overflow: hidden;
}

/* Контур дома из логотипа как фоновый мотив — тот самый способ
   «обыграть» логотип, не трогая его самого */
.site-footer::before {
    content: '';
    position: absolute;
    right: -60px;
    top: -40px;
    width: 340px;
    height: 340px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23ffffff' stroke-width='1.2'%3e%3cpath d='M10 46 L60 4 L110 46 L110 116 L10 116 Z'/%3e%3cpath d='M26 12 L26 116'/%3e%3cpath d='M84 34 L84 82'/%3e%3crect x='42' y='86' width='24' height='30'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .07;
    pointer-events: none;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 2.5rem;
    padding-bottom: 2.5rem;
}

.footer-logo img {
    height: 46px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .9;
    margin-bottom: 1rem;
}

.footer-about {
    font-size: .9rem;
    line-height: 1.6;
    max-width: 30ch;
}

.footer-title {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 1rem;
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-footer li { font-size: .92rem; }

/* Раньше ссылки подвала были высотой 18 точек — вдвое меньше рекомендованных
   44 для пальца. Отступы внутри ссылки увеличивают область нажатия, не
   раздвигая при этом сам список. */
.site-footer ul:not(.footer-contact) a {
    display: inline-block;
    padding: 7px 0;
    line-height: 1.35;
}

.site-footer a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    transition: color .15s ease;
}
.site-footer a:hover { color: #fff; }

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}
.footer-contact li { padding: 2px 0; }
.footer-contact .ic { margin-top: .28rem; }

.footer-phone {
    font-size: 1.2rem !important;
    font-weight: 600;
    color: #fff !important;
    letter-spacing: .01em;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .14);
    padding: 1.3rem 0 1.6rem;
    font-size: .82rem;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.6rem;
    align-items: center;
    justify-content: space-between;
    color: rgba(255, 255, 255, .55);
}
.footer-req {
    font-size: .82rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .5);
}
.footer-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: center; }
.footer-meta a { padding: 7px 0; }

/* Сноска про Instagram — отдельной строкой. Справа оставлен коридор под
   плавающую кнопку подбора: в общем ряду текст уезжал под неё. */
.footer-disclaimer {
    margin: 0;
    padding: 0 0 1.6rem;
    max-width: 62ch;
    font-size: .78rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .4);
}

/* Соцсети: круглые кнопки 44 точки — минимум для пальца */
.footer-social { display: flex; gap: .55rem; margin-top: 1.1rem; }
.footer-social a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 12px;
    color: rgba(255, 255, 255, .8);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.footer-social a:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .38);
    color: #fff;
}
.footer-social .ic { width: 1.15rem; height: 1.15rem; }

.footer-more { font-weight: 600; color: #fff !important; }

.footer-cta {
    margin-top: 1.1rem;
    width: 100%;
    max-width: 260px;
    min-height: 46px;
}

@media (max-width: 991.98px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 575.98px) {
    .site-footer { padding-top: 2.5rem; margin-top: 2.5rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 1.6rem; display: flex; flex-direction: column; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }

    /* На телефоне первым нужен телефон, а не список разделов */
    .footer-col-contact { order: 1; }
    .footer-col-nav     { order: 2; }
    .footer-col-brand   { order: 3; }

    .footer-cta { max-width: none; }
    .footer-about { max-width: none; }

    /* На телефоне ссылка должна попадать под палец с первого раза:
       44 точки — рекомендованный минимум, было 18. */
    .site-footer ul:not(.footer-contact) a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0;
    }
    .footer-meta a { min-height: 44px; display: inline-flex; align-items: center; }

    /* Телефон и почта — самые нужные ссылки подвала, им тоже полный размер */
    .footer-contact li { padding: 3px 0; }
    .footer-contact a { min-height: 44px; display: inline-flex; align-items: center; }

    /* Внизу висит своя панель навигации — последняя строка не должна под неё уезжать */
    .footer-disclaimer { padding-bottom: 0.6rem; }
}

/* На телефонах внизу висит своя панель навигации — освобождаем место */
@media (max-width: 767.98px) {
    body { padding-bottom: 68px; }
    .floating-call-btn { bottom: 84px; right: 18px; width: 54px; height: 54px; font-size: 22px; }
}

/* --- Логотип: домик из фирменного знака + набранная надпись --------------- */

.brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: 0;
}

.brand-mark {
    height: 44px;
    width: auto;
    display: block;
    transition: transform .25s ease;
}
.brand:hover .brand-mark { transform: translateY(-2px); }

.brand-name {
    display: flex;
    flex-direction: column;
    line-height: 1.08;
    font-weight: 600;
    font-size: .96rem;
    letter-spacing: .24em;   /* тот же широкий трекинг, что в логотипе */
    text-transform: uppercase;
    color: var(--brand);
    /* трекинг добавляет пустоту справа от последней буквы — убираем */
    text-indent: .24em;
}
.brand:hover .brand-name { color: var(--brand-deep); }

@media (max-width: 400px) {
    .brand-mark { height: 38px; }
    .brand-name { font-size: .84rem; letter-spacing: .2em; }
}

/* В подвале — тот же знак, только белый */
.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.1rem;
}
.footer-logo img {
    height: 52px;
    width: auto;
    filter: none;
    opacity: .95;
    margin: 0;
}
.footer-logo .brand-name {
    color: #fff;
    font-size: 1rem;
}

/* Надзаголовок внутри первого экрана — на фотографии оливковый
   не читается, нужен светлый */
.hero .eyebrow {
    color: rgba(255, 255, 255, .82);
    text-shadow: 0 1px 8px rgba(20, 24, 8, .5);
}

/* На телефоне четыре цифры в столбик занимали почти четыре экрана —
   ставим их в сетку 2×2 и ужимаем. */
@media (max-width: 575.98px) {
    .stats { grid-template-columns: 1fr 1fr; }
    .stat { padding: 1.1rem .8rem; }
    .stat-n { font-size: 1.6rem; }
    /* На телефоне было .68rem — 10,9 точки. Ниже 12 текст капсом уже не
       читается, а сокращать эти подписи некуда: это четыре главные цифры. */
    .stat-l { font-size: .78rem; letter-spacing: .04em; margin-top: .4rem; }
}

/* --- Формы на тёмной карточке --------------------------------------------- */
/* В контактах форма лежит на оливковой карточке, а подписи наследовали
   тёмный цвет — «Имя *» и «Телефон *» практически сливались с фоном. */

.bg-primary .form-label,
.bg-primary .form-check-label {
    color: rgba(255, 255, 255, .92);
    font-weight: 500;
}
.bg-primary .form-check-label a { color: #fff; text-decoration: underline; }
.bg-primary .form-check-label a:hover { color: var(--accent-pale); }

.bg-primary .form-control {
    background: rgba(255, 255, 255, .96);
    border-color: rgba(255, 255, 255, .3);
    color: var(--ink);
}
.bg-primary .form-control::placeholder { color: var(--ink-soft); }
.bg-primary .form-control:focus {
    background: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(168, 121, 44, .35);
}
.bg-primary .form-check-input {
    background-color: rgba(255, 255, 255, .9);
    border-color: rgba(255, 255, 255, .5);
}
.bg-primary .form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}
/* Кнопка отправки на тёмном — латунью, а не белым по белому */
.bg-primary .btn-light {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.bg-primary .btn-light:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }

/* Обрезаем только по горизонтали. Именно clip, а не hidden: hidden
   заставляет браузер включить вертикальную прокрутку внутри блока,
   и рядом с основным появляется второй ползунок. */
.page-wrap { overflow-x: clip; }

/* --- Эскроу: блок доверия ------------------------------------------------- */

.escrow {
    position: relative;
    background: var(--brand-deep);
    color: #fff;
    border-radius: var(--radius);
    padding: 3.2rem 2.8rem;
    margin-bottom: 3rem;
    overflow: hidden;
    isolation: isolate;
}

/* Контур дома из логотипа фоном — тихо связывает блок с брендом */
.escrow::before {
    content: '';
    position: absolute;
    right: -70px;
    bottom: -90px;
    width: 420px;
    height: 420px;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23ffffff' stroke-width='1'%3e%3cpath d='M10 46 L60 4 L110 46 L110 116 L10 116 Z'/%3e%3cpath d='M26 12 L26 116'/%3e%3cpath d='M84 34 L84 82'/%3e%3crect x='42' y='86' width='24' height='30'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .06;
    pointer-events: none;
}

.escrow .eyebrow { color: var(--accent); }

.escrow-title {
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    font-weight: 700;
    line-height: 1.14;
    margin: 0 0 1rem;
    color: #fff;
}

.escrow-lead {
    max-width: 56ch;
    margin: 0 0 2.6rem;
    font-size: 1.02rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .82);
}

.escrow-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 2rem;
    list-style: none;
    margin: 0 0 2.2rem;
    padding: 0;
    counter-reset: escrow;
}

.escrow-steps li {
    position: relative;
    padding-top: 3.4rem;
}

/* Линия, соединяющая шаги: сделка — это последовательность */
.escrow-steps li::after {
    content: '';
    position: absolute;
    top: 1.35rem;
    left: 3.4rem;
    right: -2rem;
    height: 1px;
    background: rgba(255, 255, 255, .18);
}
.escrow-steps li:last-child::after { display: none; }

.escrow-num {
    position: absolute;
    top: 0;
    left: 0;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    border: 1px solid var(--accent);
    color: var(--accent);
    display: grid;
    place-items: center;
    font-size: 1rem;
    font-weight: 700;
    background: var(--brand-deep);
}

.escrow-steps h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 .5rem;
    color: #fff;
}
.escrow-steps p {
    margin: 0;
    font-size: .93rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .74);
}

.escrow-note {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius-sm);
    padding: 1.1rem 1.3rem;
    margin-bottom: 2rem;
}
.escrow-note i {
    color: var(--accent);
    font-size: 1.2rem;
    margin-top: .15rem;
    flex: none;
}
.escrow-note p {
    margin: 0;
    font-size: .94rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
}
.escrow-note strong { color: #fff; }

.escrow-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.escrow-actions .btn-outline-light {
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
}
.escrow-actions .btn-outline-light:hover {
    background: #fff;
    border-color: #fff;
    color: var(--brand-deep);
}

@media (max-width: 767.98px) {
    .escrow { padding: 2.2rem 1.4rem; border-radius: var(--radius-sm); }
    .escrow-steps { gap: 1.6rem; }
    .escrow-steps li { padding-top: 0; padding-left: 3.5rem; min-height: 2.7rem; }
    .escrow-steps li::after { display: none; }
    .escrow-actions .btn { width: 100%; }
}

/* --- Шапка внутренней страницы -------------------------------------------- */

.page-head { margin-bottom: 2.5rem; }
.page-head h1 {
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    font-weight: 700;
    margin: 0 0 .7rem;
}
.page-lead {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ink-mid);
    max-width: 58ch;
    margin: 0;
}

/* --- Контакты ------------------------------------------------------------- */

.contact-card {
    background: var(--brand-wash);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2rem 1.8rem;
    height: 100%;
}

.contact-phone {
    display: block;
    font-size: clamp(1.5rem, 3vw, 1.95rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--brand-deep);
    text-decoration: none;
    margin-bottom: .3rem;
}
.contact-phone:hover { color: var(--accent-deep); }

.contact-hours {
    font-size: .88rem;
    color: var(--ink-soft);
    margin: 0 0 1.8rem;
}

.contact-list {
    list-style: none;
    margin: 0 0 1.8rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.contact-list li { display: flex; gap: .9rem; align-items: flex-start; }
.contact-list i {
    color: var(--brand-mid);
    font-size: 1.05rem;
    width: 1.2rem;
    text-align: center;
    margin-top: .2rem;
    flex: none;
}
.contact-list span { display: flex; flex-direction: column; gap: .15rem; font-size: .95rem; }
.contact-list strong {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    color: var(--ink-soft);
}
.contact-list a { color: var(--ink); text-decoration: none; }
.contact-list a:hover { color: var(--brand); }

/* --- Карта ---------------------------------------------------------------- */

.map-wrap {
    position: relative;
    height: 460px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
}
.map-wrap iframe { display: block; }

.map-badge {
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1.1rem 1.3rem;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: .2rem;
    max-width: 17rem;
}
.map-badge strong { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.map-badge > span:last-of-type { font-size: .88rem; color: var(--ink-soft); }
.map-link {
    margin-top: .6rem;
    font-size: .85rem;
    font-weight: 500;
    color: var(--brand);
    text-decoration: none;
}
.map-link:hover { color: var(--accent-deep); }
.map-link i { font-size: .72rem; margin-left: .2rem; }

@media (max-width: 575.98px) {
    .map-wrap { height: 340px; }
    .map-badge { left: .9rem; right: .9rem; bottom: .9rem; max-width: none; padding: .9rem 1rem; }
}

/* --- Плитки доверия ------------------------------------------------------- */

/* Раньше сетка рисовалась «через фон»: зазор 1px поверх цветной подложки.
   Когда последний ряд неполный, подложка просвечивала пустым
   прямоугольником. Теперь у каждой плитки своя рамка. */
.trust-grid {
    display: grid;
    /* Ровно три в ряд: шесть плиток ложатся двумя полными рядами,
       а не «пять и одна». */
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
/* На контактах плиток четыре — им нужен свой ритм */
.trust-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 991.98px) {
    .trust-grid, .trust-grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
    .trust-grid, .trust-grid--4 { grid-template-columns: 1fr; }
}

.trust-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1.7rem 1.5rem;
    transition: background-color .2s ease, border-color .2s ease;
}
.trust-item:hover { background: var(--brand-wash); border-color: var(--brand-mid); }
.trust-item i {
    font-size: 1.4rem;
    color: var(--brand-mid);
    margin-bottom: .9rem;
    display: block;
}
.trust-item h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 .45rem;
}
.trust-item p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--ink-mid);
}

/* --- Полоса призыва к действию -------------------------------------------- */

.cta-band {
    background: var(--brand-deep);
    color: #fff;
    border-radius: var(--radius);
    padding: 2.6rem 2.4rem;
    margin-bottom: 3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.8rem 2.5rem;
    align-items: center;
    justify-content: space-between;
}
.cta-band h2 {
    font-size: clamp(1.35rem, 2.6vw, 1.8rem);
    font-weight: 700;
    margin: 0 0 .5rem;
    color: #fff;
}
.cta-band p {
    margin: 0;
    max-width: 46ch;
    font-size: .96rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
}
.cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.cta-band .btn-outline-light {
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
}
.cta-band .btn-outline-light:hover {
    background: #fff; border-color: #fff; color: var(--brand-deep);
}

@media (max-width: 767.98px) {
    .cta-band { padding: 1.8rem 1.4rem; border-radius: var(--radius-sm); }
    .cta-actions { width: 100%; }
    .cta-actions .btn { width: 100%; }
}

/* Короткий блок про эскроу на странице проекта */
.escrow-inline {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--brand-wash);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 1.1rem 1.3rem;
    margin-top: 1.4rem;
}
.escrow-inline > i {
    color: var(--accent);
    font-size: 1.3rem;
    margin-top: .15rem;
    flex: none;
}
.escrow-inline strong {
    display: block;
    font-size: .98rem;
    margin-bottom: .35rem;
    color: var(--ink);
}
.escrow-inline p {
    margin: 0 0 .5rem;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--ink-mid);
}
.escrow-inline a {
    font-size: .87rem;
    font-weight: 500;
    color: var(--brand);
    text-decoration: none;
}
.escrow-inline a:hover { color: var(--accent-deep); text-decoration: underline; }

/* --- Появление блоков при прокрутке --------------------------------------- */
/* Заменило библиотеку AOS: 40 КБ стилей и скрипта ради одного эффекта. */

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .45s ease-out, transform .45s ease-out;
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Без скрипта блоки просто видны — не пустая страница */
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}


/* Полоса цифр: на планшете 4 колонки становятся тесными */
@media (max-width: 991.98px) {
    .stats { grid-template-columns: 1fr 1fr; }
}

/* --- Окно «Как устроен расчёт через эскроу» ------------------------------- */

/* Ссылка, которая на самом деле кнопка: открывает окно, а не уводит
   со страницы проекта. */
.link-button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: .87rem;
    font-weight: 500;
    color: var(--brand);
    cursor: pointer;
    text-decoration: none;
}
.link-button:hover { color: var(--accent-deep); text-decoration: underline; }

.escrow-modal .modal-content {
    border: 0;
    border-radius: var(--radius);
    overflow: hidden;
}
.escrow-modal .modal-header {
    background: var(--brand-deep);
    color: #fff;
    border-bottom: 0;
    padding: 1.6rem 1.8rem 1.4rem;
    align-items: flex-start;
}
.escrow-modal .modal-header .eyebrow { color: var(--accent); margin-bottom: .35rem; }
.escrow-modal .modal-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.escrow-modal .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: .7;
}
.escrow-modal .btn-close:hover { opacity: 1; }

.escrow-modal .modal-body { padding: 1.6rem 1.8rem; }

.escrow-modal-lead {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink-mid);
    margin: 0 0 1.6rem;
}

.escrow-modal-steps {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.escrow-modal-steps li { display: flex; gap: 1rem; align-items: flex-start; }
.escrow-modal-steps .escrow-num {
    position: static;
    flex: none;
    width: 2.2rem;
    height: 2.2rem;
    background: var(--brand-pale);
    border-color: var(--brand-mid);
    color: var(--brand);
    font-size: .92rem;
}
.escrow-modal-steps h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 .3rem;
    color: var(--ink);
}
.escrow-modal-steps p {
    margin: 0;
    font-size: .93rem;
    line-height: 1.55;
    color: var(--ink-mid);
}

.escrow-modal-note {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    background: var(--accent-pale);
    border: 1px solid rgba(168, 121, 44, .28);
    border-radius: var(--radius-sm);
    padding: 1rem 1.2rem;
}
.escrow-modal-note i { color: var(--accent-deep); font-size: 1.15rem; margin-top: .1rem; flex: none; }
.escrow-modal-note p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--ink-mid); }
.escrow-modal-note strong { color: var(--ink); }

.escrow-modal .modal-footer {
    border-top: 1px solid var(--line);
    padding: 1.1rem 1.8rem;
    gap: .6rem;
}

@media (max-width: 575.98px) {
    .escrow-modal .modal-header { padding: 1.2rem 1.2rem 1rem; }
    .escrow-modal .modal-body   { padding: 1.2rem; }
    .escrow-modal .modal-footer { padding: 1rem 1.2rem; flex-direction: column-reverse; }
    .escrow-modal .modal-footer .btn { width: 100%; }
}

/* Активный пункт меню: раньше класс .active в разметке не проставлялся,
   и все страницы выглядели одинаково. */
.navbar-nav .nav-link.active {
    position: relative;
    color: var(--brand) !important;
    background: transparent;
    font-weight: 600;
}
.navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    left: .9rem;
    right: .9rem;
    bottom: .05rem;
    height: 2px;
    background: var(--brand);
    border-radius: 2px;
}
.navbar-nav .nav-link.active:hover { background: var(--brand-pale); }

/* --- Слайдер «Готовые дома» -------------------------------------------------
   Было: width:100% + max-height:400px + object-fit:cover. Картинка шириной
   1600 в блоке шириной 1140 хочет быть высотой 640, max-height режет её до
   400 — и cover срезал треть кадра, чаще всего крышу или землю под домом.

   Стало: блок держит пропорцию 16:9 — ровно ту, в которой сняты фотографии,
   поэтому кадр виден целиком. Ширину ограничиваем, чтобы на широком мониторе
   слайдер не занимал весь экран по высоте.                                   */

.ready-carousel {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.ready-carousel .carousel-item {
    aspect-ratio: 16 / 9;
}

.ready-carousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Стрелки поверх светлого неба теряются — подкладываем под них затемнение */
.ready-carousel .carousel-control-prev,
.ready-carousel .carousel-control-next { width: 12%; }

.ready-carousel .carousel-control-prev-icon,
.ready-carousel .carousel-control-next-icon {
    width: 44px;
    height: 44px;
    padding: 12px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .35);
    background-size: 45%;
}

/* Пропорция одна на всех экранах: на телефоне 4:3 казалось «солиднее», но
   срезало четверть широкого кадра — ровно та беда, от которой уходили. */

/* --- Сетка популярных проектов ---------------------------------------------
   Проектов может быть сколько угодно, а в ряд помещается четыре. Пятый уходит
   на вторую строку один — justify-content-center ставит его по центру, иначе
   он прижимается к левому краю и выглядит как сбой вёрстки.
   На полной строке центрирование ничего не меняет.                           */

/* --- Сетка карточек проектов ------------------------------------------------
   Раньше стояли колонки бутстрапа: на главной по четыре в ряд, в каталоге по
   три. Пятый проект уезжал на вторую строку и висел там один.

   auto-fill сам считает, сколько карточек шириной от 228 точек помещается в
   контейнер: на широком мониторе (контейнер 1320) это пять — весь ряд целиком,
   на ноутбуке четыре, на планшете две, на телефоне одна.

   Именно auto-fill, а не auto-fit: при auto-fit пустые колонки схлопываются, и
   два проекта растянулись бы на пол-экрана каждый.                            */

.house-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
    gap: 22px;
    margin-bottom: 8px;
}

.house-grid-empty { grid-column: 1 / -1; }

/* Карточка тянется на всю высоту ячейки, чтобы кнопки «Подробнее» в ряду
   стояли на одной линии независимо от длины названия */
.house-grid > * { display: flex; }
.house-grid > * > .card { width: 100%; }

/* На узком телефоне 228 точек уже больше половины экрана — колонка одна,
   и минимум только мешает */
@media (max-width: 400px) {
    .house-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* --- Метки «Эскроу» и «Фикс. цена» на карточке ------------------------------
   Раньше это были бейджи бутстрапа с размерами прямо в атрибуте style. Когда
   в ряд встало пять карточек вместо четырёх, две метки перестали помещаться
   в строку и вставали друг под друга, закрывая половину фотографии.

   Здесь они компактнее и переносятся сами, только если места правда нет.     */

.card-flags {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.card-flag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    /* Фотографии бывают и светлые, и тёмные — тень держит метку читаемой */
    box-shadow: 0 2px 8px rgba(22, 24, 15, .18);
}

.card-flag i { font-size: .8em; }

.card-flag-escrow { background: #F5E6C8; color: #6B4E12; }
.card-flag-price  { background: #E4EDD2; color: #3D5215; }

/* --- Галерея на странице проекта --------------------------------------------
   Было height:400px + object-fit:cover прямо в атрибуте style. На телефоне
   колонка шириной 366 точек: широкий кадр 16:9 хочет высоту 206, его тянули
   до 400 и срезали почти половину ширины — дом не помещался в экран целиком.
   Ровно та жалоба, с которой пришёл клиент.

   Пропорция вместо высоты: кадр виден полностью. contain на случай снимков
   другой формы — лучше поля по краям, чем срезанный дом.                     */

.house-gallery .carousel-item {
    aspect-ratio: 16 / 9;
    background: var(--brand-wash);
}

.house-gallery .carousel-item a,
.house-gallery .carousel-item img {
    display: block;
    width: 100%;
    height: 100%;
}

.house-gallery .carousel-item img { object-fit: contain; }

.house-gallery .carousel-control-prev-icon,
.house-gallery .carousel-control-next-icon {
    width: 44px;
    height: 44px;
    padding: 12px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .38);
    background-size: 45%;
}

/* Превью под галереей. Размеры были в style, поэтому на телефоне не менялись:
   восемь снимков занимали три ряда и отжимали цену с кнопкой за экран. */
.thumbnail-img {
    width: 80px;
    height: 45px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .2s ease;
}

@media (max-width: 575.98px) {
    .thumbnail-img { width: 64px; height: 36px; }
}

.thumbnail-img.active {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--brand-pale);
}

/* --- Первый экран на телефоне -----------------------------------------------
   Раньше фотография лежала фоном под текстом: блок высотой 480 точек при
   ширине 366 — почти портрет, а снимки сняты вдвое шире. От дома оставалась
   вертикальная полоска, 29 процентов кадра. Человек, пришедший с рекламы,
   первым делом видел кусок стены и не понимал, что ему показывают.

   На телефоне раскладываем в столбик: сверху фотография целиком, под ней
   текст на фирменном фоне. Заголовок от этого читается лучше — он больше не
   лежит на светлом небе.                                                     */

@media (max-width: 767.98px) {
    .hero {
        display: block;
        min-height: 0;
        background: var(--brand-deep);
    }

    /* Затемнение нужно было только под текстом поверх фото */
    .hero::after { display: none; }

    .hero-media {
        position: static;
        z-index: auto;
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .hero-inner { padding: 1.6rem 1.3rem 1.9rem; }
}

/* --- Банки-партнёры ------------------------------------------------------- */

.banks {
    background: var(--brand-wash);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2.6rem 2.4rem;
    margin-bottom: 3rem;
}
.banks-head { max-width: 46rem; margin-bottom: 1.8rem; }
.banks-head .section-title { margin-bottom: .8rem; }

.lead-soft {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink-mid);
    margin: 0 0 .6rem;
    max-width: 60ch;
}

.banks-list {
    list-style: none;
    margin: 0 0 1.8rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
}
.bank {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1.1rem 1.3rem;
    transition: border-color .2s ease, transform .2s ease;
}
.bank:hover { border-color: var(--brand-mid); transform: translateY(-2px); }
.bank-mark {
    width: 2.4rem;
    height: 2.4rem;
    flex: none;
    color: var(--brand-mid);
}
.bank-mark svg { width: 100%; height: 100%; display: block; }
.bank-name { font-weight: 600; font-size: 1rem; color: var(--ink); }

.banks-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Блок «так это выглядит вживую» */
.ready-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }

@media (max-width: 575.98px) {
    .banks { padding: 1.8rem 1.3rem; border-radius: var(--radius-sm); }
    .banks-actions .btn, .ready-actions .btn { width: 100%; }
}

/* --- Свои значки ---------------------------------------------------------- */
/* Линейные, той же толщины что логотип. Заменили Font Awesome:
   277 КБ шрифтов ради двух десятков картинок, и рисунок залитый. */

.ic {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    vertical-align: -.18em;
    color: inherit;
}
.ic.me-1 { margin-right: .3rem; }
.ic.me-2 { margin-right: .5rem; }
.ic.ms-1 { margin-left: .3rem; }

.hero-facts .ic { width: 1.05rem; height: 1.05rem; color: var(--accent); }
.trust-item .ic { width: 1.5rem; height: 1.5rem; color: var(--brand-mid); margin-bottom: .9rem; display: block; }
.contact-list .ic { width: 1.15rem; height: 1.15rem; color: var(--brand-mid); }
.feature-icon.ic { width: 1.6rem; height: 1.6rem; color: var(--brand); }
.card-flag .ic { width: .95rem; height: .95rem; }
.escrow-note .ic, .escrow-inline > .ic { width: 1.25rem; height: 1.25rem; }
.mnav-item .ic, .mnav-sheet-link .ic { width: 1.35rem; height: 1.35rem; }
.footer-contact .ic { width: 1rem; height: 1rem; color: var(--accent); }
.ic-2x { width: 2rem; height: 2rem; }

/* --- Почему выбирают нас -------------------------------------------------- */
/* Раньше половина пунктов имела класс крупного значка, половина нет —
   размеры и отступы разъезжались. Теперь одна сетка на все. */

.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1.6rem 2.2rem;
    margin-bottom: 1.8rem;
}
.why-item { display: flex; gap: 1rem; align-items: flex-start; }
.why-item > .ic {
    width: 1.7rem;
    height: 1.7rem;
    flex: none;
    color: var(--brand-mid);
    margin-top: .15rem;
}
.why-item strong {
    display: block;
    font-size: 1.02rem;
    font-weight: 600;
    margin-bottom: .3rem;
    color: var(--ink);
}
.why-item p {
    margin: 0;
    font-size: .93rem;
    line-height: 1.55;
    color: var(--ink-mid);
}
.why-more { display: flex; justify-content: center; }

/* --- Из чего мы строим ---------------------------------------------------- */

.materials {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2.2rem 2rem;
    margin-bottom: 3rem;
}
.materials-list {
    list-style: none;
    margin: 0 0 1.4rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1.6rem 1.4rem;
}
.materials-list li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
}
.materials-list .ic {
    width: 1.9rem;
    height: 1.9rem;
    color: var(--brand-mid);
    margin-bottom: .55rem;
}
.materials-name { font-weight: 600; font-size: .97rem; color: var(--ink); }
.materials-note { font-size: .85rem; color: var(--ink-soft); line-height: 1.4; }

.materials-foot {
    margin: 0;
    padding-top: 1.3rem;
    border-top: 1px solid var(--line-soft);
    font-size: .9rem;
    color: var(--ink-soft);
}
.materials-foot a { margin-left: .3rem; font-weight: 500; }

@media (max-width: 575.98px) {
    .materials { padding: 1.5rem 1.2rem; border-radius: var(--radius-sm); }
    .materials-list { grid-template-columns: 1fr 1fr; gap: 1.3rem 1rem; }
    .why-more .btn { width: 100%; }
}

/* Банки внутри блока про сделку. Эскроу-счёт открывается в банке —
   разговор один, поэтому и плашка одна. */
.escrow-banks {
    border-top: 1px solid rgba(255, 255, 255, .18);
    padding-top: 1.4rem;
    margin-bottom: 1.8rem;
}
.escrow-banks-label {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin-bottom: .9rem;
}
.escrow-banks-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
}
.escrow-banks-list li {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    padding: .5rem 1.1rem .5rem .85rem;
    font-size: .93rem;
    font-weight: 500;
    color: #fff;
}
.escrow-banks-list .ic { width: 1.15rem; height: 1.15rem; color: var(--accent); }
/* Когда появятся официальные файлы логотипов — сюда, вместо значка */
.escrow-banks-list img { height: 1.3rem; width: auto; display: block; }

@media (max-width: 575.98px) {
    .escrow-banks-list li { flex: 1 1 auto; justify-content: center; }
}

/* Заголовок первого экрана на узком экране: длинное слово
   «Екатеринбурге» вылезало за край. */
.hero-title {
    overflow-wrap: break-word;
    hyphens: auto;
}
@media (max-width: 420px) {
    .hero-title { font-size: clamp(1.6rem, 8vw, 2.1rem); }
}

/* Официальные логотипы банков. Высота выровнена по оптике, а не по числу:
   у знаков разные пропорции, поэтому Дом.РФ чуть ниже остальных. */
.escrow-banks-list li,
.banks-list .bank {
    background: #fff;
    border-radius: 8px;
    padding: .7rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.2rem;
}
.escrow-banks-list li { border: 0; }
.escrow-banks-list img { height: 1.5rem; width: auto; display: block; }
.escrow-banks-list img[alt="Дом.РФ"] { height: 1.15rem; }
.banks-list .bank img { height: 1.7rem; width: auto; display: block; }
.banks-list .bank img[alt="Дом.РФ"] { height: 1.55rem; }
/* Логотипы из панели: высоту задаёт поле «Высота логотипа» у банка,
   потому что знаки у банков разной пропорции и по одной высоте
   выглядят разнокалиберно. Инлайновый style перебивает правило выше. */

@media (max-width: 575.98px) {
    .escrow-banks-list li { flex: 1 1 8rem; padding: .6rem .8rem; }
    .escrow-banks-list img { height: 1.25rem; }
    .escrow-banks-list img[alt="Дом.РФ"] { height: 1rem; }
}

/* --- Ссылка на калькулятор рядом с ценой ------------------------------------
   Цена — главное возражение в этой нише, а калькулятор ипотеки стоял в
   стороне: попасть в него из карточки дома было нельзя.                       */

.house-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.8rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--line);
}
.house-actions .btn { min-height: 52px; display: inline-flex; align-items: center; }
.house-actions .btn-lg { flex: 1 1 220px; justify-content: center; }

/* --- Заявка в конце каталога ------------------------------------------------
   Сюда ведёт главная кнопка первого экрана и приходит весь товарный трафик
   из рекламы. Оставить номер было негде — только плавающая кнопка подбора.   */

.catalog-cta {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2rem;
    align-items: center;
    margin: 3rem 0 1rem;
    padding: 2.2rem 2.4rem;
    border-radius: var(--radius);
    background: var(--brand-wash);
    border: 1px solid var(--line);
}

.catalog-cta h2 {
    margin: 0 0 .6rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--brand-deep);
}
.catalog-cta p { margin: 0; color: var(--ink-mid); max-width: 46ch; }

.catalog-cta-actions { display: flex; flex-direction: column; gap: .7rem; }
.catalog-cta-actions .btn { min-height: 52px; }

.catalog-cta-phone {
    text-align: center;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--brand-deep);
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.catalog-cta-phone:hover { color: var(--accent-deep); }

@media (max-width: 767.98px) {
    .catalog-cta {
        grid-template-columns: 1fr;
        gap: 1.4rem;
        padding: 1.6rem 1.3rem;
        margin: 2rem 0 .5rem;
    }
    .catalog-cta h2 { font-size: 1.25rem; }
}

/* --- Довод на первом экране -------------------------------------------------
   Вместо списка из четырёх фактов, который дословно повторялся полосой цифр
   сразу ниже. Оставлен один — тот, что отвечает на главный страх покупателя. */

.hero-trust {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 1.4rem 0 0;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, .22);
    font-size: .93rem;
    line-height: 1.5;
    max-width: 46ch;
}
.hero-trust .ic { width: 1.15rem; height: 1.15rem; color: var(--accent); flex: none; margin-top: .15rem; }

.privacy-back {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 2.2rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--line);
}
.privacy-back .btn { min-height: 46px; display: inline-flex; align-items: center; }

/* Подпись под кнопкой отправки заявки: обещание времени ответа должно стоять
   там, где человек решается нажать, а не только на странице контактов. */
.call-form-note {
    margin: .7rem 0 0;
    font-size: .82rem;
    line-height: 1.45;
    text-align: center;
    color: rgba(255, 255, 255, .72);
}

/* Характеристики на странице проекта: раньше здесь была одна строка
   «Тип: Типовые проекты», то есть повтор категории из фильтра. */
.house-specs-list li {
    display: flex;
    align-items: baseline;
    gap: .1rem;
    padding: .35rem 0;
    border-bottom: 1px solid var(--line-soft);
}
.house-specs-list li:last-child { border-bottom: none; }
.house-specs-list strong { font-weight: 600; margin-right: .35rem; }

.type-filter { display: flex; flex-wrap: wrap; gap: .5rem; }
.type-filter .btn { min-height: 44px; display: inline-flex; align-items: center; }

/* Ссылка к калькулятору из блока банков на главной. На самой странице
   ипотеки такая кнопка вела на эту же страницу — теперь там якорь к форме. */
.escrow-banks-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    margin-top: .9rem;
    font-size: .95rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
}
.escrow-banks-link:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .7); }
.escrow-banks-link .ic { width: 1.05rem; height: 1.05rem; color: var(--accent); }

/* Прокрутка к якорю не должна прятать заголовок под липкой шапкой */
#mortgageCalc { scroll-margin-top: 90px; }

/* Кнопки под ценой на странице проекта. Раньше здесь была скромная текстовая
   ссылка на калькулятор, а кнопка заявки стояла в самом низу длинной страницы. */
.price-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.1rem;
}
.price-actions .btn { min-height: 52px; display: inline-flex; align-items: center; }
.price-actions .btn-lg { flex: 1 1 220px; justify-content: center; }

.price-actions-note {
    margin: .65rem 0 0;
    font-size: .85rem;
    color: var(--ink-soft);
}

@media (max-width: 400px) {
    .price-actions .btn-lg { flex-basis: 100%; }
}

/* --- Фильтры каталога --------------------------------------------------------
   Каталог сужался только по типу дома, а тип на сайте один — фильтр не делал
   ничего. Площадь, этажность и цена — то, чем человек с рекламы сужает выбор
   в первую очередь. Адреса вида ?area=do100&floors=1 годятся как посадочные. */

.cat-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.4rem 2rem;
    margin: 0 0 1.4rem;
    padding: 1.1rem 1.3rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.cat-filter { display: flex; flex-direction: column; gap: .55rem; }

.cat-filter-title {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    color: var(--ink-soft);
}

.cat-filter-buttons { display: flex; flex-wrap: wrap; gap: .45rem; }

.chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-size: .9rem;
    color: var(--ink-mid);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.chip:hover { border-color: var(--brand-mid); color: var(--brand-deep); }

.chip-on {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    font-weight: 600;
}
.chip-on:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }

.cat-filter-reset {
    align-self: flex-end;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: .88rem;
    color: var(--accent-deep);
    text-decoration: none;
    border-bottom: 1px dashed var(--accent);
}
.cat-filter-reset:hover { color: var(--ink); border-bottom-color: var(--ink); }

.cat-count {
    margin: 0 0 1.2rem;
    font-size: .92rem;
    color: var(--ink-soft);
}

/* Пустая выборка была тупиком: «В этой категории пока нет домов» и всё */
.cat-empty {
    padding: 2rem 1.6rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: var(--brand-wash);
    text-align: center;
}
.cat-empty h3 { margin: 0 0 .6rem; font-size: 1.2rem; font-weight: 600; color: var(--brand-deep); }
.cat-empty p { margin: 0 auto 1.2rem; max-width: 46ch; color: var(--ink-mid); }
.cat-empty-actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.cat-empty-actions .btn { min-height: 48px; display: inline-flex; align-items: center; }

@media (max-width: 575.98px) {
    .cat-filters { gap: 1rem 1.2rem; padding: 1rem; }
    .cat-filter { width: 100%; }
}

/* --- Посадочные страницы под группы запросов --------------------------------
   Заголовок объявления и заголовок страницы должны совпадать: человек,
   искавший «одноэтажный дом из газобетона», должен увидеть эти слова сразу. */

.landing-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.landing-actions .btn { min-height: 52px; display: inline-flex; align-items: center; }

.landing-points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.2rem;
    margin: 2.4rem 0 3rem;
}

.landing-point {
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}
.landing-point h2 {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--brand-deep);
}
.landing-point p { margin: 0; font-size: .93rem; color: var(--ink-mid); }

.landing-more { margin: 1.4rem 0 0; }
.landing-more a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
}
.landing-more a:hover { color: var(--brand-deep); }

/* --- Отзывы -----------------------------------------------------------------
   На сайте не было ни одного отзыва при обещании «более 150 сданных
   объектов» — самая заметная дыра в доверии. Блок появляется только когда
   есть хотя бы один опубликованный отзыв.                                    */

.reviews { margin: 3.5rem 0; }

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.2rem;
    margin-top: 1.4rem;
}

.review {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.review-stars { display: flex; gap: .2rem; margin-bottom: .9rem; }
.review-stars .ic { width: 1rem; height: 1rem; color: var(--accent); }

.review-text {
    flex: 1 1 auto;
    margin: 0 0 1.2rem;
    font-size: .95rem;
    line-height: 1.65;
    color: var(--ink);
}

.review-who {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line-soft);
}
.review-who img {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
}
.review-who span { display: flex; flex-direction: column; min-width: 0; }
.review-who b { font-weight: 600; font-size: .95rem; }
.review-who em { font-style: normal; font-size: .83rem; color: var(--ink-soft); }
.review-who a { font-size: .83rem; color: var(--brand); }

/* ═══════════════════════════════════════════════════════════════════════
   Телефон в шапке
   Раньше номера на десктопе не было нигде, кроме подвала: половина сессий
   приходит с большого экрана, где нижней панели с кнопкой «Позвонить» нет.
   ═══════════════════════════════════════════════════════════════════════ */

.nav-tel {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
    color: var(--brand-deep) !important;
    white-space: nowrap;
}
.nav-tel .ic { width: 1.05em; height: 1.05em; color: var(--accent); }
.nav-tel:hover { color: var(--accent-deep) !important; }

@media (min-width: 992px) {
    /* На большом экране номер отделён от пунктов меню чертой:
       это не раздел сайта, а действие. */
    .nav-phone { margin-left: .6rem; padding-left: .9rem; border-left: 1px solid var(--line); }
}
@media (max-width: 991.98px) {
    /* В раскрытом меню телефона нет: снизу уже висит панель с «Позвонить»,
       две одинаковые кнопки рядом только путают. */
    .nav-phone { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Каталог: сортировка, цена за метр, выбор для сравнения
   ═══════════════════════════════════════════════════════════════════════ */

.cat-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem 1.5rem;
    margin-bottom: 1.2rem;
}
.cat-bar .cat-count { margin: 0; }

.cat-sort { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cat-sort-label {
    font-size: .72rem;
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    color: var(--ink-soft);
}
.cat-sort-list { display: flex; flex-wrap: wrap; gap: .4rem; }

.card-permetr {
    margin: .15rem 0 0;
    font-size: .84rem;
    color: var(--ink-soft);
}
.price-permetr {
    margin: .35rem 0 0;
    font-size: .95rem;
    color: var(--ink-soft);
}

.cmp-pick {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: .7rem;
    font-size: .82rem;
    color: var(--ink-mid);
    cursor: pointer;
    user-select: none;
}
.cmp-pick input { width: 1rem; height: 1rem; accent-color: var(--brand); cursor: pointer; }
.cmp-pick:hover { color: var(--brand-deep); }

/* Панель сравнения — прилипает к низу, поверх нижней навигации на телефоне */
.cmp-bar {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 1035;
    display: flex;
    align-items: center;
    gap: .5rem .9rem;
    max-width: min(46rem, calc(100vw - 1.5rem));
    padding: .7rem .95rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.cmp-bar-count { font-weight: 700; color: var(--brand-deep); white-space: nowrap; }
.cmp-bar-names {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .84rem;
    color: var(--ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cmp-bar-clear {
    border: 0;
    background: none;
    padding: .2rem;
    font-size: .82rem;
    color: var(--ink-soft);
    text-decoration: underline;
    cursor: pointer;
}
.cmp-bar-clear:hover { color: var(--ink); }

@media (max-width: 767.98px) {
    /* Нижняя навигация занимает свою полосу — панель встаёт над ней */
    .cmp-bar { bottom: 5rem; }
    .cmp-bar-names { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Таблица сравнения
   ═══════════════════════════════════════════════════════════════════════ */

.cmp-wrap { overflow-x: auto; margin-bottom: 2.5rem; }

.cmp-table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: .94rem;
}
.cmp-table th, .cmp-table td {
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    vertical-align: middle;
}
.cmp-table tbody th {
    font-weight: 500;
    color: var(--ink-soft);
    white-space: nowrap;
}
.cmp-table td { font-variant-numeric: tabular-nums; }
.cmp-table tbody tr:hover td { background: var(--brand-wash); }
.cmp-corner { border-bottom: 1px solid var(--line-soft); }

.cmp-head { display: block; text-decoration: none; color: var(--ink); min-width: 8.5rem; }
.cmp-head img {
    width: 100%;
    max-width: 13rem;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-bottom: .5rem;
}
.cmp-head span { display: block; font-weight: 600; }
/* Ширину первой колонки держим узкой: без этого подписи строк
   растягиваются на треть экрана, а сравнивать надо цифры справа. */
.cmp-table tbody th, .cmp-corner { width: 12rem; }
.cmp-head:hover span { color: var(--brand); }

/* ═══════════════════════════════════════════════════════════════════════
   Похожие проекты в карточке
   ═══════════════════════════════════════════════════════════════════════ */

.similar {
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--line);
}
.similar-head { margin-bottom: 1.4rem; }
.similar-head .section-title { margin-bottom: 0; }
.similar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.8rem;
}

/* Панель сравнения и кнопка подбора живут в одном углу экрана. Когда
   панель показана, кнопка поднимается над ней, иначе она накрывает
   «Сравнить» ровно в тот момент, когда человек до неё дотянулся. */
body.cmp-on .quiz-trigger { bottom: 6.5rem; }