/* Собрано автоматически из fonts.css, base.css, blocks.css — править исходники, не этот файл. */
@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/onest-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/onest-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/onest-500-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/onest-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/onest-700-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/onest-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/onest-800-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/onest-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ==========================================================================
   FixPhone — дизайн-система сайта fixphone-nsk.ru

   Одна палитра на весь сайт, один акцент (зелёный «работает»), одна тема
   на страницу с поддержкой системной тёмной. Радиусы по правилу:
   карточки 16px, поля 12px, кнопки и чипы — пилюля. Другие значения не вводить.
   ========================================================================== */

:root {
    color-scheme: light dark;

    --paper:        #f6f5f3;
    --surface:      #ffffff;
    --surface-2:    #efeeea;
    --surface-3:    #12161b;

    --ink:          #12161b;
    --ink-2:        #39424e;
    --muted:        #6b7683;
    --on-dark:      #f2f4f6;
    --on-dark-2:    #a9b4c0;

    --line:         #e3e1dc;
    --line-strong:  #cfccc5;

    --accent:       #0a7d47;
    --accent-hover: #086338;
    --accent-fg:    #ffffff;
    --accent-bright:#12b96a;
    --accent-soft:  #e6f3ec;
    --accent-line:  #bfe0cd;

    --r-card:  16px;
    --r-field: 12px;
    --r-pill:  999px;

    --shadow-1: 0 1px 2px rgba(18, 22, 27, .06), 0 6px 18px rgba(18, 22, 27, .05);
    --shadow-2: 0 2px 6px rgba(18, 22, 27, .08), 0 18px 44px rgba(18, 22, 27, .10);

    --wrap: 1180px;
    --gut:  clamp(16px, 4vw, 32px);
    --sec:  clamp(56px, 8vw, 104px);

    --ease: cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper:        #0d1014;
        --surface:      #151a20;
        --surface-2:    #1c232b;
        --surface-3:    #080b0e;

        --ink:          #eef1f4;
        --ink-2:        #c3ccd6;
        --muted:        #8d99a6;

        --line:         #252d36;
        --line-strong:  #38424e;

        --accent:       #12b96a;
        --accent-hover: #2ad07f;
        --accent-fg:    #06130c;
        --accent-soft:  #10241a;
        --accent-line:  #1d4632;

        --shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .35);
        --shadow-2: 0 2px 6px rgba(0, 0, 0, .55), 0 18px 44px rgba(0, 0, 0, .45);
    }
}

/* ---------- сброс ---------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 16px/1.6 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-feature-settings: 'ss01';
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

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

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

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

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }

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

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------- сетка ---------- */

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gut);
}

.section { padding-block: var(--sec); }

.section--tight { padding-block: clamp(36px, 5vw, 64px); }

.section--dark {
    background: var(--surface-3);
    color: var(--on-dark);
}

/* ---------- типографика ---------- */

.h1 {
    font-weight: 800;
    font-size: clamp(30px, 5.4vw, 56px);
    line-height: 1.06;
    letter-spacing: -.025em;
}

.h2 {
    font-weight: 800;
    font-size: clamp(25px, 3.6vw, 40px);
    line-height: 1.12;
    letter-spacing: -.02em;
}

.h3 {
    font-weight: 700;
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.25;
    letter-spacing: -.01em;
}

.lead {
    font-size: clamp(16px, 1.7vw, 19px);
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 62ch;
}

.muted { color: var(--muted); }

.section--dark .lead,
.section--dark .muted { color: var(--on-dark-2); }

.sec-head { margin-bottom: clamp(28px, 4vw, 48px); }
.sec-head .lead { margin-top: 14px; }

/* ---------- кнопки ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s var(--ease), border-color .18s var(--ease),
                transform .1s var(--ease), color .18s var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--accent); color: var(--accent-fg); }
.btn--primary:hover { background: var(--accent-hover); }

.btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--ink); }

.section--dark .btn--ghost { color: var(--on-dark); border-color: rgba(255, 255, 255, .28); }
.section--dark .btn--ghost:hover { border-color: var(--on-dark); }

.btn--sm { padding: 10px 18px; font-size: 15px; }

/* ---------- мелкие элементы ---------- */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: clamp(20px, 2.6vw, 28px);
}

.grid { display: grid; gap: clamp(14px, 1.8vw, 20px); }

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

/* Bitrix вставляет свои обёртки вокруг областей правки: пробрасываем их сквозь
   сетку. Только безклассовые div, иначе правило съедает сами карточки,
   у которых id тоже начинается с bx_ (GetEditAreaId). */
.grid > .bx-edit-area-hover,
.grid > div[id^="bx_"]:not([class]) { display: contents; }

/* ---------- анимация появления ---------- */

/* Прячем только тогда, когда JS точно жив и сможет вернуть блок:
   класс js ставит инлайновый скрипт в <head>. Без него карточки услуг
   остались бы с opacity:0 навсегда. */
