@import url("../fonts/fonts.css?v=d21cbc37");

/* =========================================================================
   Рахимова Мина Алетдиновна — пластический хирург
   Дизайн-система: liquid glass поверх градиентного полотна
   ========================================================================= */

:root {
  /* --- чернила --- */
  --ink:        #2a2233;
  --ink-70:     #5a4d63;
  --ink-50:     #6f5f79;   /* 4.99:1 на стекле */
  --ink-30:     #857590;   /* плейсхолдеры */

  /* --- акценты --- */
  --rose:       #b25a78;
  --violet:     #7c5ec4;
  --rose-deep:  #a04a76;   /* 4.79:1 — розовый для текста */
  --grad:       linear-gradient(95deg, var(--rose), var(--violet));

  /* --- стекло --- */
  --glass:      rgba(255, 255, 255, .54);
  --glass-hi:   rgba(255, 255, 255, .68);
  --edge:       rgba(255, 255, 255, .72);
  --edge-soft:  rgba(255, 255, 255, .5);
  --blur:       blur(18px) saturate(150%);
  --shadow-s:   0 .375rem 1.125rem rgba(80, 50, 90, .08);
  --shadow-m:   0 .75rem 2.125rem rgba(80, 50, 90, .12);
  --shadow-l:   0 1.375rem 3.75rem rgba(80, 50, 90, .18);
  --shadow-cta: 0 .75rem 1.875rem rgba(150, 80, 150, .34);

  /* --- геометрия --- */
  --r-xs: .75rem;
  --r-s:  1.125rem;
  --r-m:  1.5rem;
  --r-l:  2rem;
  --r-xl: 2.5rem;
  --r-pill: 999px;

  --page: 77.5rem;
  --gut: clamp(1.125rem, 4.2vw, 3.5rem);
  --section-y: clamp(4rem, 9vw, 8rem);

  /* --- типографика --- */
  --display: "Unbounded", "Trebuchet MS", sans-serif;
  --text: "Manrope", "Segoe UI", system-ui, sans-serif;
  /* подпись логотипа — антиква, как в выбранном заказчицей знаке */
  --brand: "Cormorant Garamond", "Times New Roman", serif;

  --t-h1:   clamp(2.1rem, 1.15rem + 4.2vw, 3.5rem);
  --t-h2:   clamp(1.55rem, 1.05rem + 2.2vw, 2.45rem);
  --t-h3:   clamp(1.12rem, .98rem + .62vw, 1.35rem);
  --t-lead: clamp(.98rem, .93rem + .3vw, 1.1rem);
  --t-body: clamp(.9rem, .87rem + .18vw, .97rem);
  --t-sm:   .82rem;
  --t-xs:   .74rem;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --nav-h: 6rem;
  color-scheme: light;
}

/* ---------- сброс ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* Масштаб для больших мониторов.
   Вся вёрстка в rem, поэтому одна эта строка увеличивает сайт целиком —
   текст, отступы, фото и шапку — без смены композиции. До ~1440 px
   ничего не меняется (16 px). Дальше база растёт плавно: ~17,5 px на 24"
   Full HD, ~21 px на 27–32" QHD и 4K со 150 %, потолок — 26 px.
   Считаем и по ширине, и по высоте окна: на ультрашироком 3440×1440
   масштаб как у 2560×1440, иначе первый экран не влезает по высоте.
   Проценты, а не px, — чтобы уважать крупный шрифт в настройках браузера. */
html {
  font-size: clamp(100%, min(.55vw, 1vh) + 50%, 162.5%);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + .75rem);
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 110, 160, .45) transparent;
}

/* ---------- полоса прокрутки ---------- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 99px;
  background: rgba(150, 110, 160, .42);
  background-clip: content-box;
  transition: background-color .2s ease;
}

::-webkit-scrollbar-thumb:hover { background: rgba(140, 95, 155, .68); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--text);
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--ink);
  background: #eedfe8;
  /* Страховка от случайного переполнения. Именно hidden, а не clip:
     clip на body (как и на html) распространяется на область просмотра
     и полностью выключает прокрутку страницы — проверено. */
  overflow-x: hidden;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* «Палочка» над текстом, будто туда можно печатать, бывает двух видов.
     Курсор мыши — меняем на стрелку. Мигающая каретка — её Chrome и Edge
     на Windows ставят в любой текст по клику, если включена навигация
     с текстовым курсором (клавиша F7); прячем прозрачным цветом. В полях
     формы — и курсор, и каретка как обычно. Выделять и копировать текст можно. */
  cursor: default;
  caret-color: transparent;
}

input,
textarea,
[contenteditable="true"] { cursor: text; caret-color: var(--rose); }

input[type="checkbox"],
input[type="radio"],
.consent { cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
  border-radius: .25rem;
}

::selection { background: rgba(178, 90, 120, .22); }

/* ---------- фон: цветные пятна ---------- */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
  background: linear-gradient(160deg, #f6e7ea 0%, #ecd9e6 30%, #dcd4ef 60%, #f3e3da 100%);
}

/* will-change не ставим: анимация и так поднимает пятна на GPU, а вечные
   слои на пол-экрана каждый выгружали тайлы при приближении страницы —
   содержимое на кадр пропадало, оставался один фон. */
.aurora span {
  position: absolute;
  border-radius: 50%;
}

/* Пока страницу приближают жестом (pinch), фон и бегущая строка стоят:
   браузер перерисовывает их на каждом шаге масштаба, а это самые крупные
   движущиеся слои. Класс ставит скрипт по visualViewport.scale. */
.is-pinched .aurora span,
.is-pinched .marquee__track { animation-play-state: paused; }

/* Пока страница приближена жестом, стекло не размывает фон: backdrop-filter
   пересчитывается на каждом шаге масштаба и на Mac рвал картинку. Плотный
   белый на эти секунды выглядит так же спокойно. */
.is-pinched .head,
.is-pinched .hero__stats,
.is-pinched .sticky-cta {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(255, 255, 255, .92);
}

/* Смена масштаба (Cmd +/−, Ctrl + колесо) — это resize, и все размеры в rem
   меняются разом. Раньше это запускало сотни CSS-переходов: тени, сдвиги,
   ширины плыли к новым значениям, пока страница перестраивалась, и сайт
   «рвался». На время resize переходы выключены — страница просто встаёт
   в новый масштаб. Класс ставит и снимает скрипт. */
.is-resizing *,
.is-resizing *::before,
.is-resizing *::after {
  transition: none !important;
  animation-play-state: paused !important;
}

.aurora span:nth-child(1) {
  top: -14vh; left: -8vw;
  width: 46vw; height: 46vw; min-width: 380px; min-height: 380px;
  background: radial-gradient(circle, rgba(220, 120, 140, .46), transparent 65%);
  animation: drift-a 26s var(--ease) infinite alternate;
}

.aurora span:nth-child(2) {
  top: 26vh; right: -14vw;
  width: 52vw; height: 52vw; min-width: 420px; min-height: 420px;
  background: radial-gradient(circle, rgba(140, 110, 220, .38), transparent 65%);
  animation: drift-b 32s var(--ease) infinite alternate;
}

