/* ===== BEYONDSKIN 2.0 =====
   Значения выверены по Figma (файл ezkaQLobEt1jVq25DxT3Xk, холст «Эпиляция», кадр 1440px).

   ВАЖНО про специфичность: глобальный кит Elementor задаёт h1–h6, body, input, textarea и
   hover кнопок селекторами вида `.elementor-kit-138 h2` (0,0,1,1). Наши одноклассовые правила
   ему проигрывают, поэтому заголовки и поля скоупятся под `.bs2-home` (класс на body). */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Meow+Script&family=Poppins:wght@300;400;500;600;700&display=swap');

:root{
  --cream:#F1F1F0;--white:#FFFFFF;--dark:#291F23;--charcoal:#291F23;
  --copper:#AB7B53;--terracotta:#7D4C38;--gold:#AB7B53;
  --lavender-muted:#BEC2D5;--sand:#E3C7B0;--gray-light:#F1F1F0;--gray:#808080;
  --serif:'Instrument Serif',Georgia,serif;--script:'Meow Script',cursive;--sans:'Poppins',-apple-system,sans-serif;
  --pad:60px;              /* единые боковые поля: шапка, hero и секции по одной линии */
  --shell:1440px;
  /* Состояния наведения. Дизайнер их не рисовал — собраны из токенов макета:
     тень тонирована тёмно-коричневым (--dark), а не чёрным, иначе на кремовом фоне
     она выглядит грязно-серой и выпадает из тёплой палитры. */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --lift-shadow:0 10px 24px rgba(41,31,35,.15);
  --lift-shadow-sm:0 6px 16px rgba(41,31,35,.12);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body.bs2-home{font-family:var(--sans);font-weight:300;color:var(--dark);background:var(--cream);line-height:1.6;letter-spacing:normal;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}

/* ===== КНОПКИ ===== */
.bs2-btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:15px;font-weight:400;letter-spacing:0;padding:12px 30px;border-radius:50px;transition:all .25s;cursor:pointer;border:none;text-align:center}
.bs2-btn--nav{background:var(--lavender-muted);color:var(--dark);font-size:18px;padding:14px 28px}
.bs2-home .bs2-btn--nav:hover{background:var(--dark);color:var(--white)}
.bs2-btn--dark{background:var(--dark);color:var(--white)}
.bs2-home .bs2-btn--dark:hover{background:var(--terracotta);color:var(--white)}
.bs2-btn--copper{background:var(--copper);color:var(--white);font-size:22px;padding:9px 30px}
.bs2-home .bs2-btn--copper:hover{background:var(--terracotta);color:var(--white)}
.bs2-btn--lavender{background:var(--lavender-muted);color:var(--dark)}
.bs2-home .bs2-btn--lavender:hover{background:var(--dark);color:var(--white)}
.bs2-btn--outline{background:transparent;color:var(--dark);border:1px solid var(--dark)}
.bs2-home .bs2-btn--outline:hover{background:var(--dark);color:var(--white)}
.bs2-btn--outline-light{background:transparent;color:var(--cream);border:1px solid var(--cream)}
.bs2-home .bs2-btn--outline-light:hover{background:var(--cream);color:var(--dark)}
.bs2-btn--sand{background:var(--sand);color:var(--dark)}
.bs2-home .bs2-btn--sand:hover{background:var(--terracotta);color:var(--white)}
/* Кит Elementor красит `.elementor-kit-138 button:hover` (0,1,1), и одноклассовые правила
   вариантов выше ему проигрывают. Поэтому для <button> каждый вариант повторяется с весом
   `.bs2-home button.bs2-btn--x` (0,2,1). Раньше тут стояло ОДНО общее правило на медный фон:
   из-за него <button class="bs2-btn--lavender"> на ховере уезжал в медный, а <a> с тем же
   классом — в тёмный, то есть одинаковые с виду кнопки вели себя по-разному. */
.bs2-home button.bs2-btn{border-radius:50px}
/* То же самое (0,1,1) кита бьёт и состояние ПОКОЯ, не только :hover — это не было
   починено раньше ни разу, поэтому любая <button class="bs2-btn--X"> сайта показывала
   акцентный цвет кита вместо заданного фона, пока на неё не наводили курсор (нашлось
   на кнопке Subscribe в Stay In Touch — фон был лавандовым вместо тёмного). */
.bs2-home button.bs2-btn--nav{background:var(--lavender-muted);color:var(--dark)}
.bs2-home button.bs2-btn--dark{background:var(--dark);color:var(--white)}
.bs2-home button.bs2-btn--copper{background:var(--copper);color:var(--white)}
.bs2-home button.bs2-btn--lavender{background:var(--lavender-muted);color:var(--dark)}
.bs2-home button.bs2-btn--outline{background:transparent;color:var(--dark);border:1px solid var(--dark)}
.bs2-home button.bs2-btn--outline-light{background:transparent;color:var(--cream);border:1px solid var(--cream)}
.bs2-home button.bs2-btn--sand{background:var(--sand);color:var(--dark)}
.bs2-home button.bs2-btn--nav:hover,.bs2-home button.bs2-btn--nav:focus-visible{background:var(--dark);color:var(--white)}
.bs2-home button.bs2-btn--dark:hover,.bs2-home button.bs2-btn--dark:focus-visible{background:var(--terracotta);color:var(--white)}
.bs2-home button.bs2-btn--copper:hover,.bs2-home button.bs2-btn--copper:focus-visible{background:var(--terracotta);color:var(--white)}
.bs2-home button.bs2-btn--lavender:hover,.bs2-home button.bs2-btn--lavender:focus-visible{background:var(--dark);color:var(--white)}
.bs2-home button.bs2-btn--outline:hover,.bs2-home button.bs2-btn--outline:focus-visible{background:var(--dark);color:var(--white);border-color:var(--dark)}
.bs2-home button.bs2-btn--outline-light:hover,.bs2-home button.bs2-btn--outline-light:focus-visible{background:var(--cream);color:var(--dark);border-color:var(--cream)}
.bs2-home button.bs2-btn--sand:hover,.bs2-home button.bs2-btn--sand:focus-visible{background:var(--terracotta);color:var(--white)}
/* Запасной вариант для кнопки без модификатора — чтобы она не осталась совсем без состояния. */
.bs2-home button.bs2-btn:not([class*="bs2-btn--"]):hover{background:var(--terracotta);color:var(--white)}

/* ===== ТОПБАР ===== */
.bs2-topbar{background:var(--dark);color:var(--white);font-size:12px;font-weight:300;padding:14px 0}
.bs2-topbar__inner{max-width:var(--shell);margin:0 auto;padding:0 var(--pad);display:flex;justify-content:space-between;align-items:center}
.bs2-topbar__left,.bs2-topbar__right{display:flex;gap:24px;align-items:center}
.bs2-topbar__right a{color:var(--white) !important}
.bs2-topbar__right a:hover{text-decoration:underline}

/* ===== МЕНЮ ===== */
.bs2-nav{padding:14px 0;background:var(--cream);position:sticky;top:0;z-index:100}
.bs2-nav__inner{max-width:var(--shell);margin:0 auto;padding:0 var(--pad);display:flex;justify-content:space-between;align-items:center}
.bs2-nav__logo img{height:52px;width:auto}
.bs2-nav__menu{display:flex;list-style:none;gap:28px;align-items:center}
.bs2-nav__menu>li>a{font-size:20px;font-weight:300;color:var(--dark);display:flex;align-items:center;gap:6px}
/* Было `font-weight:600` — на ховере пункт становился жирнее, менял ширину и толкал соседние
   пункты меню. Цвет + подчёркивание дают тот же отклик, но ничего не двигают.
   :not(.bs2-btn) — у Book Now своя кнопочная реакция (заливка), подчёркивание текстовой
   ссылки ей не нужно и не по макету. */
.bs2-nav__menu>li>a:not(.bs2-btn){position:relative;transition:color .2s var(--ease-out)}
.bs2-nav__menu>li>a:not(.bs2-btn)::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--terracotta);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease-out)}
/* Ховер — ТОЛЬКО для настоящего курсора. На тач-экране :hover залипает после тапа:
   проверено тапом по «Treatments» — цвет уходил в терракоту (125,76,56), полоска
   ::after разворачивалась в scaleX(1) и висела поверх серого разделителя дровера,
   пока не тапнешь в пустое место. Отклик на касание даёт :active в мобильном блоке.
   Кит Elementor тут не мешает: его `.elementor-kit-138 a:hover{color:#291F23}` —
   это ровно var(--dark), то есть обычный цвет пункта, видимой разницы не даёт. */
@media(hover:hover){
  .bs2-nav__menu>li>a:not(.bs2-btn):hover{color:var(--terracotta)}
  .bs2-nav__menu>li>a:not(.bs2-btn):hover::after{transform:scaleX(1)}
}
/* Было: юникод-символ «⌄» — рисуется системным шрифтом жирным и непропорционально
   крупным относительно текста пункта. Тонкая стрелка через границы читается как в макете. */
.bs2-nav__chevron{display:inline-block;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);position:relative;top:-2px;transition:transform .22s var(--ease-out)}
/* `> a >` — только шеврон САМОГО триггера («About»/«Treatments»), не вложенный
   шеврон флаута специалистов глубоко внутри панели: у него общий класс .bs2-nav__chevron,
   и без ограничения на прямого потомка это правило перебивало его собственный поворот. */
.bs2-nav__item--dropdown:hover > a > .bs2-nav__chevron,
.bs2-nav__item--dropdown:focus-within > a > .bs2-nav__chevron{transform:rotate(225deg);top:1px}
.bs2-nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.bs2-nav__toggle span{width:22px;height:2px;background:var(--dark);border-radius:1px}
/* Кит Elementor красит ЛЮБОЙ <button> заливкой акцента: `.elementor-kit-138 button`
   (0,1,1) весомее, чем наше `.bs2-nav__toggle{background:none}` (0,1,0), и бургер
   на мобилке был лавандовым, хотя в разметке фон явно выключен. Вес поднят префиксом. */
.bs2-home .bs2-nav__toggle{background:none}

/* ---------- Мобильный дровер: элементы, которых нет на ПК ----------
   Лого — три варианта картинкой (герб для ПК, тёмный/светлый вордмарк для мобилки),
   переключаются брейкпоинтом и классом .is-open, а не одна картинка с CSS-обрезкой. */
.bs2-home .bs2-nav__logo{display:flex;align-items:center}
.bs2-home .bs2-nav__logo-mobile,.bs2-home .bs2-nav__logo-mobile-light{display:none}
.bs2-home .bs2-nav__quickform{display:none}
.bs2-home .bs2-nav__back{display:none}
.bs2-home .bs2-nav__drawer-footer{display:none}
.bs2-home .bs2-nav__cta-contact{display:none}

/* ---------- Дропдаун «Treatments» (ПК) ----------
   Гэп до панели зашит ВНУТРЬ .bs2-nav__dropdown как padding-top, а не margin/top-отступ
   снаружи — так вся область до панели остаётся частью того же элемента, и наведение
   не разрывается при диагональном движении курсора от пункта меню к панели. */
