/* Технический каркас. Дизайна нет — только границы экранов.
   Готовые экраны стилизуются ниже, каждый своим блоком. */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: #111;
    background: #fff;
}

.container {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 20px;
}

/* Отладка сетки: /?grid — красным левая и правая границы контейнера.
   inset-тенями, а не border, чтобы разметка не сдвигалась ни на пиксель. */
.debug-grid .container {
    box-shadow: inset 1px 0 0 red, inset -1px 0 0 red;
}
.debug-grid .hero__inner {
    box-shadow: inset 1px 0 0 red, inset -1px 0 0 red;
    min-height: 100%;
}
/* У шапки свои границы — она шире контейнера */
.debug-grid .header__inner {
    box-shadow: inset 1px 0 0 red, inset -1px 0 0 red;
}

/* Зелёным — верх и низ каждого экрана */
.debug-grid .dbg-block {
    position: relative;
    box-shadow: inset 0 1px 0 #00A05A, inset 0 -1px 0 #00A05A;
}

/* Полупрозрачным — вертикальные отступы экрана */
.dbg-band {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 90;
    background: rgba(0, 190, 110, .16);
    border-block: 1px dashed rgba(0, 140, 80, .45);
    pointer-events: none;
}

.dbg-band span {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 7px;
    border-radius: 3px;
    background: rgba(0, 110, 65, .9);
    font: 600 11px/1.3 monospace;
    letter-spacing: .04em;
    color: #fff;
    white-space: nowrap;
}

.screen {
    display: flex;
    align-items: center;
    min-height: 70vh;
    padding-block: 40px;
    border-bottom: 1px dashed #ccc;
}

.screen--sm { min-height: 20vh; }

.screen__num {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #999;
}

.screen__name {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
}


/* =============================================================
   ЭКРАН 01 — Шапка / меню
   Не в .container: тянется на всю ширину, ограничена только полями.
   ============================================================= */

.header {
    position: relative;
    z-index: 10;
    background: #fff;
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: clamp(64px, 6.4vw, 92px);
    padding-inline: clamp(16px, 3vw, 56px);
}

.header__logo { flex: none; display: block; }
.header__logo img {
    display: block;
    width: auto;
    height: clamp(32px, 3.4vw, 46px);
}

.header__nav {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.2vw, 32px);
}

.header__menu {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Разделители «|» между пунктами — не в разметке, а стилями */
.header__menu li + li::before {
    content: '|';
    margin-inline: clamp(10px, 1.3vw, 20px);
    color: #D8D4CE;
    font-weight: 300;
}

.header__menu a {
    position: relative;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.72rem, .92vw, .875rem);
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #1B1815;
    text-decoration: none;
}

.header__menu a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: #FFCB2E;
    transition: width .25s ease;
}
.header__menu a:hover::after { width: 100%; }

/* Иконка меню: полоски того же жёлтого, что и кнопка «Прайс-лист» */
.burger {
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0 7px;
    border: 0;
    background: none;
    cursor: pointer;
}

.burger span {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: #FFCB2E;
    transition: background .2s ease, transform .25s ease, opacity .2s ease;
}
.burger:hover span { background: #F5BE18; }


/* =============================================================
   ЭКРАН 02 — Первый экран
   ============================================================= */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 88vh;
    padding-block: clamp(30px, 5vw, 60px);
    overflow: hidden;
    background: #fff;
}

/* Круг-фигура из референса: перекрывает левую часть заголовка */
/* Привязка по центру, а не по левому краю: тогда размер можно менять,
   а круг остаётся на месте. */
.hero__circle {
    --d: clamp(252px, 34.8vw, 538px);

    position: absolute;
    left: 30.5%;
    /* 36% от высоты экрана, но не выше, чем радиус + запас —
       иначе на низких окнах круг срежет верхний край секции */
    top: max(36%, calc(var(--d) / 2 + 12px));
    z-index: 0;
    width: var(--d);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #F2F2F2;
}

.hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* Блок по ширине заголовка — чтобы подпись встала под его левый край.
   Не центрируем: в референсе текст сдвинут влево, к кругу. */
.hero__head {
    width: fit-content;
    max-width: 100%;
    margin-left: clamp(0px, 7%, 120px);
}

.hero__title {
    margin: 0;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(2.7rem, 10.5vw, 9rem);
    line-height: .95;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.hero__title-bold { font-weight: 800; }
.hero__title-thin { font-weight: 200; }

/* Подпись прижата к левому краю заголовка, как в референсе */
.hero__subtitle {
    margin: clamp(4px, .8vw, 12px) 0 0;
    padding-left: 8px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.9rem, 1.7vw, 1.5rem);
    font-weight: 400;
    line-height: 1.35;
    color: #3A3A3A;
}

.hero__sofa {
    margin-top: clamp(14px, 3vw, 46px);
    text-align: center;
}

/* Обёртка по размеру картинки — к ней цепляются ценник и завитушка.
   max-width считается из пропорции 1614:740, чтобы диван не вылезал за экран. */
.hero__sofa-wrap {
    position: relative;
    display: inline-block;
    width: min(72%, 900px);
    max-width: 87vh;
}

.hero__sofa img {
    display: block;
    width: 100%;
    height: auto;
}

/* Завитушка и ценник — одним блоком, чтобы линия всегда упиралась в кнопку */
.hero__price-wrap {
    position: absolute;
    top: -4%;
    right: -15%;
    z-index: 2;
    display: flex;
    align-items: center;
}

/* Ценник справа от дивана, как в референсе.
   position + z-index обязательны: без них SVG-завитушка рисуется поверх
   фона кнопки, хотя стоит раньше в разметке. */
.hero__price {
    position: relative;
    z-index: 1;
    top: -8px;          /* приподнята относительно завитушки */
    display: inline-flex;
    align-items: center;
    padding: 19px 36px;
    border-radius: 99px;
    background: #FFCB2E;
    color: #1B1815;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.85rem, 1.15vw, 1.05rem);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .45);
    transition: background .2s ease, transform .2s ease;
}
.hero__price:hover { background: #F5BE18; transform: translateY(-2px); }

/* Рисованная завитушка от ценника к дивану */
.hero__squiggle {
    flex: none;
    width: clamp(56px, 6.5vw, 96px);
    height: auto;
    margin-right: -16px;  /* линия заходит под кнопку с запасом на скруглённый торец */
    /* Вращаем вокруг самой точки стыка (правый край, середина по высоте),
       а не вокруг центра — тогда линия не отрывается от кнопки. */
    transform-origin: 98% 50%;
    transform: rotate(-40deg) scaleY(-1);
    color: #1B1815;
    opacity: .45;
    pointer-events: none;
}

/* =============================================================
   ЭКРАН 03 — Виды диванов
   Сетка как в референсе: слева широкая карточка и две под ней,
   справа одна высокая во всю высоту блока.
   ============================================================= */

/* Общая шапка секции: заголовок слева, кнопка или стрелки справа.
   Используется на экранах 03, 09 и 12. */
.sec-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    margin-bottom: clamp(20px, 2.6vw, 40px);
}

.sec-title {
    margin: 0;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(1.35rem, 2.6vw, 2.3rem);
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #1B1815;
}

.sec-sub {
    margin: clamp(6px, .8vw, 12px) 0 0;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.85rem, 1.05vw, 1rem);
    color: #6E6862;
}

.cats { padding-block: 0 10px; }

/* Вторичная кнопка — для навигации, в отличие от заливной .btn-solid.
   Без контура: жёлтым на сайте говорит только главное действие. Рамка
   оставлена прозрачной, а не убрана, чтобы высота совпадала с .btn-solid —
   в cookie-баре кнопки стоят рядом и обязаны быть одного размера. */
