/* ═══════════════════════════════════════════════════════════════════════════
   ЛОФТ — визуальный слой. Подключается ПОСЛЕ style.css.

   Шрифт: Geologica (Monokrom, OFL). Ось SHRP острит срезы штрихов — на 100
   получается сухая модернистская пластика того же рода, что у платных
   Söhne и Suisse. Одна гарнитура на всё: заголовки, текст, суммы. Смена
   гарнитуры на цифрах и читалась как топорность.

   Служебный слой — IBM Plex Mono. НЕ JetBrains Mono: в ней нет казахских
   Ә Ұ Қ Ғ Һ и знака ₸, проверено по файлу шрифта.

   Принцип шкалы: контраст семикратный и выброшенная середина. Между
   текстом 17px и заголовком 100px на странице нет ничего. Крупный
   заголовок при мелком тексте читается как воздух — даже когда букв
   ровно столько же.

   Принцип пространства: вертикального воздуха в разы больше
   горизонтального. Дешёвый сайт зажимает контент в узкую колонку и ставит
   60px между секциями. Нужно наоборот: контент шире, воздух по вертикали,
   а текстовая колонка не длиннее 62 знаков в строке.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --ground:#EEE9E1;
  --surface:#F7F4EE;
  --surface-2:#E3DCD1;
  --graphite:#1A1917;

  --ink:#1A1815;
  --ink-soft:#5C574E;
  --ink-faint:#8C857A;

  --line:#D3CABB;
  --line-strong:#B9AE9C;
  --metal:#8A8578;

  --accent:#A3690A;
  --accent-bright:#F2A21C;
  --accent-ink:#1A1917;
  --accent-soft:#F3E6CE;
  --good:#4A7A4E;
  --brick:#B04A2F;

  --font:'Geologica',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --radius:3px;
  --shadow:0 1px 2px rgba(26,24,21,.05), 0 18px 40px -26px rgba(26,24,21,.35);

  /* Пространство. Шкала восьмёрки, произвольных значений не заводим. */
  --pad-x:clamp(20px,2.2vw,40px);
  --sect:clamp(84px,10vw,168px);
  --maxw:1440px;
  --col:660px;
}

/* ── Основа ──────────────────────────────────────────────────────────────── */
body{
  background-color:var(--ground);
  color:var(--ink);
  font-family:var(--font);
  font-variation-settings:"SHRP" 100,"CRSV" 0,"slnt" 0;
  font-size:clamp(16px,1.1vw,17.5px);
  line-height:1.58;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1200px 600px at 12% -5%, rgba(255,255,255,.5), rgba(255,255,255,0) 60%),
    radial-gradient(900px 500px at 92% 8%, rgba(184,170,150,.14), rgba(184,170,150,0) 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  background-attachment:fixed,fixed,scroll;
}

.wrap{width:min(var(--maxw), 100% - var(--pad-x)*2) !important;max-width:none !important;margin-inline:auto}
section{padding-block:var(--sect) !important;position:relative}
.sec-head{max-width:var(--col);margin-bottom:clamp(40px,4.4vw,72px)}

/* ── Типографика ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4,.pack-name,.work h3,.person h3{
  font-family:var(--font) !important;
  text-transform:none !important;
  color:var(--ink);
  text-wrap:balance;
}
h1{
  font-weight:300 !important;
  font-size:clamp(40px,6.1vw,88px) !important;
  line-height:.96 !important;
  letter-spacing:-.036em !important;
  max-width:17ch;
}
h2{
  font-weight:400 !important;
  font-size:clamp(28px,4vw,56px) !important;
  line-height:1.04 !important;
  letter-spacing:-.028em !important;
  max-width:19ch;
}
h3{
  font-weight:500 !important;
  font-size:clamp(18px,1.5vw,22px) !important;
  line-height:1.22 !important;
  letter-spacing:-.015em !important;
}
.lead{
  font-weight:300 !important;
  font-size:clamp(17px,1.5vw,21px) !important;
  line-height:1.44 !important;
  letter-spacing:-.012em !important;
  color:var(--ink-soft);
  max-width:46ch !important;
}
p,li{max-width:62ch;text-wrap:pretty}
.muted{color:var(--ink-soft)}
.small{font-size:13.5px}

/* Служебный слой: метки, единицы, номера. Из-за него страница читается
   как техническая документация, а не как очередной лендинг. */
