/*
Theme Name: МКС (Clean Rebuild)
Theme URI: https://mks.local/
Author: LiMa Marketing
Description: Чистая верстка сайта МКС по ТЗ Refactoring UI + Nielsen UX. Полностью без Tilda. Семантический HTML, design tokens, mobile-first responsive.
Version: 2.0.0
Requires at least: 5.8
Tested up to: 6.9
Requires PHP: 7.4
License: Proprietary
Text Domain: mks-clean
*/

/* =========================================================
   1. DESIGN TOKENS (CSS variables, ТЗ §2-§4, §6)
   ========================================================= */

:root {
    /* --- Color: Orange (бренд) --- */
    --color-orange-50:  #FFF4EC;
    --color-orange-100: #FFE0CC;
    --color-orange-200: #FFC299;
    --color-orange-300: #FFA366;
    --color-orange-400: #FF8533;
    --color-orange-500: #FF6715;     /* primary CTA — Tilda original warm orange */
    --color-orange-600: #E55C0D;
    --color-orange-700: #C9540C;
    --color-orange-800: #8A3800;
    --color-orange-900: #5C2500;

    /* --- Color: Gray (с холодным подтоном, slate-like) --- */
    --color-gray-50:  #F8FAFC;
    --color-gray-100: #F1F5F9;
    --color-gray-200: #E2E8F0;
    --color-gray-300: #CBD5E1;
    --color-gray-400: #94A3B8;
    --color-gray-500: #64748B;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1E293B;
    --color-gray-900: #0F172A;

    /* --- Color: Semantic --- */
    --color-success-50:  #ECFDF5;
    --color-success-500: #10B981;
    --color-error-50:    #FEF2F2;
    --color-error-500:   #EF4444;
    --color-warning-50:  #FFFBEB;
    --color-warning-500: #F59E0B;

    /* --- Typography: Modular scale (12-48) --- */
    --text-xs:   12px;   /* labels, microcopy */
    --text-sm:   14px;   /* small body */
    --text-base: 16px;   /* body */
    --text-lg:   18px;   /* large body, hero subline */
    --text-xl:   20px;   /* H3 */
    --text-2xl:  24px;   /* H3 large */
    --text-3xl:  30px;   /* H2 */
    --text-4xl:  36px;   /* H2 large / H1 mobile */
    --text-5xl:  48px;   /* H1 desktop / stats numbers */

    /* --- Font weights --- */
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* --- Line heights --- */
    --leading-tight:   1.1;     /* H1 */
    --leading-snug:    1.25;    /* H2 */
    --leading-normal:  1.4;     /* small captions */
    --leading-relaxed: 1.5;     /* body */
    --leading-loose:   1.75;    /* spacious body */

    /* --- Spacing scale (4-96) --- */
    --space-1:  4px;
    --space-2:  8px;
    --space-4:  16px;
    --space-6:  24px;
    --space-8:  32px;
    --space-12: 48px;
    --space-16: 48px;   /* было 64, ужал под Tilda — общие вертикальные отступы тайтнее */
    --space-24: 64px;   /* было 80, цель — уменьшить общую высоту страницы до ~6300px */

    /* --- Container --- */
    --container-max: 1200px;
    --container-padding: 24px;

    /* --- Borders --- */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-full: 9999px;

    /* --- Shadows (4 levels) --- */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.10);
    --shadow-xl: 0 25px 50px rgba(15, 23, 42, 0.20);

    /* --- Transitions --- */
    --duration-fast:   150ms;
    --duration-normal: 250ms;
    --easing:          cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Z-index scale --- */
    --z-header:   100;
    --z-overlay:  900;
    --z-modal:    1000;
    --z-sticky:   1100;
}

/* =========================================================
   2. RESET + BASE
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Montserrat', 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    color: var(--color-gray-900);
    background: var(--color-gray-50);
    overflow-x: hidden;
}

img, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Focus ring (ТЗ §12) */
:focus-visible {
    outline: 2px solid var(--color-orange-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* =========================================================
   3. LAYOUT UTILITIES
   ========================================================= */

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.section {
    padding-top: var(--space-24);    /* 96px desktop */
    padding-bottom: var(--space-24);
}

.section--tight {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

.section--dark {
    background: var(--color-gray-900);
    color: var(--color-gray-50);
}

.section--gray {
    background: var(--color-gray-100);
}

.section__header {
    text-align: center;
    margin-bottom: var(--space-12);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.section__title {
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    color: var(--color-gray-900);
    margin-bottom: var(--space-4);
}

.section__subtitle {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
    line-height: var(--leading-relaxed);
}

@media (max-width: 768px) {
    .section { padding-top: var(--space-16); padding-bottom: var(--space-16); }
    .section__title { font-size: var(--text-3xl); }
    .section__subtitle { font-size: var(--text-base); }
}

/* =========================================================
   4. BUTTONS (ТЗ §5.1)
   ========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 14px 28px;
    min-height: 48px;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    border-radius: var(--radius-md);
    transition: background var(--duration-fast) var(--easing),
                color var(--duration-fast) var(--easing),
                border-color var(--duration-fast) var(--easing),
                transform var(--duration-fast) var(--easing),
                box-shadow var(--duration-fast) var(--easing);
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
}

.btn--primary {
    background: var(--color-orange-500);
    color: #FFFFFF;
    box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--color-orange-600); box-shadow: var(--shadow-md); }
.btn--primary:active { background: var(--color-orange-700); transform: translateY(1px); }
.btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--secondary {
    background: transparent;
    color: var(--color-orange-500);
    border: 2px solid var(--color-orange-500);
    padding: 12px 26px;
}
.btn--secondary:hover { background: var(--color-orange-50); }
.btn--secondary:active { background: var(--color-orange-100); }

.btn--tertiary {
    background: transparent;
    color: var(--color-gray-700);
    padding: 10px 12px;
    min-height: auto;
}
.btn--tertiary:hover { color: var(--color-orange-500); text-decoration: underline; }

.btn--full { width: 100%; }

.btn--lg { padding: 18px 36px; font-size: var(--text-lg); }

@media (max-width: 768px) {
    .btn { padding: 16px 24px; font-size: var(--text-base); width: 100%; max-width: 360px; }
}

/* =========================================================
   5. CARD (ТЗ §5.2)
   ========================================================= */

.card {
    background: #FFFFFF;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-6);
    box-shadow: var(--shadow-md);
    transition: box-shadow var(--duration-normal) var(--easing),
                transform var(--duration-normal) var(--easing);
}

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.card__icon {
    width: 48px;
    height: 48px;
    color: var(--color-orange-500);
    margin-bottom: var(--space-4);
}

.card__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-gray-900);
    margin-bottom: var(--space-2);
    line-height: var(--leading-snug);
}

.card__description {
    font-size: 15px;
    color: var(--color-gray-600);
    line-height: 1.6;
}

/* =========================================================
   6. FORM (ТЗ §5.3)
   ========================================================= */

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.field__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-gray-700);
}

.field__input {
    height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    background: #FFFFFF;
    font-size: var(--text-base);
    color: var(--color-gray-900);
    transition: border-color var(--duration-fast) var(--easing),
                box-shadow var(--duration-fast) var(--easing);
}

.field__input::placeholder { color: var(--color-gray-400); }

.field__input:focus {
    border-color: var(--color-orange-500);
    box-shadow: 0 0 0 3px var(--color-orange-100);
    outline: none;
}

.field__error {
    font-size: var(--text-sm);
    color: var(--color-error-500);
}

.field__help {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}

/* =========================================================
   7. UTILITY (минимум)
   ========================================================= */

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

.text-center { text-align: center; }
.text-left { text-align: left; }

.eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
}

/* =========================================================
   8. SITE HEADER (ТЗ §5.4, §13 — Trunk Test)
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    background: #FFFFFF;
    border-bottom: 1px solid transparent;
    transition: box-shadow var(--duration-normal) var(--easing),
                border-color var(--duration-normal) var(--easing);
}

.site-header--scrolled {
    box-shadow: var(--shadow-sm);
    border-bottom-color: var(--color-gray-100);
}

/* --- Overlay header (только на главной, лежит поверх hero) --- */
.site-header--overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    z-index: 10;
    border-bottom-color: transparent;
    box-shadow: none;
}

.site-header--overlay .site-nav__link,
.site-header--overlay .site-nav__toggle,
.site-header--overlay .site-header__phone {
    color: #FFFFFF;
}

.site-header--overlay .site-nav__link:hover,
.site-header--overlay .site-nav__toggle:hover,
.site-header--overlay .site-header__phone:hover {
    color: var(--color-orange-300);
}

/* Комбинированный логотип уже в фирменных цветах — ничего не инвертируем.
   Оставляем правило для legacy (на случай если старые страницы ещё
   используют site-header__logo-icon + text). */
.site-header--overlay .site-header__logo-icon {
    filter: brightness(0) invert(1);
}

.site-header--overlay .site-header__burger span {
    background: #FFFFFF;
}

/* --- Overlay + scrolled: возвращаем sticky-белую шапку --- */
.site-header--overlay.site-header--scrolled {
    position: sticky;
    background: #FFFFFF;
    box-shadow: var(--shadow-sm);
    border-bottom-color: var(--color-gray-100);
}

.site-header--overlay.site-header--scrolled .site-nav__link,
.site-header--overlay.site-header--scrolled .site-nav__toggle,
.site-header--overlay.site-header--scrolled .site-header__phone {
    color: var(--color-gray-700);
}

.site-header--overlay.site-header--scrolled .site-nav__link:hover,
.site-header--overlay.site-header--scrolled .site-nav__toggle:hover,
.site-header--overlay.site-header--scrolled .site-header__phone:hover {
    color: var(--color-orange-500);
}

.site-header--overlay.site-header--scrolled .site-header__logo img {
    filter: none;
}

.site-header--overlay.site-header--scrolled .site-header__burger span {
    background: var(--color-gray-900);
}

.site-header__inner {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--space-6);
    min-height: 72px;
}

.site-header__logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    /* Тап-зона ≥ 44px */
    min-height: 44px;
}

.site-header__logo {
    gap: 12px;
    text-decoration: none;
}

.site-header__logo-icon {
    height: 44px;
    width: 44px;
    display: block;
    flex-shrink: 0;
}

.site-header__logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.site-header__logo-name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-gray-900);
}

.site-header__logo-sub {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.4em;
    color: var(--color-gray-600);
    margin-top: 4px;
}

.site-header--overlay .site-header__logo-name {
    color: #FFFFFF;
}

.site-header--overlay .site-header__logo-sub {
    color: rgba(255,255,255,0.8);
}

.site-header--overlay.site-header--scrolled .site-header__logo-name {
    color: var(--color-gray-900);
}

.site-header--overlay.site-header--scrolled .site-header__logo-sub {
    color: var(--color-gray-600);
}

.site-header__inner {
    min-height: 76px;
}

/* --- Desktop nav --- */
.site-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: nowrap;
}

.site-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-2);
    font-size: 18px;
    font-weight: var(--weight-regular);
    color: var(--color-gray-700);
    transition: color var(--duration-fast) var(--easing);
    position: relative;
    white-space: nowrap;
}

.site-nav__link:hover {
    color: var(--color-orange-500);
}

.site-nav__link--current {
    color: var(--color-orange-600);
    font-weight: var(--weight-semibold);
}

.site-nav__link--current::after {
    content: '';
    position: absolute;
    left: var(--space-2);
    right: var(--space-2);
    bottom: 8px;
    height: 2px;
    background: var(--color-orange-600);
    border-radius: var(--radius-full);
}

/* --- Desktop dropdown (submenu) --- */
.site-nav__item {
    position: relative;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.site-nav__item--has-children > .site-nav__link {
    padding-right: var(--space-1);
}

.site-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0 4px;
    min-height: 44px;
    color: inherit;
    cursor: pointer;
    transition: color var(--duration-fast) var(--easing),
                transform var(--duration-fast) var(--easing);
}

.site-nav__toggle svg {
    width: 12px;
    height: 8px;
    flex-shrink: 0;
    transition: transform var(--duration-fast) var(--easing);
}

.site-nav__item--has-children:hover .site-nav__toggle svg,
.site-nav__item--has-children:focus-within .site-nav__toggle svg,
.site-nav__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.site-nav__item--has-children:hover .site-nav__link,
.site-nav__item--has-children:focus-within .site-nav__link,
.site-nav__item--has-children:hover .site-nav__toggle,
.site-nav__item--has-children:focus-within .site-nav__toggle {
    color: var(--color-orange-500);
}

.site-nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 460px;
    margin: 0;
    padding: 24px 8px;
    list-style: none;
    background: #FFFFFF;
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .10);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity var(--duration-fast) var(--easing),
                transform var(--duration-fast) var(--easing),
                visibility 0s linear var(--duration-fast, 150ms);
    z-index: var(--z-dropdown, 50);
}

/* Раскрываем на hover и на фокус-внутри (keyboard) + явный aria-expanded для JS-тапа */
.site-nav__item--has-children:hover > .site-nav__submenu,
.site-nav__item--has-children:focus-within > .site-nav__submenu,
.site-nav__item--has-children.is-open > .site-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

/* Невидимый мост, чтобы курсор не терял hover между пунктом и плашкой */
.site-nav__item--has-children > .site-nav__submenu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

.site-nav__submenu-item {
    list-style: none;
}

.site-nav__submenu-link {
    display: block;
    padding: 12px 24px;
    font-size: 18px;
    font-weight: var(--weight-regular);
    color: var(--color-gray-900);
    line-height: 1.4;
    white-space: nowrap;
    transition: background var(--duration-fast) var(--easing),
                color var(--duration-fast) var(--easing);
}

.site-nav__submenu-link:hover,
.site-nav__submenu-link:focus-visible {
    background: var(--color-orange-50);
    color: var(--color-orange-600);
    outline: none;
}

.site-nav__submenu-link--current {
    color: var(--color-orange-600);
    font-weight: var(--weight-semibold);
    background: var(--color-orange-50);
}

