/* ============================================================
   Палитра снята с референса: тёплый бежево-терракотовый ряд,
   глубокий коричневый вместо чёрного, кремовый фон.
   ============================================================ */
:root {
  /* Палитра снята с иллюстрации: золотисто-песочный, тёплое дерево,
     приглушённый шалфей из растений и одежды. */
  --cream:      #FBF3E5;
  --cream-2:    #F3E8D3;
  --sand:       #E6CBA0;
  --peach:      #EBB888;
  --tan:        #C68B57;
  --sage:       #808B79;
  --brown:      #7A5B37;
  --deep:       #45321E;
  --ink:        #2E2419;
  --muted:      #7C6A53;
  --line:       #E5D8C0;

  --radius:     18px;
  --radius-lg:  26px;
  --shadow:     0 2px 4px rgba(70, 51, 33, .06), 0 12px 32px rgba(70, 51, 33, .12);
  --shadow-lg:  0 -8px 40px rgba(70, 51, 33, .22);

  --ease:       cubic-bezier(.22, .61, .36, 1);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

/* Атрибут hidden должен побеждать любой display из авторских правил:
   без этого .done { display:flex } оставляет экран подтверждения поверх страницы. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* чтобы липкая шапка не накрывала заголовок при переходе по якорю */
#schedule { scroll-margin-top: 68px; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 3px solid var(--tan);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ─────────────── шапка ─────────────── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  padding: 12px 20px;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.topbar.is-scrolled { border-bottom-color: var(--line); }

.brand {
  font-size: 13px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brown);
}
.brand:empty { display: none; }

/* ─────────────── верхний экран ───────────────
   Иллюстрация вытянута по высоте, заголовок лежит прямо на ней (внизу,
   там пол — светлый и ровный), а подпись и кнопка уходят под картинку.
   Никаких плашек: заголовок читается за счёт контраста с полом. */
/* Кадр и заголовок лежат в одной ячейке сетки: заголовок прижат к низу кадра,
   то есть стоит прямо на картинке. На широком экране он уезжает во вторую
   колонку (см. медиазапрос снизу) — там кадр узкий, и на картинке ему тесно. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* лишняя высота не растягивает строки: заголовок обязан остаться
     прижатым к низу кадра, а не сползти на фон под ним */
  align-content: start;
}

.hero__frame {
  grid-area: 1 / 1;
  position: relative;
  height: 70svh;
  min-height: 430px;
  overflow: hidden;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  animation: heroIn 1.5s var(--ease) both;
}
/* У картинки НЕТ своей анимации: transform занят параллаксом,
   а CSS-анимация перебила бы inline-стиль и параллакс бы умер. */
.hero__img {
  /* картинка поднята вверх и выступает за кадр: фигура целиком остаётся
     над плашкой, а нижний запас (30%) — ход для параллакса */
  position: absolute; left: 0; right: 0;
  top: -18%; height: 130%;
  /* width обязателен: у заменяемого элемента с заданной высотой ширина
     считается из пропорций картинки, а не растягивается по left/right.
     Портретная картинка в широком кадре не дотягивалась до правого края. */
  width: 100%;
  object-fit: cover; object-position: 50% 20%;
  will-change: transform;
}

/* Размытие живёт в отдельном слое и гаснет кверху через маску:
   внизу кадра — плотное матовое стекло, выше — чистый слой без перехода-ступеньки.
   Маска тут обязательна: если вешать размытие прямо на заголовок,
   она погасила бы заодно и сам текст. */
.hero__scrim {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 54%;
  background: rgba(251, 243, 229, .60);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-mask-image: linear-gradient(180deg,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 34%, rgba(0,0,0,.72) 68%, #000 100%);
  mask-image: linear-gradient(180deg,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 34%, rgba(0,0,0,.72) 68%, #000 100%);
  pointer-events: none;
}
/* без поддержки размытия остаётся градиентная подложка — текст не потеряется */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(251,243,229,0) 0%, rgba(251,243,229,.55) 45%, rgba(251,243,229,.9) 100%);
  }
}

