/*
 * Лендинг lp. Стилистика — редизайн клиента (vue.spmodul.ru): кремовый фон,
 * почти чёрный текст, шрифт TT Firs Neue 400/500, капсовые заголовки с
 * поджатым трекингом, фото и плитки с прямыми углами, кнопки и метки —
 * капсулы, круглые кнопки «+». Сквозной приём — схема дома из модулей
 * 6 × 2,5 м в плане (компонент x-lp.modules), как в каталоге клиента.
 */
@font-face {
    font-family: "TT Firs Neue";
    src: url("../../fonts/tt-firs-neue-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "TT Firs Neue";
    src: url("../../fonts/tt-firs-neue-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    --lp-bg: #fbf8f1;
    --lp-sand: #eeeae0;
    --lp-ink: #232323;
    --lp-muted: #6b6760;
    --lp-line: #d9d4c7;
    --lp-white: #ffffff;
    --lp-error: #b42318;
    --lp-on-ink-muted: rgba(251, 248, 241, .68);
    --lp-container: 1280px;
    --lp-gutter: clamp(16px, 3.4vw, 40px);
    --lp-header-h: 72px;
    --lp-ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--lp-header-h) + 8px); -webkit-text-size-adjust: 100%; }
/* Пока открыт поп-ап, страница под ним не прокручивается. */
html:has(dialog[open]) { overflow: hidden; }

body.lp {
    margin: 0;
    background: var(--lp-bg);
    color: var(--lp-ink);
    font-family: "TT Firs Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
/* Атрибут hidden слабее `img { display: block }` — без этого правила планировка рисуется под фото. */
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--lp-ink); outline-offset: 3px; }

.lp-container {
    width: min(100% - 2 * var(--lp-gutter), var(--lp-container));
    margin-inline: auto;
}

.lp-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.lp-skip {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--lp-ink);
    color: var(--lp-bg);
    border-radius: 999px;
}
.lp-skip:focus { top: 12px; }

/* ---------- Типографика ---------- */

.lp-eyebrow {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--lp-muted);
}

.lp-title {
    margin: 0;
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -.025em;
    text-transform: uppercase;
    text-wrap: balance;
}

.lp-note {
    margin: 0;
    max-width: 60ch;
    color: var(--lp-muted);
    font-size: 17px;
    line-height: 1.5;
}

.lp-head {
    display: grid;
    gap: 16px 48px;
    margin-bottom: clamp(28px, 4vw, 48px);
}
@media (min-width: 900px) {
    .lp-head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; }
    .lp-head .lp-note { justify-self: end; }
}

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

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    border: 1px solid var(--lp-ink);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color .18s, color .18s, border-color .18s;
}
.lp-btn--dark { background: var(--lp-ink); color: var(--lp-bg); }
.lp-btn--dark:hover { background: #000; }
.lp-btn--outline { background: transparent; color: var(--lp-ink); }
.lp-btn--outline:hover { background: var(--lp-ink); color: var(--lp-bg); }
.lp-btn--light { background: var(--lp-bg); color: var(--lp-ink); border-color: var(--lp-bg); }
.lp-btn--light:hover { background: var(--lp-white); }
.lp-btn--outline-light { background: transparent; color: var(--lp-bg); border-color: rgba(251, 248, 241, .6); }
.lp-btn--outline-light:hover { background: var(--lp-bg); color: var(--lp-ink); border-color: var(--lp-bg); }
.lp-btn--sm { min-height: 40px; padding: 0 18px; font-size: 13px; }
.lp-btn:disabled { opacity: .55; cursor: progress; }
.lp-section--ink .lp-btn:focus-visible, .lp-tile--ink:focus-visible { outline-color: var(--lp-bg); }

/* Круглая кнопка «+», как на плитках клиента. */
.lp-plus {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--lp-ink);
    color: var(--lp-bg);
    transition: transform .3s var(--lp-ease);
}
.lp-plus::before, .lp-plus::after {
    content: "";
    grid-area: 1 / 1;
    width: 14px;
    height: 1.5px;
    background: currentColor;
}
.lp-plus::after { transform: rotate(90deg); }
.lp-plus--light { background: var(--lp-bg); color: var(--lp-ink); }

.lp-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}
.lp-link:hover { border-bottom-color: transparent; }

/* ---------- Схема модулей ---------- */

