/* =====================================================================
   Остров Тайского СПА — мобильная главная.

   Направление: фирменная пара — бежевый и тёмно-зелёный. Первый экран
   тёмный и погружающий (вход с улицы в салон), дальше страница
   раскрывается в тёплый бежевый с тёмно-зелёной типографикой.
   Тема одна, все цвета заданы явно и не зависят от темы читателя.

   Цвет:  sand #EDE6D8 · cream #F7F2E9 · paper #FCFAF5
          green #0D3B2E · green-2 #175442 · gold #7E6221 · ink #222C27
          первый экран: night #0E1613 + brass #C8A24A
   Шрифт: Helvetica Now — основной текст; Bodoni Cyrillic курсивом — акцентный
   Макет: крупная фотография, много воздуха, цена приглушена
   ===================================================================== */

@font-face{
  font-family:"Helvetica Now";
  src:url("/design/font/HelveticaNowText-Regular.woff2") format("woff2"),url("/design/font/HelveticaNowText-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
/* Bodoni-Cyrillic.ttf прямого начертания — курсив синтезирует браузер */
@font-face{
  font-family:"Bodoni Cyrillic";
  src:url("/design/font/Bodoni-Cyrillic.woff2") format("woff2"),url("/design/font/Bodoni-Cyrillic.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --sand:#EDE6D8;
  --cream:#F7F2E9;
  --paper:#FCFAF5;
  --green:#0D3B2E;
  --green-2:#175442;
  --gold:#7E6221;   /* 4.63:1 на бежевом — проходит AA */
  --ink:#222C27;
  --dim:#5D645B;    /* 4.92:1 на бежевом — проходит AA */
  --line:rgba(13,59,46,.16);
  /* первый экран остаётся тёмным */
  --night:#0E1613;
  --brass:#C8A24A;
  --ivory:#F2EDE3;
  --night-line:rgba(242,237,227,.15);
  --r:14px;
  --pad:20px;
  --bar:calc(70px + env(safe-area-inset-bottom,0px));
  --sans:"Helvetica Now","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Bodoni Cyrillic",Georgia,"Times New Roman",serif;
}

/* Типографика: заголовки набраны Bodoni курсивом, всё остальное —
   Helvetica Now. Курсив закреплён за смыслом «заголовок», а не за цветом,
   поэтому список ведётся здесь одним местом. */
.hero__title,
.sec__title,
.three__title,
.three__t,
.promo__title,
.cta__title,
.dir__h,
.prog__name{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
}
/* всё, что раньше было курсивом, стало прямым */
.hero__price b,
.sec__kicker,
.prog__price,
.promo__label,
.cat__price,
.cert__sums b,
.contacts__list dd a,
.step__num,
.dir__lp,
.btn--outline{
  font-family:var(--sans);
  font-style:normal;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;padding:0 0 var(--bar);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  color:var(--ink);background:var(--sand);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
h1,h2,h3,p,dl,dd,ul{margin:0;}
ul{padding:0;list-style:none;}
a{color:inherit;}
h1,h2,h3{text-wrap:balance;}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px;}

/* ---------- кнопки -------------------------------------------------- */
.btn{
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  min-height:56px;padding:14px 24px;border:0;border-radius:var(--r);
  font-family:var(--sans);font-size:16.5px;font-weight:600;line-height:1.2;
  text-align:center;text-decoration:none;cursor:pointer;
  transition:transform .14s ease,background-color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(.985);}
.btn--primary{background:var(--green);color:var(--paper);}
.btn--primary:active{background:var(--green-2);}
.btn--ghost{background:transparent;color:var(--green);border:1px solid var(--line);}
.btn--ghost:active{background:var(--cream);}
.btn--lg{width:100%;min-height:60px;font-size:17px;}
/* .btn — flex-колонка, поэтому текст и сердце оборачиваются в один элемент,
   иначе сердце уехало бы на отдельную строку. Цвет берётся из currentColor,
   то есть совпадает с тёмно-зелёным текстом кнопки. */
.btn__label{display:inline-flex;align-items:center;gap:8px;}
.btn__heart{width:17px;height:17px;flex:none;position:relative;top:-1px;}

.btn__sub{
  display:block;margin-top:3px;font-size:11.5px;font-weight:500;
  letter-spacing:.01em;opacity:.75;
}
/* в тёмном первом экране кнопки бежевые */
.hero .btn--primary{background:var(--sand);color:var(--green);}
.hero .btn--primary:active{background:#DFD6C4;}

/* ---------- первый экран (тёмный) ------------------------------------ */
.hero{
  position:relative;isolation:isolate;
  min-height:100svh;min-height:100vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--pad);overflow:hidden;
  background:var(--night);color:var(--ivory);
}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block;}
.hero__bg img{width:100%;height:100%;object-fit:cover;display:block;
  /* лицо героини в верхней трети: на низком широком экране кадр режется по высоте */
  object-position:50% 30%;}
/* Видео ложится поверх фотографии: пока оно не загрузилось, виден кадр. */
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;display:none;
}
.hero__veil{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(14,22,19,.66) 0%,
    rgba(14,22,19,.26) 30%,
    rgba(14,22,19,.80) 70%,
    var(--night) 100%);
}
.hero__logo{
  position:absolute;top:calc(18px + env(safe-area-inset-top,0px));left:var(--pad);
  width:118px;height:auto;z-index:2;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.5));
}
.hero__inner{padding-bottom:28px;}
.hero__title{
  font-weight:400;
  /* 8.7vw подобрано замером: при большем кегле обе строки заголовка
     переносятся и он распадается на четыре строки */
  font-size:clamp(26px,8.7vw,58px);line-height:1.06;letter-spacing:-.005em;
  margin-bottom:18px;color:var(--ivory);
}
/* адрес приглушён — акцент на «3 этажа тайского СПА» */
.hero__title span{display:block;color:rgba(242,237,227,.7);}

/* перечисление под заголовком — одинаковый шрифт, размер и цвет.
   В строку через точку: столбиком из пяти строк оно сдвигало кнопки под сгиб. */
.hero__facts{display:flex;flex-wrap:wrap;gap:2px 0;margin-bottom:24px;}
.hero__facts li{
  font-family:var(--sans);font-size:15.5px;font-weight:400;line-height:1.42;
  color:rgba(242,237,227,.88);white-space:nowrap;
}
.hero__facts li + li::before{content:"·";margin:0 .5em;color:var(--brass);}
/* принудительный перенос: «мастера · ритуалы» / «флоатинги · хаммамы · фитобочки» —
   иначе точка оказывалась в начале второй строки */