.bs2-nav__item{position:relative}
/* left:0, а не центрирование под словом — пункт стоит у левого края меню, и центрированная
   под ним панель шириной 1040px вылезала за левый край вьюпорта. */
.bs2-nav__dropdown{position:absolute;top:100%;left:0;transform:translateY(4px);
  padding-top:20px;width:1040px;max-width:calc(100vw - 40px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility .2s;z-index:200}
.bs2-nav__item--dropdown:hover .bs2-nav__dropdown,
.bs2-nav__item--dropdown:focus-within .bs2-nav__dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.bs2-nav__dropdown-panel{background:var(--white);border-radius:16px;box-shadow:0 24px 60px rgba(41,31,35,.18);padding:38px 44px}
.bs2-nav__dd-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:32px}
.bs2-nav__dd-heading{display:block;font-family:var(--serif);font-size:19px;font-style:italic;color:var(--copper);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid rgba(41,31,35,.12)}
.bs2-nav__dd-col ul{list-style:none}
.bs2-nav__dd-col ul li a{display:block;font-size:14px;font-weight:300;color:var(--dark);padding:5px 0;line-height:1.35}
.bs2-nav__dd-foot{margin-top:28px;padding-top:22px;border-top:1px solid rgba(41,31,35,.12);display:flex;justify-content:flex-end}

/* ---------- Дропдаун «About» (ПК) — простой список + вложенный флаут специалистов ---------- */
.bs2-nav__dropdown--about{width:250px}
.bs2-nav__dropdown-panel--simple{padding:14px 0}
.bs2-nav__simple-list{list-style:none}
.bs2-nav__simple-list>li{position:relative}
.bs2-nav__simple-list>li>a,
.bs2-nav__flyout-trigger{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:15px;font-weight:300;color:var(--dark);padding:11px 26px;
}
.bs2-nav__flyout-trigger{cursor:pointer;-webkit-tap-highlight-color:transparent}
/* «Our Specialist» стал ссылкой на каталог /specialists/. Цвет прописан явно и с весом
   (0,3,1): базовое правило выше — (0,1,0), а кит Elementor задаёт `.elementor-kit-138 a`
   весом (0,1,1) и перекрашивает любую голую ссылку (так имя врача на /specialists/
   вышло розовым). */
.bs2-home .bs2-nav__simple-list>li>a.bs2-nav__flyout-trigger{color:var(--dark);text-decoration:none}
/* Стрелка у «Our Specialist» смотрит вправо — раскрытие идёт вбок, а не вниз,
   поэтому переиспользовать вниз-смотрящий .bs2-nav__chevron нельзя. */
/* border-bottom:none обязателен — без него сюда наследуется border-bottom из базового
   .bs2-nav__chevron (тот же элемент несёт оба класса), и вместо ▷ получались 3 стороны
   рамки разом (эффект «галочки», а не стрелки вбок). */
.bs2-nav__chevron--flyout{width:6px;height:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;border-bottom:none;transform:rotate(45deg);top:0}

.bs2-nav__flyout{
  position:absolute;left:100%;top:-14px;padding-left:8px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s var(--ease-out),visibility .2s;
}
.bs2-nav__item--flyout:hover .bs2-nav__flyout,
.bs2-nav__item--flyout:focus-within .bs2-nav__flyout{opacity:1;visibility:visible;pointer-events:auto}
.bs2-nav__flyout-panel{background:var(--white);border-radius:16px;box-shadow:0 24px 60px rgba(41,31,35,.18);padding:14px 0;min-width:210px}
.bs2-nav__flyout-panel ul{list-style:none}
.bs2-nav__flyout-panel ul li a{display:block;font-size:15px;font-weight:300;color:var(--dark);padding:11px 26px}

/* ===== HERO ===== */
.bs2-hero{background:var(--cream)}
.bs2-hero__container{max-width:var(--shell);margin:0 auto;padding:60px var(--pad) 70px;display:flex;justify-content:space-between;align-items:flex-start}
.bs2-hero__left{flex:0 0 52%}
.bs2-hero__label{display:block;font-size:18px;font-weight:400;letter-spacing:1px;text-transform:uppercase;margin-bottom:16px}
/* 128px — значение Figma при кадре 1440px (8.89vw); ниже масштабируется пропорционально */
.bs2-home .bs2-hero__title{font-family:var(--serif);font-size:clamp(40px,8.89vw,128px);font-weight:400;line-height:1;color:var(--dark);text-transform:uppercase}
.bs2-hero__right{flex:0 0 32%;text-align:right;display:flex;flex-direction:column;gap:28px;padding-top:4px}
.bs2-hero__features{display:flex;flex-direction:column}
.bs2-hero__feat{font-size:16px;font-weight:300;line-height:1.35;text-transform:uppercase}
.bs2-hero__feat--bold{font-weight:600}
.bs2-hero__coming{font-family:var(--script);font-size:40px;color:var(--dark)}
.bs2-hero__buttons{display:flex;gap:14px;justify-content:flex-end}
.bs2-hero__buttons .bs2-btn{font-size:18px;padding:16px 32px}
/* height, а не только min-height: `height:100%` у картинки внутри считается от ВЫСОТЫ
   родителя, а если у родителя задан лишь min-height, процент не резолвится и картинка
   падает в height:auto — снизу оставалась полоса тёмного фона (на мобилке ~59px из 180).
   Та же грабля, что была с фото в секции About. */
.bs2-hero__image{width:100%;overflow:hidden;height:400px;background:var(--charcoal)}
.bs2-hero__image img{width:100%;height:100%;object-fit:cover;display:block}

/* Бегущая строка */
.bs2-ticker{background:var(--lavender-muted);overflow:hidden;padding:16px 0}
.bs2-ticker__track{display:flex;gap:28px;animation:ticker 25s linear infinite;white-space:nowrap;width:max-content}
.bs2-ticker__track span{color:var(--dark);font-size:12px;font-weight:300;letter-spacing:.5px;text-transform:uppercase}
.bs2-ticker__sep{font-size:10px;margin:0 6px}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ===== ОБЩИЙ ЗАГОЛОВОК СЕКЦИИ (45px по Figma) ===== */
.bs2-home .bs2-sec-title{font-family:var(--serif);font-size:45px;font-weight:400;line-height:1.25;color:var(--dark);text-align:center;max-width:900px;margin:0 auto}
.bs2-home .bs2-sec-title em{font-style:italic;color:inherit}
.bs2-accent{font-style:normal;color:var(--copper)}

/* ===== OUR TREATMENTS ===== */
.bs2-treatments{background:var(--cream);padding:77px 0 93px}
.bs2-treatments__header{margin-bottom:55px}
/* Обёртка нужна, чтобы на мобилке рядом с «Our treatments» встала ссылка «See all services»
   (по эталону — сверху, а не только внизу у кнопки, как было раньше). На ПК ссылка внутри
   скрыта — там она остаётся только в футере секции, как и было. */
.bs2-treatments__kicker-row{max-width:var(--shell);margin:0 auto 25px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:16px}
.bs2-home .bs2-treatments__kicker{font-family:var(--serif);font-size:32px;font-weight:400;color:var(--dark)}
.bs2-treatments__kicker-more{display:none}
/* Ширины колонок из Figma (233/270), но высота у всех карточек одна — как на эталонном
   экране: нижние края и подписи выстроены в одну линию. */
.bs2-treatments__grid{display:grid;grid-template-columns:233fr 270fr 233fr 270fr 233fr;align-items:start;gap:15px;max-width:var(--shell);margin:0 auto 60px;padding:0 var(--pad)}
/* overflow:hidden на карточке — рамка для зума картинки по ховеру ниже */
.bs2-treat-card{display:block;overflow:hidden}
.bs2-treat-card__img{width:100%;height:281px;background-size:cover;background-position:center;transition:transform .45s var(--ease-out)}
.bs2-treat-card__label{display:block;font-size:20px;font-weight:400;color:var(--dark);margin-top:11px}
.bs2-treatments__footer{display:flex;align-items:center;justify-content:space-between;max-width:var(--shell);margin:0 auto;padding:0 var(--pad)}
.bs2-treatments__footer-label{font-size:20px;font-weight:300;color:var(--dark)}
.bs2-link-arrow{font-size:20px;font-weight:300;color:var(--dark);border-bottom:1px solid var(--dark);padding-bottom:2px}
/* «book a consult» — в исходном тексте нижним регистром, по макету капсом */
.bs2-treatments__footer .bs2-btn--lavender{text-transform:uppercase;letter-spacing:.03em}
.bs2-home .bs2-link-arrow:hover{color:var(--terracotta);border-color:var(--terracotta)}

/* ===== ABOUT MEDSPA — две карточки с отступами на сером фоне ===== */
.bs2-medspa{background:var(--cream);padding:85px 0}
.bs2-medspa__inner{max-width:var(--shell);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:697fr 616fr;gap:18px}
.bs2-medspa__left{background:var(--dark);color:var(--white);padding:53px 62px;display:flex;flex-direction:column}
.bs2-medspa__label{display:block;font-size:15px;font-weight:300;color:var(--white);margin-bottom:24px}
.bs2-home .bs2-medspa__title{font-family:var(--serif);font-size:55px;font-weight:400;line-height:1.1;color:var(--white);margin-bottom:20px}
.bs2-medspa__desc{font-size:18px;font-weight:400;color:var(--white);max-width:600px;line-height:1.45}
.bs2-medspa__highlights{margin-top:auto;padding-top:60px}
.bs2-medspa__hl-label{display:block;font-size:15px;font-weight:300;color:var(--white);margin-bottom:22px}
.bs2-medspa__hl-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 40px}
.bs2-medspa__hl{font-size:18px;font-weight:400;color:var(--white);display:flex;align-items:center;gap:12px}
/* Иконки хайлайтов — файлы от заказчика (assets/img/hl-*.svg). Подключены как CSS-маска,
   а не <img>: сами файлы приходят с зашитой белой обводкой, а маска красится
   через background-color и переживёт смену фона блока. */
