/* =====================================================================
   Homeservice — дизайн-система темы (лендинги, секции, формы)
   Префикс .hs-  •  совместно с витриной каталога (.elporta-*)
   ===================================================================== */

:root {
    --hs-ink: #1d1c1a;
    --hs-ink-2: #514c46;
    --hs-muted: #8d867d;
    --hs-line: #e9e5df;
    --hs-line-2: #f1ede7;
    --hs-bg: #ffffff;
    --hs-bg-soft: #f7f4ef;
    --hs-bg-dark: #211d19;
    --hs-brand: #a8743a;
    --hs-brand-dark: #8a5e2c;
    --hs-brand-soft: #f4ebdf;
    --hs-success: #2f8f5b;
    --hs-danger: #c0492f;
    --hs-radius: 16px;
    --hs-radius-lg: 24px;
    --hs-shadow: 0 6px 22px rgba(29, 28, 26, .07);
    --hs-shadow-lg: 0 24px 60px rgba(29, 28, 26, .16);
    --hs-maxw: 1200px;
    --hs-font: "Manrope", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Базовое ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }
body { margin: 0; overflow-x: clip; }
.hs { font-family: var(--hs-font); color: var(--hs-ink); }
.hs * { box-sizing: border-box; }
.hs img { max-width: 100%; display: block; }
/* Резиновый контейнер: на всю ширину с плавными полями (без фикс. 1200px) */
.hs-container { width: 100%; max-width: 100%; margin: 0; padding-inline: clamp(16px, 5vw, 120px); }
/* Композиционные блоки (hero/split/cta/faq) — не растягиваем на 4K, держим читаемыми */
.hs-narrow { max-width: 1560px; margin-inline: auto; }
.hs-section { padding: clamp(54px, 7vw, 104px) 0; }
.hs-section--soft { background: var(--hs-bg-soft); }
.hs-section--dark { background: var(--hs-bg-dark); color: #f2ede7; }

/* =====================================================================
   Каркас контента — на всю ширину; поля задаёт .hs-container
   ===================================================================== */
.hs-skip { position: absolute; left: -9999px; background: var(--hs-brand); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100000; }
.hs-skip:focus { left: 0; top: 0; }
.hs-content { display: block; width: 100%; }

/* =====================================================================
   Шапка
   ===================================================================== */
.hs-header { position: sticky; top: 0; z-index: 999; background: rgba(255,255,255,.96); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--hs-line); transition: box-shadow .25s ease; }
.hs-header::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--hs-brand), var(--hs-brand-dark)); }
.hs-header.hs-scrolled { box-shadow: 0 8px 30px rgba(29,28,26,.10); }
.admin-bar .hs-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .hs-header { top: 46px; } }
.hs-header-inner { display: flex; align-items: center; gap: clamp(14px, 3vw, 40px); min-height: 78px; padding-block: 10px; }

/* Логотип */
.hs-header-logo { display: flex; align-items: center; flex: 0 0 auto; }
.hs-logo-link { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; flex: 0 0 auto; }
.hs-logo-img { height: clamp(40px, 4.4vw, 56px); width: auto; max-width: min(260px, 52vw); object-fit: contain; display: block; }
.hs-logo { display: inline-block; line-height: 1; }
.hs-logo .hs-logo-roof { display: block; width: clamp(62px, 7vw, 84px); height: auto; margin: 0 0 -3px 6px; }
.hs-logo .hs-logo-word { display: block; font-family: "Montserrat","Manrope",sans-serif; font-weight: 800; font-size: clamp(21px, 2.5vw, 30px); letter-spacing: -.015em; }
.hs-logo .hs-logo-word .b { color: var(--hs-ink); }
.hs-logo .hs-logo-word .s { color: var(--hs-brand); }
.hs-logo .hs-logo-sub { display: block; font-family: "Montserrat","Manrope",sans-serif; font-weight: 700; font-size: clamp(8px, .92vw, 10px); letter-spacing: .3em; text-transform: uppercase; color: var(--hs-brand); margin-top: 3px; }

/* Меню */
.hs-nav { margin-left: auto; }
.hs-menu { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 28px); list-style: none; margin: 0; padding: 0; }
.hs-menu li { position: relative; }
.hs-menu a { display: block; font-family: var(--hs-font); font-weight: 600; font-size: 15.5px; color: var(--hs-ink); text-decoration: none; padding: 8px 2px; transition: color .15s; }
.hs-menu > li > a { position: relative; }
.hs-menu > li > a::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 1px; height: 2px; background: var(--hs-brand); transform: scaleX(0); transform-origin: left; transition: transform .22s; border-radius: 2px; }
.hs-menu > li:hover > a, .hs-menu > li.current-menu-item > a, .hs-menu a:hover { color: var(--hs-brand-dark); }
.hs-menu > li:hover > a::after, .hs-menu > li.current-menu-item > a::after { transform: scaleX(1); }
.hs-menu .menu-item-has-children > a { padding-right: 16px; }
.hs-menu .menu-item-has-children > a::before { content: "⌄"; position: absolute; right: 0; top: 6px; font-size: 13px; color: var(--hs-muted); }
.hs-menu .sub-menu { position: absolute; top: calc(100% + 4px); left: -14px; min-width: 230px; background: #fff; border: 1px solid var(--hs-line); border-radius: 12px; box-shadow: var(--hs-shadow-lg); padding: 6px; list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s, transform .18s, visibility .18s; z-index: 50; }
.hs-menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.hs-menu .sub-menu a { padding: 9px 12px; border-radius: 8px; }
.hs-menu .sub-menu a:hover { background: var(--hs-bg-soft); }
.hs-menu .sub-menu a::after { display: none; }

/* Действия в шапке */
.hs-header-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.hs-header-phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15.5px; color: var(--hs-ink); text-decoration: none; white-space: nowrap; }
.hs-header-phone svg { color: var(--hs-brand); }
.hs-header-phone:hover { color: var(--hs-brand-dark); }
.hs-header-cta { padding: 11px 22px; }

/* Бургер */
.hs-burger { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--hs-line); border-radius: 10px; background: #fff; cursor: pointer; }
.hs-burger span { width: 20px; height: 2px; background: var(--hs-ink); border-radius: 2px; transition: transform .25s, opacity .2s; }
.hs-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hs-burger.is-open span:nth-child(2) { opacity: 0; }
.hs-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Мобильная шторка */
.hs-mobile-backdrop { position: fixed; inset: 0; background: rgba(20,18,15,.5); z-index: 9998; }
.hs-mobile-backdrop[hidden] { display: none; }
.hs-mobile-nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 86vw); background: #fff; z-index: 9999; padding: 24px; transform: translateX(100%); transition: transform .3s ease; overflow-y: auto; box-shadow: var(--hs-shadow-lg); display: flex; flex-direction: column; }
.hs-mobile-nav.is-open { transform: none; }
.hs-mobile-close { align-self: flex-end; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hs-line); background: var(--hs-bg-soft); font-size: 24px; line-height: 1; cursor: pointer; color: var(--hs-ink); margin-bottom: 8px; }
.hs-mobile-menu { list-style: none; margin: 0 0 16px; padding: 0; }
.hs-mobile-menu a { display: block; padding: 13px 8px; font-weight: 700; font-size: 17px; color: var(--hs-ink); text-decoration: none; border-bottom: 1px solid var(--hs-line-2); }
.hs-mobile-menu .sub-menu { list-style: none; margin: 0 0 6px 14px; padding: 0; }
.hs-mobile-menu .sub-menu a { font-weight: 600; font-size: 15px; border-bottom: none; padding: 9px 8px; }
.hs-mobile-phone { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 700; color: var(--hs-brand-dark); text-decoration: none; }