.hero__facts .hero__br{flex-basis:100%;height:0;}
.hero__facts .hero__br::before,.hero__facts .hero__br + li::before{content:none;}
.hero__price{
  display:inline-block;margin-bottom:22px;
  font-size:14px;color:rgba(242,237,227,.72);font-variant-numeric:tabular-nums;
}
.hero__price b{font-size:25px;font-weight:400;color:var(--brass);letter-spacing:.01em;}
/* две кнопки в первом экране */
.hero__actions{display:flex;flex-direction:column;gap:10px;}
.hero .btn--outline{
  background:transparent;color:var(--sand);border:1.5px solid rgba(237,230,216,.55);
  width:100%;
}
.hero .btn--outline:active{background:rgba(237,230,216,.14);}

/* Полоса с цифрами. Жёсткая сетка с рамками во всю высоту читалась
   как таблица; здесь — тонкие разделители по центру и больше воздуха. */
.hero__trust{
  position:relative;   /* контекст для верхней волосяной линии */
  display:flex;margin:0 calc(var(--pad) * -1);
  padding:18px var(--pad) 20px;
  background:linear-gradient(180deg,rgba(14,22,19,.30) 0%,rgba(14,22,19,.72) 100%);
  backdrop-filter:blur(12px);
}
.hero__trust::before{
  content:"";position:absolute;left:var(--pad);right:var(--pad);
  top:0;height:1px;background:linear-gradient(90deg,
    rgba(237,230,216,0) 0%,rgba(237,230,216,.34) 22%,
    rgba(237,230,216,.34) 78%,rgba(237,230,216,0) 100%);
}
.hero__trust li{
  position:relative;flex:1 1 0;min-width:0;text-align:center;padding:0 4px;
}
.hero__trust li + li::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:26px;
  background:linear-gradient(180deg,rgba(237,230,216,0),rgba(237,230,216,.3),rgba(237,230,216,0));
}
.hero__trust b{
  display:block;font-size:27px;font-weight:400;line-height:1;
  color:var(--sand);font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  white-space:nowrap;   /* «2 750 ₽» иначе рвётся на две строки */
}
.hero__trust sup{
  font-size:.46em;vertical-align:super;line-height:0;
  color:var(--brass);margin-left:1px;
}
.hero__trust span{
  display:block;margin-top:8px;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(237,230,216,.62);
}

/* ---------- секции ---------------------------------------------------- */
.sec{padding:56px var(--pad) 52px;}
.sec--sand{background:var(--cream);}
.sec__head{margin-bottom:26px;}
.sec__kicker{
  font-size:15px;letter-spacing:.01em;color:var(--gold);margin-bottom:8px;
}
.sec__title{
  font-weight:400;
  font-size:clamp(32px,9vw,42px);line-height:1.06;color:var(--green);
}
.sec__lead{
  margin-top:14px;font-size:15.5px;line-height:1.6;color:var(--dim);max-width:34em;
}
.sec__more{margin-top:24px;}

/* ---------- три этажа, три состояния ------------------------------------ */
.three{
  background:var(--green);color:var(--paper);
  padding:64px var(--pad) 58px;
}
.three__head{margin-bottom:34px;}
.three__title{
  font-size:clamp(38px,11vw,52px);line-height:1.02;color:var(--paper);
  margin-bottom:16px;
}
.three__lead{
  font-size:16px;line-height:1.55;color:rgba(252,250,245,.8);max-width:26em;
}
.three__list{
  display:flex;flex-direction:column;gap:0;
  counter-reset:none;margin:0;padding:0;list-style:none;
}
.three__list li{
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:baseline;
  padding:22px 0;border-top:1px solid rgba(252,250,245,.22);
}
.three__list li:last-child{border-bottom:1px solid rgba(252,250,245,.22);}
.three__n{
  grid-row:1 / span 2;
  font-family:var(--sans);font-size:15px;font-weight:400;
  color:var(--brass);align-self:start;padding-top:6px;
  font-variant-numeric:tabular-nums;
}
.three__t{
  font-size:29px;line-height:1.05;color:var(--paper);margin-bottom:4px;
}
.three__d{
  font-size:15px;line-height:1.4;color:rgba(252,250,245,.68);
}
/* Пункты 1–2: вся строка — одна ссылка (растянутый ::after), стрелка справа. */
.three__item{position:relative;}
.three__item:not(.three__item--multi){grid-template-columns:auto minmax(0,1fr) auto;}
.three__link{color:inherit;text-decoration:none;}
.three__link::after{content:"";position:absolute;inset:0;}
.three__link:focus-visible{outline:none;}
.three__item:focus-within{outline:2px solid var(--brass);outline-offset:4px;border-radius:6px;}
.three__arrow{
  grid-column:3;grid-row:1 / span 2;align-self:center;
  font-size:22px;line-height:1;color:var(--brass);transition:transform .2s ease;
}
.three__item:hover .three__arrow,.three__item:active .three__arrow{transform:translateX(4px);}
/* Пункт 3: единой страницы про «очищение» нет — у каждой услуги своя ссылка. */
.three__pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.three__pills a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  border-radius:100px;border:1px solid rgba(252,250,245,.34);
  color:var(--paper);text-decoration:none;font-size:14.5px;
  -webkit-tap-highlight-color:transparent;
}
.three__pills a::after{content:"→";margin-left:8px;color:var(--brass);}
.three__pills a:active{background:rgba(252,250,245,.1);}

