/* MedDESA — редизайн. Токены и стили. */

:root{
  /* Палитра. Бирюза взята из существующих портретов клиники — она уже вшита в их фото. */
  --ink:#08201C;
  --ink-2:#0E2E28;
  --pine:#164A41;
  --paper:#EDEFEA;
  --paper-2:#E3E7E1;
  --white:#FFFFFF;
  --teal:#009F9B;
  --teal-dk:#047D7B;
  --muted:#5E6E69;
  --muted-lt:#8A9A94;
  --amber:#E0A33C;
  --line:rgba(8,32,28,.13);
  --line-dk:rgba(255,255,255,.14);

  --display:"Unbounded","Arial Black",sans-serif;
  --body:"Golos Text","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;   /* данные: цены, нм, реквизиты */
  --label:"IBM Plex Mono",ui-monospace,monospace;  /* подписи и метки */

  --wrap:1600px;
  --gut:clamp(20px,4vw,72px);
  --gap:clamp(48px,5vw,80px);
  --r:20px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16.5px;line-height:1.62;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
/* ---------- фоновые пятна ----------
   Мягкая подсветка страницы в фирменных цветах. Слой закреплён,
   лежит за содержимым и не ловит курсор. Пятна широкие и очень
   бледные: они должны читаться как оттенок бумаги, а не как объект.
   Пятна двигаем transform у псевдоэлементов — это композитор,
   содержимое страницы при этом не перерисовывается. */
/* isolation здесь не ставим: она отсекает шапку от фона страницы,
   и её размытие перестаёт работать. Пятна и так за содержимым. */
body{position:relative}
body::before,body::after{
  content:"";position:fixed;z-index:-1;pointer-events:none;
  border-radius:50%;
}
body::before{
  top:-18vh;right:-16vw;width:62vw;height:62vw;
  background:radial-gradient(circle,rgba(0,159,155,.13),transparent 66%);
}
body::after{
  bottom:-24vh;left:-18vw;width:66vw;height:66vw;
  background:radial-gradient(circle,rgba(255,133,98,.11),transparent 66%);
}
@media (prefers-reduced-motion: no-preference){
  body::before{animation:bgDriftA 64s ease-in-out infinite alternate}
  body::after{animation:bgDriftB 79s ease-in-out infinite alternate}
  @keyframes bgDriftA{
    from{transform:translate3d(0,0,0) scale(1)}
    to{transform:translate3d(-9vw,7vh,0) scale(1.16)}
  }
  @keyframes bgDriftB{
    from{transform:translate3d(0,0,0) scale(1)}
    to{transform:translate3d(8vw,-6vh,0) scale(1.12)}
  }
}

img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

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

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.hero__panel > .wrap{padding-inline:clamp(24px,3.4vw,56px)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- типографика ---------- */
.eyebrow{
  font-family:var(--label);font-weight:500;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-dk);margin:0 0 18px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;flex:none}
.on-dark .eyebrow{color:var(--teal)}

h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.035em;line-height:1.14;margin:0}
h1{font-size:clamp(30px,3.4vw,60px);letter-spacing:-.045em;font-weight:300;line-height:1.1}
h2{font-size:clamp(25px,2.5vw,42px);font-weight:300;letter-spacing:-.04em}
h3{font-size:clamp(17px,1.5vw,21px);line-height:1.28;font-weight:500;letter-spacing:-.02em}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:60ch;margin:20px 0 0;line-height:1.55}
.on-dark .lead{color:rgba(255,255,255,.66)}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  padding:15px 26px;border-radius:100px;border:1px solid transparent;
  font-size:15px;font-weight:500;text-decoration:none;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--teal);color:#03211D;border-color:var(--teal)}
.btn--primary:hover{background:#00B4AF;border-color:#00B4AF}
.btn--ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--ink);background:rgba(8,32,28,.04)}
.on-dark .btn--ghost{border-color:var(--line-dk);color:#fff}
.on-dark .btn--ghost:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.07)}
.btn--sm{padding:11px 20px;font-size:14px}

/* ---------- шапка ---------- */
.hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(8,32,28,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-dk);color:#fff;
}
.hdr__in{display:flex;align-items:center;gap:22px;height:86px;min-width:0}
.logo{
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  text-decoration:none;flex:none;color:#fff;
}
.logo__tag{
  font-family:var(--label);font-weight:500;font-size:9.5px;letter-spacing:.19em;
  text-transform:lowercase;color:var(--teal);white-space:nowrap;
}
.logo__mark{height:29px;width:auto;display:block}
.logo__sub{color:var(--teal)}
/* пунктов стало 12 — зазор сжимаем, чтобы меню держалось в одну строку */
.nav{display:flex;gap:clamp(12px,1.1vw,20px);margin-left:auto;font-size:14.5px}
.nav a{white-space:nowrap}
.nav a{text-decoration:none;color:rgba(255,255,255,.72);transition:color .16s}
.nav a:hover{color:#fff}
.hdr__tel{font-family:var(--mono);font-size:14px;text-decoration:none;white-space:nowrap}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;color:#fff}
.burger__bars{display:flex;flex-direction:column;gap:5px}
.burger__bars span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .22s ease,opacity .22s ease}
.burger__label{font-family:var(--body);font-size:14px;line-height:1}
.burger[aria-expanded="true"] .burger__bars span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bars span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* промежуточная ширина: меню уплотняем, но горизонтальным оставляем */
@media(min-width:1181px) and (max-width:1400px){
  .hdr__in{gap:16px}
  .nav{gap:15px;font-size:13.5px}
  .hdr__tel{font-size:13px}
  .hdr__cta{padding:10px 16px;font-size:13.5px}
}

/* подпись рядом с логотипом уходит первой, когда меню становится тесно */
@media(max-width:1180px){
  .nav{position:fixed;inset:86px 0 auto;flex-direction:column;gap:0;
    background:var(--ink);padding:8px var(--gut) 28px;border-bottom:1px solid var(--line-dk);
    display:none}
  .nav.is-open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line-dk);font-size:17px}
  .burger{
    display:inline-flex;align-items:center;gap:10px;order:3;flex:none;margin-left:auto;
    padding:10px 18px 10px 15px;border:1px solid var(--line-dk);border-radius:100px;
  }
  .hdr__tel{margin-left:auto}
  .hdr__cta{display:none}
}
@media(max-width:720px){
  .hdr__tel{display:none}
}
@media(max-width:560px){
  .hdr__in{gap:10px;height:74px}
  .nav{inset-block-start:74px}
  .logo__mark{height:26px}
  .logo__tag{font-size:9px;letter-spacing:.16em}
  .logo b{font-size:18px;letter-spacing:.12em}
  .hdr__tel{font-size:12.5px}
}
@media(max-width:400px){
  .hdr__tel{font-size:0}
  .hdr__tel::after{content:"Позвонить";font-size:13.5px;font-family:var(--body)}
}

/* ---------- герой ---------- */
.hero{background:transparent;color:#fff;position:relative;padding:14px 0 0}
.hero__panel{
  position:relative;background:var(--ink);border-radius:32px;overflow:hidden;
  margin:0 var(--gut);
}
.hero__panel::after{
  content:"";position:absolute;inset:auto -10% -40% 40%;height:70%;
  background:radial-gradient(closest-side,rgba(18,179,160,.22),transparent 70%);
  pointer-events:none;
}
.hero__in{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,3vw,48px);align-items:end;
  min-height:min(740px,calc(100vh - 132px));padding-top:clamp(40px,5vw,64px);
  position:relative;z-index:1}
.hero__copy{align-self:center;padding-bottom:clamp(30px,4vw,54px)}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero__note{font-family:var(--mono);font-size:12px;color:var(--muted-lt);margin-top:22px;letter-spacing:.02em}
.hero__photo{align-self:end;position:relative}
.hero__photo img{
  height:min(66vh,640px);width:auto;max-width:100%;margin-left:auto;
  object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.5));
}

@media(max-width:900px){
  .hero__in{grid-template-columns:minmax(0,1fr);gap:0;min-height:0}
  .hero__copy{padding-bottom:24px;align-self:auto;min-width:0}
  .hero__photo{min-width:0}
  .hero__photo img{height:auto;width:100%;max-width:440px;margin-inline:auto}
}



/* ---------- появление плиток ---------- */
@media (prefers-reduced-motion: no-preference){
  /* появление плиток описано только в CSS: если скрипт не отработает,
     содержимое всё равно окажется на месте */
  .bento .tile{animation:tileIn .6s cubic-bezier(.2,.6,.2,1) both}
  .bento .tile:nth-child(1){animation-delay:.04s}
  .bento .tile:nth-child(2){animation-delay:.12s}
  .bento .tile:nth-child(3){animation-delay:.2s}
  .bento .tile:nth-child(4){animation-delay:.26s}
  .bento .tile:nth-child(5){animation-delay:.32s}
  .bento .tile:nth-child(6){animation-delay:.38s}
  @keyframes tileIn{
    from{opacity:0;transform:translateY(16px) scale(.985)}
    to{opacity:1;transform:none}
  }
}

/* ---------- бенто-сетка первого экрана ---------- */
.bento-wrap{padding:14px 0 0}

/* ---------- бенто-сетка первого экрана ---------- */
.bento-wrap{padding:14px 0 clamp(56px,6vw,84px)}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.tile{
  border-radius:24px;padding:clamp(24px,2.4vw,34px);position:relative;overflow:hidden;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;
  background:var(--white);
}
a.tile{transition:transform .24s cubic-bezier(.2,.7,.3,1)}
a.tile:hover{transform:translateY(-3px)}

