/* ============================================================
   Imperia Dent — стили страниц, которых нет на главной:
   услуги и семь направлений, цены, акции, контакты.

   Подключается ПОСЛЕ site.css, поэтому здесь же лежит типографический
   хвост: капс заголовков и lining-nums для новых классов. Правило про
   цифры обязано быть последним в файле — сокращённое свойство font:
   сбрасывает font-variant-numeric (грабля 16.08).

   Каркас общий: любая вертикаль считается от .wrap (--wrap + --pad-x).
   Своих левых краёв здесь нет ни у одного блока.
   ============================================================ */

/* ================= ШАПКА СТРАНИЦЫ =================
   До прокрутки шапка сайта прозрачная: знак кремовый, под ним тёмный
   градиент. Над светлым фоном это выглядело бы грязным пятном, поэтому
   каждая внутренняя страница начинается тёмной полосой. */
.phero{
  position:relative;
  background:
    radial-gradient(120% 120% at 82% 8%, rgba(168,132,95,.30), transparent 60%),
    radial-gradient(80% 90% at 6% 96%, rgba(201,168,126,.16), transparent 62%),
    linear-gradient(158deg, var(--umber-deep) 0%, var(--umber) 58%, #453629 100%);
  color:var(--cream);
  /* 🔴 08.09: «- 34px» — это ровно высота снятой ленты прототипа. Отступ
     первого экрана подбирался, когда лента стояла над шапкой и опускала
     её на 34px. Лента ушла, шапка поднялась, и воздух под ней вырос на те
     же 34px на КАЖДОЙ подстранице (замерено: было 77 — стало 111). Это
     побочный эффект, а не решение, поэтому пропорция возвращается.
     Понравится просторнее — убрать «- 34px» здесь и в @media 640. */
  padding-top:calc(var(--hdr-h) + clamp(54px,7.4vw,104px) - 34px);
  padding-bottom:clamp(52px,6.6vw,96px);
  overflow:hidden;
}
.phero-in{display:grid;gap:clamp(28px,4vw,64px);align-items:center}
/* Первый экран страницы цен (01.09): ролик в фоне. Вотермарк «процессов»
   вшит слева внизу — текст держим наверху, вуаль плотнее слева и сверху,
   кнопка звука в правом верхнем углу (правый нижний занят чатом). */
/* padding-top намеренно НЕ переопределяем: штатный отступ .phero уже
   посчитан выше, вместе с поправкой на снятую ленту прототипа.
   🔴 Править отступ здесь или ниже по файлу НЕЛЬЗЯ — правило того же веса,
   стоящее ниже, молча перебьёт базовое (специфичность — грабля номер один
   проекта). Меняем только само базовое правило. */
.phero--video{isolation:isolate;min-height:max(88svh,49vw);
  display:flex;align-items:flex-start}
.phero--video .cine-media{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0}
.phero--video .phero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(47,37,30,.93) 0%,rgba(47,37,30,.8) 30%,rgba(47,37,30,.42) 58%,rgba(47,37,30,.16) 78%,rgba(47,37,30,.28)),
    linear-gradient(180deg,rgba(47,37,30,.5),transparent 38%)}
.phero--video .wrap{position:relative;z-index:2;width:100%}
.phero--video .vsound{top:calc(var(--hdr-h) + clamp(14px,2vh,26px));bottom:auto;
  right:clamp(16px,3vw,34px)}
/* 02.09: два мобильных варианта (ролик полосой; ролик contain с размытой
   подложкой) владелец отклонил — «верни как было». На телефоне ролик
   остаётся фоном cover, как на десктопе. Без обрезки вертикальный экран
   горизонтальным кадром не заполнить: нужен ролик 9:16 от заказчика. */