.lp-modules { display: block; flex: none; overflow: visible; }
.lp-modules rect { fill: none; stroke: currentColor; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
/* Внутренний контур стены виден только на крупных схемах — в мелких он превращается в штрихкод. */
.lp-modules .lp-modules__inner { display: none; stroke-width: .75; }
.lp-modules--lg .lp-modules__inner { display: inline; }
.lp-modules__extra rect { stroke-dasharray: 3 3; opacity: .55; }

/* ---------- Шапка ---------- */

.lp-header {
    position: sticky;
    top: 0;
    z-index: 20;
    height: var(--lp-header-h);
    display: flex;
    align-items: center;
    background: color-mix(in srgb, var(--lp-bg) 94%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--lp-line);
}
.lp-header__row { display: flex; align-items: center; gap: 24px; }
.lp-logo { display: block; flex: none; line-height: 0; }
.lp-logo img { width: 128px; height: auto; }
.lp-nav { display: none; gap: 28px; margin-left: auto; }
.lp-nav a {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    padding: 8px 0;
    border-bottom: 1px solid transparent;
}
.lp-nav a:hover { border-bottom-color: currentColor; }
.lp-header__contacts { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.lp-header__phone { display: none; text-decoration: none; text-align: right; line-height: 1.2; }
.lp-header__phone-number { display: block; font-weight: 500; font-size: 15px; letter-spacing: .01em; white-space: nowrap; }
.lp-header__phone-hours { display: block; font-size: 12px; color: var(--lp-muted); white-space: nowrap; }
.lp-header__call {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--lp-ink);
}
.lp-header__call svg { width: 18px; height: 18px; }
.lp-header__cta { min-height: 44px; padding: 0 18px; font-size: 13px; }

@media (max-width: 419px) {
    .lp-header__row { gap: 10px; }
    .lp-logo img { width: 104px; }
    .lp-header__contacts { gap: 8px; }
    .lp-header__call { width: 40px; height: 40px; }
    .lp-header__cta { min-height: 40px; padding: 0 14px; font-size: 12px; letter-spacing: .02em; }
}
@media (min-width: 760px) {
    .lp-header__phone { display: block; }
    .lp-header__call { display: none; }
    .lp-logo img { width: 150px; }
}
@media (min-width: 1180px) {
    .lp-nav { display: flex; }
    .lp-header__contacts { margin-left: 32px; gap: 24px; }
}

/* ---------- Hero ---------- */

.lp-hero { display: grid; background: var(--lp-sand); }
.lp-hero__photo { position: relative; overflow: hidden; aspect-ratio: 4 / 5; max-height: 640px; background: var(--lp-sand); }
.lp-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
/* Заголовок стоит на небе: лёгкая кремовая дымка сверху держит контраст на любом кадрировании. */
.lp-hero__photo::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 60%;
    z-index: 1;
    background: linear-gradient(180deg, rgba(251, 248, 241, .62) 0%, rgba(251, 248, 241, .28) 55%, rgba(251, 248, 241, 0) 100%);
}
.lp-hero__text { position: relative; z-index: 2; padding: 28px var(--lp-gutter) 0; }
.lp-hero__kicker { margin: 0 0 12px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.lp-hero__title {
    margin: 0;
    max-width: 17ch;
    font-size: clamp(30px, 4.4vw, 60px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.03em;
    text-transform: uppercase;
}
.lp-hero__aside { display: grid; grid-template-columns: 1fr 1fr; }

.lp-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    min-height: 176px;
    padding: 20px;
    text-decoration: none;
    text-align: left;
    border: 0;
    cursor: pointer;
    overflow: hidden;
}
.lp-tile--sand { background: var(--lp-sand); color: var(--lp-ink); }
.lp-tile--ink { background: var(--lp-ink); color: var(--lp-bg); }
.lp-tile__title { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.1; letter-spacing: -.01em; text-transform: uppercase; }
.lp-tile__text { margin: 8px 0 0; font-size: 14px; line-height: 1.4; opacity: .72; max-width: 26ch; }
.lp-tile__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.lp-tile__price { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.lp-tile__schemes { display: none; align-items: flex-end; gap: 14px; color: var(--lp-ink); }
.lp-tile__schemes .lp-modules { width: auto; height: 44px; }
.lp-tile__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-tile__tags span { padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(251, 248, 241, .28); font-size: 12px; }
.lp-tile:hover .lp-plus { transform: rotate(90deg); }

/* На телефоне в кадре 4:5 крыша поднимается под заголовок — заголовок встаёт над фото, на крем. */
@media (max-width: 599px) {
    .lp-hero__photo { display: flex; flex-direction: column; aspect-ratio: auto; max-height: none; background: var(--lp-bg); }
    .lp-hero__photo::before { display: none; }
    .lp-hero__img { position: static; order: 2; aspect-ratio: 4 / 3; height: auto; }
    .lp-hero__text { padding-bottom: 24px; }
    .lp-tile__tags { display: none; }
}
@media (min-width: 600px) {
    .lp-hero__photo { aspect-ratio: 16 / 10; }
    .lp-tile { min-height: 210px; padding: 28px; }
    .lp-tile__title { font-size: 22px; }
}
@media (min-width: 1100px) {
    .lp-hero {
        grid-template-columns: minmax(0, 1fr) clamp(320px, 27vw, 420px);
        height: clamp(560px, calc(100svh - var(--lp-header-h) - 180px), 720px);
    }
    .lp-hero__photo { aspect-ratio: auto; max-height: none; height: 100%; }
    .lp-hero__text { padding: 40px 48px 0 max(var(--lp-gutter), calc((100vw - var(--lp-container)) / 2)); }
    /* Три строки вместо четырёх: на широком экране четвёртая ложилась на крышу.
       Когда кадр шире фото и режется по высоте, держим небо, а не газон. */
    .lp-hero__title { max-width: 22ch; font-size: clamp(40px, 3.9vw, 60px); }
    .lp-hero__img { object-position: 50% 25%; }
    .lp-hero__aside { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
    .lp-tile { padding: 32px; }
    .lp-tile__title { font-size: 26px; }
    .lp-tile__schemes { display: flex; }
}

/* Полоса под hero: оффер, кнопки и цифры доверия. */
.lp-intro { padding: clamp(28px, 4vw, 44px) 0; border-bottom: 1px solid var(--lp-line); }
.lp-intro__row { display: grid; gap: 32px; }
.lp-intro__lead { margin: 0 0 22px; max-width: 46ch; font-size: 17px; line-height: 1.5; }
.lp-intro__lead strong { font-weight: 500; white-space: nowrap; }
.lp-intro__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 599px) { .lp-intro__actions .lp-btn { flex: 1 1 100%; } }
.lp-trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 0; }
.lp-trust__item { padding: 0 16px; border-left: 1px solid var(--lp-line); display: grid; align-content: start; gap: 8px; }
.lp-trust__number { font-size: clamp(36px, 4.2vw, 56px); font-weight: 500; line-height: .9; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.lp-trust__label { font-size: 14px; line-height: 1.35; color: var(--lp-muted); max-width: 22ch; }
@media (min-width: 760px) { .lp-trust { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .lp-intro__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); align-items: center; gap: 48px; } }

/* ---------- Секции ---------- */

.lp-section { padding: clamp(56px, 8vw, 112px) 0; }
.lp-section--sand { background: var(--lp-sand); }
.lp-section--ink { background: var(--lp-ink); color: var(--lp-bg); }
.lp-section--ink .lp-note, .lp-section--ink .lp-eyebrow { color: var(--lp-on-ink-muted); }

/* ---------- Какой дом вам нужен ---------- */

.lp-scenarios { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 640px) { .lp-scenarios { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .lp-scenarios { grid-template-columns: repeat(4, 1fr); } }
.lp-scenario { display: flex; flex-direction: column; background: var(--lp-sand); }
.lp-scenario__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--lp-line); }
.lp-scenario__media img { width: 100%; height: 100%; object-fit: cover; }
.lp-scenario__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 24px; }
.lp-scenario__spec { display: grid; justify-items: start; gap: 10px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--lp-muted); }
.lp-scenario__spec .lp-modules { color: var(--lp-ink); }
.lp-scenario__title { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.1; letter-spacing: -.015em; text-transform: uppercase; }
.lp-scenario__text { margin: 0; flex: 1; font-size: 15px; color: var(--lp-muted); }
.lp-scenario__price { margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--lp-line); font-size: 15px; }
.lp-scenario__price b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Проекты ---------- */