/* На overlay-варианте шапки (главная) плашка всё равно белая — текст ссылок тёмный */
.site-header--overlay .site-nav__submenu,
.site-header--overlay.site-header--scrolled .site-nav__submenu {
    background: #FFFFFF;
}

.site-header--overlay .site-nav__submenu-link {
    color: var(--color-gray-900);
}

/* --- Phone --- */
.site-header__phone {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--color-gray-700);
    transition: color var(--duration-fast) var(--easing);
    flex-shrink: 0;
}

.site-header__phone:hover {
    color: var(--color-orange-500);
}

.site-header__phone svg {
    flex-shrink: 0;
}

/* --- CTA in header --- */
.site-header__cta {
    flex-shrink: 0;
    /* Чуть компактнее, чем дефолтная .btn — шапка плотнее */
    padding: 10px 20px;
    min-height: 44px;
    font-size: var(--text-sm);
    width: auto;
    max-width: none;
}

/* --- Burger --- */
.site-header__burger {
    display: none;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}

.site-header__burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-gray-900);
    border-radius: 2px;
    transition: transform var(--duration-fast) var(--easing),
                opacity var(--duration-fast) var(--easing);
    transform-origin: center;
}

/* Морфим в X, когда меню открыто */
.site-header__burger--open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.site-header__burger--open span:nth-child(2) {
    opacity: 0;
}
.site-header__burger--open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* =========================================================
   9. MOBILE MENU (drawer)
   ========================================================= */

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: #FFFFFF;
    padding: 88px var(--space-6) var(--space-8);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--duration-normal) var(--easing);
    -webkit-overflow-scrolling: touch;
}

.mobile-menu[hidden] {
    /* Кастомный hidden — управляем через transform, но скрываем для AT */
    display: none;
}

.mobile-menu--open {
    transform: translateX(0);
}

.mobile-menu__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-8);
    border-bottom: 1px solid var(--color-gray-200);
    padding-bottom: var(--space-6);
}

.mobile-menu__link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: var(--space-4);
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    color: var(--color-gray-900);
    border-radius: var(--radius-md);
    transition: background var(--duration-fast) var(--easing),
                color var(--duration-fast) var(--easing);
}

.mobile-menu__link:hover,
.mobile-menu__link:active {
    background: var(--color-gray-50);
    color: var(--color-orange-500);
}

.mobile-menu__link--current {
    color: var(--color-orange-600);
    background: var(--color-orange-50);
}

/* Mobile submenu (accordion) */
.mobile-menu__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mobile-menu__row .mobile-menu__link {
    flex: 1 1 auto;
}

.mobile-menu__toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    color: var(--color-gray-700);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background var(--duration-fast) var(--easing),
                color var(--duration-fast) var(--easing);
}

.mobile-menu__toggle:hover,
.mobile-menu__toggle:focus-visible {
    background: var(--color-gray-50);
    color: var(--color-orange-500);
    outline: none;
}

.mobile-menu__toggle svg {
    transition: transform var(--duration-fast) var(--easing);
}

.mobile-menu__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.mobile-menu__submenu {
    list-style: none;
    margin: 0 0 var(--space-2) var(--space-4);
    padding: 0 0 0 var(--space-2);
    border-left: 2px solid var(--color-orange-100);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mobile-menu__submenu[hidden] {
    display: none;
}

.mobile-menu__submenu-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    color: var(--color-gray-700);
    border-radius: var(--radius-md);
    transition: background var(--duration-fast) var(--easing),
                color var(--duration-fast) var(--easing);
}

.mobile-menu__submenu-link:hover,
.mobile-menu__submenu-link:active,
.mobile-menu__submenu-link:focus-visible {
    background: var(--color-gray-50);
    color: var(--color-orange-500);
    outline: none;
}

.mobile-menu__submenu-link--current {
    color: var(--color-orange-600);
    background: var(--color-orange-50);
    font-weight: var(--weight-medium);
}

.mobile-menu__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.mobile-menu__actions .btn {
    width: 100%;
    max-width: none;
}

/* =========================================================
   10. HEADER: RESPONSIVE
   ========================================================= */

/* < 960px — прячем десктоп-навигацию, показываем бургер */
@media (max-width: 960px) {
    .site-nav { display: none; }
    .site-header__burger { display: inline-flex; }
    .site-header__cta { display: none; }
    .site-header__inner { gap: var(--space-4); }
}

/* < 768px — прячем CTA-кнопку (она в drawer) */
@media (max-width: 768px) {
    .site-header__cta { display: none; }
    .site-header__inner { min-height: 64px; }
    .site-header__logo img { height: 32px; }
    .mobile-menu { padding-top: 80px; }
}

/* < 640px — прячем телефон в шапке (есть кнопка в drawer) */
@media (max-width: 640px) {
    .site-header__phone { display: none; }
}

/* =========================================================
   === HERO === (визуал 1:1 с https://create-further-frogfish.tilda.ws/)
   Full-width фото-фон + лёгкий тёмный gradient-overlay для
   читаемости белого текста + центрированный блок (H1 + subline + 2 CTA).
   ========================================================= */

.hero {
    position: relative;
    width: 100%;
    min-height: 520px;                          /* desktop target — компактнее */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    padding-top: 72px;                          /* clear sticky header */
    padding-bottom: var(--space-10, 40px);
    background-color: var(--color-gray-900);    /* fallback */
    color: #FFFFFF;
}

/* Background photo layer — cover, center, scroll */
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

/* Fallback when no image is supplied — subtle industrial dark gradient */
.hero__bg--fallback {
    background-image:
        radial-gradient(ellipse at 30% 20%, rgba(255, 107, 0, 0.18), transparent 60%),
        linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-800) 100%);
}

/* Лёгкий overlay — фото видно лучше, но текст читается */
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.32) 100%);
    pointer-events: none;
}

/* Text-блок — split-layout: title сверху центр, subtitle слева-снизу, CTAs справа-снизу */
.hero__content {
    position: relative;
    z-index: 1;
    max-width: 1160px;
    width: 100%;
    text-align: center;
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
    opacity: 0;
    animation: hero-fade-in 240ms var(--easing) forwards;
    animation-delay: 60ms;
}

/* Нижний ряд: подзаголовок слева + CTA стопкой справа (desktop) */
.hero__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    margin-top: var(--space-8);
}
@media (min-width: 900px) {
    .hero__bottom {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--space-8);
        margin-top: var(--space-12);
    }
}

@keyframes hero-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero__content {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* H1 — крупный, белый, центр, с лёгкой тенью */
.hero__title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.15;
    color: #FFFFFF;
    text-align: center;
    margin: 0 auto var(--space-6) auto;        /* 24px bottom */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.30);
}

/* Каждая строка H1 — отдельный блок, фиксированные переносы 1:1 с Tilda */
.hero__title-line {
    display: block;
}

/* Подзаголовок — 3 явные строки (render как <p>+<p>+<p>), крупный, 1:1 с Tilda. */
.hero__subline {
    color: rgba(255, 255, 255, 0.96);
    text-align: center;
    max-width: 520px;
    margin: 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.hero__subline p {
    font-size: 22px;
    line-height: 1.45;
    font-weight: 400;
    margin: 0;
}
.hero__subline p + p { margin-top: 4px; }
@media (min-width: 900px) {
    .hero__subline { text-align: left; }
}
@media (max-width: 640px) {
    .hero__subline p { font-size: 17px; line-height: 1.5; }
}

/* CTA cluster — СТОПКОЙ (2 кнопки одна над другой) на desktop, в столбик на mobile */
.hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: stretch;
    justify-content: center;
    min-width: 280px;
}
.hero__cta { width: 100%; }
@media (min-width: 900px) {
    .hero__actions { min-width: 360px; }
}

/* Альтернативный (тёмно-оранжевый «burnt») вариант .btn--primary
   для второй CTA в hero — чтобы кнопки визуально различались. */
.btn--primary--alt {
    background: #C9540C;
    color: #FFFFFF;
}
.btn--primary--alt:hover {
    background: #A44309;
}
.btn--primary--alt:active {
    background: #7E3207;
    transform: translateY(1px);
}

/* --- Desktop (≥ 769px) — компактная целевая высота --- */
@media (min-width: 769px) {
    .hero {
        min-height: 520px;
        padding-top: 72px;
        padding-bottom: var(--space-12);         /* 48px */
    }
}

/* --- Mobile (≤ 768px) — 60vh, но не выше 500px --- */
@media (max-width: 768px) {
    .hero {
        min-height: 60vh;
        max-height: 500px;
        padding-top: 64px;
    }

    .hero__title {
        font-size: 32px;
        line-height: 1.2;
        margin-bottom: var(--space-4);           /* 16px */
    }

    .hero__subline {
        font-size: 16px;
        margin-bottom: var(--space-6);           /* 24px */
    }

    /* Кнопки — в стопку, на всю ширину */
    .hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);                     /* 8px */
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }

    /* Чуть плотнее overlay на mobile — фото не должно перебивать текст */
    .hero__overlay {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.42) 100%);
    }
}

/* =========================================================
   === EQUIPMENT === «Мы работаем с оборудованием» (ТЗ §9 #5)
   1:1 с оригиналом Tilda: 8 фото в АСИММЕТРИЧНОЙ композиции.
   12-column grid с явными ширинами для разных позиций — фото
   разных размеров «парят» на белом фоне.
   Mobile: 2 col одинаковых.
   ========================================================= */

.equipment__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);   /* 4×2 равных плиток */
    gap: 36px 24px;
    align-items: end;                        /* фото выравниваются по нижнему краю */
}

@media (max-width: 1024px) {
    .equipment__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .equipment__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
}

.eq-item {
    /* Намеренно без bg/border/shadow — фото «парят» на белом, как в оригинале */
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.eq-item figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* При наведении фото «отдаляется» (scale вниз) и возвращается к исходному размеру — как в Tilda */
@keyframes eq-photo-bounce {
    0%   { transform: scale(1); }
    45%  { transform: scale(0.88); }
    100% { transform: scale(1); }
}

.eq-item__photo {
    transform-origin: center center;
    transition: transform 250ms var(--easing);
}

.eq-item:hover .eq-item__photo,
.eq-item:focus-within .eq-item__photo {
    animation: eq-photo-bounce 0.7s ease-out;
}

.eq-item__photo {
    width: 100%;
    max-width: 100%;
    height: 220px;                          /* одинаковая высота «рамки» под фото */
    aspect-ratio: auto;
    object-fit: contain;                    /* прозрачные PNG/WEBP не обрезаются */
    display: block;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .eq-item__photo { height: 170px; }
}

.eq-item__label {
    font-size: 15px;
    font-weight: var(--weight-semibold);    /* 600 — читабельнее под фото */
    color: var(--color-gray-900);
    line-height: 1.35;
    text-align: center;
    margin: 0;
    max-width: 260px;
}

@media (prefers-reduced-motion: reduce) {
    .eq-item__photo { transition: none; }
    .eq-item:hover .eq-item__photo,
    .eq-item:focus-within .eq-item__photo { animation: none; }
}

/* =========================================================
   === PROCESS === (ТЗ §9 #6 — 8 шагов работы)
   Прямая разметка 4+4:
       [1] → [2] → [3] → [4]
       [5] → [6] → [7] → [8]
   Сетка 7 колонок × 2 строки: колонки шагов чередуются с колонками стрелок.
   Иконка в серой квадратной плашке, оранжевый бейдж с номером — в левом-верхнем
   углу плашки. Стрелки — CSS-only: линия (flex:1) + треугольник (border-triangle).
   ========================================================= */

.process.section {
    background: #F5F5F7;
    /* Компактный вертикальный ритм — блок ниже по высоте, чем стандартная секция */
    padding-top: var(--space-10, 32px);
    padding-bottom: var(--space-10, 32px);
}

.process .section__header {
    margin-bottom: var(--space-8, 24px);
}

.process__grid {
    display: grid;
    /* Шаги — auto (фиксированная ширина по max-width: 220px), стрелки — 1fr
       (растягиваются на всё свободное место между шагами → длиннее и воздушнее). */
    grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: var(--space-4, 20px);
    row-gap: var(--space-6, 24px);
    align-items: start;
    justify-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.process-step--1 { grid-column: 1; grid-row: 1; }
.process-step--2 { grid-column: 3; grid-row: 1; }
.process-step--3 { grid-column: 5; grid-row: 1; }
.process-step--4 { grid-column: 7; grid-row: 1; }
.process-step--5 { grid-column: 1; grid-row: 2; }
.process-step--6 { grid-column: 3; grid-row: 2; }
.process-step--7 { grid-column: 5; grid-row: 2; }
.process-step--8 { grid-column: 7; grid-row: 2; }

.process-arrow--1 { grid-column: 2; grid-row: 1; }
.process-arrow--2 { grid-column: 4; grid-row: 1; }
.process-arrow--3 { grid-column: 6; grid-row: 1; }
.process-arrow--5 { grid-column: 2; grid-row: 2; }
.process-arrow--6 { grid-column: 4; grid-row: 2; }
.process-arrow--7 { grid-column: 6; grid-row: 2; }

.process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4, 16px);
    width: 100%;
    max-width: 220px;
    text-align: center;
    padding: 0;
}

.process-step__panel {
    position: relative;
    width: 104px;
    height: 104px;
    flex-shrink: 0;
    background: #E9E9EC;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
    will-change: transform;
}

.process-step__panel-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    display: block;
}

.process-step__number {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full, 50%);
    background: var(--color-orange-500, #E87722);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: var(--weight-bold, 700);
    line-height: 32px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(232, 119, 34, 0.28);
}

