/* ---------- Шрифты ---------- */
/*
 * Unbounded и Golos Text лежат рядом с сайтом, а не грузятся с серверов Google.
 * Решение проекта: сайт открывается с диска и не должен ходить за шрифтом
 * на чужой сервер — на боевом хостинге это ещё и зависимость от чужой
 * доступности. Оба шрифта с открытой лицензией (SIL OFL).
 *
 * Файлы переменные: одно начертание покрывает весь диапазон веса, поэтому
 * их четыре, а не восемь. font-weight в @font-face задан диапазоном —
 * браузер сам берёт нужную ось. Подмножества разделены на кириллицу
 * и латиницу: страница на русском не тянет латинский файл вовсе.
 */

@font-face{
  font-family:"Unbounded"; font-style:normal; font-weight:200 500; font-display:swap;
  src:url(fonts/unbounded-cyrillic.woff2) format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:"Unbounded"; font-style:normal; font-weight:200 500; font-display:swap;
  src:url(fonts/unbounded-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:"Golos Text"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(fonts/golos-cyrillic.woff2) format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:"Golos Text"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(fonts/golos-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;
}

/* ---------- Палитра и базовые переменные ---------- */
/*
 * Тема «Вечерний приём». Пришла на смену тёплой бумажной «Известняк»
 * 09.08.2026: фотографии клиники сняты при дневном свете, но главное,
 * что продаёт клинику в посёлке, — вечерний и ночной приём при острой боли.
 * Тёмный фон даёт этому место, а снимок кабинета работает источником света.
 *
 * Все цвета — в переменных. Меняется тема правкой этого блока, больше нигде.
 */

:root{
  color-scheme:dark;

  --bg:#0D0E10;          /* фон страницы */
  --bg-2:rgba(255,255,255,.05);  /* ховер строк */
  --surface:#131417;     /* карточки, что отделяются от фона */

  --ink:#F2F0EB;         /* основной текст */
  --ink-strong:#FFFFFF;  /* цены, телефоны, вопросы */
  --ink-2:rgba(242,240,235,.66);
  --ink-3:rgba(242,240,235,.55);
  --ink-4:rgba(242,240,235,.45);
  --ink-5:rgba(242,240,235,.4);

  --accent:#8FD3D6;              /* мятный: номера, вечерний номер, кнопка */
  --accent-hover:#A9E1E3;
  --accent-wash:rgba(143,211,214,.07);
  --accent-line:rgba(143,211,214,.35);

  --line:rgba(255,255,255,.12);   /* линии таблиц */
  --line-2:rgba(255,255,255,.1);  /* линии секций */
  --line-3:rgba(255,255,255,.09); /* линии строк прайса */

  --ok:#8FD3D6;          /* «сейчас открыто» */

  --font-display:"Unbounded", system-ui, sans-serif;
  --font-text:"Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r:24px; --r-card:20px; --r-sm:16px; --r-chip:10px; --r-btn:999px;

  /* Запас под липкую шапку при переходе по якорю. Без него раздел встаёт
     в самый верх окна и шапка срезает его заголовок. */
  --anchor-gap:88px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Сброс и основа ---------- */

*{box-sizing:border-box}

/*
 * Атрибут hidden скрывает элемент правилом браузера [hidden]{display:none},
 * у которого специфичность нулевая. Любое наше .btn{display:inline-flex}
 * его перебивает, и «скрытый» блок остаётся на странице.
 * На этом держится весь проект: пустые разделы, кнопка WhatsApp и «Как доехать»
 * прячутся именно атрибутом. Без !important кнопка «Как доехать» висела бы
 * на странице контактов без ссылки на карту. НЕ УДАЛЯТЬ.
 */
[hidden]{display:none !important}

html{scroll-behavior:smooth}

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-text); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* Подложки и фото вылезают за пределы секций, горизонтальной прокрутки быть не должно */
  overflow-x:hidden;
}

h1,h2,h3,h4{font-family:var(--font-display); font-weight:200; letter-spacing:-.02em; margin:0}
h1{font-size:clamp(31px,4.3vw,62px); line-height:1.11}
h2{font-size:clamp(26px,3vw,44px); line-height:1.15}
h3{font-weight:300; font-size:26px; letter-spacing:-.01em; line-height:1.25}
h4{font-weight:300; font-size:18px; letter-spacing:0}

p{margin:0}
a{color:var(--accent); text-decoration:none; transition:color .25s var(--ease)}
a:hover{color:var(--accent-hover)}
img{max-width:100%; display:block}
::selection{background:var(--accent); color:var(--bg)}

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

.shell{max-width:1440px; margin:0 auto; padding:0 64px}
section.shell{padding-top:92px; padding-bottom:0}
/* Запас под липкую шапку. Селектор по атрибуту, а не по именам:
   новый раздел получает отступ сам, без правки этого файла. */
section[id]{scroll-margin-top:var(--anchor-gap)}

/* Служебная микроподпись: uppercase, разрядка, мелкий кегль */
.eyebrow{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-5); display:block;
}

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

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-text); font-size:16px; font-weight:600; line-height:1;
  padding:17px 34px; border-radius:var(--r-btn); border:1px solid transparent;
  cursor:pointer; white-space:nowrap; transition:background .25s var(--ease),
    border-color .25s var(--ease), color .25s var(--ease);
}
.btn-primary{background:var(--accent); color:var(--bg); border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover); border-color:var(--accent-hover); color:var(--bg)}
.btn-white{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.btn-white:hover{background:#fff; border-color:#fff; color:var(--bg)}
.btn-ghost{background:none; color:var(--ink); border-color:rgba(242,240,235,.35)}
.btn-ghost:hover{border-color:var(--ink); color:var(--ink)}

/* ---------- Шапка ---------- */

.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(13,14,16,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent; transition:border-color .3s var(--ease);
}
/* Линия под шапкой появляется только после прокрутки: на первом экране
   она резала бы фотографию пополам. Класс stuck вешает app.js. */
.topbar.stuck{border-bottom-color:var(--line-2)}
.topbar .shell{display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:22px; padding-bottom:22px}

.logo{
  font-family:var(--font-display); font-weight:300; font-size:20px; letter-spacing:.02em;
  color:var(--ink); text-transform:lowercase; display:inline-flex; align-items:center; gap:9px;
}
.logo:hover{color:var(--ink)}
/* Знак «зуб с крестом» вместо прежнего плюса-символа (19.08.2026).
   PNG, а не шрифтовой символ: рисунок фирменный, подобрать его глифом нельзя.
   Файл белый с прозрачным фоном — фон шапки #0D0E10, непрозрачный квадрат
   картинки был бы виден. Ширина и высота проставлены и в разметке: без них
   строка логотипа дёргается, пока картинка грузится. */
.logo .mark{width:28px; height:28px; flex:none; display:block}

.menu{display:flex; gap:30px; font-size:15px}
.menu a{color:var(--ink-2)}
.menu a:hover{color:var(--ink-strong)}
.menu a.active{color:var(--ink-strong); border-bottom:1px solid var(--accent); padding-bottom:2px}

.top-actions{display:flex; align-items:center; gap:18px}
.phone{font-size:17px; color:var(--ink)}
.phone:hover{color:var(--ink-strong)}
.top-actions .btn{font-size:15px; padding:12px 24px}

.burger{display:none; width:26px; height:20px; background:none; border:0; padding:0; cursor:pointer; flex-direction:column; justify-content:space-between}
.burger span{display:block; height:1.5px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

.scroll-line{height:1px; background:var(--accent); width:0; transition:width .1s linear}

/* ---------- Первый экран ---------- */

.hero{position:relative; min-height:820px; display:flex; flex-direction:column; justify-content:center; overflow:hidden}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:64% 46%; filter:saturate(.5) brightness(.58)}
/* Диагональный градиент: слева текст лежит на почти сплошном фоне,
   справа кабинет остаётся виден. Нижняя растушёвка сводит фото в фон
   страницы, чтобы под первым экраном не было видно границы кадра. */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(13,14,16,0) calc(100% - 200px), rgba(13,14,16,1) 100%),
    linear-gradient(112deg, rgba(13,14,16,.97) 0%, rgba(13,14,16,.9) 40%,
      rgba(13,14,16,.34) 76%, rgba(13,14,16,.62) 100%);
}
.hero .shell{position:relative; z-index:1; padding-top:104px; padding-bottom:92px}
.hero-text{max-width:1020px; display:flex; flex-direction:column; gap:34px}