.btn-outline {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 14px 30px;
    border: 1.5px solid transparent;
    border-radius: 99px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.7rem, .85vw, .8rem);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #1B1815;
    text-decoration: none;
    white-space: nowrap;
    transition: background .22s ease, transform .22s ease;
}
.btn-outline:hover { background: #FFCB2E; transform: translateY(-2px); }

/* Пропорция блока 2:1 — как в референсе (1040×520).
   Большая карточка слева, три остальные справа. */
.tiles {
    display: grid;
    grid-template-columns: 41fr 59fr;
    gap: clamp(12px, 1.6vw, 26px);
    aspect-ratio: 2 / 1;
}

.tiles__group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 242fr 253fr;   /* верхняя чуть ниже нижних, как в оригинале */
    gap: clamp(12px, 1.6vw, 26px);
}
.tiles__wide { grid-column: 1 / -1; }

.tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: clamp(10px, 1.1vw, 16px);
    text-decoration: none;
    isolation: isolate;
}

.tile img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.tile:hover img { transform: scale(1.045); }

/* Подложка под подписью: полупрозрачный градиент снизу вверх
   по всей ширине карточки — иначе подпись теряется на светлом фото */
.tile::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top,
        rgba(0, 0, 0, .62) 0%,
        rgba(0, 0, 0, .34) 22%,
        rgba(0, 0, 0, .10) 45%,
        rgba(0, 0, 0, 0)   68%);
}

.tile__label,
.tile__arrow {
    position: absolute;
    z-index: 2;              /* выше подложки, иначе градиент перекроет текст */
    bottom: clamp(14px, 1.7vw, 26px);
    color: #fff;
}

.tile__label {
    left: clamp(14px, 1.7vw, 28px);
    right: clamp(52px, 4.5vw, 76px);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.72rem, 1.1vw, 1.05rem);
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.tile__arrow {
    right: clamp(14px, 1.7vw, 28px);
    width: clamp(20px, 1.8vw, 26px);
    height: auto;
    transition: transform .25s ease;
}
.tile:hover .tile__arrow { transform: translateX(5px); }

@media (max-width: 860px) {
    .tiles { grid-template-columns: 1fr; aspect-ratio: auto; }
    .tiles__big   { aspect-ratio: 3 / 2; }
    .tiles__group { aspect-ratio: 3 / 2; }

    /* на телефоне кнопка лишняя: карточки ниже ведут туда же */
    .cats .sec-head .btn-outline { display: none; }
}

@media (max-width: 560px) {
    .tiles__big   { aspect-ratio: 4 / 3; }
    .tiles__group { aspect-ratio: 1 / 1; }
}

/* =============================================================
   ЭКРАН 04 — О компании
   Крупное утверждение капсом с градиентом по тексту, как в референсе.
   ============================================================= */

.about { padding-block: 60px 0; }

.about__text {
    max-width: min(1060px, 100%);
    margin: 0 auto;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(1.25rem, 2.7vw, 2.4rem);
    font-weight: 400;
    line-height: 1.24;
    letter-spacing: .005em;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;      /* строки примерно равной длины, как в оригинале */
    color: #4A3526;          /* запасной цвет, если градиент по тексту не поддержан */
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .about__text {
        background: linear-gradient(102deg,
            #E7D2A2 0%,
            #D9B25C 26%,
            #A87A34 56%,
            #6B4B2C 78%,
            #43301F 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }

    /* Ключевые слова темнее окружающего градиента */
    .about__text b {
        -webkit-text-fill-color: #3A2A1C;
        color: #3A2A1C;
    }
}

.about__text b { font-weight: 700; }

@media (max-width: 860px) {
    .about__text { font-size: 1rem; }
}


/* =============================================================
   ЭКРАН 05 — Состав диванов
   Диван по центру, карточки слева и справа, красная кривая за ними.
   ============================================================= */

.spec {
    position: relative;
    padding-block: clamp(50px, 6.5vw, 110px) 0;
    overflow: hidden;
}

/* Линия — отдельный файл, тянется на всю ширину секции позади содержимого */
.spec__curve {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 0;
    width: 100%;
    height: auto;
    transform: translateY(-50%);
    pointer-events: none;
}

.spec .container { position: relative; z-index: 1; }

.spec__grid {
    display: grid;
    grid-template-columns: 1fr 1.45fr 1fr;
    gap: clamp(14px, 2vw, 34px);
    align-items: center;
}

.spec__col {
    display: grid;
    align-content: center;
    gap: clamp(10px, 1.3vw, 18px);
}

.spec__card {
    display: flex;
    align-items: flex-start;
    gap: clamp(10px, 1vw, 14px);
    padding: clamp(12px, 1.2vw, 18px) clamp(14px, 1.3vw, 20px);
    background: #fff;
    border-radius: clamp(10px, 1vw, 14px);
    box-shadow: 0 18px 40px -26px rgba(27, 24, 21, .45),
                0 0 0 1px rgba(27, 24, 21, .05);
}

.spec__num {
    flex: none;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.66rem, .8vw, .75rem);
    font-weight: 700;
    letter-spacing: .06em;
    color: #D9503C;
    line-height: 1.5;
}

.spec__card p {
    margin: 0;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.76rem, .92vw, .875rem);
    font-weight: 500;
    line-height: 1.45;
    color: #1B1815;
}

/* Диван крупнее своей колонки и выходит под карточки — как товар в референсе.
   Отрицательные поля равны с обеих сторон, поэтому он остаётся по центру. */
.spec__sofa {
    position: relative;
    z-index: 0;
}
.spec__sofa img {
    display: block;
    width: 180%;
    max-width: none;
    height: auto;
    margin-inline: -40%;
}

.spec__col {
    position: relative;
    z-index: 1;   /* карточки поверх дивана */
}

/* два класса, а не один: общий .note объявлен ниже по файлу
   и с одинаковой силой перебивал бы этот отступ */
.note.spec__note { margin-top: clamp(24px, 3vw, 48px); }

@media (max-width: 980px) {
    .spec__grid { grid-template-columns: 1fr 1fr; align-items: start; }
    .spec__col  { align-content: start; }   /* колонки от верха, иначе правая висит по центру */
    .spec__sofa { grid-column: 1 / -1; order: -1; }   /* диван наверх, карточки под ним */
    .spec__sofa img { width: 100%; margin-inline: 0; } /* тут перекрывать нечего */
    .spec__curve { top: 30%; }
}

@media (max-width: 860px) {
    /* на телефоне подпись шла впритык к последней карточке */
    .note.spec__note { margin-top: 54px; }
}

@media (max-width: 560px) {
    .spec__grid { grid-template-columns: 1fr; }
}


/* =============================================================
   ЭКРАН 06 — Цифры
   Без рамок и разделителей: блоки держит только сетка и воздух.
   ============================================================= */

.stats { padding-block: clamp(34px, 4.5vw, 72px); }

.stats__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(26px, 3.4vw, 56px);
}

.stats__item b {
    display: block;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(1.6rem, 2.7vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: #C08A22;      /* запасной цвет, если градиент по тексту не поддержан */
}

/* Мягкий жёлто-янтарный переход — тот же приём, что в блоке о компании,
   но диапазон уже, поэтому граница между оттенками не читается. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .stats__item b {
        background: linear-gradient(135deg,
            #F6C63C 0%,
            #E6AB2E 42%,
            #C98A22 74%,
            #A9711E 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

.stats__item span {
    display: block;
    margin-top: clamp(7px, .9vw, 13px);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.76rem, .92vw, .875rem);
    font-weight: 400;
    line-height: 1.35;
    color: #6E6862;
}

@media (max-width: 780px) {
    .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* =============================================================
   ЭКРАН 07 — Диван · цвет
   Фото на всю ширину окна, без контейнера и полей.
   ============================================================= */

.banner {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    min-height: clamp(340px, 42vw, 660px);
    overflow: hidden;
    isolation: isolate;
}

/* <picture> или <img> — оба работают как подложка на всю секцию */
.banner__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.banner__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Затемнение снизу — заголовок белый, а низ фото светлый */
.banner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top,
        rgba(0, 0, 0, .72) 0%,
        rgba(0, 0, 0, .50) 18%,
        rgba(0, 0, 0, .26) 38%,
        rgba(0, 0, 0, 0)   68%);
}