@media (prefers-reduced-motion: no-preference) {
    .js .reveal {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity .5s var(--ease), transform .5s var(--ease);
    }
    .js .reveal.is-in { opacity: 1; transform: none; }
}

/* ---------- служебное ---------- */

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   Градация фонов секций.

   Полоса тонов идёт от тёмного первого экрана к светлой середине и обратно
   в тёмный подвал. Соседние секции никогда не совпадают по тону, а между
   светлыми ставится мягкий шов вместо жёсткой линии.

   tone-0  бумага, самый светлый
   tone-1  на ступень плотнее
   tone-2  ещё плотнее, для тяжёлых блоков вроде прайса
   dark    графит
   ========================================================================== */

:root {
    --tone-0: #f8f7f5;
    --tone-1: #f1efeb;
    --tone-2: #e8e5df;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --tone-0: #0f1318;
        --tone-1: #141920;
        --tone-2: #1a2028;
    }
}

.section--t0 { background: var(--tone-0); }
.section--t1 { background: var(--tone-1); }
.section--t2 { background: var(--tone-2); }

/* Мягкий шов: верх секции подхватывает тон предыдущей и растворяет его.
   Работает только между светлыми секциями, у тёмных граница намеренно резкая. */
.section--seam { position: relative; }
.section--seam::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: clamp(40px, 6vw, 90px);
    background: linear-gradient(to bottom, var(--seam-from, transparent), transparent);
    pointer-events: none;
}

.seam-from-t0 { --seam-from: var(--tone-0); }
.seam-from-t1 { --seam-from: var(--tone-1); }
.seam-from-t2 { --seam-from: var(--tone-2); }

/* body тоже должен быть в тоне, иначе на коротких страницах под подвалом
   вылезает старый --paper другого оттенка */
body { background: var(--tone-0); }

/* ==========================================================================
   FixPhone — блоки страниц. Токены и примитивы живут в base.css.
   ========================================================================== */

/* ---------- шапка ---------- */

.hdr {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--line);
}

@supports not (backdrop-filter: blur(1px)) {
    .hdr { background: var(--paper); }
}

.hdr__in {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.4vw, 32px);
    height: 68px;
}

.logo { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.logo__mark { width: 34px; height: 34px; flex: none; }
.logo__text {
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -.03em;
    line-height: 1;
}
.logo__text b { color: var(--accent); font-weight: 800; }

.nav { display: none; }

@media (min-width: 1000px) {
    .nav { display: flex; align-items: center; gap: 26px; margin-inline-start: auto; }
    .nav a {
        font-size: 15px;
        font-weight: 500;
        color: var(--ink-2);
        transition: color .15s var(--ease);
    }
    .nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
}

.hdr__cta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-inline-start: auto;
}

@media (min-width: 1000px) { .hdr__cta { margin-inline-start: 0; } }

.hdr__phone {
    display: none;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -.01em;
    white-space: nowrap;
}

@media (min-width: 720px) { .hdr__phone { display: block; } }

.burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: transparent;
    cursor: pointer;
}
@media (min-width: 1000px) { .burger { display: none; } }

.burger span {
    display: block;
    width: 17px; height: 1.8px;
    background: var(--ink);
    box-shadow: 0 -5.5px 0 var(--ink), 0 5.5px 0 var(--ink);
}

.hdr__cta .btn { display: none; }
@media (min-width: 1000px) { .hdr__cta .btn { display: inline-flex; } }

/* мобильное меню */
.mnav {
    display: none;
    padding: 8px var(--gut) 22px;
    border-top: 1px solid var(--line);
    background: var(--paper);
}
.mnav.is-open { display: block; }

/* Только пункты меню. Без :not(.btn) это правило перебивало у кнопки
   display: inline-flex — она теряла флекс, иконка и номер вставали
   в две строки и прижимались влево. */
.mnav a:not(.btn) {
    display: block;
    padding: 13px 0;
    font-size: 17px;
    font-weight: 600;
    border-bottom: 1px solid var(--line);
}
.mnav .btn { margin-top: 18px; width: 100%; }

/* ---------- герой ---------- */

.hero { padding-block: clamp(38px, 6vw, 76px) clamp(44px, 6vw, 84px); }

.hero__grid {
    display: grid;
    gap: clamp(30px, 5vw, 56px);
    align-items: center;
}

@media (min-width: 940px) {
    .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}

.hero__title { margin-block: 18px 20px; }
.hero__title em { font-style: normal; color: var(--accent); }

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.hero__facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    margin-top: 38px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    overflow: hidden;
}

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

.hero__fact { background: var(--surface); padding: 18px 16px; }
.hero__fact b {
    display: block;
    font-size: clamp(20px, 2.6vw, 26px);
    font-weight: 800;
    letter-spacing: -.02em;
}
.hero__fact span { font-size: 13.5px; color: var(--muted); line-height: 1.35; display: block; margin-top: 4px; }

