body {
    margin: 0;
    font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
    /* ===========================================================
   Сайт «Красивый город» — основной CSS, чистый, без билда.
   Цвета и размеры строго по Figma (file GvgoFPjiZcgmcU3g4hyoex).
   Координаты — из svg/full.svg и svg/header.svg.
   =========================================================== */

/* ===== SITE HEADER (по header.svg: 1319×56, full.svg y=24) === */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent;
    transition: background-color .25s ease, box-shadow .25s ease;
}

/* Затемнение фона при открытом мегаменю.
   z-index 90: выше контента (макс 10), ниже шапки/мегаменю (100) → они остаются светлыми */
.site-header__backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: #0D0E14;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility 0s linear .25s;
}

.site-header.has-dropdown-open + .site-header__backdrop {
    opacity: .8;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .25s ease, visibility 0s linear 0s;
}

.site-header__inner {
    max-width: 1368px;
    margin: 0 auto;
    padding: 24px 24px;       /* top=24 как в Figma (full.svg y=24); 1368-48=1320 контент */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 24px;
}

.site-header__brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
    outline: none;
}

.site-header__emblem {
    width: auto;
    height: 56px;
    object-fit: contain;
    display: block;
    /* На hero (default state) — белая через invert */
    filter: brightness(0) invert(1);
    transition: filter .25s ease;
}

.site-footer_emblem {
    width: auto;
    height: 56px;
    display: block;

}

/* Per Figma #426:758 / #499:1688: text 20 800 uppercase, lh 24, width 125, ink/white */
.site-header__brand-text {
    width: 125px;
    font-family: Manrope, system-ui, sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    color: #ffffff;
    transition: color .25s ease;
}

.site-header__nav {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-left: auto;
    margin-right: auto;
}

.site-header__nav-link {
    font-family: Manrope, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    transition: color .15s ease;
}