.aurora span:nth-child(3) {
  bottom: -10vh; left: 4vw;
  width: 44vw; height: 44vw; min-width: 360px; min-height: 360px;
  background: radial-gradient(circle, rgba(230, 170, 120, .42), transparent 65%);
  animation: drift-c 29s var(--ease) infinite alternate;
}

@keyframes drift-a { to { transform: translate3d(6vw, 5vh, 0) scale(1.12); } }
@keyframes drift-b { to { transform: translate3d(-7vw, -4vh, 0) scale(1.08); } }
@keyframes drift-c { to { transform: translate3d(5vw, -6vh, 0) scale(1.14); } }

/* ---------- раскладка ---------- */
.wrap {
  width: min(100% - var(--gut) * 2, var(--page));
  margin-inline: auto;
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.75rem, 6vw, 5.25rem); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 14px 22px;
  border-radius: 0 0 var(--r-s) 0;
  background: var(--ink);
  color: #fff;
}

.skip:focus { left: 0; }

/* ---------- общие атомы ---------- */
.glass {
  background: var(--glass);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-m);
}

/* ---------- blur-up ----------
   Плейсхолдер и оригинал — два отдельных слоя. Анимируем только opacity
   и transform: их композитор крутит на GPU без перерисовки, поэтому
   переход не дёргается на слабых телефонах (штатный blur-фильтр на фоне
   пересчитывается на CPU каждый кадр). Рамка держит место заранее —
   вёрстка не прыгает. */
.frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ar, 3 / 4);
  background: rgba(120, 100, 130, .14);
  isolation: isolate;
}

.frame__ph {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* лёгкий upscale прячет мыльные края миниатюры 20x20 */
  transform: scale(1.06);
  filter: blur(14px);
  opacity: 1;
  transition: opacity .6s var(--ease-out);
  pointer-events: none;
}

.frame__img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .6s var(--ease-out), transform .7s var(--ease-out);
}

.frame.is-loaded .frame__img { opacity: 1; transform: scale(1); }
.frame.is-loaded .frame__ph { opacity: 0; }

/* will-change здесь намеренно нет. Он висел на каждой рамке с самого
   начала, а снимался только после загрузки — на странице с тремя десятками
   снимков это полсотни вечных слоёв композитора и заметные рывки при
   прокрутке ленты. Переходы opacity/transform браузер и так поднимает
   на GPU на время анимации. */

@media (prefers-reduced-motion: reduce) {
  .frame__ph, .frame__img { transition-duration: 1ms; transform: none; }
  .frame.is-loaded .frame__img { transform: none; }
}

.kicker {
  display: inline-block;
  padding: .5rem 1.125rem;
  border-radius: var(--r-pill);
  background: var(--glass-hi);
  border: 1px solid var(--edge);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7a5a70;
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 500;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.72;
  color: var(--ink-70);
}

.sec-head { margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.sec-head h2 { font-size: var(--t-h2); }
.sec-head p { margin-top: .875rem; max-width: 62ch; }

/* ---------- кнопки ---------- */
.btn {
  --btn-y: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  padding: var(--btn-y) clamp(1.5rem, 3vw, 2.125rem);
  border-radius: var(--r-pill);
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out),
              background-color .25s var(--ease), color .25s var(--ease);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 .625rem 1.625rem -.5rem rgba(150, 80, 150, .55),
              inset 0 1px 1px rgba(255, 255, 255, .38);
}

/* блик пробегает слева направо при наведении */
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%,
              rgba(255, 255, 255, .32) 50%, transparent 65%);
  translate: -120% 0;
  transition: translate .7s var(--ease-out);
}

.btn--primary:hover { box-shadow: 0 1rem 2.125rem -.5rem rgba(150, 80, 150, .62),
                                  inset 0 1px 1px rgba(255, 255, 255, .45); }
.btn--primary:hover::before { translate: 120% 0; }

/* стрелка внутри кнопки подаётся вперёд */
.btn__arrow {
  flex: none;
  width: 1.0625rem; height: 1.0625rem;
  transition: transform .35s var(--ease-out);
}

.btn:hover .btn__arrow { transform: translateX(.1875rem); }

@media (prefers-reduced-motion: reduce) {
  .btn--primary::before { display: none; }
  .btn:hover .btn__arrow { transform: none; }
}

.btn--ghost {
  background: var(--glass-hi);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-s);
}

.btn--ghost:hover { background: rgba(255, 255, 255, .8); }

.btn--dark { background: rgba(42, 34, 51, .92); color: #fff; }
.btn--dark:hover { background: var(--ink); }

.btn--sm { --btn-y: .6875rem; padding-inline: 1.5rem; font-size: var(--t-sm); }
.btn--block { width: 100%; }

/* ---------- шапка ----------
   Плавающая панель как на aiethos.ru: не прижата к краю, скруглённый
   прямоугольник, стекло поверх контента. Ширина — по колонке контента
   с тем же выносом, что на ноутбуке: на 32" логотип и кнопка стоят над
   текстом, а не разъезжаются по краям экрана.
   Прячется при листании вниз и возвращается при листании вверх (headroom).
   will-change здесь нет: постоянный слой вместе с backdrop-filter мерцал
   при приближении страницы. */
.head {
  position: sticky;
  top: .875rem;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(.875rem, 2vw, 1.75rem);
  width: min(100% - 2 * clamp(1rem, 5vw, 3rem), var(--page) + 6.5rem);
  margin: .875rem auto 0;
  padding: .75rem .875rem .75rem 1.25rem;
  border-radius: 1.375rem;
  /* Стекло плотное: меню должно читаться, даже если размытие фона не
     сработало. Так бывает — браузер сообщает, что backdrop-filter умеет,
     но не рисует его (слабая видеокарта, режим энергосбережения, WebKit
     под Windows); тогда над тёмным блоком результатов сквозь шапку резко
     просвечивали текст и фото. */
  background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .78));
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 1rem 2.5rem -1rem rgba(58, 38, 66, .32),
              inset 0 1px 1px rgba(255, 255, 255, .9);
  /* Появление: шапка въезжает ровно и мягко садится на место, одновременно
     проявляясь. Кривая easeOutQuad: у «экспоненциальных» кривых первые
     40 мс проходят треть пути, и шапка всё равно казалась выпрыгнувшей.
     Раньше было 0,32 с. */
  transition: transform .6s cubic-bezier(.25, .46, .45, .94),
              opacity .5s cubic-bezier(.25, .46, .45, .94),
              box-shadow .3s ease;
}

/* Уход наверх — короче и с разгоном: шапка уступает место и не тянет
   внимание. У скрытого состояния свой переход: браузер берёт его
   из того состояния, в которое элемент переходит.
   Сдвиг в чистых процентах, без rem: иначе при смене масштаба страницы
   значение менялось и запускало лишний переход. */
.head[data-hidden="true"] {
  transform: translateY(-140%);
  opacity: 0;
  transition: transform .42s cubic-bezier(.55, .085, .68, .53),
              opacity .28s ease .12s,
              box-shadow .3s ease;
}