.hero-place{display:flex; align-items:center; gap:11px; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent)}
.hero-place::before{content:""; width:26px; height:1px; background:var(--accent); display:block; flex:0 0 auto}

.lede{font-size:clamp(17px,1.8vw,24px); line-height:1.4; color:var(--ink-2); max-width:580px}
/* Слоган на «О клинике». Размером с обычный .lede он звучал как продолжение
   служебного текста; здесь он единственная живая строка на странице реквизитов,
   и набран заголовочным шрифтом, светлее фоном — чтобы читался вторым после H1,
   а не наравне с перечнем документов. */
.lede-slogan{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(23px,2.5vw,33px); line-height:1.25; letter-spacing:-.015em;
  color:var(--ink-strong); max-width:540px; margin:0;
  /* Отбивка слева линией и кавычкой — приём для выделенной мысли. Автора
     под строкой нет намеренно: слоган выбрал Кирилл, отец этих слов
     не говорил, и подпись именем была бы приписыванием.
     Кавычка ставится псевдоэлементом, а не символом в тексте: в разметке
     остаётся чистая строка, которую можно скопировать без лишних знаков. */
  padding-left:32px; position:relative;
}
.lede-slogan::before{
  content:"«"; position:absolute; left:-2px; top:-.12em;
  font-family:var(--font-display); font-weight:300; font-size:1.9em;
  line-height:1; color:var(--accent); opacity:.55;
}
.lede-slogan::after{content:"»"; color:var(--accent); opacity:.55; margin-left:.06em}
/* Служебная приписка под слоганом: перечень «реквизиты, лицензия, надзорные
   органы» идёт второй строкой и тише. Одним размером они спорят друг с другом. */
.lede-note{font-size:15px; line-height:1.6; color:var(--ink-4); max-width:520px; margin-top:20px}

.hero-tels{display:flex; align-items:baseline; gap:28px; flex-wrap:wrap; padding-top:6px}
.hero-phone{font-family:var(--font-display); font-weight:300; font-size:clamp(26px,3vw,38px); color:var(--ink-strong); letter-spacing:-.015em}
.hero-phone:hover{color:#fff}
.hero-phone-2{font-size:19px; color:var(--ink-3)}
.hero-phone-2:hover{color:var(--ink)}

.hero-cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.hero-note{font-size:14px; color:var(--ink-4); max-width:210px; line-height:1.45}

.open-status{font-size:14px; color:var(--ok); display:flex; align-items:center; gap:8px; margin:0}
.open-status::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; display:block}
/* Состояние скрипт пишет в АТРИБУТ data-open-status, а не в класс.
   Селектор по классу молча не срабатывает, и «закрыто» светится тем же
   мятным, что и «открыто», — то есть сообщает ровно обратное. */
.open-status[data-open-status="closed"]{color:var(--ink-4)}

/* ---------- Лента режима работы ---------- */

/* overflow:hidden обрезает заливку вечернего номера по краю экрана.
   Без него псевдоэлемент .hs-emerg::after вылезал за правую границу
   и давал горизонтальную прокрутку всей страницы — замер на 1700 px:
   страница была 2420 px. */
.hours-strip{border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); position:relative; z-index:1; background:var(--bg); overflow:hidden}
/* Четыре ячейки: будни, суббота, воскресенье, острая боль. Выходной стоит
   отдельной колонкой, а не приклеен к субботе через точку — иначе непонятно,
   какое время к какому дню относится.
   Доли неравные: дням хватает узких колонок, там короткие строки. Вечернему
   номеру нужна широкая — подпись «Зуб разболелся вечером или в выходной»
   при равной доле рассыпалась на пять строк, а телефон рядом набран крупно
   и не переносится. */
/* Колонки дней размечены auto, а не долями: доли делят ширину поровну, не глядя
   на содержимое, и «9:00 – 14:00» ломалось пополам — при первой попытке
   на будни, при второй на субботу. auto даёт каждому дню ровно столько,
   сколько нужно строке, остаток забирает вечерний номер.
   minmax(0,1fr) у последней колонки обязателен: без него длинная подпись
   не даёт сетке сжаться и страница уезжает вправо. */