.hero__media {
    position: relative;
    border-radius: var(--r-card);
    overflow: hidden;
    background: var(--surface-2);
    aspect-ratio: 4 / 3;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

.hero__badge {
    position: absolute;
    left: 16px; bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 14px;
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: var(--shadow-2);
}
.hero__badge b { font-size: 15px; font-weight: 700; display: block; }
.hero__badge span { font-size: 13px; color: var(--muted); }

/* ---------- услуги ---------- */

.svc {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: clamp(20px, 2.4vw, 26px);
    transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.svc:hover { border-color: var(--accent-line); box-shadow: var(--shadow-1); transform: translateY(-2px); }

/* широкая карточка: занимает две ячейки и раскладывается горизонтально,
   иконка уходит влево от текста. Ряды сходятся, потому что широких ровно
   столько, сколько нужно на полный ряд */
@media (min-width: 900px) {
    .svc--wide {
        grid-column: span 2;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "ico text"
            ".   foot";
        column-gap: 18px;
        row-gap: 14px;
        align-content: start;
    }
    .svc--wide .svc__ico  { grid-area: ico; width: 52px; height: 52px; }
    .svc--wide .svc__ico svg,
    .svc--wide .svc__ico img { width: 26px; height: 26px; }
    .svc--wide .svc__text { grid-area: text; }
    .svc--wide .svc__foot { grid-area: foot; }
    .svc--wide .svc__name { font-size: 20px; }
    .svc--wide .svc__desc { font-size: 15px; max-width: 46ch; }
}

.svc__ico {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
}
.svc__ico svg { width: 22px; height: 22px; }

.svc__name { font-weight: 700; font-size: 17.5px; letter-spacing: -.01em; }
.svc__desc { font-size: 14.5px; color: var(--muted); line-height: 1.5; }

.svc__foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.svc__price { font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.svc__price i { font-style: normal; font-weight: 500; font-size: 13px; color: var(--muted); }
.svc__term { font-size: 13.5px; color: var(--muted); }

/* услуга без фиксированной цены: подпись вместо числа, иначе крупный кегль
   ломает строку на две и рвёт нижнюю линию карточки */
.svc__price--note { font-size: 14px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }

/* текстовый блок карточки: у обычных карточек он просто течёт в колонку */
.svc__text { display: flex; flex-direction: column; gap: 10px; }

/* ---------- прайс ---------- */

.price__pick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.pick {
    padding: 9px 17px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-strong);
    background: var(--surface);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .16s var(--ease);
}
.pick:hover { border-color: var(--ink); }
.pick[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-fg);
}

.ptable { width: 100%; border-collapse: collapse; min-width: 560px; }
.ptable th {
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    padding: 0 16px 12px;
}
.ptable th:last-child, .ptable td:last-child { text-align: right; }
.ptable td {
    padding: 15px 16px;
    border-top: 1px solid var(--line);
    vertical-align: middle;
}
.ptable tbody tr:hover td { background: var(--surface-2); }
.ptable__svc { font-weight: 600; }
.ptable__model { font-size: 13.5px; color: var(--muted); }
.ptable__term { font-size: 14px; color: var(--muted); white-space: nowrap; }
.ptable__price { font-weight: 800; font-size: 17px; white-space: nowrap; letter-spacing: -.02em; }
.ptable__old {
    display: block;
    font-weight: 500;
    font-size: 13px;
    color: var(--muted);
    text-decoration: line-through;
}

.price__note {
    margin-top: 18px;
    font-size: 14px;
    color: var(--muted);
}

.price__empty { padding: 40px 16px; text-align: center; color: var(--muted); }

/* Секции брендов на странице цен. На главной прайс остаётся с табами,
   здесь бренды развёрнуты: у каждого заголовок, якорь и вводный абзац. */

.price__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
}
/* .pick — общий вид кнопки-таблетки. Здесь это ссылка, а не кнопка,
   поэтому гасим подчёркивание и наследуем цвет текста. */