/* Прогресс чтения: нижняя кромка стекла наливается градиентом.
   Полоса — это «рамка» панели снизу: маска оставляет только нижний
   отступ в 2px, поэтому линия повторяет скругление и сходит на нет
   в углах, а не висит отрезком посреди панели. При прокрутке меняется
   только transform заливки — перерисовки нет. */
.head__progress {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding-bottom: 2px;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: min(1, var(--p, 0) * 14);
}

.head__progress::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  transition: transform .12s linear;
}

/* Клавиатурная навигация не должна упираться в спрятанную шапку. */
.head:focus-within { transform: none !important; opacity: 1 !important; }

.head__right {
  display: flex;
  align-items: center;
  gap: clamp(.875rem, 1.6vw, 1.375rem);
}

.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  font-family: var(--brand);
  font-size: clamp(.98rem, .9rem + .3vw, 1.14rem);
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1;
  white-space: nowrap;
}

.brand__mark { width: 2.875rem; height: 2.875rem; flex: none; }

/* на очень узких экранах имя усекается, а не распирает шапку */
.brand > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.nav { display: flex; gap: clamp(.875rem, 1.8vw, 1.375rem); }

/* Подчёркивание растёт из background-size — анимируется без лишнего слоя. */
.nav a {
  padding-bottom: .1875rem;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-70);
  white-space: nowrap;
  background-image: var(--grad);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size .3s var(--ease-out), color .2s ease;
}

.nav a:hover,
.nav a[aria-current="true"] { color: var(--ink); background-size: 100% 1.5px; }

.head__phone {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  transition: color .2s ease;
}

.head__phone:hover { color: var(--rose-deep); }

.burger {
  display: none;
  width: 2.625rem; height: 2.625rem;
  border-radius: .875rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .3125rem;
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--edge-soft);
}

.burger i {
  display: block;
  width: 1.125rem; height: 1.6px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}

body[data-menu="1"] .burger i:nth-child(1) { transform: translateY(.20625rem) rotate(45deg); }
body[data-menu="1"] .burger i:nth-child(2) { transform: translateY(-.20625rem) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .head,
  .head[data-hidden="true"] { transition: none; }
  .head[data-hidden="true"] { transform: none; opacity: 1; }
}

/* ---------- мобильное меню ---------- */
/* На низком экране (iPhone SE, телефон боком) пункты не помещаются по высоте.
   Обычный center выталкивал их вверх — под крестик и за край экрана, и крестик
   переставал нажиматься. Поэтому: отступ сверху под крестик, своя прокрутка
   и safe center — при нехватке места список встаёт от верха, а не уезжает. */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  align-content: center;
  align-content: safe center;
  gap: .375rem;
  padding: 4.75rem var(--gut) 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(246, 231, 238, .88);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s var(--ease);
}

body[data-menu="1"] .drawer {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
body[data-menu="1"] { overflow: hidden; }

.drawer__close {
  position: absolute;
  top: 1.125rem; right: var(--gut);
  width: 2.875rem; height: 2.875rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-s);
  color: var(--ink);
  transition: transform .3s var(--ease-out), background-color .25s ease;
}

.drawer__close:hover { background: #fff; transform: rotate(90deg); }
.drawer__close svg { width: 1.0625rem; height: 1.0625rem; }

.drawer__hint {
  margin-top: 1.125rem;
  font-size: var(--t-xs);
  color: var(--ink-50);
}

.drawer a {
  padding: .875rem .25rem;
  border-bottom: 1px solid rgba(42, 34, 51, .1);
  font-family: var(--display);
  font-size: 1.32rem;
  font-weight: 300;
  opacity: 0;
  transform: translateY(.875rem);
}

body[data-menu="1"] .drawer a { animation: drawer-in .5s var(--ease-out) forwards; }

.drawer a:nth-child(1) { animation-delay: .05s; }
.drawer a:nth-child(2) { animation-delay: .10s; }
.drawer a:nth-child(3) { animation-delay: .15s; }
.drawer a:nth-child(4) { animation-delay: .20s; }
.drawer a:nth-child(5) { animation-delay: .25s; }
.drawer a:nth-child(6) { animation-delay: .30s; }
.drawer .btn { margin-top: 1.375rem; border-bottom: 0; animation-delay: .35s; }
.drawer .drawer__hint { animation-delay: .4s; }

@keyframes drawer-in { to { opacity: 1; transform: none; } }

/* ---------- первый экран ---------- */
.hero { padding-block: clamp(1.75rem, 4vw, 3.5rem) clamp(3rem, 7vw, 6rem); }

.hero__grid {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

/* В h1 входит и строка «Пластический хирург в Москве»: так главный
   заголовок страницы говорит поисковику, о чём сайт, а выглядит всё
   по-прежнему — плашка сверху, крупный слоган под ней. */
.hero h1 {
  font-size: var(--t-h1);
  margin: 0 0 1.5rem;
}

/* блоком, а не inline-block: иначе строка плашки получает высоту
   крупного шрифта заголовка и над слоганом появляется лишний воздух */
.hero h1 .kicker {
  display: block;
  width: fit-content;
  font-family: var(--text);
  line-height: 1.7;
  letter-spacing: .14em;
}

.hero__title { display: block; margin-top: 1.375rem; }

.hero__lead { max-width: 46ch; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-top: clamp(1.75rem, 3.4vw, 2.375rem);
}

.hero__media { position: relative; }

.hero__photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-l);
}

.hero__photo .frame__img { object-position: 50% 14%; }

.hero__stats {
  position: absolute;
  left: clamp(-2rem, -2vw, 0px);
  bottom: clamp(1.125rem, 2.4vw, 1.875rem);
  display: flex;
  gap: clamp(1.125rem, 2.2vw, 1.75rem);
  padding: 1.125rem clamp(1.25rem, 2.4vw, 1.75rem);
  border-radius: var(--r-m);
  background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid rgba(255, 255, 255, .88);
  box-shadow: var(--shadow-m);
}

.hero__stats dt {
  font-family: var(--display);
  font-size: clamp(1.02rem, .9rem + .5vw, 1.28rem);
  font-weight: 400;
  line-height: 1.1;
}

.hero__stats dd {
  margin: .3125rem 0 0;
  font-size: var(--t-xs);
  line-height: 1.35;
  color: var(--ink-70);
}

/* Лента-бегущая строка — стеклянная капсула по ширине шапки.
   Раньше это была полоса от края до края экрана: на большом мониторе
   тонкая строка мелкого текста тянулась через весь экран в отрыве от
   колонки контента. Теперь лента стоит в той же сетке, что шапка и блоки,
   а края растворяются внутри капсулы (маска — на внутреннем окне, чтобы
   не гасить рамку и фон самой капсулы). */
.marquee {
  width: min(100% - 2 * clamp(1rem, 5vw, 3rem), var(--page) + 6.5rem);
  margin-inline: auto;
  padding-block: .9375rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .72);
  background: linear-gradient(135deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .28));
  box-shadow: 0 .75rem 2rem -1.25rem rgba(58, 38, 66, .3),
              inset 0 1px 1px rgba(255, 255, 255, .85);
}

.marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  /* длительность считает скрипт по ширине набора — скорость одинаковая
     на любом экране */
  animation: marquee var(--marquee-dur, 42s) linear infinite;
}

/* две одинаковые группы: сдвиг ровно на -50% стыкуется без скачка */
.marquee__group {
  display: flex;
  gap: clamp(1.375rem, 3vw, 2.375rem);
  padding-right: clamp(1.375rem, 3vw, 2.375rem);
}

.marquee__group span { position: relative; }

.marquee__group span::after {
  content: "·";
  position: absolute;
  right: clamp(-1.3125rem, -1.6vw, -.75rem);
  color: rgba(122, 106, 130, .55);
}


.marquee span {
  font-family: var(--display);
  font-size: clamp(.82rem, .74rem + .34vw, 1rem);
  font-weight: 300;
  letter-spacing: .06em;
  white-space: nowrap;
  color: var(--ink-50);
}

@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- услуги ---------- */
.services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.125rem, 2.2vw, 1.625rem);
}

/* элементы сеток не должны распираться длинным словом */
.services > *,
.steps > *,
.hero__grid > *,
.about > *,
.booking__grid > *,
.foot__grid > *,
.case__head { min-width: 0; }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  border-radius: var(--r-l);
  background: var(--glass);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-s);
  overflow: hidden;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(255, 255, 255, .5), transparent 55%);
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}

.card:hover { transform: translateY(-.3125rem); box-shadow: var(--shadow-l); }
.card:hover::before { opacity: 1; }

.card__no {
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .18em;
  color: var(--rose-deep);
}

.card h3 {
  font-size: var(--t-h3);
  font-weight: 400;
  margin: .75rem 0 .625rem;
}

.card__desc { color: var(--ink-70); }

.card__list {
  display: grid;
  gap: .5625rem;
  margin-top: 1.125rem;
  padding-top: 1.125rem;
  border-top: 1px solid rgba(42, 34, 51, .1);
  font-size: var(--t-sm);
  color: var(--ink-70);
}

.card__list li {
  position: relative;
  padding-left: 1.25rem;
  line-height: 1.6;
}

.card__list li::before {
  content: "";
  position: absolute;
  left: 2px; top: .62em;
  width: .4375rem; height: .4375rem;
  border-radius: 50%;
  background: var(--grad);
  opacity: .75;
}

.card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: auto;
  padding-top: 1.375rem;
}

.card__price {
  font-size: var(--t-sm);
  color: var(--ink-50);
}

.card__price b {
  display: block;
  font-family: var(--display);
  font-size: .97rem;
  font-weight: 400;
  color: var(--ink);
}

/* примечание о степенях диастаза */
.note {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.125rem;
  margin-top: 1rem;
  padding: .875rem 1.125rem;
  border-radius: var(--r-s);
  background: rgba(255, 255, 255, .44);
  border: 1px solid var(--edge-soft);
  font-size: var(--t-xs);
  color: var(--ink-50);
}

.note b { color: var(--ink); font-weight: 600; }

/* ---------- результаты ---------- */
.results-panel {
  padding: clamp(1.5rem, 3vw, 2.75rem);
  border-radius: var(--r-xl);
  background: rgba(42, 34, 51, .9);
  color: #f3edf7;
  box-shadow: var(--shadow-l);
}

.results-panel h2 { color: #fff; }
.results-panel .sec-head p { color: #cfc3d8; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin-bottom: 1.625rem;
}

.filters button { flex: none; }

/* края растворяются только с той стороны, куда ещё можно прокрутить */
.filters[data-fade="r"] {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
}

.filters[data-fade="l"] {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 34px);
  mask-image: linear-gradient(90deg, transparent, #000 34px);
}

.filters[data-fade="lr"] {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 34px,
                      #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 34px,
              #000 calc(100% - 34px), transparent);
}

.filters button {
  padding: .625rem 1.25rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .07);
  font-size: var(--t-sm);
  color: #d9cee2;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease);
}

.filters button:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.filters button[aria-selected="true"] {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}

.gallery-wrap { position: relative; }

/* Пока шторка не снята, листалку убираем совсем (display, а не visibility):
   тогда шторка ложится ровно на карточку. Раньше здесь ещё и подрезалась
   высота — это осталось от сетки из 18 фото и резало карточку слайдера
   посередине, оставляя под фото тёмную полосу. */
.gallery-wrap[data-locked="1"] .pager { display: none; }

.gallery-wrap[data-locked="1"] .frame__img { filter: blur(22px); }
/* соседние работы за шторкой не видны — и размывать их незачем */
.gallery-wrap[data-locked="1"] .case[inert] .frame__img { visibility: hidden; }
.gallery-wrap[data-locked="1"] .shot { cursor: default; }

.cases { display: grid; }

/* Высота блока постоянная без всякого скрипта: в ленте всегда лежат все
   работы, а высота flex-ленты — это высота самой высокой из них. При
   листании и смене фильтра блок не меняет размер. */
.cases__viewport { overflow: hidden; }

.cases__track {
  display: flex;
  /* карточки тянутся до высоты самой высокой работы: остаток пустоты
     оказывается внутри карточки и читается как поля, а не как дыра */
  align-items: stretch;
  /* translate, а не translate3d: 3D-сдвиг держал всю ленту из шести
     карточек отдельным огромным слоем даже в покое. Плоский сдвиг
     поднимается на GPU только на время перелистывания. */
  translate: calc(var(--i, 0) * -100%) 0;
  transition: translate .55s var(--ease-out);
}

.cases__track > .case { flex: 0 0 100%; min-width: 0; }

/* листалка */
/* явный display перебивает браузерное [hidden] { display: none } */
.pager[hidden] { display: none; }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  width: max-content;
  margin: 1.5rem auto 0;
  padding: .5rem .625rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .12);
}

.pager__btn {
  width: 2.625rem; height: 2.625rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .26);
  color: #fff;
  transition: background-color .25s ease, transform .3s var(--ease-out),
              opacity .25s ease;
}

.pager__btn:hover:not(:disabled) { background: rgba(255, 255, 255, .26); transform: scale(1.07); }
.pager__btn:active:not(:disabled) { transform: scale(.96); }
.pager__btn:disabled { opacity: .28; cursor: default; }
.pager__btn svg { width: 1.0625rem; height: 1.0625rem; }

.pager__dots { display: flex; align-items: center; gap: .4375rem; padding-inline: .375rem; }

.pager__dots button {
  width: .5625rem; height: .5625rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, .34);
  transition: width .35s var(--ease-out), background-color .25s ease;
}

.pager__dots button:hover { background: rgba(255, 255, 255, .6); }

.pager__dots button[aria-current="true"] {
  width: 1.75rem;
  background: var(--grad);
}

.pager__count {
  min-width: 3.25rem;
  text-align: center;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .06em;
  color: #e0d5e8;
}

@media (max-width: 480px) {
  .pager__dots { display: none; }
}