.process-step__title {
    font-size: 14px;
    font-weight: var(--weight-regular, 400);
    color: var(--color-gray-800, #2F2F33);
    line-height: var(--leading-normal, 1.4);
    max-width: 220px;
    margin: 0;
}

/* --- Горизонтальная оранжевая стрелка (линия + треугольник) --- */
.process-arrow {
    display: flex;
    align-items: center;
    justify-content: stretch;
    width: 100%;
    min-width: 120px;
    height: 14px;
    /* сдвигаем стрелку вертикально на центр плашки (104px / 2 = 52px минус половина высоты самой стрелки) */
    margin-top: 45px;
    padding: 0;
}

.process-arrow__line {
    flex: 1 1 auto;
    height: 2.5px;
    background: var(--color-orange-500, #E87722);
    transform-origin: left center;
}

.process-arrow__head {
    width: 0;
    height: 0;
    flex-shrink: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 12px solid var(--color-orange-500, #E87722);
    display: block;
    margin-left: -1px;
}

/* --- Анимации появления (fadein заголовка + fadein-right карточек) --- */
@keyframes mks-process-fadein-up {
    from { opacity: 0; transform: translate3d(0, 30px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes mks-process-fadein-right {
    from { opacity: 0; transform: translate3d(-40px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes mks-process-arrow-line {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes mks-process-arrow-head {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

.process--anim .section__title,
.process--anim .process-step {
    opacity: 0;
}

.process--anim .process-arrow__line  { transform: scaleX(0); }
.process--anim .process-arrow__head  { opacity: 0; }

.process--anim.is-in-view .section__title {
    animation: mks-process-fadein-up 1.4s ease-out 0.3s forwards;
}

.process--anim.is-in-view .process-step {
    animation: mks-process-fadein-right 1.2s ease-out forwards;
}

/* Каскад одной цепочкой: блок 1 → стрелка 1 → блок 2 → стрелка 2 → ... → блок 8.
   Шаг каскада 0.15s, длительность анимации блока 1.2s (плавно перекрывается
   со следующим), длительность линии 0.30s + голова 0.20s (стрелка укладывается
   ровно в интервал до появления следующего блока). */
.process--anim.is-in-view .process-step--1 { animation-delay: 0.40s; }
.process--anim.is-in-view .process-step--2 { animation-delay: 0.70s; }
.process--anim.is-in-view .process-step--3 { animation-delay: 1.00s; }
.process--anim.is-in-view .process-step--4 { animation-delay: 1.30s; }
.process--anim.is-in-view .process-step--5 { animation-delay: 1.60s; }
.process--anim.is-in-view .process-step--6 { animation-delay: 1.90s; }
.process--anim.is-in-view .process-step--7 { animation-delay: 2.20s; }
.process--anim.is-in-view .process-step--8 { animation-delay: 2.50s; }

.process--anim.is-in-view .process-arrow__line {
    animation: mks-process-arrow-line 0.30s ease-out forwards;
}
.process--anim.is-in-view .process-arrow__head {
    animation: mks-process-arrow-head 0.20s ease-out forwards;
}

.process--anim.is-in-view .process-arrow--1 .process-arrow__line { animation-delay: 0.55s; }
.process--anim.is-in-view .process-arrow--2 .process-arrow__line { animation-delay: 0.85s; }
.process--anim.is-in-view .process-arrow--3 .process-arrow__line { animation-delay: 1.15s; }
.process--anim.is-in-view .process-arrow--5 .process-arrow__line { animation-delay: 1.75s; }
.process--anim.is-in-view .process-arrow--6 .process-arrow__line { animation-delay: 2.05s; }
.process--anim.is-in-view .process-arrow--7 .process-arrow__line { animation-delay: 2.35s; }

.process--anim.is-in-view .process-arrow--1 .process-arrow__head { animation-delay: 0.85s; }
.process--anim.is-in-view .process-arrow--2 .process-arrow__head { animation-delay: 1.15s; }
.process--anim.is-in-view .process-arrow--3 .process-arrow__head { animation-delay: 1.45s; }
.process--anim.is-in-view .process-arrow--5 .process-arrow__head { animation-delay: 2.05s; }
.process--anim.is-in-view .process-arrow--6 .process-arrow__head { animation-delay: 2.35s; }
.process--anim.is-in-view .process-arrow--7 .process-arrow__head { animation-delay: 2.65s; }

/* --- Hover: лёгкое поднятие плашки + усиление тени --- */
.process-step:hover .process-step__panel {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    .process--anim .section__title,
    .process--anim .process-step {
        opacity: 1;
        animation: none;
    }
    .process--anim .process-arrow__line {
        transform: scaleX(1);
        animation: none;
    }
    .process--anim .process-arrow__head {
        opacity: 1;
        animation: none;
    }
    .process-step:hover .process-step__panel {
        transform: none;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
}

/* --- Tablet (≤ 1024px) — стрелки скрываем, шаги в 4 колонки --- */
@media (max-width: 1024px) {
    .process__grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto auto;
        column-gap: var(--space-6, 24px);
        row-gap: var(--space-8, 40px);
    }
    .process-step--1 { grid-column: 1; grid-row: 1; }
    .process-step--2 { grid-column: 2; grid-row: 1; }
    .process-step--3 { grid-column: 3; grid-row: 1; }
    .process-step--4 { grid-column: 4; grid-row: 1; }
    .process-step--5 { grid-column: 1; grid-row: 2; }
    .process-step--6 { grid-column: 2; grid-row: 2; }
    .process-step--7 { grid-column: 3; grid-row: 2; }
    .process-step--8 { grid-column: 4; grid-row: 2; }
    .process-arrow { display: none; }
    .process-step { max-width: 200px; }
}

/* --- Mobile (≤ 768px) — столбик, стрелки скрыты --- */
@media (max-width: 768px) {
    .process__grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-6);              /* 24px */
    }

    .process-arrow {
        display: none;
    }

    .process-step {
        width: 100%;
        max-width: 320px;
    }

    .process-step__title {
        font-size: var(--text-sm);        /* 14px — чуть крупнее на mobile */
        max-width: none;
    }
}

/* =========================================================
   === STATS === (ТЗ §9 — «Цифры, которые говорят за нас»)
   Под оригинал Tilda: сетка 4×2 цифр + заголовок «Коротко о нас»
   в правом нижнем углу (последняя клетка сетки).
   ========================================================= */

.stats.section,
.stats.section--tight {
    padding-top: 32px;
    padding-bottom: 32px;
}

.stats .section__header {
    margin-bottom: 22px;
}

.stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    gap: 14px 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 10px 4px;
}

.stat__label {
    text-align: center;
}

.stat__number {
    font-size: 38px;
    font-weight: var(--weight-bold);
    line-height: 1.05;
    color: var(--color-gray-900);
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}

.stat__plus {
    color: var(--color-orange-500);
    font-weight: var(--weight-bold);
}

.stat__label {
    font-size: 13px;
    line-height: var(--leading-normal);  /* 1.4 */
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    max-width: 280px;
}

/* Заголовок «Коротко о нас» — последняя клетка сетки (правый нижний угол). */
.stats__title-corner {
    grid-column: 4 / 5;
    grid-row: 2 / 3;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 4px 2px;
    list-style: none;
}

.stats__corner-title {
    margin: 0;
    font-size: clamp(28px, 3vw, 36px);
    font-weight: var(--weight-bold);
    line-height: 1.15;
    color: var(--color-gray-900);
    text-align: right;
    letter-spacing: -0.01em;
}

/* Tablet: 2 колонки, заголовок снизу справа на последней строке. */
@media (max-width: 960px) {
    .stats__grid { grid-template-columns: repeat(2, 1fr); }
    .stat__number { font-size: var(--text-4xl); }
    .stats__title-corner {
        grid-column: 2 / 3;
        grid-row: auto;
    }
}

/* Mobile: 2 колонки, заголовок переезжает наверх (как обычно). */
@media (max-width: 768px) {
    .stats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
    .stat { padding: var(--space-2); align-items: center; text-align: center; }
    .stat__number { font-size: var(--text-3xl); }
    .stat__label { font-size: 12px; }

    .stats__title-corner {
        order: -1;
        grid-column: 1 / -1;
        grid-row: auto;
        justify-content: center;
        align-items: center;
        padding: 0 0 var(--space-4);
    }
    .stats__corner-title {
        text-align: center;
        font-size: 24px;
    }
}

/* =========================================================
   === SERVICES === «Производим работы» 1:1 с Tilda:
   сетка 4×2 карточек с иконкой в светло-сером круге.
   ========================================================= */

.services.section,
.services.section--tight {
    padding-top: 28px;
    padding-bottom: 28px;
}

.services .section__header {
    margin-bottom: 20px;
}

.services__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);       /* mobile-first: 2 cols */
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .services__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .services__grid { grid-template-columns: repeat(4, 1fr); }
}

.service-card {
    background: #FFFFFF;
    border: 0;
    border-radius: 0;
    padding: 18px 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    transition: box-shadow 250ms var(--easing),
                transform 250ms var(--easing);
}

.service-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.service-card__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

.service-card__icon img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    display: block;
}

.service-card__title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-gray-900);
    text-align: center;
    margin: 0;
}

.service-card__description {
    font-size: 13px;
    color: var(--color-gray-600);
    line-height: 1.4;
    text-align: center;
    margin-top: 5px;
}

@media (prefers-reduced-motion: reduce) {
    .service-card,
    .service-card:hover {
        transition: none;
        transform: none;
    }
}

/* =========================================================
   === FORM === «Получить расчет» 1:1 с Tilda rec2096384191.
   Тёмное фото-фон + overlay, H2 40px, subtitle 26px с оранжевым
   акцентом на «прямо сейчас!», описательный абзац 16px центром.
   Форма: 4 input-а сеткой (имя/тел/email/адрес) + textarea +
   файл-attach + submit + consent-checkbox. На mobile — стек.
   ========================================================= */

.form-section {
    position: relative;
    padding: 56px 0;
    color: #FFFFFF;
    overflow: hidden;
    background-color: #1A1A1A;                 /* fallback пока грузится фото */
}

.form-section__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.form-section__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
}

.form-section__inner {
    position: relative;
    z-index: 2;
    max-width: 1160px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.form-section__header {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.form-section__title {
    font-size: clamp(30px, 3.4vw, 48px);
    font-weight: 800;
    line-height: 1.1;
    color: #FFFFFF;
    margin: 0;
    letter-spacing: -0.01em;
}

.form-section__subtitle {
    font-size: 26px;                            /* Tilda: 26 */
    font-weight: 500;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.95);
    margin: 8px 0 0;
}

.form-section__subtitle-accent {
    color: var(--color-orange-500);             /* #FF6715 — акцент «прямо сейчас!» */
    font-weight: 700;
}

.form-section__description {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    margin: 8px auto 0;
    max-width: 760px;
    text-wrap: pretty;
}

/* --- Форма --- */
.lead-form {
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

/* Inline-строка: Имя | Телефон | Оставить заявку */
.lead-form__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 14px;
    align-items: stretch;
}

.lead-form__field {
    position: relative;
    min-width: 0;
}

.lead-form__input {
    width: 100%;
    height: 56px;
    padding: 0 20px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.97);
    color: #111111;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.2;
    transition: background var(--duration-fast) var(--easing),
                outline var(--duration-fast) var(--easing);
}

.lead-form__input::placeholder {
    color: #888888;
    opacity: 1;
}

.lead-form__input:focus {
    background: #FFFFFF;
    outline: 2px solid var(--color-orange-500);
    outline-offset: 0;
}

.lead-form__submit {
    min-width: 260px;
    height: 56px;
    font-size: 16px;
    position: relative;
    white-space: nowrap;
}

.lead-form__submit-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: mks-spin 0.7s linear infinite;
    display: inline-block;
}

@keyframes mks-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .lead-form__submit-spinner { animation-duration: 1.6s; }
}

/* --- Consent (checkbox + text) — прижат вправо под кнопкой --- */
.lead-form__consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 8px 0 0 auto;
    max-width: 400px;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
    cursor: pointer;
    user-select: none;
}

.lead-form__consent-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.lead-form__consent-box {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    border-radius: 3px;
    background: transparent;
    position: relative;
    transition: border-color var(--duration-fast) var(--easing),
                background var(--duration-fast) var(--easing);
}

.lead-form__consent-input:checked + .lead-form__consent-box {
    background: var(--color-orange-500);
    border-color: var(--color-orange-500);
}

.lead-form__consent-input:checked + .lead-form__consent-box::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 0;
    width: 6px;
    height: 11px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.lead-form__consent-input:focus-visible + .lead-form__consent-box {
    outline: 2px solid var(--color-orange-500);
    outline-offset: 2px;
}

.lead-form__consent-text {
    display: inline-block;
}

/* --- Feedback (success / error) --- */
.lead-form__feedback {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.lead-form__feedback--success {
    background: rgba(16, 185, 129, 0.15);
    color: #d1fae5;
}

.lead-form__feedback--error {
    background: rgba(239, 68, 68, 0.15);
    color: #fee2e2;
}

/* eyebrow на тёмном фоне — светлый вариант (на случай переиспользования) */
.eyebrow--light {
    color: rgba(255, 255, 255, 0.85);
}

/* --- Tablet (≤ 1024px) — инпуты остаются 2 в ряд, кнопка уходит на новую строку --- */
@media (max-width: 1024px) {
    .lead-form__row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .lead-form__submit {
        grid-column: 1 / -1;
        min-width: 0;
        width: 100%;
    }
}

/* --- Mobile (≤768px) — всё в столбик --- */
@media (max-width: 768px) {
    .form-section {
        padding: 56px 0;
    }

    .form-section__subtitle {
        font-size: 20px;
    }

    .form-section__description {
        font-size: 15px;
    }

    .lead-form__row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .lead-form__input,
    .lead-form__submit {
        height: 52px;
        width: 100%;
    }

    .lead-form__consent {
        margin-left: 0;
        max-width: none;
    }
}

/* =========================================================
   === PORTFOLIO === Под оригинал Tilda: 3 фото равной высоты
   без overlay/стрелки, скруглённые 12px, под ними outlined CTA.
   Hover: лёгкий zoom фото (scale 1.05). Mobile-first.
   ========================================================= */

.portfolio__grid {
    display: grid;
    grid-template-columns: 1fr;            /* mobile-first: 1 col */
    gap: 16px;
}

@media (min-width: 768px) {
    .portfolio__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .portfolio__grid { grid-template-columns: repeat(3, 1fr); }
}

.port-item {
    position: relative;
    aspect-ratio: 4 / 3;                   /* ниже чем квадрат — блок короче */
    border-radius: 0;                      /* без скругления — плоский стиль Tilda */
    overflow: hidden;
    background: var(--color-gray-200);     /* placeholder пока грузится фото */
}

.port-item__link {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.port-item__link:focus-visible {
    outline: 2px solid var(--color-orange-500);
    outline-offset: 2px;
}

.port-item img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    transition: transform 350ms var(--easing);
    will-change: transform;
}

.port-item:hover img {
    transform: scale(1.05);
}

.portfolio__cta {
    display: flex;
    justify-content: flex-end;             /* прижат вправо, как на Tilda */
    margin-top: 36px;
}

.portfolio__cta-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--color-gray-900);
    font-size: 17px;
    font-weight: 400;
    text-decoration: none;
    transition: color var(--duration-fast) var(--easing),
                gap var(--duration-fast) var(--easing);
}

