/**
 * ТСП СТУДИО — главная страница
 * Основа макета: v1 (tsp-studio-homepage-mockup-v1)
 * Фон, калькулятор и карта: v5 golden-c (тёплый песочный)
 */

/* :root — глобальные CSS-переменные (доступны на всей странице) */
:root {
    --color-header: #1a1a1a; /* цвет фона шапки сайта — тёмно-серый */
    --color-body: #f0ebe3; /* основной фон страницы — тёплый песочный */
    --color-body-alt: #f7f5f2; /* альтернативный светлый фон для карточек */
    --color-white: #ffffff; /* чистый белый для блоков и карточек */
    --color-accent: #b8956b; /* акцентный цвет — золотисто-бежевый */
    --color-accent-hover: #a6845d; /* акцент при наведении — чуть темнее */
    --color-text: #2a2a2a; /* основной цвет текста — почти чёрный */
    --color-text-muted: #6b6560; /* приглушённый текст — серо-коричневый */
    --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; /* шрифт с засечками для заголовков */
    --font-sans: 'Manrope', system-ui, -apple-system, sans-serif; /* шрифт без засечек для основного текста */
    --radius: 10px; /* стандартное скругление углов элементов */
    --shadow: 0 4px 24px rgba(26, 26, 26, 0.07); /* мягкая тень для карточек */
    --container-max: 1200px; /* максимальная ширина контентного контейнера */
    --container-pad: 0.75rem; /* боковые отступы контейнера (шапка = секции) */
}

/* Skip-link — доступность: быстрый переход к контенту */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: 0.75rem 1.25rem;
    background: var(--color-accent);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
    left: 0;
}

/* Универсальный селектор — применяется ко всем элементам и их псевдоэлементам */
*,
*::before, /* псевдоэлемент «до» содержимого */
*::after { /* псевдоэлемент «после» содержимого */
    box-sizing: border-box; /* padding и border включаются в width/height, а не добавляются сверху */
}

/* html — плавная прокрутка при переходе по якорям (#calculator и т.п.) */
html {
    scroll-behavior: smooth; /* плавный скролл к якорям */
    scroll-padding-top: 90px; /* отступ сверху при скролле к якорю (учёт липкой шапки) */
    overflow-x: hidden;
    max-width: 100%;
}

/* body — основной контейнер всей страницы */
body {
    margin: 0; /* убираем стандартные отступы браузера по краям */
    background: var(--color-body); /* фон страницы из переменной */
    color: var(--color-text); /* цвет основного текста */
    font-family: var(--font-sans); /* шрифт без засечек для читаемости */
    font-size: 1rem; /* базовый размер текста (обычно 16px) */
    line-height: 1.6; /* межстрочный интервал — 160% от размера шрифта */
    -webkit-font-smoothing: antialiased; /* сглаживание шрифта в Safari/Chrome */
    overflow-x: hidden; /* защита от горизонтальной прокрутки при случайном переполнении */
    max-width: 100%;
}

#main-content,
.site-header,
.site-footer,
.hero {
    max-width: 100%;
}

/* Заголовки и абзацы — переносим длинные слова, чтобы не рвать вёрстку на узких экранах */
h1, h2, h3, p, span, a, li {
    overflow-wrap: break-word; /* длинное слово переносится, а не вылезает за край */
}

/* a — все ссылки на странице */
a {
    color: inherit; /* цвет ссылки наследуется от родителя, а не синий по умолчанию */
    text-decoration: none; /* убираем подчёркивание ссылок */
}

/* img — все изображения */
img {
    max-width: 100%; /* изображение не шире родительского блока */
    height: auto; /* высота подстраивается пропорционально ширине */
}

/* .container — единая ширина контента для шапки, секций и подвала */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-pad, 0.75rem);
    padding-right: var(--container-pad, 0.75rem);
    box-sizing: border-box;
}

.callback-modal .modal-content {
    border: none;
    border-radius: var(--radius);
    box-shadow: 0 20px 48px rgba(26, 26, 26, 0.18);
}

.callback-modal .modal-title {
    font-family: var(--font-serif);
    font-weight: 600;
}

/* ——— Header (шапка сайта, v1) ——— */

/* .site-header — фиксированная шапка сайта */
.site-header {
    position: sticky; /* шапка «прилипает» к верху при прокрутке */
    top: 0; /* прилипание к самому верху окна */
    z-index: 1000; /* шапка поверх остального контента */
    background: var(--color-header); /* тёмный фон шапки */
}

/* .header-top — верхняя полоса шапки (соцсети, логотип, контакты) */
.header-top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07); /* тонкая полупрозрачная линия-разделитель снизу */
}

/* .header-top-inner — внутренняя сетка верхней полосы шапки */
.header-top-inner {
    display: grid; /* CSS Grid для трёх колонок */
    grid-template-columns: 1fr auto 1fr; /* левая и правая колонки равны, центр — по содержимому */
    align-items: center; /* вертикальное выравнивание по центру */
    gap: 1rem; /* расстояние между колонками */
    padding: 0.65rem 0; /* вертикальные отступы внутри полосы */
}

/* Ячейки шапки не раздувают сетку при длинном тексте */
.header-top-inner > * {
    min-width: 0;
}

/* .header-social — блок иконок соцсетей */
.header-social {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-self: start;
}

/* .header-social-link — ссылка на соцсеть */
.header-social-link {
    display: flex; /* flex для выравнивания иконки внутри */
    color: rgba(255, 255, 255, 0.62); /* чуть ярче — узнаваемые иконки */
    transition: color 0.2s; /* плавная смена цвета за 0.2 секунды */
}

/* .header-social-link:hover — иконка соцсети при наведении курсора */
.header-social-link:hover {
    color: var(--color-accent); /* акцентный цвет при наведении */
}

.header-social-link--telegram:hover {
    color: #2aabee;
}

.header-social-link--vk:hover {
    color: #0077ff;
}

.header-social-link--instagram:hover {
    color: #e4405f;
}

.header-social-link--email:hover {
    color: var(--color-accent);
}

/* .header-logo — ссылка с классическим логотипом TSP design */
.header-logo-group {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    gap: clamp(0.35rem, 2vw, 0.65rem);
    min-width: 0;
    max-width: 100%;
}

.header-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 1;
    padding: 0;
    border-bottom: none;
    flex-shrink: 0;
}

.header-logo-img {
    display: block;
    width: auto;
    height: clamp(28px, 6.5vw, 40px);
    max-width: min(100%, 10.75rem);
}

/* .header-contacts — блок контактов справа в шапке */
.header-contacts {
    justify-self: end; /* прижимает блок к правому краю grid-ячейки */
    gap: 0.75rem; /* расстояние между элементами контактов */
    flex-wrap: wrap; /* телефон и CTA переносятся, если не влезают */
    justify-content: flex-end;
    max-width: 100%;
}

/* .header-sep — разделитель между контактами (например, «|») */
.header-sep {
    color: rgba(255, 255, 255, 0.25); /* очень бледный белый */
}

/* .header-link — текстовая ссылка в шапке (телефон, email) */
.header-link {
    color: rgba(255, 255, 255, 0.8); /* светлый текст на тёмном фоне */
    font-size: 0.82rem; /* компактный размер шрифта */
    white-space: nowrap; /* текст не переносится на новую строку */
}

/* .header-link:hover — ссылка в шапке при наведении */
.header-link:hover {
    color: #fff; /* полностью белый цвет */
}

/* .header-cta — кнопка призыва к действию в шапке */
.header-cta {
    margin-left: 0.5rem; /* отступ слева от соседних элементов */
    padding: 0.45rem 1rem; /* внутренние отступы кнопки */
    font-size: 0.7rem; /* мелкий текст кнопки */
    letter-spacing: 0.08em; /* разрядка для заглавных букв */
    text-transform: uppercase; /* все буквы заглавные */
    border-radius: 4px; /* скругление углов кнопки */
}

/* .site-header .container — ровно та же ширина/паддинг, что у секций */
.site-header .container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-pad, 0.75rem);
    padding-right: var(--container-pad, 0.75rem);
    box-sizing: border-box;
}

/* .header-nav — нижняя полоса навигации в шапке */
.header-nav {
    background: var(--color-header); /* тот же тёмный фон, что и у шапки */
}

/* .header-nav .container — контейнер внутри навигации */
.header-nav .container {
    border-top: 1px solid rgba(255, 255, 255, 0.04); /* едва заметная линия сверху меню */
}

/* .header-nav-list — пункты участвуют в общем ряду контейнера */
.header-nav-list {
    display: contents; /* li + RU|EN — один ряд на всю ширину */
    margin: 0;
    padding: 0;
    list-style: none;
}

/* .header-nav-list li — ширина по тексту, без растягивания колонок */
.header-nav-list li {
    flex: 0 0 auto;
    text-align: left;
    min-width: 0;
    padding: 1rem 0; /* вертикальные отступы полосы меню */
}

/* .nav-link-header — ссылка пункта меню в шапке */
.nav-link-header {
    display: inline-block; /* блок для padding и hover */
    color: rgba(255, 255, 255, 0.65); /* полупрозрачный белый */
    font-size: 0.8rem; /* чуть крупнее, как в v1 */
    font-weight: 500; /* средняя жирность */
    letter-spacing: 0.14em; /* широкая разрядка uppercase */
    text-transform: uppercase; /* заглавные буквы */
    padding: 0.35rem 0; /* область клика без бокового сдвига */
    white-space: nowrap; /* пункт не ломается на две строки */
    transition: color 0.2s; /* плавная смена цвета */
}

/* .nav-link-header:hover и .active — пункт меню при наведении или активный */
.nav-link-header:hover,
.nav-link-header.active {
    color: #fff; /* яркий белый — активный/наведённый пункт */
}

/* .btn-accent — акцентная кнопка (заливка акцентным цветом) */
.btn-accent {
    background: var(--color-accent); /* фон кнопки — акцентный цвет */
    border-color: var(--color-accent); /* рамка того же цвета */
    color: #fff; /* белый текст на кнопке */
    font-weight: 600; /* полужирный текст */
    letter-spacing: 0.04em; /* лёгкая разрядка */
    border-radius: 4px; /* скругление углов */
}

/* .btn-accent:hover — акцентная кнопка при наведении */
.btn-accent:hover {
    background: var(--color-accent-hover); /* чуть темнее при наведении */
    border-color: var(--color-accent-hover); /* рамка тоже темнее */
    color: #fff; /* текст остаётся белым */
}

/* .btn-outline-dark — кнопка с тёмной обводкой без заливки */
.btn-outline-dark {
    border-radius: 4px; /* скругление углов */
    border-color: #c8c0b6; /* светло-серая рамка */
    color: var(--color-text); /* тёмный текст */
    font-weight: 500; /* средняя жирность */
}

/* .btn-outline-dark:hover — обводная кнопка при наведении */
.btn-outline-dark:hover {
    background: var(--color-text); /* заливается тёмным цветом */
    border-color: var(--color-text); /* рамка совпадает с фоном */
    color: #fff; /* текст становится белым */
}

/* ——— Hero (главный экран-баннер, v1) ——— */

/* .hero — баннер первого экрана (компактная высота, макет v1) */
.hero {
    position: relative; /* якорь для абсолютно позиционированных дочерних элементов */
    height: clamp(440px, 54vh, 620px); /* чуть ниже, ближе к макету v1 */
    max-height: 620px; /* потолок высоты hero */
    overflow: hidden; /* обрезаем содержимое, выходящее за границы */
}

/* .hero-slide — фоновый слайд баннера */
.hero-slide {
    position: absolute; /* растягивается на весь .hero */
    inset: 0; /* top/right/bottom/left = 0 — на весь родительский блок */
    z-index: 0; /* под затемнением и текстом */
    background-image: var(--hero-bg); /* фоновое изображение из CSS-переменной */
    background-color: #2a2a2a; /* запасной фон, если картинка не загрузилась */
    background-size: cover; /* изображение покрывает весь блок, сохраняя пропорции */
    background-position: center; /* изображение центрировано */
    opacity: 0; /* скрыт до активации */
    transition: opacity 0.65s ease; /* плавное переключение слайдов */
}

/* .hero-slide-active — текущий видимый слайд */
.hero-slide-active {
    opacity: 1; /* показываем активный слайд */
}

/* .hero-overlay — затемняющий градиент поверх фонового изображения */
.hero-overlay {
    position: absolute; /* поверх слайда */
    inset: 0; /* на весь блок .hero */
    z-index: 1; /* между фото и текстом */
    background: linear-gradient(
        to top, /* градиент снизу вверх */
        rgba(0, 0, 0, 0.82) 0%, /* внизу — сильное затемнение (82% чёрного) */
        rgba(0, 0, 0, 0.45) 38%, /* к середине — умеренное */
        rgba(0, 0, 0, 0.15) 100% /* вверху — лёгкое затемнение */
    );
}

/* .hero-content — текстовый блок поверх баннера, слева, по центру по высоте */
.hero .hero-content.container {
    position: absolute; /* слева в баннере, не по центру страницы */
    z-index: 2; /* выше фона и overlay */
    left: calc(clamp(1rem, 3vw, 2.5rem) + 5%); /* отступ от левого края + сдвиг вправо */
    top: 50%;
    transform: translateY(-50%); /* вертикально по центру баннера */
    width: min(calc(100% - 2rem), var(--container-max));
    max-width: var(--container-max);
    margin: 0; /* сброс центрирования Bootstrap .container */
    padding-top: 0;
    padding-bottom: 0;
    color: #fff;
    text-align: left;
}

/* Заголовок, подзаголовок и кнопки — узкая колонка слева внутри контейнера */
.hero-content .hero-title,
.hero-content .hero-subtitle,
.hero-content .hero-actions {
    max-width: 640px; /* ширина текстового блока */
}

/* .hero-eyebrow — маленькая надпись над заголовком («eyebrow» = бровь) */
.hero-eyebrow {
    font-size: 0.68rem; /* очень мелкий текст */
    letter-spacing: 0.22em; /* широкая разрядка */
    text-transform: uppercase; /* заглавные буквы */
    opacity: 0.75; /* слегка прозрачный */
    margin-bottom: 0.85rem; /* отступ до заголовка */
}

.hero-brand {
    font-family: var(--font-serif);
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 0.5rem;
}

/* .hero-title — главный заголовок баннера */
.hero-title {
    font-family: var(--font-serif); /* декоративный шрифт с засечками */
    font-size: clamp(2.75rem, 5.5vw, 4.25rem); /* адаптивный размер: мин 2.75rem, предпочт. 5.5vw, макс 4.25rem */
    font-weight: 600; /* полужирный */
    letter-spacing: 0.04em; /* лёгкая разрядка */
    margin-bottom: 0.65rem; /* отступ до подзаголовка */
    line-height: 1.05; /* плотный межстрочный интервал для крупного заголовка */
}