.banner__body {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: clamp(28px, 4vw, 70px) clamp(16px, 3vw, 56px);
    padding-left: 50%;      /* заголовок начинается с середины экрана */
}

.banner__title {
    margin: 0;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(1.25rem, 2.9vw, 2.7rem);
    font-weight: 500;
    line-height: 1.16;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #fff;
}

@media (max-width: 860px) {
    /* на мобильной отступ слева обычный, без сдвига на половину */
    .banner__body { padding-left: clamp(16px, 3vw, 56px); }
    .banner__title { font-size: 1.1rem; }
}


/* =============================================================
   ЭКРАН 07 — Диван · цвет 2
   Без заголовка, стандартная ширина контейнера.
   ============================================================= */

.colors { padding-block: clamp(48px, 6vw, 96px) 30px; }

.colors__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.7vw, 28px) clamp(12px, 1.6vw, 26px);
}

.color-card { margin: 0; }

.color-card__ph {
    display: block;
    overflow: hidden;
    border-radius: clamp(10px, 1.1vw, 16px);
}

.color-card img {
    display: block;
    width: 100%;
    height: auto;          /* иначе высоту задаёт атрибут height и aspect-ratio не работает */
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.color-card:hover img { transform: scale(1.045); }

.color-card figcaption {
    margin-top: clamp(8px, .9vw, 14px);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.7rem, .88vw, .82rem);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #1B1815;
}

/* Строка под карточками: текст слева, кнопка справа */
.colors__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px 32px;
    margin-top: clamp(28px, 3.4vw, 54px);
}

/* Подпись из двух строк: главное сверху, уточнение снизу.
   Общий компонент — используется на экранах 05 и 07. */
.note {
    margin: 0;
    font-family: 'Montserrat', system-ui, sans-serif;
}
.note strong,
.note span { display: block; }

.note strong {
    font-size: clamp(1rem, 1.5vw, 1.35rem);
    font-weight: 600;
    color: #1B1815;
}
.note span {
    margin-top: 7px;
    font-size: clamp(.85rem, 1.05vw, 1rem);
    font-weight: 400;
    color: #6E6862;
}

/* Без кнопки рядом — выравниваем по центру */
.note--center {
    max-width: 900px;
    margin-inline: auto;
    text-align: center;
    text-wrap: balance;
}

/* Заливная жёлтая кнопка — для целевых действий, в отличие от контурной */
.btn-solid {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 17px 34px;
    /* Рамку сбрасываем явно: класс висит и на <a>, и на <button>, а браузер
       кнопке рисует свою тёмную обводку. Прозрачная, а не нулевая, — чтобы
       высота совпадала с .btn-outline: в cookie-баре они стоят рядом. */
    border: 1.5px solid transparent;
    border-radius: 99px;
    background: #FFCB2E;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.72rem, .88vw, .83rem);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #1B1815;
    text-decoration: none;
    white-space: nowrap;
    transition: background .22s ease, transform .22s ease;
}
.btn-solid:hover { background: #F5BE18; transform: translateY(-2px); }

@media (max-width: 860px) {
    .colors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* =============================================================
   ЭКРАН 09 — Галерея работ
   Лента прокручивается вправо: заголовок с подписью слева,
   круглые стрелки справа, следующая карточка выглядывает.
   ============================================================= */

.gal {
    position: relative;
    padding-block: clamp(48px, 6vw, 96px);
    overflow: hidden;
}

/* Своя линия, отличная от той, что в составе диванов.
   Прозрачность задана здесь, а не в файле — так её проще менять. */
.gal__curve {
    position: absolute;
    left: 0;
    top: 62%;
    z-index: 0;
    width: 100%;
    height: auto;
    transform: translateY(-50%);
    opacity: .1;
    pointer-events: none;
}

.gal .container { position: relative; z-index: 1; }

.gal__nav { display: flex; gap: 12px; }

.gal__arrow {
    display: grid;
    place-items: center;
    width: clamp(44px, 3.9vw, 56px);
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid #E7E0D6;
    border-radius: 50%;
    background: #fff;
    color: #1B1815;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}
.gal__arrow svg { width: 42%; height: auto; }
.gal__arrow:hover { border-color: #1B1815; }

.gal__arrow--next {
    background: #FFCB2E;
    border-color: #FFCB2E;
}
.gal__arrow--next:hover { background: #F5BE18; border-color: #F5BE18; }

.gal__arrow:disabled {
    opacity: .35;
    cursor: default;
    border-color: #E7E0D6;
    background: #fff;
}

.gal__track {
    display: flex;
    gap: clamp(12px, 1.6vw, 24px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;          /* полосу прокрутки прячем, есть стрелки */
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}
.gal__track::-webkit-scrollbar { display: none; }

.gal__card {
    flex: 0 0 clamp(220px, 26%, 330px);
    min-width: 0;
    display: block;
    overflow: hidden;
    border-radius: clamp(10px, 1.1vw, 16px);
    scroll-snap-align: start;
    cursor: zoom-in;
}

.gal__card img {
    display: block;
    width: 100%;
    height: auto;              /* иначе высоту задаёт атрибут height */
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.gal__card:hover img { transform: scale(1.05); }


/* =============================================================
   ЭКРАН 10 — Прайс-лист
   Фото во всю ширину, текст поверх слева — на снимке там пустая стена.
   ============================================================= */

.price {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(360px, 38vw, 600px);
    overflow: hidden;
}

/* Обёртка <picture>: браузер сам выбирает вертикальный файл на узком экране */
.price__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
}
.price__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Высветление слева: гарантирует контраст тёмного текста
   на любой ширине, где кроп сдвигает диван влево.
   Сходит на нет у правого края, а не к середине. */
.price::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right,
        rgba(255, 255, 255, .92) 0%,
        rgba(255, 255, 255, .74) 30%,
        rgba(255, 255, 255, .46) 58%,
        rgba(255, 255, 255, .20) 82%,
        rgba(255, 255, 255, 0)   100%);
}

.price__inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

.price__body { max-width: min(48%, 540px); }

.price__text {
    margin: clamp(14px, 1.6vw, 22px) 0 clamp(20px, 2.4vw, 32px);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.85rem, 1.05vw, 1rem);
    line-height: 1.6;
    color: #4A443E;
}

.price__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 860px) {
    /* текст и кнопки прижаты к верху, а не по центру высоты */
    .price {
        align-items: flex-start;
        padding-top: clamp(48px, 13vw, 74px);
        /* высота под пропорцию кадрированного фона 768×1433,
           с потолком, чтобы на планшете экран не растянулся */
        min-height: min(calc(100vw * 1433 / 768), 800px);
    }
    /* кадр вертикальный: держим низ, там диван и пол */
    .price__bg img { object-position: center bottom; }
    .price__body { max-width: none; }

    /* на узком экране текст лежит на всей ширине, поэтому светлим сверху,
       и так же сводим к нулю у нижнего края */
    .price::after {
        background: linear-gradient(to bottom,
            rgba(255, 255, 255, .94) 0%,
            rgba(255, 255, 255, .74) 42%,
            rgba(255, 255, 255, .38) 72%,
            rgba(255, 255, 255, 0)   100%);
    }
}


/* =============================================================
   ЭКРАН 11 — Доставка
   Слева заголовок с описанием и кнопкой, справа список в две колонки.
   ============================================================= */

.delivery { padding-block: clamp(48px, 6vw, 96px); }

.delivery__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: clamp(26px, 4vw, 72px);
    align-items: start;
}

.delivery__text {
    max-width: 42ch;
    margin: clamp(14px, 1.6vw, 22px) 0 clamp(20px, 2.4vw, 32px);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.85rem, 1.05vw, 1rem);
    line-height: 1.6;
    color: #6E6862;
}