.price__nav .pick {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

.price__brand {
    /* Шапка липкая: без отступа якорь уводит заголовок под неё. */
    scroll-margin-top: 86px;
}
.price__brand + .price__brand { margin-top: 46px; }

.price__brand-title {
    font-size: clamp(21px, 3.4vw, 27px);
    letter-spacing: -.02em;
    margin-bottom: 10px;
}

.price__brand-lead {
    max-width: 68ch;
    margin-bottom: 20px;
    color: var(--muted);
    line-height: 1.65;
}

.updated {
    margin-bottom: 22px;
    font-size: 13.5px;
    color: var(--muted);
}

/* ---------- преимущества ---------- */

.adv {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(22px, 2.6vw, 30px);
    border-radius: var(--r-card);
    background: var(--surface);
    border: 1px solid var(--line);
}
.adv--accent { background: var(--accent-soft); border-color: var(--accent-line); }
.adv__val {
    font-size: clamp(30px, 4.4vw, 44px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--accent);
}
.adv__name { font-weight: 700; font-size: 17px; }
.adv__desc { font-size: 14.5px; color: var(--muted); line-height: 1.5; }

/* ---------- этапы ---------- */

.steps { counter-reset: step; display: grid; gap: 2px; }

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

.step {
    counter-increment: step;
    padding: clamp(22px, 2.6vw, 30px);
    background: var(--surface);
    border: 1px solid var(--line);
}
.steps > *:first-child .step,
.steps > .step:first-child { border-radius: var(--r-card) var(--r-card) 0 0; }
.steps > *:last-child  .step,
.steps > .step:last-child  { border-radius: 0 0 var(--r-card) var(--r-card); }

@media (min-width: 860px) {
    .steps > *:first-child .step, .steps > .step:first-child { border-radius: var(--r-card) 0 0 var(--r-card); }
    .steps > *:last-child  .step, .steps > .step:last-child  { border-radius: 0 var(--r-card) var(--r-card) 0; }
}

.step::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    margin-bottom: 16px;
    border-radius: var(--r-pill);
    background: var(--ink);
    color: var(--paper);
    font-weight: 800;
    font-size: 15px;
}
.step__name { font-weight: 700; font-size: 17px; margin-bottom: 8px; }
.step__desc { font-size: 14.5px; color: var(--muted); line-height: 1.5; }

/* ---------- мастера ---------- */

.master { display: grid; gap: 14px; }
.master__ph {
    aspect-ratio: 3 / 4;
    border-radius: var(--r-card);
    overflow: hidden;
    background: var(--surface-2);
}
.master__ph img { width: 100%; height: 100%; object-fit: cover; }
.master__name { font-weight: 700; font-size: 17px; }
.master__meta { font-size: 14px; color: var(--muted); }

/* ---------- отзывы ---------- */

.rev {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(20px, 2.4vw, 26px);
    border-radius: var(--r-card);
    background: var(--surface);
    border: 1px solid var(--line);
}
.rev__stars { color: var(--accent); font-size: 15px; letter-spacing: 2px; }
.rev__text { font-size: 15px; line-height: 1.55; }
.rev__by {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 14px;
}
.rev__by b { font-weight: 700; }
.rev__by span { color: var(--muted); }

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--line); }
.faq__i { border-bottom: 1px solid var(--line); }
.faq__q {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 0;
    background: none;
    border: 0;
    text-align: left;
    font-weight: 600;
    font-size: clamp(16px, 1.8vw, 18px);
    cursor: pointer;
}
.faq__q::after {
    content: "";
    flex: none;
    width: 13px; height: 13px;
    margin-top: 5px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    transition: transform .2s var(--ease);
}
.faq__i.is-open .faq__q::after { transform: rotate(-135deg); }
.faq__a { display: none; padding-bottom: 24px; color: var(--ink-2); max-width: 74ch; }
.faq__i.is-open .faq__a { display: block; }
.faq__a p { margin-bottom: 10px; }

/* ---------- форма ---------- */

.lead-form {
    display: grid;
    gap: 16px;
    padding: clamp(22px, 3vw, 34px);
    border-radius: var(--r-card);
    background: var(--surface);
    border: 1px solid var(--line);
}

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

.field { display: grid; gap: 7px; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field textarea, .field select {
    padding: 13px 15px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-field);
    background: var(--paper);
    color: var(--ink);
    transition: border-color .15s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 92px; }