.lp-projects { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 720px) { .lp-projects { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .lp-projects { grid-template-columns: repeat(3, 1fr); } }
.lp-project { display: flex; flex-direction: column; background: var(--lp-white); }
/* Фото у проектов разных пропорций (4:3 и 3:2): кадр задаёт контейнер,
   картинки лежат поверх абсолютно и не распирают карточку по высоте. */
.lp-project__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--lp-sand); }
.lp-project__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--lp-ease); }
.lp-project__img--plan { object-fit: contain; background: var(--lp-white); padding: 12px; }
.lp-project:hover .lp-project__img--photo { transform: scale(1.03); }
.lp-project__number {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--lp-bg);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .02em;
}
.lp-project__switch {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: flex;
    padding: 4px;
    border-radius: 999px;
    background: rgba(251, 248, 241, .94);
}
.lp-project__tab {
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
    cursor: pointer;
}
.lp-project__tab.is-active { background: var(--lp-ink); color: var(--lp-bg); }
.lp-project__body { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 24px; }
.lp-project__title { margin: 0; font-size: 21px; font-weight: 500; line-height: 1.1; letter-spacing: -.015em; text-transform: uppercase; }
.lp-project__meta { display: flex; align-items: center; gap: 14px; }
.lp-project__specs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--lp-muted); }
.lp-project__text { margin: 0; flex: 1; font-size: 15px; color: var(--lp-muted); }
.lp-prices { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--lp-line); }
.lp-prices div { padding: 14px 0 0; }
.lp-prices div + div { padding-left: 16px; border-left: 1px solid var(--lp-line); }
.lp-prices dt { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--lp-muted); }
.lp-prices dd { margin: 4px 0 0; font-size: 20px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp-project__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.lp-project__actions .lp-btn { padding: 0 12px; font-size: 13px; }
.lp-projects__more { margin: 32px 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 24px 28px; background: var(--lp-bg); }
.lp-projects__more p { margin: 0; max-width: 62ch; }

/* ---------- Построенные дома ---------- */

.lp-built { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 8px; }
.lp-built__item:nth-child(1), .lp-built__item:nth-child(11) { grid-column: span 2; grid-row: span 2; }
.lp-built__item:nth-child(6), .lp-built__item:nth-child(12) { grid-column: span 2; }
@media (min-width: 760px) {
    .lp-built { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 12px; }
}
@media (min-width: 1100px) { .lp-built { grid-auto-rows: 240px; } }
.lp-built__btn {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    overflow: hidden;
    cursor: zoom-in;
    background: var(--lp-sand);
    color: var(--lp-white);
    text-align: left;
}
.lp-built__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--lp-ease); }
.lp-built__btn:hover img { transform: scale(1.04); }
.lp-built__btn::after {
    content: "";
    position: absolute;
    inset: 40% 0 0;
    background: linear-gradient(180deg, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, .62) 100%);
    pointer-events: none;
}
.lp-built__caption { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; display: grid; justify-items: start; gap: 8px; }
.lp-built__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--lp-bg);
    color: var(--lp-ink);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .02em;
    white-space: nowrap;
}
.lp-built__tag .lp-modules { height: 12px; width: auto; }
.lp-built__title { display: none; font-size: 15px; font-weight: 500; line-height: 1.2; text-shadow: 0 1px 12px rgba(0, 0, 0, .3); }
@media (min-width: 760px) {
    .lp-built__caption { left: 16px; right: 16px; bottom: 16px; }
    .lp-built__title { display: block; }
}

/* ---------- Прайс ---------- */

.lp-price-grid { display: grid; gap: 20px; }
@media (min-width: 1000px) { .lp-price-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } }
.lp-price-side { display: grid; gap: 20px; }
.lp-panel { background: var(--lp-white); padding: clamp(18px, 2.4vw, 28px); }
.lp-panel__title { margin: 0 0 14px; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.lp-table-wrap { overflow-x: auto; }
.lp-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.lp-table caption { text-align: left; }
.lp-table th, .lp-table td { padding: 12px 10px; border-top: 1px solid var(--lp-line); text-align: left; vertical-align: middle; }
.lp-table tr > :first-child { padding-left: 0; }
.lp-table tr > :last-child { padding-right: 0; }
.lp-table thead th { border-top: 0; padding-top: 0; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--lp-muted); }
.lp-table tbody th { font-weight: 500; white-space: nowrap; }
.lp-table__num { text-align: right !important; white-space: nowrap; font-weight: 500; }
.lp-table__modules { display: flex; align-items: center; gap: 16px; }
.lp-table__modules b { min-width: 1ch; font-weight: 500; }
.lp-table__modules .lp-modules { color: var(--lp-ink); }
.lp-table__modules-col { width: 1%; }
.lp-table__area-sm { display: none; }
/* На телефоне площадь уходит под число модулей, иначе обе цены не влезают в ширину. */
@media (max-width: 599px) {
    .lp-table__modules .lp-modules { display: none; }
    .lp-table .lp-table__area { display: none; }
    .lp-table__area-sm { display: block; font-weight: 400; font-size: 13px; color: var(--lp-muted); }
    .lp-table { font-size: 14px; }
    .lp-table th, .lp-table td { padding-inline: 6px; }
}