.kicker,.tag,.badge,.area,.role,.stage-no,.ba-tag{
  font-family:var(--mono) !important;
  font-size:11px !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  font-weight:500 !important;
  color:var(--ink-faint) !important;
}
/* Надзаголовки «— ЛЕЙБЛ КАПСОМ ВРАЗРЯДКУ» убраны из разметки: самый
   заезженный шаблонный приём, сразу выдаёт типовой лендинг. */
.eyebrow{display:none !important}

/* Цифры — той же гарнитурой и моноширинными знаками. Oswald снят:
   смена гарнитуры на цифрах и создавала ощущение сборной солянки. */
.pack-price,.num,.calc-sum,.stat b,.sum,.price-tile .sum,.header-phone{
  font-family:var(--font) !important;
  font-weight:700 !important;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:-.02em !important;
}
.pack-price,.calc-sum{font-size:clamp(30px,3.4vw,50px) !important;line-height:1 !important}

/* ── Секции ──────────────────────────────────────────────────────────────── */
.tinted{background:var(--surface-2)}
.sec-dark{
  background:var(--graphite);
  --ink:#F2EEE6; --ink-soft:#B8B1A4; --ink-faint:#8C857A;
  --surface:#232120; --surface-2:#2A2724; --line:#37332E; --line-strong:#474138;
  --accent:#F2A21C; --accent-soft:#2E2413;
  color:var(--ink);
}
.sec-dark h1,.sec-dark h2,.sec-dark h3{color:var(--ink)}
.sec-amber{background:linear-gradient(180deg, rgba(242,162,28,.10), rgba(242,162,28,.03)), var(--surface-2)}
.sec-dark::after,.strip::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n2)' opacity='.06'/%3E%3C/svg%3E");
}
.strip{position:relative}
.sec-dark > *,.strip > *{position:relative;z-index:1}

