/* ============================================================
   Екатерина Реут — сайт услуг визажиста
   Дизайн-система (из design_handoff_katereut_site/README.md)
   Шрифты: Cormorant Garamond (заголовки) + Manrope (UI)
   Единственный розовый акцент: #F0A9CB (Pink Frosting)
   ============================================================ */

:root {
  /* Поверхности */
  --bg-table: #E9E9E7;   /* фон «стола» за карточкой-телефоном */
  --bg-card:  #FFFFFF;   /* фон карточки-страницы */
  --bg-warm:  #F7F4F0;   /* тёплый светлый фон секции */
  --ph:       #E7E3DC;   /* плейсхолдер фото */

  /* Текст */
  --ink:     #141414;    /* основной */
  --ink-2:   #3a3b34;    /* вторичный (body) */
  --ink-3:   #454540;    /* вторичный (заголовки/кнопки) */
  --muted:   #6f6f6a;    /* приглушённый */
  --faint:   #9a9a94;    /* слабый */
  --faint-2: #a8a8a2;    /* служебный (номера) */

  /* Линии */
  --line:      rgba(0,0,0,.1);
  --line-soft: rgba(0,0,0,.08);

  /* Акцент */
  --pink: #F0A9CB;

  /* Шрифты */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Тень карточки-страницы */
  --card-shadow: 0 30px 80px -28px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.06);
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-table);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: #141414; color: #fff; }

a { -webkit-tap-highlight-color: transparent; }
img { display: block; }

/* Прячем нативный горизонтальный скроллбар в каруселях */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ============================================================
   Шелл: карточка-страница 390px
   Моб.: во всю ширину. Десктоп (≥440px): центрированный «телефон».
   ============================================================ */
.page-card {
  position: relative;
  width: 100%;
  background: var(--bg-card);
  overflow: hidden;
}

@media (min-width: 440px) {
  body { display: flex; justify-content: center; padding: 30px 0; }
  .page-card {
    width: 390px;
    border-radius: 32px;
    box-shadow: var(--card-shadow);
  }
}

/* ============================================================
   Переиспользуемые элементы
   ============================================================ */

/* Надзаголовок (eyebrow) */
.eyebrow {
  font: 600 11px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.eyebrow--sm            { font-size: 10px; }
.eyebrow--on-photo      { color: rgba(255,255,255,.92); }
.eyebrow--on-photo-dim  { color: rgba(255,255,255,.85); }

/* Кнопки-пилюли */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font: 600 11px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
}
/* 1. На фото (hero, запись) */
.btn--on-photo {
  border: 1.5px solid rgba(255,255,255,.85);
  color: #fff;
  background: transparent;
  padding: 14px 20px;
  transition: background .2s;
}
.btn--on-photo:hover { background: rgba(255,255,255,.14); }
/* 3. Второстепенная («Обсудить проект») — только лёгкий тон на hover */
.btn--outline {
  border: 1.5px solid var(--ink-3);
  color: var(--ink-3);
  background: transparent;
  padding: 14px 22px;
  transition: background .2s, color .2s;
}
.btn--outline:hover { background: rgba(0,0,0,.05); }
/* Блочная (во всю ширину, соцсети в записи) */
.btn--block { display: flex; width: 100%; gap: 9px; padding: 16px; }
.btn svg { flex: 0 0 auto; }

/* ============================================================
   Карусель фото + подписи
   ============================================================ */