.bs2-medspa__hl-icon{flex:0 0 auto;width:20px;height:20px;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.bs2-link-arrow-white{display:inline-block;margin-top:50px;font-size:15px;font-weight:400;color:var(--white)}
.bs2-link-arrow-white:hover{opacity:.75}
.bs2-medspa__right{background:var(--charcoal);background-size:cover;background-position:center;padding:53px 56px;display:flex;flex-direction:column}
.bs2-home .bs2-medspa__review-title{font-family:var(--serif);font-size:50px;font-weight:400;line-height:1.1;color:var(--white);margin-bottom:auto}
.bs2-review-card{background:var(--cream);border-radius:10px;padding:31px;margin-bottom:20px}
/* Было ОДНИМ отзывом статично — точки стояли просто картинкой, никуда не переключали.
   Теперь 3 слайда, показывается только .is-active, остальные скрыты */
.bs2-review-card__slide{display:none}
.bs2-review-card__slide.is-active{display:block}
.bs2-review-card__text{font-size:15px;font-weight:300;color:#000;line-height:1.55}
.bs2-review-card__author{display:block;text-align:right;font-family:var(--serif);font-style:italic;font-size:20px;color:#000;margin-top:14px}
.bs2-review-dots{display:flex;gap:6px;margin-top:12px}
/* Точки — теперь <button>, не <span>: должны быть кликабельными. И сразу с префиксом
   .bs2-home — та же грабля с китом Elementor (.elementor-kit-138 button, 0,1,1), что
   уже не раз ловили в этой сессии на других <button> — без префикса фон был бы
   акцентным цветом кита вместо тёмного. */
.bs2-home .bs2-review-dots button{width:6px;height:6px;padding:0;border:none;border-radius:50%;background:var(--dark);opacity:.35;cursor:pointer}
.bs2-home .bs2-review-dots button.active{opacity:1;background:#000}
/* Тап-зона точки визуально 6px, но кликабельная область шире — иначе не попасть пальцем.
   inset:-9px при зазоре gap:6px давал области СОСЕДНИХ точек внахлёст (расширение 9px
   в каждую сторону против всего 6px между точками) — клик по одной точке фактически
   попадал по соседней. Увеличен зазор и уменьшено расширение, чтобы зоны не перекрывались. */
.bs2-review-dots{gap:14px}
.bs2-review-dots button{position:relative}
.bs2-review-dots button::before{content:"";position:absolute;inset:-6px}
/* На мобилке 6px + 6px расширения = 18px тап-зоны, всё ещё меньше подушечки пальца.
   Разносим точки шире и расширяем зону до ~34px, не перекрывая соседние (gap 22 > 2×11). */
@media(max-width:768px){
  .bs2-review-dots{gap:22px;margin-top:16px}
  .bs2-review-dots button::before{inset:-11px}
}
.bs2-medspa__rating{display:flex;align-items:center;gap:10px;color:var(--white);font-size:13px;font-weight:400}
.bs2-stars{font-size:13px;letter-spacing:2px}
.bs2-medspa__yelp{margin-left:auto;font-size:13px}
.bs2-medspa__yelp:hover{text-decoration:underline}

/* ===== POPULAR TREATMENTS ===== */
.bs2-popular{background:var(--cream);padding:87px 0 0}
.bs2-popular__inner{max-width:var(--shell);margin:0 auto;padding:0 var(--pad)}
.bs2-popular__grid{margin-top:70px;border-top:1px solid rgba(41,31,35,.2);border-bottom:1px solid rgba(41,31,35,.2);padding:30px 0}
.bs2-popular__row{display:grid;grid-template-columns:654fr 662fr;gap:14px}
.bs2-popular__row+.bs2-popular__row{margin-top:14px}
/* Номер 01–04 — ВНУТРИ карточки, сверху слева (в Figma смещение +35/+32 от угла) */
.bs2-popular-card{position:relative;min-height:332px;display:flex;flex-direction:column;justify-content:flex-end;padding:35px;overflow:hidden}
/* Карточка целиком — ссылка на страницу процедуры (см. front-page.php).
   Кит Elementor красит `.elementor-kit-138 a:hover` (0,2,1) — без правила ниже
   при наведении карточка перекрашивалась бы в лавандовый цвет кита. Свой ховер
   карточкам не даём: по решению заказчика реагируют только ссылки и кнопки. */
.bs2-home a.bs2-popular-card,.bs2-home a.bs2-popular-card:hover{color:inherit;text-decoration:none}
.bs2-popular-card__num{position:absolute;top:32px;left:35px;font-size:20px;font-weight:300}
/* Иконка у «светлых» карточек (без фото) — правый нижний угол, медным цветом.
   В разметке её не было вовсе (не только битая ссылка — просто отсутствовала). */
/* Было в правом нижнем углу — заказчик показал скрином, что должна быть в правом
   верхнем, вровень с номером карточки (.bs2-popular-card__num — top:32px;left:35px). */
.bs2-popular-card__icon{position:absolute;right:35px;top:28px;width:30px;height:30px;color:var(--copper)}
.bs2-popular-card__icon svg,.bs2-popular-card__icon img{width:100%;height:100%;object-fit:contain;display:block}
.bs2-popular-card--light{background:var(--cream);border:1px solid rgba(41,31,35,.12)}
.bs2-popular-card--light .bs2-popular-card__num{color:var(--dark)}
.bs2-popular-card--photo{background-size:cover;background-position:center}
.bs2-popular-card--photo .bs2-popular-card__num,
.bs2-popular-card--photo .bs2-popular-card__body p{color:var(--white)}
.bs2-popular-card--morpheus8{background:linear-gradient(rgba(41,31,35,.2),rgba(41,31,35,.35)),url('img/popular-morpheus8.png');background-size:cover;background-position:center}
.bs2-popular-card--hydrafacial{background:linear-gradient(rgba(41,31,35,.2),rgba(41,31,35,.35)),url('img/popular-hydrafacial.png');background-size:cover;background-position:center}
.bs2-home .bs2-popular-card__title{font-family:var(--serif);font-size:45px;font-weight:400;line-height:1;margin-bottom:15px;color:var(--copper)}
.bs2-home .bs2-popular-card--photo .bs2-popular-card__title{color:var(--white)}
.bs2-popular-card__body p{font-size:18px;font-weight:300;line-height:1.3;max-width:465px;color:var(--dark)}

/* CTA «Take the First Step» — плашка во всю ширину, фон #E3C7B0 */
.bs2-popular__cta{background:var(--sand);padding:67px 20px 70px;text-align:center;margin-top:110px}
.bs2-home .bs2-popular__cta-title{font-family:var(--serif);font-size:65px;font-weight:400;line-height:1;color:var(--dark)}
.bs2-popular__cta-script{display:block;font-family:var(--script);font-size:40px;color:var(--terracotta);margin:15px 0 34px}

/* ===== BRANDS ===== */
.bs2-brands{background:var(--cream);padding:57px 0 60px}
.bs2-brands__inner{max-width:var(--shell);margin:0 auto;padding:0 var(--pad);text-align:center}
.bs2-home .bs2-brands__title{font-family:var(--serif);font-size:45px;font-weight:400;color:var(--dark);margin-bottom:35px}
.bs2-brands__divider{height:1px;background:rgba(41,31,35,.2)}
/* Логотипы — одной строкой и в цвете (в Figma они цветные, без обесцвечивания) */
.bs2-brands__logos{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 0}
.bs2-brand-img{max-height:88px;width:auto;max-width:16%;object-fit:contain}

/* ===== LET'S TALK — фото и лавандовая форма, обе с отступами ===== */
.bs2-lets-talk{background:var(--cream);padding:51px 0 50px}
.bs2-lets-talk__inner{max-width:var(--shell);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:616fr 697fr;gap:13px}
.bs2-lets-talk__photo{position:relative;min-height:663px;display:flex;align-items:flex-end;padding:42px;background:linear-gradient(rgba(41,31,35,.05),rgba(41,31,35,.05)),url('img/lets-talk-bg.png');background-size:cover;background-position:center}
.bs2-home .bs2-lets-talk__title{font-family:var(--serif);font-size:80px;font-weight:400;line-height:1;color:var(--dark);text-transform:uppercase}
.bs2-lets-talk__form{background:var(--lavender-muted);padding:48px 55px}
.bs2-form{display:flex;flex-direction:column;gap:11px}
.bs2-home .bs2-form input.bs2-form__input,
.bs2-home .bs2-form textarea.bs2-form__textarea{background:var(--cream);color:var(--dark);border:none;border-radius:12px;padding:16px 25px;font-family:var(--sans);font-weight:300;font-size:18px;line-height:1.3;letter-spacing:normal;outline:none;width:100%}
.bs2-home .bs2-form textarea.bs2-form__textarea{height:88px;resize:vertical}
.bs2-home .bs2-form input.bs2-form__input::placeholder,
.bs2-home .bs2-form textarea.bs2-form__textarea::placeholder{color:var(--gray)}
.bs2-lets-talk__actions{display:flex;align-items:center;justify-content:space-between;margin-top:25px}
.bs2-lets-talk__actions .bs2-btn{padding:12px 40px}
.bs2-lets-talk__socials{display:flex;gap:12px;align-items:center}
/* Было буквами f/IG/Y обычным текстом — заменено на квадратные бейджи с SVG-иконками.
   Тёмный бейдж тут (форма на светлом лавандовом фоне), в футере — наоборот светлый
   (там фон тёмный) через .bs2-footer__socials .bs2-social ниже. */
.bs2-social{width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;background:var(--dark);color:var(--white)}
/* fill не трогаем здесь: у Facebook/Yelp иконки залиты сплошным цветом (fill="currentColor"
   на самом svg), а у Instagram — контурная, с fill="none" явно на каждом <rect>/<circle>
   (у Elementor есть своё `.elementor-element svg{fill:currentColor}», которое иначе
   заливало бы контур сплошным). Общий fill:none тут сломал бы заливку первых двух. */
.bs2-social svg{width:15px;height:15px;display:block}
.bs2-lets-talk__socials a:hover{color:var(--terracotta)}
.bs2-lets-talk__rule{height:1px;background:rgba(41,31,35,.3);margin:32px 0 26px}
.bs2-lets-talk__note{font-size:18px;font-weight:300;color:var(--dark);line-height:1.35}
.bs2-lets-talk__contacts{display:flex;justify-content:space-between;gap:20px;margin-top:60px;font-size:15px;font-weight:300;color:var(--dark);line-height:1.5}
.bs2-lets-talk__contacts>div:last-child{text-align:right}

/* ===== COSMETIC SPECIALISTS ===== */
.bs2-specialists{background:var(--cream);position:relative;overflow:hidden}
.bs2-specialists__inner{max-width:var(--shell);margin:0 auto;padding:59px var(--pad) 60px;display:grid;grid-template-columns:1fr 640px;gap:20px;align-items:start}
.bs2-home .bs2-specialists__title{font-family:var(--serif);font-size:75px;font-weight:400;line-height:1;color:var(--dark)}
.bs2-specialists__sub{font-size:25px;font-weight:300;color:var(--dark);margin-top:12px}
/* Три преимущества идут В СТРОКУ (в Figma все три на одной линии y=237). Раньше
   комментарий это утверждал, а фактическая раскладка (gap 44 + max-width 230×3=778px
   в колонке шириной 640px) не влезала и переносилась в 2+1 — просто арифметика не
   сходилась. Сузили и убрали фиксированный max-width. */
.bs2-specialists__badges{display:flex;gap:20px;margin-top:70px;flex-wrap:nowrap}
.bs2-badge{display:flex;align-items:flex-start;gap:10px;font-size:15px;font-weight:400;color:var(--dark);flex:1;max-width:none;line-height:1.3}
/* Было плоской эмодзи-иконкой (★⚕🎓) — эмодзи рендерится по-разному на разных ОС
   и не совпадает со стилем сайта. Заменено на SVG в квадратной рамке медного цвета. */
/* Иконки — файлы от заказчика (assets/img/badge-*.svg), уже медного цвета.
   Рамку убрали: в эталоне иконка стоит просто так, без квадратной обводки. */
.bs2-badge__icon{flex:0 0 auto;width:30px;height:30px;display:flex;align-items:center;justify-content:center}
.bs2-badge__icon img{width:100%;height:100%;object-fit:contain;display:block}
.bs2-specialists__signoff{display:flex;align-items:center;gap:26px;margin-top:76px}
.bs2-specialists__tagline{font-family:var(--serif);font-style:italic;font-size:28px;color:var(--copper);white-space:nowrap}
.bs2-specialists__rule{flex:1;height:1px;background:rgba(41,31,35,.3)}
.bs2-pill{background:var(--dark);color:var(--white);padding:17px 36px;border-radius:60px;font-size:20px;font-weight:400;white-space:nowrap}
.bs2-specialists__photo{position:relative;min-height:414px;display:flex;align-items:flex-end;justify-content:center}
/* Лавандовый круг за фотографией врача — убран по уточнённому эталону (фон плоский) */
.bs2-specialists__photo::before{display:none}
/* aspect-ratio вместо фиксированной height:520px. Исходник 950×708 при ширине колонки
   640px рисуется как 640×477 — в боксе 520px оставалось 43px вертикального запаса, и
   `center bottom` прижимал фото вниз: над головой зияла дыра, а халат упирался в низ
   блока. Своя пропорция убирает запас совсем — фото поднимается на эти 43px, верх
   встаёт вровень с заголовком, снизу остаётся обычный padding секции (60px ≈ 59px
   сверху), то есть блок читается симметрично. Размер самой картинки не меняется:
   она и раньше упиралась в ширину колонки. Мобильные брейкпоинты ниже задают height
   явно — там она ограничена по высоте, запаса нет, и правило их не трогает. */
.bs2-doctor-photo{position:relative;width:100%;max-width:744px;aspect-ratio:950/708;background:url('img/specialists-doctor.png') center top/contain no-repeat}

/* ===== NEWS ===== */
.bs2-news{background:var(--cream);padding:53px 0 56px}
.bs2-news__inner{max-width:var(--shell);margin:0 auto;padding:0 var(--pad)}
.bs2-news__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bs2-news-card{min-height:356px;padding:89px 44px 44px;display:flex;flex-direction:column;align-items:center;text-align:center}
.bs2-home .bs2-news-card h3{font-family:var(--serif);font-size:30px;font-weight:400;line-height:1.15;color:var(--dark);margin-bottom:auto;text-transform:uppercase}
.bs2-news-card--lavender{background:var(--lavender-muted)}
.bs2-news-card--beige{background:var(--sand)}
.bs2-news-card--photo{background:linear-gradient(rgba(41,31,35,.25),rgba(41,31,35,.25)),url('img/news-photo-card.png');background-size:cover;background-position:center}
.bs2-home .bs2-news-card--photo h3{color:var(--cream)}
.bs2-news-card .bs2-btn{padding:12px 34px}
.bs2-news__more{display:block;text-align:center;margin-top:42px;font-size:18px;font-weight:300;color:var(--dark)}

/* ===== STAY IN TOUCH ===== */
/* background-position center TOP, а не center center: при `cover` на широком экране
   картинка обрезалась по вертикали симметрично и срезала девушкам макушки.
   Привязка к верху сохраняет головы в кадре, лишнее уходит снизу. */
.bs2-stay{padding:130px 0 100px;text-align:center;color:var(--white);background:linear-gradient(rgba(41,31,35,.12),rgba(41,31,35,.12)),url('img/stay-in-touch-bg.png');background-size:cover;background-position:center top}
.bs2-stay__inner{max-width:640px;margin:0 auto;padding:0 20px}
.bs2-home .bs2-stay__title{font-family:var(--script);font-size:96px;font-weight:400;line-height:1.1;color:var(--white)}
.bs2-stay__sub{font-size:20px;font-weight:400;color:var(--white);line-height:1.35;margin:8px 0 30px;text-transform:uppercase;letter-spacing:.02em}
/* Поле и кнопка — в столбик по центру (в Figma поле y=328, кнопка ниже, y=409) */
.bs2-stay__form{display:flex;flex-direction:column;align-items:center;gap:22px}
/* Было rgba(41,31,35,.55) — тёмная полупрозрачная плашка поверх фото; по эталону
   поле прозрачное, видно фон насквозь, только обводка. */
.bs2-home .bs2-stay__form input.bs2-stay__input{width:334px;max-width:100%;background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.5);border-radius:15px;padding:12px 27px;font-family:var(--sans);font-weight:300;font-size:15px;letter-spacing:normal;outline:none}
.bs2-home .bs2-stay__form input.bs2-stay__input::placeholder{color:rgba(255,255,255,.85)}
.bs2-stay .bs2-btn{padding:12px 38px;text-transform:uppercase;letter-spacing:.04em}

/* ===== ПОДВАЛ ===== */
.bs2-footer{background:var(--dark);color:var(--white);padding:56px 0 40px}
.bs2-footer__grid{max-width:var(--shell);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:40px}
.bs2-footer__col{font-size:15px;font-weight:300;color:var(--white);line-height:1.6}
.bs2-footer__col p+p{margin-top:14px}
.bs2-home .bs2-footer__col h4{font-family:var(--sans);font-size:18px;font-weight:300;color:var(--white);margin-bottom:48px;text-transform:none}
.bs2-footer__col ul{list-style:none}
.bs2-footer__col ul li{margin-bottom:12px}
.bs2-footer__col ul li a{font-size:18px;font-weight:400;color:var(--white)}
.bs2-footer__col ul li a:hover{opacity:.7}
.bs2-footer__copy{margin:0;font-size:16px;font-weight:300;opacity:.8}
.bs2-footer__col--last{position:relative;display:flex;flex-direction:column}
/* Кружок «наверх» — в Figma он в правом верхнем углу подвала (Ellipse 25) */
.bs2-footer__up{width:33px;height:33px;border:1px solid rgba(255,255,255,.6);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--white)}
.bs2-footer__up:hover{background:var(--white);color:var(--dark)}
.bs2-footer__socials{display:flex;gap:12px}
/* Фон футера тёмный — бейдж инвертирован (светлый квадрат, тёмная иконка) */
.bs2-footer__socials .bs2-social{background:var(--white);color:var(--dark)}
.bs2-footer__socials a:hover{opacity:.7}

/* Видимый фокус для клавиатуры и экранных дикторов — по умолчанию его нигде не было */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--copper);outline-offset:3px}