/* ---------- программы --------------------------------------------------- */
.progs{display:flex;flex-direction:column;gap:12px;}
.prog{
  display:grid;grid-template-columns:96px minmax(0,1fr);gap:15px;align-items:center;
  padding:13px;border-radius:var(--r);
  background:var(--paper);border:1px solid var(--line);
}
.sec--sand .prog{background:var(--paper);}
.prog__img{width:96px;height:96px;border-radius:10px;object-fit:cover;}
.prog__body{min-width:0;}
.prog__name{
  font-size:20px;font-weight:400;line-height:1.15;
  color:var(--green);margin-bottom:5px;
}
.prog__desc{
  font-size:13px;line-height:1.45;color:var(--dim);margin-bottom:10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.prog__meta{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.prog__time{font-size:12px;font-weight:500;color:var(--dim);}
/* цена приглушена: тем же зелёным, что и текст, без выделения цветом */
.prog__price{font-size:18px;color:var(--green);font-variant-numeric:tabular-nums;}
.prog__go{
  grid-column:1 / -1;
  display:flex;align-items:center;justify-content:center;
  min-height:46px;margin-top:3px;border-radius:10px;
  background:transparent;border:1px solid var(--green);
  color:var(--green);font-size:15px;font-weight:600;text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.prog__go:active{background:var(--green);color:var(--paper);}

/* ---------- как проходит визит ------------------------------------------ */
.steps{display:flex;flex-direction:column;gap:14px;}
.steps li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:15px;align-items:start;
  padding:18px 16px;background:var(--paper);border-radius:var(--r);
  border:1px solid var(--line);
}
.step__num{font-size:26px;line-height:1;color:var(--gold);min-width:1.2em;}
.step__t{font-size:16px;font-weight:600;color:var(--green);margin-bottom:4px;}
.step__d{font-size:14px;line-height:1.5;color:var(--dim);}

/* ---------- акция ------------------------------------------------------- */
.promo-wrap{padding-top:0;}
/* Акция выделена цветом: тёмно-зелёная карточка на бежевой секции —
   самый контрастный элемент между первым экраном и блоком записи. */
.promo{
  padding:30px 22px 26px;border-radius:18px;color:var(--paper);
  background:
    radial-gradient(120% 90% at 100% 0%,rgba(200,162,74,.24) 0%,rgba(13,59,46,0) 58%),
    var(--green);
  border:1px solid rgba(200,162,74,.55);
  box-shadow:0 22px 44px -20px rgba(13,59,46,.6);
}
.promo__label{font-size:15px;color:var(--brass);margin-bottom:8px;}
.promo__title{
  font-weight:400;font-size:clamp(30px,8.6vw,40px);
  line-height:1.05;color:var(--paper);margin-bottom:16px;
}
.promo__list{display:flex;flex-direction:column;gap:9px;margin-bottom:22px;}
.promo__list li{
  position:relative;padding-left:20px;font-size:14.5px;line-height:1.45;color:rgba(252,250,245,.92);
}
.promo__list li::before{
  content:"";position:absolute;left:2px;top:8px;
  width:7px;height:7px;border-radius:50%;background:var(--brass);
}
.btn--outline{
  background:transparent;color:var(--gold);border:1.5px solid var(--gold);
  width:100%;font-size:17px;
}
.btn--outline:active{background:rgba(126,98,33,.12);}
.promo .promo__btn{width:100%;font-size:17px;background:var(--sand);color:var(--green);}
.promo .promo__btn:active{background:#DFD6C4;}
.promo__note{margin-top:12px;font-size:12.5px;color:rgba(252,250,245,.72);text-align:center;}

/* ---------- интерьер ---------------------------------------------------- */
.gallery{
  display:flex;gap:10px;overflow-x:auto;
  margin:0 calc(var(--pad) * -1);padding:2px var(--pad) 16px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  scroll-padding-inline:var(--pad);
}
.gallery::-webkit-scrollbar{display:none;}
.gal{position:relative;}
.gal__btn{display:none;}
.gallery>li{flex:none;scroll-snap-align:center;width:72vw;max-width:420px;}
.gallery img{
  /* height:auto обязателен: атрибут height в разметке иначе перебивает aspect-ratio */
  width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r);
  background:var(--cream);
}
.floors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:6px;}
.floors a{
  display:flex;align-items:center;justify-content:center;gap:6px;height:100%;min-height:48px;
  padding:12px 8px;text-align:center;background:var(--paper);
  border:1px solid var(--line);border-radius:12px;
  font-size:13px;line-height:1.3;color:var(--green);text-decoration:none;
  -webkit-tap-highlight-color:transparent;transition:border-color .2s ease,background-color .2s ease;
}
.floors a::after{content:"→";color:var(--gold);}
.floors a{white-space:nowrap;}
/* на узком экране стрелка не помещается рядом с «2 флоатинга» */
@media (max-width:419px){
  .floors{gap:8px;}
  .floors a{padding:12px 4px;font-size:12.5px;}
  .floors a::after{content:none;}
}
.floors a:hover,.floors a:active{border-color:var(--gold);background:var(--cream);}

/* ---------- факты -------------------------------------------------------- */
.facts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;}
.facts li{padding:20px 15px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line);}
.facts b{
  display:block;font-size:42px;line-height:1;color:var(--gold);margin-bottom:8px;
  font-variant-numeric:tabular-nums;
}
.facts span{display:block;font-size:13px;line-height:1.35;color:var(--dim);}

/* ---------- ленты -------------------------------------------------------- */
.rail{
  display:flex;gap:12px;overflow-x:auto;
  margin:0 calc(var(--pad) * -1);padding:2px var(--pad) 14px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  /* без отступа привязки первая карточка прилипала к краю экрана */
  scroll-padding-inline:var(--pad);
}
.rail::-webkit-scrollbar{display:none;}
.rail>li{flex:none;scroll-snap-align:start;}
.masters>li{width:134px;}
.master img{
  width:134px;height:176px;object-fit:cover;border-radius:12px;
  margin-bottom:10px;background:var(--cream);
}
.master__name{font-size:14.5px;font-weight:600;line-height:1.2;color:var(--green);}
.master__exp{font-size:11.5px;color:var(--dim);margin-top:3px;}

/* ---------- направления (SEO-тексты с текущей главной) -------------------- */
/* Текст свёрнут визуально через line-clamp, но целиком остаётся в разметке —
   поисковики его видят. display:none здесь применять нельзя. */