/* Заголовок — во всю ширину кадра, без зазоров и без своей подложки:
   фон под ним делает слой размытия */
.hero__title {
  grid-area: 1 / 1;
  align-self: end;
  /* position+z-index обязательны: кадр из-за анимации с transform сам
     создаёт контекст наложения и иначе нарисовался бы поверх заголовка */
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0 20px 22px;
  font-size: clamp(25px, 7.9vw, 44px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--deep);
  text-shadow: 0 1px 12px rgba(251, 243, 229, .35);
}

.hero__under { grid-area: 2 / 1; padding: 20px 22px 0; }
.hero__sub {
  margin: 0;
  font-size: clamp(16px, 4.4vw, 20px);
  color: var(--brown);
  max-width: 26ch;
  animation: riseIn .6s var(--ease) .25s both;
}

/* заголовок появляется по словам */
.word { display: inline-block; overflow: hidden; padding-bottom: .06em; }
.word > span {
  display: inline-block;
  animation: wordUp .78s var(--ease) both;
  animation-delay: var(--d, 0ms);
}

/* ─────────────── кнопка-пилюля ─────────────── */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  border: 0; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: 16px;
  text-decoration: none; cursor: pointer;
  transition: transform .16s var(--ease), box-shadow .24s var(--ease), background-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.pill--solid { background: var(--deep); color: var(--cream); box-shadow: var(--shadow); }
.pill--light { background: var(--cream); color: var(--deep); }
.pill--ghost {
  background: transparent; color: var(--brown);
  border: 1.5px solid var(--line); box-shadow: none;
}
.pill--ghost:active { background: var(--cream-2); }
.pill--danger { background: #A6483A; color: #FFF3EC; box-shadow: none; }
.pill--wide  { width: 100%; }
.pill:active { transform: scale(.97); }
.pill[disabled], .pill[aria-disabled="true"] {
  opacity: .5; pointer-events: none;
}

/* ─────────────── приглашение ─────────────── */
.note {
  margin: 26px 20px 0;
  padding: 22px 22px;
  background: var(--cream-2);
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
/* ── кат с описанием практики ── */
.about { margin: 0; }

.about__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; list-style: none;
  font-size: 15.5px; font-weight: 600; color: var(--brown);
  padding: 2px 0;
  -webkit-tap-highlight-color: transparent;
}
.about__toggle::-webkit-details-marker { display: none; }
.about__toggle::after {
  content: ""; flex: 0 0 auto;
  width: 9px; height: 9px; margin-right: 3px;
  border-right: 2px solid var(--tan);
  border-bottom: 2px solid var(--tan);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .28s var(--ease);
}
.about[open] .about__toggle::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.about__text {
  margin: 12px 0 0;
  font-size: 15.5px; line-height: 1.55; color: var(--brown);
  animation: riseIn .38s var(--ease) both;
}

.note__lead { margin: 0; font-size: 17px; line-height: 1.45; font-weight: 600; color: var(--deep); }

/* ─────────────── услуги ───────────────
   Переключатель и визитка выбранной услуги. Секция ближе к расписанию,
   чем остальные: она читается как его шапка, а не как отдельная глава. */
.section.services { padding-top: 26px; }

.switch {
  display: flex; gap: 8px;
  margin: 0 0 18px;
  /* услуг со временем может стать три — пусть строка прокручивается,
     а не сжимает подписи */
  overflow-x: auto;
  scrollbar-width: none;
}
.switch::-webkit-scrollbar { display: none; }

.switch__tab {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 20px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--brown);
  font: inherit; font-weight: 600; font-size: 15px;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
/* Активный таб выделяется цветом, а не transform: элемент с transform
   создаёт контекст наложения и нарисовался бы поверх соседней кнопки. */
.switch__tab[aria-pressed="true"] {
  background: var(--deep); border-color: var(--deep); color: var(--cream);
}
.switch__tab:active { background: var(--cream-2); }
.switch__tab[aria-pressed="true"]:active { background: var(--deep); }

.offer__lead { margin: 0 0 6px; font-size: 17px; font-weight: 600; color: var(--deep); }
.offer__meta { margin: 0; font-size: 14px; color: var(--muted); }
.offer .about { margin-top: 14px; }

/* ─────────────── секции ─────────────── */
.section { padding: 40px 20px 8px; }
.section__title {
  margin: 0 0 18px;
  font-size: 13px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sage);
}