.hours-strip .shell{display:grid; grid-template-columns:auto auto auto minmax(0,1fr); padding:0}
.hs-item{padding:28px 40px; display:flex; flex-direction:column; gap:6px; border-right:1px solid var(--line-2)}
.hs-item:first-child{padding-left:64px}
/* nowrap: «9:00 – 14:00» — единое значение, разорванное пополам оно читается
   как две разные цифры. Строка короткая, места ей всегда хватает. */
.hs-value{font-size:21px; color:var(--ink); white-space:nowrap}
.hs-emerg{
  padding:28px 64px 28px 40px; display:flex; align-items:center; justify-content:space-between;
  gap:24px; background:var(--accent-wash); border-right:0;
  position:relative;
}
/* Заливка вправо до края экрана. Лента лежит внутри .shell с max-width:1440px,
   и на широком мониторе справа от вечернего номера оставался чёрный прямоугольник:
   подложка обрывалась там, где кончалась колонка. Псевдоэлемент продолжает
   тот же фон за границу контейнера. 50vw хватает с запасом при любой ширине.
   Слева так делать не нужно — там начало ленты совпадает с началом .shell. */
.hs-emerg::after{
  content:""; position:absolute; left:100%; top:0; bottom:0; width:50vw;
  background:var(--accent-wash); pointer-events:none;
}
/* Подпись про вечернюю боль длинная: с обычной для eyebrow разрядкой .16em
   она ломалась на три строки и жалась к телефону. Здесь разрядка меньше. */
.hs-emerg .eyebrow{color:var(--accent); letter-spacing:.1em; line-height:1.5; max-width:230px}
.hs-emerg-note{font-size:14px; color:var(--ink-3)}
.hs-tel{font-family:var(--font-display); font-weight:300; font-size:28px; color:var(--ink-strong); letter-spacing:-.01em; white-space:nowrap}
.hs-tel:hover{color:#fff}

/* ---------- Направления ---------- */
/*
 * Пять строк во всю ширину: номер, название, описание, стрелка.
 * Разметку рисует app.js — менять её нельзя, перестройка идёт стилями.
 * Номер приходит из порядка в content.js, а не лежит в данных:
 * при перестановке направлений нумерация не разъедется.
 */

.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:22px}
.sec-head p{font-size:16px; color:var(--ink-3); margin-top:10px; max-width:640px}
.sec-link{font-size:15px; color:var(--accent); border-bottom:1px solid rgba(143,211,214,.5); padding-bottom:3px; white-space:nowrap}

/* Пять плиток в ряд. Раньше это были строки во всю ширину — пять одинаковых
   строк подряд читались монотонно, и картинке в них не было места. */
.services{display:grid; grid-template-columns:repeat(5, 1fr); gap:16px}
.svc{
  display:flex; flex-direction:column; gap:12px; padding:0 0 22px;
  border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden;
  color:var(--ink); transition:border-color .25s var(--ease), background .25s var(--ease);
}
a.svc:hover{background:var(--bg-2); border-color:var(--accent-line); color:var(--ink)}

/* Картинки направлений сгенерированы по одной штуке и пришли каждая на своём
   светлом фоне. Фильтр их не перекрашивает — фоны и без того в одной холодной
   гамме, а перевод в общую мяту (grayscale + sepia + hue-rotate) отнимал у дёсен
   розовый, у руки телесный цвет и оставлял пять одинаковых пятен, в которых
   объект не читался. Проверено обоими вариантами вживую 10.08.2026,
   выбран этот.
   Здесь фильтр только приглушает: яркость .6 сажает светлый фон картинки вровень
   с фоном страницы, контраст возвращает объекту объём, saturate .85 снимает
   с зелёной и синей плиток лишнюю звонкость.
   МЕНЯЕШЬ КАРТИНКИ — проверь глазами: на тёмных исходниках яркость надо
   возвращать к 1, иначе плитки станут дырами. */
.svc-pic{display:block; background:var(--surface); border-bottom:1px solid var(--line)}
.svc-pic img{
  width:100%; aspect-ratio:16 / 10; object-fit:cover; display:block;
  filter:saturate(.85) brightness(.6) contrast(1.18) hue-rotate(-6deg);
  transition:filter .35s var(--ease), transform .5s var(--ease);
}
a.svc:hover .svc-pic img{filter:saturate(1) brightness(.74) contrast(1.18) hue-rotate(-6deg); transform:scale(1.03)}

.svc .num{font-size:12px; letter-spacing:.12em; color:var(--accent); padding:18px 18px 0}
.svc h3{font-family:var(--font-display); font-weight:300; font-size:21px; letter-spacing:-.01em; margin:0; padding:0 18px; line-height:1.25}
.svc p{font-size:14px; line-height:1.45; color:var(--ink-3); padding:0 18px; flex:1}
.svc .go{font-size:16px; color:var(--ink-5); padding:0 18px; transition:transform .3s var(--ease)}
a.svc:hover .go{transform:translateX(4px); color:var(--accent)}

/* ---------- Врачи ---------- */
/* Раздел обязателен по приказу Минздрава 118н и до 19.08.2026 стоял пустым,
   поэтому оформления у него не было вовсе. Карточка держится линией, как
   остальные блоки темы, а не тенью. */

.docs{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; padding-top:44px}

.doc{
  border:1px solid var(--line); border-radius:var(--r-card); padding:28px;
  display:flex; flex-direction:column; gap:22px;
}

.doc-top{display:flex; gap:16px; align-items:flex-start}

/* Фото не обязательно: без него в кружке стоят инициалы, и карточка
   остаётся законченной, а не с дырой на месте портрета. */
.ava{
  flex:none; width:56px; height:56px; border-radius:999px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-wash); border:1px solid var(--accent-line);
  font-family:var(--font-display); font-weight:300; font-size:19px; color:var(--accent);
}
.ava img{width:100%; height:100%; object-fit:cover}

.doc h3{font-size:20px; line-height:1.25}
.doc-role{font-size:15px; line-height:1.5; color:var(--accent); margin-top:5px}
.doc-exp{font-size:14px; color:var(--ink-4); margin-top:4px}

.doc-block{border-top:1px solid var(--line-3); padding-top:16px}
.doc-block h4{
  font-family:var(--font-text); font-size:12px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-5); margin-bottom:9px;
}
.doc-block ul{list-style:none; padding-left:0; margin:0; display:flex; flex-direction:column; gap:9px}
.doc-block li{font-size:14px; line-height:1.55; color:var(--ink-2)}
.doc-hours{font-size:14px; line-height:1.55; color:var(--ink-2)}