.dirs{display:flex;flex-direction:column;gap:12px;}
.dir{
  padding:16px 16px 14px;border-radius:var(--r);
  background:var(--paper);border:1px solid var(--line);
}
.dir__h{
  font-size:21px;font-weight:400;line-height:1.15;color:var(--green);margin-bottom:10px;
}
.dir__t{
  font-size:14.5px;line-height:1.6;color:var(--dim);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.dir.is-open .dir__t{-webkit-line-clamp:unset;overflow:visible;}
.dir__more{
  display:inline-flex;align-items:center;min-height:44px;
  margin-top:2px;padding:0;
  background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:14px;font-weight:600;color:var(--gold);
  text-decoration:underline;text-underline-offset:4px;
}
.dir.is-open .dir__more{visibility:hidden;height:0;padding:0;margin:0;}
.dir__links{display:flex;flex-direction:column;gap:6px;margin-top:14px;}
.dir__links a{
  /* название и цена в одну строку: столбиком блок растягивался почти на четыре экрана */
  display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;
  min-height:44px;padding:9px 13px;border-radius:10px;
  background:var(--cream);border:1px solid var(--line);text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.dir__links a:active{border-color:var(--green);}
.dir__ln{font-size:14px;font-weight:500;line-height:1.3;color:var(--green);min-width:0;}
.dir__lp{
  font-size:15px;color:var(--gold);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}

/* ---------- разделы каталога --------------------------------------------- */
.cats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;}
.cats a{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  min-height:76px;height:100%;padding:14px;border-radius:12px;
  background:var(--paper);border:1px solid var(--line);text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.cats a:active{border-color:var(--green);}
.cat__name{font-size:14px;font-weight:500;line-height:1.25;color:var(--green);}
.cat__price{font-size:14px;color:var(--gold);font-variant-numeric:tabular-nums;}

/* ---------- сертификаты --------------------------------------------------- */
.cert__lead{font-size:15px;line-height:1.55;color:var(--dim);margin-bottom:20px;}
/* Три номинала в ряд — плитки-ссылки. Кегль тянется от ширины экрана,
   иначе «10 000 ₽» не помещается в треть строки на 320px. */
.cert__sums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px;}
.cert__sums a{
  display:flex;align-items:center;justify-content:center;
  min-height:68px;padding:10px 6px;border-radius:12px;text-decoration:none;
  background:var(--paper);border:1px solid rgba(126,98,33,.4);
  transition:border-color .2s ease,background-color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.cert__sums a:hover,.cert__sums a:active{border-color:var(--gold);background:var(--cream);}
.cert__sums b{
  font-size:clamp(17px,5.4vw,25px);font-weight:400;color:var(--gold);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* Любая сумма и сертификат на программу — строками: подпись слева,
   значение справа тем же золотом, что и номиналы. */
.cert__opts{display:flex;flex-direction:column;gap:8px;margin-bottom:22px;}
.cert__opts a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:56px;padding:12px 16px;border-radius:12px;text-decoration:none;
  background:var(--paper);border:1px solid var(--line);
  transition:border-color .2s ease,background-color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.cert__opts a:hover,.cert__opts a:active{border-color:var(--gold);background:var(--cream);}
.cert__opt-t{font-size:15px;font-weight:500;color:var(--green);}
.cert__opt-v{
  font-size:18px;line-height:1.2;color:var(--gold);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.cert__opt-v::after{content:" →";}
.cert__opt-v--arrow::after{content:none;}
.cert__opt-v--arrow{font-size:20px;}
.cert__btn{width:100%;}

/* ---------- блок записи ---------------------------------------------------- */
.cta{
  padding:60px var(--pad);text-align:center;
  background:var(--green);color:var(--paper);
}
.cta__title{
  font-weight:400;
  font-size:clamp(32px,9vw,42px);line-height:1.06;margin-bottom:14px;color:var(--paper);
}
.cta__text{
  font-size:15px;line-height:1.6;color:rgba(252,250,245,.78);
  margin:0 auto 26px;max-width:30em;
}
.cta .btn--primary{background:var(--paper);color:var(--green);}
.cta .btn--primary:active{background:var(--cream);}
.cta__phone{
  display:inline-block;margin-top:18px;padding:11px;
  font-size:14px;font-weight:500;color:rgba(252,250,245,.82);text-decoration:none;
  border-bottom:1px solid rgba(252,250,245,.3);
}

/* ---------- контакты -------------------------------------------------------- */
.contacts__list{margin-bottom:24px;}
.contacts__list>div{
  display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;
  padding:15px 0;border-bottom:1px solid var(--line);
}
.contacts__list dt{font-size:13px;color:var(--dim);}
.contacts__list dd{margin:0;font-size:15px;font-weight:500;color:var(--green);}
.contacts__list dd a{
  color:var(--gold);text-decoration:none;font-size:17px;
  display:inline-block;padding:12px 0;margin:-12px 0;
}

/* ---------- соцсети ------------------------------------------------------- */
.socials{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;}
.socials a{
  display:flex;align-items:center;gap:9px;
  min-height:48px;padding:10px 16px;border-radius:100px;
  background:var(--paper);border:1px solid var(--line);
  color:var(--green);text-decoration:none;font-size:14px;font-weight:500;
  -webkit-tap-highlight-color:transparent;
}
.socials a:active{border-color:var(--green);background:var(--cream);}
.socials svg{width:19px;height:19px;flex:none;color:var(--gold);}

/* ---------- отзывы гостей ------------------------------------------------- */
[hidden]{display:none !important;}
.reviews__box{border-radius:var(--r);overflow:hidden;background:var(--paper);border:1px solid var(--line);}
.reviews__frame{display:block;width:100%;height:560px;border:0;}
.reviews__box .reviews__card{border:0;border-radius:0;}
.reviews__all{
  display:inline-flex;align-items:center;min-height:44px;margin-top:14px;
  font-size:15px;font-weight:600;color:var(--green);text-decoration:none;
  border-bottom:1px solid var(--line);
}
/* автономная версия: iframe заблокирован, вместо него карточка */
.reviews__card{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:34px 22px;border-radius:var(--r);text-align:center;
  background:var(--paper);border:1px solid var(--line);text-decoration:none;
}
.reviews__rate{font-size:52px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums;}
.reviews__rate sup{font-size:.4em;vertical-align:super;line-height:0;}
.reviews__txt{font-size:15px;color:var(--dim);}
.reviews__go{
  margin-top:12px;font-size:15px;font-weight:600;color:var(--green);
  border-bottom:1px solid var(--line);padding-bottom:3px;
}

/* ---------- подвал ------------------------------------------------------------ */
.foot{
  padding:28px var(--pad) 36px;text-align:center;
  font-size:12.5px;color:var(--dim);border-top:1px solid var(--line);
}

/* ---------- липкая панель ------------------------------------------------------ */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:100;
  display:flex;gap:10px;align-items:stretch;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(247,242,233,.94);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  transform:translateY(115%);transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.bar.is-on{transform:translateY(0);}
.bar__btn{flex:1;min-height:52px;padding:9px 18px;font-size:16px;}
.bar__tel{
  flex:none;width:52px;display:flex;align-items:center;justify-content:center;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  color:var(--green);text-decoration:none;
}
.bar__tel svg{width:22px;height:22px;}

/* ---------- планшет и десктоп ---------------------------------------------------- */
@media (min-width:700px){
  :root{--pad:34px;}
  body{padding-bottom:0;}
  /* Героиня на фото стоит по центру — текст уходит в левую колонку,
     фото смещается вправо, слева затемнение для читаемости. */
  /* первый экран на всю высоту окна: при 660px из-под него выглядывал следующий блок */
  .hero{min-height:clamp(640px,100vh,960px);align-items:flex-start;}
  .hero__bg img{object-position:25% 30%;}
  .hero__veil{
    background:
      linear-gradient(90deg,rgba(14,22,19,.86) 0%,rgba(14,22,19,.6) 36%,rgba(14,22,19,.12) 60%,rgba(14,22,19,0) 100%),
      linear-gradient(180deg,rgba(14,22,19,.35) 0%,rgba(14,22,19,0) 30%,rgba(14,22,19,.15) 72%,var(--night) 100%);
  }
  .hero__video{display:block;}
  /* Полоса доверия — flex-элемент в центрированной колонке: без width:100%
     она сжималась до 352px и висела посреди широкого экрана. */
  /* цифры выровнены по левому краю текста, а не по центру экрана */
  /* stretch, а не width:100% — с отрицательными полями полоса не доходила до правого края */
  .hero__trust{align-self:stretch;width:auto;justify-content:flex-start;gap:0;
    padding-left:calc(var(--pad) + max(0px,calc(6vw - var(--pad))));}
  .hero__trust li{flex:0 0 auto;text-align:left;padding:0 44px;}
  .hero__trust li:first-child{padding-left:0;}
  .hero__inner{width:100%;max-width:max(420px,min(540px,38vw));margin-left:max(0px,calc(6vw - var(--pad)));padding-bottom:36px;}
  .hero__title{font-size:clamp(28px,3.6vw,54px);}
  .hero__lead{font-size:17px;}
  .hero__facts li{font-size:17px;}
  .btn--lg{width:auto;min-width:310px;align-self:flex-start;}
  /* обе кнопки первого экрана одной ширины */
  .hero__actions{max-width:400px;}
  .hero__actions .btn--lg{width:100%;min-width:0;align-self:stretch;}

  .sec{padding:92px var(--pad) 84px;}
  .sec>*{max-width:1060px;margin-left:auto;margin-right:auto;}
  .sec__head{text-align:center;}
  .sec__lead{margin-left:auto;margin-right:auto;}

  .three{padding:110px var(--pad) 100px;}
  .three__head,.three__list{max-width:1060px;margin-left:auto;margin-right:auto;}
  .three__title{font-size:60px;}
  .three__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;}
  .three__list li{border-bottom:1px solid rgba(252,250,245,.22);}

  .progs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;}
  .prog{grid-template-columns:110px minmax(0,1fr);padding:15px;}
  .prog__img{width:110px;height:110px;}

  .steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
  .facts{grid-template-columns:repeat(4,minmax(0,1fr));}
  .cats{grid-template-columns:repeat(4,minmax(0,1fr));}
  .dirs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start;}
  .dir__links{margin-top:auto;}

  /* margin:0 перебивал auto-центрирование из .sec > * — выше 1128px
     галерея прижималась влево, пока остальной контент был по центру. */
  .gallery{margin:0 auto;padding:2px 0 16px;}
  .gallery>li{width:calc(25% - 8px);max-width:none;scroll-snap-align:start;}
  .gallery{scroll-padding-inline:0;}
  /* мышью ленту не пролистать — стрелки по бокам */
  .gal__btn{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:calc(50% - 34px);width:52px;height:52px;padding:0;
    border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--green);
    box-shadow:0 8px 24px rgba(13,59,46,.14);cursor:pointer;transition:opacity .2s ease;
  }
  .gal__btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;}
  .gal__btn--prev{left:-26px;}
  .gal__btn--next{right:-26px;}
  .gal__btn:hover{background:var(--cream);}
  .gal__btn:disabled{opacity:0;pointer-events:none;}
  .floors{max-width:760px;}

  /* мастера — одной лентой со стрелками, как интерьер */
  .rail{margin:0;padding:2px 0 14px;gap:20px;scroll-padding-inline:0;}
  /* 182px: при 1060px видно пять карточек и край шестой — понятно, что лента листается */
  .masters>li{width:182px;}
  .master img{width:182px;height:238px;}
  .master__name{font-size:16px;}
  .master__exp{font-size:12.5px;}
  .gal--masters .gal__btn{top:93px;}

  .promo{padding:48px 40px 42px;text-align:center;}
  .promo__list{align-items:center;}
  .promo__list li{text-align:left;}
  .btn--outline{width:fit-content;min-width:300px;margin:0 auto;}
  .promo .promo__btn{width:fit-content;min-width:300px;margin:0 auto;}

  .cert__lead{text-align:center;max-width:44em;}
  .cert__sums{max-width:720px;}
  .cert__opts{max-width:720px;}
  .cert__btn{max-width:340px;}
  .sec__more{max-width:340px;}
  .cta{padding:110px var(--pad);}
  .cta .btn--lg{width:fit-content;min-width:340px;margin:0 auto;}
  .contacts__list{max-width:560px;}
  .socials{justify-content:center;}
  .reviews__box{max-width:760px;margin:0 auto;}
  .reviews__frame{height:620px;}
  .reviews__all{display:flex;width:fit-content;margin:16px auto 0;}
  .contacts .btn--ghost{max-width:340px;}
  .bar{display:none;}

  /* Плавающая кнопка записи — замена нижней панели телефона.
     Появляется после первого экрана, стоит слева от кнопки чата Jivo. */
  .fab{
    position:fixed;right:104px;bottom:24px;z-index:90;
    display:flex;align-items:center;gap:10px;height:54px;padding:0 24px 0 20px;
    border-radius:100px;background:var(--green);color:var(--paper);
    font-family:var(--sans);font-size:16px;font-weight:600;text-decoration:none;
    box-shadow:0 10px 30px rgba(13,59,46,.28);
    border:1px solid rgba(252,250,245,.4);  /* видна и на зелёных блоках */
    opacity:0;transform:translateY(16px);pointer-events:none;
    transition:opacity .25s ease,transform .25s ease,background-color .2s ease;
  }
  .fab.is-on{opacity:1;transform:none;pointer-events:auto;}
  .fab:hover{background:var(--green-2);}
  .fab svg{width:22px;height:22px;fill:none;stroke:var(--brass);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
}
.fab{display:none;}
@media (min-width:700px){ .fab{display:flex;} }