/* Бегущая строка крутится бесконечно: на телефоне это лишний расход батареи,
   а для пользователей с чувствительностью к движению — ещё и помеха. */
@media(prefers-reduced-motion:reduce){
.bs2-ticker__track{animation:none}
*{scroll-behavior:auto !important}
}

/* ===== АДАПТИВ =====
   Ступени: 1200 — узкий десктоп/планшет-альбом, 1024 — планшет-портрет,
   768 — телефон, 480 — узкий телефон. Десктопная раскладка (>1200) не меняется. */

/* ---------- ≤1200: узкий десктоп и планшет в альбомной ---------- */
@media(max-width:1200px){
:root{--pad:40px}
.bs2-nav__menu{gap:18px}
.bs2-nav__menu>li>a{font-size:17px}
.bs2-nav__logo img{height:46px}
.bs2-home .bs2-specialists__title{font-size:58px}
.bs2-specialists__inner{grid-template-columns:1fr 42%}
.bs2-specialists__badges{gap:26px;margin-top:46px}
.bs2-badge{font-size:18px}
.bs2-specialists__photo::before{width:100%;height:auto;aspect-ratio:1}
.bs2-doctor-photo{height:430px}
.bs2-medspa__left{padding:44px 46px}
.bs2-medspa__right{padding:44px 40px}
.bs2-lets-talk__form{padding:40px 40px}
}

/* ---------- ≤1024: планшет в портретной ---------- */
@media(max-width:1024px){
/* В колоночном flex значение flex-basis задаёт ВЫСОТУ, поэтому проценты с десктопа
   надо сбросить — иначе колонки hero схлопываются по вертикали. */
.bs2-hero__container{flex-direction:column;gap:34px;padding:44px var(--pad) 50px}
.bs2-hero__left,.bs2-hero__right{flex:0 0 auto;width:100%}
.bs2-hero__right{text-align:left;padding-top:0}
.bs2-hero__features{align-items:flex-start}
.bs2-hero__buttons{justify-content:flex-start}
.bs2-hero__coming{font-size:32px}
.bs2-hero__image{height:320px}

/* На планшете кегли заголовков ещё оставались десктопными — приводим к шкале ступени */
.bs2-home .bs2-sec-title{font-size:34px}
.bs2-home .bs2-treatments__kicker{font-size:26px}
.bs2-home .bs2-medspa__title{font-size:40px}
.bs2-home .bs2-medspa__review-title{font-size:36px}
.bs2-home .bs2-popular-card__title{font-size:32px}
.bs2-home .bs2-popular__cta-title{font-size:44px}
.bs2-popular__cta-script{font-size:30px}
.bs2-home .bs2-brands__title{font-size:34px}
.bs2-home .bs2-lets-talk__title{font-size:56px}
.bs2-home .bs2-specialists__title{font-size:46px}
.bs2-home .bs2-stay__title{font-size:64px}
.bs2-home .bs2-news-card h3{font-size:24px}

.bs2-treatments{padding:56px 0 64px}
.bs2-treatments__grid{grid-template-columns:repeat(3,1fr);gap:14px}
.bs2-treat-card__img{height:230px}

.bs2-medspa{padding:56px 0}
.bs2-medspa__inner{grid-template-columns:1fr;gap:14px}
.bs2-medspa__highlights{padding-top:40px}
.bs2-link-arrow-white{margin-top:32px}

.bs2-popular{padding:56px 0 0}
.bs2-popular__row{grid-template-columns:1fr}
.bs2-popular-card{min-height:280px;padding:28px}
.bs2-popular-card__num{top:24px;left:28px}
.bs2-popular__cta{margin-top:64px;padding:52px 20px 56px}

.bs2-brands__logos{flex-wrap:wrap;justify-content:center;gap:30px}
.bs2-brand-img{max-width:26%;max-height:64px}

.bs2-lets-talk{padding:36px 0}
.bs2-lets-talk__inner{grid-template-columns:1fr;gap:14px}
.bs2-lets-talk__photo{min-height:420px}
.bs2-lets-talk__contacts{margin-top:40px}

.bs2-specialists__inner{grid-template-columns:1fr;padding:44px var(--pad) 48px}
.bs2-specialists__badges{margin-top:36px}
.bs2-specialists__signoff{margin-top:44px}
.bs2-specialists__photo{min-height:400px;margin-top:24px}
/* Когда блок перестаёт быть двухколоночным, фото уходит ПОД текст. Здесь диаметр круга
   надо считать от ВЫСОТЫ контейнера, а не от ширины: иначе круг вылезает вверх
   (на 768px — на 428px) и наезжает на строку «You're in trusted hands». */
.bs2-specialists__photo::before{width:auto;height:100%;aspect-ratio:1}
.bs2-doctor-photo{height:400px}

.bs2-news{padding:44px 0}
.bs2-news__grid{grid-template-columns:1fr 1fr}
.bs2-news-card{min-height:300px;padding:56px 32px 32px}

.bs2-stay{padding:96px 0 80px}
}