/* Многоколоночный текст, а не сетка: порядок пунктов в разметке
   остаётся обычным, а раскладывает их браузер сам. */
.delivery__list {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: clamp(24px, 3.4vw, 60px);
}

.delivery__list li {
    position: relative;
    break-inside: avoid;
    margin-bottom: clamp(14px, 1.7vw, 24px);
    padding-left: 22px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.85rem, 1.05vw, 1rem);
    line-height: 1.5;
    color: #1B1815;
}
.delivery__list li:last-child { margin-bottom: 0; }

.delivery__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .5em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #FFCB2E;
}

@media (max-width: 860px) {
    .delivery__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .delivery__list { columns: 1; }
}


/* =============================================================
   ЭКРАН 12 — Шоурум
   Карточки того же типа, что в составе диванов: белая подложка,
   мягкая тень, иконка слева от текста.
   ============================================================= */

.shops { padding-block: 30px 50px; }

.shops__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 22px);
}

.shop {
    display: flex;
    align-items: flex-start;
    gap: clamp(10px, 1vw, 14px);
    padding: clamp(16px, 1.6vw, 24px) clamp(16px, 1.5vw, 22px);
    background: #fff;
    border-radius: clamp(10px, 1vw, 14px);
    box-shadow: 0 18px 40px -26px rgba(27, 24, 21, .45),
                0 0 0 1px rgba(27, 24, 21, .05);
    font-family: 'Montserrat', system-ui, sans-serif;
}

.shop__pin {
    flex: none;
    width: clamp(18px, 1.5vw, 21px);
    height: auto;
    margin-top: 1px;
    color: #D9503C;
}

/* Колонка текста — чтобы часы прижимались к низу карточки */
.shop__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 100%;
}

.shop__city {
    font-size: clamp(.88rem, 1.05vw, 1rem);
    font-weight: 700;
    color: #1B1815;
}

.shop__addr {
    margin-top: clamp(6px, .7vw, 10px);
    font-size: clamp(.8rem, .95vw, .9rem);
    line-height: 1.4;
    color: #6E6862;
}

.shop__phone {
    margin-top: clamp(5px, .6vw, 9px);
    font-size: clamp(.85rem, 1vw, .95rem);
    font-weight: 600;
    color: #1B1815;
    text-decoration: none;
    border-bottom: 2px solid #FFCB2E;
    align-self: flex-start;
    transition: color .2s ease;
}
.shop__phone:hover { color: #A9711E; }

/* auto-отступ прижимает часы к низу, поэтому во всём ряду
   они на одной линии, даже если у точки нет телефона */
.shop__hours {
    margin-top: auto;
    padding-top: clamp(14px, 1.8vw, 26px);
    font-size: clamp(.75rem, .88vw, .82rem);
    color: #857D74;
}

@media (max-width: 860px) {
    .shops__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .shops__grid { grid-template-columns: 1fr; }
}


/* =============================================================
   ДАЛЛАС · Первый экран
   Фото интерьера на весь экран, текст слева, карточки внизу.
   ============================================================= */

.dhero {
    position: relative;
    display: flex;
    min-height: clamp(600px, 88vh, 900px);
    padding-block: clamp(34px, 4vw, 64px);
    overflow: hidden;
}

/* Обёртка <picture>: браузер сам выбирает вертикальный файл на узком экране */
.dhero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
}
.dhero__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Подстраховка контраста: на кадре слева светлая стена,
   но при узком экране кроп сдвигает диван влево */
.dhero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right,
        rgba(255, 255, 255, .88) 0%,
        rgba(255, 255, 255, .66) 32%,
        rgba(255, 255, 255, .34) 58%,
        rgba(255, 255, 255, .12) 82%,
        rgba(255, 255, 255, 0)   100%);
}

/* Верхняя строка тянется, поэтому карточки прижаты к низу экрана */
.dhero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: clamp(26px, 3.4vw, 52px);
    width: 100%;
}

.dhero__body {
    align-self: center;
    max-width: min(46%, 520px);
}

.dhero__title {
    margin: 0;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(1.9rem, 4vw, 3.4rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: #1B1815;
}

.dhero__sub {
    margin: clamp(14px, 1.6vw, 22px) 0 clamp(22px, 2.6vw, 34px);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.88rem, 1.1vw, 1.05rem);
    line-height: 1.55;
    color: #4A443E;
}

/* Карточки не растягиваются на всю ширину: фиксированный размер
   и прижаты влево. Остаётся сеткой, чтобы мобильное правило работало. */
.dhero__cards {
    display: grid;
    grid-template-columns: repeat(4, clamp(110px, 19%, 220px));
    justify-content: start;
    gap: clamp(10px, 1.3vw, 20px);
}

.dcard {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: clamp(10px, 1vw, 14px);
    background: #EFEDEA;
    cursor: zoom-in;
    overflow: hidden;
}

/* У снимков прозрачный фон, поэтому диван ложится
   прямо на серую подложку — подмешивать ничего не нужно */
.dcard img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.dcard:hover img { transform: scale(1.05); }

@media (max-width: 860px) {
    /* высота под пропорцию кадрированного фона 768×1638,
       с потолком, чтобы на планшете экран не растянулся */
    .dhero { min-height: min(calc(100vw * 1638 / 768), 900px); }
    /* текст и кнопка прижаты к верху, а не по центру свободной области */
    .dhero__body {
        max-width: none;
        align-self: start;
        padding-top: clamp(16px, 5vw, 34px);
    }
    .dhero__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .dhero::after {
        background: linear-gradient(to bottom,
            rgba(255, 255, 255, .92) 0%,
            rgba(255, 255, 255, .74) 44%,
            rgba(255, 255, 255, .42) 72%,
            rgba(255, 255, 255, .1)  100%);
    }
}


/* Первый экран без интерьерного кадра — светлая подложка */
.dhero--plain {
    background: linear-gradient(160deg, #F7F5F2 0%, #EFEDE9 100%);
    min-height: auto;
}
.dhero--plain::after { content: none; }


/* =============================================================
   Карточка модели в списках (категория, «Смотрите также»)
   ============================================================= */

.cat { padding-block: clamp(40px, 5vw, 80px); }

/* =============================================================
   Каталог: широкие карточки категорий и карточки моделей
   ============================================================= */

.hub {
    display: grid;
    gap: clamp(14px, 1.8vw, 24px);
    padding-block: clamp(10px, 1.4vw, 20px) clamp(40px, 5vw, 80px);
}
.hub .container { display: grid; gap: clamp(14px, 1.8vw, 24px); }

.hubcard {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(220px, 24vw, 320px);
    padding: clamp(24px, 3vw, 48px);
    border-radius: clamp(12px, 1.4vw, 20px);
    overflow: hidden;
    text-decoration: none;
    isolation: isolate;
}

.hubcard__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.hubcard:hover .hubcard__bg { transform: scale(1.04); }

/* Затемнение слева: текст ложится на снимок и остаётся читаемым */
.hubcard::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(95deg,
        rgba(20, 17, 15, .84) 0%,
        rgba(20, 17, 15, .66) 34%,
        rgba(20, 17, 15, .28) 62%,
        rgba(20, 17, 15, .05) 100%);
}

.hubcard__body {
    position: relative;
    z-index: 2;
    max-width: min(52%, 560px);
    font-family: 'Montserrat', system-ui, sans-serif;
}
.hubcard__body h2 {
    margin: 0 0 10px;
    font-size: clamp(1.3rem, 2.4vw, 2.1rem);
    font-weight: 600;
    line-height: 1.15;
    color: #fff;
}
.hubcard__body p {
    margin: 0 0 clamp(16px, 2vw, 24px);
    font-size: clamp(.82rem, 1vw, .95rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, .78);
}