.phero--split .phero-in{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
.phero-col{max-width:44ch}
.phero--split .phero-col{max-width:none}
.phero .eyebrow{color:var(--bronze-lt)}
.phero h1{
  font:400 var(--t-name)/1.1 var(--disp);
  margin-top:16px;
  max-width:17ch;
}
.phero .claim{
  margin-top:16px;
  font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.9vw,25px);
  line-height:1.34;color:var(--bronze-lt);max-width:36ch;
  text-wrap:balance;
}
.phero .lead{
  margin-top:clamp(16px,1.8vw,22px);
  font-size:var(--t-lead);line-height:1.66;color:var(--cream-soft);max-width:56ch;
}
.phero-price{
  margin-top:clamp(20px,2.4vw,28px);
  padding-top:18px;border-top:1px solid var(--line-dark);
  font-size:clamp(22px,2.5vw,31px);font-weight:500;color:var(--cream);
}
.phero-price small{
  display:block;margin-top:6px;
  font-size:13px;font-weight:400;letter-spacing:.02em;color:var(--cream-faint);
}
.phero .cta{margin-top:clamp(24px,3vw,34px);display:flex;flex-wrap:wrap;gap:12px}
.btn-on-dark{border-color:var(--line-dark);color:var(--cream)}
.btn-on-dark:hover{background:var(--cream);border-color:var(--cream);color:var(--umber)}
/* До прокрутки шапка стоит на тёмной полосе: тёмная кнопка на ней пропадает.
   Прокрутили — шапка стала стеклянной, и тёмная кнопка снова верна.
   Файл подключают только внутренние страницы, главной это правило не касается. */
body:not(.scrolled) .hdr .btn-solid{background:var(--cream);color:var(--umber)}
body:not(.scrolled) .hdr .btn-solid:hover{background:#fff}
.phero-fig{
  position:relative;border-radius:var(--r-photo);overflow:hidden;
  aspect-ratio:4/5;max-height:min(62vh,560px);
  box-shadow:0 34px 80px rgba(20,14,10,.42);
}
.phero-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 16%}
/* Портретный кроп 4:5 режет групповые кадры по краям — для них своя пропорция. */
.phero-fig--wide{aspect-ratio:3/2;max-height:none}
.phero-fig--wide img{object-position:50% 42%}

/* Цифры вместо картинки — первый экран страницы «Цены». */
.phero-facts{
  border:1px solid var(--line-dark);border-radius:var(--r-card);
  background:rgba(20,14,10,.22);padding:clamp(22px,2.4vw,30px);
}
.phero-facts .k{
  font-size:11px;font-weight:600;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--bronze-lt);
}
.phero-facts ul{margin-top:6px}
.phero-facts li + li{border-top:1px solid var(--line-dark)}
.phero-facts a{display:block;padding:16px 0;transition:color var(--d-fast) var(--e)}
.phero-facts a:hover{color:var(--bronze-lt)}
.phero-facts .n2{
  display:block;font-size:12.6px;font-weight:600;letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--cream);
}
.phero-facts .v{display:block;margin-top:7px;font-size:clamp(19px,1.9vw,24px);font-weight:500;
  color:var(--cream);font-variant-numeric:lining-nums}
.phero-facts .u{display:block;margin-top:4px;font-size:12.4px;color:var(--cream-faint)}
.phero-facts .f{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line-dark);
  font-size:13px;line-height:1.5;color:var(--bronze-lt);
}

/* ================= ХЛЕБНЫЕ КРОШКИ ================= */
.crumbs{
  padding-block:clamp(18px,2vw,26px);
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-size:12.6px;letter-spacing:.06em;color:var(--ink-mute);
}
/* Кнопка «← Назад» (01.09): капсула перед крошками, заметнее самих крошек. */
.crumbs .crumb-back{display:inline-flex;align-items:center;gap:4px;
  padding:7px 15px;margin-right:8px;border:1px solid var(--line);border-radius:100px;
  color:var(--bronze-ink);font-weight:600;letter-spacing:.04em;
  transition:border-color var(--d-fast) var(--e),color var(--d-fast) var(--e)}
.crumbs .crumb-back:hover{border-color:var(--bronze);color:var(--bronze)}
.crumbs a{transition:color var(--d-fast) var(--e)}
.crumbs a:hover{color:var(--bronze-ink)}
.crumbs i{font-style:normal;opacity:.5}
.crumbs [aria-current]{color:var(--ink)}

/* ================= ТЕКСТОВЫЙ БЛОК ================= */
.prose-grid{display:grid;gap:clamp(24px,3.4vw,60px);align-items:start}
@media (min-width:1000px){
  .prose-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
  .prose-grid .sec-head{margin-bottom:0;position:sticky;top:calc(var(--hdr-h) + 30px)}
}
.prose p{font-size:var(--t-lead);line-height:1.72;color:var(--ink-soft);max-width:62ch}
.prose p + p{margin-top:1.1em}
.sec--dark .prose p{color:var(--cream-soft)}