.gallery {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 26px 24px 4px;
  cursor: zoom-in;
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar,
.clients__track::-webkit-scrollbar { display: none; }
.gallery__item { margin: 0; flex: 0 0 auto; scroll-snap-align: center; }
.gallery__img  { display: block; height: 390px; width: auto; }
.gallery__img--bordered { border: 1px solid var(--line-soft); }
.gallery__cap  { display: flex; align-items: baseline; gap: 9px; margin-top: 11px; }
.gallery__num  {
  font: 400 13px/1 var(--serif);
  font-style: italic;
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
  color: var(--faint-2);
}
figcaption.gallery__num { display: block; margin-top: 11px; } /* индивидуальные съёмки: подпись = только номер */
.gallery__brand {
  font: 600 9.5px/1.4 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ============================================================
   Лайтбокс (создаётся из main.js)
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(16,14,13,.93);
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox__img {
  max-width: 100%;
  max-height: 76vh;
  border-radius: 10px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
}
.lightbox__cap {
  margin-top: 16px;
  min-height: 1.2em;
  font: 400 13px/1.4 var(--sans);
  letter-spacing: .04em;
  color: rgba(255,255,255,.85);
  text-align: center;
}
.lightbox__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  color: #fff;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.lightbox__prev  { left: 14px;  top: 50%; transform: translateY(-50%); width: 44px; height: 44px; }
.lightbox__next  { right: 14px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; }
.lightbox__close { top: 26px; right: 22px; width: 40px; height: 40px; }
.lightbox__nav[hidden] { display: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; height: 610px; overflow: hidden; background: var(--ph); }
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 16%;
}
.hero__grad-top {
  position: absolute; top: 0; left: 0; right: 0; height: 160px;
  background: linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,0));
  pointer-events: none;
}
.hero__grad-bottom {
  position: absolute; bottom: 0; left: 0; right: 0; height: 64%;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.2) 38%, rgba(0,0,0,.66));
  pointer-events: none;
}