.case {
  display: grid;
  grid-template-columns: minmax(0, 20.625rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.6vw, 2.375rem);
  padding: clamp(1.125rem, 2.2vw, 1.75rem);
  border-radius: var(--r-l);
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .12);
}

.case__head h3 {
  font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem);
  font-weight: 400;
  color: #fff;
}

.case__sub {
  margin-top: .375rem;
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: #dda2ba;
}

.case__desc {
  margin-top: .875rem;
  font-size: var(--t-sm);
  line-height: 1.65;
  color: #cfc3d8;
}

.case__points {
  display: grid;
  gap: .5rem;
  margin-top: .875rem;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: #bfb0c9;
}

.case__points li { position: relative; padding-left: 1.0625rem; }

.case__points li::before {
  content: "";
  position: absolute;
  left: 1px; top: .6em;
  width: .375rem; height: .375rem;
  border-radius: 50%;
  background: var(--grad);
}

.case__note {
  margin-top: .875rem;
  padding: .625rem .875rem;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  font-size: var(--t-xs);
  color: #d5c9de;
}

/* align-content: start обязателен. Карточка растянута до высоты самой
   высокой работы, и без этого свободная высота раздаётся строкам грида:
   плашки «До/После» вытягивались в длинные капсулы, а между ними и фото
   зияла дыра. */
/* align-content: center. Высота блока задана по самой высокой работе,
   и остаток надо распределить: при start он копился одной дырой внизу.
   stretch здесь нельзя — он растягивает строки грида, и плашки
   «До/После» превращались в длинные капсулы. */
.case__compare {
  display: grid;
  align-content: center;
  gap: clamp(.5rem, 1vw, .75rem);
}

.compare__labels,
.compare__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(.5rem, 1.2vw, 1rem);
}

/* Дополнительные ракурсы в карточке не показываем: из-за них работы
   с двумя ракурсами были вдвое выше работ с одним, и при фиксированной
   высоте блока под короткими зияла дыра. Все снимки работы открываются
   в лайтбоксе — там под кадром полоса миниатюр. */
.case__extra {
  justify-self: center;
  margin-top: .25rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5625rem 1.25rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  font-size: var(--t-xs);
  font-weight: 600;
  color: #e6dbee;
  transition: background-color .25s ease, transform .3s var(--ease-out);
}

.case__extra:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }
.case__extra svg { width: .875rem; height: .875rem; }

.compare__labels { position: relative; align-items: center; margin-bottom: 2px; }
.compare__labels .stage__label { justify-self: center; }

/* стрелка висит ровно посередине между колонками */
.case__arrow {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.375rem; height: 2.375rem;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 .375rem 1.125rem -.25rem rgba(178, 90, 120, .55),
              inset 0 1px 1px rgba(255, 255, 255, .45);
}

.case__arrow::before {
  content: "";
  position: absolute;
  inset: -.3125rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
}

.case__arrow svg { width: 1.0625rem; height: 1.0625rem; }

.stage__label {
  display: inline-block;
  align-self: center;
  padding: .3125rem 1rem;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.stage__label--before {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #ded4e6;
}

.stage__label--after {
  background: var(--grad);
  color: #fff;
}

.shot {
  margin: 0;
  border-radius: var(--r-s);
  border: 1px solid rgba(255, 255, 255, .1);
  cursor: zoom-in;
  transition: transform .45s var(--ease-out), border-color .3s var(--ease);
}

.shot:hover { transform: translateY(-.1875rem); border-color: rgba(255, 255, 255, .32); }

/* длинное описание на телефоне сворачивается */
.case__text { position: relative; }

.case__more { display: none; }

.gate {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .875rem;
  padding: 1.5rem;
  text-align: center;
  border-radius: var(--r-l);        /* как у карточки под шторкой */
  background: rgba(36, 28, 44, .58);
}

.gallery-wrap[data-locked="0"] .gate { display: none; }

.gate__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4375rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .28);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #e4d8ec;
}

.gate p {
  max-width: 46ch;
  font-size: var(--t-sm);
  color: #cfc3d8;
}

.results-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.625rem;
  padding-top: 1.375rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--t-xs);
  color: #b3a5be;
}

/* ---------- лайтбокс ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: .75rem;
  padding: clamp(.75rem, 2vw, 1.625rem) clamp(.75rem, 4vw, 3rem);
  background: rgba(24, 17, 30, .93);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  /* visibility переключается мгновенно, без перехода. Если её анимировать,
     в момент открытия она ещё «hidden» и focus() на кнопку закрытия молча
     не срабатывает — фокус остаётся под лайтбоксом, и стрелки листают
     заодно слайдер работ. Отложенный переход (visibility 0s linear .35s)
     тоже не подходит: Chrome его не отрабатывает, окно остаётся видимым
     и перехватывает клики по всей странице.
     pointer-events — страховка на случай, если visibility всё же зависнет. */
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}

.lightbox[data-open="1"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lightbox__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #cfc3d8;
  font-size: var(--t-sm);
}

.lightbox__meta { display: flex; align-items: center; gap: .75rem; }

.lightbox__tools { display: flex; align-items: center; gap: .625rem; }

/* переключатель лупы */
.lightbox__tool {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 2.75rem;
  padding: 0 1rem 0 .875rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #e4d8ec;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .02em;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.lightbox__tool svg { width: 1.125rem; height: 1.125rem; flex: none; }
/* явный display у кнопки перебивает браузерное [hidden] */
.lightbox__tool[hidden] { display: none; }
.lightbox__tool:hover { background: rgba(255, 255, 255, .18); }

.lightbox__tool[aria-pressed="true"] {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
}

.lightbox__badge {
  padding: .3125rem .875rem;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #e4d8ec;
}

.lightbox__badge[data-stage="after"] {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
}

.lightbox__stage {
  position: relative;
  min-height: 0;
}

/* Полотно со снимком. Жесты на нём ведёт скрипт (touch-action: none):
   щипок приближает сам снимок, а не всю страницу, — раньше браузер
   масштабировал страницу целиком, а движение пальцев засчитывалось как
   свайп и фото перелистывалось. Полотно спозиционировано абсолютно,
   поэтому у него точный размер и снимку можно ставить потолок в процентах
   (в строке grid-а 1fr процент зацикливался, и снимок вылезал за экран).
   Приближенный снимок обрезается краями полотна и не наезжает на панели. */
.lightbox__canvas {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}

.lightbox__stage img {
  max-width: min(100%, 42.5rem);
  max-height: min(100%, 51.25rem);
  border-radius: var(--r-m);
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 1.875rem 5rem -1.875rem rgba(0, 0, 0, .8);
  transform-origin: 50% 50%;
  /* долгое нажатие открывает лупу, а не системное меню «сохранить картинку» */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* с лупой курсор не нужен: его место занимает перекрестие в центре линзы */
.lightbox[data-lens="1"] .lightbox__stage img { cursor: none; }

/* приближенный снимок таскают мышью */
.lightbox[data-zoomed="1"] .lightbox__canvas,
.lightbox[data-zoomed="1"] .lightbox__stage img { cursor: grab; }

.lightbox[data-zoomed="1"][data-grabbing="1"] .lightbox__canvas,
.lightbox[data-zoomed="1"][data-grabbing="1"] .lightbox__stage img { cursor: grabbing; }

.lightbox[data-zoomed="1"] .lightbox__nav { opacity: .45; }

/* ---------- лупа ----------
   Круглая линза с увеличенным фрагментом: фон — самый крупный вариант
   снимка, растянутый в zoom раз и сдвинутый так, что точка под курсором
   (или под пальцем) стоит в центре линзы. Положение меняется через
   translate без перехода — линза не отстаёт от курсора; появление —
   через scale и opacity. */
.lens {
  --lens: clamp(9.5rem, 24vmin, 15.5rem);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: var(--lens);
  height: var(--lens);
  border-radius: 50%;
  pointer-events: none;
  background-color: #1b1420;
  background-repeat: no-repeat;
  background-origin: border-box;
  border: 2px solid rgba(255, 255, 255, .92);
  box-shadow: 0 1.5rem 3.5rem -.75rem rgba(0, 0, 0, .7),
              0 0 0 1px rgba(0, 0, 0, .35);
  opacity: 0;
  scale: .55;
  transition: opacity .18s ease, scale .24s var(--ease-out);
}

.lens[data-on="1"] { opacity: 1; scale: 1; }

/* перекрестие: видно, какая точка увеличена */
.lens::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.125rem;
  height: 1.125rem;
  translate: -50% -50%;
  background:
    linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)) center / 100% 1px no-repeat,
    linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)) center / 1px 100% no-repeat;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .8));
}