/* Срок действия аккредитации — приглушённее самой специальности:
   пациенту важнее, по чему врач работает, а не до какого числа бумага. */
.doc-till{color:var(--ink-4); white-space:nowrap}

/* ---------- Частые вопросы ---------- */

/*
 * Раскрывающийся список. Все десять ответов сразу — это несколько экранов
 * подряд, особенно на телефоне; открытым остаётся первый, про острую боль
 * вне графика — он же самый нужный.
 */
.faq{display:grid; grid-template-columns:1fr 1fr; gap:0 56px; align-content:start}
.qa{border-top:1px solid var(--line)}
.qa-q{
  font-family:var(--font-text); font-size:19px; color:var(--ink-strong); line-height:1.35;
  background:none; border:0; padding:22px 0; text-align:left; width:100%; cursor:pointer;
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  transition:color .25s var(--ease);
}
.qa-q:hover{color:var(--accent)}
.qa-q .sign{
  font-size:20px; color:var(--accent); flex:0 0 auto; line-height:1;
  transition:transform .3s var(--ease);
}
.qa.open .qa-q .sign{transform:rotate(45deg)}

/* Высоту анимируем через grid-template-rows: с height:auto переход не работает,
   а фиксированную высоту пришлось бы считать скриптом. */
.qa-a{
  display:grid; grid-template-rows:0fr; overflow:hidden;
  transition:grid-template-rows .35s var(--ease);
  font-size:15px; line-height:1.6; color:var(--ink-3);
}
.qa.open .qa-a{grid-template-rows:1fr}
.qa-a > div{min-height:0}
.qa-a p{margin:0; padding-bottom:22px}

/* ---------- Фото-блок и запись ---------- */

.photo-cta{display:grid; grid-template-columns:540px 1fr; gap:52px; align-items:center; padding-top:84px; padding-bottom:92px}
.photo-frame{margin:0; position:relative}
.photo-frame img{width:100%; height:360px; object-fit:cover; object-position:50% 14%; border-radius:var(--r-card); filter:saturate(.6) brightness(.8)}
/* Затемнение под подписью: фасад снят на солнце, и белая подпись на светлой
   штукатурке не читалась. Градиент лежит поверх фото, но под текстом. */
.photo-frame::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:120px;
  border-radius:0 0 var(--r-card) var(--r-card); pointer-events:none;
  background:linear-gradient(180deg, rgba(13,14,16,0), rgba(13,14,16,.85));
}
.photo-frame figcaption{
  position:absolute; left:18px; bottom:16px; z-index:1;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.9);
}

.cta{display:flex; flex-direction:column; gap:18px}
.cta p{font-size:17px; line-height:1.55; color:var(--ink-2); max-width:470px}
.cta-tels{display:flex; flex-direction:column; padding-top:6px; max-width:470px}
.ct-row{display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--line)}
.ct-row:last-child{border-bottom:0}
.ct-row span{font-size:15px; color:var(--ink-4)}
.ct-row a{font-size:20px; color:var(--ink-strong)}
.ct-row a.accent{color:var(--accent)}
.cta-btns{display:flex; gap:12px; flex-wrap:wrap; padding-top:8px}

/* Врезка «записаться» на внутренних страницах */
.cta-card{
  border:1px solid var(--accent-line); border-radius:var(--r); padding:40px;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  background:var(--accent-wash); margin:56px 0 80px;
}
.cta-card h2{font-size:32px}
.cta-card p{font-size:16px; color:var(--ink-2); max-width:560px; margin-top:8px}

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

footer{border-top:1px solid var(--line-2); margin-top:0}
footer .shell{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-top:44px; padding-bottom:44px}
.foot-col{display:flex; flex-direction:column; gap:3px; font-size:13px; line-height:1.6; color:var(--ink-4)}
.foot-col a{color:var(--ink-4)}
.foot-col a:hover{color:var(--ink)}
.foot-logo{font-family:var(--font-display); font-weight:300; font-size:18px; color:var(--ink); text-transform:lowercase; padding-bottom:4px}
.foot-col h4{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-5); font-family:var(--font-text); font-weight:600; padding-bottom:6px}
.foot-links{display:flex; flex-direction:column; gap:4px}
.foot-legal{font-size:13px; line-height:1.6; color:var(--ink-4); max-width:520px; text-align:right}

/* ---------- Внутренние страницы: общая шапка раздела ---------- */

.page-head{padding-top:72px; padding-bottom:0; display:grid; grid-template-columns:1fr 420px; gap:56px; align-items:end}
.page-head h1{font-size:clamp(32px,4vw,56px)}
.page-head p{font-size:18px; line-height:1.55; color:var(--ink-3); max-width:620px; margin-top:20px}
/* Страница без второй колонки: заголовок и подзаголовок идут в одну колонку,
   а сетка с пустой правой половиной оставляла бы дыру в 420 px. */
.page-head-solo{display:block; padding-bottom:0}

/* ---------- Прайс ---------- */

.price-tools{display:flex; flex-direction:column; gap:12px; padding-top:28px}
.price-search-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.price-search{
  flex:1; min-width:260px; display:flex; align-items:center; gap:12px;
  border:1px solid rgba(255,255,255,.22); border-radius:var(--r-btn); padding:14px 20px;
  transition:border-color .25s var(--ease);
}
.price-search:focus-within{border-color:var(--accent)}
.price-search input{
  flex:1; background:none; border:0; color:var(--ink);
  font-family:var(--font-text); font-size:16px; padding:0;
}
.price-search input::placeholder{color:var(--ink-5)}
.price-search input:focus{outline:none}
.price-search button{
  background:none; border:0; color:var(--ink-5); cursor:pointer; font-size:15px; padding:0 2px;
}
.price-search button:hover{color:var(--ink)}
.price-search-row .btn{font-size:15px; padding:14px 26px}

.price-hints{display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.hint-label{font-size:13px; color:var(--ink-5)}
.hint{
  font-size:13px; color:var(--ink-2); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-btn); padding:6px 13px; background:none; cursor:pointer;
  font-family:var(--font-text); transition:border-color .25s var(--ease), color .25s var(--ease);
}
.hint:hover{border-color:var(--accent); color:var(--accent)}

.price-tip{font-size:14px; color:var(--ink-4); padding-top:26px}
.price-updated{font-size:14px; color:var(--ink-4); line-height:1.55; max-width:760px; margin-top:22px}