/* .hero-subtitle — подзаголовок под главным заголовком */
.hero-subtitle {
    font-size: clamp(1rem, 1.8vw, 1.2rem); /* адаптивный размер подзаголовка */
    opacity: 0.9; /* чуть прозрачный */
    margin-bottom: 1.85rem; /* отступ до кнопок (как в макете v1) */
    max-width: 36ch; /* ширина ~36 символов — удобная длина строки для чтения */
    font-weight: 400; /* обычная жирность */
}

/* .hero-trust — строка доверия (например, «500+ проектов») */
.hero-trust {
    font-size: 0.85rem; /* мелкий текст */
    opacity: 0.65; /* приглушённый */
    margin-bottom: 1.85rem; /* отступ до кнопок */
}

/* .hero-actions — блок с кнопками действий */
.hero-actions {
    display: flex; /* кнопки в ряд */
    flex-wrap: wrap; /* перенос на новую строку при нехватке места */
    gap: 0.75rem; /* расстояние между кнопками */
}

/* .hero-actions .btn — кнопки внутри блока действий баннера */
.hero-actions .btn {
    min-width: 200px; /* минимальная ширина кнопки */
    border-radius: 4px; /* скругление углов */
    font-size: 0.85rem; /* размер текста кнопки */
    letter-spacing: 0.03em; /* лёгкая разрядка */
}

/* .btn-hero-outline — прозрачная кнопка с белой обводкой на баннере */
.btn-hero-outline {
    border: 1px solid rgba(255, 255, 255, 0.65); /* полупрозрачная белая рамка */
    color: #fff; /* белый текст */
    background: transparent; /* прозрачный фон */
}

/* .btn-hero-outline:hover — обводная кнопка баннера при наведении */
.btn-hero-outline:hover {
    background: rgba(255, 255, 255, 0.1); /* лёгкая белая подложка */
    border-color: #fff; /* рамка становится полностью белой */
    color: #fff; /* текст остаётся белым */
}

/* .hero-dots — индикаторы слайдов по центру внизу баннера (макет v1) */
.hero-dots {
    position: absolute; /* поверх баннера, не в потоке текста */
    bottom: 2rem; /* отступ от нижнего края hero */
    left: 50%; /* центр по горизонтали */
    transform: translateX(-50%); /* точное центрирование */
    display: flex; /* точки в ряд */
    gap: 0.45rem; /* расстояние между точками */
    z-index: 3; /* поверх затемнения и стрелок не перекрывают точки */
    margin-top: 0; /* сброс отступа — позиция задаётся bottom */
}

/* .hero-nav — стрелки переключения слайдов */
.hero-nav {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.hero-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.85rem;
    height: 2.85rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.28);
    color: #fff;
    cursor: pointer;
    pointer-events: auto;
    backdrop-filter: blur(4px);
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.hero-nav-btn:hover {
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.55);
    transform: translateY(-50%) scale(1.04);
}

.hero-nav-prev {
    left: clamp(0.75rem, 2vw, 1.5rem);
}

.hero-nav-next {
    right: clamp(0.75rem, 2vw, 1.5rem);
}

/* .hero-dots span — одна точка-индикатор */
.hero-dots button {
    width: 7px; /* ширина точки */
    height: 7px; /* высота точки */
    border-radius: 50%; /* делает квадрат кругом */
    background: rgba(255, 255, 255, 0.3); /* полупрозрачный белый — неактивная точка */
    border: 0; /* без стандартной рамки button */
    padding: 0; /* без внутренних отступов */
    cursor: pointer; /* показывает, что точка кликабельна */
}

/* .hero-dots span.active — активная (текущая) точка слайдера */
.hero-dots button.active {
    background: var(--color-accent); /* акцентный цвет — активный слайд */
}

/* ——— Hero dual: два проекта портфолио одновременно ——— */
.hero-dual {
  --hero-dual-bar-space: 5.25rem;
}

.hero-dual .hero-panels {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    z-index: 0;
}

.hero-dual.hero--single .hero-panels {
    grid-template-columns: 1fr;
}

.hero-dual.hero--single .hero-panel {
    border-right: 0;
}

.hero-panel {
    position: relative;
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-panel:last-child {
    border-right: 0;
}

.hero-panel-slides {
    position: absolute;
    inset: 0;
}

.hero-panel .hero-slide {
    position: absolute;
    inset: 0;
}

.hero-panel-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.42) 42%,
        rgba(0, 0, 0, 0.12) 100%
    );
}

.hero-panel-caption {
    position: absolute;
    left: clamp(0.85rem, 2.2vw, 1.5rem);
    right: clamp(0.85rem, 2.2vw, 1.5rem);
    bottom: calc(var(--hero-dual-bar-space) + 1.65rem);
    z-index: 2;
    color: #fff;
    text-decoration: none;
}

.hero-panel-caption:hover {
    color: #fff;
    opacity: 0.92;
}

.hero-panel-title {
    font-family: var(--font-serif);
    font-size: clamp(1.2rem, 2.2vw, 1.85rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0 0 0.3rem;
    line-height: 1.12;
}

.hero-panel-meta {
    font-size: clamp(0.75rem, 1.1vw, 0.9rem);
    opacity: 0.88;
    margin: 0;
}

.hero-panel-dots {
    position: absolute;
    bottom: calc(var(--hero-dual-bar-space) + 0.35rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 0.4rem;
}

.hero-panel-dots button {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.32);
    border: 0;
    padding: 0;
    cursor: pointer;
}

.hero-panel-dots button.active {
    background: var(--color-accent);
}

.hero-dual-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: 0.55rem clamp(0.85rem, 3vw, 2rem) 0.85rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.hero-dual-actions {
    pointer-events: auto;
    justify-content: center;
    max-width: 100%;
    gap: 0.5rem;
}

.hero-dual-actions .btn {
    min-width: 0;
    font-size: 0.78rem;
    padding: 0.45rem 0.95rem;
    letter-spacing: 0.02em;
}

.hero-dual-actions .btn.btn-lg {
    font-size: 0.8rem;
    padding: 0.48rem 1rem;
    line-height: 1.3;
}

.hero-dual .hero-nav-prev {
    left: clamp(0.5rem, 1.5vw, 1rem);
}

.hero-dual .hero-nav-next {
    right: clamp(0.5rem, 1.5vw, 1rem);
}

/* На десктопе стрелки только при >2 проектов на слайдере */
.hero-dual:not(.hero--carousel):not(.hero--single) .hero-nav {
    display: none;
}

/* ——— Секции (общие стили разделов страницы) ——— */

/* .section-sand — секция с песочным фоном */
.section-sand {
    background: var(--color-body); /* тёплый песочный фон */
    padding: 4.5rem 0; /* большие вертикальные отступы секции */
}

/* .section-white — секция с белым фоном */
.section-white {
    background: var(--color-white); /* белый фон */
    padding: 4.5rem 0; /* вертикальные отступы секции */
}

/* .section-title — заголовок секции */
.section-title {
    font-family: var(--font-serif); /* шрифт с засечками */
    font-size: clamp(1.85rem, 3vw, 2.6rem); /* адаптивный размер заголовка секции */
    font-weight: 600; /* полужирный */
    color: var(--color-text); /* основной цвет текста */
    margin-bottom: 1rem; /* отступ до описания */
    line-height: 1.15; /* плотный межстрочный интервал */
}

/* .section-lead — вводный текст под заголовком секции */
.section-lead {
    color: var(--color-text-muted); /* приглушённый цвет */
    max-width: 52ch; /* ширина ~52 символа — удобная для чтения */
    margin-bottom: 0; /* без отступа снизу */
    font-size: 0.95rem; /* чуть меньше основного текста */
}

/* ——— Регионы (v1: 6 компактных карточек, иконка + город + флаг) ——— */

/* .section-regions — компактная секция как в макете v1 */
.section-regions {
    padding: 2.25rem 0 2.5rem; /* меньше вертикальные отступы, чем у .section-sand */
}

/* .section-regions .section-title — заголовок блока регионов */
.section-regions .section-title {
    margin-bottom: 0.65rem; /* меньше отступ до карточек */
    font-size: clamp(1.55rem, 2.4vw, 2.15rem); /* чуть компактнее заголовок */
}

/* .regions-search — блок поиска по регионам */
.regions-search {
    max-width: 420px; /* ограничение ширины поля поиска */
}

/* .regions-search .form-control — поле ввода внутри поиска регионов */
.regions-search .form-control {
    border-radius: 999px; /* полностью скруглённые края (форма «капсулы») */
    border: 1px solid #ddd8d0; /* светло-бежевая рамка */
    background: var(--color-white); /* белый фон поля */
    padding: 0.75rem 1.25rem; /* внутренние отступы */
    font-size: 0.9rem; /* размер текста в поле */
    box-shadow: none; /* без тени (Bootstrap по умолчанию добавляет) */
}

/* .regions-search .form-control:focus — поле поиска в фокусе (когда пользователь кликнул) */
.regions-search .form-control:focus {
    border-color: var(--color-accent); /* рамка становится акцентной */
    box-shadow: 0 0 0 3px rgba(184, 149, 107, 0.15); /* мягкое свечение вокруг поля */
}

/* .regions-carousel — горизонтальная лента городов со стрелками */
.regions-carousel {
    --regions-visible: 6;
    --regions-gap: 0.75rem;
    position: relative;
    margin-top: 1.15rem;
    padding: 0 2.85rem;
}

.regions-carousel:not(.regions-carousel--scrollable) {
    padding: 0;
}

.regions-carousel-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.regions-carousel-viewport::-webkit-scrollbar {
    display: none;
}

.regions-carousel-viewport:focus {
    outline: none;
}

.regions-carousel-viewport:focus-visible {
    box-shadow: 0 0 0 2px rgba(184, 149, 107, 0.45);
    border-radius: var(--radius);
}

.regions-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-text);
    box-shadow: 0 4px 18px rgba(26, 26, 26, 0.08);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.regions-carousel:not(.regions-carousel--scrollable) .regions-carousel-btn {
    display: none;
}

.regions-carousel-btn:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.04);
    box-shadow: 0 8px 24px rgba(26, 26, 26, 0.12);
}

.regions-carousel-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.regions-carousel-prev {
    left: 0;
}

.regions-carousel-next {
    right: 0;
}

/* .regions-grid — горизонтальный ряд карточек регионов */
.regions-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--regions-gap);
}

/* .regions-static — статичная сетка городов (без слайдера) на главной */
.regions-static {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1.15rem;
}

/* В статичной сетке карточка занимает всю ячейку грида (flex-basis не нужен) */
.regions-static .region-card {
    flex: initial;
    width: auto;
}

/* .region-card--all — карточка-ссылка «Все регионы» в последней ячейке */
.regions-static .region-card--all {
    background: var(--color-accent);
    color: #fff;
}
.regions-static .region-card--all .region-name {
    color: #fff;
}
.regions-static .region-card--all:hover {
    background: var(--color-accent-hover);
}
.region-card-all-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0.95;
}
.region-card-all-arrow {
    font-size: 1.1rem;
    line-height: 1;
    color: #fff;
    opacity: 0.9;
}

@media (max-width: 991.98px) {
    .regions-static { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .regions-static { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
}

/* ——— Аккордеон «страна → город» (страница «Города») ——— */
.regions-tree {
    width: min(52rem, 100%);
    margin-inline: auto;
}

/* Уровень страны */
.regions-country {
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
.regions-country + .regions-country {
    margin-top: 0.75rem;
}
.regions-country-summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    font-weight: 700;
    font-size: 1.1rem;
    list-style: none;
}
.regions-country-summary::-webkit-details-marker { display: none; }
.regions-country-name { color: #2c2418; }
.regions-country-count {
    color: var(--color-accent);
    font-size: 0.85rem;
    font-weight: 600;
}
.regions-country > .region-cities {
    padding: 0.15rem 1rem 1rem;
}

/* Общий шеврон для summary */
.regions-tree-chevron {
    margin-left: auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    opacity: 0.55;
}
details[open] > summary .regions-tree-chevron {
    transform: rotate(-135deg);
}

/* Список городов */
.region-cities {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
}
.region-cities--flat {
    padding-left: 0.25rem;
}
.region-city-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--color-sand, #f3ede4);
    color: #3a3128;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.region-city-link:hover {
    background: var(--color-accent);
    color: #fff;
}
.region-city-count {
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.75;
}

/* .region-card — одна карточка региона */
.region-card {
    flex: 0 0 calc((100% - (var(--regions-visible) - 1) * var(--regions-gap)) / var(--regions-visible));
    scroll-snap-align: start;
    display: flex; /* flex для центрирования содержимого */
    flex-direction: column; /* иконка, название и флаг друг под другом */
    align-items: center; /* горизонтальное центрирование */
    justify-content: center; /* вертикальное центрирование */
    gap: 0.4rem; /* расстояние между элементами */
    background: var(--color-white); /* белый фон карточки */
    border-radius: var(--radius); /* скругление углов */
    padding: 0.9rem 0.45rem 0.75rem; /* компактные внутренние отступы */
    box-shadow: var(--shadow); /* мягкая тень */
    border: 1px solid rgba(0, 0, 0, 0.04); /* едва заметная рамка */
    min-height: 118px; /* ниже, чем было — как в v1 */
    text-decoration: none; /* без подчёркивания ссылки */
    color: inherit; /* наследуем цвет текста */
    transition: transform 0.2s, box-shadow 0.2s; /* плавная анимация при наведении */
}

/* .region-card:hover — карточка региона при наведении */
.region-card:hover {
    transform: translateY(-3px); /* карточка «поднимается» на 3px вверх */
    box-shadow: 0 10px 32px rgba(26, 26, 26, 0.1); /* тень становится глубже */
}

/* .region-card-icon — контейнер SVG-иконки достопримечательности */
.region-card-icon {
    width: 48px; /* ширина иконки */
    height: 48px; /* высота иконки */
    background-repeat: no-repeat; /* фоновая картинка не повторяется */
    background-position: center; /* иконка по центру */
    background-size: contain; /* иконка целиком помещается в блок */
    opacity: 0.42; /* серая линейная иконка как в v1 */
}

/* .region-icon-moscow — собор Василия Блаженного */
.region-icon-moscow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2a2a' stroke-width='1.4'%3E%3Cpath d='M14 46V30c0-4 3-8 6-10M32 46V18c0-5 4-9 0-14M50 46V30c0-4-3-8-6-10'/%3E%3Cpath d='M8 46h48'/%3E%3Cpath d='M20 22c2 2 4 2 6 0M38 22c2 2 4 2 6 0'/%3E%3C/svg%3E");
}

/* .region-icon-spb — Адмиралтейство / шпиль */
.region-icon-spb {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2a2a' stroke-width='1.4'%3E%3Cpath d='M32 8v38M24 46h16'/%3E%3Cpath d='M28 18h8M26 28h12M24 38h16'/%3E%3Cpath d='M18 46c6-4 22-4 28 0M10 50h44'/%3E%3C/svg%3E");
}

/* .region-icon-mytishchi — историческая водонапорная башня */
.region-icon-mytishchi {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2a2a' stroke-width='1.4'%3E%3Cellipse cx='32' cy='18' rx='10' ry='5'/%3E%3Cpath d='M22 18v24M42 18v24M26 42v4M38 42v4M20 46h24'/%3E%3C/svg%3E");
}

/* .region-icon-murmansk — памятник «Алёша» */
.region-icon-murmansk {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2a2a' stroke-width='1.4'%3E%3Ccircle cx='34' cy='14' r='3'/%3E%3Cpath d='M32 17v18M36 20l8-6M44 14v16M28 22v13M36 35h-8M18 40h28M14 44h36M10 48h44'/%3E%3C/svg%3E");
}

/* .region-icon-tuapse — Чёрное море, маяк на берегу */
.region-icon-tuapse {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2a2a' stroke-width='1.4'%3E%3Cpath d='M8 40c8-10 16-14 24-14s16 4 24 14M12 44h40M46 36l6-8M52 28v12M8 48h48'/%3E%3C/svg%3E");
}

/* .region-icon-omsk — пожарная каланча */
.region-icon-omsk {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2a2a' stroke-width='1.4'%3E%3Cpath d='M30 10h4v36M26 14h12M24 22h16M22 30h20M28 46h8M18 46h28M14 50h36'/%3E%3C/svg%3E");
}

/* .region-icon-orenburg — Оренбургская крепость */
.region-icon-orenburg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2a2a' stroke-width='1.4'%3E%3Cpath d='M14 46V24h8v22M42 46V24h8v22M22 32h20M28 32v14M36 32v14M10 50h44'/%3E%3C/svg%3E");
}