.lens__zoom {
  position: absolute;
  left: 50%;
  bottom: .625rem;
  translate: -50% 0;
  padding: .1875rem .5625rem;
  border-radius: var(--r-pill);
  background: rgba(24, 17, 30, .72);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  opacity: 0;
  transition: opacity .25s ease;
}

.lens__zoom[data-flash="1"] { opacity: 1; }

.lightbox__foot { display: grid; gap: .25rem; justify-items: center; }

.lightbox__hint {
  margin: 0;
  font-size: var(--t-xs);
  color: #9d8fa8;
  text-align: center;
}

.lightbox__hint:empty { display: none; }

/* полоса миниатюр: видно, где ты внутри работы, и можно прыгнуть сразу */
.lightbox__thumbs {
  display: flex;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding-bottom: .25rem;
}

.lightbox__thumbs button {
  position: relative;
  width: 2.875rem; height: 3.625rem;
  border-radius: .625rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  opacity: .5;
  transition: opacity .25s ease, transform .3s var(--ease-out),
              border-color .25s ease;
}

.lightbox__thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__thumbs button:hover { opacity: .85; transform: translateY(-2px); }

.lightbox__thumbs button[aria-current="true"] {
  opacity: 1;
  border-color: rgba(255, 255, 255, .75);
}

.lightbox__thumbs button[aria-current="true"]::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: .1875rem;
  background: var(--grad);
}

.lightbox__nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  translate: 0 -50%;
  width: 3.25rem; height: 3.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  font-size: 1.2rem;
  transition: background-color .25s var(--ease);
}

.lightbox__nav:hover { background: rgba(255, 255, 255, .22); }
.lightbox__nav--prev { left: 0; }
.lightbox__nav--next { right: 0; }

.lightbox__close {
  width: 2.75rem; height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  font-size: 1.1rem;
}

.lightbox__cap {
  margin: 0;
  text-align: center;
  font-size: var(--t-xs);
  color: #b3a5be;
}

/* ---------- о докторе ---------- */
.about {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(1.75rem, 3.4vw, 3.25rem);
  align-items: center;
  padding: clamp(1.625rem, 3.4vw, 3rem);
  border-radius: var(--r-xl);
  background: var(--glass);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-m);
}

.about__photo {
  aspect-ratio: 3 / 4;
  border-radius: var(--r-l);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-m);
}

.about h2 { font-size: var(--t-h2); margin-bottom: 1.125rem; }

.quote {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
  border-left: 2px solid transparent;
  border-image: var(--grad) 1;
  font-family: var(--display);
  font-size: clamp(1rem, .9rem + .5vw, 1.22rem);
  font-weight: 300;
  line-height: 1.5;
}

.path {
  display: grid;
  gap: 2px;
  margin-top: 1.625rem;
}

.path li {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1.125rem;
  align-items: baseline;
  padding: .875rem 0;
  border-top: 1px solid rgba(42, 34, 51, .1);
  font-size: var(--t-sm);
  color: var(--ink-70);
}

.path li b {
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rose-deep);
}

/* ---------- как проходит ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.875rem, 1.8vw, 1.375rem);
  counter-reset: step;
}

.step {
  position: relative;
  padding: clamp(1.375rem, 2.4vw, 1.75rem);
  border-radius: var(--r-m);
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--edge-soft);
  counter-increment: step;
}

.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: .875rem;
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 300;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.step h3 { font-size: 1rem; font-weight: 500; margin-bottom: .5rem; }
.step p { font-size: var(--t-sm); color: var(--ink-70); }

/* ---------- отзывы ---------- */
.reviews-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.rail-nav { display: flex; gap: .625rem; }

.rail-nav button {
  width: 2.75rem; height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--glass-hi);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-s);
  color: var(--ink);
  transition: background-color .25s ease, transform .3s var(--ease-out), opacity .25s ease;
}

.rail-nav button:hover:not(:disabled) { background: #fff; transform: scale(1.06); }
.rail-nav button:disabled { opacity: .35; cursor: default; }
.rail-nav svg { width: 1rem; height: 1rem; }

.reviews {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(11.875rem, 22vw, 16.25rem);
  gap: .875rem;
  overflow-x: auto;
  /* proximity вместо mandatory: жёсткий снап спорил с плавной прокруткой
     и лента дёргалась. scroll-behavior здесь не задаём — плавность
     включает сам скрипт, иначе анимация запускается дважды. */
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  /* полосу убираем — листается кнопками и пальцем */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.reviews::-webkit-scrollbar { display: none; }

.review {
  scroll-snap-align: start;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-m);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-s);
  cursor: zoom-in;
  transition: box-shadow .4s var(--ease-out), border-color .3s ease;
}

/* Отзыв открывается в просмотрщике. Карточку не приподнимаем: лента —
   контейнер с прокруткой и срезала бы сдвиг сверху. Вместо этого
   снимок чуть «наезжает» внутри рамки и появляется значок лупы. */
.review .frame__img {
  transition: opacity .6s var(--ease-out), transform .7s var(--ease-out),
              scale .6s var(--ease-out);
}