.tile--main{
  grid-column:span 7;grid-row:span 2;
  display:flex;flex-direction:column;justify-content:center;
  isolation:isolate;
  background:linear-gradient(138deg,#EAF5F2 0%,#E1F0EC 46%,#F7E8E2 100%);
}
.tile--main::before{
  content:"";position:absolute;z-index:-1;inset:auto -150px -190px auto;
  width:470px;height:470px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(246,201,180,.55),transparent 68%);
}
.tile--main::after{
  content:"";position:absolute;z-index:-1;inset:-170px auto auto -130px;
  width:430px;height:430px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(159,214,205,.5),transparent 68%);
}
@media (prefers-reduced-motion: no-preference){
  /* появление плитки и дрейф фона идут одновременно, поэтому перечислены вместе */
  .bento .tile--main{
    animation:tileIn .6s cubic-bezier(.2,.6,.2,1) both,
              gradientDrift 34s ease-in-out .6s infinite alternate;
  }
  @keyframes gradientDrift{
    from{background-position:0% 38%}
    to{background-position:100% 62%}
  }
}
.tile--main h1{margin:14px 0 18px}
.tile--main h1 em{font-style:normal;color:#04605E}
.tile--main .lead{color:#4A332D;max-width:46ch;margin:0}
.tile--main .eyebrow{
  display:inline-flex;align-self:flex-start;width:fit-content;align-items:center;gap:9px;
  background:rgba(255,255,255,.64);color:#432017;
  padding:8px 15px 8px 13px;border-radius:100px;margin:0;
  font-size:11.5px;letter-spacing:.14em;
}
.tile--main .eyebrow::before{width:16px;background:#A53B1C}
.tile__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.tile--main .btn--ghost{border-color:rgba(36,26,24,.3);color:#2B1E1A}
.tile--main .btn--ghost:hover{border-color:#2B1E1A;background:rgba(255,255,255,.35)}
.tile--main .trust{border-top-color:rgba(36,26,24,.2)}
.tile--main .trust li{color:#4A332D}
.tile--main .trust .ic{color:#04605E}


.tile--rate,.tile--price,.tile--team,.tile--geo{grid-column:span 3;min-height:186px;justify-content:space-between}
/* мягкие оттенки: различие несут цифры и метки, а не тёмные заливки */
.tile--rate{background:#E3F1EE}
.tile--rate .tile__lab{color:#04605E}
.tile--rate .tile__n{color:#04605E}

.tile--price{background:#FBE7DC}
.tile--price .tile__lab{color:#A63D1C}
.tile--price .tile__n{color:#A63D1C}
.tile--price .tile__go{color:#A63D1C}

.tile--team{background:#F5EDE4}
.tile--team .tile__lab{color:#8A6A4F}
.tile--team .tile__n{color:#6B4F3A}

.tile--geo{background:#EDF3F1}
.tile--geo .tile__lab{color:#5B7A75}

.tile__lab{font-family:var(--label);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.tile__n{
  font-family:var(--display);font-weight:300;font-size:clamp(32px,3.1vw,46px);
  line-height:1;letter-spacing:-.045em;margin-top:auto;
  font-variant-numeric:lining-nums tabular-nums;
}
.tile__sub{font-size:13px;line-height:1.45;color:var(--muted);margin-top:10px}
.tile__geo{font-size:17px;line-height:1.4;margin-top:auto}
.tile--rate .fact__stars{margin-top:10px}
.tile__go{position:absolute;right:22px;top:22px;opacity:.65;transition:transform .24s ease,opacity .24s ease}
.tile__go .ic{width:20px;height:20px}
a.tile:hover .tile__go{transform:translate(3px,-3px);opacity:1}

@media(max-width:1080px){
  .tile--main{grid-column:span 12;grid-row:auto}
  .tile--photo{grid-column:span 12;grid-row:auto;min-height:320px}
    .tile--rate,.tile--price,.tile--team,.tile--geo{grid-column:span 6}
}
@media(max-width:620px){
  .bento{gap:10px}
  .tile{border-radius:20px}
  .tile--rate,.tile--price,.tile--team,.tile--geo{grid-column:span 12;min-height:0}
  .tile__n{font-size:44px}
}

/* ---------- значки ---------- */
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- первый экран: доверие, рейтинг, подсказка ---------- */
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:12px 26px;margin:26px 0 0;padding:18px 0 0;
  border-top:1px solid rgba(255,255,255,.16)}
.trust li{display:flex;align-items:center;gap:9px;font-size:14px}
.trust .ic{color:var(--teal)}

.rate{
  position:absolute;right:0;top:clamp(18px,4vw,44px);z-index:2;
  background:var(--white);border-radius:14px;padding:16px 20px;text-align:center;
  text-decoration:none;color:var(--ink);min-width:132px;
  box-shadow:0 12px 30px rgba(0,0,0,.14);transition:transform .18s ease;
}
.rate:hover{transform:translateY(-2px)}
.rate b{display:block;font-family:var(--display);font-size:36px;line-height:1;font-weight:400}
.rate__st{display:block;color:var(--amber);font-size:12px;letter-spacing:2px;margin-top:5px}
.rate__n{display:block;font-size:11px;color:var(--muted);margin-top:7px;line-height:1.4}

.scrollhint{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-family:var(--label);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.scrollhint .ic{width:18px;height:18px;animation:nudge 2.2s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

@media(max-width:900px){
  .rate{position:static;display:inline-block;margin-bottom:20px;box-shadow:none;
    border:1px solid var(--line)}
  .scrollhint{display:none}
}

/* полоса фактов */
.facts{position:relative;z-index:3;margin-top:-54px}
.facts__panel{
  background:var(--ink-2);color:#fff;border-radius:28px;overflow:hidden;
  padding:0 clamp(24px,3.2vw,48px);
  box-shadow:0 24px 60px rgba(8,32,28,.22);
}
.facts__in{display:grid;grid-template-columns:repeat(4,1fr)}
.fact{
  padding:clamp(30px,3.4vw,44px) clamp(20px,2.4vw,34px) clamp(30px,3.4vw,44px) 0;
  border-right:1px solid var(--line-dk);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;align-items:flex-start;position:relative;
}
.fact:first-child{padding-left:0}
.fact + .fact{padding-left:clamp(20px,2.4vw,34px)}
.fact:last-child{border-right:0;padding-right:0}
.fact .ic{width:22px;height:22px;color:var(--teal);margin-bottom:16px}
.fact__n{
  font-family:var(--display);font-weight:300;font-size:clamp(34px,3.4vw,50px);
  line-height:1;letter-spacing:-.045em;font-variant-numeric:lining-nums tabular-nums;
}
.fact__stars{display:flex;gap:3px;margin-top:12px}
.fact__stars .st{width:14px;height:14px;fill:var(--amber);stroke:var(--amber);stroke-width:1}
.fact__l{display:block;font-size:15px;margin-top:auto;padding-top:18px;line-height:1.35}
.fact__s{display:block;font-size:13px;color:rgba(255,255,255,.5);margin-top:6px;line-height:1.4;max-width:24ch}
a.fact::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--teal);transition:width .3s ease}
a.fact:hover::after{width:calc(100% - clamp(20px,2.4vw,34px))}
@media(max-width:860px){
  .facts__in{grid-template-columns:1fr 1fr}
  .fact{border-bottom:1px solid var(--line-dk)}
  .fact:nth-child(even){border-right:0;padding-right:0}
  .fact:nth-child(odd){padding-left:0}
  .fact:nth-child(3),.fact:nth-child(4){border-bottom:0}
}
@media(max-width:520px){
  .facts__in{grid-template-columns:1fr}
  .fact{border-right:0;padding-left:0!important;padding-right:0}
  .fact:nth-child(3){border-bottom:1px solid var(--line-dk)}
}

/* ---------- секции ---------- */
.sec{padding:clamp(64px,8vw,110px) 0}
.sec--dark{background:var(--ink);color:#fff}
.sec--pine{background:var(--pine);color:#fff}
.sec__head{max-width:64ch;margin-bottom:clamp(34px,4vw,50px)}

/* ---------- каталог услуг ---------- */
.cat{border-top:1px solid var(--line);padding:30px 0}
.cat__grid{display:grid;grid-template-columns:280px 1fr;gap:clamp(28px,3vw,48px)}
.cat__title{font-family:var(--display);font-size:23px;line-height:1.2;letter-spacing:-.02em}
.cat__hint{font-size:13.5px;color:var(--muted);margin-top:8px}
.cat__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:2px}
.srv{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:13px 16px;border-radius:10px;text-decoration:none;
  transition:background .16s ease,padding .16s ease;
}
.srv:hover{background:var(--white);padding-left:20px}
.srv b{font-weight:450;font-size:16px}
.srv i{font-family:var(--mono);font-style:normal;font-size:12.5px;color:var(--muted);white-space:nowrap}
@media(max-width:820px){
  .cat__grid{grid-template-columns:1fr;gap:16px}
}



/* ---------- подбор услуги ---------- */
.quiz{
  /* Раньше здесь стоял градиент главной плитки первого экрана — тот же
     до цифры. Виджет читался как повтор героя и терялся на светлом фоне.
     Теперь это тёмная панель: язык сайта — «панели на холсте», и подбор
     как точка входа заслуживает такой же подачи, что и блок врачей. */
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:32px;padding:clamp(30px,3.6vw,56px);
  background:var(--ink-2);color:#fff;
  box-shadow:0 30px 70px rgba(36,26,24,.22);
}
/* тёплое и холодное пятна за карточкой — блок перестаёт быть плоским */
.quiz::before{
  content:"";position:absolute;z-index:-1;inset:auto -140px -180px auto;
  width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(246,201,180,.30),transparent 70%);
}
.quiz::after{
  content:"";position:absolute;z-index:-1;inset:-160px auto auto -120px;
  width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(18,179,160,.38),transparent 70%);
}

/* Медленный дрейф световых пятен за панелью.
   Двигаем transform у псевдоэлементов, а не фон всей панели: браузер
   выносит это на композитор и не перерисовывает содержимое.
   Периоды разные и взаимно непростые — рисунок не зацикливается заметно. */
/* третий слой — статичное свечение фоном панели. Анимировать его нельзя
   дёшево: background-position перерисовывает всю панель каждый кадр,
   а видимого движения не добавляет — оно всё в двух пятнах ниже. */
.quiz{
  background-image:radial-gradient(560px 420px at 78% 18%,rgba(18,179,160,.20),transparent 62%);
  background-repeat:no-repeat;
}

@media (prefers-reduced-motion: no-preference){
  .quiz::before{animation:quizDriftWarm 38s ease-in-out infinite alternate}
  .quiz::after{animation:quizDriftCold 47s ease-in-out infinite alternate}
  @keyframes quizDriftWarm{
    from{transform:translate3d(0,0,0) scale(1)}
    to{transform:translate3d(-170px,-90px,0) scale(1.22)}
  }
  @keyframes quizDriftCold{
    from{transform:translate3d(0,0,0) scale(1)}
    to{transform:translate3d(150px,110px,0) scale(1.18)}
  }
}
.quiz__bar{display:flex;gap:6px;margin:0 0 26px}
.quiz__seg{height:4px;flex:1;background:rgba(255,255,255,.16);border-radius:3px;transition:background .35s ease}
.quiz__seg.on{background:var(--teal)}

.quiz__step{
  font-family:var(--label);font-weight:500;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal);margin:0 0 12px;
}
/* Сетка вариантов на 12 колонок. max-width убран: он оставлял справа
   мёртвое поле в 400 px. Ширина карточек задаётся спанами так, чтобы
   каждый ряд заполнялся целиком при любом числе вариантов —
   7 (4 по 3 + 3 по 4), 4 (по 3) и 2 (по 6). */
.quiz__opts{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.quiz__opt{grid-column:span 3}
.quiz__opts[data-n="7"] .quiz__opt:nth-child(n+5){grid-column:span 4}
.quiz__opts[data-n="2"] .quiz__opt{grid-column:span 6}

@media(max-width:1180px){
  .quiz__opt,
  .quiz__opts[data-n="7"] .quiz__opt:nth-child(n+5){grid-column:span 6}
  .quiz__opts[data-n="7"] .quiz__opt:last-child{grid-column:span 12}
}
@media(max-width:620px){
  .quiz__opt,
  .quiz__opts[data-n="7"] .quiz__opt:nth-child(n+5),
  .quiz__opts[data-n="7"] .quiz__opt:last-child,
  .quiz__opts[data-n="2"] .quiz__opt{grid-column:span 12}
}

.quiz__opt{
  /* Раньше значок стоял сверху, подпись прижималась к низу, и между ними
     зияло пустое поле: карточка была 141 px высотой ради одной строки.
     Горизонтальная раскладка убирает эту пустоту. */
  display:flex;align-items:center;gap:14px;
  text-align:left;padding:15px 18px;border:1px solid transparent;border-radius:16px;
  background:#fff;cursor:pointer;font-size:15px;line-height:1.3;color:var(--ink);
  transition:border-color .16s ease,background .16s ease,transform .16s ease,box-shadow .16s ease;
}
.quiz__opt .ic{width:26px;height:26px;color:var(--teal-dk);transition:color .16s ease}
.quiz__opt:hover{border-color:var(--teal-mid);transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.22)}
.quiz__opt[aria-pressed="true"]{
  border:2px solid var(--teal-mid);padding:17px 17px 19px;background:var(--teal-wash);
}
.quiz__opt[aria-pressed="true"] .ic{color:var(--teal-mid)}
@media(max-width:560px){
  .quiz__opts{grid-template-columns:1fr}
  .quiz__opt{flex-direction:row;align-items:center;gap:12px;padding:14px 16px}
  .quiz__opt .ic{width:22px;height:22px}
}
.quiz__q{font-family:var(--display);font-weight:400;font-size:clamp(23px,2.1vw,32px);
  letter-spacing:-.03em;line-height:1.25;margin:0 0 6px}
.quiz__hint{font-size:15px;color:rgba(255,255,255,.62);margin:0 0 26px}

.quiz__nav{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:24px}

.quiz__tag{
  display:inline-block;font-family:var(--label);font-weight:500;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal-dk);
  background:var(--teal-wash);padding:7px 14px;border-radius:100px;margin-bottom:16px;
}
.quiz__lead{font-size:15px;color:var(--muted);margin:0 0 20px;max-width:56ch}
.quiz__row{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
.quiz__row:last-of-type{border-bottom:0}
.quiz__row i{font-family:var(--mono);font-style:normal;font-size:13.5px;color:var(--muted);white-space:nowrap}
.quiz__sum{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.quiz__sum span{font-size:14px;color:var(--muted)}
.quiz__sum b{font-family:var(--display);font-weight:300;font-size:clamp(28px,3vw,40px);
  letter-spacing:-.045em;line-height:1}
.quiz__note{font-size:13px;color:var(--muted-lt);line-height:1.55;margin:18px 0 0;max-width:64ch}


/* ---------- акции ---------- */
.promo{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.promo__c{
  position:relative;isolation:isolate;overflow:hidden;
  border:1px solid transparent;border-radius:24px;
  padding:clamp(28px,2.6vw,38px);display:flex;flex-direction:column;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease;
}
/* фон как у подбора: мятный слева, тёплый справа. Различие несут цифра и круг */
.promo__c{background:linear-gradient(138deg,#EAF5F2 0%,#E1F0EC 46%,#F7E8E2 100%)}

/* круг за цифрой: при наведении разрастается и заливает карточку */
.promo__c::before{
  content:"";position:absolute;z-index:-1;top:-70px;right:-70px;
  width:220px;height:220px;border-radius:50%;
  transition:transform .45s cubic-bezier(.2,.7,.3,1),opacity .45s ease;
  transform:scale(.55);opacity:.55;
}
.promo__c:nth-child(1)::before{background:#F3BCA6}
.promo__c:nth-child(2)::before{background:#B6DED7}
.promo__c:nth-child(3)::before{background:#E6D4B8}
.promo__c:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(36,26,24,.14)}
.promo__c:hover::before{transform:scale(2.6);opacity:.9}

.promo__n{
  font-family:var(--display);font-size:clamp(38px,3.8vw,54px);line-height:1;
  letter-spacing:-.05em;font-weight:300;margin-bottom:20px;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);transform-origin:left center;
}
.promo__c:hover .promo__n{transform:scale(1.08)}
.promo__c:nth-child(1) .promo__n{color:#A63D1C}
.promo__c:nth-child(2) .promo__n{color:#04605E}
.promo__c:nth-child(3) .promo__n{color:#8A5A2B}
.promo__n i{font-style:normal;font-size:.42em;vertical-align:super;letter-spacing:0}

.promo__t{font-size:clamp(20px,1.9vw,25px);margin-bottom:12px}
.promo__d{margin:0 0 18px;font-size:15px;line-height:1.55;color:#5A4038}
.promo__cond{
  margin:auto 0 20px;padding-top:16px;border-top:1px solid rgba(36,26,24,.14);
  font-family:var(--label);font-size:11.5px;line-height:1.5;color:#6B5B53;
}
.promo__c .btn{align-self:flex-start;transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.promo__c:hover .btn{transform:translateX(4px)}

/* появление по прокрутке, со сдвигом по карточкам */
@media(max-width:900px){.promo{grid-template-columns:1fr}}

/* ---------- акции ---------- */
.promo{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.promo__c{
  background:var(--white);border:1px solid transparent;border-radius:var(--r);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease;
  padding:clamp(26px,2.6vw,36px);display:flex;flex-direction:column;
}
.promo__n{
  font-family:var(--display);font-size:clamp(34px,3.4vw,48px);line-height:1;
  letter-spacing:-.05em;font-weight:300;color:var(--teal);margin-bottom:22px;
}
.promo__n i{font-style:normal;font-size:.46em;vertical-align:super;letter-spacing:0}
.promo__t{font-size:clamp(21px,2vw,25px);margin-bottom:12px}
.promo__d{margin:0 0 18px;font-size:15px;line-height:1.55;color:var(--muted)}
.promo__cond{
  margin:auto 0 20px;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--label);font-size:11.5px;line-height:1.5;color:var(--muted-lt);
}
.promo__c:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(36,26,24,.12)}
.promo__c .btn{align-self:flex-start}
@media(max-width:900px){.promo{grid-template-columns:1fr}}

/* ---------- врачи ---------- */



.doc__b{padding:0 22px;flex:1;display:flex;flex-direction:column}
.doc__n{font-family:var(--display);font-size:15.5px;line-height:1.35;margin-top:16px;letter-spacing:-.02em;font-weight:500}
.doc__r{font-size:13.5px;color:var(--teal);margin-top:7px}

.doc__more{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:14px;color:var(--teal-dk);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .16s ease;
}
.doc__more .ic{width:15px;height:15px;transition:transform .18s ease}
.doc__more:hover{border-bottom-color:currentColor}
.doc__more:hover .ic{transform:translate(2px,-2px)}
.doc__m{font-family:var(--label);font-size:11px;color:rgba(255,255,255,.45);
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line-dk)}
@media(max-width:560px){
  .docs{gap:10px}
  .doc{padding-bottom:18px}
  .doc__b{padding:0 14px}
  .doc__n{font-size:16px;margin-top:12px}
  .doc__r{font-size:12.5px;margin-top:5px}
  .doc__m{font-size:10px;padding-top:10px}
}


/* ---------- карусель врачей: нативные кнопки и точки ---------- */
.carousel{position:relative}
.docs{
  display:flex;gap:14px;overflow-x:auto;
  padding-top:2px;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:6px;
  scrollbar-width:none;
}
.docs:focus-visible{outline:2px solid var(--teal);outline-offset:6px;border-radius:24px}
.docs::-webkit-scrollbar{display:none}
.doc{flex:0 0 clamp(240px,19%,300px);scroll-snap-align:start;
  border:1px solid rgba(4,96,94,.1)}
.doc__mono{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:460/430;background:linear-gradient(178deg,#CFE6E2,#EDF7F5);
  border-bottom:1px solid rgba(4,96,94,.12);
  font-family:var(--display);font-size:40px;font-weight:400;color:#04605E;
  letter-spacing:.02em;
}

@supports selector(::scroll-marker-group){
  .docs{scroll-marker-group:after}
  .docs::scroll-marker-group{
    display:flex;justify-content:center;gap:8px;margin-top:26px;
  }
  .doc::scroll-marker{
    content:"";width:7px;height:7px;border-radius:50%;
    background:var(--line-dk);border:0;cursor:pointer;
    transition:background .2s ease,width .2s ease;
  }
  .doc::scroll-marker:target-current{background:var(--teal);width:22px;border-radius:100px}
  .doc::scroll-marker:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
}

/* ---------- лента врачей: стрелки ----------
   Раньше стрелки рисовались через ::scroll-button() — это только Chrome,
   в Firefox и Safari их не было вовсе. Теперь это настоящие кнопки,
   а псевдоэлементы ниже гасим, чтобы не задваивались. */
.docs::scroll-button(left),.docs::scroll-button(right){display:none}

.strip-nav{position:absolute;top:-62px;right:0;display:flex;gap:10px}
.strip-nav__b{
  width:42px;height:42px;border-radius:50%;padding:0;
  display:grid;place-items:center;
  border:1px solid var(--line-dk);background:transparent;color:inherit;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,
             color .18s ease,opacity .18s ease;
}
.strip-nav__b .ic{width:17px;height:17px}
.strip-nav__b--prev .ic{transform:rotate(90deg)}
.strip-nav__b--next .ic{transform:rotate(-90deg)}
.strip-nav__b:hover:not(:disabled){border-color:var(--teal);color:var(--teal)}
.strip-nav__b:active:not(:disabled){transform:scale(.94)}
.strip-nav__b:disabled{opacity:.25;cursor:default}
.strip-nav__b:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

@media(max-width:620px){
  .strip-nav{display:none}     /* на телефоне листают пальцем */
}
/* у ленты статей нет отрицательного отступа сверху, как у врачей:
   там кнопки встают в строку заголовка, здесь — над карточками */
#blog .carousel{position:relative;padding-top:56px}
#blog .strip-nav{top:0}

@supports selector(::scroll-button(right)){
  .carousel{padding-top:0}
  .docs::scroll-button(left),.docs::scroll-button(right){
    position:absolute;top:-62px;width:42px;height:42px;border-radius:50%;
    border:1px solid var(--line-dk);background:transparent;color:inherit;
    font-size:16px;line-height:1;cursor:pointer;
    transition:background .18s ease,border-color .18s ease,opacity .18s ease;
  }
  .docs::scroll-button(left){content:"←" / "Предыдущие врачи";right:58px}
  .docs::scroll-button(right){content:"→" / "Следующие врачи";right:0}
  .docs::scroll-button(left):hover,.docs::scroll-button(right):hover{
    background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45);
  }
  .docs::scroll-button(*):disabled{opacity:.25;cursor:default}
  .docs::scroll-button(*):focus-visible{outline:2px solid var(--teal);outline-offset:3px}
}

@media(max-width:620px){
  .doc{flex:0 0 74%}
  @supports selector(::scroll-button(right)){
    .docs::scroll-button(left),.docs::scroll-button(right){display:none}
  }
}

/* ---------- результаты ---------- */
.res{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.res figure{margin:0;background:var(--white);border-radius:var(--r);overflow:hidden;border:1px solid transparent;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease}
.res figure:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(36,26,24,.14)}
.res img{width:100%;height:auto;aspect-ratio:1053/780;object-fit:cover}
@media(max-width:860px){.res{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.res{grid-template-columns:1fr}}


/* ---------- подписи «до» и «после» на снимках ----------
   Раньше текст был вшит в картинку: не масштабировался, не переводился,
   не подчинялся теме и уезжал за край при обрезке. Теперь это разметка. */
.ba-pair{position:relative}
.ba-pair__t{
  position:absolute;bottom:10px;z-index:2;pointer-events:none;
  padding:5px 11px;border-radius:100px;
  font-family:var(--label);font-size:10px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--white);background:rgba(36,26,24,.62);
  backdrop-filter:blur(6px);
}
.ba-pair__t--b{left:10px}
.ba-pair__t--a{right:10px;background:rgba(4,96,94,.78)}
@media(max-width:560px){
  .ba-pair__t{bottom:8px;padding:4px 9px;font-size:9.5px;letter-spacing:.1em}
  .ba-pair__t--b{left:8px}
  .ba-pair__t--a{right:8px}
}

/* ---------- линза дерматоскопа на результатах ---------- */
.res figure{position:relative;overflow:hidden}
.res figure.lensable{cursor:none}
.lens{
  /* z-index выше подписей «до/после», иначе они перекрывают дерматоскоп */
  position:absolute;z-index:3;width:190px;height:190px;border-radius:50%;
  border:3px solid var(--teal);pointer-events:none;overflow:hidden;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .16s ease;
  box-shadow:0 0 0 1px rgba(0,0,0,.15),0 14px 34px rgba(0,0,0,.3);
}
.lens.on{opacity:1}
/* правило .res img сюда дотягивается — гасим его явно.
   Размер задаём явно: раньше блок был нулевой высоты и ширины,
   поэтому увеличенный фон просто не рисовался — линза выглядела
   пустым кружком. */
.lens .lens__img{
  position:absolute;inset:0;width:100%;height:100%;
  max-width:none;min-width:0;aspect-ratio:auto;object-fit:fill;
  background-repeat:no-repeat;
}
.lens::after,.lens::before{content:"";position:absolute;background:var(--teal);opacity:.35}
.lens::before{left:50%;top:0;width:1px;height:100%}
.lens::after{top:50%;left:0;height:1px;width:100%}
.lens__z{
  position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  font-family:var(--label);font-size:10px;letter-spacing:.1em;color:#fff;
  background:rgba(4,96,94,.85);padding:2px 8px;border-radius:100px;
}
.res__hint{
  display:flex;align-items:center;gap:8px;margin:0 0 18px;
  font-family:var(--label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-lt);
}
@media(hover:none){.res figure.lensable{cursor:auto}.res__hint{display:none}}

/* ---------- просмотр снимка на телефоне ----------
   Замена дерматоскоп-линзы там, где нет курсора. */
.zoomable{position:relative;cursor:zoom-in}
@media(hover:none){
  /* подсказка, что снимок можно открыть: иначе о такой возможности
     никто не догадается */
  .zoomable::after{
    content:"";position:absolute;right:10px;top:10px;z-index:2;
    width:30px;height:30px;border-radius:50%;
    background:rgba(255,255,255,.9) url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241A18' \
stroke-width='1.7' stroke-linecap='round'><circle cx='11' cy='11' r='6.4'/>\
<path d='M15.6 15.6 20 20M11 8.6v4.8M8.6 11h4.8'/></svg>") center/17px no-repeat;
    box-shadow:0 2px 8px rgba(36,26,24,.18);
  }
}

.lb{
  position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;
  background:rgba(20,14,13,.94);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.lb[hidden]{display:none}
.lb__top{display:flex;justify-content:flex-end;padding:10px 12px}
.lb__x{
  width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;
}
.lb__body{
  flex:1;min-height:0;display:flex;align-items:center;
  padding:0 8px;overflow:auto;
  -webkit-overflow-scrolling:touch;
  /* щипок работает штатно: масштабирование не перехватываем */
  touch-action:pan-x pinch-zoom;
}
/* Пара «до и после» широкая, а экран телефона узкий: вписанная по ширине
   она выходит крошечной. Разворачиваем по высоте — половины становятся
   крупными, между ними проводят пальцем. */
.lb__img{
  height:100%;width:auto;max-width:none;max-height:100%;
  margin:auto;border-radius:10px;object-fit:contain;
}
.lb__bar{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px calc(16px + env(safe-area-inset-bottom));
}
.lb__cap{
  flex:1;margin:0;text-align:center;color:rgba(255,255,255,.8);
  font-size:13.5px;line-height:1.4;
}
.lb__nav{
  flex:none;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(255,255,255,.14);color:#fff;
}
.lb__nav .ic{width:18px;height:18px}
.lb__nav[data-prev] .ic{transform:rotate(90deg)}
.lb__nav[data-next] .ic{transform:rotate(-90deg)}

/* ---------- отзывы ---------- */
.score{font-family:var(--display);font-size:52px;line-height:1;letter-spacing:-.03em}
.score+div{font-size:14px;color:var(--muted)}

.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px}
.rev{background:var(--white);border:1px solid transparent;border-radius:var(--r);padding:28px}
.rev__h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.rev__h b{font-weight:500}
.rev__h time{font-family:var(--mono);font-size:11.5px;color:var(--muted-lt)}
.rev p{margin:0;font-size:15px;color:#2A3B36;line-height:1.6}
.stars{color:var(--amber);font-size:13px;letter-spacing:2px}
@media(max-width:900px){.revs{grid-template-columns:1fr}}

/* ---------- прайс-превью ---------- */
.ptable{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.prow{display:grid;grid-template-columns:1fr auto;gap:20px;padding:16px 24px;border-bottom:1px solid var(--line);align-items:baseline}
.prow:last-child{border-bottom:0}
.prow b{font-weight:450;font-size:16px}
.prow small{display:block;color:var(--muted);font-size:13.5px;margin-top:3px}
.prow i{font-family:var(--mono);font-style:normal;font-size:14px;white-space:nowrap}




/* ---------- модальное окно онлайн-записи ---------- */
.bk{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(8,20,18,.6);backdrop-filter:blur(3px);padding:clamp(12px,4vw,40px);
}
.bk[hidden]{display:none}
.bk__panel{
  background:var(--white);border-radius:var(--r);width:min(760px,100%);height:min(720px,100%);
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.bk__head{
  display:flex;align-items:center;gap:16px;padding:14px 16px 14px 22px;
  border-bottom:1px solid var(--line);flex:none;
}
.bk__head b{font-family:var(--display);font-weight:500;font-size:15px;color:var(--ink);letter-spacing:-.02em}
.bk__ext{
  margin-left:auto;font-size:13px;color:var(--teal-dk);text-decoration:none;
  border-bottom:1px solid currentColor;
}
.bk__x{
  background:none;border:0;font-size:28px;line-height:1;cursor:pointer;
  color:var(--muted);padding:0 4px;flex:none;
}
.bk__x:hover{color:var(--ink)}
.bk__frame{flex:1;width:100%;border:0;background:var(--white)}
.bk__fb{
  margin:0;padding:11px 22px;border-top:1px solid var(--line);flex:none;
  font-size:12.5px;color:var(--muted);
}
.bk__fb a{color:var(--teal-dk)}
@media(max-width:640px){
  .bk{padding:0}
  .bk__panel{width:100%;height:100%;border-radius:0}
}


/* ---------- просмотр документов ----------
   Панель шире и выше, чем у записи: скан читают, а не заполняют. */
.dv__panel{width:min(980px,100%);height:min(92vh,100%)}
.dv__body{
  flex:1;min-height:0;position:relative;display:flex;align-items:center;
  justify-content:center;padding:16px;background:var(--paper-2);
}
.dv__img{
  max-width:100%;max-height:100%;object-fit:contain;
  border-radius:8px;background:var(--white);
  box-shadow:0 8px 30px rgba(36,26,24,.16);
}
.dv__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;padding:0;
  display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.92);
  color:var(--ink);transition:background .18s ease,border-color .18s ease;
}
.dv__nav:hover{border-color:var(--teal);color:var(--teal)}
.dv__nav[hidden]{display:none}
.dv__nav .ic{width:18px;height:18px}
.dv__nav--prev{left:12px}
.dv__nav--prev .ic{transform:rotate(90deg)}
.dv__nav--next{right:12px}
.dv__nav--next .ic{transform:rotate(-90deg)}
.dv__nav:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media(max-width:640px){
  .dv__panel{height:100%}
  .dv__body{padding:8px}
  .dv__nav{width:38px;height:38px}
  .dv__nav--prev{left:6px}
  .dv__nav--next{right:6px}
}

/* ---------- телемедицина ---------- */
.tele{
  display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,64px);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(30px,4vw,52px);align-items:start;
}
.tele__intro .lead{margin-top:18px}
.tele__steps{list-style:none;counter-reset:s;margin:0;padding:0}
.tele__steps li{
  counter-increment:s;position:relative;padding:0 0 20px 52px;margin-bottom:20px;
  border-bottom:1px solid var(--line);
}
.tele__steps li:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.tele__steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--label);font-weight:500;font-size:12px;color:var(--teal);
  border:1px solid var(--line);border-radius:100px;padding:5px 9px;
}
.tele__steps b{display:block;font-weight:500;font-size:16.5px;margin-bottom:5px}
.tele__steps span{display:block;font-size:14.5px;color:var(--muted);line-height:1.55}
@media(max-width:820px){
  .tele{grid-template-columns:1fr;gap:34px}
}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 46px 24px 0;position:relative;
  font-size:clamp(15px,1.3vw,17.5px);font-family:var(--display);letter-spacing:-.025em;font-weight:400;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:22px;color:var(--teal-dk);transition:transform .2s
}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 26px;max-width:78ch;color:var(--muted);font-size:15.5px}

/* ---------- контакты ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;color:rgba(255,255,255,.55);margin:6px 0 20px}
.consent input{margin-top:3px;accent-color:var(--teal)}
.info dt:first-of-type{margin-top:0}
.info dt{font-family:var(--label);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-top:26px}
.info dd{margin:7px 0 0;font-size:17px}
.info dd a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.socials{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
@media(max-width:860px){.contact{grid-template-columns:1fr;gap:40px}}


/* ---------- липкая панель действий на мобильном ---------- */
.dock{display:none}

/* ---------- плывущее меню связи ----------
   Раньше это была полоса во всю ширину: кнопка растягивалась на весь
   экран, справа оставалось пустое поле, а панель приклеивалась к краям.
   Теперь это отдельная плашка, парящая над содержимым.

   Кнопки связи намеренно нейтральные: три залитых цветных круга рядом
   с чёрной кнопкой давали четыре цвета в одной плашке шириной 366 px
   и заглушали фирменную палитру. Цвет остался только в самих значках —
   узнаваемость мессенджеров сохраняется. Единственная цветная кнопка —
   запись, потому что это главное действие. */
@media(max-width:860px){
  .dock{
    display:flex;align-items:center;gap:7px;
    position:fixed;left:50%;transform:translateX(-50%);
    bottom:calc(12px + env(safe-area-inset-bottom));
    z-index:80;width:min(calc(100% - 24px),460px);
    padding:7px;border-radius:100px;
    background:rgba(255,255,255,.82);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    backdrop-filter:saturate(180%) blur(20px);
    border:1px solid rgba(255,255,255,.7);
    box-shadow:0 2px 6px rgba(36,26,24,.06),0 16px 44px rgba(36,26,24,.20);
  }
  .dock__i{
    display:grid;place-items:center;flex:none;
    width:48px;height:48px;border-radius:50%;
    text-decoration:none;
    background:rgba(36,26,24,.045);
    border:1px solid rgba(36,26,24,.07);
    transition:background .18s ease,transform .18s cubic-bezier(.2,.7,.3,1);
  }
  .dock__i:active{transform:scale(.93);background:rgba(36,26,24,.09)}
  .dock__i .ic{width:22px;height:22px}
  /* цвет — в значке, а не в заливке кнопки */
  .dock__i--tel{color:var(--teal-dk)}
  /* фирменный #2AABEE на светлой подложке даёт контраст 2,37 — мало.
     Берём тот же синий, но темнее: 5,05 и узнаваемость сохраняется. */
  .dock__i--tg{color:#0E6EAA}
  .dock__i--max{color:#5533EE}

  .dock__cta{
    flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;
    height:48px;padding:0 16px;border-radius:100px;
    background:var(--teal-mid);color:#fff;text-decoration:none;
    font-size:15px;font-weight:500;white-space:nowrap;
    box-shadow:0 6px 18px rgba(4,125,123,.34);
    transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s ease;
  }
  .dock__cta:active{transform:scale(.98);box-shadow:0 3px 10px rgba(4,125,123,.3)}

  /* Панель парит над содержимым, поэтому под ней нужно место:
     её высота 64 px плюс отступ снизу и безопасная зона. */
  body{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
@media(max-width:380px){
  .dock{gap:6px;padding:6px}
  .dock__i{width:44px;height:44px}
  .dock__cta{height:44px;font-size:14px;padding:0 12px}
}

/* ---------- подвал ---------- */
.ftr{background:transparent;border-top:0;color:#4A332D;font-size:13.5px;padding:0}
/* подвал — такая же панель, как секции: та же ширина и те же поля */
.ftr > .wrap{
  border-radius:32px 32px 0 0;
  padding:clamp(40px,4.4vw,64px) clamp(28px,3.2vw,64px) 34px;
  background:linear-gradient(138deg,#EAF5F2 0%,#E1F0EC 46%,#F7E8E2 100%);
}
.ftr__top{display:grid;grid-template-columns:1.3fr 1fr 1.15fr 1fr;gap:clamp(24px,3vw,44px);
  padding-bottom:34px;border-bottom:1px solid rgba(36,26,24,.18)}
.ftr__logo{width:58px;height:58px;border-radius:50%;flex:none}
.ftr__slogan{margin:16px 0 0;max-width:26ch;line-height:1.55}
.ftr__col h4{margin:0 0 14px;font-family:var(--label);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:#7A2B12}
.ftr__col p{margin:0 0 11px;line-height:1.55;color:#4A332D}
.ftr__col p.mono{font-size:12.5px;color:#5A4038;letter-spacing:.01em}
.ftr a{color:#241A18;text-decoration:none;border-bottom:1px solid rgba(36,26,24,.32)}
.ftr a:hover{border-bottom-color:#241A18}
.ftr__bottom{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;
  padding-top:24px;font-size:12.5px;color:#5A4038}
.ftr__warn{color:#4A332D}
@media(max-width:980px){.ftr__top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr__top{grid-template-columns:1fr;gap:30px}}


/* ---------- появление при скролле ---------- */
/* .rise оставлен как хук для скриптов; содержимое всегда видно */
.rise{opacity:1;transform:none}

/* ---------- страница прайса ---------- */
.pfilter{display:flex;flex-wrap:wrap;gap:9px;margin:28px 0 34px;position:sticky;top:86px;
  background:var(--paper);padding:16px 0;z-index:20;border-bottom:1px solid var(--line)}
.pfilter input{flex:1;min-width:220px;padding:12px 16px;border-radius:100px;
  border:1px solid var(--line);background:var(--white);font:inherit;font-size:15px}
.tag{padding:9px 16px;border-radius:100px;border:1px solid var(--line);background:transparent;
  cursor:pointer;font-size:13.5px;transition:all .16s}
.tag:hover{border-color:var(--ink)}
.tag.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pgroup{margin-bottom:44px}
.pgroup h3{margin-bottom:4px}
.pgroup__d{color:var(--muted);font-size:14.5px;margin:0 0 18px;max-width:70ch}
.pgroup__sub{font-family:var(--label);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-dk);margin:22px 0 8px}
.pempty{padding:60px 0;text-align:center;color:var(--muted)}



/* индикатор прочитанного */
.progress{
  position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:0 50%;
  background:var(--teal);z-index:90;transform:scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .progress{
    animation:grow linear both;
    animation-timeline:scroll(root block);
  }
  @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}


/* ================= ЕДИНЫЙ ЯЗЫК СТРАНИЦЫ ================= */

/* Тёмные секции больше не полосы во всю ширину — это панели на холсте */
.sec--dark{background:transparent;padding:0}

.sec--dark > .wrap{
  background:var(--ink);border-radius:32px;
  padding:clamp(40px,4.4vw,80px) clamp(28px,3.2vw,64px);
  max-width:var(--wrap);margin-inline:auto;
}
#doctors.sec--dark{padding-top:0}
#doctors.sec--dark > .wrap{background:var(--ink-2)}

/* Заголовок секции — двухколоночный, как в журнале */
.sec__head{
  max-width:none;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(20px,3vw,56px);align-items:end;
  margin-bottom:clamp(30px,3.4vw,46px);
}
.sec__head .eyebrow{grid-column:1;margin-bottom:12px}
/* h1 стоит на прайсе — раскладываем его так же, как h2, иначе заголовок
   уезжает во вторую колонку, а подпись под ним остаётся в первой */
.sec__head h2,.sec__head h1{grid-column:1}
.sec__head .price__n{grid-column:1;margin:10px 0 0}
.sec__head .lead{grid-column:2;margin:0;font-size:16px;max-width:46ch;padding-bottom:8px}
@media(max-width:900px){
  .sec__head{grid-template-columns:1fr;gap:14px;align-items:start}
  .sec__head .lead{grid-column:1;padding-bottom:0}
}

/* Единые скругления и отказ от волосяных рамок на карточках */
.doc,.doc{overflow:hidden}
.faq details{border-bottom:1px solid var(--line)}

/* Секции на холсте дышат ровнее */
/* расстояние между блоками задаётся один раз, а не двумя отступами подряд */
.sec{padding:0}
.bento-wrap{
  position:relative;isolation:isolate;padding:clamp(26px,3vw,48px) 0 clamp(30px,3.4vw,52px);
  margin-bottom:clamp(8px,1vw,14px);
}
/* мягкие засветы, как были на плитке */
@media (prefers-reduced-motion: no-preference){
    @keyframes gradientDrift{
    from{background-position:0% 38%}
    to{background-position:100% 62%}
  }
}
body > section + section,
body > section + .ftr{margin-top:var(--gap)}
/* панели идут стопкой карточек — между ними тесный зазор */
.sec--dark + .sec--dark,
.sec--dark + .ftr{margin-top:clamp(10px,1vw,14px)}


/* ---------- услуги: плитки вместо таблицы ---------- */
#services .cats{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.cat{
  border-top:0;padding:clamp(26px,2.4vw,34px);border-radius:24px;
  background:var(--white);grid-column:span 6;
  display:flex;flex-direction:column;
  transition:transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s ease;
}
.cat:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(36,26,24,.1)}
/* короткие списки в один ряд, длинные — во второй */
.cat:nth-child(1){grid-column:span 4;order:1}
.cat:nth-child(2){grid-column:span 4;order:2}
.cat:nth-child(5){grid-column:span 4;order:3}
.cat:nth-child(3){grid-column:span 6;order:4}
.cat:nth-child(4){grid-column:span 6;order:5}
.cat__grid{display:block}
.cat__head{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.cat__title{font-family:var(--display);font-size:clamp(18px,1.6vw,23px);font-weight:500;line-height:1.2;letter-spacing:-.03em}
.cat__count{font-family:var(--label);font-weight:500;font-size:11px;color:var(--teal-dk);letter-spacing:.08em}
.cat__hint{font-size:13.5px;color:var(--muted);margin:0 0 20px}
.cat__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2px}

.srv{padding:12px 14px;border-radius:12px}
.srv:hover{padding-left:18px}
@media(max-width:820px){
  .cat,.cat:nth-child(n){grid-column:span 12}
}


/* ---------- результаты ---------- */
/* шесть кадров одного формата, поэтому ровная сетка: 3×2 на десктопе */
.res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.res figure{grid-column:auto;margin:0}
@media(max-width:860px){.res{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.res{grid-template-columns:1fr}}

/* ---------- отзывы: сводка плиткой, карточки без рамок ---------- */
.score{font-size:clamp(38px,4vw,58px);font-weight:300;letter-spacing:-.045em}
.revs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.rev{grid-column:span 4;padding:30px}
.rev p{font-size:15.5px}
@media(max-width:900px){
    .rev{grid-column:span 12}
}

/* ---------- документы и акции в общей плиточной логике ---------- */
.promo{gap:12px}

/* ---------- FAQ: панель, а не список строк ---------- */
.faq{border-top:0;background:var(--white);border-radius:24px;padding:8px clamp(24px,2.6vw,36px)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:26px 46px 26px 0}

/* ---------- прайс-превью и телемедицина ---------- */
.ptable{border:0;background:var(--white)}
.prow{border-bottom:1px solid var(--line)}
.tele{border:0}


/* ================= ГРАФИЧЕСКИЕ ФОНЫ ================= */
/* Все узоры — SVG в data-URI, наследуют цвет через currentColor.
   Плотность держим на грани заметности: рисунок не должен спорить с текстом. */

.pattern{position:relative;isolation:isolate}
.pattern::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  border-radius:inherit;background-repeat:repeat;
}

/* Рельеф кожи — секция врачей */
#doctors > .wrap{position:relative;isolation:isolate;overflow:hidden}
#doctors > .wrap::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  color:var(--teal);opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='84' viewBox='0 0 160 84'%3E%3Cg fill='none' stroke='currentColor' stroke-width='1'%3E%3Cpath d='M0 8q10-7 20 0t20 0t20 0t20 0t20 0t20 0t20 0t20 0t20 0'/%3E%3Cpath d='M-20 22q10-7 20 0t20 0t20 0t20 0t20 0t20 0t20 0t20 0t20 0'/%3E%3Cpath d='M0 36q10-7 20 0t20 0t20 0t20 0t20 0t20 0t20 0t20 0t20 0'/%3E%3Cpath d='M-20 50q10-7 20 0t20 0t20 0t20 0t20 0t20 0t20 0t20 0t20 0'/%3E%3Cpath d='M0 64q10-7 20 0t20 0t20 0t20 0t20 0t20 0t20 0t20 0t20 0'/%3E%3Cpath d='M-20 78q10-7 20 0t20 0t20 0t20 0t20 0t20 0t20 0t20 0t20 0'/%3E%3C/g%3E%3C/svg%3E");background-size:160px 84px;
}

/* Мягкие засветы на коралловой плитке: свет сверху справа, тёплая тень снизу слева */
.tile--main{isolation:isolate}

/* Сетка приёма — блок записи */
#contact > .wrap{position:relative;isolation:isolate;overflow:hidden}
#contact > .wrap::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  color:#fff;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg stroke='currentColor' stroke-width='1' fill='none'%3E%3Cpath d='M0 0h200M0 50h200M0 100h200M0 150h200M0 0v200M50 0v200M100 0v200M150 0v200'/%3E%3C/g%3E%3Cg fill='currentColor' opacity='.55'%3E%3Crect x='50' y='0' width='50' height='50'/%3E%3Crect x='150' y='100' width='50' height='50'/%3E%3Crect x='0' y='150' width='50' height='50'/%3E%3C/g%3E%3C/svg%3E");background-size:200px 200px;
}

@media (prefers-reduced-transparency: reduce){
  #doctors > .wrap::before,
  .tile--main::before,#contact > .wrap::before{display:none}
}

/* ---------- карточка врача: портрет медальоном ---------- */
.doc{
  background:var(--white);border-radius:24px;overflow:visible;
  padding:26px 24px 24px;display:flex;flex-direction:column;align-items:center;
  text-align:center;
}
.doc__hex{
  display:block;width:164px;margin-bottom:20px;
  filter:drop-shadow(0 8px 18px rgba(4,96,94,.16));
}
.doc__hex img{width:100%;height:auto;display:block}
.doc__n{font-family:var(--display);font-size:15.5px;line-height:1.35;
  letter-spacing:-.02em;font-weight:500;margin-top:0}
.doc__r{font-size:13.5px;margin-top:8px;min-height:2.7em}

.doc__more{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:14px;color:var(--teal-dk);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .16s ease;
}
.doc__more .ic{width:15px;height:15px;transition:transform .18s ease}
.doc__more:hover{border-bottom-color:currentColor}
.doc__more:hover .ic{transform:translate(2px,-2px)}
.doc__m{font-family:var(--label);font-size:10.5px;letter-spacing:.06em;
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
@media(max-width:620px){
  .doc__hex{width:132px}
}



/* ---------- о клинике и реестр документов ---------- */
.about{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:12px;align-items:stretch}
.about__text{background:var(--white);border-radius:24px;padding:clamp(26px,2.8vw,38px);
  display:flex;flex-direction:column}
.about__text p{margin:0 0 16px;font-size:16px;line-height:1.62;color:var(--muted)}
.about__facts{margin:26px 0 0;padding-top:22px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
.about__facts dt{font-family:var(--label);font-weight:500;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--teal-dk)}
.about__facts dd{margin:7px 0 0;font-size:15.5px;line-height:1.4}

.reg{background:var(--white);border-radius:24px;padding:clamp(24px,2.6vw,34px)}
.reg__head{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;
  justify-content:space-between;margin-bottom:22px}
.reg__head h3{margin:0;font-size:clamp(18px,1.6vw,22px)}
.reg__pdf{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:14px;color:var(--teal-dk);border:1px solid var(--line);border-radius:100px;
  padding:9px 16px;transition:border-color .16s ease,background .16s ease}
.reg__pdf:hover{border-color:var(--teal-dk);background:var(--teal-wash)}
.reg__pdf .ic{width:18px;height:18px}

.reg__t{width:100%;border-collapse:collapse;font-size:15px}
.reg__t th{
  font-family:var(--label);font-weight:500;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-lt);text-align:left;
  padding:0 12px 10px 0;border-bottom:1px solid var(--line);
}
.reg__t td{padding:15px 12px 15px 0;border-bottom:1px solid var(--line);vertical-align:top}
.reg__t tr:last-child td{border-bottom:0}
.reg__t td b{display:block;font-weight:500;font-size:15.5px}
.reg__t td span{display:block;font-size:13px;color:var(--muted);margin-top:4px}
.reg__t td.mono{font-family:var(--mono);font-size:13px;color:var(--muted);white-space:nowrap}
.reg__t a{color:var(--teal-dk);font-size:14px}
.reg__note{margin:20px 0 0;font-size:13px;color:var(--muted-lt)}

@media(max-width:1024px){
  .about{grid-template-columns:1fr}
}
@media(max-width:620px){
  .about__facts{grid-template-columns:1fr}
  .reg__t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .reg__t td{display:block;padding:4px 0;border:0}
  .reg__t tr{display:block;padding:16px 0;border-bottom:1px solid var(--line)}
  .reg__t tr:last-child{border-bottom:0}
  .reg__t td.mono{white-space:normal}
}


/* ---------- отзывы: сводка и площадки ---------- */
/* панели-карточки: скругление задаётся здесь, чтобы не терялось при правках */
.rev__top,.doc,.doc-card,.promo__c,.res figure,.rev,.tele,.ptable{border-radius:24px}

.rev__top{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,3vw,48px);align-items:start;
  padding:clamp(28px,3vw,42px);border:0;
}
.rev__sum .eyebrow{margin-bottom:10px}
.score{display:block;font-family:var(--display);font-weight:300;
  font-size:clamp(44px,5vw,68px);letter-spacing:-.05em;line-height:1}
.rev__cap{margin:12px 0 0;font-size:15px;line-height:1.55;color:var(--muted);max-width:40ch}
.rev__cap b{font-weight:500;color:var(--ink)}
.praise__t{
  margin:26px 0 14px;padding-top:24px;border-top:1px solid rgba(36,26,24,.14);
  font-family:var(--label);font-weight:500;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--teal-dk);
}
.praise{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.praise li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:14px}
.praise b{font-family:var(--display);font-weight:300;font-size:clamp(24px,2.2vw,30px);
  letter-spacing:-.04em;line-height:1;color:var(--teal-dk)}
.praise span{font-size:15px;line-height:1.4}
.rev__note{margin:20px 0 0;font-size:12.5px;color:var(--muted-lt)}
@media(max-width:720px){
    .mark{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;
    column-gap:16px;row-gap:2px;padding-bottom:14px;border-bottom:1px solid rgba(36,26,24,.1)}
  .mark:last-child{border-bottom:0;padding-bottom:0}
      }

.plats{display:grid;grid-template-columns:1fr;gap:2px;align-content:start}
.pl{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:15px 18px;border-radius:14px;text-decoration:none;color:inherit;
  transition:background .16s ease,padding .16s ease;
}
.pl:hover{background:var(--white);padding-left:20px}
.pl .ic{width:22px;height:22px;color:var(--teal-dk)}
.pl__n{font-size:15.5px;line-height:1.25}
.pl__n small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.pl b{font-family:var(--mono);font-weight:400;font-size:15px;color:var(--teal-dk)}
@media(max-width:900px){
  .rev__top{grid-template-columns:1fr;gap:26px}
  .plats{grid-template-columns:1fr}
}


/* ---------- страница «О клинике» ---------- */

.ok-facts{margin:0;background:#E3F1EE;border-radius:24px;padding:clamp(24px,2.6vw,34px);display:grid;gap:18px}
.ok-facts dt{font-family:var(--label);font-weight:500;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:#04605E}
.ok-facts dd{margin:6px 0 0;font-size:15.5px;line-height:1.4}

.way{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:w}
.way__i{margin:0;background:var(--white);border-radius:24px;overflow:hidden;position:relative}
.way__i img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.way__i figcaption{padding:22px 24px 26px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.way__i figcaption b{display:block;font-size:17px;color:var(--ink);margin-bottom:7px;font-weight:500}
.way__i::before{
  counter-increment:w;content:counter(w);position:absolute;left:20px;top:20px;
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--teal-dk);
  font-family:var(--mono);font-size:14px;display:flex;align-items:center;justify-content:center;
}

.inside{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.inside__i{margin:0;background:var(--white);border-radius:24px;overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease}
.inside__i:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(36,26,24,.12)}
.inside__i img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.inside__i figcaption{padding:18px 20px 22px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.inside__i figcaption b{display:block;font-size:15.5px;color:var(--ink);margin-bottom:6px;font-weight:500}

@media(max-width:1180px){.inside{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1024px){.ok-hero__in{grid-template-columns:1fr}.ok-facts{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.way{grid-template-columns:1fr}.inside{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.inside{grid-template-columns:1fr}.ok-facts{grid-template-columns:1fr}}



/* ---------- блок онлайн-записи ---------- */
.bookcard h2{margin:12px 0 16px}
.bookcard__lead{font-size:16.5px;line-height:1.6;margin:0 0 28px;max-width:48ch;opacity:.85}
.bookcard__steps{list-style:none;counter-reset:b;margin:0 0 30px;padding:0;display:grid;gap:2px}
.bookcard__steps li{
  counter-increment:b;position:relative;padding:16px 0 16px 52px;
  border-top:1px solid rgba(255,255,255,.16);font-size:14.5px;line-height:1.5;opacity:.8;
}
.bookcard__steps li:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.bookcard__steps li::before{
  counter-increment:none;content:counter(b,decimal-leading-zero);
  position:absolute;left:0;top:16px;font-family:var(--label);font-weight:500;
  font-size:12px;letter-spacing:.1em;color:var(--teal);opacity:.9;
}
.bookcard__steps span{display:block;font-size:16px;opacity:1;margin-bottom:4px}
.bookcard__cta{display:flex;flex-wrap:wrap;gap:10px}
.bookcard__note{margin:24px 0 0;font-size:13px;line-height:1.5;opacity:.6}


/* ---------- слайдер фотографий клиники ---------- */
.about__gallery{display:flex;flex-direction:column;gap:16px}
.about__text p:last-of-type{margin-bottom:0}
.about__facts{margin-top:auto}
.agal{
  display:flex;gap:10px;overflow-x:auto;border-radius:24px;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;
}
.agal::-webkit-scrollbar{display:none}
.agal:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.agal__i{flex:0 0 100%;scroll-snap-align:center;margin:0;position:relative;border-radius:24px;overflow:hidden}
.agal__i img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/11}
.agal__i figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 22px 18px;color:#fff;
  font-family:var(--label);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(transparent,rgba(10,30,26,.75));
}

@supports selector(::scroll-marker-group){
  .agal{scroll-marker-group:after}
  .agal::scroll-marker-group{display:flex;justify-content:center;gap:7px;margin-top:14px}
  .agal__i::scroll-marker{
    content:"";width:7px;height:7px;border-radius:50%;border:0;cursor:pointer;
    background:rgba(36,26,24,.2);transition:background .2s ease,width .2s ease;
  }
  .agal__i::scroll-marker:target-current{background:var(--teal-dk);width:20px;border-radius:100px}
  .agal__i::scroll-marker:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
}
.agal__box{position:relative}
@supports selector(::scroll-button(right)){
  .agal::scroll-button(left),.agal::scroll-button(right){
    position:absolute;top:50%;translate:0 -50%;z-index:2;
    width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
    background:rgba(255,255,255,.9);color:var(--ink);font-size:15px;line-height:1;
    transition:background .16s ease,opacity .16s ease;
  }
  .agal::scroll-button(left){content:"←" / "Предыдущее фото";left:14px}
  .agal::scroll-button(right){content:"→" / "Следующее фото";right:14px}
  .agal::scroll-button(*):hover{background:#fff}
  .agal::scroll-button(*):disabled{opacity:0}
  .agal::scroll-button(*):focus-visible{outline:2px solid var(--teal);outline-offset:2px}
}

.about__more{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  font-size:14.5px;color:var(--teal-dk);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .16s ease;
}
.about__more .ic{width:16px;height:16px;transition:transform .18s ease}
.about__more:hover{border-bottom-color:currentColor}
.about__more:hover .ic{transform:translate(2px,-2px)}


/* ================= ЖИВОЙ СЛОЙ: ЦВЕТ И ДВИЖЕНИЕ ================= */

/* ---------- услуги: цвет по направлению ---------- */
.cat{position:relative;isolation:isolate;overflow:hidden;border:1px solid transparent}
.cat::before{
  content:"";position:absolute;z-index:-1;top:-80px;right:-80px;
  width:240px;height:240px;border-radius:50%;transform:scale(.5);opacity:.5;
  transition:transform .5s cubic-bezier(.2,.7,.3,1),opacity .5s ease;
}
.cat:nth-child(1){background:#E8F2F0}.cat:nth-child(1)::before{background:#CBE6E1}
.cat:nth-child(2){background:#FBE7DE}.cat:nth-child(2)::before{background:#F6C9B4}
.cat:nth-child(3){background:#F3ECFA}.cat:nth-child(3)::before{background:#DFD0F0}
.cat:nth-child(4){background:#EAF0F7}.cat:nth-child(4)::before{background:#CFDDEE}
.cat:nth-child(5){background:#F7EFE3}.cat:nth-child(5)::before{background:#EBDBC1}
.cat:hover::before{transform:scale(2.4);opacity:.85}
.cat:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(36,26,24,.12)}

.cat__head{align-items:center;gap:12px}
.cat__ic{width:24px;height:24px;flex:none;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.cat:hover .cat__ic{transform:rotate(-8deg) scale(1.12)}
.cat:nth-child(1) .cat__ic{color:#04605E}
.cat:nth-child(2) .cat__ic{color:#A63D1C}
.cat:nth-child(3) .cat__ic{color:#6B4A9E}
.cat:nth-child(4) .cat__ic{color:#2F5B93}
.cat:nth-child(5) .cat__ic{color:#8A5A2B}
.cat__hint{color:#6E5C58}
.srv{transition:padding-left .18s ease,background .18s ease}
.srv:hover{background:rgba(255,255,255,.7)}

/* ---------- врачи: карточка оживает ---------- */
.doc{transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease}
.doc:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(4,96,94,.18)}
.doc__ph,.doc__hex{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.doc:hover .doc__hex{transform:scale(1.06) rotate(-2deg)}

/* ---------- результаты: приближение и подсветка ---------- */
.res figure{position:relative;isolation:isolate}
.res figure img{transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.res figure:hover img{transform:scale(1.06)}
.res figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(4,96,94,.18),transparent 55%);
  opacity:0;transition:opacity .35s ease;
}
.res figure:hover::after{opacity:1}

/* ---------- отзывы: цитата и подъём ---------- */
.rev{position:relative;overflow:hidden;transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s ease}
.rev:nth-child(1){background:#FBE7DE}
.rev:nth-child(2){background:#E8F2F0}
.rev:nth-child(3){background:#F7EFE3}
.rev::before{
  content:"\201C";position:absolute;right:18px;bottom:-46px;
  font-family:var(--display);font-size:150px;line-height:1;
  color:rgba(36,26,24,.06);pointer-events:none;
}
.rev:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(36,26,24,.12)}

/* ---------- площадки отзывов ---------- */
.pl .ic{transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.pl:hover .ic{transform:scale(1.18) rotate(-6deg)}
.pl b{transition:transform .28s ease}
.pl:hover b{transform:scale(1.1)}

/* ---------- телемедицина: нумерация ---------- */
.tele__steps li{transition:padding-left .22s ease}
.tele__steps li:hover{padding-left:60px}
.tele__steps li::before{transition:transform .28s cubic-bezier(.2,.7,.3,1),color .2s ease}
.tele__steps li:hover::before{transform:scale(1.25)}

/* ---------- FAQ ---------- */
.faq summary{transition:padding-left .2s ease,color .2s ease}
.faq details[open] summary{color:var(--teal-dk)}
.faq summary:hover{padding-left:8px}

/* ---------- прайс-превью ---------- */
.prow{transition:background .18s ease,padding-left .18s ease}
.prow:hover{background:var(--teal-wash);padding-left:12px}

/* ---------- документы ---------- */
.reg__t tbody tr{transition:background .18s ease}
.reg__t tbody tr:hover{background:var(--teal-wash)}

/* ---------- надзаголовки секций: линия растёт при появлении ---------- */


/* ---------- бенто: круги оживают под курсором ---------- */
a.tile{position:relative;isolation:isolate;overflow:hidden}
a.tile::after{
  content:"";position:absolute;z-index:-1;top:-90px;right:-90px;
  width:240px;height:240px;border-radius:50%;transform:scale(.5);opacity:0;
  transition:transform .5s cubic-bezier(.2,.7,.3,1),opacity .5s ease;
}
.tile--rate::after{background:#CBE6E1}
.tile--price::after{background:#F6C9B4}
.tile--geo::after{background:#CFE3DE}
a.tile:hover::after{transform:scale(2.4);opacity:.75}
.tile__n{transition:transform .3s cubic-bezier(.2,.7,.3,1);transform-origin:left bottom}
a.tile:hover .tile__n{transform:scale(1.07)}

/* ---------- документы: карточки реестра ---------- */
.reg__pdf{position:relative;overflow:hidden}
.reg__pdf .ic{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.reg__pdf:hover .ic{transform:translateY(-2px) scale(1.12)}

/* ---------- квиз: карточки ответов ---------- */
.quiz__opt{position:relative;isolation:isolate;overflow:hidden;min-height:74px}
.quiz__opt::after{
  content:"";position:absolute;z-index:-1;inset:auto -40px -40px auto;
  width:120px;height:120px;border-radius:50%;background:var(--teal-wash);
  transform:scale(.4);opacity:0;transition:transform .45s cubic-bezier(.2,.7,.3,1),opacity .45s ease;
}
.quiz__opt:hover::after{transform:scale(2.6);opacity:.9}
.quiz__opt .ic{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.quiz__opt:hover .ic{transform:rotate(-8deg) scale(1.15)}

/* ---------- кнопки: мягкий отклик ---------- */
.btn{transition:transform .22s cubic-bezier(.2,.7,.3,1),background .2s ease,
  border-color .2s ease,box-shadow .22s ease}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(4,125,123,.32)}

/* ---------- пульсация на записи ----------
   Только у кнопок записи: если пульсировать всеми основными кнопками,
   это перестаёт что-либо значить. Кольцо расходится из-под кнопки
   и гаснет — сама кнопка при этом неподвижна, чтобы текст не «дышал»
   и не сбивал чтение. Под курсором пульсация прекращается: человек
   уже нашёл кнопку, дальше подсказка только мешает. */
/* Кнопок с data-book на странице до 37: пульсировать всеми — превратить
   страницу в мигалку. Оставляем две постоянные: в шапке на десктопе
   и плавающую на телефоне. Остальные ведут себя спокойно. */
.hdr__cta,.dock__cta{position:relative}
.hdr__cta::after,.dock__cta::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:-1;
  box-shadow:0 0 0 0 rgba(0,159,155,.45);
}
@media (prefers-reduced-motion: no-preference){
  .hdr__cta::after,.dock__cta::after{animation:bookPulse 2.8s cubic-bezier(.25,.6,.3,1) infinite}
  .hdr__cta:hover::after,.hdr__cta:focus-visible::after,
  .dock__cta:hover::after,.dock__cta:focus-visible::after{animation-play-state:paused}
  @keyframes bookPulse{
    0%{box-shadow:0 0 0 0 rgba(0,159,155,.42)}
    60%{box-shadow:0 0 0 16px rgba(0,159,155,0)}
    100%{box-shadow:0 0 0 0 rgba(0,159,155,0)}
  }
}
.btn--ghost:hover{transform:translateY(-2px)}

/* ---------- врачи: подпись «Подробнее» ---------- */
/* position:static нужен намеренно: псевдоэлемент ниже растягивается
   по ближайшему позиционированному предку, и им должна быть карточка,
   а не сама ссылка. */
.doc__more{position:static}
.doc:hover .doc__more{color:var(--teal-mid)}

/* ---------- врачи: кликабельна вся карточка ---------- */
/* Ссылка одна на карточку, поэтому вместо обёртки в <a> растягиваем
   существующую. Разметка остаётся валидной, а диктор читает карточку
   как одну ссылку, а не как две. */
.doc{position:relative;cursor:pointer}
.doc__more::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;
}
/* фокус с клавиатуры обводит карточку целиком, а не подпись внизу */
.doc:focus-within{outline:2px solid var(--teal);outline-offset:3px}
.doc__more:focus-visible{outline:none}
/* ссылка лежит в колоночном флексе и растягивалась по ширине карточки —
   подчёркивание при наведении уезжало далеко за текст. Поджимаем по содержимому. */
.doc__more{align-self:center;justify-content:center}

/* ---------- страница врача и «О клинике» ---------- */
.way__i img,.inside__i img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.way__i:hover img,.inside__i:hover img{transform:scale(1.05)}
.way__i:hover,.inside__i:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(36,26,24,.13)}
.way__i,.inside__i{overflow:hidden}


/* ---------- логотип: две D сходятся в слово ---------- */
@media (prefers-reduced-motion: no-preference){
  .logo__d1,.logo__d2{transform-box:fill-box;transform-origin:center}
  .logo__d1{animation:dFromTop .95s cubic-bezier(.22,.9,.28,1.06) both}
  .logo__d2{animation:dFromBottom .95s cubic-bezier(.22,.9,.28,1.06) .07s both}
  @keyframes dFromTop{
    0%{transform:translateY(-46px) scaleY(1.25);opacity:0}
    55%{opacity:1}
    100%{transform:none;opacity:1}
  }
  @keyframes dFromBottom{
    0%{transform:translateY(46px) scaleY(1.25);opacity:0}
    55%{opacity:1}
    100%{transform:none;opacity:1}
  }
  /* остальные буквы проявляются чуть позже, чтобы D были главными */
  .logo__mark path:not(.logo__d1):not(.logo__d2){
    animation:letterIn .7s ease-out .34s both;
  }
  @keyframes letterIn{from{opacity:0}to{opacity:1}}
}


/* ---------- подбор: цвет по типу жалобы ---------- */
.quiz__bar{gap:8px}
.quiz__seg{height:4px;background:rgba(4,96,94,.16);border-radius:3px}
.quiz__seg.on{background:linear-gradient(90deg,var(--teal-dk),var(--teal))}

.quiz__q{font-size:clamp(21px,2vw,28px)}
.quiz__opt{background:rgba(255,255,255,.94)}
/* значок в подложке: на светлой карточке контурная иконка терялась */
.quiz__opt .ic{width:24px;height:24px}

.quiz__opt .ic{
  flex:none;box-sizing:content-box;width:22px;height:22px;padding:10px;
  border-radius:12px;background:var(--teal-wash);
}

/* каждая жалоба своим цветом — как в каталоге услуг */
.quiz__opts .quiz__opt:nth-child(1) .ic{color:#A63D1C}
.quiz__opts .quiz__opt:nth-child(2) .ic{color:#04605E}
.quiz__opts .quiz__opt:nth-child(3) .ic{color:#8A5A2B}
.quiz__opts .quiz__opt:nth-child(4) .ic{color:#B03A55}
.quiz__opts .quiz__opt:nth-child(5) .ic{color:#6B4A9E}
.quiz__opts .quiz__opt:nth-child(6) .ic{color:#2F5B93}
.quiz__opts .quiz__opt:nth-child(7) .ic{color:#04605E}

.quiz__opt::after{background:rgba(255,255,255,.95)}
.quiz__opt:hover{border-color:var(--teal);box-shadow:0 14px 30px rgba(4,96,94,.12)}
.quiz__opt[aria-pressed="true"]{
  background:#fff;border-color:var(--teal-mid);
  box-shadow:0 0 0 3px rgba(18,179,160,.18),0 14px 30px rgba(4,96,94,.14);
}

/* ---------- результат подбора ---------- */
.quiz__tag{
  background:#fff;color:var(--teal-dk);font-size:12px;padding:9px 18px;
  box-shadow:0 6px 18px rgba(4,96,94,.12);
}
.quiz__row{border-bottom-color:rgba(36,26,24,.12)}
.quiz__row:hover{background:rgba(255,255,255,.6);border-radius:10px}
.quiz__sum{border-top-color:rgba(36,26,24,.16)}
.quiz__sum b{color:#A63D1C}
.quiz__step{color:#7ED9CF}   /* панель тёмная: коралловый на ней не читается */



.tile--photo{
  grid-column:span 5;grid-row:span 2;background:#EFE3DD;
  padding:0;overflow:hidden;position:relative;margin:0;
}
/* фигуры вписываем целиком: фон у снимка прозрачный, обрезать нечего */
.tile--photo{display:flex;align-items:flex-end;justify-content:center;padding:0 clamp(6px,1vw,14px)}
.tile--photo img{
  width:auto;max-width:100%;height:auto;max-height:100%;
  object-fit:contain;object-position:center bottom;display:block;
}
.tile--photo figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:22px;
  font-family:var(--label);font-weight:500;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;
  background:linear-gradient(transparent,rgba(10,30,26,.55));
}

/* плитка с фото на узких экранах — правило идёт последним, чтобы не перебивалось */
@media(max-width:1080px){
  .bento .tile--photo{grid-column:span 12;grid-row:auto;min-height:320px}
}

.lbl-short{display:none}

/* кнопки первого экрана держатся в одну строку на телефоне */
@media(max-width:620px){
  .tile__cta{flex-wrap:nowrap;gap:8px}
  .tile__cta .btn{flex:1 1 0;justify-content:center;padding-inline:14px;white-space:nowrap}
  .lbl-full{display:none}
  .lbl-short{display:inline}
}


/* значки под заголовком: каждый в своём цвете */
.trust li:nth-child(1) .ic{color:#04605E}
.trust li:nth-child(2) .ic{color:#A63D1C}
.trust li:nth-child(3) .ic{color:#6B4A9E}
.trust .ic{transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.trust li:hover .ic{transform:scale(1.18) rotate(-8deg)}
.tile--main .eyebrow{background:#fff;color:#04605E}
.tile--main .eyebrow::before{background:#A63D1C}

/* ---------- мобильное меню ---------- */
.nav__ic{display:none}
.nav__foot{display:none}

@media(max-width:1180px){
  .nav{
    padding:8px 0 clamp(24px,5vw,40px);overflow-y:auto;
    max-height:calc(100dvh - 86px);
    background:linear-gradient(160deg,#EAF5F2 0%,#E4F1ED 42%,#F9EAE4 100%);
  }
  .nav a{
    display:flex;align-items:center;gap:14px;
    padding:15px clamp(20px,4vw,40px);font-size:17px;border-bottom:1px solid rgba(4,96,94,.09);
    transition:background .18s ease,padding-left .18s ease;
  }
  .nav a:hover,.nav a:active{background:rgba(255,255,255,.6);padding-left:calc(clamp(20px,4vw,40px) + 6px)}
  .nav__ic{display:block;width:22px;height:22px;flex:none}

  /* каждый пункт своим цветом — как значки в подборе и каталоге */
  .nav a:nth-child(1) .nav__ic{color:#04605E}
  .nav a:nth-child(2) .nav__ic{color:#8A5A2B}
  .nav a:nth-child(3) .nav__ic{color:#2F5B93}
  .nav a:nth-child(4) .nav__ic{color:#A63D1C}
  .nav a:nth-child(5) .nav__ic{color:#6B4A9E}
  .nav a:nth-child(6) .nav__ic{color:#B03A55}
  .nav a:nth-child(7) .nav__ic{color:#0E7C76}
  .nav a:nth-child(8) .nav__ic{color:#2F5B93}
  .nav a:nth-child(9) .nav__ic{color:#A63D1C}
  .nav a:nth-child(10) .nav__ic{color:#04605E}

  /* пункты выезжают по очереди при открытии */
  @media (prefers-reduced-motion: no-preference){
    .nav.is-open a{animation:navIn .34s cubic-bezier(.2,.7,.3,1) both}
    .nav.is-open a:nth-child(1){animation-delay:.02s}
    .nav.is-open a:nth-child(2){animation-delay:.05s}
    .nav.is-open a:nth-child(3){animation-delay:.08s}
    .nav.is-open a:nth-child(4){animation-delay:.11s}
    .nav.is-open a:nth-child(5){animation-delay:.14s}
    .nav.is-open a:nth-child(6){animation-delay:.17s}
    .nav.is-open a:nth-child(7){animation-delay:.2s}
    .nav.is-open a:nth-child(8){animation-delay:.23s}
    .nav.is-open a:nth-child(9){animation-delay:.26s}
    .nav.is-open a:nth-child(10){animation-delay:.29s}
    @keyframes navIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
  }

  .nav__foot{
    display:block;margin-top:18px;padding:20px clamp(20px,4vw,40px) 0;
    border-top:1px solid rgba(4,96,94,.14);
  }
  .nav__call,.nav__addr{
    display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-bottom:0;
    font-size:16.5px;line-height:1.3;
  }
  .nav__call .ic,.nav__addr .ic{width:22px;height:22px;flex:none;margin-top:2px}
  .nav__call .ic{color:#04605E}
  .nav__addr .ic{color:#A63D1C}
  .nav__call small,.nav__addr small{
    display:block;margin-top:4px;font-size:13px;color:var(--muted);font-weight:400;
  }
  .nav__msg{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
  .nav__msg a{
    padding:9px 16px;border:1px solid rgba(4,96,94,.22);border-radius:100px;
    font-size:14px;background:rgba(255,255,255,.6);
  }
  .nav__msg a:hover{background:#fff;border-color:var(--teal-dk);padding-left:16px}
  .nav__cta{width:100%;justify-content:center;padding-block:15px;color:#fff}
  .nav__cta:hover{color:#fff;background:var(--teal-dk)}
  /* запас снизу, чтобы кнопку не перекрывала липкая панель записи */
  .nav__foot{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}



/* ================= ШАБЛОН ВЛОЖЕННОЙ СТРАНИЦЫ ================= */
/* используется для врачей, дальше — для услуг, аппаратов и статей */

.vr-hero{padding:14px 0 0}
.vr-hero__in{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  gap:12px;align-items:stretch;
}
.vr-hero__text{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:28px;padding:clamp(28px,3.2vw,48px);
  display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(138deg,#EAF5F2 0%,#E1F0EC 46%,#F7E8E2 100%);
}
.vr-hero__text::before{
  content:"";position:absolute;z-index:-1;inset:auto -140px -170px auto;
  width:420px;height:420px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(246,201,180,.5),transparent 68%);
}
.vr-hero__text::after{
  content:"";position:absolute;z-index:-1;inset:-150px auto auto -120px;
  width:380px;height:380px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(159,214,205,.45),transparent 68%);
}
.vr__back{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  text-decoration:none;color:var(--teal-dk);font-size:14px;margin-bottom:24px;
  padding:8px 15px 8px 12px;border-radius:100px;background:rgba(255,255,255,.7);
  transition:background .18s ease,transform .18s ease;
}
.vr__back:hover{background:#fff;transform:translateX(-3px)}
.vr__back .ic{width:17px;height:17px;transform:rotate(180deg)}

.vr-hero h1{font-size:clamp(28px,3vw,44px);line-height:1.14;letter-spacing:-.04em;margin:0 0 14px}
.vr__role{font-size:clamp(16px,1.5vw,19px);color:var(--teal-dk);margin:0 0 8px}
.vr__meta{
  font-family:var(--label);font-weight:500;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:#A63D1C;margin:0 0 20px;
}
.vr__about{font-size:16px;line-height:1.62;color:#4A332D;max-width:56ch;margin:6px 0 0}
.vr__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}

.vr-hero__photo{
  border-radius:28px;padding:clamp(22px,2.4vw,32px);
  background:#EFE3DD;display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.vr__hex{display:block;width:min(230px,74%);filter:drop-shadow(0 14px 28px rgba(4,96,94,.22))}
.vr__hex img{width:100%;height:auto;display:block}
.vr__facts{
  margin:26px 0 0;width:100%;display:grid;gap:14px;
  padding-top:22px;border-top:1px solid rgba(36,26,24,.14);
}
.vr__facts dt{
  font-family:var(--label);font-weight:500;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:#8A5A2B;
}
.vr__facts dd{margin:6px 0 0;font-size:16px;line-height:1.4}

/* что делает врач — строки открывают запись на конкретную процедуру */
.vsrvs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}
.vsrv{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:18px 22px;border-radius:18px;text-decoration:none;color:inherit;
  background:var(--white);border:1px solid rgba(4,96,94,.12);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,border-color .18s ease;
}
.vsrv:hover{transform:translateY(-4px);border-color:var(--teal);box-shadow:0 16px 34px rgba(4,96,94,.12)}
.vsrv__n{font-size:16.5px;line-height:1.3}
.vsrv__p{font-family:var(--mono);font-size:13.5px;color:var(--teal-dk);white-space:nowrap}

/* образование */
.vr__edu{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px;align-items:start}
.vr__school{
  background:var(--white);border-radius:24px;padding:28px 30px;
  transition:transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s ease;
}
.vr__school:nth-child(1){background:#E8F2F0}
.vr__school:nth-child(2){background:#FBE7DE}
.vr__school:nth-child(3){background:#F3ECFA}
.vr__school:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(36,26,24,.1)}
.vr__school h3{font-size:17px;line-height:1.3;margin:0 0 18px}
.vr__school ul{list-style:none;margin:0;padding:0}
.vr__school li{
  display:grid;grid-template-columns:60px minmax(0,1fr);gap:14px;
  padding:12px 0;border-top:1px solid rgba(36,26,24,.12);font-size:15px;line-height:1.45;
}
.vr__year{font-family:var(--mono);font-size:13px;color:#7A6A62}
.vr__note{background:var(--white);border-radius:24px;padding:26px 30px;margin:0;
  font-size:15px;color:var(--muted)}

/* призыв к записи */
.vr-cta{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,3vw,48px);align-items:center}
.vr-cta__btns{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0}
.vr-cta__info p{margin:0 0 14px;font-size:16px;line-height:1.55;opacity:.85}
.vr-cta__info p:last-child{margin-bottom:0;font-size:15px;opacity:.7}

@media(max-width:1024px){
  .vr-hero__in{grid-template-columns:1fr}
  .vr-hero__photo{order:-1}
  .vr__hex{width:min(210px,52%)}
  .vr__facts{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .vr__facts{grid-template-columns:1fr}
  .vr-cta{grid-template-columns:1fr}
  .vsrv{padding:16px 18px}
}

/* ================= СТРАНИЦА СТАТЬИ ================= */
.art-hero{padding:14px 0 0}
.art-hero__in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:12px;align-items:stretch}
.art-hero__text{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:28px;padding:clamp(28px,3.2vw,48px);
  display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(138deg,#EAF5F2 0%,#E1F0EC 46%,#F7E8E2 100%);
}
.art-hero__text::before{
  content:"";position:absolute;z-index:-1;inset:auto -140px -170px auto;
  width:420px;height:420px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(246,201,180,.5),transparent 68%);
}
.crumbs{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:20px;
  font-family:var(--label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-lt);
}
.crumbs a{color:var(--teal-dk);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.art-hero h1{font-size:clamp(28px,3.2vw,46px);line-height:1.14;letter-spacing:-.04em;margin:0 0 16px}
.art-hero__lead{font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:#4A332D;max-width:56ch;margin:0}
.art-hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.art-hero__upd{margin:22px 0 0;font-size:12.5px;color:var(--muted-lt)}

.art-hero__facts{
  border-radius:28px;padding:clamp(24px,2.6vw,34px);background:#EFE3DD;
  display:flex;align-items:center;
}
.art-hero__facts dl{margin:0;display:grid;gap:20px;width:100%}
.art-hero__facts dt{
  font-family:var(--label);font-weight:500;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:#8A5A2B;
}
.art-hero__facts dd{margin:6px 0 0;font-size:clamp(17px,1.5vw,21px);line-height:1.25}

/* содержание */
.toc__t{
  margin:0 0 14px;font-family:var(--label);font-weight:500;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--teal-dk);
}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:t;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px}
.toc li{counter-increment:t}
.toc a{
  display:block;padding:11px 14px;border-radius:12px;text-decoration:none;color:inherit;
  font-size:15.5px;transition:background .16s ease,padding-left .16s ease;
}
.toc a::before{content:counter(t,decimal-leading-zero);margin-right:12px;
  font-family:var(--mono);font-size:12px;color:var(--teal-dk)}
.toc a:hover{background:var(--teal-wash);padding-left:20px}

/* текст статьи */
.art__body p{margin:0 0 18px;color:#3A2B26}
.art__body a{color:var(--teal-dk)}
.art__body h3{font-size:19px;margin:0 0 14px}
.art__body ul,.art__body ol{margin:0 0 20px;padding-left:0;list-style:none}
.art__body ul li{position:relative;padding-left:26px;margin-bottom:10px}
.art__body ul li::before{
  content:"";position:absolute;left:6px;top:11px;width:7px;height:7px;border-radius:50%;
  background:var(--teal);
}
.art-steps{counter-reset:st}
.art-steps li{counter-increment:st;position:relative;padding-left:46px;margin-bottom:14px}
.art-steps li::before{
  content:counter(st,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-family:var(--label);font-weight:500;font-size:12px;letter-spacing:.08em;color:#A63D1C;
}
.art-check li::before{background:#A63D1C}

.art-note{
  background:#FBE7DE;border-radius:20px;padding:22px 26px;margin:0 0 20px;
}
.art-note p{margin:0;font-size:16px;line-height:1.6}

.art-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-bottom:22px}
.art-col{border-radius:20px;padding:24px 26px}
.art-col--yes{background:#E8F2F0}
.art-col--no{background:#F7EFE3}
.art-col h3{margin:0 0 14px;font-size:17px}
.art-col--yes li::before{background:#04605E}
.art-col--no li::before{background:#8A5A2B}
.art-col li{margin-bottom:9px;font-size:15.5px;line-height:1.5}
/* пункт с заголовком и пояснением: раньше в этих списках был только текст,
   и <b> со <span> слипались в одну строку */
.art-col li b{display:block;margin-bottom:2px}
.art-col li b + span{display:block;font-size:14.5px;color:var(--muted)}

/* схемы */
/* ---------- онлайн-приём: карточка врача ---------- */
.online-doc{
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:32px;
  align-items:start;padding:28px;background:var(--white);border-radius:24px;
}
.online-doc__pic{margin:0;border-radius:20px;overflow:hidden;background:var(--paper-2)}
.online-doc__pic img{width:100%;height:auto;display:block}
.online-doc__n{
  margin:0;font-family:var(--display);font-weight:500;font-size:28px;
  letter-spacing:-.02em;color:var(--ink);
}
.online-doc__r{margin:8px 0 0;font-size:16px;color:var(--teal-dk)}
.online-doc__m{
  margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--label);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-lt);
}
.online-doc__a{margin:16px 0 0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.online-doc__cta{margin:22px 0 0}
.online-steps{max-width:820px}
@media(max-width:860px){
  .online-doc{grid-template-columns:1fr;gap:22px;padding:20px}
  .online-doc__pic{max-width:320px}
}

/* ---------- текст раздела ---------- */
.sec__text{max-width:820px}
.sec__notes{margin:22px 0 0;padding:0;list-style:none}
.sec__notes li{
  position:relative;padding-left:26px;margin-bottom:10px;
  font-size:15.5px;line-height:1.55;color:var(--muted);
}
.sec__notes li::before{
  content:"";position:absolute;left:6px;top:10px;width:7px;height:7px;
  border-radius:50%;background:var(--teal);
}

/* ---------- услуги отдельными страницами ---------- */
.svcs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.svc{
  display:flex;flex-direction:column;min-width:0;
  padding:24px 24px 22px;border-radius:20px;background:var(--white);
  text-decoration:none;border:1px solid rgba(4,96,94,.1);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,border-color .18s ease;
}
.svc:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(4,96,94,.13);border-color:rgba(4,96,94,.28)}
.svc__ic{
  display:grid;place-items:center;width:44px;height:44px;border-radius:13px;
  margin-bottom:14px;
  /* цвет задаётся группой ниже — одинаковая бирюза на всех шестнадцати
     карточках делала блок монотонным */
  background:var(--teal-wash);color:var(--teal-dk);
}
.svc__g{
  font-family:var(--label);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:7px;color:var(--muted-lt);
}

/* Четыре группы услуг — четыре цвета. Оттенки взяты из плиток первого
   экрана, чтобы блок не выпадал из палитры страницы. */
.svc--diag .svc__ic{background:#CFE8E3;color:#04605E}
.svc--diag .svc__g{color:#04605E}
.svc--diag:hover{border-color:rgba(4,96,94,.4);box-shadow:0 18px 40px rgba(4,96,94,.16)}

.svc--inj .svc__ic{background:#E8DEF7;color:#5B3E8C}
.svc--inj .svc__g{color:#5B3E8C}
.svc--inj:hover{border-color:rgba(91,62,140,.4);box-shadow:0 18px 40px rgba(91,62,140,.16)}

.svc--app .svc__ic{background:#F8D9C7;color:#A63D1C}
.svc--app .svc__g{color:#A63D1C}
.svc--app:hover{border-color:rgba(166,61,28,.4);box-shadow:0 18px 40px rgba(166,61,28,.16)}

.svc--care .svc__ic{background:#EFE0CE;color:#8A5A2B}
.svc--care .svc__g{color:#8A5A2B}
.svc--care:hover{border-color:rgba(138,90,43,.4);box-shadow:0 18px 40px rgba(138,90,43,.16)}
.svc__ic .ic{width:21px;height:21px}
.svc__t{
  font-weight:500;font-size:16.5px;line-height:1.3;color:var(--ink);
  letter-spacing:-.015em;overflow-wrap:anywhere;
}
.svc__d{margin-top:9px;font-size:14px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
/* Шага в три колонки нет намеренно: в группе четыре услуги, и при трёх
   колонках ряды перестают совпадать с группами — цвет тогда читается
   как случайный. Идём 4 → 2 → 1. */
@media(max-width:1080px){.svcs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.svcs{grid-template-columns:1fr}.svc{padding:20px 18px 18px}}

/* заголовок и счётчик позиций на прайсе */
main > .wrap > .sec__head h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(30px,3.6vw,52px);letter-spacing:-.03em;margin:0;
}
.price__n{
  margin:10px 0 0;font-family:var(--mono);font-size:14px;color:var(--teal-dk);
}

/* ---------- врачи онлайн-приёма ---------- */
.odocs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.odoc{
  display:flex;gap:18px;padding:22px;border-radius:22px;
  background:var(--white);border:1px solid rgba(4,96,94,.1);
}
.odoc__pic{flex:none;margin:0;width:96px}
.odoc__pic img{width:96px;height:105px;object-fit:cover;border-radius:14px}
.odoc__n{margin:0;font-family:var(--display);font-weight:500;font-size:19px;
  line-height:1.25;letter-spacing:-.015em}
.odoc__r{margin:6px 0 0;font-size:14.5px;color:var(--teal-dk)}
.odoc__m{margin:3px 0 0;font-family:var(--mono);font-size:12.5px;color:var(--muted-lt)}
.odoc__a{margin:11px 0 0;font-size:15px;line-height:1.55;color:var(--muted)}
.odoc__cta{margin:14px 0 0}
@media(max-width:900px){.odocs{grid-template-columns:1fr}}
@media(max-width:520px){.odoc{flex-direction:column;gap:14px}}

/* ---------- юридические страницы ---------- */
/* .wrap на узких блоках центрирует текст — юридический документ
   так не читается, выравниваем по левому краю */
.doc{max-width:760px;text-align:left}
.doc h1{font-family:var(--display);font-weight:400;font-size:clamp(30px,4vw,46px);
  letter-spacing:-.02em;margin:14px 0 14px}
.doc__lead{font-size:17px;line-height:1.6;color:var(--muted);margin:0 0 10px}
.doc__upd{font-family:var(--mono);font-size:12.5px;color:var(--muted-lt);margin:0 0 34px}
.doc__s{margin-bottom:30px}
.doc__s h2{font-family:var(--display);font-weight:500;font-size:21px;
  letter-spacing:-.01em;margin:0 0 12px}
.doc__s p{margin:0 0 12px;font-size:16px;line-height:1.65}
.doc__s ul{margin:0 0 12px;padding-left:20px}
.doc__s li{margin-bottom:7px;font-size:16px;line-height:1.6}
.doc__s a{color:var(--teal-dk)}
/* места, которые должен заполнить юрист клиники — видны и в вёрстке */
.doc__todo{
  padding:12px 16px;border-radius:12px;background:var(--coral-wash);
  font-size:14.5px;color:#8A3A1C;
}

/* ---------- страница 404 ---------- */
.nf{max-width:640px;padding:clamp(30px,6vw,80px) 0}
.nf h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,58px);
  letter-spacing:-.03em;margin:10px 0 16px}
.nf__links{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0}
.nf__tel{margin:26px 0 0;font-size:15.5px;color:var(--muted)}
.nf__tel a{font-family:var(--mono);color:var(--teal-dk)}

/* ---------- подборка цен из нескольких разделов ---------- */
.pmix + .pmix{margin-top:26px}
.pmix__h{
  margin:0 0 12px;font-family:var(--label);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-dk);
}
.pmix__h a{color:var(--muted-lt);text-decoration:none;border-bottom:1px solid var(--line)}
.pmix__h a:hover{color:var(--teal-dk);border-bottom-color:var(--teal-dk)}

/* ---------- карточка-ссылка на статью о методике ---------- */
.mlink{
  display:flex;align-items:center;gap:18px;
  padding:22px 24px;border-radius:22px;text-decoration:none;
  background:var(--white);border:1px solid rgba(4,96,94,.12);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,border-color .18s ease;
}
.mlink:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(4,96,94,.13);border-color:rgba(4,96,94,.3)}
.mlink__ic{
  flex:none;display:grid;place-items:center;width:52px;height:52px;
  border-radius:14px;background:var(--teal-wash);color:var(--teal-dk);
}
.mlink__ic .ic{width:24px;height:24px}
.mlink__b{flex:1;min-width:0}
.mlink__t{
  display:block;font-family:var(--display);font-weight:500;font-size:21px;
  line-height:1.25;letter-spacing:-.02em;color:var(--ink);
}
.mlink__d{display:block;margin-top:6px;font-size:15px;line-height:1.5;color:var(--muted)}
.mlink__p{
  flex:none;font-family:var(--mono);font-size:13px;color:var(--teal-dk);
  white-space:nowrap;
}
.mlink__a{flex:none;width:20px;height:20px;color:var(--teal-dk)}
@media(max-width:680px){
  .mlink{flex-wrap:wrap;gap:14px;padding:18px 20px}
  .mlink__b{flex:1 1 100%;order:3}
  .mlink__t{font-size:18px}
}

/* ---------- галерея «до и после» на странице темы ---------- */
.bagrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.bashot{
  margin:0;border-radius:20px;overflow:hidden;background:var(--white);
  border:1px solid rgba(4,96,94,.1);
}
.bashot img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover}
.bashot figcaption{padding:13px 16px 14px;font-size:15px;color:var(--ink)}
/* подписи «До» и «После» отсчитываются от низа снимка, а не карточки */
.bashot .ba-pair__t{bottom:auto;top:0;margin-top:calc(62.5% - 34px)}
@media(max-width:720px){.bagrid{grid-template-columns:1fr}}

/* ---------- метка «Новое» на свежей статье ---------- */
.post{position:relative}
.post__new{
  position:absolute;top:16px;right:16px;z-index:2;
  padding:5px 11px;border-radius:100px;
  background:var(--coral);color:#3A1206;
  font-family:var(--label);font-size:10px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 4px 14px rgba(255,133,98,.45);
}
/* сама карточка тоже чуть заметнее: рамка в цвет метки */
.post--new{box-shadow:inset 0 0 0 1.5px rgba(255,133,98,.55)}
.post--new:hover{box-shadow:inset 0 0 0 1.5px var(--coral),0 16px 34px rgba(255,133,98,.22)}
@media (prefers-reduced-motion: no-preference){
  .post__new{animation:newPulse 3.2s ease-in-out infinite}
  @keyframes newPulse{
    0%,100%{box-shadow:0 4px 14px rgba(255,133,98,.45)}
    50%{box-shadow:0 4px 20px rgba(255,133,98,.75)}
  }
}

/* ---------- виджет результатов ---------- */
.rtabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.rtabs .tag i{font-style:normal;opacity:.55;margin-left:4px}
.rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rcard{
  /* колонка с подписью внизу: снимки разной высоты, иначе подписи скачут */
  margin:0;display:flex;flex-direction:column;
  border-radius:18px;overflow:hidden;background:var(--white);
  border:1px solid rgba(4,96,94,.1);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,opacity .25s ease;
}
.rcard:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(4,96,94,.13)}
.rcard img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover}
/* снимок в своей обёртке: подписи «До» и «После» встают по его нижнему
   краю, а не по нижнему краю карточки, где идёт название и цена */
.rshot{position:relative;display:block}
.rcard figcaption{
  margin-top:auto;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:14px 16px 15px;
}
.rcard figcaption a{
  font-size:15.5px;font-weight:500;color:var(--ink);text-decoration:none;
  border-bottom:1px solid rgba(36,26,24,.2);
}
.rcard figcaption a:hover{border-bottom-color:var(--teal-dk);color:var(--teal-dk)}
.rcard figcaption span{
  flex:none;font-family:var(--mono);font-size:12.5px;color:var(--teal-dk);
}
/* скрытая карточка убирается из потока, чтобы сетка сходилась */
.rcard[hidden]{display:none}
@media(max-width:1080px){.rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.rgrid{grid-template-columns:1fr}}

/* ---------- этапы заживления ---------- */
.heal{
  list-style:none;margin:22px 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
  counter-reset:heal;
}
.heal__s{
  position:relative;padding:18px 16px 16px;border-radius:16px;
  background:var(--teal-wash);
}
/* линия, связывающая этапы в последовательность */
.heal__s::after{
  content:"";position:absolute;top:50%;right:-10px;width:10px;height:1px;
  background:rgba(4,96,94,.3);
}
.heal__s:last-child::after{display:none}
.heal__d{
  display:block;font-family:var(--mono);font-size:12px;
  color:var(--teal-dk);margin-bottom:6px;
}
.heal__t{display:block;font-size:15px;line-height:1.4;color:var(--ink)}
@media(max-width:820px){
  .heal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .heal__s:nth-child(2)::after{display:none}
}
@media(max-width:460px){
  .heal{grid-template-columns:1fr}
  .heal__s::after{display:none}
}

/* ---------- снимки из клиники ---------- */
.sec--tight{padding:clamp(20px,2.4vw,36px) 0}
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.shot{
  margin:0;position:relative;border-radius:20px;overflow:hidden;
  background:var(--paper-2);
}
.shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;display:block}
.shot figcaption{
  position:absolute;left:12px;bottom:12px;right:12px;
  padding:7px 12px;border-radius:100px;
  background:rgba(36,26,24,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#fff;font-family:var(--label);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;
}
.shots__note{
  margin:12px 0 0;font-family:var(--mono);font-size:12px;color:var(--muted-lt);
}
@media(max-width:640px){
  .shots{grid-template-columns:1fr}
  .shot img{aspect-ratio:3/4}
}

/* ---------- список статей ---------- */
.arts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.artc{
  display:flex;flex-direction:column;min-width:0;
  padding:26px 26px 22px;border-radius:20px;background:var(--white);
  text-decoration:none;border:1px solid rgba(4,96,94,.1);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,border-color .18s ease;
}
.artc:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(4,96,94,.13);border-color:rgba(4,96,94,.28)}
.artc__ic{
  display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  background:var(--teal-wash);color:var(--teal-dk);margin-bottom:18px;
}
.artc__ic .ic{width:22px;height:22px}
.artc__e{
  font-family:var(--label);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--coral-dk);margin-bottom:8px;
}
.artc__t{
  font-family:var(--display);font-weight:500;font-size:20px;line-height:1.25;
  letter-spacing:-.02em;color:var(--ink);
}
.artc__d{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}
.artc__m{
  margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.05em;color:var(--teal-dk);
}

/* первая статья — во всю ширину, с крупной подачей */
.artc--big{
  /* две колонки, а не вся ширина: при восьми статьях ряды тогда выходят
     ровными — 2+1, 3, 3, а не 3+3+1 с одинокой карточкой */
  grid-column:span 2;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:26px;row-gap:6px;align-items:start;
  padding:32px 34px 30px;background:linear-gradient(120deg,#E8F2F0,#FBF7F5);
}
.artc--big .artc__ic{grid-row:1/span 4;width:62px;height:62px;margin:0;border-radius:16px;background:var(--white)}
.artc--big .artc__ic .ic{width:28px;height:28px}
.artc--big .artc__t{font-size:30px;line-height:1.2}
.artc--big .artc__d{font-size:16px;max-width:62ch}
.artc--big .artc__m{padding-top:14px}

@media(max-width:1180px){.arts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .arts{grid-template-columns:1fr}
  .artc{padding:22px 20px 20px}
  /* колонка одна — span 2 создавал бы вторую и ломал сетку */
  .artc--big{grid-column:span 1;grid-template-columns:1fr;padding:24px 22px 22px}
  .artc--big .artc__ic{grid-row:auto;margin-bottom:16px}
  .artc--big .artc__t{font-size:23px}
  .artc--big .artc__d{font-size:15px}
}

/* Шапка прайса: заголовок короткий, подводка длинная, и общий
   align-items:end опускал «245 позиций» под её нижнюю строку —
   слева зияла пустота. Здесь выравниваем по верху. */
.pfilter{margin-top:22px}
main > .wrap > .sec__head{align-items:start}

/* ---------- каталог: плитки разделов ---------- */
.cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cat{
  display:flex;flex-direction:column;gap:8px;min-width:0;
  padding:26px 24px 22px;border-radius:20px;background:var(--white);
  text-decoration:none;border:1px solid rgba(4,96,94,.1);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,border-color .18s ease;
}
.cat:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(4,96,94,.13);border-color:rgba(4,96,94,.28)}
.cat__t{font-weight:500;font-size:18px;line-height:1.25;color:var(--ink);letter-spacing:-.015em}
.cat__d{font-size:14px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.cat__n{
  margin-top:auto;padding-top:12px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.06em;color:var(--teal-dk);
}

/* ---------- каталог аппаратов ---------- */
.devs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}
.dev{
  display:flex;flex-direction:column;min-width:0;border-radius:20px;overflow:hidden;
  background:var(--white);text-decoration:none;border:1px solid rgba(4,96,94,.1);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease;
}
.dev:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(4,96,94,.13)}
.dev__pic{
  /* высота фиксированная, а не через aspect-ratio: пропорцию перебивает
     содержимое, и высокий снимок растягивал карточку выше соседних */
  display:grid;place-items:center;height:230px;padding:18px;overflow:hidden;
  background:linear-gradient(178deg,#EDF7F5,#FBF7F5);
}
.dev__pic img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.dev__pic--none{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-lt);
}
.dev__b{display:flex;flex-direction:column;gap:6px;padding:20px 22px 22px}
.dev__t{font-weight:500;font-size:17px;color:var(--ink);letter-spacing:-.015em}
.dev__d{font-size:14px;line-height:1.5;color:var(--muted)}
.dev__n{
  margin-top:8px;font-family:var(--mono);font-size:11.5px;line-height:1.4;
  letter-spacing:.05em;color:var(--teal-dk);
}

@media(max-width:1180px){
  .cats,.devs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .cats,.devs{grid-template-columns:1fr}
  .cat{padding:22px 20px 20px}
}

/* фотография аппарата в первом экране страницы оборудования */
.art-hero__dev{
  margin:0;display:grid;place-items:center;padding:18px;
  border-radius:24px;background:linear-gradient(178deg,#EDF7F5,#FBF7F5);
}
.art-hero__dev img{max-height:300px;width:auto;object-fit:contain}
@media(max-width:900px){.art-hero__dev img{max-height:220px}}

/* ---------- схемы в статьях ----------
   Раньше это были SVG с текстом внутри. Текст в SVG не переносится
   и масштабируется вместе с картинкой: на мобильной подписи выходили
   кеглем 6–7 px, а на десктопе длинная строка вылезала за свою плашку.
   Теперь текст — это текст, а в SVG остаётся только рисунок. */

/* ряд плашек: 4 в строку → 2 → 1 */
.art-cards{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
  padding:22px;background:var(--white);border-radius:20px;
}
.art-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.art-cards__i{
  padding:16px 18px;border-radius:16px;background:#E8F2F0;min-width:0;
}
.art-cards__i--wide{background:#FBE7DE}
.art-cards__i--accent{background:#F3ECFA}
.art-cards__i--span2{grid-column:span 2}
.art-cards__t{
  font-weight:500;font-size:15px;line-height:1.35;color:var(--ink);
  overflow-wrap:anywhere;
}
.art-cards__n{
  margin-top:6px;font-family:var(--mono);font-size:12px;line-height:1.45;
  color:var(--muted);overflow-wrap:anywhere;
}
.art-cards__foot{
  grid-column:1/-1;margin:4px 0 0;text-align:center;
  font-family:var(--mono);font-size:12px;color:var(--muted-lt);
}

/* срез кожи + подписи сбоку */
.art-diag{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:24px;align-items:center;
  padding:22px;background:var(--white);border-radius:20px;
}
.art-diag__pic{width:100%;height:auto;display:block}
/* .art__body ul li::before рисует бирюзовую точку всем спискам статьи —
   у легенды роль точки играет цветной образец слоя, гасим */
.art-diag__legend{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.art__body .art-diag__legend li{padding-left:0;margin-bottom:0}
.art__body .art-diag__legend li::before{content:none}
/* легенда без образцов: строки выравниваем по левому краю карточки */
.art-diag__legend--plain .art-diag__txt{padding-left:2px}
.art-diag__row{display:flex;align-items:flex-start;gap:10px}
.art-diag__chip{
  flex:none;width:14px;height:14px;border-radius:4px;margin-top:3px;
  border:1px solid rgba(36,26,24,.08);
}
.art-diag__txt{font-size:14px;line-height:1.45;color:#3A2B26}
.art-diag__foot{
  grid-column:1/-1;margin:2px 0 0;text-align:center;
  font-family:var(--mono);font-size:12px;color:var(--muted-lt);
}

@media(max-width:860px){
  .art-cards{grid-template-columns:repeat(2,minmax(0,1fr));padding:18px}
  .art-cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .art-cards__i--span2{grid-column:span 2}
  .art-diag{grid-template-columns:1fr;gap:18px;padding:18px}
}
@media(max-width:560px){
  .art-cards{grid-template-columns:1fr;gap:10px;padding:16px}
  .art-cards--3{grid-template-columns:1fr}
  .art-cards__i--span2{grid-column:span 1}
  .art-cards__t{font-size:14.5px}
}

.art-fig{margin:6px 0 26px;max-width:none}
/* только прямой потомок: у .art-diag своя подложка */
.art-fig > svg{width:100%;height:auto;display:block;background:var(--white);border-radius:20px;padding:14px}
.art-fig figcaption{margin-top:12px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.art-fig__l{font-family:var(--body);font-size:14px;fill:#3A2B26}
.art-fig__n{font-family:var(--mono);font-size:12px;fill:#6E5C58}
.art-fig__z{font-family:var(--body);font-weight:500;font-size:15px;fill:#241A18}
.art-zone rect{fill:#E8F2F0}
.art-zone--wide rect{fill:#FBE7DE}
.art-zone--accent rect{fill:#F3ECFA}

@media(max-width:1024px){
  .art-hero__in{grid-template-columns:1fr}
  .art-hero__facts dl{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .art-hero__facts dl{grid-template-columns:1fr}
  }

/* раскладка статьи: текст и липкая колонка справа */
.art__in{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:clamp(24px,3vw,56px);align-items:start;
}
.art__main{min-width:0}
.art-part{margin-bottom:clamp(40px,4vw,64px)}
.art-part:last-child{margin-bottom:0}
.art-part h2{font-size:clamp(24px,2.4vw,34px);line-height:1.18;letter-spacing:-.035em;margin:10px 0 20px}
.art__body{max-width:none;font-size:17px;line-height:1.72}

.art__aside{position:sticky;top:104px;display:grid;gap:12px}
.toc{background:var(--white);border-radius:22px;padding:22px 24px}
.toc ol{grid-template-columns:1fr;gap:0}
.toc a{font-size:14.5px;padding:9px 12px}

.art-card{
  border-radius:22px;padding:24px;
  background:linear-gradient(150deg,#E8F4F1 0%,#F7E8E2 100%);
}
.art-card__t{margin:0 0 8px;font-size:18px;line-height:1.3}
.art-card__p{margin:0 0 18px;font-size:14px;line-height:1.5;color:#4A332D}
.art-card .btn{width:100%;justify-content:center}
.art-card__tel{
  display:block;margin-top:12px;text-align:center;font-family:var(--mono);
  font-size:14px;color:var(--teal-dk);text-decoration:none;
}
.art-card__tel:hover{text-decoration:underline}

@media(max-width:1100px){
  .art__in{grid-template-columns:1fr}
  .art__aside{position:static;grid-template-columns:1fr 1fr;order:-1}
}
@media(max-width:700px){
  .art__aside{grid-template-columns:1fr}
}

/* ---------- статьи на главной ---------- */
.posts{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(268px,1fr);gap:12px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px;
}
.posts::-webkit-scrollbar{display:none}
.posts:focus-visible{outline:2px solid var(--teal);outline-offset:6px;border-radius:24px}
.post{
  position:relative;isolation:isolate;overflow:hidden;scroll-snap-align:start;
  display:flex;flex-direction:column;border-radius:24px;padding:26px 26px 22px;
  text-decoration:none;color:inherit;min-height:230px;
  transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s ease;
}
.post::before{
  content:"";position:absolute;z-index:-1;top:-70px;right:-70px;
  width:210px;height:210px;border-radius:50%;transform:scale(.5);opacity:.5;
  transition:transform .5s cubic-bezier(.2,.7,.3,1),opacity .5s ease;
}
/* Цвета шли по счёту 1–5, а статей стало 23 — начиная с шестой карточки
   оставались без заливки. Теперь пять оттенков повторяются по кругу. */
.post:nth-child(5n+1){background:#E8F2F0}.post:nth-child(5n+1)::before{background:#CBE6E1}
.post:nth-child(5n+2){background:#F3ECFA}.post:nth-child(5n+2)::before{background:#DFD0F0}
.post:nth-child(5n+3){background:#FBE7DE}.post:nth-child(5n+3)::before{background:#F6C9B4}
.post:nth-child(5n+4){background:#EAF0F7}.post:nth-child(5n+4)::before{background:#CFDDEE}
.post:nth-child(5n){background:#F7EFE3}.post:nth-child(5n)::before{background:#EBDBC1}
.post:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(36,26,24,.13)}
.post:hover::before{transform:scale(2.5);opacity:.85}

.post__ic{display:block;margin-bottom:18px}
.post__ic .ic{width:26px;height:26px;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.post:nth-child(5n+1) .post__ic .ic{color:#04605E}
.post:nth-child(5n+2) .post__ic .ic{color:#6B4A9E}
.post:nth-child(5n+3) .post__ic .ic{color:#A63D1C}
.post:nth-child(5n+4) .post__ic .ic{color:#2F5B93}
.post:nth-child(5n) .post__ic .ic{color:#8A5A2B}
.post:hover .post__ic .ic{transform:rotate(-8deg) scale(1.14)}

.post__t{font-size:19px;line-height:1.25;margin-bottom:10px}
.post__d{font-size:14.5px;line-height:1.5;color:#5A4038}
.post__f{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:18px;border-top:1px solid rgba(36,26,24,.14);
}
.post__f b{font-family:var(--mono);font-weight:400;font-size:13.5px;color:var(--teal-dk)}
.post__f .ic{width:16px;height:16px;color:var(--teal-dk);transition:transform .22s ease}
.post:hover .post__f .ic{transform:translate(3px,-3px)}

@media(max-width:620px){
  .posts{grid-auto-columns:minmax(82%,1fr)}
}

/* направления приёма врача */
.vtreats{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.vtreat{
  border-radius:22px;padding:26px 28px;
  transition:transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s ease;
}
.vtreat:nth-child(1){background:#E8F2F0}
.vtreat:nth-child(2){background:#FBE7DE}
.vtreat:nth-child(3){background:#F3ECFA}
.vtreat:nth-child(4){background:#EAF0F7}
.vtreat:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(36,26,24,.1)}
.vtreat h3{margin:0 0 10px;font-size:17.5px}
.vtreat p{margin:0;font-size:15px;line-height:1.55;color:#4A332D}
.vr__note--sm{margin-top:12px;padding:16px 22px;font-size:13.5px;background:var(--white);border-radius:16px}
.vr__warn{
  margin:16px 0 0;padding:20px 24px;border-radius:18px;
  background:#FBE7DE;border-left:3px solid #A63D1C;
  font-size:14.5px;line-height:1.6;color:#4A332D;
}

/* опыт работы врача */
.vwork{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:w}
.vwork li{
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:baseline;
  padding:18px 22px;border-radius:16px;background:var(--white);
  transition:background .18s ease,padding-left .18s ease;
}
.vwork li:hover{background:var(--teal-wash);padding-left:28px}
.vwork__y{font-family:var(--mono);font-size:13px;color:var(--teal-dk);white-space:nowrap}
.vwork__r{font-size:16.5px;line-height:1.35}
.vwork__r small{display:block;margin-top:4px;font-size:13.5px;color:var(--muted)}
@media(max-width:620px){
  .vwork li{grid-template-columns:1fr;gap:6px;padding:16px 18px}
}

/* ---------- страница аппарата ---------- */
.mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px}
.mod{
  border-radius:22px;padding:28px 30px;
  transition:transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s ease;
}
.mod:nth-child(1){background:#E8F2F0}
.mod:nth-child(2){background:#EAF0F7}
.mod:nth-child(3){background:#F3ECFA}
.mod:hover{transform:translateY(-5px);box-shadow:0 20px 42px rgba(36,26,24,.1)}
.mod__n{
  display:inline-block;margin-bottom:12px;padding:6px 14px;border-radius:100px;
  background:rgba(255,255,255,.75);font-family:var(--label);font-weight:500;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-dk);
}
.mod h3{margin:0 0 10px;font-size:19px}
.mod p{margin:0;font-size:15px;line-height:1.6;color:#4A332D}

/* галерея до и после */
.bas{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.ba{
  margin:0;background:var(--white);border-radius:20px;overflow:hidden;
  transition:transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s ease;
}
.ba:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(36,26,24,.13)}
.ba img{width:100%;height:auto;display:block}
.ba figcaption{padding:16px 20px 18px;font-size:14px;line-height:1.5;color:#4A332D}
.ba__src-i{
  display:block;margin-top:8px;padding-top:8px;border-top:1px solid #EDE3DE;
  font-size:12.5px;line-height:1.45;color:#7A625B;
}
.ba__src{
  margin:18px 0 0;padding:18px 22px;border-radius:16px;background:#FBE7DE;
  border-left:3px solid #A63D1C;font-size:13.5px;line-height:1.6;color:#4A332D;
}


/* ---------- отзывы с площадок: сводка и лента цитат ----------
   Имена классов начинаются на rq-, потому что .rev, .revs и .plats
   уже заняты прежней вёрсткой отзывов в трёх местах файла. */
.rqplats{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;
  margin-bottom:clamp(22px,2.6vw,34px);
}
.rqplat{
  display:block;padding:16px 18px;border-radius:16px;text-decoration:none;
  background:var(--white);border:1px solid rgba(4,96,94,.1);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease;
}
.rqplat:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(4,96,94,.12)}
.rqplat__n{display:block;font-size:13px;color:var(--muted)}
.rqplat__r{display:block;margin-top:6px;font-family:var(--display);font-size:26px;
  line-height:1;letter-spacing:-.02em;color:var(--ink)}
.rqplat__c{display:block;margin-top:5px;font-family:var(--mono);font-size:11.5px;
  color:var(--muted-lt)}

.rqs{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:6px;scrollbar-width:none;
  /* каждая карточка по своему тексту: иначе короткий отзыв растягивается
     до высоты самого длинного и внизу остаётся пустое поле */
  align-items:flex-start;
}
.rqs::-webkit-scrollbar{display:none}
.rq{
  flex:0 0 clamp(280px,30%,380px);scroll-snap-align:start;margin:0;
  display:flex;flex-direction:column;padding:22px 24px;border-radius:20px;
  background:var(--white);border:1px solid rgba(4,96,94,.1);
}
.rq__h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.rq__st{margin-top:0}
.rq__h time{font-family:var(--mono);font-size:12px;color:var(--muted-lt)}
.rq__q{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink)}
.rq__s{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:11.5px}
.rq__s a{color:var(--muted-lt);text-decoration:none;border-bottom:1px solid var(--line)}
.rq__s a:hover{color:var(--teal-dk);border-bottom-color:var(--teal-dk)}
.rqs__more{margin:22px 0 0;font-size:15px;color:var(--muted)}
.rqs__more a{color:var(--teal-dk)}
@media(max-width:1080px){.rqplats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){
  .rqplats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rq{flex-basis:82%}
}


/* ---------- страница «Оставить отзыв» ---------- */
.ovz-wrap{max-width:900px;text-align:left}
.ovz-wrap h1{font-family:var(--display);font-weight:400;
  font-size:clamp(32px,4.4vw,52px);letter-spacing:-.03em;margin:14px 0 16px}
.ovz__lead{font-size:17px;line-height:1.6;color:var(--muted);margin:0 0 32px;max-width:58ch}
.ovzs{display:grid;gap:14px}
.ovz{
  display:flex;align-items:center;gap:clamp(18px,3vw,40px);
  padding:24px 28px;border-radius:22px;background:var(--white);
  border:1px solid rgba(4,96,94,.12);
}
.ovz__b{flex:1;min-width:0}
.ovz__n{margin:0;font-family:var(--display);font-weight:500;font-size:22px;
  letter-spacing:-.02em}
.ovz__c{margin:5px 0 0;font-family:var(--mono);font-size:12.5px;color:var(--teal-dk)}
.ovz__w{margin:11px 0 18px;font-size:15.5px;line-height:1.55;color:var(--muted)}
.ovz__qr{flex:none;margin:0;text-align:center}
.ovz__qr img{width:132px;height:132px;display:block}
.ovz__qr figcaption{margin-top:8px;font-family:var(--mono);font-size:11px;
  color:var(--muted-lt)}
.ovz__note{
  margin-top:34px;padding:26px 28px;border-radius:22px;background:var(--coral-wash);
}
.ovz__nt{margin:0 0 10px;font-family:var(--display);font-weight:500;font-size:20px}
.ovz__note p{margin:0 0 14px;font-size:15.5px;line-height:1.6;color:var(--ink)}
.ovz__ways{display:flex;flex-wrap:wrap;gap:10px;margin:0}
@media(max-width:640px){
  .ovz{flex-direction:column;align-items:flex-start;gap:18px}
  .ovz__qr{align-self:center}
}

/* ---------- правая колонка первого экрана на списке статей ---------- */
.art-hero__side{
  align-self:center;padding:26px 28px;border-radius:22px;
  background:var(--white);border:1px solid rgba(4,96,94,.1);
}
.ahs__t{
  margin:0 0 14px;font-family:var(--label);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-dk);
}
.ahs__list{list-style:none;margin:0;padding:0}
.ahs__list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.ahs__list li:last-child{border-bottom:0}
.ahs__list a{
  font-size:16px;color:var(--ink);text-decoration:none;
  border-bottom:1px solid transparent;
}
.ahs__list a:hover{border-bottom-color:var(--teal-dk);color:var(--teal-dk)}
.ahs__list time{flex:none;font-family:var(--mono);font-size:11.5px;color:var(--muted-lt)}
.ahs__n{margin:16px 0 0;font-family:var(--mono);font-size:12px;color:var(--muted-lt)}
@media(max-width:900px){.art-hero__side{margin-top:20px}}

/* ---------- действия в карточке врача ---------- */
.doc__acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.doc__book{
  font-family:var(--label);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 14px;border-radius:100px;text-decoration:none;
  background:var(--teal-dk);color:var(--white);
  transition:background .18s ease,transform .18s ease;
}
.doc__book:hover{background:var(--teal);transform:translateY(-1px)}
/* запись по телефону: та же кнопка, но контуром — чтобы онлайн-запись
   читалась как основное действие, а телефон как запасное */
.doc__book--tel{
  background:transparent;color:var(--teal-dk);
  box-shadow:inset 0 0 0 1.5px rgba(4,96,94,.35);
}
.doc__book--tel:hover{background:var(--teal-wash);color:var(--teal-dk)}

/* ---------- блок статей на главной ---------- */
/* Ссылка «Все статьи» была текстовой и терялась в пустом левом столбце.
   Делаем кнопкой и прижимаем к заголовку, чтобы не висела в воздухе. */
#blog .sec__more{grid-column:1;margin:18px 0 0}
#blog .sec__more .btn{gap:8px}
#blog .sec__more .ic{width:16px;height:16px}
/* шапка блока и лента стояли далеко друг от друга */
#blog .sec__head{margin-bottom:clamp(18px,2vw,26px)}

/* ---------- площадки отзывов: свой цвет и значок ---------- */
.rqplat{position:relative;overflow:hidden}
.rqplat__i{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  margin-bottom:12px;
}
.rqplat__i .ic{width:18px;height:18px}
.rqplat--teal{background:var(--teal-wash);border-color:rgba(4,96,94,.16)}
.rqplat--teal .rqplat__i{background:rgba(4,96,94,.13);color:var(--teal-dk)}
.rqplat--coral{background:var(--coral-wash);border-color:rgba(255,133,98,.28)}
.rqplat--coral .rqplat__i{background:rgba(255,133,98,.2);color:#B24A22}
.rqplat--mint{background:#EAF6F0;border-color:rgba(46,140,102,.2)}
.rqplat--mint .rqplat__i{background:rgba(46,140,102,.15);color:#2E8C66}
.rqplat--lav{background:#F1EEF9;border-color:rgba(108,92,168,.2)}
.rqplat--lav .rqplat__i{background:rgba(108,92,168,.15);color:#6C5CA8}
.rqplat--sand{background:#FBF2E4;border-color:rgba(176,124,42,.2)}
.rqplat--sand .rqplat__i{background:rgba(176,124,42,.15);color:#B07C2A}
@media(max-width:1080px){.rqplats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.rqplats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Кнопка записи внутри карточки врача.
   Карточка кликается целиком: ссылка «Подробнее» растянута на всю площадь
   через ::after. Кнопка записи лежала под этим слоем и не нажималась —
   поднимаем её выше и возвращаем ей события указателя. */
.doc__book{position:relative;z-index:2}

/* ---------- обводка светлых карточек ----------
   Плитки, карточки услуг и результатов залиты бледной заливкой и на
   светлом фоне страницы теряли края: было непонятно, где кончается
   одна и начинается другая. Волосяная рамка в цвет заливки очерчивает
   границу, не утяжеляя вид. */
.tile,.rqplat,.plat,.ovz,.mlink,.bashot,.rcard,.art-hero__side,.doc,.post{
  box-shadow:inset 0 0 0 1px rgba(36,26,24,.07);
}
/* у карточек со своей рамкой добавлять вторую незачем */
.rqplat,.bashot,.rcard,.mlink,.ovz,.art-hero__side{box-shadow:none}
.tile{box-shadow:inset 0 0 0 1px rgba(36,26,24,.14)}
.doc,.post{box-shadow:inset 0 0 0 1px rgba(36,26,24,.1)}

/* при наведении граница подсвечивается — видно, что карточка живая */
a.tile:hover{box-shadow:inset 0 0 0 1px rgba(4,96,94,.35),0 14px 32px rgba(4,96,94,.12)}
.doc:hover,.post:hover{box-shadow:inset 0 0 0 1px rgba(4,96,94,.3),0 16px 34px rgba(4,96,94,.12)}

/* ---------- оживление цифр на плитках ----------
   Цифра — главное на плитке, но она статична. При наведении слегка
   подрастает: движение короткое, чтобы подсказать «сюда можно нажать»,
   а не отвлекать. При системной настройке «уменьшить движение»
   не работает. */
@media (prefers-reduced-motion: no-preference){
  .tile__n{
    display:inline-block;
    transition:transform .3s cubic-bezier(.2,.7,.3,1),color .3s ease;
  }
  a.tile:hover .tile__n{transform:scale(1.06)}
  a.tile:hover .tile__lab{color:var(--teal-dk)}
}

/* ---------- метка «Онлайн» на карточке врача ---------- */
.doc__on{
  position:absolute;top:16px;right:16px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:100px;
  background:var(--teal-dk);color:var(--white);
  font-family:var(--label);font-size:10px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 4px 14px rgba(4,96,94,.35);
}
.doc__on .ic{width:13px;height:13px}
/* строка «и онлайн» в сведениях на странице врача */
.vr__on{color:var(--teal-dk)}