.site-header__nav-link:hover { color: #fff; }

/* Это <button> (открывает модалку), поэтому нужны сброс рамки и курсор */
.site-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 32px;
    background: #F4F1EB;
    color: var(--c-ink, #12131A);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-family: Manrope, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
    flex-shrink: 0;
}

.site-header__cta:hover { background: #f1e4cb; }

.site-header__burger {
    display: none;
}

/* === Sticky state — белая после скролла === */
.site-header.is-solid {
    background: #fff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
}

.site-header.is-solid .site-header__brand-text,
.site-header.is-solid .site-header__nav-link {
    color: var(--c-ink, #12131A);
}

/* В sticky-состоянии — logo возвращается к оригинальным цветам (без invert) */
.site-header.is-solid .site-header__emblem {
    filter: none;
}

.site-header.is-solid .site-header__nav-link:hover {
    color: var(--c-primary, #A57766);
}

@media (max-width: 1100px) {
    .site-header__inner { padding: 16px 10px; }
    .site-header__nav { display: none; }
    .site-header__brand-text { color: #fff;font-size: 16px;
        width: auto; }
    .site-header__burger {
        display: grid;
        place-items: center;
        width: 45px;
        height: 45px;
        margin-left: auto;
        padding: 0;
        border-radius: 8px;
        background: transparent;     /* белый квадрат рисует сам SVG (#626:24820) */
        border: 0;
        cursor: pointer;
    }
    .site-header__burger-open  { display: block; width: 45px; height: 45px; }
    .site-header__burger-close { display: none;  width: 24px; height: 24px; }
    .site-header__cta { display: none; }
}

/* Мобильная панель */
/* ===== Мобильное меню (drill-down, Figma #626:37939 + подэкраны) ===== */
.mmenu { display: none; }
.site-header__burger-close { display: none; }

@media (max-width: 1100px) {
    .site-header__inner { position: relative; z-index: 2; }   /* бар поверх панели меню */

    /* Открытое меню: бар белый, лого/текст тёмные, бургер → крестик */
    .site-header.is-menu-open { background: #fff; }
    .site-header.is-menu-open .site-header__brand-text { color: #12131A; }
    .site-header.is-menu-open .site-header__emblem { filter: none; }
    .site-header.is-menu-open .site-header__burger-open { display: none; }
    .site-header.is-menu-open .site-header__burger-close { display: block; }

    .mmenu {
        display: block;              /* на мобиле всегда в DOM; видимость — через opacity/visibility */
        position: fixed;
        left: 0; right: 0; bottom: 0;
        top: 0;                      /* JS выставляет = высоте шапки (контент под баром) */
        z-index: 1;                  /* под баром (inner z-2) внутри stacking-context шапки */
        background: #fefefe;
        overflow: hidden;            /* скроллит каждый экран отдельно */
        /* Плавное появление И исчезновение (display не анимируется → opacity/visibility) */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;     /* в закрытом виде НЕ перехватывает клики (активный экран внутри = visible) */
        transition: opacity .28s ease, visibility 0s linear .28s;
    }
    .mmenu.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity .28s ease;
    }

    /* Экраны наложены друг на друга → плавный кроссфейд при переключении.
       Каждый экран сам скроллится; низ прижат к низу (margin-top:auto). */
    .mmenu__screen {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 16px 10px 32px;
        box-sizing: border-box;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        opacity: 0;
        visibility: hidden;
        transform: translateX(14px);
        transition: opacity .25s ease, transform .28s ease, visibility 0s linear .28s;
    }
    .mmenu__screen.is-active {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity .25s ease, transform .28s ease;
    }

    /* Корневой список */
    .mmenu__list { display: flex; flex-direction: column; gap: 12px; }
    .mmenu__row {
        display: flex; align-items: center; justify-content: space-between;
        width: 100%; box-sizing: border-box;
        padding: 16px 24px;
        background: #fff; border: 0; border-radius: 8px;
        font-family: "Manrope", sans-serif; font-weight: 500; font-size: 14px; line-height: 1.5;
        color: #12131A; text-align: left; text-decoration: none; cursor: pointer;
    }
    .mmenu__row-chev { flex: 0 0 auto; }

    /* Шапка подэкрана «‹ Раздел» */
    .mmenu__back {
        display: flex; align-items: center; gap: 8px;
        width: 100%; box-sizing: border-box;
        padding: 16px 24px;
        background: #fff; border: 0; border-radius: 8px;
        font-family: "Manrope", sans-serif; font-weight: 500; font-size: 14px; line-height: 1.5;
        color: #12131A; cursor: pointer;
    }

    /* Список подэкрана */
    .mmenu__sublist { display: flex; flex-direction: column; gap: 16px; }

    /* Кнопки «Все …» (чёрная) и «Калькулятор ипотеки» (синяя) */
    .mmenu__btn {
        display: flex; align-items: center;
        min-height: 56px; box-sizing: border-box;
        padding: 0 32px; border-radius: 8px;
        font-family: "Manrope", sans-serif; font-weight: 600; font-size: 14px; line-height: 1.5;
        text-decoration: none;
    }
    .mmenu__btn--all  { background: #12131A; color: #fff; }
    .mmenu__btn--calc { background: #A57766; color: #fff; }

    /* Строка-элемент: фото/иконка 48 + заголовок H4 + подзаголовок */
    .mmenu__item { display: flex; align-items: center; gap: 16px; text-decoration: none; }
    .mmenu__item-thumb,
    .mmenu__item-icon { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; }
    .mmenu__item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .mmenu__item-icon { background: #12131A; display: grid; place-items: center; }
    .mmenu__item-icon svg { width: 24px; height: 24px; color: #fff; }
    .mmenu__item-text { display: flex; flex-direction: column; min-width: 0; }
    .mmenu__item-title { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 20px; line-height: 1.3; color: #12131A; }
    .mmenu__item-sub { font-family: "Manrope", sans-serif; font-weight: 500; font-size: 14px; line-height: 1.5; color: #6B7280; }

    /* Низ меню (повторяется на каждом экране) — прижат к низу */
    .mmenu__footer { display: flex; flex-direction: column; gap: 16px; margin-top: auto; padding-top: 16px; }
    .mmenu__consult {
        display: flex; align-items: center; justify-content: center;
        height: 56px; box-sizing: border-box; border-radius: 8px;
        background: #F4F1EB; color: #1E213D;
        font-family: "Manrope", sans-serif; font-weight: 600; font-size: 14px; text-decoration: none;
    }
    .mmenu__contact { display: flex; flex-direction: column; gap: 8px; padding: 0 24px; }
    .mmenu__contact-label { display: inline-flex; align-items: center; gap: 8px; color: #6B7280; font-family: "Manrope", sans-serif; font-weight: 500; font-size: 14px; line-height: 1.5; }
    .mmenu__contact-value { color: #A57766; font-family: "Manrope", sans-serif; font-weight: 600; font-size: 14px; line-height: 1.5; text-decoration: none; }
}


:root {
    --c-bg: #fefefe;
    --c-ink: #12131A;
    --c-muted: #6B7280;
    --c-card: #FFFFFF;
    --c-primary: #A57766;
    --c-primary-700: #1F5BBF;
    --c-navy: #1E213D;
    --c-line: #E4E4E7;
    --c-line-soft: #fefefe;
    --r-card: 12px;
    --r-btn: 8px;
    --r-btn-sm: 4px;
    --container: 1320px;
}

.h-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== HERO (по full.svg: 1920×980, контент x=300) =========== */
/* ============================================================
   HERO — фото зданий (hero.svg/hero-bg.jpg, 1920×980) + слайдер.
   Высота 900 = 980 - 80 (header).
   ============================================================ */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    height: 980px;        /* promo-row (margin-top:-100) встаёт на y880 = Figma */
    color: #ffffff;
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: #1E213D;
}

.hero__bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity .7s ease;
}

.hero__bg img.is-active { opacity: 1; }

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.4);
}

.hero__inner {
    position: relative;
    height: 100%;
}

/* Per-slide content wrapper — fade in/out на переключении */
.hero__content {
    position: absolute;
    top: 136px;          /* Figma y:136 (header fixed, оверлей) */
    left: 24px;
    right: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease;
    pointer-events: none;
}

.hero__content.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Страница ЖК (с крошками) — контент ниже (Figma 626-22535 y:200) */
.hero--no-disc .hero__content { top: 200px; }

/* Хлебные крошки в hero (вместо бейджа на странице ЖК) — Manrope 14, белые, ссылки приглушены */
.hero__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: #ffffff;
}
.hero__crumbs a { color: #ffffff; opacity: .4; text-decoration: none; transition: opacity .2s; }
.hero__crumbs a:hover { opacity: .75; }
.hero__crumbs-sep { opacity: .4; }
.hero__crumbs-cur { opacity: 1; }

/* Статус-плашка справа (Figma x1213/y200): white90 + blur, серый текст, ссылка синяя */
.hero__pill-wrap { position: absolute; top: 200px; left: 0; right: 0; z-index: 3; text-align: right; }
.hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 4px;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: #6B7280;
}
.hero__pill-sep { color: #6B7280; }
.hero__pill-link { color: #A57766; text-decoration: none; }
.hero__pill-link:hover { text-decoration: underline; }

/* Badge — bg white, padding 8x16, rx=4, muted text */
.hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: #ffffff;
    border-radius: 4px;
    color: #6B7280;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
}

/* H1 — Manrope Bold 48 / 1.2em WHITE (поверх фото) */
.hero__title {
    margin: 32px 0 0;
    max-width: 640px;
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.2;
    color: #ffffff;
}

/* Body L — Manrope Medium 18 / 1.4em WHITE (Figma fill_658ab2fa, без opacity) */
.hero__subtitle {
    margin: 8px 0 0;
    max-width: 640px;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #ffffff;
}

.hero__buttons {
    margin-top: 32px;
    display: flex;
    gap: 8px;
}

.hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 24px 40px;   /* Figma layout_610eb3e4 */
    border-radius: 8px;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 500;     /* Body S = Medium (Btn1) */
    line-height: 1;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.hero__btn--primary {
    background: #AE7A67;
    color: #ffffff;
}

.hero__btn--primary:hover { background: #9b6856; }

/* Secondary — fefefe bg + navy text, Link = SemiBold 600 */
.hero__btn--ghost {
    background: #fefefe;
    color: #1E213D;
    font-weight: 600;
}

.hero__btn--ghost:hover { background: #e6e8ec; }

/* Slider control bar — JK pills + arrow nav, на фоне фото (Figma #426:763) */
.hero__slider-wrap {
    position: absolute;
    top: 608px;
    left: 24px;
    right: 24px;
    z-index: 2;
}

/* Без дисклеймера (страница ЖК) слайдер опускается к низу фото — Figma 626-22535 y:664.
   На главной слайдер выше (y:608), т.к. под ним ещё ряд дисклеймеров (y:793). */
.hero--no-disc .hero__slider-wrap { top: 664px; }

/* ЖК сдан или без квартир (Complex::hidesSaleBlocks): продающих блоков под hero нет,
   поэтому hero делаем ниже, а слайдер поднимаем к его низу. */
.hero--compact { height: 600px; }
.hero--compact .hero__slider-wrap { top: 500px; }

.hero__slider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.hero__tabs {
    display: flex;
    align-items: center;
    gap: 32px;                 /* Figma: ряд логотипов ЖК, gap 32 */
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1 1 auto;
    min-width: 0;
}

.hero__tabs::-webkit-scrollbar { display: none; }

/* Таб = логотип ЖК. Состояние — через opacity (активный/наведённый ярче) */
.hero__tab {
    display: inline-flex;
    align-items: center;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity .2s ease;
}

.hero__tab.is-active { opacity: 1; }

/* Текстовые табы на странице ЖК (без логотипов) — размеры строго по Figma 626-22535:
   Body M = Manrope 16/1.5 (Regular), ряд gap 24, неактивные opacity 0.4. */
.hero--no-disc .hero__tabs { gap: 24px; }
.hero--no-disc .hero__tab {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    opacity: 0.4;
}
.hero--no-disc .hero__tab.is-active { opacity: 1; }

/* Логотип ЖК в слайдере главной — натуральные размеры из Figma (626-19752):
   у каждого лого своя высота (avtograf ~32, semigor ~48, fareng ~73 с подписью),
   поэтому высоту не прибиваем; SVG несёт свои width/height. Тонируем в белый. */
.hero__tab--logo { padding: 0; }
.hero__tab-logo {
    display: block;
        max-width: 140px;
    width: 100%;
    max-height: 70px;
    filter: brightness(0) invert(1);
}

.hero__nav {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

.hero__nav-btn {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 8px;
    background: #fefefe;       /* Figma fill_b92dd999 */
    color: #1E213D;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* Стрелка: точная геометрия из Figma (arrow-square-down = тонкий шеврон 6×9, #6B7280) */
.hero__nav-btn svg { display: block; width: 6px; height: 9px; }
.hero__nav-btn[data-hero-next] svg { transform: scaleX(-1); }  /* зеркалим для «вперёд» */

/* ===== HERO — hover/active (только на интерактивных: кнопки, стрелки, табы) ===== */
.hero__btn:active     { transform: translateY(0); }
.hero__nav-btn:active { transform: translateY(0); }
.hero__tab:active     { opacity: 1; }

@media (hover: hover) {
    /* кнопки — лёгкий подъём + мягкая тень */
    .hero__btn:hover     { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
    /* стрелки — подъём + тень + затемнение фона */
    .hero__nav-btn:hover { background: #e6e8ec; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }
    /* табы-логотипы — лёгкое усиление яркости */
    .hero__tab:hover     { opacity: 0.85; }
}

/* Disclaimer wrap (per slide) — Figma y:793 */
.hero__disclaimer-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 793px;
    margin: 0 auto;
}

.hero__disclaimer {
    display: none;
    grid-template-columns: 723px 1fr;
    column-gap: 24px;
    justify-content: space-between;
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
}

.hero__disclaimer.is-active { display: grid; }
.hero__disclaimer-col { margin: 0; width: 723px; }
.hero__disclaimer-col--right { width: auto; opacity: 0.6; }
.hero__disclaimer a { color: #A57766; text-decoration: none; }

/* ===== HERO floating promo cards ============================ */
.hero__promo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -132px;
    z-index: 10;
}

.hero__promo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.promo {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 16px;
    padding: 24px;
    min-height: 220px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
    font-family: Manrope, system-ui, sans-serif;
}

.promo--green {
    background: linear-gradient(135deg, #34D399 0%, #14B8A6 45%, #0E7490 100%);
    color: #fff;
}

.promo--white {
    background: #fff;
    color: var(--c-ink);
}

.promo--blue {
    background: linear-gradient(135deg, #A57766 0%, #1F5BBF 100%);
    color: #fff;
}

.promo__image {
    position: absolute;
    right: -24px;
    bottom: -24px;
    width: 180px;
    height: 180px;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

.promo--white .promo__image { border-radius: 12px; }

.promo__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.promo--green .promo__badge,
.promo--blue .promo__badge {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.promo--white .promo__badge {
    background: rgba(24, 24, 27, 0.08);
    color: #3F3F46;
}

.promo__title {
    position: relative;
    margin: 12px 0 0;
    max-width: 60%;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}

.promo__text {
    position: relative;
    margin: 8px 0 0;
    max-width: 60%;
    font-size: 14px;
    line-height: 1.45;
}

.promo--green .promo__text,
.promo--blue .promo__text { color: rgba(255, 255, 255, 0.8); }

.promo--white .promo__text { color: var(--c-muted); }

.promo__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-top: 24px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease;
}

.promo--white .promo__btn {
    background: var(--c-ink);
    color: #fff;
}

.promo--white .promo__btn:hover { background: #3F3F46; }

.promo--green .promo__btn,
.promo--blue .promo__btn {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    backdrop-filter: blur(8px);
}

.promo--green .promo__btn:hover,
.promo--blue .promo__btn:hover { background: rgba(255, 255, 255, 0.32); }

/* ===== SECTION 1 — промо-карточки (Figma y=880-1339) ======== */
/* Hero кончается y=980, карточки начинаются y=880 → top 100px поверх hero фото,
   низ 259px на page-bg #fefefe. */
/* Фон страницы под hero — серый (Figma #fefefe). Hero перекрывает его своей картинкой,
   promo-row наезжает на hero (margin-top -100px), а ниже hero за карточками — серый. */
body.page-home main {
    background: #fefefe;
}

body.page-catalog main {
    background: #fefefe;
}

/* Страница «Жилые комплексы»: десктоп — серый (#fefefe, Figma 626-23417),
   а на мобиле фрейм белый (Figma 626-28xxx) — фон задаём ПО БРЕЙКПОИНТУ. */
body.page-complexes main {
    background: #fefefe;
}
@media (max-width: 767.98px) {
    body.page-complexes main {
        background: #ffffff;
    }
}

.promo-row {
    position: relative;
    background: transparent;
    margin-top: -100px;
    z-index: 5;
}

.promo-row__grid {
    display: grid;
    grid-template-columns: 875fr 429fr;
    gap: 16px;
}

.promo-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--r-card);
    height: 459px;
    font-family: Manrope, system-ui, sans-serif;
    transition: transform .25s ease, box-shadow .25s ease;
}

/* Hover карточек promo — лёгкий подъём + тень (по правилам) */
@media (hover: hover) {
    .promo-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 32px rgba(18, 19, 26, .12);
    }
}

/* ============================================================
   PROMO CARDS — фоны = flat-PNG из Figma node #426:716 / #426:722.
   Все слои (gradients/photos/blur/vignettes) зашиты в PNG.
   Текст/badge/button позиционированы ABSOLUTE по Figma offsets.
   Card box = 429×459 (small) или 875×459 (big).
   Все координаты — точно из MCP figma-data (locationRelativeToParent
   минус card.x, card.y).
   ============================================================ */
.promo-card--big {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        url('/assets/img/home/promo-big-bg.webp') center / cover no-repeat,
        #05699C;
    color: #ffffff;
}

.promo-card--big .promo-card__bg,
.promo-card--big .promo-card__overlay { display: none; }

/* === ABSOLUTE positioning per Figma MCP coords ===
   Big card #426:716 (875×459):
     Badge #426:728  at card (32, 48) — padding 8×16, transparent, white border 1px
     Title #426:733  at card (32, 109)  — H3 26/1.3 white, max-width 324
     Text  #426:734  at card (32, 109+gap) — Body M 16/1.5 white opacity .8, width 268
     Button #426:738 at card (32, 355) — height 56, fill #AE7A67, padding 17.5×32
   Small card #426:722 (429×459):
     Badge #426:730  at card (32, 48) — padding 8×16, transparent, muted #6B7280 border
     Title #426:736  at card (32, 109) — H3 26/1.3 ink, max-width 365
     Text  #426:737  at card (32, ?)   — Body M 16/1.5 muted opacity .8, width 365
     Button #426:739 at card (32, 355) — same blue #AE7A67 */

.promo-card__body {
    /* Body теперь — пустой контейнер; всё внутри позиционируется ABSOLUTE */
    position: absolute;
    inset: 0;
    z-index: 4;
}

/* Badge frame #426:728 / #426:730 */
.promo-card__badge {
    position: absolute;
    top: 48px;
    left: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 1px solid #ffffff;
    border-radius: 4px;
    background: transparent;
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
}

.promo-card__badge--light {
    border-color: #6B7280;
    color: #6B7280;
}

/* Title — H3 26/1.3 */
.promo-card__title {
    position: absolute;
    top: 109px;
    left: 32px;
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
    max-width: 324px;
}

.promo-card__title--ink { color: #12131A; max-width: 365px; }

/* Subtitle — Body M 16/1.5 opacity .8.
   Figma: title-frame gap 6, title ~2 lines × (26*1.3)=67.6 → subtitle.top ≈ 109 + 67 + 6 = 182.
   Для big-card title 2 строки → subtitle top:184. */
.promo-card__text {
    position: absolute;
    top: 184px;
    left: 32px;
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    max-width: 268px;
}

/* Small card text: title 1 строка → top = 109 + 34 + 6 = 149 */
.promo-card--small .promo-card__text {
    top: 149px;
    color: #6B7280;
    opacity: 0.8;
    max-width: 365px;
}

.promo-card__text--muted { color: #6B7280; opacity: 0.8; }

/* Button #426:738 / #426:739 — height 56, fill #AE7A67, padding 17.5×32 (auto layout) */
.promo-card__btn {
    position: absolute;
    top: 355px;
    left: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;            /* Figma: кнопка height fixed 56 */
    padding: 0 32px;
    border-radius: 8px;
    background: #AE7A67;
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    /* Кнопка может быть <a> или <button> (окно «Подробнее») — сбрасываем нативный вид */
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.promo-card__btn:active { transform: translateY(0); }

.promo-card__btn--ink {
    background: #AE7A67;
    color: #ffffff;
}

@media (hover: hover) {
    .promo-card__btn:hover { background: #9b6856; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
}

/* --- Маленькая карточка (429×459) "Семейная ипотека от 0,1%" — Figma #426:722
   Фон = flat-PNG из MCP (содержит white card + photo с key/box/leaves)
   Текст позиционируется ABSOLUTE per Figma offsets (см. .promo-card__body выше) */
.promo-card--small {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        url('/assets/img/home/promo-small-bg.webp') center / cover no-repeat,
        #f5f2eb;
    color: #12131A;
}

/* ===== Объявление на странице ЖК (Figma 1:1015) =====
   Фон — фото из карточки ЖК под затемнением, поверх подпись, текст и белая кнопка. */
.cnotice { padding: 32px 0; }

.cnotice__box {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 320px;
    padding: 32px 64px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--cnotice-img, none) center / cover no-repeat #1E213D;
}

/* Затемнение 35% из макета — чтобы белый текст читался на любом фото */
.cnotice__box::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, .35);
}

.cnotice__body { position: relative; z-index: 2; max-width: 640px; }

.cnotice__label {
    margin: 0;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #FEFEFE;
}

.cnotice__text {
    margin: 10px 0 0;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.3;
    color: #FEFEFE;
}

.cnotice__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    padding: 24px 40px;
    border: 0;
    border-radius: 8px;
    background: #FFFFFF;
    color: #000000;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color .15s ease;
}

.cnotice__btn:hover { background: #F4F1EB; }

@media (max-width: 767.98px) {
    .cnotice { padding: 32px 0 24px; }
    /* Поля 8px по бокам вместо общих 24px у .h-container */
    .cnotice .h-container { padding-left: 8px; padding-right: 8px; }
    .cnotice__box { min-height: 0; padding: 24px 16px; border-radius: 8px; }
    .cnotice__body { max-width: none; }
    .cnotice__text { font-size: 22px; }
    .cnotice__btn { width: 100%; padding: 18px 24px; }
}

/* ===== Баннер с фото и кнопкой (блок promo_banner) =====
   Типографика — как у заголовков секций сайта (40/1.1), надзаголовок и подпись —
   как у feature-slider, кнопка — как у промо-карточек. Фон 3:1, фото справа,
   слева светлая зона под текст. Цвет акцента задаётся в блоке (--pb-accent). */
.pbanner { padding: 60px 0; }

.pbanner__card {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    aspect-ratio: 3 / 1;
    min-height: 400px;
    border-radius: var(--r-card);
    overflow: hidden;
    background: var(--pb-bg, #FCF7F0) var(--pb-img, none) right center / cover no-repeat;
}

.pbanner__media { display: none; }

.pbanner__body {
    position: relative;
    z-index: 1;
    max-width: 620px;
    padding: 48px 64px;
    font-family: Manrope, system-ui, sans-serif;
}

.pbanner__eyebrow {
    margin: 0;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pb-accent, #AE7A67);
}
.pbanner__eyebrow--muted { color: #6B7280; }

.pbanner__title {
    margin: 16px 0 0;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.1;
    color: #12131A;
}
.pbanner__accent { display: block; color: var(--pb-accent, #AE7A67); }

.pbanner__text {
    margin: 16px 0 0;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #12131A;
    opacity: .8;
}

/* Кнопка — один в один .hero__btn.hero__btn--primary */
.pbanner__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
    padding: 24px 40px;
    border-radius: 8px;
    background: #AE7A67;
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pbanner__btn:hover { background: #9b6856; color: #ffffff; }
.pbanner__btn:active { transform: translateY(0); }
@media (hover: hover) {
    .pbanner__btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
}

/* Планшет: карточка ниже соотношения 3:1 — фото обрезается слева и заходит под текст.
   Подкладываем под текст плавный переход в цвет фона. */
@media (max-width: 1199.98px) {
    .pbanner__card::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background: linear-gradient(90deg, var(--pb-bg, #FCF7F0) 38%, transparent 72%);
    }
    .pbanner__body { padding: 40px; }
}

@media (max-width: 767.98px) {
    .pbanner { padding: 48px 0; }
    .pbanner .h-container { padding-left: 8px; padding-right: 8px; }

    /* Фото сверху, текст снизу на фоне цвета светлой зоны */
    .pbanner__card {
        flex-direction: column;
        align-items: stretch;
        aspect-ratio: auto;
        min-height: 0;
        background: var(--pb-bg, #FCF7F0);
    }
    .pbanner__card::before { display: none; }
    .pbanner__media {
        display: block;
        height: 220px;
        background: var(--pb-img, none) right center / cover no-repeat;
    }
    .pbanner__body { max-width: none; padding: 24px 16px; }
    .pbanner__title { font-size: 26px; line-height: 1.2; }
    .pbanner__text { font-size: 16px; line-height: 1.5; }
    /* как .hero__btn на мобиле */
    .pbanner__btn { width: 100%; margin-top: 24px; padding: 12px 16px; line-height: 1.5; }
}

/* ===== Дополнительные акции (задаются в карточке ЖК) =====
   Оформление берётся у существующих карточек: тёмная — .promo-card--big,
   светлая — .promo-card--small. Своё только фоновое изображение и цвет. */
.promo-card--custom { background: var(--promo-img, none) center / cover no-repeat, var(--promo-bg, #05699C); }
.promo-card--small.promo-card--custom { background: var(--promo-img, none) center / cover no-repeat, var(--promo-bg, #f5f2eb); }
.promo-card--custom .promo-card__bg,
.promo-card--custom .promo-card__overlay { display: none; }

/* Карточка без пары — во всю ширину сетки */
.promo-card--full { grid-column: 1 / -1; }
.promo-card--full .promo-card__title { max-width: 560px; }
.promo-card--full .promo-card__text { max-width: 520px; }

/* ===== Слайдер: включается, когда акций больше трёх ===== */
.promo-row__grid--slider {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.promo-row__grid--slider::-webkit-scrollbar { display: none; }
.promo-row__grid--slider .promo-card {
    flex: 0 0 66.3%;
    scroll-snap-align: start;
}
/* Узкая карточка сохраняет исходную пропорцию 429/1320 — фон не растягивается */
.promo-row__grid--slider .promo-card--small { flex: 0 0 32.5%; }
.promo-row__grid--slider .promo-card--full { grid-column: auto; }

/* Стрелки — как в пейджере списка ЖК (.cxs-pager__arrow) */
.promo-row__pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.promo-row__arrow {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 8px;
    background: #fefefe;
    color: #6B7280;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: opacity .2s;
}
.promo-row__arrow svg { display: block; width: 6px; height: 9px; }
.promo-row__arrow--next svg { transform: scaleX(-1); }
.promo-row__arrow:disabled { opacity: .35; cursor: default; }

/* ===== PROMO — мобайл 1:1 с фреймом 360 (#626:24847/24861) ===== */
@media (max-width: 767.98px) {
    /* full-bleed: секция на всю ширину (в Figma карточки x0 360) */
    .promo-row .h-container { max-width: none; padding: 0; }
    .promo-row__grid { grid-template-columns: 1fr; gap: 16px; }
    /* Одна карточка в кадре: ширина = экран минус поля 16+16, зазор равен полю,
       поэтому в позиции привязки соседние карточки полностью уходят за край. */
    .promo-row__grid--slider { gap: 16px; scroll-padding-inline: 16px; }
    .promo-row__grid--slider .promo-card,
    .promo-row__grid--slider .promo-card--small { flex: 0 0 calc(100% - 32px); }
    .promo-row__grid--slider .promo-card:first-child { margin-left: 16px; }
    .promo-row__grid--slider .promo-card:last-child { margin-right: 16px; }
    .promo-row__pager { justify-content: center; padding: 0 16px; }

    /* Карточки на всю ширину, мобильный фон-композит (пара/листья+glow запечены) */
    .promo-card { height: auto; }
    .promo-card--big {
        min-height: 560px;
        background: url('/assets/img/home/m-promo-big-bg.webp') center / cover no-repeat, #2B8A3E;
    }
    .promo-card--small {
        min-height: 459px;
        background: url('/assets/img/home/promo-small-bg.webp') center / cover no-repeat, #ffffff;
    }



    /* Контент по центру: x10 y24 w340, badge→16→title→6→text→24→button */
    .promo-card__body {
        position: relative;
        inset: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24px 10px 0;
        box-sizing: border-box;
    }
    .promo-card__badge { position: static; top: auto; left: auto; align-self: center; margin: 0; }
    .promo-card__title { position: static; top: auto; left: auto; margin: 16px 0 0; max-width: none; text-align: center; }
    .promo-card__text  { position: static; top: auto; left: auto; margin: 6px 0 0; max-width: 268px; text-align: center; }
    .promo-card__btn   { position: static; top: auto; left: auto; margin: 24px 0 0; }
}

/* ===== ABOUT (О застройщике, full.svg y=1459-2228) ========== */
/* Заголовок y=1459, карточки y=1572-2228, следующая секция y=2348 */
.about {
    padding-top: 80px;
    padding-bottom: 60px;
    background: var(--c-bg);
}

.about__inner {
    /* контент-зона ровно 1320 (как в Figma), padding 24 поверх → max-width 1368 */
    max-width: 1368px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.about__title {
    margin: 0;
    max-width: 811px;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--c-ink);
}

.about__subtitle {
    margin: 8px 0 0;
    max-width: 811px;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: var(--c-muted);
}

/* Сетка карточек: 1572-2228 = 656px высота
   429 + gap 16 + 430 + gap 16 + 429 = 1320 ✓
   320 + gap 16 + 320 = 656 ✓ */
.about__grid {
    margin-top: 32px;     /* 1572 - 1540 (примерно после заголовка) */
    display: grid;
    grid-template-columns: 429fr 430fr 429fr;
    grid-template-rows: 320px 320px;
    gap: 16px;
}

.about__card {
    position: relative;
    background: #fff;
    border: 1px solid #E5E5E5;
    border-radius: 12px;
    overflow: hidden;
    font-family: Manrope, system-ui, sans-serif;
}

.about__card--main  { grid-column: 1;          grid-row: 1 / span 2; padding: 32px; position: relative; }
.about__card--sales { grid-column: 2;          grid-row: 1; padding: 32px; position: relative; }
.about__card--proj  { grid-column: 3;          grid-row: 1; padding: 32px; position: relative; }
.about__card--docs  { grid-column: 2 / span 2; grid-row: 2; padding: 8px; position: relative; }

/* --- Общие стили заголовков/текстов карточек --- */
.about-h {
    margin: 0;
    font-weight: 700;        /* Figma H3 = Bold 700 */
    font-size: 26px;
    line-height: 1.3;
    color: var(--c-ink);
}

.about-h--lg { font-size: 28px; }

.about-p {
    margin: 12px 0 0;
    font-weight: 400;        /* Figma Body M = Regular 400/16 */
    font-size: 16px;
    line-height: 1.5;
    color: var(--c-muted);
}

/* --- LEFT card (429×656): каска x=45 y=191 (325×333), статы абсолют --- */
.about__main-image {
    /* Figma #626:19048 — каска на всю внутр. ширину 367×311, под текстом */
    position: absolute;
    left: 32px;
    top: 191px;
    width: 367px;
    height: 311px;
    object-fit: contain;
    pointer-events: none;
}

/* Stats: SVG rects (32.5/191.5, 537.5) 150×86 rx=3.5 stroke=#CBCBCC NO FILL
   → outlined boxes (light-grey border), transparent inside */
.about__stats {
    position: absolute;
    left: 20.5px;        /* 32.5 svg - 12 card_x_offset */
    top: 537.5px;
    display: flex;
    gap: 9px;            /* 191.5 - 32.5 - 150 = 9 */
}

.about__stat {
    width: 150px;
    height: 86px;
    background: transparent;
    border: 1px solid #CBCBCC;
    border-radius: 3.5px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.about__stat-value {
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
    color: #12131A;
}

.about__stat-label {
    margin-top: 6px;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.3;
    color: #6B7280;
    white-space: nowrap;
}

/* --- SALES card (430×320): аватары + ключи bottom-right --- */
.about__sales-avatars {
    /* 3 круга cx=509/565/621 cy=369 r=30 в секции (1320×769),
       карточка x=445 y=113, → cx=64/120/176, cy=256, top=226 left=34 */
    position: absolute;
    left: 34px;
    top: 226px;
    display: flex;
}

.about__sales-avatars img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #fff;
    object-fit: cover;
    margin-left: -4px;        /* gap между центрами 56, overlap 4 */
    background: var(--c-line-soft);
}

.about__sales-avatars img:first-child { margin-left: 0; }

.about__sales-image {
    /* Figma #626:19066 — ключи-брелок на весь блок (cover), ключи снизу-справа на прозрачном */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
}



.about__tags {
    position: absolute;
    top: 206.5px;
    left: 32.5px;        /* svg x=923.5 - card x=891 = 32.5 */
    right: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.about__tag {
    height: 36px;
    border-radius: 3.5px;
    background: transparent;
    border: 1px solid #6B7280;
    color: #6B7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
        padding: 0 10px;
    width: fit-content;
    box-sizing: border-box;
}



/* --- DOCS card (875×320) — ABSOLUTE per o-zastroyshike.svg
   Внутренняя серая панель: SVG (453,344) w=859 h=304 → card (8,8)
   Title: SVG path y=395 x=489.6 → card (44.6, 59)
   Text:  SVG path y=426 x=478.1 → card (33.1, 90)
   Link:  SVG path y=620.7 x=477.5 fill #A57766 → card (32.5, 284.7)
   Image: SVG rect (794,439) 505×209 → card (349, 103) */
/* Устойчивый layout (поток + якоря) — не зависит от точной ширины ячейки грида */
.about__docs-inner {
    position: relative;
    height: 100%;
    background: #fefefe;
    border-radius: 8px;
    overflow: hidden;
    padding: 24px;
    box-sizing: border-box;
}

.about__docs-title {
    position: relative;
    z-index: 2;          /* поверх image; заголовок над картинкой — может занимать всю ширину */
    margin: 0 0 10px;
    max-width: 100%;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.3;
    color: #12131A;
}

.about__docs-text {
    position: relative;
    z-index: 2;          /* поверх image */
    margin: 0;
    max-width: 58%;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #6B7280;
}

.about__docs-link {
    position: absolute;
    left: 36px;
    bottom: 32px;
    z-index: 3;          /* поверх image */
    color: #A57766;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.about__docs-link:hover { text-decoration: underline; }

/* Figma #626:19013 — фото на весь внутренний блок (859×304, cover), текст поверх */
.about__docs-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

/* ABOUT — hover: лёгкий зум картинок в карточках (родитель overflow:hidden) */
.about__main-image,
.about__sales-image,
.about__docs-image { transition: transform .25s ease; }
@media (hover: hover) {
    .about__card--main:hover .about__main-image,
    .about__card--sales:hover .about__sales-image,
    .about__card--docs:hover .about__docs-image { transform: scale(1.04); }
}

/* ===== ABOUT — мобайл 1:1 с фреймом 360 (#626:24876) ===== */
@media (max-width: 767.98px) {
    .about { padding: 48px 0; }
    /* Секция full-bleed: about x0 w360 без паддинга, карточки на всю ширину */
    .about__inner { max-width: none; padding: 0; }

    /* Заголовок/подзаголовок — flush x0 (Figma #626:24877, инстанс 360, текст у края), подзаголовок Bodу L 18 */
    .about__title { font-size: 32px; padding: 0; }
    .about__subtitle { font-size: 18px; padding: 0; margin: 8px 0 0; }

    /* Карточки full-width, стек gap 16; контент по центру */
    .about__grid { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
    .about__card {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        text-align: center;
        padding: 32px;            /* sales / proj / docs */
        position: relative;
        overflow: hidden;
    }
    .about__card--main { padding: 16px 10px; gap: 24px; }   /* card1 #626:24879 */
    /* текст — поверх фоновых декор-картинок */
    .about__card .about-h,
    .about__card .about-p { position: relative; z-index: 2; margin: 0; text-align: center; }

    /* card1 main: каска + статы в потоке (статы — 2 бокса на всю ширину) */
    .about__main-image { position: static; width: 100%; max-width: 240px; height: auto; }
    .about__stats { position: static; align-self: stretch; justify-content: center; gap: 8px; }
    .about__stat { flex: 1 1 0; width: auto; }

    /* card2 sales (#626:24892): высота AUTO (designedHeight 320 не прибиваем — высота из контента),
       брелок — точный моб-кроп фоном (#626:24893), desktop-<img> скрыт.
       Вертикаль — только через padding/gap, без absolute-координат. */
    .about__card--sales {
        height: auto;
        padding: 32px 16px;
        gap: 6px;                    /* заголовок→текст = 6 (фрейм #626:24897) */
        justify-content: flex-start;
        
    }

    
.about__sales-image {
        object-fit: contain;
        transform: translate(8px, 16px);
}
    .about__sales-avatars {
        position: static; top: auto; bottom: auto; left: auto; right: auto; transform: none;
        margin-top: 98px;            /* 6 (gap карточки) + 98 = 104 от текстового блока (фрейм gap:104) */
        align-self: center;
        display: flex; justify-content: center;
        z-index: 2;
    }
    .about__sales-avatars img {
        width: 64px; height: 64px;
        border: 4px solid #fff; box-sizing: border-box;
        margin-left: -8px;           /* перекрытие 8 → шаг 56 при Ø64 */
    }
    .about__sales-avatars img:first-child { margin-left: 0; }

    /* card3 proj (#626:24904, h320): текст сверху, теги-сетка 3 колонки снизу */
    .about__card--proj { height: 320px; padding: 32px; justify-content: flex-start; }
    .about__tags {
        position: static; margin-top: auto;
        display: flex; grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: min-content; gap: 8px; width: 100%;
    }
    .about__tag {
        width: auto !important; min-width: 0; height: auto;
        padding: 8px 6px; border-radius: 4px;
        font-size: 13px; line-height: 1.3; white-space: nowrap;
    }

    /* card4 docs (#626:24920): серая панель #fefefe (inset 8) + коробка (#626:24924) полосой снизу
       точным моб-кропом фоном (full-width), desktop-<img> скрыт. Высота min-height (не прибиваем),
       контент сверху, вертикаль через padding/gap. */
    .about__card--docs { height: auto; min-height: 320px; padding: 8px; }
    .about__docs-inner {
        height: auto; min-height: 304px;
        padding: 32px 24px 105px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;                    /* заголовок→текст = 6 (фрейм #626:24926) */
        text-align: center;
        background: #fefefe url('/assets/img/home/m-about-docs-box.webp') center bottom / 100% auto no-repeat;
    }
    .about__docs-image { display: none; }
    .about__docs-title,
    .about__docs-text { position: static; max-width: 100%; text-align: center; }
    .about__docs-link {
        position: static; top: auto; bottom: auto; left: auto; right: auto;
        margin-top: 10px;            /* 6 (gap) + 10 = 16 от текста (фрейм #626:24925 gap16) */
        text-align: center;
    }
}

/* ===========================================================
   PROJECTS (Наши проекты) — строго по nashi-proekty.svg
   1320×572 viewBox, все rect/path замерены и наложены.
   Цвета path fills из SVG: #12131A ink ×4, #6B7280 muted ×10, #1E213D navy ×1.
   Размеры шрифтов получены из bounding-box path'ов.
   =========================================================== */
.projects {
    padding: 60px 0;
    background: var(--c-bg);
}

.projects__inner {
    max-width: 1368px;            /* контент-зона 1320 + 2×24 padding */
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* Шапка: title слева сверху (path y=10), subtitle ниже (path y=62),
   CTA «Все проекты» справа сверху (rect y=12 w=151 h=56) */
.projects__head {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "title cta" "subtitle cta";
    align-items: start;
    column-gap: 24px;
    margin-bottom: 32px;
}
.projects__title    { grid-area: title;    align-self: end; }
.projects__subtitle { grid-area: subtitle; align-self: start; }
.projects__cta      { grid-area: cta;      align-self: center; justify-self: end; }

.projects__title {
    /* Manrope Bold 700, 40 (path h=38.4), #12131A ink */
    margin: 0;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #12131A;
}

.projects__subtitle {
    /* Manrope Medium 500, 18 (path h=17.6), #6B7280 muted */
    margin: 14px 0 0;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #6B7280;
}

/* .podbor__more — «Показать ещё» под сеткой подбора: то же оформление, но <button> и по центру */
.projects__cta,
.podbor__more,
.dp__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 32px;
    background: #F4F1EB;
    color: #1E213D;
    border-radius: 8px;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 600;
    margin: 0 8px;
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    transition: background-color .15s ease;
}

.projects__cta:hover,
.podbor__more:hover,
.dp__more:hover { background: #f1e4cb; }

/* Кнопке-элементу нужны сброс рамки и курсор */
.podbor__more,
.dp__more { border: 0; cursor: pointer; }
.podbor__more[hidden],
.dp__more[hidden] { display: none; }
.podbor__more:disabled { opacity: .6; cursor: default; }

.podbor__more-wrap,
.dp__more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.projects__grid {
    /* 3 × 429 + 2 × 16 = 1319 */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;     /* каждая карточка имеет свою высоту, не растягивается под соседнюю */
    gap: 16px;
}

/* === Карточка ЖК (429×459 white rx=12) — natural flow в padding ====== */
.project-card,
.project-card * {
    text-decoration: none !important;  /* карточка <a> — убираем подчёркивание/strikethrough детей */
}

.project-card {
    position: relative;
    height: 459px;              /* фикс — card никогда не растёт, rooms = absolute overlay */
    background: #fff;
    border-radius: 12px;
    border: 1px solid #E5E5E5;
    padding: 8px 8px 88px 8px;  /* 88 снизу = место под absolute price-row */
    box-sizing: border-box;
    font-family: Manrope, system-ui, sans-serif;
    color: inherit;
    display: block;
}

.project-card__spacer { display: none; }

/* Фото 413×240 в шапке карточки */
.project-card__photo {
    width: 100%;
    height: 240px;
    border-radius: 8px;
    overflow: hidden;
    background: #fefefe;
    margin-bottom: 24px;        /* gap до title */
    flex-shrink: 0;
}

.project-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* === Текст в естественном потоке внутри padding === */

.project-card__name {
    margin: 0 32px;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 700;
    font-size: 22px;            /* Figma H3 (426:13) = Bold 22/1.3 */
    line-height: 1.3;
    color: #12131A;
}

.project-card__specs {
    margin: 8px 32px 0;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #6B7280;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Price-row АБСОЛЮТНО прижат к низу карточки (height=459 фикс) */
.project-card__price-row {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 32px;
    padding-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid #ebebeb;
}

.project-card__price {
    margin: 0;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 600;           /* Figma style_509e5c90 = SemiBold 600/16/1.5 */
    font-size: 16px;
    line-height: 1.5;
    color: #6B7280;
    white-space: nowrap;
}

.project-card__chev {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: #6B7280;
    transition: transform .35s ease;
}

.project-card__chev svg { width: 14px; height: 8px; }

/* Hover: одинаковая shadow на card+rooms → визуально единый блок.
   Card теряет нижние углы (rooms их продолжает). */
.project-card {
    transition: box-shadow .25s ease, border-radius .25s ease;
}

.project-card:hover {
    border-radius: 12px 12px 0 0;
    box-shadow: 0 24px 64px -16px rgba(15, 23, 42, 0.18), 0 8px 16px -8px rgba(15, 23, 42, 0.08);
    z-index: 2;
}

.project-card.empty-rooms  .project-card__price-row {
    border-color: transparent;
}

.project-card.empty-rooms:hover {
    border-radius: 12px;
}

.project-card:hover .project-card__chev {
    transform: rotate(180deg);
    color: #12131A;
}

/* Rooms — продолжение карточки. ABSOLUTE top:100% — стыкуется впритык.
   Same width, same bg, same border-radius bottom → визуально один блок. */
.project-card__rooms {
    position: absolute;
    left: -1px;
    right: 0;
    top: 100%;
    margin-top: -1px;            /* убираем гэп пиксельный между card-bottom и rooms-top */
    background: #fff;
    border-radius: 0 0 12px 12px;
    padding: 0 24px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .35s ease, opacity .2s ease, padding .35s ease, box-shadow .25s ease;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    pointer-events: none;
    z-index: 2;
}

.project-card:hover .project-card__rooms {
    max-height: 400px;
    opacity: 1;
    padding: 0 24px 24px;
    pointer-events: auto;
    box-shadow: 0 24px 64px -16px rgba(15, 23, 42, 0.18), 0 8px 16px -8px rgba(15, 23, 42, 0.08);
    border-left: 1px solid #E5E5E5;
    border-right: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
    width: calc(100% + 2px);
    box-sizing: border-box;
}

.project-card__room {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    column-gap: 16px;
    padding: 10px 0;
    border-top: 1px solid #fefefe;
    font-family: Manrope, system-ui, sans-serif;
    font-size: 14px;
}

.project-card__room:first-of-type { border-top: 0; }

.project-card__room-label {
    font-weight: 600;
    color: #A57766;            /* синие ссылки 1/2/3 комнатная */
}

.project-card__room-area {
    font-weight: 500;
    color: #6B7280;
}

.project-card__room-price {
    font-weight: 700;
    color: #12131A;
    white-space: nowrap;
}

.project-card__total {
    display: block;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #fefefe;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #6B7280;
}

/* Hover расширение — БЕЗ анимации высоты карточки.
   Card grows естественно через max-height rooms transition. */

/* === Статусы — остаются absolute (overlay на фото) === */
.project-card__status {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 500;
    color: #6B7280;
}

.project-card__status--done {
    top: 32px;
    left: 32px;
    padding: 8px 16px;          /* Figma EL-62744aaa layout 8×16 */
    background: #FFFFFF;
    border-radius: 4px;
    font-weight: 500;           /* style_d981e3a8 = Medium 500 */
    font-size: 14px;
    line-height: 1.5;
    color: #6B7280;
}

.project-card__status--building {
    top: 163px;
    left: 32px;
    width: 85px;
    height: 85px;
    background: #D9D9D9;
    border-radius: 0;
    font-size: 12px;
}

/* PROJECTS — адаптив (мобайл-фрейм 360: карточки в столбик) */
@media (max-width: 1199.98px) {
    .projects__grid { grid-template-columns: repeat(2, 1fr); }
}
/* ===== PROJECTS — мобайл 1:1 с фреймом 360 (#626:24931) ===== */
@media (max-width: 767.98px) {



    /* Секция full-bleed (карточки x0 360), CTA «Все проекты» — после карточек (фрейм) */
    .projects__inner { max-width: none; padding: 0; display: flex; flex-direction: column; align-items: stretch; }
    .projects__head { display: contents; }           /* распускаем, чтобы упорядочить cta после сетки */
    .projects__title {
        order: 1; align-self: stretch; justify-self: start; text-align: left;
        font-size: 32px; padding: 0;
    }
    .projects__subtitle {
        order: 2; align-self: stretch; justify-self: start; text-align: left;
        padding: 0; margin: 8px 0 0;
    }
    .projects__grid { order: 3; grid-template-columns: 1fr; margin-top: 24px; }
    .projects__cta { order: 4; align-self: flex-start; margin: 48px 0 0; }

    /* Карточка проекта — фрейм #626:24934: vertical HUG (высота AUTO), всё в потоке.
       Снимаем десктопный height:459 + price-row position:absolute. */
    .project-card {
        height: auto;
        padding: 8px 0 24px;          /* фрейм: 8 / 0 / 24 */
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .project-card__photo {
        width: auto; height: 240px;
        margin: 0 9px 24px;           /* инсет 9 (фото 342), gap 24 до названия */
    }
    .project-card__name  { margin: 0 16px; }       /* инсет 16 (контент 328) */
    .project-card__specs { margin: 6px 16px 0; }   /* gap 6 (фрейм #626:24941) */
    .project-card__price-row {
        position: static; left: auto; right: auto; bottom: auto;
        margin: 16px 16px 0;          /* gap 16 = divider (фрейм #626:24940) */
        padding-top: 16px;
    }
    .project-card__rooms { display: none; }        /* hover-оверлей — не для моб */
}

/* ===========================================================
   BENTO «Почему «Красивый город»» — строго по pochemu-krasivyi-gorod.svg
   viewBox 0 0 1320 656. 5 карточек bento (3 сверху + 1 широкая + 1 справа).
   gap 16, rx=12, все карточки white кроме card 4 (dark photo + 0.2 overlay).
   Из path fills: #12131A ink ×3 (заголовки top), #A57766 primary ×5 («Подробнее»),
   white ×n (текст в dark card + иконки SVG).
   =========================================================== */
.bento {
    padding: 60px 0;
    background: var(--c-bg);
}

.bento__inner {
    max-width: 1368px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.bento__title {
    /* Section H2 (взят из full.svg) — Manrope Bold 700/40 ink */
    margin: 0;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #12131A;
}

.bento__subtitle {
    margin: 14px 0 0;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #6B7280;
}

/* === Сетка точно из SVG pochemu-krasivyi-gorod.svg (1320×656):
       Row 1: 430 + 16 + 429 + 16 + 429 = 1320
       Row 2: 875 (span col1+col2) + 16 + 429 = 1320
       Row gap: 16; row heights 320+16+320 = 656 */
.bento__grid {
    margin-top: 32px;
    display: grid;
    grid-template-columns: 430fr 429fr 429fr;
    grid-template-rows: 320px 320px;
    gap: 16px;
}

/* === Текст под блоком преимуществ (задаётся в карточке ЖК) === */
.bento__note {
    margin-top: 32px;
}

.bento__note-text {
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
    color: #6B7280;
}

.bento__note-text + .bento__note-text { margin-top: 16px; }

/* Текст пишется визуальным редактором — оформляем то, что он умеет вставлять */
.bento__note-text > :first-child { margin-top: 0; }
.bento__note-text > :last-child { margin-bottom: 0; }
.bento__note-text p { margin: 0 0 12px; }
.bento__note-text h2,
.bento__note-text h3 {
    margin: 20px 0 10px;
    font-weight: 700;
    color: #1E213D;
}
.bento__note-text h2 { font-size: 22px; line-height: 1.3; }
.bento__note-text h3 { font-size: 18px; line-height: 1.35; }
.bento__note-text ul,
.bento__note-text ol { margin: 0 0 12px; padding-left: 20px; }
.bento__note-text li { margin-bottom: 6px; }
.bento__note-text strong,
.bento__note-text b { font-weight: 700; color: #1E213D; }
.bento__note-text a { color: #A57766; text-decoration: underline; }
.bento__note-text a:hover { color: #8C6252; }

/* Скрытая часть: высота анимируется через grid-template-rows, без измерений в JS */
.bento__note-more {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s ease, opacity .35s ease, margin-top .35s ease;
    opacity: 0;
}

.bento__note-more-inner {
    overflow: hidden;
    min-height: 0;
}

.bento__note-more.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 16px;
}

/* Кнопка — оформление кнопок сайта («Показать ещё» в подборе), но компактнее и со стрелкой */
.bento__note-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    height: 48px;
    padding: 0 24px;
    border: 0;
    cursor: pointer;
    background: #F4F1EB;
    color: #1E213D;
    border-radius: 8px;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
    transition: background-color .15s ease;
}

.bento__note-btn:hover { background: #f1e4cb; }

.bento__note-btn-ic { transition: transform .3s ease; }
.bento__note-btn.is-open .bento__note-btn-ic { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .bento__note-more,
    .bento__note-btn-ic { transition: none; }
}

/* === Базовая карточка bento === */
.bento__card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 12px;
    text-decoration: none;
    border: 1px solid #e5e5e5;
    color: inherit;
    cursor:pointer;
    font-family: "Manrope", sans-serif;
}

/* === Layout позиции (по data-attribute --posN) === */
.bento__card--pos1 { grid-column: 1;          grid-row: 1; }
.bento__card--pos2 { grid-column: 2;          grid-row: 1; }
.bento__card--pos3 { grid-column: 3;          grid-row: 1; }
.bento__card--pos4 { grid-column: 1 / span 2; grid-row: 2; }
.bento__card--pos5 { grid-column: 3;          grid-row: 2; }

/* === Текст карточки: title CENTER сверху, link под title.
   Figma style_SZ65AR = Manrope Bold 700 / 26 / lh 130% / CENTER
   Figma Link        = Manrope SemiBold 600 / 14 / lh 150% / #A57766 */
.bento__card-text {
    position: absolute;
    top: 40px;
    left: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 3;
}

.bento__card-title {
    /* Figma style_SZ65AR — Manrope Bold 700 / 26 / line-height 130% (1.3) */
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.3;
    color: #12131A;
}

.bento__card-link {
    /* Figma Link — Manrope SemiBold 600 / 14 / line-height 150% (1.5) / #A57766 */
    margin-top: 8px;
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
    color: #A57766;
    text-decoration: none;
}

/* === Картинка в default/gradient карточках ===
   В SVG прикреплены к низу карточки, центрированы.
   Card 1 (pos1): 322×167 at (54, 153) — 75% × 52%
   Card 2 (pos2): 362×188 at (40, 132) — 84% × 59%
   Card 3 (pos3): 400×208 at (15, 112) — 93% × 65%
   Card 5 (pos5): 400×201 at (15, 119) — 93% × 63% */
.bento__card-image {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    object-fit: contain;
    object-position: center bottom;
    z-index: 1;
    pointer-events: none;
}

.bento__card--pos1 .bento__card-image { width: 100%; height: 50%;    bottom: 15px; }
.bento__card--pos2 .bento__card-image { width: 100%; height: 50%;    bottom: 15px; }
.bento__card--pos3 .bento__card-image { width: 100%; height: 50%;    bottom: 15px; }

/* Card 5 (Бизнес-класс): брелок (горизонтальный) снизу по центру — Figma #626:19963 */
.bento__card--pos5 .bento__card-image {
    width: 85%;
    height: auto;
    object-fit: contain;
    object-position: center bottom;
}

/* === Card 4 (feature) — широкая 875×320 с фото + чёрный overlay 20% === */
.bento__card--feature {
    background: #1E213D;
    color: #fff;
}

.bento__card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.bento__card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}

/* === pos4 (feature) "4 проекта в городе" — точные позиции по 1.html (Frame 2087327511) === */
.bento__card--feature .bento__card-text {
    /* Frame at top:32 from card-top, width 588 centered, text-align center */
    position: absolute;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: 588px;
    max-width: calc(100% - 64px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 3;
}

.bento__card--feature .bento__card-title {
    color: #ffffff;
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.3;        /* 33.80/26 = 1.3 per 1.html */
}

.bento__card--feature .bento__card-link {
    color: #ffffff;
    opacity: .9;
    margin-top: 8px;
}

/* SVG с лого 3 ЖК — позиционирован под title с gap 40 (по 1.html Frame 2085664078) */
.bento__card--feature .bento__card-logos {
position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    max-width: calc(100% - 96px);
    height: auto;
    z-index: 2;
    pointer-events: none;
}

/* === Адаптив === */
@media (max-width: 1199.98px) {
    .bento__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
    .bento__card--pos1 { grid-column: 1; grid-row: 1; }
    .bento__card--pos2 { grid-column: 2; grid-row: 1; }
    .bento__card--pos3 { grid-column: 1; grid-row: 2; }
    .bento__card--pos4 { grid-column: 1 / span 2; grid-row: 3; }
    .bento__card--pos5 { grid-column: 2; grid-row: 2; }
    .bento__card { min-height: 300px; }
}

/* ===== BENTO «Почему» — мобайл 1:1 (#626:24983): full-bleed, столбик карточек h320 ===== */
@media (max-width: 767.98px) {
    .bento { padding: 48px 0; }
    /* full-bleed секция (фрейм x0 360), заголовок flush */
    .bento__inner { max-width: none; padding: 0; }
    .bento__title { font-size: 32px; }
    .bento__subtitle { font-size: 18px; margin-top: 8px; }

    .bento__grid {
        margin-top: 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .bento__note { margin-top: 24px; padding: 0 16px; }
    .bento__note-text { font-size: 15px; }
    .bento__note-btn { width: 100%; justify-content: center; }

    .bento__card--pos1,
    .bento__card--pos2,
    .bento__card--pos3,
    .bento__card--pos4,
    .bento__card--pos5 { grid-column: auto; grid-row: auto; }

    /* Карточка — фрейм #626:24984: контент в ПОТОКЕ (текст сверху, фото снизу).
       Снимаем десктопный absolute у card-text/card-image. min-height вместо прибитой 320. */
    .bento__card {
        height: auto; min-height: 320px;
        display: flex; flex-direction: column; align-items: center;
        padding: 32px 16px 0;
    }
    .bento__card-text {
        position: static; top: auto; left: auto; right: auto; transform: none;
    }
    .bento__card-title { font-size: 26px; }
    .bento__card-image,
    .bento__card--pos1 .bento__card-image,
    .bento__card--pos2 .bento__card-image,
    .bento__card--pos3 .bento__card-image,
    .bento__card--pos5 .bento__card-image {
        position: static; left: auto; bottom: auto; transform: none;
        margin-top: auto;             /* прижать фото к низу (фрейм: space-between) */
                margin-bottom: 15px;
                width: 100%; height: 164px;
        object-fit: contain; object-position: center bottom;
    }

    /* feature-карточка (тёмная): фон-картинка остаётся absolute (это фон), текст/лого — в поток */
    .bento__card--feature {
        height: auto; min-height: 480px;
        justify-content: space-between;
        padding: 64px 24px;
    }
    /* фон-картинка (.bento__card-bg) и overlay остаются inset:0 — это фон;
       текст/лого — position:relative (НЕ static), чтобы z-index держал их над фото; без top/bottom px */
    .bento__card--feature .bento__card-text {
        position: relative; top: auto; left: auto; right: auto; bottom: auto;
        transform: none; width: auto; max-width: none;
    }
    .bento__card--feature .bento__card-title { font-size: 32px; }
    .bento__card--feature .bento__card-logos {
        position: relative; top: auto; bottom: auto; left: auto; right: auto;
        transform: none; width: auto; max-width: 100%; margin-top: auto;
    }
}

/* ===========================================================
   FEATURE «Квартиры с интеллектом» — слайдер 3 фона, full-width
   По kvartiry-s-intelektom.svg (1920×980).
   3 rect pattern = 3 фото, + rect black opacity 0.2 (затемнение).
   Контролы: 4 таб-кнопки слева + 2 стрелки 56×56 rx=8 #fefefe справа на y=804.
   =========================================================== */
.feature-slider {
    position: relative;
    isolation: isolate;
    height: 700px;
    overflow: hidden;
}

.feature-slider__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.feature-slider__bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity .7s ease;
}

.feature-slider__bg img.is-active { opacity: 1; }

.feature-slider__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);   /* SVG black fill-opacity 0.2 */
    z-index: -1;
    pointer-events: none;
}

.feature-slider__inner {
    position: relative;
    height: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 120px 0 0 0;       /* eyebrow начинается y=120 от top */
    box-sizing: border-box;
}

/* Текстовый блок — natural flow.
   Figma styles (#426:481/482/483):
   - eyebrow: Body S = Manrope Medium 14/1.5 white
   - title:   H2 = Manrope Bold 40/1.1 white
   - desc:    Body L = Manrope Medium 18/1.4 white */
.feature-slider__eyebrow {
    display: inline-block;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: #ffffff;
}

.feature-slider__title {
    margin: 16px 0 0;
    max-width: 720px;
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.1;
    color: #ffffff;
}

.feature-slider__desc {
    margin: 24px 0 0;
    max-width: 587px;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #ffffff;
}

/* Панель управления слайдером — снизу, full-width контейнера 1320 */
.feature-slider__controls {
    position: absolute;
    /* стрелки rect y=804 h=56 → bottom: 980 - 860 = 120 */
    bottom: 120px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.feature-slider__tabs {
    display: flex;
    align-items: center;
    gap: 26px;
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
}

.feature-slider__tabs::-webkit-scrollbar { display: none; }

.feature-slider__tab {
    /* path #4-#7 y=826 h=15.4 → 18 Medium white */
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    transition: color .15s ease;
}

.feature-slider__tab:hover { color: #fff; }

.feature-slider__tab.is-active {
    color: #fff;
    font-weight: 600;
}

.feature-slider__nav {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

.feature-slider__nav-btn {
    /* rect x=1500/1564 y=804 w=56 h=56 rx=8 #fefefe
       chevron path stroke=#6B7280 sw=1.5 */
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 8px;
    background: #fefefe;
    color: #6B7280;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background-color .15s ease;
}

.feature-slider__nav-btn:hover { background: #E7E9EC; }

.feature-slider__nav-btn svg { display: block; width: 6px; height: 9px; }
.feature-slider__nav-btn[data-feature-next] svg { transform: scaleX(-1); }

/* ===========================================================
   PODBOR (Подбор квартир) — по podbor-kvartir.svg (1321×1482).
   Хедер + 4 фильтра + 6 карточек квартир (3×2 grid).
   Цвета path: #12131A ink, #6B7280 muted, #AE7A67 blue (цена),
   #1E213D navy (кнопка), white (текст в кнопке/бейдж).
   =========================================================== */
.podbor {
    padding: 120px 0;
    background: var(--c-bg);
}

.podbor__inner {
    max-width: 1368px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* Хлебные крошки (страница «Подбор квартир» /catalog) — Figma #626:28322:
   Manrope Medium 14, #6B7280, «Главная» opacity .4, gap 8, 24px до заголовка */
.podbor__crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: #6B7280;
}
.podbor__crumbs a { color: #6B7280; opacity: .4; text-decoration: none; }
.podbor__crumbs a:hover { opacity: .7; }

/* Header — grid с CTA справа */
.podbor__head {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "title cta" "subtitle cta";
    align-items: start;
    column-gap: 24px;
    margin-bottom: 32px;
}

.podbor__title {
    grid-area: title;
    margin: 0;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #12131A;
}

.podbor__subtitle {
    grid-area: subtitle;
    margin: 8px 0 0;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #6B7280;
}

.podbor__cta {
    grid-area: cta;
    align-self: center;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 32px;
    background: #F4F1EB;
    color: #1E213D;
    border-radius: 8px;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
}

.podbor__cta:hover { background: #f1e4cb; }

/* Filter bar — 4 бокса 318×98 rx=8 white, gap 16 */
/* SVG: 4 бокса 318×98 rx=8 white, gap=16 */
.podbor__filters {
    /* Все фильтры в одну строку: range шире (внутри слайдер + числа), выпадашки уже.
       Веса, а не фикс. колонки — ширина подстраивается под любое число фильтров. */
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}
.podbor__filters > .podbor__filter { min-width: 0; }
.podbor__filters > .podbor__filter--dropdown { flex: 0.8 1 150px; }
.podbor__filters > .podbor__filter--range    { flex: 1.2 1 185px; }

.podbor__filter {
    position: relative;
    min-height: 98px;
    background: #F4F1EB;
    border-radius: 8px;
    padding: 16px 28px 16px 24px;   /* Figma #626:19427 */
    box-sizing: border-box;
    font-family: "Manrope", sans-serif;
}

/* Label "Проект" / "Стоимость, млн ₽" / ... — Body S = Medium 14 / 1.5 muted */
.podbor__filter-label {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: #6B7280;
}

/* === DROPDOWN-вариант (Box 1 "Все проекты", Box 4 "Все") === */
.podbor__filter--dropdown .podbor__filter-trigger {
    margin-top: 20px;       /* Figma gap label→value = 20 */
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}

.podbor__filter-value {
    /* Figma Body L: Manrope Medium 18 / line-height 140% / fill #12131A */
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #12131A;
    text-align: left;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.podbor__filter-chev {
    width: 8px;
    height: 4px;
    flex-shrink: 0;
    transition: transform .2s;
}

.podbor__dropdown {
    position: relative;
}

.podbor__dropdown.is-open .podbor__filter-chev {
    transform: rotate(180deg);
}

/* Меню опций dropdown'а — fade+slide без max-height transition
   (max-height фиксирована → scrollbar НЕ мигает во время анимации) */
.podbor__dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: -24px;
    right: -24px;
    z-index: 10;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(18, 19, 26, .12);
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    /* Скрыто через opacity + transform; max-height не анимируется */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
        opacity   .22s ease,
        transform .22s ease,
        visibility 0s linear .22s;
}

.podbor__dropdown.is-open .podbor__dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        opacity   .22s ease,
        transform .22s ease,
        visibility 0s linear 0s;
}

.podbor__dropdown-option {
    padding: 10px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #12131A;
    transition: background .15s;
}

.podbor__dropdown-option:hover {
    background: #fefefe;
}

.podbor__dropdown-option.is-active {
    background: #AE7A67;
    color: #ffffff;
}

.podbor__dropdown-option.is-disabled {
    color: #CBCBCC;
    cursor: not-allowed;
    pointer-events: none;
}

.podbor__dropdown-option.is-disabled:hover {
    background: transparent;
}

/* === RANGE-вариант (Box 2 Стоимость, Box 3 Площадь) === */
.podbor__filter--range .podbor__filter-values {
    /* По Figma value line-box top y=49 от карточки.
       padding-top:22 + label-line-box (14×1.2=17) + margin-top = 49 → margin-top: 10 */
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.podbor__filter-num {
    /* Figma Body L: Manrope Medium 18 / line-height 140% / fill #12131A */
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #12131A;
}

/* Range slider — SVG: track 266×2 #CBCBCC, active 137×2 #AE7A67, 2 thumb 8×8 rx=4 #1E213D.
   Track в SVG на y=77 от верха бокса (gap 9 от низа цифр).
   bottom = 98 (box) - 74 (range top) - 8 (range height) = 16. */
.podbor__filter-range {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 16px;
    height: 8px;
}

.podbor__filter-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 3px;
    height: 2px;
    background: #CBCBCC;
}

.podbor__filter-track-active {
    position: absolute;
    top: 3px;
    height: 2px;
    background: #AE7A67;
}

/* Thumb: сам <button> 28×28 ПРОЗРАЧНЫЙ — это touch-target (мобилка тащит за всю площадь).
   Видимая точка 8×8 #1E213D (как в SVG) рисуется через ::before по центру.
   Центрирование:
     inline left = calc(X% - 4px)  (ставит JS)
     CSS margin-left = -10   →  визуальный левый край = X% - 14
     width 28 → визуальный центр = X% - 14 + 14 = X%
   Вертикаль:
     range_top = box.height - bottom - height = 98 - 16 - 8 = 74
     button.top = -10 → абсолютно y = 64
     button.center.y = 64 + 14 = 78  (track center y = 74+3+1 = 78) ✓ */
.podbor__filter-thumb {
    position: absolute;
    top: -10px;
    width: 28px;
    height: 28px;
    margin: 0 0 0 -10px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: grab;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
}

.podbor__filter-thumb::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    background: #1E213D;
    border-radius: 4px;
    transition: box-shadow .15s;
}

.podbor__filter-thumb:hover::before {
    box-shadow: 0 0 0 6px rgba(31, 50, 83, .12);
}

.podbor__filter-thumb:active {
    cursor: grabbing;
}

/* Пустое состояние при фильтре */
.podbor__empty {
    grid-column: 1 / -1;
    padding: 48px 24px;
    text-align: center;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #6B7280;
    background: #fefefe;
    border-radius: 12px;
}

/* === Divider line + "Найдено 11 квартир" под фильтрами === */
.podbor__results-line {
    height: 1px;
    background: #CBCBCC;
    margin: 0 0 24px;
}

.podbor__results {
    margin: 0 0 24px;
    font-family: "Manrope", sans-serif;
    font-weight: 500;            /* Body S = Medium 500 */
    font-size: 14px;
    line-height: 1.5;
    color: #6B7280;
}

/* === Сетка карточек квартир 3×2 (429×585 каждая, gap 16) === */
.podbor__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 16px;
}

/* ============================================================
   .podbor-card (429×585) — natural flow по podbor-kvartir.svg
   Только badge — absolute (overlay на фото). Всё остальное в потоке.
   ============================================================ */
.podbor-card {
    position: relative;          /* для badge absolute */
    background: #fff;
    border-radius: 12px;
    padding: 8px 8px 24px 8px;
    box-sizing: border-box;
    font-family: Manrope, system-ui, sans-serif;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: box-shadow .25s ease, transform .25s ease;
}
.podbor-card,
.podbor-card * { text-decoration: none; }

.podbor-card:hover {
    box-shadow: 0 12px 32px rgba(18, 19, 26, 0.08);
    transform: translateY(-2px);
}

/* Фото 413×240 (8 inset top/left) — в natural flow. Badge ABSOLUTE внутри photo */
.podbor-card__photo {
    position: relative;
    width: 100%;
    height: 240px;
    border-radius: 8px;
    overflow: hidden;
    background: #fefefe;
}

.podbor-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Бейдж — absolute поверх фото (внутри .podbor-card__photo) */
.podbor-card__badge {
    position: absolute;
    top: 24px;
    left: 24px;
    padding: 8.5px 16px;
    background: #fff;
    border-radius: 4px;
    color: #6B7280;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    z-index: 2;
}

/* Head — flex row: eyebrow+title слева, AVTOGRAF navy brand справа.
   По kartochka.svg: navy box 85×56 rx=8 #1E213D at (x=311, y=264). */
.podbor-card__head {
    margin: 16px 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.podbor-card__head-text { flex: 1 1 auto; min-width: 0; }

/* По svg/1.html: eyebrow «1-комнатная, 38 м²» — 16 SemiBold(600)/24 muted */
.podbor-card__eyebrow {
    display: block;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    color: #6B7280;
}

/* Title «ЖК Дом на Семигорской» — 20 Bold(700)/26 ink */
.podbor-card__title {
    margin: 6px 0 0;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    color: #12131A;
}

/* Navy brand-badge с SVG-логотипом ЖК из БД (Complex.logo) — 85×56 rx=8 #1E213D */
.podbor-card__brand {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 85px;
    height: 56px;
    padding: 8px;
    border-radius: 8px;
    background: #1E213D;
    box-sizing: border-box;
}

.podbor-card__brand img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* Фирменные SVG-логотипы ЖК — тёмные по исходнику, тонируем в белый на тёмной плашке */
.podbor-card__brand img[src$=".svg"] { filter: brightness(0) invert(1); }

/* Separator <hr> — outline 1px #fefefe line из 1.html (Line 2) */
.podbor-card__sep {
    margin: 20px 24px 0;
    border: 0;
    border-top: 1px solid #fefefe;
    height: 0;
}

/* Desc (под separator, вторая строка type+area над ценой) — 16 SemiBold(600)/24 muted */
.podbor-card__desc {
    display: block;
    margin: 16px 24px 0;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    color: #6B7280;
}

/* Price «9 259 999 ₽» — 22 Bold(700)/28.6 BLUE #AE7A67 */
.podbor-card__price {
    margin: 6px 24px 0;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    color: #AE7A67;
    white-space: nowrap;
}

/* 6 spec-боксов 115×62 outlined #CBCBCC, grid 3×2 gap 9 */
.podbor-card__specs {
    margin: 16px 24px 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.podbor-card__spec {
    height: 62px;
    border: 1px solid #CBCBCC;
    border-radius: 3.5px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.podbor-card__spec-value {
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    color: #12131A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.podbor-card__spec-label {
    margin-top: 2px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: #6B7280;
}

/* ===========================================================
   MAP «Волгоград — проекты в разных районах»
   По proekty-v-raznyx-rayonax.svg (header 811×191) + Яндекс-карта плейсхолдер
   Title 40 Bold ink (h=39.7), Subtitle 18 Medium muted (h=42.6, 2 строки).
   4 таба: active 139×53 rx=4 fill #AE7A67 + white;
          inactive 121/132/113×52 rx=3.5 stroke #6B7280 + muted text.
   gap 8.5 между табами. Текст табов 14 Medium.
   =========================================================== */
.map-section {
    padding: 60px 0;
    background: #ffffff;
}

.map-section__inner {
    max-width: 1368px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.map-section__title {
    /* path #1 h=39.7 ink */
    margin: 0;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #12131A;
    max-width: 811px;
}

.map-section__subtitle {
    /* path #2 h=42.6 muted (2 строки 18 Medium) */
    margin: 13px 0 0;
    max-width: 811px;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #6B7280;
}

.map-section__tabs {
    /* Табы в строке (rect y=138). gap = 8.5 ≈ 8 */
    margin-top: 32px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.map-section__tab {
    /* tab outlined: padding 16×24, не фикс h=53 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    background: transparent;
    border: 1px solid #6B7280;
    border-radius: 4px;
    cursor: pointer;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: #6B7280;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.map-section__tab:hover {
    border-color: #AE7A67;
    color: #AE7A67;
}

.map-section__tab.is-active {
    /* rect 139×53 rx=4 fill #AE7A67, text white */
    background: #AE7A67;
    color: #fff;
    border-color: #AE7A67;
    border-radius: 4px;
}

/* Карта-рендер (Figma #626:20071 — 1320×580 radius 12, без бордера) */
.map-section__map {
    margin-top: 24px;
    width: 100%;
    height: 580px;
    border-radius: 12px;
    overflow: hidden;
    background: #fefefe;
}

.map-section__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ===========================================================
   FINISHES «Варианты отделок» — по varianty-otdelok.svg (1320×762)
   Header (40 Bold + 18 Medium muted)
   3 таба (active 131×53 rx=4 #AE7A67 white, inactive rx=4 white muted)
   Big card 1320×580: photo 755×564 + right panel со специфика 6 пунктов
   Bottom-left слайдера: 2 arrows + 4 dots
   =========================================================== */
/* ============================================================
   ВАРИАНТЫ ОТДЕЛОК (varianty-otdelok.svg) — viewBox 1320×762
   - Header h2 40Bold + subtitle 18Med
   - 3 таба y=113..166: active 131×53 #AE7A67 + 2 inactive WHITE 146/112
   - Main card 1320×580 rx=12 white:
       LEFT photo 755×564 rx=8 inset 8 (с слайдером overlay)
       gap 32
       RIGHT panel (x=795..1283):
         eyebrow 126×37 rx=4 #fefefe
         title H3 26 Bold ink
         6 specs (2 col × 3 row): icon 48×48 #1E213D + label/value
         description 14 Med muted
         button 225×56 rx=4 #AE7A67 "К квартирам в этой отделке"
   ============================================================ */
.finishes {
    padding: 60px 0;
}

.finishes__inner {
    max-width: 1368px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.finishes__head { margin-bottom: 30px; }

.finishes__title {
    margin: 0;
    padding-top: 10px;
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.2;
    color: #12131A;
}

.finishes__subtitle {
    margin: 8px 0 0;
    max-width: 800px;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #6B7280;
}

/* Табы 3 шт.: active 131×53 #AE7A67, inactive WHITE (rect fill=white в SVG, не stroked) */
.finishes__tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.finishes__tab {
    appearance: none;
    border: 0;
    padding: 16px 24px;
    background: #ffffff;
    color: #6B7280;
    border-radius: 4px;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    min-height: 53px;
    transition: background .2s, color .2s;
}

.finishes__tab:hover { color: #AE7A67; }

.finishes__tab.is-active {
    background: #AE7A67;
    color: #ffffff;
}

/* === Карточка-панель таба === */
.finishes__card {
    position: relative;
    display: none;
    width: 100%;
    height: 580px;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
}

.finishes__card.is-active { display: block; }

/* === LEFT: фото-слайдер 755×564 rx=8 inset 8px === */
.finishes__photo {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 755px;
    height: 564px;
    border-radius: 8px;
    overflow: hidden;
    background: #fefefe;
}

.finishes__photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity .35s ease;
}

.finishes__photo-img.is-active { opacity: 1; }

/* Слайдер контролы: 2 arrows слева + 4 dots ~по центру фото внизу */
.finishes__slider {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
}

.finishes__nav-btn {
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 8px;
    background: #fefefe;
    color: #6B7280;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .2s;
}

.finishes__nav-btn:hover { background: #E7E9EC; }

.finishes__nav-btn svg { display: block; width: 6px; height: 9px; }
.finishes__nav-btn[data-photo-next] svg { transform: scaleX(-1); }

.finishes__dots {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;     /* Figma: стрелки слева, точки справа (space-between) */
}

.finishes__dot {
    width: 10px;
    height: 10px;
    border: 0;
    padding: 0;
    border-radius: 2px;
    background: #fefefe;
    opacity: 0.4;
    cursor: pointer;
    transition: opacity .2s;
}

.finishes__dot.is-active { opacity: 1; }

/* === RIGHT: панель деталей (x=795..1283 в SVG) === */
.finishes__details {
    position: absolute;
    top: 32px;
    left: 795px;
    right: 32px;
    bottom: 32px;
    display: flex;
    flex-direction: column;
}

/* Eyebrow rect 126×37 rx=4 #fefefe + text 14 SB muted */
.finishes__eyebrow {
    align-self: flex-start;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 37px;
    padding: 0px;
    min-width: 126px;
    background: #fefefe;
    color: #6B7280;
    border-radius: 4px;
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
}

/* Title 26 Bold ink (H3 в Figma) */
.finishes__name {
    margin: 24px 0 0;
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
    color: #12131A;
}

/* 6 specs: 2 кол × 3 ряда, gap по SVG y=325/381/437 = 56px ряд */
.finishes__specs {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 8px;
}

.finishes__spec {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Иконка 48×48 — экспорт из Figma (навбокс #1E213D + глиф уже внутри svg) */
.finishes__spec-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}

.finishes__spec-icon img {
    display: block;
    width: 48px;
    height: 48px;
}

.finishes__spec-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Label muted 14 SB (cap ~10.5) */
.finishes__spec-label {
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    color: #6B7280;
}

/* Value ink 16 Med (cap ~11.8) */
.finishes__spec-value {
    margin-top: 2px;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    color: #12131A;
}

/* Описание варианта 14 Med muted, 2 строки */
.finishes__desc {
    margin: 20px 0 0;
    max-width: 488px;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: #6B7280;
}

/* Кнопка height 56 rx=4 #AE7A67 white text 14 SB (Figma #626:19642: padding 16×24, h fixed 56) */
.finishes__btn {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 24px;
    background: #AE7A67;
    color: #ffffff;
    border-radius: 4px;
    text-decoration: none;
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 14px;
    transition: background .2s;
}

.finishes__btn:hover { background: #9b6856; }

/* === Адаптив === */
@media (max-width: 1199.98px) {
    .finishes__card { height: auto; min-height: 580px; }
    .finishes__photo {
        position: relative;
        top: 0; left: 0;
        width: calc(100% - 16px);
        margin: 8px;
        height: 400px;
    }
    .finishes__details {
        position: relative;
        top: 0; left: 0; right: 0; bottom: 0;
        padding: 24px 15px;
    }
}

@media (max-width: 767.98px) {
    .finishes { padding: 48px 0; }
    /* full-bleed, заголовок flush, подзаголовок Bodу L 18 */
    .finishes__inner { max-width: none; padding: 0; }
    .finishes__title { font-size: 32px; }
    .finishes__subtitle { font-size: 18px; }
    /* Кнопки-табы → кастомный дропдаун (как в progress/docs/news).
       Селектор .finishes__inner ... повышает специфичность, чтобы перебить общий
       .finishes__select{display:none}, объявленный ниже по файлу (без медиа). */
    .finishes__tabs { display: none; }
    .finishes__inner .finishes__select { display: block; width: auto; margin: 24px 8px 0; }
    /* Порядок как во фрейме #626:25233: детали (цена/название/спеки) СВЕРХУ, фото СНИЗУ.
       .is-active перебивает display, поэтому целимся в активную карточку. */
    .finishes__card.is-active { display: flex; flex-direction: column; height: auto; min-height: 0; }
    .finishes__details { order: 1; }
    .finishes__photo { order: 2; height: 220px; }
    .finishes__specs { grid-template-columns: 1fr; }   /* 1 колонка ×6 (фрейм #626:25255) */
    /* кнопка: hug-ширина h56 (как кнопки во фрейме), отступ от текста 16, слева — не прилипает и не на всю ширину */
    .finishes__btn { width: auto; align-self: flex-start; margin-top: 16px; }
}

/* ===========================================================
   PAYMENT «Способы покупки» — по sposoby-pokupki.svg (1320×794)
   4 карточки: LEFT BIG синяя (541×656) + 3 right (430+318 top, 763 bottom)
   =========================================================== */
.payment {
    padding: 60px 0;
    background: var(--c-bg);
}

.payment__inner {
    max-width: 1368px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    position: relative;   /* контекст для абсолютной CTA (она в DOM после грида) */
}

.payment__head {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "title cta" "subtitle cta";
    align-items: start;
    column-gap: 24px;
    margin-bottom: 32px;
}

.payment__title {
    grid-area: title;
    margin: 0;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #12131A;
}

.payment__subtitle {
    grid-area: subtitle;
    margin: 8px 0 0;
    max-width: 600px;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #6B7280;
}

.payment__cta {
    /* В DOM кнопка идёт после .payment__grid; на десктопе прижимаем к верх-право у заголовка */
    position: absolute;
    top: 13px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 32px;
    background: #F4F1EB;
    color: #1E213D;
    border-radius: 8px;
    font-family: Manrope, system-ui, sans-serif;
    line-height: 1.5;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.payment__cta:hover { background: #f1e4cb; }

/* === GRID: SVG sposoby-pokupki.svg ===
   - col 541 (LEFT BIG BLUE — span rows 1-2 = 656 height)
   - col 430 (top-mid Рассрочка 430×320)
   - col 318 (top-right 100% оплата 318×320)
   - row 2 (bottom-wide Стандартная ипотека 763×320 = span cols 2-3) */
.payment__grid {
    display: grid;
    grid-template-columns: 541fr 430fr 318fr;
    grid-template-rows: 320px 320px;
    gap: 16px;
}

.payment__card {
    position: relative;
    background: #F4F1EB;
    border-radius: 12px;
    overflow: hidden;
    font-family: "Manrope", sans-serif;
}

.payment__card:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.payment__card:nth-child(2) { grid-column: 2; grid-row: 1; }
.payment__card:nth-child(3) { grid-column: 3; grid-row: 1; }
.payment__card:nth-child(4) { grid-column: 2 / span 2; grid-row: 2; }

/* ============================================================
   CARD 1 (LEFT BIG BLUE 541×656) — слайдер ипотечных программ
   Фон по SVG (5 слоёв):
     1. solid #A57766 fallback
     2. paint0_linear (vertical y=138→794): #048CBD → #05699C
     3. paint1_radial (center 589,75 rotate90 scale 784×1061):
        #70A6FF → #0029DB at 0.905 — glow из правого-верха ВНЕ карточки
     4. pattern0: фото семьи (mix-blend-mode: luminosity)
     5. paint2_radial (center 331.5,466.5 scale 715×771):
        transparent 0.38 → #3E86FC 1.0 — vignette (свечение синим от краёв)

   Перевод координат в CSS (карточка 541×656):
     - paint1_radial center: cx=589/541=108.9%, cy=(75-138)/656=-9.6%
       размеры ellipse: rx=1061/541=196%, ry=784/656=119%
     - paint2_radial center: cx=331.5/541=61%, cy=(466.5-138)/656=50%
       размеры: rx=1061/541=196% (после rotate90), ry=715/656=109%
   ============================================================ */
/* Точная сборка LEFT BIG по it-ipoteka.svg (6 слоёв, см. ниже).
   Layer 1+2+3 — background; Layer 4 — <img>; Layer 5 — ::after с blur'ом. */

/* Layer 1 (solid #A57766) + Layer 2 (paint0_linear vertical) +
   Layer 3 (paint1_radial из (108.9%, -9.6%), эллипс 196% × 119%, #70A6FF → #0029DB at 90.5%) */
.payment__card--main {
    background: linear-gradient(145deg, #464670, #24243E);
    color: #ffffff;
    position: relative;
}


.payment__card--main::before {
    content:'';
position: absolute;
width: 200vw;
    height: 200vw;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
pointer-events: none;
background: radial-gradient(50% 63.6% at 50% 50%, rgba(36, 36, 62, 0) 38.48%, #24243E 100%);
filter: blur(78.8026px);
backdrop-filter: blur(9.5779px);
}

.payment__card--main::after {
    content:'';
position: absolute;
width: 200vw;
    height: 200vw;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
pointer-events: none;
background: radial-gradient(78.74% 100% at 50% 0%, #525292 0%, #24243E 90.48%);

}

/* Композит из Figma (mask group #626:18973): фото пары + синий градиент + radial-glow запечены.
   Используем как фон карточки на весь размер (1:1 с макетом). */
.payment__card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}

/* Vignette/glow запечены в композит-фон (#626:18973) — отдельный слой не нужен */

/* Slides wrapper */
.payment__slides {
    position: relative;
    inset: 0;
    z-index: 2;
    background: linear-gradient(145deg, #464670, #24243E);
}




.payment__slide {
    position: absolute;
    inset: 0;
    padding: 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease;
}

.payment__slide.is-active {
    opacity: 1;
    visibility: visible;
}

/* Бейдж "Ипотека" — по 1.html Frame 2087327473:
   padding 8 16, border-radius 4, outline 1px white, transparent bg,
   text Manrope Medium 14/1.5 (21px) white */
.payment__slide .payment__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 1px solid #ffffff;
    border-radius: 4px;
    background: transparent;
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 24px;        /* badge.bottom (32+37=69) → title.top 93 → gap 24 */
    box-sizing: border-box;
}

/* Title "Семейная и IT-ипотека от 2,5%" — по 1.html Frame 2087327466:
   frame width 242, gap 6; text 26 Bold/33.80 (lh 1.3) white */
.payment__slide .payment__title-big {
    margin: 0;
    max-width: 242px;
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.3;
    color: #ffffff;
}

/* "На весь срок..." — 16 Regular/24 (lh 1.5) white opacity 0.80 (per 1.html) */
.payment__slide .payment__text {
    margin: 6px 0 0;
    max-width: 242px;
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff;
    opacity: 0.8;
}

/* Кнопка "Подробнее" — padding 17.5×32, не фикс 142×56 */
.payment__slide .payment__btn {
    margin-top: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 32px;
    background: #AE7A67;
    color: #ffffff;
    border: 0;
    border-radius: 8px;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 14px;
    min-height: 56px;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s;
}

.payment__slide .payment__btn:hover { background: #9b6856; }

/* === Слайдер: 2 стрелки + 4 точки внизу LEFT BIG card === */
.payment__slider {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 3;
}

.payment__nav-btn {
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 8px;
    background: #fefefe;
    color: #6B7280;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .2s;
}

.payment__nav-btn:hover { background: #E7E9EC; }

.payment__nav-btn svg { display: block; width: 6px; height: 9px; }
.payment__nav-btn[data-slider-next] svg { transform: scaleX(-1); }

.payment__dots {
    margin-left: auto;
    display: flex;
    gap: 6px;
    align-items: center;
}

.payment__dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: #fefefe;
    opacity: 0.4;
    cursor: pointer;
    transition: opacity .2s;
    border: 0;
    padding: 0;
}

.payment__dot.is-active { opacity: 1; }

/* ============================================================
   CARD 2 (TOP-MID 430×320) — "Рассрочка"
   - White outer + INNER gray panel (#fefefe) 414×304 inset 8px (SVG rx=8)
   - 2 партнёрских avatara circles 60×60 stroke white top-left
   - image right-top (218×187)
   - Title + subtext bottom-left
   ============================================================ */
.payment__card--gray {
    background: #F4F1EB;
    padding: 8px;
    box-sizing: border-box;
}

.payment__card--gray .payment__card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 24px;
}

/* Партнёрские аватары — 64×64 by 1.html (card-relative top:32 left:32 от card-edge,
   card имеет 8px padding, поэтому inset 24,24 от inner) */
.payment__avatars {
    position: absolute;
    top: 24px;
    left: 24px;
    display: flex;
    z-index: 2;
}

.payment__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    background: #ffffff;
    object-fit: cover;
    display: block;
}

.payment__avatar + .payment__avatar { margin-left: -8px; }

/* Картинка справа-сверху */
.payment__card--gray .payment__card-img {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 218px;
    height: 187px;
    object-fit: cover;
    border-radius: 8px;
    z-index: 0;
}

/* Заголовок "Рассрочка" + подпись — внизу */
.payment__card--gray .payment__card-content {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    z-index: 1;
}

.payment__card--gray .payment__card-name {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
    color: #12131A;
}

.payment__card--gray .payment__card-text {
    margin: 6px 0 0;
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #6B7280;
    max-width: 340px;
}

/* ============================================================
   CARD 3 (TOP-RIGHT 318×320) — "100% оплата"
   - White bg
   - Title 26 Bold ink + subtext top
   - Image bottom 213px
   ============================================================ */
.payment__card--white {
    position: relative;
}

.payment__card--white .payment__card-content {
    position: absolute;
    top: 32px;
    left: 32px;
    right: 32px;
    z-index: 1;
}

.payment__card--white .payment__card-name {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
    color: #12131A;
}

.payment__card--white .payment__card-text {
    margin: 6px 0 0;
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #6B7280;
}

.payment__card-bottom-img {
    position: absolute;
        left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 0;
    height: 213px;
    width: calc(100% - 20%);
    object-fit: cover;
    border-radius: 0px;
    z-index: 0;
}

/* ============================================================
   CARD 4 (BOTTOM-WIDE 763×320) — "Стандартная ипотека"
   - White bg
   - LEFT: title 26 Bold ink + subtext + button "Калькулятор ипотеки" 212×56 #AE7A67
   - RIGHT: image 310×320 full-height
   ============================================================ */
/* Card 4 BOTTOM-WIDE 763×320 — точно по 1.html:
   - Text frame at (32, 32) w=254 — Title + Subtitle
   - Button "Калькулятор ипотеки" at (32, 232) — h=56 #AE7A67
   - Image 310×320 at right (left=449, full height) */
.payment__card--wide {
    padding: 0;
    background: #F4F1EB;
    position: relative;
    overflow: hidden;
}




/* Inner — flex row, контент слева в natural flow, image absolute справа (overlay) */
.payment__card--wide .payment__card-inner {
    position: relative;
    z-index: 1;              /* над glow */
    width: 100%;
    height: 100%;
    padding: 32px;
    box-sizing: border-box;
}

/* Title + Subtitle + Button — flex column, button прижат к низу через margin-top:auto */
.payment__card--wide .payment__card-content {
    width: 254px;             /* per Figma Frame 2087327467 */
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.payment__card--wide .payment__title-big {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.3;
    color: #12131A;
}

.payment__card--wide .payment__text {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #6B7280;
}

/* Button в natural flow, margin-top: auto прижимает к низу flex column */
.payment__card--wide .payment__btn-blue {
    margin-top: auto;
    height: 56px;
    padding: 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #AE7A67;
    color: #ffffff;
    border-radius: 8px;
    text-decoration: none;
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
        border: 0;
        cursor: pointer;
    box-sizing: border-box;
}

.payment__card--wide .payment__btn-blue:hover { background: #9b6856; }

/* Image — overlay справа (это визуальный bg-элемент, остаётся absolute) */
.payment__card--wide .payment__card-img {
    position: absolute;
    right: 0;
    top: 0;
    width: 448px;
    height: 100%;
    object-fit: cover;
}

/* Разделитель и chevron удалены — в новом дизайне не используются */

/* ============================================================
 |  ХОД СТРОИТЕЛЬСТВА (xod-stroitelstva.svg)
 |  viewBox 1320x726. Контейнер 1320 контента (max-width: 1368px + 24px padding).
 |  Header (y=0..110): title #12131A 40Bold + subtitle #6B7280 18Med.
 |  Tabs row y=113..166: 1 active 139x53 #AE7A67 + 3 stroked.
 |  CTA "Все отчёты" 141x56 #F4F1EB right.
 |  LEFT BIG video 652x456 rx=12, badge 67x37, play 56x56 #AE7A67 center.
 |  RIGHT 2x2 photo grid 318x220 x4 (gap 16).
 |  Bottom labels y=670..720: ink + muted under каждой колонки.
 |  ============================================================ */
.progress {
    background: #ffffff;
    padding: 60px 0;
}

.progress__inner {
    max-width: 1368px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.progress__head {
    position: relative;
    min-height: 100px;
}

.progress__title {
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.2;
    color: #12131A;
    margin: 0;
    padding-top: 10px;
}

.progress__subtitle {
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #6B7280;
    margin: 8px 0 0;
    max-width: 800px;
}

/* === Tabs + CTA row === */
.progress__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 30px;
}

.progress__tabs {
    display: flex;
    gap: 8.5px;
    flex-wrap: wrap;
}

.progress__tab {
    appearance: none;
    border: 1px solid #6B7280;
    background: transparent;
    border-radius: 4px;
    padding: 16px 24px;
    font-family: "Manrope", sans-serif;
    font-weight: 500;          /* Body S = Medium 500 */
    font-size: 14px;
    line-height: 1.5;
    color: #6B7280;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
    white-space: nowrap;
}

.progress__tab:hover {
    color: #AE7A67;
    border-color: #AE7A67;
}

.progress__tab.is-active {
    background: #AE7A67;
    border-color: #AE7A67;
    color: #ffffff;
    border-radius: 4px;
}

/* ============================================================
   Кастомный выпадающий список .m-select (фрейм #626:25392)
   Используется на мобиле вместо кнопок-табов: progress / docs / news.
   Своя кнопка + свой список опций (не нативный пикер ОС).
   Обёртки .progress__select/.docs__select/.news__select скрыты по умолчанию,
   показываются в мобильном @media.
   ============================================================ */
.progress__select, .docs__select, .news__select, .finishes__select, .map-section__select { display: none; }

.m-select { position: relative; width: 100%; box-sizing: border-box; }

.m-select__btn {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    height: 56px;
    padding: 0 16px;
    background: #ffffff;
    border: 1px solid #6B7280;
    border-radius: 8px;
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
    color: #6B7280;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}
.m-select__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-select__chev {
    flex-shrink: 0;
    color: #6B7280;
    transition: transform .2s ease;
}
.m-select.is-open .m-select__btn { border-color: #AE7A67; }
.m-select.is-open .m-select__chev { transform: rotate(180deg); }

.m-select__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #ffffff;
    border: 1px solid #F4F1EB;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(18, 19, 26, 0.12);
    max-height: 320px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    box-sizing: border-box;
}
.m-select.is-open .m-select__menu { opacity: 1; visibility: visible; transform: translateY(0); }

/* Открытая выпадашка создаёт свой stacking-context поверх любого контента ниже
   (карта/iframe и т.п.), чтобы меню НИГДЕ не пряталось под соседним блоком. */
.m-select.is-open { z-index: 60; }

.m-select__opt {
    padding: 14px 12px;
    border-radius: 6px;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: #12131A;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.m-select__opt:hover { background: #fefefe; }
.m-select__opt.is-active { color: #AE7A67; font-weight: 600; }

.progress__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 32px;
    border-radius: 8px;
    background: #F4F1EB;
    color: #1E213D;
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background .2s;
    flex-shrink: 0;
}

.progress__cta:hover { background: #f1e4cb; }

/* === Переключатель корпусов в «Ходе строительства» (карточка ЖК → progress_group) ===
   Кнопки домов справа от заголовка; у каждого дома свой набор вкладок-месяцев. */
.progress__head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.progress__houses {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 10px;
}

.progress__house-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 32px;
    border: 0;
    border-radius: 8px;
    background: #F4F1EB;
    color: #1E213D;
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s, color .2s;
    flex-shrink: 0;
}

.progress__house-btn:hover { background: #f1e4cb; }

.progress__house-btn.is-active {
    background: #AE7A67;
    color: #fff;
}

.progress__house-btn.is-active:hover { background: #9d6b59; }

/* Обёртка дома прозрачна для раскладки (на мобиле .progress__bar тоже display:contents,
   поэтому order-раскладка внутри .progress__inner продолжает работать). */
.progress__house { display: contents; }
.progress__house.is-hidden { display: none; }

@media (max-width: 767.98px) {
    .progress__head-row { flex-direction: column; gap: 16px; }
    .progress__houses { padding-top: 0; width: 100%; }
    .progress__house-btn { height: 48px; padding: 0 20px; font-size: 13px; }
}

/* === Контент таба — показываем только активный === */
.progress__content { display: none; margin-top: 24px; }
.progress__content.is-active { display: block; }

/* === Grid: LEFT 652 + RIGHT 652 (2x2 318+318) === */
.progress__grid {
    display: grid;
    grid-template-columns: 652fr 652fr;
    gap: 16px;
}

/* === LEFT BIG video card === */
.progress__video {
    position: relative;
    height: 456px;
    border-radius: 12px;
    overflow: hidden;
    background: #D9D9D9;
    text-decoration: none;
    color: inherit;
}

.progress__video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.progress__badge {
    position: absolute;
    top: 32px;
    left: 32px;
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 4px;
    background: #ffffff;
    color: #6B7280;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    z-index: 2;
}

.progress__play {
    position: absolute;
    top: 200px;
    left: 298px;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 8px;
    background: #AE7A67;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background .2s, transform .2s;
}

.progress__play:hover { background: #0a87e0; transform: translateY(-1px); }

.progress__play svg {
    width: 10px;
    height: 12px;
    display: block;
}

/* Когда видео запущено — прячем превью/бейдж/play/pill, показываем плеер. */
.progress__video.is-playing .progress__video-bg,
.progress__video.is-playing .progress__badge,
.progress__video.is-playing .progress__play,
.progress__video.is-playing .progress__date-pill {
    display: none;
}

.progress__video-player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
    object-fit: cover;
}

.progress__date-pill {
    position: absolute;
    left: 32px;
    bottom: 32px;
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: rgba(255,255,255,.92);
    border-radius: 6px;
    color: #12131A;
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    z-index: 2;
}

/* === RIGHT 2x2 grid === */
.progress__photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 220px;
    gap: 16px;
}

.progress__photo {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #D9D9D9;
    display: block;
}

.progress__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

@media (hover: hover) {
    .progress__photo:hover img { transform: scale(1.05); }
}

/* === Bottom captions === */
.progress__captions {
    display: grid;
    grid-template-columns: 652fr 652fr;
    gap: 16px;
    margin-top: 16px;
}

.progress__caption {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.progress__caption-title {
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    color: #12131A;
    line-height: 1.3;          /* Figma style_ce759c06 */
    margin: 0;
}

/* Figma: обе подписи = style_ce759c06 (Bold 700 / 26 / 1.3) */
.progress__caption-title--lg { font-size: 26px; }
.progress__caption-title--md { font-size: 26px; }

.progress__caption-meta {
    font-family: "Manrope", sans-serif;
    font-weight: 400;          /* Body M = Regular 400 / 16 / 1.5 */
    font-size: 16px;
    line-height: 1.5;
    color: #6B7280;
}

/* === Адаптив прогресса === */
@media (max-width: 1199.98px) {
    .progress__grid,
    .progress__captions {
        grid-template-columns: 1fr;
    }
    .progress__video { height: 420px; }
    .progress__play { left: 50%; top: 50%; transform: translate(-50%, -50%); }
    .progress__play:hover { transform: translate(-50%, calc(-50% - 1px)); }
}

@media (max-width: 767.98px) {
    .progress { padding: 48px 0; }
    /* Мобильная структура (по макету): дропдаун → видео → подпись «Видеоролики» →
       фото → подпись «Фотоотчёты» → кнопка «Все отчёты» внизу.
       Раскрываем bar/grid/captions через display:contents и расставляем order. */
    .progress__inner { max-width: none; padding: 0 8px; display: flex; flex-direction: column; }
    .progress__head { order: 0; }
    .progress__title { font-size: 32px; padding-left: 0; padding-right: 0; }
    .progress__subtitle { font-size: 18px; padding-left: 0; padding-right: 0; }

    /* bar раскрываем: select наверх (order 1), кнопку «Все отчёты» — вниз (order 3) */
    .progress__bar { display: contents; }
    .progress__tabs { display: none; }
    /* Единственный ЖК: показываем таб плашкой и на мобиле (выпадашки с одним пунктом нет) */
    .progress__tabs--single { display: flex; order: 1; margin-top: 24px; }
    .progress__select { display: block; order: 1; margin-top: 24px; }
    /* кнопка «Все отчёты» — по содержимому (hug), слева, НЕ на всю ширину (фрейм #626:25408) */
    .progress__cta { order: 3; width: auto; align-self: flex-start; margin-top: 16px; }

    /* активная панель между select и кнопкой; внутри — видео → подпись → фото → подпись.
       Фрейм #626:25410/25422: видео 360×240 + подпись, ОДНА фото-плитка 360×240 + подпись. */
    .progress__content { order: 2; margin-top: 0; }
    .progress__content.is-active { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
    .progress__grid { display: contents; }
    .progress__captions { display: contents; }
    .progress__video { order: 1; height: 240px; }   /* Figma mobile 360×240 */
    .progress__captions .progress__caption:first-child { order: 2; margin-bottom: 4px; }
    /* Фотоотчёты = ОДНА плитка (не сетка 2×2): показываем только первое фото 360×240 */
    .progress__photos { order: 3; display: block; grid-template-rows: none; grid-template-columns: none; margin-top: 4px; }
    .progress__photos .progress__photo { display: none; }
    .progress__photos .progress__photo:first-child { display: block; height: 240px; border-radius: 12px; }
    .progress__captions .progress__caption:last-child  { order: 4; }
    .progress__caption-title--lg { font-size: 26px; }   /* Figma: обе 26 */
    .progress__caption-title--md { font-size: 26px; }
}

/* ============================================================
 |  ДОКУМЕНТЫ (dokumenty.svg)
 |  viewBox 1322x510. Контейнер 1320 (max-w 1368 + 24px padding).
 |  Header (y=0..110): h2 40Bold + subtitle 18Med + thin underline (link).
 |  Tabs row y=113..166: 1 активный 139x53 #AE7A67 + 3 stroked.
 |  CTA "Все документы" 169x56 #F4F1EB #1E213D справа.
 |  4 карточки 318x320 rx=12 #fefefe (gap 16):
 |    - badge "PDF" 58x37 #ffffff rx=4, padding 6x16, текст #6B7280 14SB
 |    - title 26Bold #12131A
 |    - meta 14Med #6B7280
 |    - bottom image strip 177px (rx clipped корпусом)
 |  ============================================================ */
.docs {
    background: #ffffff;
    padding: 60px 0;
}

.docs__inner {
    max-width: 1368px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.docs__head {
    position: relative;
    min-height: 100px;
}

.docs__title {
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.2;
    color: #12131A;
    margin: 0;
    padding-top: 10px;
}

.docs__subtitle {
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #6B7280;
    margin: 8px 0 0;
    max-width: 800px;
}

.docs__link {
    color: #6B7280;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    transition: color .2s;
}

.docs__link:hover { color: #AE7A67; text-decoration-color: #AE7A67; }

/* === Tabs + CTA row === */
.docs__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 30px;
}

.docs__tabs {
    display: flex;
    gap: 8.5px;
    flex-wrap: wrap;
}

.docs__tab {
    appearance: none;
    border: 1px solid #6B7280;
    background: transparent;
    border-radius: 4px;
    padding: 16px 24px;
    font-family: "Manrope", sans-serif;
    font-weight: 500;          /* Body S = Medium 500 */
    font-size: 14px;
    line-height: 1.5;
    color: #6B7280;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
    white-space: nowrap;
}

.docs__tab:hover { color: #AE7A67; border-color: #AE7A67; }

.docs__tab.is-active {
    background: #AE7A67;
    border-color: #AE7A67;
    color: #ffffff;
    border-radius: 4px;
}

.docs__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 32px;
    border-radius: 8px;
    background: #F4F1EB;
    color: #1E213D;
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background .2s;
    flex-shrink: 0;
}

.docs__cta:hover { background: #f1e4cb; }

/* === Grid: 4 cards 318x320 with gap 16 === */
.docs__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 24px;
}

/* Figma #626:19661 — серый блок 318×181, padding 32: бейдж PDF → gap24 → name+meta. БЕЗ превью. */
.docs__card {
    position: relative;
    min-height: 181px;
    border-radius: 12px;
    background: #F4F1EB;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
    gap: 24px;                 /* badge → info */
    padding: 32px;
    box-sizing: border-box;
}

.docs__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(18, 19, 26, .08);
}

/* Бейдж "PDF" — белая пилюля, padding 8.5×16, #6B7280 Medium 14/1.5 */
.docs__badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8.5px 16px;
    border-radius: 4px;
    background: #ffffff;
    color: #6B7280;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    flex-shrink: 0;
}

.docs__info { display: flex; flex-direction: column; gap: 6px; }

/* Заголовок — Figma H4 = Bold 20/1.3 */
.docs__name {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    color: #12131A;
}

/* Мета "53,6 МБ" — style_509e5c90 = SemiBold 600/16/1.5 */
.docs__meta {
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    color: #6B7280;
}

/* === Адаптив документов === */
@media (max-width: 1199.98px) {
    .docs__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
    .docs { padding: 48px 0; }
    .docs__inner { max-width: none; padding: 0; display: flex; flex-direction: column; }   /* full-bleed (фрейм x0 360) */
    .docs__title { font-size: 32px; }
    .docs__subtitle { font-size: 18px; }
    /* Раскрываем bar, чтобы расставить дочерние по order: дропдаун над списком, кнопка — после */
    .docs__bar { display: contents; }
    .docs__head { order: 0; }
    /* Кнопки-табы → кастомный дропдаун */
    .docs__tabs { display: none; }
    .docs__select { display: block; width: auto; order: 1; margin: 24px 8px 0; }
    .docs__grid { order: 2; grid-template-columns: 1fr; }
    .docs__cta { order: 3; width: auto; align-self: flex-start; box-sizing: border-box; margin: 16px 8px 0; }
}

/* ===================== ДОКУМЕНТЫ — страница (block docs_projects, Figma 626-21359 / 626-25921) ===================== */
.dp { padding: 32px 0 48px; }
.dp__crumbs { display: flex; align-items: center; gap: 8px; font-family: "Manrope", sans-serif; font-size: 14px; color: #6B7280; margin-bottom: 24px; }
.dp__crumbs a { color: #6B7280; opacity: .6; text-decoration: none; } .dp__crumbs a:hover { opacity: 1; color: #AE7A67; }
.dp__crumbs span { opacity: .6; } .dp__crumbs b { color: #6B7280; font-weight: 500; }
.dp__grid { display: grid; grid-template-columns: 1fr 318px; gap: 16px; align-items: start; }
.dp__title { font-size: 48px; font-weight: 700; line-height: 1.2; margin: 0 0 8px; color: #12131A; }
.dp__sub { color: #6B7280; max-width: 763px; margin: 0 0 32px; font-size: 18px; line-height: 1.4; }
.dp__h2 { font-size: 26px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; color: #12131A; }
.dp__h2sub { color: #6B7280; max-width: 763px; margin: 0 0 24px; font-size: 18px; line-height: 1.4; }

.dp__h2sub a { color: #A57766; }
.dp__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
/* Бар блока документов (табы слева + кнопка справа) — как .progress__bar */
.dpc__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.dpc__bar .dp__tabs { margin-bottom: 0; }
.dpc__cta {
    display: inline-flex; align-items: center; justify-content: center;
    height: 56px; padding: 0 32px; border-radius: 8px;
    background: #F4F1EB; color: #1E213D;
    font-family: "Manrope", sans-serif; font-weight: 600; font-size: 14px;
    text-decoration: none; transition: background .2s; flex-shrink: 0;
}
.dpc__cta:hover { background: #f1e4cb; }
.dp__cards { margin-top: 24px; }
.dp-tab { border: 1px solid #6B7280; background: transparent; color: #6B7280; border-radius: 4px; padding: 16px 24px; font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; transition: all .15s; line-height: 1; }
.dp-tab:hover { border-color: #AE7A67; color: #AE7A67; }
.dp-tab.is-active { background: #AE7A67; border-color: #AE7A67; color: #fff; }
.dp__select { display: none; }
/* Карточка документа: серый блок #fefefe, padding 32, бейдж PDF (белый) → имя (H4) + размер, без превью */
.dp__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 12px; }
.dp-card { display: flex; flex-direction: column; gap: 24px; background: #F4F1EB; border-radius: 12px; padding: 32px; min-height: 181px; text-decoration: none; color: inherit; box-sizing: border-box; transition: box-shadow .2s, transform .2s; }
a.dp-card:hover { box-shadow: 0 10px 24px rgba(18,19,26,.08); transform: translateY(-2px); }
.dp-card__badge { align-self: flex-start; background: #fff; color: #6B7280; font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 500; line-height: 1.5; padding: 8px 16px; border-radius: 4px; }
.dp-card__info { display: flex; flex-direction: column; gap: 6px; }
.dp-card__name { font-weight: 700; font-size: 20px; line-height: 1.3; color: #12131A; }
.dp-card__size { color: #6B7280; font-size: 16px; font-weight: 600; line-height: 1.5; }
.dp__policy { margin-top: 36px; }
.dp__aside { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 16px; }
.dp-side { background: #FBFBFB; border: 1px solid #EAECEE; border-radius: 12px; padding: 24px 32px; }
.dp-side__t { display: flex; align-items: center; gap: 8px; font-family: "Manrope", sans-serif; font-weight: 500; font-size: 14px; color: #6B7280; margin-bottom: 16px; }
.dp-side__t svg { flex-shrink: 0; }
.dp-side__contacts { display: flex; flex-direction: column; gap: 6px; }
.dp-side__phone { font-size: 18px; font-weight: 600; color: #A57766; text-decoration: none; }
.dp-side__phone:hover { color: #1f63cf; }
.dp-side__mail { margin-top: 8px; color: #A57766; text-decoration: none; font-size: 14px; font-weight: 600; }
.dp-side__mail:hover { text-decoration: underline; }
.dp-side__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.dp-side__links a { color: #A57766; text-decoration: none; font-size: 14px; font-weight: 600; }
.dp-side__links a:hover { text-decoration: underline; }
.dp-side__line { color: #12131A; font-size: 14px; line-height: 1.5; }
.dp-side__line--muted { color: #6B7280; margin-top: 8px; }
@media (max-width: 991px) {
    .dp__grid { grid-template-columns: 1fr; }
    .dp__aside { position: static; flex-direction: row; flex-wrap: wrap; }
    .dp__aside .dp-side { flex: 1 1 240px; }
    .dp__title { font-size: 32px; }
    .dp__cards { grid-template-columns: repeat(2, 1fr); }
}
/* Мобайл (Figma 626-25921): контент во всю ширину, текст при 16, карточки в край (внутри 32/16) */
@media (max-width: 767.98px) {
    .dp { padding: 24px 0 40px; }
    .dp .h-container { padding-left: 0; padding-right: 0; }
    .dp__crumbs, .dp__title, .dp__sub, .dp__h2, .dp__h2sub, .dp__policy { padding-left: 16px; padding-right: 16px; }
    .dp__title { font-size: 36px; }
    .dp__sub, .dp__h2sub { font-size: 16px; }
    .dp__tabs { display: none; }                          /* табы → выпадашка */
    .dp__tabs--single { display: flex; }                  /* единственный ЖК — таб плашкой (выпадашки нет) */
    .dpc__bar { flex-direction: column; align-items: stretch; gap: 16px; padding: 12px 12px 0px 12px;}
    .dpc__cta { align-self: flex-start; }
    .dp__select { display: block; margin: 0 0 24px; }      /* во всю ширину (Figma 626:26062 x0) */
    .dp__cards { grid-template-columns: 1fr; }
    .dp-card { padding: 32px 16px; }
    .dp__aside { flex-direction: column; }
    .dp-side { margin-left: 16px; margin-right: 16px; }
}

/* ============================================================
 |  НОВОСТИ (novosti.svg)
 |  viewBox 1321x1127. 3x2 сетка 429x459 rx=12, gap 16.
 |  Header h2 40Bold + subtitle 18Med.
 |  Tabs: active 73x53 #AE7A67 "Все" + 4 stroked (152/109/114/196).
 |  CTA "Все новости" 149x56 #F4F1EB.
 |  COMPACT card (1,3,5):
 |    - photo top 413x240 rx=8 inset 8
 |    - badge на фото в (32,32) — белый rx=4 padding 6x16 14SB muted
 |    - title 22Bold ink (2 строки)
 |    - desc 16Med muted (2 строки)
 |    - divider y=394.5 #fefefe
 |    - date 14Med muted в нижнем блоке
 |  FEATURE card (2,4,6):
 |    - full-photo 413x443 rx=8 inset 8 + чёрный overlay
 |    - то же расположение, текст белый, divider opacity 0.4
 |  ============================================================ */
.news {
    background: var(--c-bg);   /* #fefefe — серый фон секции (как about/projects/bento) */
    padding: 60px 0;
}

.news__inner {
    max-width: 1368px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* ===== Пагинация в стиле сайта ===== */
.pagination {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    justify-content: center;
}
.pagination .page-item { display: inline-flex; }
.pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #F4F1EB;
    border-radius: 8px;
    background: #fff;
    color: #12131A;
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.pagination .page-link:hover { border-color: #AE7A67; color: #AE7A67; }
.pagination .page-item.active .page-link {
    background: #AE7A67;
    border-color: #AE7A67;
    color: #fff;
}
.pagination .page-item.disabled .page-link {
    color: #C2C8D0;
    background: #fff;
    border-color: #EAECEE;
    cursor: default;
    pointer-events: none;
}

.news__head { position: relative; }

.news__title {
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.2;
    color: #12131A;
    margin: 0;
}

.news__subtitle {
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #6B7280;
    margin: 8px 0 0;
}

.news__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 32px;          /* Figma: heading → bar */
}

.news__tabs {
    display: flex;
    gap: 8.5px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.news__tab {
    appearance: none;
    border: 1px solid #6B7280;   /* Figma EL-ca6ee7c6 */
    background: transparent;
    border-radius: 4px;
    padding: 16px 24px;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: #6B7280;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
    white-space: nowrap;
}

.news__tab:hover { color: #AE7A67; border-color: #AE7A67; }

.news__tab.is-active {
    background: #AE7A67;
    border-color: #AE7A67;
    color: #ffffff;
    border-radius: 4px;
}

.news__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 32px;
    border-radius: 8px;
    background: #F4F1EB;
    color: #1E213D;
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background .2s;
    flex-shrink: 0;
}

.news__cta:hover { background: #f1e4cb; }

/* === Grid 3x2 === */
.news__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 24px;
}

/* === Скрытие карточки неактивного таба === */
.news-card.is-hidden { display: none !important; }

/* === Базовая карточка 429x459 === */
.news-card {
    position: relative;
    height: 459px;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .2s, box-shadow .2s;
    display: block;
}

.news-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(18,19,26,.08);
}

/* Divider Line 2 — full card width (429), 1px #fefefe (по 1.html top=395 от card-top) */
.news-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 395px;
    height: 1px;
    background: #fefefe;
    z-index: 3;
}

/* Для feature variant separator имеет opacity 0.4 (per 1.html) */
.news-card--feature::before { background: rgba(242, 243, 245, 0.4); }

/* === COMPACT (3 шт.) — белая карточка с фото-полосой сверху === */
.news-card--compact .news-card__photo {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 413px;
    height: 240px;
    border-radius: 8px;
    overflow: hidden;
    background: #D9D9D9;
}

.news-card--compact .news-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* === FEATURE (3 шт.) — full-photo с чёрным overlay === */
.news-card--feature .news-card__bg {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 413px;
    height: 443px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
    z-index: 0;
}

.news-card--feature .news-card__overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 413px;
    height: 443px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .4);
    z-index: 1;
    pointer-events: none;
}

/* === Badge — белая пилюля, ТОЧНО по 1.html (Frame 2085666504):
   padding 8 16, bg white, rx 4, text 14 Medium(500) #6B7280 lh 1.5 === */
.news-card__badge {
    position: absolute;
    top: 32px;
    left: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 4px;
    background: #ffffff;
    color: #6B7280;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    z-index: 4;
    max-width: calc(100% - 64px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === Тексты карточки — позиции по 1.html (card_y=11577): === */

/* Title at (32, 272) w=366, font 22 Bold(700)/28.60 (lh 1.3) ink */
.news-card__title {
    position: absolute;
    top: 272px;
    left: 32px;
    right: 32px;
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    color: #12131A;
    z-index: 4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Desc — под title (gap 6), 16 Regular(400)/24 (lh 1.5) muted */
.news-card__desc {
    position: absolute;
    top: 335px;       /* 272 + 2 строки × (22*1.3=28.6) ≈ 329 + gap 6 */
    left: 32px;
    right: 32px;
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #6B7280;
    z-index: 4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Date row at (32, 411), 16 SemiBold(600)/24 muted (per 1.html "2 апреля 2026 г. · 3 мин") */
.news-card__date {
    position: absolute;
    top: 411px;
    left: 32px;
    right: 32px;
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    color: #6B7280;
    z-index: 4;
}

/* === FEATURE — белый текст === */
.news-card--feature .news-card__title { color: #ffffff; }
.news-card--feature .news-card__desc  { color: #ffffff; opacity: 0.8; }
.news-card--feature .news-card__date  { color: #ffffff; }

/* === Адаптив новостей === */
@media (max-width: 1199.98px) {
    .news__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
    .news { padding: 48px 0; }
    /* inner — flex-column: дропдаун сверху, кнопка «Все новости» ПОСЛЕ карточек */
    .news__inner { max-width: none; padding: 0; display: flex; flex-direction: column; }   /* full-bleed (фрейм x0 360) */
    .news__head { order: 0; }
    .news__title { font-size: 32px; }
    .news__subtitle { font-size: 18px; }
    /* bar раскрываем (display:contents): select наверх, cta — вниз */
    .news__bar { display: contents; }
    /* Кнопки-табы → кастомный дропдаун */
    .news__tabs { display: none; }
    .news__select { display: block; order: 1; width: auto; margin: 24px 8px 0; }
    .news__grid { order: 2; grid-template-columns: 1fr; margin-top: 16px; }
    /* «Все новости» — после карточек, по содержимому слева (не на всю ширину) */
    .news__cta { order: 3; width: auto; align-self: flex-start; margin: 16px 8px 0; box-sizing: border-box; }

    /* Карточки новостей — из координатной вёрстки (height:459 + фото фикс 413 absolute) в ПОТОК.
       Это убирает горизонтальное переполнение. */
    .news-card { height: auto; min-height: 0; display: flex; flex-direction: column; }
    .news-card::before { display: none; }
    /* compact: фото сверху, текст под ним в потоке */
    .news-card--compact .news-card__photo {
        position: static; width: auto; height: 220px; margin: 8px;
    }
    .news-card__badge { top: 24px; left: 24px; }
    .news-card--compact .news-card__title { position: static; margin: 16px 8px 16px 8px; }
    .news-card--compact .news-card__desc  { position: static; margin: 6px 16px 0; }
    .news-card--compact .news-card__date  { position: static; margin: 16px 16px; }
    /* feature: на мобиле фрейм #626:25469 — ТАКАЯ ЖЕ как compact (фото сверху + текст снизу),
       а не оверлей. Переводим __bg в обычное фото-сверху, прячем оверлей, текст в поток тёмным. */
    .news-card--feature { height: auto; min-height: 0; }
    .news-card--feature .news-card__overlay { display: none; }
    .news-card--feature .news-card__bg {
        position: static;
        display: block;
        inset: auto;
        width: calc(100% - 16px);
        height: 220px;
        margin: 8px 8px 0;
        object-fit: cover;
        border-radius: 8px;
    }
    .news-card--feature .news-card__title {
        position: static; inset: auto; margin: 16px 16px 0 16px; color: #12131A;
    }
    .news-card--feature .news-card__desc {
        position: static; inset: auto; margin: 6px 16px 0; color: #6B7280; opacity: 1;
    }
    .news-card--feature .news-card__date {
        position: static; inset: auto; margin: 16px 16px; color: #6B7280;
    }
}

/* ===== Адаптив =============================================== */
@media (max-width: 991.98px) {
    /* планшет: hero 980 + promo margin-top:-100 → promo на y880 (как десктоп) */
    .hero__slider { flex-direction: column; align-items: stretch; gap: 12px; }
    .hero__nav { align-self: flex-end; }
}

/* ===== HERO — мобайл (#626:24810): нормальный flow, без хардкод-absolute (десктоп не трогаем) ===== */
@media (max-width: 767.98px) {
    /* Секция — flex-колонка. Фон/оверлей остаются absolute inset:0 (подложка).
       Все слоты — фиксированной высоты/с фикс-отступами → стрелки и дисклеймер
       НЕ зависят от длины текста слайда (не прыгают при переключении). */

    .site-header__emblem {
    width: auto;
    height: 40px;
    }

    .hero {
        height: auto;
        min-height: 974px;           /* высота фото-зоны как во фрейме; низ — фото + промо наезжает */
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    /* Контейнер контента. Высота задаётся активным слайдом (фикс-слот);
       неактивные — absolute-оверлей для кроссфейда (на высоту не влияют). */
    .hero__inner {
        position: relative;
        margin-top: 99px;            /* отступ под фикс-шапку (y99 во фрейме) */
        padding: 0;
    }
    .hero__content {
        top: 0;
        left: 0;
        right: 0;
        padding: 0 10px;             /* поля 10 на самом слайде */
    }
    .hero__content.is-active {
        position: relative;          /* активный — в потоке, задаёт высоту inner */
        display: flex;
        flex-direction: column;
        height: 400px;               /* ФИКС-слот: длина заголовка не двигает то, что ниже */
    }
    /* gap 24: badge→title 24, title→subtitle 8; H1 36/1.2 */
    .hero__title { font-size: 36px; margin-top: 24px; }
    .hero__subtitle { margin-top: 8px; }
    .hero__badge {width: fit-content;}
    /* кнопки прижаты к низу фикс-слота → их позиция стабильна на всех слайдах */
    .hero__buttons { margin-top: auto; width: 100%; gap: 8px; }
    .hero__btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 12px 16px;          /* Figma layout_31d10d0f */
        line-height: 1.5;            /* Body S 14/1.5 */
        white-space: normal;
        text-align: center;            /* фрейм: текст в кнопке слева, не по центру */
        justify-content: center;
        align-items: center;
    }

    .podbor__results {
        padding: 0 8px;

    }

    .podbor-card__head {
    margin: 16px 8px 0;
    }

    .podbor-card__desc {
    margin: 16px 8px 0;
    }

    .podbor-card__price {
    margin: 6px 8px 0;
    }

    .podbor-card__specs {
    margin: 16px 8px 0;
    }

    /* Слайдер: только стрелки (без текстовых табов), в потоке с ФИКС-отступом.
       Фикс-слот контента выше → стрелки всегда на одной высоте (≈ y545 фрейма). */
    .hero__slider-wrap {
        position: static;
        margin: 46px 0 0;            /* 99 + 400 + 46 = y545; сбрасываем auto-поля .h-container (иначе центрируется) */
        padding: 0 10px;
    }
    .hero__tabs { display: none; }
    .hero__slider { flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
    .hero__nav { align-self: auto; gap: 8px; }

    /* Дисклеймер: под стрелками с ФИКС-отступом (≈ y665). Не прыгает: верх стабилен. */
    .hero__disclaimer-wrap {
        position: static;
        margin: 64px 0 0;            /* 545 + 56(стрелки) + 64 = y665 */
        padding: 0 10px;
    }
    .hero__disclaimer { grid-template-columns: 1fr; gap: 16px; }
    .hero__disclaimer-col,
    .hero__disclaimer-col--right { width: auto; }

    /* промо наезжает на низ hero на 61px (фон hero 974, промо с y913) */
    .promo-row { margin-top: -61px; }

    /* Страница ЖК (без дисклеймера) — мобильный фрейм 626-28986 ниже главной:
       контент y99, стрелки y418, промо y538, фон ~599 (не 974). */
    .hero--no-disc { min-height: 599px; }
    .hero--no-disc .hero__content { top: 0; }   /* на мобиле контент в потоке (десктоп y200 сбрасываем) */
    .hero--no-disc .hero__content.is-active { height: 273px; }   /* 99 + 273 + 46 = стрелки на y418 */
    .hero--no-disc .hero__disclaimer-wrap { display: none; }
    .hero__pill-wrap { display: none; }   /* статус-плашка — только десктоп (в моб-фрейме её нет) */
}

/* ============================================================
   GLOBAL HOVER EFFECTS
   1) Все кликабельные плитки (карточки/тайлы) — shadow + translateY
   2) Все кнопки/линки-кнопки — плавный transition цвета
   ============================================================ */

/* Универсальный hover для плиток-ссылок */
.project-card,
.news-card,
.bento__card,
.about__card--main,
.about__card--sales,
.about__card--proj,
.about__card--docs,
.payment__card,
.complex-card {
    transition: box-shadow .25s ease, transform .25s ease, background-color .25s ease;
}

.news-card:hover,
.bento__card:hover,
.payment__card:hover,
.complex-card:hover {
    box-shadow: 0 12px 32px rgba(18, 19, 26, 0.08);
    transform: translateY(-2px);
}

/* Hover-зум картинок внутри карточек-ссылок (карточки имеют overflow:hidden) */
.project-card__photo img,
.news-card__photo img,
.bento__card-bg,
.bento__card-image,
.payment__card-img,
.payment__card-bg { transition: transform .3s ease; }

@media (hover: hover) {
    .project-card:hover .project-card__photo img,
    .news-card:hover .news-card__photo img,
    .bento__card:hover .bento__card-bg,
    .payment__card:hover .payment__card-img,
    .payment__card:hover .payment__card-bg { transform: scale(1.05); }
    /* bento-картинка центрируется через translateX — сохраняем его */
    .bento__card:hover .bento__card-image { transform: translateX(-50%) scale(1.05); }
}

/* ===== Плавное переключение табов: контент появляется с fade ===== */
@keyframes kgTabFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.finishes__card.is-active,
.progress__content.is-active,
.docs__card,
.news-card,
.dp-card,
.cgal__grid,
.podbor-card { animation: kgTabFade .3s ease; }

/* ===== Мобайл-адаптив секций без 767-блока (feature / podbor / map / payment) ===== */
@media (max-width: 767.98px) {
    /* FEATURE-SLIDER — баннер (фрейм #626:25014): padding 64, контент 480 (space-between), только стрелки слева снизу */
    .feature-slider { height: auto; }
    .feature-slider__inner {
        height: auto;
        min-height: 608px;          /* 64 + контент 480 + 64 (как в фигме) */
        padding: 64px 16px;
        display: flex;
        flex-direction: column;
    }
    /* Текст: gap 8px между eyebrow/title/desc (#626:25016) */
    .feature-slider__title { margin-top: 8px; font-size: 32px; line-height: 1.2; }
    .feature-slider__desc  { margin-top: 8px; }
    .feature-slider__tabs { display: none; }       /* на мобайле только стрелки */
    /* Панель — из absolute в поток, прижата к низу, стрелки слева (#626:25020) */
    .feature-slider__controls {
        position: static;
        margin-top: auto;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
    }
    .feature-slider__nav { align-self: auto; gap: 8px; }

    /* PODBOR — фрейм #626:25036: full-bleed, заголовок flush, дропдауны Проект+Срок в ряд, range на всю ширину */
    .podbor__inner { max-width: none; padding: 0; }
    .podbor__head {
        grid-template-columns: 1fr;
        grid-template-areas: "title" "subtitle" "cta";
    }
    .podbor__cta { justify-self: start; align-self: start; margin-top: 8px; }
    .podbor__title { font-size: 32px; }
    .podbor__subtitle { font-size: 18px; }
    /* Страница /catalog: крошки + заголовок 36 (Figma #626:28307), боковой отступ 8px */
    .podbor__crumbs { padding-left: 8px; padding-right: 8px; }
    .podbor--page .podbor__title { font-size: 36px; }
    .podbor__filters { display: flex; flex-wrap: wrap; gap: 8px; }
    .podbor__filter { min-width: 0; }
    .podbor__filter--dropdown { flex: 1 1 calc(50% - 4px); order: 1; }
    .podbor__filter--range { flex: 1 1 100%; order: 2; }
    .podbor__grid { grid-template-columns: 1fr; padding: 0px; }   /* боковой отступ карточкам квартир */
    .podbor__results-line { padding: 0 16px; }                        /* «Найдено N» — тот же отступ */

    /* MAP — заглушка (в Figma нет): full-bleed, заголовок flush, табы переносятся */
    .map-section__inner { max-width: none; padding: 0; }
    .map-section__title { font-size: 32px; }
    .map-section__subtitle { font-size: 18px; }
    .map-section__map { height: 360px; }
    /* Кнопки-табы → кастомный дропдаун */
    .map-section__tabs { display: none; }
    .map-section__select { display: block; width: auto; margin: 24px 8px 0; }  /* зазор от подзаголовка (как табы на десктопе) */

    /* PAYMENT (Способы покупки #626:25332) — full-bleed, head в стопку, карточки 1 колонкой */
    .payment__inner { max-width: none; padding: 0; }
    .payment__head {
        grid-template-columns: 1fr;
        grid-template-areas: "title" "subtitle" "cta";
    }
    .payment__title { font-size: 32px; }
    .payment__subtitle { max-width: none; }
    /* На мобиле CTA — в обычном потоке после карточек (не абсолютно) */
    .payment__cta { position: static; margin: 24px 8px 0; }
    /* грид → flex-column: десктопный grid-template-rows:320px фиксировал треки, главная (480) наезжала на «Рассрочку» */
    .payment__grid { display: flex; flex-direction: column; gap: 16px; }
    .payment__card { grid-column: 1 !important; grid-row: auto !important; min-height: 320px; }
    .payment__card.payment__card--white {padding: 0 0 35px 0;}
    /* Главная синяя карточка: десктопный композит (фото пары сбоку) на мобиле кропится неверно.
       Используем мобильный композит из фрейма #626:25333 (пара крупно снизу, верх под текст). */
    .payment__card--main {
        min-height: 520px;
        background: url('/assets/img/home/m-payment-main.webp') center top / cover no-repeat #A57766;
    }
    .payment__slide {
            padding: 24px 16px;
    }

    .payment__slider {
    left: 16px;
    right: 16px;
    }

    .payment__card--main .payment__card-bg { display: none; }
    /* card--wide «Стандартная ипотека» (фрейм #626:25382): белый фон + мягкое голубое
       свечение снизу-слева; порядок заголовок → подзаголовок → фото → кнопка; поля 16px. */
    .payment__card--wide { min-height: 0; height: auto; background: #ffffff; }
    /* Десктопное glow-::before спозиционировано под десктоп-геометрию (left:-75/top:-331) —
       на мобиле переносим в низ-слева, как во фрейме #626:25382. */
    .payment__card--wide::before {
        left: 0; right: 0; top: auto; bottom: 0;
        width: 100%; height: 70%;
        transform: none;
        background: radial-gradient(130% 100% at 22% 118%, rgba(112, 174, 255, 0.55) 0%, rgba(112, 174, 255, 0) 62%);
        filter: blur(24px);
        opacity: 1;
    }
    .payment__card--wide .payment__card-inner { display: flex; flex-direction: column; height: auto; padding: 16px; }
    /* раскрываем content в поток карточки, чтобы кнопку поставить ПОСЛЕ фото */
    .payment__card--wide .payment__card-content { display: contents; }
    .payment__card--wide .payment__title-big { order: 1; }
    .payment__card--wide .payment__text     { order: 2; }
    .payment__card--wide .payment__card-img {
        order: 3;
        position: static; width: 100%; height: 300px;   /* фрейм: фото 328×314 */
        margin-top: 16px; border-radius: 8px;
    }
    .payment__card--wide .payment__btn-blue { order: 4; margin-top: 16px; align-self: flex-start; }
    /* 100% оплата — фото на всю ширину снизу (фрейм #626:25380 fill ×258) */
    .payment__card--white .payment__card-bottom-img {
        width: calc(100% - 32px); height: 240px;
    }
    /* «Рассрочка» (серая, #626:25362 — 360×320): card-inner height:100% схлопывался без явной
       высоты карточки → весь absolute-контент комкало в ~48px. Возвращаем высоту inner. */
    .payment__card--gray { height: 320px; }
    .payment__card--gray .payment__card-inner { height: auto; min-height: 304px; }
}

/* ============================================================
   FOOTER — по svg/footer.svg (1920×663)
   Top row: brand + 3 contacts + Консультация CTA
   Middle: 6 menu columns
   Bottom: copyright + legal links
   ============================================================ */
.footer {
    background: #ffffff;
    border-top: 1px solid #F4F1EB;
    padding: 72px 0;           /* Figma component padding 72 верт. */
    color: #12131A;
}

.footer__inner { display: flex; flex-direction: column; gap: 32px; }  /* Figma #626:19978 gap 32 */

/* === TOP === */
.footer__top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid #F4F1EB;
}

.footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #12131A;
}

.footer__brand-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
}
.footer__brand-icon svg { width: 56px; height: 56px; display: block; }
.footer__brand-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
}

/* Per 1.html: "Красивый город" — 20 800 uppercase, lh 24, width 125 */
.footer__brand-text {
    width: 125px;
    font-family: "Manrope", sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #12131A;
}

.footer__contacts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.footer__contact { display: flex; flex-direction: column; gap: 8px; }

/* Per 1.html: head label 14 Medium(500)/21 (lh 1.5) #6B7280 */
.footer__contact-head {
    display: inline-flex;
    align-items: flex-end;
    gap: 8px;
    color: #6B7280;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
}
.footer__contact-head svg { width: 19px; height: 19px; flex-shrink: 0; }

/* Per 1.html: value 14 SemiBold(600)/21 — link blue, schedule ink */
.footer__contact-value {
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
    color: #6B7280;
    text-decoration: none;
}

.footer__contact-value--link { color: #9b6856; }
.footer__contact-value--link:hover { color: #9b6856; }
.footer__contact-value--ink   { color: #6B7280; }

/* CTA "Консультация" — padding 30 32, height 56, 14 SemiBold(600) #1E213D per 1.html */
.footer__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 30px 32px;
    box-sizing: border-box;
    border-radius: 8px;
    background: #F4F1EB;
    color: #1E213D;
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    border: 0;
    box-shadow: none;
    cursor: pointer;
    text-decoration: none;
}
.footer__cta:hover { background: #f1e4cb; }

/* Соцсети в верхней строке футера (Figma 17:480 — иконки 44×44, gap 19) */
.footer__socials { display: flex; align-items: center; gap: 19px; }
.footer__social {
    width: 44px; height: 44px; flex: 0 0 44px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #F4F1EB;
    color: #A57766;                 /* цвет иконок по макету */
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
.footer__social svg { display: block; }   /* размер задаёт сам SVG (44 у карт, 22 у остальных) */
.footer__social:hover { background: #A57766; color: #fff; }

/* === COLUMNS === */
.footer__cols {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

/* Per 1.html: col-title 14 SemiBold(600)/21 #A57766 (blue!) gap 24 to list */
.footer__col-title {
    margin-bottom: 24px;
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
    color: #9b6856;
}

.footer__col-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Per 1.html: link 14 SemiBold(600)/21 #12131A (ink, не muted!) */
.footer__col-link {
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.5;
    color: #12131A;
    text-decoration: none;
}
.footer__col-link:hover { color: #9b6856; }

/* Адрес ЖК под названием в колонке «Проекты» — мельче и приглушённее ссылки */
.footer__col-sub {
    display: block;
    margin-top: 4px;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.4;
    color: #6B7280;
}

/* === BOTTOM === */
/* Нижняя зона: дисклеймер-абзац + юр-ссылки (Figma: после колонок, без доп. разделителя) */
.footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    font-family: "Manrope", sans-serif;
}
.footer__disclaimer {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    color: #6B7280;          /* Figma fill_1693a4d4 */
}
.footer__legal { display: inline-flex; gap: 32px; }
.footer__legal a {
    color: #9b6856;          /* Figma fill_a2bd51cd */
    text-decoration: none;
    font-size: 12px;         /* Figma style_9df9dec7 = SemiBold 12 */
    font-weight: 600;
    transition: color .2s ease;
}
.footer__legal a:hover { color: #9b6856; }

/* Нижняя строка футера: юр-ссылки слева, подпись разработчика справа */
.footer__legal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    flex-wrap: wrap;
}
.footer__credit {
    margin-left: auto;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #6B7280;
    white-space: nowrap;
}
.footer__credit a {
    color: #9b6856;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease;
}
.footer__credit a:hover { color: #b98a76; text-decoration: none; }

@media (max-width: 1199.98px) {
    .footer__cols { grid-template-columns: repeat(3, 1fr); gap: 32px 16px; }
    .promo-card__title {font-size: 22px;}
    .about__tags  {top: 215px;}
    .about__tag  {height: 26px;font-size: 13px;}



}
@media (max-width: 767.98px) {
    .footer__top { grid-template-columns: 1fr; gap: 24px; }
    .footer__socials { justify-content: flex-start; gap: 16px; }
    .footer__contacts { grid-template-columns: 1fr; }
    .footer__cols { grid-template-columns: repeat(2, 1fr); }
    .footer__bottom { flex-direction: column; align-items: flex-start; }
    /* Юр-ссылки — в столбик (фрейм #626:25609: column, gap 16) */
    .footer__legal { flex-direction: column; gap: 16px; align-items: flex-start; }
    .footer__legal-row { flex-direction: column; align-items: flex-start; gap: 16px; }
    .footer__credit { margin-left: 0; white-space: normal; }
    .about__tags  {top: 215px;}
    .about__tag  {height: 32px;font-size: 14px;}

}

/* УНИВЕРСАЛЬНЫЙ hover-transition для ВСЕХ интерактивных элементов */
a,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
select,
[role="button"],
[role="tab"],
[role="link"],
[onclick] {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, opacity .25s ease, transform .15s ease, fill .25s ease, stroke .25s ease;
}

/* ============================================================
   CTA-FORM (Figma Group 2085664103, 1320×514 at y=12583)
   3 слоя bg: solid blue + linear teal-blue gradient (left strip)
   + radial blue glow + blur. Portrait слева, белый form-panel справа.
   ============================================================ */
/* ============================================================
   LEAD-MODAL — всплывающая форма (та же .cta-form__inner, что и в #lead).
   Ширина карточки = .h-container. Плавные затемнение и появление.
   ============================================================ */
/* Оверлей сам НЕ прокручивается — иначе затемнение уезжает при свайпе.
   Прокручивается только карточка (.lead-modal__card). Сверху/снизу — по 24px. */
.lead-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 24px 0;
    overflow: hidden;
    overscroll-behavior: contain;
}

.lead-modal[hidden] { display: none; }

/* fixed, а не absolute: затемнение всегда закрывает весь экран целиком */
.lead-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(18, 19, 26, .6);
    opacity: 0;
    transition: opacity .3s ease;
}

.lead-modal__dialog {
    position: relative;
    display: flex;
    width: 100%;
    max-height: 100%;
    opacity: 0;
    transform: translateY(16px) scale(.98);
    transition: opacity .3s ease, transform .3s ease;
}

/* Цепочка max-height, чтобы карточка знала свой предел и начала прокрутку */
.lead-modal__dialog > .h-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    box-sizing: border-box;
}

.lead-modal.is-open .lead-modal__backdrop { opacity: 1; }
.lead-modal.is-open .lead-modal__dialog { opacity: 1; transform: none; }

/* Прокручивается ИМЕННО карточка; overscroll-behavior не даёт скроллу «протечь» на страницу */
.lead-modal__card {
    position: relative;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* z-index выше .cta-form__panel (у неё 3), иначе белая панель формы
   перехватывает клик по крестику. Иконка тёмная — крестик лежит на белой панели. */
.lead-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: #12131A;
    background: rgba(18, 19, 26, .06);
    transition: background .2s ease;
}

.lead-modal__close:hover { background: rgba(18, 19, 26, .14); }

/* Пока окно открыто — фон не прокручивается */
/* Блокировка фона: position:fixed надёжнее overflow:hidden — на мобильных
   overflow:hidden не останавливает тач-скролл страницы. Скролл возвращает JS. */
body.lead-modal-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    /* Место исчезнувшего скроллбара — чтобы контент не прыгал (--kg-sbw задаёт KgModalLock) */
    padding-right: var(--kg-sbw, 0px);
}
/* Фиксированная шапка тоже позиционируется от вьюпорта — компенсируем и её */
body.lead-modal-open .site-header {
    padding-right: var(--kg-sbw, 0px);
}

@media (prefers-reduced-motion: reduce) {
    .lead-modal__backdrop,
    .lead-modal__dialog { transition: none; }
}

.cta-form {
    padding: 60px 0;
    background: #ffffff;
    scroll-margin-top: 104px;   /* якорь #lead не должен прятаться под фикс-шапку */
}

/* По MCP figma-data #499:1680 (3 layer'а fills):
   1. fill_a2bd51cd = solid #A57766
   2. fill_34c83957 = radial circle at 50% 0% #70A6FF→#0029DB at 90%
      (image 2913 rect 1452×844 @ -85,-93. В card 1320×514: center 49%/-18%, r ≈ 1307px)
   3. fill_2241a3cd = vignette radial circle at 50% 50% rgba(62,134,252) 0→1 38%-100%
      (rect 1978×1443 @ -329,-393, blur 78.8px. В card-coords: center 50%/64%) */
.cta-form__inner {
    position: relative;
    height: 514px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(45deg, #464670, #24243E);
    color: #ffffff;


}

.cta-form__inner::before {
    content: '';
position: absolute;
left: -24.92%;
right: -24.92%;
top: -76.46%;
bottom: -104.28%;
background: radial-gradient(50% 63.6% at 50% 50%, rgba(36, 36, 62, 0) 38.48%, #24243E 100%);
filter: blur(78.8026px);
backdrop-filter: blur(9.5779px);
}


.cta-form__inner::after {
    content: '';
    position: absolute;
left: -6.44%;
right: -3.56%;
top: -18.09%;
bottom: -46.11%;

background: radial-gradient(78.74% 100% at 50% 0%, #525292 0%, #24243E 90.48%);
}

.cta-form__inner > * { position: relative; z-index: 1; }

/* Portrait photo (Figma 633×832 at left=338 inside card 1320 — overflow) */
.cta-form__photo {
    position: absolute;
    left: 338px;
    top: 8px;
    width: 633px;
    height: 832px;
    object-fit: contain;
    object-position: top left;
    pointer-events: none;
    z-index: 1;
}

/* Title + Subtitle frame at (56, 152), w=382, gap=16 */
.cta-form__copy {
    position: absolute;
    top: 152px;
    left: 56px;
    width: 382px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 2;
}

.cta-form__title {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.2;        /* 48/40 */
    color: #ffffff;
}

.cta-form__subtitle {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;        /* 25.20/18 */
    color: rgba(255, 255, 255, 0.8);
}

/* Form panel — white card 446×498 at (866, 8), rx=8; контент-форма 320 → гориз. padding 63 (Figma) */
.cta-form__panel {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 446px;
    height: 498px;
    padding: 32px 63px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 8px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cta-form__panel-head { display: flex; flex-direction: column; gap: 6px; }

.cta-form__panel-title {
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;        /* 28.60/22 */
    color: #12131A;
}

.cta-form__panel-sub {
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #6B7280;
}

/* Fields stack — gap 12 (per 1.html) */
.cta-form__fields { display: flex; flex-direction: column; gap: 12px; }

.cta-form__input {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid #6B7280;
    border-radius: 4px;
    background: #ffffff;
    box-sizing: border-box;
    opacity: 0.8;
    transition: opacity .2s, border-color .2s;
}
.cta-form__input:focus-within { opacity: 1; border-color: #AE7A67; }

.cta-form__input input {
    width: 100%;
    padding: 24px;
    border: 0;
    outline: none;
    background: transparent;
    box-sizing: border-box;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: #12131A;
}
.cta-form__input input::placeholder { color: #6B7280; }

/* Submit button — padding 24 40 (per 1.html), #AE7A67, full width */
.cta-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 24px 40px;
    border: 0;
    border-radius: 8px;
    background: #AE7A67;
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
    box-sizing: border-box;
}
.cta-form__submit:hover { background: #9b6856; }
.cta-form__submit:disabled { opacity: .7; cursor: default; }

/* Серверный фолбэк-алерт (без JS) */
.cta-form__ok  { margin: 8px 0; padding: 10px 14px; border-radius: 8px; background: #E6F4EA; color: #1E7E34; font-size: 14px; }
.cta-form__err { margin: 8px 0; padding: 10px 14px; border-radius: 8px; background: #FDECEC; color: #C0392B; font-size: 14px; }

/* AJAX-уведомление формы — плавное появление/скрытие */
/* Уведомление — оверлеем поверх панели (absolute), чтобы не сдвигать поля формы */
.cta-form__notice {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 6;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.45;
    box-shadow: 0 8px 24px rgba(18,19,26,.12);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .35s ease, transform .35s ease;
}
.cta-form__notice[hidden] { display: none; }
.cta-form__notice.is-visible { opacity: 1; transform: translateY(0); }
.cta-form__notice--ok  { background: #E6F4EA; color: #1E7E34; }
.cta-form__notice--err { background: #FDECEC; color: #C0392B; }

/* Consent checkboxes */
.cta-form__checks { display: flex; flex-direction: column; gap: 16px; }

/* Обязательное согласие не отмечено — красная рамка + мягкая пульсация внимания */
.cta-form__check.is-invalid .cta-form__check-box,
.order-form__check.is-invalid .order-form__check-box {
    border-color: #E5484D;
    box-shadow: 0 0 0 3px rgba(229,72,77,.18);
    animation: kgCheckShake .4s ease;
}
.cta-form__check.is-invalid .cta-form__check-text,
.order-form__check.is-invalid .order-form__check-text { color: #E5484D; }
@keyframes kgCheckShake {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}
.cta-form__check {
    display: inline-flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}
.cta-form__check input { display: none; }

.cta-form__check-box {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #EAECEE;
    border-radius: 2px;
    background: #ffffff;
    position: relative;
    transition: background .15s, border-color .15s;
}
.cta-form__check input:checked + .cta-form__check-box {
    background: #EAECEE;
    border-color: #EAECEE;
}
.cta-form__check input:checked + .cta-form__check-box::after {
    content: "";
    position: absolute;
    left: 5px; top: 1px;
    width: 5px; height: 9px;
    border-right: 2px solid #1E213D;
    border-bottom: 2px solid #1E213D;
    transform: rotate(45deg);
}

.cta-form__check-text {
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 1.5;
    color: #6B7280;
}

/* Ссылка «обработку персональных данных» внутри текста согласия */
.cta-form__check-text a {
    color: #6B7280;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s ease;
}

.cta-form__check-text a:hover { color: #a57766; }

@media (max-width: 991.98px) {
    /* cta мобайл по фрейму: портрет сверху → копи → белая форма (всё в синем блоке) */
    .cta-form__inner {
        height: auto;
        padding: 32px;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .cta-form__title { font-size: 32px; }
    /* Порядок по фрейму #626:25492: заголовок (верх) → портрет (середина) → белая форма (низ) */
    .cta-form__copy  { order: 1; position: static; top: auto; left: auto; width: auto; max-width: 100%; }
    .cta-form__photo {
        order: 2;
        position: static;
        display: block;
        width: 100%;
        max-width: none;
        height: 277px;            /* фрейм портрет 338×277 @ y245 */
        object-fit: cover;
        object-position: center top;
        margin: 0;
        border-radius: 8px;
    }
    .cta-form__panel { order: 3; position: relative; top: auto; right: auto; width: 100%; height: auto; padding: 24px; }
}

/* CTA — мобайл (фрейм #626:25492): full-bleed; портрет ПОКАЗАН (он есть во фрейме: 338×277) */
@media (max-width: 767.98px) {
    .cta-form .h-container { max-width: none; padding: 0; }
    .cta-form__inner { padding: 24px 8px 8px 8px;gap: 0px;}
    .cta-form__subtitle {margin: 0 0 24px 0;}
    .footer {padding: 64px 0;}
    .footer__inner {padding: 0 16px;}
    .cta-form__photo { display: block; }   /* отменяем прежнее скрытие */
}

/* ===== МОБАЙЛ: боковые паддинги 8px у заголовков+подзаголовков всех секций ===== */
@media (max-width: 767.98px) {
    .about__title,     .about__subtitle,
    .projects__title,  .projects__subtitle,
    .bento__title,     .bento__subtitle,
    .podbor__title,    .podbor__subtitle,
    .map-section__title, .map-section__subtitle,
    .finishes__title,  .finishes__subtitle,
    .payment__title,   .payment__subtitle,
    .docs__title,      .docs__subtitle,
    .news__title,      .news__subtitle {
        padding-left: 8px;
        padding-right: 8px;
    }
    /* Табы/бары секций — тоже не приклеены к краю (8px по бокам) */
    .finishes__tabs,
    .map-section__tabs,
    .progress__bar,
    .docs__bar,
    .news__bar {
        padding-left: 8px;
        padding-right: 8px;
        box-sizing: border-box;
    }
}

/* ============================================================
   MEGAMENU — дропдауны под навигацией шапки
   ============================================================ */
	
/* nav-item — position: static! Megamenu позиционируется относительно .site-header */
.site-header__nav-item {
    position: static;
    display: inline-flex;
    align-items: center;
}

.site-header__nav-item:has(> a[href="/novosti"]) { display: none; }


.site-header__nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

/* ============================================================
   MEGAMENU — выпадающие меню, позиционируются по .site-header
   Размеры точно из Figma: svg/меню-*.html
   ============================================================ */
.megamenu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding-top: 8px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
        opacity   .22s ease,
        transform .22s ease,
        visibility 0s linear .22s;
}

.megamenu .h-container {
    max-width: 1368px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.site-header__nav-item.is-open .megamenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        opacity   .22s ease,
        transform .22s ease,
        visibility 0s linear 0s;
}

/* ===================================================================
   MEGAMENU — общий белый блок 1320px
   Точные размеры из Figma: svg/меню-*.html
   Белый wrap: position:absolute, top:115, left:300, radius:12, bg:white
   =================================================================== */

.megamenu__wrap {
    display: grid;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 24px 64px -16px rgba(15, 23, 42, .18), 0 8px 16px -8px rgba(15, 23, 42, .08);
    padding: 8px;
    max-width: 1320px;
    margin: 0 auto;
    box-sizing: border-box;
}

.megamenu__main {
    background: transparent;
    box-shadow: none;
    padding: 0;
    color: #12131A;
    min-width: 0;
}

/* Intro block — серый верхний блок (radius:6, bg:#fefefe) */
.megamenu__intro {
    display: flex;
    align-items: center;
    border-radius: 6px;
    background: #fefefe;
    overflow: hidden;
}

/* Intro-блок «Проекты» — кликабельный, ведёт на страницу ЖК */
.megamenu__intro--link {
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, background-color .2s ease;
}
.megamenu__intro--link:hover {
    background: #E9EBEF;
    transform: translateY(-2px);
}
.megamenu__intro--link .megamenu__intro-img {
    transition: transform .35s ease;
}
.megamenu__intro--link:hover .megamenu__intro-img {
    transform: scale(1.05);
}

.megamenu__intro-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    padding: 0 16px 0 40px;
}

.megamenu__intro-title {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    color: #12131A;
}

.megamenu__intro-sub {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: #6B7280;
}

.megamenu__intro-img {
    flex-shrink: 0;
    object-fit: contain;
    align-self: flex-end;
}

/* Items grid (base) */
.megamenu__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}

/* ================================================================
   ВАРИАНТ 1 — ПРОЕКТЫ (Figma: 1320×440)
   Левая колонка 867px: серый intro 867×135 + grid карточек 2-кол
   Правая колонка 421px: синий feature 421×424, radius:6
   ================================================================ */
.megamenu--projects .megamenu__wrap {
    grid-template-columns: 867px 421px;
    gap: 16px;
    padding: 8px;
    min-height: 440px;
    align-items: stretch;
}

.megamenu--projects .megamenu__main {
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Серый intro Проектов: 867×135 */
.megamenu--projects .megamenu__intro {
    height: 135px;
    flex-shrink: 0;
    margin-bottom: 32px;
    border-radius: 6px;
}

.megamenu--projects .megamenu__intro-text {
    padding: 0 16px 0 40px;
}

/* Картинка в intro Проектов: 138×119 */
.megamenu--projects .megamenu__intro-img {
    width: 138px;
    height: 119px;
    margin-right: 16px;
    align-self: center;
}

/* Grid карточек: 2 колонки по 334px, gap 32×63 */
.megamenu--projects .megamenu__grid {
    grid-template-columns: 334px 334px;
    gap: 32px 63px;
    padding-left: 40px;
}

/* Проекты: только переопределяем icon (остальное в base) */
.megamenu--projects .megamenu__card-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

/* Синий feature Проектов: 421×424 */
.megamenu--projects .megamenu__feature {
    border-radius: 6px;
    min-height: 424px;
    align-self: stretch;
}

/* ================================================================
   ВАРИАНТ 2 — НЕДВИЖИМОСТЬ (SVG menu2: 1320×308)
   4 колонки: шапка (иконка+заголовок+цена, y=48) + список сублинков
   (Студии/1-3-комнатные, y≈134/171/209/245, gap 16). Колонки x=48,362,676,990
   ================================================================ */
.megamenu--realty .megamenu__wrap {
    grid-template-columns: 1fr;
    padding: 48px;
    min-height: 308px;
}

.megamenu--realty .megamenu__main {
    padding: 0;
}

/* 4 колонки в ряд. gap 32 → колонки 282px, иконки на x=48/362/676/990 (как в SVG) */
.megamenu--realty .megamenu__grid {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 32px;
    align-items: start;
}

/* Колонка = шапка + сублинки */
.megamenu__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Список сублинков под шапкой. В SVG menu2 они выровнены по ЛЕВОМУ КРАЮ ИКОНКИ
   (x≈48), а НЕ под текстом. Первый сублинк y≈134, шаг 37 (lh21+gap16). */
.megamenu__sublinks {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 34px;
    padding-left: 0;
}

.megamenu__sublink {
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
    color: #12131A;
    text-decoration: none;
    transition: color .15s;
}

.megamenu__sublink:hover { color: #A57766; }

.megamenu--realty .megamenu__intro { display: none; }

/* ================================================================
   ВАРИАНТ 3 — СПОСОБЫ ПОКУПКИ (Figma: 1320×348)
   Ряд 1: [серый intro 648px] [синий feature 648px] высота 135px, gap 8px
   Ряд 2: [cards spanning full width], gap 29px между рядами
   ================================================================ */
.megamenu--sposoby .megamenu__wrap {
    grid-template-columns: 652px 644px;
    grid-template-rows: 135px auto;
    grid-template-areas:
        "intro feature"
        "main  main";
    column-gap: 8px;
    row-gap: 29px;
    padding: 8px;

}

/* Серый intro-standalone (слева вверху) */
.megamenu--sposoby .megamenu__intro-standalone {
    grid-area: intro;
    display: flex;
    align-items: center;
    height: 135px;
    border-radius: 6px;
    background: #fefefe;
    overflow: hidden;
    margin: 0;
}

/* Ховер плитки intro-standalone — подъём + тень + зум картинки (как везде) */
.megamenu__intro-standalone {
    transition: transform .25s ease, box-shadow .25s ease, background-color .2s ease;
}
.megamenu__intro-standalone:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(18, 19, 26, 0.08);
    background: #E9EBEF;
}
.megamenu__intro-standalone .megamenu__intro-img {
    transition: transform .35s ease;
}
.megamenu__intro-standalone:hover .megamenu__intro-img {
    transform: scale(1.05);
}

.megamenu--sposoby .megamenu__intro-standalone .megamenu__intro-text {
    flex: 1;
    padding: 0 16px 0 40px;
}

.megamenu--sposoby .megamenu__intro-standalone .megamenu__intro-img {
    width: 273px;
    height: 127px;
    object-fit: cover;
    align-self: flex-end;
    flex-shrink: 0;
    margin-right: 0;
}

/* Синий feature (справа вверху, горизонтальный) */
.megamenu--sposoby .megamenu__feature {
    grid-area: feature;
    height: 135px;
    min-height: 0;
    border-radius: 6px;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
}

.megamenu--sposoby .megamenu__feature .megamenu__feature-text {
    flex: 1;
    position: static;
    padding: 0 16px 0 40px;
}

.megamenu--sposoby .megamenu__feature .megamenu__feature-img {
    position: static;
    width: 273px;
    height: 127px;
    object-fit: cover;
    align-self: flex-end;
    flex-shrink: 0;
}

/* Main (cards, нижний ряд — full-width) */
.megamenu--sposoby .megamenu__main {
    grid-area: main;
    padding: 0 40px 20px 40px;
}

/* gap 32 → колонки 282px, иконки на x=48/362/676/990 (как в SVG) */
.megamenu--sposoby .megamenu__grid {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 32px;
    row-gap: 32px;
    align-items: start;
}

.megamenu--sposoby .megamenu__card {
    align-items: flex-start;
}

/* ================================================================
   ВАРИАНТ 4 — НОВОСТИ И АКЦИИ (SVG menu4: 1320×144)
   Левая зона 652px (карточки 2 кол, x=48,362 y=48)
   Правая: синий feature 644×128 @x=668 (#AE7A67), горизонтальный
   ================================================================ */
.megamenu--news .megamenu__wrap {
    grid-template-columns: 652px 644px;
    grid-template-rows: 135px;
    column-gap: 8px;
    padding: 8px;
    align-items: center;
}

.megamenu--news .megamenu__main {
    padding: 0 0 0 40px;
}

.megamenu--news .megamenu__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 16px;
    align-items: start;
}

.megamenu--news .megamenu__card {
    align-items: flex-start;
}

/* Синий feature Новостей: 644×128, горизонтальный, #AE7A67 */
.megamenu--news .megamenu__feature {
    height: 135px;
    min-height: 0;
    border-radius: 6px;
    background: #AE7A67;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
}

.megamenu--news .megamenu__feature .megamenu__feature-text {
    flex: 1;
    position: static;
    padding: 0 16px 0 40px;
}

.megamenu--news .megamenu__feature .megamenu__feature-img {
    position: static;
    width: 273px;
    height: 120px;
    object-fit: cover;
    align-self: flex-end;
    flex-shrink: 0;
}

.megamenu--news .megamenu__intro { display: none; }

/* ================================================================
   ВАРИАНТ 5 — О КОМПАНИИ (SVG menu5: 1320×223)
   Левая зона 966px (карточки 3 кол × 2 ряда, x=48,362,676 y=48,128)
   Правая: синий feature 330×207 @x=982, flex-column (text вверху + img внизу)
   ================================================================ */
.megamenu--about .megamenu__wrap {
    grid-template-columns: 966px 330px;
    grid-template-rows: 207px;
    column-gap: 8px;
    padding: 8px;
    align-items: center;
}

.megamenu--about .megamenu__main {
    padding: 0 0 0 40px;
}

.megamenu--about .megamenu__grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 16px;
    row-gap: 32px;
    align-items: start;
}

.megamenu--about .megamenu__card {
    align-items: flex-start;
}

/* Синий feature О компании: 330×207, flex-column */
.megamenu--about .megamenu__feature {
    height: 207px;
    border-radius: 6px;
    padding: 40px 40px 0px 40px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.megamenu--about .megamenu__feature .megamenu__feature-text {
    position: static;
    flex-shrink: 0;
}

.megamenu--about .megamenu__feature .megamenu__feature-img {
    position: static;
    width: 100%;
    height: 91px;
    object-fit: contain;
    margin-top: auto;
}

.megamenu--about .megamenu__intro { display: none; }

/* ================================================================
   КАРТОЧКИ (общие стили)
   ================================================================ */
.megamenu__card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    border-radius: 8px;
    text-decoration: none;
    color: #12131A;
    background: transparent;
    transition: transform .2s ease;
}

/* Hover — плавный подъём, без серого фона (как на обычных блоках) */
.megamenu__card:hover {
    transform: translateY(-2px);
}

/* Иконка-глиф: тёмный фон #12131A + белый глиф; на ховере фон #A57766.
   В Проектах/Недвижимости иконка — фото (img перекрывает фон). */
.megamenu__card-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #12131A;
    color: #ffffff;
    overflow: hidden;
    transition: background .2s ease;
}

.megamenu__card:hover .megamenu__card-icon {
    background: #A57766;
}

.megamenu__card-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.megamenu__card-icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

.megamenu__card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.megamenu__card-title {
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #12131A;
}

.megamenu__card-subtitle {
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #6B7280;
}

/* ================================================================
   FEATURE — базовый синий блок (Проекты, О компании — flex-column)
   Переопределяется для Способы и Новости (flex-row)
   ================================================================ */
.megamenu__feature {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 40px;
    border-radius: 6px;
    background:#A57766;
    color: #ffffff;
    text-decoration: none;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

/* Ховер цветной плитки — подъём + тень (как у карточек по сайту) */
.megamenu__feature:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(18, 19, 26, 0.22);
}

.megamenu__feature-text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.megamenu__feature-title {
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    color: #ffffff;
}

.megamenu__feature-sub {
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
}

/* Картинка feature по умолчанию — абсолютно позиционирована внизу (Проекты) */
.megamenu__feature-img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 72%;
    object-fit: contain;
    object-position: left bottom;
    z-index: 0;
    transition: transform .35s ease;
}

/* Лёгкий зум картинки на ховере цветной плитки */
.megamenu__feature:hover .megamenu__feature-img {
    transform: scale(1.05);
}

/* Шапка остаётся прозрачной при открытом дропдауне */

@media (max-width: 1100px) {
    .megamenu { display: none; }
}

/* ===================================================================
   СТРАНИЦА ЖК — Преимущества ЖК (контейнер 1368 как секции главной)
   =================================================================== */
.cabout { padding: 72px 0; }
.cabout__inner { max-width: 1368px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.cabout__h2 { font-size: 32px; font-weight: 700; color: #12131A; margin: 0 0 12px; }
.cabout__sub { font-size: 16px; line-height: 1.55; color: #6B7280; margin: 0 0 32px; max-width: 720px; }

/* Подзаголовок пишется визуальным редактором — оформляем его разметку */
.cabout__sub > :first-child { margin-top: 0; }
.cabout__sub > :last-child { margin-bottom: 0; }
.cabout__sub p { margin: 0 0 12px; }
.cabout__sub ul,
.cabout__sub ol { margin: 0 0 12px; padding-left: 20px; }
.cabout__sub li { margin-bottom: 6px; }
.cabout__sub strong,
.cabout__sub b { font-weight: 700; color: #1E213D; }
.cabout__sub a { color: #A57766; text-decoration: underline; }
.cabout__sub a:hover { color: #8C6252; }
.cabout__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.cabout__media { border-radius: 16px; overflow: hidden; background: #fefefe; min-height: 460px; }
.cabout__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cabout__specs { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 16px; }
.cabout__spec { background: transparent; border: 1px solid #EAECEE; border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 6px; transition: border-color .2s ease; }
.cabout__spec:hover { border-color: #CBCBCC; }
.cabout__spec-lbl { font-size: 14px; font-weight: 500; color: #6B7280; }
.cabout__spec-val { font-size: 20px; font-weight: 700; color: #12131A; line-height: 1.3; }
.cabout__spec-desc { font-size: 14px; line-height: 1.5; color: #6B7280; margin-top: 2px; }

@media (max-width: 991px) { .cabout { padding: 48px 0; } .cabout__grid { grid-template-columns: 1fr; gap: 16px; } .cabout__media { min-height: 280px; } }
@media (max-width: 575px) { .cabout__specs { grid-template-columns: 1fr; } }
/* ===== Мобайл (Figma 626-29053): карточки во всю ширину (0 по краям), заголовок/подзаголовок/фото при 16px.
   Подход: у КОНТЕЙНЕРА боковой паддинг = 0, отступ 16px добавляем только тем блокам, кому нужен
   (без отрицательных margin). Внутри карточки 24px сверху/снизу, 16px по бокам, рамка #CBCBCC. ===== */
@media (max-width: 767.98px) {
    .cabout { padding: 32px 0; }
    .cabout__inner { padding-left: 0; padding-right: 0; }
    /* Текст — при 16px; фото и карточки во всю ширину (0 по краям). Figma: фото radius 12 (#626:29052) */
    .cabout__h2,
    .cabout__sub { padding-left: 16px; padding-right: 16px; }
    .cabout__media { border-radius: 12px; }
    .cabout__specs { grid-template-columns: 1fr; gap: 16px; }
    .cabout__spec { padding: 24px 16px; gap: 8px; border-color: #CBCBCC; }
}

/* ===================================================================
   СТРАНИЦА КВАРТИРЫ (apartment/show)
   =================================================================== */
.apt-spacer { height: 104px; }
/* Вся страница квартиры — серый фон #fefefe; блоки/карточки белые поверх */
body.apt-page { background: #fefefe; }
body.apt-page .cta-form { background: #fefefe; }
.apt { padding: 24px 0 64px; background: transparent; }

/* Хлебные крошки */
.apt__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-family: "Manrope", sans-serif; font-weight: 500; font-size: 14px; line-height: 1.5; color: #6B7280; margin-bottom: 24px; }
.apt__crumbs a { color: #6B7280; text-decoration: none; opacity: .6; }
.apt__crumbs a:hover { opacity: 1; color: #AE7A67; }
.apt__crumbs-dot { color: #6B7280; }

/* Заголовок + адрес + чипы */
.apt__header { margin-bottom: 24px; }
.apt__title { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 40px; line-height: 1.15; letter-spacing: -.01em; color: #12131A; margin: 0; }
.apt__address { font-family: "Manrope", sans-serif; font-weight: 500; font-size: 18px; line-height: 1.4; color: #6B7280; margin: 10px 0 0; }
.apt__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.apt__chip { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 8px; background: #fff; border: 1px solid #EAECEE; font-family: "Manrope", sans-serif; font-weight: 500; font-size: 14px; color: #12131A; }

/* Двухколоночная раскладка: галерея + карточка справа */
.apt__layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.apt__main { min-width: 0; }
.apt__aside { position: sticky; top: 120px; }

/* Информационная карточка */
.apt__card { background: #FBFBFB; border: 1px solid #EAECEE; border-radius: 16px; padding: 24px; box-shadow: 0 8px 28px rgba(18,19,26,.05); }
.apt__price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.apt__price { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 30px; line-height: 1.2; color: #12131A; }
.apt__persq { font-family: "Manrope", sans-serif; font-weight: 500; font-size: 14px; color: #6B7280; white-space: nowrap; }
.apt__status { font-family: "Manrope", sans-serif; font-weight: 600; font-size: 15px; color: #AE7A67; margin-top: 6px; }

.apt__rows { list-style: none; margin: 20px 0 0; padding: 0; }
.apt__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid #fefefe; }
.apt__row:last-child { border-bottom: 0; }
.apt__row-k { font-family: "Manrope", sans-serif; font-weight: 500; font-size: 15px; color: #6B7280; }
.apt__row-v { font-family: "Manrope", sans-serif; font-weight: 600; font-size: 15px; color: #12131A; text-align: right; }
.apt__row-v--link { color: #AE7A67; text-decoration: none; }
.apt__row-v--link:hover { text-decoration: underline; }

/* Это <button> (открывает попап заказа) — нужны сброс рамки и курсор */
.apt__book { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 24px; padding: 18px 24px; border: 0; border-radius: 8px; background: #AE7A67; color: #fff; font-family: "Manrope", sans-serif; font-weight: 600; font-size: 15px; line-height: 1.2; cursor: pointer; text-decoration: none; box-sizing: border-box; transition: background .15s; }
.apt__book:hover { background: #9b6856; }



.apt__consult { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 8px; padding: 14px 24px; color: #AE7A67; font-family: "Manrope", sans-serif; font-weight: 600; font-size: 15px; text-decoration: none; box-sizing: border-box; }
.apt__consult:hover { color: #9b6856; }
.apt__cxlink { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 8px; padding: 16px 24px; border-radius: 8px; background: #fefefe; color: #1E213D; font-family: "Manrope", sans-serif; font-weight: 600; font-size: 15px; text-decoration: none; box-sizing: border-box; transition: background .15s; }
.apt__cxlink:hover { background: #e7eaef; }

/* Табы галереи (Планировка / ЖК …) */
.apt-gal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.apt-gal-tab { padding: 12px 22px; border-radius: 8px; background: #fff; color: #12131A; border: 1px solid #EAECEE; font-family: "Manrope", sans-serif; font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.apt-gal-tab.is-active { background: #AE7A67; color: #fff; border-color: #AE7A67; }
/* На мобиле табы галереи → кастомная выпадашка (Figma 626-32392) */
.apt-gal__select { display: none; }
@media (max-width: 767.98px) {
    .apt-gal-tabs { display: none; }
    .apt-gal__select { display: block; margin-bottom: 16px; }
}

/* Цена: старая цена + бейдж скидки */
.apt__price-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.apt__discount { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; background: #E6F4EA; color: #1E7E34; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 13px; }
.apt__price-old { font-family: "Manrope", sans-serif; font-weight: 500; font-size: 16px; color: #9AA1AC; text-decoration: line-through; margin-top: 2px; }

/* Кастомные селекторы карточки (Вариант отделки / оплаты) */
.apt__selects { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #fefefe; }
.apt-select { position: relative; border: 1px solid #F4F1EB; border-radius: 8px; padding: 12px 16px; font-family: "Manrope", sans-serif; }
.apt-select__lbl { display: block; font-weight: 500; font-size: 13px; color: #6B7280; }
.apt-select__btn { width: 100%; margin-top: 4px; padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 16px; color: #12131A; text-align: left; }
.apt-select__chev { flex: 0 0 auto; transition: transform .2s; }
.apt-select.is-open .apt-select__chev { transform: rotate(180deg); }
.apt-select__menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; background: #fff; border: 1px solid #F4F1EB; border-radius: 8px; box-shadow: 0 12px 32px rgba(18,19,26,.12); padding: 6px; margin: 0; list-style: none; display: none; }
.apt-select.is-open .apt-select__menu { display: block; }
.apt-select__opt { padding: 10px 12px; border-radius: 6px; font-weight: 500; font-size: 15px; color: #12131A; cursor: pointer; }
.apt-select__opt:hover { background: #fefefe; }
.apt-select__opt.is-active { color: #AE7A67; font-weight: 600; }

/* Блок «Ипотека» в карточке */
.apt__mortgage { margin-top: 20px; padding-top: 20px; border-top: 1px solid #fefefe; display: flex; flex-direction: column; }
.apt__mortgage-lbl { font-family: "Manrope", sans-serif; font-weight: 500; font-size: 14px; color: #6B7280; }
.apt__mortgage-val { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 22px; line-height: 1.3; color: #12131A; margin-top: 4px; }
.apt__mortgage-sub { font-family: "Manrope", sans-serif; font-weight: 500; font-size: 13px; color: #9AA1AC; margin-top: 4px; }

/* ===== Почему этот лот ===== */
.apt-why { background: transparent; padding: 64px 0; }
.apt-why .h-container { max-width: 1368px; }
.apt-why__title { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 36px; line-height: 1.2; color: #12131A; margin: 0; }
.apt-why__sub { font-family: "Manrope", sans-serif; font-weight: 500; font-size: 18px; line-height: 1.4; color: #6B7280; margin: 10px 0 0; max-width: 720px; }
.apt-why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.apt-why__card { display: flex; flex-direction: column; padding: 24px; border: 1px solid #EAECEE; border-radius: 16px; background: #fff; }
.apt-why__lbl { font-family: "Manrope", sans-serif; font-weight: 500; font-size: 14px; color: #6B7280; }
.apt-why__val { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 22px; line-height: 1.25; color: #12131A; margin-top: 10px; }
.apt-why__desc { font-family: "Manrope", sans-serif; font-weight: 500; font-size: 15px; line-height: 1.5; color: #6B7280; margin-top: 10px; }

/* Кнопка «Страница ЖК» под галереей проекта */
.apt-cxbtn-wrap { background: transparent; }
.apt-cxbtn-wrap .h-container { max-width: 1368px; padding-top: 0; padding-bottom: 8px; }
.apt-cxbtn { display: inline-flex; align-items: center; justify-content: center; padding: 16px 32px; border-radius: 8px; background: #fefefe; color: #1E213D; font-family: "Manrope", sans-serif; font-weight: 600; font-size: 15px; text-decoration: none; background: #F4F1EB; transition: background .15s; }
.apt-cxbtn:hover { background: #f1e4cb; }

/* ===== Похожие квартиры ===== */
.apt-similar { background: transparent; padding: 64px 0; }
.apt-similar .h-container { max-width: 1368px; }
.apt-similar__title { font-family: "Manrope", sans-serif; font-size: 36px; font-weight: 700; line-height: 1.2; margin: 0; color: #12131A; }
.apt-similar__sub { font-family: "Manrope", sans-serif; font-weight: 500; font-size: 18px; line-height: 1.4; color: #6B7280; margin: 10px 0 28px; }
.apt-similar__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

@media (max-width: 991px) {
    .apt__layout { grid-template-columns: 1fr; gap: 20px; }
    .apt__aside { position: static; }
    .apt-why__grid { grid-template-columns: repeat(2, 1fr); }
    .apt-similar__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
    .apt { padding: 16px 0 40px; }
    /* Figma 626-31964: заголовок/галерея/карточка — во всю ширину (x:0). Контейнер без боковых,
       текстовым блокам (крошки/тайтл/адрес) даём 16, медиа/карточка — в край. */
    .apt .h-container { padding-left: 0; padding-right: 0; }
    .apt__crumbs, .apt__header { padding-left: 16px; padding-right: 16px; }   /* текст при 16, медиа/карточка в край */
    .apt__title { font-size: 36px; }
    .apt__address { font-size: 18px; }
    /* Карточка во всю ширину, фон #FBFBFB (Figma), скруг 12 */
    .apt__card { padding: 0; border-radius: 12px; background: #FBFBFB; box-shadow: none; }
    /* Цена/перекв — прямые дети карточки при 32 (Figma x:32) */
    .apt__price-row, .apt__status { margin-left: 32px; margin-right: 32px; }
    .apt__price-row { display: block; }   /* цена/старая/перекв стопкой слева (Figma) */
    .apt__persq { margin-top: 2px; }
    /* Спеки: строки текст при 32, разделители во всю ширину (Figma линии 360) */
    .apt__rows { margin: 16px 0 0; }
    .apt__row { padding-left: 32px; padding-right: 32px; }
    /* Ипотека, селекторы, кнопки — белые блоки при 8 (Figma x:8) */
    .apt__mortgage { margin: 16px 8px 0; padding: 16px 24px; border-top: 0; background: #fff; border-radius: 8px; }
    .apt__selects { margin: 16px 8px 0; padding-top: 0; border-top: 0; }
    .apt__book, .apt__consult { margin-left: auto; margin-right: auto; width: auto; }
    .apt__price { font-size: 26px; }
    /* «Почему этот лот» и «Вы недавно смотрели»: контейнер во всю ширину,
       заголовок/подзаголовок — padding 16, карточки — в край (Figma 626-31964). */
    .apt-why, .apt-similar { padding: 40px 0; }
    .apt-why .h-container,
    .apt-similar .h-container { padding-left: 0; padding-right: 0; }
    .apt-why__title, .apt-why__sub,
    .apt-similar__title, .apt-similar__sub { padding-left: 16px; padding-right: 16px; }
    .apt-why__title, .apt-similar__title { font-size: 26px; }
    .apt-why__sub { font-size: 16px; }
    .apt-why__grid, .apt-similar__grid { grid-template-columns: 1fr; gap: 16px; }
    /* Карточки бенто во всю ширину, внутри 24/16, рамка #CBCBCC (как cabout) */
    .apt-why__card { padding: 24px 16px; border-color: #CBCBCC; border-radius: 12px; }
    /* Кнопка «Страница ЖК» — отступ 16 */
    .apt-cxbtn-wrap .h-container { padding-left: 16px; padding-right: 16px; }
}

/* Галерея квартиры (Figma svg/kvartira: одно большое фото, стрелки снизу-слева, зум снизу-справа) */
.apt-gal { position: relative; }
.apt-gal__main { position: relative; border-radius: 12px; overflow: hidden; background: #FBFBFB; border: 1px solid #EAECEE; }
.apt-gal__main .swiper-slide { aspect-ratio: 960 / 559; }
.apt-gal__slide { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.apt-gal__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Стрелки prev/next — снизу слева, два серых квадрата 56×56 */
.apt-gal__nav { position: absolute; left: 32px; bottom: 31px; z-index: 5; display: flex; gap: 8px; }
.apt-gal__btn { width: 56px; height: 56px; border-radius: 8px; border: 0; background: #fefefe; color: #6B7280; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, opacity .15s; }
.apt-gal__btn:hover { background: #e7eaef; }
.apt-gal__btn.swiper-button-disabled { opacity: .4; pointer-events: none; }

/* Зум +/- — снизу справа, два полупрозрачных квадрата 56×56, белые иконки */
.apt-gal__zoom { position: absolute; right: 31px; bottom: 31px; z-index: 5; display: flex; gap: 8px; }
.apt-gal__zbtn { width: 56px; height: 56px; border-radius: 8px; border: 0; background: rgba(242,243,245,.2); color: #fff; display: flex; align-items: center; justify-content: center; cursor: zoom-in; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); transition: background .15s; }
.apt-gal__zbtn:hover { background: rgba(242,243,245,.38); }

@media (max-width: 767.98px) {
    .apt-gal__nav { left: 12px; bottom: 12px; }
    .apt-gal__zoom { display: none; }   /* Figma: на мобиле нет кнопки увеличения */
    .apt-gal__btn { width: 56px; height: 56px; }
}

/* ===================================================================
   СТРАНИЦА ЖК — Галерея (контейнер 1368)
   =================================================================== */
.cgal { padding: 72px 0; }
.cgal__inner { max-width: 1368px; margin: 0 auto; padding: 0px; box-sizing: border-box; }
.cgal__h2 { font-size: 32px; font-weight: 700; color: #12131A; margin: 0 0 12px; }
.cgal__sub { font-size: 16px; line-height: 1.55; color: #6B7280; margin: 0 0 28px; max-width: 620px; }
.cgal__tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.cgal__tab { padding: 12px 22px; border-radius: 8px; background: #fff; color: #12131A; border: 1px solid #EAECEE; font-weight: 600; font-size: 14px; cursor: pointer; font-family: "Manrope", sans-serif; transition: background .15s, color .15s, border-color .15s; }
.cgal__tab.is-active { background: #AE7A67; color: #fff; border-color: #AE7A67; }
.cgal__select { display: none; }
@media (max-width: 767.98px) {
    .cgal__tabs { display: none; }
    .cgal__select { display: block; margin-bottom: 24px; }
    /* Figma 626-32391: секция full-bleed; текст (заголовок/подзаголовок) при 16px,
       выпадашка и фото — во всю ширину экрана (0 по краям). */
    .cgal { padding: 32px 0; }
    .cgal__inner { padding-left: 0; padding-right: 0; }
    .cgal__h2,
    .cgal__sub { padding-left: 16px; padding-right: 16px; }
}
.cgal__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 240px; gap: 16px; }
.cgal__item { border-radius: 16px; overflow: hidden; background: #fefefe; display: block; }
.cgal__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.cgal__item:hover img { transform: scale(1.05); }
.cgal__item--lg { grid-column: span 2; grid-row: span 2; }
.cgal__slider { display: none; }   /* контролы слайдера только на мобиле */
@media (max-width: 991px) { .cgal { padding: 48px 0; } .cgal__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; } }
@media (max-width: 575px) { .cgal__grid { grid-template-columns: 1fr; } .cgal__item--lg { grid-column: span 1; grid-row: span 1; } }

/* ===== Мобайл (Figma 626-32391): галерея = ОДИН слайдер (фото 220, стрелки слева + точки справа) ===== */
@media (max-width: 767.98px) {
    .cgal__grid { position: relative; display: block; height: 220px; border-radius: 8px; overflow: hidden; }
    .cgal__item { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 8px; opacity: 0; transition: opacity .35s ease; }
    .cgal__item.is-active { opacity: 1; z-index: 1; }
    .cgal__item--lg { grid-column: auto; grid-row: auto; }
    .cgal__slider { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 8px; z-index: 2; }
    .cgal__navbtn { width: 56px; height: 56px; border: 0; border-radius: 8px; background: #fefefe; color: #6B7280; display: grid; place-items: center; cursor: pointer; }
    .cgal__navbtn svg { display: block; width: 6px; height: 9px; }
    .cgal__navbtn[data-cgal-next] svg { transform: scaleX(-1); }
    .cgal__dots { margin-left: auto; display: flex; align-items: center; gap: 6px; }
    .cgal__dot { width: 10px; height: 10px; border: 0; padding: 0; border-radius: 2px; background: #fefefe; opacity: .4; cursor: pointer; }
    .cgal__dot.is-active { opacity: 1; }
}

/* ===== Страница 404 / ошибки (в стиле сайта) ===== */
.error-page {
    padding: 120px 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
}
.error-page__inner {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}
.error-page__code {
    font-family: "Manrope", sans-serif;
    font-weight: 800;
    font-size: 120px;
    line-height: 1;
    color: #AE7A67;
    margin-bottom: 16px;
}
.error-page__title {
    margin: 0 0 12px;
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.2;
    color: #12131A;
}
.error-page__text {
    margin: 0 0 32px;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #6B7280;
}
.error-page__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 40px;
    border-radius: 8px;
    background: #AE7A67;
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.error-page__btn:active { transform: translateY(0); }
@media (hover: hover) {
    .error-page__btn:hover { background: #9b6856; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
}
@media (max-width: 767.98px) {
    .error-page { padding: 72px 0; }
    .error-page__code { font-size: 88px; }
    .error-page__title { font-size: 26px; }
}

/* ============================================================
   О КОМПАНИИ — страница /o-kompanii (блок about). Перенесено из blade. 
   ============================================================ */
.ab { padding: 32px 0 48px; }
.ab__crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #9AA1AC; margin-bottom: 24px; }
.ab__crumbs a { color: #9AA1AC; text-decoration: none; }
.ab__crumbs a:hover { color: #2a71dd; }
.ab__crumbs b { color: #12131A; font-weight: 500; }
.ab__grid { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
.ab__title { font-size: 40px; font-weight: 700; margin: 0 0 10px; color: #12131A; }
.ab__sub { color: #6B7280;  margin: 0 0 32px; line-height: 1.55; }
.ab__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 40px; }
.ab-stat { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #F4F1EB; border-radius: 16px; padding: 22px 24px; min-height: 132px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.ab-stat:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(18, 19, 26, 0.08); }
.ab-stat:hover .ab-stat__ic { transform: scale(1.05); }
.ab-stat__val { font-size: 34px; font-weight: 800; color: #12131A; line-height: 1; }
.ab-stat__lbl { color: #6B7280; font-size: 14px; margin-top: 8px; }
.ab-stat__ic { width: 116px; height: 108px; object-fit: contain; object-position: right center; flex-shrink: 0; margin: 0; transition: transform .35s ease; }
.ab__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.ab-col__t { font-size: 24px; font-weight: 700; margin: 0 0 14px; color: #12131A; }
.ab-col__p { color: #4A5160; line-height: 1.6; margin: 0; }
.ab-col__list { list-style: none; margin: 0; padding: 0; }
.ab-col__list li { position: relative; padding-left: 24px; color: #4A5160; line-height: 1.5; margin-bottom: 14px; }
.ab-col__list li::before { content: ''; position: absolute; left: 4px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: #A57766; }
.ab__aside { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 16px; }
/* Карточки сайдбара «О компании» используют оформление .dp-side (см. страницу «Документы»). */
@media (max-width: 991px) {
    .ab__grid { grid-template-columns: 1fr; }
    .ab__aside { position: static; flex-direction: row; flex-wrap: wrap; }
    .ab__aside .dp-side { flex: 1 1 240px; }
    .ab__title { font-size: 30px; }
}
@media (max-width: 767px) {
    /* Контейнер во всю ширину; боковой отступ 8px у всего, КРОМЕ ab-stat (они в край) */
    .ab .h-container { padding-left: 0; padding-right: 0; }
    .ab__crumbs, .ab__title, .ab__sub, .ab__cols, .ab__aside { padding-left: 8px; padding-right: 8px; }
    .ab__title { font-size: 36px; }
    .ab__stats { grid-template-columns: 1fr; }   /* во всю ширину, без боковых отступов */
    .ab__cols { grid-template-columns: 1fr; gap: 28px; }
    .ab__aside { flex-direction: column; }
}

/* ============================================================
   ХОД СТРОИТЕЛЬСТВА — страница /xod-stroitelstva (блок construction). Перенесено из blade.
   ============================================================ */
.xs { background:#fefefe; }
/* ---- Заголовок (на сером, под солидной шапкой) ---- */
.xs-head { padding-top:136px; }   /* только верх — боковые 24px берём из .h-container (не обнуляем!) */
.xs-head__crumbs { font-size:14px; margin-bottom:32px; display:flex; gap:8px; align-items:center; color:#6B7280; }
.xs-head__crumbs a { color:#6B7280; text-decoration:none; opacity:.4; } .xs-head__crumbs a:hover { opacity:.7; }
.xs-head__crumbs b { font-weight:500; color:#6B7280; }
.xs-head__title { font-size:48px; font-weight:700; line-height:1.2; margin:0 0 8px; color:#12131A; }
.xs-head__sub { font-size:18px; line-height:1.4; color:#6B7280; max-width:760px; margin:0; }

/* ---- ТАБЫ (на сером, под hero) ---- */
.xs-tabs { display:flex; gap:8px; flex-wrap:wrap; padding-top:40px; margin-bottom:18px; }
.xs-tab { padding:16px 24px; border-radius:4px; font-size:14px; font-weight:500; cursor:pointer; line-height:1;
    border:1px solid #CBCBCC; background:#fff; color:#6B7280; transition:.15s; }
.xs-tab:hover { border-color:#AE7A67; color:#AE7A67; }
.xs-tab.is-active { background:#AE7A67; border-color:#AE7A67; color:#fff; }

/* ---- ФИЛЬТРЫ (кастомные дропдауны как на главной) ---- */
.xs-panel { padding-bottom:8px; }
.xs-filters { display:grid; grid-template-columns:2.2fr 1fr 1fr; gap:16px; }
.xs-filters .podbor__filter { box-shadow:0 18px 40px rgba(8,20,60,.08); }

.xs-count { border-top:1px solid #CBCBCC; margin-top:24px; padding-top:24px; font-size:14px; color:#6B7280; font-weight:500; margin-bottom:20px; }

/* ---- Заголовки секций ---- */
.xs-h2 { font-size:40px; font-weight:700; color:#12131A; margin:48px 0 24px; }

/* ---- Вертикальные карточки «Фотоотчёты по месяцам» (3 в ряд) ---- */
.xs-pgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.xs-pcard { background:#fff; border-radius:12px; padding:8px; cursor:pointer; outline:none; transition:box-shadow .2s, transform .2s; }
.xs-pcard:hover, .xs-pcard:focus-visible { box-shadow:0 14px 30px rgba(18,19,26,.1); transform:translateY(-3px); }
.xs-pcard__media { position:relative; aspect-ratio:413/240; border-radius:8px; overflow:hidden; background:#EDEFF2; }
.xs-pcard__media img { width:100%; height:100%; object-fit:cover; display:block; }
.xs-pcard__badge { position:absolute; top:16px; left:16px; background:#fff; border-radius:4px; padding:8px 16px; font-size:14px; font-weight:500; color:#6B7280; }
.xs-pcard__body { padding:18px 24px 22px; }
.xs-pcard__proj { font-size:16px; color:#6B7280; font-weight:600; margin-bottom:6px; }
.xs-pcard__title { font-size:22px; color:#12131A; font-weight:700; line-height:1.3; }
.xs-pcard__sep { height:1px; background:#fefefe; margin:16px 0; }
.xs-pcard__meta { font-size:16px; color:#6B7280; font-weight:600; }

/* ---- КАРТОЧКИ (горизонтальные, 2 в ряд) ---- */
.xs-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.xs-card { display:flex; background:#fff; border-radius:12px; padding:8px; min-height:256px; cursor:pointer; outline:none; transition:box-shadow .2s, transform .2s; }
.xs-card:hover, .xs-card:focus-visible { box-shadow:0 14px 30px rgba(18,19,26,.1); transform:translateY(-3px); }
.xs-card__media { position:relative; width:310px; flex-shrink:0; border-radius:8px; overflow:hidden; background:#EDEFF2; max-height: 240px;}
.xs-card__media img { width:100%; height:100%; object-fit:cover; display:block; }
.xs-card__badge { position:absolute; top:16px; left:16px; background:#fff; border-radius:4px; padding:8px 16px; font-size:14px; font-weight:500; color:#6B7280; }
.xs-card__play { position:absolute; inset:0; margin:auto; width:56px; height:56px; border-radius:50%; background:rgba(42,113,221,.92); display:grid; place-items:center; }
.xs-card__body { flex:1; min-width:0; padding:24px 28px; display:flex; flex-direction:column; justify-content:space-between; }
.xs-card__proj { font-size:16px; color:#6B7280; font-weight:600; margin-bottom:6px; }
.xs-card__title { font-size:22px; color:#12131A; font-weight:700; line-height:1.3; }
.xs-card__meta { font-size:16px; color:#6B7280; font-weight:600; }
.xs-empty { padding:48px 0; text-align:center; color:#9AA1AC; }

/* ---- ЛАЙТБОКС ---- */
.xs-lb { position:fixed; inset:0; z-index:9999; background:rgba(8,10,16,.92); display:flex; align-items:center; justify-content:center; }
.xs-lb[hidden] { display:none; }
.xs-lb__stage { max-width:88vw; max-height:80vh; display:flex; align-items:center; justify-content:center; }
.xs-lb__stage img { max-width:88vw; max-height:80vh; border-radius:10px; }
.xs-lb__stage iframe, .xs-lb__stage video { width:min(88vw,1100px); aspect-ratio:16/9; border:0; border-radius:10px; background:#000; }
.xs-lb__close { position:absolute; top:20px; right:24px; width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:26px; cursor:pointer; }
.xs-lb__nav { position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:30px; cursor:pointer; }
.xs-lb__nav:hover, .xs-lb__close:hover { background:rgba(255,255,255,.28); }
.xs-lb__nav--prev { left:24px; } .xs-lb__nav--next { right:24px; }
.xs-lb__cap { position:absolute; bottom:24px; left:0; right:0; text-align:center; color:#fff; font-size:14px; opacity:.85; }

/* Миниатюры галереи в лайтбоксе хода строительства */
.xs-lb--has-thumbs .xs-lb__stage { max-height:66vh; margin-bottom:48px; }
.xs-lb--has-thumbs .xs-lb__cap { bottom:104px; }
.xs-lb__thumbs { position:absolute; left:0; right:0; bottom:18px; display:flex; gap:8px; justify-content:center; align-items:center; padding:0 20px; max-width:100vw; overflow-x:auto; scrollbar-width:thin; }
.xs-lb__thumbs::-webkit-scrollbar { height:6px; }
.xs-lb__thumbs::-webkit-scrollbar-thumb { background:rgba(255,255,255,.25); border-radius:999px; }
.xs-lb__thumb { flex:0 0 auto; width:74px; height:52px; border:2px solid transparent; border-radius:8px; background:#1b1e26 center/cover no-repeat; cursor:pointer; padding:0; opacity:.55; transition:opacity .15s ease, border-color .15s ease; }
.xs-lb__thumb:hover { opacity:.85; }
.xs-lb__thumb.is-active { opacity:1; border-color:#fff; }
.xs-lb__thumb--video { position:relative; }
.xs-lb__thumb--video::after { content:''; position:absolute; inset:0; margin:auto; width:0; height:0; border-style:solid; border-width:7px 0 7px 12px; border-color:transparent transparent transparent rgba(255,255,255,.9); }
@media (max-width:575.98px){ .xs-lb__thumb { width:58px; height:42px; } .xs-lb--has-thumbs .xs-lb__cap { bottom:92px; } }

/* Мобильный дропдаун типа (вместо табов) — скрыт на десктопе */
.xs-typesel { display:none; }

@media (max-width:991px){
    .xs-head{ padding-top:120px; } .xs-head__title{ font-size:32px; }
    .xs-filters{ grid-template-columns:1fr; }
    .xs-grid{ grid-template-columns:1fr; } .xs-pgrid{ grid-template-columns:repeat(2,1fr); } .xs-h2{ font-size:30px; }
}
@media (max-width:575px){
    .xs-card{ flex-direction:column; min-height:0; } .xs-card__media{ width:100%; height:200px; }
    .xs-pgrid{ grid-template-columns:1fr; }
}
/* ===== Мобайл (Figma #626:25612): табы→дропдаун, фильтры Проект+Год в ряд, Месяц на всю ширину ===== */
@media (max-width:767.98px){
    /* Боковые отступы от края фрейма = 8px (как на главной) — для всех блоков одинаково */
    .xs-head, .xs-panel { padding-left:8px; padding-right:8px; }
    .xs-head__title{ font-size:36px; }
    .xs-tabs{ display:none; }
    .xs-typesel{ display:block; margin-bottom:18px; }
    .xs-filters{ grid-template-columns:1fr 1fr; }
    .xs-filters .podbor__filter:nth-child(3){ grid-column:1 / -1; }
    .xs-card{ flex-direction:column; min-height:0; } .xs-card__media{ width:100%; height:200px; }
    .xs-pgrid{ grid-template-columns:1fr; }
}

/* ===================== ПАРТНЁРЫ (block partners) ===================== */
.pt { padding: 32px 0 48px; }
.pt__crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #9AA1AC; margin-bottom: 24px; }
.pt__crumbs a { color: #9AA1AC; text-decoration: none; }
.pt__crumbs a:hover { color: #2a71dd; }
.pt__crumbs b { color: #12131A; font-weight: 500; }
.pt__grid { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
.pt__title { font-size: 40px; font-weight: 700; margin: 0 0 10px; color: #12131A; }
.pt__sub { color: #6B7280; max-width: 640px; margin: 0 0 36px; line-height: 1.55; }
.pt__h2 { font-size: 26px; font-weight: 700; margin: 0 0 6px; color: #12131A; }
.pt__h2sub { color: #6B7280; max-width: 640px; margin: 0 0 24px; line-height: 1.5; }
.pt__banks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pt-bank { display: flex; align-items: center; gap: 16px; background: #F4F1EB; border: 0px solid #EEF0F3; border-radius: 14px; padding: 18px 20px; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s, border-color .2s; }
a.pt-bank:hover { box-shadow: 0 10px 24px rgba(18,19,26,.08); transform: translateY(-2px); }
.pt-bank__logo { width: 52px; height: 52px; border-radius: 12px; overflow: hidden; flex-shrink: 0; display: grid; place-items: center; }
.pt-bank__logo img { width: 100%; height: 100%; object-fit: contain; }
.pt-bank__name { font-weight: 600; font-size: 16px; color: #12131A; }
.pt__aside { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 16px; }
.pt-card { background: #FBFBFB; border: 1px solid #EEF0F3; border-radius: 14px; padding: 22px; }
.pt-card__t { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; color: #6B7280; margin-bottom: 14px; }
.pt-card__t svg { flex-shrink: 0; color: #6B7280; }
.pt-card__phone { display: block; font-size: 19px; font-weight: 700; color: #12131A; text-decoration: none; margin-bottom: 4px; }
.pt-card__phone:hover { color: #A57766; }
.pt-card__mail { display: inline-block; margin-top: 8px; color: #A57766; text-decoration: none; font-size: 14px; }
.pt-card__links { list-style: none; margin: 0; padding: 0; }
.pt-card__links li { border-top: 1px solid #EEF0F3; }
.pt-card__links li:first-child { border-top: 0; }
.pt-card__links a { display: block; padding: 11px 0; color: #A57766; text-decoration: none; font-size: 15px; }
.pt-card__links a:hover { color: #12131A; }
.pt-card__row { display: flex; align-items: flex-start; gap: 10px; color: #3A3F4A; font-size: 14px; line-height: 1.45; margin-bottom: 12px; }
.pt-card__row:last-child { margin-bottom: 0; }
.pt-card__row svg { color: #A57766; flex-shrink: 0; margin-top: 1px; }
@media (max-width: 991px) {
    .pt__grid { grid-template-columns: 1fr; }
    .pt__aside { position: static; flex-direction: row; flex-wrap: wrap; }
    .pt__aside .pt-card { flex: 1 1 240px; }
    .pt__banks { grid-template-columns: repeat(2, 1fr); }
    .pt__title { font-size: 30px; }
}
@media (max-width: 575px) { .pt__banks { grid-template-columns: 1fr; } }
/* ===== Мобайл (Figma #626:26312): 8px боковые отступы, тайтл 36, карточки банков серые с круглым лого ===== */
@media (max-width: 767.98px) {
    .pt .h-container { padding-left: 8px; padding-right: 8px; }
    .pt__title { font-size: 36px; }
    .pt__aside { flex-direction: column; }
    .pt__aside .pt-card { flex: 1 1 auto; }
    .pt-card { border-radius: 12px; }
    .pt-bank { background: #fefefe; border: 0; border-radius: 12px; padding: 32px; gap: 16px; }
    a.pt-bank:hover { box-shadow: none; transform: none; }
    .pt-bank__logo { width: 56px; height: 56px; border-radius: 50%; }
    .pt-bank__logo img { object-fit: cover; }
    .pt-bank__name { font-size: 20px; font-weight: 700; color: #12131A; }
}

/* ===================== ЧАСТЫЕ ВОПРОСЫ (block faq_accordion) ===================== */
.faqp { padding: 40px 0; }
.faqp__grid { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.faqp__crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #9AA1AC; margin-bottom: 24px; }
.faqp__crumbs a { color: #9AA1AC; text-decoration: none; }
.faqp__crumbs a:hover { color: #2a71dd; }
.faqp__crumbs b { color: #12131A; font-weight: 500; }
.faqp__title { font-size: 40px; font-weight: 700; margin: 0 0 8px; color: #12131A; }
.faqp__sub { color: #6B7280; max-width: 640px; margin: 0 0 28px; }
.faq-acc { display: flex; flex-direction: column; gap: 12px; }
.faq-acc__item { border: 1px solid #EEF0F3; border-radius: 12px; background: #fff; overflow: hidden; }
.faq-acc__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; font-size: 17px; font-weight: 600; color: #12131A; }
.faq-acc__chev { flex-shrink: 0; color: #6B7280;
    width: 30px;
    height: 30px;
    border-radius: 6px;

    transition: transform .25s ease;}
.faq-acc__item.is-open .faq-acc__chev { background: #A57766;transform: rotate(180deg); color: #fefefe; }
.faq-acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.faq-acc__item.is-open .faq-acc__a { grid-template-rows: 1fr; }
.faq-acc__a-inner { overflow: hidden; color: #4B5563; line-height: 1.6; }
.faq-acc__item.is-open .faq-acc__a-inner { padding: 0 24px 22px; }
.faq-acc__a-inner a {
    color: #AE7A67;
    text-decoration: none;
    font-weight: 600;
}

.faq-acc__a-inner a:hover {
    color: #12131A;
}

.faq-acc__a-inner button {
margin: 15px 0 0 0;
}


.faqp__side { display: flex; flex-direction: column; gap: 16px; }
.faqp-card { background: #FBFBFB; border: 1px solid #EEF0F3; border-radius: 12px; padding: 22px; }
.faqp-card__h { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; color: #6B7280; margin-bottom: 12px; }
.faqp-card__h svg { flex-shrink: 0; color: #6B7280; }
.faqp-card__link { display: block; color: #AE7A67; text-decoration: none; font-weight: 600; padding: 4px 0; }
.faqp-card__link:hover { text-decoration: underline; }
.faqp-card__txt { color: #12131A; font-size: 14px; line-height: 1.5; }
.faqp-card__txt--muted { color: #6B7280; margin-top: 6px; }
@media (max-width: 991px) { .faqp__grid { grid-template-columns: 1fr; } .faqp__title { font-size: 32px; } }
/* ===== Мобайл (Figma #626:26526): 8px боковые отступы, тайтл 36, аккордеон padding 32, аside в колонку ===== */
@media (max-width: 767.98px) {
    .faqp .h-container { padding-left: 8px; padding-right: 8px; }
    .faqp__title { font-size: 36px; }
    .faq-acc { gap: 8px; }
    .faq-acc__q { padding: 22px 32px; font-size: 16px; font-weight: 700; }
    .faq-acc__item.is-open .faq-acc__a-inner { padding: 0 32px 22px; }
    .faqp-card { border-radius: 12px; }
}

/* ===================== КОНТАКТЫ (block contacts) ===================== */
.ct { padding: 32px 0 48px; font-family: "Manrope", sans-serif; }
.ct__crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 21px; font-weight: 500; color: #6B7280; margin-bottom: 32px; }
.ct__crumbs a { color: #6B7280; text-decoration: none; opacity: .4; } .ct__crumbs a:hover { opacity: .7; }
.ct__crumbs b { color: #6B7280; font-weight: 500; }
.ct__body { position: relative; }
.ct__title { font-size: 48px; font-weight: 700; line-height: 57.6px; margin: 0 0 8px; color: #12131A; max-width: 900px; }
.ct__sub { color: #6B7280; font-size: 18px; line-height: 25.2px; font-weight: 500; max-width: 763px; margin: 0; }
.ct__side { position: absolute; top: 0; right: 0; width: 318px; box-sizing: border-box; background: #FBFBFB; border: 1px solid #EAECEE; border-radius: 12px; padding: 32px 34px 32px 32px; }
.ct__side-t { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; line-height: 21px; color: #6B7280; margin-bottom: 24px; }
.ct__side-t svg { flex-shrink: 0; width: 18px; height: 18px; }
.ct__side-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ct__side-links a { color: #A57766; text-decoration: none; font-size: 14px; line-height: 21px; font-weight: 600; }
.ct__side-links a:hover { text-decoration: underline; }
.ct__about-company { color: #6B7280; font-weight: 500; font-size: 18px; line-height: 25.2px; margin-bottom: 32px; }
.ct__about-meta { color: #6B7280; font-size: 16px; line-height: 24px; font-weight: 400; margin-bottom: 24px; max-width: 986px; }
.ct__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.ct-stat { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #F4F1EB; border-radius: 12px; padding: 28px 32px; height: 125px; box-sizing: border-box; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.ct-stat:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(18, 19, 26, 0.08); }
.ct-stat:hover .ct-stat__ic { transform: scale(1.05); }
.ct-stat__val { font-size: 26px; font-weight: 700; color: #12131A; line-height: 33.8px; }
.ct-stat__lbl { color: #6B7280; font-size: 14px; line-height: 21px; font-weight: 500; margin-top: 6px; }
.ct-stat__ic { width: 120px; height: 104px; object-fit: contain; object-position: right center; flex-shrink: 0; margin: 0; transition: transform .35s ease; }
.ct__about-text { color: #6B7280; font-size: 16px; line-height: 24px; font-weight: 400; max-width: 986px; margin: 0 0 24px; }
.ct__about-list { list-style: none; margin: 0; padding: 0; }
.ct__about-list li { position: relative; padding-left: 22px; color: #6B7280; font-size: 16px; line-height: 24px; margin-bottom: 0; }
.ct__about-list li::before { content: ''; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #6B7280; }
.ct__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.ct-card { background: #FBFBFB; border: 1px solid #EAECEE; border-radius: 12px; padding: 32px; }
.ct-card__h { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 24px; }
.ct-card__h svg { flex-shrink: 0; }
.ct-card__label { color: #6B7280; font-size: 14px; line-height: 21px; font-weight: 500; }
.ct-card__val { display: block; font-size: 14px; line-height: 21px; font-weight: 600; text-decoration: none; margin-bottom: 8px; }
.ct-card__val--link { color: #A57766; }
.ct-card__val--link:hover { color: #9b6856; }
.ct-card__val--dark { color: #12131A; font-weight: 500; }
.ct-card__note { color: #6B7280; font-size: 14px; line-height: 21px; font-weight: 500; margin-top: 8px; }
.ct__h2 { font-size: 26px; font-weight: 700; line-height: 33.8px; margin: 72px 0 32px; color: #12131A; }
.ct__h2--first { margin: 72px 0 8px; }
.ct__h2--tight { margin: 72px 0 8px; }
.ct__map { border-radius: 12px; overflow: hidden; height: 620px; }
.ct__map iframe { width: 100%; height: 100%; border: 0; }
.ct__req { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ct-req { background: transparent; border: 1px solid #CBCBCC; border-radius: 12px; padding: 24px 32px; }
.ct-req span { display: block; color: #6B7280; font-size: 14px; font-weight: 500; line-height: 21px; margin-bottom: 8px; }
.ct-req b { color: #12131A; font-weight: 700; font-size: 20px; line-height: 26px; }
.ct-req b a { color: #12131A; text-decoration: none; }
.ct-req b a:hover { color: #A57766; }
@media (max-width: 991px) { .ct__side { position: static; width: auto; margin: 0 0 24px; } .ct__cards { grid-template-columns: repeat(2, 1fr); } .ct__stats { grid-template-columns: repeat(2, 1fr); } .ct__req { grid-template-columns: 1fr; } .ct__title { font-size: 32px; line-height: 1.2; } }
@media (max-width: 575px) { .ct__cards { grid-template-columns: 1fr; } .ct__stats { grid-template-columns: 1fr; } }
/* ===== Мобайл (Figma #626:26755): 8px боковые отступы, тайтл 36, сайдбар «Полезные разделы» скрыт (он в футере), карта 400 ===== */
@media (max-width: 767.98px) {
    .ct .h-container { padding-left: 8px; padding-right: 8px; }
    .ct__side { display: none; }
    .ct__title { font-size: 36px; }
    .ct__h2 { margin-top: 48px; }
    .ct__map { height: 400px; }
}

/* ===================== АКЦИИ (promo/index) ===================== */
.promo-top-pad { height: 104px; }
.promo-page { padding: 40px 0 24px; }
.promo-page__crumbs { font-size: 14px; color: #6B7280; margin-bottom: 20px; }
.promo-page__crumbs a { color: #6B7280; text-decoration: none; opacity: .4; }
.promo-page__crumbs a:hover { color: #AE7A67; opacity: 1; }
.promo-page__dot { margin: 0 4px; }
.promo-page__title { font-size: 48px; font-weight: 700; line-height: 1.2; margin: 0 0 8px; color: #12131A; }
.promo-page__sub { color: #6B7280; font-size: 18px; line-height: 1.4; max-width: 760px; margin: 0; }
.promo-page__arch-head { margin: 56px 0 24px; }
.promo-page__arch-title { font-size: 26px; font-weight: 700; line-height: 1.3; margin: 0 0 6px; color: #12131A; }
.promo-page__arch-title + .promo-page__sub { font-size: 16px; }
.promo-page__pager { margin-top: 28px; }
.promo-page__empty { padding: 48px; text-align: center; color: #6B7280; background: #fff; border-radius: 12px; margin-top: 8px; }
/* promo_row на странице акций — не наезжает на hero (в отличие от главной) */
.promo-page .promo-row { margin-top: 24px; }

/* Архивные акции — 3 равные карточки (Figma 429×459, radius 12) */
.promo-arch__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.parch { position: relative; display: flex; flex-direction: column; min-height: 459px; background: #fff; border-radius: 12px; padding: 8px; text-decoration: none; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.parch:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(18,19,26,.08); }
.parch__photo { height: 240px; border-radius: 8px; overflow: hidden; background: #fefefe; flex-shrink: 0; }
.parch__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.parch:hover .parch__photo img { transform: scale(1.05); }
.parch__badge { position: absolute; top: 32px; left: 32px; background: #fff; color: #6B7280; font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 4px; }
.parch__body { flex: 1; padding: 24px 24px 0; }
.parch__title { font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0 0 6px; color: #12131A; }
.parch__desc { font-size: 16px; line-height: 1.5; color: #6B7280; margin: 0; }
.parch__foot { margin: 16px 24px 0; padding: 16px 0 24px; border-top: 1px solid #fefefe; }
.parch__date { font-size: 16px; font-weight: 600; color: #6B7280; }
/* Вариант с фото на всю карточку + затемнением (белый текст) */
.parch--overlay { background-size: cover; background-position: center; color: #fff; }
.parch--overlay .parch__title { color: #fff; }
.parch--overlay .parch__desc { color: rgba(255,255,255,.85); }
.parch--overlay .parch__date { color: #fff; }
.parch--overlay .parch__foot { border-top-color: rgba(255,255,255,.3); }
.parch--overlay .parch__badge { background: rgba(255,255,255,.15); color: #fff; }
@media (max-width: 991px) { .promo-arch__grid { grid-template-columns: 1fr 1fr; } .promo-page__title { font-size: 34px; } }
@media (max-width: 575px) { .promo-arch__grid { grid-template-columns: 1fr; } }
/* ===== Мобайл (Figma #626:27112): 8px боковые отступы, тайтл 36 ===== */
@media (max-width: 767.98px) {
    .promo-page > .h-container { padding-left: 8px; padding-right: 8px; }
    .promo-page__title { font-size: 36px; }
    .promo-page__arch-head { margin-top: 40px; }
}

/* ===================== НОВОСТИ / БЛОГ (blog/index) ===================== */
.catalog-top-pad { height: 104px; }
.news__crumbs { font-size: 14px; color: #6B7280; margin-bottom: 16px; }
.news__crumbs a { color: #6B7280; text-decoration: none; }
.news__crumbs a:hover { color: #AE7A67; }
.news__crumbs-dot { margin: 0 4px; }
.news__subtitle { color: #6B7280; margin-top: 8px; }
/* Бенто (как в Figma): 6 колонок — первый ряд 2 широкие (span 3), остальные по 3 (span 2) */
.news__grid--blog { grid-template-columns: repeat(6, 1fr); }
.news__grid--blog .news-card { grid-column: span 2; }
.news__grid--blog .news-card--big { grid-column: span 3; }
/* Широкая карточка: фото/оверлей на всю ширину */
.news__grid--blog .news-card--big.news-card--compact .news-card__photo,
.news__grid--blog .news-card--big.news-card--feature .news-card__bg,
.news__grid--blog .news-card--big.news-card--feature .news-card__overlay { width: calc(100% - 16px); }
.news__pager { margin-top: 32px; }
.news__seo-text { margin-top: 40px; color: #4B5563; line-height: 1.7; }
@media (max-width: 991px) {
    .news__grid--blog { grid-template-columns: repeat(2, 1fr); }
    .news__grid--blog .news-card, .news__grid--blog .news-card--big { grid-column: span 1; }
}
/* ===== Мобайл (Figma #626:27316): 1 колонка, 8px отступы, тайтл 36, фильтр-дропдаун ===== */
@media (max-width: 767.98px) {
    .news__grid--blog { grid-template-columns: 1fr; }
    /* тайтл/сабтайтл уже получают 8px из общего правила; крошкам добавляем те же 8px */
    .news__crumbs { padding-left: 8px; padding-right: 8px; }
    .news__title { font-size: 36px; }
    .news__pager { order: 4; padding-left: 8px; padding-right: 8px; }
}

/* ===================== СТАТЬЯ / НОВОСТЬ (blog/show) ===================== */
.article { background: #fff; padding: 8px 0 64px; }
.article__inner { max-width: 880px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }

.article__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-family: "Manrope", sans-serif; font-weight: 500; font-size: 14px; line-height: 1.5; color: #6B7280; margin-bottom: 20px; }
.article__crumbs a { color: #6B7280; text-decoration: none; opacity: .6; }
.article__crumbs a:hover { opacity: 1; color: #AE7A67; }
.article__crumbs-dot { color: #6B7280; }

.article__title { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 40px; line-height: 1.15; letter-spacing: -.01em; color: #12131A; margin: 0; }

.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; font-family: "Manrope", sans-serif; font-size: 14px; color: #6B7280; }
.article__date, .article__read { display: inline-flex; align-items: center; }
.article__cat { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: #EAF6FF; color: #AE7A67; font-weight: 600; font-size: 13px; text-decoration: none; transition: background .15s; }
.article__cat:hover { background: #d8eeff; }

.article__lead { margin: 24px 0 0; font-family: "Manrope", sans-serif; font-weight: 500; font-size: 20px; line-height: 1.5; color: #3a3f4a; }

.article__hero { margin: 28px 0 0; border-radius: 16px; overflow: hidden; background: #fefefe; aspect-ratio: 16 / 9; }
.article__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Контент статьи (HTML из редактора) */
.article__content { margin-top: 32px; }
.post-content { font-family: "Manrope", sans-serif; font-size: 17px; line-height: 1.75; color: #2b2f38; }
.post-content > *:first-child { margin-top: 0; }
.post-content p { margin: 0 0 18px; }
.post-content h2 { font-weight: 700; font-size: 28px; line-height: 1.25; color: #12131A; margin: 40px 0 16px; }
.post-content h3 { font-weight: 700; font-size: 22px; line-height: 1.3; color: #12131A; margin: 32px 0 12px; }
.post-content h4 { font-weight: 700; font-size: 18px; line-height: 1.4; color: #12131A; margin: 24px 0 10px; }
.post-content a { color: #AE7A67; text-decoration: underline; text-underline-offset: 2px; }
.post-content a:hover { color: #9b6856; }
.post-content ul, .post-content ol { margin: 0 0 18px; padding-left: 24px; }
.post-content li { margin: 0 0 8px; }
.post-content ul li::marker { color: #AE7A67; }
.post-content img { max-width: 100%; height: auto; border-radius: 12px; margin: 24px 0; display: block; }
.post-content blockquote { margin: 24px 0; padding: 16px 24px; border-left: 4px solid #AE7A67; background: #F7FAFC; border-radius: 0 8px 8px 0; color: #3a3f4a; }
.post-content blockquote p:last-child { margin-bottom: 0; }
.post-content hr { border: 0; border-top: 1px solid #E5E7EB; margin: 32px 0; }
.post-content table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
.post-content th, .post-content td { border: 1px solid #E5E7EB; padding: 10px 14px; text-align: left; }
.post-content th { background: #fefefe; font-weight: 600; }

/* FAQ-аккордеон статьи (в стиле сайта) */
.article__faq { margin-top: 48px; }
.article__faq-title { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 28px; line-height: 1.25; color: #12131A; margin: 0 0 20px; }
.article__faq-list { display: flex; flex-direction: column; gap: 12px; }
.article-acc { border: 1px solid #E5E7EB; border-radius: 12px; background: #fff; overflow: hidden; transition: border-color .18s, box-shadow .18s; }
.article-acc.is-open { border-color: #BEE2FF; box-shadow: 0 4px 20px rgba(13,153,255,.07); }
.article-acc__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; background: none; border: 0; cursor: pointer; text-align: left; font-family: "Manrope", sans-serif; font-weight: 600; font-size: 17px; line-height: 1.4; color: #12131A; }
.article-acc__chev { flex: 0 0 auto; transition: transform .2s; }
.article-acc.is-open .article-acc__chev { transform: rotate(180deg); }
.article-acc__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.article-acc.is-open .article-acc__a { max-height: 1200px; }
.article-acc__a > div { padding: 0 20px 18px; font-family: "Manrope", sans-serif; font-size: 16px; line-height: 1.65; color: #4b5563; }

@media (max-width: 767.98px) {
    .article { padding: 8px 0 48px; }
    .article__inner { max-width: none; padding: 0 16px; }
    .article__title { font-size: 28px; }
    .article__lead { font-size: 18px; margin-top: 20px; }
    .article__hero { margin-top: 20px; border-radius: 12px; }
    .article__content { margin-top: 24px; }
    .post-content { font-size: 16px; }
    .post-content h2 { font-size: 24px; }
    .post-content h3 { font-size: 20px; }
    .article__faq-title { font-size: 24px; }
    .article-acc__q { font-size: 16px; padding: 16px; }
}

/* ===================== СПОСОБЫ ПОКУПКИ (block purchase_methods) ===================== */
.spm { padding: 136px 0 72px; background: #FEFEFE; }
.spm__crumbs { font-size: 14px; color: #6B7280; margin-bottom: 20px; }
.spm__crumbs a { color: #6B7280; text-decoration: none; opacity: .4; }
.spm__crumbs a:hover { opacity: 1; color: #AE7A67; }
.spm__crumbs span { margin: 0 2px; }
.spm__title { font-size: 48px; font-weight: 700; line-height: 1.2; margin: 0 0 8px; color: #12131A; }
.spm__sub { font-size: 18px; line-height: 1.4; color: #6B7280; margin: 0 0 32px; }
.spm__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.spm__tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.spm__tab { padding: 16px 24px; border: 1px solid #F4F1EB; border-radius: 4px; background: #fff; color: #6B7280; min-height: 53px; font-family: "Manrope", sans-serif; font-weight: 500; font-size: 14px; line-height: 1; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.spm__tab:hover { border-color: #AE7A67; color: #AE7A67; }
.spm__tab.is-active { background: #AE7A67; border-color: #AE7A67; color: #fff; }
.spm__select { display: none; }
/* CTA в DOM идёт после .spm__grid; на десктопе прижата к верх-право (как заголовок) */
.spm .h-container { position: relative; }
.spm__calc { position: absolute; top: 0; right: 24px; display: inline-flex; align-items: center; padding: 16px 28px; border-radius: 8px; background: #F4F1EB; color: #1E213D; font-weight: 600; font-size: 14px; text-decoration: none; transition: background .15s; white-space: nowrap; }
.spm__calc:hover { background: #f1e4cb; }

.spm__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.spm-card { grid-column: span 2; position: relative; display: block; min-height: 485px; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
.spm-card--wide { grid-column: span 3; min-height: 466px; }
.spm-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(18,19,26,.08); }

/* Светлая карточка: иконка-полоса сверху + белый низ */

.spm-card--light .spm-card__media { position: absolute; background: #FAEFDE; top: 0px; left: 0px; right: 0px; height: 240px; border-radius: 8px; overflow: hidden;}
.spm-card--light .spm-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spm-card--light .spm-card__body { position: absolute; left: 32px; right: 32px; top: 272px; display: flex; flex-direction: column; gap: 16px; }

/* Тёмная карточка: иконка на всю карточку + текст поверх */
.spm-card--dark { background: #12131A; }
.spm-card--dark .spm-card__media { position: absolute;     width: 100%;
    height: 100%; border-radius: 8px; overflow: hidden; background: #12131A; }
.spm-card--dark .spm-card__media img { width: 100%; height: 100%; object-fit: cover; display: block;     object-position: left;    transform: scale(1.15);}
.spm-card--dark .spm-card__body { position: absolute; left: 32px; right: 32px; top: 272px; display: flex; flex-direction: column; gap: 16px; z-index: 2; }

.spm-card__badge { position: absolute; top: 32px; left: 32px; z-index: 3; background: #fff; color: #6B7280; font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 4px; }
.spm-card__head { display: flex; flex-direction: column; gap: 6px; }
.spm-card__title { font-size: 22px; font-weight: 700; line-height: 1.3; color: #12131A; }
.spm-card__text { font-size: 16px; line-height: 1.5; color: #6B7280; }
.spm-card--dark .spm-card__title { color: #fff; }
.spm-card--dark .spm-card__text { color: rgba(255,255,255,.8); }

.spm-card__chips { display: flex; gap: 10px; }
.spm-chip { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid #CBCBCC; border-radius: 4px; }
.spm-chip__label { font-size: 13px; font-weight: 500; color: #6B7280; }
.spm-chip__value { font-size: 16px; font-weight: 700; color: #12131A; }
.spm-card--dark .spm-chip { border-color: rgba(255,255,255,.25); }
.spm-card--dark .spm-chip__label { color: rgba(255,255,255,.7); }
.spm-card--dark .spm-chip__value { color: #fff; }

@media (max-width: 1100px) { .spm { padding: 120px 0 56px; } .spm__grid { grid-template-columns: 1fr 1fr; } .spm-card, .spm-card--wide { grid-column: span 1; } .spm__title { font-size: 34px; } }
@media (max-width: 600px) { .spm__grid { grid-template-columns: 1fr; } }
/* ===== Мобайл (Figma #626:27511): 8px отступы, тайтл 36, табы→дропдаун, карточки в 1 колонку ===== */
@media (max-width: 767.98px) {
    .spm { padding-top: 96px; }
    /* Figma 626-27511: контент во всю ширину (x0). Текст при 16, выпадашка и карточки — в край. */
    .spm .h-container { padding-left: 0; padding-right: 0; }
    .spm__crumbs, .spm__title, .spm__sub { padding-left: 16px; padding-right: 16px; }
    .spm__title { font-size: 36px; }
    .spm__bar { flex-direction: column; align-items: stretch; gap: 12px; }
    .spm__tabs { display: none; }
    .spm__select { display: block; }                 /* во всю ширину (Figma #626:27530 x0) */
    /* CTA — в обычном потоке после карточек (не абсолютно) */
    .spm__calc { position: static; margin: 24px 16px 0; align-self: flex-start; }
    .spm__grid { grid-template-columns: 1fr; }        /* карточки во всю ширину */
    /* Высота карточки как в Figma (360×561) */
    .spm-card, .spm-card--wide { min-height: 561px; }
    /* Светлая карточка: фото сверху (240), контент НИЖЕ при 16 (Figma EL-d3c983fc x16/y272) */
    .spm-card--light .spm-card__body { left: 16px; right: 16px; top: 272px; }
    /* Тёмная карточка: контент СВЕРХУ поверх фото при 32 (Figma EL-208c6cff x32/y93) */
    .spm-card--dark .spm-card__body { left: 32px; right: 32px; top: 93px; }
    /* Чипы-условия — по 2 в ряд (Figma EL-b98545a2 wrap) */
    .spm-card__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .spm-chip { min-width: 0; }
}

/* ===================== ИПОТЕКА (block ipoteka) ===================== */
.ip { padding: 32px 0 48px; font-family: "Manrope", sans-serif; }
.ip__body { display: grid; grid-template-columns: minmax(0, 1fr) 318px; gap: 40px; align-items: start; }
.ip__main { min-width: 0; }
.ip__crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 21px; font-weight: 500; color: #6B7280; margin-bottom: 32px; }
.ip__crumbs a { color: #6B7280; text-decoration: none; opacity: .4; } .ip__crumbs a:hover { opacity: .7; }
.ip__crumbs b { color: #6B7280; font-weight: 500; }
.ip__title { font-size: 48px; font-weight: 700; line-height: 57.6px; margin: 0 0 8px; color: #12131A; max-width: 900px; }
.ip__sub { color: #6B7280; font-size: 18px; line-height: 25.2px; font-weight: 500; max-width: 763px; margin: 0; }
.ip__prose { margin-top: 24px; max-width: 763px; }
/* Текст из поля «Контент» на страницах способов покупки — те же стили, что у блока ip__* */
.ip__prose > :first-child { margin-top: 0; }
.ip__prose h2 { font-size: 26px; font-weight: 700; line-height: 33.8px; margin: 56px 0 16px; color: #12131A; }
.ip__prose h3 { font-size: 20px; font-weight: 700; line-height: 26px; margin: 32px 0 12px; color: #12131A; }
.ip__prose p { color: #6B7280; font-size: 16px; line-height: 24px; font-weight: 400; margin: 0 0 16px; }
.ip__prose a { color: #A57766; text-decoration: none; font-weight: 600; }
.ip__prose a:hover { text-decoration: underline; }
.ip__prose strong, .ip__prose b { color: #12131A; font-weight: 700; }
.ip__prose ul, .ip__prose ol { margin: 0 0 16px; padding: 0; list-style: none; }
.ip__prose ul li, .ip__prose ol li { position: relative; padding-left: 22px; color: #6B7280; font-size: 16px; line-height: 24px; margin-bottom: 4px; }
.ip__prose ul li::before { content: ''; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #6B7280; }
.ip__prose ol { counter-reset: ipprose; }
.ip__prose ol li { counter-increment: ipprose; }
.ip__prose ol li::before { content: counter(ipprose) '.'; position: absolute; left: 2px; top: 0; color: #6B7280; font-size: 16px; line-height: 24px; font-weight: 600; }
.ip__side { box-sizing: border-box; background: #FBFBFB; border: 1px solid #EAECEE; border-radius: 12px; padding: 32px 34px 32px 32px; }
.ip__side-t { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; line-height: 21px; color: #6B7280; margin-bottom: 24px; }
.ip__side-t svg { flex-shrink: 0; }
.ip__side-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ip__side-links a { color: #A57766; text-decoration: none; font-size: 14px; line-height: 21px; font-weight: 600; }
.ip__side-links a:hover { text-decoration: underline; }
.ip__side-links a.is-active { color: #1E213D; cursor: default; pointer-events: none; }
.ip__h2 { font-size: 26px; font-weight: 700; line-height: 33.8px; margin: 56px 0 16px; color: #12131A; }
.ip__h2sub { color: #6B7280; font-size: 16px; line-height: 24px; font-weight: 400; margin: -8px 0 20px; }
.ip__text { color: #6B7280; font-size: 16px; line-height: 24px; font-weight: 400; max-width: 763px; margin: 0 0 16px; }
.ip__note { color: #9AA1AC; font-size: 16px; line-height: 24px; font-weight: 400; max-width: 763px; margin: 0; }
.ip__list { list-style: none; margin: 0; padding: 0; max-width: 763px; }
.ip__list li { position: relative; padding-left: 22px; color: #6B7280; font-size: 16px; line-height: 24px; margin-bottom: 4px; }
.ip__list li::before { content: ''; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #6B7280; }
.ip__prog { list-style: none; margin: 0; padding: 0; max-width: 763px; }
.ip__prog li { position: relative; padding-left: 22px; font-size: 16px; line-height: 24px; margin-bottom: 6px; color: #6B7280; }
.ip__prog li::before { content: ''; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #A57766; }
.ip__prog a { color: #A57766; text-decoration: none; font-weight: 600; } .ip__prog a:hover { text-decoration: underline; }
.ip__prog span { color: #6B7280; }
.ip__faq { max-width: 986px; margin-top: 4px; display: flex; flex-direction: column; gap: 16px; }
.ip-acc { background: #fff; border: 1px solid #EAECEE; border-radius: 12px; overflow: hidden; }
.ip-acc__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: 0; cursor: pointer; padding: 22px 24px; text-align: left; font-family: inherit; font-size: 16px; font-weight: 600; color: #12131A; }
.ip-acc__chev {
        width: 30px;
    height: 30px;
    border-radius: 6px;
    flex-shrink: 0; transition: transform .2s; }
.ip-acc.is-open .ip-acc__chev { transform: rotate(180deg);     background: #A57766;color:#fefefe;}
.ip-acc__a { display: none; padding: 0 24px 22px; color: #6B7280; font-size: 16px; line-height: 24px; }
.ip-acc.is-open .ip-acc__a { display: block; }
@media (max-width: 991px) {
    .ip__body { grid-template-columns: 1fr; gap: 0; }
    .ip__side { margin: 24px 0 0; }
    .ip__title { font-size: 32px; line-height: 1.2; }
}
/* ===== Мобайл (Figma #626:28105): 8px отступы, тайтл 36, сайдбар «Способы покупки» вниз ===== */
@media (max-width: 767.98px) {
    .ip .h-container { padding-left: 8px; padding-right: 8px; }
    .ip__title { font-size: 36px; }
    .ip__body { display: flex; flex-direction: column; }
    .ip__side { order: 99; margin: 24px 0 0;        width: 100%; }
    .ip-acc__q { padding: 22px 32px; font-weight: 700; }
    .ip-acc__a { padding: 0 32px 22px; }
}

/* ===================== ЖИЛЫЕ КОМПЛЕКСЫ — ХЕРО (block page_hero) ===================== */
.pghero { min-height: 711px; display: flex; align-items: center; background-size: cover; background-position: center; color: #fff; padding-top: 104px; box-sizing: border-box; }
.pghero > .h-container { width: 100%; }
.pghero__crumbs { font-size: 14px; opacity: .85; margin-bottom: 16px; }
.pghero__crumbs a { color: #fff; text-decoration: none; }
.pghero__dot { margin: 0 4px; }
.pghero__title { font-size: 48px; font-weight: 700; line-height: 1.2; margin: 0 0 14px; }
.pghero__sub { max-width: 600px; font-size: 16px; line-height: 1.5; opacity: .9; margin: 0 0 28px; }
.pghero__btns { display: flex; gap: 12px; flex-wrap: wrap; }
.pghero__btn { display: inline-flex; align-items: center; justify-content: center; padding: 16px 28px; border-radius: 8px; font-weight: 600; text-decoration: none; font-size: 15px;transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;}
.pghero__btn--blue { background: #AE7A67; color: #fff; }
.pghero__btn--blue:hover { background: #AE7A67; }
.pghero__btn--white { background: #fff; color: #12131A; }
.pghero__btn:hover {
transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
@media (max-width: 1280px) { .pghero { min-height: 56vw; } }
@media (max-width: 991px) { .pghero { min-height: 480px; } .pghero__title { font-size: 32px; } }
/* ===== Мобайл (Figma #626:28640): 8px отступы, тайтл 36, кнопки в ряд ===== */
@media (max-width: 767.98px) {
    .pghero { min-height: 474px; padding-top: 96px; }
    /* Figma 626-28640: контент героя во всю ширину (x:0), кнопки — по краям */
    .pghero > .h-container { padding-left: 0; padding-right: 0; }
    .pghero__title { font-size: 36px; }
    .pghero__btns { flex-wrap: nowrap; gap: 8px; }
    .pghero__btn { flex: 1 1 0; padding: 14px 12px; text-align: center; }
    .pghero__btn--white { background: #fefefe; }
}

/* ===================== ЖИЛЫЕ КОМПЛЕКСЫ — СПИСОК (block complexes_list) ===================== */
.cxs { padding: 85px 0; }
.cxs__h { font-size: 32px; font-weight: 700; margin: 0 0 6px; color: #12131A; }
.cxs__hsub { color: #6B7280; margin: 0 0 24px; }
.cxs__tabs { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }
.cxs__tab { padding: 16px 24px; border-radius: 4px; background: #fff; color: #6B7280; text-decoration: none; font-weight: 500; font-size: 14px; border: 1px solid #F4F1EB; cursor: pointer; font-family: inherit; line-height: 1; transition: background .15s, color .15s, border-color .15s; }
.cxs__tab:hover { border-color: #AE7A67; color: #AE7A67; }
.cxs__tab.is-active { background: #AE7A67; color: #fff; border-color: #AE7A67; }
.cxs__select { display: none; }
.cxs__empty { color: #6B7280; padding: 12px 0; }
.cxs-card { display: grid; grid-template-columns: 755px 1fr; background: #fff; border-radius: 12px; overflow: hidden; margin-bottom: 24px; }
.cxs-card__media { position: relative; display: block; overflow: hidden; min-height: 564px; background: #fefefe; }
.cxs-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity .35s ease; }
.cxs-card__img.is-active { opacity: 1; }
/* Лого текущего ЖК — слева сверху над фото (Figma x37/y56), белым по фото */
.cxs-card__logo { position: absolute; top: 32px; left: 32px; z-index: 3; height: 28px; }
.cxs-card__logo img { display: block; height: 100%; width: auto; }
.cxs-card__logo img[src$=".svg"] { filter: brightness(0) invert(1); }
/* Слайдер: стрелки слева внизу + точки справа внизу (как finishes__photo) */
.cxs-card__slider { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 8px; z-index: 2; }
.cxs-card__navbtn { width: 56px; height: 56px; border: 0; border-radius: 8px; background: #fefefe; color: #6B7280; display: grid; place-items: center; cursor: pointer; transition: background .2s; }
.cxs-card__navbtn:hover { background: #E7E9EC; }
.cxs-card__navbtn svg { display: block; width: 6px; height: 9px; }
.cxs-card__navbtn[data-cxs-next] svg { transform: scaleX(-1); }
.cxs-card__dots { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.cxs-card__dot { width: 10px; height: 10px; border: 0; padding: 0; border-radius: 2px; background: #fefefe; opacity: .4; cursor: pointer; transition: opacity .2s; }
.cxs-card__dot.is-active { opacity: 1; }
/* Мобильный пейджер слайдера ЖК — скрыт на десктопе */
.cxs-pager { display: none; }
.cxs-card__body { padding: 32px; }
.cxs-card__status { display: inline-block; background: #fefefe; color: #6B7280; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 4px; margin-bottom: 12px; }
.cxs-card__title { font-size: 28px; font-weight: 700; margin: 0 0 8px; }
.cxs-card__title a { color: #12131A; text-decoration: none; }
.cxs-card__loc { display: flex; align-items: center; gap: 6px; color: #6B7280; font-size: 14px; margin-bottom: 24px; }
.cxs-card__feats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.cxs-feat { display: flex; align-items: center; gap: 12px; }
.cxs-feat__ic { flex-shrink: 0; width: 48px; height: 48px; border-radius: 8px; background: #1E213D; color: #fff; display: grid; place-items: center; }
/* Figma: подпись (серая) СВЕРХУ, значение (тёмное, жирное) СНИЗУ — реверсим колонку */
.cxs-feat__txt { display: flex; flex-direction: column-reverse; }
.cxs-feat__txt b { font-size: 16px; font-weight: 700; color: #12131A; }
.cxs-feat__txt small { color: #6B7280; font-size: 14px; }
.cxs-card__desc { color: #4B5563; line-height: 1.6; margin-bottom: 24px; }
.cxs-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cxs-card__price { font-size: 20px; font-weight: 700; color: #6B7280; }
.cxs-card__btns { display: flex; gap: 12px; }
.cxs-btn { display: inline-flex; align-items: center; justify-content: center; padding: 16px 24px; border-radius: 4px; font-weight: 600; text-decoration: none; font-size: 15px; }
.cxs-btn--blue { background: #AE7A67; color: #fff; }
.cxs-btn--blue:hover { background: #9b6856; }
.cxs-btn--ghost { background: #fff; color: #12131A; border: 1px solid #AE7A67; }
.cxs-btn--ghost:hover { background: #F4F1EB; }
@media (max-width: 991px) { .cxs-card { grid-template-columns: 1fr; } .cxs-card__media { min-height: 360px; } .cxs-card__feats { grid-template-columns: 1fr; } }
/* ===== Мобайл (Figma #626:28640): 8px отступы, табы->дропдаун, инфо сверху + фото снизу, спеки 2x2 ===== */
@media (max-width: 767.98px) {
    .cxs { padding: 48px 0; }
    /* Figma 626-28640: дропдаун/карточка/слайдер/пейджер — во всю ширину (0 по краям) */
    .cxs .h-container { padding-left: 0; padding-right: 0; }
    .cxs__tabs { display: none; }
    .cxs__select { display: block; margin-bottom: 24px; }

    /* ЖК не друг под другом, а горизонтальный слайдер: одна карточка во вьюпорт */
    [data-cxs-list] { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    [data-cxs-list]::-webkit-scrollbar { display: none; }
    .cxs-card { display: flex; flex-direction: column; flex: 0 0 100%; scroll-snap-align: start; margin-bottom: 0; }
    /* Тело карточки — паддинг 16 по бокам, 24 сверху (Figma #626:28896 x16/y24) */
    .cxs-card__body { order: 1; padding: 24px 16px; }
    /* Фото — снизу, отступ 8 внутри карточки (Figma #626:28796 x8) */
    .cxs-card__media { order: 2; min-height: 0; height: 220px; margin: 0 8px 8px; }
    .cxs-card__img { border-radius: 8px; }
    .cxs-card__logo { top: 32px; left: 21px; height: 16px; }   /* Figma логотип x29(card)/y577 → 21/32 внутри фото */
    /* Нав фото (стрелки слева + точки справа) — внутри фото с отступом 8 (Figma arrows x16, dots справа) */
    .cxs-card__slider { left: 8px; right: 8px; bottom: 8px; }
    .cxs-card__feats { grid-template-columns: 1fr 1fr; gap: 16px 8px; }   /* Figma grid gap 16/8 */
    /* Низ карточки: цена своей строкой, кнопки рядом ниже (Figma: цена над кнопками) */
    .cxs-card__foot { flex-direction: column; align-items: stretch; gap: 16px; }
    .cxs-card__btns { gap: 8px; }
    .cxs-btn { padding: 16px 24px; }

    /* Пейджер: стрелки по краям + кнопки-цифры (Figma 626-28970) */
    .cxs-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; }
    .cxs-pager__arrow { flex: 0 0 auto; width: 48px; height: 48px; border: 0; border-radius: 8px; background: #fefefe; color: #6B7280; display: grid; place-items: center; cursor: pointer; }
    .cxs-pager__arrow svg { display: block; width: 6px; height: 9px; }
    .cxs-pager__arrow[data-cxs-next] svg { transform: scaleX(-1); }
    .cxs-pager__nums { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; }
    .cxs-pager__nums::-webkit-scrollbar { display: none; }
    .cxs-pager__num { flex: 0 0 auto; min-width: 48px; height: 48px; border: 0; border-radius: 8px; background: #fefefe; color: #6B7280; font-family: inherit; font-weight: 600; font-size: 16px; opacity: .4; cursor: pointer; transition: opacity .2s; }
    .cxs-pager__num.is-active { opacity: 1; }

.spm-card--light .spm-card__media img {
    object-fit: contain;
    object-position: bottom;
}

    .spm-card--dark .spm-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
    display: block;
    transform: scale(1.75) translate(12%, -15%);
}

.lead-modal__card  .cta-form__photo {
display: none;
}

.lead-modal__card  .cta-form__title {
        font-size: 26px;
    }

    .lead-modal__close {background:#fff;}

}

/* ============================================================
   ORDER-FORM — форма заказа (бронь лота) во всплывающем окне.
   Оформление повторяет .cta-form, но у формы свои классы,
   а фото квартиры лежит в обычном потоке (без position: absolute).
   ============================================================ */
.order-form__inner {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 24px;
    height: 514px;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;

}



.order-form__inner > * { position: relative; z-index: 1; }

/* Три колонки в обычном потоке: текст — фото — белая панель */
.order-form__copy {
    flex: 0 0 382px;
    align-self: center;
    padding-left: 48px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.order-form__photo {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

/* contain, а не cover: первое изображение квартиры — обычно планировка, её нельзя подрезать */
.order-form__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    box-sizing: border-box;
}

.order-form__panel {
    flex: 0 0 446px;
    padding: 32px 63px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.order-form__title {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.2;        /* 48/40 */
    color: #12131A;
}

.order-form__subtitle {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;        /* 25.20/18 */
    color: rgba(0, 0, 0, 0.8);
}

.order-form__panel-head { display: flex; flex-direction: column; gap: 6px;
}

.order-form__panel-title {
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;        /* 28.60/22 */
    color: #12131A;
}

.order-form__panel-sub {
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #6B7280;
}

.order-form__fields { display: flex; flex-direction: column; gap: 12px;
}

.order-form__input {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid #6B7280;
    border-radius: 4px;
    background: #ffffff;
    box-sizing: border-box;
    opacity: 0.8;
    transition: opacity .2s, border-color .2s;
}

.order-form__input:focus-within { opacity: 1; border-color: #AE7A67;
}

.order-form__input input {
    width: 100%;
    padding: 24px;
    border: 0;
    outline: none;
    background: transparent;
    box-sizing: border-box;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: #12131A;
}

.order-form__input input::placeholder { color: #6B7280;
}

.order-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 24px 40px;
    border: 0;
    border-radius: 8px;
    background: #AE7A67;
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
    box-sizing: border-box;
}

.order-form__submit:hover { background: #9b6856;
}

.order-form__submit:disabled { opacity: .7; cursor: default;
}

.order-form__ok { margin: 8px 0; padding: 10px 14px; border-radius: 8px; background: #E6F4EA; color: #1E7E34; font-size: 14px;
}

.order-form__err { margin: 8px 0; padding: 10px 14px; border-radius: 8px; background: #FDECEC; color: #C0392B; font-size: 14px;
}

.order-form__notice {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 6;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.45;
    box-shadow: 0 8px 24px rgba(18,19,26,.12);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .35s ease, transform .35s ease;
}

.order-form__notice[hidden] { display: none;
}

.order-form__notice.is-visible { opacity: 1; transform: translateY(0);
}

.order-form__notice--ok { background: #E6F4EA; color: #1E7E34;
}

.order-form__notice--err { background: #FDECEC; color: #C0392B;
}

.order-form__checks { display: flex; flex-direction: column; gap: 16px;
}

.order-form__check {
    display: inline-flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.order-form__check input { display: none;
}

.order-form__check-box {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #EAECEE;
    border-radius: 2px;
    background: #ffffff;
    position: relative;
    transition: background .15s, border-color .15s;
}

.order-form__check input:checked + .order-form__check-box {
    background: #EAECEE;
    border-color: #EAECEE;
}

.order-form__check input:checked + .order-form__check-box::after {
    content: "";
    position: absolute;
    left: 5px; top: 1px;
    width: 5px; height: 9px;
    border-right: 2px solid #1E213D;
    border-bottom: 2px solid #1E213D;
    transform: rotate(45deg);
}

.order-form__check-text {
    font-family: "Manrope", sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 1.5;
    color: #6B7280;
}

.order-form__check-text a {
    color: #6B7280;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s ease;
}

.order-form__check-text a:hover { color: #a57766;
}

/* Узкие экраны: колонка — заголовок, фото, форма */
@media (max-width: 991.98px) {
    .order-form__inner {
        height: auto;
        flex-direction: column;
        padding: 16px;
        gap: 24px;
    }
    .order-form__copy  { flex: none; align-self: stretch; padding-left: 0; }
    .order-form__photo { flex: none; height: 240px; }
    .order-form__panel { flex: none; width: 100%; padding: 0px; }
    .order-form__title { font-size: 32px; }


    .podbor {
    padding: 40px 0;
    }
}


/* ===== Окно «Подробнее» в #sposoby (Figma 2:60) ===== */
.paym { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
        padding: 24px; opacity: 0; transition: opacity .25s ease; overflow: hidden; overscroll-behavior: contain; }
.paym.is-open { opacity: 1; }
.paym[hidden] { display: none; }
.paym__backdrop { position: fixed; inset: 0; background: rgb(70 70 112 / 55%); }
.paym__dialog { position: relative; width: 100%; max-width: 478px; max-height: 100%; display: flex; }
.paym__card {
    position: relative; width: 100%; max-height: 100%; overflow: auto;
    background: #fff; border-radius: 32px; padding: 32px 39px;
    transform: translateY(10px) scale(.98); transition: transform .25s ease;
    box-shadow: 0 24px 60px -20px rgba(18,19,26,.35);
}
.paym.is-open .paym__card { transform: none; }
.paym__close {
    position: absolute; top: 17px; right: 19px; width: 27px; height: 27px;
    display: grid; place-items: center; border: 0; border-radius: 8px;
    background: #FAEEDE; color: #6B7280; cursor: pointer; padding: 0; z-index: 2;
    transition: background .15s ease, color .15s ease;
}
.paym__close:hover { background: #E2E2E6; color: #12131A; }
.paym__title {
    font-family: "Manrope", sans-serif; font-weight: 700; font-size: 22px; line-height: 1.3;
    color: #12131A; margin: 0; padding-right: 32px;
}
.paym__text {
    font-family: "Manrope", sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5;
    color: #6B7280; margin: 23px 0 0;
    /* Текст подставляется через textContent — переносы строк из админки сохраняем. */
    white-space: pre-line;
}
.paym__title[hidden], .paym__text[hidden] { display: none; }
.paym__contact { display: flex; align-items: center; gap: 8px; margin-top: 32px; flex-wrap: wrap; }
.paym__contact[hidden] { display: none; }
.paym__contact-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: "Manrope", sans-serif; font-weight: 500; font-size: 14px; line-height: 1.5; color: #6B7280;
}
.paym__phone {
    font-family: "Manrope", sans-serif; font-weight: 600; font-size: 14px; line-height: 1.5;
    color: #A57766; text-decoration: none;
}
.paym__phone:hover { text-decoration: underline; }
@media (max-width: 575.98px) {
    .paym { padding: 16px; }
    .paym__card { border-radius: 24px; padding: 28px 20px; }
    .paym__close { top: 12px; right: 12px; }
}


/* Заголовок только для поисковиков/скринридеров (визуально не виден, но в DOM есть).
   Нужен там, где главный заголовок страницы не выводится текстом (главная, страница ЖК). */
.kg-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}

/* ЕДИНЫЕ хлебные крошки (partials/crumbs.blade.php). Один вид на весь сайт.
   Блочные классы (.ip__crumbs, .spm__crumbs …) остаются только ради отступов. */
.kg-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: "Manrope", sans-serif; font-size: 14px; line-height: 21px; font-weight: 500; color: #6B7280; }
.kg-crumbs a { color: #6B7280; text-decoration: none; opacity: .4; transition: opacity .2s ease, color .2s ease; }
.kg-crumbs a:hover { opacity: 1; color: #AE7A67; }
.kg-crumbs b { color: #6B7280; font-weight: 500; }
.kg-crumbs__sep { opacity: .4; }
/* Тёмный текущий пункт (страницы «О компании», «Партнёры», FAQ) */
.kg-crumbs--ink { color: #9AA1AC; }
.kg-crumbs--ink a { color: #9AA1AC; opacity: 1; }
.kg-crumbs--ink a:hover { color: #2a71dd; }
.kg-crumbs--ink b { color: #12131A; }
/* Белые крошки на тёмном hero (страница ЖК, page_hero) */
.kg-crumbs--light { color: #fff; }
.kg-crumbs--light a { color: #fff; opacity: .4; }
.kg-crumbs--light a:hover { opacity: .75; color: #fff; }
.kg-crumbs--light b { color: #fff; opacity: 1; }

/* === Режим работы и адрес из Настроек сайта могут быть в несколько строк ===
   Значение выводится как текст, поэтому переносы сохраняем через pre-line. */
.dp-side__line,
.ct-card__val,
.faqp-card__txt,
.pt-card__row span,
.footer__contact-value { white-space: pre-line; }

/* === Квиз Marquiz на странице ЖК: встроенный блок во всю ширину контейнера === */
.cquiz { padding: 8px 0 32px; }
.cquiz__inner { max-width: 1368px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
/* Скругляем сам виджет: Marquiz вставляет внутрь iframe, поэтому обрезаем по контейнеру. */
.cquiz__inner > div,
.cquiz [data-marquiz-id] { width: 100%; border-radius: 16px; overflow: hidden; }
.cquiz [data-marquiz-id] iframe { border-radius: 16px; display: block; }

@media (max-width: 767.98px) {
    .cquiz { padding: 4px 0 24px; }
    .cquiz__inner { padding: 0 8px; }
}