/* КОД МОЛОДОСТИ — прототип.
   Правка 09.08 по ответу клиента: светлая схема, тёмным остаётся только текст.
   Чёрные полотна (акции, футер) убраны — «мы всё-таки косметология, важно чистое, белое».
   Акцент вынесен в --accent: зелёный взят из интерьера клиники, менять в одном месте. */

@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-cyrillic.woff2') format('woff2');
  font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-latin.woff2') format('woff2');
  font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212}
@font-face{font-family:'Playfair Display';src:url('../fonts/playfair-display-cyrillic.woff2') format('woff2');
  font-weight:400 700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Playfair Display';src:url('../fonts/playfair-display-latin.woff2') format('woff2');
  font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}

:root{
  --ink:#1c1f1d;            /* текст — единственное тёмное на странице */
  --ink-soft:#5d635f;
  --line:#e6e8e6;
  --paper:#fff;
  --paper-2:#f6f8f6;        /* мягкая подложка секций вместо чёрных полотен */
  --accent:#00543c;         /* изумруд, снят пипеткой с мебели и стены из мха в клинике (контраст 9:1) */
  --accent-soft:#eef4f1;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 16px/1.65 'Montserrat',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:400;letter-spacing:.01em;margin:0}
h1{font-size:clamp(30px,5.2vw,58px);line-height:1.1}
h2{font-size:clamp(24px,3.6vw,38px);line-height:1.18}
h3{font-size:19px;line-height:1.25}
p{margin:0 0 1em}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.section{padding:clamp(52px,7vw,92px) 0}
.section--soft{background:var(--paper-2)}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);
  display:flex;align-items:center;gap:12px;margin-bottom:18px}