/* Верхняя навигация над фото */
.hero__nav {
  position: absolute; top: 38px; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 22px;
}
.hero__back { display: inline-flex; color: #fff; text-decoration: none; padding: 6px; margin: -6px; }
.wordmark { font: 500 12px/1 var(--sans); letter-spacing: .3em; color: #fff; }

/* Ссылки в шапке — только десктоп (≥768px), на мобильном скрыты */
.hero__links { display: none; }
.hero__links a {
  font: 600 11px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
}
.hero__links a:hover { color: var(--ink); }

.hero__content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 24px 28px; }
.hero__title {
  margin: 13px 0 0;
  font: 400 42px/1.04 var(--serif);
  letter-spacing: -.01em;
  color: rgba(255,255,255,.88);
}
.hero__title em { font-style: italic; font-weight: 500; color: #fff; }

.hero__prices { display: flex; align-items: flex-end; gap: 20px; margin-top: 20px; }
.hero__price-div { width: 1px; height: 34px; background: rgba(255,255,255,.3); }
.price-label {
  font: 600 9.5px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}
.price-val {
  margin-top: 7px;
  font: 500 24px/1 var(--serif);
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
  color: #fff;
}
.hero__cta { margin-top: 22px; }

/* ============================================================
   ДОПОЛНИТЕЛЬНО (прайс-строки)
   ============================================================ */
.extras { padding: 44px 24px 0; }
.extras__list { margin-top: 14px; }
.extras__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.extras__name { font: 400 15px/1.35 var(--sans); color: var(--ink-2); }
.extras__sub  { display: block; margin-top: 3px; font: 400 12.5px/1.35 var(--sans); color: var(--faint-2); }
.extras__price {
  white-space: nowrap;
  font: 500 18px/1 var(--serif);
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
  color: var(--ink);
}
.extras__price--muted { font: 500 15px/1 var(--sans); color: var(--faint-2); }

/* ============================================================
   ОБУЧЕНИЕ (розовый линк-блок)
   ============================================================ */
.training { margin: 44px 24px 0; }
.training__card {
  position: relative; display: block; overflow: hidden;
  text-decoration: none; color: var(--ink);
  background: rgba(240,169,203,.1);
  border: 1px solid rgba(240,169,203,.55);
  border-radius: 22px;
  padding: 26px 24px;
  transition: background .2s;
}
.training__card:hover { background: rgba(240,169,203,.16); }
.training__title { max-width: 270px; font: 500 25px/1.2 var(--serif); color: var(--ink); }
.training__title em { font-style: italic; }
.training__meta { margin-top: 9px; font: 400 13px/1.5 var(--sans); color: var(--muted); }
.training__link { margin-top: 16px; font: 400 17px/1.5 var(--serif); font-style: italic; color: var(--ink); }
.training__link u {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ============================================================
   СЪЁМКИ (коммерческие / индивидуальные)
   ============================================================ */
.shoots--commercial { margin-top: 56px; background: var(--bg-warm); padding: 46px 0 44px; }
.shoots--individual { padding: 54px 0 0; }
.shoots__head { padding: 0 24px; }
.shoots__title {
  margin: 0;
  font: 400 34px/1.1 var(--serif);
  letter-spacing: -.01em;
  color: var(--ink-3);
}
.shoots__title em { font-style: italic; font-weight: 500; color: var(--ink); }
.shoots__foot { padding: 28px 24px 0; }
.shoots--individual .shoots__foot { padding-top: 26px; }
.shoots__desc { margin: 0; max-width: 300px; font: 400 14px/1.6 var(--sans); color: var(--muted); }
.shoots__cta { margin-top: 18px; }

/* ============================================================
   КЛИЕНТЫ («В жизни»)
   ============================================================ */
.clients { padding: 48px 0 0; }
.clients__head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 24px 16px;
}
.clients__note { font: 400 13px/1 var(--serif); font-style: italic; color: var(--faint-2); }
.clients__track {
  display: flex; gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 24px 6px;
  cursor: zoom-in;
  scrollbar-width: none;
}
.clients__item { flex: 0 0 auto; scroll-snap-align: center; cursor: zoom-in; }
.clients__item img { display: block; height: 330px; width: auto; }

/* ============================================================
   ЗАПИСЬ (#booking)
   ============================================================ */
.booking {
  position: relative; overflow: hidden;
  margin-top: 46px;
  padding: 48px 26px 44px;
  text-align: center;
}
.booking__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 58%;
}
.booking__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.28) 45%, rgba(0,0,0,.58));
}
.booking__inner { position: relative; }
.booking__title { margin: 12px 0 0; font: 400 35px/1.05 var(--serif); color: rgba(255,255,255,.88); }
.booking__title em { font-style: italic; font-weight: 500; color: #fff; }
.booking__text {
  margin: 14px auto 0; max-width: 290px;
  font: 400 14px/1.55 var(--sans);
  color: rgba(255,255,255,.92);
}
.booking__actions { display: flex; flex-direction: column; gap: 11px; margin-top: 24px; }

/* ============================================================
   ФУТЕР
   ============================================================ */
.site-footer {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 22px;
  font: 500 11px/1.5 var(--sans);
  letter-spacing: .06em;
  color: var(--faint-2);
}
.site-footer a { color: var(--ink); text-decoration: none; }

/* Легальный футер (главная) */
.site-footer--legal {
  flex-direction: column; gap: 5px;
  padding: 26px 24px 30px;
  text-align: center;
  font: 400 11px/1.5 var(--sans);
  letter-spacing: .04em;
  color: var(--faint-2);
}
.site-footer--legal a { color: var(--faint-2); }
.site-footer--legal .socials { display: flex; gap: 16px; margin-top: 9px; }
.site-footer--legal .socials a { display: inline-flex; }

/* ============================================================
   Утилиты отступов (структурные)
   ============================================================ */
.px-24 { padding-left: 24px; padding-right: 24px; }
.pt-40 { padding-top: 40px; } .pt-42 { padding-top: 42px; } .pt-44 { padding-top: 44px; }
.pt-46 { padding-top: 46px; } .pt-48 { padding-top: 48px; } .pt-54 { padding-top: 54px; }
.mt-30 { margin-top: 30px; } .mt-34 { margin-top: 34px; } .mt-38 { margin-top: 38px; }
.mt-44 { margin-top: 44px; } .mt-46 { margin-top: 46px; }

/* ============================================================
   Меню (полноэкранный оверлей — главная)
   ============================================================ */
.hero__burger { cursor: pointer; color: #fff; padding: 8px; margin: -8px; box-sizing: content-box; background: none; border: 0; }
.menu { position: fixed; inset: 0; z-index: 50; background: var(--bg-card); }
.menu[hidden] { display: none; }
.menu__inner { max-width: 390px; margin: 0 auto; height: 100%; display: flex; flex-direction: column; }
.menu__top { display: flex; align-items: center; justify-content: space-between; padding: 48px 24px 0; }
.menu__wordmark { font: 500 12px/1 var(--sans); letter-spacing: .3em; color: var(--ink); }
.menu__close { cursor: pointer; padding: 8px; margin: -8px; box-sizing: content-box; color: var(--ink); background: none; border: 0; }
.menu__nav { padding: 36px 24px 0; display: flex; flex-direction: column; }
.menu__group { font: 600 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.menu__group--2 { margin: 26px 0 6px; }
.menu__link { display: flex; align-items: baseline; gap: 13px; padding: 15px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.menu__link--last { border-bottom: 1px solid var(--line); }
.menu__num { font: 500 12px/1 var(--serif); color: #b8b8b2; width: 18px; }
.menu__name { font: 500 25px/1 var(--serif); }
.menu__zapis { display: flex; align-items: center; justify-content: space-between; padding: 26px 0 0; text-decoration: none; color: var(--ink); }
.menu__zapis span { font: 600 14px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.menu__social { margin-top: auto; padding: 24px; display: flex; gap: 10px; }
.menu__social a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; background: var(--ink); color: #fff;
  font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  padding: 16px; border-radius: 999px;
}

/* ============================================================
   HERO — варианты высоты / градиентов / контента
   ============================================================ */
.hero--home    { height: 592px; }
.hero--home .hero__img { object-position: 50% 30%; }
.hero--service { height: 560px; }

.hero--home .hero__grad-top    { height: 160px; background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,0)); }
.hero--home .hero__grad-bottom { height: 62%; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.12) 40%, rgba(0,0,0,.5)); }
.hero--service .hero__grad-top    { height: 168px; background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,0)); }
.hero--service .hero__grad-bottom { height: 60%; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.12) 42%, rgba(0,0,0,.56)); }