.lp-rows { margin: 0; display: grid; }
.lp-rows__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--lp-line); font-size: 15px; }
.lp-rows__row dt { color: var(--lp-muted); }
.lp-rows__row dd { margin: 0; font-weight: 500; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Что входит ---------- */

.lp-included { display: grid; gap: 32px; }
.lp-included__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.lp-included__media img { width: 100%; height: 100%; object-fit: cover; }
.lp-included__badge { position: absolute; left: 16px; bottom: 16px; padding: 8px 14px; border-radius: 999px; background: var(--lp-bg); font-size: 13px; font-weight: 500; }
.lp-specs { list-style: none; margin: 0; padding: 0; display: grid; }
.lp-specs__item { display: grid; gap: 6px; padding: 20px 0; border-top: 1px solid var(--lp-line); }
.lp-specs__item:last-child { border-bottom: 1px solid var(--lp-line); }
.lp-specs__title { margin: 0; font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .01em; }
.lp-specs__text { margin: 0; font-size: 15px; color: var(--lp-muted); }
@media (min-width: 1000px) {
    .lp-included { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
    .lp-included__media { position: sticky; top: calc(var(--lp-header-h) + 24px); aspect-ratio: 4 / 5; }
    .lp-specs__item { grid-template-columns: 200px 1fr; gap: 24px; }
}
.lp-compare { margin-top: clamp(32px, 4vw, 56px); }
.lp-compare .lp-table td:nth-child(3) { font-weight: 500; }

/* ---------- Две колонки: текст + медиа ---------- */

.lp-split { display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) {
    .lp-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; }
    .lp-split--reverse .lp-split__text { order: 1; }
    .lp-split--reverse .lp-split__media { order: 2; }
}
.lp-split__media img { width: 100%; }
.lp-split__text > p { margin: 0 0 16px; color: var(--lp-muted); }
.lp-split__text .lp-title { margin-bottom: 24px; }
.lp-checklist { list-style: none; margin: 8px 0 28px; padding: 0; display: grid; gap: 10px; }
.lp-checklist li { padding-left: 28px; position: relative; }
.lp-checklist li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 13px; height: 7px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }


/* ---------- Видео ---------- */

.lp-videos { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 20px; }
@media (min-width: 640px) { .lp-videos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) {
    .lp-videos { grid-template-columns: repeat(3, 1fr); }
    .lp-video--featured { grid-column: span 2; grid-row: span 2; }
    .lp-video--featured .lp-video__title { font-size: 22px; }
}
.lp-video__poster { position: relative; display: block; width: 100%; padding: 0; border: 0; overflow: hidden; cursor: pointer; background: #000; aspect-ratio: 16 / 9; }
.lp-video--featured .lp-video__poster { aspect-ratio: auto; height: calc(100% - 84px); min-height: 220px; }
.lp-video__poster img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .2s, transform .7s var(--lp-ease); }
.lp-video__poster:hover img { opacity: 1; transform: scale(1.03); }
.lp-video__play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: var(--lp-bg); }
.lp-video__play::after { content: ""; position: absolute; left: 26px; top: 20px; border-left: 18px solid var(--lp-ink); border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.lp-video__duration { position: absolute; right: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(20, 20, 20, .72); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }
.lp-video__frame { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.lp-video__tag { margin: 14px 0 6px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; opacity: .6; }
.lp-video__title { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.25; }

/* ---------- Этапы и оплата ---------- */

.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 24px; counter-reset: step; }
@media (min-width: 700px) { .lp-steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .lp-steps { grid-template-columns: repeat(4, 1fr); } }
.lp-steps__item { counter-increment: step; display: grid; align-content: start; gap: 10px; padding: 24px 0 32px; border-top: 1px solid var(--lp-ink); }
.lp-steps__item::before { content: counter(step, decimal-leading-zero); font-size: 14px; font-weight: 500; color: var(--lp-muted); font-variant-numeric: tabular-nums; }
.lp-steps__title { font-size: 20px; font-weight: 500; line-height: 1.1; letter-spacing: -.015em; text-transform: uppercase; }
.lp-steps__time { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.lp-steps__text { font-size: 15px; color: var(--lp-muted); }

/* Доли платежей — ширина полосы равна проценту. */
.lp-pay { margin-top: 24px; }
.lp-pay__bar { display: flex; gap: 4px; }
.lp-pay__part { display: grid; gap: 10px; }
.lp-pay__part::before { content: ""; height: 8px; background: var(--lp-ink); }
.lp-pay__part:nth-child(2)::before { background: #55524c; }
.lp-pay__part:nth-child(3)::before { background: #8d887e; }
.lp-pay__value { font-size: 24px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lp-pay__label { display: block; font-size: 13px; color: var(--lp-muted); line-height: 1.35; }
.lp-steps__after { margin: 32px 0 0; max-width: 72ch; color: var(--lp-muted); }

/* ---------- Финансы ---------- */

.lp-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .lp-cards--3 { grid-template-columns: repeat(3, 1fr); } }
.lp-card { padding: 28px; border: 1px solid var(--lp-line); display: grid; align-content: start; gap: 10px; }
.lp-card__label { margin: 0 0 6px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--lp-muted); }
.lp-card__title { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.1; letter-spacing: -.015em; text-transform: uppercase; }
.lp-card__text { margin: 0; font-size: 15px; color: var(--lp-muted); }

/* ---------- Отзывы ---------- */

.lp-rating { display: inline-flex; align-items: center; gap: 14px; }
.lp-rating__value { font-size: 44px; font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.lp-rating__text { font-size: 14px; line-height: 1.35; color: var(--lp-muted); }
.lp-reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; align-items: start; }
@media (min-width: 720px) { .lp-reviews { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .lp-reviews { grid-template-columns: repeat(3, 1fr); } }
.lp-review { background: var(--lp-white); padding: 16px 16px 24px; display: grid; gap: 18px; }
.lp-review__photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.lp-review__photo { display: block; width: 100%; padding: 0; border: 0; aspect-ratio: 1; overflow: hidden; cursor: zoom-in; background: var(--lp-sand); }
.lp-review__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--lp-ease); }
.lp-review__photo:hover img { transform: scale(1.06); }
.lp-review__body { padding: 0 8px; display: grid; gap: 14px; }
.lp-review__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.lp-review__name { font-size: 17px; font-weight: 500; }
.lp-review__info { font-size: 13px; color: var(--lp-muted); }
.lp-review__text { margin: 0; font-size: 15px; line-height: 1.55; }
.lp-review__text p { margin: 0 0 10px; }
.lp-review__text p:last-child { margin-bottom: 0; }
.lp-review__text.is-clamped { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.lp-review__more { justify-self: start; padding: 0; border: 0; background: none; cursor: pointer; }

/* ---------- Вопросы ---------- */

.lp-faq { display: grid; gap: 32px; }
@media (min-width: 1000px) {
    .lp-faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 64px; align-items: start; }
    .lp-faq__aside { position: sticky; top: calc(var(--lp-header-h) + 32px); }
}
.lp-faq__aside .lp-note { margin: 20px 0 28px; }
.lp-faq__item { border-top: 1px solid var(--lp-line); }
.lp-faq__item:last-child { border-bottom: 1px solid var(--lp-line); }
.lp-faq__q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    cursor: pointer;
    list-style: none;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
}
.lp-faq__q::-webkit-details-marker { display: none; }
.lp-faq__q .lp-plus { width: 36px; height: 36px; background: transparent; color: var(--lp-ink); border: 1px solid var(--lp-line); }
.lp-faq__item[open] .lp-plus { transform: rotate(45deg); }
.lp-faq__a { margin: 0 0 22px; max-width: 70ch; color: var(--lp-muted); }

/* ---------- Текст о технологии ---------- */

.lp-prose p { max-width: 76ch; line-height: 1.6; }
.lp-prose h2 { font-size: 18px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; margin: 32px 0 10px; }
.lp-prose__inner { max-width: 860px; }
.lp-prose__inner .lp-title { margin-bottom: 16px; }
.lp-about__cols p { margin: 0 0 16px; color: var(--lp-muted); }
@media (min-width: 900px) { .lp-about__cols { columns: 2; column-gap: 56px; } .lp-about__cols p { break-inside: avoid; } }

/* ---------- Форма ---------- */

.lp-lead { display: grid; gap: 40px; }
@media (min-width: 960px) { .lp-lead { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 80px; align-items: start; } }
.lp-lead .lp-title { margin-bottom: 20px; }
.lp-lead__points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.lp-lead__points li { display: flex; gap: 14px; align-items: baseline; }
.lp-lead__points li::before { content: ""; flex: none; width: 8px; height: 8px; background: currentColor; transform: translateY(-2px); }
.lp-lead__messengers { margin: 28px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--lp-on-ink-muted); font-size: 14px; }
.lp-lead__card { background: var(--lp-bg); color: var(--lp-ink); padding: clamp(22px, 3vw, 36px); }