/* .region-icon-khanty — мост через Иртыш */
.region-icon-khanty {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2a2a' stroke-width='1.4'%3E%3Cpath d='M16 40h32M20 40V20M44 40V20M20 28h24M24 28v12M40 28v12M12 44h40'/%3E%3C/svg%3E");
}

/* .region-icon-yakutsk — мамонт, символ Якутии */
.region-icon-yakutsk {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2a2a' stroke-width='1.4'%3E%3Cpath d='M20 40c4-8 20-8 24 0M16 40h32M18 44l-4-8M46 44l4-8M24 40v4M40 40v4M28 36h8M12 48h40'/%3E%3C/svg%3E");
}

/* .region-icon-sochi — Морской вокзал */
.region-icon-sochi {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2a2a' stroke-width='1.4'%3E%3Cpath d='M12 40h40M16 40V28M24 40V26M32 40V24M40 40V26M48 40V28M10 44h44M8 48h48'/%3E%3C/svg%3E");
}

/* .region-icon-kazan — мечеть Кул-Шариф */
.region-icon-kazan {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2a2a' stroke-width='1.4'%3E%3Cpath d='M16 28V20h4v8M44 28V20h4v8M24 36c0-8 16-8 16 0M28 36v10M36 36v10M20 46h24'/%3E%3C/svg%3E");
}

/* .region-icon-ekb — Храм на Крови */
.region-icon-ekb {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2a2a' stroke-width='1.4'%3E%3Cpath d='M22 40V28c0-4 4-8 10-8M42 40V28c0-4-4-8-10-8M18 40h28M32 20v20M28 16h8M14 46h36'/%3E%3C/svg%3E");
}

/* .region-icon-saransk — собор Феодора Ушакова */
.region-icon-saransk {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2a2a' stroke-width='1.4'%3E%3Cpath d='M32 8v4M30 12h4'/%3E%3Cpath d='M32 12c-5 3-6 9-6 15v19h12V27c0-6-1-12-6-15z'/%3E%3Cpath d='M18 46V30c3 0 5 3 5 8v8M46 46V30c-3 0-5 3-5 8v8'/%3E%3Cpath d='M12 46h40M10 50h44'/%3E%3C/svg%3E");
}

/* .region-icon-zavidovo — Успенская церковь у Волги */
.region-icon-zavidovo {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2a2a' stroke-width='1.4'%3E%3Cpath d='M32 8v3M30.5 11h3'/%3E%3Cpath d='M32 11c-4 3-4 7 0 9 4-2 4-6 0-9z'/%3E%3Cpath d='M26 46V25c0-3 3-6 6-6s6 3 6 6v21'/%3E%3Cpath d='M20 46h24M16 50h32'/%3E%3C/svg%3E");
}

/* .region-icon-zelenograd — модернистская архитектура (МИЭТ / «Флейта») */
.region-icon-zelenograd {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2a2a' stroke-width='1.4'%3E%3Crect x='22' y='12' width='20' height='34'/%3E%3Cpath d='M27 12v34M32 12v34M37 12v34M22 20h20M22 28h20M22 36h20'/%3E%3Cpath d='M14 50h36'/%3E%3C/svg%3E");
}

/* .region-icon-saratov — мост через Волгу */
.region-icon-saratov {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2a2a' stroke-width='1.4'%3E%3Cpath d='M8 42c8 0 8-10 16-10s8 10 16 10 8-10 16-10'/%3E%3Cpath d='M8 42h48M16 42v-6M32 42v-8M48 42v-6M8 48h48'/%3E%3C/svg%3E");
}

/* .region-icon-dubai — Бурдж-эль-Араб */
.region-icon-dubai {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2a2a' stroke-width='1.4'%3E%3Cpath d='M32 10c-10 14-10 26 0 36 10-10 10-22 0-36z'/%3E%3Cpath d='M20 46h24M16 50h32'/%3E%3Cpath d='M32 18v8'/%3E%3C/svg%3E");
}

/* .region-icon-london — Биг-Бен */
.region-icon-london {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2a2a' stroke-width='1.4'%3E%3Crect x='24' y='14' width='16' height='32' rx='1'/%3E%3Ccircle cx='32' cy='30' r='6'/%3E%3Cpath d='M32 24v4M30 30h4'/%3E%3Cpath d='M20 46h24M16 50h32'/%3E%3Cpath d='M32 14V8h-4v6'/%3E%3C/svg%3E");
}

/* .region-icon-istanbul — мечеть с минаретами */
.region-icon-istanbul {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2a2a' stroke-width='1.4'%3E%3Cpath d='M32 12c-8 8-8 18 0 26 8-8 8-18 0-26z'/%3E%3Cpath d='M18 38V22M46 38V22M18 22h28'/%3E%3Cpath d='M14 46h36M10 50h44'/%3E%3C/svg%3E");
}

/* .region-icon-singapore — Marina Bay Sands */
.region-icon-singapore {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2a2a' stroke-width='1.4'%3E%3Cpath d='M14 46V28M26 46V20M38 46V28M50 46V20'/%3E%3Cpath d='M12 28h40'/%3E%3Cpath d='M10 46h44M8 50h48'/%3E%3C/svg%3E");
}

/* .region-icon-generic — универсальная метка-локация для городов без своей достопримечательности */
.region-icon-generic {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2a2a' stroke-width='1.4'%3E%3Cpath d='M32 8c-8 0-14 6-14 14 0 10 14 26 14 26s14-16 14-26c0-8-6-14-14-14z'/%3E%3Ccircle cx='32' cy='22' r='5'/%3E%3C/svg%3E");
}

/* .region-name — название региона на карточке */
.region-name {
    font-size: 0.76rem; /* компактный размер */
    font-weight: 600; /* полужирный */
    text-align: center; /* текст по центру */
    line-height: 1.2; /* плотный межстрочный интервал */
    overflow-wrap: anywhere; /* длинные названия не ломают сетку */
    max-width: 100%;
}

/* .region-flag-img — миниатюра флага страны под названием города */
.region-flag-img {
    display: block; /* блочный элемент */
    width: 24px; /* ширина флага */
    height: 18px; /* высота флага */
    object-fit: contain; /* SVG сохраняет пропорции */
    border-radius: 2px; /* лёгкое скругление */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); /* тонкая рамка */
    flex-shrink: 0;
    overflow: hidden;
}

svg.region-flag-img {
    object-fit: unset;
}

/* ——— О нас ——— */

/* .about-list — маркированный список в секции «О нас» */
.about-list {
    padding-left: 1.15rem; /* отступ слева для маркеров списка */
    color: var(--color-text-muted); /* приглушённый цвет текста */
    font-size: 0.95rem; /* чуть меньше основного текста */
}

/* .about-list li — один пункт списка «О нас» */
.about-list li {
    margin-bottom: 0.55rem; /* отступ между пунктами */
}

/* .about-list li::marker — маркер (точка/тире) у пункта списка */
.about-list li::marker {
    color: var(--color-accent); /* акцентный цвет маркера */
}

/* .about-image — фото/изображение в секции «О нас» */
.about-image {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* «О нас» на главной: цифры в одну строку на всю ширину */
.section-about .seo-about-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.section-about .seo-about-text p {
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
}

@media (min-width: 992px) {
    .section-about .about-image {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 991.98px) {
    .section-about .about-image {
        aspect-ratio: 16 / 10;
    }

    .section-about .container > .row {
        --bs-gutter-x: 0;
        margin-inline: 0;
    }

    .section-about .container > .row > [class*="col-"] {
        min-width: 0;
        padding-inline: 0;
    }
}

/* ——— Страница «О нас» и блок about-image — мобильная адаптация ——— */
@media (max-width: 767.98px) {
    .about-image {
        aspect-ratio: 16 / 10;
    }

    .section-about .container {
        overflow-x: clip;
    }

    .section-about .seo-about-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem 1rem;
    }

    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
    }

    .stat-card {
        padding: 1rem 0.6rem;
    }

    .stat-value {
        font-size: clamp(1.1rem, 4vw, 1.45rem);
        line-height: 1.2;
        word-break: break-word;
    }

    .stat-label {
        font-size: 0.72rem;
        line-height: 1.35;
    }

    .about-list {
        padding-left: 1rem;
        font-size: 0.92rem;
    }

    .about-list li {
        margin-bottom: 0.6rem;
        line-height: 1.45;
    }

    .page-section .row.g-5 {
        --bs-gutter-y: 1.75rem;
    }

    .value-card {
        padding: 1.35rem 1.15rem;
    }

    .page-section .section-title.mb-5 {
        margin-bottom: 1.75rem !important;
    }

    .page-section .btn-outline-dark,
    .page-section .btn-accent.btn-lg {
        display: block;
        width: 100%;
    }

    .page-section .text-muted.small {
        font-size: 0.75rem;
        line-height: 1.45;
        word-break: break-word;
        padding-inline: 0.25rem;
    }

    .page-hero-lead {
        font-size: 0.95rem;
        max-width: none;
    }

    .page-hero-title {
        font-size: clamp(1.65rem, 6.5vw, 2.15rem);
        line-height: 1.12;
    }

    .container {
        --container-pad: 1rem;
        padding-left: var(--container-pad);
        padding-right: var(--container-pad);
    }
}

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

    .stat-card {
        padding: 1rem 0.85rem;
    }
}

/* ——— Портфолио (v1: превью проектов в ряд) ——— */

/* .portfolio-v1 — единая горизонтальная сетка портфолио */
.portfolio-v1 {
    display: grid; /* CSS Grid */
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr) repeat(4, minmax(0, 0.9fr)); /* legacy: категории + проекты */
    gap: 0.85rem; /* расстояние между карточками */
    align-items: stretch; /* все карточки одной высоты в ряду */
}

/* Превью на главной: 6 карточек фильтров в один ряд */
.projects-grid--home.projects-grid--filters {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.55rem;
}

.projects-grid--filters .portfolio-category {
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 4;
    padding: 0.75rem 0.65rem;
    box-shadow: var(--shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.projects-grid--filters .portfolio-category-title {
    font-size: clamp(0.82rem, 1.05vw, 1.05rem);
    line-height: 1.2;
}

.projects-grid--filters .portfolio-category small {
    font-size: 0.68rem;
    margin-top: 0.2rem;
}

.projects-grid--filters .portfolio-category:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(26, 26, 26, 0.12);
}

.projects-grid--home .project-card--all {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 0;
    aspect-ratio: 3 / 4;
    padding: 0.75rem 0.5rem;
    background: var(--color-accent);
    color: #fff;
    text-align: center;
    box-shadow: var(--shadow);
}

.projects-grid--home .project-card--all .project-card-all-icon svg {
    width: 22px;
    height: 22px;
}

.projects-grid--home .project-card--all .project-card-all-title {
    font-size: clamp(0.78rem, 1vw, 0.95rem);
    line-height: 1.2;
}

.projects-grid--home .project-card--all .project-card-all-arrow {
    font-size: 1rem;
}

.projects-grid--home .project-card--all:hover {
    background: var(--color-accent-hover);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(26, 26, 26, 0.12);
}

@media (max-width: 1199.98px) {
    .projects-grid--home.projects-grid--filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.7rem;
    }

    .projects-grid--filters .portfolio-category,
    .projects-grid--home .project-card--all {
        aspect-ratio: 1 / 1;
    }

    .projects-grid--filters .portfolio-category-title {
        font-size: clamp(1rem, 2vw, 1.25rem);
    }

    .projects-grid--filters .portfolio-category small {
        font-size: 0.78rem;
    }
}

@media (max-width: 767.98px) {
    .projects-grid--home.projects-grid--filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .projects-grid--home.projects-grid--filters {
        grid-template-columns: 1fr;
    }

    .projects-grid--filters .portfolio-category,
    .projects-grid--home .project-card--all {
        aspect-ratio: 16 / 10;
        min-height: 180px;
    }
}

/* Единая высота всех карточек в блоке portfolio-v1 */
.portfolio-v1 > .portfolio-category,
.portfolio-v1 > .project-card {
    height: 320px;
    min-height: 320px;
    max-height: 320px;
}

/* Проектные карточки в горизонтальной линии: фото растягивается, текст фиксирован */
.portfolio-v1 .project-card-img {
    aspect-ratio: unset;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

.portfolio-v1 .project-card-body {
    flex: 0 0 auto;
    min-height: 5.25rem;
}

.portfolio-v1 .project-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
    font-size: clamp(0.88rem, 1vw, 1.02rem);
}

/* .project-card--all — карточка-кнопка «Все проекты» в последней ячейке блока портфолио */
.portfolio-v1 > .project-card--all {
    height: 320px;
    min-height: 320px;
    max-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    background: var(--color-accent);
    color: #fff;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}
.portfolio-v1 > .project-card--all:hover {
    background: var(--color-accent-hover);
    transform: translateY(-3px);
}
.project-card-all-icon {
    color: #fff;
    opacity: 0.95;
    display: flex;
    align-items: center;
    justify-content: center;
}
.project-card-all-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
}
.project-card-all-arrow {
    font-size: 1.2rem;
    line-height: 1;
    color: #fff;
    opacity: 0.9;
}

/* .portfolio-category — карточка категории: высокий прямоугольник (макет v1) */
.portfolio-category {
    position: relative; /* якорь для псевдоэлемента ::before (затемнение) */
    display: flex; /* flex для текста внутри */
    flex-direction: column; /* заголовок и подпись друг под другом */
    justify-content: flex-end; /* текст прижат к нижнему краю карточки */
    height: 320px; /* фиксированная высота — вытянутый прямоугольник */
    padding: 1.25rem; /* внутренние отступы */
    border-radius: var(--radius); /* скругление углов */
    color: #fff; /* белый текст на фоне фото */
    overflow: hidden; /* обрезает содержимое за скруглёнными углами */
    text-decoration: none; /* без подчёркивания ссылки */
    background-image: var(--category-bg); /* фоновое фото категории из переменной */
    background-size: cover; /* фото покрывает всю карточку */
    background-position: center; /* фото по центру */
}