/* ================= ЭТАПЫ =================
   Нумерованный маршрут лечения. Номер — не декор: пациент читает
   «сколько всего шагов и на каком я». */
.steps{
  display:grid;gap:clamp(16px,1.9vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  counter-reset:step;
}
.steps li{
  position:relative;padding:clamp(24px,2.6vw,32px);
  background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r-card);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  transition:transform var(--d-base) var(--e),box-shadow var(--d-base) var(--e);
}
.steps li:hover{transform:translateY(-4px);box-shadow:var(--sh-card)}
.sec--dark .steps li{background:rgba(246,236,220,.05);border-color:var(--line-dark)}
.steps .n{
  display:block;font-size:12.6px;font-weight:600;letter-spacing:.2em;
  color:var(--bronze-ink);
}
.sec--dark .steps .n{color:var(--bronze-lt)}
.steps h3{margin-top:12px;font-size:var(--t-h3);line-height:1.24}
.steps p{margin-top:10px;font-size:14.8px;line-height:1.62;color:var(--ink-soft)}
.sec--dark .steps p{color:var(--cream-soft)}

/* ================= ЦЕНЫ =================
   Главная цифра слева, разбор справа. Один экран — одна мысль:
   «пакет стоит столько, а вот из чего складывается всё остальное». */
.price-grid{display:grid;gap:clamp(20px,2.6vw,34px);align-items:start}
@media (min-width:980px){
  .price-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
}
.price-main{
  background:var(--umber);color:var(--cream);border-radius:var(--r-card);
  padding:clamp(28px,3.2vw,42px);
  position:relative;overflow:hidden;
}
.price-main::after{
  content:"";position:absolute;inset:auto -40% -60% auto;width:70%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(201,168,126,.22),transparent 68%);
  pointer-events:none;
}
.price-main .eyebrow{color:var(--bronze-lt)}
.price-main .v{
  margin-top:14px;font-size:clamp(28px,3.4vw,44px);font-weight:500;line-height:1.1;
}
.price-main .u{margin-top:12px;font-size:14.6px;line-height:1.55;color:var(--cream-soft)}
.price-main .note{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line-dark);
  font-size:13.6px;line-height:1.6;color:var(--cream-faint);
}
.price-main .btn{margin-top:24px}

.ptable{display:grid}
.prow{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;
  padding:clamp(14px,1.5vw,18px) 0;border-bottom:1px solid var(--line-soft);
}
.prow:first-child{border-top:1px solid var(--line-soft)}
.pn{font-size:15px;line-height:1.5;color:var(--ink)}
.pn small{
  display:block;margin-top:4px;font-size:12.6px;line-height:1.45;color:var(--ink-mute);
}
.pv{font-size:15.4px;font-weight:500;color:var(--bronze-ink);white-space:nowrap;
  font-variant-numeric:tabular-nums}
/* п.33 «деликатно выровнять услуги»: тонкий выносной пунктир связывает
   название с ценой. Без него у строк разной длины правая колонка
   выглядит рваной. Приём из бумажных прейскурантов, поэтому уместен.
   На узком экране пунктир не рисуем — там цена уходит под название. */
@media (min-width:760px){
  .prow{position:relative}
  .prow .pn::after{content:'';position:absolute;left:0;right:0;bottom:.42em;
    border-bottom:1px dotted rgba(51,41,31,.28);z-index:0}
  .prow .pn > *,.prow .pn{position:relative}
  .prow .pn{background:transparent}
  .prow .pn span,.prow .pn small{position:relative;z-index:1;background:var(--paper);padding-right:8px}
  .sec--sand .prow .pn span,.sec--sand .prow .pn small{background:var(--sand)}
  .prow .pv{position:relative;z-index:1;background:var(--paper);padding-left:10px}
  .sec--sand .prow .pv{background:var(--sand)}
}
.ptable-note{
  margin-top:18px;font-size:12.8px;line-height:1.6;color:var(--ink-mute);
}
.ptable-note a{color:var(--bronze-ink);text-decoration:underline}