/* ─────────────── карточки занятий ─────────────── */
.cards { display: grid; gap: 14px; }

.card {
  position: relative;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(70,51,33,.04);
}

@media (hover: hover) {
  .card { transition: transform .28s var(--ease), box-shadow .28s var(--ease); }
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
}
.card__top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px 12px; flex-wrap: wrap;
}
.card__when {
  margin: 0;
  font-size: 21px; font-weight: 800; letter-spacing: -.01em;
  color: var(--deep);
}
.card__time { color: var(--brown); }
.card__meta {
  margin: 8px 0 0;
  font-size: 14px; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 6px 14px;
}
.card__price { font-weight: 700; color: var(--brown); }

.seats { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.seats__dots { display: flex; gap: 5px; }
.seats__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--cream-2); border: 1px solid var(--line);
  transition: background-color .3s var(--ease), transform .3s var(--ease);
  animation: dotIn .42s var(--ease) both;
  animation-delay: var(--di, 0ms);
}
.seats__dot--taken { background: var(--tan); border-color: var(--tan); }
.seats__text { font-size: 14px; color: var(--muted); }
.seats__text b { color: var(--deep); }

.card__cta { margin-top: 16px; }
.card__cta .pill { width: 100%; }

.card--full { background: var(--cream-2); }
.card--full .card__when { color: var(--muted); }
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; flex: 0 0 auto;
}
.badge--full { background: var(--peach); color: var(--deep); }
.badge--cancelled { background: #E4D3D0; color: #7A3B33; }

.card--cancelled { opacity: .68; }
.card--cancelled .card__when { text-decoration: line-through; }

/* ── карточка-вход для услуги по заявкам ───────────────────────────────
   У такой услуги нет ни расписания, ни календаря: единственное действие —
   оставить заявку, а время инструктор согласует звонком. Поэтому вместо
   списка карточек тут одна, с объяснением и кнопкой. */
.card--entry .card__when { font-size: 20px; }
.card--entry .card__meta { margin-top: 10px; line-height: 1.5; }
.card--entry .card__cta { margin-top: 18px; }

/* скелетон, пока грузится расписание */
.card--skeleton { height: 168px; border-color: transparent; overflow: hidden; }
.card--skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--cream-2) 20%, #F9F4EA 42%, var(--cream-2) 62%);
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
}

.empty {
  padding: 30px 22px; text-align: center;
  background: var(--cream-2); border-radius: var(--radius);
}
.empty__title { margin: 0 0 6px; font-weight: 700; color: var(--deep); }
.empty__text { margin: 0; color: var(--muted); font-size: 15px; }

/* Тексты из content.js переносим по \n. В HTML одиночный перевод строки
   схлопывается в пробел, поэтому без этого правила «строка в файле» и
   «строка на странице» — разные вещи. pre-line переносит по \n, но обычные
   пробелы и перенос по ширине оставляет как есть. */
.hero__sub, .note__lead, .offer__lead, .about__text,
.empty__title, .empty__text { white-space: pre-line; }