.hubcard__btn {
    display: inline-flex;
    align-items: center;
    padding: 13px 28px;
    border-radius: 99px;
    background: #FFCB2E;
    font-size: clamp(.72rem, .85vw, .8rem);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #1B1815;
    transition: background .22s ease;
}
.hubcard:hover .hubcard__btn { background: #F5BE18; }

.hubcard__count {
    position: absolute;
    top: clamp(16px, 2vw, 26px);
    right: clamp(16px, 2vw, 26px);
    z-index: 2;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 99px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: .72rem;
    font-weight: 600;
    color: #fff;
}

/* Карточки моделей — две в ряд */
.pcards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 24px);
}

.pcard {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 4 / 3;
    padding: clamp(18px, 2.2vw, 30px);
    border-radius: clamp(12px, 1.2vw, 18px);
    overflow: hidden;
    text-decoration: none;
    isolation: isolate;
}

.pcard__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.pcard:hover .pcard__bg { transform: scale(1.05); }

.pcard::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top,
        rgba(20, 17, 15, .88) 0%,
        rgba(20, 17, 15, .62) 30%,
        rgba(20, 17, 15, .18) 58%,
        rgba(20, 17, 15, 0)   82%);
}

.pcard__body {
    position: relative;
    z-index: 2;
    width: 100%;
    font-family: 'Montserrat', system-ui, sans-serif;
}

.pcard__name {
    margin: 0 0 clamp(10px, 1.2vw, 14px);
    font-size: clamp(1rem, 1.5vw, 1.35rem);
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
}

.pcard__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0 0 clamp(14px, 1.8vw, 20px);
    padding: 0;
    list-style: none;
}
.pcard__specs li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: clamp(.74rem, .88vw, .82rem);
    color: rgba(255, 255, 255, .82);
}
.pcard__specs svg { flex: none; width: 17px; height: 17px; color: #FFCB2E; }

.pcard__btn {
    display: inline-flex;
    align-items: center;
    padding: 11px 24px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 99px;
    font-size: clamp(.7rem, .82vw, .78rem);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    transition: background .22s ease, border-color .22s ease, color .22s ease;
}
.pcard:hover .pcard__btn {
    background: #FFCB2E;
    border-color: #FFCB2E;
    color: #1B1815;
}

@media (max-width: 860px) {
    .hubcard { min-height: clamp(240px, 46vw, 320px); }
    .hubcard__body { max-width: none; }
    .hubcard::after {
        background: linear-gradient(to top,
            rgba(20, 17, 15, .9) 0%,
            rgba(20, 17, 15, .7) 42%,
            rgba(20, 17, 15, .35) 72%,
            rgba(20, 17, 15, .12) 100%);
    }
    .hubcard { align-items: flex-end; }
}

@media (max-width: 640px) {
    .pcards { grid-template-columns: minmax(0, 1fr); }
}

.cat__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 28px);
}

.relcard {
    display: block;
    text-decoration: none;
    color: inherit;
}

.relcard__ph {
    display: grid;
    place-items: center;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: clamp(10px, 1vw, 14px);
    background: #EFEDEA;
}

.relcard__ph img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.relcard:hover .relcard__ph img { transform: scale(1.05); }

.relcard__name {
    display: block;
    margin-top: clamp(8px, .9vw, 14px);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.76rem, .92vw, .875rem);
    font-weight: 600;
    line-height: 1.35;
    color: #1B1815;
}

/* В ленте «Смотрите также» карточка — элемент прокрутки */
.gal__track .relcard {
    flex: 0 0 clamp(200px, 24%, 300px);
    min-width: 0;
    scroll-snap-align: start;
}

@media (max-width: 980px) { .cat__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .cat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* =============================================================
   ДАЛЛАС · Характеристики
   ============================================================= */

.specs {
    padding-block: clamp(40px, 5vw, 80px);
    background: #fff;
}

.specs__title { margin-bottom: clamp(24px, 3vw, 44px); }

.specs__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 72px);
}

.specs__cap {
    margin: 0 0 clamp(12px, 1.3vw, 18px);
    padding-bottom: clamp(10px, 1.1vw, 15px);
    border-bottom: 2px solid #FFCB2E;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.68rem, .8vw, .76rem);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #1B1815;
}

.specs__list { margin: 0; }

/* Название слева, значение справа — между ними тянущийся зазор */
.specs__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.8rem, .95vw, .9rem);
}
.specs__row + .specs__row { margin-top: clamp(9px, 1vw, 14px); }

.specs__row dt {
    color: #6E6862;
}

.specs__row dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
    color: #1B1815;
}

@media (max-width: 860px) {
    .specs__grid { grid-template-columns: 1fr; gap: clamp(22px, 3vw, 34px); }
}


/* =============================================================
   Вторичные страницы: крошки, шапка страницы, текстовые блоки
   ============================================================= */

.crumbs {
    padding-block: clamp(14px, 1.6vw, 22px);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.72rem, .85vw, .8rem);
}
.crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #857D74;
}
.crumbs li + li::before { content: '/'; margin-right: 10px; color: #C9C2B8; }
.crumbs a { color: #857D74; text-decoration: none; transition: color .2s ease; }
.crumbs a:hover { color: #1B1815; }

/* Шапка страницы: H1 и лид */
.phead { padding-block: clamp(8px, 1vw, 16px) clamp(28px, 3.4vw, 52px); }

.phead h1 {
    margin: 0;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(1.6rem, 3.4vw, 3rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: #1B1815;
}

.phead__lead {
    max-width: 62ch;
    margin: clamp(12px, 1.6vw, 20px) 0 0;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.9rem, 1.15vw, 1.1rem);
    line-height: 1.6;
    color: #6E6862;
}

/* Текстовый блок статьи */
.prose { padding-block: clamp(26px, 3.4vw, 56px); }
.prose + .prose { padding-top: 0; }

.prose h2 {
    margin: 0 0 clamp(14px, 1.8vw, 24px);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(1.15rem, 2vw, 1.7rem);
    font-weight: 600;
    line-height: 1.2;
    color: #1B1815;
}

.prose p {
    max-width: 68ch;
    margin: 0 0 clamp(10px, 1.2vw, 16px);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.88rem, 1.05vw, 1rem);
    line-height: 1.65;
    color: #4A443E;
}
.prose p:last-child { margin-bottom: 0; }
.prose a { color: #1B1815; text-decoration: none; border-bottom: 2px solid #FFCB2E; }

/* Сетка карточек-пунктов */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(12px, 1.6vw, 22px);
}

.cards__item {
    padding: clamp(18px, 2vw, 28px);
    border-radius: clamp(10px, 1vw, 14px);
    background: #fff;
    box-shadow: 0 18px 40px -26px rgba(27, 24, 21, .45),
                0 0 0 1px rgba(27, 24, 21, .05);
    font-family: 'Montserrat', system-ui, sans-serif;
}
.cards__item h3 {
    margin: 0 0 8px;
    font-size: clamp(.92rem, 1.1vw, 1.05rem);
    font-weight: 600;
    color: #1B1815;
}
.cards__item p {
    margin: 0;
    font-size: clamp(.8rem, .95vw, .9rem);
    line-height: 1.5;
    color: #6E6862;
}
.cards__item b {
    display: block;
    margin-bottom: 4px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.68rem, .8vw, .74rem);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #D9503C;
}

/* Нумерованные шаги */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: clamp(12px, 1.6vw, 22px);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}
.steps li {
    padding-top: clamp(12px, 1.4vw, 18px);
    border-top: 2px solid #FFCB2E;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.85rem, 1vw, .95rem);
    line-height: 1.5;
    color: #4A443E;
}
.steps li::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    display: block;
    margin-bottom: 8px;
    font-size: clamp(.7rem, .82vw, .78rem);
    font-weight: 700;
    letter-spacing: .1em;
    color: #857D74;
}