/* ---------- ≤768: телефон ---------- */
@media(max-width:768px){
:root{--pad:20px}
/* Тёмная полоса с адресом/телефоном сверху — по просьбе заказчика убрана на мобилке.
   Тот же адрес/телефон остаётся в футере страницы и в футере открытого дровера. */
.bs2-topbar{display:none}
/* Без топбара шапка стала первым элементом страницы, и 14px базового паддинга
   (рассчитанного на то, что сверху уже есть тёмная полоса) смотрелись слишком плотно
   к самому краю экрана. */
.bs2-nav{padding:24px 0 14px}
.bs2-topbar__inner{flex-direction:column;gap:6px}
.bs2-topbar__left,.bs2-topbar__right{gap:14px;flex-wrap:wrap;justify-content:center}

.bs2-nav__inner{flex-wrap:wrap;position:relative}
.bs2-home .bs2-nav__logo{order:0}
.bs2-nav__logo img{height:40px}
/* Герб — только на ПК; на мобилке — плоский вордмарк без монограммы (см. референс). */
.bs2-home .bs2-nav__logo-desktop{display:none}
.bs2-home .bs2-nav__logo-mobile{display:block}

/* Префикс `.bs2-home` везде ниже — не косметика: кит Elementor задаёт
   `.elementor-kit-138 button{padding:15px 36px;background-color:var(--e-global-color-accent)}`
   весом (0,1,1), а голое `.bs2-nav__back{...}` (0,1,0) ему проигрывает — ПК-кнопка
   «назад» рисовалась родным Elementor-пэддингом (82px вместо 36) и лавандовым фоном
   кита вместо прозрачного. Тот же кит бьёт и quickform/toggle. */
/* Иконка-карандаш (быстрая форма записи) убрана с мобильной шапки по просьбе заказчика.
   Разметка в header.php оставлена — если понадобится вернуть, достаточно снять display:none. */
.bs2-home .bs2-nav__quickform{display:none}

/* margin-left:auto забирает всё свободное место — лого прижимается влево, бургер вправо.
   Раньше auto стоял на карандаше (он шёл первым); после его скрытия перенесён сюда,
   иначе бургер уехал бы к центру. */
.bs2-home .bs2-nav__toggle{order:2;margin-left:auto;display:flex;width:44px;height:44px;justify-content:center;padding:8px}
/* Бургер превращается в крестик — без этого непонятно, открыто меню или нет */
.bs2-nav__toggle span{transition:transform .25s,opacity .2s}
.bs2-nav.is-open .bs2-nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.bs2-nav.is-open .bs2-nav__toggle span:nth-child(2){opacity:0}
.bs2-nav.is-open .bs2-nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Стрелка «назад» — вместо крестика-бургера в открытом дровере, слева, поверх лого по центру.
   Тело дровера светлое (см. ниже), поэтому цвет тёмный, а не кремовый. */
.bs2-home .bs2-nav__back{
  display:none;position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:36px;height:36px;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;color:var(--dark);padding:0;z-index:1;
}
.bs2-home .bs2-nav__back-arrow{display:inline-block;width:10px;height:10px;border-top:1.5px solid currentColor;border-left:1.5px solid currentColor;transform:rotate(-45deg)}

/* Стрелки-шевроны у пунктов в самом дровере по макету не показываются, КРОМЕ пунктов
   с реальным вложенным меню (About, Treatments) — там шеврон нужен как индикатор
   раскрывашки-аккордеона (тач-устройство не умеет ховер, поэтому структура ПК-дропдауна
   на мобилке превращается именно в аккордеон, а не в мегапанель поверх контента). */
.bs2-nav__chevron{display:none}
.bs2-nav__item--dropdown > a > .bs2-nav__chevron{display:inline-block;transition:transform .22s var(--ease-out)}
.bs2-nav__item--dropdown.is-expanded > a > .bs2-nav__chevron{transform:rotate(225deg);top:1px}
.bs2-nav__flyout-trigger .bs2-nav__chevron--flyout{display:inline-block;transition:transform .22s var(--ease-out)}
/* Флаут «Our Specialist» раскрывается вниз (аккордеон второго уровня), а не вбок,
   как на ПК, — стрелка с «▷» доворачивается до «▽». */
.bs2-nav__item--flyout.is-expanded .bs2-nav__chevron--flyout{transform:rotate(135deg)}

/* ---------- Аккордеон вложенных меню (About, Treatments) — та же структура,
   что и дропдауны ПК, просто в потоке, а не абсолютной панелью поверх контента. ---------- */
.bs2-nav__item--dropdown{position:static}
.bs2-nav__item--dropdown > a{touch-action:manipulation}
.bs2-nav__item--dropdown .bs2-nav__dropdown{
  position:static;width:auto;max-width:none;padding-top:0;
  opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:none;
  display:none;z-index:auto;
}
.bs2-nav__item--dropdown.is-expanded .bs2-nav__dropdown{display:block}
.bs2-nav__dropdown-panel{background:transparent;border-radius:0;box-shadow:none;padding:2px 0 16px}
.bs2-nav__dd-grid{display:block}
/* Категории идут единым списком в том же ритме, что и пункты верхнего уровня.
   Было margin-top:14px + padding 11px у заголовка = ~36px между строками без
   разделителей — категории висели в воздухе и читались как чужеродный блок. */
.bs2-nav__dd-col{margin-top:0}
.bs2-nav__dd-col:first-child{margin-top:0}
/* Заголовок категории (Injectables, Injection Areas…) — сам аккордеон третьего уровня:
   иначе Treatments разворачивается сразу в простыню из 30+ пунктов. Стрелка — псевдоэлемент,
   без правки header.php (там этот span повторяется 5 раз). */
/* На ПК заголовок категории — медный курсив (акцент мегапанели). На мобилке это по сути
   обычный пункт меню-аккордеона, поэтому сброшены font-family/style/color до тех же,
   что у остальных пунктов — иначе он выглядел «наклонным и коричневым» на общем фоне. */
/* font-weight:300, как у остальных пунктов дровера. Было 400 — при одинаковом
   Poppins/16px категории выглядели заметно жирнее соседей, и заказчик прочитал это
   как «другой шрифт». Разделитель под категорией светлее (.10 против .18 у верхнего
   уровня) — вложенность видна, но список читается одним ритмом. */
.bs2-nav__dd-heading{font-family:var(--sans);font-style:normal;font-weight:300;color:var(--dark);font-size:16px;padding:11px 22px 11px 0;margin-bottom:0;border-bottom:1px solid rgba(41,31,35,.10);position:relative;cursor:pointer;touch-action:manipulation}
.bs2-nav__dd-heading::after{content:'';position:absolute;right:2px;top:50%;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);transition:transform .22s var(--ease-out)}
/* У последней категории разделитель не нужен: сразу под ней идёт .bs2-nav__dd-foot
   со своим border-top, и две линии в 6px друг от друга читались как двойная.
   Правило стоит ДО .is-expanded (та же специфичность 0,3,0) — в раскрытом виде
   линия возвращается, отделяя заголовок от его списка. */
.bs2-nav__dd-col:last-child .bs2-nav__dd-heading{border-bottom:none}
.bs2-nav__dd-col.is-expanded .bs2-nav__dd-heading{border-bottom:1px solid rgba(41,31,35,.12);margin-bottom:4px}
.bs2-nav__dd-col.is-expanded .bs2-nav__dd-heading::after{transform:translateY(-30%) rotate(225deg)}
.bs2-nav__dd-col ul{display:none}
.bs2-nav__dd-col.is-expanded ul{display:block}
.bs2-nav__dd-col ul li a{padding:10px 0 10px 16px;font-size:15px;min-height:40px;display:flex;align-items:center}
.bs2-nav__dd-foot{margin-top:6px;padding-top:16px;justify-content:flex-start}
/* Тёмное подчёркивание .bs2-link-arrow (сплошное, по ширине текста) рядом со светлыми
   разделителями дровера читалось как залипший ховер. Стрелки → достаточно, чтобы
   пункт читался ссылкой. На остальных страницах класс не трогаем. */
.bs2-nav__dd-foot .bs2-link-arrow{border-bottom:none}

/* Дропдаун About — тот же приём: простой список в потоке */
.bs2-nav__dropdown--about{width:auto}
.bs2-nav__dropdown-panel--simple{padding:2px 0 8px}
.bs2-nav__simple-list>li>a{padding:10px 0 10px 16px;font-size:15px;min-height:40px}
.bs2-nav__flyout-trigger{padding:10px 0 10px 16px;font-size:15px;min-height:40px;touch-action:manipulation}
.bs2-nav__flyout{
  position:static;left:auto;top:auto;padding-left:0;
  opacity:1;visibility:visible;pointer-events:auto;
  display:none;
}
.bs2-nav__item--flyout.is-expanded .bs2-nav__flyout{display:block}
.bs2-nav__flyout-panel{background:transparent;box-shadow:none;border-radius:0;padding:0;min-width:0}
.bs2-nav__flyout-panel ul li a{padding:10px 0 10px 32px;font-size:14.5px;min-height:40px;display:flex;align-items:center}

/* Два списка меню должны читаться как одна панель, поэтому разделитель только у верхнего.
   Панель ограничена по высоте и прокручивается — на невысоких экранах пункты
   иначе уходят за пределы вьюпорта без возможности до них добраться. */
/* align-items:stretch ОБЯЗАТЕЛЕН: базовый десктопный `.bs2-nav__menu` задаёт
   `align-items:center`, и в колоночной раскладке это сжимало каждый <li> до ширины
   текста — пункты вставали по центру, а разделительные линии получались разной длины
   по слову вместо ровных линий во всю ширину, как в макете. */
.bs2-nav__menu{display:none;width:100%;flex-direction:column;align-items:stretch;background:transparent;padding:0;gap:0}
.bs2-nav__menu--left{order:3;padding-top:0}
.bs2-nav__menu--right{order:4;padding-bottom:10px}
.bs2-nav__menu>li{border-bottom:1px solid rgba(41,31,35,.18)}
/* Линия под лого в макете отсутствует — список начинается сразу с «About»,
   а разделители идут ПОД каждым пунктом. */