.price-nav{display:flex; gap:8px; flex-wrap:wrap; padding-top:40px}
.price-nav a{
  font-size:14px; color:var(--ink-2); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-btn); padding:9px 16px;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.price-nav a:hover{border-color:var(--accent); color:var(--accent)}

.price-list{display:flex; flex-direction:column; gap:56px; padding-top:56px}
.price-group{scroll-margin-top:var(--anchor-gap); display:flex; flex-direction:column; gap:6px}
/* Заголовок раздела — h3 в разметке, которую рисует app.js; размер задаём здесь,
   чтобы не трогать рендер: на нём завязаны поиск, расчёт и печать. */
.price-group h3{font-family:var(--font-display); font-weight:300; font-size:30px; letter-spacing:-.015em; margin:0}
.price-desc{font-size:15px; line-height:1.55; color:var(--ink-3); max-width:760px; margin-bottom:14px}

/* Широкую таблицу прокручиваем внутри её обёртки: горизонтальная прокрутка
   всей страницы читается как поломка вёрстки. */
.table-wrap{overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch}
.price-group table{width:100%; border-collapse:collapse}
.price-group table.cols{min-width:560px}

.price-group thead th{
  font-family:var(--font-text); font-weight:400; text-align:right;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-5);
  padding:0 0 10px 18px; line-height:1.35; border-bottom:1px solid rgba(255,255,255,.2);
  vertical-align:bottom;
}
.price-group thead td{border-bottom:1px solid rgba(255,255,255,.2)}

.price-group tbody tr{border-bottom:1px solid var(--line-3); transition:background .2s var(--ease)}
.price-group tbody tr:hover{background:var(--bg-2)}
.price-group td{padding:16px 0; vertical-align:baseline}
.price-group .nm{font-size:17px; line-height:1.4; color:var(--ink)}
.price-group .note{display:block; font-size:14px; color:rgba(242,240,235,.42); margin-top:3px}
.price-group td.num{
  text-align:right; white-space:nowrap; padding-left:20px;
  font-size:17px; color:var(--ink-strong); font-variant-numeric:tabular-nums;
}
.price-group table.cols td.num{min-width:150px}

/* Кнопка добавления позиции в расчёт. Выглядит как цена, пока её не трогали:
   таблица цен не должна читаться как набор кнопок. */
.price-group td.num .pick{
  background:none; border:1px solid transparent; border-radius:var(--r-btn);
  color:var(--ink-strong); font-family:var(--font-text); font-size:17px;
  padding:5px 12px; cursor:pointer; white-space:nowrap; font-variant-numeric:tabular-nums;
  transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.pick:hover{border-color:var(--accent); color:var(--accent)}
.pick.on{background:var(--accent); border-color:var(--accent); color:var(--bg)}
.pick.on::before{content:"✓\00a0"}
.pick:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.price-empty{padding:40px 0; font-size:16px; color:var(--ink-3)}

/* Панель предварительного расчёта. Появляется, только когда пациент нажал
   хотя бы одну цену. Это не форма: ничего не сохраняется и никуда не уходит,
   сообщение отправляет сам пациент из своего мессенджера. */
.calc-bar{
  position:sticky; bottom:0; z-index:30; background:rgba(13,14,16,.94);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line); padding:16px 0;
}
.calc-inner{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.calc-sum{display:flex; flex-direction:column; gap:3px}
.calc-sum b{font-family:var(--font-display); font-weight:300; font-size:24px; color:var(--ink-strong); letter-spacing:-.01em}
.calc-count{font-size:14px; color:var(--ink-3)}
.calc-note{font-size:13px; color:var(--ink-4); max-width:420px; line-height:1.45}
.calc-btns{display:flex; gap:10px; flex-wrap:wrap}
.calc-btns .btn{font-size:15px; padding:14px 26px}

/* Запасной блок для страницы без скрипта: прайс рисует JS, и без него
   на странице должен остаться хотя бы телефон. */
.card-big{font-family:var(--font-display); font-weight:300; font-size:26px; margin-top:8px}
.card-big a{color:var(--ink-strong)}
.card-big a:hover{color:var(--accent)}

/* ---------- О клинике ---------- */

.split{display:grid; grid-template-columns:1fr 560px; align-items:stretch}
.split-text{padding:80px 56px 80px 0; display:flex; flex-direction:column; gap:20px; justify-content:center}
.split-photo{position:relative; min-height:480px}
.split-photo img{width:100%; height:100%; object-fit:cover; object-position:74% 42%; filter:saturate(.5) brightness(.62)}
.split-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(13,14,16,.95) 0%,rgba(13,14,16,.25) 45%,rgba(13,14,16,.35) 100%)}
.split-photo figcaption{position:absolute; left:32px; bottom:26px; z-index:1; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.8)}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:64px; padding-top:80px}
.spec{display:flex; flex-direction:column}
.spec h2{font-family:var(--font-display); font-weight:300; font-size:28px; letter-spacing:-.015em; margin-bottom:16px}
.spec-row{display:flex; justify-content:space-between; gap:24px; padding:15px 0; border-top:1px solid var(--line)}
.spec-row:last-of-type{border-bottom:1px solid var(--line)}
.spec-row dt, .spec-key{font-size:15px; color:var(--ink-4); margin:0}
.spec-row dd, .spec-val{font-size:16px; text-align:right; margin:0; color:var(--ink)}
.spec-link{font-size:15px; color:var(--accent); padding-top:14px}

/* ---------- Отзывы ---------- */
/*
 * Виджет Яндекса — кросс-доменный iframe: тёмной темы у него нет, и покрасить
 * его снаружи невозможно. Фильтр invert тоже не годится — вместе с фоном
 * инвертировались бы аватарки авторов. Поэтому светлое пятно не маскируется,
 * а оформляется: белый лист со скруглением на тёмном фоне, рядом — текст
 * в типографике сайта. Ширина 300–760px и высота от 500px — рекомендация
 * самого Яндекса; без явных размеров iframe схлопывается в блок 300×150.
 */
/* Текст справа выровнен по центру виджета: при выравнивании по верху под ним
   оставалась полоса пустоты в половину экрана, и блок читался недоделанным. */