/* ---------- узкие экраны (320–380 px) -------------------------------------- */
@media (max-width:380px){
  :root{--pad:16px;}
  .hero__facts li{font-size:14.5px;line-height:1.36;}
  .hero__facts{margin-bottom:18px;}
  /* на 320px «2 750 ₽» в 27px не помещается в треть полосы */
  .hero__trust b{font-size:22px;}
  .hero__trust span{font-size:9px;letter-spacing:.1em;}
  /* картинка программы съедала половину строки — уменьшаем */
  .prog{grid-template-columns:76px minmax(0,1fr);gap:12px;padding:11px;}
  .prog__img{width:76px;height:76px;}
  .prog__name{font-size:19px;}
  .dir__links a{padding:9px 12px;}
  .dir__lp{font-size:14px;}
  /* колонка подписей забирала слишком много */
  .contacts__list>div{grid-template-columns:76px minmax(0,1fr);gap:10px;}
  .three__list li{column-gap:14px;}
  .three__t{font-size:26px;}
}

/* ---------- телефон в ландшафте / низкое окно ------------------------------ */
/* При высоте окна меньше ~520px первый экран на 100vh (или 660px на широких)
   уводит кнопку записи под сгиб. Здесь он сжимается до содержимого. */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:0;padding-top:70px;}
  .hero__logo{width:96px;top:14px;}
  .hero__title{font-size:30px;margin-bottom:8px;}
  .hero__facts{gap:0;margin-bottom:12px;}
  .hero__facts li{font-size:13.5px;line-height:1.3;}
  .hero__inner{padding-bottom:14px;}
  /* кнопки в строку — в ландшафте дорога каждая вертикальная точка */
  .hero__actions{flex-direction:row;gap:10px;}
  .hero__actions .btn--lg{width:auto;flex:1;min-height:48px;font-size:15px;white-space:nowrap;}
  .hero__inner{max-width:560px;}
  .hero__actions{max-width:none;}
  /* полоса с цифрами: минимум воздуха, иначе не влезает в 390px */
  .hero__trust{padding:9px var(--pad) 10px;}
  .hero__trust li{padding:0 4px;}
  .hero__trust b{font-size:19px;}
  .hero__trust span{margin-top:4px;font-size:9px;letter-spacing:.1em;}
}