.lp-form { display: grid; gap: 16px; }
.lp-field { display: grid; gap: 6px; }
.lp-field__label { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--lp-muted); }
.lp-field__input {
    font: inherit;
    font-size: 17px;
    min-height: 52px;
    padding: 12px 16px;
    border-radius: 0;
    border: 1px solid var(--lp-line);
    background: var(--lp-white);
    color: var(--lp-ink);
    transition: border-color .15s;
}
.lp-field__input:hover { border-color: #bdb6a6; }
.lp-field__input:focus { outline: none; border-color: var(--lp-ink); box-shadow: inset 0 0 0 1px var(--lp-ink); }
.lp-field__input[aria-invalid="true"] { border-color: var(--lp-error); }
.lp-field__error { font-size: 13px; color: var(--lp-error); min-height: 0; }
.lp-field__error:empty { display: none; }
.lp-choice { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lp-choice legend { padding: 0; margin-bottom: 8px; }
.lp-choice__item { position: relative; cursor: pointer; }
.lp-choice__item input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.lp-choice__item span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--lp-line); font-size: 14px; transition: background-color .15s, border-color .15s, color .15s; }
.lp-choice__item:hover span { border-color: var(--lp-ink); }
.lp-choice__item input:checked + span { background: var(--lp-ink); border-color: var(--lp-ink); color: var(--lp-bg); }
.lp-choice__item input:focus-visible + span { outline: 2px solid var(--lp-ink); outline-offset: 2px; }
.lp-check { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--lp-muted); cursor: pointer; }
.lp-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--lp-ink); }
.lp-check a { color: var(--lp-ink); }
.lp-form__submit { width: 100%; min-height: 56px; }
.lp-form__status { margin: 0; font-size: 14px; color: var(--lp-error); }
.lp-form__status:empty { display: none; }

/* ---------- Поп-апы ---------- */