/* .portfolio-category::before — полупрозрачный градиент поверх фото категории */
.portfolio-category::before {
    content: ''; /* обязательное свойство для отображения псевдоэлемента */
    position: absolute; /* поверх фонового изображения */
    inset: 0; /* на всю площадь карточки */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.25) 55%, rgba(0, 0, 0, 0.1) 100%); /* затемнение снизу для читаемости текста */
    transition: background 0.25s; /* плавная смена градиента */
}

/* .portfolio-category:hover::before — градиент при наведении на категорию */
.portfolio-category:hover::before {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0.15) 100%); /* затемнение усиливается при наведении */
}

/* .portfolio-category-title — заголовок категории портфолио */
.portfolio-category-title {
    position: relative; /* поверх псевдоэлемента ::before */
    font-family: var(--font-serif); /* шрифт с засечками */
    font-size: clamp(1.35rem, 2vw, 1.75rem); /* адаптивный размер заголовка */
    line-height: 1.15; /* плотный межстрочный интервал */
}

/* .portfolio-category small — подпись под заголовком категории */
.portfolio-category small {
    position: relative; /* поверх градиента */
    opacity: 0.75; /* слегка прозрачный */
    margin-top: 0.4rem; /* отступ от заголовка */
    font-size: 0.82rem; /* мелкий текст */
}

/* .project-card — карточка одного проекта (квадратное превью + подпись) */
.project-card {
    background: var(--color-white); /* белый фон */
    border-radius: var(--radius); /* скругление углов */
    overflow: hidden; /* обрезка изображения по скруглённым углам */
    box-shadow: var(--shadow); /* мягкая тень */
    display: flex; /* flex для вертикальной раскладки */
    flex-direction: column; /* фото сверху, текст снизу */
    text-decoration: none; /* карточка-ссылка без подчёркивания */
    color: inherit; /* наследуем цвет текста */
    transition: transform 0.25s ease, box-shadow 0.25s ease; /* плавность при наведении */
}

.project-card:hover {
    transform: translateY(-4px); /* лёгкий подъём */
    box-shadow: 0 12px 32px rgba(26, 26, 26, 0.12); /* усиленная тень */
}

.project-card:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* .project-card-img — квадратное превью проекта (все на одной высоте) */
.project-card-img {
    position: relative; /* для бейджа поверх фото */
    aspect-ratio: 1 / 1; /* квадратное превью */
    width: 100%; /* на всю ширину карточки */
    background-color: #ece7e1; /* placeholder-фон пока грузится <img> */
    background-size: cover; /* фото покрывает блок (fallback) */
    background-position: center; /* фото по центру */
    overflow: hidden;
}

/* Реальное изображение внутри превью: ленивое, с плавным появлением */
.project-card-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.5s ease;
}

.project-card-img img.is-loaded,
.no-js .project-card-img img {
    opacity: 1;
}

.project-card:hover .project-card-img img.is-loaded {
    transform: scale(1.04);
}

.project-card-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.project-card:hover .project-card-img::after {
    opacity: 1;
}

/* Бейдж типа проекта поверх превью */
.project-card-badge {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    z-index: 1;
    padding: 0.25rem 0.65rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(26, 26, 26, 0.6);
    backdrop-filter: blur(4px);
    border-radius: 999px;
}

/* .project-card-body — текстовая часть карточки проекта */
.project-card-body {
    padding: 0.85rem 1rem; /* внутренние отступы */
    border-top: 1px solid rgba(0, 0, 0, 0.04); /* тонкая линия между фото и текстом */
}

/* .project-card-title — название проекта */
.project-card-title {
    font-family: var(--font-serif); /* шрифт с засечками */
    font-size: 1.05rem; /* размер названия */
    margin: 0 0 0.2rem; /* только небольшой отступ снизу */
}

/* .project-card-meta — метаданные проекта (город, площадь и т.д.) */
.project-card-meta {
    font-size: 0.78rem; /* мелкий текст */
    color: var(--color-text-muted); /* приглушённый цвет */
    margin: 0; /* без внешних отступов */
}

/* ——— Услуги + калькулятор ——— */

/* .services-calc-layout — двухколоночная раскладка: услуги слева, калькулятор справа */
.services-calc-layout {
    display: grid; /* CSS Grid */
    grid-template-columns: minmax(0, 1fr) 340px; /* левая колонка гибкая, правая фиксированная 340px */
    gap: 2rem; /* расстояние между колонками */
    align-items: stretch; /* колонки одной высоты — услуги сравниваются с калькулятором */
}

/* .services-col — левая колонка: сетка услуг растягивается, кнопки внизу */
.services-col {
    display: flex; /* flex-колонка */
    flex-direction: column; /* сетка сверху, кнопки снизу */
    min-height: 100%; /* на всю высоту ячейки layout */
}

/* .services-grid — сетка карточек услуг */
.services-grid {
    display: grid; /* CSS Grid */
    grid-template-columns: repeat(3, 1fr); /* 3 колонки → 2 ряда (3 + 2 карточки) */
    grid-template-rows: repeat(2, 1fr); /* два равных ряда по высоте */
    gap: 0.85rem; /* расстояние между карточками */
    flex: 1; /* занимает доступную высоту колонки */
    min-height: 0; /* позволяет сжиматься внутри flex */
}

/* .service-card — карточка одной услуги (белая на песочном фоне, макет v1) */
.service-card {
    background: var(--color-white); /* белый фон карточки */
    border: 1px solid rgba(0, 0, 0, 0.06); /* лёгкая серая рамка */
    box-shadow: var(--shadow); /* мягкая тень для отделения от фона */
    border-radius: var(--radius); /* скругление углов */
    padding: 1.25rem 1rem; /* внутренние отступы */
    display: flex; /* flex для вертикальной раскладки */
    flex-direction: column; /* элементы друг под другом */
    min-height: 0; /* высота задаётся сеткой, не фиксированным min-height */
    height: 100%; /* карточка заполняет ячейку grid */
}

/* .service-card-icon — иконка услуги */
.service-card-icon {
    width: 36px; /* ширина иконки */
    height: 36px; /* высота иконки */
    margin-bottom: 0.85rem; /* отступ до заголовка */
    background-repeat: no-repeat; /* иконка не повторяется */
    background-position: center; /* иконка по центру */
    background-size: contain; /* иконка целиком в блоке */
    opacity: 0.7; /* слегка прозрачная */
}

/* .service-icon-plan — иконка услуги «Планировка» */
.service-icon-plan {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23b8956b' stroke-width='1.5'%3E%3Crect x='4' y='6' width='24' height='20' rx='1'/%3E%3Cpath d='M4 14h24M12 14v12M20 14v12'/%3E%3C/svg%3E"); /* SVG-иконка плана помещения */
}

/* .service-icon-arch — иконка услуги «Архитектура» */
.service-icon-arch {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23b8956b' stroke-width='1.5'%3E%3Cpath d='M6 26V14l10-8 10 8v12'/%3E%3Cpath d='M4 26h24'/%3E%3C/svg%3E"); /* SVG-иконка дома/архитектуры */
}

/* .service-icon-docs — иконка услуги «Документация» */
.service-icon-docs {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23b8956b' stroke-width='1.5'%3E%3Cpath d='M8 4h12l6 6v18a2 2 0 01-2 2H8a2 2 0 01-2-2V6a2 2 0 012-2z'/%3E%3Cpath d='M20 4v6h6M10 16h12M10 20h12M10 24h8'/%3E%3C/svg%3E"); /* SVG-иконка документа */
}

/* .service-icon-supervise — иконка услуги «Авторский надзор» */
.service-icon-supervise {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23b8956b' stroke-width='1.5'%3E%3Ccircle cx='16' cy='12' r='5'/%3E%3Cpath d='M6 28c0-6 4.5-10 10-10s10 4 10 10'/%3E%3Cpath d='M22 8l3-2 2 3'/%3E%3C/svg%3E"); /* SVG-иконка человека с галочкой */
}

/* .service-icon-render — иконка услуги «3D-визуализация» */
.service-icon-render {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23b8956b' stroke-width='1.5'%3E%3Crect x='3' y='8' width='26' height='18' rx='2'/%3E%3Cpath d='M11 8l2-4h6l2 4M16 18a3 3 0 100-6 3 3 0 000 6z'/%3E%3C/svg%3E"); /* SVG-иконка камеры/рендера */
}

/* .service-card-title — название услуги */
.service-card-title {
    font-family: var(--font-serif); /* шрифт с засечками */
    font-size: 1rem; /* размер названия */
    margin-bottom: 0.4rem; /* отступ до описания */
    line-height: 1.2; /* плотный межстрочный интервал */
}

/* .service-card-desc — описание услуги */
.service-card-desc {
    color: var(--color-text-muted); /* приглушённый текст */
    font-size: 0.78rem; /* мелкий шрифт */
    margin-bottom: auto; /* прижимает цену и ссылку к низу карточки (flex-трюк) */
    padding-bottom: 0.75rem; /* отступ перед ценой */
    line-height: 1.45; /* комфортный межстрочный интервал */
}

/* .service-card-price — строка с ценой услуги */
.service-card-price {
    font-size: 0.82rem; /* размер текста цены */
    margin-bottom: 0.5rem; /* отступ до ссылки */
    color: var(--color-text-muted); /* приглушённый цвет */
}

/* .service-card-price strong — выделенная часть цены (сама сумма) */
.service-card-price strong {
    color: var(--color-accent); /* акцентный цвет для суммы */
    font-size: 0.95rem; /* чуть крупнее обычного текста цены */
    font-weight: 700; /* жирный */
}

/* .service-card-link — ссылка «Подробнее» на карточке услуги */
.service-card-link {
    font-size: 0.78rem; /* мелкий текст ссылки */
    font-weight: 600; /* полужирный */
    color: var(--color-accent); /* акцентный цвет ссылки */
}

/* .services-cta-row — ряд кнопок призыва к действию под услугами */
.services-cta-row {
    display: flex; /* кнопки в ряд */
    flex-wrap: wrap; /* перенос при нехватке места */
    gap: 0.75rem; /* расстояние между кнопками */
    margin-top: 1.25rem; /* отступ сверху от сетки услуг */
    flex-shrink: 0; /* кнопки не сжимаются при растягивании сетки */
}

/* .calculator-col — колонка с калькулятором (прилипает при прокрутке) */
.calculator-col {
    position: sticky; /* «липнет» при прокрутке страницы */
    top: 120px; /* отступ от верха окна (ниже шапки) */
}

/* .calculator-widget — блок виджета калькулятора */
.calculator-widget {
    background: var(--color-white); /* белый фон */
    border-radius: var(--radius); /* скругление углов */
    padding: 1.5rem; /* внутренние отступы */
    box-shadow: var(--shadow); /* мягкая тень */
    border: 1px solid #ebe6df; /* тонкая бежевая рамка */
}

/* .calculator-widget-eyebrow — маленькая надпись над заголовком калькулятора */
.calculator-widget-eyebrow {
    font-size: 0.68rem; /* очень мелкий текст */
    letter-spacing: 0.14em; /* разрядка */
    text-transform: uppercase; /* заглавные буквы */
    color: var(--color-accent); /* акцентный цвет */
    margin: 0 0 0.35rem; /* отступ только снизу */
}

/* .calculator-widget-title — заголовок калькулятора */
.calculator-widget-title {
    font-family: var(--font-serif); /* шрифт с засечками */
    font-size: 1.35rem; /* размер заголовка */
    font-weight: 600; /* полужирный */
    margin: 0 0 0.5rem; /* отступ снизу */
    line-height: 1.2; /* плотный межстрочный интервал */
}

/* .calculator-widget-lead — описание под заголовком калькулятора */
.calculator-widget-lead {
    font-size: 0.82rem; /* мелкий текст */
    color: var(--color-text-muted); /* приглушённый цвет */
    margin-bottom: 1.25rem; /* отступ до полей ввода */
    line-height: 1.45; /* комфортный межстрочный интервал */
}

/* .calculator-label — подпись к полю ввода калькулятора */
.calculator-label {
    font-size: 0.72rem; /* мелкий текст */
    font-weight: 600; /* полужирный */
    text-transform: uppercase; /* заглавные буквы */
    letter-spacing: 0.06em; /* разрядка */
    color: var(--color-text-muted); /* приглушённый цвет */
}

/* .calculator-input — поле ввода в калькуляторе */
.calculator-input {
    border-color: #ddd8d0; /* цвет рамки поля */
    border-radius: 6px; /* скругление углов */
    font-size: 0.9rem; /* размер текста в поле */
}

/* .calculator-input:focus — поле ввода калькулятора в фокусе */
.calculator-input:focus {
    border-color: var(--color-accent); /* акцентная рамка */
    box-shadow: 0 0 0 3px rgba(184, 149, 107, 0.12); /* мягкое свечение вокруг поля */
}

/* .calculator-result — блок с результатом расчёта */
.calculator-result {
    background: var(--color-body); /* песочный фон блока результата */
    border-radius: 8px; /* скругление углов */
    padding: 0.9rem 1rem; /* внутренние отступы */
}

/* .calculator-result-label — подпись «Итого» или «Примерная стоимость» */
.calculator-result-label {
    display: block; /* занимает всю строку */
    font-size: 0.75rem; /* мелкий текст */
    color: var(--color-text-muted); /* приглушённый цвет */
    margin-bottom: 0.2rem; /* отступ до суммы */
}

/* .calculator-result-value — числовое значение результата */
.calculator-result-value {
    font-family: var(--font-serif); /* шрифт с засечками для крупной суммы */
    font-size: 1.5rem; /* крупный размер */
    font-weight: 600; /* полужирный */
    color: var(--color-text); /* основной цвет текста */
}

/* .calculator-note — примечание под результатом (дисклеймер) */
.calculator-note {
    font-size: 0.72rem; /* очень мелкий текст */
    color: var(--color-text-muted); /* приглушённый цвет */
    text-align: center; /* текст по центру */
}

/* ——— Калькулятор на главной (на всю ширину) ——— */

.section-calculator {
    padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
}

.section-calculator + .section-map {
    padding-top: 0;
}

.section-calculator + .section-map .container {
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    border-top: 1px solid rgba(44, 36, 24, 0.1);
}

.calculator-layout {
    width: 100%;
}

.calculator-widget--home {
    width: 100%;
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.calculator-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.calculator-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-top: 0.25rem;
}

.calculator-result-row .calculator-result {
    margin: 0;
    flex: 1 1 auto;
}

.calculator-submit {
    flex: 0 0 auto;
    min-width: min(100%, 280px);
    white-space: nowrap;
}

