/* ===== TOKENS ===== */
:root {
  --rem-brown: #342E2C;
  --rem-orange: #FF5900;
  --rem-white: #FFFFFF;
  --rem-dark: #202020;
  --rem-grey: #5F5F5F;
  --rem-bg: #F8F5F0;
  --rem-surface-1: #ECE8E0;
  --rem-surface-orange: #FFE9DD;
  --rem-surface-orange-soft: #FBE9E6;
  --rem-gradient-cta: radial-gradient(ellipse 74.25% 135.57% at 1.02% 2.43%, #F07853 0%, #897B74 100%);
  --rem-star: #FFD700;
  --rem-star-empty: #D8D2C5;
  --font-rating: 26px;

  /* ===== TYPOGRAPHY ===== */
  /* размеры заголовков (desktop) */
  --font-h1: 54px;
  --font-h2: 48px;
  --font-h3: 32px;
  --font-h4: 24px;
  /* размеры заголовков (mobile ≤767px) */
  --font-h1-mobile: 40px;
  --font-h2-mobile: 32px;
  --font-h3-mobile: 24px;
  --font-h4-mobile: 20px;
  /* кастомный H1 в hero-баннере (визуально как H2, семантически H1) */
  --font-h1-hero: 48px;
  --font-h1-hero-mobile: 32px;
  --font-contacts-title: 64px;
  --lh-contacts-title: 76.8px;
  /* базовый текст */
  --font-body: 18px;
  --font-body-sm: 16px;
  /* line-height в относительных единицах */
  --lh-h1: 1.2;
  --lh-h2: 1.2;
  --lh-h3: 1.25;
  --lh-h4: 1.3;
  --lh-h1-hero: 1.2;
  --lh-body: 1.6;
  --lh-btn: 1.2;
}

/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: #F8F5F0;
    color: #202020;
    font-size: var(--font-body);
    line-height: var(--lh-body);
}

/* ===== TYPOGRAPHY: базовые заголовки ===== */
h1 {
    font-size: var(--font-h1);
    line-height: var(--lh-h1);
    font-weight: 500;
}
h2 {
    font-size: var(--font-h2);
    line-height: var(--lh-h2);
    font-weight: 500;
}
h3 {
    font-size: var(--font-h3);
    line-height: var(--lh-h3);
    font-weight: 500;
}
h4 {
    font-size: var(--font-h4);
    line-height: var(--lh-h4);
    font-weight: 500;
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container {
    width: 100%;
    max-width: 1400px;
    background: #F8F5F0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
/* 80px между секциями, но НЕ между header и первой секцией */
.container > * + * {
    margin-top: 80px;
}
.container > .header + * {
    margin-top: 0;
}
/* крошки: первый сосед header, hero после крошек — без 80px */
.container > .breadcrumbs + * {
    margin-top: 0;
}

/* ===== COMMON ===== */
.section-title {
    font-size: var(--font-h2);
    font-weight: 500;
    line-height: 1.2;
    color: #202020;
}
.section-title.centered {
    text-align: center;
}

/* ===== BUTTONS (дизайн-система v2) ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: none;
    border-radius: 99px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s, background 0.2s, outline-color 0.2s, color 0.2s;
}

/* --- Слоты кнопки (по дизайн-системе) --- */
.btn__content {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px; /* M/L: content padding 10px (S: 6px) */
}
.btn__text {
    display: block;
}
.btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.btn__icon--left { order: -1; }
.btn__icon--right { order: 1; }
.btn__icon--inline {
    width: 12px;   /* M: content icon 12px */
    height: 12px;
}
[class*="--l--"] .btn__icon--inline {
    width: 18px;   /* L: content icon 18px */
    height: 18px;
}
/* размеры боковых иконок по размеру кнопки */
.btn__icon--left,
.btn__icon--right {
    width: 20px;   /* M: 20px */
    height: 20px;
}
[class*="--l--"] .btn__icon--left,
[class*="--l--"] .btn__icon--right {
    width: 24px;   /* L: 24px */
    height: 24px;
}
.btn--icon-only .btn__icon--left,
.btn--icon-only .btn__icon--right {
    width: auto;
    height: auto;
}

/* --- CTA --- */
.btn--cta--s--default,
.btn--cta--m--default,
.btn--cta--l--default {
    background: var(--rem-orange);
    color: var(--rem-white);
}
.btn--cta--m--default { height: 48px; padding: 8px 14px; font-size: 16px; line-height: var(--lh-btn) ; }
.btn--cta--s--default { height: 40px; padding: 6px 12px; font-size: 14px; line-height: var(--lh-btn) ; }
.btn--cta--l--default { height: 60px; padding: 8px 18px; font-size: 20px; line-height: var(--lh-btn) ; }
.btn--cta--s--default:hover,
.btn--cta--m--default:hover,
.btn--cta--l--default:hover { opacity: 0.80; }
.btn--cta--s--default:disabled,
.btn--cta--m--default:disabled,
.btn--cta--l--default:disabled { opacity: 0.40; }

/* --- Primary --- */
.btn--primary--s--default,
.btn--primary--m--default,
.btn--primary--l--default {
    background: var(--rem-brown);
    color: var(--rem-white);
}
.btn--primary--m--default { height: 48px; padding: 8px 14px; font-size: 16px; line-height: var(--lh-btn) ; }
.btn--primary--s--default { height: 40px; padding: 6px 12px; font-size: 14px; line-height: var(--lh-btn) ; }
.btn--primary--l--default { height: 60px; padding: 8px 18px; font-size: 20px; line-height: var(--lh-btn) ; }
.btn--primary--s--default:hover,
.btn--primary--m--default:hover,
.btn--primary--l--default:hover { opacity: 0.80; }
.btn--primary--s--default:disabled,
.btn--primary--m--default:disabled,
.btn--primary--l--default:disabled { opacity: 0.40; }

/* --- Secondary (обводка) --- */
.btn--secondary--s--default,
.btn--secondary--m--default,
.btn--secondary--l--default {
    background: transparent;
    color: var(--rem-dark);
    outline: 1px solid var(--rem-surface-1);
    outline-offset: -1px;
}
.btn--secondary--m--default { height: 48px; padding: 8px 14px; font-size: 16px; line-height: var(--lh-btn) ; }
.btn--secondary--s--default { height: 40px; padding: 6px 12px; font-size: 14px; line-height: var(--lh-btn) ; }
.btn--secondary--l--default { height: 60px; padding: 8px 18px; font-size: 20px; line-height: var(--lh-btn) ; }
.btn--secondary--s--default:hover,
.btn--secondary--m--default:hover,
.btn--secondary--l--default:hover { outline-color: var(--rem-orange); }
.btn--secondary--s--default:disabled,
.btn--secondary--m--default:disabled,
.btn--secondary--l--default:disabled { opacity: 0.40; outline: none; }

/* --- Ghost --- */
.btn--ghost--s--default,
.btn--ghost--m--default,
.btn--ghost--l--default {
    background: transparent;
    color: var(--rem-orange);
}
.btn--ghost--m--default { height: 48px; padding: 8px 14px; font-size: 16px; line-height: var(--lh-btn) ; }
.btn--ghost--s--default { height: 40px; padding: 6px 12px; font-size: 14px; line-height: var(--lh-btn) ; }
.btn--ghost--l--default { height: 60px; padding: 8px 18px; font-size: 20px; line-height: var(--lh-btn) ; }
.btn--ghost--s--default:hover,
.btn--ghost--m--default:hover,
.btn--ghost--l--default:hover { background: var(--rem-surface-orange-soft); }
.btn--ghost--s--default:disabled,
.btn--ghost--m--default:disabled,
.btn--ghost--l--default:disabled { opacity: 0.40; color: var(--rem-dark); }

/* --- White --- */
.btn--white--s--default,
.btn--white--m--default,
.btn--white--l--default {
    background: var(--rem-white);
    color: var(--rem-dark);
    outline: 1px solid var(--rem-white);
    outline-offset: -1px;
}
.btn--white--m--default { height: 48px; padding: 8px 14px; font-size: 16px; line-height: var(--lh-btn) ; }
.btn--white--s--default { height: 40px; padding: 6px 12px; font-size: 14px; line-height: var(--lh-btn) ; }
.btn--white--l--default { height: 60px; padding: 8px 18px; font-size: 20px; line-height: var(--lh-btn) ; }
.btn--white--s--default:hover,
.btn--white--m--default:hover,
.btn--white--l--default:hover { color: var(--rem-orange); }
.btn--white--s--default:disabled,
.btn--white--m--default:disabled,
.btn--white--l--default:disabled { opacity: 0.40; color: var(--rem-dark); }

/* --- Кнопка-иконка (только иконка, без текста) --- */
.btn--icon-only { width: 60px; height: 60px; padding: 0; }
.btn--icon-only.btn--m,
.btn--white--m--default.btn--icon-only { width: 48px; height: 48px; }
.btn--icon-only.btn--s,
.btn--white--s--default.btn--icon-only { width: 40px; height: 40px; }

.arrow-right {
    display: inline-flex;
    width: 24px;
    height: 24px;
    color: inherit;
}
.arrow-right svg {
    width: 24px;
    height: 24px;
}
.arrow-up-right {
    display: inline-flex;
    width: 20px;
    height: 20px;
    color: #202020;
}
.arrow-up-right svg {
    width: 20px;
    height: 20px;
}
.plus-icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    color: #FFFFFF;
}
.plus-icon svg {
    width: 24px;
    height: 24px;
}

/* ===== HEADER ===== */
.header {
    align-self: stretch;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
}
.logo svg {
    width: 155.22px;
    height: 34px;
    display: block;
}
.logo img {
    width: 156px;
    height: 34px;
    display: block;
}
.menu-navigation {
    display: flex;
    width: 660px;
    justify-content: center;
    align-items: center;
    gap: 32px;
}
.menu-item {
    color: #202020;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
}
.menu-item:hover {
    color: #FF5900;
}
.menu-item.is-active {
    color: #FF5900;
    font-weight: 500;
}
.caret-down {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: #0D0D0D;
}
.caret-down svg {
    width: 16px;
    height: 16px;
}

/* ===== HEADER: дропдаун «Услуги» (разделы из БД) ===== */
.menu-dropdown {
    position: relative;
}
/* ===== МЕГА-МЕНЮ «Услуги»: открытие по клику, плашка на всю ширину контента ===== */
.menu-dropdown__panel {
    position: fixed;
    top: 58px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1400px, calc(100vw - 40px));
    padding: 40px;
    background: var(--rem-white);
    border: 1px solid var(--rem-surface-1);
    border-radius: 24px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
    display: none;
    z-index: 100;
}
/* открытие ТОЛЬКО по клику (класс вешает JS), hover не открывает */
.menu-dropdown.is-open .menu-dropdown__panel {
    display: block;
}
.menu-dropdown__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.menu-dropdown__cell {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    text-decoration: none;
    transition: opacity 0.2s;
}
.menu-dropdown__cell:hover {
    opacity: 0.8;
}
.menu-dropdown__img {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}
.menu-dropdown__name {
    font-size: 20px;
    line-height: 1.2;
    color: var(--rem-dark);
}
.menu-dropdown__all {
    display: inline-block;
    margin-top: 24px;
    font-size: 16px;
    line-height: var(--lh-body);
    color: var(--rem-dark);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}