.lp-modal {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--lp-ink);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.lp-modal::backdrop { background: rgba(20, 20, 20, .62); backdrop-filter: blur(3px); }
.lp-modal[open] { display: grid; place-items: center; }
.lp-modal__box {
    position: relative;
    width: min(100% - 24px, 560px);
    margin: 12px auto;
    padding: clamp(24px, 4vw, 40px);
    background: var(--lp-bg);
    animation: lp-modal-in .28s var(--lp-ease);
}
.lp-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--lp-ink);
    color: var(--lp-bg);
    cursor: pointer;
}
.lp-modal__close::before, .lp-modal__close::after { content: ""; grid-area: 1 / 1; width: 16px; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.lp-modal__close::after { transform: rotate(-45deg); }
.lp-modal__title { margin: 0 56px 12px 0; font-size: clamp(24px, 3vw, 32px); font-weight: 500; line-height: 1.05; letter-spacing: -.025em; text-transform: uppercase; }
.lp-modal__text { margin: 0 0 24px; color: var(--lp-muted); }
@keyframes lp-modal-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Поп-ап проекта: галерея слева, описание справа. */
.lp-modal__box.lp-pm { width: min(100% - 24px, 1180px); padding: 0; display: grid; }
@media (min-width: 960px) { .lp-modal__box.lp-pm { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.lp-pm__media { background: var(--lp-sand); padding: 12px; display: grid; align-content: start; gap: 10px; }
.lp-pm__stage { position: relative; aspect-ratio: 4 / 3; background: var(--lp-white); overflow: hidden; }
.lp-pm__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-pm__stage img.is-plan { object-fit: contain; padding: 12px; }
.lp-pm__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(251, 248, 241, .92);
    cursor: pointer;
}
.lp-pm__nav--prev { left: 10px; }
.lp-pm__nav--next { right: 10px; }
.lp-pm__nav::before { content: ""; width: 9px; height: 9px; border-left: 1.5px solid var(--lp-ink); border-bottom: 1.5px solid var(--lp-ink); transform: translateX(2px) rotate(45deg); }
.lp-pm__nav--next::before { transform: translateX(-2px) rotate(-135deg); }
.lp-pm__counter { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: rgba(20, 20, 20, .7); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }
.lp-pm__thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.lp-pm__thumb { display: block; width: 100%; padding: 0; border: 0; aspect-ratio: 4 / 3; overflow: hidden; cursor: pointer; background: var(--lp-white); opacity: .6; transition: opacity .15s; }
.lp-pm__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lp-pm__thumb--plan img { object-fit: contain; padding: 3px; }
.lp-pm__thumb:hover, .lp-pm__thumb.is-active { opacity: 1; }
.lp-pm__thumb.is-active { outline: 2px solid var(--lp-ink); outline-offset: -2px; }
.lp-pm__note { margin: 2px 2px 0; font-size: 13px; color: var(--lp-muted); }
.lp-pm__info { padding: clamp(24px, 3vw, 40px); display: grid; align-content: start; gap: 20px; }
.lp-pm__number { justify-self: start; padding: 6px 12px; border-radius: 999px; background: var(--lp-sand); font-size: 13px; font-weight: 500; }
.lp-pm__title { margin: -6px 0 0; font-size: clamp(26px, 3vw, 34px); font-weight: 500; line-height: 1.02; letter-spacing: -.025em; text-transform: uppercase; }
.lp-pm__facts { margin: 0; display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 4px 28px; }
.lp-pm__facts dt { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--lp-muted); }
.lp-pm__facts dd { margin: 0; font-size: 17px; font-weight: 500; white-space: nowrap; grid-row: 2; }
.lp-pm__desc { margin: 0; }
.lp-pm__rooms { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lp-pm__rooms li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--lp-line); font-size: 13px; }
.lp-pm__included { margin: 0; font-size: 14px; color: var(--lp-muted); }
.lp-pm__included b { color: var(--lp-ink); font-weight: 500; }
.lp-pm__actions { display: grid; gap: 8px; }
@media (min-width: 520px) { .lp-pm__actions { grid-template-columns: 1fr 1fr; } }
@media (max-width: 519px) { .lp-pm__facts { grid-template-columns: repeat(2, auto); } .lp-pm__facts dd { grid-row: auto; } }

/* Лайтбокс для построенных домов и фото из отзывов. */
.lp-lightbox .lp-modal__box { width: min(100% - 24px, 1200px); padding: 0; background: transparent; }
.lp-lightbox__figure { margin: 0; display: grid; gap: 12px; }
.lp-lightbox__stage { position: relative; }
.lp-lightbox__img { width: 100%; max-height: calc(100svh - 120px); object-fit: contain; background: #111; }
.lp-lightbox__caption { color: var(--lp-bg); font-size: 15px; display: flex; justify-content: space-between; gap: 16px; }
.lp-lightbox__counter { opacity: .7; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-lightbox .lp-modal__close { background: var(--lp-bg); color: var(--lp-ink); }

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

.lp-footer { padding: 56px 0 32px; border-top: 1px solid var(--lp-line); font-size: 14px; color: var(--lp-muted); }
.lp-footer__grid { display: grid; gap: 32px; margin-bottom: 40px; }
@media (min-width: 768px) { .lp-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.lp-footer__about { margin: 16px 0 0; max-width: 40ch; }
.lp-footer__title { margin: 0 0 12px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--lp-ink); }
.lp-footer__link { display: block; color: var(--lp-ink); text-decoration: none; font-weight: 500; font-size: 16px; margin-bottom: 4px; }
.lp-footer__muted { margin: 0 0 12px; }
.lp-footer__social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lp-footer__social a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--lp-line); color: var(--lp-ink); text-decoration: none; }
.lp-footer__social a:hover { border-color: var(--lp-ink); }
.lp-footer__copy { margin: 0; padding-top: 24px; border-top: 1px solid var(--lp-line); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 13px; }
.lp-footer__policy { color: var(--lp-ink); }

/* Нижняя панель на телефоне: звонок и смета всегда под пальцем. */
.lp-mobilebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    display: flex;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--lp-bg) 94%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--lp-line);
    transform: translateY(110%);
    transition: transform .3s var(--lp-ease);
}
.lp-mobilebar.is-visible { transform: none; }
.lp-mobilebar .lp-btn { flex: 1; min-height: 48px; padding: 0 12px; font-size: 13px; }
.lp-mobilebar .lp-btn--outline { flex: 0 0 auto; }
@media (min-width: 900px) { .lp-mobilebar { display: none; } }
@media (max-width: 899px) { .lp-footer { padding-bottom: 96px; } }

/* ---------- Служебные страницы ---------- */