/* ——— Карта (v5) ——— */

/* .map-eyebrow — маленькая надпись над заголовком секции карты */
.map-eyebrow {
    font-size: 0.68rem; /* мелкий текст */
    letter-spacing: 0.15em; /* разрядка */
    text-transform: uppercase; /* заглавные буквы */
    color: var(--color-accent); /* акцентный цвет */
    margin-bottom: 0.5rem; /* отступ до заголовка */
}

/* .map-cities — список городов под картой */
.map-cities {
    display: flex; /* элементы в ряд */
    flex-wrap: wrap; /* перенос на новую строку */
    gap: 0.5rem; /* расстояние между «таблетками» городов */
    margin-top: 1.5rem; /* отступ сверху от карты */
    padding: 0; /* убираем стандартные отступы списка */
    list-style: none; /* убираем маркеры списка */
}

/* .map-cities li — один город в списке */
.map-cities li {
    display: inline-flex;
}

/* .map-city-link — кликабельная «таблетка» города */
.map-city-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    background: var(--color-white);
    border: 1px solid #ddd8d0;
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    text-decoration: none;
    color: var(--color-text);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.map-city-link:hover {
    border-color: var(--color-accent);
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 26, 26, 0.08);
    color: var(--color-text);
}

.map-city-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* .map-pin — маленькая точка-метка на карте или в списке городов */
.map-pin {
    width: 7px; /* ширина точки */
    height: 7px; /* высота точки */
    border-radius: 50%; /* делает квадрат кругом */
    background: #9a6b3a; /* тёмный акцент для контраста */
    box-shadow: 0 0 0 1px #fff; /* белое кольцо вокруг точки */
    flex-shrink: 0; /* точка не сжимается при нехватке места */
}

/* .world-map — контейнер SVG-карты мира (без отдельного фона — сливается с section-sand) */
.world-map {
    overflow: hidden;
    max-width: 100%;
    background: transparent;
}

/* .world-map-composite — карта + слой с точками городов */
.world-map-composite {
    position: relative; /* якорь для overlay */
}

/* .world-map--full — карта во всю ширину блока (без левой колонки) */
.world-map--full {
    width: 100%;
    margin: 0 auto;
}

/* .world-map-land — SVG-карта континентов */
.world-map-land {
    width: 100%; /* на всю ширину блока */
    height: auto; /* пропорциональная высота */
    display: block; /* без лишнего зазора снизу */
}

/* .world-map-markers — точки и подписи поверх карты */
.world-map-markers {
    position: absolute; /* поверх изображения карты */
    inset: 0; /* на весь блок */
    width: 100%; /* совпадает с шириной карты */
    height: 100%; /* совпадает с высотой карты */
    pointer-events: none; /* фон слоя не перехватывает клики */
}

/* .map-marker--link — кликабельный маркер города с проектом */
.map-marker--link {
    pointer-events: auto; /* маркер реагирует на клики */
    cursor: pointer; /* курсор-рука */
    transition: transform 0.15s ease; /* плавное увеличение при наведении */
    transform-box: fill-box; /* трансформации относительно самого маркера */
    transform-origin: center; /* масштаб от центра точки */
}

/* .map-hit — увеличенная прозрачная зона клика вокруг точки */
.map-hit {
    fill: transparent; /* невидимая область */
}

/* Наведение/фокус на кликабельный маркер — подсветка точки и подписи */
.map-marker--link:hover .map-dot,
.map-marker--link:focus-visible .map-dot {
    fill: var(--color-accent, #b8956b); /* акцентный цвет точки */
}

.map-marker--link:hover .map-dot-ring,
.map-marker--link:focus-visible .map-dot-ring {
    fill: rgba(184, 149, 107, 0.55); /* насыщеннее кольцо */
    r: 12; /* кольцо крупнее */
}

.map-marker--link:hover .map-label,
.map-marker--link:focus-visible .map-label {
    fill: #7a4f22; /* тёмно-акцентная подпись */
}

.map-marker--link:focus {
    outline: none; /* убираем стандартную обводку, используем focus-visible */
}

/* .world-map-svg — устаревший inline SVG (оставлен для совместимости) */
.world-map-svg {
    width: 100%; /* SVG на всю ширину контейнера */
    height: auto; /* высота пропорциональна ширине */
    display: block; /* убирает лишний отступ снизу у inline-элемента */
}

/* .map-dot-ring — мягкое кольцо вокруг точки города */
.map-dot-ring {
    fill: rgba(184, 149, 107, 0.35); /* заметнее кольцо */
}

/* .map-dot — точки городов на SVG-карте */
.map-dot {
    fill: #9a6b3a; /* тёмный акцент для контраста на карте */
    stroke: #fff; /* белая обводка */
    stroke-width: 2; /* толще обводка */
}

/* .map-leader — линия-выноска от точки города к смещённому маркеру (для скученных городов) */
.map-leader {
    stroke: rgba(122, 79, 34, 0.55); /* приглушённый акцент */
    stroke-width: 1.25; /* тонкая линия */
    stroke-dasharray: 3 3; /* пунктир, чтобы не спорить с подписями */
}

/* .map-anchor — маленькая точка на фактическом месте города (начало выноски) */
.map-anchor {
    fill: rgba(122, 79, 34, 0.8); /* тёмный акцент */
}

/* .map-label — подписи городов на SVG-карте */
.map-label {
    font-family: var(--font-sans); /* шрифт без засечек */
    font-size: 13px; /* чуть крупнее */
    font-weight: 700; /* жирнее для читаемости */
    fill: #2c2418; /* тёмный текст */
    paint-order: stroke; /* обводка под заливкой */
    stroke: #fff; /* белая обводка вокруг текста */
    stroke-width: 4px; /* толще обводка */
}

/* ——— Форма (лид-форма / заявка) ——— */

/* .lead-form-shell — обёртка формы заявки на всю ширину контейнера */
.lead-form-shell {
    width: 100%;
    max-width: 100%;
}

/* .lead-card — карточка с формой заявки */
.lead-card {
    background: var(--color-white); /* белый фон */
    border-radius: var(--radius); /* скругление углов */
    padding: clamp(1.75rem, 3vw, 2.85rem); /* чуть просторнее на десктопе */
    box-shadow: var(--shadow); /* мягкая тень */
    border: 1px solid #ebe6df; /* тонкая рамка */
}

.lead-card .section-title {
    margin-bottom: 0.65rem;
}

/* .lead-card .form-control — поля ввода внутри формы заявки */
.lead-card .form-control {
    border-color: #ddd8d0; /* цвет рамки полей */
    border-radius: 6px; /* скругление углов */
}

/* .lead-card .form-control:focus — поле формы в фокусе */
.lead-card .form-control:focus {
    border-color: var(--color-accent); /* акцентная рамка */
    box-shadow: 0 0 0 3px rgba(184, 149, 107, 0.12); /* мягкое свечение */
}

/* ——— Footer (подвал сайта) ——— */

/* .site-footer — подвал сайта */
.site-footer {
    background: var(--color-header); /* тёмный фон, как у шапки */
    color: rgba(255, 255, 255, 0.85); /* светлый текст с лёгкой прозрачностью */
}

/* Приписка о разработчике в самом низу подвала */
.footer-credit {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.78rem;
}

.footer-credit a {
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
}

.footer-credit a:hover {
    color: rgba(255, 255, 255, 0.75);
}

/* .footer-logo — логотип в подвале */
.footer-logo {
    line-height: 1;
}

.footer-logo-img {
    display: block;
    width: auto;
    height: 36px;
    max-width: 100%;
}

/* .footer-title — заголовок колонки в подвале */
.footer-title {
    font-size: 0.72rem; /* мелкий текст */
    text-transform: uppercase; /* заглавные буквы */
    letter-spacing: 0.1em; /* разрядка */
    color: rgba(255, 255, 255, 0.45); /* бледный белый */
    margin-bottom: 1rem; /* отступ до ссылок */
}

/* .footer-links a — ссылки в колонках подвала */
.footer-links a {
    color: rgba(255, 255, 255, 0.7); /* полупрозрачный белый */
    font-size: 0.9rem; /* размер текста ссылки */
    display: block; /* каждая ссылка на отдельной строке */
    margin-bottom: 0.35rem; /* отступ между ссылками */
}

/* Навигация в подвале — две колонки, без пустого места справа */
.footer-links--nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 1.5rem;
    max-width: 16rem;
}

.footer-links--nav li {
    margin: 0;
}

.footer-links--nav a {
    margin-bottom: 0;
}

/* .footer-links a:hover — ссылка в подвале при наведении */
.footer-links a:hover {
    color: var(--color-accent); /* акцентный цвет */
}

/* .site-footer a:hover — любая ссылка в подвале при наведении */
.site-footer a:hover {
    color: var(--color-accent); /* акцентный цвет */
}

/* ============================================================
   АДАПТИВ — визуальная подстройка под все устройства
   Стратегия брейкпоинтов (max-width, «сверху вниз»):
     ≥1400px  — большие мониторы (расширяем контейнер)
     ≤1399px  — стандартные десктопы (базовые стили выше)
     ≤1199px  — лендскейп-планшеты / маленькие ноутбуки
     ≤991px   — портретные планшеты
     ≤767px   — крупные телефоны / телефоны landscape
     ≤575px   — обычные телефоны
     ≤400px   — компактные телефоны
     ≤360px   — очень узкие телефоны (Galaxy Fold закрытый и т.п.)
   Отдельно: ориентация landscape с малой высотой + печать.
   ============================================================ */

/* ——— Большие мониторы (≥1400px): шире контейнер, крупнее hero ——— */
@media (min-width: 1400px) {
    :root {
        --container-max: 1320px; /* расширяем контентную область на широких экранах */
    }

    /* .hero-content — чуть шире текстовая колонка баннера */
    .hero-content .hero-title,
    .hero-content .hero-subtitle,
    .hero-content .hero-actions {
        max-width: 720px; /* больше места под заголовок и подзаголовок */
    }
}

/* ——— Очень большие экраны (≥1920px): ограничиваем гигантские отступы ——— */
@media (min-width: 1920px) {
    :root {
        --container-max: 1480px; /* контент не расплывается на 4K-мониторах */
    }

    /* .hero — на очень широких экранах чуть выше, но без полноэкранного баннера */
    .hero {
        height: clamp(480px, 52vh, 660px); /* чуть выше на 4K, но ниже прежнего */
        max-height: 660px; /* потолок hero на больших мониторах */
    }
}

/* ——— Средние десктопы и маленькие ноутбуки (≤1399px) ——— */
@media (max-width: 1399.98px) {
    /* .portfolio-v1 — 6 колонок в ряд слишком тесно: 2 колонки, 3 ряда */
    .portfolio-v1 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portfolio-category {
        height: 260px;
    }

    .portfolio-v1 > .portfolio-category,
    .portfolio-v1 > .project-card {
        height: 260px;
        min-height: 260px;
        max-height: 260px;
    }

    /* .regions-static — 6 карточек в 2 ряда по 3 */
    .regions-static {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ——— Лендскейп-планшеты и маленькие ноутбуки (≤1199px) ——— */
@media (max-width: 1199.98px) {
    /* .services-calc-layout — услуги и калькулятор в одну колонку */
    .services-calc-layout {
        grid-template-columns: 1fr; /* одна колонка на всю ширину */
        align-items: start; /* на планшете колонки не растягиваем */
    }

    /* .services-col — обычный поток без растягивания по высоте */
    .services-col {
        display: block;
        min-height: 0;
    }

    /* .services-grid — сетка услуг: фиксированные ряды по содержимому */
    .services-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 колонки, 2 ряда */
        grid-template-rows: auto; /* высота рядов по контенту */
        flex: none;
        min-height: auto;
    }

    .hero-actions .btn {
        min-width: 0;
    }

    /* Hero на узком десктопе (992–1199): текст не наезжает на стрелки слайдера */
    .hero .hero-content.container {
        left: 0;
        right: 0;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-inline: clamp(4.5rem, 6vw, 5.5rem);
        box-sizing: border-box;
    }

    .hero-title {
        font-size: clamp(2.15rem, 3.8vw, 3.15rem);
    }

    .hero-content .hero-title,
    .hero-content .hero-subtitle,
    .hero-content .hero-actions {
        max-width: min(600px, 100%);
    }

    .hero-actions {
        flex-wrap: wrap;
    }

    /* .service-card — минимальная высота для читаемости на планшете */
    .service-card {
        height: auto;
        min-height: 200px;
    }

    /* .calculator-col — калькулятор больше не «липнет», центрируем его */
    .calculator-col {
        position: static; /* обычное положение в потоке документа */
        max-width: 460px; /* ограничение ширины калькулятора */
        margin-left: auto; /* центрирование по горизонтали */
        margin-right: auto; /* центрирование по горизонтали */
        width: 100%; /* занимает доступную ширину до max-width */
    }

    /* .regions-carousel — на средних экранах видно 4 города */
    .regions-carousel {
        --regions-visible: 4;
    }

    /* .portfolio-v1 — чуть компактнее карточки на узком ноутбуке */
    .portfolio-category {
        height: 240px;
    }

    .portfolio-v1 > .portfolio-category,
    .portfolio-v1 > .project-card {
        height: 240px;
        min-height: 240px;
        max-height: 240px;
    }

    /* Шапка: на узком десктопе прячем email, оставляем телефон и CTA */
    .header-contacts .header-link[href^="mailto"],
    .header-contacts .header-sep {
        display: none;
    }

    .header-link {
        font-size: 0.78rem;
    }

    .header-cta {
        margin-left: 0.35rem;
        padding: 0.4rem 0.75rem;
        font-size: 0.65rem;
    }

    .header-logo-img {
        height: 34px;
        max-width: 9.5rem;
    }

    /* Меню: компактнее на средних экранах */
    .header-nav-list li {
        padding: 0.85rem 0;
    }

    .nav-link-header {
        font-size: 0.72rem;
        letter-spacing: 0.1em;
        padding: 0.3rem 0;
    }

    .header-lang--nav {
        padding: 0.85rem 0;
    }
}

/* ——— Портретные планшеты (≤991px) ——— */
@media (max-width: 991.98px) {
    /* Соцсети слева · логотип по центру · бургер справа */
    .header-top-inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 0.35rem 0.5rem;
    }

    .header-social {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        gap: 0.65rem;
        margin-left: clamp(0.25rem, 2.5vw, 0.65rem);
    }

    /* .header-logo-group — центральная колонка: логотип + RU|EN */
    .header-logo-group {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        max-width: 100%;
    }

    /* Мобильная кнопка-бургер — правая колонка */
    .header-top-inner > .btn {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }

    /* .header-nav — скрываем горизонтальное меню на планшетах и ниже:
       навигация доступна через кнопку-бургер (offcanvas), чтобы не дублировать. */
    .header-nav {
        display: none; /* прячем нижнюю полосу меню */
    }

    /* .hero — баннер компактнее на планшетах */
    .hero {
        height: clamp(380px, 48vh, 520px); /* ниже, чем на десктопе */
        max-height: 520px; /* потолок на планшете */
    }

    .hero-dual {
        height: clamp(400px, 50vh, 540px);
        max-height: 540px;
        --hero-dual-bar-space: 4.35rem;
    }

    .hero-panel-caption {
        bottom: calc(var(--hero-dual-bar-space) + 1.35rem);
    }

    .hero-panel-title {
        font-size: clamp(1.05rem, 3.2vw, 1.45rem);
    }

    .hero-dual-actions .btn {
        min-width: 0;
        padding-inline: 0.75rem;
        font-size: 0.74rem;
    }

    .hero-dual-actions .btn.btn-lg {
        font-size: 0.76rem;
        padding: 0.42rem 0.85rem;
    }

    /* .services-grid — услуги: 3 колонки → 2 */
    .services-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки */
        grid-template-rows: auto; /* ряды по содержимому */
    }

    /* .regions-carousel — на планшете видно 3 города */
    .regions-carousel {
        --regions-visible: 3;
    }

    /* .about-image — планшет: только пропорции, без max-height (ломает ширину) */
    .about-image {
        aspect-ratio: 16 / 10;
    }

    /* Hero на планшете: контент и кнопки не вылезают за край */
    .hero .hero-content.container {
        top: auto;
        bottom: 2.5rem;
        left: 0;
        right: 0;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        transform: none;
        padding-inline: 1rem;
        box-sizing: border-box;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
        max-width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
        min-width: 0;
        flex: none;
    }

    .hero-title {
        font-size: clamp(2.1rem, 4.8vw, 3.25rem);
    }

    .services-cta-row {
        flex-direction: column;
    }

    .services-cta-row .btn {
        width: 100%;
    }
}