.field__err { font-size: 13px; color: #c0392b; display: none; }
.field.is-err input, .field.is-err textarea { border-color: #c0392b; }
.field.is-err .field__err { display: block; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .field__err { color: #ff8a7a; }
    :root:not([data-theme="light"]) .field.is-err input,
    :root:not([data-theme="light"]) .field.is-err textarea { border-color: #ff8a7a; }
}

.consent {
    grid-column: 1 / -1;
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.5;
}
.consent input { margin-top: 2px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.form-msg {
    grid-column: 1 / -1;
    display: none;
    padding: 14px 18px;
    border-radius: var(--r-field);
    font-size: 15px;
}
.form-msg.is-ok  { display: block; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }
.form-msg.is-err { display: block; background: #fdeceb; color: #a5281c; border: 1px solid #f3c4bf; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .form-msg.is-err { background: #2a1512; color: #ffb1a5; border-color: #58231c; }
}

/* ---------- контакты ---------- */

.contacts { display: grid; gap: clamp(20px, 3vw, 34px); }
@media (min-width: 860px) { .contacts { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); } }

.contact-row { padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-row:first-child { padding-top: 0; }
.contact-row dt { font-size: 13.5px; color: var(--muted); margin-bottom: 5px; }
.contact-row dd { margin: 0; font-size: 17px; font-weight: 600; }

.map-frame {
    border-radius: var(--r-card);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface-2);
    min-height: 340px;
}
.map-frame iframe { display: block; width: 100%; height: 100%; min-height: 340px; border: 0; }

/* ---------- подвал ---------- */

.ftr {
    background: var(--surface-3);
    color: var(--on-dark);
    padding-block: clamp(40px, 5vw, 64px) 28px;
}
.ftr a { color: var(--on-dark-2); transition: color .15s var(--ease); }
.ftr a:hover { color: var(--on-dark); }

.ftr__grid { display: grid; gap: clamp(26px, 3vw, 40px); }
@media (min-width: 760px)  { .ftr__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.ftr__t { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--on-dark-2); margin-bottom: 14px; }
.ftr__list li { margin-bottom: 10px; font-size: 15px; }
.ftr .logo__text { color: var(--on-dark); }

.ftr__bottom {
    margin-top: clamp(30px, 4vw, 46px);
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    justify-content: space-between;
    font-size: 13.5px;
    color: var(--on-dark-2);
}

/* ---------- cookie ---------- */

.cookie {
    position: fixed;
    left: var(--gut);
    right: var(--gut);
    bottom: var(--gut);
    z-index: 60;
    display: none;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    max-width: 860px;
    margin-inline: auto;
    padding: 18px 22px;
    border-radius: var(--r-card);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-2);
}
.cookie.is-show { display: flex; }
.cookie p { flex: 1 1 320px; margin: 0; }
.cookie a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- текстовая страница ---------- */

.doc { max-width: 78ch; }
.doc h2 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; letter-spacing: -.02em; margin: 34px 0 12px; }
.doc h3 { font-size: 18px; font-weight: 700; margin: 24px 0 10px; }
.doc p  { margin-bottom: 14px; color: var(--ink-2); }
.doc ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; color: var(--ink-2); }
.doc li { margin-bottom: 8px; }
.doc a  { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- хлебные крошки ---------- */

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--muted); padding-top: 22px; }
.crumbs a:hover { color: var(--ink); }
.crumbs span::after { content: "/"; margin-left: 8px; color: var(--line-strong); }

/* преимущества в тёмной секции читаются как факты, а не как карточки */
.section--dark .adv {
    background: transparent;
    border: 0;
    padding: 0;
}
.section--dark .adv--accent { background: transparent; }
.section--dark .adv__val { color: var(--accent-bright); }
.section--dark .adv__desc { color: var(--on-dark-2); }

/* мастер без загруженного фото: монограмма вместо пустой серой плитки */
.master__ph--mono {
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
}
.master__ph--mono span {
    font-size: clamp(34px, 5vw, 46px);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--accent);
}

/* кнопка звонка в мобильной шапке: на телефоне номер текстом не помещается */
.hdr__call {
    display: inline-grid;
    place-items: center;
    width: 42px; height: 42px;
    flex: none;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--accent-fg);
}
.hdr__call svg { width: 20px; height: 20px; }
.hdr__call { transition: background-color .18s var(--ease), transform .1s var(--ease); }
.hdr__call:hover { background: var(--accent-hover); }
.hdr__call:active { transform: translateY(1px); }
@media (min-width: 720px) { .hdr__call { display: none; } }

/* ==========================================================================
   Первый экран: тёмная панель с глубиной в фирменном зелёном.
   Акцент тот же, что на всём сайте, просто взят в яркой ипостаси —
   второй цвет в палитру не вводится.
   ========================================================================== */

.hdr {
    --ink:         #f2f4f6;
    --ink-2:       #b7c1cc;
    --line:        rgba(255, 255, 255, .12);
    --line-strong: rgba(255, 255, 255, .28);
    --accent:      #12b96a;
    --accent-fg:   #06130c;
    /* обязательно вместе с --accent: без него ховер берёт глобальный тёмно-зелёный
       и даёт тёмный текст на тёмном фоне, контраст падает до 2.6:1 */
    --accent-hover: #2fd681;

    background: var(--surface-3);
    backdrop-filter: none;
    border-bottom-color: rgba(255, 255, 255, .1);
    color: var(--ink);
}

.mnav {
    background: var(--surface-3);
    border-top-color: rgba(255, 255, 255, .1);
}
.mnav a:not(.btn) { border-bottom-color: rgba(255, 255, 255, .1); }

.hero--rich {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--on-dark);
    background:
        radial-gradient(115% 85% at 86% 4%,  rgba(18, 185, 106, .34), transparent 56%),
        radial-gradient(95% 75% at 2% 96%,   rgba(11, 122, 72, .32),  transparent 62%),
        linear-gradient(158deg, #101a20 0%, #0a1116 52%, #08170f 100%);
    padding-block: clamp(44px, 6.5vw, 88px) clamp(52px, 7vw, 96px);
}

/* мягкая зелёная кромка снизу, чтобы панель не обрывалась линейкой */
.hero--rich::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(18, 185, 106, .55), transparent);
}