@media (max-width: 1120px) {
    .hs-nav, .hs-header-phone, .hs-header-cta { display: none; }
    .hs-burger { display: flex; }
    .hs-header-actions { margin-left: auto; }
}

/* =====================================================================
   Подвал
   ===================================================================== */
.hs-footer { background: var(--hs-bg-dark); color: rgba(242,237,231,.8); }
.hs-footer-inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 64px); padding-block: clamp(48px, 6vw, 80px) clamp(32px, 4vw, 48px); }
.hs-footer-brand p { font-size: 14.5px; line-height: 1.6; margin: 16px 0 0; max-width: 420px; }
.hs-footer-logo { display: inline-block; text-decoration: none; line-height: 0; }
.hs-footer-logo-img { height: clamp(42px, 4vw, 56px); width: auto; max-width: min(260px, 66vw); display: block; }
.hs-footer .hs-logo .hs-logo-word .b { color: #fff; }
.hs-footer .hs-logo .hs-logo-sub { color: rgba(242,237,231,.55); }
.hs-footer-col h4 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: #fff; margin: 0 0 16px; }
.hs-footer-col ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.hs-footer-col a { color: rgba(242,237,231,.8); text-decoration: none; font-size: 14.5px; transition: color .15s; }
.hs-footer-col a:hover { color: var(--hs-brand); }
.hs-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); }
.hs-footer-bottom-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 18px; font-size: 13px; color: rgba(242,237,231,.5); }
@media (max-width: 780px) { .hs-footer-inner { grid-template-columns: 1fr 1fr; } .hs-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .hs-footer-inner { grid-template-columns: 1fr; } }

/* Контент обычных страниц / блог */
.hs-prose { max-width: 820px; font-size: 16px; line-height: 1.7; color: var(--hs-ink-2); }
.hs-prose h2, .hs-prose h3 { color: var(--hs-ink); }
.hs-prose img { border-radius: var(--hs-radius); height: auto; }
.hs-prose a { color: var(--hs-brand-dark); }
.hs-postlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(18px, 2vw, 28px); }
.hs-postcard { background: #fff; border: 1px solid var(--hs-line); border-radius: var(--hs-radius); overflow: hidden; display: flex; flex-direction: column; }
.hs-postcard-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.hs-postcard-body { padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.hs-postcard-date { font-size: 13px; color: var(--hs-muted); }
.hs-postcard-title { font-size: 19px; font-weight: 800; margin: 0; }
.hs-postcard-title a { color: var(--hs-ink); text-decoration: none; }
.hs-postcard-title a:hover { color: var(--hs-brand-dark); }
.hs-postcard-excerpt { font-size: 14.5px; color: var(--hs-ink-2); margin: 0; flex: 1; }
.hs-postcard .hs-btn { align-self: flex-start; margin-top: 6px; }
.hs-single-media img { width: 100%; border-radius: var(--hs-radius-lg); margin-bottom: 24px; height: auto; }

/* ---------- Типографика секций ---------- */
.hs-kicker {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--hs-brand);
    margin-bottom: 14px;
}
.hs-h1 { font-size: clamp(34px, 5vw, 60px); line-height: 1.05; font-weight: 800; letter-spacing: -.025em; margin: 0; }
.hs-h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; margin: 0 0 16px; }
.hs-h3 { font-size: 21px; font-weight: 800; margin: 0 0 8px; }
.hs-lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--hs-ink-2); }
.hs-section--dark .hs-lead { color: rgba(242,237,231,.78); }
.hs-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.hs-head.left { text-align: left; margin-left: 0; }

/* ---------- Кнопки ---------- */
.hs-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 15px 28px; border-radius: 12px;
    font-family: var(--hs-font); font-size: 15.5px; font-weight: 700;
    text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
    transition: background .18s, color .18s, border-color .18s, transform .12s, box-shadow .18s;
}
.hs-btn:active { transform: translateY(1px); }
.hs-btn-primary { background: var(--hs-brand); color: #fff; box-shadow: 0 10px 24px rgba(168,116,58,.28); }
.hs-btn-primary:hover { background: var(--hs-brand-dark); color: #fff; box-shadow: 0 14px 30px rgba(168,116,58,.36); }
.hs-btn-dark { background: var(--hs-ink); color: #fff; }
.hs-btn-dark:hover { background: #000; color: #fff; }
.hs-btn-ghost { background: transparent; color: var(--hs-ink); border-color: var(--hs-line); }
.hs-btn-ghost:hover { border-color: var(--hs-brand); color: var(--hs-brand-dark); background: var(--hs-brand-soft); }
.hs-btn-light { background: #fff; color: var(--hs-ink); }
.hs-btn-light:hover { background: var(--hs-brand-soft); color: var(--hs-brand-dark); }
.hs-btn-block { width: 100%; }
.hs-btn-lg { padding: 17px 34px; font-size: 16.5px; }

/* ---------- HERO ---------- */
.hs-hero {
    position: relative;
    background:
        radial-gradient(1200px 500px at 80% -10%, rgba(168,116,58,.16), transparent 60%),
        linear-gradient(180deg, #faf7f2, #f3eee7);
    padding: 64px 0 72px;
    overflow: hidden;
}
.hs-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center; max-width: 1560px; margin-inline: auto; }
/* колонки могут сжиматься и переносить текст (без вылезания на фото) */
.hs-hero-copy, .hs-hero-media, .hs-hero-form { min-width: 0; }
.hs-h1 { overflow-wrap: break-word; }

/* Hero: карточка с формой заявки (справа) */
.hs-hero-form {
    background: #fff;
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius-lg);
    box-shadow: var(--hs-shadow-lg);
    padding: clamp(22px, 2.6vw, 34px);
    align-self: center;
}
.hs-hero-form-head h3 { font-size: clamp(20px, 2.2vw, 25px); font-weight: 800; margin: 0 0 6px; color: var(--hs-ink); letter-spacing: -.01em; }
.hs-hero-form-head p { font-size: 14px; color: var(--hs-ink-2); line-height: 1.5; margin: 0 0 18px; }
/* Краткие преимущества в hero-копии */
.hs-hero-benefits { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 11px; }
.hs-hero-benefits li { display: flex; gap: 11px; align-items: center; font-size: 15.5px; font-weight: 600; color: var(--hs-ink); }
.hs-hero-benefits .ck { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--hs-brand-soft); color: var(--hs-brand-dark); display: flex; align-items: center; justify-content: center; }
.hs-hero h1 { margin-bottom: 20px; }
.hs-hero .hs-lead { margin-bottom: 30px; max-width: 540px; }
.hs-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.hs-hero-trust { display: flex; flex-wrap: wrap; gap: 26px; }
.hs-hero-trust .item { }
.hs-hero-trust .num { font-size: 28px; font-weight: 800; color: var(--hs-ink); line-height: 1; }
.hs-hero-trust .lbl { font-size: 13.5px; color: var(--hs-muted); margin-top: 5px; }
.hs-hero-media {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--hs-radius-lg);
    background: var(--hs-bg-soft) center/cover;
    box-shadow: var(--hs-shadow-lg);
    overflow: hidden;
}
.hs-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hs-hero-badge {
    position: absolute; left: 24px; bottom: 24px;
    background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
    border-radius: 14px; padding: 14px 18px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: var(--hs-shadow);
}
.hs-hero-badge .b-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--hs-brand-soft); display: flex; align-items: center; justify-content: center; color: var(--hs-brand-dark); }
.hs-hero-badge b { display: block; font-size: 15px; }
.hs-hero-badge span { font-size: 12.5px; color: var(--hs-muted); }