.menu-dropdown__all:hover {
    color: var(--rem-orange);
}
@media (max-width: 1100px) {
    .menu-dropdown__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.header-cta {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

/* ===== HERO ===== */
.section-hero {
    align-self: stretch;
    padding: 60px;
    position: relative;
    background: #342E2C url('/assets/img-uploads/img-ban.png') center / cover no-repeat;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
}
.hero-card {
    width: 500px;
    height: 500px;
    padding: 40px;
    background: white;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    z-index: 1;
}
.badge {
    display: flex;
    align-items: center;
    gap: 8px;
}
.badge svg {
    width: 28px;
    height: 28px;
}
.badge-text {
    color: #5F5F5F;
    font-size: 16px;
    font-weight: 400;
}
.hero-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}
.hero-title {
    /* кастомный H1 (визуально 48px = H2, семантически H1) */
    font-size: var(--font-h1-hero);
    font-weight: 500;
    line-height: var(--lh-h1);
}
.hero-description {
    width: 420px;
    color: #202020;
    font-size: 20px;
    line-height: var(--lh-body);
}
.hero-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* ===== STATISTICS ===== */
.section-statistics {
    align-self: stretch;
    display: flex;
    gap: 24px;
    justify-content: flex-start;
    align-items: flex-start;
}
.stat-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
}
.stat-icon {
    display: inline-flex;
    padding: 10px;
    background: #FFE9DD;
    border-radius: 16px;
    color: #FF5900;
}
.stat-icon svg {
    display: block;
    width: 40px;
    height: 40px;
}

.stat-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.stat-value {
    color: #FF5900;
    font-size: 24px;
    font-weight: 500;
    line-height: 33.6px;
}
.stat-label {
    color: #202020;
    font-size: 16px;
    line-height: var(--lh-body);
}