.portfolio__cta-link:hover,
.portfolio__cta-link:focus-visible {
    color: var(--color-orange-500);
    gap: 18px;
}

.portfolio__cta-arrow {
    flex-shrink: 0;
    transition: transform var(--duration-fast) var(--easing);
}

.portfolio__cta-link:hover .portfolio__cta-arrow,
.portfolio__cta-link:focus-visible .portfolio__cta-arrow {
    transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
    .port-item img { transition: none; }
    .port-item:hover img { transform: none; }
    .portfolio__cta-link,
    .portfolio__cta-arrow { transition: none; }
}

/* Header portfolio: margin-bottom ужат, секция компактнее */
.portfolio .section__header {
    margin-bottom: 28px;
}

.portfolio.section {
    padding-top: 48px;
    padding-bottom: 48px;
}

@media (max-width: 768px) {
    .portfolio__cta {
        justify-content: center;
        margin-top: 24px;
    }
    .portfolio__cta-link {
        font-size: 16px;
    }
}

/* =========================================================
   === CLIENTS === «Нам доверяют» 1:1 с Tilda:
   15 логотипов сеткой 5×3 с тонкими линиями между ячейками.
   Линии = 1px gap + светло-серый фон контейнера + белые ячейки.
   Mobile-first: 2 col → 3 col (≥640px) → 5 col (≥1024px).
   ========================================================= */

.clients__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: #DCDCDC;               /* цвет внутренних линий */
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1080px;                 /* блок уже контейнера — уже и плотнее */
}

@media (min-width: 640px) {
    .clients__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .clients__grid { grid-template-columns: repeat(5, 1fr); }
}

.client {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    min-height: 88px;
    padding: 10px 24px;
}

.client img {
    max-width: 100%;
    max-height: 54px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 200ms var(--easing);
}

.client:hover img {
    transform: scale(1.04);
}

@media (max-width: 768px) {
    .client {
        min-height: 96px;
        padding: 14px 18px;
    }
    .client img {
        max-height: 56px;
    }
}

/* =========================================================
   === CONTACTS === 1:1 с Tilda-исходником (rec2094614161).
   Full-bleed двухколоночный блок:
     – слева: заголовок 40-48px + сетка 2×2 контактов
     – справа: Яндекс-карта, упирается в правый край viewport
       + плавающая pill-кнопка «Открыть в Яндекс Картах»
   Фон — светлый тёплый (rgba(239,239,239,0.57) в Tilda). На mobile — стек.
   ========================================================= */

.contacts {
    position: relative;
    background: #F2F2F2;              /* ~ rgba(239,239,239,0.57) over white */
    overflow: hidden;
    padding: 0;
}

.contacts__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: stretch;
    min-height: 320px;                 /* ужимаем высоту — плотнее под Tilda */
}

.contacts__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    /* Левый отступ = полгуттер viewport до контейнера + паддинг контейнера */
    padding-left: max(var(--container-padding), calc((100vw - var(--container-max)) / 2 + var(--container-padding)));
    padding-top: 36px;
    padding-bottom: 36px;
    padding-right: 0;
    min-width: 0;
    max-width: 580px;
}

.contacts__title {
    font-size: clamp(24px, 2.5vw, 34px);
    font-weight: 800;
    line-height: 1.15;
    color: #0A0A0A;
    text-align: left;
    margin: 0;
    letter-spacing: -0.01em;
    max-width: 480px;
}

.contacts__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 28px;
}

.contact {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.contact__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-top: 2px;
    object-fit: contain;
}

.contact__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.contact__label {
    font-size: 15px;
    font-weight: 400;
    color: #9B9B9B;                    /* средний серый — как на Tilda */
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.3;
}

.contact__value {
    font-size: 14px;
    font-weight: 400;
    color: #2B2B2B;                    /* почти-чёрный */
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-decoration: none;
    transition: color var(--duration-fast) var(--easing);
}

a.contact__value:hover,
a.contact__value:focus-visible {
    color: var(--color-orange-500);
}

/* === Яндекс-карта (bleed вправо) === */
.contacts__map {
    position: relative;
    width: 100%;
    min-height: 320px;
    height: 100%;
    background: #eef2f5;
    overflow: hidden;
}

.contacts__map-frame {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 0;
    margin: 0;
    padding: 0;
}

.contacts__map-cta {
    position: absolute;
    left: 24px;
    bottom: 28px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    background: #FFFFFF;
    color: #2B2B2B;
    font-size: 15px;
    font-weight: var(--weight-semibold);
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
    transition: transform var(--duration-fast) var(--easing),
                background var(--duration-fast) var(--easing),
                color var(--duration-fast) var(--easing),
                box-shadow var(--duration-fast) var(--easing);
    z-index: 2;
}

.contacts__map-cta:hover,
.contacts__map-cta:focus-visible {
    background: var(--color-orange-500);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255, 103, 21, 0.35);
}

.contacts__map-cta-icon path {
    transition: fill var(--duration-fast) var(--easing);
}

.contacts__map-cta:hover .contacts__map-cta-icon path,
.contacts__map-cta:focus-visible .contacts__map-cta-icon path {
    fill: #FFFFFF;
}

/* Tablet (≤ 1100px) — чуть компактнее, Tilda-пропорции */
@media (max-width: 1100px) {
    .contacts__inner {
        gap: 32px;
        min-height: 360px;
    }

    .contacts__map,
    .contacts__map-frame {
        min-height: 360px;
    }

    .contacts__body {
        gap: 24px;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .contacts__grid {
        gap: 20px 24px;
    }
}

/* Mobile (≤ 768px) — стек: контакты сверху, карта снизу, без bleed */
@media (max-width: 768px) {
    .contacts__inner {
        grid-template-columns: 1fr;
        gap: 0;
        min-height: 0;
    }

    .contacts__body {
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
        padding-top: 48px;
        padding-bottom: 40px;
        max-width: none;
        gap: 28px;
    }

    .contacts__title {
        font-size: 28px;
    }

    .contacts__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contacts__map,
    .contacts__map-frame {
        min-height: 340px;
    }

    .contact__icon {
        width: 34px;
        height: 34px;
    }
}

@media (max-width: 480px) {
    .contacts__title {
        font-size: 24px;
    }

    .contacts__map,
    .contacts__map-frame {
        min-height: 280px;
    }

    .contacts__map-cta {
        left: 14px;
        bottom: 16px;
        padding: 10px 14px;
        font-size: 13px;
    }
}

/* =========================================================
   === FOOTER === 1:1 с Tilda-оригиналом (rec2101499191).
   3 колонки на десктопе:
     Col 1: логотип MAINCRANE + © + «Разработано в Lima Digital Agency»
     Col 2: телефон + 2 мессенджер-иконки / Политика / кнопка «Заказать диагностику»
     Col 3: кнопка «Получить коммерческое предложение» / «Заявка на аварийный выезд»
   Фон #383838, кнопки #FF6715 с flash-анимацией (data-animate-btn-effect="st1" в Tilda).
   ========================================================= */

.site-footer {
    position: relative;
    background: #2B2B2B;
    color: #ffffff;
    padding: 20px 0;                    /* Tilda: ~20px top/bottom, total 180px */
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.1fr) minmax(420px, 1.35fr);
    gap: 40px;
    align-items: stretch;
    min-height: 140px;                  /* 140 + 2*20 padding = 180px */
}

.site-footer a {
    transition: color var(--duration-fast) var(--easing),
                background var(--duration-fast) var(--easing),
                opacity var(--duration-fast) var(--easing);
}

.site-footer__col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* --- Колонка 1: логотип + копирайт + агентство --- */
.site-footer__col--brand {
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 10px;
}

.site-footer__logo {
    display: inline-flex;
    line-height: 0;
    flex-shrink: 0;
}

.site-footer__logo img {
    width: 170px;
    height: auto;
    max-height: 78px;
    object-fit: contain;
    transition: opacity var(--duration-fast) var(--easing);
}

.site-footer__logo:hover img,
.site-footer__logo:focus-visible img {
    opacity: 0.88;
}

.site-footer__copy {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.01em;
}

.site-footer__agency-line {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
}

.site-footer__agency {
    color: #ffffff;
    font-weight: var(--weight-semibold);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    padding-bottom: 1px;
}

.site-footer__agency:hover,
.site-footer__agency:focus-visible {
    color: var(--color-orange-500);
    border-bottom-color: var(--color-orange-500);
}

/* --- Колонка 2: контакт + политика + кнопка диагностики --- */
.site-footer__col--contact {
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    padding: 4px 0;
}

/* Кнопка «Заказать диагностику» прижимается к низу колонки */
.site-footer__col--contact .site-footer__cta--diag {
    margin-top: auto;
}

.site-footer__phone-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.site-footer__phone {
    font-size: 21px;
    font-weight: var(--weight-semibold);
    color: #ffffff;
    letter-spacing: 0.01em;
    text-decoration: none;
    line-height: 1;
}

.site-footer__phone:hover,
.site-footer__phone:focus-visible {
    color: var(--color-orange-500);
}

.site-footer__messengers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.site-footer__msg {
    display: inline-flex;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    line-height: 0;
}

.site-footer__msg svg {
    display: block;
    width: 100%;
    height: 100%;
}

.site-footer__msg:hover,
.site-footer__msg:focus-visible {
    opacity: 0.85;
    transform: translateY(-1px);
}

.site-footer__policy {
    font-size: 15px;
    color: #ffffff;
    text-decoration: none;
    align-self: flex-start;
}

.site-footer__policy:hover,
.site-footer__policy:focus-visible {
    color: var(--color-orange-500);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Колонка 3: две широкие CTA-кнопки --- */
.site-footer__col--cta {
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
}

/* --- Общая CTA-кнопка футера (оранжевая, flash animation) --- */
.site-footer__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;                   /* Tilda: 50px — чуть ужимаем под 180px */
    padding: 10px 20px;
    background: var(--color-orange-500);
    color: #ffffff;
    font-size: 15px;
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
}

.site-footer__cta > span {
    position: relative;
    z-index: 2;
}

.site-footer__cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 70%
    );
    transform: translateX(-120%);
    animation: mks-footer-cta-shine 3s linear infinite;
    pointer-events: none;
}

.site-footer__cta:hover,
.site-footer__cta:focus-visible {
    background: var(--color-orange-600);
    color: #ffffff;
}

.site-footer__cta:active {
    background: var(--color-orange-700);
}

@keyframes mks-footer-cta-shine {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
    .site-footer__cta::before {
        animation: none;
        display: none;
    }
}

/* CTA в колонке 2 ("Заказать диагностику") — чуть уже */
.site-footer__cta--diag {
    min-width: 260px;
    max-width: 320px;
    align-self: flex-start;
}

/* CTA в колонке 3 ("Получить КП" и "Аварийный выезд") — широкие, на всю ширину колонки */
.site-footer__cta--wide {
    width: 100%;
}

/* --- Планшет (≤ 1100px): брендовая колонка центрирована, CTA переезжают вниз --- */
@media (max-width: 1100px) {
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
        row-gap: 32px;
    }

    .site-footer__col--cta {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: stretch;
    }

    .site-footer__col--cta .site-footer__cta--wide {
        flex: 1;
    }
}

/* --- Mobile (≤ 768px): одна колонка, всё центрировано --- */
@media (max-width: 768px) {
    .site-footer {
        padding: 28px 0;
    }

    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .site-footer__col--contact {
        align-items: center;
        text-align: center;
    }

    .site-footer__phone-row {
        justify-content: center;
    }

    .site-footer__policy {
        align-self: center;
    }

    .site-footer__cta--diag {
        align-self: stretch;
        max-width: none;
    }

    .site-footer__col--cta {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .site-footer__phone {
        font-size: 20px;
    }

    .site-footer__cta {
        font-size: 15px;
        padding: 10px 16px;
    }
}

/* =========================================================
   === STICKY MOBILE CALL BAR === (ТЗ §11.2)
   Постоянно видимая кнопка «Позвонить инженеру» внизу экрана
   на mobile (< 768px). На десктопе — скрыта.
   ========================================================= */

.mobile-call-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    display: none;                    /* mobile-only — включаем в media-query */
    align-items: center;
    justify-content: center;
    gap: var(--space-2);              /* 8px */
    padding: 0 var(--space-4);
    /* Уважаем «нижний край» iOS Safari (home-indicator) */
    padding-bottom: env(safe-area-inset-bottom, 0);
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    background: var(--color-orange-500);
    color: #FFFFFF;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.18);
    transition: background var(--duration-fast) var(--easing);
}

.mobile-call-bar:hover,
.mobile-call-bar:focus-visible {
    background: var(--color-orange-600);
    color: #FFFFFF;
}

.mobile-call-bar:active {
    background: var(--color-orange-700);
}

.mobile-call-bar svg {
    flex-shrink: 0;
}