/* ---------- USP-лента ---------- */
.hs-usp { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.hs-usp-item { display: flex; gap: 14px; align-items: flex-start; }
.hs-usp-item .ico {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
    background: var(--hs-brand-soft); color: var(--hs-brand-dark);
    display: flex; align-items: center; justify-content: center;
}
.hs-usp-item h4 { font-size: 16px; font-weight: 700; margin: 2px 0 4px; }
.hs-usp-item p { font-size: 13.5px; color: var(--hs-muted); margin: 0; line-height: 1.5; }

/* ---------- Категории ---------- */
.hs-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.hs-cat {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 240px; padding: 24px; border-radius: var(--hs-radius);
    background: var(--hs-bg-dark); color: #fff; text-decoration: none; overflow: hidden;
    transition: transform .25s, box-shadow .25s;
}
.hs-cat::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(33,29,25,.15), rgba(33,29,25,.82)); z-index: 1; }
.hs-cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .4s; }
.hs-cat:hover { transform: translateY(-5px); box-shadow: var(--hs-shadow-lg); }
.hs-cat:hover img { transform: scale(1.07); }
.hs-cat .c-body { position: relative; z-index: 2; }
.hs-cat .c-name { font-size: 20px; font-weight: 800; }
.hs-cat .c-meta { font-size: 13.5px; opacity: .82; margin-top: 4px; }
.hs-cat .c-go { position: relative; z-index: 2; margin-top: 14px; display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; color: #fff; }

/* Двусекционная категория (большие плитки) */
.hs-cats-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(16px, 1.6vw, 22px); }
.hs-cats-2 .hs-cat { min-height: 320px; }

/* ---------- Featured (товары) ---------- */
.hs-products-wrap { }
.hs-products-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 40px; flex-wrap: wrap; }
.hs-products-head .hs-h2 { margin: 0; }
.hs-doors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(14px, 1.6vw, 22px); }

/* ---------- Split (текст + картинка) ---------- */
.hs-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center; max-width: 1560px; margin-inline: auto; }
.hs-split--rev .hs-split-media { order: 2; }
.hs-split-media { aspect-ratio: 5/4; border-radius: var(--hs-radius-lg); overflow: hidden; background: var(--hs-bg-soft); box-shadow: var(--hs-shadow); }
.hs-split-media img { width: 100%; height: 100%; object-fit: cover; }
.hs-checklist { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.hs-checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--hs-ink-2); }
.hs-checklist .ck { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--hs-brand-soft); color: var(--hs-brand-dark); display: flex; align-items: center; justify-content: center; }