.pkg-inc{
  margin-top:clamp(28px,3.2vw,42px);padding:clamp(24px,2.8vw,36px);
  background:var(--sand);border-radius:var(--r-card);
}
.sec--sand .pkg-inc{background:var(--paper)}
.pkg-inc h3{font-size:var(--t-h3)}
.pkg-inc ul{
  margin-top:16px;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.pkg-inc li{position:relative;padding-left:22px;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.pkg-inc li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;
  border:1.5px solid var(--bronze);
}

/* Группы прейскуранта на странице «Цены» */
.pgroups{display:grid;gap:clamp(30px,3.6vw,52px)}
@media (min-width:1120px){.pgroups{grid-template-columns:1fr 1fr;column-gap:clamp(40px,4vw,72px)}}
.pgroup h3{font-size:var(--t-h3);padding-bottom:14px;border-bottom:1px solid var(--line)}
.pgroup .ptable{margin-top:2px}
.pgroup-note{margin-top:14px;font-size:12.8px;line-height:1.6;color:var(--ink-mute)}

/* ================= КАРТОЧКИ УСЛУГ ================= */
/* 02.09: было auto-fit — на 1440 получалось 4+1 с дыркой в ряду.
   Пять направлений ложатся ровно 3+2; карточки крупнее, фото заметнее. */
.svc-grid{
  display:grid;gap:clamp(16px,1.9vw,24px);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:1080px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.svc-grid{grid-template-columns:1fr}}
.svc{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r-card);
  transition:background var(--d-base) var(--e),color var(--d-base) var(--e),
    transform var(--d-base) var(--e),box-shadow var(--d-base) var(--e),border-color var(--d-base) var(--e);
}
.svc:hover{background:var(--umber);border-color:var(--umber);color:var(--cream);
  transform:translateY(-5px);box-shadow:var(--sh-lift)}
/* 02.09 владелец: «фото не полные». Рамка 16/10 резала по бокам широкие
   кадры заказчика (1.85 и 1.83) — стало 16/9, теряется 4% вместо 14%.
   Три промо-кадра портретные (0.82) и в ландшафтную плашку целиком не
   войдут никогда: у них точка кадрирования подобрана по улыбке. */
.svc-ph{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--sand-deep)}
/* 01.09: точка кадрирования опущена 30%→42% — у портретных промо-кадров
   (лицо сверху, улыбка в середине) при 30% в тизер попадал глаз пациентки
   крупным планом вместо улыбки. */
.svc-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  transition:transform var(--d-slow) var(--e)}
/* У кадра виниров улыбка в нижней трети — общая точка кадрирования давала
   в тизере глаз пациентки крупным планом. Селектор по файлу: специфичность
   выше мобильных правил, порядок не важен. */
.svc-ph img[src*="viniry"],.pkg-ph img[src*="viniry"]{object-position:50% 78%}
.svc:hover .svc-ph img{transform:scale(1.045)}
.svc-txt{display:flex;flex-direction:column;flex:1;padding:clamp(22px,2.3vw,30px)}
.svc h3{font-size:var(--t-h3);line-height:1.22}
.svc .hook{margin-top:11px;font-size:14.6px;line-height:1.6;color:var(--ink-soft);flex:1}
.svc:hover .hook{color:var(--cream-soft)}
.svc .price{
  margin-top:18px;padding-top:15px;border-top:1px solid var(--line-soft);
  font-size:15px;font-weight:500;color:var(--bronze-ink);
}
.svc:hover .price{color:var(--bronze-lt);border-color:var(--line-dark)}
.svc .price small{
  display:block;margin-top:5px;font-size:12.6px;font-weight:400;line-height:1.45;color:var(--ink-mute);
}
.svc:hover .price small{color:var(--cream-faint)}
.svc .svc-doc{margin-top:12px;font-size:13px;color:var(--ink-mute)}
.svc:hover .svc-doc{color:var(--cream-faint)}
.svc .go{
  margin-top:16px;display:flex;align-items:center;gap:8px;
  font-size:13.8px;font-weight:500;color:var(--bronze-ink);
}
.svc:hover .go{color:var(--bronze-lt)}
.svc .go .arr{transition:transform var(--d-base) var(--e)}
.svc:hover .go .arr{transform:translateX(5px)}