/* Вопрос-ответ */
.faq { display: grid; gap: clamp(10px, 1.2vw, 16px); }
.faq__item {
    padding: clamp(16px, 1.8vw, 24px) clamp(16px, 1.8vw, 26px);
    border-radius: clamp(10px, 1vw, 14px);
    background: #F5F3F0;
    font-family: 'Montserrat', system-ui, sans-serif;
}
.faq__item h3 {
    margin: 0 0 8px;
    font-size: clamp(.9rem, 1.05vw, 1rem);
    font-weight: 600;
    color: #1B1815;
}
.faq__item p {
    max-width: 74ch;
    margin: 0;
    font-size: clamp(.82rem, .95vw, .9rem);
    line-height: 1.6;
    color: #4A443E;
}

/* =============================================================
   Заглушка «Фото будет позже» — там, где снимков ещё нет
   ============================================================= */

.noph {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 12px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.7rem, .85vw, .8rem);
    font-weight: 500;
    letter-spacing: .04em;
    text-align: center;
    color: #A79F95;
    background: repeating-linear-gradient(135deg,
        #F2F0ED 0 10px, #EDEAE5 10px 20px);
}

/* Внутри карточки товара заглушка занимает весь фон */
.noph--cover {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Отдельная плитка на месте ряда снимков */
.noph--card {
    aspect-ratio: 4 / 3;
    height: auto;
    border-radius: clamp(10px, 1vw, 14px);
}

/* Карточка без фото: тёмный градиент не нужен, текст делаем тёмным */
.pcard--noph::after { content: none; }
.pcard--noph .pcard__name { color: #1B1815; }
.pcard--noph .pcard__specs li { color: #6E6862; }
.pcard--noph .pcard__btn { border-color: #D8D3CB; color: #1B1815; }
.pcard--noph:hover .pcard__btn { background: #FFCB2E; border-color: #FFCB2E; }


/* Метки-якоря со старого сайта: не видны, но ловят переход по ссылке */
.anchor {
    display: block;
    height: 0;
    scroll-margin-top: 100px;
}

/* Сетка галереи работ */
.ggrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: clamp(12px, 1.4vw, 20px);
}
.ggrid__item {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: clamp(10px, 1vw, 14px);
    background: #EFEDEA;
    cursor: zoom-in;
}
.ggrid__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.ggrid__item:hover img { transform: scale(1.05); }

/* Галочка на странице «Спасибо» */
.thanks__mark {
    display: grid;
    place-items: center;
    width: clamp(52px, 5vw, 68px);
    aspect-ratio: 1;
    margin: 0 0 clamp(16px, 2vw, 24px);
    border-radius: 50%;
    background: #FFCB2E;
    color: #1B1815;
}
.thanks__mark svg { width: 50%; height: auto; }

/* Баннер согласия на cookie */
.cbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    padding: clamp(10px, 1.4vw, 18px);
    font-family: 'Montserrat', system-ui, sans-serif;
}
.cbar[hidden] { display: none; }

.cbar__box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 28px;
    max-width: 1200px;
    margin-inline: auto;
    padding: clamp(16px, 1.8vw, 24px) clamp(18px, 2vw, 28px);
    border-radius: clamp(12px, 1.2vw, 18px);
    background: #fff;
    box-shadow: 0 24px 60px -28px rgba(27, 24, 21, .55),
                0 0 0 1px rgba(27, 24, 21, .07);
}

.cbar__text strong {
    display: block;
    margin-bottom: 5px;
    font-size: clamp(.88rem, 1.05vw, 1rem);
    font-weight: 600;
    color: #1B1815;
}
.cbar__text p {
    max-width: 74ch;
    margin: 0;
    font-size: clamp(.76rem, .9vw, .84rem);
    line-height: 1.5;
    color: #6E6862;
}
.cbar__text a { color: #1B1815; text-decoration: none; border-bottom: 1px solid #FFCB2E; }

/* Кнопки равнозначны по размеру: отказаться должно быть так же просто.
   Поэтому «Отклонить» здесь — единственная вторичная кнопка на сайте, которой
   контур оставлен: без него на белой плашке она читалась бы как подпись, а не
   как равный вариант выбора. Контур нейтральный, жёлтый остаётся у «Принять». */
.cbar__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cbar__btn { min-width: 132px; justify-content: center; }
.cbar__btn.btn-outline { border-color: #D8D3CB; }

@media (max-width: 860px) {
    .cbar { bottom: 60px; }   /* над нижней панелью действий */
    .cbar__actions { width: 100%; }
    .cbar__btn { flex: 1; }
}

/* Код ошибки на 404 */
.e404__code {
    margin: 0 0 6px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(3rem, 9vw, 7rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: #FFCB2E;
}

/* Список с галочками */
.ticks { margin: 0; padding: 0; list-style: none; }
.ticks li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 9px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.8rem, .95vw, .9rem);
    line-height: 1.45;
    color: #4A443E;
}
.ticks li:last-child { margin-bottom: 0; }
.ticks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .42em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FFCB2E;
}

/* Полоса снимков с подписями */
.shots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: clamp(12px, 1.6vw, 22px);
    margin-top: clamp(14px, 1.8vw, 22px);
}
.shots__item { margin: 0; }
.shots__item a {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: clamp(10px, 1vw, 14px);
    background: #EFEDEA;
    cursor: zoom-in;
}
.shots__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.shots__item a:hover img { transform: scale(1.05); }
.shots__item figcaption {
    margin-top: 9px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.74rem, .88vw, .82rem);
    color: #6E6862;
}

/* Полоса целевого действия: текст и кнопка слева, диван справа */
.cta { padding-block: clamp(30px, 4vw, 60px); }

.cta__box {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(20px, 3vw, 46px);
    padding: clamp(24px, 3vw, 48px);
    border-radius: clamp(12px, 1.4vw, 22px);
    background: linear-gradient(104deg, #FBF9F6 0%, #F5F1EA 46%, #EFE8DC 100%);
    overflow: hidden;
}

.cta__body h2 {
    margin: 0 0 10px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(1.15rem, 1.9vw, 1.6rem);
    font-weight: 600;
    line-height: 1.2;
    color: #1B1815;
}
.cta__body p {
    max-width: 46ch;
    margin: 0 0 clamp(16px, 2vw, 24px);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.84rem, .98vw, .93rem);
    line-height: 1.55;
    color: #6E6862;
}

.cta__photo {
    /* диван свисает за нижний край, чтобы блок не был высоким */
    margin-block: clamp(-18px, -1.6vw, 0px) clamp(-40px, -4vw, -18px);
}
.cta__photo img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 780px) {
    .cta__box { grid-template-columns: minmax(0, 1fr); }
    .cta__photo { margin: 0 0 -28px; }
}