/* ---------- Шаги ---------- */
.hs-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: clamp(14px, 1.6vw, 22px); counter-reset: step; }
.hs-step { position: relative; padding: 28px 24px; background: #fff; border: 1px solid var(--hs-line); border-radius: var(--hs-radius); }
.hs-section--soft .hs-step { background: #fff; }
.hs-step .n { font-size: 15px; font-weight: 800; color: #fff; background: var(--hs-brand); width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.hs-step h4 { font-size: 17px; font-weight: 700; margin: 0 0 7px; }
.hs-step p { font-size: 14px; color: var(--hs-muted); margin: 0; line-height: 1.55; }

/* ---------- Услуги ---------- */
.hs-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(16px, 1.8vw, 22px); }
.hs-service { padding: 30px 26px; border-radius: var(--hs-radius); background: #fff; border: 1px solid var(--hs-line); transition: transform .2s, box-shadow .2s; }
.hs-service:hover { transform: translateY(-4px); box-shadow: var(--hs-shadow-lg); }
.hs-service .ico { width: 52px; height: 52px; border-radius: 13px; background: var(--hs-brand-soft); color: var(--hs-brand-dark); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.hs-service h3 { font-size: 19px; font-weight: 800; margin: 0 0 8px; }
.hs-service p { font-size: 14.5px; color: var(--hs-ink-2); line-height: 1.6; margin: 0 0 14px; }
.hs-service .price { font-size: 14px; font-weight: 700; color: var(--hs-brand-dark); }

/* ---------- Отзывы ---------- */
.hs-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(16px, 1.8vw, 22px); }
.hs-review { background: #fff; border: 1px solid var(--hs-line); border-radius: var(--hs-radius); padding: 28px; }
.hs-review .stars { color: var(--hs-brand); letter-spacing: 2px; margin-bottom: 14px; font-size: 15px; }
.hs-review p { font-size: 15px; line-height: 1.65; color: var(--hs-ink-2); margin: 0 0 18px; }
.hs-review .who { display: flex; align-items: center; gap: 12px; }
.hs-review .av { width: 44px; height: 44px; border-radius: 50%; background: var(--hs-brand-soft); color: var(--hs-brand-dark); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.hs-review .who b { display: block; font-size: 15px; }
.hs-review .who span { font-size: 13px; color: var(--hs-muted); }

/* ---------- FAQ ---------- */
.hs-faq { max-width: 900px; margin: 0 auto; display: grid; gap: 6px; }
.hs-faq-item { border: 1px solid var(--hs-line); border-radius: 14px; background: #fff; overflow: hidden; transition: box-shadow .15s; }
/* без hover-эффекта на блоках FAQ (по просьбе) — подсвечиваем только раскрытый пункт */
.hs-faq-item.is-open { border-color: var(--hs-brand-soft); box-shadow: var(--hs-shadow); }
.hs-faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; margin: 0;
    padding: 20px 60px 20px 22px; position: relative; font-size: clamp(15.5px, 1.8vw, 18px); font-weight: 700; color: var(--hs-ink); font-family: var(--hs-font); }
.hs-faq-q::after { content: "+"; position: absolute; right: 22px; top: 24px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--hs-brand-soft); font-size: 20px; line-height: 1; color: var(--hs-brand-dark); transition: transform .25s; font-weight: 400; }
.hs-faq-item.is-open .hs-faq-q::after { content: "−"; transform: rotate(180deg); }
/* Гасим дефолтный тёмный hover/focus-фон кнопок Astra на вопросах FAQ — без ховера */
.hs-faq-q:hover, .hs-faq-q:focus { background: none; color: var(--hs-ink); box-shadow: none; }
.hs-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.hs-faq-a p { padding: 0 22px 22px; margin: 0; color: var(--hs-ink-2); line-height: 1.65; font-size: clamp(14.5px, 1.6vw, 15.5px); }

/* ---------- CTA-полоса ---------- */
.hs-cta-band {
    background: radial-gradient(900px 400px at 15% 0%, rgba(168,116,58,.35), transparent 60%), var(--hs-bg-dark);
    color: #fff; border-radius: var(--hs-radius-lg); padding: clamp(32px, 4.5vw, 60px) clamp(24px, 4vw, 56px);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(24px, 3vw, 40px); align-items: center;
    max-width: 1560px; margin-inline: auto;
}
.hs-cta-band h2 { color: #fff; }
.hs-cta-band p { color: rgba(255,255,255,.8); font-size: 16px; margin: 8px 0 0; }
.hs-cta-band .actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.hs-cta-band .phone { font-size: 26px; font-weight: 800; color: #fff; text-decoration: none; text-align: center; }
.hs-cta-band .phone small { display: block; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.65); margin-top: 4px; }

/* ---------- Контакты ---------- */
.hs-contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: clamp(16px, 1.8vw, 22px); }
.hs-contact-card { padding: 26px; border-radius: var(--hs-radius); background: #fff; border: 1px solid var(--hs-line); }
.hs-contact-card .ico { width: 46px; height: 46px; border-radius: 12px; background: var(--hs-brand-soft); color: var(--hs-brand-dark); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.hs-contact-card .lbl { font-size: 13px; color: var(--hs-muted); }
.hs-contact-card .val { font-size: 19px; font-weight: 800; color: var(--hs-ink); text-decoration: none; }
.hs-contact-card a.val:hover { color: var(--hs-brand-dark); }

/* ---------- Плавающая кнопка звонка ---------- */
.hs-fab {
    position: fixed; right: 22px; bottom: 22px; z-index: 9000;
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--hs-brand); color: #fff; text-decoration: none;
    padding: 14px 20px; border-radius: 50px; font-weight: 700; font-size: 15px;
    box-shadow: 0 14px 34px rgba(168,116,58,.45);
    transition: transform .2s;
}
.hs-fab:hover { transform: translateY(-3px); color: #fff; }

/* =====================================================================
   Лид-модалка темы
   ===================================================================== */
.hs-modal { display: none; position: fixed; inset: 0; background: rgba(20,18,15,.55); backdrop-filter: blur(4px); z-index: 99999; align-items: center; justify-content: center; padding: 20px; }
.hs-modal.is-open { display: flex; overflow-y: auto; }
body.hs-modal-open { overflow: hidden; }
.hs-modal-box { background: #fff; border-radius: 22px; width: 100%; max-width: 440px; padding: 34px; position: relative; box-shadow: var(--hs-shadow-lg); font-family: var(--hs-font); animation: hs-pop .25s ease; }
@keyframes hs-pop { from { opacity: 0; transform: translateY(16px) scale(.98);} to { opacity: 1; transform: none; } }
.hs-modal-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; padding: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--hs-line); background: var(--hs-bg-soft); color: var(--hs-ink); font-size: 22px; line-height: 1; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s; }
.hs-modal-close:hover { background: var(--hs-ink); color: #fff; border-color: var(--hs-ink); transform: rotate(90deg); }
.hs-modal-box h2 { font-size: 23px; font-weight: 800; margin: 0 0 6px; }
.hs-modal-sub { color: var(--hs-ink-2); font-size: 14px; margin: 0 0 22px; }
.hs-field { margin-bottom: 14px; }
.hs-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--hs-ink-2); }
.hs-field input { width: 100%; padding: 13px 14px; border: 1px solid var(--hs-line); border-radius: 11px; font-size: 15px; font-family: inherit; background: var(--hs-bg-soft); }
.hs-field input:focus { outline: none; border-color: var(--hs-brand); background: #fff; }
.hs-policy { font-size: 11.5px; color: var(--hs-muted); margin: 14px 0 0; line-height: 1.5; }
.hs-form-msg { font-size: 14px; margin-top: 12px; }
.hs-form-msg.ok { color: var(--hs-success); }
.hs-form-msg.err { color: var(--hs-danger); }

/* ---------- Reveal-анимация ---------- */
.hs-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.hs-reveal.is-in { opacity: 1; transform: none; }

/* =====================================================================
   Адаптив — сетки резиновые (auto-fit/auto-fill), здесь лишь точечные правки
   ===================================================================== */
/* Когда герой/сплит сложились в одну колонку — делаем медиа не слишком высокой */
@media (max-width: 900px) {
    .hs-hero { padding: 40px 0 52px; }
    .hs-hero-media { aspect-ratio: 16 / 10; }
}
/* Телефоны: карточки и категории — по 2 в ряд (а не одна на всю ширину) */
@media (max-width: 540px) {
    .hs-cats, .hs-doors-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .hs-fab span { display: none; }
}
/* Очень узкие экраны — категории-плитки в один столбец */
@media (max-width: 380px) {
    .hs-cats { grid-template-columns: 1fr; }
}

/* =====================================================================
   QA-полировка: фокус (клавиатура vs клик), регистр заголовков,
   висячие строки, состояния наведения
   ===================================================================== */

/* Фокус: убираем уродливую пунктирную рамку Astra на клик мышью,
   оставляем аккуратное брендовое кольцо для навигации с клавиатуры */
:focus-visible { outline: 2px solid var(--hs-brand); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* Astra Title-Case'ит h1 И все <button> (плохо для русского) — возвращаем обычный регистр */
.hs-h1, .hs-btn, .hs-faq-q { text-transform: none; }

/* Балансировка переносов — убираем висячие строки в заголовках и лидах */
.hs-h1, .hs-h2, .hs-h3 { text-wrap: balance; }
.hs-lead, .hs-step p, .hs-service p, .hs-review p, .hs-faq-a p { text-wrap: pretty; }

/* Меню: фокус с клавиатуры показывает фирменное подчёркивание */
.hs-menu > li > a:focus-visible { outline: none; color: var(--hs-brand-dark); }
.hs-menu > li > a:focus-visible::after { transform: scaleX(1); }
.hs-header-cta:active, .hs-header-phone:active { transform: translateY(1px); }

/* Кнопки: контрастное фокус-кольцо на залитых вариантах (белое + ореол) */
.hs-btn-primary:focus-visible,
.hs-btn-dark:focus-visible { outline-color: #fff; box-shadow: 0 0 0 3px rgba(168,116,58,.35); }

/* FAQ: видимый фокус с клавиатуры */
.hs-faq-q:focus-visible { outline: 2px solid var(--hs-brand); outline-offset: -2px; border-radius: 12px; }

/* Модальный крестик: фокус-кольцо */
.hs-modal-close:focus-visible { outline: 2px solid var(--hs-brand); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(168,116,58,.18); }

/* Контактные ссылки — заметнее при наведении */
.hs-contact-card a.val:hover { color: var(--hs-brand-dark); text-decoration: underline; text-underline-offset: 4px; }

/* =====================================================================
   Иллюстрации в блоках (двери / окна) — карточка с градиентом + SVG
   ===================================================================== */
.hs-illu-card, .hs-window-card {
    display: flex;
    align-items: center;
    justify-content: center;
    /* тёплый фон по умолчанию (двери) */
    background: radial-gradient(130% 120% at 72% 8%, #ffffff, var(--hs-brand-soft) 82%);
    padding: clamp(22px, 4vw, 52px);
}
/* прохладный фон для окон */
.hs-illu-card--cool, .hs-window-card { background: radial-gradient(130% 120% at 72% 6%, #ffffff, #e9f0f4 78%); }
.hs-hero-media.hs-illu-card, .hs-hero-media.hs-window-card { aspect-ratio: 1 / 1; }
.hs-split-media.hs-illu-card, .hs-split-media.hs-window-card { aspect-ratio: 5 / 4; }
.hs-illu, .hs-window-illu { width: 100%; max-width: 340px; height: auto; display: block; filter: drop-shadow(0 18px 34px rgba(29,28,26,.14)); }

/* =====================================================================
   1.1 — поиск в шапке, мессенджеры, поля форм, страницы
   ===================================================================== */
/* Кнопка поиска в шапке */
.hs-header-search { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--hs-line); background: #fff; color: var(--hs-ink); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.hs-header-search:hover { border-color: var(--hs-brand); color: var(--hs-brand-dark); background: var(--hs-brand-soft); }

/* Оверлей поиска */
.hs-search { display: none; position: fixed; inset: 0; z-index: 99998; background: rgba(20,18,15,.55); backdrop-filter: blur(4px); padding: clamp(60px, 12vh, 140px) 16px 16px; align-items: flex-start; justify-content: center; }
.hs-search.is-open { display: flex; }
.hs-search-box { width: 100%; max-width: 720px; background: #fff; border-radius: 20px; padding: 18px; box-shadow: var(--hs-shadow-lg); animation: hs-pop .22s ease; font-family: var(--hs-font); }
.hs-search-form { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 14px; border: 1.5px solid var(--hs-line); border-radius: 14px; color: var(--hs-muted); }
.hs-search-form:focus-within { border-color: var(--hs-brand); }
.hs-search-form input { flex: 1; min-width: 0; border: none; background: none; font: inherit; font-size: 17px; color: var(--hs-ink); outline: none; padding: 10px 0; }
.hs-search-form input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hs-search-form .hs-btn { padding: 11px 18px; }
.hs-search-close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hs-line); background: var(--hs-bg-soft); font-size: 22px; line-height: 1; cursor: pointer; color: var(--hs-ink); flex: 0 0 auto; }
.hs-search-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 14px; font-size: 13.5px; color: var(--hs-muted); }
.hs-search-hint a { color: var(--hs-ink-2); text-decoration: none; background: var(--hs-bg-soft); padding: 5px 11px; border-radius: 20px; }
.hs-search-hint a:hover { background: var(--hs-brand-soft); color: var(--hs-brand-dark); }
@media (max-width: 540px) { .hs-search-form .hs-btn { display: none; } .hs-search-form input { font-size: 16px; } }

/* Плавающие кнопки: звонок + мессенджеры */
.hs-fab-wrap { position: fixed; right: 22px; bottom: 22px; z-index: 9000; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.hs-fab { position: static; }
.hs-fab--msg { background: var(--fab, #7360f2); box-shadow: 0 10px 26px rgba(0,0,0,.18); padding: 11px 16px; font-size: 14px; }
.hs-fab--msg:hover { color: #fff; }
@media (max-width: 540px) { .hs-fab-wrap { right: 14px; bottom: 14px; } .hs-fab--msg span { display: none; } .hs-fab--msg { padding: 12px; } }

/* Поля форм: комментарий, honeypot */
.hs-field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--hs-line); border-radius: 11px; font-size: 14.5px; font-family: inherit; background: var(--hs-bg-soft); resize: vertical; min-height: 58px; }
.hs-field textarea:focus { outline: none; border-color: var(--hs-brand); background: #fff; }
.hs-field label .opt { color: var(--hs-muted); font-weight: 500; }
.hs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Контентные страницы: карточки условий */
.hs-prose h2 { font-size: clamp(22px, 2.4vw, 28px); margin: 36px 0 12px; letter-spacing: -.01em; }
.hs-prose h3 { font-size: 19px; margin: 24px 0 8px; }
.hs-prose ul { padding-left: 22px; }
.hs-prose li { margin-bottom: 6px; }
.hs-prose table { border-collapse: collapse; width: 100%; font-size: 15px; }
.hs-prose th, .hs-prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hs-line); vertical-align: top; }
.hs-prose th { color: var(--hs-muted); font-weight: 600; width: 34%; }
.hs-page-hero { background: linear-gradient(180deg, #faf7f2, #f3eee7); padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 4vw, 48px); margin-bottom: clamp(24px, 3vw, 40px); }
.hs-page-hero .hs-h2 { margin: 0; }
.hs-page-hero .hs-lead { margin: 10px 0 0; max-width: 720px; }
.hs-page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.hs-page-side { position: sticky; top: 96px; }
@media (max-width: 900px) { .hs-page-grid { grid-template-columns: 1fr; } .hs-page-side { position: static; } }
@media (max-width: 980px) { .hs-footer-inner { grid-template-columns: 1fr 1fr; } }
.hs-mobile-search { display: flex; gap: 6px; margin: 0 0 14px; }
.hs-mobile-search input { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid var(--hs-line); border-radius: 10px; font: inherit; font-size: 15px; background: var(--hs-bg-soft); }
.hs-mobile-search input:focus { outline: none; border-color: var(--hs-brand); background: #fff; }
.hs-mobile-search button { width: 44px; border-radius: 10px; border: none; background: var(--hs-brand); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
/* Шапка на средних экранах: пункты меню не переносятся, компактнее */
.hs-menu > li > a { white-space: nowrap; }
@media (max-width: 1360px) {
    .hs-menu { gap: 14px; }
    .hs-menu a { font-size: 14px; }
    .hs-header-phone { font-size: 14px; }
    .hs-header-cta { padding: 10px 16px; font-size: 14px; }
    .hs-header-inner { gap: 16px; }
}

/* =====================================================================
   Дисциплина сеток: явное число колонок под количество блоков —
   без «висячих» элементов в последнем ряду на любой ширине
   ===================================================================== */
/* 4 преимущества: 4 → 2 → 1 */
.hs-usp { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .hs-usp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .hs-usp { grid-template-columns: 1fr; } }
/* 4 категории: 4 → 2 → 1 */
.hs-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .hs-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px)  { .hs-cats { grid-template-columns: 1fr; } }
/* 8 товаров: 4 → 2 (на 4K не растягиваем карточки) */
.hs-doors-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1560px; margin-inline: auto; }
@media (max-width: 700px)  { .hs-doors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
/* 4 шага: 4 → 2 → 1 */
.hs-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .hs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .hs-steps { grid-template-columns: 1fr; } }
/* 3 услуги / 3 отзыва / 3 контакта: 3 → 1 ; 4 услуги (окна): 4 → 2 → 1 */
.hs-services, .hs-reviews, .hs-contacts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px)  { .hs-services, .hs-reviews { grid-template-columns: 1fr; } }
@media (max-width: 760px)  { .hs-contacts { grid-template-columns: 1fr; } }
.hs-services--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) { .hs-services--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .hs-services--4 { grid-template-columns: 1fr; } }
/* Подвал: бренд + 3 колонки → бренд на всю ширину + 3 → 1 */
.hs-footer-inner { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
@media (max-width: 980px) { .hs-footer-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hs-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .hs-footer-inner { grid-template-columns: 1fr; } }

/* ---------- Недостающие состояния наведения ---------- */
.hs-search-close:hover, .hs-mobile-close:hover { background: var(--hs-ink); color: #fff; border-color: var(--hs-ink); }
.hs-mobile-search button:hover { background: var(--hs-brand-dark); }
.hs-mobile-menu a:hover { color: var(--hs-brand-dark); }
.hs-mobile-menu > li > a:active { background: var(--hs-bg-soft); }
.hs-hero-trust .item { transition: transform .15s; }
.hs-cat:hover .c-go { text-decoration: underline; text-underline-offset: 3px; }
.hs-usp-item .ico, .hs-service .ico, .hs-contact-card .ico { transition: background .15s, color .15s; }
.hs-usp-item:hover .ico, .hs-contact-card:hover .ico { background: var(--hs-brand); color: #fff; }
.hs-service:hover .ico { background: var(--hs-brand); color: #fff; }
.hs-cta-band .phone:hover { color: var(--hs-brand-soft); }
.hs-btn-light:hover { transform: translateY(-1px); }
.hs-btn:disabled { opacity: .7; cursor: progress; transform: none; }
/* Широкие экраны: 8 хитов в один ряд вместо растянутых карточек */
.hs-doors-grid { max-width: none; }
@media (min-width: 1800px) { .hs-doors-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
/* Плавающие кнопки не перекрывают копирайт в подвале на мобильных */
@media (max-width: 900px) { .hs-footer-bottom-inner { padding-bottom: 104px; } }

/* =====================================================================
   HERO главной — тёмный, продающий: оффер, быстрый выбор, витрина с ценой, форма-квиз
   ===================================================================== */
.hs-hero--dark {
    background:
        radial-gradient(900px 520px at 12% -10%, rgba(168,116,58,.5), transparent 62%),
        radial-gradient(700px 420px at 95% 110%, rgba(168,116,58,.28), transparent 60%),
        linear-gradient(180deg, #27221d 0%, #1d1a16 100%);
    color: #fff;
    padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 6vw, 84px);
}
.hs-hero--dark::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); }
.hs-hero--dark .hs-h1 { color: #fff; font-size: clamp(32px, 3.9vw, 54px); margin-bottom: 18px; }
.hs-hero--dark .hs-lead { color: rgba(255,255,255,.78); margin-bottom: 22px; max-width: 520px; }
.hs-hero--dark .hs-hero-trust .num { color: #fff; }
.hs-hero--dark .hs-hero-trust .lbl { color: rgba(255,255,255,.58); }
.hs-hero--dark .hs-btn-ghost { color: #fff; border-color: rgba(255,255,255,.32); }
.hs-hero--dark .hs-btn-ghost:hover { background: #fff; color: var(--hs-ink); border-color: #fff; }
.hs-hero--dark .hs-btn-primary { box-shadow: 0 14px 34px rgba(168,116,58,.45); }
.hs-hero--dark .hs-hero-actions { margin-bottom: 30px; }

/* Оффер-чип с «живой» точкой */
.hs-offer { display: inline-flex; align-items: center; gap: 10px; padding: 8px 15px 8px 11px; border-radius: 30px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font-size: 13.5px; font-weight: 600; color: #fff; margin-bottom: 22px; backdrop-filter: blur(4px); }
.hs-offer .dot { width: 8px; height: 8px; border-radius: 50%; background: #4cd27f; box-shadow: 0 0 0 0 rgba(76,210,127,.6); animation: hs-pulse 1.8s infinite; flex: 0 0 auto; }
@keyframes hs-pulse { 0% { box-shadow: 0 0 0 0 rgba(76,210,127,.55); } 70% { box-shadow: 0 0 0 9px rgba(76,210,127,0); } 100% { box-shadow: 0 0 0 0 rgba(76,210,127,0); } }

/* Быстрый выбор раздела */
.hs-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.hs-quick a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 30px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .15s, border-color .15s, transform .15s; }
.hs-quick a small { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.55); }
.hs-quick a:hover { background: var(--hs-brand); border-color: var(--hs-brand); transform: translateY(-1px); }
.hs-quick a:hover small { color: rgba(255,255,255,.85); }

/* Трёхколоночная сетка: копия | витрина | форма */
.hs-hero-grid--3 { grid-template-columns: 1.15fr .8fr .95fr; gap: clamp(24px, 3vw, 52px); align-items: center; max-width: 1600px; }
.hs-hero-grid--3 .hs-hero-form { background: #fff; border-color: transparent; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.hs-hero-grid--3 .hs-hero-form-head p { color: var(--hs-ink-2); }

/* Витрина товара с ценой */
.hs-showcase { position: relative; aspect-ratio: 3 / 4; max-width: 420px; width: 100%; margin-inline: auto; }
.hs-showcase-main { position: absolute; inset: 0; display: block; border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, #f7f4ef, #e6dfd3); box-shadow: 0 30px 80px rgba(0,0,0,.5); transition: transform .3s; }
.hs-showcase-main:hover { transform: translateY(-4px); }
.hs-showcase-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-showcase-badge { position: absolute; top: 16px; left: 16px; padding: 7px 12px; border-radius: 20px; background: var(--hs-brand); color: #fff; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.hs-showcase-price { position: absolute; left: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 2px; padding: 11px 15px; border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 10px 30px rgba(0,0,0,.25); backdrop-filter: blur(6px); max-width: calc(100% - 32px); }
.hs-showcase-price .name { font-size: 12.5px; color: var(--hs-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-showcase-price .val { font-size: 19px; font-weight: 800; color: var(--hs-ink); letter-spacing: -.01em; white-space: nowrap; }
.hs-showcase-second { position: absolute; right: -18px; bottom: -22px; width: 44%; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; border: 4px solid #221e19; box-shadow: 0 20px 50px rgba(0,0,0,.5); background: #2b2622; transition: transform .3s; }
.hs-showcase-second:hover { transform: translateY(-4px) rotate(-1deg); }
.hs-showcase-second img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-showcase-second .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 12px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.75)); color: #fff; display: flex; flex-direction: column; gap: 1px; }
.hs-showcase-second .cap b { font-size: 13px; }
.hs-showcase-second .cap span { font-size: 12px; color: rgba(255,255,255,.8); }

/* Форма-квиз: выбор «что нужно» */
.hs-choice-field label { margin-bottom: 8px; }
.hs-choice { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-choice-item { position: relative; cursor: pointer; }
.hs-choice-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.hs-choice-item span { display: inline-block; padding: 8px 12px; border-radius: 30px; border: 1.5px solid var(--hs-line); background: var(--hs-bg-soft); font-size: 13px; font-weight: 600; color: var(--hs-ink-2); transition: background .15s, border-color .15s, color .15s; }
.hs-choice-item:hover span { border-color: var(--hs-brand); color: var(--hs-brand-dark); }
.hs-choice-item input:checked + span { background: var(--hs-brand); border-color: var(--hs-brand); color: #fff; }
.hs-choice-item input:focus-visible + span { outline: 2px solid var(--hs-brand); outline-offset: 2px; }

@media (max-width: 1280px) {
    .hs-hero-grid--3 { grid-template-columns: 1.1fr .9fr; }
    .hs-showcase { display: none; }
}
@media (max-width: 900px) {
    .hs-hero-grid--3 { grid-template-columns: 1fr; }
    .hs-hero--dark { padding: 36px 0 44px; }
    .hs-hero--dark .hs-lead { max-width: none; }
}
@media (max-width: 540px) {
    .hs-hero--dark .hs-hero-actions .hs-btn { width: 100%; }
    .hs-offer { font-size: 12.5px; }
}

/* ---------- Фото-блоки вместо иллюстраций ---------- */
.hs-photo { position: relative; aspect-ratio: 5 / 4; }
.hs-photo picture, .hs-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hs-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(29,28,26,.28)); pointer-events: none; }
.hs-photo-note { position: absolute; left: 18px; bottom: 18px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.94); color: var(--hs-ink); font-size: 13.5px; font-weight: 700; box-shadow: var(--hs-shadow); backdrop-filter: blur(6px); }
.hs-photo-note svg { color: var(--hs-brand-dark); flex: 0 0 auto; }

/* ---------- Ровные внутренние отступы карточек и форм ---------- */
.hs-service > :last-child, .hs-step > :last-child, .hs-review > :last-child, .hs-contact-card > :last-child,
.hs-usp-item > div > :last-child, .hs-postcard-body > :last-child { margin-bottom: 0; }
.hs-form-msg:empty { display: none; }
.hs-policy { margin-bottom: 0; }

/* =====================================================================
   Шапка на планшетах/телефонах: логотип · [телефон] · бургер.
   (правило в конце файла — перебивает .hs-btn { display:inline-flex })
   ===================================================================== */
@media (max-width: 1120px) {
    .hs-header-actions .hs-header-cta, .hs-header .hs-nav { display: none; }
    .hs-header-actions .hs-burger { display: flex; }
    /* телефон остаётся как круглая иконка со ссылкой tel: */
    .hs-header-actions .hs-header-phone { display: inline-flex; width: 42px; height: 42px; justify-content: center; border: 1px solid var(--hs-line); border-radius: 50%; background: #fff; }
    .hs-header-actions .hs-header-phone span { display: none; }
    .hs-header-actions .hs-header-phone:hover { border-color: var(--hs-brand); background: var(--hs-brand-soft); }
    .hs-header-actions { gap: 10px; }
}
@media (max-width: 640px) {
    .hs-header-actions .hs-header-search { display: none; } /* поиск доступен внутри мобильного меню */
    .hs-header-inner { min-height: 68px; gap: 10px; }
    .hs-logo-img { max-width: min(220px, 52vw); }
}
/* Базовый шрифт для всего документа (шторка меню, подвал, модалки живут вне .hs) */
body { font-family: var(--hs-font); color: var(--hs-ink); -webkit-font-smoothing: antialiased; }

/* =====================================================================
   Блог: список статей, страница статьи
   ===================================================================== */
.hs-blog-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hs-blog-cats a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 30px; border: 1px solid var(--hs-line); background: #fff; color: var(--hs-ink); font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color .15s, background .15s, color .15s; }
.hs-blog-cats a small { color: var(--hs-muted); font-size: 12px; }
.hs-blog-cats a:hover { border-color: var(--hs-brand); color: var(--hs-brand-dark); }
.hs-blog-cats a.is-active { background: var(--hs-ink); border-color: var(--hs-ink); color: #fff; }
.hs-blog-cats a.is-active small { color: rgba(255,255,255,.6); }
.hs-postlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .hs-postlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .hs-postlist { grid-template-columns: 1fr; } }
.hs-postcard { transition: transform .2s, box-shadow .2s; }
.hs-postcard:hover { transform: translateY(-4px); box-shadow: var(--hs-shadow-lg); }
.hs-postcard-media { display: block; background: var(--hs-bg-soft); }
.hs-postcard-noimg { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; background: radial-gradient(130% 120% at 72% 8%, #fff, var(--hs-brand-soft) 82%); }
.hs-postcard-noimg .hs-illu { max-width: 120px; }
.hs-postcard-date a { color: var(--hs-brand-dark); text-decoration: none; font-weight: 600; }
.hs-postcard-more { font-size: 14px; font-weight: 700; color: var(--hs-brand-dark); text-decoration: none; margin-top: 6px; }
.hs-postcard-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.hs-pagination { display: flex; justify-content: center; margin-top: 36px; }
.hs-pagination ul { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; flex-wrap: wrap; }
.hs-pagination a, .hs-pagination span { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: 10px; border: 1px solid var(--hs-line); text-decoration: none; color: var(--hs-ink-2); font-weight: 600; font-size: 14px; }
.hs-pagination a:hover { border-color: var(--hs-brand); color: var(--hs-brand-dark); background: var(--hs-brand-soft); }
.hs-pagination .current { background: var(--hs-ink); border-color: var(--hs-ink); color: #fff; }
.hs-pagination .dots { border: none; }

/* Статья */
.hs-article-head { background: linear-gradient(180deg, #faf7f2, #f3eee7); padding: clamp(28px, 4vw, 48px) 0 clamp(28px, 4vw, 44px); }
.hs-article-head-inner { max-width: 1100px; }
.hs-article-head .elporta-breadcrumbs { margin: 0 0 14px; }
.hs-article-title { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; margin: 0 0 16px; max-width: 900px; text-wrap: balance; }
.hs-article-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--hs-muted); align-items: center; }
.hs-article-meta .cat { color: var(--hs-brand-dark); font-weight: 700; text-decoration: none; }
.hs-article-meta .cat:hover { text-decoration: underline; text-underline-offset: 3px; }
.hs-article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 64px); padding-top: clamp(28px, 3.5vw, 48px); align-items: start; }
.hs-article-main { min-width: 0; max-width: 820px; }
.hs-article-cover { margin: 0 0 clamp(24px, 3vw, 36px); border-radius: var(--hs-radius-lg); overflow: hidden; box-shadow: var(--hs-shadow); }
.hs-article-cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; height: auto; }
.hs-article-body { max-width: none; font-size: 17px; line-height: 1.75; }
.hs-article-body > p:first-child { font-size: 18.5px; color: var(--hs-ink); }
.hs-article-body h2 { font-size: clamp(22px, 2.4vw, 28px); margin: 40px 0 14px; letter-spacing: -.01em; scroll-margin-top: 90px; }
.hs-article-body h3 { font-size: 19px; margin: 26px 0 8px; }
.hs-article-body ul, .hs-article-body ol { padding-left: 24px; margin: 0 0 18px; }
.hs-article-body li { margin-bottom: 8px; }
.hs-article-body a { color: var(--hs-brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.hs-article-body table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 0 0 18px; display: block; overflow-x: auto; }
.hs-article-body th, .hs-article-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hs-line); vertical-align: top; }
.hs-article-body th { color: var(--hs-muted); font-weight: 600; }
.hs-article-faq { margin-top: clamp(36px, 4vw, 56px); }
.hs-article-faq h2 { font-size: clamp(22px, 2.4vw, 28px); margin: 0 0 18px; }
.hs-article-faq .hs-faq { max-width: none; margin: 0; }
.hs-article-cta { margin-top: clamp(36px, 4vw, 56px); padding: clamp(22px, 3vw, 32px); border-radius: var(--hs-radius); background: var(--hs-brand-soft); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; align-items: center; }
.hs-article-cta h3 { font-size: 20px; font-weight: 800; margin: 0 0 6px; }
.hs-article-cta p { margin: 0; color: var(--hs-ink-2); font-size: 15px; }
.hs-article-cta .actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.hs-article-side { position: sticky; top: 96px; display: grid; gap: 16px; }
.hs-side-card { background: #fff; border: 1px solid var(--hs-line); border-radius: var(--hs-radius); padding: 22px; }
.hs-side-card h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--hs-muted); margin: 0 0 14px; }
.hs-side-card .hs-checklist { margin: 0 0 16px; gap: 10px; }
.hs-side-card .hs-checklist li { font-size: 14px; }
.hs-side-phone { display: block; text-align: center; margin-top: 12px; font-weight: 800; color: var(--hs-ink); text-decoration: none; font-size: 17px; }
.hs-side-phone:hover { color: var(--hs-brand-dark); }
.hs-side-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hs-side-door { display: block; text-decoration: none; color: var(--hs-ink); }
.hs-side-door img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; background: var(--hs-bg-soft); display: block; margin-bottom: 6px; }
.hs-side-door .t { display: block; font-size: 13.5px; font-weight: 700; }
.hs-side-door .p { display: block; font-size: 12.5px; color: var(--hs-brand-dark); font-weight: 700; }
.hs-side-door:hover .t { color: var(--hs-brand-dark); }
@media (max-width: 1000px) {
    .hs-article-grid { grid-template-columns: 1fr; }
    .hs-article-side { position: static; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
    .hs-article-cta .actions { justify-content: flex-start; }
}

/* ---------- Единый отступ для «липких» блоков: под шапкой (+ админ-бар WordPress) ---------- */
:root { --hs-sticky-top: 104px; }              /* шапка 81px + воздух */
.admin-bar { --hs-sticky-top: 136px; }         /* + 32px админ-бара */
@media (max-width: 782px) { .admin-bar { --hs-sticky-top: 150px; } }
@media (max-width: 640px) { :root { --hs-sticky-top: 92px; } }
.hs-article-side, .hs-page-side { top: var(--hs-sticky-top); }
html { scroll-padding-top: var(--hs-sticky-top); }

/* ---------- Текстовые страницы (статья, список статей, инфостраница): ограниченная ширина по центру ---------- */
.hs-article .hs-container, .hs-blog .hs-container, .hs-info .hs-container { max-width: calc(1240px + 2 * clamp(16px, 5vw, 120px)); margin-inline: auto; }
.hs-article-main { max-width: none; }
.hs-article-head-inner { max-width: none; }
.hs-article-title { max-width: 860px; }
@media (min-width: 1400px) { .hs-article-grid, .hs-page-grid { grid-template-columns: minmax(0, 1fr) 360px; } }

/* ---------- Компактная шапка (−25% по высоте, лого пропорционально) ---------- */
.hs-header-inner { min-height: 60px; padding-block: 6px; }
.hs-logo-img { height: clamp(32px, 3.7vw, 46px); max-width: min(210px, 46vw); }
.hs-header-cta { padding: 9px 18px; font-size: 14.5px; }
.hs-header-search, .hs-burger { width: 38px; height: 38px; }
@media (max-width: 1120px) { .hs-header-actions .hs-header-phone { width: 38px; height: 38px; } }
.hs-menu a { padding: 6px 2px; }
@media (max-width: 640px) { .hs-header-inner { min-height: 56px; padding-block: 5px; } .hs-logo-img { height: 38px; max-width: min(185px, 50vw); } }
:root { --hs-sticky-top: 84px; }
.admin-bar { --hs-sticky-top: 116px; }
@media (max-width: 782px) { .admin-bar { --hs-sticky-top: 130px; } }
@media (max-width: 640px) { :root { --hs-sticky-top: 76px; } }
/* FAQ-страница */
.hs-faq-group { margin-bottom: clamp(28px, 4vw, 44px); }
.hs-faq-group h2 { font-size: clamp(20px, 2.2vw, 26px); margin: 0 0 14px; scroll-margin-top: var(--hs-sticky-top); }
.hs-faqpage .hs-faq { max-width: none; margin: 0; }