.review:hover { box-shadow: var(--shadow-m); border-color: #fff; }
.review:hover .frame__img { scale: 1.045; }

.review__zoom {
  position: absolute;
  right: .625rem;
  bottom: .625rem;
  z-index: 3;
  width: 2.375rem;
  height: 2.375rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  color: var(--ink);
  box-shadow: 0 .375rem 1rem -.25rem rgba(42, 34, 51, .35);
  opacity: 0;
  translate: 0 .375rem;
  transition: opacity .3s ease, translate .4s var(--ease-out);
  pointer-events: none;
}

.review__zoom svg { width: 1.125rem; height: 1.125rem; }

.review:hover .review__zoom,
.review:focus-visible .review__zoom { opacity: 1; translate: 0 0; }

/* на телефоне наведения нет — значок виден сразу, иначе не догадаться */
@media (hover: none) {
  .review__zoom { opacity: 1; translate: 0 0; width: 2rem; height: 2rem; }
}

.reviews-hint {
  margin-top: .875rem;
  font-size: var(--t-xs);
  color: var(--ink-50);
}

/* ---------- вопросы ---------- */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20.625rem;
  gap: clamp(1.25rem, 2.6vw, 2.25rem);
  align-items: start;
}

.faq { display: grid; gap: .75rem; }

.faq-aside {
  position: sticky;
  top: calc(var(--nav-h) + 1rem);
  display: grid;
  gap: .75rem;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  border-radius: var(--r-l);
  background: rgba(255, 255, 255, .54);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-s);
}

.faq-aside h3 { font-size: var(--t-h3); font-weight: 400; }
.faq-aside p { font-size: var(--t-sm); color: var(--ink-70); margin-bottom: .375rem; }

.faq details {
  border-radius: var(--r-m);
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--edge-soft);
  overflow: hidden;
  transition: background-color .3s var(--ease);
}

.faq details[open] { background: rgba(255, 255, 255, .58); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.125rem;
  padding: 1.25rem clamp(1.125rem, 2.2vw, 1.625rem);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  flex: none;
  width: .6875rem; height: .6875rem;
  border-right: 1.6px solid var(--rose-deep);
  border-bottom: 1.6px solid var(--rose-deep);
  rotate: 45deg;
  translate: 0 -.1875rem;
  transition: rotate .3s var(--ease);
}

.faq details[open] summary::after { rotate: -135deg; translate: 0 .1875rem; }

.faq .faq__body {
  padding: 0 clamp(1.125rem, 2.2vw, 1.625rem) 1.375rem;
  font-size: var(--t-sm);
  color: var(--ink-70);
}

/* ---------- запись ---------- */
.booking {
  padding: clamp(1.75rem, 3.6vw, 3.25rem);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .52);
  border: 1px solid rgba(255, 255, 255, .78);
  box-shadow: var(--shadow-m);
}

.booking__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(1.75rem, 3.4vw, 3.25rem);
  align-items: start;
}

.booking h2 { font-size: var(--t-h2); margin-bottom: .875rem; }

.contacts { display: grid; gap: .875rem; margin-top: 1.625rem; }

.contacts a,
.contacts span {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: var(--t-sm);
  color: var(--ink-70);
  transition: color .25s var(--ease);
}

.contacts a:hover { color: var(--rose-deep); }

.contacts svg { width: 1.125rem; height: 1.125rem; flex: none; opacity: .7; }

.form { display: grid; gap: .875rem; }

.field { display: grid; gap: .4375rem; }

.field label {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-50);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: .9375rem 1.375rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(255, 255, 255, .92);
  font: inherit;
  font-size: var(--t-body);
  color: var(--ink);
  transition: border-color .25s var(--ease), background-color .25s var(--ease),
              box-shadow .25s var(--ease);
}

.field textarea {
  min-height: 6.5rem;
  border-radius: var(--r-m);
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-30); }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  background: #fff;
  border-color: rgba(178, 90, 120, .55);
  box-shadow: 0 0 0 .25rem rgba(178, 90, 120, .13);
}

.field[data-invalid="1"] input,
.field[data-invalid="1"] textarea { border-color: #d05a72; }

.field__err {
  display: none;
  font-size: var(--t-xs);
  color: #b3384f;
}

.field[data-invalid="1"] .field__err { display: block; }

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .875rem;
}

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }

/* радиокнопки прячем, но оставляем доступными с клавиатуры.
   Просто opacity:0 мало: правило .field input выше даёт им width:100%
   и padding, и абсолютный блок распирал карточку на узких экранах. */
.chips input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.chips label {
  padding: .625rem 1.25rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .6);
  border: 1px solid var(--edge);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-70);
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}

.chips input:checked + label {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
}

.chips input:focus-visible + label { outline: 2px solid var(--rose); outline-offset: 3px; }

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .6875rem;
  align-items: start;
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--ink-50);
}

.consent input {
  width: 1.125rem; height: 1.125rem;
  margin-top: 2px;
  accent-color: var(--rose);
}

.consent a { text-decoration: underline; text-underline-offset: 2px; }

.form__status {
  display: none;
  padding: .875rem 1.25rem;
  border-radius: var(--r-s);
  font-size: var(--t-sm);
}

.form__status[data-kind="ok"] {
  display: block;
  background: rgba(94, 160, 118, .16);
  border: 1px solid rgba(94, 160, 118, .4);
  color: #2f6a45;
}

.form__status[data-kind="err"] {
  display: block;
  background: rgba(208, 90, 114, .14);
  border: 1px solid rgba(208, 90, 114, .4);
  color: #a33b52;
}

/* кнопки мессенджеров, если заявка не ушла */
.form__alt {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}

.form__alt .btn { color: var(--ink); }

/* ---------- подвал ---------- */
.foot {
  padding-block: clamp(2.125rem, 4vw, 3.5rem) 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .38);
}

/* колонки по содержимому и равные промежутки: колонка с описанием
   больше не съедает всё свободное место, и подвал читается по центру */
.foot__grid {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: space-between;
  gap: clamp(1.5rem, 3vw, 3.5rem);
}

.foot__h {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: .875rem;
}

.foot ul { display: grid; gap: .5625rem; font-size: var(--t-sm); color: var(--ink-70); }
.foot a:hover { color: var(--rose-deep); }

.foot__note {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgba(42, 34, 51, .1);
  display: flex;
  flex-wrap: wrap;
  gap: .625rem 1.625rem;
  justify-content: space-between;
  font-size: var(--t-xs);
  color: var(--ink-50);
}

.disclaimer {
  margin-top: 1.125rem;
  padding: .875rem 1.125rem;
  border-radius: var(--r-s);
  background: rgba(255, 255, 255, .46);
  border: 1px solid var(--edge-soft);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--ink-50);
}

/* ---------- липкая кнопка на телефоне ---------- */
.sticky-cta {
  position: fixed;
  left: .75rem; right: .75rem;
  bottom: .75rem;
  z-index: 80;
  display: none;
  gap: .625rem;
  padding: .625rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .86);   /* читается и без размытия, как шапка */
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-m);
  transform: translateY(140%);
  transition: transform .45s var(--ease-out);
}

.sticky-cta[data-show="1"] { transform: none; }
.sticky-cta .btn { flex: 1; }

/* ---------- кнопка «наверх» ----------
   Появляется, когда страница пролистана дальше первого экрана. Кольцо
   вокруг стрелки — прогресс чтения, то же, что на кромке шапки.
   Скрытая кнопка помечается inert (скриптом): не ловит клики и фокус,
   а opacity и сдвиг при этом спокойно анимируются в обе стороны. */