/* ─────────────── контакты ─────────────── */
.contacts__list {
  margin: 0; display: grid; gap: 12px;
}
.contacts__row { display: flex; gap: 12px; align-items: baseline; }
.contacts__row dt { min-width: 92px; color: var(--muted); font-size: 14px; }
.contacts__row dd { margin: 0; font-weight: 600; }
.contacts__row a { color: var(--brown); text-decoration: none; border-bottom: 1px solid var(--sand); }

.foot {
  padding: 40px 20px calc(48px + var(--safe-bottom));
  text-align: center; color: var(--muted); font-size: 13px;
}

/* ─────────────── нижняя шторка ─────────────── */
.sheet { position: fixed; inset: 0; z-index: 60; }
.sheet__backdrop {
  position: absolute; inset: 0;
  background: rgba(46,36,25,.5);
  backdrop-filter: blur(3px);
  animation: fadeIn .25s var(--ease) both;
}
.sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 94svh; overflow-y: auto;
  padding: 10px 22px calc(28px + var(--safe-bottom));
  background: var(--cream);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg);
  animation: sheetUp .38s var(--ease) both;
  overscroll-behavior: contain;
}
.sheet__handle {
  width: 44px; height: 4px; border-radius: 2px;
  background: var(--line); margin: 6px auto 14px;
}
.sheet__close {
  position: absolute; top: 10px; right: 12px;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted);
  font-size: 26px; line-height: 1; cursor: pointer;
}
.sheet__close:active { background: var(--cream-2); }

.sheet__head { margin-bottom: 20px; padding-right: 40px; }
.sheet__title { margin: 0 0 4px; font-size: 22px; font-weight: 800; color: var(--deep); }
.sheet__when { margin: 0; color: var(--brown); font-weight: 600; }
.sheet__hint { margin: 8px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }

/* ─────────────── форма ─────────────── */
.form { display: grid; gap: 16px; }

.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; color: var(--brown); }
.field__opt { font-weight: 400; color: var(--muted); font-size: 13px; }
.field__hint { margin: 0; font-size: 13px; color: var(--muted); }

.field input, .field textarea {
  width: 100%;
  padding: 14px 16px;
  font: inherit; font-size: 16px; /* 16px — иначе iOS зумит страницу при фокусе */
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color .2s, box-shadow .2s;
  resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: #B9AA93; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--tan);
  box-shadow: 0 0 0 4px rgba(166,131,93,.16);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: #B4553F;
  box-shadow: 0 0 0 4px rgba(180,85,63,.12);
}

/* приманка: прячем смещением, а не display:none — часть ботов её пропускает */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.form__error {
  margin: 0; padding: 12px 14px;
  background: #F6E4E0; color: #7A3B33;
  border-radius: 12px; font-size: 15px; font-weight: 600;
}
.form__legal { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }

/* спиннер внутри кнопки */
.pill__spinner {
  width: 18px; height: 18px; flex: 0 0 auto;
  border: 2px solid rgba(247,241,228,.35);
  border-top-color: var(--cream);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: none;
}
.pill.is-busy .pill__spinner { display: block; }
.pill.is-busy { pointer-events: none; opacity: .85; }

/* ─────────────── экран «записались» ─────────────── */
/* Экран подтверждения может быть выше экрана телефона (375×667 — обычное дело),
   поэтому он обязан прокручиваться. align-items: flex-start + margin: auto
   на содержимом: при запасе высоты оно центрируется, при нехватке — начинается
   сверху и спокойно скроллится. С align-items: center верх обрезался бы навсегда. */
.done {
  position: fixed; inset: 0; z-index: 70;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 20px 20px calc(20px + var(--safe-bottom));
  background: var(--cream);
  animation: fadeIn .3s var(--ease) both;
}
.done__inner {
  width: 100%; max-width: 420px;
  margin: auto 0;          /* центр при запасе высоты, верх при нехватке */
  text-align: center;
  animation: riseIn .5s var(--ease) .05s both;
}
.done__title { margin: 18px 0 6px; font-size: 27px; font-weight: 800; color: var(--deep); }
.done__when { margin: 0 0 18px; color: var(--brown); font-weight: 600; font-size: 17px; }