/* ——— Крупные телефоны и телефоны в landscape (≤767px) ——— */
@media (max-width: 767.98px) {
    /* Bootstrap-строки «О нас» и «Карта» складываются в один столбец сами
       (col-lg-*), здесь правим только наши собственные блоки. */

    /* .section-sand и .section-white — уменьшаем отступы секций */
    .section-sand,
    .section-white {
        padding: 3rem 0; /* меньше вертикальных отступов */
    }

    /* .section-services-calc — тот же отступ (у секции услуг свой класс) */
    .section-services-calc,
    .section-calculator {
        padding: 3rem 0; /* выравниваем отступы со всеми секциями */
    }

    .calculator-form-grid {
        grid-template-columns: 1fr;
    }

    .calculator-result-row {
        flex-direction: column;
        align-items: stretch;
    }

    .calculator-submit {
        width: 100%;
        min-width: 0;
    }

    /* .regions-carousel — на телефоне видно 2 города */
    .regions-carousel {
        --regions-visible: 2;
        --regions-gap: 0.65rem;
        padding: 0 2.35rem;
    }

    /* .region-card — компактнее карточки регионов */
    .region-card {
        min-height: 140px; /* меньше минимальная высота */
        padding: 1.1rem 0.5rem; /* меньше внутренние отступы */
    }

    /* .portfolio-v1 — на телефоне одна колонка */
    .portfolio-v1 {
        grid-template-columns: 1fr; /* все карточки столбиком */
    }

    /* .portfolio-category — высота категории на мобильном */
    .portfolio-category {
        height: 200px; /* компактная, но читаемая высота */
    }

    .portfolio-v1 > .portfolio-category,
    .portfolio-v1 > .project-card {
        height: 200px;
        min-height: 200px;
        max-height: 200px;
    }

    /* .services-grid — услуги в одну колонку */
    .services-grid {
        grid-template-columns: 1fr; /* 1 колонка */
        grid-template-rows: auto;
    }

    /* .service-card — карточка услуги: вертикальная раскладка */
    .service-card {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
    }

    .service-card-icon {
        margin-bottom: 0.85rem;
    }

    .service-card-title,
    .service-card-desc,
    .service-card-price,
    .service-card-link {
        flex-basis: auto;
    }

    /* .hero-actions .btn — кнопки баннера на всю ширину */
    .hero-actions .btn {
        width: 100%; /* кнопка на всю ширину */
        min-width: 0; /* убираем минимальную ширину */
    }

    /* Hero dual: один проект на весь экран, второй — по стрелкам */
    .hero-dual {
        height: clamp(460px, 68vh, 620px);
        max-height: 620px;
        --hero-dual-bar-space: 6.75rem;
    }

    .hero-dual .hero-panels {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

    .hero-dual:not(.hero--single) .hero-panel {
        grid-row: 1;
        grid-column: 1;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.35s ease;
    }

    .hero-dual:not(.hero--single) .hero-panel.hero-panel--active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        z-index: 1;
    }

    .hero-dual.hero--single {
        height: clamp(420px, 62vh, 560px);
        max-height: 560px;
        --hero-dual-bar-space: 6.75rem;
    }

    .hero-panel {
        border-right: 0;
        border-bottom: 0;
    }

    .hero-panel-caption {
        bottom: calc(var(--hero-dual-bar-space) + 1.65rem);
        left: 0.85rem;
        right: 3.25rem;
    }

    .hero-panel:has(.hero-panel-dots) .hero-panel-caption {
        bottom: calc(var(--hero-dual-bar-space) + 2.35rem);
    }

    .hero-panel-dots {
        bottom: calc(var(--hero-dual-bar-space) + 0.55rem);
    }

    .hero-panel-title {
        font-size: clamp(1.05rem, 4.8vw, 1.35rem);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .hero-panel-meta {
        font-size: 0.78rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hero-dual-bar {
        padding: 0.5rem 0.85rem 0.75rem;
    }

    .hero-dual-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        gap: 0.4rem;
    }

    .hero-dual-actions .btn:last-child {
        grid-column: 1 / -1;
    }

    .hero-dual-actions .btn.btn-lg {
        font-size: 0.74rem;
        padding: 0.42rem 0.75rem;
        line-height: 1.25;
    }

    .hero-dual:not(.hero--single) .hero-nav {
        display: block;
    }

    .hero-dual:not(.hero--single) .hero-nav-btn {
        width: 2.5rem;
        height: 2.5rem;
        top: 42%;
    }

    .hero .hero-content.container {
        top: auto;
        bottom: 2.5rem;
        left: 0;
        right: 0;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-inline: 1rem;
        transform: none;
        box-sizing: border-box;
    }

    .hero-nav {
        display: none;
    }

    .hero-trust {
        font-size: 0.78rem;
        margin-bottom: 1rem;
    }

    /* .lead-card — компактнее форма заявки */
    .lead-card {
        padding: 1.5rem; /* меньше внутренние отступы */
    }

    /* .services-cta-row .btn — кнопки под услугами на всю ширину */
    .services-cta-row .btn {
        width: 100%; /* кнопка на всю ширину */
    }

    /* .map-cities — «таблетки» городов чуть плотнее */
    .map-cities {
        gap: 0.4rem; /* меньше зазор между городами */
    }
}

/* ——— Обычные телефоны (≤575px) ——— */
@media (max-width: 575.98px) {
    /* .header-top-inner — компактнее верхняя полоса шапки */
    .header-top-inner {
        padding: 0.5rem 0; /* меньше вертикальные отступы */
        gap: 0.5rem; /* меньше зазор между колонками */
    }

    .header-logo-img {
        height: clamp(26px, 7vw, 32px);
        max-width: min(100%, 8.75rem);
    }

    .header-social {
        gap: 0.5rem;
    }

    .regions-static > * {
        min-width: 0;
    }

    .header-top-inner > .btn {
        flex-shrink: 0;
        padding-inline: 0.65rem;
    }

    /* .hero — на телефоне выше: две кнопки + строка доверия */
    .hero {
        height: clamp(460px, 62vh, 560px);
        max-height: 560px;
    }

    .hero .hero-content.container {
        bottom: 2.25rem;
    }

    .hero-title {
        font-size: clamp(1.65rem, 7vw, 2.1rem);
        margin-bottom: 0.4rem;
    }

    .hero-subtitle {
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
        max-width: none;
    }

    .hero-brand {
        font-size: 0.82rem;
        margin-bottom: 0.3rem;
    }

    /* .hero-content — на телефоне без лишних отступов */
    .hero-content {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* .hero-dots — точки слайдера чуть выше на мобильном */
    .hero-dots {
        bottom: 1.25rem; /* меньше отступ от низа экрана */
    }

    .hero-nav-btn {
        width: 2.35rem;
        height: 2.35rem;
    }

    /* .regions-carousel — компактнее стрелки на мобильном */
    .regions-carousel {
        padding: 0 2.1rem;
    }

    .regions-carousel-btn {
        width: 2.15rem;
        height: 2.15rem;
    }

    /* .region-card-icon — уменьшаем иконку города */
    .region-card-icon {
        width: 44px; /* меньше ширина иконки */
        height: 44px; /* меньше высота иконки */
    }

    /* .service-card — горизонтальная карточка: иконка + текст в ряд */
    .service-card {
        flex-direction: row; /* иконка слева, текст справа */
        flex-wrap: wrap; /* цена/ссылка переносятся вниз */
        align-items: flex-start; /* выравнивание по верху */
        gap: 0 0.9rem; /* горизонтальный зазор между иконкой и текстом */
    }

    .service-card-icon {
        margin-bottom: 0; /* убираем нижний отступ (теперь ряд) */
        flex-shrink: 0; /* фиксированный размер иконки */
    }

    /* Заголовок и описание занимают оставшуюся ширину рядом с иконкой */
    .service-card-title,
    .service-card-desc {
        flex: 1 1 calc(100% - 36px - 0.9rem);
        min-width: 0;
    }

    /* Цена и ссылка — на всю ширину под текстом */
    .service-card-price,
    .service-card-link {
        flex-basis: 100%; /* полная ширина карточки */
    }

    .footer-links--nav {
        max-width: 100%;
    }

    .map-label {
        font-size: 9px;
    }

    /* .calculator-widget — меньше внутренние отступы виджета */
    .calculator-widget {
        padding: 1.25rem; /* компактнее калькулятор */
    }

    /* .lead-card — ещё компактнее форма */
    .lead-card {
        padding: 1.25rem; /* меньше отступы */
    }

    /* Кнопки Bootstrap btn-lg — уменьшаем на телефоне, чтобы не были громоздкими */
    .btn-lg {
        font-size: 0.95rem; /* меньше текст */
        padding: 0.6rem 1.1rem; /* меньше внутренние отступы */
    }
}

/* ——— Компактные телефоны (≤400px) ——— */
@media (max-width: 400px) {
    /* .header-cta и контакты уже скрыты на этих экранах через d-none.
       Здесь дожимаем сетку регионов и типографику. */

    /* .section-title — чуть меньше заголовки секций */
    .section-title {
        font-size: clamp(1.6rem, 6vw, 2rem); /* адаптивный, но компактнее */
    }

    /* .regions-grid — регионы: одна колонка на очень узких экранах слишком высоко,
       поэтому оставляем 2, но уменьшаем внутренности */
    .region-card {
        min-height: 120px; /* ещё компактнее */
        padding: 0.9rem 0.4rem; /* меньше отступы */
    }

    /* .region-name — уменьшаем название города */
    .region-name {
        font-size: 0.75rem; /* компактный текст */
    }
}

/* ——— Очень узкие телефоны (≤360px): Galaxy Fold закрытый и подобные ——— */
@media (max-width: 360px) {
    /* .container — минимальные боковые отступы, чтобы не терять ширину */
    .container {
        --container-pad: 0.75rem;
        padding-left: var(--container-pad);
        padding-right: var(--container-pad);
    }

    .header-top-inner {
        gap: 0.25rem 0.35rem;
    }

    .header-social {
        gap: 0.4rem;
    }

    .header-logo-img {
        height: 26px;
        max-width: 8rem;
    }

    /* .regions-carousel — на очень узких экранах одна карточка с «подглядыванием» следующей */
    .regions-carousel {
        --regions-visible: 1.15;
        padding: 0 1.85rem;
    }
}

/* ——— Телефоны в горизонтальной ориентации с малой высотой ——— */
/* Например, iPhone SE landscape: широкий, но очень низкий экран.
   Полноэкранный hero мешает — уменьшаем его высоту. */
@media (max-height: 500px) and (orientation: landscape) {
    /* .hero — ограничиваем высоту на низком landscape-экране */
    .hero {
        height: 360px; /* фиксированная разумная высота */
        max-height: 360px; /* не растягивать выше */
    }

    /* .hero-content — без лишних отступов, центр задаёт .hero */
    .hero-content {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* ——— Печать страницы (Ctrl+P): убираем тёмные фоны и лишние блоки ——— */
@media print {
    /* Шапка, подвал и калькулятор не нужны на распечатке */
    .site-header,
    .site-footer,
    .section-services-calc .calculator-col,
    .section-calculator,
    .hero-dots {
        display: none; /* скрываем при печати */
    }

    /* body — белый фон и чёрный текст для экономии чернил */
    body {
        background: #fff; /* белый фон */
        color: #000; /* чёрный текст */
    }

    /* Секции без больших отступов на бумаге */
    .section-sand,
    .section-white,
    .section-services-calc {
        padding: 1rem 0; /* компактные отступы для печати */
        background: #fff; /* белый фон вместо песочного */
    }
}

/* ——————————————————————————————————————————————————————————
   ВНУТРЕННИЕ СТРАНИЦЫ (услуги, портфолио, регионы, о нас, контакты, юр.)
   —————————————————————————————————————————————————————————— */

/* .page-hero — тёмная шапка внутренней страницы (заголовок + хлебные крошки) */
.page-hero {
    background: var(--color-header); /* тёмный фон как у шапки сайта */
    color: #fff; /* белый текст */
    padding: 3rem 0 2.5rem; /* вертикальные отступы */
}

/* .breadcrumbs — навигационная цепочка «Главная / Раздел» */
.breadcrumbs {
    display: flex; /* элементы в ряд */
    flex-wrap: wrap; /* перенос на узких экранах */
    gap: 0.5rem; /* расстояние между элементами */
    font-size: 0.8rem; /* мелкий текст */
    color: rgba(255, 255, 255, 0.55); /* приглушённый белый */
    margin-bottom: 0.9rem; /* отступ до заголовка */
}

.breadcrumbs a {
    color: rgba(255, 255, 255, 0.75); /* ссылки чуть ярче текста */
}

.breadcrumbs a:hover {
    color: var(--color-accent); /* акцент при наведении */
}

.breadcrumbs .sep {
    opacity: 0.4; /* разделитель «/» бледнее */
}

/* .page-hero-title — крупный заголовок страницы */
.page-hero-title {
    font-family: var(--font-serif); /* шрифт с засечками */
    font-size: clamp(2rem, 4vw, 3rem); /* адаптивный размер */
    font-weight: 600; /* полужирный */
    margin: 0 0 0.5rem; /* отступ снизу */
    line-height: 1.1; /* плотный интервал */
}

/* .page-hero-lead — вводный текст под заголовком */
.page-hero-lead {
    color: rgba(255, 255, 255, 0.78); /* приглушённый белый */
    max-width: 62ch; /* удобная длина строки */
    margin: 0; /* без внешних отступов */
    font-size: 1rem; /* базовый размер */
}

/* Bootstrap .text-muted внутри тёмного hero — переопределяем контраст */
.page-hero .text-muted {
    color: rgba(255, 255, 255, 0.62) !important;
}

/* .page-section — универсальная секция контента внутренней страницы */
.page-section {
    padding: 3.5rem 0; /* вертикальные отступы */
}

/* Центрирование section-lead, когда нужно по центру */
.section-lead.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* .services-page-grid — сетка карточек услуг (3 колонки) */
.services-page-grid {
    display: grid; /* CSS Grid */
    grid-template-columns: repeat(3, 1fr); /* 3 равные колонки */
    gap: 0.85rem; /* расстояние между карточками */
}

.services-page-grid .service-card {
    height: 100%; /* карточки одной высоты в ряду */
    min-height: 240px; /* минимальная высота */
}

/* .projects-grid — сетка карточек проектов портфолио (4 колонки) */
.projects-grid {
    display: grid; /* CSS Grid */
    grid-template-columns: repeat(4, 1fr); /* 4 равные колонки */
    gap: 0.85rem; /* расстояние между карточками */
}

/* .filter-tabs — фильтр по типу проектов */
.filter-tabs {
    display: flex; /* «таблетки» в ряд */
    flex-wrap: wrap; /* перенос на узких экранах */
    gap: 0.5rem; /* расстояние между кнопками */
    margin-bottom: 1.75rem; /* отступ до сетки */
}

.filter-tabs--rooms {
    margin-top: -0.75rem;
}

.filter-tab-count {
    opacity: 0.65;
    font-weight: 500;
    margin-left: 0.15rem;
}

/* Якорь результатов фильтра: учёт липкой шапки */
.portfolio-results {
    scroll-margin-top: 5.5rem;
}

/* .filter-tab — одна кнопка фильтра */
.filter-tab {
    padding: 0.5rem 1.15rem; /* внутренние отступы */
    border-radius: 999px; /* форма капсулы */
    border: 1px solid #ddd8d0; /* светлая рамка */
    background: var(--color-white); /* белый фон */
    font-size: 0.85rem; /* размер текста */
    font-weight: 600; /* полужирный */
    color: var(--color-text); /* тёмный текст */
    transition: background 0.2s, color 0.2s, border-color 0.2s; /* плавная смена состояния */
}

.filter-tab.active,
.filter-tab:hover {
    background: var(--color-accent); /* акцентный фон */
    border-color: var(--color-accent); /* акцентная рамка */
    color: #fff; /* белый текст */
}

/* .stat-grid — сетка блоков с цифрами (О нас) */
.stat-grid {
    display: grid; /* CSS Grid */
    grid-template-columns: repeat(4, 1fr); /* 4 колонки */
    gap: 1rem; /* расстояние между блоками */
}

/* .stat-card — карточка одной цифры */
.stat-card {
    text-align: center; /* по центру */
    background: var(--color-white); /* белый фон */
    border-radius: var(--radius); /* скругление */
    padding: 1.5rem 1rem; /* внутренние отступы */
    box-shadow: var(--shadow); /* мягкая тень */
}

/* .stat-value — крупное число */
.stat-value {
    font-family: var(--font-serif); /* шрифт с засечками */
    font-size: clamp(1.8rem, 3vw, 2.6rem); /* адаптивный размер */
    font-weight: 600; /* полужирный */
    color: var(--color-accent); /* акцентный цвет */
    line-height: 1.1; /* плотный интервал */
}

/* .stat-label — подпись под числом */
.stat-label {
    font-size: 0.82rem; /* мелкий текст */
    color: var(--color-text-muted); /* приглушённый цвет */
}

/* .step-grid — сетка этапов работы */
.step-grid {
    display: grid; /* CSS Grid */
    grid-template-columns: repeat(3, 1fr); /* 3 колонки */
    gap: 1rem; /* расстояние между этапами */
}

/* .step-card — карточка одного этапа */
.step-card {
    background: var(--color-white); /* белый фон */
    border-radius: var(--radius); /* скругление */
    padding: 1.5rem; /* внутренние отступы */
    box-shadow: var(--shadow); /* мягкая тень */
}

/* .step-num — номер этапа */
.step-num {
    font-family: var(--font-serif); /* шрифт с засечками */
    font-size: 1.6rem; /* размер номера */
    font-weight: 700; /* жирный */
    color: var(--color-accent); /* акцентный цвет */
}

/* .step-title — заголовок этапа */
.step-title {
    font-family: var(--font-serif); /* шрифт с засечками */
    font-size: 1.15rem; /* размер заголовка */
    margin: 0.4rem 0 0.35rem; /* отступы */
}

/* .step-text — описание этапа */
.step-text {
    font-size: 0.85rem; /* мелкий текст */
    color: var(--color-text-muted); /* приглушённый цвет */
    margin: 0; /* без отступов */
}

/* .value-card — карточка принципа/ценности (О нас) */
.value-card {
    background: var(--color-body); /* песочный фон */
    border-radius: var(--radius); /* скругление */
    padding: 1.75rem; /* внутренние отступы */
    height: 100%; /* одной высоты в ряду */
    border: 1px solid rgba(0, 0, 0, 0.04); /* лёгкая рамка */
}

.value-title {
    font-family: var(--font-serif); /* шрифт с засечками */
    font-size: 1.25rem; /* размер заголовка */
    margin: 0 0 0.5rem; /* отступ снизу */
}

.value-text {
    font-size: 0.9rem; /* мелкий текст */
    color: var(--color-text-muted); /* приглушённый цвет */
    margin: 0; /* без отступов */
}

/* Плитки «Наша команда» — симметричная сетка */
.about-moments-section {
    padding-top: 0.5rem;
}

.about-moments-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
}

.about-moments-tile {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--color-body);
    flex: 0 0 calc((100% - 1.7rem) / 3);
    max-width: calc((100% - 1.7rem) / 3);
    aspect-ratio: 4 / 3;
}

.about-moments-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.about-moments-tile:hover img {
    transform: scale(1.04);
}

@media (max-width: 767.98px) {
    .about-moments-grid {
        gap: 0.65rem;
    }

    .about-moments-tile {
        flex-basis: calc((100% - 0.65rem) / 2);
        max-width: calc((100% - 0.65rem) / 2);
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 479.98px) {
    .about-moments-tile {
        flex-basis: 100%;
        max-width: 100%;
        aspect-ratio: 16 / 11;
    }
}

/* «Мы работали» — сетка логотипов клиентов */
.about-clients-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.about-clients-item {
    flex: 0 0 calc((100% - 5rem) / 6);
    max-width: calc((100% - 5rem) / 6);
    min-width: 130px;
    aspect-ratio: 3 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.1rem 1.4rem;
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.about-clients-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.72;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.about-clients-item:hover img {
    filter: grayscale(0);
    opacity: 1;
}

@media (max-width: 991.98px) {
    .about-clients-item {
        flex-basis: calc((100% - 3rem) / 4);
        max-width: calc((100% - 3rem) / 4);
    }
}

@media (max-width: 767.98px) {
    .about-clients-item {
        flex-basis: calc((100% - 2rem) / 3);
        max-width: calc((100% - 2rem) / 3);
        min-width: 0;
        padding: 0.85rem 1rem;
    }
}

@media (max-width: 479.98px) {
    .about-clients-item {
        flex-basis: calc((100% - 1rem) / 2);
        max-width: calc((100% - 1rem) / 2);
    }
}

/* «Отзывы клиентов» на странице о студии */
.about-reviews-stars {
    color: var(--color-accent);
    letter-spacing: 0.1em;
    margin-right: 0.35rem;
}

/* .contact-grid — сетка контактных карточек */
.contact-grid {
    display: grid; /* CSS Grid */
    grid-template-columns: repeat(3, 1fr); /* 3 колонки */
    gap: 1rem; /* расстояние между карточками */
}

/* .contact-card — карточка одного канала связи */
.contact-card {
    background: var(--color-white); /* белый фон */
    border-radius: var(--radius); /* скругление */
    padding: 1.75rem; /* внутренние отступы */
    box-shadow: var(--shadow); /* мягкая тень */
    text-align: center; /* по центру */
}

/* .contact-card-label — подпись канала (Телефон, Почта…) */
.contact-card-label {
    font-size: 0.72rem; /* очень мелкий текст */
    text-transform: uppercase; /* заглавные буквы */
    letter-spacing: 0.12em; /* разрядка */
    color: var(--color-accent); /* акцентный цвет */
    margin-bottom: 0.5rem; /* отступ до значения */
}

.contact-card a {
    font-size: 1.05rem; /* крупнее основной ссылки */
    font-weight: 600; /* полужирный */
    color: var(--color-text); /* тёмный текст */
}

.contact-card a:hover {
    color: var(--color-accent); /* акцент при наведении */
}

/* .contact-card-note — примечание под контактом */
.contact-card-note {
    font-size: 0.78rem; /* мелкий текст */
    color: var(--color-text-muted); /* приглушённый цвет */
    margin: 0.5rem 0 0; /* отступ сверху */
}

/* .faq-list — список вопросов и ответов */
.faq-list {
    max-width: 820px; /* ограничение ширины для читаемости */
    margin: 0 auto; /* центрирование */
}

/* .faq-item — один вопрос-ответ */
.faq-item {
    background: var(--color-white); /* белый фон */
    border-radius: var(--radius); /* скругление */
    box-shadow: var(--shadow); /* мягкая тень */
    padding: 1.15rem 1.35rem; /* внутренние отступы */
    margin-bottom: 0.75rem; /* отступ между вопросами */
}

.faq-q {
    font-family: var(--font-serif); /* шрифт с засечками */
    font-size: 1.15rem; /* размер вопроса */
    margin: 0 0 0.4rem; /* отступ до ответа */
}

.faq-a {
    font-size: 0.9rem; /* мелкий текст */
    color: var(--color-text-muted); /* приглушённый цвет */
    margin: 0; /* без отступов */
}

/* Отзывы клиентов */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 1.25rem;
}

.review-card {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.35rem 1.5rem;
    height: 100%;
}

.review-rating {
    color: var(--color-accent);
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.review-star {
    color: #ddd;
}

.review-star.is-filled {
    color: var(--color-accent);
}

.review-text {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 1rem;
    color: var(--color-text);
}

.review-author {
    font-size: 0.88rem;
    color: var(--color-text-muted);
}

.review-project a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.service-hero-price {
    margin-top: 0.75rem;
    font-size: 1.1rem;
}

.region-content {
    max-width: 820px;
}

/* .prose — блок «длинного» текста (юридические страницы) */
.prose {
    max-width: 820px; /* ограничение ширины строки */
    margin: 0 auto; /* центрирование */
    color: var(--color-text); /* основной цвет */
}

.prose h2 {
    font-family: var(--font-serif); /* шрифт с засечками */
    font-size: 1.4rem; /* размер подзаголовка */
    margin: 1.75rem 0 0.6rem; /* отступы */
}

.prose p,
.prose li {
    color: var(--color-text-muted); /* приглушённый цвет */
    font-size: 0.95rem; /* чуть меньше основного */
}

.prose strong,
.prose b {
    color: var(--color-text);
    font-weight: 700;
}

.prose em,
.prose i {
    font-style: italic;
}

.prose u {
    text-decoration: underline;
}

.prose s,
.prose strike {
    text-decoration: line-through;
}

.prose a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.prose ul {
    padding-left: 1.15rem; /* отступ под маркеры */
}

.prose ol {
    padding-left: 1.25rem;
}

.prose li {
    margin-bottom: 0.4rem; /* отступ между пунктами */
}

/* .geo-pills — «таблетки» дополнительных направлений */
.geo-pills {
    display: flex; /* в ряд */
    flex-wrap: wrap; /* перенос */
    gap: 0.5rem; /* расстояние между таблетками */
}

/* .geo-pill — одно направление */
.geo-pill {
    background: var(--color-white); /* белый фон */
    border: 1px solid #ddd8d0; /* светлая рамка */
    border-radius: 999px; /* форма капсулы */
    padding: 0.4rem 1rem; /* внутренние отступы */
    font-size: 0.85rem; /* размер текста */
}

/* ——— Адаптив внутренних страниц ——— */
@media (max-width: 991.98px) {
    .services-page-grid,
    .projects-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки на планшете */
    }

    .stat-grid,
    .step-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки */
    }

    .contact-grid {
        grid-template-columns: 1fr; /* контакты столбиком */
    }
}

@media (max-width: 575.98px) {
    .services-page-grid,
    .projects-grid,
    .step-grid {
        grid-template-columns: 1fr; /* всё в одну колонку на телефоне */
    }

    /* Цифры на «О нас» — сетка 2×2, а не длинный столбик */
    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
    }

    .page-hero {
        padding: 2.25rem 0 2rem; /* компактнее шапка страницы */
    }

    .page-section {
        padding: 2.5rem 0; /* компактнее секции */
    }
}

/* ============================================================= */
/* Страница отдельного проекта + галерея-слайдер (стиль Ajax)     */
/* ============================================================= */

/* Мета-строка проекта в шапке (тип · город · площадь · год) */
.project-hero .breadcrumbs { margin-bottom: 1rem; }

.project-hero .project-meta-label {
    color: rgba(255, 255, 255, 0.55);
}

.project-hero .project-meta-value {
    color: rgba(255, 255, 255, 0.95);
}

.project-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
}

