/* ============================================================
   Семья MC — components (без токенов; токены в tokens.css)
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--white); color:var(--ink-900); font-family:var(--font-body);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:var(--teal-deep); text-decoration:none; transition:color var(--dur-fast) var(--ease-out);}
a:not(.btn):hover{color:var(--orange);}
button{font-family:inherit;}
html{scroll-behavior:smooth;}
/* якорные переходы (#contacts, #doctors, #prices…) не должны упираться
   под липкую шапку (~76px: top 14 + высота 62) */
section[id]{scroll-margin-top:92px;}

h1,h2,h3,h4{font-family:var(--font-headline); letter-spacing:-.015em; color:var(--ink-900); margin:0;}
h1{font-weight:700; font-size:clamp(40px,4.4vw,56px); line-height:1.05;}
h2{font-weight:700; font-size:clamp(30px,3.4vw,42px); line-height:1.12; letter-spacing:-.02em;}
h3{font-weight:700; font-size:clamp(19px,1.7vw,22px); line-height:1.2; letter-spacing:-.01em;}
h4{font-weight:700; font-size:16px; line-height:1.3; letter-spacing:-.005em;}
h1 .em,h2 .em,h3 .em,h4 .em{font-family:var(--font-em); font-style:italic; font-weight:600; color:var(--orange); letter-spacing:-.01em;}

.container{max-width:1240px; margin:0 auto; padding:0 28px;}
.section{padding:88px 0;}
.section--tint{background:var(--teal-mist);}
.section__head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:40px; flex-wrap:wrap;}
.section__title{margin:8px 0 0;}
.section__lede{color:var(--ink-700); font-size:17px; line-height:1.6; max-width:720px; margin:14px 0 0;}
.eyebrow{
  display:inline-block; font-family:var(--font-display); font-weight:800;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal);
}

/* =========================================================================
   Buttons
   ========================================================================= */