/* =====================================================================
   Фирменная графика. Все четыре элемента — декор: вставлены фоном
   псевдоэлементов, поэтому в разметке их нет и скринридеры их не читают.
   Держатся приглушёнными: их задача — интонация, а не внимание.
   ===================================================================== */

/* Сакянт — над блоком мастеров. Тайская сакральная вязь рядом
   с тайскими мастерами: единственное место, где она уместна по смыслу. */
.masters-sec{position:relative;padding-top:0;}
.masters-sec::before{
  content:"";display:block;height:96px;margin:0 auto 26px;
  background:url("/design/brand/sakyant.png") no-repeat center bottom;
  background-size:auto 96px;opacity:.42;
}

/* Храм — водяной знак в тёмно-зелёном блоке. Бежевая перекраска файла,
   иначе тёмная графика на тёмном фоне не читается вовсе. */
.three{position:relative;overflow:hidden;}
.three::after{
  content:"";position:absolute;right:-86px;bottom:-58px;
  width:300px;height:314px;pointer-events:none;
  background:url("/design/brand/temple-light.png") no-repeat center/contain;
  opacity:.08;
}
.three__head,.three__list{position:relative;z-index:1;}

/* Гибискус — в блоке сертификатов. Переехал сюда из карточки акции,
   чтобы одна и та же ботаника не повторялась на странице дважды. */
.cert-sec{position:relative;overflow:hidden;}
.cert-sec::before{
  content:"";position:absolute;top:-22px;right:-44px;
  width:160px;height:143px;pointer-events:none;
  background:url("/design/brand/hibiscus-gold.png") no-repeat center/contain;
  opacity:.26;
}
.cert-sec > *{position:relative;z-index:1;}

/* Дерево — водяной знак в финальном блоке записи. Тот же приём, что
   с храмом: у тёмно-зелёных блоков появляется общая манера — светлый
   рисунок в глубине. Файл перекрашен в бежевый, иначе на тёмном не виден. */
.cta{position:relative;overflow:hidden;}
.cta::before{
  content:"";position:absolute;left:50%;bottom:-70px;
  width:340px;height:380px;margin-left:-170px;pointer-events:none;
  background:url("/design/brand/tree-light.png") no-repeat center bottom/contain;
  opacity:.07;
}
.cta > *{position:relative;z-index:1;}

/* Ботанический угол в карточке акции. Файл уже отзеркален в макете,
   поэтому CSS-преобразование здесь не нужно. */
.promo{position:relative;overflow:hidden;}
.promo::after{
  content:"";position:absolute;top:-24px;right:-46px;
  width:180px;height:161px;pointer-events:none;
  background:url("/design/brand/corner-mirrored.png") no-repeat center/contain;
  opacity:.5;
}
.promo > *{position:relative;z-index:1;}
.promo > p {
    margin-bottom: 12px;
}

/* Уже 360px горизонтали не хватает: золотой угол и гибискус неизбежно
   заходят на строки заголовков. Там их лучше не показывать вовсе —
   сакянт и водяной знак храма фирменную интонацию держат и без них. */
@media (max-width:360px){
  .cert-sec::before,.promo::after{display:none;}
}

/* Вместо подгонки смещений под каждую ширину — декору отводится
   собственная колонка справа, куда текст просто не заходит.
   На десктопе заголовки центрированы, там резерв не нужен. */
@media (min-width:361px) and (max-width:699px){
  .cert-sec .sec__head{padding-right:100px;}
  .promo__label,.promo__title{padding-right:86px;}
}

@media (max-width:380px){
  .masters-sec::before{height:78px;background-size:auto 78px;margin-bottom:20px;}
  .cert-sec::before{width:130px;height:116px;right:-38px;top:-18px;}
  .promo::after{width:146px;height:130px;top:-20px;right:-40px;}
  .three::after{width:230px;height:241px;right:-72px;bottom:-48px;}
  .cta::before{width:280px;height:313px;margin-left:-140px;bottom:-56px;}
}
@media (min-width:700px){
  .masters-sec::before{height:130px;background-size:auto 130px;margin-bottom:34px;}
  .three::after{width:420px;height:439px;right:-70px;bottom:-60px;}
  .cta::before{width:520px;height:581px;margin-left:-260px;bottom:-110px;opacity:.06;}
  .cert-sec::before{width:210px;height:188px;top:-30px;right:-30px;}
  .promo::after{width:240px;height:214px;top:-34px;right:-40px;}
}

@media (prefers-reduced-motion:reduce){
  .btn,.bar{transition:none;}
  .hero__video{display:none;}
}

/* ===== Всплывающая форма «Дарим 1000р» =====
   Разметку формы отдаёт NetCat (кнопка .button, поля .col50, чекбокс согласия),
   поэтому стили привязаны к её классам внутри .modal. */
.is-modal,.is-modal body{overflow:hidden;}
.modal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(14,22,19,.62);
  animation:modal-fade .2s ease;
}
.modal__box{
  position:relative;width:100%;max-width:460px;max-height:92vh;overflow-y:auto;
  padding:30px 20px calc(22px + env(safe-area-inset-bottom));
  background:var(--paper);color:var(--ink);
  border-radius:20px 20px 0 0;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  animation:modal-up .26s ease;
}
@media (min-width:700px){
  .modal{align-items:center;padding:24px;}
  .modal__box{border-radius:20px;padding:40px 36px 32px;}
}
@keyframes modal-fade{from{opacity:0;}}
@keyframes modal-up{from{transform:translateY(24px);opacity:0;}}
.modal__close{
  position:absolute;top:8px;right:8px;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:transparent;color:var(--green);cursor:pointer;
}
.modal__close svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.6;fill:none;}
.modal__loader{
  width:34px;height:34px;margin:40px auto;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--green);
  animation:modal-spin .8s linear infinite;
}
@keyframes modal-spin{to{transform:rotate(360deg);}}