/* Ссылки на соседние страницы */
.nextlinks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding-block: 0 clamp(30px, 4vw, 60px);
}
.nextlinks a {
    padding: 11px 20px;
    border: 1px solid #E7E0D6;
    border-radius: 99px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: clamp(.76rem, .9vw, .85rem);
    font-weight: 600;
    color: #1B1815;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease;
}
.nextlinks a:hover { border-color: #FFCB2E; background: #FFCB2E; }


/* =============================================================
   Боковое меню: иконка, подпись выезжает при наведении
   ============================================================= */

.aside {
    position: fixed;
    right: 0;
    top: 50%;
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transform: translateY(-50%);
    font-family: 'Montserrat', system-ui, sans-serif;
}

.aside__item {
    display: flex;
    align-items: center;
    justify-content: flex-end;   /* растём влево, иконка остаётся у края */
    gap: 0;
    height: 52px;
    padding: 0;
    border: 1px solid #E7E0D6;
    border-right: 0;
    border-radius: 12px 0 0 12px;
    background: #fff;
    color: #1B1815;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 14px 30px -20px rgba(27, 24, 21, .5);
    transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.aside__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
}
.aside__icon svg { width: 22px; height: 22px; }

/* Подпись схлопнута по ширине и стоит ПЕРЕД иконкой:
   разворачивается влево, иконка при этом остаётся у края экрана. */
.aside__label {
    max-width: 0;
    white-space: nowrap;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    opacity: 0;
    transition: max-width .32s cubic-bezier(.22, .61, .36, 1), opacity .22s ease, padding .32s ease;
}

/* Подписи разворачиваются у ВСЕЙ панели сразу, а не у одной плитки:
   иначе надпись видна только там, где курсор. */
.aside:hover .aside__label,
.aside:focus-within .aside__label {
    max-width: 200px;
    padding-left: 18px;
    opacity: 1;
}

/* заливкой подсвечивается только та плитка, на которой курсор */
.aside__item:hover,
.aside__item:focus-visible {
    background: #FFCB2E;
    border-color: #FFCB2E;
    box-shadow: 0 18px 34px -18px rgba(27, 24, 21, .55);
}

/* целевой пункт выделен заливкой сразу */
.aside__item--accent { background: #FFCB2E; border-color: #FFCB2E; }
.aside__item--accent:hover { background: #F5BE18; border-color: #F5BE18; }

@media (max-width: 860px) {
    /* на телефоне лента уезжает вниз и становится горизонтальной */
    .aside {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: row;
        gap: 0;
        transform: none;
        border-top: 1px solid #E7E0D6;
        background: #fff;
    }
    .aside__item {
        flex: 1;
        /* в разметке подпись идёт первой — на телефоне переворачиваем,
           чтобы иконка была сверху */
        flex-direction: column-reverse;
        justify-content: center;
        gap: 2px;
        height: 60px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .aside__icon { width: auto; height: auto; }
    .aside__icon svg { width: 20px; height: 20px; }
    .aside__label {
        max-width: none;
        opacity: 1;
        padding: 0;
        font-size: .62rem;
        letter-spacing: 0;
    }
    .aside__item:hover .aside__label { padding-left: 0; }
    /* чтобы панель не перекрывала футер */
    .foot { padding-bottom: 76px; }
}


/* =============================================================
   Попап заявки — одна форма на весь сайт
   ============================================================= */

.pop {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: grid;
    place-items: center;
    padding: clamp(12px, 3vw, 40px);
    background: rgba(20, 17, 15, .62);
    font-family: 'Montserrat', system-ui, sans-serif;
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s;
}
.pop[hidden] { display: none; }
.pop.is-open { opacity: 1; visibility: visible; }

.pop__box {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
    width: min(880px, 100%);
    max-height: 100%;
    overflow: hidden;
    border-radius: clamp(12px, 1.4vw, 20px);
    background: #fff;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6);
    transform: translateY(14px) scale(.98);
    transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}
.pop.is-open .pop__box { transform: none; }

.pop__photo { position: relative; background: #EFEDEA; }
.pop__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pop__side {
    padding: clamp(24px, 3vw, 44px);
    overflow-y: auto;
}

.pop__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid #E7E0D6;
    border-radius: 50%;
    background: #fff;
    color: #1B1815;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.pop__close svg { width: 42%; height: auto; }
.pop__close:hover { background: #FFCB2E; transform: rotate(90deg); }

.pop__title {
    margin: 0;
    font-size: clamp(1.15rem, 1.9vw, 1.6rem);
    font-weight: 600;
    line-height: 1.2;
    color: #1B1815;
}

.pop__sub {
    margin: clamp(8px, 1vw, 14px) 0 clamp(18px, 2.2vw, 28px);
    font-size: clamp(.8rem, .95vw, .9rem);
    line-height: 1.5;
    color: #6E6862;
}

.pop__field { display: block; margin-bottom: 14px; }

.pop__label {
    display: block;
    margin-bottom: 6px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #857D74;
}
.pop__label i { font-style: normal; color: #D9503C; }

.pop__input {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #E7E0D6;
    border-radius: 10px;
    background: #FBF9F6;
    font: inherit;
    font-size: .95rem;
    color: #1B1815;
    transition: border-color .2s ease, background .2s ease;
}
.pop__input::placeholder { color: #B5AEA5; }
.pop__input:focus {
    outline: none;
    border-color: #FFCB2E;
    background: #fff;
}
.pop__input.is-bad { border-color: #D9503C; background: #FEF6F4; }

.pop__error {
    display: none;
    margin-top: 5px;
    font-size: .74rem;
    color: #D9503C;
}
.pop__error.is-on { display: block; }

/* Согласие: свой квадрат вместо системного чекбокса */
.pop__consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 4px;
    cursor: pointer;
}
.pop__consent input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
.pop__consent-box {
    flex: none;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 1px solid #D8D3CB;
    border-radius: 5px;
    background: #fff;
    color: #1B1815;
    transition: background .18s ease, border-color .18s ease;
}
.pop__consent-box svg { width: 13px; height: 13px; opacity: 0; transition: opacity .18s ease; }
.pop__consent input:checked + .pop__consent-box { background: #FFCB2E; border-color: #FFCB2E; }
.pop__consent input:checked + .pop__consent-box svg { opacity: 1; }
.pop__consent input:focus-visible + .pop__consent-box { border-color: #1B1815; }
.pop__consent.is-bad .pop__consent-box { border-color: #D9503C; }

.pop__consent-text {
    font-size: .76rem;
    line-height: 1.45;
    color: #6E6862;
}
.pop__consent-text a { color: #1B1815; }

/* Ловушка для ботов. Убираем из потока так, чтобы поле осталось в разметке и
   в DOM: display:none и visibility:hidden часть ботов распознаёт и пропускает. */
.pop__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.pop__submit {
    width: 100%;
    justify-content: center;
    margin-top: 18px;
}

.pop__done {
    margin: 0;
    padding: clamp(20px, 2.4vw, 30px);
    border-radius: 12px;
    background: #FBF9F6;
    text-align: center;
}
.pop__done strong {
    display: block;
    margin-bottom: 6px;
    font-size: 1.05rem;
    color: #1B1815;
}
.pop__done span { font-size: .85rem; color: #6E6862; }

@media (max-width: 720px) {
    /* на телефоне фото не показываем — форма занимает всю ширину */
    .pop__box { grid-template-columns: minmax(0, 1fr); }
    .pop__photo { display: none; }
}


/* =============================================================
   Попап-меню — карта сайта общая с футером
   ============================================================= */

.menu {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow-y: auto;
    background: #FBF9F6;
    color: #4A443E;
    font-family: 'Montserrat', system-ui, sans-serif;
    opacity: 0;
    visibility: hidden;
    transition: opacity .32s ease, visibility .32s;
}
/* grid перебивает атрибут hidden, поэтому прячем явно */
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; visibility: visible; }

.menu__bar {
    border-bottom: 1px solid #E7E0D6;
}
.menu__bar-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: clamp(64px, 6.4vw, 92px);
}

.menu__logo img {
    display: block;
    width: auto;
    height: clamp(32px, 3.4vw, 46px);
}

.menu__close {
    display: grid;
    place-items: center;
    width: clamp(42px, 3.6vw, 52px);
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid #E7E0D6;
    border-radius: 50%;
    background: transparent;
    color: #1B1815;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.menu__close svg { width: 42%; height: auto; }
.menu__close:hover {
    background: #FFCB2E;
    border-color: #FFCB2E;
    transform: rotate(90deg);
}

/* колонки сверху, диван прижат к низу окна */
.menu__body {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-block: clamp(24px, 4vw, 56px) 0;
}

.menu__map {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(26px, 3.4vw, 56px);
}

/* колонки всплывают по очереди при открытии */
.menu__col {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .45s ease, transform .45s ease;
}
.menu.is-open .menu__col { opacity: 1; transform: none; }
.menu.is-open .menu__col:nth-child(2) { transition-delay: .06s; }
.menu.is-open .menu__col:nth-child(3) { transition-delay: .12s; }
.menu.is-open .menu__col:nth-child(4) { transition-delay: .18s; }

.menu__cap {
    margin: 0 0 clamp(14px, 1.6vw, 22px);
    padding-bottom: clamp(9px, 1vw, 13px);
    border-bottom: 2px solid #FFCB2E;
    font-size: clamp(.68rem, .8vw, .76rem);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #1B1815;
}

.menu__col ul { margin: 0; padding: 0; list-style: none; }
.menu__col li + li { margin-top: clamp(2px, .4vw, 6px); }

.menu__col a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: clamp(7px, .8vw, 11px);
    font-size: clamp(.92rem, 1.15vw, 1.1rem);
    line-height: 1.3;
    color: #4A443E;
    text-decoration: none;
    transition: color .2s ease;
}
.menu__col a svg {
    flex: none;
    width: 18px;
    color: #FFCB2E;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .22s ease, transform .22s ease;
}
.menu__col a:hover { color: #1B1815; }
.menu__col a:hover svg { opacity: 1; transform: none; }

/* Контакты */
.menu__phones { margin: 0; padding: 0; list-style: none; }
.menu__phones li + li { margin-top: 10px; }
.menu__phones a {
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    font-weight: 600;
    color: #1B1815;
    text-decoration: none;
    border-bottom: 2px solid #FFCB2E;
    transition: color .2s ease;
}
.menu__phones a:hover { color: #A9711E; }

.menu__hours {
    margin: clamp(10px, 1.2vw, 16px) 0 0;
    font-size: clamp(.75rem, .88vw, .82rem);
    color: #857D74;
}

.menu__social {
    display: inline-block;
    margin-top: clamp(12px, 1.4vw, 18px);
    font-size: clamp(.78rem, .92vw, .875rem);
    color: #4A443E;
    text-decoration: none;
    border-bottom: 1px solid #E7E0D6;
    transition: color .2s ease, border-color .2s ease;
}
.menu__social:hover { color: #1B1815; border-color: #FFCB2E; }

/* Диван внизу меню — тот же, что на первом экране, с кнопкой и завитушкой */
.menu__sofa {
    margin-top: auto;
    padding-top: clamp(20px, 3vw, 44px);
    text-align: center;
}
.menu__sofa .hero__sofa-wrap { max-width: min(760px, 100%); }
.menu__sofa img { display: block; width: 100%; height: auto; }

/* иконка в шапке превращается в крестик, пока меню открыто */
.is-menu-open .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.is-menu-open .burger span:nth-child(2) { opacity: 0; }
.is-menu-open .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 980px) {
    .menu__map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .menu__map { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .menu__col a { font-size: 1rem; }
}


/* =============================================================
   ЭКРАН 13 — Футер
   ============================================================= */

.foot {
    padding-block: clamp(40px, 5vw, 76px) clamp(20px, 2.4vw, 32px);
    background: #1B1815;
    color: rgba(247, 245, 242, .72);
    font-family: 'Montserrat', system-ui, sans-serif;
}

.foot__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: clamp(30px, 4vw, 70px);
}

.foot__logo { display: inline-block; }
.foot__logo img {
    width: auto;
    height: clamp(34px, 3vw, 42px);
    /* логотип цветной и тёмный по краям — на чёрном осветляем */
    filter: brightness(0) invert(1);
    opacity: .92;
}

.foot__about {
    max-width: 42ch;
    margin: clamp(14px, 1.6vw, 20px) 0 0;
    font-size: clamp(.78rem, .92vw, .875rem);
    line-height: 1.55;
}

.foot__phones,
.foot__social {
    margin: clamp(14px, 1.6vw, 20px) 0 0;
    padding: 0;
    list-style: none;
}

.foot__phones a {
    font-size: clamp(.95rem, 1.15vw, 1.1rem);
    font-weight: 600;
    color: #F7F5F2;
    text-decoration: none;
    border-bottom: 2px solid #FFCB2E;
    transition: color .2s ease;
}
.foot__phones li + li { margin-top: 8px; }
.foot__phones a:hover { color: #FFCB2E; }

.foot__social { display: flex; flex-wrap: wrap; gap: 16px; }
.foot__social a {
    font-size: clamp(.78rem, .92vw, .875rem);
    color: rgba(247, 245, 242, .72);
    text-decoration: none;
    transition: color .2s ease;
}
.foot__social a:hover { color: #FFCB2E; }

.foot__map {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.6vw, 40px);
}

.foot__legal {
    margin: clamp(14px, 1.6vw, 20px) 0 0;
    font-size: clamp(.72rem, .85vw, .8rem);
    line-height: 1.5;
    color: rgba(247, 245, 242, .5);
}

.foot__col ul { margin: 0; padding: 0; list-style: none; }
.foot__col li + li { margin-top: clamp(7px, .8vw, 11px); }

.foot__cap {
    margin: 0 0 clamp(12px, 1.4vw, 18px);
    padding-bottom: clamp(8px, .9vw, 12px);
    border-bottom: 2px solid #FFCB2E;
    font-size: clamp(.68rem, .8vw, .76rem);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #F7F5F2;
}

.foot__col a {
    font-size: clamp(.78rem, .92vw, .875rem);
    line-height: 1.4;
    color: rgba(247, 245, 242, .72);
    text-decoration: none;
    transition: color .2s ease;
}
.foot__col a:hover { color: #FFCB2E; }

.foot__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 28px;
    margin-top: clamp(30px, 4vw, 60px);
    padding-top: clamp(16px, 2vw, 26px);
    border-top: 1px solid rgba(247, 245, 242, .14);
    font-size: clamp(.72rem, .85vw, .8rem);
    color: rgba(247, 245, 242, .5);
}
.foot__legal-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot__bottom a { color: inherit; text-decoration: none; transition: color .2s ease; }
.foot__bottom a:hover { color: #FFCB2E; }

@media (max-width: 980px) {
    .foot__top { grid-template-columns: minmax(0, 1fr); }
    .foot__map { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
}

@media (max-width: 480px) {
    .foot__map { grid-template-columns: minmax(0, 1fr); }
    .foot__about { max-width: none; }
}


/* =============================================================
   Просмотр фото во весь экран (галерея работ)
   ============================================================= */

.lb {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: clamp(52px, 6vw, 80px) clamp(52px, 8vw, 120px);
    background: rgba(20, 17, 15, .9);
}
/* display: grid перебивает атрибут hidden, поэтому прячем явно */
.lb[hidden] { display: none; }

.lb__img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    border-radius: clamp(8px, .8vw, 12px);
    object-fit: contain;
}

.lb__btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: clamp(40px, 3.4vw, 50px);
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
.lb__btn svg { width: 44%; height: auto; }
.lb__btn:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); }

.lb__close { top: clamp(14px, 2vw, 28px); right: clamp(14px, 2vw, 28px); }
.lb__prev  { left:  clamp(10px, 1.8vw, 30px); top: 50%; transform: translateY(-50%); }
.lb__next  { right: clamp(10px, 1.8vw, 30px); top: 50%; transform: translateY(-50%); }

.lb__counter {
    position: absolute;
    left: 50%;
    bottom: clamp(16px, 2.2vw, 30px);
    margin: 0;
    transform: translateX(-50%);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: .8rem;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .65);
}


/* На узком экране пункты прячем — вся навигация в попап-меню */
@media (max-width: 680px) {
    .header__menu { display: none; }
}

@media (max-width: 860px) {
    .hero { min-height: auto; padding-block: 60px; }
    .hero__circle { left: 50%; width: min(74vw, 396px); }
    .hero__head { margin-left: 0; }
    .hero__sofa { margin-top: 26px; }
    .hero__sofa-wrap { width: 100%; max-width: none; }
    .hero__price-wrap { top: -6%; right: 0; }
    .hero__price { padding: 11px 20px; }
    .hero__squiggle { width: 52px; }
}