/* Заголовки hero под разные страницы */
.hero__title--home         { margin-top: 16px; font-size: 33px; line-height: 1.1; }
.hero__title--service      { margin-top: 12px; font-size: 44px; line-height: 1.0; }
.hero__title--service-lg   { margin-top: 12px; font-size: 44px; line-height: 1.02; }

.hero__content--home    { padding-bottom: 32px; }
.hero__content--service { padding-bottom: 30px; }

.hero__eyebrow-list {
  font: 600 10px/1.7 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.92); max-width: 290px;
}
.hero__lead { margin: 14px 0 0; max-width: 300px; font: 400 14px/1.55 var(--sans); color: rgba(255,255,255,.92); }

/* ============================================================
   Текстовые блоки
   ============================================================ */
.serif-lead { margin: 0; font: 400 25px/1.32 var(--serif); color: var(--ink-3); }
.serif-lead em { font-style: italic; font-weight: 500; color: var(--ink); }
.home-format .serif-lead { margin-top: 16px; }

.serif-strong { margin: 0; font: 500 24px/1.3 var(--serif); color: var(--ink); }

.body-note { margin: 18px 0 0; font: 400 15px/1.62 var(--sans); color: var(--muted); }
.body-note--sm { font-size: 13.5px; line-height: 1.6; }

.note-italic { margin: 0; font: 400 17px/1.5 var(--serif); font-style: italic; color: var(--ink-3); }
.link-underline { color: var(--ink); font-weight: 500; font-style: italic; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Заголовок секции + курсивная подсказка ("листайте →") */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; }
.sec-head__hint { font: 400 12px/1 var(--serif); font-style: italic; color: var(--faint-2); }
.sec-sub { font: 400 12.5px/1.45 var(--sans); color: var(--faint); }