/* minmax(0,…) у обеих колонок обязателен: по умолчанию колонка не сжимается
   меньше своего содержимого, а у кнопки стоит white-space:nowrap — на 375px
   она распирала сетку до 360px и вся страница уезжала вправо. */
.rev-layout{display:grid; grid-template-columns:minmax(0,560px) minmax(0,1fr); gap:64px; align-items:center}
.rev-wrap{
  position:relative;
  border-radius:var(--r-card); overflow:hidden; background:#fff;
  /* Светлой рамки у листа нет (убрана 22.08.2026): её роль — отделять
     белый прямоугольник от фона — взяло на себя затемнение краёв ниже,
     а вместе они давали двойной контур, светлый поверх растворённого края.
     Свечение снизу оставлено: оно сажает лист на фон, а не обводит его. */
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
/* Затемнение краёв (22.08.2026). Белый лист по периметру уходит в фон
   страницы, вместо жёсткой границы — растворение. Тень внутренняя и лежит
   на отдельном слое ПОВЕРХ iframe: сам виджет чужой, дотянуться внутрь
   нельзя, а наложить сверху можно.
   `pointer-events:none` обязателен — без него слой перехватил бы клики,
   и кнопки «Оставить отзыв» и «Больше отзывов» перестали бы нажиматься.
   `border-radius:inherit` повторяет скругление листа, иначе тень легла бы
   прямоугольником и по углам вылезли бы белые треугольники.
   Значение выбрано Кириллом 22.08.2026 из трёх собранных вживую.
   Оно сильное: верхняя строка виджета и нижняя кнопка слегка подтоплены.
   Дальше не углублять — следом тонет уже текст самих отзывов, а он здесь
   единственное, ради чего блок стоит. */
.rev-wrap::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 80px 30px rgba(13,14,16,.85);
}
/* Фильтр invert на виджете пробовали 12.08.2026 и сняли 22.08.2026: вместе
   с белым фоном он выворачивал аватарки пациентов, а это чужие лица внутри
   чужого iframe — поправить их нельзя. Виджет остаётся светлым листом,
   как задумано выше. */
.rev-widget iframe{display:block; width:100%; height:620px; border:0}
.rev-col{display:flex; flex-direction:column; gap:16px}
.rev-side{display:flex; flex-direction:column; gap:24px; align-items:flex-start}
.rev-lead{
  font-family:var(--font-display); font-weight:300; font-size:26px; line-height:1.4;
  letter-spacing:-.01em; color:var(--ink-2); max-width:440px; margin:0;
}
.rev-note{font-size:15px; line-height:1.6; color:var(--ink-4); max-width:400px}
/* Подпись под виджетом: юридическая оговорка, читается второй, а не первой */
.rev-fine{font-size:13px; line-height:1.6; color:var(--ink-5); margin:0; max-width:560px}

/* Оценка крупной цифрой. Мятным акцентом, а не белым: рядом стоит белая
   кнопка, и две одинаково светлые массы спорили бы за внимание.
   line-height:.9 — у крупного кегля обычная строка оставляет над цифрой
   воздух, из-за которого она висит выше подписи, чем нужно. */
.rev-score{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(64px,7.5vw,104px); line-height:.9; letter-spacing:-.03em;
  color:var(--accent); margin:0;
}
.rev-score-note{font-size:16px; line-height:1.6; color:var(--ink-3); margin:0; max-width:340px}
.rev-score-date{font-size:13px; color:var(--ink-5)}

/* Виды работ по лицензии. Заголовок группы — это длинная канцелярская строка
   из выписки, поэтому он мелкий и приглушённый: читают сами работы, а не
   формулировку про «амбулаторные условия». */
.license-works{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start}
.lw-group{border:1px solid rgba(255,255,255,.14); border-radius:var(--r-card); padding:26px 28px}
.lw-group h3{font-family:var(--font-text); font-size:14px; font-weight:400; line-height:1.5;
  letter-spacing:0; color:var(--ink-4); margin:0 0 4px}
.lw-group ul{list-style:none; margin:0; padding:0}
.lw-group li{font-size:16px; line-height:1.5; color:var(--ink); padding:13px 0; border-top:1px solid var(--line)}

.cards-2{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.card{border:1px solid rgba(255,255,255,.14); border-radius:var(--r-card); padding:28px; display:flex; flex-direction:column; gap:12px}
.card .eyebrow{color:var(--accent); letter-spacing:.14em}
.card-name{font-size:16px; line-height:1.5; color:rgba(242,240,235,.85)}
.card-note{font-size:15px; line-height:1.55; color:var(--ink-3)}
.card a{font-size:15px}
.card .tel{font-size:16px; color:var(--ink-strong)}

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

.contacts{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; padding-top:80px}
.contacts-col{display:flex; flex-direction:column; gap:26px}
.c-block{display:flex; flex-direction:column; gap:6px}
.c-address{font-size:26px; line-height:1.3; color:var(--ink)}
.c-region{font-size:15px; color:var(--ink-3)}
.c-tel{font-family:var(--font-display); font-weight:300; font-size:34px; color:var(--ink-strong); letter-spacing:-.015em}
.c-tel:hover{color:#fff}
.c-tel-2{font-size:22px; color:var(--ink-2)}

.emerg-card{
  border:1px solid rgba(143,211,214,.4); border-radius:var(--r-card); padding:24px 28px;
  display:flex; flex-direction:column; gap:8px; background:var(--accent-wash);
}
.emerg-card .eyebrow{color:var(--accent); letter-spacing:.14em}
.emerg-tel{font-family:var(--font-display); font-weight:300; font-size:30px; color:var(--ink-strong); letter-spacing:-.01em}
.emerg-note{font-size:15px; line-height:1.55; color:var(--ink-3); max-width:460px}

.hours-table{display:flex; flex-direction:column; max-width:420px}
.hours-row{display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-top:1px solid var(--line)}
.hours-row:last-child{border-bottom:1px solid var(--line)}
.hours-row span:first-child{font-size:16px; color:var(--ink-3)}
.hours-row span:last-child{font-size:17px; color:var(--ink)}
.hours-row.off span:last-child{color:var(--ink-3)}

.no-form{font-size:14px; color:var(--ink-4); max-width:460px; line-height:1.5}

/* ---------- Вспомогательное ---------- */

.to-top{
  position:fixed; right:24px; bottom:96px; z-index:40; width:44px; height:44px;
  border-radius:50%; border:1px solid var(--line); background:rgba(13,14,16,.85);
  backdrop-filter:blur(8px); color:var(--ink); display:grid; place-items:center;
  cursor:pointer; transition:border-color .25s var(--ease), color .25s var(--ease);
}
.to-top:hover{border-color:var(--accent); color:var(--accent)}
.to-top svg{width:20px; height:20px}

/* Липкая полоса звонка — только на телефоне */
.callbar{display:none}

/* ---------- Анимации ---------- */
/*
 * Включаются только при html.js — класс вешает первая строка app.js.
 * Безусловный opacity:0 при сбое скрипта оставил бы пустую страницу.
 * Текст показывается один раз (app.js снимает наблюдение), фото и фоны
 * не анимируются вовсе: на тёмной теме мигание заметнее, чем на светлой.
 */
html.js .reveal{opacity:0; transform:translateY(10px)}
html.js .reveal.in{opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease)}
html.js .stagger > *{opacity:0; transform:translateY(10px)}
html.js .stagger.in > *{opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease)}
html.js .stagger.in > *:nth-child(2){transition-delay:.06s}
html.js .stagger.in > *:nth-child(3){transition-delay:.12s}
html.js .stagger.in > *:nth-child(4){transition-delay:.18s}
html.js .stagger.in > *:nth-child(5){transition-delay:.24s}
html.js .stagger.in > *:nth-child(6){transition-delay:.3s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
  html.js .reveal, html.js .stagger > *{opacity:1 !important; transform:none !important}
}