.hero--rich .lead { color: #c9d4dd; }

.hero--rich .chip {
    background: rgba(18, 185, 106, .14);
    border-color: rgba(18, 185, 106, .42);
    color: #4ede9b;
}

.hero--rich .hero__title em { color: #2fd681; }

.hero--rich .btn--primary {
    background: #12b96a;
    color: #06130c;
}
.hero--rich .btn--primary:hover { background: #2fd681; }

.hero--rich .btn--ghost {
    color: #eef2f5;
    border-color: rgba(255, 255, 255, .3);
}
.hero--rich .btn--ghost:hover { border-color: #eef2f5; }

.hero--rich .hero__facts {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .14);
}
.hero--rich .hero__fact { background: rgba(255, 255, 255, .035); }
.hero--rich .hero__fact b { color: #ffffff; }
.hero--rich .hero__fact span { color: #9fadb9; }

.hero--rich .hero__media {
    background: #0a1116;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08);
}

.hero--rich .hero__badge {
    background: rgba(12, 20, 25, .82);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
    color: var(--on-dark);
}
.hero--rich .hero__badge b { color: #ffffff; }
.hero--rich .hero__badge span { color: #a4b1bd; }
.hero--rich .hero__badge .svc__ico {
    background: rgba(18, 185, 106, .16);
    color: #2fd681;
}

/* Полоса фактов идёт во всю ширину секции, а не в текстовой колонке:
   в колонке ячейка выходила ~140px и словесные факты рвались на две строки. */
.hero__facts { margin-top: clamp(34px, 4vw, 52px); }
.hero__fact { padding: 20px 22px; }
.hero__fact b { text-wrap: nowrap; }

/* ==========================================================================
   Бенто. Шесть плиток: крупное фото 2x2, четыре факта 1x1 и две широкие
   фотографии 2x1. Ячеек ровно столько, сколько блоков контента.
   ========================================================================== */

.bento {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

.bento__i {
    position: relative;
    border-radius: var(--r-card);
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .1);
}

.bento__i--photo { background: #0a1116; overflow: hidden; }
.bento__i--photo img { width: 100%; height: 100%; object-fit: cover; }
.bento__i--photo picture { display: block; height: 100%; }

.bento__i--fact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: clamp(20px, 2.4vw, 26px);
}

.bento__i--accent {
    /* тёмный край градиента подобран так, чтобы описание на нём давало
       не меньше 4.5:1: на прежнем #0a8f50 выходило 2.99:1 */
    background: linear-gradient(150deg, #12b96a 0%, #0fa863 100%);
    border-color: transparent;
    color: #06130c;
}

.bento__val {
    font-size: clamp(28px, 3.6vw, 38px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--accent-bright);
}
.bento__i--accent .bento__val { color: #06130c; }

.bento__name { font-weight: 700; font-size: 17px; }
.bento__desc { font-size: 14.5px; line-height: 1.5; color: #9fadb9; }
.bento__i--accent .bento__desc { color: rgba(6, 19, 12, .88); }

/* фото на узких экранах: фиксируем пропорции, иначе плитка схлопывается */
.bento__i--photo { aspect-ratio: 16 / 10; }

@media (min-width: 700px) {
    .bento { grid-template-columns: repeat(2, 1fr); }
    .bento__i--tall { grid-column: span 2; }
    .bento__i--wide { grid-column: span 2; }
}

@media (min-width: 1040px) {
    .bento {
        grid-template-columns: repeat(4, 1fr);
        /* minmax, а не фиксированная высота: у текстовых плиток длина разная,
           при жёстком ряду описание обрезалось overflow:hidden */
        grid-auto-rows: minmax(200px, auto);
    }
    .bento__i--photo { aspect-ratio: auto; }
    .bento__i--tall { grid-column: span 2; grid-row: span 2; }
    .bento__i--wide { grid-column: span 2; grid-row: span 1; }
    .bento__i--fact { grid-column: span 1; grid-row: span 1; }
}

/* логотип в тёмных зонах: знак нарисован через var(--ink) и var(--paper),
   поэтому в подвале и шапке токены переопределяются, иначе знак чёрный на чёрном */
.ftr {
    --ink:    #f2f4f6;
    --paper:  #0b0f13;
    --accent: #12b96a;
}
.hdr { --paper: #0b0f13; }

/* ==========================================================================
   Прайс на узких экранах. Таблица с min-width уезжала в горизонтальный скролл,
   и колонка с ценой оказывалась за краем экрана — то есть главное на странице
   пользователь не видел. Ниже 700px строка раскладывается карточкой.
   ========================================================================== */

@media (max-width: 699px) {
    .ptable { min-width: 0; }
    .ptable thead { display: none; }

    .ptable tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px 14px;
        padding: 15px 0;
        border-top: 1px solid var(--line);
    }
    .ptable tbody tr:hover td { background: none; }

    .ptable td {
        border: 0;
        padding: 0;
        text-align: left;
    }
    .ptable td:nth-child(1) { grid-column: 1; grid-row: 1; }
    .ptable td:nth-child(2) { grid-column: 1; grid-row: 2; }
    .ptable td:nth-child(3) {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
        text-align: right;
    }
    .ptable__old { display: inline-block; margin-left: 8px; }
}

/* ==========================================================================
   iOS. Safari по умолчанию перерисовывает поля по-своему и зумит страницу
   при фокусе, если шрифт поля меньше 16px. Ниже это снимается.
   ========================================================================== */

input, textarea, select, button {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;                 /* iOS сам скругляет поля, задаём радиус явно ниже */
    -webkit-tap-highlight-color: transparent;
}

.field input,
.field textarea,
.field select {
    font-size: 16px;                  /* меньше 16px = автозум при фокусе в Safari */
    line-height: 1.4;
    border-radius: var(--r-field);
    background-clip: padding-box;     /* иначе на iOS фон вылезает за границу */
}

.field textarea {
    -webkit-appearance: none;
    box-shadow: none;                 /* Safari рисует внутреннюю тень у textarea */
}

.btn, .pick, .burger, .faq__q, .cookie button {
    touch-action: manipulation;       /* убирает задержку 300ms на тап */
}

/* Чекбокс согласия: на iOS у него нулевой размер без явных width/height,
   и попасть пальцем невозможно. Плюс увеличенная зона нажатия. */
.consent input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    flex: none;
    margin: 0;
    border: 2px solid var(--line-strong);
    border-radius: 6px;
    background: var(--surface);
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.consent input[type="checkbox"]::before {
    content: "";
    width: 11px;
    height: 6px;
    border-left: 2.5px solid var(--accent-fg);
    border-bottom: 2.5px solid var(--accent-fg);
    transform: rotate(-45deg) translate(1px, -1px) scale(0);
    transition: transform .12s var(--ease);
}
.consent input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}
.consent input[type="checkbox"]:checked::before { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.consent { align-items: center; gap: 12px; }
.consent > span { flex: 1; }

/* Безопасные зоны iPhone: плашка cookie не должна лезть под индикатор Home,
   а подвал под ним не должен обрываться. */
.cookie { bottom: calc(var(--gut) + env(safe-area-inset-bottom, 0px)); }
.ftr { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }

@supports (padding: max(0px)) {
    .wrap {
        padding-left:  max(var(--gut), env(safe-area-inset-left));
        padding-right: max(var(--gut), env(safe-area-inset-right));
    }
}

/* Сообщение формы после отправки должно быть видно без прокрутки на телефоне */
.form-msg { scroll-margin-top: 90px; }

/* ==========================================================================
   Отзывы. Раньше это были шесть одинаковых карточек, висящих на фоне без
   опоры. Теперь один общий блок с волосяными разделителями: читается как
   стена отзывов, а не как набор плашек. Плюс монограмма, устройство
   и источник — отзыв перестаёт быть безымянным текстом.
   ========================================================================== */

.rev-wall {
    display: grid;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    overflow: hidden;
}

@media (min-width: 680px)  { .rev-wall { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .rev-wall { grid-template-columns: repeat(3, 1fr); } }

.rev {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: clamp(20px, 2.4vw, 26px);
    background: var(--surface);
    border: 0;
    border-radius: 0;
}

.rev__head { display: flex; align-items: center; gap: 12px; }

.rev__ava {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -.02em;
}

.rev__who { min-width: 0; }
.rev__name { display: block; font-weight: 700; font-size: 15.5px; line-height: 1.2; }
.rev__dev {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rev__stars { color: var(--accent); font-size: 14px; letter-spacing: 2px; }
.rev__text { font-size: 15px; line-height: 1.55; }

.rev__src {
    margin-top: auto;
    padding-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--muted);
}
.rev__src svg { width: 14px; height: 14px; flex: none; }

/* описание сервиса в подвале приходит из включаемой области */
.ftr__about {
    margin-top: 16px;
    max-width: 34ch;
    font-size: 15px;
    line-height: 1.55;
    color: var(--on-dark-2);
}

/* контейнер SmartCaptcha: виджет вставляется скриптом Яндекса */
.smart-captcha { min-height: 100px; }

/* Кнопка звонка в мобильном меню.
   Раньше подпись «Позвонить +7 (383) 555-01-23» при white-space: nowrap
   вылезала за кнопку на узких экранах. Слово убрано, его заменила иконка,
   а перенос разрешён как страховка на случай длинного номера. */
.mnav__call {
    white-space: normal;
    padding-inline: 18px;
    line-height: 1.3;
    gap: 9px;
}
.mnav__call svg { width: 19px; height: 19px; flex: none; }

/* ==========================================================================
   «До и после»: два кадра рядом, между ними стрелка.
   Интерактива нет намеренно — оба состояния видны сразу, без действий мышью.
   ========================================================================== */

.ba {
    display: grid;
    gap: clamp(16px, 2vw, 24px);
    grid-template-columns: 1fr;
}

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

.ba__case {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ba__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--line);
    position: relative;
}

.ba__shot {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--surface-2);
}

.ba__shot picture, .ba__shot img { width: 100%; height: 100%; }
.ba__shot img { object-fit: cover; }

/* стрелка сидит на стыке кадров и ведёт взгляд от разбитого к целому */
.ba__arrow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: var(--r-pill);
    background: #fff;
    color: #12161b;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-1), 0 0 0 1px rgba(18, 22, 27, .12);
}

.ba__arrow svg { width: 20px; height: 20px; }

.ba__tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 5px 11px;
    border-radius: var(--r-pill);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .01em;
}

.ba__tag--before { background: rgba(18, 22, 27, .72); color: #fff; }
.ba__tag--after  { background: var(--accent); color: var(--accent-fg); }

.ba__body {
    padding: clamp(16px, 2.4vw, 22px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.ba__name { font-weight: 700; font-size: clamp(17px, 1.9vw, 20px); line-height: 1.25; letter-spacing: -.01em; }

.ba__desc { font-size: 14.5px; line-height: 1.55; color: var(--muted); }

.ba__meta {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}

.ba__meta dt { font-size: 12.5px; color: var(--muted); }
.ba__meta dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; }
.ba__price { color: var(--accent); font-weight: 800; letter-spacing: -.02em; }

/* ---------- лента лиц под кейсами ---------- */

.faces {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(12px, 2vw, 20px);
    margin-top: clamp(28px, 4vw, 44px);
}

.faces__i {
    width: clamp(86px, 13vw, 132px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.faces__i img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--r-pill);
    border: 3px solid var(--surface);
    box-shadow: var(--shadow-1);
}

.faces__cap { font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.3; }

.faces-note {
    margin-top: clamp(30px, 4vw, 48px);
    text-align: center;
    font-size: clamp(15px, 1.7vw, 18px);
    color: var(--ink-2);
}

/* ==========================================================================
   Страница услуги /remont/<code>/
   ========================================================================== */

.svcp__head { max-width: 46rem; display: flex; flex-direction: column; gap: 16px; }

/* три факта строкой: цена, срок, гарантия. Без рамок и карточек,
   разделяет их только вертикальная линия */
.svcp__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    margin-top: 6px;
}

.svcp__fact {
    display: block;
    padding-left: 14px;
    border-left: 1px solid var(--line-strong);
}

.svcp__fact b {
    display: block;
    font-size: clamp(18px, 2.2vw, 22px);
    font-weight: 800;
    letter-spacing: -.02em;
}

.svcp__fact span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }

/* признаки поломки: две колонки на десктопе, без буллетов */
.sympt {
    display: grid;
    gap: 12px 32px;
    margin-top: 22px;
}

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

.sympt__i {
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: clamp(15px, 1.7vw, 17px);
    line-height: 1.45;
}

.sympt__ico {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--accent);
    display: grid;
    place-items: center;
}

.sympt__ico svg { width: 16px; height: 16px; }

/* текст из админки: единственное место, где стили задаются по тегу */
.prose { margin-top: 20px; max-width: 68ch; display: flex; flex-direction: column; gap: 14px; }
.prose p { font-size: clamp(15px, 1.7vw, 17px); line-height: 1.65; color: var(--ink-2); }

.svcp__brand { margin: 28px 0 12px; }

.ptable__wrap { overflow-x: auto; }

.svcp__note { margin-top: 18px; font-size: 14.5px; color: var(--muted); }
.svcp__note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* перелинковка между услугами */
.svc-links {
    display: grid;
    gap: 1px;
    margin-top: 22px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    overflow: hidden;
}

@media (min-width: 700px)  { .svc-links { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .svc-links { grid-template-columns: repeat(3, 1fr); } }

.svc-links li { outline: 1px solid var(--line); }

.svc-links a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    background: var(--surface);
    transition: background .16s var(--ease), color .16s var(--ease);
}

.svc-links a:hover { background: var(--accent-soft); color: var(--accent); }
.svc-links span { font-weight: 600; font-size: 15.5px; }
.svc-links b { font-weight: 700; font-size: 14.5px; color: var(--muted); white-space: nowrap; }
.svc-links a:hover b { color: var(--accent); }

/* хаб услуг: те же строки, но с описанием */
.svc-links--big a { flex-direction: column; align-items: stretch; gap: 8px; padding: 20px; }
.svc-links--big span { font-size: 17px; font-weight: 700; }
.svc-links--big i { font-style: normal; font-size: 14px; color: var(--muted); line-height: 1.5; }
.svc-links--big b { color: var(--accent); font-size: 16px; font-weight: 800; letter-spacing: -.02em; }

/* вся карточка услуги кликабельна, но в разметке ссылка только на заголовке:
   так в табуляции остаётся одна остановка на карточку, а не три */
.svc__link { display: block; }
.svc__link::after { content: ""; position: absolute; inset: 0; }
.svc { position: relative; }
.svc:hover .svc__link { color: var(--accent); }