/* Включаем sticky-бар и резервируем место под него только на mobile */
@media (max-width: 767px) {
    .mobile-call-bar {
        display: flex;
    }

    /* Прячем липкую кнопку, когда открыто полноэкранное mobile-меню,
       чтобы не перекрывало пункты навигации */
    body:has(.mobile-menu--open) .mobile-call-bar {
        display: none;
    }

    body {
        /* 56px бар + safe-area iOS */
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }
}


/* =========================================================
   === WHY === Почему нас выбирают (ТЗ §1.3, §9 #4)
   6 фото-карточек: полноразмерное фото-фон, тёмный градиент-
   overlay снизу, белая подпись внизу карточки. Mobile-first.
   ========================================================= */

.why.section,
.why.section--tight {
    padding-top: 32px;
    padding-bottom: 32px;
}

.why .section__header {
    margin-bottom: 20px;
}

.why__grid {
    display: grid;
    grid-template-columns: 1fr;            /* mobile-first: 1 col */
    gap: 12px;
}

@media (min-width: 640px) {
    .why__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .why__grid { grid-template-columns: repeat(3, 1fr); }
}

.why-card {
    position: relative;
    aspect-ratio: 8 / 7;                   /* чуть выше — ближе к оригиналу 4/3.5 */
    border-radius: 0;
    overflow: hidden;
    isolation: isolate;                    /* локальный stacking-контекст */
    background: var(--color-gray-200);     /* fallback пока грузится фото */
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-normal) var(--easing);
}

.why-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms var(--easing);
    will-change: transform;
}

.why-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
    pointer-events: none;
    transition: background var(--duration-normal) var(--easing);
}

.why-card:hover .why-card__overlay,
.why-card:focus-within .why-card__overlay {
    background: rgba(0, 0, 0, 0.62);
}

.why-card__title {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 19px;
    font-weight: var(--weight-bold);
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.why-card:hover {
    box-shadow: var(--shadow-lg);
}

.why-card:hover .why-card__img {
    transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
    .why-card__img,
    .why-card:hover .why-card__img {
        transition: none;
        transform: none;
    }
}

/* --- Mobile (≤ 640px) --- */
@media (max-width: 640px) {
    .why-card__title {
        font-size: 16px;
        padding: 20px;
    }
}

/* =========================================================
   === GUARANTEES === «98% становятся постоянными» (ТЗ §1.3, §9)
   1:1 с оригиналом Tilda: 5 узких плиток в одном ряду на десктопе.
   Иконка-картинка ~64px сверху + длинный тонкий серый текст.
   Без карточек, рамок, теней и hover — статика на белом.
   Mobile-first: 2 col → 3 col (≥640px) → 5 col (≥1024px).
   ========================================================= */

.guarantees.section {
    background: #F5F5F7;
}

.guarantees__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);   /* mobile baseline */
    gap: var(--space-6);                     /* 24px */
}

@media (min-width: 640px) {
    .guarantees__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .guarantees__grid { grid-template-columns: repeat(5, 1fr); }
}

.guarantee {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;                               /* между иконкой и текстом */
    padding: var(--space-4);                 /* 16px */
    /* Намеренно без bg/border/shadow — лёгкий статичный визуальный вес */
    background: transparent;
    border: 0;
    box-shadow: none;
}

.guarantee__icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    margin: 0 auto;
    display: block;
    /* Без круглой плашки — иконка-картинка лежит «как есть», как в оригинале */
    background: transparent;
    border-radius: 0;
}

.guarantee__title {
    font-size: 13px;
    font-weight: var(--weight-regular);      /* 400 */
    line-height: 1.4;
    color: var(--color-gray-700);
    text-align: center;
    margin: 0;
    max-width: 200px;                        /* красивый перенос длинного текста */
}

/* =========================================================
   === LEGAL PAGE === (Privacy stub, любые юридические страницы)
   Минимальная типографика для длинных текстовых страниц.
   ========================================================= */

.legal-page__inner {
    max-width: 720px;                      /* ≈ 65ch для читаемости */
}

.legal-page__header {
    margin-bottom: var(--space-8);         /* 32px */
}

.legal-page__title {
    font-size: var(--text-4xl);            /* 36px */
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    color: var(--color-gray-900);
    margin: 0;
}

.legal-page__body p {
    font-size: var(--text-base);           /* 16px */
    line-height: var(--leading-relaxed);   /* 1.5 */
    color: var(--color-gray-700);
    margin-bottom: var(--space-4);         /* 16px */
}

.legal-page__body a {
    color: var(--color-orange-600);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--duration-fast) var(--easing);
}

.legal-page__body a:hover,
.legal-page__body a:focus-visible {
    color: var(--color-orange-700);
}

@media (max-width: 768px) {
    .legal-page__title { font-size: var(--text-3xl); } /* 30px */
}

/* =========================================================
   USLUGI CATALOG — шаблон page-templates/tpl-uslugi-catalog.php
   Витрина /uslugi/: hero + intro + grid 2×4 + CTA «Получить расчет».
   1:1 с Tilda-референсом, нативные CSS Grid / Flexbox.
   ========================================================= */

:root {
    --uslugi-bg-dark:   #1A0F0B;   /* тёмно-коричневый фон CTA — из Tilda */
    --uslugi-card-h:    clamp(260px, 40vw, 360px);
}

.uslugi-catalog { background: #FFFFFF; }

/* --- 1. HERO ------------------------------------------------ */

.uslugi-hero {
    position: relative;
    width: 100%;
    min-height: 320px;                          /* компактный hero — по содержимому */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    padding-top: 96px;                          /* clear sticky header */
    padding-bottom: var(--space-8);             /* 32px */
    background-color: var(--color-gray-900);    /* fallback */
    color: #FFFFFF;
}

.uslugi-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.uslugi-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.50) 100%);
    pointer-events: none;
}

.uslugi-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1040px;                          /* широкая колонка слева, 1:1 с Tilda */
    width: 100%;
    margin: 0;                                  /* прижато к левому краю контейнера */
    text-align: left;
}

.uslugi-hero__breadcrumbs {
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}

.uslugi-hero__crumbs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: rgba(255, 255, 255, 0.7);
}

.uslugi-hero__crumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.uslugi-hero__crumb + .uslugi-hero__crumb::before {
    content: ">";
    color: rgba(255, 255, 255, 0.5);
    margin-right: 0;
}

.uslugi-hero__crumb-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color var(--duration-fast) var(--easing);
}

.uslugi-hero__crumb-link:hover,
.uslugi-hero__crumb-link:focus-visible {
    color: #FFFFFF;
    text-decoration: underline;
}

.uslugi-hero__crumb--current {
    color: #FFFFFF;
}

.uslugi-hero__title {
    font-size: clamp(48px, 7vw, 80px);
    font-weight: var(--weight-bold);
    line-height: 1.05;
    color: #FFFFFF;
    margin: 0 0 var(--space-6) 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.30);
    letter-spacing: -0.01em;
}

.uslugi-hero__lead {
    font-size: 20px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.95);
    max-width: 1000px;                          /* шире, под длинную 2-ю строку 1:1 с Tilda */
    margin: 0 0 var(--space-8) 0;
}

/* Каждая строка lead — явный блок, переносы 1:1 с Tilda */
.uslugi-hero__lead-line {
    display: block;
}

.uslugi-hero__actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

@media (max-width: 960px) {
    .uslugi-hero { min-height: 280px; padding-top: 88px; }
}

@media (max-width: 768px) {
    .uslugi-hero {
        min-height: 240px;
        max-height: 380px;
        padding-top: 80px;
        padding-bottom: var(--space-6);
        text-align: center;
    }
    .uslugi-hero__inner { text-align: center; }
    .uslugi-hero__crumbs { justify-content: center; }
    .uslugi-hero__lead { font-size: var(--text-base); }
    .uslugi-hero__overlay {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.65) 100%);
    }
    .uslugi-hero__actions { justify-content: center; }
}

/* --- 2. INTRO (Lorem ipsum заглушка) ----------------------- */

.uslugi-intro {
    background: #FFFFFF;
    padding: var(--space-16) 0;
}

.uslugi-intro__inner {
    max-width: none;                            /* во всю ширину контейнера = ширина сетки карточек */
}

.uslugi-intro__text {
    font-size: 20px;
    line-height: 1.55;
    color: var(--color-gray-900);
    text-align: left;
    margin: 0;
}

@media (max-width: 768px) {
    .uslugi-intro { padding: var(--space-12) 0; }
    .uslugi-intro__text { font-size: 16px; }
}

/* --- 3. GRID 2×4 ------------------------------------------- */

.uslugi-grid-section {
    background: #FFFFFF;
    padding: 0 0 var(--space-24) 0;
}

.uslugi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 768px) {
    .uslugi-grid { grid-template-columns: 1fr; gap: 16px; }
    .uslugi-grid-section { padding-bottom: var(--space-16); }
}

/* Card: aspect-ratio 2/1, фото-фон, overlay, H3 top-left, arrow bottom-right */
.usluga-card {
    position: relative;
    display: block;
    aspect-ratio: 2 / 1;
    min-height: 280px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background-color: var(--color-gray-800);    /* fallback */
    color: #FFFFFF;
    text-decoration: none;
    isolation: isolate;
    transition: transform var(--duration-normal) var(--easing),
                box-shadow var(--duration-normal) var(--easing);
}

.usluga-card:hover,
.usluga-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    outline: none;
}

.usluga-card__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform var(--duration-normal) var(--easing);
}

.usluga-card__bg--fallback {
    background-image: linear-gradient(135deg, var(--color-gray-800) 0%, var(--color-gray-900) 100%);
}

.usluga-card:hover .usluga-card__bg {
    transform: scale(1.04);
}

.usluga-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.55) 100%);
    transition: background var(--duration-normal) var(--easing);
    pointer-events: none;
}

.usluga-card:hover .usluga-card__overlay,
.usluga-card:focus-visible .usluga-card__overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.70) 100%);
}

.usluga-card__title {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    margin: 0;
    padding: 32px;
    max-width: calc(100% - 96px);               /* оставляем место под стрелку */
    font-size: var(--text-2xl);                 /* 24px */
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: #FFFFFF;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.40);
    text-wrap: balance;
}

.usluga-card__arrow {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--color-gray-900);
    transition: background var(--duration-fast) var(--easing),
                color var(--duration-fast) var(--easing),
                transform var(--duration-fast) var(--easing);
}

.usluga-card:hover .usluga-card__arrow,
.usluga-card:focus-visible .usluga-card__arrow {
    background: var(--color-orange-500);
    color: #FFFFFF;
    transform: translateX(3px);
}

@media (max-width: 768px) {
    .usluga-card { min-height: 220px; aspect-ratio: 16 / 9; }
    .usluga-card__title { font-size: var(--text-xl); padding: 20px; max-width: calc(100% - 72px); }
    .usluga-card__arrow { width: 44px; height: 44px; right: 16px; bottom: 16px; }
}

@media (max-width: 480px) {
    .usluga-card { min-height: 200px; }
    .usluga-card__title { font-size: 18px; padding: 16px; }
}

/* --- 4. CTA «Получить расчет» ------------------------------ */

.cta-raschet {
    background: var(--uslugi-bg-dark);
    color: #FFFFFF;
    padding: var(--space-24) 0;
    position: relative;
    overflow: hidden;
}

.cta-raschet__inner {
    max-width: 800px;
    text-align: center;
}

.cta-raschet__title {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    color: #FFFFFF;
    margin: 0 0 var(--space-4) 0;
    text-wrap: balance;
}

.cta-raschet__accent {
    font-size: clamp(22px, 3vw, 28px);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: var(--color-orange-500);
    margin: 0 0 var(--space-6) 0;
}

.cta-raschet__text {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: rgba(255, 255, 255, 0.9);
    max-width: 720px;
    margin: 0 auto var(--space-8) auto;
}

.cta-raschet__form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 720px;
    margin: 0 auto;
    align-items: stretch;
}

.cta-raschet__row {
    flex: 1 1 220px;
    min-width: 0;
}

.cta-raschet__input {
    width: 100%;
    height: 56px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.95);
    color: #111111;
    font-size: var(--text-base);
    line-height: 1.2;
    transition: background var(--duration-fast) var(--easing),
                outline var(--duration-fast) var(--easing);
}

.cta-raschet__input::placeholder {
    color: #888888;
    opacity: 1;
}

.cta-raschet__input:focus {
    background: #FFFFFF;
    outline: 2px solid var(--color-orange-500);
    outline-offset: 0;
}

.cta-raschet__submit {
    flex: 0 0 auto;
    height: 56px;
    white-space: nowrap;
}

.cta-raschet__consent {
    flex: 0 0 100%;
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin: var(--space-2) 0 0 0;
}

@media (max-width: 768px) {
    .cta-raschet { padding: var(--space-16) 0; }

    .cta-raschet__form {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .cta-raschet__row,
    .cta-raschet__submit {
        flex: 1 1 auto;
        width: 100%;
    }

    .cta-raschet__submit {
        max-width: none;
    }
}

@media (max-width: 480px) {
    .cta-raschet__title { font-size: 28px; }
    .cta-raschet__accent { font-size: 20px; }
}

/* ==========================================================
   USLUGA DETAIL
   Детальная страница услуги (шаблон tpl-usluga-detail.php).
   Повторяет Tilda-референс /uslugi_shablon (Диагностика), но на
   нативных токенах темы. НЕ пересекается с классами .uslugi-*
   из каталога услуг.
   ========================================================== */

/* --- 1. HERO (компактнее чем /uslugi) ---------------------- */

.usluga-detail__hero {
    position: relative;
    width: 100%;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    padding-top: 120px;
    padding-bottom: var(--space-16);
    background-color: var(--color-gray-900);
    color: #FFFFFF;
}

.usluga-detail__hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.usluga-detail__hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.60) 100%);
    pointer-events: none;
}

.usluga-detail__hero-inner {
    position: relative;
    z-index: 1;
    max-width: 900px;
    width: 100%;
    text-align: left;
}

.usluga-detail__breadcrumbs {
    margin-bottom: var(--space-6);
    font-size: var(--text-sm);
}

.usluga-detail__crumbs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: rgba(255, 255, 255, 0.7);
}