.bs2-nav.is-open .bs2-nav__menu--left{max-height:none;overflow-y:visible;margin-top:34px;border-top:none}
.bs2-nav__menu.active{display:flex}
/* Тап-зона пункта — не меньше 44px по высоте */
.bs2-nav__menu>li>a{min-height:44px;padding:11px 0;justify-content:flex-start;font-size:16px;color:var(--dark)}
/* Полоска-подчёркивание ::after — affordance для курсора, в дровере она не нужна:
   роль разделителя уже играет border-bottom у <li>, а медная линия ложилась прямо
   поверх серой и выглядела грязно. Ховер сюда всё равно больше не доезжает
   (правило выше закрыто в @media(hover:hover)), но прячем и саму полоску. */
.bs2-nav__menu>li>a:not(.bs2-btn)::after{display:none}
/* Свой отклик на касание вместо системной синей вспышки — на тач это единственная
   обратная связь, раз ховера нет. */
.bs2-nav__menu a,.bs2-nav__dd-heading,.bs2-nav__flyout-trigger{-webkit-tap-highlight-color:transparent}
.bs2-nav__menu>li>a:not(.bs2-btn):active,
.bs2-nav__dd-heading:active,
.bs2-nav__dd-col ul li a:active,
.bs2-nav__simple-list>li>a:active,
.bs2-nav__flyout-trigger:active,
.bs2-nav__flyout-panel ul li a:active{background:rgba(41,31,35,.06)}

/* CTA-строка Book Now: кнопка + короткие часы/почта рядом, без нижней линии пункта */
.bs2-nav__cta-row{border-bottom:none !important;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:26px 0 10px}
.bs2-home .bs2-nav__cta-row .bs2-btn--nav{margin-top:0;flex:0 0 auto;padding:11px 22px;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.bs2-home .bs2-nav__cta-contact{display:block;font-size:12px;line-height:1.6;text-align:right;color:var(--dark);opacity:.75}

/* ---------- Открытая панель — светлое тело дровера на весь экран + тёмный футер снизу, по референсу.
   Раньше делали ВЕСЬ дровер тёмным — заказчик прислал уточнённый макет: тёмная ТОЛЬКО
   нижняя полоса (бывший топбар, переехавший вниз), тело меню — обычный светлый фон сайта. */
.bs2-nav.is-open{
  position:fixed;inset:0;z-index:300;
  display:flex;flex-direction:column;
  background:var(--cream);overflow-y:auto;padding:0;
}
.bs2-nav.is-open .bs2-nav__inner{
  flex:1 0 auto;padding-top:22px;justify-content:center;align-content:flex-start;
}
/* В дровере логотип мельче, чем в закрытой шапке (в макете ~125px против 170px) */
.bs2-nav.is-open .bs2-nav__logo img{height:30px}
.bs2-home .bs2-nav.is-open .bs2-nav__toggle,
.bs2-home .bs2-nav.is-open .bs2-nav__quickform{display:none}
/* top:50% в закрытом состоянии считался от короткой строки-шапки (44px) — верно.
   В открытом .bs2-nav__inner становится высотой во весь скролл-контент дровера,
   и тот же top:50% утаскивал стрелку куда-то в район «Blog». Фиксируем абсолютным отступом. */
.bs2-home .bs2-nav.is-open .bs2-nav__back{display:flex;top:18px;transform:none}
/* Тело светлое — логотип обычный тёмный, светлый вариант больше не нужен здесь. */
.bs2-home .bs2-nav.is-open .bs2-nav__logo-mobile{display:block}
.bs2-home .bs2-nav.is-open .bs2-nav__logo-mobile-light{display:none}

/* Топбар прячем, пока дровер открыт — его роль (адрес/телефон) берёт на себя тёмный футер дровера */
body.nav-open .bs2-topbar{display:none}
body.nav-open .bs2-nav__drawer-footer{display:flex}

.bs2-nav__drawer-footer{
  flex:0 0 auto;display:none;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding:16px var(--pad);background:var(--dark);
  font-size:12px;color:var(--cream);
}
/* Раньше фон футера держался только на тёмном фоне ВСЕГО дровера (сам футер фона не
   задавал) — теперь, когда тело дровера светлое, фон нужен явно, иначе кремовый текст
   лёг бы на кремовый фон. */
.bs2-nav__drawer-footer a{color:var(--cream)}

.bs2-hero__container{padding:32px var(--pad) 34px;gap:26px}
.bs2-hero__label{font-size:14px;margin-bottom:12px}
.bs2-hero__feat{font-size:14px}
.bs2-hero__coming{font-size:26px}
.bs2-hero__buttons{flex-wrap:wrap;gap:10px}
.bs2-hero__buttons .bs2-btn{font-size:15px;padding:13px 24px}
.bs2-hero__image{height:230px}
.bs2-ticker{padding:12px 0}

/* max-width:900px у .bs2-sec-title на десктопе центрирует заголовок в шелле 1440px,
   а на мобилке 900px ШИРЕ экрана — ограничение не срабатывает, и заголовок (у которого
   своего padding нет, в отличие от соседних .bs2-treatments__kicker/__grid/__footer
   с их 20px) прижимался вплотную к обоим краям. Общий класс — чинит все секции разом. */
.bs2-home .bs2-sec-title{font-size:26px;padding:0 var(--pad)}
.bs2-home .bs2-treatments__kicker{font-size:22px}
.bs2-treatments{padding:44px 0 48px}
.bs2-treatments__header{margin-bottom:34px}
.bs2-treatments__grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:34px}
.bs2-treat-card__img{height:180px}
.bs2-treat-card__label{font-size:16px;margin-top:8px}
.bs2-treatments__footer{flex-direction:column;gap:16px;align-items:flex-start}
/* «See all services» на мобилке — сверху рядом с «Our treatments», не внизу у кнопки
   (переставлено по просьбе заказчика). Нижний дубль в футере секции на мобилке прячем,
   чтобы ссылка не повторялась дважды. */
.bs2-treatments__kicker-more{display:inline-flex;font-size:14px;min-height:auto;white-space:nowrap}
.bs2-treatments__footer .bs2-link-arrow{display:none}
.bs2-treatments__footer-label,.bs2-link-arrow{font-size:16px}

.bs2-medspa{padding:36px 0}
.bs2-medspa__left,.bs2-medspa__right{padding:32px 22px}
.bs2-home .bs2-medspa__title{font-size:32px}
.bs2-medspa__desc{font-size:16px}
.bs2-home .bs2-medspa__review-title{font-size:28px}
.bs2-medspa__hl-grid{grid-template-columns:1fr;gap:14px}
.bs2-medspa__hl{font-size:16px}
/* На десктопе карточку отталкивает `margin-bottom:auto` у заголовка (высота колонки
   задана фото-фоном). На мобилке контейнер по высоте контента, auto схлопывается в 0,
   и карточка вставала ВПРИТЫК к «About us:» — нужен явный отступ. */
.bs2-review-card{padding:22px;margin-top:22px}
.bs2-medspa__rating{flex-wrap:wrap;gap:8px}
.bs2-medspa__yelp{margin-left:0}

.bs2-popular{padding:40px 0 0}
.bs2-popular__grid{margin-top:34px;padding:20px 0}
.bs2-popular-card{min-height:240px;padding:22px}
.bs2-popular-card__num{top:18px;left:22px;font-size:16px}
.bs2-home .bs2-popular-card__title{font-size:26px}
.bs2-popular-card__body p{font-size:15px}
.bs2-popular__cta{margin-top:44px;padding:40px 20px 44px}
.bs2-home .bs2-popular__cta-title{font-size:32px}
.bs2-popular__cta-script{font-size:24px}
.bs2-btn--copper{font-size:17px;padding:10px 24px}

.bs2-brands{padding:36px 0 40px}
.bs2-home .bs2-brands__title{font-size:26px}
.bs2-brands__logos{gap:22px;padding:20px 0}
.bs2-brand-img{max-width:38%;max-height:48px}

.bs2-lets-talk{padding:28px 0}
.bs2-lets-talk__photo{min-height:300px;padding:22px}
.bs2-home .bs2-lets-talk__title{font-size:40px}
.bs2-lets-talk__form{padding:26px 20px}
.bs2-home .bs2-form input.bs2-form__input,
.bs2-home .bs2-form textarea.bs2-form__textarea{font-size:16px;padding:13px 18px}
.bs2-lets-talk__actions{flex-direction:column;align-items:flex-start;gap:18px}
.bs2-lets-talk__actions .bs2-btn{padding:12px 30px}
.bs2-lets-talk__note{font-size:16px}
.bs2-lets-talk__contacts{flex-direction:column;gap:14px;margin-top:28px}
.bs2-lets-talk__contacts>div:last-child{text-align:left}

.bs2-specialists__inner{padding:34px var(--pad) 0}
.bs2-home .bs2-specialists__title{font-size:34px}
.bs2-specialists__sub{font-size:16px}
.bs2-specialists__badges{flex-direction:column;gap:14px;margin-top:24px}
.bs2-badge{font-size:16px;max-width:none}
/* Было flex-wrap:wrap — при коротком тексте тэглайн и кнопка всё равно влезали
   в одну строку и стояли впритык. По эталону это два отдельных ряда друг под другом. */
.bs2-specialists__signoff{flex-direction:column;align-items:flex-start;gap:16px;margin-top:28px}
.bs2-specialists__rule{display:none}
.bs2-specialists__tagline{font-size:22px;white-space:normal}
.bs2-pill{font-size:16px;padding:13px 24px;white-space:normal}
.bs2-specialists__photo{min-height:300px;margin-top:24px}
.bs2-doctor-photo{height:300px}

.bs2-news{padding:36px 0 40px}
.bs2-news__grid{grid-template-columns:1fr;gap:12px}
.bs2-news-card{min-height:auto;padding:36px 22px 30px}
.bs2-home .bs2-news-card h3{font-size:22px}
/* `margin-bottom:auto` у h3 разводит заголовок и кнопку только когда у карточки есть
   запас высоты (min-height:356px на десктопе). Здесь min-height:auto — auto схлопывается
   в 0, и кнопка вставала вплотную под заголовок. Тот же случай, что с .bs2-review-card. */
.bs2-news-card .bs2-btn{padding:11px 26px;margin-top:20px}
.bs2-news__more{margin-top:28px;font-size:16px}

.bs2-stay{padding:70px 0 64px}
.bs2-home .bs2-stay__title{font-size:52px}
.bs2-stay__sub{font-size:16px;margin-bottom:22px}
.bs2-stay__form{gap:16px}

/* Меню прилипшее, поэтому переход по якорю без этого прячет цель под шапкой */
html{scroll-padding-top:88px}
/* Тап-зона бейджа-иконки — не меньше пальца */
.bs2-social{width:44px;height:44px;border-radius:11px}
.bs2-social svg{width:18px;height:18px}
.bs2-lets-talk__socials,.bs2-footer__socials{gap:12px}
/* Главные действия на телефоне — во всю ширину, промахнуться невозможно */
.bs2-treatments__footer .bs2-btn,.bs2-news-card .bs2-btn{width:100%}
.bs2-treatments__footer{align-items:stretch}
.bs2-treatments__footer-label,.bs2-link-arrow{align-self:flex-start}