/* ---------- Планшет ---------- */

@media (max-width:1100px){
  .shell{padding:0 40px}
  /* Лента распадается на два ряда: вечерний номер набран крупно и не переносится,
     а в сетке 1fr 1fr 1.3fr он вылезал за правый край и давал горизонтальную
     прокрутку всей страницы. Замер на 768: страница была 811 px.
     Три дня встают в один ряд, вечерний номер — во второй на всю ширину.
     При двух колонках воскресенье оставалось одно с пустотой справа. */
  .hours-strip .shell{grid-template-columns:1fr 1fr 1fr}
  .hs-item:first-child{padding-left:40px}
  .hs-item{padding:24px 24px}
  .hs-emerg{
    grid-column:1 / -1; padding:24px 40px; border-top:1px solid var(--line-2);
    flex-wrap:wrap;
  }
  .hs-emerg .eyebrow{max-width:none}
  .hs-item:nth-child(3){border-right:0}
  .split{grid-template-columns:1fr}
  .split-text{padding:64px 0 40px}
  .split-photo{min-height:320px}
  .photo-cta{grid-template-columns:1fr; gap:32px}
  .contacts{grid-template-columns:1fr; gap:40px}
  .two-col{grid-template-columns:1fr; gap:48px}
  .cards-2{grid-template-columns:1fr}
  .license-works{grid-template-columns:1fr}
  /* Виджет и текст рядом требуют около 1100px: ниже колонка с отзывами
     сжимается уже рекомендованных Яндексом 300px и ломает вёрстку внутри. */
  .rev-layout{grid-template-columns:minmax(0,1fr); gap:28px}
  .rev-wrap{max-width:560px}
  /* Кнопке разрешён перенос: её надпись длиннее узкого экрана, а nowrap
     из общего правила .btn растягивал сетку и давал горизонтальную прокрутку. */
  .rev-side .btn{white-space:normal; text-align:center}
  .rev-lead{font-size:23px}
  .page-head{grid-template-columns:1fr; gap:28px; align-items:start}
  .faq{grid-template-columns:1fr; gap:0}
  /* Пять плиток в ряд требуют примерно 1100 px: ниже название направления
     переносится в три строки и карточки разъезжаются по высоте. */
  .services{grid-template-columns:repeat(3, 1fr)}
  .docs{grid-template-columns:repeat(2, 1fr)}
}

/* ---------- Узкое окно ----------
   Шапке в полном виде нужно 1063 px (замер 13.08.2026: логотип 122 + меню 473
   + телефон с кнопкой 292 + отступы). Бургер же включался только с 760 px,
   и между 760 и 1063 шапка разъезжалась: «О клинике» переносилось на две
   строки, номер телефона рвался посередине.
   Полоса 1000–1060 узкая, но реальная — окно браузера на ноутбуке. Здесь
   шапка ужимается, а не прячется: уходит кнопка WhatsApp (телефон рядом
   никуда не делся и кликается), меню становится теснее и мельче.
   Ниже 1000 включается бургер — шести пунктам меню там уже не встать в строку
   без переносов, сколько ни ужимай. */
@media (max-width:1060px){
  .topbar .shell{gap:16px}
  .menu{gap:19px; font-size:14px}
  .top-actions{gap:12px}
  .top-actions .btn{display:none}
  .phone{font-size:15px; white-space:nowrap}
  .logo{font-size:17px}
  .logo .mark{width:24px; height:24px}
}

/* Бургер включается с 1000 px, а не с 760, как было. Шесть пунктов меню
   ниже тысячи не встают в строку, сколько их ни ужимай, — «О клинике»
   и «Направления» рвались пополам.
   Здесь только шапка: остальная вёрстка (отступы страницы, сетки карточек,
   лента режима) переключается по-прежнему на 760. Раньше эти правила лежали
   в общем мобильном блоке, и поднять порог целиком было нельзя — планшет
   получил бы телефонные отступы и одноколоночные сетки. */
@media (max-width:1000px){
  /* Меню скрывается атрибутом hidden, который ставит app.js, — display:none
     здесь не пишем. Раньше стояло `.menu{display:none}` плюс `.menu.open
     {display:flex}`, но класс open не вешает никто: скрипт всегда работал
     через hidden. Из-за этого бургер на телефоне снимал hidden, а меню
     оставалось невидимым — не открывалось вовсе. Найдено 13.08.2026.
     Порог 1000 продублирован в app.js (menuBreakpoint) — меняешь здесь,
     меняй и там, иначе в разнице появится полоса, где меню висит
     развёрнутым под шапкой. */
  .menu{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0; background:var(--bg);
    border-bottom:1px solid var(--line); padding:8px 40px 20px;
  }
  .menu a{padding:14px 0; border-bottom:1px solid var(--line-3); font-size:16px}
  /* Бургер уходит вправо: в разметке он стоит вторым, чтобы с клавиатуры
     до него доходили раньше меню, а глазами его ищут в правом углу. */
  .burger{display:flex; order:3}
  .top-actions{order:2}
  .topbar .shell{position:relative}
}