/* ================= ПАКЕТНЫЕ ПРЕДЛОЖЕНИЯ ================= */
.pkgs{display:grid;gap:clamp(18px,2.2vw,28px)}
@media (min-width:900px){.pkgs{grid-template-columns:repeat(3,1fr)}}
.pkg{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--sh-card);
  transition:transform var(--d-base) var(--e),box-shadow var(--d-base) var(--e);
}
.pkg:hover{transform:translateY(-5px);box-shadow:var(--sh-lift)}
.pkg-ph{display:block;aspect-ratio:9/11;overflow:hidden;background:var(--sand-deep)}
.pkg-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;
  transition:transform var(--d-slow) var(--e)}
.pkg:hover .pkg-ph img{transform:scale(1.04)}
.pkg-txt{display:flex;flex-direction:column;flex:1;padding:clamp(24px,2.5vw,32px)}
.pkg h3{font-size:var(--t-h3);line-height:1.22}
.pkg .claim{
  margin-top:10px;font-family:var(--serif);font-style:italic;
  font-size:16.5px;line-height:1.4;color:var(--bronze-ink);
}
.pkg .d{margin-top:14px;font-size:14.6px;line-height:1.62;color:var(--ink-soft)}
.pkg .price{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);
  font-size:19px;font-weight:500;color:var(--ink);
}
.pkg .price small{
  display:block;margin-top:5px;font-size:12.8px;font-weight:400;color:var(--ink-mute);
}
.pkg .inc{margin-top:16px;display:grid;gap:8px;flex:1}
.pkg .inc li{position:relative;padding-left:20px;font-size:13.8px;line-height:1.55;color:var(--ink-soft)}
.pkg .inc li::before{
  content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;
  border:1.5px solid var(--bronze);
}
.pkg .acts{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.pkg .acts .btn{padding:13px 20px;font-size:14.4px}

/* ================= ВРАЧ НАПРАВЛЕНИЯ ================= */
.docmini-list{display:grid;gap:clamp(20px,2.4vw,32px)}
.docmini{
  display:grid;gap:clamp(20px,2.6vw,38px);align-items:center;
  background:var(--paper);border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--sh-card);
}
@media (min-width:820px){.docmini{grid-template-columns:minmax(0,.36fr) minmax(0,1fr)}}
.docmini-fig{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--sand-deep)}
/* 01.09 владелец: «фото не всё в рамку заходит». Рамка 16/10 резала
   портрет врача (3:4) пополам на планшете и телефоне. 4/5 оставляет
   срез 6% — кадр практически целиком. */
@media (max-width:819px){.docmini-fig{aspect-ratio:4/5}}
.docmini-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;
  transition:transform var(--d-slow) var(--e)}