/* Текстовые ссылки были высотой 21–33px — меньше подушечки пальца.
   Поднимаем до 44px, не меняя их вид.
   ВАЖНО про gap: display:inline-flex делает вложенный <span> и соседний текстовый узел
   ОТДЕЛЬНЫМИ flex-элементами, а flex схлопывает пробелы между ними — в «<span>More</span>
   Latest News» пробел исчезал, получалось «MoreLatest». gap возвращает зазор.
   Касается и «See all treatments <span>→</span>» — там слипались текст и стрелка. */
.bs2-link-arrow,.bs2-link-arrow-white,.bs2-news__more,.bs2-medspa__yelp,.bs2-footer__col ul li a{min-height:44px;display:inline-flex;align-items:center;gap:.3em}
.bs2-footer__col ul li{margin-bottom:0}
.bs2-footer__up{width:44px;height:44px}

/* Контакты в топбаре и рейтинг поверх фото были 11–13px — на телефоне не читаются */
.bs2-topbar{font-size:12px}
.bs2-medspa__rating,.bs2-stars,.bs2-medspa__yelp{font-size:15px}
/* iOS увеличивает страницу при фокусе, если у поля кегль меньше 16px */
.bs2-home .bs2-stay__form input.bs2-stay__input{font-size:16px}

.bs2-footer{padding:40px 0 32px}
.bs2-footer__grid{grid-template-columns:1fr 1fr;gap:26px}
.bs2-footer__col--contacts{grid-column:1/-1}
.bs2-home .bs2-footer__col h4{margin-bottom:18px;font-size:16px}
.bs2-footer__col ul li a{font-size:16px}
.bs2-footer__copy{margin-top:24px;font-size:16px}
/* На узком экране кружок «наверх» уводим из угла колонки в общий поток */


}