/* Список "Что входит" (маркер —) */
.incl-title { font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: 20px; }
.dash-list { display: flex; flex-direction: column; gap: 17px; }
.dash-list--tight { gap: 12px; }
.dash-item { display: flex; gap: 12px; font: 400 15px/1.5 var(--sans); color: #2a2b25; }
.dash-item--sm { gap: 11px; font-size: 14px; color: var(--ink-2); }
.dash-item .dash { color: #c4c4be; }

/* Строка стоимости */
.price-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font: 500 24px/1.1 var(--serif);
  font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1;
  color: var(--ink);
}
.price-line + .price-line { margin-top: 12px; }
.price-line--sm { font-size: 22px; }
.price-line__name { font-style: italic; font-weight: 500; color: var(--ink); }
.price-line__rule { flex: 1; height: 1px; background: var(--line); align-self: center; }
.price-line__val  { white-space: nowrap; font-weight: 400; color: var(--ink-3); }

/* Кнопка: тёмный контур, заливка тёмным на hover (вариант 2) */
.btn--dark-outline {
  display: flex; width: 100%; gap: 9px; padding: 16px;
  border: 1.5px solid var(--ink-3); color: var(--ink-3); background: transparent;
  transition: background .2s, color .2s;
}
.btn--dark-outline:hover { background: var(--ink-3); color: #fff; }

/* ============================================================
   Услуги (главная)
   ============================================================ */
.services__head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.services__head--2 { margin: 44px 0 8px; }
.services__rule { flex: 1; height: 1px; background: var(--line); }
.service { display: flex; align-items: center; gap: 16px; padding: 20px 0; text-decoration: none; transition: opacity .2s; }
.service:hover { opacity: .55; }
.service--divided { border-top: 1px solid rgba(0,0,0,.12); }
.service__body { flex: 1; min-width: 0; }
.service__name { display: block; font: 500 24px/1.1 var(--serif); color: var(--ink); }
.service__desc { display: block; margin-top: 5px; font: 400 13px/1.45 var(--sans); color: var(--muted); }
.service__note { display: block; margin-top: 7px; font: 500 15.5px/1.35 var(--serif); font-style: italic; color: var(--ink); }
.service__arrow { flex: 0 0 auto; color: var(--ink); }

/* ============================================================
   Шаги "как проходит" (онлайн-обучение)
   ============================================================ */
.step { padding: 20px 0; border-top: 1px solid var(--line); }
.step--last { border-bottom: 1px solid var(--line); }
.step__num { font: 600 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--pink); }
.step__title { margin-top: 9px; font: 500 21px/1.2 var(--serif); color: var(--ink); }
.step__text { margin-top: 7px; font: 400 14px/1.55 var(--sans); color: var(--muted); }

/* ============================================================
   Тарифные карточки (обучение)
   ============================================================ */
.tariff { border-radius: 26px; padding: 28px 24px; }
.tariff--neutral { background: #F6F5F3; }
.tariff--pink { background: rgba(240,169,203,.07); }
.tariff + .tariff { margin-top: 16px; }
.tariff__labels { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tariff__kicker { font: 600 9.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--faint-2); }
.tariff__kicker--pink { color: var(--pink); }
.tariff__meta { font: 600 9px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.tariff__name { margin-top: 12px; font: 500 34px/1 var(--serif); color: var(--ink); }
.tariff__desc { margin: 13px 0 0; font: 400 14px/1.6 var(--sans); color: #50514a; }
.tariff__desc em { font: 500 18px/1.3 var(--serif); font-style: italic; color: var(--ink); }
.tariff__block { margin-top: 24px; }
.tariff__sub { font: 600 9.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--faint-2); margin-bottom: 14px; }
.tariff__pricearea { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.tariff__pricearea--tight { padding-top: 18px; }
.tariff__cost-label { font: 600 9px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; }
.tariff__duration { margin-top: 8px; font: 400 12px/1.4 var(--sans); color: var(--faint-2); }
.tariff__bonus { margin-top: 14px; display: flex; gap: 11px; align-items: flex-start; }
.tariff__bonus svg { flex: none; margin-top: 4px; }
.tariff__bonus span { font: 400 13.5px/1.5 var(--sans); color: var(--ink-2); }
.tariff__bonus .lnum { font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; }
.tariff .btn { margin-top: 20px; }
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tag { font: 400 13px/1.35 var(--sans); color: var(--ink-2); }
.tag .muted { color: var(--faint-2); }
.tags__dot { color: #d8d0c8; }
.tariff__hint { margin-top: 12px; font: 400 12.5px/1.45 var(--sans); color: #8a8a84; }

/* ============================================================
   Каруусели-полосы (до/после, отзывы) + лайтбокс-цель
   ============================================================ */
.strip {
  display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 0 24px 6px;
  cursor: zoom-in; scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.strip--reviews { align-items: flex-start; }

.ba-square { flex: 0 0 84%; scroll-snap-align: center; position: relative; overflow: hidden; background: #EDEDEA; cursor: zoom-in; }
.ba-square img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.ba-fixed { flex: 0 0 287px; width: 287px; aspect-ratio: 1/1; object-fit: cover; scroll-snap-align: center; background: #EDEDEA; display: block; }
.review { flex: 0 0 auto; height: 285px; width: auto; scroll-snap-align: center; border: 1px solid rgba(0,0,0,.07); display: block; }
.review--300 { height: 300px; }

/* Панель записи с фиксированной высотой (главная / услуги) */
.booking--panel { display: flex; flex-direction: column; justify-content: center; padding: 0 26px; min-height: 360px; }
.booking--h348 { min-height: 348px; }

/* ============================================================
   Десктоп v2 — пока только главная (.page-card--home)
   <768 — мобильный как есть; 768 — базовый десктоп (iPad);
   900 — двухколонники; потолок карточки 1360px
   ============================================================ */
@media (min-width: 768px) {
  .page-card--home { width: min(1360px, calc(100% - 48px)); }

  /* ---- Hero: сплит — слева текст на белом, справа фото ---- */
  .page-card--home .hero--home {
    display: grid;
    grid-template-columns: minmax(400px, 47%) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    height: auto;
    min-height: clamp(620px, 82vh, 780px);
    background: var(--bg-card);
  }
  .page-card--home .hero--home .hero__img {
    position: static;
    grid-column: 2;
    grid-row: 1 / -1;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 20%;
  }
  .page-card--home .hero--home .hero__grad-top,
  .page-card--home .hero--home .hero__grad-bottom { display: none; }

  .page-card--home .hero__nav {
    position: static;
    grid-column: 1;
    grid-row: 1;
    padding: clamp(28px, 3vw, 44px) clamp(36px, 4.5vw, 72px) 0;
  }
  .page-card--home .wordmark { color: var(--ink); }
  .page-card--home .hero__burger { display: none; }
  .page-card--home .hero__links { display: flex; gap: 26px; }

  .page-card--home .hero__content--home {
    position: static;
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    padding: 40px clamp(36px, 4.5vw, 72px) clamp(44px, 5vw, 72px);
    max-width: 640px;
  }
  .page-card--home .hero__eyebrow-list { color: var(--muted); max-width: 380px; }
  .page-card--home .hero__title--home {
    margin-top: 18px;
    font-size: clamp(36px, 3.2vw, 48px);
    line-height: 1.08;
    color: var(--ink-3);
  }
  .page-card--home .hero__title--home em { color: var(--ink); }
  .page-card--home .hero__cta {
    margin-top: clamp(26px, 3vw, 36px);
    border-color: var(--ink-3);
    color: var(--ink-3);
    transition: background .2s, color .2s;
  }
  .page-card--home .hero__cta:hover { background: var(--ink-3); color: #fff; }

  /* ---- Общие поля секций ---- */
  .page-card--home .px-24 {
    padding-left: clamp(36px, 4.5vw, 72px);
    padding-right: clamp(36px, 4.5vw, 72px);
  }

  /* ---- Формат ---- */
  .page-card--home .home-format { padding-top: clamp(64px, 7vw, 96px); }
  .page-card--home .serif-lead { font-size: clamp(26px, 2.3vw, 34px); }
  .page-card--home .body-note { max-width: 58ch; }

  /* ---- Услуги ---- */
  .page-card--home #services { padding-top: clamp(56px, 6vw, 80px); }
  .page-card--home .service__arrow { transition: transform .25s; }
  .page-card--home .service:hover { opacity: .75; }
  .page-card--home .service:hover .service__arrow { transform: translateX(6px); }

  /* ---- Запись ---- */
  .page-card--home .booking--panel {
    margin-top: clamp(56px, 6vw, 88px);
    min-height: clamp(440px, 52vh, 560px);
  }
  .page-card--home .booking__img { object-position: 50% 65%; }
  .page-card--home .booking__title { font-size: clamp(38px, 3vw, 50px); }
  .page-card--home .booking__text { max-width: 420px; font-size: 15px; }
  .page-card--home .booking__actions {
    flex-direction: row;
    justify-content: center;
    gap: 14px;
    margin-top: 30px;
  }
  .page-card--home .booking__actions .btn--block { width: 240px; }

  /* ---- Футер ---- */
  .page-card--home .site-footer--legal {
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    gap: 8px 26px;
    padding: 30px 48px 34px;
  }
  .page-card--home .site-footer--legal .socials { margin-top: 0; }
}

@media (min-width: 900px) {
  /* Формат: редакционная сетка «ярлык слева — текст справа» */
  .page-card--home .home-format {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: clamp(40px, 5vw, 80px);
  }
  .page-card--home .home-format .eyebrow { grid-column: 1; grid-row: 1; padding-top: 12px; }
  .page-card--home .home-format .serif-lead { grid-column: 2; grid-row: 1; margin-top: 0; max-width: 30ch; }
  .page-card--home .home-format .body-note { grid-column: 2; grid-row: 2; }

  /* Услуги: Минск | Онлайн в две колонки */
  .page-card--home #services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(48px, 6vw, 110px);
    align-items: start;
  }
  .page-card--home .services__head--2 { margin-top: 0; }
  .page-card--home .service__name { font-size: 26px; }
  .page-card--home .service__desc { font-size: 13.5px; max-width: 44ch; }
}

/* Уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}