.to-top {
  position: fixed;
  right: clamp(1rem, 2.4vw, 2rem);
  bottom: calc(clamp(1rem, 2.4vw, 2rem) + env(safe-area-inset-bottom, 0px));
  z-index: 85;
  width: 3.375rem;
  height: 3.375rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255, 255, 255, .88);
  border: 1px solid #fff;
  box-shadow: 0 .875rem 2rem -.625rem rgba(80, 50, 90, .42),
              inset 0 1px 1px #fff;
  opacity: 0;
  translate: 0 .875rem;
  scale: .86;
  pointer-events: none;
  transition: opacity .35s var(--ease), translate .5s var(--ease-out),
              scale .5s var(--ease-out), box-shadow .3s ease, bottom .45s var(--ease-out);
}

.to-top[data-show="1"] { opacity: 1; translate: 0 0; scale: 1; pointer-events: auto; }

.to-top[data-show="1"]:hover {
  translate: 0 -.1875rem;
  box-shadow: 0 1.125rem 2.5rem -.625rem rgba(80, 50, 90, .5), inset 0 1px 1px #fff;
}

.to-top[data-show="1"]:active { scale: .94; }

.to-top__ring {
  position: absolute;
  inset: .1875rem;
  width: calc(100% - .375rem);
  height: calc(100% - .375rem);
  rotate: -90deg;
  overflow: visible;
}

.to-top__track { fill: none; stroke: rgba(42, 34, 51, .09); stroke-width: 2.4; }

.to-top__bar {
  fill: none;
  stroke: url(#to-top-grad);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--p, 0) * 100);
  transition: stroke-dashoffset .12s linear;
}

.to-top__icon {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  transition: translate .4s var(--ease-out);
}

.to-top:hover .to-top__icon { translate: 0 -.1875rem; }

/* на телефоне внизу липкая панель записи — кнопка встаёт над ней */
@media (max-width: 900px) {
  .sticky-cta[data-show="1"] ~ .to-top {
    bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ловушка для ботов в форме: человек поле не видит и не заполняет */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- появление при скролле ---------- */
.rise {
  opacity: 0;
  transform: translateY(1.375rem);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.rise.is-in { opacity: 1; transform: none; }

/* ---------- адаптив ---------- */
@media (max-width: 1180px) {
  .head__phone { display: none; }
}

@media (max-width: 1080px) {
  .case { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }

  /* на узком экране длинный текст прячем под «Подробнее»:
     снимки должны быть первыми, а не в конце простыни */
  .case__text {
    max-height: 4.9em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 55%, transparent);
    mask-image: linear-gradient(#000 55%, transparent);
  }

  .case__head[data-open="1"] .case__text {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .case__more {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin-top: .625rem;
    padding: .4375rem 1rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    font-size: var(--t-xs);
    font-weight: 600;
    color: #e6dbee;
  }

  .case__more::after { content: "↓"; transition: transform .3s var(--ease); }
  .case__head[data-open="1"] .case__more::after { transform: rotate(180deg); }
  .faq-grid { grid-template-columns: 1fr; }
  .faq-aside { position: static; }
}

@media (max-width: 900px) {
  :root { --nav-h: 4.75rem; }

  .nav { display: none; }
  .burger { display: flex; }
  .head { padding: .625rem .625rem .625rem 1rem; border-radius: 1.125rem; }

  /* на телефоне заголовок идёт первым, иначе фото выталкивает его за экран */
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__photo { aspect-ratio: 5 / 6; max-width: 32.5rem; margin-inline: auto; }
  .hero__stats { position: static; margin-top: 1rem; justify-content: space-between; text-align: left; }
  .hero__lead { margin-inline: auto; }
  .hero__cta { justify-content: center; }
  .hero__title { margin-top: 1.125rem; }
  .hero h1 .kicker { margin-inline: auto; }

  .services { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; }
  /* фото на всю ширину карточки; на планшете кадр горизонтальный,
     иначе при полной ширине он выходил выше экрана */
  .about__photo { aspect-ratio: 5 / 4; }
  .about__photo .frame__img { object-position: 50% 26%; }
  .booking__grid { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .sticky-cta { display: flex; }
}

@media (max-width: 620px) {
  .steps { grid-template-columns: 1fr; }

  /* Снимки поднимаем над текстом: ради них сюда и пришли, а простыню
     показаний можно дочитать ниже. Карточка растягивается на всю панель. */
  .case { display: flex; flex-direction: column; padding: .75rem .5rem; gap: .875rem; }
  .case__head { order: 2; }
  .case__compare { order: 1; }

  /* Панель узкая, чтобы снимки были крупнее. Но заголовок, текст, фильтры
     и подпись внизу получают свой отступ: у самого скругления они
     смотрелись прижатыми к краю. */
  .results-panel { padding: 1.75rem .5rem 1.625rem; border-radius: 1.75rem; }
  .results-panel .sec-head,
  .results-foot { padding-inline: 1rem; }
  .results-panel .sec-head { margin-bottom: 1.5rem; }
  .filters { padding-inline: 1rem; scroll-padding-inline: 1rem; margin-bottom: 1.25rem; }
  .results-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: .375rem;
    margin-top: 1.25rem;
    padding-top: 1.125rem;
  }

  .about__photo { aspect-ratio: 4 / 5; }
  .case__head h3 { font-size: 1rem; }
  .case__arrow { width: 1.875rem; height: 1.875rem; }
  .case__arrow svg { width: .875rem; height: .875rem; }
  .stage__label { padding: .25rem .75rem; }
  .lightbox__thumbs button { width: 2.375rem; height: 3rem; }

  /* Фильтры в одну строку с прокруткой вместо пяти рядов.
     Строка держится внутри панели — за край не вылезает, а о том,
     что справа есть ещё пункты, говорит растворяющийся край. */
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .filters::-webkit-scrollbar { display: none; }
  .path li { grid-template-columns: 1fr; gap: .25rem; }
  .form__row { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .hero__stats { gap: .75rem; padding: 1rem 1.125rem; }
  .lightbox__nav { width: 2.75rem; height: 2.75rem; }

  /* кнопка из шапки вытесняла бургер — на узких экранах её заменяет липкая панель */
  .head__cta { display: none; }
  .brand { font-size: .9rem; letter-spacing: .12em; gap: .5625rem; }
  .brand__mark { width: 2.375rem; height: 2.375rem; }
  .hero__cta .btn { width: 100%; }
  .btn { padding-inline: 1.25rem; }
}

/* ---------- бережный режим ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .rise { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}

/* Safari < 18 и старые движки без backdrop-filter — подменяем плотным фоном */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .head { background: rgba(255, 255, 255, .9); }
  .hero__stats { background: rgba(255, 255, 255, .92); }
  .sticky-cta { background: rgba(255, 255, 255, .94); }
  .drawer { background: rgba(246, 231, 238, .98); }
}

@media print {
  .head, .drawer, .sticky-cta, .aurora, .lightbox, .marquee, .to-top { display: none !important; }
  body { background: #fff; }
  .gallery-wrap[data-locked="1"] .frame__img { filter: none; }
}