/* ---------- ≤480: узкий телефон ---------- */
@media(max-width:480px){
.bs2-topbar__left,.bs2-topbar__right{flex-direction:column;gap:4px}
.bs2-btn{padding:11px 22px;font-size:14px}
/* Было width:100% — кнопки падали в столбик. По макету это один ряд,
   капсом и мельче, каждая делит половину ширины. */
.bs2-hero__buttons{flex-wrap:nowrap}
.bs2-hero__buttons .bs2-btn{flex:1 1 0;width:auto;padding:13px 14px;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.bs2-hero__image{height:180px}
.bs2-treatments__grid{grid-template-columns:1fr;gap:14px}
.bs2-treat-card__img{height:230px}
.bs2-home .bs2-sec-title{font-size:23px}
.bs2-home .bs2-lets-talk__title{font-size:32px}
.bs2-home .bs2-stay__title{font-size:40px}
.bs2-home .bs2-stay__form input.bs2-stay__input{width:100%}
.bs2-stay .bs2-btn,.bs2-lets-talk__actions .bs2-btn{width:100%}
.bs2-brand-img{max-width:44%}
.bs2-footer__grid{grid-template-columns:1fr;gap:22px}
.bs2-home .bs2-footer__col h4{margin-bottom:12px}
.bs2-doctor-photo{height:240px}
.bs2-specialists__photo{min-height:240px}
}

/* ============================================================================
   СОСТОЯНИЯ НАВЕДЕНИЯ И НАЖАТИЯ

   В макете состояний кнопок нет — собрано из существующих токенов: медный
   (--copper) как акцент отклика, тёмный (--dark) как «нажатая» глубина,
   подъём на 2px с тёплой тенью. Ничего нового в палитру не вводится.

   Три правила, которым подчиняется весь блок:
   1. Наведение меняет И фон, И цвет текста. Смена только фона давала случаи,
      когда тёмный текст оставался на потемневшей плашке и терял читаемость.
   2. Всё, что двигается, лежит внутри @media(hover:hover). На тач-экране ховер
      «залипает»: палец убран, а элемент остаётся подсвеченным до следующего тапа.
   3. Нажатие (:active) вынесено наружу — оно нужно и на телефоне как отклик касания.

   Специфичность: файл подключается ПЕРЕД about.css/procedures.css/procedure.css,
   поэтому селекторы здесь идут с префиксом `.bs2-home` (0,2,0) — иначе одноклассовые
   правила из этих файлов перебивали бы наведение просто потому, что грузятся позже.
   ============================================================================ */

@media(hover:hover){

  /* ---------- Кнопки ---------- */
  /* Цвета вариантов заданы выше; здесь только подъём и тень. */
  .bs2-home .bs2-btn:hover{transform:translateY(-2px);box-shadow:var(--lift-shadow)}
  /* Прозрачные кнопки на светлом фоне: тень им не нужна, заливки достаточно. */
  .bs2-home .bs2-btn--outline:hover,.bs2-home .bs2-home .bs2-btn--outline-light:hover{box-shadow:var(--lift-shadow-sm)}

  /* Ховеры самих карточек намеренно не делаем — по решению заказчика
     реагируют только ссылки и кнопки внутри них. Исключение — карточки
     «Our treatments» на главной: заказчик прямо попросил лёгкий зум картинки. */
  .bs2-home .bs2-treat-card:hover .bs2-treat-card__img{transform:scale(1.05)}

  /* ---------- Ссылки-стрелки ---------- */
  /* Стрелка уезжает вправо — направление совпадает со смыслом «перейти дальше». */
  .bs2-home .bs2-link-arrow span,.bs2-home .bs2-proc-card__more span,
  .bs2-home .bs2-about-doctor__link span,.bs2-home .bs2-news__more span,
  .bs2-home .bs2-link-arrow-white span{display:inline-block;transition:transform .28s var(--ease-out)}
  .bs2-home .bs2-link-arrow:hover span,.bs2-home .bs2-proc-card__more:hover span,
  .bs2-home .bs2-about-doctor__link:hover span,.bs2-home .bs2-news__more:hover span,
  .bs2-home .bs2-link-arrow-white:hover span{transform:translateX(5px)}

  /* Белая стрелка на тёмном: opacity вместо медного — медный на #291F23 почти не читается. */
  .bs2-home .bs2-link-arrow-white:hover{opacity:1;color:var(--sand)}

  .bs2-home .bs2-news__more{transition:color .2s var(--ease-out)}
  .bs2-home .bs2-news__more:hover{color:var(--terracotta)}

  /* ---------- Мелкие текстовые ссылки ---------- */
  /* Раньше здесь было только подчёркивание — на тёмной полосе оно почти незаметно. */
  .bs2-home .bs2-topbar__right a{transition:color .2s var(--ease-out)}
  .bs2-home .bs2-topbar__right a:hover{color:var(--sand) !important;text-decoration:underline}
  .bs2-home .bs2-medspa__yelp{transition:color .2s var(--ease-out)}
  .bs2-home .bs2-medspa__yelp:hover{color:var(--sand);text-decoration:underline}
  .bs2-home .bs2-footer__col ul li a{transition:color .2s var(--ease-out)}
  .bs2-home .bs2-footer__col ul li a:hover{color:var(--sand)}

  /* Крошки: к смене цвета добавлено подчёркивание — «Back to Main» и категория кликабельны,
     а текущая страница (.bs2-crumb__current) нет, и по ней это должно быть видно. */
  .bs2-home a.bs2-crumb{transition:color .2s var(--ease-out)}
  .bs2-home a.bs2-crumb:hover{color:var(--dark);text-decoration:underline;text-underline-offset:4px}

  /* ---------- Круглые иконки ---------- */
  /* Соцсети и «наверх» — заливка кружка, а не смена прозрачности: полупрозрачная
     иконка на тёмном фоне читается как выключенная. */
  .bs2-home .bs2-footer__socials a,.bs2-home .bs2-lets-talk__socials a{transition:color .22s var(--ease-out),background-color .22s var(--ease-out),transform .22s var(--ease-out)}
  .bs2-home .bs2-footer__socials a:hover{opacity:1;color:var(--sand);transform:translateY(-2px)}
  .bs2-home .bs2-lets-talk__socials a:hover{color:var(--terracotta);transform:translateY(-2px)}
  .bs2-home .bs2-footer__up{transition:all .22s var(--ease-out)}
  .bs2-home .bs2-footer__up:hover{background:var(--white);color:var(--dark);transform:translateY(-3px)}

  /* ---------- Аккордеон FAQ ---------- */
  /* Строка вопроса кликабельна целиком, но выглядела статичной плашкой. */
  .bs2-home .bs2-faq__q{transition:background-color .2s var(--ease-out),color .2s var(--ease-out)}
  .bs2-home .bs2-faq__q:hover{background:rgba(171,123,83,.12);color:var(--terracotta)}
  .bs2-home .bs2-faq__q:hover .bs2-faq__sign::before,
  .bs2-home .bs2-faq__q:hover .bs2-faq__sign::after{background:var(--terracotta)}

  /* ---------- Карусель «до/после» ---------- */
  .bs2-home button.bs2-ps-results__nav{transition:color .2s var(--ease-out),transform .2s var(--ease-out)}
  .bs2-home button.bs2-ps-results__nav:hover{transform:scale(1.18)}
  .bs2-home button.bs2-ps-results__dot{transition:background-color .2s var(--ease-out),transform .2s var(--ease-out)}
  .bs2-home button.bs2-ps-results__dot:hover{background:var(--terracotta);transform:scale(1.35)}

  /* ---------- Логотип ---------- */
  .bs2-home .bs2-nav__logo{transition:opacity .2s var(--ease-out)}
  .bs2-home .bs2-nav__logo:hover{opacity:.72}

  /* ---------- Дропдаун Treatments ---------- */
  .bs2-home .bs2-nav__dd-col ul li a{transition:color .18s var(--ease-out)}
  .bs2-home .bs2-nav__dd-col ul li a:hover,
  .bs2-home .bs2-nav__dd-col ul li a:focus-visible{color:var(--terracotta)}

  /* ---------- Дропдаун About + флаут специалистов ---------- */
  .bs2-home .bs2-nav__simple-list>li>a,
  .bs2-home .bs2-nav__flyout-panel ul li a{transition:color .18s var(--ease-out),background-color .18s var(--ease-out)}
  .bs2-home .bs2-nav__simple-list>li>a:hover,
  .bs2-home .bs2-nav__flyout-panel ul li a:hover{color:var(--terracotta);background:rgba(171,123,83,.08)}
  .bs2-home .bs2-nav__flyout-trigger:hover{color:var(--terracotta);background:rgba(171,123,83,.08)}
  .bs2-home .bs2-nav__item--flyout:hover .bs2-nav__chevron--flyout,
  .bs2-home .bs2-nav__item--flyout:focus-within .bs2-nav__chevron--flyout{border-color:var(--terracotta)}
}

/* ---------- Нажатие ----------
   Вне @media(hover:hover): на телефоне это единственный отклик на касание.
   Длительность короче наведения — отпускание должно ощущаться мгновенным. */
.bs2-home .bs2-btn:active{transform:translateY(0) scale(.98);box-shadow:none;transition-duration:.08s}
.bs2-home button.bs2-ps-results__nav:active{transform:scale(.94)}
.bs2-home .bs2-footer__up:active,.bs2-home .bs2-footer__socials a:active,
.bs2-home .bs2-lets-talk__socials a:active{transform:scale(.94)}

/* ---------- Уважение к настройке «меньше движения» ----------
   Сдвиги и масштабирование убираются, смена цвета остаётся: она несёт информацию
   о том, что элемент кликабелен, и отключать её нельзя. */
@media(prefers-reduced-motion:reduce){
  .bs2-home .bs2-btn:hover,.bs2-home .bs2-btn:active,
  .bs2-home .bs2-footer__socials a:hover,.bs2-home .bs2-lets-talk__socials a:hover,
  .bs2-home .bs2-footer__up:hover,
  .bs2-home button.bs2-ps-results__nav:hover,
  .bs2-home button.bs2-ps-results__dot:hover,
  .bs2-home .bs2-link-arrow:hover span,.bs2-home .bs2-proc-card__more:hover span,
  .bs2-home .bs2-about-doctor__link:hover span,.bs2-home .bs2-news__more:hover span,
  .bs2-home .bs2-link-arrow-white:hover span{transform:none}
  .bs2-home .bs2-nav__menu>li>a:hover::after{transform:scaleX(1)}
}

/* ==================== ПОЛОСА COOKIE ====================
   Кремовая полоса внизу экрана. Кнопки те же, что по всему сайту, поэтому
   правила пишем с префиксом .bs2-home и весом не ниже (0,3,0) — иначе кит
   Elementor перебивает фон кнопок и в покое, и на наведении. */
.bs2-cookie{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:var(--cream);
  border-top:1px solid rgba(41,31,35,.14);box-shadow:0 -10px 30px rgba(41,31,35,.10);
  transform:translateY(100%);transition:transform .35s ease}
.bs2-cookie.is-open{transform:translateY(0)}
.bs2-cookie[hidden]{display:none}
.bs2-cookie__inner{max-width:var(--shell);margin:0 auto;padding:20px var(--pad);
  display:flex;align-items:center;gap:36px}
.bs2-cookie__copy{flex:1 1 auto;min-width:0}
.bs2-cookie__title{font-family:var(--serif);font-size:22px;font-weight:400;line-height:1.2;
  text-transform:uppercase;color:var(--dark);margin:0 0 6px}
.bs2-cookie__text{font-size:14px;font-weight:300;line-height:19px;color:var(--dark);margin:0;max-width:860px}
.bs2-home .bs2-cookie__text a{color:var(--copper);text-decoration:underline;text-underline-offset:2px}
@media (hover:hover){.bs2-home .bs2-cookie__text a:hover{color:var(--terracotta)}}
.bs2-cookie__actions{flex:0 0 auto;display:flex;align-items:center;gap:12px}
.bs2-home button.bs2-cookie__btn{font-size:15px;padding:11px 26px;min-height:44px}
.bs2-home button.bs2-cookie__btn.bs2-btn--copper{background:var(--copper);color:var(--white)}
.bs2-home button.bs2-cookie__btn.bs2-btn--outline{background:transparent;color:var(--dark);border:1px solid var(--dark)}
@media (hover:hover){
  .bs2-home button.bs2-cookie__btn.bs2-btn--copper:hover{background:var(--terracotta);color:var(--white)}
  .bs2-home button.bs2-cookie__btn.bs2-btn--outline:hover{background:var(--dark);color:var(--white)}
}
@media (max-width:900px){
  .bs2-cookie__inner{flex-direction:column;align-items:stretch;gap:16px;padding:18px var(--pad)}
  .bs2-cookie__actions{justify-content:stretch}
  .bs2-home button.bs2-cookie__btn{flex:1 1 0}
}
@media (max-width:768px){
  .bs2-cookie__inner{padding:16px 20px}
  .bs2-cookie__title{font-size:19px}
  .bs2-cookie__text{font-size:13px;line-height:18px}
}
/* Ссылка «Cookie settings» в подвале — открывает полосу заново. */
/* Кит Elementor задаёт `.elementor-kit-138 button{background:...;padding:15px 36px}`
   весом (0,1,1) — одноклассовое правило ему проигрывает, и ссылка превращалась
   в лавандовый прямоугольник. Поэтому вес (0,2,1) и фон/паддинги гасим явно. */
.bs2-home button.bs2-footer__cookie{display:inline-block;font-size:14px;font-weight:300;
  color:var(--white);opacity:.75;text-decoration:underline;text-underline-offset:3px;
  background:transparent;border:none;border-radius:0;padding:0;margin:0;cursor:pointer;
  font-family:var(--sans);letter-spacing:normal;line-height:1.6;min-height:0}
@media (hover:hover){.bs2-home button.bs2-footer__cookie:hover{opacity:1;background:transparent;color:var(--white)}}


/* ---------- Нижняя служебная строка подвала ---------- */
.bs2-footer__bottom{max-width:var(--shell);margin:40px auto 0;padding:22px var(--pad) 0;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.bs2-footer__utils{display:flex;align-items:center;gap:20px}
.bs2-home .bs2-footer__col--contacts a{color:var(--white)}
@media (hover:hover){.bs2-home .bs2-footer__col--contacts a:hover{opacity:.7}}
.bs2-home a.bs2-footer__book{margin-top:22px;font-size:16px;padding:10px 26px}
@media (max-width:768px){
  .bs2-footer__bottom{margin-top:26px;padding-top:18px;flex-direction:column;align-items:flex-start;gap:16px}
  .bs2-footer__utils{width:100%;justify-content:space-between}
}

/* ---------- Бургер и стрелка «назад»: гасим синюю подсветку кита ----------
   `.elementor-kit-138 button:hover{background:#2B247B}` — вес (0,2,1), и наше
   `.bs2-home .bs2-nav__toggle{background:none}` (0,2,0) ему проигрывает. На тач-экране
   :hover после тапа не снимается, поэтому бургер оставался синим до тапа в пустоту.
   Берём вес (0,3,1) и гасим фон во ВСЕХ состояниях, а не только в покое. */
.bs2-home .bs2-nav button.bs2-nav__toggle,
.bs2-home .bs2-nav button.bs2-nav__toggle:hover,
.bs2-home .bs2-nav button.bs2-nav__toggle:focus,
.bs2-home .bs2-nav button.bs2-nav__toggle:focus-visible,
.bs2-home .bs2-nav button.bs2-nav__toggle:active,
.bs2-home .bs2-nav button.bs2-nav__back,
.bs2-home .bs2-nav button.bs2-nav__back:hover,
.bs2-home .bs2-nav button.bs2-nav__back:focus,
.bs2-home .bs2-nav button.bs2-nav__back:focus-visible,
.bs2-home .bs2-nav button.bs2-nav__back:active{
  background:transparent;border:none;box-shadow:none;color:inherit;
  -webkit-tap-highlight-color:transparent}
/* Полоски бургера не должны перекрашиваться вместе с кнопкой. */
.bs2-home .bs2-nav button.bs2-nav__toggle span{background:var(--dark)}

/* ==========================================================================
   СООБЩЕНИЯ ФОРМ И ЛОВУШКА ДЛЯ РОБОТОВ
   Вес .bs2-home обязателен: кит Elementor задаёт p и input селекторами
   вида .elementor-kit-138 p (0,0,1,1), одноклассовые правила ему проигрывают.
   ========================================================================== */
.bs2-home .bs2-form__trap {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.bs2-home .bs2-form__status {
  margin: 14px 0 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
}
.bs2-home .bs2-form__status.is-ok    { color: var(--dark); }
.bs2-home .bs2-form__status.is-error { color: var(--terracotta); }
.bs2-home .bs2-stay .bs2-form__status { color: var(--dark); text-align: center; }

/* ------------------------------------------------------------------
   Блок «Let’s talk»: вместо формы обратной связи — запись в Zenoti.
   Панель осталась той же лавандовой карточкой, но содержимого стало
   меньше, поэтому оно центрируется по вертикали — иначе под кнопкой
   зиял бы пустой низ высотой с бывшую форму.
   ------------------------------------------------------------------ */
.bs2-home .bs2-lets-talk__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.bs2-home .bs2-lets-talk__eyebrow {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.bs2-home .bs2-lets-talk__cta-title {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--dark);
  margin: 14px 0 18px;
}
.bs2-home .bs2-lets-talk__cta .bs2-lets-talk__note {
  margin: 0 0 32px;
  max-width: 40ch;
}
.bs2-home .bs2-lets-talk__cta-btn {
  padding: 16px 54px;
  font-size: 15px;
}
.bs2-home .bs2-lets-talk__cta-alt {
  margin: 18px 0 0;
  font-size: 16px;
  font-weight: 300;
  color: var(--dark);
}
.bs2-home .bs2-lets-talk__cta-alt a {
  color: var(--dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(41, 31, 35, .35);
}
.bs2-home .bs2-lets-talk__cta-alt a:hover {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}
.bs2-home .bs2-lets-talk__cta .bs2-lets-talk__rule { width: 100%; margin: 36px 0 24px; }
.bs2-home .bs2-lets-talk__cta .bs2-lets-talk__contacts { width: 100%; margin-top: 26px; }
.bs2-home .bs2-lets-talk__cta .bs2-lets-talk__contacts a { color: inherit; text-decoration: none; }
.bs2-home .bs2-lets-talk__cta .bs2-lets-talk__contacts a:hover { color: var(--terracotta); }

@media (max-width: 900px) {
  .bs2-home .bs2-lets-talk__cta-title { font-size: 38px; }
  .bs2-home .bs2-lets-talk__cta .bs2-lets-talk__note { margin-bottom: 26px; }
}
@media (max-width: 600px) {
  .bs2-home .bs2-lets-talk__cta-title { font-size: 30px; }
  .bs2-home .bs2-lets-talk__cta-btn { width: 100%; text-align: center; padding: 15px 20px; }
  .bs2-home .bs2-lets-talk__cta .bs2-lets-talk__rule { margin: 28px 0 20px; }
}

/* ------------------------------------------------------------------
   «Brands You’ll Love»: брендов стало четыре. При space-between они
   расползались к краям, а потолок в 16% ширины делал их мелкими —
   центрируем и даём каждому больше места. Значения для узких экранов
   продублированы: селектор со скоупом .bs2-home перебивает правила
   темы, и без этого на телефоне логотипы бы уменьшились.
   ------------------------------------------------------------------ */
.bs2-home .bs2-brands__logos { justify-content: center; gap: clamp(32px, 5vw, 72px); }
.bs2-home .bs2-brand-img { max-width: 20%; }

@media (max-width: 1024px) {
  .bs2-home .bs2-brands__logos { gap: 30px; }
  .bs2-home .bs2-brand-img { max-width: 26%; }
}
@media (max-width: 768px) {
  .bs2-home .bs2-brands__logos { gap: 22px; }
  .bs2-home .bs2-brand-img { max-width: 38%; }
}
@media (max-width: 480px) {
  .bs2-home .bs2-brand-img { max-width: 44%; }
}