.modal form > p:first-of-type{
  margin:0 36px 20px 0;
  font-size:15.5px;line-height:1.55 !important;color:var(--ink);
}
/* первая строка текста из NetCat («Дарим 1000р на СПА») — заголовком */
.modal form > p:first-of-type::first-line{
  font-family:var(--serif);font-style:italic;font-size:26px;line-height:1.6;color:var(--green);
}
.modal .cols{display:grid;gap:10px;margin-bottom:14px;}
.modal input[type=text],.modal input[type=tel]{
  display:block;width:100%;min-height:52px;padding:14px 16px;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;
  font-family:var(--sans);font-size:16px;color:var(--ink);
  -webkit-appearance:none;appearance:none;
}
.modal input[type=text]:focus,.modal input[type=tel]:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(13,59,46,.12);}
.modal input.error{border-color:#B3261E;background:#FFF7F6;}
.modal form > p{margin:0 0 16px;}
.modal input[type=checkbox]{
  float:left;width:22px;height:22px;margin:1px 10px 0 0;accent-color:var(--green);
}
.modal input[type=checkbox].error{outline:2px solid #B3261E;outline-offset:1px;}
.agreement_p,.modal label{display:block;overflow:hidden;font-size:13px;line-height:1.45;color:var(--dim);}
.modal label a{color:var(--green);}
.modal .button{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:14px 24px;
  border:0;border-radius:var(--r);background:var(--green);color:var(--paper);
  font-family:var(--sans);font-size:16.5px;font-weight:600;cursor:pointer;
}
.modal .button:active{background:var(--green-2);}
.modal .button:disabled{opacity:.7;cursor:default;}
.modal__err{margin:12px 0 0;font-size:14px;color:#B3261E;}
.modal__err a{color:inherit;}
.modal__done{padding:10px 36px 10px 0;font-size:17px;line-height:1.5;color:var(--green);}

@media (prefers-reduced-motion:reduce){
  .modal,.modal__box{animation:none;}
}

/* ===== Чат JivoSite на телефоне =====
   Кнопка чата стоит в правом нижнем углу — там же кнопка звонка нижней панели.
   На первом экране чат скрыт (закрывал цифры), после прокрутки поднимается над панелью.
   jdiv.__jivoDesktopButton / __jivoMobileButton — постоянные классы-зацепки Jivo. */
@media (max-width:699px){
  jdiv.__jivoDesktopButton,jdiv.__jivoMobileButton{transition:bottom .3s ease,opacity .3s ease !important;}
  html:not(.bar-on) jdiv.__jivoDesktopButton,html:not(.bar-on) jdiv.__jivoMobileButton{
    opacity:0 !important;pointer-events:none !important;
  }
  html.bar-on jdiv.__jivoDesktopButton,html.bar-on jdiv.__jivoMobileButton{
    bottom:calc(66px + env(safe-area-inset-bottom,0px)) !important;
  }
}

/* =====================================================================
   Шапка, меню сайта и подвал — перелинковка текущего сайта.
   До 1099px меню — выезжающая панель по кнопке, от 1100px — строка
   разделов с выпадающими списками. Шапка лежит поверх первого экрана.
   ===================================================================== */
.site-head{position:absolute;top:0;left:0;right:0;z-index:40;color:var(--ivory);}
.site-head.fixed {position: fixed;background:var(--green);}
@media (max-width: 1099px){
  .site-head.fixed {padding-bottom: 1em;}
}
.top{
  display:flex;align-items:center;gap:8px;
  padding:calc(14px + env(safe-area-inset-top,0px)) var(--pad) 0;
}
.top__logo{margin-right:auto;display:block;color:var(--ivory);text-decoration:none;--logo:136px;}
.top__logo img{display:block;width:var(--logo);height:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.5));}
/* подпись под логотипом — выровнена по началу надписи «Остров Тай СПА» (лотос занимает 30%) */
.top__tag{
  display:block;margin-top:5px;padding-left:calc(var(--logo) * .375);
  font-family:var(--sans);font-size:10.5px;line-height:1;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(242,237,227,.78);white-space:nowrap;
}
.top__info,.top__msg,.top__call,.top__phone-t,.top__msg-t{display:none;}
.top__phone,.top__burger{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;padding:0;border-radius:50%;
  border:1px solid rgba(242,237,227,.38);background:rgba(14,22,19,.28);
  color:var(--ivory);text-decoration:none;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.top__phone svg{width:19px;height:19px;}
.top__burger{flex-direction:column;gap:4px;}
.top__burger span{display:block;width:18px;height:1.5px;border-radius:1px;background:currentColor;}

/* выезжающая панель меню */
.nav{
  position:fixed;inset:0;z-index:300;overflow-y:auto;overscroll-behavior:contain;
  padding:0 var(--pad) calc(32px + env(safe-area-inset-bottom,0px));
  background:var(--green);color:var(--paper);
  transform:translateX(100%);visibility:hidden;
  transition:transform .3s cubic-bezier(.4,0,.2,1),visibility .3s;
}
.is-menu .nav{transform:none;visibility:visible;}
.is-menu,.is-menu body{overflow:hidden;}
.is-menu jdiv,.is-menu .bar,.is-menu .fab{visibility:hidden !important;}
.nav__head{
  position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;
  height:calc(72px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);background:var(--green);
}
.nav__logo{display:block;--logo:128px;}
.nav__logo img{display:block;width:var(--logo);height:auto;}
.nav__close{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-8px;
  border:0;background:none;color:var(--paper);cursor:pointer;
}
.nav__close svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;}
.nav__list{border-top:1px solid rgba(252,250,245,.14);}
.nav__item{border-bottom:1px solid rgba(252,250,245,.14);}
.nav__row{display:flex;align-items:center;}
.nav__link{
  flex:1;min-width:0;padding:15px 0;
  font-family:var(--serif);font-style:italic;font-size:23px;line-height:1.2;
  color:var(--paper);text-decoration:none;
}
.nav__toggle{
  display:flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;margin-right:-10px;
  border:0;background:none;color:var(--brass);cursor:pointer;
}
.nav__toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .2s ease;}
.nav__item.is-open .nav__toggle svg{transform:rotate(180deg);}
.nav__sub{display:none;padding:0 0 14px;}
.nav__item.is-open .nav__sub{display:block;}
.nav__sub a{
  display:block;padding:9px 0;font-size:15.5px;line-height:1.35;
  color:rgba(252,250,245,.82);text-decoration:none;
}
.nav__sub2{padding:0 0 4px 14px;border-left:1px solid rgba(252,250,245,.14);margin-left:2px;}
.nav__sub2 a{padding:7px 0;font-size:14px;color:rgba(252,250,245,.62);}
.nav__contacts{margin-top:28px;}
.nav__phone{display:inline-block;font-size:24px;color:var(--paper);text-decoration:none;font-variant-numeric:tabular-nums;}
.nav__addr{margin:8px 0 18px;font-size:14px;line-height:1.5;color:rgba(252,250,245,.68);}
.nav__msg{display:flex;gap:10px;margin-bottom:20px;}
.nav__msg-a{
  display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(252,250,245,.28);color:var(--paper);
}
.nav__msg-a svg,.top__msg-a svg{width:22px;height:22px;}
.nav__btns{display:grid;gap:10px;}
.nav .nav__call{width:100%;min-width:0;margin:0;color:var(--paper);border-color:rgba(252,250,245,.5);background:transparent;}
.nav .nav__book{background:var(--paper);color:var(--green);}