.docmini-fig:hover img{transform:scale(1.035)}
.docmini-txt{padding:clamp(22px,2.4vw,34px);padding-left:0}
@media (max-width:819px){.docmini-txt{padding-left:clamp(22px,2.4vw,34px)}}
.docmini h3{margin-top:12px;font-size:clamp(20px,2vw,27px);line-height:1.2}
.docmini h3 a:hover{color:var(--bronze-ink)}
.docmini .spec{margin-top:10px;font-size:14.6px;color:var(--bronze-ink)}
.docmini .exp{margin-top:6px;font-size:13.6px;color:var(--ink-mute)}
.docmini .about{margin-top:14px;font-size:15px;line-height:1.62;color:var(--ink-soft);max-width:60ch}
.docmini .acts{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.docmini .acts .btn{padding:13px 22px;font-size:14.6px}

/* ================= ОБОРУДОВАНИЕ ================= */
.eqp{
  display:grid;gap:clamp(16px,1.9vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
}
.eqp li{
  padding:clamp(22px,2.4vw,30px);
  border:1px solid var(--line-dark);border-radius:var(--r-card);
  background:rgba(246,236,220,.045);
}
.eqp h3{font-size:var(--t-h3);line-height:1.24}
.eqp p{margin-top:10px;font-size:14.6px;line-height:1.6;color:var(--cream-soft)}

/* ================= ОПЛАТА, ПРОПУСК ================= */
.paycards{
  display:grid;gap:clamp(16px,1.9vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
}
.paycard{
  padding:clamp(24px,2.6vw,32px);border-radius:var(--r-card);
  background:var(--glass);border:1px solid var(--glass-line);
}
.sec--dark .paycard{background:rgba(246,236,220,.05);border-color:var(--line-dark)}
.paycard h3{font-size:var(--t-h3);line-height:1.24}
.paycard p{margin-top:11px;font-size:14.8px;line-height:1.62;color:var(--ink-soft)}
.sec--dark .paycard p{color:var(--cream-soft)}

/* ================= УСЛОВИЯ АКЦИЙ ================= */
.terms{display:grid;gap:14px;max-width:78ch}
.terms li{
  position:relative;padding-left:28px;
  font-size:15.4px;line-height:1.66;color:var(--ink-soft);
}
.terms li::before{
  content:"";position:absolute;left:0;top:.66em;width:11px;height:11px;border-radius:50%;
  border:1.5px solid var(--bronze);
}

/* ================= КОНТАКТЫ ================= */
.cnt-grid{
  display:grid;gap:clamp(16px,1.9vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
/* Шесть карточек: три в ряд читаются как таблица, четыре оставляли
   рваный второй ряд из двух. */
@media (min-width:1000px){.cnt-grid{grid-template-columns:repeat(3,1fr)}}
.cnt{
  display:flex;flex-direction:column;
  padding:clamp(24px,2.6vw,34px);border-radius:var(--r-card);
  background:var(--glass);border:1px solid var(--glass-line);
  transition:background var(--d-base) var(--e),color var(--d-base) var(--e),
    transform var(--d-base) var(--e),box-shadow var(--d-base) var(--e),border-color var(--d-base) var(--e);
}
a.cnt:hover{background:var(--umber);border-color:var(--umber);color:var(--cream);
  transform:translateY(-4px);box-shadow:var(--sh-lift)}
.cnt .k{
  font-size:11px;font-weight:600;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--bronze-ink);
}
a.cnt:hover .k{color:var(--bronze-lt)}
.cnt .v{margin-top:14px;font-size:clamp(18px,1.7vw,22px);font-weight:500;line-height:1.3}
.cnt .d{margin-top:12px;font-size:14px;line-height:1.6;color:var(--ink-soft);flex:1}
a.cnt:hover .d{color:var(--cream-soft)}
.cnt .go{
  margin-top:18px;display:inline-flex;align-items:center;gap:8px;
  font-size:13.8px;font-weight:500;color:var(--bronze-ink);
}
.cnt .go:hover{color:var(--ink)}
.cnt .go .arr{transition:transform var(--d-base) var(--e)}
.cnt .go:hover .arr{transform:translateX(5px)}

/* ================= МАРШРУТ ================= */
.route-grid{display:grid;gap:clamp(26px,3.2vw,52px);align-items:start}
@media (min-width:1000px){
  .route-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
/* Сами шаги и кружок с номером стилизует site.css (.route-steps) —
   здесь только раскладка блока и кадр рядом. */
.route-video{position:relative;border-radius:var(--r-photo);overflow:hidden;
  background:var(--sand-deep);aspect-ratio:16/9}
.route-video img,.route-video video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
@media (min-width:1000px){.route-video{position:sticky;top:calc(var(--hdr-h) + 30px)}}

/* Секция, в которой лежит только правовая сноска: полный ритм --sec-y
   оставлял её висеть в пустоте. */
.sec--tight{padding-block:clamp(40px,5vw,68px)}

/* ================= АДАПТИВ ================= */
@media (max-width:900px){
  .phero--split .phero-in{grid-template-columns:1fr}
  .phero-facts{order:0}
  /* 01.09: лид-фото направлений портретные (промо 9:11, кабинет 0.82) —
     рамка 16/10 резала их пополам. 4/5 отдаёт кадр почти целиком.
     🔴 --wide обязан идти ПОСЛЕ базового правила: специфичность у них
     равная, побеждает порядок — иначе панорама команды и ландшафтные
     кадры акций/контактов сжимаются в портрет (поймано замером 01.09). */
  .phero-fig{aspect-ratio:4/5;max-height:none;order:-1}
  .phero-fig img{object-position:50% 22%}
  .phero-fig--wide{aspect-ratio:16/10}
  .prose-grid .sec-head{position:static}
}
@media (max-width:640px){
  /* «- 34px» по той же причине, что и в базовом правиле выше: снята лента. */
  .phero{padding-top:calc(var(--hdr-h) + 40px - 34px);padding-bottom:44px}
  .phero h1{max-width:none}
  .phero .cta .btn{width:100%}
  /* Цена под названием, а не рядом: в узкой колонке пара «длинное название —
     число» ломается на огрызки, а так строка читается как в прайсе. */
  .prow{grid-template-columns:1fr;gap:6px}
  .pv{font-size:16px}
  .docmini-txt{padding-top:0}
  .pkg .acts .btn,.docmini .acts .btn{width:100%}

  /* Портретный кадр 9:11 — раскладка для сетки на десктопе. На телефоне
     карточки идут в столбец, и такое фото съедает пол-экрана каждое:
     три пакета = 1300 px одних картинок. Кладём кадр горизонтально. */
  .pkg-ph{aspect-ratio:16/10}
  .pkg-ph img{object-position:50% 26%}
  /* на телефоне была полоса 2:1 — широкие кадры теряли уже низ с подписью */
  .svc-ph{aspect-ratio:16/9}
  .svc-ph img{object-position:50% 52%}
  /* Карточку врача в 2:1 не жмём: при таком кропе портрета срезает макушку.
     Здесь работает правило 16/10 из блока выше. */

  /* Крошки и ссылка на карту — навигация, а не подписи: палец должен
     попадать, а не целиться. Минимум 44 px по высоте. */
  .crumbs{gap:6px}
  .crumbs a,.crumbs [aria-current]{padding-block:12px}
  .cnt .go{padding-block:11px}
}

/* ============================================================
   ТИПОГРАФИКА НОВЫХ БЛОКОВ.
   Хвост файла — как в site.css: сначала капс, потом цифры.
   Правило про lining-nums обязано остаться последним.
   ============================================================ */
.phero h1, .svc h3, .pkg h3, .steps h3, .docmini h3, .paycard h3,
.pgroup h3, .eqp h3, .pkg-inc h3{
  font-family:var(--ff);
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:var(--ls-caps);
  line-height:1.18;
}
.phero h1{letter-spacing:.05em;line-height:1.14}
.phero h1 em{font-style:normal;color:var(--bronze-lt)}

/* Цифры выравниваются по прописным везде, где работает дисплейная гарнитура.
   Ставится последним: сокращённое font: выше сбрасывает font-variant-numeric. */
.phero h1, .phero-price, .price-main .v, .pv, .cnt .v,
.svc h3, .svc .price, .pkg h3, .pkg .price, .steps h3, .steps .n,
.docmini h3, .paycard h3, .pgroup h3, .eqp h3, .pkg-inc h3,
.phero-facts .v, .phero-facts .n2{
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* ---------- гарантия на протезирование ----------
   Клиника подтвердила письмом пять лет на ортопедические конструкции.
   Список короткий, поэтому карточка, а не таблица: её читают целиком. */
.warr{
  padding:clamp(24px,3vw,40px);
  background:var(--paper);border-radius:var(--r-card);
  border:1px solid var(--line-soft);
}
.sec--sand .warr{background:var(--paper)}
.warr h2{font-size:var(--t-h2)}
.warr-list{
  margin-top:18px;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.warr-list li{position:relative;padding-left:24px;font-size:15.5px;line-height:1.6;color:var(--ink-soft)}
.warr-list li::before{
  content:"";position:absolute;left:0;top:9px;width:10px;height:10px;
  border-radius:50%;background:var(--bronze);
}
.warr-note{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft);
  font-size:14.5px;line-height:1.65;color:var(--ink-mute);
}

/* ---------- реквизиты на странице контактов ----------
   Две колонки на широком экране, одна на телефоне. Значения переносятся
   по словам: длинный адрес не должен уводить страницу вбок. */
.req{
  display:grid;gap:0;
  border:1px solid var(--line-soft);border-radius:var(--r-card);overflow:hidden;
}
.rrow{
  display:grid;grid-template-columns:minmax(160px,240px) 1fr;gap:14px;
  padding:14px clamp(16px,2vw,22px);
  border-bottom:1px solid var(--line-soft);
}
.rrow:last-child{border-bottom:0}
.rrow:nth-child(odd){background:var(--paper)}
.rn{font-size:14px;color:var(--ink-mute)}
.rv{font-size:15px;color:var(--ink);overflow-wrap:anywhere}
.req-note{
  margin-top:16px;font-size:14.5px;line-height:1.65;color:var(--ink-mute);
  max-width:70ch;
}
@media (max-width:640px){
  .rrow{grid-template-columns:1fr;gap:4px}
  .rn{font-size:13px}
}