.project-meta-row li {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.project-meta-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

.project-meta-value {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--color-text);
}

/* ——— Галерея ——— */
.gallery {
    --gallery-h: clamp(360px, 62vh, 640px);
    margin-top: 1.5rem;
}

.gallery-stage {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: #14110d;
    box-shadow: 0 18px 48px rgba(20, 17, 13, 0.28);
}

.gallery-viewport {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
}

.gallery-viewport::-webkit-scrollbar { display: none; }
.gallery-viewport.is-dragging { cursor: grabbing; scroll-behavior: auto; }

.gallery-track {
    display: contents;
}

.gallery-slide {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    height: var(--gallery-h);
    position: relative;
}

.gallery-slide[hidden] { display: none; }

.gallery-slide-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Размытый фон-подложка для «letterbox» (как в премиум-галереях) */
.gallery-slide-bg {
    position: absolute;
    inset: -5%;
    background-size: cover;
    background-position: center;
    filter: blur(28px) brightness(0.55);
    transform: scale(1.1);
    z-index: 0;
}

.gallery-media {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    -webkit-user-drag: none;
    user-select: none;
}

/* Reels / видео — заполняет сцену, сохраняя пропорции (и 16:9, и 9:16) */
.gallery-slide-inner--reel {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gallery-video {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: #000;
}

.gallery-empty {
    color: rgba(255,255,255,0.6);
    font-size: 0.95rem;
}

/* Кнопки play/sound на reels */
.gallery-video-toggle,
.gallery-sound-toggle {
    position: absolute;
    z-index: 3;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.2s ease, transform 0.2s ease;
}

.gallery-video-toggle {
    inset: 0;
    margin: auto;
    width: 68px;
    height: 68px;
}
.gallery-video-toggle:hover { background: rgba(0,0,0,0.65); transform: scale(1.05); }

.gallery-sound-toggle {
    right: 1rem;
    bottom: 1rem;
    width: 42px;
    height: 42px;
}
.gallery-sound-toggle:hover { background: rgba(0,0,0,0.7); }

/* Переключение иконок play/pause и звука */
.gallery-video-toggle .icon-pause,
.gallery-slide.is-playing .gallery-video-toggle .icon-play { display: none; }
.gallery-slide.is-playing .gallery-video-toggle .icon-pause { display: block; }
.gallery-slide.is-playing .gallery-video-toggle { opacity: 0; }
.gallery-slide.is-playing:hover .gallery-video-toggle { opacity: 1; }

.gallery-sound-toggle .icon-sound { display: none; }
.gallery-slide.is-unmuted .gallery-sound-toggle .icon-sound { display: block; }
.gallery-slide.is-unmuted .gallery-sound-toggle .icon-muted { display: none; }

/* Стрелки навигации */
.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    color: #14110d;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.gallery-nav:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.gallery-prev { left: 1rem; }
.gallery-next { right: 1rem; }
.gallery-nav[disabled] { opacity: 0; pointer-events: none; }

/* Счётчик и бейдж типа */
.gallery-counter {
    position: absolute;
    right: 1rem;
    top: 1rem;
    z-index: 3;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    backdrop-filter: blur(4px);
}

.gallery-badge {
    position: absolute;
    left: 1rem;
    top: 1rem;
    z-index: 3;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Подпись под слайдом */
.gallery-caption {
    min-height: 1.5rem;
    margin: 1rem 0 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}
.gallery-caption:empty { display: none; }

/* Фильтры категорий */
.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.gallery-filters--rooms {
    margin-top: 0.5rem;
}

.gallery-filter {
    border: 1px solid #ddd8d0;
    background: var(--color-white);
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    font-size: 0.85rem;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.2s ease;
}
.gallery-filter:hover { border-color: var(--color-accent); }
.gallery-filter.active {
    background: var(--color-text);
    border-color: var(--color-text);
    color: #fff;
}
.gallery-filter-count {
    opacity: 0.6;
    font-size: 0.78rem;
    margin-left: 0.15rem;
}

/* Лента миниатюр */
.gallery-thumbs {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.25rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
}

.gallery-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 92px;
    height: 68px;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    background: #f0ece5;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.gallery-thumb[hidden] { display: none; }
.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gallery-thumb:hover { transform: translateY(-2px); }
.gallery-thumb.active { border-color: var(--color-accent); }

.gallery-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.7rem;
    color: var(--color-text-muted);
}

.gallery-thumb-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
}