@media (min-width:700px){
  .top{gap:22px;padding-top:20px;padding-left:calc(var(--pad) + max(0px,calc(6vw - var(--pad))));padding-right:calc(var(--pad) + max(0px,calc(6vw - var(--pad))));}
  .top__logo{--logo:156px;}
  .top__phone{width:auto;height:auto;border:0;border-radius:0;background:none;gap:8px;-webkit-backdrop-filter:none;backdrop-filter:none;}
  .top__phone-t{display:inline;font-size:17px;font-weight:600;letter-spacing:.01em;white-space:nowrap;font-variant-numeric:tabular-nums;}
  .top__phone svg{color:var(--brass);}
  .top__msg{display:flex;align-items:center;gap:6px;}
  .top__msg-a{
    display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
    border:1px solid rgba(242,237,227,.34);color:var(--ivory);transition:background-color .2s ease;
  }
  .top__msg-a:hover{background:rgba(242,237,227,.14);}
  .top__msg-a svg{width:19px;height:19px;}
  .nav{left:auto;width:420px;box-shadow:-20px 0 60px rgba(0,0,0,.3);}
}

@media (min-width:1100px){
  .top{gap:30px;padding-top:22px;}
  .top__info{display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:1.3;color:rgba(242,237,227,.72);}
  .top__msg-t{display:block;margin-right:6px;font-size:13px;color:rgba(242,237,227,.72);}
  .top__call{
    display:flex;align-items:center;height:44px;padding:0 22px;border-radius:100px;
    border:1px solid rgba(242,237,227,.55);color:var(--ivory);text-decoration:none;
    font-size:15px;font-weight:600;white-space:nowrap;transition:background-color .2s ease;
  }
  .top__call:hover{background:rgba(242,237,227,.14);}
  .top__burger{display:none;}

  /* строка разделов */
  .nav{
    position:static;inset:auto;width:auto;overflow:visible;transform:none;visibility:visible;
    padding:0 calc(var(--pad) + max(0px,calc(6vw - var(--pad))));margin-top:16px;
    background:none;color:inherit;box-shadow:none;transition:none;
  }
  .nav__head,.nav__contacts{display:none;}
  .nav__list{display:flex;gap:0 30px;flex-wrap:wrap;border-top:1px solid rgba(242,237,227,.16);border-bottom:1px solid rgba(242,237,227,.16);}
  .nav__item{position:relative;border:0;}
  .nav__link{
    padding:13px 0;font-family:var(--sans);font-style:normal;font-size:15px;font-weight:500;
    color:rgba(242,237,227,.92);transition:color .2s ease;
  }
  .nav__link:hover{color:var(--brass);}
  .nav__toggle{width:26px;height:44px;margin:0 0 0 2px;color:rgba(242,237,227,.6);}
  .nav__toggle svg{width:15px;height:15px;}
  .nav__sub{
    display:none;position:absolute;top:100%;left:-22px;z-index:5;
    min-width:290px;max-height:calc(100vh - 170px);overflow-y:auto;padding:12px 0;
    background:var(--paper);border-radius:14px;box-shadow:0 20px 50px rgba(14,22,19,.28);
  }
  .nav__item:hover .nav__sub,.nav__item:focus-within .nav__sub,.nav__item.is-open .nav__sub{display:block;}
  .nav__item:hover .nav__toggle svg{transform:rotate(180deg);}
  .nav__sub a{padding:8px 22px;font-size:14.5px;color:var(--green);}
  .nav__sub a:hover{background:var(--cream);}
  .nav__sub2{margin:0 0 6px 22px;padding:0;border-left:1px solid var(--line);}
  .nav__sub2 a{padding:5px 16px;font-size:13.5px;color:var(--dim);}
  /* последние разделы — список прижат к правому краю, чтобы не уходил за экран */
  .nav__item:nth-last-child(-n+2) .nav__sub{left:auto;right:-22px;}
}

/* подвал */
.site-foot{
  padding:52px var(--pad) 30px;background:var(--green);color:rgba(252,250,245,.8);
  font-size:14.5px;line-height:1.5;
}
.site-foot a{color:inherit;text-decoration:none;}
.site-foot a:hover{color:var(--paper);}
.site-foot__in{display:grid;gap:34px;}
.site-foot__brand img{display:block;width:156px;height:auto;}
.site-foot__tag{margin:6px 0 24px;padding-left:47px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(252,250,245,.7);}
.site-foot__h{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);}
.site-foot__soc{display:flex;gap:10px;}
.site-foot__soc a{
  display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(252,250,245,.26);color:var(--paper);
}
.site-foot__soc svg{width:21px;height:21px;}
.site-foot__col ul{display:grid;gap:0 18px;}
.site-foot__col:first-of-type ul{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.site-foot__col li a{display:block;padding:7px 0;}
.site-foot__req p{margin:0 0 7px;}
.site-foot__req a{color:var(--paper);}
.site-foot__ip{font-size:15.5px;font-weight:600;color:var(--paper);}
.site-foot__bottom{
  display:flex;flex-direction:column;gap:14px;margin-top:38px;padding-top:24px;
  border-top:1px solid rgba(252,250,245,.14);font-size:13px;color:rgba(252,250,245,.58);
}
.site-foot__bottom p{margin:0;}
.site-foot__legal a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(252,250,245,.3);}
.site-foot__pay{
  display:inline-flex;align-items:center;gap:16px;align-self:flex-start;
  padding:9px 14px;border-radius:10px;background:var(--paper);
}
.site-foot__pay img{height:16px;width:auto;}
@media (min-width:700px){
  /* снизу место под плавающую кнопку «Онлайн-запись» */
  .site-foot{padding:72px var(--pad) 96px;}
  .site-foot__in,.site-foot__bottom{max-width:1060px;margin-left:auto;margin-right:auto;}
  .site-foot__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 48px;}
  .site-foot__bottom{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;}
}
@media (min-width:1100px){
  .site-foot__in{grid-template-columns:minmax(0,.8fr) minmax(0,.9fr) minmax(0,1.2fr) minmax(0,1.1fr);}
  .site-foot__col:first-of-type ul{grid-template-columns:minmax(0,1fr);}
}

#cookie_note{
	display: none;
	position: fixed;
    z-index: 9999999999;
    bottom: 15px;
    left: 50%;
    width: 480px;
    max-width: 90%;
    padding: 20px;
    font-size: 14px;
    line-height: 20px;
    transform: translateX(-50%);
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.4);
}
#cookie_note.show {
	display: flex;
    align-items: center;
}
#cookie_note button {
    font-size: inherit;
}
@media (max-width: 1024px) {
    #cookie_note.show {
        flex-wrap: wrap;
        justify-content: center;
    }
    #cookie_note button {
        margin: 10px 0 0;
    }
}
.callback-form input[type=text], .callback-form button {
    margin: 1em 0;
}