/* ── Карточки ────────────────────────────────────────────────────────────── */
.card,.work,.person,.faq-item,.pkg,.price-tile{
  background:var(--surface);
  border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;
  box-shadow:none;
  transition:border-color .3s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover,.work:hover,.person:hover,.price-tile:hover{
  border-color:var(--line-strong) !important;
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.price-tile.hot,.card.accented{border-color:var(--accent) !important;box-shadow:inset 0 2px 0 var(--accent)}
.list li,.card ul li{font-size:14.5px;line-height:1.5;padding:9px 0;border-bottom:1px solid var(--line);gap:10px}
.list li:last-child{border-bottom:0}
.mark,.list .mark{font-size:11px;color:var(--accent);flex:none;margin-top:3px}

/* ── Кнопки ──────────────────────────────────────────────────────────────── */
.btn{
  border-radius:2px !important;
  font-family:var(--font);
  font-weight:500;
  letter-spacing:-.01em;
  transition:background-color .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.btn-primary{background:var(--graphite);border:1px solid var(--graphite);color:#F7F4EE}
.btn-primary:hover{background:var(--accent);border-color:var(--accent);color:var(--graphite);transform:translateY(-1px)}
.btn-ghost,.btn-dark{background:transparent;border:1px solid var(--line-strong);color:var(--ink)}
.btn-ghost:hover,.btn-dark:hover{border-color:var(--ink);transform:translateY(-1px)}

/* ── Шапка ───────────────────────────────────────────────────────────────── */
header.site{background:rgba(238,233,225,.86);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
header.site.scrolled{box-shadow:0 1px 0 var(--line), 0 12px 30px -24px rgba(26,24,21,.6)}
.nav a{font-size:13.5px;color:var(--ink-soft);letter-spacing:-.005em}
.nav a:hover{color:var(--ink)}

/* ── Полоса показателей ──────────────────────────────────────────────────── */
.strip{background:var(--graphite) !important;color:#F2EEE6 !important;border-top:1px solid #000;border-bottom:1px solid #000}
.stat b{color:var(--accent-bright) !important;font-size:clamp(24px,2.4vw,34px) !important}
.stat span{color:#9A9287 !important;opacity:1;font-size:13px}

/* ── Первый экран ────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding-block:clamp(56px,6vw,104px) clamp(48px,5vw,88px) !important;border-bottom:1px solid var(--line)}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(52% 58% at 6% 8%, rgba(242,162,28,.13), rgba(238,233,225,0) 62%),
    radial-gradient(44% 50% at 96% 2%, rgba(120,110,95,.11), rgba(238,233,225,0) 60%);
}
.hero > *{position:relative;z-index:1}
.hero h1 span{color:var(--accent)}
.hero-grid{grid-template-columns:0.86fr 1.14fr !important;gap:clamp(28px,3.6vw,64px) !important;align-items:center}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr !important}}
.hero-shot{position:relative}
.hero-shot .ba-slider{aspect-ratio:4/3;height:auto;min-height:0}
@media(max-width:980px){.hero-shot .ba-slider{aspect-ratio:3/2}}
.hero-points li{font-size:14.5px;line-height:1.46}
.hero-points b{font-size:15px;margin-bottom:1px}
.hero-points .ic{background:var(--graphite);color:var(--accent-bright);border-radius:2px;font-family:var(--mono);font-size:11px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hero-actions .btn{flex:0 0 auto}
@media(max-width:620px){.hero-actions .btn{flex:1 1 100%;text-align:center}}
.price-tile{padding:13px 15px}
.price-tile .sum{font-size:clamp(19px,1.7vw,23px) !important;margin-top:3px;display:block}
.price-tile .per{font-size:11.5px;color:var(--ink-faint)}

/* Суммы не разрываются переносом посередине числа: «1 596 000 ₸».
   Правило намеренно вне медиазапроса: раньше оно лежало внутри
   @media(max-width:560px) и выше этой ширины не работало вовсе,
   хотя разделитель тысяч ставится на любом экране. */
.nw{white-space:nowrap}

/* Метка на кадре: без неё сгенерированный интерьер читается как снимок
   сданной квартиры, а сданных объектов у компании пока нет. */
.shot-note{
  position:absolute;right:10px;top:10px;z-index:2;
  font-family:var(--mono);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:#F2EEE6;background:rgba(26,25,23,.55);
  backdrop-filter:blur(6px);padding:4px 9px;border-radius:2px;pointer-events:none;
}

/* ── Фотополосы ──────────────────────────────────────────────────────────── */
.band{position:relative;min-height:clamp(260px,38vw,540px);background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:0 !important}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(26,25,23,.12) 0%, rgba(26,25,23,.74) 100%)}
.band .band-in{position:relative;z-index:1;width:min(var(--maxw), 100% - var(--pad-x)*2);margin:0 auto;padding-bottom:clamp(28px,3.4vw,56px)}
.band h2{color:#F7F4EE !important;max-width:17ch}
.band p{color:#D8D2C7;max-width:50ch;margin-top:10px}

/* ── Ползунок «до / после» ───────────────────────────────────────────────── */
.ba-slider{border-radius:2px;cursor:ew-resize;overflow:hidden;border:1px solid var(--line)}
.ba-slider img{-webkit-user-drag:none;user-select:none}
.ba-slider.dragging{cursor:grabbing}
.ba-handle{transition:transform .2s var(--ease)}
.ba-slider:hover .ba-handle{transform:scale(1.06)}
.ba-slider:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Появление при прокрутке ─────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none;transition:opacity .66s var(--ease-out), transform .66s var(--ease-out)}
.reveal-stagger > *{opacity:0;transform:translateY(14px)}
.reveal-stagger.in > *{opacity:1;transform:none;transition:opacity .58s var(--ease-out), transform .58s var(--ease-out)}
.reveal-stagger.in > *:nth-child(1){transition-delay:.02s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.08s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.14s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.20s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.26s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.32s}

/* ── Таблицы ─────────────────────────────────────────────────────────────── */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -2px}
.table-scroll table{min-width:620px}
.compare{background:var(--surface)}
.compare thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}

/* ── Мелочи ──────────────────────────────────────────────────────────────── */
.person{display:block}
hr,.divider{border-color:var(--line)}
a{transition:color .2s var(--ease)}
::selection{background:var(--accent-bright);color:var(--graphite)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media(max-width:640px){
  h1{font-size:12.5vw !important;max-width:none}
  h2{font-size:8vw !important}
  p,li{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .reveal,.reveal-stagger > *{opacity:1 !important;transform:none !important}
}

/* ═══ МОБИЛЬНАЯ ВЕРСИЯ ═══════════════════════════════════════════════════
   Главная правка порядка: на телефоне фото уходило вниз за три экрана
   текста, а цеплять должно сразу. Через display:contents распускаем обе
   колонки первого экрана в один поток и расставляем блоки по смыслу:
   заголовок → кадр → цены → детали → кнопки. */
@media(max-width:980px){
  /* align-items:stretch обязателен: от десктопного правила остаётся center,
     и тогда флекс-элемент с кадром сжимается по ширине в ноль. */
  .hero-grid{display:flex !important;flex-direction:column;gap:0 !important;align-items:stretch !important}
  .hero-grid > div{display:contents}
  .hero h1{order:1;margin-bottom:14px}
  .hero .lead{order:2;margin-bottom:22px}
  .hero-shot{order:3}
  .hero-caption{order:4;margin:12px 0 24px}
  .price-tiles{order:5;margin:0 0 22px !important}
  .hero-points{order:6;margin:0 0 26px !important}
  .hero-actions{order:7;margin:0 !important}
}

@media(max-width:640px){
  /* Три цены в строку: так видно сразу весь диапазон, а не по одной */
  .price-tiles{grid-template-columns:repeat(3,1fr) !important;gap:6px !important}
  .price-tile{padding:10px 8px}
  .price-tile .area{font-size:9.5px !important;letter-spacing:.06em !important}
  .price-tile .sum{font-size:15px !important;margin-top:2px}
  .price-tile .per{display:none}

  .hero{padding-block:32px 40px !important}
  .hero-shot .ba-slider{aspect-ratio:4/3}
  .hero-caption{flex-wrap:wrap;gap:6px}
  .hero-caption .tag{font-size:9.5px !important}

  section{padding-block:clamp(56px,14vw,84px) !important}
  .sec-head{margin-bottom:26px}
  .band{min-height:300px}
  .band .band-in{padding-bottom:24px}
  .band h2{max-width:none}

  /* Палец промахивается по мелким целям: минимум 48px по высоте */
  .btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:12px 20px}
  .nav{display:none}
  .strip-in{grid-template-columns:repeat(2,1fr) !important;gap:22px 16px !important;padding:26px 0 !important}
  .stat b{font-size:24px !important}

  /* Под липкой панелью не должно прятаться содержимое */
  body{padding-bottom:78px}
}

/* Липкая панель выезжает, когда первый экран пролистан: сразу на входе
   она закрывает кадр и мешает, а ниже по странице — помогает. */
.mobile-bar{transform:translateY(110%);transition:transform .34s var(--ease)}
.mobile-bar.on{transform:none}
@media (prefers-reduced-motion:reduce){.mobile-bar{transform:none}}

/* ═══ ДВИЖЕНИЕ ═══════════════════════════════════════════════════════════ */

/* Шапка прячется при листании вниз и возвращается при листании вверх —
   на телефоне это отдаёт экран содержимому. */
header.site{transition:transform .32s var(--ease), box-shadow .3s var(--ease)}
header.site.hide{transform:translateY(-101%)}

/* Кадр в полосе смещается медленнее страницы: глубина без тяжёлых
   библиотек, одним свойством. */
.band{background-attachment:scroll}
@media(min-width:981px) and (prefers-reduced-motion:no-preference){
  .band{background-attachment:fixed}
}

/* Микро-ссылка со стрелкой: стрелка уезжает вправо при наведении */
.arrow-link{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:1px solid var(--line-strong);
}
.arrow-link i{font-style:normal;transition:transform .3s var(--ease)}
.arrow-link:hover{color:var(--accent);border-color:var(--accent)}
.arrow-link:hover i{transform:translateX(6px)}

/* Ползунок при первом появлении сам показывает, что его можно тянуть */
@media (prefers-reduced-motion:no-preference){
  .ba-slider.hint .ba-handle{animation:nudge 1.6s var(--ease) 2}
}
@keyframes nudge{
  0%,100%{transform:translateX(0)}
  30%{transform:translateX(-9px)}
  60%{transform:translateX(9px)}
}

/* Сумма не должна разрываться: знак тенге уезжал на вторую строку */
.price-tile .sum{white-space:nowrap}
@media(max-width:640px){
  .price-tile .sum{font-size:13.5px !important;letter-spacing:-.03em !important}
  .price-tile .area{font-size:9px !important}
}

/* ── Переключатель языка ───────────────────────────────────────────────────
   Русская и казахская версии — две отдельные страницы, а не один документ
   с подменой текста: так работает поиск, так честно отдаётся hreflang
   и так страница не мигает при загрузке. Кнопка живёт в шапке рядом
   с телефоном и остаётся видимой на телефоне, где меню скрыто. */
.lang{
  display:flex;align-items:center;gap:2px;margin-left:18px;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  border:1px solid var(--line);border-radius:2px;padding:2px;flex:0 0 auto;
}
.nav + .lang{margin-left:18px}
.lang a,.lang .on{
  display:block;padding:4px 8px;text-decoration:none;line-height:1;border-radius:1px;
}
/* Неактивный язык — это и есть кнопка, поэтому он должен читаться
   как кнопка. Было --ink-faint: контраст 2,6:1 на кремовом, надпись
   выглядела отключённой, и «ҚАЗ» просто не замечали. */
.lang a{color:var(--ink);font-weight:500}
.lang a:hover{color:var(--graphite);background:var(--accent-bright)}
.lang .on{background:var(--graphite);color:var(--ground);font-weight:500}
.lang a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* На узком экране меню прячется — и переключатель уезжает к левому краю,
   иначе он прижимается к кнопке WhatsApp и в него трудно попасть пальцем. */
@media(max-width:1040px){
  .lang{margin-left:auto}
}


/* ── Кнопки связи: компактнее ──────────────────────────────────────────────
   Были два одинаково тяжёлых блока во всю ширину — на телефоне они
   занимали пятую часть экрана, а в шапке спорили с логотипом.
   Логика такая: WhatsApp — основное действие и держит ширину,
   звонок — короткая кнопка по содержимому рядом. */

/* Шапка: кнопка и телефон сжимаются под высоту строки, а не под палец —
   на десктопе палец не при чём.

   Обязательно внутри min-width: ниже 1040px базовая вёрстка прячет
   кнопку в шапке (её заменяет липкая панель снизу), а правило с display
   без медиазапроса эту команду перебивало — кнопка возвращалась,
   шапка становилась шире экрана, и страница ехала вбок на 111px. */
@media(min-width:1041px){
  .header-cta{gap:10px}
  .header-cta .btn-sm{
    min-height:34px;padding:0 14px;font-size:13px;letter-spacing:.01em;
    display:inline-flex;align-items:center;
  }
}
.header-phone{font-size:14px;letter-spacing:-.01em}

/* Липкая панель снизу */
.mobile-bar{gap:8px;padding:8px 12px}
.mobile-bar .btn{
  min-height:44px;font-size:14px;padding:0 14px;
  display:inline-flex;align-items:center;justify-content:center;
}
.mobile-bar .btn-ghost{flex:0 0 auto;padding:0 16px}   /* «Позвонить» — по тексту */
.mobile-bar .btn-primary{flex:1 1 auto}                 /* WhatsApp — забирает остаток */
@media(max-width:1040px){ body{padding-bottom:70px} }
@media(max-width:360px){
  .mobile-bar .btn{font-size:13px;padding:0 10px}
}

/* Узкая шапка: логотип, переключатель языка и номер должны уместиться
   в одну строку на 360px. Уменьшаем всё сразу, а не прячем номер —
   звонок здесь остаётся единственным быстрым действием, пока липкая
   панель снизу ещё не выехала. */
@media(max-width:560px){
  .header-in{gap:10px;height:58px}
  .logo .mark{width:30px;height:30px}
  .logo .wordmark{font-size:15px}
  .lang{margin-left:auto;font-size:10px;padding:1px;gap:1px}
  .lang a,.lang .on{padding:4px 7px}
  .header-phone{font-size:13px;letter-spacing:-.02em}
}
@media(max-width:400px){
  .logo .wordmark{font-size:14px}
  .header-phone{font-size:12.5px}
}

/* ═══ ТЕЛЕФОН ════════════════════════════════════════════════════════════
   Отдельный проход по узкому экрану. Страница длинная по сути — в ней
   девять этапов, состав работ и сравнение, — поэтому компактность здесь
   не про «убрать половину», а про плотность: меньше воздуха между
   блоками, короче строка, ниже строки списков, один столбец там, где
   два превращают текст в лесенку из двух слов.
   Блок идёт последним в файле, чтобы не спорить с правилами выше. */
@media(max-width:560px){

  /* — Ритм — */
  :root{--sect:58px;--pad-x:18px}
  .sec-head{margin-bottom:20px}
  h2{font-size:clamp(25px,6.8vw,30px) !important;line-height:1.06 !important;letter-spacing:-.03em !important}
  .lead{font-size:15.5px !important;line-height:1.5}
  .sec-head .lead{margin-top:8px}

  /* — Карточки и списки: ниже строки, меньше полей — */
  .card{padding:18px}
  .list li,.card ul li{padding:7px 0;font-size:14px;line-height:1.45;gap:9px}
  .pack-price{font-size:30px !important;margin:10px 0 2px !important}
  .pack-name{font-size:19px}
  .card h3{font-size:17px}

  /* — Один столбец там, где два дают по два слова в строке — */
  .grid-4{grid-template-columns:1fr !important}
  .control-item{padding:16px}

  /* — Кнопки во всю ширину: текст в одну строку — */
  .btn-wide{font-size:14.5px;padding:0 14px;min-height:46px}

  /* — Полосы с фото — */
  .band{min-height:236px}
  .band::after{background:linear-gradient(180deg,rgba(26,25,23,.20) 0%,rgba(26,25,23,.88) 100%)}
  .band .band-in{padding:0 18px 22px;width:100%}
  .band h2{font-size:23px !important;max-width:none}
  .band p{font-size:13.5px;line-height:1.45;margin-top:7px}

  /* — Квиз: подпись под ответом, а не сбоку —
       В два столбца «Больше 90 м²» и «посчитаем отдельно» ломались
       каждый на свои две строки и разъезжались по высоте. */
  .quiz-opt{flex-direction:column;align-items:flex-start;gap:3px;padding:12px 14px;text-align:left}
  .quiz-opt .hint{font-size:12px;text-align:left}
  .quiz-step{font-size:11px}

  /* — Таблица сравнения —
       Ужимать её по ширине экрана бессмысленно: колонки превращаются
       в столбики по одному слову. Даём нормальную ширину и листаем вбок. */
  .table-scroll{-webkit-overflow-scrolling:touch}
  .table-scroll table.compare{min-width:620px}
  .table-scroll table.compare th,
  .table-scroll table.compare td{font-size:13px;padding:10px 12px}

  /* — Форма — */
  .form-row{grid-template-columns:1fr !important}
  .field{margin-top:12px}

  /* — Этапы — */
  .stage{padding:14px 0}
  .stage h3{font-size:16px}
  .stage p{font-size:14px}
}

/* Свёрнутые списки на телефоне — см. js/mobile.js */
.list-more{
  margin-top:12px;width:100%;
  background:transparent;border:1px solid var(--line-strong);border-radius:2px;
  color:var(--ink);font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;padding:11px 14px;cursor:pointer;
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.list-more:hover{border-color:var(--ink);background:var(--surface-2)}
.list-more[hidden]{display:none}
@media(max-width:560px){
  .list.clamped > li:nth-child(n+7){display:none}
  .list.clamped > li:nth-child(6){border-bottom:0}
}

/* Подсказка о боковой прокрутке таблицы — только там, где она не влезает */
.scroll-hint{display:none}
@media(max-width:760px){
  .scroll-hint{
    display:block;margin:0 0 8px;
    font-family:var(--mono);font-size:11px;letter-spacing:.07em;
    text-transform:uppercase;color:var(--ink-faint);
  }
  .sec-dark .scroll-hint{color:rgba(247,244,238,.5)}
}

/* Карточки выбора: галочка в строку с заголовком, а не отдельной плашкой —
   так блок из четырёх пунктов занимает экран, а не два */
@media(max-width:560px){
  .control-item{
    display:grid;grid-template-columns:auto 1fr;gap:2px 12px;
    align-items:start;padding:14px 16px;
  }
  .control-item .ic{grid-row:span 2;width:26px;height:26px;font-size:12px;margin-top:2px}
  .control-item h3{grid-column:2;margin:0;font-size:16px}
  .control-item p{grid-column:2;margin:4px 0 0;font-size:14px;line-height:1.45}
}

/* Плашка процента в карточке платежа.
   Карточка — колоночный флекс, поэтому inline-grid всё равно растягивался
   во всю ширину и читался как полоса, а не как метка. */
.ic-pay{
  align-self:flex-start;
  border-radius:2px !important;
  font-family:var(--mono) !important;font-weight:500 !important;
  font-size:14px !important;letter-spacing:.04em;
  height:30px !important;min-width:0 !important;padding:0 13px !important;
  background:var(--graphite) !important;color:var(--accent-bright) !important;
}

/* Переключатель в подвале. Шапка уезжает вверх при прокрутке вниз,
   поэтому человеку, дочитавшему страницу до конца, язык переключить
   больше нечем. Дубль внизу закрывает этот разрыв. */
.lang-foot{margin:16px 0 0;border-color:rgba(246,242,236,.24);
  /* Блочный контейнер подвала растягивал флекс во всю колонку */
  width:max-content;align-self:flex-start}
footer .lang-foot a{color:var(--ground)}
footer .lang-foot a:hover{color:var(--graphite);background:var(--accent-bright)}
footer .lang-foot .on{background:var(--ground);color:var(--ink)}

/* ── Ширина на телефоне ───────────────────────────────────────────────────
   Отступы складывались трижды: поле страницы (18px внешнего + 20px
   внутреннего у .wrap) плюс поле карточки (18–28px). До текста в списке
   оставалось 102px от края, строка получала 216px из 390 — сорок пять
   процентов экрана уходило в пустоту, а текст ломался по два слова.

   Убираем двойное поле у .wrap и приводим все карточки к одному значению.
   Теперь: поле страницы 14px, поле карточки 16px, строка ~308px. */
@media(max-width:560px){
  :root{--pad-x:14px}
  .wrap{padding-left:0 !important;padding-right:0 !important}

  .card,.calc,.quiz,.promise,.doc,.person,.lead-block,.contract,
  .price-group > div,.control-item,.work-body{padding:16px !important}

  .quiz-opt{padding:12px 13px}
  .price-tile{padding:12px 11px}
  .band .band-in{padding:0 14px 22px}

  /* Разрывы между карточками тоже были рассчитаны на десктоп */
  .grid-2,.grid-3,.grid-4{gap:12px !important}

  /* Галочка в списке съедала ещё 22px на каждой строке */
  .list li,.card ul li{gap:8px}
  .list .mark,.card ul li .mark{min-width:9px}
}

/* Квиз в сетке расчёта.
   У .quiz стоит margin:0 auto — на отдельной странице это центрирование,
   но у грид-элемента автополя отключают растягивание, и блок садится
   по содержимому: 271px в колонке 347px на телефоне и заметно уже
   соседней карточки на десктопе. Внутри сетки поля убираем. */
#quiz-sec > .quiz{margin:0;width:100%}

/* Метка на фотополосе. У полосы своя система координат: текст прижат вниз,
   поэтому метку ставим в правый верхний угол самой секции. */
.band > .shot-note{right:14px;top:14px}
@media(max-width:560px){ .band > .shot-note{right:10px;top:10px;font-size:9px;padding:3px 7px} }