.gallery-thumb-tag {
    position: absolute;
    left: 4px;
    bottom: 4px;
    font-size: 0.6rem;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ——— Текстовые блоки проекта ——— */
.project-about-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.project-about-layout--text-only {
    grid-template-columns: 1fr;
}

.project-about-main .project-content {
    max-width: none;
    margin: 0;
}

.project-content { max-width: 900px; margin: 0 auto; }
.project-content-block { margin-bottom: 2rem; }

/* Текст сразу под «О проекте», по одной левой линии с заголовком */
.project-content-block--about .section-title {
    margin: 0 0 1rem;
}

.project-content-block--about .prose {
    margin: 0;
    max-width: none;
}

.project-content-block--about .prose > *:first-child {
    margin-top: 0;
}

.project-content-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
.project-block-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--color-accent);
    display: inline-block;
}

.project-authors-text {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.55;
}

.project-floor-plan {
    position: sticky;
    top: 5.5rem;
}

.project-floor-plan__caption {
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.project-floor-plan__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.project-floor-plan__frame {
    background: var(--color-white);
    border: 1px solid rgba(44, 36, 24, 0.12);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

.project-floor-plan__label {
    margin: 0;
    padding: 0.55rem 0.75rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    border-top: 1px solid rgba(44, 36, 24, 0.08);
    background: rgba(255, 255, 255, 0.92);
}

.project-floor-plan__open {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.project-floor-plan__open:hover .project-floor-plan__zoom {
    opacity: 1;
}

.project-floor-plan__zoom {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(26, 26, 26, 0.72);
    color: #fff;
    opacity: 0.88;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.project-floor-plan__open:hover .project-floor-plan__zoom {
    transform: scale(1.05);
}

.project-floor-plan__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.project-floor-plan__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    width: 100%;
    min-height: 280px;
    padding: 1.5rem;
    color: rgba(107, 97, 96, 0.72);
    text-align: center;
    background:
        linear-gradient(135deg, rgba(184, 149, 107, 0.06), rgba(255, 255, 255, 0.9)),
        repeating-linear-gradient(
            0deg,
            rgba(44, 36, 24, 0.04),
            rgba(44, 36, 24, 0.04) 1px,
            transparent 1px,
            transparent 24px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(44, 36, 24, 0.04),
            rgba(44, 36, 24, 0.04) 1px,
            transparent 1px,
            transparent 24px
        );
}

.project-floor-plan__placeholder span {
    font-size: 0.88rem;
    line-height: 1.35;
    max-width: 12rem;
}

.floor-plan-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.75rem, 2vw, 1.5rem);
}

.floor-plan-lightbox[hidden] {
    display: none;
}

.floor-plan-lightbox__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(10, 10, 10, 0.88);
    cursor: zoom-out;
}

.floor-plan-lightbox__close {
    position: absolute;
    top: clamp(0.75rem, 2vw, 1.25rem);
    right: clamp(0.75rem, 2vw, 1.25rem);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.floor-plan-lightbox__close:hover {
    background: rgba(0, 0, 0, 0.65);
    transform: scale(1.04);
}

.floor-plan-lightbox__content {
    position: relative;
    z-index: 1;
    width: min(100%, 1200px);
    max-height: calc(100vh - 2rem);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.floor-plan-lightbox__image {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 2rem);
    width: auto;
    height: auto;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

body.is-floor-plan-open {
    overflow: hidden;
}

/* Навигация между проектами */
.project-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}
.project-nav-link {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 600;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: min(38vw, 340px);
    min-width: 0;
}
.project-nav-prev { justify-self: start; }
.project-nav-next { justify-self: end; }
.project-nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.project-nav-arrow {
    flex-shrink: 0;
    opacity: 0.7;
}
.project-nav-spacer {
    min-width: 0;
}
.project-nav-all {
    justify-self: center;
}
.project-nav-link:hover { color: var(--color-accent); }

@media (max-width: 767.98px) {
    .gallery { --gallery-h: clamp(300px, 56vh, 460px); }
    .project-meta-row { gap: 1.25rem; }
    .project-content-cols { grid-template-columns: 1fr; gap: 1.25rem; }
    .project-about-layout {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
    .project-floor-plan {
        position: static;
    }
    .project-floor-plan__frame,
    .project-floor-plan__placeholder {
        min-height: 220px;
    }
    .gallery-nav { width: 40px; height: 40px; }
    .project-nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    .project-nav-link {
        max-width: none;
        justify-content: center;
    }
    .project-nav-prev,
    .project-nav-next {
        margin-left: 0;
    }
    .project-nav-all {
        order: -1;
        align-self: center;
    }
}

/* ============================================================= */
/* Подборки — крупные плитки-категории для фильтра портфолио      */
/* ============================================================= */
.selections {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.selection-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 320px;
    border-radius: var(--radius);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    color: #fff;
    box-shadow: var(--shadow);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.selection-card::before {
    /* лёгкий зум фона при наведении */
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
    z-index: 0;
}

.selection-card:hover { box-shadow: 0 16px 40px rgba(20, 17, 13, 0.22); }
.selection-card:hover::before { transform: scale(1.06); }

.selection-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(20,17,13,0) 35%, rgba(20,17,13,0.78) 100%);
    transition: background 0.35s ease;
}
.selection-card:hover .selection-card-overlay {
    background: linear-gradient(180deg, rgba(20,17,13,0.1) 20%, rgba(20,17,13,0.85) 100%);
}

.selection-card-body {
    position: relative;
    z-index: 2;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.selection-card-title {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    line-height: 1.1;
}

.selection-card-lead {
    font-size: 0.95rem;
    opacity: 0.85;
}

.selection-card-count {
    margin-top: 0.6rem;
    align-self: flex-start;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    backdrop-filter: blur(4px);
}

/* Активная подборка */
.selection-card.active {
    outline: 3px solid var(--color-accent);
    outline-offset: -3px;
}
.selection-card.active .selection-card-count {
    background: var(--color-accent);
}

.selections-heading {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    margin: 0 0 1.5rem;
}

@media (max-width: 575.98px) {
    .selections { grid-template-columns: 1fr; gap: 1rem; }
    .selection-card { min-height: 220px; }
    .selection-card-title { font-size: 1.4rem; }
}

/* =====================================================================
   СОВРЕМЕННЫЕ УЛУЧШЕНИЯ (perf, a11y, UX)
   Добавлено в рамках аудита. Не меняет базовую верстку выше.
   ===================================================================== */

/* — Единый focus-ring для интерактивных элементов (клавиатурная навигация) — */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.filter-tab:focus-visible,
.hero-nav-btn:focus-visible,
.hero-dots button:focus-visible,
.regions-carousel-prev:focus-visible,
.regions-carousel-next:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* — content-visibility для ниже-the-fold секций: экономит рендеринг — */
.section-portfolio,
.section-services-calc,
.section-calculator,
.page-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* — Появление секций при прокрутке (reveal-on-scroll) —
   Скрываем только когда доступен JS (класс .js), иначе контент виден всегда. */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}
.js [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

/* — Увеличенная зона нажатия у точек hero-слайдера (touch target) — */
.hero-dots button {
    position: relative;
}
.hero-dots button::before {
    content: "";
    position: absolute;
    inset: -10px;
}

/* — Honeypot-поле формы: убираем из потока и с экрана, оставляя доступным ботам — */
.lead-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* — Уважаем prefers-reduced-motion: отключаем анимации/переходы — */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* ——— SEO-блок «О нас» на главной (референс-стиль ABOUT) ——— */
.section-seo {
    padding-block: clamp(2.75rem, 5vw, 4.5rem);
}
.seo-about {
    width: 100%;
    max-width: 100%;
}

/* Шапка блока: метка слева, порядковый номер справа, линия снизу */
.seo-about-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(44, 36, 24, 0.18);
    margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.seo-about-eyebrow {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #2c2418;
}
.seo-about-index {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-accent);
    letter-spacing: 0.05em;
}

.seo-about-title {
    font-family: var(--font-serif, Georgia, serif);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.2;
    margin-bottom: 1.1rem;
    color: #2c2418;
    max-width: 100%;
}
.seo-about-text {
    color: #4a4238;
    line-height: 1.75;
    font-size: 1rem;
    width: 100%;
    max-width: 100%;
}
.seo-about-text p {
    margin-bottom: 1rem;
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.seo-about-text p:last-child {
    margin-bottom: 0;
}

/* Подпись над цифрами */
.seo-about-stats-caption {
    margin-top: clamp(1.25rem, 2.5vw, 2rem);
    margin-bottom: 1rem;
    font-size: 0.95rem;
    color: #6b6155;
    width: 100%;
}

/* Сетка цифр-результатов */
.seo-about-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 2rem) 1.5rem;
    width: 100%;
}
.seo-stat {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(44, 36, 24, 0.14);
    min-width: 0;
}
.seo-stat-value {
    font-family: var(--font-serif, Georgia, serif);
    font-size: clamp(1.9rem, 3.4vw, 2.75rem);
    line-height: 1;
    color: #2c2418;
}
.seo-stat-label {
    font-size: 0.9rem;
    color: #6b6155;
    line-height: 1.4;
}

@media (max-width: 767.98px) {
    .seo-about-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem 1rem;
    }

    .seo-stat {
        padding-top: 0.75rem;
    }

    .seo-stat-value {
        font-size: clamp(1.35rem, 5vw, 1.85rem);
    }

    .seo-stat-label {
        font-size: 0.78rem;
        line-height: 1.35;
    }

    /* На узком экране выравнивание по ширине даёт рваные пробелы */
    .seo-about-text p {
        text-align: left;
        hyphens: none;
        -webkit-hyphens: none;
    }
}

/* Переключатель языка RU | EN */
.header-nav-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between; /* одинаковые отступы между всеми пунктами */
    gap: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.header-lang {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.header-lang--nav {
    margin-left: 0;
    flex-shrink: 0;
    padding: 1rem 0; /* как у пунктов меню */
}

.header-lang--top {
    flex-shrink: 0;
}

.header-lang-link {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.header-lang-link:hover,
.header-lang-link.is-active {
    color: var(--color-accent);
}

.header-lang-sep {
    color: rgba(255, 255, 255, 0.28);
    font-size: 0.75rem;
}

@media (max-width: 991.98px) {
    .header-lang--nav {
        display: none;
    }

    .header-lang--top .header-lang-link {
        font-size: 0.72rem;
    }
}

@media (max-width: 360px) {
    .header-logo-group {
        gap: 0.3rem;
    }

    .header-lang--top .header-lang-link {
        font-size: 0.68rem;
        letter-spacing: 0.05em;
    }

    .header-logo-img {
        max-width: min(100%, 7.5rem);
    }
}

/* ——— Блог (новости из Telegram) ——— */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: clamp(1.25rem, 3vw, 2rem);
}

.blog-card {
    height: 100%;
}

.blog-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-card-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    color: inherit;
}

.blog-card-img {
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    background-color: #ece7e1;
}

.blog-card-img--placeholder {
    background: linear-gradient(135deg, #ece7e1 0%, #d8d0c8 100%);
}

.blog-card-body {
    padding: 1.25rem 1.35rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-card-date {
    font-size: 0.82rem;
    color: #8a8178;
    margin-bottom: 0.5rem;
}

.blog-card-title {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 0 0 0.65rem;
}

.blog-card-excerpt {
    color: #4a4238;
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 1rem;
    flex: 1;
}

.blog-card-more {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-accent, #c4a574);
}

.blog-channel-link {
    color: var(--color-accent, #c4a574);
    text-decoration: none;
}

.blog-channel-link:hover {
    text-decoration: underline;
}

.page-hero--compact {
    padding-bottom: 1.5rem;
}

.page-hero-meta {
    color: #6f675e;
    font-size: 0.95rem;
    margin: 0.75rem 0 0;
}

.blog-post-content {
    max-width: 760px;
    margin: 0 auto;
}

.blog-post-content .blog-post-figure {
    margin: 1.5rem 0;
}

.blog-post-content .blog-post-figure img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    display: block;
}

.blog-post-content .blog-post-text {
    line-height: 1.75;
    color: #2f2a26;
}

.blog-post-content .blog-post-text a {
    color: var(--color-accent, #c4a574);
}

.blog-post-footer {
    max-width: 760px;
    margin: 2.5rem auto 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}