.eyebrow::before{content:'';width:26px;height:1px;background:var(--accent)}
.btn{display:inline-block;padding:15px 30px;border:1px solid var(--accent);background:var(--accent);
  color:#fff;font:500 13px/1 'Montserrat',sans-serif;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;transition:.25s}
.btn:hover{background:#01704f;border-color:#01704f}
.btn--ghost{background:transparent;color:var(--ink);border-color:#cfd6d1}
.btn--ghost:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}

/* ── шапка ── */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top__in{display:flex;align-items:center;gap:28px;min-height:76px}
.logo{width:190px;flex:none}
.nav{display:flex;gap:26px;margin-left:auto;font-size:13px;letter-spacing:.04em}
.nav a{text-decoration:none;color:var(--ink-soft);transition:.2s}
.nav a:hover{color:var(--accent)}
.top__tel{font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap}

/* ── первый экран ── */
.hero{border-bottom:1px solid var(--line);
  background:radial-gradient(1100px 420px at 80% -14%,rgba(0,84,60,.09),transparent 62%),var(--paper-2)}
.hero__in{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center;
  padding:clamp(44px,6.5vw,88px) 0}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero__lead{font-size:17px;color:var(--ink-soft);max-width:44ch;margin:22px 0 32px}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.hero__facts{display:flex;gap:34px;margin-top:38px;padding-top:26px;border-top:1px solid #d9ded9}
.hero__facts b{display:block;font:400 27px/1 'Playfair Display',serif;color:var(--accent)}
.hero__facts span{font-size:12px;color:var(--ink-soft);letter-spacing:.04em}
.hero__photo img{width:100%;height:clamp(320px,42vw,470px);object-fit:cover;border-radius:2px}
.ph{display:grid;place-items:center;text-align:center;min-height:330px;padding:24px;
  background:repeating-linear-gradient(45deg,#fff,#fff 11px,var(--paper-2) 11px,var(--paper-2) 22px);
  border:1px dashed #cfd6d1;color:var(--ink-soft);font-size:12px;letter-spacing:.05em}

/* ── акции (было чёрное полотно — стало светлое) ── */
.promo{background:var(--accent-soft)}
.promo__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#d7e3dd;
  border:1px solid #d7e3dd;margin-top:34px}
.promo__i{background:#fff;padding:26px 22px}
.promo__i b{display:block;font:400 26px/1 'Playfair Display',serif;color:var(--accent);margin-bottom:9px}
.promo__i span{font-size:13px;color:var(--ink-soft);line-height:1.5;display:block}
.promo__note{margin-top:20px;font-size:12px;color:var(--ink-soft)}

/* ── направления ── */
.dirs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:36px}
.dir{background:#fff;padding:30px 26px 26px;text-decoration:none;display:flex;flex-direction:column;
  gap:11px;transition:.25s;min-height:186px}
.dir:hover{background:var(--accent-soft)}
.dir__n{font-size:11px;color:#b8c2bb;letter-spacing:.14em}
.dir p{font-size:13.5px;color:var(--ink-soft);margin:0}
.dir__price{margin-top:auto;font-size:13px;font-weight:600;color:var(--accent)}

/* ── доверие ── */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:34px}
.trust__i{padding-top:20px;border-top:2px solid var(--accent)}
.trust__i h3{font-size:17px;margin-bottom:8px}
.trust__i p{font-size:13.5px;color:var(--ink-soft);margin:0}

/* ── аппараты ── */
.appar__list{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.appar__list span{background:#fff;border:1px solid var(--line);padding:11px 19px;font-size:13px;
  letter-spacing:.03em}

/* ── галерея ── */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:32px}
.gal img{width:100%;height:260px;object-fit:cover;border-radius:2px}

/* ── запись ── */
.book{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.form{display:grid;gap:13px;margin-top:26px}
.form input,.form select{font:400 15px/1.4 'Montserrat',sans-serif;padding:14px 16px;
  border:1px solid #d8ded9;background:#fff;color:var(--ink);width:100%}
.form input:focus,.form select:focus{outline:2px solid var(--accent);outline-offset:-2px}
.form__hint{font-size:11.5px;color:var(--ink-soft);line-height:1.5}
.form__ok{display:none;padding:15px;background:var(--accent-soft);border-left:3px solid var(--accent);font-size:14px}
.yc{margin-top:22px;border:1px solid var(--line);background:#fff}

/* ── контакты, футер ── */
.contacts__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:30px}
.contacts__grid h3{font-size:15px;margin-bottom:9px}
.contacts__grid p{font-size:14px;color:var(--ink-soft);margin:0}
.foot{background:var(--paper-2);border-top:1px solid var(--line);color:var(--ink-soft);
  padding:52px 0 34px;font-size:12.5px;line-height:1.75}
.foot .logo{width:210px;margin-bottom:22px}
.foot a{color:var(--ink-soft)}
.foot a:hover{color:var(--accent)}
.foot__cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:34px}
.foot__bot{margin-top:34px;padding-top:20px;border-top:1px solid #dde2de;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11.5px;color:#8a918c}

.draft{background:var(--accent);color:#fff;text-align:center;padding:9px 16px;font-size:12px;letter-spacing:.05em}

@media(max-width:960px){
  .hero__in,.book{grid-template-columns:1fr;gap:34px}
  .dirs,.promo__grid,.trust,.contacts__grid,.foot__cols,.gal{grid-template-columns:repeat(2,1fr)}
  .nav{display:none}
}
@media(max-width:560px){
  .dirs,.promo__grid,.trust,.contacts__grid,.foot__cols,.gal{grid-template-columns:1fr}
  .hero__facts{flex-wrap:wrap;gap:20px}
  .top__tel{font-size:13.5px}
  .logo{width:150px}
}

/* ── карта: грузим по клику, чтобы сторонний iframe не ставил куки до согласия ── */
.map{margin-top:28px;border:1px solid var(--line)}
.map iframe{display:block}

/* ── страницы услуг ── */
.page__head{background:var(--paper-2);border-bottom:1px solid var(--line)}
.page__head-in{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  padding:clamp(36px,5vw,68px) 0}
.page__head h1{margin-bottom:6px}
.page__photo img{width:100%;height:clamp(240px,30vw,360px);object-fit:cover}
.sec__h{font-size:clamp(20px,2.4vw,27px);margin:44px 0 16px}
.sec__h:first-of-type{margin-top:0}

/* таблица прайса */
.t__wrap{overflow-x:auto;border:1px solid var(--line)}
.t{width:100%;border-collapse:collapse;font-size:14.5px;background:#fff;min-width:520px}
.t th{background:var(--accent-soft);color:var(--ink);font-weight:600;font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;text-align:right;padding:13px 16px;white-space:nowrap}
.t th:first-child{text-align:left}
.t td{padding:13px 16px;border-top:1px solid var(--line);text-align:right;white-space:nowrap}
.t td:first-child{text-align:left;white-space:normal;line-height:1.4}
.t tbody tr:hover td{background:#fbfcfb}
.t__group td{background:var(--paper-2);font-weight:600;font-size:12.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--accent);white-space:normal}
.t__note td,.t__prog td{font-size:13px;color:var(--ink-soft);white-space:normal;font-style:italic}
.t__sub{display:block;font-size:12px;color:var(--ink-soft);font-style:normal;margin-top:3px;white-space:normal}
.t__legal{margin-top:26px;font-size:12px;color:var(--ink-soft)}

/* юридические страницы */
.legal{max-width:820px}
.legal h2{font-size:20px;margin:30px 0 10px}
.legal p,.legal li{font-size:14.5px;color:#33383a}
.legal ol,.legal ul{padding-left:20px}
.legal li{margin-bottom:6px}

@media(max-width:960px){ .page__head-in{grid-template-columns:1fr;gap:28px} }

/* ── cookie-баннер (opt-in) ── */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff;
  border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(0,0,0,.07)}
.cookie__in{max-width:var(--max);margin:0 auto;padding:18px 24px;display:flex;gap:22px;
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.cookie p{margin:0;font-size:13px;color:var(--ink-soft);max-width:74ch;line-height:1.55}
.cookie__btns{display:flex;gap:10px;flex-wrap:wrap}
.cookie .btn{padding:12px 22px;font-size:12px}
@media(max-width:640px){ .cookie__in{padding:14px 18px} .cookie .btn{flex:1} }

/* ═══ правки клиента 01.09.2026 ═══
   «наверху в шапке адрес и мессенджеры», «услуги кликабельны», «справа онлайн-запись мигает»,
   блок вопрос-ответ по образцу timering.ru. */

/* ── верхняя полоса: часы, адрес, маршрут, мессенджеры ── */
.tbar{background:var(--paper-2);border-bottom:1px solid var(--line);
  font-size:12.5px;color:var(--ink-soft);letter-spacing:.01em}
.tbar__in{display:flex;align-items:center;gap:18px;min-height:40px;flex-wrap:wrap}
.tbar a{color:inherit;text-decoration:none}
.tbar__addr{margin-left:auto}
.tbar__route{color:var(--accent);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.tbar__msgs{display:flex;align-items:center;gap:9px}
.tbar__tel{font-weight:600;color:var(--ink);white-space:nowrap}
.msg{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;flex:none;transition:.2s}
.msg:hover{background:#01704f}
.msg svg{width:15px;height:15px;fill:currentColor}
.btn--sm{padding:11px 20px;font-size:11.5px}

/* ── список процедур: «услуги кликабельны» ── */
.proc{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
.proc a{display:flex;align-items:center;gap:12px;background:var(--paper-2);
  border:1px solid transparent;border-radius:40px;padding:15px 22px;
  text-decoration:none;font-size:15px;color:var(--ink);transition:.22s}
.proc a:hover{background:#fff;border-color:var(--accent)}
.proc__ar{margin-left:auto;color:var(--accent);flex:none}
.proc__new{font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--accent);color:#fff;padding:4px 10px;border-radius:20px;flex:none}

/* ── постоянная кнопка онлайн-записи справа ── */
.zap{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:60;
  width:98px;height:98px;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;text-align:center;text-decoration:none;
  font:500 11.5px/1.35 'Montserrat',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 12px 30px rgba(0,84,60,.28)}
.zap span{position:relative;z-index:1}
.zap::before{content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--accent);animation:zapPulse 2.6s ease-out infinite}
@keyframes zapPulse{0%{transform:scale(1);opacity:.65}70%{transform:scale(1.38);opacity:0}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.zap::before{animation:none}}

/* якоря не должны уезжать под липкую шапку */
section[id],h2[id]{scroll-margin-top:104px}

/* ── вопрос-ответ ── */
.faq{margin-top:28px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:19px 48px 19px 0;position:relative;
  font-size:16.5px;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{content:'+';position:absolute;right:10px;top:13px;
  font:300 25px/1 'Montserrat',sans-serif;color:var(--accent)}
.faq details[open] summary::after{content:'–'}
.faq p{font-size:14.5px;color:var(--ink-soft);margin:0 0 20px;max-width:80ch}

@media(max-width:960px){
  .proc{grid-template-columns:1fr}
  .tbar__hours,.tbar__addr{display:none}
  .tbar__in{justify-content:space-between}
  .zap{width:76px;height:76px;right:14px;bottom:18px;top:auto;transform:none;font-size:10px}
  /* меню не прячем: клиент просил, чтобы разделы были видны сразу — делаем прокруткой вбок */
  .top__in{flex-wrap:wrap;gap:12px;min-height:0;padding-top:13px;padding-bottom:11px}
  .nav{display:flex;order:3;width:100%;margin-left:0;gap:20px;overflow-x:auto;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap}
  .btn--sm{margin-left:auto}
  /* на телефоне двухрядная шапка съедала бы шестую часть экрана — липкой её не держим */
  .top{position:static}
  section[id],h2[id]{scroll-margin-top:12px}
}
@media(max-width:560px){
  .tbar__route{font-size:12px}
  .tbar__in{gap:10px;padding-top:7px;padding-bottom:7px}
}

/* ── полоса «не знаете, что выбрать» и шаги первого визита (правки 01.09) ── */
/* полосу держим светлой: клиент просил «чистое, белое, тёмным только шрифт» */
.cta{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(38px,4.6vw,58px) 0}
.cta__in{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
.cta p{margin:12px 0 0;font-size:15px;color:var(--ink-soft);max-width:56ch}
.cta__btns{display:flex;gap:13px;flex-wrap:wrap}
.cta .btn--ghost{background:var(--paper-2);border-color:#cfd6d1}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:34px;counter-reset:s}
.step{padding-top:22px;border-top:1px solid var(--line)}
.step__n{display:block;font:400 26px/1 'Playfair Display',serif;color:var(--accent);margin-bottom:12px}
.step h3{font-size:17px;margin-bottom:8px}
.step p{font-size:13.5px;color:var(--ink-soft);margin:0}

@media(max-width:960px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .cta__in{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ── заглушки под материалы клиента: показывают формат, а не притворяются контентом ── */
.wait{margin-left:10px;padding:3px 9px;border-radius:20px;background:#fff4e0;color:#8a6212;
  font-size:9.5px;letter-spacing:.12em;border:1px solid #f0dcb4}
.lead-sm{font-size:15px;color:var(--ink-soft);max-width:70ch;margin:14px 0 0}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.slot{border:1px dashed #c8d2cc;border-radius:3px;background:var(--paper-2);
  padding:22px 20px;min-height:170px}
.slot b{display:block;font:400 17px/1.2 'Playfair Display',Georgia,serif;color:var(--ink);margin-bottom:10px}
.slot p{font-size:13px;color:var(--ink-soft);margin:0}
.slot__note{margin-top:20px;font-size:13px;color:var(--ink-soft);
  padding-left:14px;border-left:2px solid var(--accent)}
@media(max-width:960px){.slots{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.slots{grid-template-columns:1fr}.slot{min-height:0}}

/* ── команда и результаты до/после (01.09) ── */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:30px}
.team__i{margin:0}
.team__i img{width:100%;height:340px;object-fit:cover;object-position:top center;border-radius:2px}
.team__i figcaption{padding-top:14px}
.team__i b{display:block;font:400 17px/1.2 'Playfair Display',Georgia,serif;color:var(--ink)}
.team__i span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:4px}

.ba{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
.ba__i{margin:0;background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.ba__i img{width:100%;height:250px;object-fit:cover;display:block}
.ba__i figcaption{padding:14px 16px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 10px}
.ba__i b{font-weight:500;font-size:13px;min-width:0;overflow-wrap:anywhere}
.ba__i span{font-size:12.5px;color:var(--accent);white-space:nowrap}

@media(max-width:960px){.team,.ba{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.team,.ba{grid-template-columns:1fr}.team__i img{height:420px}}

/* ═══ движение (01.09.2026) ═══
   Стартовые состояния ставим ТОЛЬКО когда скрипт жив (html.anim-on):
   без JS и при prefers-reduced-motion страница остаётся полностью видимой. */
.anim-on .rv{opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .72s cubic-bezier(.22,.61,.36,1),transform .72s cubic-bezier(.22,.61,.36,1)}
.anim-on .rv--in{opacity:1;transform:none}
.anim-on .hero__photo.rv{transform:translate3d(0,0,0) scale(1.07);opacity:0;
  transition:opacity 1s ease,transform 1.4s cubic-bezier(.22,.61,.36,1)}
.anim-on .hero__photo.rv--in{opacity:1;transform:translate3d(0,0,0) scale(1)}
.anim-on .hero__photo{overflow:hidden}
.anim-on .hero__photo img{will-change:transform}

/* шапка после первого экрана становится плотнее и получает тень */
.top{transition:box-shadow .3s ease,background .3s ease}
.top__in{transition:min-height .3s ease}
.top--fixed{box-shadow:0 6px 26px rgba(20,32,26,.07)}
.top--fixed .top__in{min-height:64px}

/* карточки чуть приподнимаются под курсором */
.dir,.ba__i,.team__i img,.slot{transition:transform .35s cubic-bezier(.22,.61,.36,1),
  box-shadow .35s ease,background .25s ease,border-color .25s ease}
.dir:hover{transform:translateY(-4px)}
.ba__i:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(20,32,26,.09)}
.team__i:hover img{transform:scale(1.03)}
.team__i{overflow:hidden}
.gal img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.gal img:hover{transform:scale(1.03)}
.proc a{transition:background .22s ease,border-color .22s ease,transform .22s ease,opacity .6s ease}
.anim-on .proc a.rv{transform:translate3d(0,14px,0)}
.anim-on .proc a.rv--in{transform:none}
.proc a:hover{transform:translateX(4px)}
.proc a:hover .proc__ar{transform:translateX(3px)}
.proc__ar{transition:transform .22s ease}

/* кнопка записи мягко дышит и подрастает под курсором */
.zap{transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease}
.zap:hover{transform:translateY(-50%) scale(1.06);box-shadow:0 16px 38px rgba(0,84,60,.34)}
@media(max-width:960px){.zap:hover{transform:scale(1.06)}}

/* аккордеон: высоту анимирует скрипт, ему нужен только overflow и переход */
.faq__body{overflow:hidden;transition:height .34s cubic-bezier(.22,.61,.36,1)}
.faq summary::after{transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(180deg)}

/* ── сцена «карточки слетаются в сетку» (движок WCL Scroll Progress) ──
   У .dirs разделители сделаны фоном сквозь зазор 1px: пока карточки в полёте,
   этот фон выглядел бы серой плитой. На время сцены переводим на обычные рамки. */
/* ⛔ Секция-сцена обязана обрезать вылет: в стартовом положении карточки
   разлетаются в vw и вылезают за правый край, давая горизонтальный скролл
   всей странице. Заметно только при загрузке сверху, когда прогресс равен 0. */
[data-scroll-progress]{overflow:hidden}
.dirs[data-sp-scatter]{background:transparent;border:0;gap:18px}
.dirs[data-sp-scatter] .dir{border:1px solid var(--line)}
.dirs[data-sp-scatter] .dir:hover{border-color:var(--accent)}
@media(prefers-reduced-motion:reduce){
  .dirs[data-sp-scatter]{gap:1px;background:var(--line)}
  .dirs[data-sp-scatter] .dir{border:0}
}

/* honeypot: поле видно только ботам */
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.form__ok--err{background:#fdf1f1;border-left-color:#c0392b}

/* ── строка кадров процедур (материал августовской съёмки клиента) ── */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.shots img{width:100%;height:230px;object-fit:cover;border-radius:2px;
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.shots img:hover{transform:scale(1.03)}
.shots--6{grid-template-columns:repeat(6,1fr)}
.shots--6 img{height:180px}
@media(max-width:960px){.shots{grid-template-columns:repeat(2,1fr)}.shots--6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.shots,.shots--6{grid-template-columns:1fr}.shots img,.shots--6 img{height:260px}}

/* ── отзывы ── */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.rev{margin:0;background:#fff;border:1px solid var(--line);border-radius:3px;padding:24px 22px;
  display:flex;flex-direction:column;gap:16px}
.rev blockquote{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink)}
.rev figcaption{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.rev figcaption b{display:block;font-size:14px}
.rev figcaption span{font-size:12.5px;color:var(--ink-soft)}
@media(max-width:960px){.revs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.revs{grid-template-columns:1fr}}