.usluga-detail__crumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.usluga-detail__crumb + .usluga-detail__crumb::before {
    content: ">";
    color: rgba(255, 255, 255, 0.5);
}

.usluga-detail__crumb-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color var(--duration-fast) var(--easing);
}

.usluga-detail__crumb-link:hover,
.usluga-detail__crumb-link:focus-visible {
    color: #FFFFFF;
    text-decoration: underline;
}

.usluga-detail__crumb--current {
    color: #FFFFFF;
}

.usluga-detail__hero-title {
    font-size: clamp(36px, 5.5vw, 56px);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: #FFFFFF;
    margin: 0 0 var(--space-6) 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.30);
    text-wrap: balance;
}

.usluga-detail__hero-lead {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: rgba(255, 255, 255, 0.95);
    max-width: 720px;
    margin: 0 0 var(--space-8) 0;
}

.usluga-detail__hero-actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

@media (max-width: 960px) {
    .usluga-detail__hero { min-height: 52vh; padding-top: 100px; }
}

@media (max-width: 768px) {
    .usluga-detail__hero {
        min-height: 60vh;
        max-height: 600px;
        padding-top: 88px;
        text-align: center;
    }
    .usluga-detail__hero-inner { text-align: center; }
    .usluga-detail__crumbs { justify-content: center; }
    .usluga-detail__hero-lead { font-size: var(--text-base); }
    .usluga-detail__hero-overlay {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.65) 100%);
    }
    .usluga-detail__hero-actions { justify-content: center; }
}

/* --- 2. TYPES (Виды работ) --------------------------------- */

.usluga-detail__types {
    background: #FFFFFF;
    padding: var(--space-24) 0;
}

.usluga-detail__types-inner {
    /* используем общий .container — ничего не переопределяем */
}

.usluga-detail__types-title {
    text-align: center;
    margin-bottom: var(--space-12);
}

.usluga-detail__types-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
}

.usluga-detail__type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-8) var(--space-6);
    background: #FFFFFF;
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-normal) var(--easing),
                box-shadow var(--duration-normal) var(--easing),
                border-color var(--duration-normal) var(--easing);
}

.usluga-detail__type-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-gray-200);
}

.usluga-detail__type-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: var(--color-orange-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-6);
    flex: 0 0 auto;
}

.usluga-detail__type-icon img {
    width: 44px;
    height: 44px;
    display: block;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.usluga-detail__type-text {
    margin: 0;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-gray-700);
}

.usluga-detail__type-text strong {
    color: var(--color-gray-900);
    font-weight: var(--weight-semibold);
}

@media (max-width: 768px) {
    .usluga-detail__types { padding: var(--space-16) 0; }
    .usluga-detail__types-grid { grid-template-columns: 1fr; gap: var(--space-4); }
    .usluga-detail__type-card  { padding: var(--space-6) var(--space-4); }
}

/* --- 3. CASES (На реальных производствах) ------------------ */

.usluga-detail__cases {
    background: var(--color-gray-900);
    color: #FFFFFF;
    padding: var(--space-24) 0;
}

.usluga-detail__cases-title {
    color: #FFFFFF;
    text-align: center;
    margin-bottom: var(--space-12);
}

.usluga-detail__cases-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
}

.usluga-detail__case {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    scroll-snap-align: start;
}

.usluga-detail__case-media {
    aspect-ratio: 16 / 10;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-gray-800);
}

.usluga-detail__case-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--duration-normal) var(--easing);
}

.usluga-detail__case:hover .usluga-detail__case-media img {
    transform: scale(1.04);
}

.usluga-detail__case-label {
    margin: 0;
    text-align: center;
    color: #FFFFFF;
    font-size: var(--text-base);
    line-height: var(--leading-snug);
}

/* На планшете: 2 карточки видно, остальные через scroll-snap.
   На мобиле: 1 карточка на viewport. */
@media (max-width: 960px) {
    .usluga-detail__cases-track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-padding-inline: var(--space-4);
        gap: var(--space-4);
        padding-bottom: var(--space-4);
    }
    .usluga-detail__case {
        flex: 0 0 calc((100% - var(--space-4)) / 2);
    }
}

@media (max-width: 560px) {
    .usluga-detail__cases { padding: var(--space-16) 0; }
    .usluga-detail__case {
        flex: 0 0 85%;
    }
}

/* --- 4. RESULTS (Результаты) ------------------------------- */

.usluga-detail__results {
    background: #FFFFFF;
    padding: var(--space-24) 0;
}

.usluga-detail__results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: stretch;
}

.usluga-detail__results-media {
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-gray-100);
    min-height: 320px;
}

.usluga-detail__results-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.usluga-detail__results-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.usluga-detail__results-title {
    position: relative;
    display: inline-block;
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: var(--color-gray-900);
    margin: 0 0 var(--space-4) 0;
    padding-bottom: var(--space-2);
}

.usluga-detail__results-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 3px;
    background: var(--color-orange-500);
    border-radius: var(--radius-sm);
}

.usluga-detail__results-subtitle {
    margin: 0 0 var(--space-6) 0;
    font-size: var(--text-lg);
    color: var(--color-gray-700);
    line-height: var(--leading-snug);
}

.usluga-detail__results-list {
    list-style: none;
    margin: 0 0 var(--space-6) 0;
    padding: 0;
    counter-reset: mks-result;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.usluga-detail__results-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.usluga-detail__results-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-orange-500);
    color: #FFFFFF;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: 1;
}

.usluga-detail__results-text {
    flex: 1 1 auto;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-gray-800);
    padding-top: 4px;   /* визуально выравниваем по цифре */
}

.usluga-detail__results-footer {
    margin: var(--space-4) 0 0 0;
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    line-height: var(--leading-relaxed);
}

@media (max-width: 960px) {
    .usluga-detail__results-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    .usluga-detail__results-media {
        min-height: 240px;
        max-height: 360px;
    }
}

@media (max-width: 480px) {
    .usluga-detail__results { padding: var(--space-16) 0; }
    .usluga-detail__results-title { font-size: var(--text-xl); }
    .usluga-detail__results-subtitle { font-size: var(--text-base); }
    .usluga-detail__results-num {
        width: 28px;
        height: 28px;
        font-size: var(--text-xs);
    }
}

/* =========================================================
   NASHI RABOTI — шаблон page-templates/tpl-nashi-raboti.php
   Витрина /nashi_raboti/: hero (60vh) + grid 3×3 + пагинация + CTA.
   Переиспользует .cta-raschet из USLUGI-секции — не дублируем.
   Брейкпоинты: 960 (планшет 2 колонки), 560 (мобилка 1 колонка).
   ========================================================= */

.nashi-raboti { background: #FFFFFF; }

/* --- 1. HERO ------------------------------------------------ */

.raboti-hero {
    position: relative;
    width: 100%;
    min-height: 60vh;                           /* короче /uslugi (70vh) по ТЗ */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    padding-top: 120px;                         /* clear sticky header */
    padding-bottom: var(--space-16);
    background-color: var(--color-gray-900);    /* fallback */
    color: #FFFFFF;
}

.raboti-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.raboti-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.50) 100%);
    pointer-events: none;
}

.raboti-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 900px;
    width: 100%;
    text-align: left;
}

.raboti-hero__breadcrumbs {
    margin-bottom: var(--space-6);
    font-size: var(--text-sm);
}

.raboti-hero__crumbs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: rgba(255, 255, 255, 0.7);
}

.raboti-hero__crumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.raboti-hero__crumb + .raboti-hero__crumb::before {
    content: ">";
    color: rgba(255, 255, 255, 0.5);
    margin-right: 0;
}

.raboti-hero__crumb-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color var(--duration-fast) var(--easing);
}

.raboti-hero__crumb-link:hover,
.raboti-hero__crumb-link:focus-visible {
    color: #FFFFFF;
    text-decoration: underline;
}

.raboti-hero__crumb--current {
    color: #FFFFFF;
}

.raboti-hero__title {
    font-size: clamp(40px, 6vw, 64px);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: #FFFFFF;
    margin: 0 0 var(--space-6) 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.30);
    text-wrap: balance;
}

.raboti-hero__lead {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: rgba(255, 255, 255, 0.95);
    max-width: 720px;
    margin: 0 0 var(--space-8) 0;
}

.raboti-hero__actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

@media (max-width: 960px) {
    .raboti-hero { min-height: 55vh; padding-top: 100px; }
}

@media (max-width: 768px) {
    .raboti-hero {
        min-height: 60vh;
        max-height: 600px;
        padding-top: 88px;
        text-align: center;
    }
    .raboti-hero__inner { text-align: center; }
    .raboti-hero__crumbs { justify-content: center; }
    .raboti-hero__lead { font-size: var(--text-base); }
    .raboti-hero__overlay {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.65) 100%);
    }
    .raboti-hero__actions { justify-content: center; }
}

/* --- 2. GRID 3×3 -------------------------------------------- */

.raboti-grid-section {
    background: #FFFFFF;
    padding: 80px 0;
}

.raboti-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

@media (max-width: 960px) {
    .raboti-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 560px) {
    .raboti-grid { grid-template-columns: 1fr; gap: 20px; }
    .raboti-grid-section { padding: var(--space-16) 0; }
}

/* Карточка работы: фото 4:3 сверху + дата + описание снизу */
.raboti-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    text-decoration: none;
    color: inherit;
    transition: transform var(--duration-normal) var(--easing);
}

.raboti-card:hover,
.raboti-card:focus-visible {
    transform: translateY(-3px);
    outline: none;
}

.raboti-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 2px;
    background-color: var(--color-gray-800);    /* fallback */
    isolation: isolate;
}

.raboti-card__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform var(--duration-normal) var(--easing);
}

.raboti-card__image--fallback {
    background-image: linear-gradient(135deg, var(--color-gray-700) 0%, var(--color-gray-900) 100%);
}

.raboti-card:hover .raboti-card__image,
.raboti-card:focus-visible .raboti-card__image {
    transform: scale(1.04);
}

.raboti-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.00);
    transition: background var(--duration-normal) var(--easing);
    pointer-events: none;
}

.raboti-card:hover .raboti-card__overlay,
.raboti-card:focus-visible .raboti-card__overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.70) 100%);
}

/* Название всегда видно поверх фото (1:1 с Tilda) */
.raboti-card__title {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: 20px 24px;
    max-width: calc(100% - 80px);               /* оставляем место под стрелку */
    font-size: var(--text-xl);                  /* 20px */
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: #FFFFFF;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

.raboti-card__arrow {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--color-gray-900);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--easing),
                background var(--duration-fast) var(--easing),
                color var(--duration-fast) var(--easing),
                transform var(--duration-fast) var(--easing);
}

.raboti-card:hover .raboti-card__arrow,
.raboti-card:focus-visible .raboti-card__arrow {
    opacity: 1;
    background: var(--color-orange-500);
    color: #FFFFFF;
    transform: translateX(3px);
}

/* Дата и описание (под фото, вне изображения) */
.raboti-card__date {
    display: block;
    font-size: 14px;
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    color: var(--color-gray-400);
    margin: 0;
}

.raboti-card__descr {
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-gray-700);
    margin: 0;
}

@media (max-width: 560px) {
    .raboti-card__title { font-size: 18px; padding: 16px; max-width: calc(100% - 72px); }
    .raboti-card__arrow { width: 44px; height: 44px; right: 16px; bottom: 16px; }
}

/* ============================================================
 *  RABOTA DETAIL — детальная страница кейса /nashi_raboti/{slug}
 *  Визуал 1:1 с Tilda /portfolio_shablon.
 *  Переиспользует .cta-raschet.
 * ============================================================ */

.rabota-detail { background: #FFFFFF; }

/* --- Hero: dark bg-image + overlay --- */
.rabota-hero {
    position: relative;
    min-height: 420px;
    padding: var(--space-20) 0 var(--space-16);
    color: #FFFFFF;
    overflow: hidden;
}
.rabota-hero__bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.rabota-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0.60) 100%);
    z-index: 1;
}
.rabota-hero__inner { position: relative; z-index: 2; }

.rabota-hero__breadcrumbs { margin-bottom: var(--space-6); }
.rabota-hero__crumbs {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.75);
}
.rabota-hero__crumb { display: inline-flex; align-items: center; }
.rabota-hero__crumb + .rabota-hero__crumb::before {
    content: '\2022'; padding: 0 var(--space-2);
    color: rgba(255, 255, 255, 0.5);
}
.rabota-hero__crumb a { color: rgba(255, 255, 255, 0.75); transition: color var(--duration-fast) var(--easing); }
.rabota-hero__crumb a:hover { color: var(--color-orange-300); }
.rabota-hero__crumb--current { color: #FFFFFF; }

.rabota-hero__title {
    margin: 0 0 var(--space-4);
    font-size: 48px;
    font-weight: var(--weight-bold);
    line-height: 1.15;
    color: #FFFFFF;
}
.rabota-hero__subtitle {
    margin: 0 0 var(--space-8);
    font-size: var(--text-lg);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    max-width: 820px;
}
.rabota-hero__actions { margin-top: var(--space-2); }

/* --- О проекте --- */
.rabota-about { padding: var(--space-16) 0 var(--space-10); }
.rabota-about__inner { max-width: 1160px; margin: 0 auto; }
.rabota-about__title {
    margin: 0 0 var(--space-6);
    font-size: 36px;
    font-weight: var(--weight-bold);
    color: #000000;
    line-height: 1.23;
}
.rabota-about__body { max-width: 100%; }
.rabota-about__para {
    margin: 0 0 var(--space-4);
    font-size: 18px;
    line-height: 1.55;
    color: #000000;
}
.rabota-about__para:last-child { margin-bottom: 0; }

/* --- Этапы реализации — таблица с оранжевым хедером --- */
.rabota-stages { padding: var(--space-10) 0 var(--space-12); }
.rabota-stages__inner { max-width: 1160px; margin: 0 auto; }
.rabota-stages__title {
    margin: 0 0 var(--space-8);
    font-size: 36px;
    font-weight: var(--weight-bold);
    color: #000000;
    line-height: 1.23;
}
.rabota-stages__table-wrap { overflow-x: auto; }
.rabota-stages__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 6px;
    overflow: hidden;
    font-family: 'Montserrat', Arial, sans-serif;
}
.rabota-stages__th {
    background: var(--color-orange-500);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: var(--weight-bold);
    text-align: left;
    padding: 12px 18px;
    line-height: 1.35;
    border: none;
}
.rabota-stages__th--num { width: 56px; text-align: center; }
.rabota-stages__th--name { width: 30%; }
.rabota-stages__tr { background: #FFFFFF; }
.rabota-stages__tr:nth-child(even) { background: #F7F7F7; }
.rabota-stages__td {
    padding: 14px 18px;
    font-size: 15px;
    line-height: 1.5;
    color: #000000;
    vertical-align: top;
    border: none;
}
.rabota-stages__td--num {
    width: 56px;
    text-align: center;
    font-weight: var(--weight-semibold);
    color: var(--color-gray-700);
}
.rabota-stages__td--name { font-weight: var(--weight-medium); }

/* --- Галерея 3×N --- */
.rabota-gallery { padding: var(--space-10) 0 var(--space-12); }
.rabota-gallery__inner { max-width: 1160px; margin: 0 auto; }
.rabota-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.rabota-gallery__item {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--color-gray-200);
    border-radius: 2px;
}
.rabota-gallery__image {
    display: block; width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--easing);
}
.rabota-gallery__item:hover .rabota-gallery__image { transform: scale(1.04); }