/* ---------- Телефон ---------- */

@media (max-width:760px){
  .shell{padding:0 20px}
  section.shell{padding-top:56px}

  /* Раскладку меню и бургер задаёт блок 1000 px выше — здесь только то,
     что на телефоне отличается: отступы по краю экрана и кегли. */
  .menu{padding:8px 20px 20px}
  .menu a{font-size:17px}
  .topbar .shell{padding-top:16px; padding-bottom:16px}
  .phone{font-size:14px}
  .logo{font-size:16px}
  .logo .mark{width:22px; height:22px}

  .hero{min-height:640px}
  .hero-bg{object-position:50% 44%; filter:saturate(.5) brightness(.55)}
  /* На узком экране диагональ не работает — текст занимает всю ширину,
     поэтому затемнение идёт сверху вниз. */
  .hero::after{
    background:
      linear-gradient(180deg, rgba(13,14,16,.92) 0%, rgba(13,14,16,.6) 40%, rgba(13,14,16,.95) 100%);
  }
  .hero .shell{padding-top:44px; padding-bottom:40px}
  .hero-text{gap:22px}
  .hero-place{font-size:11px; letter-spacing:.18em}
  .hero-place::before{display:none}
  .hero-tels{flex-direction:column; align-items:flex-start; gap:6px}
  .hero-cta{flex-direction:column; align-items:stretch}
  .hero-cta .btn{width:100%}
  .hero-note{max-width:none}

  .hours-strip .shell{grid-template-columns:1fr}
  .hs-item{padding:16px 20px !important; flex-direction:row; justify-content:space-between; align-items:center; border-right:0; border-bottom:1px solid var(--line-3)}
  .hs-emerg{padding:22px 20px; flex-direction:column; align-items:flex-start; gap:8px}
  .hs-tel{font-size:25px}

  .sec-head{flex-direction:column; align-items:flex-start; gap:10px}
  /* На телефоне плитки идут в две колонки: в одну они превращаются
     в пять экранов подряд, и до вопросов никто не доскроллит. */
  .services{grid-template-columns:repeat(2, 1fr); gap:12px}
  .docs{grid-template-columns:1fr; gap:14px}
  .doc{padding:22px}
  .svc{padding-bottom:16px}
  .svc h3{font-size:17px; padding:0 14px}
  .svc p{font-size:13px; line-height:1.4; padding:0 14px}
  .svc .num{font-size:11px; padding:14px 14px 0}
  .svc .go{font-size:15px; padding:0 14px}
  .svc-pic img{aspect-ratio:16 / 11}

  .qa-q{font-size:17px}
  .qa-a{font-size:14px}

  .photo-cta{padding-top:36px; padding-bottom:40px}
  .photo-frame img{height:200px; border-radius:var(--r-sm)}
  .cta-btns{flex-direction:column}
  .cta-btns .btn{width:100%}
  .cta-card{padding:26px 20px; margin:32px 0 40px}
  .cta-card h2{font-size:26px}

  .page-head{padding-top:32px}
  .price-nav{padding-top:26px}
  .price-list{padding-top:26px; gap:36px}
  .price-group h3{font-size:21px}

  /* Таблица с колонками на телефоне прокручивается вбок внутри обёртки.
     Разворачивать её в чипы значило бы переписать рендер, на котором висят
     поиск и расчёт, — а прокрутка внутри блока стоила одну строку. */
  .price-group table.cols{min-width:520px}
  .price-group .nm{font-size:15px}
  .price-group .note{font-size:13px}
  .price-group td{padding:14px 0}
  .price-group td.num{font-size:15px; padding-left:14px}
  .price-group td.num .pick{font-size:15px; padding:4px 9px}
  .price-group thead th{font-size:11px; padding-left:14px}

  .contacts{padding-top:36px}
  .c-tel{font-size:26px}
  .c-address{font-size:20px}
  .emerg-tel{font-size:25px}

  footer .shell{flex-direction:column; gap:24px; padding-bottom:96px}
  .foot-legal{text-align:left; max-width:none}

  .to-top{bottom:88px; right:16px; width:40px; height:40px}

  /* Липкая полоса звонка: в шапке кнопки не помещаются, а терять записи нельзя */
  .callbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:45; gap:8px;
    padding:12px 16px; background:rgba(13,14,16,.92);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
  }
  .callbar .btn{flex:1; font-size:15px; padding:15px 16px}
  .calc{bottom:72px}
}

/* ---------- Печать ---------- */
/*
 * Прайс печатают на стойку: цены меняются, и распечатка с сайта всегда свежее
 * бумажной. Печатаем на белом — тёмный фон съел бы картридж и не читался бы.
 *
 * .print-head объявлен ДО @media print намеренно: специфичность у правил
 * одинаковая, и побеждает то, что ниже. Поменяешь местами — с распечатки
 * прайса пропадёт телефон, а печатают его на стойку.
 */

.print-head{display:none}

@media print{
  :root{
    --bg:#fff; --ink:#000; --ink-strong:#000; --ink-2:#333; --ink-3:#444;
    --ink-4:#555; --ink-5:#666; --line:#ccc; --line-2:#ddd; --line-3:#e5e5e5;
    --accent:#000; --accent-wash:transparent;
  }
  body{background:#fff; color:#000; font-size:11pt}
  .topbar, .hero, .hours-strip, .callbar, .to-top, .calc, .price-nav,
  .price-search, .cta-card, .photo-cta, .burger, .split-photo{display:none !important}
  section.shell{padding-top:0}
  .shell{padding:0; max-width:none}
  html.js .reveal, html.js .stagger > *{opacity:1 !important; transform:none !important}
  .price-group{break-inside:auto}
  .price-row{break-inside:avoid; border-bottom:1px solid #ddd}
  .pr-cell{color:#000}
  a{color:#000}
  /* Телефон и адрес поверх распечатки: прайс со стойки без них бесполезен */
  .print-head{display:block; margin-bottom:12pt; font-size:11pt}
  /* На бумаге свечение вокруг виджета ни к чему — только рамка.
     Затемнение краёв тоже снимаем: тень рассчитана на тёмный фон
     страницы, на белом листе она выглядит грязным ореолом. */
  .rev-wrap{box-shadow:none; border:1px solid #ccc}
  .rev-wrap::after{display:none}
}