.done__details {
  margin: 0 0 22px; text-align: left;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 6px 18px;
}
.done__row { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.done__row:last-child { border-bottom: 0; }
.done__row dt { min-width: 88px; color: var(--muted); font-size: 14px; }
.done__row dd { margin: 0; font-weight: 600; }

.done__hint { margin: 14px 0 0; font-size: 13px; color: var(--muted); }

.done__actions { margin-top: 16px; }
.done__confirm { margin-top: 16px; display: grid; gap: 10px; }
.done__confirm-text {
  margin: 0; font-size: 15px; color: var(--brown);
  background: var(--cream-2); border-radius: 14px; padding: 12px 14px;
}
#doneAgain { margin-top: 16px; }
.done__fallback {
  margin: 16px 0 0; padding: 14px 16px;
  background: var(--cream-2); border-radius: 14px;
  font-size: 14px; color: var(--brown); text-align: left;
}

/* На низких экранах поджимаем вертикаль, чтобы кнопки помещались без прокрутки
   там, где это возможно. Прокрутка всё равно остаётся страховкой. */
@media (max-height: 720px) {
  .check { width: 62px; height: 62px; }
  .done__title { margin: 12px 0 4px; font-size: 23px; }
  .done__when { margin-bottom: 14px; font-size: 16px; }
  .done__details { margin-bottom: 16px; }
  .done__row { padding: 8px 0; }
  .done__hint { margin-top: 10px; }
  .done__fallback { margin-top: 12px; padding: 12px 14px; }
  .done__actions, .done__confirm, #doneAgain { margin-top: 12px; }
  .linkbtn { margin-top: 14px; }
}

.linkbtn {
  margin-top: 22px; border: 0; background: none;
  font: inherit; font-weight: 600; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; padding: 10px;
}

/* галочка рисуется штрихом */
.check { width: 84px; height: 84px; margin: 0 auto; }
/* отменённая запись: вместо галочки рисуется крестик.
   Пустой круг читался бы как «загружается». */
.check__cross {
  stroke: var(--muted); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 46; stroke-dashoffset: 46; display: none;
}
.done--cancelled .check__circle { stroke: var(--muted); }
.done--cancelled .check__mark { display: none; }
.done--cancelled .check__cross {
  display: block;
  animation: draw .5s var(--ease) .25s forwards;
}
.done--cancelled .done__title { color: var(--brown); }
.check__circle {
  stroke: var(--tan); stroke-width: 2;
  stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: draw .7s var(--ease) .1s forwards;
}
.check__mark {
  stroke: var(--deep); stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: draw .45s var(--ease) .6s forwards;
}

/* ─────────────── появление при прокрутке ───────────────
   Класс js-reveal вешает скрипт: без JS ничего не спрятано — контент
   обязан быть виден, даже если скрипт не выполнился. */
.js-reveal .reveal { opacity: 0; transform: translateY(22px); }
.js-reveal .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .65s var(--ease), transform .65s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
/* Скелетоны грузятся сразу — их reveal не касается, иначе они бы прятались. */
.card--skeleton { opacity: 1 !important; transform: none !important; }

/* ─────────────── анимации ─────────────── */
@keyframes heroIn { from { transform: scale(1.04); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes wordUp { from { transform: translateY(105%); } to { transform: none; } }
@keyframes dotIn { from { opacity: 0; transform: scale(.15); } to { opacity: 1; transform: none; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes shimmer { from { background-position: 140% 0; } to { background-position: -40% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Уважаем системную настройку: никакого движения.
   Но контент обязан быть видимым — reveal-элементы показываем сразу. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .check__circle, .check__mark { stroke-dashoffset: 0; }
  .js-reveal .reveal,
  .js-reveal .card { opacity: 1 !important; transform: none !important; }
}

/* ─────────────── планшет и шире ─────────────── */
@media (min-width: 720px) {
  .hero { min-height: 76svh; border-radius: 0 0 32px 32px; }
  /* на широком экране размытие тянется во всю ширину, а текст держим колонкой */
  .hero__title {
    max-width: 760px; margin-inline: auto;
    padding: 0 44px 32px;
  }
  .hero__under { max-width: 720px; margin-inline: auto; padding-inline: 44px; }
  .note, .section, .foot { max-width: 720px; margin-inline: auto; }
  .section, .foot { padding-inline: 44px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .sheet__panel {
    left: 50%; right: auto; bottom: 24px;
    width: min(560px, 92vw);
    transform: translateX(-50%);
    border-radius: var(--radius-lg);
    animation: modalIn .34s var(--ease) both;
  }
  @keyframes modalIn {
    from { opacity: 0; transform: translate(-50%, 16px) scale(.98); }
    to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
  }
}

/* ─────────────── широкий экран: две колонки ───────────────
   Иллюстрация портретная (848×1264). Растянутая во всю ширину, она
   превращается в полосу 2.3:1: на 1440×900 от неё остаётся затылок
   крупным планом, а заголовок ложится на тело. Поэтому от 900px кадр
   становится колонкой и показывает картинку почти целиком, а заголовок,
   подпись и кнопка переезжают в соседнюю колонку.

   Пропорция 7/8 подобрана под ту же картинку: её бокс выше кадра в 1.3 раза
   (запас для параллакса), поэтому и кадр должен быть во столько же раз шире
   картинки — иначе object-fit: cover начнёт срезать края. */
@media (min-width: 900px) {
  .hero {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(36px, 4vw, 76px);
    row-gap: 22px;
    align-content: center;
    max-width: 1200px;
    min-height: 0;
    margin-inline: auto;
    padding-inline: 44px;
  }
  /* Всё решает ширина кадра, высота идёт за ней по пропорции 7/8 — поэтому
     картинка не обрезается по бокам ни на одном размере. Верхние границы:
     560px на большом мониторе, 46vw на ноутбуке (иначе кадр съедает колонку
     текста и заголовок встаёт по одному слову в строку) и 74svh по той же
     пропорции — иначе на низком окне кадр оказался бы выше экрана. */
  .hero__frame {
    grid-area: 1 / 1 / 3 / 2;
    width: min(560px, 46vw, calc(74svh * 7 / 8));
    height: auto;
    aspect-ratio: 7 / 8;
    border-radius: var(--radius-lg);
  }
  /* заголовок больше не лежит на картинке — размывать под ним нечего */
  .hero__scrim { display: none; }
  .hero__title {
    grid-area: 1 / 2;
    align-self: end;
    max-width: none;
    padding: 0;
    font-size: clamp(32px, 3.5vw, 52px);
    text-shadow: none;
  }
  .hero__under {
    grid-area: 2 / 2;
    align-self: start;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .hero__sub { max-width: 34ch; }

  /* Ниже шапки контент расходится по той же сетке — те же 1200 с отступом 44,
     поэтому левые края кадра, плашки и карточек совпадают. Иначе на мониторе
     1440+ колонка 720px читается как телефон, приклеенный к центру: карточки
     висят в пустоте, а третья уезжает вниз.
     У плашки ширина с минимумом 88px по бокам, иначе на 900–1100px она
     растянулась бы до краёв окна (у неё нет собственных боковых полей). */
  .note {
    max-width: none;
    width: min(1112px, 100% - 88px);
    margin-inline: auto;
  }
  .section, .foot { max-width: 1200px; }
  .cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  /* Блоки стали широкими, а строка текста — нет: абзац на всю ширину в 130
     знаков читать невозможно, поэтому текст держим колонкой. Визитке услуги
     это заодно не даёт разъехаться подписи ката и стрелки по разным краям. */
  .about__text, .note__lead, .offer { max-width: 62ch; }
}