/* --- Результат --- */
.rabota-result { padding: var(--space-12) 0 var(--space-8); }
.rabota-result__inner { max-width: 1160px; margin: 0 auto; }
.rabota-result__title {
    margin: 0 0 var(--space-8);
    font-size: 36px;
    font-weight: var(--weight-bold);
    color: #000000;
    line-height: 1.23;
}
.rabota-result__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.rabota-result__item {
    display: flex;
    align-items: flex-start;
    gap: 25px;
}
.rabota-result__num {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-orange-500);
    color: #FFFFFF;
    font-size: 20px;
    font-weight: var(--weight-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.rabota-result__body { flex: 1 1 auto; padding-top: 6px; }
.rabota-result__text {
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
    color: #000000;
}
.rabota-result__sub {
    margin: var(--space-3) 0 0;
    padding: 0 0 0 20px;
    list-style: disc;
}
.rabota-result__sub-item {
    font-size: 18px;
    line-height: 1.55;
    color: #000000;
    margin-bottom: 4px;
}

/* --- Преимущества --- */
.rabota-benefits { padding: var(--space-10) 0 var(--space-12); }
.rabota-benefits__inner { max-width: 1160px; margin: 0 auto; }
.rabota-benefits__title {
    margin: 0 0 var(--space-10);
    font-size: 36px;
    font-weight: var(--weight-bold);
    color: #000000;
    line-height: 1.23;
}
.rabota-benefits__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.rabota-benefits__item {
    display: flex;
    align-items: flex-start;
    gap: 25px;
}
.rabota-benefits__num {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-orange-500);
    color: #FFFFFF;
    font-size: 20px;
    font-weight: var(--weight-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.rabota-benefits__body { flex: 1 1 auto; padding-top: 4px; }
.rabota-benefits__name {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: var(--weight-bold);
    color: #000000;
    line-height: 1.35;
}
.rabota-benefits__descr {
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
    color: #000000;
}

/* --- Вывод --- */
.rabota-conclusion { padding: var(--space-12) 0 var(--space-16); background: #FFFFFF; }
.rabota-conclusion__inner { max-width: 1160px; margin: 0 auto; }
.rabota-conclusion__title {
    margin: 0 0 var(--space-6);
    font-size: 36px;
    font-weight: var(--weight-bold);
    color: #000000;
    line-height: 1.23;
}
.rabota-conclusion__para {
    margin: 0 0 var(--space-4);
    font-size: 18px;
    line-height: 1.55;
    color: #000000;
}
.rabota-conclusion__para:last-child { margin-bottom: 0; }
.rabota-conclusion__para--bold { font-weight: var(--weight-bold); }

/* --- Responsive --- */
@media (max-width: 960px) {
    .rabota-hero { padding: var(--space-16) 0 var(--space-12); min-height: 360px; }
    .rabota-hero__title { font-size: 36px; }
    .rabota-about__title,
    .rabota-stages__title,
    .rabota-result__title,
    .rabota-benefits__title,
    .rabota-conclusion__title { font-size: 30px; }
    .rabota-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 640px) {
    .rabota-hero { padding: var(--space-12) 0 var(--space-10); min-height: 320px; }
    .rabota-hero__title { font-size: 28px; }
    .rabota-hero__subtitle { font-size: var(--text-base); margin-bottom: var(--space-6); }
    .rabota-about,
    .rabota-stages,
    .rabota-gallery,
    .rabota-result,
    .rabota-benefits,
    .rabota-conclusion { padding: var(--space-10) 0; }
    .rabota-about__title,
    .rabota-stages__title,
    .rabota-result__title,
    .rabota-benefits__title,
    .rabota-conclusion__title { font-size: 26px; }
    .rabota-result__num,
    .rabota-benefits__num { flex-basis: 32px; width: 32px; height: 32px; font-size: 16px; }
    .rabota-result__text,
    .rabota-result__sub-item,
    .rabota-benefits__descr { font-size: 16px; }
    .rabota-stages__th,
    .rabota-stages__td { padding: 12px 14px; font-size: 14px; }
    .rabota-stages__th--num,
    .rabota-stages__td--num { width: 40px; padding-left: 10px; padding-right: 10px; }
    .rabota-gallery__grid { grid-template-columns: 1fr; gap: 8px; }
    .rabota-about__para,
    .rabota-conclusion__para { font-size: 16px; }
}

/* =========================================================
   COMPANY PAGE (/company)
   ========================================================= */

/* --- Breadcrumbs --- */
.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-gray-400);
}
.breadcrumbs li + li::before {
    content: "›";
    margin-right: 8px;
    color: var(--color-gray-400);
}
.breadcrumbs a {
    color: var(--color-gray-400);
    text-decoration: none;
    transition: color .15s ease;
}
.breadcrumbs a:hover { color: var(--color-orange-500); }
.breadcrumbs [aria-current="page"] { color: var(--color-gray-200); }

/* --- Hero --- */
.company-hero {
    position: relative;
    padding: calc(var(--space-24) + 48px) 0 var(--space-24);
    color: #fff;
    background: var(--color-gray-900);
    overflow: hidden;
    isolation: isolate;
}
.company-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .35;
    z-index: -1;
}
.company-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,.85) 100%);
    z-index: -1;
}
.company-hero__inner .breadcrumbs { margin-bottom: var(--space-12); }
.company-hero__brand {
    font-size: var(--text-sm);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-orange-400);
    margin: 0 0 var(--space-4);
    font-weight: var(--weight-semibold);
}
.company-hero__title {
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: #fff;
    max-width: 900px;
    margin: 0 0 var(--space-8);
}
.company-hero__cta { margin-top: var(--space-4); }

@media (min-width: 900px) {
    .company-hero__title { font-size: var(--text-5xl); }
}
@media (max-width: 640px) {
    .company-hero { padding-top: calc(var(--space-16) + 40px); padding-bottom: var(--space-16); }
    .company-hero__title { font-size: 28px; }
}

/* --- Intro --- */
.company-intro__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
}
.company-intro__lead {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-gray-900);
    font-weight: var(--weight-medium);
    margin: 0 0 var(--space-4);
}
.company-intro__text {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-gray-600);
    margin: 0;
}
.company-intro__goals-title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--color-gray-900);
    margin: 0 0 var(--space-4);
    position: relative;
    padding-left: 16px;
}
.company-intro__goals-title::before {
    content: "";
    position: absolute;
    left: 0; top: 10px; bottom: 10px;
    width: 4px;
    background: var(--color-orange-500);
    border-radius: 2px;
}
.company-intro__goals-text {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-gray-600);
    margin: 0;
}
@media (min-width: 900px) {
    .company-intro__grid { grid-template-columns: 1.1fr 1fr; gap: var(--space-16); align-items: start; }
}

/* --- Values (4 cards) --- */
.company-values__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}
.company-value-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-6);
    box-shadow: var(--shadow-sm);
    text-align: left;
    border-top: 3px solid var(--color-orange-500);
}
.company-value-card__icon {
    width: 56px; height: 56px;
    border-radius: var(--radius-full);
    background: var(--color-orange-50);
    color: var(--color-orange-600);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--space-6);
}
.company-value-card__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--color-gray-900);
    margin: 0 0 var(--space-2);
}
.company-value-card__text {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-gray-600);
    margin: 0;
}
@media (min-width: 640px) { .company-values__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .company-values__grid { grid-template-columns: repeat(4, 1fr); } }

/* --- Approach (dark block with stat) --- */
.company-approach__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: start;
}
.company-approach__stat {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--color-orange-400);
    margin-bottom: var(--space-4);
}
.company-approach__stat-number {
    font-size: 72px;
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--color-orange-400);
    display: inline-flex;
    align-items: baseline;
}
.company-approach__stat-plus {
    font-size: 48px;
    color: var(--color-orange-400);
    margin-left: 4px;
}
.company-approach__stat-label {
    display: block;
    font-size: var(--text-base);
    color: var(--color-gray-300);
    margin-top: var(--space-2);
    font-weight: var(--weight-regular);
    line-height: var(--leading-snug);
}
.company-approach__stat {
    flex-direction: column;
    align-items: flex-start;
}
.company-approach__title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: #fff;
    line-height: var(--leading-snug);
    margin: 0;
    max-width: 520px;
}
.company-approach__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}
.company-approach__item {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    padding: var(--space-6);
    background: rgba(255, 255, 255, .04);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-orange-500);
}
.company-approach__num {
    flex: 0 0 auto;
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-orange-400);
    line-height: 1;
    min-width: 28px;
}
.company-approach__text {
    margin: 0;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-gray-200);
}
@media (min-width: 900px) {
    .company-approach__grid { grid-template-columns: 1fr 1.2fr; gap: var(--space-16); }
    .company-approach__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .company-approach__title { font-size: var(--text-4xl); }
}

/* --- Maintenance --- */
.company-maintenance__lead {
    max-width: 900px;
    margin: 0 auto var(--space-12);
    color: var(--color-gray-700);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}
.company-maintenance__lead p { margin: 0 0 var(--space-4); }
.company-maintenance__lead p:last-child { margin-bottom: 0; }

.company-maintenance__tariffs {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}
.tariff-card {
    background: #fff;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease;
}
.tariff-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tariff-card__head { border-bottom: 1px solid var(--color-gray-200); padding-bottom: var(--space-4); }
.tariff-card__badge {
    display: inline-block;
    background: var(--color-orange-500);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    letter-spacing: .04em;
    margin-bottom: var(--space-4);
}
.tariff-card__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-gray-900);
    margin: 0 0 var(--space-2);
}
.tariff-card__period {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin: 0;
    font-weight: var(--weight-medium);
}
.tariff-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex-grow: 1;
}
.tariff-card__list li {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-gray-700);
}
.tariff-card__check {
    flex: 0 0 auto;
    color: var(--color-success-500);
    margin-top: 3px;
    display: inline-flex;
}
.tariff-card__cta { margin-top: auto; }
@media (min-width: 900px) { .company-maintenance__tariffs { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); } }

/* --- Programs (tabs) --- */
.programs-tabs { max-width: 1100px; margin: 0 auto; }
.programs-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: #fff;
    padding: 6px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
    margin-bottom: var(--space-8);
}
.programs-tabs__btn {
    flex: 1 1 auto;
    min-width: 160px;
    padding: 14px 20px;
    border: none;
    background: transparent;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-gray-600);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.programs-tabs__btn:hover { background: var(--color-gray-100); color: var(--color-gray-900); }
.programs-tabs__btn.is-active {
    background: var(--color-gray-900);
    color: #fff;
}
.programs-pane { display: none; }
.programs-pane.is-active { display: block; }
.programs-pane__title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--color-gray-900);
    margin: 0 0 var(--space-2);
}
.programs-pane__subtitle {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
    margin: 0 0 var(--space-8);
    line-height: var(--leading-relaxed);
}
.programs-pane__lead {
    color: var(--color-gray-700);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-8);
    max-width: 860px;
}
.programs-pane__lead p { margin: 0 0 var(--space-4); }
.programs-pane__lead p:last-child { margin-bottom: 0; }
.programs-pane__items-heading {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-gray-900);
    margin: 0 0 var(--space-6);
}
.programs-pane__items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}
.programs-pane__item {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    background: #fff;
    padding: var(--space-6);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
}
.programs-pane__item-dot {
    flex: 0 0 auto;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--color-orange-500);
    margin-top: 8px;
}
.programs-pane__item-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-gray-900);
    margin: 0 0 var(--space-2);
}
.programs-pane__item-text {
    font-size: var(--text-base);
    color: var(--color-gray-600);
    line-height: var(--leading-relaxed);
    margin: 0;
}
@media (min-width: 900px) {
    .programs-pane__items { grid-template-columns: repeat(3, 1fr); }
}

/* --- Advantages + Strengths (shared card styles) --- */
.company-advantages__grid,
.company-strengths__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}
.adv-card, .strength-card {
    background: #fff;
    padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-gray-200);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.adv-card:hover, .strength-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--color-orange-200);
    transform: translateY(-2px);
}
.adv-card__icon, .strength-card__icon {
    width: 56px; height: 56px;
    border-radius: var(--radius-md);
    background: var(--color-orange-50);
    color: var(--color-orange-600);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--space-4);
}
.adv-card__title, .strength-card__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--color-gray-900);
    margin: 0 0 var(--space-2);
    line-height: var(--leading-snug);
}
.adv-card__text, .strength-card__text {
    font-size: var(--text-base);
    color: var(--color-gray-600);
    line-height: var(--leading-relaxed);
    margin: 0;
}
@media (min-width: 640px) {
    .company-advantages__grid { grid-template-columns: repeat(2, 1fr); }
    .company-strengths__grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .company-strengths__grid  { grid-template-columns: repeat(4, 1fr); }
}