.btn{
  font-family:var(--font-display); font-weight:700; font-size:15px;
  border:0; border-radius:var(--r-pill); padding:14px 24px; cursor:pointer;
  line-height:1; display:inline-flex; align-items:center; gap:8px;
  white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-out),
             background var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out);
}
.btn:active{transform:scale(.98);}
.btn[disabled]{opacity:.5; cursor:not-allowed;}
.btn--primary{
  background:linear-gradient(135deg,var(--orange-soft) 0%, var(--orange) 60%, var(--orange-deep) 100%);
  color:#fff; box-shadow:var(--shadow-warm);
}
.btn--primary:hover{transform:translateY(-2px); box-shadow:0 18px 38px rgba(237,112,41,.34);}
.btn--secondary{
  background:linear-gradient(135deg,#1cb0c2 0%, var(--teal) 60%, var(--teal-deep) 100%);
  color:#fff; box-shadow:var(--shadow-brand);
}
.btn--secondary:hover{transform:translateY(-2px); box-shadow:0 18px 38px rgba(22,153,170,.34);}
.btn--ghost{background:transparent; color:var(--teal-deep); box-shadow:inset 0 0 0 1.5px var(--teal);}
.btn--ghost:hover{background:var(--teal-tint);}
.btn--text{
  background:transparent; color:var(--teal-deep);
  padding:8px 0; font-weight:700; font-size:14px;
}
.btn--text svg{transition:transform var(--dur-base) var(--ease-out); animation:nudge 2.4s var(--ease-mid) infinite;}
.btn--text:hover svg{transform:translateX(6px); animation:none;}
@keyframes nudge{0%,100%{transform:translateX(0);} 50%{transform:translateX(6px);}}

/* =========================================================================
   Header — floating white pill
   ========================================================================= */
.site-header{position:sticky; top:14px; z-index:60; padding:0 24px;}
.nav{
  position:relative;
  max-width:1280px; margin:0 auto;
  background:#fff; border-radius:var(--r-pill);
  padding:10px 14px 10px 22px;
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:24px;
  box-shadow:0 6px 26px rgba(18,32,36,.10);
}
.logo{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.logo__mark{
  display:block; width:auto; height:30px;
}
.menu{list-style:none; padding:0; margin:0; display:flex; justify-content:center; gap:6px;}
.menu > li > a, .menu > li > button{
  font-family:var(--font-display); font-weight:700; font-size:14.5px;
  color:var(--ink-900); padding:10px 14px; border-radius:var(--r-pill);
  background:transparent; border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.menu > li > a:hover, .menu > li > button:hover{background:var(--teal-tint); color:var(--teal-deep);}
.menu li.has-mega > button .chev{transition:transform var(--dur-base) var(--ease-out);}
.menu li.has-mega.is-open > button .chev{transform:rotate(180deg);}
.menu li.has-mega.is-open > button{background:var(--teal-tint); color:var(--teal-deep);}

.actions{display:flex; align-items:center; gap:10px;}

.branch-wrap{position:relative;}
.branch{
  display:flex; align-items:center; gap:8px;
  background:transparent; border:0; padding:8px 12px; border-radius:var(--r-pill);
  cursor:pointer; font-family:inherit; font-size:13px; color:var(--ink-700);
  transition:background var(--dur-fast);
}
.branch:hover{background:var(--ink-050);}
.branch-wrap.is-open .branch{background:var(--teal-tint);}
.branch svg.pin{color:var(--teal);}
.branch__label{font-weight:500; color:var(--ink-700);}
.branch .place{font-family:var(--font-display); font-weight:800; color:var(--ink-900); margin-left:4px;}
.branch .chev{color:var(--ink-400); transition:transform var(--dur-base) var(--ease-out);}
.branch-wrap.is-open .chev{transform:rotate(180deg);}

.branch-pop{
  position:absolute; top:calc(100% + 12px); right:0;
  min-width:300px;
  background:#fff; border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  padding:18px 20px;
  opacity:0; pointer-events:none; transform:translateY(-6px);
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  z-index:10;
}
.branch-wrap.is-open .branch-pop{opacity:1; pointer-events:auto; transform:translateY(0);}
.branch-pop__row{padding:10px 0; border-bottom:1px solid var(--ink-100);}
.branch-pop__row:first-child{padding-top:0;}
.branch-pop__row:last-child{padding-bottom:0; border-bottom:0;}
.branch-pop__title{
  font-family:var(--font-display); font-weight:800; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--teal);
  margin-bottom:6px;
}
.branch-pop__row:nth-child(2) .branch-pop__title{color:var(--orange);}
.branch-pop__lines{
  display:grid; grid-template-columns:auto 1fr;
  gap:4px 14px;
  font-size:13.5px; color:var(--ink-700);
}
.branch-pop__lines .day{color:var(--ink-500); white-space:nowrap;}
.branch-pop__lines strong{font-family:var(--font-display); font-weight:800; color:var(--ink-900);}

.phone-ic{
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--teal-tint); color:var(--teal-deep);
  transition:background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
  flex-shrink:0;
}
a.phone-ic:hover{background:var(--teal); color:#fff; transform:translateY(-1px);}

.cta{padding:12px 22px; font-size:14px;}

/* Mega menu */
.mega-wrap{position:static;}
.mega{
  position:absolute; top:calc(100% + 14px); left:0; right:0;
  transform:translateY(-8px);
  background:#fff; border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);
  padding:28px 32px 24px;
  overflow:hidden;
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.menu li.has-mega.is-open .mega{opacity:1; pointer-events:auto; transform:translateY(0);}

.mega-cols{display:grid; gap:24px 40px;}
.mega-cols--3{grid-template-columns:repeat(3,1fr);}
.mega-cols--1{grid-template-columns:minmax(280px,420px);}

.mega-col__head{
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--ink-100);
}
.mega-col__head .ic{
  width:32px; height:32px; border-radius:var(--r-sm);
  background:var(--teal-tint); color:var(--teal);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.mega-col__head .ttl{
  font-family:var(--font-display); font-weight:800; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--teal);
}
.mega-col--kids .mega-col__head .ic{background:var(--orange-tint); color:var(--orange);}
.mega-col--kids .mega-col__head .ttl{color:var(--orange);}

.mega-col__list{display:flex; flex-direction:column; gap:2px;}
.mega-col__list a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 12px; border-radius:var(--r-sm);
  color:var(--ink-900); font-size:14.5px; font-weight:500;
  transition:background var(--dur-fast), color var(--dur-fast);
}
.mega-col__list a:hover{background:var(--teal-tint); color:var(--teal-deep);}
.mega-col--kids .mega-col__list a:hover{background:var(--orange-tint); color:var(--orange-deep);}
.mega-col__list a:hover svg{transform:translateX(4px);}
.mega-col__list a svg{color:var(--ink-300); transition:transform var(--dur-base) var(--ease-out); flex-shrink:0;}

.mega-col__all{
  margin-top:10px; padding:9px 12px;
  font-family:var(--font-display); font-weight:700; font-size:13px;
  color:var(--teal-deep);
  display:inline-flex; align-items:center; gap:6px;
  border-radius:var(--r-sm);
}
.mega-col__all:hover{color:var(--orange);}
.mega-col__all svg{transition:transform var(--dur-base) var(--ease-out);}
.mega-col__all:hover svg{transform:translateX(4px);}
.mega-col--kids .mega-col__all{color:var(--orange-deep);}
.mega-col--kids .mega-col__all:hover{color:var(--teal-deep);}

/* =========================================================================
   Hero — promo / news slider
   ========================================================================= */
.hero{padding:34px 0 28px;}
.hero__stage{
  position:relative;
  max-width:1280px; margin:0 auto; padding:0 24px;
}
.hero__viewport{
  border-radius:var(--r-xl); overflow:hidden; position:relative;
  box-shadow:var(--shadow-md);
  background:#fff;
}
.hero__track{display:flex; transition:transform var(--dur-slow) var(--ease-out);}
.hero__slide{
  --hero-h:540px;
  flex:0 0 100%; height:var(--hero-h);    /* фиксируем высоту, чтобы трек не растягивался под img */
  display:grid;
  /* 60% текст / 40% фото; строка зафиксирована высотой слайда явно —
     1fr резолвится в min-content и intrinsic-картинка раздула бы трек */
  grid-template-columns:3fr 2fr;
  grid-template-rows:var(--hero-h);
  align-items:center;
  position:relative;
  padding:0 0 0 64px;              /* верх/низ/право — 0 (фото впритык), слева — отступ под текст */
  color:#fff;
}
.hero__slide--news    {--hero-fade:var(--teal); background:linear-gradient(135deg,#1cb0c2 0%, var(--teal) 55%, var(--teal-deep) 100%);}
.hero__slide--promo   {--hero-fade:var(--orange); background:linear-gradient(135deg,#f48a4a 0%, var(--orange) 55%, var(--orange-deep) 100%);}
.hero__slide--white   {--hero-fade:var(--teal-mist); background:linear-gradient(135deg,#fff 0%, var(--teal-tint) 80%, var(--teal-mist) 100%); color:var(--ink-900);}

.hero__copy{position:relative; z-index:2; max-width:560px;}
.hero__kicker{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.22); color:#fff;
  font-family:var(--font-display); font-weight:800; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase;
  padding:7px 14px; border-radius:var(--r-pill);
  backdrop-filter:blur(6px);
  margin-bottom:18px;
}
.hero__slide--white .hero__kicker{background:var(--teal-tint); color:var(--teal-deep); backdrop-filter:none;}
.hero__kicker .dot{width:5px; height:5px; border-radius:50%; background:currentColor;}

.hero__title{
  font-family:var(--font-headline); font-weight:900;
  font-size:clamp(40px,5.2vw,68px); line-height:1.02; letter-spacing:-.02em;
  margin:0 0 18px; color:inherit;
}
.hero__title .em{font-family:var(--font-em); font-style:italic; font-weight:600; color:var(--orange); letter-spacing:-.015em;}
.hero__sub{font-size:17px; line-height:1.55; margin:0 0 22px; opacity:.92;}
.hero__sub strong{font-weight:800; color:#fff;}
.hero__slide--white .hero__sub strong{color:var(--ink-900);}
.hero__bullets{
  list-style:none; padding:0; margin:0 0 28px;
  display:flex; flex-direction:column; gap:10px;
}
.hero__bullets li{
  display:flex; align-items:flex-start; gap:12px;
  font-size:15.5px; line-height:1.4; color:#fff;
}
.hero__slide--white .hero__bullets li{color:var(--ink-900);}
.hero__bullets strong{font-family:var(--font-display); font-weight:800; color:#fff;
  padding:1px 7px; border-radius:6px; background:rgba(255,255,255,.20);
  letter-spacing:-.01em;
}
.hero__slide--white .hero__bullets strong{color:var(--orange-deep); background:var(--orange-tint);}
.hero__bullet-mark{
  flex:0 0 auto;
  width:18px; height:18px; border-radius:50%;
  background:rgba(255,255,255,.28); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:3px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);
  position:relative;
}
.hero__bullet-mark::after{
  content:''; width:6px; height:6px; border-radius:50%; background:#fff;
}
.hero__slide--white .hero__bullet-mark{background:var(--orange-tint); box-shadow:inset 0 0 0 1.5px var(--orange);}
.hero__slide--white .hero__bullet-mark::after{background:var(--orange);}
.hero__ctas{display:flex; gap:14px; flex-wrap:wrap;}

/* Фото вписано в высоту слайда (object-fit:contain — без обрезки),
   приклеено к правому краю; без кружка, без бёрст-маски, без анимации.
   Тень — на img через drop-shadow, чтобы шла от реальной формы фото
   (для PNG с прозрачностью силуэт даёт честную тень). */
.hero__art{position:relative; align-self:stretch; height:100%;}
.hero__photo{
  width:100%; height:100%;
  background:transparent;
  position:relative; overflow:hidden;
  /* чёткая граница + лёгкая тень строго по горизонтали (без сдвига по Y) */
  box-shadow:-12px 0 20px -4px rgba(18,32,36,.22);
}
.hero__photo img{
  width:100%; height:100%;
  object-fit:cover; object-position:right center;     /* фото растянуто на всю площадь, правый якорь */
  display:block;
}
/* Burst-вариант больше не «выпрыгивает» из кружка — нейтрализуем clip-path/padding. */
.hero__photo--burst{overflow:hidden;}
.hero__photo--burst::before{display:none;}
.hero__photo--burst img{
  position:static;
  width:100%; height:100%;
  object-fit:cover; object-position:right center;
  padding:0; clip-path:none;
}

.hero__nav{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  z-index:3;
  display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,.92); padding:8px 8px 8px 14px;
  border-radius:var(--r-pill); box-shadow:var(--shadow-sm);
  backdrop-filter:blur(8px);
}
.hero__dots{display:flex; gap:8px; align-items:center;}
.hero__dot{
  width:8px; height:8px; border-radius:50%; background:var(--ink-200);
  border:0; cursor:pointer; padding:0;
  transition:background var(--dur-fast), width var(--dur-fast);
}
.hero__dot.is-on{background:var(--teal); width:24px; border-radius:999px;}
.hero__arrow{
  width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
  background:#fff; color:var(--ink-700); box-shadow:var(--shadow-xs);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast), color var(--dur-fast);
}
.hero__arrow:hover{background:var(--teal); color:#fff;}

/* Hero stats strip */
.hero-strip{
  max-width:1280px; margin:18px auto 0; padding:0 24px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.hero-strip__item{
  background:#fff; border-radius:var(--r-lg); padding:16px 18px;
  display:flex; align-items:center; gap:14px;
  box-shadow:var(--shadow-xs);
  border:1px solid var(--ink-100);
}
.hero-strip__ic{
  width:42px; height:42px; border-radius:var(--r-md);
  background:var(--teal-tint); color:var(--teal);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.hero-strip__item:nth-child(2) .hero-strip__ic,
.hero-strip__item:nth-child(4) .hero-strip__ic{background:var(--orange-tint); color:var(--orange);}
.hero-strip__big{font-family:var(--font-display); font-weight:800; font-size:15.5px; line-height:1.15; letter-spacing:-.01em;}
.hero-strip__sub{font-size:12.5px; color:var(--ink-500); margin-top:2px;}

/* =========================================================================
   Services — bento grid
   ========================================================================= */
.services-bento{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  grid-template-rows:auto auto;
  gap:18px;
}
.bento-card{
  position:relative;
  background:#fff; border-radius:var(--r-xl);
  padding:26px;
  display:flex; flex-direction:column;
  min-height:230px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.bento-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.bento-card.wide{grid-row:1 / span 2;}
.bento-card h3{position:relative; z-index:2; margin:0 0 14px; font-size:22px;}
.bento-card.wide h3{font-size:26px;}
.bento-card__badge{
  position:absolute; top:-12px; left:22px; z-index:5;
  display:inline-flex; align-items:center;
  background:var(--teal); color:#fff;
  font-family:var(--font-display); font-weight:800; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase;
  padding:7px 14px; border-radius:var(--r-pill);
  box-shadow:0 6px 16px rgba(22,153,170,.32);
}
.bento-card__badge--invitro{padding:6px 12px;}
.bento-card__badge--invitro img{display:block; height:14px; width:auto; filter:brightness(0) invert(1);}
.bento-card ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:6px;
  position:relative; z-index:2;
}
.bento-card.compact ul{gap:4px;}
.bento-card li a{
  display:inline-flex; align-items:center;
  color:var(--teal-deep); font-size:15px; font-weight:500;
  transition:color var(--dur-fast) var(--ease-out);
}
.bento-card.compact li a{font-size:14px;}
.bento-card li a:hover{color:var(--orange);}
.bento-card li a::after{
  content:""; display:inline-block;
  width:14px; height:14px; margin-left:6px;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:0; transform:translateX(-4px);
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.bento-card li a:hover::after{opacity:1; transform:translateX(0);}
.bento-card li a .materials__type{margin-left:8px;}
.bento-card__prop{
  position:absolute; right:-30px; bottom:-30px;
  width:200px; height:200px; border-radius:50%;
  background:var(--teal-tint); color:var(--teal);
  display:flex; align-items:center; justify-content:center;
  opacity:.88;
  clip-path:inset(0 30px 30px 0 round 0 0 var(--r-xl) 0);
}
.bento-card.wide .bento-card__prop{
  width:280px; height:280px; right:-50px; bottom:-50px;
  clip-path:inset(0 50px 50px 0 round 0 0 var(--r-xl) 0);
}
.bento-card.is-warm .bento-card__prop{background:var(--orange-tint); color:var(--orange);}
.bento-card.is-soft .bento-card__prop{background:var(--teal-mist); color:var(--teal-deep);}
.bento-card.is-orange-soft .bento-card__prop{background:var(--orange-tint); color:var(--orange-deep);}
.bento-card__prop svg{width:54%; height:54%;}
.ph-badge{
  position:absolute; top:14px; left:14px;
  background:rgba(255,255,255,.92); color:var(--ink-500);
  font-size:9.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 9px; border-radius:var(--r-pill);
  box-shadow:var(--shadow-xs);
}

/* =========================================================================
   Doctors — slider + filter chips
   (Stage по образцу YouSmile «Почему»: градиентная рамка + статичный левый
    блок + бесшовная лента карточек, проезжающих «под» статиком.)
   ========================================================================= */
.doctors-slider{padding:96px 0; overflow:hidden;}
.doctors-stage{
  position:relative; isolation:isolate;
  --ds-card-w:320px; --ds-gap:16px; --ds-static-w:320px;
  --ds-bleed: max(32px, calc((100vw - 1216px) / 2));
  /* Симметричный отступ от верха фрейма до слайдов и от низа чипов до фрейма. */
  --ds-pad:64px;
  /* Зазор между низом карточек и верхом чипов. */
  --ds-cards-pb:32px;
  /* Реальная высота строки фильтр-чипов (padding 9·2 + 13.5px·1.2 line-height + 1.5·2 border ≈ 38px). */
  --ds-chips-h:38px;
  /* padding-bottom (а не margin-bottom тулбара): иначе margin схлопнется с низом сцены,
     и фрейм оборвётся прямо под чипами. */
  padding-bottom: var(--ds-pad);
}
.doctors-frame{
  position:absolute; top:0; bottom:0;
  left: calc(-1 * var(--ds-bleed) + 24px);
  right: calc(-1 * var(--ds-bleed) + 24px);
  background: linear-gradient(135deg, var(--teal-mist) 0%, var(--teal-tint) 55%, #bfe2e7 100%);
  border-radius:28px; z-index:0; pointer-events:none; overflow:hidden;
}
.doctors-frame::after{
  content:""; position:absolute; top:-12%; right:-8%;
  width:46%; aspect-ratio:1; border-radius:50%;
  background: radial-gradient(circle, rgba(237,112,41,.22) 0%, rgba(237,112,41,.06) 50%, transparent 75%);
  filter: blur(28px); pointer-events:none;
}
.doctors-frame::before{
  content:""; position:absolute; bottom:-18%; left:-6%;
  width:40%; aspect-ratio:1; border-radius:50%;
  background: radial-gradient(circle, rgba(22,153,170,.24) 0%, rgba(22,153,170,.06) 55%, transparent 80%);
  filter: blur(28px); pointer-events:none;
}
.doctors-static{
  position:absolute; left:0; top:72px;
  /* bottom = низ карточек: cards-pb + chips-h + ds-pad. */
  bottom: calc(var(--ds-cards-pb) + var(--ds-chips-h) + var(--ds-pad));
  width: var(--ds-static-w); z-index:10; padding:4px 0;
  display:flex; flex-direction:column;
  /* пустая нижняя часть огромного абсолютного бокса перекрывала
     стрелки-карусели (.doctors-arrows z=5) и ловила ховер. Снимаем
     pointer-events с самого бокса, оставляем на детях — текст h2/лида
     остаётся selectable. */
  pointer-events:none;
}
.doctors-static > *{pointer-events:auto;}
.doctors-meta{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display); font-size:11px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
  color: var(--teal-deep); margin-bottom:8px;
}
.doctors-meta .dot{ width:5px; height:5px; border-radius:999px; background: var(--orange); }
.doctors-static h2{
  font-family: var(--font-headline); font-weight:900;
  font-size: clamp(30px, 3.6vw, 44px); line-height:1.04;
  color: var(--ink-900); margin: 4px 0 14px;
  letter-spacing:-.02em; text-wrap: balance;
}
.doctors-static h2 .em{
  font-family: var(--font-em); color: var(--orange);
  font-style: italic; font-weight:600; letter-spacing:-.015em;
}
.doctors-lede{
  font-size:15px; line-height:1.5; color: var(--ink-700); margin:0 0 16px;
}
.doctors-static .all-link{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  margin-top:2px;
  font-family: var(--font-display); font-weight:800; font-size:12.5px;
  letter-spacing:.06em; text-transform:uppercase;
  color: var(--teal-deep); text-decoration:none;
}
.doctors-static .all-link svg{
  width:14px; height:14px;
  transition: transform var(--dur-base) var(--ease-out);
}
.doctors-static .all-link:hover{ color: var(--orange-deep); }
.doctors-static .all-link:hover svg{ transform: translateX(4px); }
.doctors-arrows{
  /* нормальный поток между лентой и чипами: порядок гарантирован,
     перекрытие чипов невозможно на любой ширине и при переносе чипов */
  position:relative; z-index:5;
  display:flex; gap:8px;
  margin: 6px 0 16px;
}
.doctors-arrows button{
  width:44px; height:44px; border-radius:50%;
  border:0; background:#fff; color:var(--ink-900);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 14px rgba(18,32,36,.08);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) ease;
}
.doctors-arrows button:hover:not(:disabled){
  background: var(--teal-deep); color:#fff; transform: scale(1.05);
  box-shadow: 0 8px 18px rgba(22,153,170,.26);
}
.doctors-arrows button:active:not(:disabled){ transform: scale(.96); }
.doctors-arrows button:disabled{ opacity:.4; cursor:not-allowed; }
.doctors-arrows button svg{ width:14px; height:14px; }

.doctors-track-wrap{
  position:relative; z-index:2;
  padding: var(--ds-pad) 0 var(--ds-cards-pb);
  margin-left: calc(-1 * var(--ds-bleed));
  margin-right: calc(-1 * var(--ds-bleed));
}
.doctors-track{
  display:flex; gap: var(--ds-gap);
  padding-left: var(--ds-bleed);
  transition: transform 700ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
  overflow: visible;
}
/* Карточка-врач в режиме слайдера: ширина из stage, fade под статиком */
.doctors-track .doctor{
  flex: 0 0 var(--ds-card-w);
  scroll-snap-align: none;
  align-self: stretch;
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              opacity 700ms var(--ease-out);
}
.doctors-track .doctor.under-static{ opacity:0; pointer-events:none; }

.filter-row{
  display:flex; gap:8px; flex-wrap:wrap;
  margin:6px 0 28px;
}
.filters-trigger{display:none;} /* только мобайл (показ в ≤720) */
.filters-menu{display:contents;} /* десктоп: обёртка прозрачна, чипы в общем ряду */
/* Тулбар внутри stage'а: только чипы (стрелки переехали в статичный блок),
   выравнивание по левому краю на той же оси, что и статичный блок. */
.doctors-toolbar{
  position:relative; z-index:5;
  /* Отступ снизу обеспечивает padding-bottom самой сцены — иначе margin-bottom
     схлопнулся бы с её низом и фрейм оборвался бы прямо под чипами.
     margin-right выводит правый край за stage до внутреннего края фрейма. */
  margin: 0 calc(-1 * var(--ds-bleed) + 24px) 0 0;
  padding: 0;
}
.doctors-toolbar .filter-row{
  margin:0; padding:0;
  justify-content:flex-start;
}
/* Filtered mode: лента не зациклена, карточки начинаются от col 2 (за статиком) */
.doctors-track.is-filtered{
  padding-left: calc(var(--ds-bleed) + var(--ds-static-w) + var(--ds-gap));
}
.filter-chip{
  font-family:var(--font-display); font-weight:700; font-size:13.5px;
  background:#fff; color:var(--ink-700);
  border:1.5px solid var(--ink-200); border-radius:var(--r-pill);
  padding:9px 16px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition:all var(--dur-fast) var(--ease-out);
}
.filter-chip:hover{border-color:var(--teal); color:var(--teal-deep);}
.filter-chip.is-on{background:var(--teal); border-color:var(--teal); color:#fff;}
.filter-chip__count{
  font-size:11px; font-weight:700; padding:2px 6px;
  border-radius:var(--r-pill); background:var(--ink-100); color:var(--ink-500);
}
.filter-chip.is-on .filter-chip__count{background:rgba(255,255,255,.22); color:#fff;}

.slider{position:relative;}
.slider__rail{
  display:flex; gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding:0 8px;
  padding:6px 4px 24px;
  scrollbar-width:none;
}
.slider__rail::-webkit-scrollbar{display:none;}

/* Карточка-врач: вертикальный лэйаут — фото → имя → роль → пилюли → футер */
.doctor{
  background:#fff; border-radius:22px;
  padding:18px 18px 14px;
  display:flex; flex-direction:column; gap:12px;
  box-shadow:var(--shadow-sm);
  min-width:0; min-height:480px;
  transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.doctor:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}

.doctor__photo{
  position:relative;
  aspect-ratio:1/1; border-radius:16px; overflow:hidden;
  background:linear-gradient(135deg, var(--teal-tint), #c2dde1);
  display:flex; align-items:flex-end; justify-content:center;
}
.doctor.warm .doctor__photo{
  background:linear-gradient(135deg, var(--orange-tint), #f8c69a);
}
.doctor__photo img{
  width:100%; height:100%; object-fit:cover; object-position:center top;
}
.doctor__photo .silhouette{
  width:62%; height:84%; color:rgba(255,255,255,.55);
}
/* age-badge — переиспользуемый бейдж: визуал глобально, позиция уже
   в контексте .doctor__photo (absolute bottom-left над фото). */
.age-badge{
  background:rgba(255,255,255,.94); color:var(--ink-700);
  font-family:var(--font-display);
  font-size:10.5px; font-weight:800;
  padding:5px 10px; border-radius:var(--r-pill);
  display:inline-block; white-space:nowrap;
  box-shadow:0 1px 3px rgba(18,32,36,.12);
}
.doctor__photo .age-badge{
  position:absolute; bottom:10px; left:10px;
  box-shadow:var(--shadow-xs); letter-spacing:.02em;
}
.doctor__play{
  position:absolute; top:10px; right:10px;
  width:38px; height:38px; border-radius:14px;
  background:linear-gradient(135deg, #f48a4a, var(--orange) 55%, var(--orange-deep));
  color:#fff; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(237,112,41,.32);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) ease;
}
/* a.doctor__play — специфичность (0,2,1) ровно как у глобального a:not(.btn):hover,
   правило ниже по файлу → побеждает и иконка-треугольник остаётся белой */
a.doctor__play:hover{color:#fff; transform:scale(1.08); box-shadow:0 10px 22px rgba(237,112,41,.42);}
.doctor__play svg{width:13px; height:13px; margin-left:1px;}
.doctor__play::after{
  content:'Видео-визитка врача';
  position:absolute; top:50%; right:calc(100% + 12px);
  transform:translateY(-50%) translateX(6px);
  background:var(--ink-900); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:11.5px;
  letter-spacing:-.01em; white-space:nowrap;
  padding:7px 11px; border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.doctor__play::before{
  content:''; position:absolute;
  top:50%; right:calc(100% + 5px);
  width:0; height:0;
  margin-top:-5px;
  border:5px solid transparent;
  border-left-color:var(--ink-900);
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease-out);
}
.doctor__play:hover::after,
.doctor__play:focus-visible::after{opacity:1; transform:translateY(-50%) translateX(0);}
.doctor__play:hover::before,
.doctor__play:focus-visible::before{opacity:1;}

.doctor__name{
  margin-top:4px;
  font-family:var(--font-display); font-weight:800; font-size:18px;
  line-height:1.18; color:var(--ink-900); letter-spacing:-.01em;
}
.doctor__name--no-play{padding-right:0;} /* legacy, безвреден */
.doctor__role{
  font-size:13px; line-height:1.4;
  color:var(--teal-deep); font-weight:600;
}
.doctor.warm .doctor__role{color:var(--orange-deep);}

.doctor__pills{display:flex; flex-wrap:wrap; gap:5px; margin-top:2px;}
.pill{
  background:var(--teal-tint); color:var(--teal-deep);
  font-family:var(--font-display);
  font-weight:700; font-size:10.5px; letter-spacing:.02em;
  padding:5px 10px; border-radius:var(--r-pill); white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
}
.pill.warm{background:var(--orange-tint); color:var(--orange-deep);}
.pill.teal{background:var(--teal-tint); color:var(--teal-deep);} /* legacy alias */
.pill svg{width:12px; height:12px; flex-shrink:0;}

.doctor__foot{
  margin-top:auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding-top:14px;
  border-top:1px solid var(--ink-100);
}
.doctor__price{font-size:12.5px; color:var(--ink-500);}
.doctor__price b{
  font-family:var(--font-display); font-size:15.5px; font-weight:800;
  color:var(--ink-900); margin-left:4px;
}
.doctor__cta{
  display:inline-flex; align-items:center; gap:6px;
  background:linear-gradient(135deg, #f48a4a, var(--orange) 55%, var(--orange-deep));
  color:#fff;
  font-family:var(--font-display); font-weight:800;
  font-size:13px;
  padding:10px 14px; border-radius:var(--r-pill);
  text-decoration:none; cursor:pointer; border:0;
  box-shadow:0 6px 14px rgba(237,112,41,.26);
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) ease;
}
/* a.doctor__cta — специфичность (0,2,1) ровно как у глобального a:not(.btn):hover,
   правило ниже по файлу → побеждает и текст остаётся белым */
a.doctor__cta:hover{
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(237,112,41,.34);
}
.doctor__cta svg{width:11px; height:11px; transition:transform var(--dur-base) var(--ease-out);}
.doctor__cta:hover svg{transform:translateX(4px);}

/* ---- Visitka video modal ---- */
.visitka-modal{
  position:fixed; inset:0; z-index:200;
  display:none; align-items:center; justify-content:center;
  padding:24px;
}
.visitka-modal.is-open{display:flex;}
.visitka-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(18,32,36,.72);
  backdrop-filter:blur(6px);
  cursor:pointer;
}
.visitka-modal__panel{
  position:relative;
  width:min(720px, 100%);
  max-height:calc(100vh - 48px);
  background:#000;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:0 24px 60px rgba(18,32,36,.45);
  display:flex; flex-direction:column;
  animation:visitkaIn .28s var(--ease-out);
}
@keyframes visitkaIn{
  from{transform:translateY(12px) scale(.98); opacity:0;}
  to{transform:none; opacity:1;}
}
.visitka-modal__close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:40px; height:40px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.94); color:var(--ink-900);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.visitka-modal__close:hover{transform:scale(1.06); background:#fff;}
.visitka-modal__video{
  width:100%; height:auto; max-height:calc(100vh - 130px);
  display:block; background:#000;
}
.visitka-modal__caption{
  font-family:var(--font-display); font-weight:700; font-size:14px;
  color:#fff; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 100%);
  padding:14px 22px; letter-spacing:-.01em;
}

.slider__nav{
  position:absolute; top:-72px; right:0;
  display:flex; gap:8px;
}
.slider__arrow{
  width:42px; height:42px; border-radius:50%; border:1.5px solid var(--ink-200);
  background:#fff; color:var(--ink-700); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--dur-fast) var(--ease-out);
}
.slider__arrow:hover{background:var(--teal); color:#fff; border-color:var(--teal);}

/* =========================================================================
   Почему «СЕМЬЯ»? — слева манифест-карточка + справа 2×2 сетка
   ========================================================================= */
.why{display:grid; grid-template-columns:1fr 1.3fr; gap:20px; align-items:stretch;}

/* Левая «манифест»-карточка */
.why__hero{
  position:relative; overflow:visible;
  background:linear-gradient(160deg,#fff 0%, var(--teal-tint) 100%);
  border-radius:28px;
  padding:48px 36px 36px;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-xs);
  min-height:480px;
}
.why__hero-body{
  position:relative; z-index:2;
  display:flex; flex-direction:column; height:100%;
}
.why__hero-title{
  font-family:var(--font-headline); font-weight:900;
  font-size:clamp(26px,2.6vw,32px); line-height:1.1;
  letter-spacing:-.02em; margin:14px 0 14px;
}
.why__hero-title .em{
  font-family:var(--font-em); font-style:italic; font-weight:600;
  color:var(--orange); letter-spacing:-.015em;
}
.why__hero-text{
  font-size:15.5px; line-height:1.6; color:var(--ink-700);
  margin:0; max-width:34ch;
}

/* Декорация «пик» — наклонённая мини-карточка сверху */
.why__deco{
  position:absolute; top:-46px; right:30px;
  width:156px; padding:16px 14px 14px;
  background:#fff; border-radius:20px;
  box-shadow:0 16px 30px rgba(18,32,36,.10), 0 2px 6px rgba(18,32,36,.06);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center;
  transform:rotate(8deg);
  transition:transform var(--dur-slow) var(--ease-out);
  z-index:1;
}
.why__hero:hover .why__deco{ transform:rotate(4deg) translateY(-4px); }
.why__deco-ic{
  width:54px; height:54px; border-radius:50%;
  background:var(--orange-tint);
  display:inline-flex; align-items:center; justify-content:center;
}
.why__deco-ic svg{
  width:30px; height:auto; display:block;
  transform-origin:50% 55%;
  animation:heartbeat 1.6s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes heartbeat{
  0%   { transform:scale(1); }
  14%  { transform:scale(1.18); }
  28%  { transform:scale(1); }
  42%  { transform:scale(1.12); }
  56%  { transform:scale(1); }
  100% { transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .why__deco-ic svg{ animation:none; }
}
.why__deco-label{
  font-family:var(--font-display); font-weight:800;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--orange-deep); line-height:1.4;
}

/* Правый столбец: заголовок + 2×2 */
.why__right{ display:flex; flex-direction:column; }
.why__title{
  margin:8px 0 24px; padding-left:8px;
  font-size:clamp(28px,3.2vw,40px); line-height:1.05;
}
.why__title .em{
  font-family:var(--font-em); font-style:italic; font-weight:600;
  color:var(--orange); letter-spacing:-.015em;
}
.why__grid{
  flex:1; display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.why-card{
  background:linear-gradient(160deg,#fff 0%, var(--teal-mist) 100%);
  border-radius:22px;
  padding:30px 24px 26px;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  text-align:center;
  box-shadow:var(--shadow-xs);
  transition:box-shadow var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out);
}
.why-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.why-card__ic{
  width:54px; height:54px; border-radius:16px;
  background:var(--teal-tint); color:var(--teal-deep);
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:32px;
}
.why-card:nth-child(2n) .why-card__ic{
  background:var(--orange-tint); color:var(--orange-deep);
}
.why-card__ic svg{ width:32px; height:32px; display:block; }
/* фото вместо иконок */
.why-card__ic--photo, .why-card__ic--logo{
  background:#fff; box-shadow:inset 0 0 0 1px var(--ink-100);
  overflow:hidden; padding:0;
}
.why-card:nth-child(2n) .why-card__ic--photo,
.why-card:nth-child(2n) .why-card__ic--logo{
  background:#fff; color:inherit;
}
.why-card__ic--photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.why-card__ic--logo img{ width:80%; height:80%; object-fit:contain; }
.why-card__ic--avatars{ background:transparent; overflow:visible; position:relative; }
.why-card:nth-child(2n) .why-card__ic--avatars{ background:transparent; }
.why-card__ic--avatars .wc-av{
  position:absolute; width:38px; height:38px; border-radius:50%;
  object-fit:cover; border:2.5px solid #fff; box-shadow:0 2px 6px rgba(18,32,36,.20);
}
.why-card__ic--avatars .wc-av:first-child{ left:1px; top:4px; z-index:2; }
.why-card__ic--avatars .wc-av:last-child{ left:16px; top:13px; z-index:1; }
.why-card__text{ margin:0; font-size:14.5px; line-height:1.55; color:var(--ink-700); }
.why-card__text strong{
  display:block; margin-bottom:4px;
  font-family:var(--font-display); font-weight:800; font-size:16px;
  color:var(--ink-900); letter-spacing:-.01em;
}

/* =========================================================================
   Reviews
   ========================================================================= */
.reviewlab-wrap{
  background:#fff; border-radius:var(--r-xl); padding:30px;
  box-shadow:var(--shadow-xs); border:1px solid var(--ink-100);
}

/* =========================================================================
   Contacts + photo slider
   ========================================================================= */
.contacts{display:grid; grid-template-columns:1fr 1.15fr; gap:36px; align-items:stretch;}
.contacts__card{
  background:#fff; border-radius:var(--r-xl); padding:32px;
  box-shadow:var(--shadow-sm);
}
.contacts__block{
  display:flex; gap:14px; padding:16px 0;
  border-bottom:1px solid var(--ink-100);
}
.contacts__block:last-of-type{border-bottom:0;}
.contacts__block:first-of-type{padding-top:0;}
.contacts__ic{
  width:24px; height:24px; color:var(--teal);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  margin-top:2px;
}
.contacts__ic svg{width:22px; height:22px;}
.contacts__block:nth-of-type(2) .contacts__ic{color:var(--orange);}
.contacts__schedule{
  display:grid; grid-template-columns:auto 1fr; gap:4px 20px;
  margin:2px 0 0; font-size:15px; line-height:1.5;
}
.contacts__schedule dt{
  font-family:var(--font-display); font-weight:800;
  color:var(--ink-900); white-space:nowrap;
}
.contacts__schedule dd{margin:0; color:var(--ink-900); white-space:nowrap;}
.contacts__schedule dd.muted{color:var(--ink-500);}
.contacts__lbl{font-family:var(--font-display); font-weight:800; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-500); margin-bottom:4px;}
.contacts__val{font-size:15.5px; line-height:1.5; color:var(--ink-900);}
.contacts__val strong{font-family:var(--font-display); font-weight:800;}
.contacts__val a{color:var(--ink-900); font-family:var(--font-display); font-weight:800; font-size:17px;}
.contacts__val a:hover{color:var(--teal-deep);}
.contacts__small{font-size:13.5px; color:var(--ink-500); margin-top:4px; line-height:1.5;}
.contacts__cta{margin-top:22px;}
.contacts__socials{display:flex; gap:8px; margin-top:6px;}
.contacts__social{
  width:36px; height:36px; border-radius:50%;
  background:var(--teal-tint); color:var(--teal-deep);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-base) ease;
}
.contacts__social:hover{
  background:var(--teal); color:#fff; transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(22,153,170,.26);
}
.contacts__social svg{width:18px; height:18px; display:block;}

/* Тултип на иконке Instagram с дисклеймером по требованиям РФ. */
.contacts__socials{position:relative;}
.contacts__social{position:relative;}
.contacts__social--meta::after{
  content:'Instagram принадлежит компании Meta Platforms Inc., деятельность которой признана экстремистской и запрещена на территории Российской Федерации.';
  position:absolute; bottom:calc(100% + 12px); left:50%;
  transform:translateX(-50%) translateY(6px);
  width:300px; max-width:80vw;
  background:var(--ink-900); color:#fff;
  font-family:var(--font-display); font-weight:500; font-size:11.5px;
  line-height:1.45; letter-spacing:-.005em;
  white-space:normal; text-align:left;
  padding:10px 12px; border-radius:var(--r-md);
  box-shadow:var(--shadow-md);
  opacity:0; pointer-events:none; z-index:20;
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.contacts__social--meta::before{
  content:''; position:absolute; bottom:calc(100% + 4px); left:50%;
  transform:translateX(-50%);
  width:0; height:0;
  border:6px solid transparent;
  border-top-color:var(--ink-900);
  opacity:0; pointer-events:none; z-index:21;
  transition:opacity var(--dur-fast) var(--ease-out);
}
.contacts__social--meta:hover::after,
.contacts__social--meta:focus-visible::after{
  opacity:1; transform:translateX(-50%) translateY(0);
}
.contacts__social--meta:hover::before,
.contacts__social--meta:focus-visible::before{opacity:1;}

.photo-slider{
  position:relative;
  border-radius:var(--r-xl); overflow:hidden;
  background:var(--teal-tint);
  box-shadow:var(--shadow-md);
}
.photo-slider__track{
  position:absolute; inset:0;
  display:flex;
  transition:transform var(--dur-slow) var(--ease-out);
}
.photo-slider__slide{
  flex:0 0 100%; height:100%;
  background:var(--teal-tint);
  display:flex; align-items:center; justify-content:center;
}
.photo-slider__slide img{width:100%; height:100%; object-fit:cover;}
.photo-slider__nav{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.92); padding:7px 7px 7px 12px;
  border-radius:var(--r-pill); box-shadow:var(--shadow-xs);
  backdrop-filter:blur(8px);
}
.photo-slider__dots{display:flex; gap:6px;}
.photo-slider__dot{
  width:7px; height:7px; border-radius:50%; background:var(--ink-200);
  border:0; cursor:pointer; padding:0;
  transition:background var(--dur-fast), width var(--dur-fast);
}
.photo-slider__dot.is-on{background:var(--teal); width:22px; border-radius:999px;}
.photo-slider__arrow{
  width:32px; height:32px; border-radius:50%; border:0; cursor:pointer;
  background:#fff; color:var(--ink-700);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast), color var(--dur-fast);
}
.photo-slider__arrow:hover{background:var(--teal); color:#fff;}

/* =========================================================================
   Footer
   ========================================================================= */
.footer{
  background:linear-gradient(160deg,var(--teal) 0%, var(--teal-deep) 100%);
  color:#fff; padding:64px 0 28px;
}
.footer__top{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:36px;}
.footer__logo{height:42px; filter:brightness(0) invert(1); opacity:.95; margin-bottom:16px;}
.footer__legal-mini{font-size:13px; line-height:1.65; color:rgba(255,255,255,.85); margin:0;}
.footer__legal-mini a{color:#fff; text-decoration:underline; text-underline-offset:3px;}
.footer__legal-mini a:hover{color:rgba(255,255,255,.85);}
/* Реквизиты ООО — <dl> с парами лейбл/значение в строку. Сброс
   браузерных дефолтов <dd> (margin-inline-start:40px), лейбл —
   Shnobel жирный, значение — system-ui с tabular-nums для цифр. */
.footer__reqs{margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:4px;
  font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.85);}
.footer__reqs > div{display:flex; flex-wrap:wrap; gap:6px;}
.footer__reqs dt{
  font-family:var(--font-display); font-weight:800; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.65);
  flex:0 0 80px;
}
.footer__reqs dd{margin:0; color:#fff; font-variant-numeric:tabular-nums;}
.footer__partner{
  margin-top:28px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.18);
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
}
.footer__partner-logo{
  height:42px; width:auto;
  filter:brightness(0) invert(1); opacity:.95;
}
.footer__partner-caption{
  margin:0; font-size:12.5px; line-height:1.5;
  color:rgba(255,255,255,.78); max-width:260px;
}
.footer__col h4{
  font-family:var(--font-display); font-weight:800; font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.7);
  margin:0 0 14px;
}
.footer__col-btn{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; padding:0; background:none; border:0; text-align:left;
  font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit;
  cursor:default;
}
.footer__col-btn .chev{display:none; flex-shrink:0;
  transition:transform var(--dur-base) var(--ease-out);}
.footer__col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px;}
.footer__col li a{color:rgba(255,255,255,.92); font-size:14px;}
.footer__col li a:hover{color:#fff; text-decoration:underline; text-underline-offset:3px;}
.footer__divider{height:1px; background:rgba(255,255,255,.18); margin:38px 0 18px;}
.footer__bottom{
  display:flex; justify-content:space-between; align-items:center;
  gap:24px; flex-wrap:wrap; color:rgba(255,255,255,.74); font-size:12.5px;
}
.footer__bottom-left{display:flex; flex-direction:column; gap:6px;}
.footer__license{height:84px; width:auto; opacity:.95;
  display:block; flex:0 0 100%; margin:16px auto 0;}
.footer__warning{
  margin-top:22px; padding:14px 18px;
  background:rgba(255,255,255,.12); border-radius:var(--r-md);
  font-family:var(--font-display); font-weight:800; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; text-align:center;
}
.footer__disclaimer{
  margin:14px 0 0; padding:0 4px;
  font-size:11.5px; line-height:1.55;
  color:rgba(255,255,255,.55); text-align:center;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:1100px){
  /* фото остаётся приклеенным к правому краю, левый паддинг чуть меньше */
  .hero__slide{--hero-h:480px; padding:0 0 0 36px;}
  .hero-strip{grid-template-columns:repeat(2,1fr);}
  .services-bento{grid-template-columns:1fr 1fr; grid-template-rows:auto;}
  .bento-card.wide{grid-row:auto; grid-column:1 / -1;}
  /* блоки про медцентр — во всю ширину экрана (отменяем 16px контейнера) */
  .why{grid-template-columns:minmax(0,1fr); gap:14px; margin:0 -16px;}
  .why__hero{min-width:0; min-height:auto; padding:30px 18px 26px; border-radius:0; overflow:visible;}
  .why__hero-body{min-width:0;}
  .why__hero-title{font-size:23px; line-height:1.14; margin:10px 0 12px; overflow-wrap:anywhere;}
  .why__hero-text{max-width:none; font-size:15px;}
  .why__deco{right:16px; top:-40px; width:132px;}
  /* скрыть заголовок «Почему Семья?», преимущества — слайдером под hero */
  .why__title{display:none;}
  .why__grid{display:flex; gap:12px; margin:6px 0 0; padding:2px 16px 6px;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; overscroll-behavior-x:contain;}
  .why__grid::-webkit-scrollbar{display:none;}
  .why-card{flex:0 0 86%; min-width:0; box-sizing:border-box; scroll-snap-align:start;}
  .contacts{grid-template-columns:1fr;}
  /* нет растягивающего соседа в один столбец — задаём реальную высоту.
     aspect-ratio игнорируется старым моб. Safari/in-app webview → слайдер
     схлопывался в 0 на телефоне (в эмуляции ПК работал). Явная высота — везде. */
  .photo-slider{height:clamp(220px, 72vw, 420px);}
  .photo-slider__slide{height:100%;}
  .menu{display:none;}
  .nav{grid-template-columns:auto 1fr;}
  .branch__label .place{display:none;}
  .footer__top{grid-template-columns:repeat(4, 1fr); gap:28px;}
  .footer__brand{grid-column:1 / -1;}
  .doctors-stage{--ds-card-w:264px; --ds-static-w:264px;}
  .doctors-static h2{font-size:clamp(26px,3.4vw,32px);}
}
@media(max-width:860px){
  /* контакты на мобиле: слайдер фото — выше карточки, CTA убираем */
  .contacts__card{order:1;}
  .photo-slider{order:0; margin-bottom:18px;}
  .contacts__cta{display:none;}
}
@media (max-width:720px){
  .section{padding:56px 0;}
  .container{padding:0 16px;}
  .site-header{padding:0 12px; top:8px;}
  .nav{padding:8px 10px 8px 14px; gap:12px;}
  .logo__mark{height:26px;}
  .branch__label{display:none;}
  .branch .chev{display:none;}
  .branch-pop{right:auto; left:0;}
  .hero{padding:18px 0 16px;}
  .hero__stage{padding:0 12px;}
  .hero__slide{grid-template-columns:1fr; padding:32px 28px 64px; min-height:auto;}
  .hero__art{order:-1;}
  .hero-strip{grid-template-columns:1fr;}
  .services-bento{grid-template-columns:1fr;}
  .bento-card.wide{grid-column:auto;}
  .why__grid{grid-template-columns:1fr;}
  .why__hero{padding:40px 22px 24px;}
  .why__deco{width:122px; top:-34px; right:14px; padding:12px 10px 10px;}
  .why__deco-ic{width:46px; height:46px;}
  .why__title{font-size:28px;}
  .footer__top{grid-template-columns:1fr; gap:0;}
  .footer__brand{margin-bottom:26px;
    display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start;}
  .footer__partner{margin-top:0; padding-top:0; border-top:0;}
  /* колонки футера — аккордеон, как мобильное меню */
  .footer__col{border-top:1px solid rgba(255,255,255,.16);}
  .footer__col h4.footer__col-h{margin:0;}
  .footer__col-btn{cursor:pointer; padding:16px 2px;}
  .footer__col-btn .chev{display:block; color:rgba(255,255,255,.55);}
  .footer__col.is-open .footer__col-btn .chev{transform:rotate(180deg);}
  .footer__col ul{max-height:0; overflow:hidden; padding:0;
    transition:max-height .3s var(--ease-out), padding .3s var(--ease-out);}
  .footer__col.is-open ul{max-height:520px; padding:0 0 18px;}
  .section__head{flex-direction:column; align-items:flex-start; gap:14px;}
  .head-link{align-self:flex-start;}
  .slider__nav{position:static; margin-bottom:14px;}
  .doctor{flex-basis:230px;}
  .mega{display:none;}

  /* Doctors slider → стек: статик сверху, лента горизонтальным скроллом */
  .doctors-slider{padding:56px 0;}
  .doctors-frame{display:none;}
  /* порядок: заголовок → фильтры → карточки */
  .doctors-stage{display:flex; flex-direction:column;}
  .doctors-static{position:static; width:auto; padding:0 0 18px; display:block; order:1;}
  .doctors-toolbar{order:2;}
  .doctors-track-wrap{order:3;}
  .doctors-static h2{font-size:28px; margin-bottom:10px;}
  .doctors-arrows{display:none;}
  .doctors-static .all-link{margin-top:8px;}
  /* врачи на мобиле: слайдер — 1 карточка + край следующей, свайп */
  .doctors-track-wrap{margin:0 -16px; padding:8px 0 18px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    overscroll-behavior-x:contain;}
  .doctors-track-wrap::-webkit-scrollbar{display:none;}
  .doctors-track{display:flex; padding:0 16px; gap:12px;
    transform:none !important; transition:none;}
  .doctors-track .doctor{flex:0 0 84%; min-width:0; scroll-snap-align:start;}
  .doctors-track .doctor.under-static{opacity:1; pointer-events:auto;}
  /* фильтры: «Все» отдельным чипом + триггер «Выбрать специальность» в той же строке */
  .doctors-toolbar{position:relative; display:flex; align-items:flex-start;
    gap:8px; flex-wrap:wrap;}
  #doctorFilters{display:flex; align-items:center; gap:8px; margin:6px 0 18px;}
  .filters-menu{display:none;}
  .filters-trigger{display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-display); font-weight:800; font-size:13px;
    color:var(--ink-900); background:#fff; border:1px solid var(--ink-200);
    border-radius:var(--r-pill); padding:9px 16px; cursor:pointer; margin:6px 0 18px;}
  .filters-trigger .chev{color:var(--ink-400); transition:transform var(--dur-base) var(--ease-out);}
  /* выбрана специальность → триггер залит зелёным (как активный бейдж) */
  .filters-trigger.is-active{background:var(--teal); border-color:var(--teal); color:#fff;}
  .filters-trigger.is-active .chev{color:#fff;}
  .doctors-toolbar.filters-open .filters-trigger:not(.is-active){border-color:var(--teal); color:var(--teal-deep);}
  .doctors-toolbar.filters-open .filters-trigger .chev{transform:rotate(180deg);}
  /* дропдаун — вертикальный список специальностей */
  .doctors-toolbar.filters-open .filters-menu{display:flex; flex-direction:column;
    gap:6px; position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:30;
    background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-md);
    padding:12px; max-height:60vh; overflow-y:auto;
    -webkit-overflow-scrolling:touch; overscroll-behavior:contain;}
  .doctors-toolbar.filters-open .filters-menu .filter-chip{width:100%; justify-content:flex-start;}
}

/* ---------- 2. Каноничная расширенная карточка врача ----------
   Источник: preview/card-doctor-extended.html (как дано).
   Заскоплено под .card — не конфликтует с .pill/.day index. */
.card{background:#fff; border-radius:24px; box-shadow:0 2px 8px rgba(18,32,36,.06);
  display:grid; grid-template-columns:252px minmax(0,1fr) 47%; gap:24px;
  padding:22px 28px 22px 22px; align-items:stretch; min-height:400px;
  transition:box-shadow .22s var(--ease-out);
  font-family:system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;}
.card:hover{box-shadow:0 14px 32px rgba(18,32,36,.08);}
.card .photo{height:100%; min-height:340px; border-radius:18px; overflow:hidden;
  background:linear-gradient(135deg,var(--teal-tint) 0%,#c2dde1 100%);
  position:relative; display:flex; align-items:flex-end; justify-content:center;}
.card .photo > svg{width:78%; height:88%; color:rgba(255,255,255,.55);}
.card .photo img{width:100%; height:100%; object-fit:cover; object-position:center top;}
.card .ph-badge{position:absolute; top:10px; right:10px;
  background:rgba(255,255,255,.92); color:var(--ink-700);
  font-size:10.5px; font-weight:700; padding:5px 10px; border-radius:999px;
  box-shadow:0 1px 3px rgba(18,32,36,.12);}
.card .info{display:flex; flex-direction:column; gap:10px; padding-top:4px;}
.card .name{font-size:22px; font-weight:800; line-height:1.18;
  color:var(--ink-900); letter-spacing:-.01em;}
.card .role{font-size:14px; line-height:1.45; color:var(--teal-deep); font-weight:600;}
.card .pills{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px;}
.card .pill{font-size:11px; font-weight:700; background:var(--teal-tint);
  color:var(--teal-deep); padding:6px 12px; border-radius:999px;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}
.card .pill.warm{background:var(--orange-tint); color:var(--orange-deep);}
.card .pill svg{width:12px; height:12px;}
.card__format{margin-top:auto; display:flex; flex-direction:column; gap:3px;
  padding-bottom:14px;}
.card__format-label{font-size:13px; color:var(--ink-500);}
.card__format-val{font-family:var(--font-display); font-weight:800;
  font-size:15px; color:var(--ink-900);}
.card__format-sep{color:var(--ink-300); font-weight:400; margin:0 4px;}
.card .price-row{display:flex; align-items:baseline; gap:8px;
  padding-top:14px; border-top:1px solid var(--ink-100);
  font-size:13px; color:var(--ink-500);}
.card .price-row .num{font-size:18px; font-weight:800; color:var(--ink-900);}
/* Вместо фикс. цены — пояснение (врач УЗИ по прайсу исследований). */
.card .price-row--note{display:block; line-height:1.4; color:var(--ink-600, #46565b);}
.card .more-link{margin-top:6px; color:var(--teal-deep); font-size:13px;
  font-weight:600; text-decoration:none; display:inline-flex;
  align-items:center; gap:6px; cursor:pointer;}
.card .more-link:hover{color:var(--orange);}
.card .more-link svg{width:12px; height:12px; transition:transform .22s var(--ease-out);}
.card .more-link:hover svg{transform:translateX(4px);}
/* бейдж «Подробнее о враче» поверх фото — только на мобайле */
.card .photo__cta{display:none;}
.card .book{border:1.5px solid var(--teal); border-radius:18px; padding:16px;
  display:flex; flex-direction:column; gap:12px;}
.card__days{position:relative;}
.card .day-tabs, .vrach-book .day-tabs{--m-l:0px; --m-r:0px; display:flex; gap:8px;
  overflow-x:auto; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--m-l), #000 calc(100% - var(--m-r)), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 var(--m-l), #000 calc(100% - var(--m-r)), transparent 100%);}
.card .day-tabs::-webkit-scrollbar, .vrach-book .day-tabs::-webkit-scrollbar{display:none;}
/* частично невходящие дни уходят в прозрачность у краёв со скроллом */
.card__days.can-prev .day-tabs{--m-l:42px;}
.card__days.can-next .day-tabs{--m-r:42px;}
/* стрелки — поверх краёв, появляются при ховере карточки */
.card__days-arrow{position:absolute; top:50%; transform:translateY(-50%);
  z-index:3; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--ink-100); background:#fff; color:var(--ink-500);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(18,32,36,.10);
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);}
.card__days-prev{left:-4px;}
.card__days-next{right:-4px;}
.card__days-arrow:hover{color:var(--teal-deep); border-color:var(--teal-soft);}
.card .book:hover .card__days.can-prev .card__days-prev,
.card .book:hover .card__days.can-next .card__days-next,
.vrach-book:hover .card__days.can-prev .card__days-prev,
.vrach-book:hover .card__days.can-next .card__days-next,
.card__days.can-prev:focus-within .card__days-prev,
.card__days.can-next:focus-within .card__days-next{opacity:1; pointer-events:auto;}
.card .day, .vrach-book .day{flex:0 0 auto; min-width:90px;
  background:var(--ink-050); border:0; border-radius:12px;
  padding:8px 12px; cursor:pointer; text-align:center; font-family:inherit;
  transition:background .12s,color .12s;}
.card .day:hover, .vrach-book .day:hover{background:var(--teal-tint);}
.card .day.is-on, .vrach-book .day.is-on{background:var(--teal); color:#fff;}
.card .day.is-on .day__sub, .vrach-book .day.is-on .day__sub{color:rgba(255,255,255,.85);}
/* склеенный таб-диапазон дней без приёма — неактивное состояние (--ink-100 / --ink-400,
   как .slot.muted). Недоступен для открытия: pointer-events:none + [disabled] в разметке. */
.card .day--range, .vrach-book .day--range,
.card .day--range:hover, .vrach-book .day--range:hover,
.card .day--range.is-on, .vrach-book .day--range.is-on{
  background:var(--ink-100); cursor:not-allowed; pointer-events:none;}
.card .day--range .day__main, .vrach-book .day--range .day__main,
.card .day--range .day__sub, .vrach-book .day--range .day__sub{color:var(--ink-400);}
.card .day__main, .vrach-book .day__main{font-size:13.5px; font-weight:700;}
.card .day__sub, .vrach-book .day__sub{font-size:11px; color:var(--ink-500); margin-top:1px; font-weight:500;}
.card .slots, .vrach-book .slots{display:grid; grid-template-columns:repeat(7,1fr); gap:6px;}
/* контейнер неактивного дня: hidden должен перебивать display:grid выше */
.card .slots[hidden], .vrach-book .slots[hidden]{display:none;}
.card .slot, .vrach-book .slot{background:var(--teal); color:#fff; border:0; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:13px; padding:10px 4px;
  border-radius:8px; transition:background .12s var(--ease-out),transform .12s var(--ease-out);}
.card .slot:hover, .vrach-book .slot:hover{background:var(--orange); transform:scale(1.04);}
.card .slot.muted, .vrach-book .slot.muted{background:var(--ink-100); color:var(--ink-400); cursor:not-allowed;}
.card .slot.muted:hover, .vrach-book .slot.muted:hover{background:var(--ink-100); transform:none;}
/* свободный слот может быть ссылкой (deep-link записи) — приводим <a> к виду кнопки */
.card a.slot, .vrach-book a.slot{display:block; text-align:center; text-decoration:none;}
/* Слот-ссылка остаётся белой во всех состояниях (link/visited/hover/focus) — на teal и на
   оранжевом ховере. Без .vrach-book текст ссылки на странице врача терял белый цвет. */
.card a.slot:link, .card a.slot:visited, .card a.slot:hover, .card a.slot:focus,
.vrach-book a.slot:link, .vrach-book a.slot:visited, .vrach-book a.slot:hover, .vrach-book a.slot:focus{color:#fff;}

/* Карточка врача — пустые состояния блока записи */
/* а) расписание есть, но в выбранном дне нет свободных слотов */
.card .slots-empty, .vrach-book .slots-empty{grid-column:1/-1; padding:22px 6px; text-align:center;}
.card .slots-empty__title{color:var(--ink-700); font-size:14px; font-weight:600;}
.card .slots-empty__sub{margin-top:6px; color:var(--ink-500); font-size:13px; line-height:1.5;}
/* б) расписания нет вовсе — приглашение в лист ожидания со звонком */
.card .book--empty, .vrach-book.book--empty{display:flex; align-items:center; justify-content:center;}
.card .book-wait, .vrach-book .book-wait{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:18px 14px; max-width:340px;}
.card .book-wait__ic, .vrach-book .book-wait__ic{width:42px; height:42px; color:var(--teal); opacity:.9;}
.card .book-wait__text, .vrach-book .book-wait__text{margin:0; font-size:14px; line-height:1.5; color:var(--ink-700);}
.card .book-wait__call, .vrach-book .book-wait__call{text-decoration:none;}
.card .book-wait__call svg, .vrach-book .book-wait__call svg{width:18px; height:18px;}
.card .legend, .vrach-book .legend{display:flex; gap:16px; align-items:center;
  font-size:11.5px; color:var(--ink-500); margin-top:auto; padding-top:8px;}
.card .legend .dot, .vrach-book .legend .dot{width:10px; height:10px; border-radius:3px;
  display:inline-block; vertical-align:middle; margin-right:6px;}
@media(max-width:860px){
  .card{grid-template-columns:1fr; gap:16px; min-height:0; padding:16px;}
  /* фото — квадрат, вписан в ширину, кадр по верхнему краю */
  .card .photo{width:100%; max-width:360px; margin:0 auto; height:auto;
    min-height:0; aspect-ratio:1/1; align-items:flex-start;}
  .card .photo img{object-position:center top;}
  /* «Подробнее» — компактный бейдж в правом-нижнем углу фото:
     размер как у .pill «Стаж 10 лет», полупрозрачный белый фон, серый шрифт */
  .card .more-link{display:none;}
  .card .photo__cta{display:inline-flex; align-items:center;
    position:absolute; right:10px; bottom:10px;
    z-index:2; white-space:nowrap;
    background:rgba(255,255,255,.80); color:var(--ink-700);
    font-size:11px; font-weight:700; padding:6px 12px;
    border-radius:var(--r-pill); text-decoration:none;
    box-shadow:0 1px 3px rgba(18,32,36,.12);}
  .card .info{padding-top:0;}
  .card .name{font-size:20px;}
  .card .role{font-size:13.5px;}
  .card__format{margin-top:4px; padding-bottom:12px;}
  .card__format-label{font-size:12px;}
  .card__format-val{font-size:14px; font-weight:700; line-height:1.35;}
  .card__format-sep{margin:0 6px;}
  .card .price-row{padding-top:12px;}
  .card .book{padding:14px; min-width:0;}
  .card .day{min-width:76px; padding:7px 10px;}
  .card .day__main{font-size:12.5px;}
  .card .day__sub{font-size:10.5px;}
  .card .slots{grid-template-columns:repeat(4,1fr); gap:5px;}
  .card .slot{font-size:12px; padding:9px 2px;}
  .card .legend{font-size:11px; gap:12px;}
}

/* ---------- 3. Переиспользуемые секции страниц ----------
   hero / преимущества (бенто) / прайс / cta-полоса. На токенах index. */
/* Хлебные крошки (переиспользуемые) */
.breadcrumb{padding:6px 0 0;}
.breadcrumb ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  align-items:center; gap:8px; font-family:var(--font-display); font-size:13px;}
.breadcrumb li{display:flex; align-items:center; gap:8px; color:var(--ink-500);}
.breadcrumb li+li::before{content:"/"; color:var(--ink-300);}
.breadcrumb a{color:var(--ink-500);}
.breadcrumb a:hover{color:var(--teal-deep);}
.breadcrumb [aria-current]{color:var(--ink-900); font-weight:700;}
/* Многоточие схлопнутой крошки на мобильных: DOM-маркер <li.breadcrumb__ellipsis>
   и .breadcrumb__mid у серединных элементов добавляет макрос ui.breadcrumb
   при items.length > 2. По умолчанию ellipsis скрыт; на ≤640px показываем его и
   прячем серединные пункты — получаем «Главная / … / Текущая». JSON-LD не трогаем. */
.breadcrumb .breadcrumb__ellipsis{display:none;}
@media (max-width:640px){
  /* Серединные пункты прячем визуально, но НЕ из a11y-дерева
     (clip-path-паттерн «sr-only»): VoiceOver/TalkBack читают полный путь. */
  .breadcrumb .breadcrumb__mid{
    position:absolute; width:1px; height:1px;
    padding:0; margin:0; overflow:hidden;
    clip:rect(0,0,0,0); clip-path:inset(50%);
    white-space:nowrap; border:0;
  }
  .breadcrumb .breadcrumb__ellipsis{display:flex; align-items:center; color:var(--ink-500);}
}

/* Hero страницы услуги: без фото, мягкий вертикальный градиент */
.svc-hero{background:linear-gradient(180deg,#fff 0%, var(--teal-mist) 100%);
  padding:48px 0 60px;}
.svc-hero__inner{padding-top:48px;}
.svc-hero__inner .eyebrow{margin-bottom:14px;}
.svc-hero .hero__title{margin:0;}
.svc-hero__sub{margin:16px 0 38px; font-size:18px; line-height:1.6;
  color:var(--ink-700); max-width:560px;}
.svc-hero__perks{list-style:none; margin:0 0 34px; padding:0;
  display:flex; flex-wrap:wrap; gap:10px;}
.svc-hero__perk{display:inline-flex; align-items:center; gap:10px;
  background:#fff; border-radius:var(--r-pill); padding:10px 18px;
  border:1px solid var(--ink-100); font-size:14px; font-weight:600; color:var(--ink-900);}
.svc-hero__perk::before{content:""; flex-shrink:0; width:7px; height:7px;
  border-radius:50%; background:var(--teal);}
/* Адресные ориентиры — текстовые ссылки на карту, не бейджи */
.svc-hero__addr{display:flex; flex-wrap:wrap; align-items:center;
  gap:6px 20px; margin:0 0 42px;}
.svc-hero__addr-link{position:relative; font-size:14px; font-weight:600;
  line-height:1; color:var(--ink-500);}
.svc-hero__addr-link+.svc-hero__addr-link::before{content:""; position:absolute;
  left:-12px; top:50%; width:4px; height:4px; margin-top:-2px;
  border-radius:50%; background:var(--ink-200);}
a.svc-hero__addr-link:hover{color:var(--teal-deep);
  text-decoration:underline; text-underline-offset:3px;}
.svc-hero__addr-link::after{content:attr(data-tip); position:absolute;
  left:50%; bottom:calc(100% + 9px); transform:translateX(-50%) translateY(4px);
  background:var(--ink-900); color:#fff; font-family:var(--font-display);
  font-size:11px; font-weight:700; letter-spacing:.02em; white-space:nowrap;
  padding:6px 10px; border-radius:var(--r-sm); opacity:0; pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out);}
.svc-hero__addr-link:hover::after{opacity:1; transform:translateX(-50%) translateY(0);}
.svc-hero__ctas{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
/* Телефон-ссылка: чёрный жирный номер, не кнопка */
a.svc-hero__tel{display:inline-flex; align-items:center; padding:9px 6px;
  margin-left:10px; font-family:var(--font-display); font-weight:800;
  font-size:17px; color:var(--ink-900);}
a.svc-hero__tel:hover{color:var(--teal-deep);}
.svc-hero__max-ic{width:18px; height:18px; flex-shrink:0;}

/* Сплит-кнопка мессенджеров (переиспользуемая) */
.msg-split{position:relative; display:inline-flex; align-items:stretch;
  background:#fff; border:1px solid var(--teal-soft); border-radius:var(--r-pill);}
a.msg-split__main{display:inline-flex; align-items:center; gap:9px;
  padding:8px 12px 8px 14px; color:var(--ink-900); border-radius:var(--r-pill) 0 0 var(--r-pill);}
a.msg-split__main:hover{color:var(--ink-900);}
.msg-split__ic{flex-shrink:0; width:20px; height:20px;}
.msg-split__txt{display:flex; flex-direction:column; line-height:1.08; text-align:left;}
.msg-split__small{font-size:10px; font-weight:600; color:var(--teal);}
.msg-split__brand{font-family:var(--font-display); font-weight:800;
  font-size:14px; letter-spacing:.02em; color:var(--ink-900);}
.msg-split__toggle{display:inline-flex; align-items:center; justify-content:center;
  width:40px; padding:0; background:transparent; border:0; cursor:pointer;
  color:var(--ink-500); border-left:1px solid var(--ink-100);
  border-radius:0 var(--r-pill) var(--r-pill) 0;}
.msg-split__toggle:hover{color:var(--teal-deep); background:var(--teal-mist);}
.msg-split__toggle svg{transition:transform var(--dur-base) var(--ease-out);}
.msg-split.is-open .msg-split__toggle svg{transform:rotate(180deg);}
.msg-split__menu{position:absolute; top:calc(100% + 8px); left:0; min-width:230px;
  background:#fff; border:1px solid var(--ink-100); border-radius:var(--r-md);
  box-shadow:var(--shadow-md); padding:6px; display:none; z-index:40;}
.msg-split.is-open .msg-split__menu{display:block;}
a.msg-split__item{display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:var(--r-sm); font-family:var(--font-display); font-weight:700;
  font-size:14px; color:var(--ink-900);}
a.msg-split__item:hover{color:var(--ink-900); background:var(--teal-tint);}
.msg-split__item img{flex-shrink:0;}

/* SEO-текст: видимый лид + блок, свёрнутый затуханием в прозрачность.
   --svc-fade-bg = фон секции, в который уходит текст (на section--tint
   = teal-mist). Контент в DOM, клиппинг только визуальный. */
.svc-text{max-width:820px; --svc-fade-bg:var(--teal-mist);}
.svc-text__eyebrow{display:block; margin-bottom:14px;}
.svc-text__h2{font-family:var(--font-headline); font-weight:700;
  font-size:clamp(30px,3.4vw,42px); line-height:1.12; letter-spacing:-.02em;
  color:var(--ink-900); margin:0 0 14px;}
.svc-text__lead{font-size:18px; line-height:1.65; color:var(--ink-700); margin:0;}
.svc-text__leadlist{margin:18px 0 0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:10px;}
.svc-text__leadlist li{position:relative; padding-left:22px; font-size:16px;
  line-height:1.6; color:var(--ink-700);}
.svc-text__leadlist li::before{content:""; position:absolute; left:4px; top:9px;
  width:7px; height:7px; border-radius:50%; background:var(--teal);}
.svc-text__more-h{font-family:var(--font-display); font-weight:800;
  font-size:20px; line-height:1.3; color:var(--ink-900); margin:0 0 12px;}
.svc-text__clip{position:relative; overflow:hidden; max-height:92px;
  margin-top:34px; transition:max-height var(--dur-slow) var(--ease-out);}
.svc-text.is-open .svc-text__clip{max-height:5000px;}
/* затухание перекрывает уже первый подзаголовок: на самом верху клипа
   вуаль ~38%, к низу — полностью в фон */
.svc-text__fade{position:absolute; left:0; right:0; top:0; bottom:0;
  pointer-events:none; transition:opacity var(--dur-base) var(--ease-out);
  background:linear-gradient(180deg,
    rgba(243,249,250,.38) 0%,
    rgba(243,249,250,.72) 45%,
    var(--svc-fade-bg) 100%);}
.svc-text.is-open .svc-text__fade{opacity:0;}
.svc-text__body h4{font-family:var(--font-display); font-weight:800;
  font-size:17px; color:var(--ink-900); margin:20px 0 6px;}
.svc-text__body p{font-size:16px; line-height:1.7; color:var(--ink-700); margin:0;}
.svc-text__toggle{display:inline-flex; align-items:center; gap:8px;
  margin-top:18px; padding:0; background:none; border:0; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:15px;
  color:var(--teal-deep);
  transition:color var(--dur-base) var(--ease-out);}
.svc-text__toggle:hover{color:var(--teal);}
.svc-text__toggle-ic{transition:transform var(--dur-base) var(--ease-out);}
/* анимированная стрелка вниз — вертикальный аналог каноничного nudge
   (как у ссылок-стрелок в меню главной): авто-цикл + сдвиг на ховере */
.svc-text:not(.is-open) .svc-text__toggle-ic{
  animation:nudgeY 2.4s var(--ease-mid) infinite;}
.svc-text:not(.is-open) .svc-text__toggle:hover .svc-text__toggle-ic{
  transform:translateY(5px); animation:none;}
.svc-text.is-open .svc-text__toggle-ic{transform:rotate(180deg); animation:none;}
@keyframes nudgeY{0%,100%{transform:translateY(0);} 50%{transform:translateY(5px);}}

/* Блок диагностики — слайдер-колода с фото */
/* без пина: секция естественной высоты, слайды листаются по проходу блока */
.diag-slider__pin{position:relative; overflow-anchor:none;}
.diag-slider{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.diag-slider__intro .section__head{margin-bottom:14px;}
.diag-slider__lede{font-size:16px; line-height:1.6; color:var(--ink-500);
  margin:0 0 28px; max-width:460px;}
.diag-slider__nav{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.diag-slider__counter{font-family:var(--font-display); font-weight:800;
  font-size:18px; color:var(--ink-900); letter-spacing:.04em;}
.diag-slider__counter .sep,.diag-slider__counter .total{color:var(--ink-400);}
.diag-slider__bar{flex:1; min-width:80px; display:flex; gap:5px;}
.diag-slider__seg{flex:1; height:4px; border-radius:var(--r-pill);
  background:var(--ink-100); overflow:hidden;}
.diag-slider__seg-fill{display:block; height:100%; width:0;
  border-radius:var(--r-pill); background:var(--orange);}
.diag-slider__btns{display:flex; gap:10px;}
/* стрелки — каноничный стиль слайдеров главной (= .doctors-arrows button) */
.diag-slider__btn{width:44px; height:44px; border-radius:50%;
  border:0; background:#fff; color:var(--ink-900); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(18,32,36,.08);
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) ease;}
.diag-slider__btn:hover:not(:disabled){background:var(--teal-deep); color:#fff;
  transform:scale(1.05); box-shadow:0 8px 18px rgba(22,153,170,.26);}
.diag-slider__btn:active:not(:disabled){transform:scale(.96);}
.diag-slider__btn:disabled{opacity:.4; cursor:not-allowed;}
.diag-slider__btn svg{width:14px; height:14px;}
.diag-slider__deck{position:relative; min-height:380px; overflow:hidden;
  border-radius:var(--r-xl);
  /* iOS Safari: тот же фикс клипа скруглённого overflow для
     transform'нутых absolute-карточек (см. .promo-track). */
  -webkit-mask-image:linear-gradient(#000 0 0);
  mask-image:linear-gradient(#000 0 0);}
.diag-card{position:absolute; inset:0; display:flex; overflow:hidden;
  background:#fff; border:1px solid var(--ink-100);
  border-radius:var(--r-xl); box-shadow:var(--shadow-md);
  cursor:pointer; transform-origin:top center;
  transition:transform .5s var(--ease-out), opacity .5s var(--ease-out);}
.diag-card__body{flex:0 0 40%; min-width:0; display:flex; flex-direction:column;
  justify-content:center; padding:32px 28px;}
.diag-card__title{font-family:var(--font-display); font-weight:800;
  font-size:21px; line-height:1.22; color:var(--ink-900); margin:0 0 12px;}
.diag-card__text{font-size:14.5px; line-height:1.62; color:var(--ink-700); margin:0;}
.diag-card__media{flex:1 1 auto; min-width:0;}
.diag-card__media img{width:100%; height:100%; object-fit:cover; display:block;}

/* Блок «повод обратиться» — табы + чипы-ссылки */
/* заголовки табов — на одном фоне (сегмент-контрол) */
.reason-tabs__nav{display:inline-flex; flex-wrap:wrap; gap:4px;
  margin-bottom:18px; padding:5px; background:var(--teal-mist);
  border-radius:var(--r-pill);}
/* На мобильном табы заворачиваются в столбик, и pill-форма контейнера выглядит
   неуместно вытянутой. Смягчаем — крупный, но не круглый радиус. */
@media (max-width:640px){
  .reason-tabs__nav{border-radius:var(--r-lg);}
}
.reason-tabs__tab{font-family:var(--font-display); font-weight:700; font-size:14px;
  padding:10px 20px; border-radius:var(--r-pill); border:0;
  background:transparent; color:var(--ink-700); cursor:pointer;
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);}
/* Hover как в верхнем меню (.menu > li > a:hover): teal-tint + teal-deep.
   На активном табе ховер не меняет состояние — .is-on:hover оставляет
   тот же градиент, что и .is-on. */
.reason-tabs__tab:hover{background:var(--teal-tint); color:var(--teal-deep);}
.reason-tabs__tab.is-on,
.reason-tabs__tab.is-on:hover{background:linear-gradient(135deg,#1cb0c2 0%,var(--teal) 60%,var(--teal-deep) 100%);
  color:#fff;}
/* контейнер с бейджами — в обводке */
.reason-tabs__panel{display:flex; flex-wrap:wrap; gap:10px;
  border:1px solid var(--ink-100); border-radius:var(--r-lg); padding:22px;}
.reason-tabs__panel[hidden]{display:none;}
.reason-chip{display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px; border-radius:var(--r-pill); background:var(--teal-mist);
  color:var(--ink-900); font-weight:600; font-size:14px;
  transition:background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);}
.reason-chip::before{content:""; width:6px; height:6px; border-radius:50%;
  background:var(--teal); flex-shrink:0;}
a.reason-chip:hover{background:var(--teal-tint); color:var(--ink-900);
  transform:translateY(-1px);}
/* Disabled-вариант — статьи/страницы услуги ещё нет. Рендерится как <span>,
   серый фон/точка, no-cursor. На directions-страницах определяется автоматом
   (href не начинается с "/"); на vrach-странице — по флагу it.pageReady. */
.reason-chip.is-disabled{background:var(--ink-100); color:var(--ink-400);
  cursor:not-allowed;}
.reason-chip.is-disabled::before{background:var(--ink-300);}

/* FAQ-аккордеон (нативный <details>) */
.faq__list{max-width:860px; display:flex; flex-direction:column; gap:12px;}
.faq__item{background:#fff; border:1px solid var(--ink-100);
  border-radius:var(--r-lg); padding:0 24px;
  transition:box-shadow var(--dur-base) var(--ease-out);}
.faq__item[open]{box-shadow:var(--shadow-sm);}
.faq__q{list-style:none; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:20px 0; cursor:pointer; font-family:var(--font-display);
  font-weight:800; font-size:17px; color:var(--ink-900);}
.faq__q::-webkit-details-marker{display:none;}
.faq__chev{flex-shrink:0; color:var(--ink-400);
  transition:transform var(--dur-base) var(--ease-out);}
.faq__item[open] .faq__chev{transform:rotate(180deg);}
.faq__a{padding:0 0 22px;}
.faq__a p{margin:0; font-size:16px; line-height:1.7; color:var(--ink-700);}

.adv{display:grid; grid-template-columns:1.4fr 1fr 1fr; grid-auto-rows:1fr; gap:16px;}
.adv__card{background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  padding:22px; display:flex; flex-direction:column; gap:12px;
  transition:box-shadow var(--dur-base) var(--ease-out);}
.adv__card:hover{box-shadow:var(--shadow-md);}
.adv__card--wide{grid-row:span 2; background:linear-gradient(160deg,var(--teal) 0%,var(--teal-deep) 100%); color:#fff;}
.adv__card--wide p{color:rgba(255,255,255,.88);}
.adv__tile{width:54px; height:54px; border-radius:var(--r-md);
  background:var(--teal-tint); display:flex; align-items:center; justify-content:center;}
.adv__card--wide .adv__tile{background:rgba(255,255,255,.16);}
/* Цены в табах (сегмент-контрол как у «повод обратиться») */
.price-tabs__nav{display:inline-flex; flex-wrap:wrap; gap:4px;
  margin-bottom:18px; padding:5px; background:var(--teal-mist);
  border-radius:var(--r-pill);}
.price-tabs__tab{font-family:var(--font-display); font-weight:700; font-size:14px;
  padding:10px 22px; border-radius:var(--r-pill); border:0;
  background:transparent; color:var(--ink-700); cursor:pointer;
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);}
/* Hover как в верхнем меню; активный таб ховером не реагирует. */
.price-tabs__tab:hover{background:var(--teal-tint); color:var(--teal-deep);}
.price-tabs__tab.is-on,
.price-tabs__tab.is-on:hover{background:linear-gradient(135deg,#1cb0c2 0%,var(--teal) 60%,var(--teal-deep) 100%);
  color:#fff;}
.price-tabs__panel[hidden]{display:none;}
/* ПК: прайс на всю ширину контейнера */
.prices{background:#fff; border-radius:var(--r-xl); box-shadow:var(--shadow-sm); padding:28px 30px;}
.prices__row{display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; padding:14px 0; border-bottom:1px solid var(--ink-100);}
.prices__row span{font-size:15px; color:var(--ink-900);}
.prices__row b{font-family:var(--font-display); font-weight:800; font-size:17px;
  color:var(--ink-900); white-space:nowrap;}
/* дисклеймер выровнен по началу текста строк цен (внутренний паддинг .prices) */
.prices__note{margin:16px 0 0; padding-left:30px; font-size:12.5px; color:var(--ink-500);}
/* ссылка «Полный прайс →» в шапке блока — стиль текст-ссылки .more-link
   (обычный регистр; капс в ДС только у надзаголовков/лейблов) */
.head-link{display:inline-flex; align-items:center; gap:6px; align-self:flex-end;
  font-family:var(--font-display); font-weight:700; font-size:14px;
  color:var(--teal-deep); text-decoration:none; white-space:nowrap;}
/* head-link на <button>: убираем UA-рамку/фон, чтобы выглядел как ссылка-стрелка */
button.head-link{border:0; background:none; padding:0; cursor:pointer; line-height:1;}
.head-link svg{width:14px; height:14px; transition:transform var(--dur-base) var(--ease-out);}
.head-link:hover{color:var(--orange-deep);}
.head-link:hover svg{transform:translateX(4px);}

/* «Новое в СЕМЬЯ» — слайдер по образцу «Наша команда» (.doctors-slider):
   статичный левый блок + full-bleed едущая лента + градиентный фрейм. */
.promo-slider{padding:96px 0; overflow:hidden;}
.promo-pin{position:relative; overflow-anchor:none;}
.promo-nav{display:none;}
.promo-bar{display:none;}
.promo-count{display:none;}
/* подсказка-жест «листайте вниз» — мягкая точка-касание скользит вниз
   (как в референсе assets/анимация.mov). CSS, без зависимостей. Только мобайл. */
.scroll-hint{display:none;}
@keyframes swipeDown{
  0%{transform:translateY(0) scale(.55); opacity:0;}
  14%{transform:translateY(0) scale(1); opacity:.6;}
  58%{transform:translateY(38px) scale(1); opacity:.6;}
  80%{transform:translateY(46px) scale(.8); opacity:0;}
  100%{opacity:0;}
}
@keyframes swipeTrail{
  0%,12%{transform:scaleY(0); opacity:0;}
  18%{opacity:.45;}
  58%{transform:scaleY(1); opacity:.45;}
  80%{transform:scaleY(1); opacity:0;}
  100%{transform:scaleY(0); opacity:0;}
}
@media(max-width:980px){
  /* подсказка свайпа: тот же дот+шлейф, повёрнут на -90° —
     анимация идёт по горизонтали и подсказывает свайп влево */
  .scroll-hint{display:block; position:absolute; left:50%; bottom:-52px;
    width:30px; height:70px; margin-left:-15px; z-index:6; pointer-events:none;
    transform:rotate(-90deg); transform-origin:center center;
    transition:opacity .35s var(--ease-out);}
  /* шлейф: растущая линия с затуханием к началу, синхронно с точкой */
  .scroll-hint__trail{position:absolute; top:13px; left:50%; margin-left:-13px;
    width:26px; height:46px; border-radius:var(--r-pill);
    background:linear-gradient(to bottom, rgba(15,124,139,0) 0%, rgba(15,124,139,.30) 100%);
    transform-origin:top center;
    animation:swipeTrail 1.9s var(--ease-out) infinite;}
  .scroll-hint__dot{position:absolute; top:0; left:50%; margin-left:-13px;
    width:26px; height:26px; border-radius:50%;
    background:rgba(15,124,139,.30);
    box-shadow:0 0 0 2px rgba(15,124,139,.32) inset;
    animation:swipeDown 1.9s var(--ease-out) infinite;}
  .scroll-hint.is-off{opacity:0;}
  /* hero — хинт внутри карточки слайдера, белый для контраста на цветных слайдах */
  .hero .scroll-hint{bottom:18px;}
  .hero .scroll-hint__trail{background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 100%);}
  .hero .scroll-hint__dot{background:rgba(255,255,255,.55);
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);}
}
.promo-stage{position:relative; isolation:isolate;
  --ps-card-w:380px; --ps-gap:16px; --ps-static-w:380px;
  --ps-bleed:max(32px, calc((100vw - 1216px) / 2));
  --ps-pad:56px;
  padding-bottom:var(--ps-pad);}
.promo-frame{position:absolute; top:0; bottom:0;
  left:calc(-1 * var(--ps-bleed) + 24px);
  right:calc(-1 * var(--ps-bleed) + 24px);
  background:linear-gradient(135deg, var(--teal-mist) 0%, var(--teal-tint) 55%, #bfe2e7 100%);
  border-radius:28px; z-index:0; pointer-events:none; overflow:hidden;}
.promo-frame::after{content:""; position:absolute; top:-12%; right:-8%;
  width:46%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(237,112,41,.22) 0%, rgba(237,112,41,.06) 50%, transparent 75%);
  filter:blur(28px); pointer-events:none;}
.promo-frame::before{content:""; position:absolute; bottom:-18%; left:-6%;
  width:40%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(22,153,170,.24) 0%, rgba(22,153,170,.06) 55%, transparent 80%);
  filter:blur(28px); pointer-events:none;}
.promo-static{position:absolute; left:0; top:72px; bottom:var(--ps-pad);
  width:var(--ps-static-w); z-index:10; padding:4px 0;
  display:flex; flex-direction:column;}
.promo-meta{display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-size:11px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--teal-deep); margin-bottom:8px;}
.promo-meta .dot{width:5px; height:5px; border-radius:999px; background:var(--orange);}
.promo-static h2{font-family:var(--font-headline); font-weight:900;
  font-size:clamp(30px, 3.6vw, 44px); line-height:1.04;
  color:var(--ink-900); margin:4px 0 14px; letter-spacing:-.02em; text-wrap:balance;}
.promo-static h2 .em{font-family:var(--font-em); color:var(--orange);
  font-style:italic; font-weight:600; letter-spacing:-.015em;}
.promo-lede{font-size:15px; line-height:1.5; color:var(--ink-700); margin:0 0 16px;}
.promo-arrows{position:relative; z-index:5; display:flex; gap:8px; margin:6px 0 0;}
.promo-arrows button{width:44px; height:44px; border-radius:50%;
  border:0; background:#fff; color:var(--ink-900); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(18,32,36,.08);
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) ease;}
.promo-arrows button:hover:not(:disabled){background:var(--teal-deep); color:#fff;
  transform:scale(1.05); box-shadow:0 8px 18px rgba(22,153,170,.26);}
.promo-arrows button:active:not(:disabled){transform:scale(.96);}
.promo-arrows button:disabled{opacity:.4; cursor:not-allowed;}
.promo-arrows button svg{width:14px; height:14px;}
.promo-track-wrap{position:relative; z-index:2; padding:var(--ps-pad) 0;
  margin-left:calc(-1 * var(--ps-bleed));
  margin-right:calc(-1 * var(--ps-bleed));}
.promo-track{display:flex; gap:var(--ps-gap);
  padding-left:var(--ps-bleed);
  transition:transform 700ms cubic-bezier(.22,.61,.36,1);
  will-change:transform; overflow:visible;}
.promo-track .promo-bento__cell{flex:0 0 var(--ps-card-w);
  transition:box-shadow var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out),
             opacity 700ms var(--ease-out);}
.promo-track .promo-bento__cell.under-static{opacity:0; pointer-events:none;}
.promo-bento__cell{position:relative; aspect-ratio:16 / 9; overflow:hidden;
  border-radius:var(--r-xl); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; justify-content:center;
  padding:26px 24px;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), opacity .2s var(--ease-out);}
.promo-bento__cell:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
.promo-bento__cell.is-swap{opacity:0;}
/* фото слева, чёткая правая граница + мягкая тень на стык
   (вместо прежней opacity-маски с размытием). Тень уходит вправо
   в цветную часть карточки — это и есть «зона прежнего размытия». */
.pb-photo{position:absolute; top:0; bottom:0; left:0; width:55%; z-index:0;
  box-shadow:8px 0 18px rgba(18,32,36,.18);}
.pb-photo img{width:100%; height:100%; object-fit:cover; object-position:center; display:block;}
/* текст пришпилен к правой 45%-цветной плашке: left:55% = граница фото,
   +14px — зазор от стыка, right:24px — внутренний правый паддинг карточки.
   Так текст всегда строго внутри плашки, не залезает на фото. */
.promo-bento__cell .pb-top{position:absolute; z-index:2;
  left:calc(55% + 14px); right:24px; top:26px; bottom:26px;
  display:flex; flex-direction:column; justify-content:center;
  width:auto; margin-left:0;}
/* стрелка в белом кружке: на главном слайде всегда, на остальных — по ховеру */
.pb-arrow{position:absolute; right:18px; bottom:18px; z-index:3;
  width:42px; height:42px; border-radius:50%; background:#fff; color:var(--ink-900);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(18,32,36,.18);
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);}
.pb-arrow svg{width:16px; height:16px;}
.promo-bento__cell .pb-arrow{opacity:0;}
.promo-bento__cell:hover .pb-arrow,
.promo-bento__cell:focus-within .pb-arrow{opacity:1;}
/* карточка — это <a>, глобальный a:not(.btn):hover красит текст в оранжевый.
   Текст промо-карточки на ховере остаётся белым (как у вариантов). */
a.promo-bento__cell:hover{color:#fff;}
/* ховер стрелки — каноничный стиль кнопок-стрелок ДС
   (= .doctors-arrows button / .diag-slider__btn) */
.promo-bento__cell:hover .pb-arrow{background:#fff; color:var(--teal-deep);
  transform:scale(1.06); box-shadow:0 8px 18px rgba(22,153,170,.30);}
.pb-kicker{display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  font-family:var(--font-display); font-size:10px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase;
  padding:5px 11px; border-radius:var(--r-pill); margin-bottom:12px;}
.pb-dot{width:5px; height:5px; border-radius:50%; background:currentColor;}
.pb-title{font-family:var(--font-display); font-size:18px; font-weight:800;
  line-height:1.18; letter-spacing:-.01em; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.pb-meta{margin-top:8px; font-size:12.5px; line-height:1.4; opacity:.85;}
/* «Подробнее →» — текст-кнопка со стрелкой вместо белого круга.
   Видна всегда, и на десктопе, и на мобайле; стрелка с каноничным
   nudge-анимом + hover translateX. .pb-arrow больше не используем. */
.promo-bento__cell .pb-arrow{display:none;}
.pb-cta{position:absolute; z-index:3; right:24px; bottom:18px;
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-display); font-weight:800; font-size:13px;
  letter-spacing:.02em; color:#fff; text-decoration:none;}
.pb-cta svg{width:14px; height:14px; flex-shrink:0;
  transition:transform var(--dur-base) var(--ease-out);
  animation:nudge 2.4s var(--ease-mid) infinite;}
.promo-bento__cell:hover .pb-cta svg{transform:translateX(6px);}
/* варианты как в card-promo: градиент-фон, в который уходит фото */
.promo-bento__cell[data-variant="news"]{
  background:linear-gradient(135deg,#1cb0c2 0%,var(--teal) 55%,var(--teal-deep) 100%); color:#fff;}
.promo-bento__cell[data-variant="news"] .pb-kicker{background:rgba(255,255,255,.20); color:#fff;}
.promo-bento__cell[data-variant="promo"]{
  background:linear-gradient(135deg,#f48a4a 0%,var(--orange) 55%,var(--orange-deep) 100%); color:#fff;}
.promo-bento__cell[data-variant="promo"] .pb-kicker{background:rgba(255,255,255,.20); color:#fff;}
/* все карточки одинаковые 4:3 */
@media(max-width:1100px){
  .promo-stage{--ps-card-w:320px; --ps-static-w:320px;}
}
@media(max-width:980px){
  /* листание по скроллу → стрелки на мобильном убираем, чтобы не путать */
  .diag-slider__btns{display:none;}
  .promo-slider{padding:56px 0; overflow:visible;}
  .promo-frame{display:none;}
  /* sticky-pin: блок стоит, скролл листает карточки (как «Точность диагностики») */
  .promo-stage{display:flex; flex-direction:column; padding-bottom:0;}
  .promo-static{position:static; width:auto; padding:0 0 16px;}
  .promo-arrows{display:none;}
  .promo-nav{display:flex; align-items:center; gap:14px; margin-top:14px;}
  .promo-count{display:block; font-family:var(--font-display); font-weight:800;
    font-size:17px; letter-spacing:.04em; color:var(--ink-900); white-space:nowrap;}
  .promo-count .sep,.promo-count .total{color:var(--ink-400);}
  .promo-bar{display:flex; flex:1; min-width:0; gap:5px;}
  .promo-seg{flex:1; height:4px; border-radius:var(--r-pill);
    background:rgba(18,32,36,.12); overflow:hidden;}
  .promo-seg-fill{display:block; height:100%; width:0; border-radius:var(--r-pill);
    background:var(--teal); transition:width .12s linear;}
  /* Нативный scroll-snap карусель: один слайд = 100% ширины,
     контейнер скроллится сам. Без transform/absolute — на iOS WebKit
     соседний слайд физически нечему «протечь», клип нативный. */
  .promo-track-wrap{width:100vw; margin-left:50%; transform:translateX(-50%);
    padding:0 14px;}
  .promo-track{padding:0; display:flex; gap:0;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; transition:none; will-change:auto;}
  .promo-track::-webkit-scrollbar{display:none; width:0; height:0;}
  .promo-track .promo-bento__cell{position:relative; inset:auto; flex:0 0 100%;
    width:100%; scroll-snap-align:center; scroll-snap-stop:always;
    transition:none;}
}
.cta-band{background:linear-gradient(135deg,var(--teal) 0%,var(--teal-deep) 100%);
  border-radius:var(--r-xl); padding:40px; color:#fff; display:flex;
  align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;}
.cta-band p{margin-top:8px; color:rgba(255,255,255,.85); font-size:15px;}
.cta-band__actions{display:flex; gap:12px; flex-wrap:wrap;}
.cta-band .btn--secondary{background:#fff; color:var(--teal-deep); box-shadow:none;}
@media(max-width:860px){
  .svc-hero{padding:28px 0 44px;}
  .svc-hero__inner{max-width:none; padding-top:34px;}
  .svc-hero .hero__title{padding:0; margin:0; text-align:left;}
  .svc-hero__sub{text-align:left;}
  .svc-hero__perk{font-size:13px; padding:9px 15px;}
  .svc-hero__ctas{width:100%;}
  .svc-hero__ctas .btn{flex:1 1 auto; justify-content:center;}
  .adv{grid-template-columns:1fr;}
  .adv__card--wide{grid-row:auto;}
  .diag-slider{grid-template-columns:1fr; gap:30px;}
  /* Мобайл: нативный scroll-snap (как у промо) — без transform/absolute,
     iOS WebKit клипает сам, соседний слайд не «протекает». */
  .diag-slider__deck{min-height:420px; display:flex; gap:0;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; border-radius:0;
    -webkit-mask-image:none; mask-image:none;}
  .diag-slider__deck::-webkit-scrollbar{display:none; width:0; height:0;}
  /* без тени на мобайле — overflow-y:hidden её всё равно бы кропал */
  .diag-card{flex-direction:column; position:relative; inset:auto;
    flex:0 0 100%; width:100%;
    scroll-snap-align:center; scroll-snap-stop:always; transition:none;
    box-shadow:none;}
  .diag-card__media{order:-1; flex:0 0 56%;}
  .diag-card__body{flex:1 1 auto; padding:22px 22px;}
  .cta-band{flex-direction:column; align-items:flex-start;}
}

/* ===== Мобильная шапка ≤860px — единый источник (index тоже на ds.css) ===== */
.nav__mobtop,.nav__hourspop,.nav__burger,.nav__drawer{display:none;}
@media(max-width:860px){
  .site-header{top:8px; padding:0 10px; z-index:60;
    display:flex; flex-direction:column; gap:7px;}
  /* плашка (лого+бургер) сверху, адрес/часы — ниже: меню открывается корректнее */
  .nav{order:1;}
  .nav__mobtop{order:2;}
  .nav__hourspop{order:3;}
  /* строка 1: адрес + часы-тоггл */
  .nav__mobtop{position:relative; z-index:60; display:flex; align-items:center;
    justify-content:space-between; gap:10px;
    min-width:0; max-width:none; width:auto; align-self:stretch;
    margin:0; padding:8px 16px; background:#fff;
    border-radius:999px; box-shadow:0 6px 26px rgba(18,32,36,.10);
    font-family:var(--font-display); font-size:12px; box-sizing:border-box;}
  .nav__mobaddr{display:flex; align-items:center; gap:6px; min-width:0; flex:1;
    color:var(--ink-400); font-weight:600;}
  .nav__mobaddr-t{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .nav__mobaddr .city{color:var(--ink-400); font-weight:600;}
  .nav__mobaddr strong{color:var(--ink-900); font-weight:800;}
  .nav__mobaddr svg{color:var(--teal); flex-shrink:0;}
  .nav__mobhours{flex-shrink:0; display:inline-flex; align-items:center; gap:6px; border:0; cursor:pointer;
    background:var(--teal-tint); color:var(--teal-deep); font-family:var(--font-display);
    font-weight:800; font-size:11.5px; padding:7px 12px; border-radius:999px; white-space:nowrap;}
  .nav__mobhours .chev{transition:transform var(--dur-base) var(--ease-out);}
  .nav__mobhours[aria-expanded="true"] .chev{transform:rotate(180deg);}
  /* карточка часов — оверлей поверх контента, не сдвигает элементы */
  .nav__hourspop{display:block; position:absolute; left:10px; right:10px; top:calc(100% + 4px);
    max-width:1260px; margin:0 auto; overflow:hidden;
    background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-md); z-index:55;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);}
  .nav__hourspop.is-open{opacity:1; visibility:visible; transform:none;}
  .nav__hourspop .hpop__row{padding:14px 18px;}
  .nav__hourspop .hpop__row+.hpop__row{border-top:1px solid var(--ink-100);}
  .nav__hourspop .hpop__t{font-family:var(--font-display); font-weight:800; font-size:13px;
    color:var(--ink-900); margin-bottom:8px;}
  .nav__hourspop .hpop__l{display:grid; grid-template-columns:auto 1fr; gap:4px 14px;
    font-size:13px; color:var(--ink-500);}
  .nav__hourspop .hpop__l b{font-family:var(--font-display); font-weight:700; color:var(--ink-900); text-align:right;}
  /* строка 2: плашка — остаётся над дровером (лого на месте при открытом меню) */
  .nav{position:relative; z-index:60; display:flex !important; align-items:center; gap:10px; padding:8px 10px 8px 16px;
    align-self:stretch; width:auto; max-width:none; margin:0; box-sizing:border-box;
    transition:padding var(--dur-base) var(--ease-out);}
  .nav .menu, .nav .branch-wrap{display:none !important;}
  .nav .logo{margin-right:auto;}
  .nav .logo__mark{height:26px; transition:height var(--dur-base) var(--ease-out);}
  .nav .phone-ic{display:inline-flex; width:40px; height:40px; align-items:center;
    justify-content:center; background:var(--teal-tint); color:var(--teal-deep); border-radius:999px;}
  .nav .cta{padding:11px 16px; font-size:13px;}
  .nav__burger{display:inline-flex; flex-direction:column; justify-content:center; gap:4px;
    width:40px; height:40px; padding:0 9px; background:transparent; border:0; cursor:pointer;
    border-radius:999px; position:relative; z-index:80;}
  .nav__burger span{display:block; height:2.5px; width:100%; background:var(--ink-900);
    border-radius:2px; transition:transform .2s var(--ease-out), opacity .2s;}
  .nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
  /* скролл вниз — строка адреса/часы скрыты, плашка ниже, лого меньше */
  .site-header.is-shrunk .nav__mobtop,
  .site-header.is-shrunk .nav__hourspop{display:none;}
  .site-header.is-shrunk .nav{padding:5px 10px 5px 16px;}
  .site-header.is-shrunk .nav .logo__mark{height:21px;}
  /* меню на всю ширину; плашка лого+крестик остаётся на месте */
  .nav__drawer{display:block; position:fixed; inset:0; width:100%; background:#fff;
    z-index:50; opacity:0; visibility:hidden; overscroll-behavior:contain;
    transition:opacity .24s var(--ease-out), visibility .24s;}
  .nav__drawer.is-open{opacity:1; visibility:visible;}
  .nav__drawer-scroll{height:100%; overflow-y:auto;
    padding:124px 20px calc(24px + env(safe-area-inset-bottom));}
  .nav__drawer-label{font-family:var(--font-display); font-weight:800; font-size:11px;
    letter-spacing:.14em; text-transform:uppercase; color:var(--teal); margin:2px 4px 10px;}
  .acc{border-bottom:1px solid var(--ink-100);}
  .acc__h{width:100%; display:flex; align-items:center; justify-content:space-between;
    background:transparent; border:0; cursor:pointer; font-family:var(--font-display);
    font-weight:800; font-size:17px; color:var(--ink-900); padding:15px 4px;}
  .acc__h-t{display:inline-flex; align-items:center; gap:8px;}
  .acc-teddy{width:19px; height:19px; display:inline-block; flex-shrink:0;
    background:var(--teal);
    -webkit-mask:url(/assets/mdi--teddy-bear.svg) center/contain no-repeat;
    mask:url(/assets/mdi--teddy-bear.svg) center/contain no-repeat;}
  .acc__h .chev{color:var(--ink-400); transition:transform var(--dur-base) var(--ease-out);}
  .acc__h[aria-expanded="true"] .chev{transform:rotate(180deg); color:var(--teal);}
  .acc__p{max-height:0; overflow:hidden; transition:max-height var(--dur-base) var(--ease-out);}
  .acc.is-open .acc__p{max-height:420px;}
  .acc__p a{display:block; font-family:var(--font-body); font-size:15px; color:var(--ink-700);
    padding:10px 4px 10px 14px; text-decoration:none;}
  .acc__p a:hover{color:var(--teal);}
  .acc__p a:last-child{padding-bottom:16px;}
  .nav__drawer-link{display:block; font-family:var(--font-display); font-weight:800;
    font-size:17px; color:var(--ink-900); padding:15px 4px; text-decoration:none;
    border-bottom:1px solid var(--ink-100);}
  .nav__drawer-link:hover{color:var(--teal);}
  /* промо-карусель: вся плашка-ссылка, сердце-пульс, «?» справа, fade у «?» */
  .nav__drawer-promo{position:relative; display:flex; align-items:center; gap:12px;
    margin-top:28px; padding:13px 16px 13px 18px; border-radius:999px;
    background:var(--orange-tint); overflow:hidden;}
  .ndp-link{position:absolute; inset:0; z-index:1; border-radius:inherit;}
  .nav__drawer-promo__ic{position:relative; z-index:2; pointer-events:none;
    flex-shrink:0; width:22px; height:22px; color:var(--orange);}
  .ndp-heart,.ndp-pct{position:absolute; inset:0; margin:auto;
    transform-origin:50% 55%;
    animation:heartbeat 1.6s cubic-bezier(.65,0,.35,1) infinite,
              promoSwap 6s ease-in-out infinite;}
  .ndp-heart{display:block; width:20px; height:auto;}
  .ndp-pct{display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:800; font-size:17px;
    color:var(--orange); animation-delay:0s,-3s;}
  .ndp-vp{position:relative; z-index:2; pointer-events:none; flex:1; min-width:0;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);}
  .ndp-track{display:flex; transition:transform .5s var(--ease-out);}
  .ndp-slide{flex:0 0 100%; min-width:0; white-space:nowrap;
    font-family:var(--font-display); font-weight:800; font-size:12.5px;
    color:var(--orange-deep);}
  .ndp-q{position:relative; z-index:3; flex-shrink:0; width:26px; height:26px;
    border:0; border-radius:50%; cursor:pointer; background:#fff;
    color:var(--orange-deep); font-family:var(--font-display); font-weight:800;
    font-size:13px; line-height:1; display:inline-flex; align-items:center;
    justify-content:center; box-shadow:0 1px 4px rgba(18,32,36,.14);
    transition:transform var(--dur-fast) var(--ease-out);}
  .ndp-q:hover{transform:scale(1.1);}
  body.nav-locked{overflow:hidden;}
  /* меню открыто: шапка fixed (sticky отлипает при overflow:hidden, если
     страница прокручена) — лого/адрес всегда сверху открытого меню */
  body.nav-locked .site-header{position:fixed; top:8px; left:0; right:0;}
  /* при открытом меню — обе строки шапки (адрес/часы + плашка) в полном виде,
     даже если страница была прокручена (снимаем shrink) */
  body.nav-locked .site-header.is-shrunk .nav__mobtop{display:flex;}
  body.nav-locked .site-header.is-shrunk .nav{padding:8px 10px 8px 16px;}
  body.nav-locked .site-header.is-shrunk .nav .logo__mark{height:26px;}
}
@keyframes promoSwap{
  0%{opacity:1;} 43%{opacity:1;} 50%{opacity:0;}
  93%{opacity:0;} 100%{opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .ndp-heart,.ndp-pct{animation:none;}
  .ndp-pct{opacity:0;}
  .ndp-track{transition:none;}
}

/* ===== Планшетная шапка 861–1100px: адрес у лого, кнопки у правого края ===== */
@media (min-width:861px) and (max-width:1100px){
  .nav{gap:14px;}
  .nav .menu{display:none;}
  .nav .actions{display:flex; align-items:center; gap:12px;}
  .nav .branch-wrap{margin-right:auto;}
  .nav .branch__label .place{display:inline;}
}

/* ===== Hero ≤720: квадратное фото вплотную к верху, слайд в 1 экран ===== */
@media (max-width:720px){
  /* мобайл: нативный scroll-snap слайдер (свайп бесплатно, без transform) */
  .hero__viewport{overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; touch-action:pan-x pan-y;}
  .hero__viewport::-webkit-scrollbar{display:none;}
  .hero__track{transform:none !important; transition:none !important;}
  .hero__slide{display:flex; flex-direction:column; position:relative;
    padding:0 0 22px; height:auto; min-height:auto;     /* отменяем десктопный фикс height:540 */
    flex:0 0 100%; width:100%; min-width:0;
    grid-template-columns:none; grid-template-rows:none; /* не нужны во flex-раскладке */
    scroll-snap-align:start; scroll-snap-stop:always;}
  .hero-strip{display:none;}
  .hero__copy{display:contents;}
  /* медиа-блок: квадратное фото, вплотную к верхнему краю слайда */
  .hero__art{order:1; width:100%; margin:0; padding:0;
    display:block; height:auto; min-height:0; position:relative;}
  /* низ фото мягко растворяется (opacity-маска) в фон слайда — без жёсткой полосы */
  .hero__photo{order:1; width:100%; height:auto; aspect-ratio:1/1;
    border-radius:0; margin:0; animation:none !important; box-shadow:none;
    /* нижний край мягко растворяется — узкая фейд-зона */
    -webkit-mask-image:linear-gradient(to bottom,#000 78%, transparent 100%);
    mask-image:linear-gradient(to bottom,#000 78%, transparent 100%);}
  .hero__photo img{width:100%; height:100%; object-fit:cover;}
  .hero__photo--burst{overflow:hidden; --burst-r:0; --burst-up:0;}
  .hero__photo--burst::before{display:none;}
  .hero__photo--burst img{position:static; width:100%; height:100%;
    object-fit:cover; clip-path:none; padding:0; filter:none;}
  /* бейдж и точки — оверлеем на фото, одна линия (лево/право верх) */
  .hero__kicker{order:0; position:absolute; top:16px; left:16px; z-index:4;
    margin:0; align-self:auto;}
  .hero__arrow{display:none;}
  .hero__nav{top:16px; right:16px; bottom:auto; left:auto; transform:none;
    padding:8px 12px; gap:0;}
  /* заголовок начинается в зоне фейда — наезжает на низ фото */
  .hero__title{order:2; padding:0 24px; position:relative; z-index:3;
    margin-top:-46px;}
  .hero__sub{order:3; padding:0 24px; margin-top:12px;}
  .hero__bullets{order:3; padding:0 24px;}
  .hero__ctas{order:4; padding:0 24px; margin-top:16px;}
}

/* Гасим горизонтальный сдвиг документа БЕЗ слома position:sticky шапки.
   overflow:hidden на html/body делает их scroll-контейнером и ломает sticky —
   используем overflow-x:clip (не создаёт scroll-контейнер, sticky работает).
   touch-action слайдера — в ≤720 блоке (pan-x pan-y), здесь НЕ ставить. */
html,body{overflow-x:clip;}

/* =========================================================================
   Страница врача (.vrach-*) — namespaced, не пересекается с .hero__/.svc-hero/.card.
   Используем глобальные атомы: .pill, .slot, .day, .eyebrow, .section__*, .btn--*.
   Эталон страницы: src/vrach-orlov.njk
   ========================================================================= */

/* ----- Hero врача: 2-колоночная сетка, фото справа.
   Отступы хлеба синхронизированы с .svc-hero (страница услуги): 48px сверху
   у секции, 48px между крошкой и контентом, без margin-bottom на крошке. ----- */
.vrach-hero{background:linear-gradient(180deg,#fff 0%, var(--teal-mist) 100%);
  padding:48px 0 60px; overflow:hidden;}
.vrach-hero__grid{display:grid; grid-template-columns:1.15fr .85fr;
  gap:48px; align-items:start; padding-top:48px;}
.vrach-hero__info{display:flex; flex-direction:column; gap:18px; min-width:0;}
.vrach-hero__info .eyebrow{margin:0;}
.vrach-hero__title{font-family:var(--font-display); font-weight:800;
  font-size:clamp(32px, 4.2vw, 52px); line-height:1.08;
  letter-spacing:-0.02em; margin:0; color:var(--ink-900);}
.vrach-hero__regalia{list-style:none; margin:14px 0 0; padding:0;
  display:flex; flex-direction:column; gap:10px;}
.vrach-hero__regalia-item{position:relative; padding-left:24px;
  font-size:16px; line-height:1.5; color:var(--ink-700);}
.vrach-hero__regalia-item::before{content:""; position:absolute; left:0; top:8px;
  width:14px; height:9px; border-left:2.4px solid var(--orange);
  border-bottom:2.4px solid var(--orange); transform:rotate(-45deg);
  border-bottom-left-radius:2px;}
.vrach-hero__pills{list-style:none; margin:4px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;}
.vrach-hero__pills .pill svg{margin-right:0;}
.vrach-hero__prices{display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin:16px 0 0; padding:18px; border-radius:18px;
  background:rgba(255,255,255,.7); border:1px solid var(--ink-100);}
.vrach-hero__price dt{font-size:13px; color:var(--ink-500);
  font-weight:600; margin:0 0 4px;}
.vrach-hero__price dd{margin:0; font-size:18px; color:var(--ink-700);}
.vrach-hero__price dd b{font-family:var(--font-display); font-weight:800;
  font-size:24px; color:var(--ink-900);}
/* Строка со старой ценой + info-иконкой — flex-обёртка, чтобы иконка стояла
   СПРАВА от зачёркнутого числа, а вся строка осталась НАД основной ценой. */
.vrach-hero__price-old-line{display:flex; align-items:center; gap:6px;
  margin:0 0 4px;}
/* Старая цена — теперь inline внутри flex-row, без своего margin. */
.vrach-hero__price-old{display:inline; font-family:var(--font-display);
  font-weight:400; font-size:16px; color:var(--ink-500); line-height:1;
  margin:0; text-decoration:line-through;
  text-decoration-thickness:1px;}
/* Info-иконка рядом с зачёркнутой ценой. На hover/focus — тултип «Акция до DD».
   Значение даты — из promoDates.weekEndLabel (авто-конец текущей недели).
   Паттерн tooltip копирует .svc-hero__addr-link (через ::after + data-tip).
   На мобильном tooltip также появляется по tap (через tabindex=0 + :focus). */
.vrach-hero__price-tip{position:relative; display:inline-flex;
  align-items:center; justify-content:center;
  width:18px; height:18px; margin:0 4px; padding:0;
  background:transparent; border:0; cursor:help;
  color:var(--ink-400); vertical-align:middle;
  transition:color var(--dur-base) var(--ease-out);}
.vrach-hero__price-tip svg{width:14px; height:14px; flex-shrink:0;}
.vrach-hero__price-tip:hover,
.vrach-hero__price-tip:focus{color:var(--teal-deep); outline:none;}
.vrach-hero__price-tip::after{content:attr(data-tip);
  position:absolute; left:calc(100% + 6px); top:50%;
  transform:translateY(-50%) translateX(-4px);
  background:var(--ink-900); color:#fff;
  font-family:var(--font-display); font-weight:600; font-size:12px;
  letter-spacing:.01em; white-space:nowrap;
  padding:6px 10px; border-radius:var(--r-sm);
  box-shadow:0 4px 12px rgba(18,32,36,.18);
  opacity:0; pointer-events:none; z-index:5;
  transition:opacity var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out);}
.vrach-hero__price-tip:hover::after,
.vrach-hero__price-tip:focus::after{opacity:1; transform:translateY(-50%) translateX(0);}
/* Когда первичный и повторный совпадают — один блок на всю ширину. */
.vrach-hero__prices--combined{grid-template-columns:1fr;}
/* Подзаголовок специализации в секции цен (врач с двумя специализациями). */
.vrach-prices__spec-h{margin:22px 0 10px; font-family:var(--font-display);
  font-weight:800; font-size:18px; letter-spacing:-.01em; color:var(--ink-900);}
.vrach-prices__spec-h:first-of-type{margin-top:0;}

/* Скелет загрузки расписания (показывается в SSR, пока live-schedule.js не подтянет
   реальные слоты). Так устаревшие даты из снапшота не мелькают. */
.book-loading{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; min-height:120px; padding:24px 16px; text-align:center;}
.book-loading__spinner{width:26px; height:26px; border-radius:50%;
  border:3px solid var(--ink-100); border-top-color:var(--teal);
  animation:book-spin .8s linear infinite;}
@keyframes book-spin{to{transform:rotate(360deg);}}
.book-loading__text{font-size:14px; color:var(--ink-500);}
.book-loading__call{font-family:var(--font-display); font-weight:700; font-size:13px;
  color:var(--teal-deep); text-decoration:none;}
.book-loading__call:hover{text-decoration:underline;}
.vrach-hero__price-note{margin:8px 0 0; font-size:13px; line-height:1.4;
  color:var(--ink-500, #5a6b70);}
/* Комментарий внутри карточки цены (полная ширина, отделён линией сверху). */
.vrach-hero__price-hint{grid-column:1/-1; margin:2px 0 0; padding-top:12px;
  border-top:1px solid var(--ink-100); font-size:13px; line-height:1.4;
  color:var(--ink-500, #5a6b70);}
/* Когда комментарий — единственное содержимое карточки (нет фикс. цены приёма). */
.vrach-hero__price-hint--solo{margin:0; padding-top:0; border-top:none;
  font-size:14px; color:var(--ink-600, #46565b);}
.vrach-hero__clinic{display:flex; align-items:center; flex-wrap:wrap;
  gap:8px 12px; margin-top:16px; padding-top:6px;}
.vrach-hero__clinic-label{font-size:14px; color:var(--ink-500); font-weight:600;}
.vrach-hero__clinic-name{font-family:var(--font-display); font-weight:800;
  font-size:16px; color:var(--ink-900);}
.vrach-hero__addr{display:flex; flex-wrap:wrap; align-items:center;
  gap:6px 14px; width:100%;}
.vrach-hero__ctas{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:6px;}

/* Уведомление в секции расписания (между .vrach-book и .vrach-schedule__ctas):
   компактная orange-tint пилюля. Слева — пульсирующая orange-точка с расходящимся
   кольцом (паттерн «radar ping»). */
.vrach-schedule__notice{display:inline-flex; align-items:center; gap:14px;
  margin:18px 0 0; padding:12px 18px; border-radius:14px;
  background:var(--orange-tint); max-width:1100px;
  font-size:14.5px; font-weight:700; line-height:1.4; color:var(--orange-deep);}
.vrach-schedule__notice-ic{flex-shrink:0; position:relative;
  width:10px; height:10px; border-radius:50%;
  background:var(--orange); margin-left:4px;}
.vrach-schedule__notice-ic::after{content:""; position:absolute; inset:-3px;
  border-radius:50%; background:var(--orange);
  animation:vrachNoticePing 1.6s var(--ease-mid) infinite;
  pointer-events:none;}
@keyframes vrachNoticePing{
  0%{transform:scale(.6); opacity:.55;}
  100%{transform:scale(2); opacity:0;}
}
.vrach-hero__notice-text{min-width:0;}

.vrach-hero__photo{position:relative; margin:0; aspect-ratio:3/4;
  border-radius:24px; overflow:hidden;
  box-shadow:0 16px 40px rgba(18,32,36,.16);
  background:linear-gradient(180deg, var(--teal-tint) 0%, var(--teal-mist) 100%);}
.vrach-hero__photo img{width:100%; height:100%; object-fit:cover;
  object-position:center top; display:block;}
.vrach-hero__photo .doctor__play{position:absolute; top:14px; right:14px;
  z-index:2; width:54px; height:54px; border-radius:18px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--orange); color:#fff; box-shadow:0 8px 18px rgba(237,112,41,.34);
  transition:transform .22s var(--ease-out), box-shadow .22s var(--ease-out);}
.vrach-hero__photo .doctor__play:hover{transform:translateY(-2px) scale(1.04);
  box-shadow:0 14px 28px rgba(237,112,41,.42);}
.vrach-hero__photo .doctor__play svg{width:20px; height:20px; margin-left:3px;}

/* ----- Расписание на ширину контейнера ----- */
.vrach-schedule .section__head{margin-bottom:18px;}
.vrach-book{background:#fff; border:1.5px solid var(--teal); border-radius:22px;
  padding:22px 22px 18px; max-width:1100px; margin:0;
  box-shadow:0 2px 8px rgba(18,32,36,.06);}
.vrach-book__days{margin-bottom:14px;}
.vrach-book__days .day-tabs{padding:2px 0;}
.vrach-book__slots{display:grid; grid-template-columns:repeat(10,1fr); gap:8px;
  margin-bottom:12px;}
.vrach-book__slots .slot{font-size:14px; padding:10px 0;}
.vrach-book__empty{grid-column:1/-1; margin:0; padding:14px 0;
  text-align:center; color:var(--ink-500); font-size:14px;}
.vrach-book__legend{margin-top:6px;}
.vrach-schedule__ctas{display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-start;
  max-width:1100px; margin:18px 0 0;}

/* ----- Авторский контент (компонент ДС): бенто из 3 карточек с разными aspect-ratio
   по формату: Shorts (9:16 вертикаль — нативно YouTube Shorts) + YouTube (16:9
   ландшафт) + Cover-статья (16:9). Размещение через grid-template-areas.
   На ≤640px → scroll-snap карусель + lite-список ниже.
   Префикс .materials-* / .materials__* — общий неймспейс ДС (используется на
   странице врача и в подвале статьи). ----- */

/* Swipe-hint скрыт на десктопе. Покажем ниже на любом sub-desktop размере (≤970px).
   Подсказка тесно прижата к бенту сверху, до списка снизу — без своих margin'ов;
   расстояние контролируется row-gap родительского .materials-grid. */
.materials-bento-hint{display:none;}
@media (max-width:970px){
  .materials-bento-hint{position:relative; display:block;
    width:38px; height:80px; margin:0 auto;
    transform:rotate(90deg); pointer-events:none;
    transition:opacity .35s var(--ease-out);}
  .materials-bento-hint.is-off{opacity:0;}
  .materials-bento-hint .scroll-hint__dot{
    background:rgba(15,124,139,.7);
    box-shadow:inset 0 0 0 2px rgba(15,124,139,.6);}
  .materials-bento-hint .scroll-hint__trail{
    background:linear-gradient(to bottom, rgba(15,124,139,0) 0%, rgba(15,124,139,.55) 100%);}
}

.materials-sec .section__head{margin-bottom:24px;}

.materials-grid{display:grid; grid-template-columns:auto 1fr;
  gap:32px; align-items:start;}

/* Бенто: shorts слева на 2 ряда (вертикаль), youtube сверху, cover снизу.
   Колонки и строки ЗАФИКСИРОВАНЫ в пикселях — иначе при auto-колонке во
   внешнем grid (.materials-grid → auto 1fr) внутренний `1fr` бенто
   схлопывается до 0 (max-content youtube/cover = 0 без явной ширины), и
   правые карточки получают rect 0×0 — баг, наблюдавшийся на vrach-orlov.
   Цифры подобраны так, что shorts (260×462, 9:16) по высоте совпадает с
   двумя youtube/cover (395×222, 16:9) + gap 18px = 462. Бенто = 673×462. */
.materials-bento{display:grid;
  grid-template-columns:260px 395px;
  grid-template-rows:222px 222px;
  grid-template-areas:
    "shorts youtube"
    "shorts cover";
  gap:18px;}

.materials-card{position:relative; display:block; overflow:hidden;
  border-radius:20px; background:var(--ink-100);
  text-decoration:none; color:#fff;
  box-shadow:0 2px 8px rgba(18,32,36,.06);
  transition:transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);}
.materials-card:hover{transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(18,32,36,.14);}

/* Формат → grid-area. Ширина и высота навязаны grid-template (см. выше);
   aspect-ratio оставляем как fallback, если бенто переедет в другой layout. */
.materials-card--shorts{grid-area:shorts; aspect-ratio:9/16;}
.materials-card--youtube{grid-area:youtube; aspect-ratio:16/9;}
.materials-card--cover{grid-area:cover; aspect-ratio:16/9;}

/* Cover — может быть <img> (статьи/кейсы) или <video> (для видео: первый
   фрейм через #t=0.5). pointer-events:none, чтобы клик уходил на родителя <a>. */
.materials-card__cover{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; pointer-events:none;
  transition:transform .5s var(--ease-out);
  background:var(--ink-100);}
.materials-card:hover .materials-card__cover{transform:scale(1.04);}

/* Тело — оверлей с градиентом снизу. Для Shorts — больше voздуха снизу (под текст). */
.materials-card__body{position:absolute; left:0; right:0; bottom:0;
  padding:16px 18px;
  background:linear-gradient(180deg, rgba(18,32,36,0) 0%,
    rgba(18,32,36,.55) 55%, rgba(18,32,36,.88) 100%);}
.materials-card--shorts .materials-card__body{padding:18px 18px 20px;}
.materials-card__title{font-family:var(--font-display); font-weight:800;
  font-size:16px; line-height:1.25; color:#fff; margin-top:6px;}
.materials-card--shorts .materials-card__title{font-size:17px; line-height:1.3;}

/* Play-кнопка: единый orange-стиль (как .doctor__play). По центру для всех
   видео-карточек; Shorts — крупнее. */
.materials-card__play{position:absolute; top:50%; left:50%; z-index:2;
  width:54px; height:54px; border-radius:18px;
  transform:translate(-50%, -50%);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--orange); color:#fff;
  box-shadow:0 8px 18px rgba(237,112,41,.34);
  transition:transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);}
.materials-card--shorts .materials-card__play{width:64px; height:64px;}
.materials-card:hover .materials-card__play{
  transform:translate(-50%, -50%) scale(1.08);
  box-shadow:0 14px 28px rgba(237,112,41,.46);}
.materials-card__play svg{width:22px; height:22px; margin-left:2px;}
.materials-card--shorts .materials-card__play svg{width:26px; height:26px; margin-left:3px;}

/* Мета: бейдж-тип + TOPIC · DURATION · DATE.
   Тип — компактная пилюля (как .age-badge / .pill в дизайн-системе),
   цвет фона и текста по типу. Остальная мета — обычным мелким текстом. */
.materials__meta{display:flex; flex-wrap:wrap; align-items:center;
  gap:6px 8px; font-family:var(--font-display); font-weight:600;
  font-size:12px; color:var(--ink-500); line-height:1.2;}
.materials__sep{opacity:.55;}

/* Бейдж типа */
.materials__type{display:inline-flex; align-items:center;
  padding:4px 10px; border-radius:var(--r-pill);
  font-family:var(--font-display); font-weight:800;
  font-size:11px; letter-spacing:.04em; white-space:nowrap;}
.materials__type--article{background:var(--teal-tint); color:var(--teal-deep);}
.materials__type--video{background:var(--orange-tint); color:var(--orange-deep);}
.materials__type--case{background:var(--ink-50); color:var(--ink-900);
  box-shadow:inset 0 0 0 1px var(--ink-100);}
/* Solid-варианты для оси «формат публикации» (акция/новость) — поверх tint-варианты
   формата контента (статья/видео/кейс). Призывная заливка вместо приглушённого тинта. */
.materials__type--news{background:var(--teal); color:#fff;}
.materials__type--promo{background:var(--orange); color:#fff;}
.materials__type--new{background:var(--orange-tint); color:var(--orange-deep);}

/* Внутри бенто (на тёмном overlay) — мета белым шрифтом, пилюля типа на белой
   подложке. Селектор через .materials-bento — матчит любую карточку внутри бенто
   независимо от вариантов классов её body/cover.
   text-shadow добавлен на мету и заголовок: страхует читаемость на любом
   фрейме/обложке (светлый фон у YouTube → текст не теряется). На пилюли не нужен. */
.materials-bento .materials__meta{color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.45);}
.materials-bento .materials-card__title{
  text-shadow:0 1px 6px rgba(0,0,0,.5);}
.materials-bento .materials__type{background:rgba(255,255,255,.94);
  text-shadow:none;}
.materials-bento .materials__type--article{color:var(--teal-deep);}
.materials-bento .materials__type--video{color:var(--orange-deep);}
.materials-bento .materials__type--case{color:var(--ink-900); box-shadow:none;}
/* Solid-варианты внутри бенто остаются заливкой (а не белой подложкой) —
   акция/новость должны кричать даже на тёмной обложке. */
.materials-bento .materials__type--news{background:var(--teal); color:#fff;}
.materials-bento .materials__type--promo{background:var(--orange); color:#fff;}

/* Lite-список колонкой: список с fade-out в фон секции снизу + кнопка «Все материалы».
   Скролл не используем — клик на кнопку ведёт в архив автора. */
.materials-list-col{display:flex; flex-direction:column; gap:16px;
  align-items:flex-start;}
.materials-list-wrap{position:relative; width:100%;
  max-height:380px; overflow:hidden;}
.materials-list__fade{position:absolute; left:0; right:0; bottom:0;
  height:90px; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 75%);}

/* Lite-список: без коробки/фона. Разделение — горизонтальная линия между
   строками. Стрелка скрыта по умолчанию, появляется на hover (fade + slide). */
.materials-list{list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:0;}
.materials-list__item{margin:0; border-top:1px solid var(--ink-100);}
.materials-list__item:first-child{border-top:0;}
.materials-list__link{display:grid; grid-template-columns:1fr auto;
  align-items:center; gap:12px;
  padding:14px 4px;
  background:transparent; color:var(--ink-900); text-decoration:none;
  transition:background var(--dur-base) var(--ease-out);}
.materials-list__link:hover{background:transparent;}
.materials-list__link > .materials__meta{grid-column:1/2; margin-bottom:4px;}
.materials-list__title{grid-column:1/2; font-family:var(--font-display);
  font-weight:700; font-size:15px; line-height:1.35; color:var(--ink-900);
  transition:color var(--dur-base) var(--ease-out);}
.materials-list__link:hover .materials-list__title{color:var(--teal-deep);}
.materials-list__arrow{grid-column:2/3; grid-row:1/3; align-self:center;
  width:14px; height:14px; color:var(--teal-deep);
  opacity:0; transform:translateX(-6px);
  transition:opacity var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out);}
a.materials-list__link:hover .materials-list__arrow{
  opacity:1; transform:translateX(0); color:var(--orange);}

/* Кнопка «Все материалы автора» — secondary-CTA, под list-wrap */
.materials__archive{display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px;
  border:1.5px solid var(--teal); border-radius:var(--r-pill);
  background:#fff; color:var(--teal-deep);
  font-family:var(--font-display); font-weight:700; font-size:14px;
  text-decoration:none;
  transition:background var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out);}
/* Тегом 'a' + классом — специфичность 0,2,1 == глобальному a:not(.btn):hover,
   но наша правило определено позже → выигрывает по каскаду (без !important). */
a.materials__archive:hover{background:var(--teal); color:#fff;
  border-color:var(--teal);}
.materials__archive svg{width:14px; height:14px;
  transition:transform var(--dur-base) var(--ease-out);}
a.materials__archive:hover svg{transform:translateX(5px);}

/* Планшет (641-970px): lite-список переезжает на следующую строку. Внутри бенто
   колонки равны (1fr 1fr), строки тоже (1fr 1fr) — правая колонка не шире левой.
   Бенто пропорция 5:3, ширина капнута 760px. Карточки заполняют свои ячейки,
   object-fit:cover на cover-изображениях крепит контент внутри. */
@media (max-width:970px) and (min-width:641px){
  .materials-grid{grid-template-columns:1fr; row-gap:14px; column-gap:24px;}
  .materials-list-wrap{max-width:760px;}
  .materials-bento{
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
    aspect-ratio:5/3;
    max-width:760px; margin:0;}
  .materials-card--shorts,
  .materials-card--youtube,
  .materials-card--cover{
    width:100%; height:100%; aspect-ratio:auto;}
}

/* Мобайл: 3-кол. grid → одна колонка. Бенто → горизонтальная scroll-snap карусель;
   каждая карточка сохраняет свой формат-aspect (Shorts 9:16 узкая, остальные 16:9).
   Lite-список ниже в полную ширину. */
@media (max-width:640px){
  .materials-grid{grid-template-columns:1fr; row-gap:10px;}
  .materials-bento{
    display:flex; grid-template-columns:none; grid-template-rows:none;
    grid-template-areas:none;
    align-items:center;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:12px; padding:2px 16px 16px;
    margin:0 -16px;}
  .materials-bento::-webkit-scrollbar{display:none;}
  .materials-card{
    flex:0 0 auto; grid-area:auto; scroll-snap-align:start;
    width:auto;}
  /* На мобильном все карточки в едином Shorts-формате (9:16) — карусель смотрится
     цельно, без скачков высоты. object-fit:cover на видео/обложке гарантирует, что
     landscape-контент кропнется аккуратно в вертикаль.
     Safari iOS: явные width+height через calc вместо aspect-ratio. */
  .materials-card--shorts,
  .materials-card--youtube,
  .materials-card--cover{
    height:clamp(300px, 55vh, 380px);
    width:calc(clamp(300px, 55vh, 380px) * 9 / 16);
    aspect-ratio:auto;}
  .materials-card__body{padding:14px 16px;}
  .materials-card--shorts .materials-card__body{padding:16px 18px 18px;}
  .materials-card__title{font-size:15px;}
  .materials-card--shorts .materials-card__title{font-size:16px;}
  /* На мобильном все карточки в одном Shorts-формате — play-кнопка тоже единого
     размера (сбрасываем десктопный shorts-override обратно к базе 54×54). */
  .materials-card--shorts .materials-card__play{width:54px; height:54px;}
  .materials-card--shorts .materials-card__play svg{width:22px; height:22px; margin-left:2px;}
  /* Lite-список на мобильном: список короткий — фейд и max-height не нужны,
     отдаём всё под скролл страницы. Tap-target ссылок — комфортнее (12px по бокам). */
  .materials-list-wrap{max-height:none; overflow:visible;}
  .materials-list__fade{display:none;}
  .materials-list-col{gap:18px;}
  .materials-list__link{padding:14px 12px;}
  .materials-list__title{font-size:14.5px;}
  /* Кнопка-архив на всю ширину на мобильном — комфортный тач + видимый CTA */
  .materials__archive{align-self:stretch; justify-content:center;
    padding:14px 22px; font-size:14.5px;}
}

/* ----- Образование: иконка-академка слева, ниже «нест» с вертикальной направляющей ----- */
.vrach-edu{list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:22px; max-width:760px;}
.vrach-edu__item{position:relative; padding-left:42px;}
.vrach-edu__ic{position:absolute; left:0; top:1px; width:28px; height:28px;
  border-radius:9px; background:var(--teal-tint); color:var(--teal-deep);
  display:inline-flex; align-items:center; justify-content:center;}
.vrach-edu__ic svg{width:16px; height:16px;}
.vrach-edu__title{font-family:var(--font-display); font-weight:700;
  font-size:18px; color:var(--ink-900); line-height:1.3; margin:0;}
.vrach-edu__nest{position:relative; margin:10px 0 0 13px;
  padding:2px 0 2px 22px; border-left:1.5px solid var(--ink-200);}
.vrach-edu__year{display:block; font-family:var(--font-display);
  font-weight:700; font-size:15px; color:var(--teal-deep);
  letter-spacing:.02em; margin-bottom:2px;}
.vrach-edu__spec{font-size:15px; color:var(--ink-900); line-height:1.4;}
.vrach-edu__stage{display:block; margin-top:6px; font-size:13px;
  color:var(--teal-deep); font-weight:600;}

/* Сворачивание списка образования при > 3 пунктах: фейд + тоггл «Показать больше».
   Паттерн копирует .svc-text (см. выше) — анимация max-height, fade в фон секции
   (на section--tint = teal-mist), стрелка с auto-nudge до открытия. */
.vrach-edu-wrap{position:relative; max-width:760px;
  --vrach-edu-fade-bg:var(--teal-mist);}
.vrach-edu-wrap--collapsible .vrach-edu-wrap__clip{position:relative;
  max-height:360px; overflow:hidden;
  transition:max-height var(--dur-slow) var(--ease-out);}
.vrach-edu-wrap--collapsible.is-open .vrach-edu-wrap__clip{max-height:5000px;}
.vrach-edu-wrap__fade{position:absolute; left:0; right:0; bottom:0;
  height:160px; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(243,249,250,0) 0%,
    rgba(243,249,250,.7) 55%,
    var(--vrach-edu-fade-bg) 100%);
  transition:opacity var(--dur-base) var(--ease-out);}
.vrach-edu-wrap--collapsible.is-open .vrach-edu-wrap__fade{opacity:0;}
.vrach-edu-wrap__toggle{display:none; align-items:center; gap:8px;
  margin-top:18px; padding:0; background:none; border:0; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:15px;
  color:var(--teal-deep);
  transition:color var(--dur-base) var(--ease-out);}
.vrach-edu-wrap--collapsible .vrach-edu-wrap__toggle{display:inline-flex;}
.vrach-edu-wrap__toggle:hover{color:var(--teal);}
.vrach-edu-wrap__toggle-ic{transition:transform var(--dur-base) var(--ease-out);}
.vrach-edu-wrap--collapsible:not(.is-open) .vrach-edu-wrap__toggle-ic{
  animation:nudgeY 2.4s var(--ease-mid) infinite;}
.vrach-edu-wrap--collapsible:not(.is-open) .vrach-edu-wrap__toggle:hover .vrach-edu-wrap__toggle-ic{
  transform:translateY(5px); animation:none;}
.vrach-edu-wrap--collapsible.is-open .vrach-edu-wrap__toggle-ic{
  transform:rotate(180deg); animation:none;}

/* ----- Адаптив ----- */
@media (max-width:980px){
  .vrach-hero__grid{grid-template-columns:1fr; gap:28px;}
  .vrach-hero__photo{order:-1; max-width:520px; margin:0 auto;}
  .vrach-book__slots{grid-template-columns:repeat(7,1fr);}
}
@media (max-width:640px){
  .vrach-hero{padding:18px 0 40px;}
  .vrach-hero__title{font-size:32px;}
  .vrach-hero__prices{grid-template-columns:1fr; gap:10px; padding:14px;}
  .vrach-book{padding:16px 14px 14px; border-radius:18px;}
  .vrach-book__slots{grid-template-columns:repeat(4,1fr);}
  .vrach-edu__item{padding-left:36px;}
  .vrach-edu__ic{width:24px; height:24px;}
  .vrach-edu__ic svg{width:14px; height:14px;}
  .vrach-edu__title{font-size:16px;}
  .vrach-edu__nest{margin-left:11px; padding-left:18px;}
  .vrach-schedule__ctas{flex-direction:column;}
  .vrach-schedule__ctas .btn{width:100%; justify-content:center;}
}

/* =========================================================================
   Каталог-карточка материала (.cat-card) — компонент ДС для страниц-каталогов
   (статьи, акции, новости, блог-агрегатор). Префикс .cat-* — Catalog,
   отдельный от .art-* (одиночная страница статьи) — иначе .art-grid
   с display:block для article-страницы ломает auto-fill grid каталога.

   Структура карточки: cover (16:9) → meta → title → excerpt → footer
   (author + cta). Сетка карточек — auto-fill min 320px (3-4 на десктопе,
   1 на мобайле). Бейдж «скоро» — top:12px right:12px поверх обложки.
   ========================================================================= */
.cat-filters{margin-bottom:32px;}
.cat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:24px;
}
.cat-card{
  position:relative;
  display:flex; flex-direction:column; gap:10px;
  background:#fff; border-radius:var(--r-xl);
  box-shadow:var(--shadow-sm);
  padding:0 0 22px;
  overflow:hidden;
  color:var(--ink-900);
  transition:box-shadow var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out);
}
.cat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);
  color:var(--ink-900);}
.cat-card__cover{
  display:block; aspect-ratio:16 / 9; overflow:hidden;
  background:var(--teal-mist);
}
.cat-card__cover img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--dur-slow) var(--ease-out);
}
.cat-card:hover .cat-card__cover img{transform:scale(1.04);}
.cat-card__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:18px 22px 0; font-size:12.5px; color:var(--ink-500);
  font-family:var(--font-display); font-weight:700;
}
.cat-card__topic{color:var(--teal-deep); text-transform:uppercase;
  letter-spacing:.08em; font-size:11px;}
.cat-card__sep{color:var(--ink-300);}
.cat-card__title{
  margin:0 22px;
  font-family:var(--font-display); font-weight:800;
  font-size:19px; line-height:1.25; color:var(--ink-900);
  letter-spacing:-.015em;
}
.cat-card__excerpt{
  margin:0 22px;
  font-size:14.5px; line-height:1.6; color:var(--ink-700);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.cat-card__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:auto 22px 0; padding-top:14px;
  border-top:1px solid var(--ink-100);
}
.cat-card__author{
  font-family:var(--font-display); font-weight:700; font-size:13px;
  color:var(--ink-500);
}
.cat-card__more{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-display); font-weight:800; font-size:13px;
  color:var(--teal-deep);
  transition:color var(--dur-fast) var(--ease-out);
}
.cat-card__more svg{
  width:13px; height:13px;
  transition:transform var(--dur-base) var(--ease-out);
}
.cat-card:hover .cat-card__more svg{transform:translateX(4px);}
.cat-card:hover .cat-card__more{color:var(--orange);}
.cat-card__badge{
  position:absolute; top:12px; right:12px;
  background:rgba(255,255,255,.94); color:var(--ink-700);
  font-family:var(--font-display); font-weight:800;
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 10px; border-radius:var(--r-pill);
  box-shadow:0 1px 3px rgba(18,32,36,.12);
}
/* «Скоро» — карточка без готовой страницы. Курсор + лёгкое приглушение,
   чтобы пользователь видел, что клик никуда не приведёт. */
.cat-card--soon{cursor:not-allowed;}
.cat-card--soon:hover{transform:none;}
.cat-card--soon .cat-card__cover img{transition:none;}
.cat-card--soon:hover .cat-card__cover img{transform:none;}

/* Юридическая плашка под каталогом (ИМЕЮТСЯ ПРОТИВОПОКАЗАНИЯ + телефон) */
.cat-disclaimer{
  margin:36px 0 0; padding:18px 22px;
  background:var(--teal-mist); border-radius:var(--r-lg);
  font-family:var(--font-display); font-weight:700; font-size:11.5px;
  letter-spacing:.08em; text-transform:uppercase; line-height:1.55;
  color:var(--ink-700); text-align:center;
}
.cat-disclaimer a{
  color:var(--teal-deep); font-family:var(--font-display); font-weight:800;
  text-transform:none; letter-spacing:0; font-size:14px;
}
.cat-disclaimer a:hover{color:var(--orange-deep);}

/* Пустое состояние каталога (после фильтрации) */
.cat-empty{
  margin:32px auto 0; max-width:560px; text-align:center;
  font-size:15px; line-height:1.55; color:var(--ink-500);
  background:#fff; padding:22px 26px; border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}

@media (max-width:640px){
  .cat-grid{grid-template-columns:1fr; gap:16px;}
  .cat-card__title{font-size:17px;}
}

/* =========================================================================
   Article page (.art-*) — namespace для страниц-статей. Единый grid:
   слева колонка чтения (hero-header + prose), справа sticky-виджет 320px.
   ≤980px виджет схлопывается, hero-header и prose в одну колонку.
   ========================================================================= */
.art-main{position:relative;}
.art-main__bg{position:absolute; top:0; left:0; right:0; height:540px;
  background:linear-gradient(180deg,#fff 0%, var(--teal-mist) 100%);
  z-index:0; pointer-events:none;}
.art-main > .container{position:relative; z-index:1;}

.art-grid{padding:48px 0 72px; display:block;}
.art-main-col{min-width:0;}

/* ---- Hero-шапка статьи (теперь header внутри grid, не full-width section) ---- */
.art-hero{max-width:760px; padding-top:24px; margin-bottom:44px;}
.art-hero .breadcrumb{padding:6px 0 0;}
.art-hero__inner{padding-top:36px;}
.art-hero__eyebrow{margin-bottom:14px;}
.art-hero__title{font-family:var(--font-headline); font-weight:700;
  font-size:clamp(32px,3.6vw,46px); line-height:1.12; letter-spacing:-.02em;
  margin:0 0 22px; color:var(--ink-900);}
.art-hero__dek{font-size:19px; line-height:1.6; color:var(--ink-700);
  margin:0 0 26px; max-width:720px;}
.art-meta{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-family:var(--font-display);}
.art-meta__dot{width:4px; height:4px; border-radius:50%; background:var(--ink-300);}
.art-meta__date,.art-meta__read{font-size:14px; color:var(--ink-500);
  display:inline-flex; align-items:center; gap:6px;}
/* Когда мета идёт после мобайл-плашки автора — добавляем воздух */
.art-hero-author + .art-meta{margin-top:24px;}

/* Мобайл-only «об авторе» в hero после лида — компакт автора + плашка
   «материал проверен». На ≥981px скрыт (есть sticky-виджет в сайдбаре).
   Белая подложка без тени, плоско на teal-mist hero-градиенте. */
.art-hero-author{display:none;}
@media (max-width:980px){
  .art-hero-author{display:block; margin-top:28px;
    background:#fff; box-shadow:none;
    border-radius:var(--r-lg);
    padding:18px 18px 16px;}
  .art-hero-author__doctor{display:flex; align-items:flex-start; gap:14px;}
  .art-hero-author__photo{flex-shrink:0; display:block;
    width:64px; height:64px; border-radius:50%; overflow:hidden;
    background:var(--teal-tint); box-shadow:inset 0 0 0 2px #fff;}
  .art-hero-author__photo img{width:100%; height:100%;
    object-fit:cover; object-position:center top; display:block;}
  .art-hero-author__who{display:flex; flex-direction:column; gap:4px;
    min-width:0;}
  .art-hero-author__name{font-family:var(--font-display); font-weight:700;
    font-size:15px; line-height:1.25; color:var(--ink-900);}
  .art-hero-author__role{font-family:var(--font-display); font-weight:500;
    font-size:13px; line-height:1.25; color:var(--ink-500);}
  .art-hero-author__pills{list-style:none; padding:0; margin:6px 0 0;
    display:flex; flex-direction:column; align-items:flex-start; gap:6px;}
  .art-hero-author__sep{border:0; height:1px; background:var(--ink-100);
    margin:16px 0;}
  .art-hero-author__verified{display:flex; align-items:center; gap:12px;}
  .art-hero-author__seal{flex-shrink:0; width:34px; height:34px;
    color:var(--teal); display:inline-flex; align-items:center;
    justify-content:center;}
  .art-hero-author__seal svg{width:100%; height:100%; display:block;}
  .art-hero-author__verified-text{min-width:0; font-family:var(--font-display);}
  .art-hero-author__verified-text p{margin:0; font-size:12.5px;
    line-height:1.35; color:var(--ink-500); font-weight:500;}
  .art-hero-author__verified-text p strong{color:var(--ink-900); font-weight:700;}
  .art-hero-author__verified-text p:last-child{color:var(--ink-700);
    font-weight:600; margin-top:1px;}
}

/* ---- Тело статьи ---- */
.art-prose{max-width:760px;}
.art-prose > * + *{margin-top:1.05em;}
.art-prose h2{font-family:var(--font-headline); font-weight:700;
  font-size:clamp(24px,2.4vw,30px); line-height:1.18; letter-spacing:-.015em;
  color:var(--ink-900); margin:56px 0 18px; scroll-margin-top:100px;}
.art-prose h2:first-of-type{margin-top:40px;}
.art-prose h3{font-family:var(--font-headline); font-weight:700;
  font-size:clamp(18px,1.55vw,21px); line-height:1.3; letter-spacing:-.01em;
  color:var(--ink-900); margin:36px 0 12px;}
.art-prose h4{font-family:var(--font-display); font-weight:700;
  font-size:16px; line-height:1.35; color:var(--ink-900); margin:24px 0 8px;}
.art-prose p{font-family:var(--font-body); font-size:17px; line-height:1.72;
  color:var(--ink-700); margin:0;}
.art-prose p strong{color:var(--ink-900); font-weight:700;}
.art-prose a{color:var(--teal-deep); text-decoration:underline;
  text-decoration-color:rgba(15,124,139,.32); text-underline-offset:3px;
  transition:color var(--dur-fast) var(--ease-out),
             text-decoration-color var(--dur-fast) var(--ease-out);}
.art-prose a:hover{color:var(--orange); text-decoration-color:var(--orange);}

/* .notice — каноническая плашка уведомления ДС.
   Orange-tint пилюля с пульсирующей orange-точкой («radar ping») слева.
   Источник правды паттерна: ранее жил под именем .vrach-schedule__notice
   (см. ниже, в vrach-схеме оставлен для обратной совместимости).
   Используется в статьях для дисклеймера; пригоден для любых in-page-уведомлений. */
.notice{display:flex; align-items:center; gap:14px;
  margin:0 0 28px; padding:12px 18px; border-radius:14px;
  background:var(--orange-tint); max-width:100%;
  font-family:var(--font-display);
  font-size:14.5px; font-weight:700; line-height:1.4; color:var(--orange-deep);}
.notice__ic{flex-shrink:0; position:relative;
  width:10px; height:10px; border-radius:50%;
  background:var(--orange); margin-left:4px;}
.notice__ic::after{content:""; position:absolute; inset:-3px;
  border-radius:50%; background:var(--orange);
  animation:noticePing 1.6s var(--ease-mid) infinite;
  pointer-events:none;}
.notice__text{min-width:0;}
@keyframes noticePing{
  0%{transform:scale(.6); opacity:.55;}
  100%{transform:scale(2); opacity:0;}
}

/* Иллюстрация в статье */
.art-figure{margin:32px 0; padding:0; width:100%;}
.art-figure img{width:100%; height:auto; display:block;
  border-radius:var(--r-lg); background:var(--teal-mist);
  box-shadow:var(--shadow-sm);}
.art-figure__cap{display:block; margin:14px 4px 0;
  font-family:var(--font-body); font-size:14px; line-height:1.55;
  color:var(--ink-500); text-align:center;}
.art-figure__num{font-family:var(--font-display); font-weight:700;
  color:var(--ink-700); margin-right:4px;}

/* Видео (Kinescope iframe): aspect-ratio 16/9, та же рамка-радиус, что и фигура.
   --feature — отдельный блок ниже hero, по ширине алайнится с прозой (760px). */
.art-video{margin:0 0 48px; padding:0; width:100%; max-width:760px;}
.art-video__frame{position:relative; padding-bottom:56.25%; height:0;
  overflow:hidden; border-radius:var(--r-lg); background:var(--ink-100);
  box-shadow:var(--shadow-md);}
.art-video__frame iframe{position:absolute; top:0; left:0;
  width:100%; height:100%; border:0;}
.art-video--feature{margin:0 0 56px;}

/* Списки: SVG-чек слева, teal */
.art-list{list-style:none; margin:14px 0 0; padding:0;
  display:flex; flex-direction:column; gap:10px;}
.art-list li{position:relative; padding-left:30px;
  font-family:var(--font-body); font-size:17px; line-height:1.65;
  color:var(--ink-700);}
.art-list li::before{content:""; position:absolute; left:0; top:9px;
  width:18px; height:18px; border-radius:50%; background:var(--teal-tint);}
.art-list li::after{content:""; position:absolute; left:5px; top:13px;
  width:8px; height:4px; border-left:2px solid var(--teal-deep);
  border-bottom:2px solid var(--teal-deep); transform:rotate(-45deg);}
.art-list li strong{color:var(--ink-900); font-weight:700;}

/* Pull quote — обычный шрифт (Onest), ключевая фраза выделяется italic
   Shnobel + бренд-цвет через <span class="em">…</span>. */
.art-pq{margin:36px 0; padding:24px 28px 24px 32px;
  border-left:4px solid var(--teal);
  background:linear-gradient(135deg, var(--teal-mist) 0%, #fff 100%);
  border-radius:0 var(--r-lg) var(--r-lg) 0;}
.art-pq p{margin:0; font-family:var(--font-display); font-style:normal;
  font-weight:600; font-size:clamp(18px,1.6vw,21px); line-height:1.5;
  color:var(--ink-900); letter-spacing:-.005em;}
.art-pq p .em{font-family:var(--font-em); font-style:italic;
  font-weight:600; color:var(--orange); letter-spacing:-.005em;}
.art-pq--orange{border-left-color:var(--orange);
  background:linear-gradient(135deg, var(--orange-tint) 0%, #fff 100%);}
/* На orange-tint фоне teal-deep даёт слабый визуальный контраст (две конкурирующие
   бренд-температуры). orange-deep остаётся в семействе акцента, гармонирует с
   подложкой и сохраняет высокий контраст с тёмным текстом параграфа. */
.art-pq--orange p .em{color:var(--orange-deep);}

/* ---- Правый sticky-виджет: автор + verified + TOC в одной карте.
   margin-top ≈ 220px смещает виджет до уровня мета-строки hero (дата + время чтения)
   так, чтобы он начинался не «у самой шапки», а на одной горизонтали с лидом. ---- */
.art-side{display:none;}
@media (min-width:981px){
  .art-grid{display:grid; grid-template-columns:minmax(0,1fr) 320px;
    gap:56px; align-items:start;}
  .art-side{display:block; position:sticky; top:96px;
    margin-top:220px;
    transition:opacity .4s var(--ease-out);}
  .art-side.is-fade{opacity:0; pointer-events:none;}
}

/* --c (0..1) — фактор «компакта», который JS выставляет на скролле.
   При --c→1 аватарка съёживается и пилюли стажа/возраста уходят в opacity 0
   с коллапсом высоты. Эффект убирает «лишние» элементы из фокуса по мере
   погружения в чтение. */
.art-widget{background:#fff; border-radius:var(--r-lg);
  padding:24px 22px 20px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:18px;
  --c:0;}
.art-widget__doctor{display:flex; align-items:flex-start; gap:16px;}

/* Аватарка: круг teal-tint с белым ободком, фото кропится в круг.
   На скролле круг плавно съёживается через --c (0..1). */
.art-widget__photo{flex-shrink:0; display:block;
  width:calc(88px - var(--c) * 32px);
  height:calc(88px - var(--c) * 32px);
  border-radius:50%; overflow:hidden;
  background:var(--teal-tint);
  box-shadow:inset 0 0 0 2px #fff;
  transition:width var(--dur-base) var(--ease-out),
             height var(--dur-base) var(--ease-out);}
.art-widget__photo img{width:100%; height:100%;
  object-fit:cover; object-position:center top;
  display:block; pointer-events:none;}

.art-widget__who{display:flex; flex-direction:column; gap:4px; min-width:0;}
.art-widget__name{font-family:var(--font-display); font-weight:700;
  font-size:15px; line-height:1.25; color:var(--ink-900);}
.art-widget__role{font-family:var(--font-display); font-weight:500;
  font-size:13px; line-height:1.25; color:var(--ink-500);}
.art-widget__pills{list-style:none; padding:0;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  opacity:calc(1 - var(--c));
  max-height:calc((1 - var(--c)) * 90px);
  margin-top:calc((1 - var(--c)) * 10px);
  overflow:hidden;
  transition:opacity var(--dur-base) var(--ease-out),
             margin-top var(--dur-base) var(--ease-out),
             max-height var(--dur-base) var(--ease-out);}
.art-widget__sep{border:0; height:1px; background:var(--ink-100); margin:0;}

.art-widget__verified{display:flex; align-items:center; gap:12px;}
/* Печать-проверено: съёживается на скролле с 34px → 24px (--c) */
.art-widget__seal{flex-shrink:0;
  width:calc(34px - var(--c) * 10px);
  height:calc(34px - var(--c) * 10px);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--teal);
  transition:width var(--dur-base) var(--ease-out),
             height var(--dur-base) var(--ease-out);}
.art-widget__seal svg{width:100%; height:100%; display:block;}
.art-widget__verified-text{min-width:0; font-family:var(--font-display);}
.art-widget__verified-text p{margin:0; font-size:12.5px; line-height:1.35;
  color:var(--ink-500); font-weight:500;}
.art-widget__verified-text p strong{color:var(--ink-900); font-weight:700;}
/* «Материал проверен» — всегда видно */
.art-widget__v-keep p{font-size:13px; line-height:1.3;}
/* Доп.строки фейдятся и схлопываются на скролле */
.art-widget__v-fade{
  opacity:calc(1 - var(--c));
  max-height:calc((1 - var(--c)) * 50px);
  margin-top:calc((1 - var(--c)) * 2px);
  overflow:hidden;
  transition:opacity var(--dur-base) var(--ease-out),
             max-height var(--dur-base) var(--ease-out),
             margin-top var(--dur-base) var(--ease-out);}
.art-widget__v-fade p:first-child{color:var(--ink-500); font-weight:500;}
.art-widget__v-fade p:last-child{color:var(--ink-700); font-weight:600;
  margin-top:1px;}

.art-widget__toc-head{font-family:var(--font-display); font-weight:800;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); margin-bottom:10px;}
.art-widget__toc ol{list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column;}
.art-widget__toc a{display:block; padding:8px 0 8px 14px;
  border-left:2px solid var(--ink-100);
  font-family:var(--font-display); font-weight:600;
  font-size:13px; line-height:1.4; color:var(--ink-500);
  text-decoration:none;
  transition:color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             background var(--dur-base) var(--ease-out);}
.art-widget__toc a:hover{color:var(--teal-deep); border-left-color:var(--teal-soft);}
.art-widget__toc a.is-on{color:var(--teal-deep); border-left-color:var(--teal);
  background:linear-gradient(90deg, var(--teal-tint) 0%, transparent 90%);}

/* ---- Финальная секция «Автор статьи» (использует canonical .card),
   на всю ширину контейнера — без сайдбар-гарнитуры. ---- */
.art-doctor-sec{padding-top:64px; padding-bottom:64px;}
.art-doctor-sec__list{max-width:none; margin-top:32px;}

/* Финальная legal-строка под секцией автора (вместо CTA-band) */
.art-legal-final{margin:32px auto 64px; max-width:760px; text-align:center;
  font-family:var(--font-display); font-weight:700; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-400);
  line-height:1.5; padding:0 28px;}

/* ---- Адаптив ---- */
@media (max-width:980px){
  .art-main__bg{height:780px;
    background:linear-gradient(180deg, #fff 0%, var(--teal-mist) 38%, var(--teal-mist) 100%);}
  .art-grid{padding:32px 0 56px;}
  .art-hero{padding-top:18px; margin-bottom:36px;}
  .art-hero__inner{padding-top:24px;}
}
@media (max-width:760px){
  .art-main__bg{height:740px;
    background:linear-gradient(180deg, #fff 0%, var(--teal-mist) 32%, var(--teal-mist) 100%);}
  .art-hero__title{font-size:30px;}
  .art-hero__dek{font-size:17px;}
  .art-meta__dot{display:none;}
  .art-prose h2{margin-top:44px; font-size:24px;}
  .art-prose h3{margin-top:28px; font-size:18px;}
  .art-prose p{font-size:16.5px;}
  .art-pq{padding:18px 18px 18px 22px; margin:28px 0;}
  .art-pq p{font-size:19px;}
}

/* =========================================================================
   Страница «Капельницы» — page-specific (префикс .kap-*).
   Переиспользует токены ДС: --teal, --orange, --r-lg, --shadow-sm и т.д.
   Hero и breadcrumb берутся из .svc-hero / .breadcrumb (общие).
   ========================================================================= */

/* Меню капельниц — сетка карточек */
.kap-menu{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:8px;}
.kap-card{position:relative; background:#fff; border-radius:var(--r-xl);
  box-shadow:var(--shadow-sm); padding:24px 22px 22px;
  display:flex; flex-direction:column; gap:16px; overflow:hidden;
  transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);}
.kap-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.kap-card::before{content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg, var(--teal) 0%, var(--teal-deep) 100%); opacity:.9;}
.kap-card--orange::before{background:linear-gradient(90deg, var(--orange) 0%, var(--orange-deep) 100%);}
.kap-card__head{display:flex; align-items:flex-start; gap:14px;}
.kap-card__tile{flex-shrink:0; width:48px; height:48px; border-radius:var(--r-md);
  background:var(--teal-tint); color:var(--teal-deep);
  display:flex; align-items:center; justify-content:center;}
.kap-card--orange .kap-card__tile{background:var(--orange-tint); color:var(--orange-deep);}
.kap-card__title{font-family:var(--font-display); font-weight:800; font-size:19px;
  line-height:1.2; color:var(--ink-900); margin:0 0 6px; letter-spacing:-.01em;}
.kap-card__for{font-size:14px; line-height:1.5; color:var(--ink-700); margin:0;}
.kap-card__meta{margin:0; padding:14px 0 0; border-top:1px solid var(--ink-100);
  display:flex; flex-direction:column; gap:8px;}
.kap-card__meta>div{display:grid; grid-template-columns:90px 1fr; gap:10px; align-items:baseline;}
.kap-card__meta dt{font-family:var(--font-display); font-weight:700; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500); margin:0;}
.kap-card__meta dd{font-size:13.5px; line-height:1.5; color:var(--ink-900); margin:0;}
.kap-card__foot{margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; padding-top:6px;}
.kap-card__price{display:flex; flex-direction:column; gap:2px;}
.kap-card__price-main{font-family:var(--font-display); font-weight:800; font-size:20px;
  color:var(--ink-900); letter-spacing:-.01em;}
.kap-card__price-course{font-size:12px; color:var(--ink-500); line-height:1.4;}
.kap-card__cta{padding:10px 18px; font-size:13px;}
.kap-menu__note{margin:22px 0 0; font-size:12.5px; line-height:1.5;
  color:var(--ink-500); max-width:720px;}

/* Шаги процедуры */
.kap-steps{list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;}
.kap-step{position:relative; background:#fff; border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); padding:24px 22px 22px;
  display:flex; flex-direction:column; gap:10px;}
.kap-step__n{display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%);
  color:#fff; font-family:var(--font-display); font-weight:800; font-size:17px;
  box-shadow:0 6px 14px rgba(22,153,170,.26);}
.kap-step:nth-child(even) .kap-step__n{background:linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
  box-shadow:0 6px 14px rgba(237,112,41,.28);}
.kap-step__t{font-family:var(--font-display); font-weight:800; font-size:17px;
  line-height:1.25; color:var(--ink-900); margin:6px 0 0; letter-spacing:-.01em;}
.kap-step__p{font-size:14.5px; line-height:1.55; color:var(--ink-700); margin:0;}

/* Медсёстры — карточки с фото-нишей */
.kap-nurses{display:grid; grid-template-columns:repeat(2, 1fr); gap:18px;}
.kap-nurse{display:grid; grid-template-columns:140px 1fr; gap:20px;
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  padding:20px; align-items:center;
  transition:box-shadow var(--dur-base) var(--ease-out);}
.kap-nurse:hover{box-shadow:var(--shadow-md);}
.kap-nurse__photo{position:relative; width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--teal-tint) 0%, var(--teal-mist) 80%);
  display:flex; align-items:center; justify-content:center; overflow:hidden;}
.kap-nurse__photo .ph-badge{position:static;}
.kap-nurse__name{font-family:var(--font-display); font-weight:800; font-size:17px;
  line-height:1.25; color:var(--ink-900); margin:0 0 4px; letter-spacing:-.01em;}
.kap-nurse__exp{font-family:var(--font-display); font-weight:700; font-size:13px;
  color:var(--teal-deep); margin:0 0 12px;}
.kap-nurse__skills{margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:6px;}
.kap-nurse__skills li{position:relative; padding-left:18px; font-size:14px;
  line-height:1.45; color:var(--ink-700);}
.kap-nurse__skills li::before{content:""; position:absolute; left:2px; top:7px;
  width:6px; height:6px; border-radius:50%; background:var(--teal);}

/* Безопасность — сетка иконка+текст */
.kap-safety{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;}
.kap-safety__card{background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  padding:22px; display:flex; flex-direction:column; gap:10px;
  transition:box-shadow var(--dur-base) var(--ease-out);}
.kap-safety__card:hover{box-shadow:var(--shadow-md);}
.kap-safety__tile{width:54px; height:54px; border-radius:var(--r-md);
  background:var(--teal-tint); color:var(--teal-deep);
  display:flex; align-items:center; justify-content:center;}
.kap-safety__card:nth-child(even) .kap-safety__tile{background:var(--orange-tint); color:var(--orange-deep);}
.kap-safety__card h3{font-family:var(--font-display); font-weight:800; font-size:16px;
  line-height:1.25; color:var(--ink-900); margin:6px 0 0; letter-spacing:-.01em;}
.kap-safety__card p{font-size:14.5px; line-height:1.55; color:var(--ink-700); margin:0;}

/* Показания / противопоказания — две колонки */
.kap-indic{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.kap-indic__col{background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:24px 26px;}
.kap-indic__col--no{background:linear-gradient(160deg, #fff 0%, #fff7f3 100%);}
.kap-indic__h{display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:800; font-size:18px;
  color:var(--ink-900); margin:0 0 14px;}
.kap-indic__dot{width:10px; height:10px; border-radius:50%; background:var(--teal); flex-shrink:0;}
.kap-indic__dot--no{background:var(--orange);}
.kap-indic__col ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px;}
.kap-indic__col li{position:relative; padding-left:22px; font-size:15px;
  line-height:1.55; color:var(--ink-700);}
.kap-indic__col--ok li::before{content:""; position:absolute; left:2px; top:7px;
  width:8px; height:8px; border-radius:50%; background:var(--teal-soft);
  box-shadow:0 0 0 2px var(--teal-tint);}
.kap-indic__col--no li::before{content:""; position:absolute; left:5px; top:10px;
  width:10px; height:2px; border-radius:2px; background:var(--orange);}

/* Адаптив для страницы капельниц */
@media (max-width:1100px){
  .kap-menu{grid-template-columns:repeat(2, 1fr);}
  .kap-steps{grid-template-columns:repeat(2, 1fr);}
  .kap-safety{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:760px){
  .kap-menu{grid-template-columns:1fr; gap:14px;}
  .kap-steps{grid-template-columns:1fr;}
  .kap-safety{grid-template-columns:1fr;}
  .kap-nurses{grid-template-columns:1fr;}
  .kap-nurse{grid-template-columns:96px 1fr; gap:14px; padding:16px;}
  .kap-nurse__photo{width:96px; height:96px;}
  .kap-indic{grid-template-columns:1fr;}
  .kap-card{padding:20px 18px 18px;}
  .kap-card__meta>div{grid-template-columns:80px 1fr;}
  .kap-card__foot{flex-direction:column; align-items:stretch;}
  .kap-card__cta{width:100%; text-align:center;}
}