.lp-thanks { min-height: 60vh; display: grid; align-items: center; padding: 80px 0; }
.lp-thanks .lp-title { margin-bottom: 20px; }
.lp-thanks .lp-note { margin-bottom: 32px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Квиз расчёта в поп-апе ---------- */

.lp-quiz { display: grid; gap: 14px; margin-bottom: 4px; }
.lp-quiz__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.lp-quiz__count { margin: 0; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--lp-muted); }
.lp-quiz__back { padding: 0; border: 0; background: none; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; border-bottom: 1px solid currentColor; }
.lp-quiz__progress { height: 3px; background: var(--lp-line); }
.lp-quiz__progress span { display: block; width: 0; height: 100%; background: var(--lp-ink); transition: width .3s var(--lp-ease); }
.lp-quiz__step { margin: 0; padding: 0; border: 0; min-width: 0; }
.lp-quiz__q { margin: 6px 0 14px; padding: 0; font-size: 20px; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; text-transform: uppercase; }
.lp-quiz__q--final { margin-bottom: 0; }
.lp-quiz__options { display: grid; gap: 8px; }
@media (min-width: 520px) { .lp-quiz__options { grid-template-columns: 1fr 1fr; } }
.lp-quiz__option { position: relative; display: flex; cursor: pointer; }
.lp-quiz__option input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.lp-quiz__option > span {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 12px 16px;
    border: 1px solid var(--lp-line);
    background: var(--lp-white);
    font-size: 15px;
    line-height: 1.25;
    transition: border-color .15s, box-shadow .15s;
}
.lp-quiz__option b { display: block; font-weight: 500; }
.lp-quiz__option small { display: block; margin-top: 3px; font-size: 13px; color: var(--lp-muted); }
.lp-quiz__option .lp-modules { height: 22px; width: auto; color: var(--lp-ink); }
.lp-quiz__option:hover > span { border-color: var(--lp-ink); }
.lp-quiz__option input:checked + span { border-color: var(--lp-ink); box-shadow: inset 0 0 0 1px var(--lp-ink); }
.lp-quiz__option input:focus-visible + span { outline: 2px solid var(--lp-ink); outline-offset: 2px; }
.lp-quiz__nav { display: flex; justify-content: flex-end; }
.lp-quiz__result { padding: 16px 18px; background: var(--lp-sand); }
.lp-quiz__result-label { margin: 0 0 4px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--lp-muted); }
.lp-quiz__price { margin: 0 0 6px; font-size: 24px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lp-quiz__note { margin: 0; font-size: 13px; color: var(--lp-muted); }
.lp-form__contacts { display: grid; gap: 16px; }
.lp-field__optional { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Команда в цеху — перед формой заявки. */
.lp-team { position: relative; margin: 0 auto clamp(40px, 6vw, 72px); overflow: hidden; aspect-ratio: 4 / 3; }
.lp-team img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%; }
.lp-team::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, rgba(35, 35, 35, 0) 0%, rgba(35, 35, 35, .85) 100%); pointer-events: none; }
.lp-team__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; justify-items: start; gap: 10px; padding: 20px; }
.lp-team__tag { padding: 6px 12px; border-radius: 999px; background: var(--lp-bg); color: var(--lp-ink); font-size: 13px; font-weight: 500; }
.lp-team__text { max-width: 44ch; font-size: 15px; line-height: 1.4; color: var(--lp-bg); }
@media (min-width: 760px) {
    .lp-team { aspect-ratio: 21 / 9; }
    .lp-team__caption { padding: 28px 32px; }
    .lp-team__text { font-size: 17px; }
}

/* ---------- Команда ---------- */

.lp-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px 20px; grid-template-columns: 1fr 1fr; }
@media (min-width: 1000px) { .lp-people { grid-template-columns: repeat(4, 1fr); } }
.lp-person { display: grid; align-content: start; gap: 6px; }
/* Портреты сняты на кремовом фоне — тот же цвет, что у страницы, поэтому стоят «вырезкой» на линии. */
.lp-person__photo { aspect-ratio: 1; margin-bottom: 14px; border-bottom: 1px solid var(--lp-ink); overflow: hidden; }
.lp-person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.lp-person__role { margin: 0; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--lp-muted); }
.lp-person__name { margin: 0; font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; }
.lp-person__text { margin: 4px 0 0; font-size: 15px; color: var(--lp-muted); }
.lp-person--invite { grid-column: 1 / -1; align-content: end; gap: 10px; padding: 28px; background: var(--lp-ink); color: var(--lp-bg); }
.lp-person--invite .lp-person__role, .lp-person--invite .lp-person__text { color: var(--lp-on-ink-muted); }
.lp-person--invite .lp-btn { justify-self: start; margin-top: 10px; }
@media (min-width: 1000px) { .lp-person--invite { grid-column: auto; } }
.lp-team-facts { margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--lp-line); }
@media (min-width: 760px) { .lp-team-facts { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Как внутри: лента интерьеров ---------- */

.lp-inside__head { position: relative; }
.lp-inside__nav { display: none; gap: 8px; }
.lp-inside__nav .lp-pm__nav { position: static; margin: 0; }
@media (min-width: 900px) {
    .lp-inside__head .lp-head { padding-right: 120px; }
    .lp-inside__nav { display: flex; position: absolute; right: 0; bottom: calc(clamp(28px, 4vw, 48px) + 4px); }
}
/* Лента выходит за контейнер вправо, а первая карточка стоит по линии контейнера. */
.lp-inside {
    --lp-side: max(var(--lp-gutter), calc((100vw - var(--lp-container)) / 2));
    list-style: none;
    margin: 0;
    padding: 0 var(--lp-side) 4px;
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--lp-side);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.lp-inside::-webkit-scrollbar { display: none; }
.lp-inside__item { flex: 0 0 clamp(230px, 72vw, 320px); scroll-snap-align: start; }
@media (min-width: 1000px) { .lp-inside__item { flex-basis: 300px; } }
.lp-inside__btn { display: block; width: 100%; padding: 0; border: 0; aspect-ratio: 4 / 5; overflow: hidden; cursor: zoom-in; background: #111; }
.lp-inside__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--lp-ease); }
.lp-inside__btn:hover img { transform: scale(1.04); }
.lp-inside__tag { margin: 14px 0 4px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--lp-on-ink-muted); }
.lp-inside__title { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.25; }