/* --- Consultation CTA --- */
.company-consult { padding: var(--space-16) 0; }
.company-consult__box {
    background: linear-gradient(135deg, var(--color-orange-500) 0%, var(--color-orange-600) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-16) var(--space-8);
    text-align: center;
    color: #fff;
    box-shadow: var(--shadow-lg);
}
.company-consult__eyebrow {
    font-size: var(--text-sm);
    letter-spacing: .18em;
    text-transform: uppercase;
    margin: 0 0 var(--space-4);
    font-weight: var(--weight-bold);
    opacity: .85;
}
.company-consult__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    color: #fff;
    line-height: var(--leading-snug);
    max-width: 800px;
    margin: 0 auto var(--space-8);
}
.company-consult__cta {
    background: #fff !important;
    color: var(--color-orange-600) !important;
    border-color: #fff !important;
}
.company-consult__cta:hover { background: var(--color-gray-100) !important; }
@media (min-width: 900px) {
    .company-consult__title { font-size: var(--text-3xl); }
}

/* --- FAQ --- */
.company-faq__inner { max-width: 880px; }
.faq-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.faq-item { background: #fff; border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); overflow: hidden; }
.faq-item details { width: 100%; }
.faq-item__q {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6);
    cursor: pointer;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-gray-900);
    transition: background .15s ease;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover { background: var(--color-gray-50); }
.faq-item__chevron {
    flex: 0 0 auto;
    color: var(--color-gray-500);
    transition: transform .2s ease;
}
.faq-item details[open] .faq-item__chevron { transform: rotate(180deg); color: var(--color-orange-500); }
.faq-item__a { padding: 0 var(--space-6) var(--space-6); }
.faq-item__a p {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-gray-700);
    line-height: var(--leading-relaxed);
}



/* ============================================================
 *  ДОКУМЕНТАЦИЯ — /dokumentatsiya/
 *  Визуал 1:1 с Tilda. Hero + список файлов + CTA.
 * ============================================================ */

.dokumentatsiya { background: #FFFFFF; }

/* Hero */
.doc-hero {
    position: relative;
    min-height: 340px;
    padding: var(--space-16) 0 var(--space-12);
    color: #FFFFFF;
    overflow: hidden;
}
.doc-hero__bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.doc-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.40) 0%, rgba(15, 23, 42, 0.55) 100%);
    z-index: 1;
}
.doc-hero__inner { position: relative; z-index: 2; }
.doc-hero__breadcrumbs { margin-bottom: var(--space-5); }
.doc-hero__crumbs {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap;
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.8);
}
.doc-hero__crumb { display: inline-flex; align-items: center; }
.doc-hero__crumb + .doc-hero__crumb::before {
    content: ">";
    padding: 0 var(--space-2);
    color: rgba(255,255,255,0.6);
}
.doc-hero__crumb a { color: rgba(255,255,255,0.8); transition: color var(--duration-fast) var(--easing); }
.doc-hero__crumb a:hover { color: var(--color-orange-300); }
.doc-hero__crumb--current { color: #FFFFFF; }
.doc-hero__title {
    margin: 0;
    font-size: 54px;
    font-weight: var(--weight-bold);
    line-height: 1.15;
    color: #FFFFFF;
}

/* Файлы */
.doc-files { padding: var(--space-16) 0 var(--space-12); }
.doc-files__inner { max-width: 1160px; margin: 0 auto; }
.doc-files__title {
    margin: 0 0 var(--space-10);
    font-size: 36px;
    font-weight: var(--weight-bold);
    color: #000000;
    line-height: 1.23;
}
.doc-files__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.doc-files__item { margin: 0; }
.doc-files__link {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 14px var(--space-4);
    color: #000000;
    text-decoration: none;
    border-radius: 6px;
    transition: background var(--duration-fast) var(--easing), color var(--duration-fast) var(--easing);
}
.doc-files__link:hover {
    background: var(--color-orange-50);
    color: var(--color-orange-600);
}
.doc-files__icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.doc-files__icon img { display: block; width: 100%; height: auto; }
.doc-files__text {
    flex: 1 1 auto;
    font-size: 18px;
    line-height: 1.55;
    color: inherit;
}
.doc-files__size { color: inherit; }

@media (max-width: 960px) {
    .doc-hero { min-height: 280px; padding: var(--space-12) 0 var(--space-10); }
    .doc-hero__title { font-size: 40px; }
    .doc-files__title { font-size: 30px; }
}
@media (max-width: 640px) {
    .doc-hero { min-height: 220px; padding: var(--space-10) 0 var(--space-8); }
    .doc-hero__title { font-size: 30px; }
    .doc-files__title { font-size: 24px; }
    .doc-files__text { font-size: 15px; }
    .doc-files__icon { flex-basis: 36px; width: 36px; height: 36px; }
    .doc-files__link { padding: 10px var(--space-2); gap: var(--space-3); }
}

/* =========================================================
   CONTACTS PAGE (/contacts)
   1:1 с Tilda: минималистичный hero с тёмным фото + крошки + H1.
   Всё остальное (телефон/соцсети/CTA) живёт в общем футере.
   ========================================================= */
.contacts-hero {
    position: relative;
    min-height: 340px;
    padding: calc(var(--space-24) + 48px) 0 var(--space-24);
    color: #fff;
    background: var(--color-gray-900);
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
}
.contacts-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .35;
    z-index: -1;
}
.contacts-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,23,42,.55) 0%, rgba(15,23,42,.85) 100%);
    z-index: -1;
}
.contacts-hero__inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}
.contacts-hero .breadcrumbs { margin: 0; }
.contacts-hero__title {
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: #fff;
    margin: 0;
}
@media (min-width: 900px) {
    .contacts-hero { min-height: 420px; padding-top: calc(var(--space-24) + 72px); padding-bottom: var(--space-16); }
    .contacts-hero__title { font-size: var(--text-5xl); }
    .contacts-hero__inner { gap: var(--space-16); }
}
@media (max-width: 640px) {
    .contacts-hero { min-height: 280px; padding-top: calc(var(--space-16) + 40px); padding-bottom: var(--space-12); }
    .contacts-hero__title { font-size: 32px; }
    .contacts-hero__inner { gap: var(--space-8); }
}


/* ============================================================
 *  СТАТЬИ — /publikatsii/
 *  Визуал 1:1 с Tilda /publikatsii
 * ============================================================ */

.publikatsii { background: #FFFFFF; }

/* Hero светлый */
.pub-hero {
    padding: var(--space-16) 0 var(--space-8);
    background: #FFFFFF;
}
.pub-hero__inner { max-width: 1160px; margin: 0 auto; }
.pub-hero__breadcrumbs { margin-bottom: var(--space-5); }
.pub-hero__crumbs {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap;
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}
.pub-hero__crumb { display: inline-flex; align-items: center; }
.pub-hero__crumb + .pub-hero__crumb::before {
    content: ">";
    padding: 0 var(--space-2);
    color: var(--color-gray-400);
}
.pub-hero__crumb a { color: var(--color-gray-500); transition: color var(--duration-fast) var(--easing); }
.pub-hero__crumb a:hover { color: var(--color-orange-500); }
.pub-hero__crumb--current { color: var(--color-gray-700); }
.pub-hero__title {
    margin: 0;
    font-size: 54px;
    font-weight: var(--weight-bold);
    line-height: 1.15;
    color: #000000;
}

/* Сетка */
.pub-grid-section { padding: var(--space-8) 0 var(--space-12); }
.pub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8) var(--space-6);
    max-width: 1160px;
    margin: 0 auto;
}
.pub-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    color: #000000;
    text-decoration: none;
    transition: transform var(--duration-fast) var(--easing);
}
.pub-card:hover { transform: translateY(-2px); }
.pub-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 6px;
    background: var(--color-gray-200);
}
.pub-card__image {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform var(--duration-slow) var(--easing);
}
.pub-card:hover .pub-card__image { transform: scale(1.04); }
.pub-card__image--fallback { background: var(--color-gray-200); }
.pub-card__body { display: flex; flex-direction: column; gap: 8px; }
.pub-card__title {
    margin: 0;
    font-size: 20px;
    font-weight: var(--weight-bold);
    line-height: 1.35;
    color: #000000;
}
.pub-card__descr {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--color-gray-600);
}
.pub-card__date {
    margin-top: 4px;
    font-size: 14px;
    color: var(--color-gray-500);
}

/* Пагинация */
.pub-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: var(--space-10) 0 var(--space-6);
    user-select: none;
}
.pub-pagination__item {
    font-size: var(--text-base);
    color: var(--color-gray-400);
    line-height: 1;
}
.pub-pagination__item--active {
    color: var(--color-orange-500);
    font-weight: var(--weight-bold);
}

@media (max-width: 960px) {
    .pub-hero__title { font-size: 40px; }
    .pub-grid { grid-template-columns: repeat(2, 1fr); }
    .pub-card__title { font-size: 18px; }
}
@media (max-width: 640px) {
    .pub-hero { padding: var(--space-10) 0 var(--space-6); }
    .pub-hero__title { font-size: 30px; }
    .pub-grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .pub-pagination { gap: 12px; padding: var(--space-6) 0; }
}

/* ============================================================
 *  СТАТЬЯ — /publikatsii/{slug}
 *  Визуал 1:1 с Tilda /publikatsii_shablon
 * ============================================================ */

.publikatsiya-detail { background: #FFFFFF; }

/* Hero (светлый, без фото) */
.article-hero {
    padding: var(--space-16) 0 var(--space-6);
    background: #FFFFFF;
}
.article-hero__inner { max-width: 1160px; margin: 0 auto; }
.article-hero__breadcrumbs { margin-bottom: var(--space-5); }
.article-hero__crumbs {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap;
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}
.article-hero__crumb { display: inline-flex; align-items: center; }
.article-hero__crumb + .article-hero__crumb::before {
    content: ">";
    padding: 0 var(--space-2);
    color: var(--color-gray-400);
}
.article-hero__crumb a { color: var(--color-gray-500); transition: color var(--duration-fast) var(--easing); }
.article-hero__crumb a:hover { color: var(--color-orange-500); }
.article-hero__crumb--current { color: var(--color-gray-700); }
.article-hero__title {
    margin: 0;
    font-size: 42px;
    font-weight: var(--weight-bold);
    line-height: 1.23;
    color: #000000;
}

/* Body */
.article-body { padding: var(--space-6) 0 var(--space-12); }
.article-body__inner { max-width: 1160px; margin: 0 auto; }
.article-body__para {
    margin: 0 0 var(--space-5);
    font-size: 18px;
    line-height: 1.55;
    color: #000000;
}
.article-body__h2 {
    margin: var(--space-8) 0 var(--space-4);
    font-size: 36px;
    font-weight: var(--weight-bold);
    line-height: 1.23;
    color: #000000;
}
.article-body__figure {
    margin: var(--space-6) 0;
    overflow: hidden;
    border-radius: 6px;
}
.article-body__image {
    display: block;
    width: 100%;
    height: auto;
}
.article-body__gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: var(--space-6) 0;
}
.article-body__gallery-item {
    margin: 0;
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 4 / 3;
    background: var(--color-gray-200);
}
.article-body__gallery-item .article-body__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.article-body__back { margin-top: var(--space-10); }
.article-body__back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    color: var(--color-orange-500);
    text-decoration: none;
    transition: color var(--duration-fast) var(--easing);
}
.article-body__back-link:hover { color: var(--color-orange-600); text-decoration: underline; }

@media (max-width: 960px) {
    .article-hero__title { font-size: 34px; }
    .article-body__h2 { font-size: 28px; }
    .article-body__gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .article-hero { padding: var(--space-10) 0 var(--space-4); }
    .article-hero__title { font-size: 26px; }
    .article-body__h2 { font-size: 22px; margin-top: var(--space-6); }
    .article-body__para { font-size: 16px; }
    .article-body__gallery { grid-template-columns: 1fr; gap: 10px; }
}

/* =========================================================
   HEADER LOGO — combined image (MainCraneLogo_.png)
   Крупный логотип как на Tilda-источнике: ~120px высоты на десктопе,
   уменьшается в scrolled-состоянии и на мобильных.
   ========================================================= */
.site-header__logo--combined {
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}
.site-header__logo-img {
    display: block;
    height: 44px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
}
.site-header--scrolled .site-header__logo-img { height: 40px; max-width: 140px; }
@media (max-width: 1200px) {
    .site-header__logo-img { height: 40px; max-width: 140px; }
}
@media (max-width: 960px) {
    .site-header__logo-img { height: 40px; max-width: 140px; }
}
@media (max-width: 640px) {
    .site-header__logo-img { height: 36px; max-width: 120px; }
}


/* =========================================================
   HEADER — правая часть: телефон + соцсети (Дзен, Telegram)
   1:1 с Tilda: телефон → Дзен-иконка → Telegram-иконка → CTA.
   ========================================================= */
.site-header__actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.site-header__phone {
    display: inline-flex;
    align-items: center;
    font-size: 18px;
    font-weight: var(--weight-bold);
    color: #FFFFFF;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: color .15s ease;
}
.site-header--overlay .site-header__phone { color: #FFFFFF; }
.site-header--overlay.site-header--scrolled .site-header__phone { color: var(--color-gray-900); }
.site-header__phone:hover { color: var(--color-orange-400); }

.site-header__socials {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 2px;
}
.site-header__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    color: #FFFFFF;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.site-header__social--dzen { background: var(--color-orange-500); }
.site-header__social--tg   { background: #229ED9; }
.site-header__social:hover { transform: translateY(-1px); }
.site-header--overlay.site-header--scrolled .site-header__social { color: #FFFFFF; }

@media (max-width: 960px) {
    .site-header__actions { display: none; }
}