/* ===== PROBLEMS ===== */
.section-problems {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.problems-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.problem-card {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.problem-header {
    padding: 32px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.problem-title {
    flex: 1;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 400;
}
.problem-icon svg {
    display: block;
    width: 60px;
    height: 60px;
}
.problem-body {
    flex: 1;
    padding: 0 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.problem-desc {
    color: #5F5F5F;
    font-size: 20px;
    line-height: var(--lh-body);
}
.problem-price {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.problem-price .price {
    font-size: 32px;
    color: #202020;
}
.problem-card-cta {
    padding: 32px;
    background: var(--rem-gradient-cta);
    position: relative;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}
.problem-card-cta-content {
    z-index: 1;
}
.problem-card-cta-content h3 {
    color: white;
    font-size: 32px;
    font-weight: 400;
    line-height: var(--lh-h3);
}
.problem-card-cta-content p {
    color: white;
    font-size: 20px;
    line-height: var(--lh-body);
    margin: 12px 0 20px;
}
.cta-image {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: 115px;
    height: 173px;
}

/* ===== SOLUTIONS ===== */
.section-solutions {
    align-self: stretch;
    padding: 60px;
    background: white;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.solutions-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
}
.solutions-header h2 {
    font-size: 48px;
    font-weight: 500;
    line-height: var(--lh-h2);
    flex: 1;
}
.solutions-sub {
    color: #5F5F5F;
    font-size: 20px;
    line-height: var(--lh-body);
}
.segmented-control {
    align-self: stretch;
    padding: 2px;
    background: #F8F5F0;
    border-radius: 99px;
    display: flex;
}
.segment {
    flex: 1;
    padding: 11px 20px;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    line-height: var(--lh-btn);
    color: #898886;
    border-radius: 99px;
    cursor: pointer;
}
.segment.active {
    background: white;
    color: #202020;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.solutions-content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}
.solutions-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.solutions-text h3 {
    font-size: 32px;
    font-weight: 400;
    line-height: var(--lh-h3);
}
.solutions-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.solutions-head p {
    color: #5F5F5F;
    font-size: 20px;
    line-height: var(--lh-body);
}
.solutions-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.solutions-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 20px;
    line-height: var(--lh-body);
    color: #202020;
}
.solutions-list li::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #FF5900;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 12px;
}
.guarantee-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 12px;
    background: #FFE9DD;
    padding: 18px 16px;
    border-radius: 99px;
    font-size: 20px;
    line-height: var(--lh-body);
}
.guarantee-badge svg {
    width: 24px;
    height: 24px;
}
.solutions-image {
    flex: 1;
    height: 486px;
    border-radius: 24px;
    overflow: hidden;
}
.solutions-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== PRODUCTS ===== */
.section-products {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.product-card {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(32, 32, 32, 0.12);
}
.product-card:hover .product-info h3 {
    color: #FF5900;
}
.product-image {
    height: 239px;
    padding: 32px;
    background-color: var(--rem-surface-1);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    border-radius: 24px 24px 0 0;
    position: relative;
}
.product-image .btn {
    position: relative;
    z-index: 1;
}
.product-info {
    flex: 1;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.product-info h3 {
    font-size: 32px;
    font-weight: 400;
    line-height: var(--lh-h3);
    transition: color 0.2s;
}
.product-info > p {
    color: #5F5F5F;
    font-size: 20px;
    line-height: var(--lh-body);
}
.product-price-row {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.product-price-row .price {
    font-size: 32px;
    color: #202020;
}
.product-card-cta {
    padding: 32px;
    background: var(--rem-gradient-cta);
    position: relative;
    justify-content: space-between;
    align-items: flex-start;
}
.product-card-cta h3 {
    color: white;
    font-size: 32px;
    font-weight: 500;
    line-height: var(--lh-h3);
    position: relative;
    z-index: 1;
}
.product-card-cta .btn {
    margin-top: 20px;
    position: relative;
    z-index: 1;
}
.cta-product-image {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    z-index: 0;
}

/* ===== STEPS ===== */
.section-steps {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.steps-grid {
    display: flex;
    gap: 12px;
}
.step-card {
    flex: 1;
    padding: 32px;
    background: white;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.step-number {
    font-size: 64px;
    font-weight: 300;
    line-height: 70.4px;
    opacity: 0.5;
}
.step-card h3 {
    font-size: 32px;
    font-weight: 400;
    line-height: var(--lh-h3);
}
.step-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.step-head p {
    color: #5F5F5F;
    font-size: 20px;
    line-height: var(--lh-body);
}
.social-buttons {
    margin-top: auto;
    display: flex;
    gap: 16px;
}
.btn-social {
    width: 60px;
    height: 60px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-social svg {
    width: 32px;
    height: 32px;
}
.btn-social.order-site { background: #FF4F1F; }
.btn-social.telegram { background: #21B8DD; }
.btn-social.whatsapp { background: #67C15E; }
.step-master-info {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 6px;
    background: #F8F5F0;
    border-radius: 99px;
}
.step-master-info img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
}
.location-icon {
    display: inline-flex;
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 99px;
    align-items: center;
    justify-content: center;
    color: #FF5900;
}
.location-icon svg {
    width: 26px;
    height: 26px;
}

.checkmark-badge {
    margin-top: auto;
    width: 60px;
    height: 60px;
    background: #99AF61;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.checkmark-badge svg {
    width: 26px;
    height: 26px;
}

/* ===== BRANDS ===== */
.section-brands {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
.brands-title {
    color: #5F5F5F;
    font-size: 20px;
    line-height: 1.2;
}
.brands-logos {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.brand-logo {
    width: 194px;
    height: 70px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.brand-logo svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ===== PRICING ===== */
.section-pricing {
    align-self: stretch;
    padding: 60px;
    background: white;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.pricing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}
.pricing-header h2 {
    font-size: 48px;
    font-weight: 500;
    line-height: var(--lh-h2);
}
.pricing-table {
    display: flex;
    flex-direction: column;
}
.table-row {
    display: grid;
    grid-template-columns: 553px 1fr 1fr;
    padding: 16px;
    border-bottom: 1px solid #ECE8E0;
    font-size: 20px;
    line-height: var(--lh-body);
    text-align: left;
}
.table-row.header {
    color: #5F5F5F;
    font-weight: 400;
}
.table-row.alt {
    background: #F8F5F0;
}
.pricing-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    background: #FFE9DD;
    border-radius: 16px;
}
.pricing-footer > svg {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.pricing-footer > span {
    flex: 1;
    color: black;
    font-size: 16px;
    line-height: var(--lh-body);
}

/* ===== MASTERS ===== */
.section-masters {
    align-self: stretch;
    padding: 60px;
    background: #342E2C;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.masters-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
}
.masters-header h2 {
    color: white;
    font-size: 48px;
    font-weight: 500;
    line-height: var(--lh-h2);
}
.masters-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
}
.masters-grid.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}
.masters-grid.is-dragging .master-card {
    pointer-events: none;
}
.masters-grid::-webkit-scrollbar { display: none; }
.master-card {
    flex: 0 0 auto;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scroll-snap-align: start;
}
.master-photo {
    height: 320px;
    padding: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    background-image: radial-gradient(ellipse 74.25% 135.57% at 1.02% 2.43%, #F07853 0%, #897B74 100%);
}
.master-name {
    color: white;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 400;
}
.master-exp {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 99px;
    color: white;
    font-size: 16px;
    line-height: 16px;
}
.master-desc {
    color: #ECE8E0;
    font-size: 16px;
    line-height: var(--lh-body);
}

/* О КОМПАНИИ: блок мастеров — светлый, 4 в ряд, без свайпа на десктопе */
.section-masters--about {
    background: transparent;
    padding: 0;
    gap: 32px;
}
.section-masters--about .masters-header h2 {
    color: #202020;
}
.section-masters--about .masters-grid {
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
}
.section-masters--about .master-card {
    width: calc(25% - 9px);
}
.section-masters--about .master-desc {
    color: #5F5F5F;
}
@media (max-width: 767px) {
    .section-masters--about {
        gap: 20px;
    }
    /* перебиваем общие мобильные padding 24/32px — на about секция без паддингов */
    .section-masters.section-masters--about {
        padding: 0 !important;
    }
    /* без свайпа: карточки переносятся вниз, 1 колонка */
    .section-masters--about .masters-grid {
        flex-wrap: wrap;
        overflow-x: visible;
        scroll-snap-type: none;
        cursor: default;
        user-select: auto;
    }
    .section-masters--about .master-card,
    .section-masters--about .master-card--cta {
        width: 100%;
        flex: 0 0 auto;
    }
}

/* планшет: 2 колонки (заголовок 32px не влезает в 25%) */
@media (min-width: 768px) and (max-width: 1199px) {
    .section-masters--about .master-card,
    .section-masters--about .master-card--cta {
        width: calc(50% - 6px);
        align-self: auto;
    }
}

/* ЦИТА-КАРТОЧКА в сетке мастеров (about): добивает 2-й ряд до 4 */
/* десктоп только ≥1200px, чтобы не перебивать адаптив ниже */
@media (min-width: 1200px) {
    .section-masters--about .master-card--cta {
        width: calc(25% - 9px);
        align-self: stretch;
    }
}
.master-card--cta {
    background: white;
    border-radius: 24px;
    padding: 24px;
    box-sizing: border-box;
    height: 100%;
}
.master-cta {
    height: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
}
.master-cta .btn {
    margin-top: auto;
}
.master-cta__title {
    color: #202020;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}
.master-cta__text {
    color: #5F5F5F;
    font-size: 20px;
    line-height: var(--lh-body);
    margin: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

/* ===== FEATURES ===== */
.section-features {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.feature-card {
    padding: 32px;
    background: white;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.feature-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.feature-icon svg {
    width: 80px;
    height: 80px;
}
.feature-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.feature-card h3 {
    font-size: 32px;
    font-weight: 400;
    line-height: var(--lh-h3);
}
.feature-head p {
    color: #5F5F5F;
    font-size: 20px;
    line-height: var(--lh-body);
}

/* ===== PROJECTS ===== */
.section-projects {
    align-self: stretch;
    padding: 60px;
    background: #ECE8E0;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
/* РАБОТЫ: секция кейсов без фона и паддингов (модификатор, не задевает главную) */
.section-projects--portfolio {
    background: transparent;
    padding: 0;
    border-radius: 0;
}
.projects-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
}
.projects-header h2 {
    font-size: 48px;
    font-weight: 500;
    line-height: var(--lh-h2);
}
.projects-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 12px;
    row-gap: 32px;
}
.project-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.project-image {
    height: 259px;
    border-radius: 24px;
    background-size: cover;
    background-position: center;
}
.project-desc {
    font-size: 20px;
    line-height: var(--lh-body);
    color: #202020;
}
.project-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.project-time {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    background: #F8F5F0;
    border-radius: 99px;
    font-size: 14px;
    line-height: var(--lh-body);
    color: #5F5F5F;
    align-self: flex-start;
}
.project-time svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.project-date {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: #F8F5F0;
    border-radius: 99px;
    font-size: 14px;
    line-height: var(--lh-body);
    color: #5F5F5F;
    align-self: flex-start;
}

/* ===== DISCOUNT ===== */

/* ===== PORTFOLIO: карточки кейсов кликабельные + модалка ===== */
.project-card--case,
.project-card[data-href] {
    cursor: pointer;
    transition: transform 0.2s ease;
}
.project-card--case:hover,
.project-card[data-href]:hover {
    transform: translateY(-4px);
}
.case-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    margin: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
/* модалка/лайтбокс — прямые дети .container: сбрасываем 80px-отступ секций */
.container > .case-modal,
.container > .case-lightbox {
    margin-top: 0;
}
.case-modal.is-open {
    visibility: visible;
    opacity: 1;
}
.case-modal__overlay {
    position: fixed;
    inset: 0;
    background: rgba(32, 32, 32, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.case-modal__dialog {
    position: relative;
    flex: 0 0 auto;
    width: auto;
    max-width: calc(100vw - 48px);
    height: min(760px, calc(100vh - 48px));
    aspect-ratio: 1000 / 760;
    margin: 0;
    overflow: hidden;
    background: #FFFFFF;
    display: flex;
    flex-direction: row;
}
.case-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2100;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Кнопка play для видео-эмбеда (постер + треугольник) */
.case-modal__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1200;
    box-shadow: 0 4px 20px rgba(32, 32, 32, 0.25);
    transition: transform 0.15s ease, background 0.15s ease;
}
.case-modal__play:hover {
    background: #FFFFFF;
    transform: translate(-50%, -50%) scale(1.06);
}
.case-modal__play svg {
    width: 22px;
    height: 22px;
    margin-left: 3px;
}
/* ЛЕВАЯ ПАНЕЛЬ: медиа (фон — фото кейса) */
.ConentText {
    position: relative;
    width: 50%;
    flex-shrink: 0;
    align-self: stretch;
    padding: 16px;
    background: #000000 center / cover no-repeat;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}
.Dot {
    align-self: stretch;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
}
.DotActive {
    position: relative;
    flex: 1 1 0;
    height: 7px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 12px;
    overflow: hidden;
}
.DotActive .DotProgress {
    position: absolute;
    inset: 0;
    background: #FFFFFF;
    border-radius: 12px;
    transform: scaleX(0);
    transform-origin: left;
}
.DotActive.is-active .DotProgress {
    animation: dotProgress 5s linear forwards;
}
@keyframes dotProgress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
.Frame160 {
    align-self: stretch;
    flex: 1 1 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.case-modal__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s, opacity 0.2s;
    /* десктоп: стрелки видны только при наведении на медиа-панель */
    opacity: 0;
}
.ConentText:hover .case-modal__nav,
.ConentText:focus-within .case-modal__nav {
    opacity: 1;
}
/* иконка по центру круглой кнопки */
.case-modal__nav .btn__icon {
    padding: 0;
    width: auto;
    height: auto;
}
/* ПРАВАЯ ПАНЕЛЬ: контент */
.MediaContent {
    flex: 1 1 0;
    min-width: 0;
    align-self: stretch;
    padding: 40px;
    background: #FFFFFF;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.VerticalscrollContent {
    align-self: stretch;
    flex: 1 1 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
}
.Frame162 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
}
.Frame158 {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}
.case-modal__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 8px;
    background: #F8F5F0;
    border-radius: 99px;
    color: #5F5F5F;
    font-size: 14px;
    line-height: var(--lh-body);
}
.case-modal__badge svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.case-modal__title {
    color: #202020;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}
.case-modal__text {
    color: #202020;
    font-size: 20px;
    line-height: var(--lh-body);
    margin: 0;
}
.Adress {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    color: #5F5F5F;
    font-size: 16px;
    line-height: var(--lh-body);
}
.Adress svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.case-modal__btn {
    margin-top: 8px;
}
/* ЛАЙТБОКС: полноэкранный просмотр медиа */
.case-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.case-lightbox.is-open {
    visibility: visible;
    opacity: 1;
}
.case-lightbox__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
}
.case-lightbox__close {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2210;
    background: var(--rem-white);
    color: var(--rem-dark);
    outline: 1px solid var(--rem-white);
    outline-offset: -1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.case-lightbox__close:hover {
    color: var(--rem-orange);
    background: var(--rem-white);
}
.case-lightbox__media {
    position: relative;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.case-lightbox__img {
    max-width: 100%;
    max-height: calc(100vh - 48px);
    border-radius: 16px;
    object-fit: contain;
    display: block;
}
.case-lightbox__video {
    max-width: 100%;
    max-height: calc(100vh - 48px);
    border-radius: 16px;
}
.case-lightbox__embed {
    width: min(calc((100vh - 48px) * 9 / 16), calc(100vw - 48px));
    height: auto;
    aspect-ratio: 9 / 16;
    border: none;
    border-radius: 16px;
    background: #000;
}
@media (max-width: 767px) {
    /* мобилка: модалка на весь экран, без отступов */
    .case-modal {
        padding: 0;
    }
    /* стрелки на мобилке не нужны — там свайп */
    .case-modal__nav {
        display: none !important;
    }
    /* кнопка play видео — под шторкой: при подъёме шторка её перекрывает */
    .case-modal__play {
        z-index: 1;
    }
    .case-modal__dialog {
        flex-direction: column;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        aspect-ratio: auto;
        border-radius: 0;
    }
    /* медиа занимает весь экран, контент — bottom-sheet поверх */
    .ConentText {
        width: 100%;
        height: 100%;
        flex-shrink: 0;
        /* вертикальные фото/видео не режем — целиком в видимой области */
        background-size: contain;
        background-color: #000;
    }
    /* bottom-sheet: маленькая «челка» контента снизу, свайп вверх раскрывает */
    .MediaContent {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1vh;
        min-height: 40px;
        padding: 12px 24px 24px;
        background: #FFFFFF;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -8px 32px rgba(32, 32, 32, 0.18);
        overflow: hidden;
        transition: height 0.3s ease;
        z-index: 2;
    }
    .MediaContent.is-expanded {
        height: calc(100% - 48px);
    }
    .case-modal__handle {
        display: block;
        width: 48px;
        height: 5px;
        border-radius: 99px;
        background: #D8D2C5;
        margin: 0 auto 16px;
        flex-shrink: 0;
        cursor: grab;
    }
    .case-modal__title {
        font-size: 24px;
        line-height: 1.2;
    }
    .case-modal__text {
        font-size: 16px;
        line-height: var(--lh-body);
    }
}
.section-discount {
    align-self: stretch;
    background: var(--rem-gradient-cta);
    border-radius: 24px;
    display: flex;
    overflow: hidden;
}
.discount-image {
    width: 470px;
    flex-shrink: 0;
    position: relative;
}
.discount-image img {
    width: 392px;
    height: 584px;
    position: absolute;
    left: 0;
    bottom: 0;
    object-fit: cover;
}
.discount-content {
    flex: 1;
    padding: 60px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.discount-badge {
    display: inline-block;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 99px;
    color: white;
    font-size: 16px;
    line-height: var(--lh-body);
    align-self: flex-start;
}
.discount-offer {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.discount-offer span:first-child {
    color: white;
    font-size: 48px;
    font-weight: 500;
    line-height: 48px;
}
.discount-percent {
    color: white;
    font-size: 140px;
    font-weight: 500;
    line-height: 140px;
}
.discount-desc {
    color: #ECE8E0;
    font-size: 20px;
    line-height: var(--lh-body);
}
.discount-desc strong {
    color: white;
    font-weight: 400;
}

.section-pad--reviews {
    margin-top: 40px;
}
/* ===== REVIEWS ===== */
.section-reviews {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.reviews-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
}
.reviews-header h2 {
    font-size: var(--font-h2);
    font-weight: 400;
    line-height: var(--lh-h2);
}
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.review-card {
    padding: 32px;
    background: var(--rem-white);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.review-user {
    display: flex;
    align-items: center;
    gap: 12px;
}
.review-user svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.user-icon svg {
    width: 14px;
    height: 14px;
}
.username {
    color: var(--rem-grey);
    font-size: var(--font-body-sm);
    line-height: 1.2;
}
.username a {
    color: inherit;
    text-decoration: none;
}
.username a:hover {
    color: var(--rem-orange);
    text-decoration: underline;
    text-decoration-color: var(--rem-orange);
    text-decoration-thickness: 2px;
}
.review-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rating {
    display: flex;
    gap: 4px;
    font-size: var(--font-rating);
    line-height: 1;
}
.rating__filled {
    color: var(--rem-star);
}
.rating__empty {
    color: var(--rem-star-empty);
}
.review-date {
    color: var(--rem-grey);
    font-size: var(--font-body-sm);
    line-height: var(--lh-body);
}
.review-text {
    color: var(--rem-dark);
    font-size: 20px;
    line-height: var(--lh-body);
}
.review-work {
    padding: 16px;
    background: var(--rem-bg);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.review-work span:first-child {
    color: var(--rem-grey);
    font-size: 14px;
    font-weight: 500;
    line-height: var(--lh-body);
}
.review-work span:last-child {
    color: var(--rem-dark);
    font-size: 16px;
    line-height: var(--lh-body);
}
.review-location {
    display: flex;
    align-items: center;
    gap: 4px;
}
.review-location svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}



/* список отзывов в одну колонку (страница /otzyvy/, по макету) */
.reviews-grid--list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* ===== REVIEWS LAYOUT (страница /otzyvy/, под баннером) ===== */
.reviews-layout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.reviews-main {
    flex: 1 1 0;
    min-width: 0;
}
.reviews-sidebar {
    width: 380px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.review-cta-card,
.review-services-card {
    padding: 32px;
    background: var(--rem-white);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.review-cta-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.review-cta-icon svg {
    width: 60px;
    height: 60px;
}
.review-cta-text {
    color: var(--rem-dark);
    font-size: 20px;
    line-height: var(--lh-body);
}
.review-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 8px 14px;
    border-radius: 99px;
    outline: 1px solid var(--rem-surface-1);
    outline-offset: -1px;
    background: var(--rem-white);
    color: var(--rem-dark);
    font-size: 16px;
    font-weight: 500;
    line-height: var(--lh-btn);
    text-decoration: none;
    white-space: nowrap;
}
.pill-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.pill-btn:hover {
    outline-color: var(--rem-orange);
    color: var(--rem-orange);
}
/* градиентная плашка с цитатой */
.review-quote-card {
    padding: 32px;
    background: var(--rem-gradient-cta);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.review-quote-mark {
    width: 20px;
    height: 16px;
}
.review-quote-text {
    color: var(--rem-white);
    font-size: 20px;
    line-height: var(--lh-body);
}
.review-quote-profile {
    display: flex;
    align-items: center;
    gap: 16px;
}
.review-quote-photo {
    width: 48px;
    height: 48px;
    border-radius: 99px;
    object-fit: cover;
    flex-shrink: 0;
}
.review-quote-name {
    color: var(--rem-white);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
}
.review-quote-role {
    color: var(--rem-white);
    opacity: 0.5;
    font-size: 16px;
    line-height: var(--lh-body);
}
/* Наши услуги */
.review-services-title {
    color: var(--rem-dark);
    font-size: var(--font-h3);
    line-height: 1.2;
    font-weight: 400;
}
.review-services-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.review-service-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}
.review-service-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--rem-surface-1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.review-service-icon svg {
    width: 24px;
    height: 24px;
}
.review-service-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.review-service-name {
    color: var(--rem-dark);
    font-size: 20px;
    line-height: 1.2;
}
.review-service-item:hover .review-service-name {
    color: var(--rem-orange);
}
/* весь правый столбец липнет при скролле (едет до конца секции) */
.reviews-sidebar {
    align-self: stretch;
}
/* блок услуг липнет при скролле (едет до конца секции) */
.review-services-card {
    position: sticky;
    top: 24px;
}
/* кнопка «Все услуги» — по контенту, не на всю ширину */
.review-services-card .pill-btn {
    align-self: flex-start;
}
/* адаптив сайдбара отзывов */
@media (max-width: 1199px) {
    .reviews-sidebar { width: 320px; }
}
@media (max-width: 900px) {
    .reviews-layout { flex-direction: column; }
    .reviews-sidebar { width: 100%; position: static; }
    .review-services-card { position: static; }
}
@media (max-width: 767px) {
    .review-cta-card,
    .review-quote-card,
    .review-services-card { padding: 20px; }
    .review-cta-buttons { flex-wrap: wrap; }
    .review-services-title { font-size: var(--font-h3-mobile); }
}

/* ===== ARTICLES ===== */
.section-articles {
    align-self: stretch;
    padding: 60px;
    background: #ECE8E0;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.articles-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
}
.articles-header h2 {
    font-size: 48px;
    font-weight: 500;
    line-height: var(--lh-h2);
}
.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.article-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.article-image {
    height: 259px;
    border-radius: 24px;
    background-size: cover;
    background-position: center;
}
.article-card h4 {
    font-size: 20px;
    font-weight: 500;
    line-height: var(--lh-h4);
    color: #202020;
}
.article-card h4 a {
    text-decoration: none;
    color: #202020;
}
.article-card h4 a:hover {
    text-decoration: underline;
    text-decoration-color: #FF5900;
    text-decoration-thickness: 2px;
    color: #FF5900;
}

/* ===== CTA SECTION ===== */
.section-cta {
    align-self: stretch;
    padding: 60px;
    position: relative;
    background: #342E2C;
    border-radius: 24px;
    overflow: hidden;
}
.cta-bg-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.cta-bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cta-content {
    width: 490px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.cta-content h2 {
    color: white;
    font-size: 48px;
    font-weight: 500;
    line-height: var(--lh-h2);
}
.cta-content > p {
    color: white;
    font-size: 20px;
    line-height: var(--lh-body);
}
.cta-sub {
    color: white;
    font-size: 20px;
    font-weight: 500;
    line-height: var(--lh-body);
}
/* CTA-форма: инпут-пилюля с кнопкой «Отправить» внутри (как на услугах) */
.cta-form {
    width: 100%;
}
.cta-form .order-input {
    width: 100%;
    padding: 6px 6px 6px 20px;
}
.cta-consent {
    margin-top: 12px;
    color: var(--rem-white);
    font-size: 16px;
    line-height: var(--lh-body);
}
.cta-consent a {
    color: var(--rem-white);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cta-submit {
    height: 48px;
    padding: 0 18px;
    flex-shrink: 0;
    border: none;
    border-radius: 99px;
    background: var(--rem-orange);
    color: var(--rem-white);
    font-size: 16px;
    font-weight: 500;
    line-height: var(--lh-btn);
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}
.cta-submit svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.cta-submit:hover {
    opacity: 0.85;
}
/* Индикатор рабочего времени */
.work-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2ECC71;
    margin-right: 12px;
    vertical-align: middle;
    position: relative;
    flex-shrink: 0;
}
.work-indicator::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: rgba(46, 204, 113, 0.35);
    animation: work-pulse 2s ease-out infinite;
}
.work-indicator.is-closed {
    background: var(--rem-orange);
}
.work-indicator.is-closed::after {
    background: rgba(255, 89, 0, 0.35);
}
@keyframes work-pulse {
    0% { transform: scale(0.7); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}
.phone-invalid {
    outline-color: #E53935 !important;
    border-color: #E53935 !important;
}
.phone-error {
    display: none;
    position: fixed;
    z-index: 9999;
    max-width: 320px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #E53935;
    color: #fff;
    font-size: 14px;
    line-height: 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    pointer-events: none;
}
.phone-error::before {
    content: '';
    position: absolute;
    top: -6px;
    left: var(--arrow-x, 24px);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #E53935;
}

/* ===== КОНТАКТЫ (страница /kontakty/, по макету 26.08) ===== */
.contacts-page {
    align-self: stretch;
    width: 100%;
}
.contacts-page .container {
    align-items: stretch;
    width: 100%;
    gap: 40px;
}
/* гасим сквозной margin-top 80px внутри контактов — иначе 80+40=120px */
.contacts-page .container > * + * {
    margin-top: 0;
}
/* заголовок «Контакты» — слева (как в макете), не по центру */
.contacts-head {
    align-self: flex-start;
    text-align: left;
}
/* как Frame150 в макете: карточки/карта/реквизиты — gap 12px */
.contacts-body {
    align-self: stretch;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.contacts-head__title {
    font-size: var(--font-contacts-title);
    font-weight: 500;
    line-height: 1.2;
    color: var(--rem-dark);
}
@media (max-width: 767px) {
    .contacts-head__title { font-size: var(--font-h1-mobile); line-height: 1.2 ; }
}
.contact-grid {
    align-self: stretch;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.contact-card {
    padding: 40px;
    background: var(--rem-white);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.contact-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.contact-card__icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-card__icon svg {
    width: 32px;
    height: 32px;
}
.contact-card__title {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--rem-dark);
}
.contact-card__title a {
    color: var(--rem-dark);
    text-decoration: none;
}
.contact-card__title a:hover {
    color: var(--rem-orange);
}
.contact-card__text {
    font-size: 20px;
    line-height: var(--lh-body);
    color: var(--rem-dark);
}
.contact-card__social {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
/* иконки мессенджеров: размер задают слоты кнопки (L: 24px) */
.contact-card__social .btn__icon svg {
    width: 24px;
    height: 24px;
}
/* карта */
.contact-map {
    align-self: stretch;
    width: 100%;
    height: 426px;
    background: var(--rem-surface-1);
    border-radius: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 40px;
    position: relative;
    overflow: hidden;
}
.contact-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.contact-map__inner {
    position: relative;
    z-index: 2;
}
/* реквизиты */
.contact-requisites {
    align-self: stretch;
    width: 100%;
    padding: 40px;
    background: var(--rem-white);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}
.contact-requisites__title {
    font-size: var(--font-h3);
    line-height: 1.2;
    font-weight: 400;
    color: var(--rem-dark);
}
.contact-requisites__grid {
    align-self: stretch;
    display: flex;
    gap: 24px;
}
.contact-requisites__labels,
.contact-requisites__values {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 20px;
    line-height: 40px;
}
.contact-requisites__labels {
    color: var(--rem-grey);
    white-space: nowrap;
    flex-shrink: 0;
}
.contact-requisites__values {
    color: var(--rem-dark);
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* адаптив */
@media (max-width: 1100px) {
    .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .contact-card { padding: 20px; }
    .contact-card__icon,
    .contact-card__icon svg { width: 24px; height: 24px; }
    .contact-card__title { font-size: 16px; line-height: 1.2 ; }
    .contact-card__text { font-size: var(--font-body-sm); line-height: var(--lh-body) ; }
    .contact-map { height: 300px; padding: 24px; }
    .contact-requisites { padding: 20px; }
    .contact-requisites__labels,
    .contact-requisites__values { font-size: 16px; line-height: 32px; }
    .contact-requisites__grid { gap: 16px; }
    .contact-requisites__labels { white-space: normal; }
    .contact-requisites__values { overflow-wrap: anywhere; word-break: break-word; }
}

/* ===== FAQ ===== */
.section-faq {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
.faq-list {
    width: 860px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.faq-item {
    padding: 32px;
    background: white;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.faq-question span:first-child {
    font-size: 24px;
    line-height: var(--lh-body);
    font-weight: 400;
    color: #202020;
}
.faq-question svg {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.faq-question .icon-minus {
    display: none;
}
.faq-item.expanded .icon-plus {
    display: none;
}
.faq-item.expanded .icon-minus {
    display: block;
}
.faq-question:hover span:first-child {
    color: #FF5900;
}
.faq-question {
    cursor: pointer;
}


.faq-answer {
    display: none;
    color: #5F5F5F;
    font-size: 20px;
    line-height: var(--lh-body);
}
.faq-item.expanded .faq-answer {
    display: block;
}

/* ===== SEO ===== */
.section-seo {
    align-self: stretch;
    padding: 60px;
    background: var(--rem-gradient-cta);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.section-seo h2 {
    color: white;
    font-size: 48px;
    font-weight: 500;
    line-height: var(--lh-h2);
    width: 780px;
}
.seo-content {
    display: flex;
    gap: 40px;
}
.seo-content p {
    width: 655px;
    color: white;
    font-size: 20px;
    line-height: var(--lh-body);
}
.seo-content img {
    width: 417px;
    height: 406px;
    object-fit: cover;
    border-radius: 12px;
}

/* ===== FOOTER ===== */
.footer {
    width: 100%;
    margin-top: 80px;
    background: #342E2C;
    border-radius: 24px 24px 0 0;
}
.footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.footer-contact {
    display: flex;
    align-items: center;
    gap: 40px;
}
.footer-address {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.footer-phone {
    color: white;
    font-size: 24px;
    line-height: var(--lh-body);
    text-decoration: none;
}
.footer-address-text {
    color: white;
    opacity: 0.5;
    font-size: 16px;
    line-height: var(--lh-body);
}
.footer-hours {
    padding: 0 24px;
    border-left: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.footer-hours-time {
    color: white;
    font-size: 24px;
    line-height: var(--lh-body);
}
.footer-hours-label {
    color: white;
    opacity: 0.5;
    font-size: 16px;
    line-height: var(--lh-body);
}
.footer-cta {
    padding: 0 24px;
    border-left: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.footer-social {
    padding: 0 24px;
    border-left: 1px solid rgba(255,255,255,0.1);
    display: flex;
    gap: 12px;
}
.social-vk, .social-tg {
    width: 40px;
    height: 40px;
    background: #F8F5F0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer-links {
    display: flex;
    gap: 40px;
    padding-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.footer-col-title {
    color: white;
    opacity: 0.5;
    font-size: 16px;
    line-height: 1.2;
}
.footer-col a {
    color: white;
    font-size: 16px;
    line-height: var(--lh-body);
    text-decoration: none;
}
.footer-copy {
    color: white;
    opacity: 0.3;
    font-size: 14px;
    line-height: 16.8px;
}

/* ===== ADAPTIVE (desktop 1200px+) ===== */
@media (min-width: 1200px) {
    .container {
        max-width: 1400px;
    }
}

/* ===== ADAPTIVE (mobile 360–1199px) ===== */
@media (max-width: 1199px) {
    .container {
        max-width: 100%;
        padding: 0 16px;
    }
    /* вложенные контейнеры (секции внутри общего) не дублируют боковой отступ */
    .container .container {
        padding: 0;
    }
    .header {
        flex-wrap: wrap;
        height: auto;
        gap: 16px;
        padding: 16px 0;
    }
    .logo {
        flex: 0 0 auto;
    }
    .menu-navigation {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 16px;
    }
    .header-cta {
        flex: 0 0 auto;
        width: 100%;
        justify-content: center;
    }
    .section-hero {
        flex-direction: column;
        padding: 20px;
    }
    .hero-card {
        width: 100%;
        padding: 24px;
    }
    .hero-title {
        font-size: 32px;
        line-height: var(--lh-h1);
    }
    .hero-description {
        width: 100%;
        font-size: 18px;
    }
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .section-statistics {
        flex-wrap: wrap;
        gap: 16px;
    }
    .stat-item {
        flex: 0 0 calc(50% - 8px);
    }
    .problems-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .problem-card-cta {
        grid-column: span 2;
    }
    .solutions-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .solutions-header h2 {
        font-size: 32px;
        line-height: var(--lh-h1);
    }
    .solutions-content {
        flex-direction: column;
    }
    .solutions-image {
        width: 100%;
        height: 300px;
    }
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .product-card-cta {
        grid-column: span 2;
    }
    .steps-grid {
        flex-direction: column;
    }
    .brands-logos {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }
    .brand-logo {
        flex: 0 0 30%;
        max-width: 150px;
    }
    .pricing-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .pricing-header h2 {
        font-size: 32px;
        line-height: var(--lh-h1);
    }
    .table-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        font-size: 16px;
    }
    .table-row.header {
        display: none;
    }
    .table-row span:first-child {
        grid-column: 1 / -1;
        font-weight: 500;
    }
    .pricing-footer {
        flex-wrap: wrap;
    }
    .masters-grid {
        grid-template-columns: none;
    }
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 12px;
        row-gap: 32px;
    }
    .project-card:last-child {
        grid-column: span 2;
    }
    .section-discount {
        flex-direction: column;
    }
    .discount-image {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .discount-image img {
        width: 80%;
        height: auto;
    }
    .discount-content {
        padding: 30px;
    }
    .discount-offer span:first-child {
        font-size: 32px;
        line-height: var(--lh-h1);
    }
    .discount-percent {
        font-size: 80px;
        line-height: 80px;
    }
    .reviews-grid {
        grid-template-columns: 1fr;
    }
    .articles-grid {
        grid-template-columns: 1fr;
    }
    .cta-content {
        width: 100%;
    }
    .faq-list {
        width: 100%;
    }
    .section-seo h2 {
        width: 100%;
        font-size: 32px;
        line-height: var(--lh-h1);
    }
    .seo-content {
        flex-direction: column;
    }
    .seo-content p {
        width: 100%;
    }
    .seo-content img {
        width: 100%;
        height: auto;
    }
    .footer-contact {
        flex-wrap: wrap;
        gap: 20px;
    }
    .footer-address {
        flex: 0 0 100%;
    }
    .footer-hours, .footer-cta, .footer-social {
        border-left: none;
        padding: 0;
        flex: 1 1 50%;
    }
    .footer-links {
        flex-wrap: wrap;
        gap: 30px;
    }
    .footer-col {
        flex: 0 0 45%;
    }
}

@media (max-width: 767px) {
    .problems-grid {
        grid-template-columns: 1fr;
    }
    .problem-card-cta {
        grid-column: 1;
    }
    .products-grid {
        grid-template-columns: 1fr;
    }
    .product-card-cta {
        grid-column: 1;
    }
    .masters-grid {
        grid-template-columns: none;
    }
    .features-grid {
        grid-template-columns: 1fr;
    }
    .projects-grid {
        grid-template-columns: 1fr;
        row-gap: 32px;
    }
    .project-card:last-child {
        grid-column: 1;
    }
    .footer-col {
        flex: 0 0 100%;
    }
}

/* ===== REVIEWS source icons ===== */
.review-user .source-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* ===== MOBILE: bottom navigation (iOS style) + fullscreen menu ===== */
.bottom-nav { display: none; }
.mobile-menu { display: none; }
.mobile-header__promo { display: none; }

@media (max-width: 1199px) {
    /* desktop-меню прячем, остаётся лого слева (header 60px) */
    .menu-navigation,
    .header-cta { display: none; }

    /* кнопка «Акции» — справа в мобильном header */
    .mobile-header__promo {
        display: inline-flex;
        margin-left: auto;
    }
    .mobile-header__promo .btn__icon img {
        display: block;
        object-fit: contain;
    }

    /* отступ снизу, чтобы контент не прятался за bottom-nav */
    .page-wrapper { padding-bottom: 104px; }

    /* iOS-style bottom bar: стекло, скругление 99px, отступы 8px */
    .bottom-nav {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 8px;
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: 8px;
        z-index: 1000;
        padding: 8px;
        border-radius: 99px;
        background: rgba(255, 255, 255, 0.72);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.35);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
    }
    .bottom-nav__home { justify-self: start; }
    .bottom-nav__burger { justify-self: end; }
    .bottom-nav__home svg,
    .bottom-nav__burger svg { display: block; }

    /* fullscreen-модалка с разделами */
    .mobile-menu {
        position: fixed;
        inset: 0;
        z-index: 2000;
        display: none;
        flex-direction: column;
        background: rgba(255, 255, 255, 0.88);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        backdrop-filter: blur(24px) saturate(180%);
        padding: 16px 24px calc(24px + env(safe-area-inset-bottom, 0px));
    }
    .mobile-menu.is-open { display: flex; }
    .mobile-menu__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
    }
    .mobile-menu__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: none;
        background: transparent;
        color: #202020;
        cursor: pointer;
        border-radius: 99px;
    }
    .mobile-menu__close:hover { background: var(--rem-surface-orange-soft); }
    .mobile-menu__nav {
        display: flex;
        flex-direction: column;
        margin-top: 40px;
        gap: 8px;
    }
    .mobile-menu__link {
        font-size: 24px;
        font-weight: 500;
        color: #202020;
        text-decoration: none;
        padding: 14px 0;
        border-bottom: 1px solid rgba(32, 32, 32, 0.08);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    .mobile-menu__link--toggle .caret-down {
        flex-shrink: 0;
        transition: transform 0.2s;
    }
    .mobile-menu__group.is-open .mobile-menu__link--toggle .caret-down {
        transform: rotate(180deg);
    }
    .mobile-menu__sub {
        display: none;
        flex-direction: column;
        padding: 4px 0 12px 16px;
        gap: 4px;
    }
    .mobile-menu__group.is-open .mobile-menu__sub {
        display: flex;
    }
    .mobile-menu__sublink {
        font-size: 16px;
        line-height: var(--lh-body);
        color: var(--rem-grey);
        text-decoration: none;
        padding: 8px 0;
        border-bottom: 1px solid rgba(32, 32, 32, 0.06);
    }
    .mobile-menu__sublink:hover {
        color: var(--rem-orange);
    }
    .mobile-menu__link.is-active { color: var(--rem-orange); }
    .mobile-menu__cta {
        margin-top: auto;
        padding-top: 24px;
    }
    .mobile-menu__cta .btn { width: 100%; }
}

/* ===== MOBILE FIX: хедеры секций не вылезают за край ===== */
@media (max-width: 767px) {
    /* секции с десктопным padding 60px -> компактнее */
    .section-hero,
    .section-masters,
    .section-projects,
    .section-articles,
    .section-pricing,
    .section-solutions,
    .section-cta,
    .section-seo {
        padding: 24px;
    }
    /* flex-хедеры: разрешаем перенос, кнопка уходит на новую строку */
    .masters-header,
    .projects-header,
    .articles-header,
    .reviews-header,
    .brands-header,
    .pricing-header,
    .solutions-header,
    .features-header {
        flex-wrap: wrap;
        gap: 16px;
        align-items: center;
    }
    .masters-header h2,
    .projects-header h2,
    .articles-header h2,
    .reviews-header h2,
    .pricing-header h2,
    .solutions-header h2 {
        font-size: 28px;
        line-height: var(--lh-h2);
    }
    /* L-кнопки в хедерах -> размер M, чтобы влезали */
    .masters-header .btn,
    .projects-header .btn,
    .articles-header .btn,
    .reviews-header .btn {
        height: 48px;
        padding: 8px 14px;
        font-size: 16px;
        line-height: var(--lh-btn);
    }
}

/* ===== MOBILE FIX: табы сегментов не вылезают ===== */
@media (max-width: 767px) {
    .segmented-control {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .segment {
        flex: 0 0 auto;
        padding: 11px 14px;
        font-size: 14px;
        white-space: nowrap;
    }
}

/* ===== TYPOGRAPHY: мобильная адаптация (≤767px) ===== */
@media (max-width: 767px) {
    /* базовый текст 18 → 16 */
    body {
        font-size: var(--font-body-sm);
    }
    /* заголовки уменьшаем, иерархия H1>H2>H3>H4 сохраняется */
    h1 { font-size: var(--font-h1-mobile); }
    h2 { font-size: var(--font-h2-mobile); }
    h3 { font-size: var(--font-h3-mobile); }
    h4 { font-size: var(--font-h4-mobile); }
    /* секционные заголовки (специфичнее тегов) тоже под мобильные размеры */
    .section-title,
    .solutions-header h2,
    .pricing-header h2,
    .cta-content h2,
    .section-seo h2,
    .brands-header h2 {
        font-size: var(--font-h2-mobile);
        line-height: var(--lh-h2);
    }
    .problem-card-cta-content h3,
    .solutions-text h3,
    .product-info h3,
    .product-card-cta h3,
    .step-card h3,
    .feature-card h3 {
        font-size: var(--font-h3-mobile);
        line-height: var(--lh-h3);
    }
    .article-card h4 {
        font-size: var(--font-h4-mobile);
        line-height: var(--lh-h4);
    }
    /* кастомный H1 в hero-баннере тоже меньше (48 → 32) */
    .hero-title {
        font-size: 32px;
        line-height: var(--lh-h1);
    }
    /* тексты 20px → 16px */
    .hero-description,
    .guarantee-badge,
    .problem-desc,
    .problem-card-cta-content p,
    .solutions-sub,
    .solutions-head p,
    .solutions-list li,
    .product-info > p,
    .step-head p,
    .brands-title,
    .table-row,
    .master-name,
    .feature-head p,
    .project-desc,
    .discount-desc,
    .review-text,
    .article-card h4,
    .cta-content > p,
    .cta-sub,
    .faq-answer,
    .seo-content p {
        font-size: var(--font-body-sm);
        line-height: var(--lh-h4);
    }
    /* «висящие» тексты (не под заголовками): 32→24, 24→16 (правило Санчеса) */
    .problem-title,
    .problem-price .price,
    .product-price-row .price,
    .discount-offer span:first-child {
        font-size: 24px;
        line-height: 1.2;
    }
    .stat-value,
    .faq-question span:first-child,
    .footer-phone,
    .footer-hours-time {
        font-size: var(--font-body-sm);
        line-height: var(--lh-h4);
    }
}

/* ===== BUTTONS: мобильная адаптация — все кнопки на 1 размер меньше (L→M, M→S) ===== */
@media (max-width: 767px) {
    /* L → M */
    .btn--cta--l--default,
    .btn--primary--l--default,
    .btn--secondary--l--default,
    .btn--ghost--l--default,
    .btn--white--l--default {
        height: 48px;
        padding: 8px 14px;
        font-size: 16px;
        line-height: var(--lh-btn);
    }
    /* M → S */
    .btn--cta--m--default,
    .btn--primary--m--default,
    .btn--secondary--m--default,
    .btn--ghost--m--default,
    .btn--white--m--default {
        height: 40px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: var(--lh-btn);
    }
    /* content padding: S = 6px (у кнопок, ставших S) */
    .btn--cta--m--default .btn__content,
    .btn--primary--m--default .btn__content,
    .btn--secondary--m--default .btn__content,
    .btn--ghost--m--default .btn__content,
    .btn--white--m--default .btn__content {
        padding: 0 6px;
    }
    /* icon-only: L 60→48, M 48→40 */
    .btn--icon-only { width: 48px; height: 48px; }
    .btn--icon-only.btn--m,
    .btn--white--m--default.btn--icon-only { width: 40px; height: 40px; }
}

/* ===== SPACING: мобильная адаптация (линейка Санчеса) =====
   padding/gap: 80→40, 60→32, 40→24, 32→20, 24→16, 16→12; 12/8/4/0 не меняются */
@media (max-width: 767px) {
    /* padding 60 → 32 */
    .section-hero,
    .section-solutions,
    .section-pricing,
    .section-masters,
    .section-projects,
    .discount-content,
    .section-articles,
    .section-cta,
    .section-seo,
    .footer-inner { padding: 32px; }
    /* padding 40 → 24 */
    .hero-card { padding: 24px; }
    /* padding 32 → 20 */
    .problem-header,
    .problem-card-cta,
    .product-image,
    .product-info,
    .product-card-cta,
    .step-card,
    .feature-card,
    .review-card,
    .faq-item { padding: 20px; }
    /* padding 16 → 12 */
    .table-row,
    .pricing-footer,
    .review-work { padding: 12px; }

/* CTA: кнопка только со стрелкой на мобилке */
    .cta-submit {
        width: 48px;
        padding: 0;
    }
    .cta-submit span {
        display: none;
    }

    /* gap 40 → 24 */
    .section-problems,
    .section-solutions,
    .solutions-header,
    .solutions-content,
    .solutions-text,
    .section-products,
    .step-card,
    .section-pricing,
    .pricing-header,
    .section-masters,
    .masters-header,
    .section-projects,
    .projects-header,
    .reviews-header,
    .section-articles,
    .articles-header,
    .cta-content,
    .section-seo,
    .seo-content,
    .footer-inner,
    .footer-contact,
    .footer-links { gap: 24px; }
    /* gap 32 → 20 */
    .menu-navigation,
    .section-steps,
    .section-brands,
    .section-features,
    .section-reviews,
    .section-faq { gap: 20px; }
    /* gap 24 → 16 */
    .section-statistics,
    .feature-card,
    .discount-content,
    .discount-offer,
    .footer-col { gap: 16px; }
    /* gap 20 → 16 */
    .hero-card,
    .hero-content,
    .hero-actions,
    .problem-body,
    .product-info,
    .brands-logos { gap: 16px; }
    /* gap 16 → 12 */
    .stat-item,
    .solutions-head,
    .solutions-list,
    .step-head,
    .social-buttons,
    .master-card,
    .feature-head,
    .project-card,
    .review-card,
    .review-meta,
    .article-card,
    .faq-question { gap: 12px; }
}

/* ===== ICONS: мобильная адаптация (правило Санчеса: 60→40, 40→32, 32→24; 80 не трогаем) ===== */
@media (max-width: 767px) {
    /* 60 → 40 */
    .problem-icon svg {
        width: 40px;
        height: 40px;
    }
    /* 40 → 32 */
    .stat-icon svg {
        width: 32px;
        height: 32px;
    }
    /* 32 → 24 */
    .btn-social svg,
    .pricing-footer > svg,
    .faq-question svg {
        width: 24px;
        height: 24px;
    }
    /* 80 → 40 (feature-icon, правило Санчеса) */
    .feature-icon {
        width: 40px;
        height: 40px;
    }
    .feature-icon svg {
        width: 40px;
        height: 40px;
    }
}

/* ===== SPACING FIX: отступы между секциями 80 → 40 на мобиле ===== */
@media (max-width: 767px) {
    .container > * + * {
        margin-top: 40px;
    }
    /* модалка/лайтбокс — прямые дети .container: не даём 40px-отступу сдвинуть их */
    .container > .case-modal,
    .container > .case-lightbox {
        margin-top: 0 !important;
    }
}

/* ===== BREADCRUMBS (хлебные крошки) ===== */
.breadcrumbs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    font-size: 14px;
    line-height: var(--lh-body);
    color: var(--rem-grey);
    padding: 24px 0;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}
.breadcrumbs::-webkit-scrollbar { display: none; }
.breadcrumbs a,
.breadcrumbs__current {
    flex: 0 0 auto;
    white-space: nowrap;
}
.breadcrumbs a {
    color: var(--rem-grey);
    text-decoration: none;
    transition: color 0.2s;
}
.breadcrumbs a:hover {
    color: var(--rem-orange);
}
.breadcrumbs__sep {
    color: #B7B2A5;
}
.breadcrumbs__current {
    color: var(--rem-dark);
    font-weight: 500;
}

/* ===== CHIPS (чипсы-бейджи, по ТЗ Санчеса: 14px, белый фон, padding 8/6) ===== */
.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}
.chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 8px;
    background: var(--rem-white);
    border-radius: 99px;
    font-size: 14px;
    line-height: var(--lh-btn);
    color: var(--rem-dark);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.chip:hover {
    color: var(--rem-orange);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* Hero-категория: фон залит (сейчас surface-1, потом изображение) */
.section-hero--category {
    background: var(--rem-surface-1);
}

/* ===== USLUGI: hero-категория ===== */
/* карточка по высоте контента (hug) — не фиксированная 500px, чтобы кнопка не уезжала */
.section-hero--category .hero-card {
    /* отдельная сущность от hero-card главной: свой размер, своя раскладка */
    width: 100%;
    max-width: 800px;
    height: auto;
    padding: 40px;
    background: var(--rem-white);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    z-index: 1;
}
/* чипсы под заголовком, в одну строку-обёртку */
.section-hero--category .hero-description {
    width: auto;
    max-width: 100%;
}

/* ===== PRICE: «от» и «цифра» разными классами (единый стиль) ===== */
.price-group {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.price-from {
    font-size: 16px;
    color: var(--rem-grey);
    line-height: var(--lh-body);
}
.price-value {
    font-size: 32px;
    font-weight: 500;
    color: var(--rem-dark);
    line-height: var(--lh-body);
}

/* ===== СТРАНИЦА УСЛУГИ: баннер (макет 1.2) ===== */
.service-banner {
    position: relative;
    width: 100%;
    background: var(--rem-surface-1);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}
.service-banner__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
    max-width: 600px;
    padding: 40px;
    position: relative;
    z-index: 1;
}
.service-banner__title {
    font-size: var(--font-h1);
    line-height: var(--lh-h1);
    font-weight: 500;
    color: var(--rem-dark);
    margin: 0;
}
.service-banner__desc {
    font-size: 20px;
    line-height: var(--lh-body);
    color: var(--rem-grey);
    margin: 0;
}
.service-banner__stats {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
}
.service-stat-card {
    flex: 1 1 0;
    padding: 24px;
    background: var(--rem-white);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px;
}
.service-stat-card__value {
    font-size: var(--font-h3);
    line-height: var(--lh-h3);
    font-weight: 500;
    color: var(--rem-dark);
}
.service-stat-card__label {
    font-size: var(--font-body-sm);
    line-height: var(--lh-body);
    color: var(--rem-grey);
}
.service-banner__media {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 0;
}
.service-banner__img {
    max-width: 90%;
    border-radius: 16px;
    object-fit: contain;
    background: var(--rem-surface-1);
}
/* ПРАЙС: картинка баннера уже (точечно, не задевает другие страницы) */
.service-blocks--price .service-banner__img {
    max-width: 70%;
}
/* ОТЗЫВЫ: картинка баннера 50% (точечно, только страница отзывов) */
.service-banner--otzyvy .service-banner__img {
    max-width: 50%;
}
/* РАБОТЫ: уникальный класс баннера — картинку и размер правим здесь */
.service-banner--portfolio .service-banner__img {
    max-width: 70%;
}
/* О КОМПАНИИ: баннер 414px на градиенте (фоновая картинка about-ban.png убрана по просьбе Санчеса 12.09.2026) */
.about-banner {
    position: relative;
    width: 100%;
    height: 414px;
    border-radius: 24px;
    overflow: hidden;
    background: var(--rem-gradient-cta);
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.about-banner__content {
    max-width: 640px;
    padding: 48px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    position: relative;
    z-index: 1;
}
.about-banner__title {
    font-size: var(--font-h1);
    line-height: var(--lh-h1);
    font-weight: 500;
    color: #FFFFFF;
    margin: 0;
}
.about-banner__desc {
    font-size: 20px;
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}
/* ВРЕМЕННО: баннер на странице «О компании» скрыт (просьба Санчеса, 12.09.2026).
   Чтобы вернуть — удалить правило ниже. */
.about-banner { display: none; }

/* ===== ABOUT: мобильная адаптация (линейка Санчеса) ===== */
@media (max-width: 767px) {
    /* баннер: высота 414 → 260, контент 48 → 24 */
    .about-banner {
        height: 260px;
    }
    .about-banner__content {
        padding: 24px;
        gap: 16px;
    }
    .about-banner__title {
        font-size: var(--font-h1-mobile);
        line-height: 1.2;
    }
    .about-banner__desc {
        font-size: var(--font-body-sm);
        line-height: var(--lh-h4);
    }
    /* «О компании» (AboutText): колонка, gap 40 → 24, заголовок 520 → 100% */
    .AboutText {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 24px !important;
    }
    .AboutText > div:first-child {
        width: 100% !important;
        font-size: var(--font-h2-mobile) !important;
        line-height: var(--lh-body);
    }
    .AboutText .201615000RotoSiegeniaMacoGu5 {
        font-size: var(--font-body-sm) !important;
        line-height: var(--lh-body);
    }
    /* тапочки (CitTap): колонка, padding 40 → 24, gap 40 → 24, картинка 100% */
    .CitTap {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 24px !important;
        gap: 24px !important;
    }
    .CitTap .Tapochki {
        width: 100% !important;
        height: auto !important;
    }
    .CitTap .Frame157 {
        width: 100% !important;
        gap: 20px !important;
    }
    .CitTap .EncouragementText {
        font-size: 24px !important;
        line-height: var(--lh-body);
    }
    /* цита-карточка: заголовок 32 → 24, текст 20 → 16 */
    .master-cta__title {
        font-size: 24px !important;
        line-height: 1.2;
    }
    .master-cta__text {
        font-size: var(--font-body-sm) !important;
        line-height: var(--lh-body);
    }
}
@media (max-width: 1100px) {
    .service-banner { flex-direction: column; }
    .service-banner__media {
        display: flex;
        width: 100%;
        justify-content: flex-end;
        align-items: flex-end;
        padding: 0;
    }
    .service-banner__img { max-width: 100%; }
}
@media (max-width: 640px) {
    .service-banner__content { padding: 24px; }
    .service-banner__title { font-size: var(--font-h1-mobile); line-height: 1.2 ; }
    .service-banner__desc { font-size: var(--font-body-sm); line-height: var(--lh-body) ; }
    .service-banner__stats { flex-direction: column; }
    .service-stat-card { width: 100%; }
    .service-stat-card__value { font-size: var(--font-h3-mobile); line-height: var(--lh-body) ; }
    .service-banner__media { padding: 24px; }
    .service-banner__img { max-width: 100%; }
    /* точечно для всех страниц: на мобилке media без паддингов */
    .service-blocks--price .service-banner__media,
    .service-blocks--usluga .service-banner__media,
    .service-blocks--work .service-banner__media,
    .service-banner--catalog .service-banner__media,
    .service-banner--otzyvy .service-banner__media {
        padding: 0;
    }
}

@media (max-width: 767px) {
    .price-jump { padding: 0; }
    .price-dropdown { max-width: 100%; }
    .price-dropdown__toggle { padding: 10px 14px; font-size: var(--font-body-sm); }
}
/* ===== ПРАЙС: dropdown быстрого перехода (список раскрывается ВНИЗ) ===== */
.price-jump {
    position: sticky;
    top: 0;
    z-index: 40;
    width: 100%;
    transition: background 0.25s, border-color 0.25s, padding 0.25s;
}
/* плашка появляется только при прилипании к верху (класс вешает JS при скролле) */
.price-jump.is-stuck {
    padding: 12px;
    background: rgba(255, 255, 255, 0.65);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(236, 232, 224, 0.7);
}
.price-dropdown {
    position: relative;
    width: 100%;
    max-width: 420px;
}
.price-dropdown__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: transparent;
    border: 1px solid var(--rem-surface-1);
    border-radius: 99px;
    font-size: 16px;
    line-height: var(--lh-body);
    color: var(--rem-grey);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color 0.2s, color 0.2s;
}
.price-dropdown__toggle span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.price-dropdown__toggle:hover,
.price-dropdown.open .price-dropdown__toggle {
    border-color: var(--rem-orange);
}
.price-dropdown__toggle:focus {
    outline: none;
    border-color: var(--rem-orange);
}
.price-dropdown__arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--rem-grey);
    transition: transform 0.2s;
}
.price-dropdown.open .price-dropdown__arrow {
    transform: rotate(180deg);
}
.price-dropdown__list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 50;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: var(--rem-white);
    border: 1px solid var(--rem-surface-1);
    border-radius: 16px;
    max-height: 320px;
    overflow-y: auto;
    display: none;
}
.price-dropdown.open .price-dropdown__list {
    display: block;
}
.price-dropdown__list a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--rem-grey);
    font-size: 16px;
    line-height: var(--lh-body);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s, background 0.2s;
}
.price-dropdown__list a:hover {
    color: var(--rem-orange);
    background: var(--rem-bg);
}
.price-dropdown__list a.is-active {
    color: var(--rem-orange);
    background: var(--rem-bg);
}
/* якорь не прячется под шапку */
.service-blocks--price .works-card {
    scroll-margin-top: 100px;
}
html {
    scroll-behavior: smooth;
}

/* ===== СТРАНИЦА УСЛУГИ: таблица перечня работ (макет 2) ===== */
.works-card {
    width: 100%;
    padding: 40px;
    background: var(--rem-white);
    border-radius: 24px;
    overflow: hidden;
}
.works-card__title {
    font-size: var(--font-h2);
    line-height: var(--lh-h2);
    font-weight: 500;
    color: var(--rem-dark);
    margin: 0 0 24px;
}
.works-table {
    display: flex;
    flex-direction: column;
}
.works-row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr) 100px;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid #ECE8E0;
    font-size: 20px;
    line-height: var(--lh-body);
    align-items: center;
}
.works-row--header {
    color: var(--rem-grey);
    font-weight: 400;
}
.works-row--header span:not(:last-child) {
    text-align: left;
}
.works-row--header span:first-child {
    text-align: left;
}
.works-row--alt {
    background: var(--rem-bg);
}
.works-name {
    font-weight: 400;
}
.works-price {
    color: var(--rem-dark);
    text-align: left;
}
.works-cell-btn {
    display: flex;
    justify-content: flex-end;
}
.works-btn {
    height: 40px;
    padding: 8px 14px;
    background: var(--rem-brown);
    color: var(--rem-white);
    border-radius: 99px;
    font-size: 16px;
    font-weight: 500;
    line-height: var(--lh-btn);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}
.works-btn:hover {
    opacity: 0.85;
}
@media (max-width: 640px) {
    .works-card { padding: 24px; }
    .works-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        font-size: var(--font-body-sm);
        line-height: var(--lh-h4);
    }
    .works-row--header {
        display: none;
    }
    .works-name {
        grid-column: 1 / -1;
        font-weight: 500;
    }
    .works-cell-btn {
        justify-content: flex-start;
    }
}

/* ===== СТРАНИЦА УСЛУГИ: обёртка блоков (баннер + таблица, gap 12px) ===== */
.service-blocks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* ===== BOOTSTRAP-механика таблиц: на мобильной строки → карточки с подписями ===== */
@media (max-width: 640px) {
    .table-row span::before,
    .works-row span::before {
        content: attr(data-label);
        display: block;
        font-size: 14px;
        line-height: var(--lh-body);
        color: var(--rem-grey);
        font-weight: 400;
        margin-bottom: 4px;
    }
    .works-row span {
        text-align: left;
    }
    .works-cell-btn {
        grid-column: 1 / -1;
    }
    .works-btn {
        width: 100%;
    }
}

/* ===== СТРАНИЦА УСЛУГИ: SEO-контент (markdown) + sticky-форма (макет 3) ===== */
.service-layout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}
.service-content {
    flex: 1;
    min-width: 0;
    padding: 40px;
    background: var(--rem-white);
    border-radius: 24px;
    overflow: hidden;
}
/* markdown-типографика внутри SEO-контента */
.service-content h2 {
    font-size: var(--font-h2);
    line-height: var(--lh-h2);
    font-weight: 500;
    color: var(--rem-dark);
    padding: 16px 0 12px;
    margin: 0;
}
.service-content h3 {
    font-size: var(--font-h3);
    line-height: var(--lh-h3);
    font-weight: 500;
    color: var(--rem-dark);
    padding: 24px 0 16px;
    margin: 0;
}
.service-content p {
    font-size: 20px;
    line-height: var(--lh-body);
    font-weight: 400;
    color: var(--rem-dark);
    padding: 12px 0;
    margin: 0;
}
.service-content ul,
.service-content ol {
    font-size: 20px;
    line-height: var(--lh-body);
    color: var(--rem-dark);
    padding: 12px 0 12px 24px;
    margin: 0;
}
.service-content ul { list-style: disc; }
.service-content ol { list-style: decimal; }
.service-content li {
    line-height: var(--lh-body);
    padding: 4px 0;
}
/* Parsedown оборачивает пункты в <li><p> — убираем padding p, иначе раздутые зазоры */
.service-content li p {
    padding: 0;
    margin: 0;
}
.service-content strong {
    font-weight: 500;
    display: block;
    padding: 12px 0;
}
/* strong внутри списков — без паддинга, иначе ломает пункты списка */
.service-content li strong {
    display: inline;
    padding: 0;
}
.service-content em {
    font-style: italic;
    color: var(--rem-grey);
}
/* Цитатные карточки (blockquote) в SEO-контенте: совет мастера и т.п. */
.service-content blockquote {
    margin: 24px 0;
    padding: 4px 0 4px 24px;
    border-left: 2px solid var(--rem-orange);
    color: var(--rem-dark);
}
.service-content blockquote p {
    padding: 4px 0;
    margin: 0;
}
/* strong внутри цитаты — инлайн, без раздувания (глобально strong = display:block) */
.service-content blockquote strong {
    display: inline;
    padding: 0;
    font-weight: 600;
}
.service-content a {
    color: var(--rem-orange);
    text-decoration: underline;
}
.service-content img {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    margin: 20px 0;
}
/* markdown-таблицы: единый стиль с сайтом (как .works-table) */
.service-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 20px;
    line-height: var(--lh-body);
    color: var(--rem-dark);
}
.service-content th,
.service-content td {
    text-align: left;
    vertical-align: top;
    padding: 12px 16px;
    border-bottom: 1px solid #ECE8E0;
}
.service-content thead th {
    color: var(--rem-grey);
    font-weight: 400;
    padding-bottom: 16px;
}
.service-content tbody tr:last-child td {
    border-bottom: none;
}

/* sticky-форма заказа */
.service-order {
    width: 460px;
    flex-shrink: 0;
    padding: 40px;
    background: var(--rem-white);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 20px;
}
.order-badge {
    align-self: flex-start;
    padding: 8px 16px;
    background: #F7FBE6;
    border-radius: 99px;
    color: #99AF61;
    font-size: 16px;
    line-height: var(--lh-body);
}
.order-profile {
    display: flex;
    align-items: center;
    gap: 16px;
}
.order-profile__img {
    width: 68px;
    height: 68px;
    border-radius: 99px;
    object-fit: scale-down;
    flex-shrink: 0;
    background: radial-gradient(ellipse 74.25% 135.57% at 1.02% 2.43%, #F07853 0%, #897B74 100%);
}
.order-profile__text {
    font-size: 16px;
    line-height: var(--lh-body);
    color: var(--rem-grey);
}
.order-profile__name {
    font-weight: 500;
}
.order-divider {
    border-top: 1px solid var(--rem-surface-1);
}

/* Hero на главной: строка с индикатором, тёмный текст */
.hero-hours {
    display: flex;
    align-items: center;
    color: var(--rem-grey);
    font-size: 16px;
    line-height: var(--lh-body);
}
/* Формы заявок (услуга/работа): строка с индикатором, тёмный текст */
.order-hours {
    display: flex;
    align-items: center;
    gap: 0;
    color: var(--rem-grey);
    font-size: 16px;
    line-height: var(--lh-body);
}
.order-title {
    font-size: 20px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--rem-dark);
}
.order-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.order-input {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 60px;
    padding: 8px 8px 8px 20px;
    background: var(--rem-white);
    border-radius: 99px;
    outline: 1px solid var(--rem-surface-1);
    outline-offset: -1px;
}
.order-input input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 20px;
    line-height: var(--lh-body);
    color: var(--rem-dark);
    font-family: inherit;
}
.order-input input::placeholder {
    opacity: 0.5;
}
.order-submit {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border: none;
    border-radius: 99px;
    background: var(--rem-orange);
    color: var(--rem-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.order-submit:hover {
    opacity: 0.85;
}
.order-submit svg {
    width: 20px;
    height: 20px;
}
.order-consent {
    font-size: 16px;
    line-height: var(--lh-body);
    color: var(--rem-grey);
}
.order-consent a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.order-minimum {
    padding: 16px;
    background: var(--rem-surface-orange);
    border-radius: 16px;
    font-size: 16px;
    line-height: var(--lh-body);
    color: var(--rem-dark);
}
.order-minimum strong {
    font-weight: 500;
}
@media (max-width: 1100px) {
    .service-layout {
        flex-direction: column;
    }
    .service-order {
        width: 100%;
        position: static;
    }
}
@media (max-width: 640px) {
    .service-order .order-title { font-size: var(--font-body); line-height: 1.2 ; }
    .service-order .order-hours { font-size: var(--font-body-sm); }
    .service-order .order-consent { font-size: var(--font-body-sm); line-height: var(--lh-body) ; }
    .service-content { padding: 24px; }
    .service-content h2 { font-size: var(--font-h2-mobile); line-height: var(--lh-h2) ; }
    .service-content h3 { font-size: var(--font-h3-mobile); line-height: 1.2 ; }
    .service-content p,
    .service-content ul,
    .service-content ol { font-size: var(--font-body-sm); line-height: var(--lh-body) ; }
    .service-order { padding: 24px; }
}

/* ===== СТРАНИЦА УСЛУГИ: кликабельные строки таблицы работ ===== */
.works-row--link {
    cursor: pointer;
    transition: background 0.2s ease;
}
.works-row--link:hover {
    background: var(--rem-surface-orange);
}
.works-row--link:hover .works-name {
    color: #FF5900;
}

/* ===== СТРАНИЦА ГРУППЫ РАБОТ: work-hero (макет 1.3) ===== */
.work-hero {
    width: 100%;
    padding: 40px;
    background: var(--rem-white);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}
.work-hero__title {
    font-size: var(--font-h1-hero);
    line-height: 1.2;
    font-weight: 500;
    color: var(--rem-dark);
    margin: 0;
}
.work-hero__desc {
    font-size: 20px;
    line-height: var(--lh-body);
    color: var(--rem-grey);
    margin: 0;
}
.work-hero__stats {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
}
.work-stat-card {
    flex: 1 1 0;
    padding: 24px;
    background: var(--rem-bg);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.work-stat-card__value {
    font-size: 32px;
    line-height: 38.4px;
    font-weight: 500;
    color: var(--rem-dark);
}
.work-stat-card__label {
    font-size: 16px;
    line-height: var(--lh-body);
    color: var(--rem-grey);
}
.work-hero__img {
    /* на всю ширину блока, пропорции 2:1 (макет 1.3) */
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius: 16px;
    background: var(--rem-surface-1);
    display: block;
}
.work-group {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 32px;
    background: #F7FBE6;
    border-radius: 16px;
}
.work-group__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.work-group__label {
    font-size: 20px;
    line-height: var(--lh-body);
    color: var(--rem-grey);
}
.work-group__name {
    font-size: 24px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--rem-dark);
}
.work-group__link {
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
}
.work-group__link:hover {
    color: #FF5900;
}
.work-group__btn {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: var(--rem-white);
    border-radius: 99px;
    outline: 1px solid var(--rem-white);
    outline-offset: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rem-dark);
    transition: opacity 0.2s ease;
    text-decoration: none;
}
.work-group__btn:hover {
    opacity: 0.85;
}
.work-group__btn svg {
    width: 20px;
    height: 20px;
}
@media (max-width: 640px) {
    .work-hero { padding: 24px; }
    .work-hero__title { font-size: var(--font-h1-hero-mobile); line-height: 1.2 ; }
    .work-hero__stats { flex-direction: column; }
    .work-group { padding: 24px; }
}

/* обёртка левой колонки: work-hero + service-content (gap 12px) */
.service-content-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

/* РАБОТЫ: на мобилке секция кейсов тоже без фона и паддингов (перебивает общие padding 24/32) */
@media (max-width: 767px) {
    .section-projects--portfolio {
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }
}

/* ===== СТАТЬИ (раздел «Полезные статьи») ===== */
.articles-section {
    align-self: stretch;
    padding: 48px 0;
}
/* заголовок и описание — слева, в одной секции с карточками */
.articles-head__title {
    align-self: stretch;
    font-size: var(--font-h2, 48px);
    line-height: 1.2;
    color: var(--rem-dark, #202020);
    margin: 0 0 16px;
    text-align: left;
}
.articles-head__desc {
    align-self: stretch;
    font-size: 18px;
    line-height: var(--lh-body);
    color: var(--rem-grey, #5F5F5F);
    max-width: 760px;
    margin: 0 0 40px;
    text-align: left;
}
.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.article-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
}
.article-card:hover {
    transform: translateY(-4px);
}
.article-card__image {
    height: 200px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    background-color: #ECE8E0;
}
.article-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.article-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--rem-surface-orange);
    border-radius: 99px;
    font-size: 14px;
    line-height: var(--lh-body);
    color: var(--rem-orange);
}
.article-card__badge--date {
    background: var(--rem-surface-1);
    color: var(--rem-dark);
}
.article-card__title {
    font-size: 20px;
    line-height: 1.2;
    color: #202020;
    font-weight: 500;
    margin: 0;
    transition: color 0.2s ease;
}
/* при наведении на карточку статьи — заголовок оранжевый */
.article-card:hover .article-card__title {
    color: var(--rem-orange);
}
.articles-empty {
    font-size: 18px;
    color: var(--rem-grey, #5F5F5F);
}

/* Страница статьи */
.article-page {
    align-self: stretch;
}
/* Белый контейнер статьи: паддинги 60px, контент на всю ширину */
.article-page__card {
    width: 100%;
    background: var(--rem-white);
    padding: 60px;
    border-radius: 24px;
}
/* Внутренний блок текста: max-width 800px по центру */
.article-page__body {
    max-width: 800px;
    margin: 0 auto;
}
/* На странице статьи .service-content — только типографика: убираем паддинг/фон/скругление со страниц услуг */
.article-page__body .service-content {
    padding: 0;
    background: transparent;
    border-radius: 0;
    overflow: visible;
}
.article-page__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.article-page__title {
    flex-basis: 100%;
    font-size: var(--font-h1, 54px);
    line-height: 1.2;
    color: var(--rem-dark, #202020);
    margin: 8px 0 0;
}
/* Изображение тянется на всю ширину белого контейнера, пропорция 2:1 */
.article-page__image {
    width: 100%;
    aspect-ratio: 2 / 1;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    background-color: #ECE8E0;
    margin: 32px 0;
}
.article-page__cta {
    margin-top: 40px;
    padding: 28px;
    background: #F8F5F0;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.article-page__cta p {
    margin: 0;
    font-size: 18px;
    color: #202020;
}

/* Планшет: статьи 2 в ряд */
@media (max-width: 1023px) and (min-width: 768px) {
    .articles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .article-page__card {
        padding: 32px;
    }
}

/* Мобилка: статьи 1 в ряд, страница статьи — компактно */
@media (max-width: 767px) {
    .articles-section {
        padding: 32px 0;
    }
    .articles-head__title {
        font-size: var(--font-h2-mobile, 32px);
        line-height: 1.2;
        margin-bottom: 12px;
    }
    .articles-head__desc {
        font-size: 16px;
        line-height: var(--lh-body);
        margin-bottom: 24px;
    }
    .articles-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .article-card {
        gap: 10px;
    }
    .article-card__image {
        height: 220px;
    }
    .article-card__badge {
        font-size: 13px;
        line-height: var(--lh-body);
        padding: 5px 10px;
    }
    .article-card__title {
        font-size: 18px;
        line-height: 1.2;
    }

    /* Страница статьи: белый контейнер с компактными паддингами */
    .article-page__card {
        padding: 20px;
        border-radius: 16px;
    }
    .article-page__title {
        font-size: var(--font-h2-mobile, 32px);
        line-height: 1.2;
    }
    .article-page__image {
        aspect-ratio: 4 / 3;
        margin: 20px 0;
    }
    .article-page__head {
        gap: 6px;
        margin-bottom: 12px;
    }
    .article-page__cta {
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
    }
    .article-page__cta .btn {
        width: 100%;
    }
    /* markdown-контент: таблицы и текст компактнее */
    .service-content p,
    .service-content ul,
    .service-content ol {
        font-size: 17px;
        line-height: var(--lh-body);
    }
    .service-content table {
        font-size: 15px;
        line-height: var(--lh-body);
    }
    .service-content th,
    .service-content td {
        padding: 8px 10px;
    }
    .service-content h2 {
        font-size: var(--font-h2-mobile, 32px);
        line-height: var(--lh-h2);
    }
    .service-content h3 {
        font-size: var(--font-h3-mobile, 24px);
        line-height: var(--lh-h3);
    }
}