/* ---------- Галерея цеха и этапы сборки ---------- */

.lp-shop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; gap: 8px; }
.lp-shop__item:first-child { grid-column: span 2; grid-row: span 2; }
@media (min-width: 760px) {
    .lp-shop { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 12px; }
}
@media (min-width: 1100px) { .lp-shop { grid-auto-rows: 230px; } }
.lp-shop__btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; overflow: hidden; cursor: zoom-in; background: var(--lp-line); }
.lp-shop__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--lp-ease); }
.lp-shop__btn:hover img { transform: scale(1.04); }

.lp-stages { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; gap: 28px 16px; grid-template-columns: 1fr 1fr; counter-reset: stage; }
@media (min-width: 1000px) { .lp-stages { grid-template-columns: repeat(4, 1fr); } }
.lp-stages__item { counter-increment: stage; display: grid; align-content: start; gap: 6px; }
.lp-stages__photo { display: block; width: 100%; padding: 0; border: 0; aspect-ratio: 4 / 3; overflow: hidden; cursor: zoom-in; margin-bottom: 10px; background: var(--lp-line); }
.lp-stages__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--lp-ease); }
.lp-stages__photo:hover img { transform: scale(1.04); }
.lp-stages__title { font-size: 18px; font-weight: 500; text-transform: uppercase; letter-spacing: -.01em; }
.lp-stages__title::before { content: counter(stage, decimal-leading-zero) "  "; color: var(--lp-muted); font-size: 14px; white-space: pre; }
.lp-stages__text { font-size: 14px; color: var(--lp-muted); }

.lp-production__about { margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--lp-line); }
.lp-production__video .lp-video__title { color: var(--lp-ink); }

/* ---------- Рейтинг у оффера ---------- */

.lp-rating-mini { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 20px; font-size: 14px; color: var(--lp-muted); text-decoration: none; }
.lp-rating-mini b { font-size: 18px; font-weight: 500; color: var(--lp-ink); }
.lp-rating-mini__stars { display: inline-flex; gap: 2px; }
.lp-rating-mini__stars svg { width: 14px; height: 14px; fill: var(--lp-ink); }
.lp-rating-mini:hover span:last-child { text-decoration: underline; }

/* ---------- Что закреплено в договоре ---------- */

.lp-deal { margin-top: clamp(48px, 6vw, 72px); padding: clamp(24px, 3vw, 40px); background: var(--lp-ink); color: var(--lp-bg); }
.lp-deal__head { display: grid; gap: 10px 48px; margin-bottom: 28px; }
@media (min-width: 900px) { .lp-deal__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } }
.lp-deal__title { margin: 0; font-size: clamp(24px, 2.6vw, 34px); font-weight: 500; line-height: 1.05; letter-spacing: -.025em; text-transform: uppercase; }
.lp-deal__note { margin: 0; color: var(--lp-on-ink-muted); }
.lp-deal__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
@media (min-width: 640px) { .lp-deal__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .lp-deal__list { grid-template-columns: repeat(4, 1fr); } }
.lp-deal__item { display: grid; align-content: start; gap: 8px; padding-top: 18px; border-top: 1px solid rgba(251, 248, 241, .22); }
.lp-deal__mark { font-size: clamp(30px, 3vw, 40px); font-weight: 500; line-height: 1; letter-spacing: -.03em; text-transform: uppercase; }
.lp-deal__name { font-size: 15px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; }
.lp-deal__text { font-size: 14px; line-height: 1.45; color: var(--lp-on-ink-muted); }

/* ---------- Как добраться ---------- */

.lp-visit { display: grid; gap: 24px; margin-top: clamp(48px, 6vw, 80px); background: var(--lp-bg); }
@media (min-width: 960px) { .lp-visit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 0; } }
.lp-visit__info { display: grid; align-content: center; gap: 14px; padding: clamp(24px, 3vw, 40px); }
.lp-visit__info .lp-eyebrow { margin: 0; }
.lp-visit__address { margin: 0; font-size: clamp(20px, 2vw, 26px); font-weight: 500; line-height: 1.15; letter-spacing: -.015em; }
.lp-visit__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lp-visit__facts li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--lp-line); font-size: 13px; }
.lp-visit__text { margin: 0; color: var(--lp-muted); font-size: 15px; }
.lp-visit__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.lp-visit__map { min-height: 320px; background: var(--lp-line); }
/* Карта в монохроме, как всё на сайте; цвет возвращается при наведении, чтобы читать подписи. */
.lp-visit__map iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; filter: grayscale(1) contrast(1.05); transition: filter .3s; }
.lp-visit__map:hover iframe { filter: none; }

/* ---------- Телефон: сравнение комплектаций и команда ---------- */

@media (max-width: 599px) {
    /* Три колонки текста в 343 px не помещаются: каждая строка — карточка «параметр → две комплектации». */
    .lp-compare .lp-table thead { display: none; }
    .lp-compare .lp-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 14px 0; border-top: 1px solid var(--lp-line); }
    .lp-compare .lp-table th, .lp-compare .lp-table td { padding: 0; border: 0; }
    .lp-compare .lp-table th { grid-column: 1 / -1; font-size: 15px; }
    .lp-compare .lp-table td { font-size: 14px; }
    .lp-compare .lp-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--lp-muted); }

    /* Команда строками «фото слева, текст справа», чтобы третий человек не висел один. */
    .lp-people { grid-template-columns: 1fr; gap: 20px; }
    .lp-person { grid-template-columns: 112px 1fr; column-gap: 16px; }
    .lp-person__photo { grid-row: 1 / span 3; margin-bottom: 0; }
    .lp-person--invite { grid-template-columns: 1fr; }
}