/* ==========================================================================
   Локальные шрифты. Файлы кладутся в папку fonts/ рядом со style.css.
   font-display: swap — текст рисуется системным шрифтом сразу, а не ждёт
   загрузки, иначе на медленной сети страница секунду стоит пустая.
   ========================================================================== */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/manrope-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/manrope-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/manrope-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/manrope-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Wix Madefor Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/wix-madefor-display-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Wix Madefor Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/wix-madefor-display-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Wix Madefor Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/wix-madefor-display-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Wix Madefor Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/wix-madefor-display-800.woff2') format('woff2');
}

/* ==========================================================================
   Творческая мастерская «Доброта» — верстка по макету (Figma node 47:4)
   ========================================================================== */

:root {
  --background: #f7f5ee;
  --text: #2f3829;
  --primary: #7a8b6f;
  --accent: #d78565;
  --accent-dark: #c06a48;
  --error: #c4402c;
  --big_radius: 30px;
  --sand: #ebd4b5;
  --hairline: #d8d2c2;
  --bar-h: 78px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-h) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

html, body { margin: 0; padding: 0; }

body {
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--background);
}

p { margin: 0; }
img { display: block; }
a { color: inherit; text-decoration: none; }

/* белый список для «сохранить пробелы из макета» — вешаем ТОЛЬКО на текстовые
   узлы, иначе отступы разметки между тегами превращаются в пустые строки */
.pre { white-space: pre-wrap; }

/* --- основной фрейм: единственное отступление от макета — тянется по экрану --- */
.main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  background: var(--background);
  overflow: hidden;
}

/* ==========================================================================
   типовые элементы
   ========================================================================== */

.h2 {
  font-family: 'Wix Madefor Display', sans-serif;
  font-weight: 800;
  font-size: 49px;
  line-height: normal;
  color: var(--text);
  word-break: break-word;
}
.h2--w566 { width: 566px; }
.h2--full  { width: 100%; }
.h2--h70   { height: 70px; }

.eyebrow {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 5.12px;
  line-height: normal;
}
.eyebrow--primary { color: var(--primary); line-height: 16px; width: 100%; }
.eyebrow--dark9   { color: rgba(47, 56, 41, 0.9); }
.eyebrow--dark7   { color: rgba(47, 56, 41, 0.7); }
.eyebrow--nowrap  { white-space: nowrap; }
.eyebrow--full    { width: 100%; }

.section-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  word-break: break-word;
}
.section-header--nowrap { white-space: nowrap; }
.section-header--center { text-align: center; }

/* --- кнопки: настоящие интерактивные элементы --- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  background: var(--accent);
  border: none;
  border-radius: 50px;
  flex-shrink: 0;
  cursor: pointer;
  font-family: inherit;
  transition: transform .42s cubic-bezier(.34, 1.8, .5, 1), background-color .2s ease;
}
.btn span {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  line-height: normal;
  color: var(--background);
  word-break: break-word;
}
/* пружина: упругий отскок на наведении, вдавливание по клику */
.btn:hover, .btn:focus-visible { background: var(--accent-dark); transform: scale(1.08); }
.btn:active { transform: scale(.95); transition-duration: .1s; }
.btn:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }

.btn--hero { width: 201px; }
.btn--hero span { flex: 1 0 0; min-width: 0; font-size: 24px; text-align: center; }
.btn--sm span { font-size: 16px; white-space: nowrap; }
.btn--full { width: 100%; }
/* на кнопке во всю ширину карточки 1.08 выглядит слишком размашисто */
.btn--full:hover, .btn--full:focus-visible { transform: scale(1.02); }
.btn--full:active { transform: scale(.99); }
.btn--full span { font-size: 20px; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .btn, .bar__button, .bar__menu-item span::after { transition: none; }
  .btn:hover, .btn:focus-visible, .btn:active,
  .bar__button:hover, .bar__button:focus-visible, .bar__button:active { transform: none; }
}

.hr-thin  { width: 100%; height: 1px; background: var(--hairline); flex-shrink: 0; }
.hr-thick { width: 100%; height: 2px; background: var(--hairline); flex-shrink: 0; }

/* ==========================================================================
   bar (зафиксирован в вьюпорте)
   ========================================================================== */

.bar {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;      /* было 1440px */
  padding: 12px 120px;
  background: rgba(248, 244, 237, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.bar__logo {
  position: relative;
  width: 214.931px;
  height: 32px;
  flex-shrink: 0;
}
.bar__logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

.bar__menu {
  display: flex;
  gap: 64px;
  align-items: center;
  width: 537px;
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  color: rgba(47, 56, 41, 0.9);
  text-align: center;
  flex-shrink: 0;
}
.bar__menu-item {
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s ease;
}
.bar__menu-item:hover,
.bar__menu-item:focus-visible { color: var(--accent); }
.bar__menu-item span { position: relative; display: inline-block; }
/* подчёркивание прочерчивается слева направо, уходит обратно влево */
.bar__menu-item span::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.bar__menu-item:hover span::after,
.bar__menu-item:focus-visible span::after { transform: scaleX(1); }
.bar__menu-item:focus-visible { outline: none; }
.bar__menu-item:focus-visible span { outline: 2px solid var(--text); outline-offset: 4px; }
.bar__menu-item--flex { flex: 1 0 0; min-width: 0; }
.bar__menu-item--min116 { min-width: 116px; }
.bar__menu-item--w69 { width: 69px; flex-shrink: 0; }
.bar__menu-item--w74 { width: 74px; flex-shrink: 0; }

/* кнопка «программы»: в макете жёсткие 156px, в браузере метрики Manrope
   чуть шире и текст переносился — держим 156 как минимум, но не даём ломаться */
.bar__button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 156px;
  padding: 16px 32px;
  background: #7a8b6f;
  border: 1px solid #7a8b6f;
  border-radius: 50px;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform .42s cubic-bezier(.34, 1.8, .5, 1), background-color .2s ease;
}
.bar__button span {
  font-weight: 700;
  font-size: 16px;
  line-height: normal;
  color: var(--background);
  white-space: nowrap;
}
.bar__button:hover, .bar__button:focus-visible { background: #6b7b61; border-color: #6b7b61; transform: scale(1.08); }
.bar__button:active { transform: scale(.95); transition-duration: .1s; }
.bar__button:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }

/* ==========================================================================
   hero
   ========================================================================== */

/* высоту hero задаёт сама иллюстрация: 148px сверху + её высота − 44px,
   которые в макете уходят под обрез. Ничего не кадрируется, картинка
   масштабируется целиком, текст лежит поверх её пустого верха */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

/* смещения переведены в vw (база — макет на 1440), а не фиксированные px:
   картинка растёт/сжимается вместе с шириной экрана (height:auto), и если
   держать текст на фиксированных px, при любой ширине ýже 1440 «людная»
   часть иллюстрации проезжает вверх быстрее текста — кнопка заезжает в
   рисунок сильнее, чем задумано. vw даёт тексту тот же темп масштабирования */
.hero-bg {
  width: 100%;
  margin-top: 10.278vw;   /* 148 / 1440 * 100 */
  margin-bottom: -3.056vw; /* -44 / 1440 * 100 */
  pointer-events: none;
}
.hero-bg img {
  width: 100%;
  height: auto;
  max-width: none;
}

.hero-content {
  position: absolute;
  top: 9.861vw;   /* 142 / 1440 * 100 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  width: 100%;
  max-width: 769px;
}

.hero-main-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 100%;
  text-align: center;
  line-height: normal;
  word-break: break-word;
  flex-shrink: 0;
}

.hero-title {
  width: 100%;
  font-family: 'Wix Madefor Display', sans-serif;
  font-weight: 800;
  font-size: 49px;
  color: var(--text);
}

.hero-sub {
  width: 100%;
  max-width: 542px;
  font-weight: 600;
  font-size: 20px;
  color: var(--primary);
}

/* ==========================================================================
   line
   ========================================================================== */

.line {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 38px;
  padding: 8px 0;
  background: var(--primary);
  overflow: hidden;
  flex-shrink: 0;
}
.line__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee 110s linear infinite;
}
.line p {
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  color: var(--background);
  white-space: pre;
  flex-shrink: 0;
}
/* трек — две одинаковые копии, сдвиг на -50% замыкает цикл без стыка */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .line__track { animation: none; }
}

/* ==========================================================================
   about us
   ========================================================================== */

.about-us {
  display: flex;
  gap: 61px;
  align-items: center;
  justify-content: center;   /* фото упирается в max-width 588, остаток делится поровну */
  width: 100%;
  padding: 96px 120px;
  overflow: hidden;
  flex-shrink: 0;
}

.about-photo {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  max-width: 588px;
  max-height: 588px;
  aspect-ratio: 588 / 588;
  border-radius: var(--big_radius);
  overflow: hidden;
}
.about-photo img {
  position: absolute;
  left: -0.11%;
  top: -11.45%;
  width: 100.11%;
  height: 150.24%;
  max-width: none;
}

.message {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  width: 550.999px;
  min-height: 411.483px;
  padding: 32px 32px 32px 59px;
  flex-shrink: 0;
}

.bubble-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 550.999px;
  height: 411.483px;
}
.bubble-bg img {
  width: 100%;
  height: 100%;
  max-width: none;
}

.message-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: flex-start;
  width: 460px;
  flex-shrink: 0;
}

.message-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
}
/* в макете заголовок в одну строку; у веб-версии Wix Madefor метрики чуть
   шире, поэтому запрещаем перенос, чтобы текст не выпадал из баббла */
.message-header .h2 { white-space: nowrap; }

.text-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  width: 442px;
  flex-shrink: 0;
}

.about-text {
  width: 100%;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  color: var(--text);
  word-break: break-word;
}

.quote {
  display: flex;
  gap: 16px;
  align-items: center;
  width: 339px;
  flex-shrink: 0;
}
.contrast-line {
  width: 3px;
  height: 65px;
  background: var(--accent);
  flex-shrink: 0;
}
.quote p {
  flex: 1 0 0;
  min-width: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  color: #262d21;
  word-break: break-word;
}

/* ==========================================================================
   programms
   ========================================================================== */

.programms {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 1640px;
  padding: 96px 120px;
  background: var(--sand);
  flex-shrink: 0;
}

.prog-cards {
  display: flex;
  gap: 48px;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  height: 838px;
  flex-shrink: 0;
}

.prog-card {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  height: 100%;
  background: var(--background);
  border-radius: var(--big_radius);
  overflow: hidden;
}

.prog-card__img {
  position: relative;
  width: 100%;
  aspect-ratio: 576 / 307;
  flex-shrink: 0;
  overflow: hidden;
}
.prog-card__img img {
  position: absolute;
  left: 0;
  top: -5.57%;
  width: 100%;
  height: 105.59%;
  max-width: none;
}

.prog-card__content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  width: 100%;
  padding: 0 32px;
  flex-shrink: 0;
}

.prog-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
}
.prog-card__body--left  { gap: 24px; }
.prog-card__body--right { gap: 35px; }

.prog-card__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
}
.prog-card__header--left { max-width: 439px; }

.prog-card__title {
  width: 100%;
  font-family: 'Wix Madefor Display', sans-serif;
  font-weight: 600;
  font-size: 25px;
  line-height: normal;
  color: var(--text);
  word-break: break-word;
  flex-shrink: 0;
}
.prog-card__title--tall { height: 63px; }

.pills {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border: 2px solid var(--sand);
  border-radius: 100px;
  flex-shrink: 0;
}
.pill p {
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  flex-shrink: 0;
}
.card-content--left { height: 217px; }

.prog-card__desc {
  width: 100%;
  max-width: 417px;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  color: rgba(47, 56, 41, 0.7);
  word-break: break-word;
  flex-shrink: 0;
}

.result {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
}
.result__label {
  width: 100%;
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 3.2px;
  color: var(--text);
  word-break: break-word;
}
.result__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
}
.result__item {
  width: 100%;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  color: var(--text);
  word-break: break-word;
  flex-shrink: 0;
}
.result__item--fixed { height: 21px; }

.prog-card__footer {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
}
.prog-card__footer--fixed { height: 76px; }

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-shrink: 0;
}

.price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 234px;
  flex-shrink: 0;
}
.price--tall { height: 55px; }

.price__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-shrink: 0;
}
.price__value {
  font-weight: 600;
  font-size: 24px;
  line-height: normal;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}
.price__unit {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  color: rgba(47, 56, 41, 0.7);
}
.price__note {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  color: rgba(47, 56, 41, 0.7);
  flex-shrink: 0;
}

/* --- мастер-классы --- */

.master-class {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  width: 100%;
  padding-top: 8px;   /* запас под подъём карточки на hover, чтобы не липла к eyebrow сверху */
  flex-shrink: 0;
}

.mc-cards {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  width: 100%;
  max-width: 1200px;
  flex-shrink: 0;
}

.mc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 368px;
  height: 368px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--big_radius);
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform .2s ease;
}
.mc-card:hover,
.mc-card:focus-visible { transform: translateY(-4px); }
.mc-card:hover .mc-card__look-text,
.mc-card:focus-visible .mc-card__look-text { text-decoration: underline; }
.mc-card:focus-visible { outline: 3px solid var(--background); outline-offset: 3px; }
.mc-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: var(--big_radius);
  pointer-events: none;
}
.mc-card__shadow {
  position: relative;
  flex: 1 0 0;
  min-height: 0;
  width: 100%;
  border-radius: var(--big_radius);
  overflow: hidden;
  background: linear-gradient(to bottom, rgba(124, 139, 104, 0) 50%, #2f3829 100%);
}
.mc-card__content {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 368px;
  padding: 32px;
}
.mc-card__look {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  width: 168px;
  padding: 0 1px;
  flex-shrink: 0;
}
.mc-card__look--auto { width: auto; }
.mc-card__icon {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
.mc-card__icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
.mc-card__look-text {
  flex: 1 0 0;
  min-width: 0;
  height: 14px;
  font-family: 'Wix Madefor Display', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: normal;
  color: var(--background);
}
.mc-card__look-text--w154 { flex: 0 0 auto; width: 154px; }
.mc-card__title {
  width: 100%;
  font-family: 'Wix Madefor Display', sans-serif;
  font-weight: 600;
  font-size: 25px;
  line-height: normal;
  color: var(--background);
  word-break: break-word;
  flex-shrink: 0;
}

/* ==========================================================================
   advantages
   ========================================================================== */

.advantages {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 96px 120px;
  overflow: hidden;
  flex-shrink: 0;
}

.adv-content {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  width: 100%;
  max-width: 1200px;
  flex-shrink: 0;
}

.adv-item {
  position: relative;
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.adv-bubble {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}
.adv-bubble img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
.adv-bubble--rot90 img { transform: rotate(-90deg); }

.adv-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 100%;
  text-align: center;
  font-size: 20px;
  line-height: normal;
  word-break: break-word;
  flex-shrink: 0;
}
.adv-title {
  width: 100%;
  font-family: 'Wix Madefor Display', sans-serif;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
}
.adv-desc {
  width: 100%;
  font-weight: 400;
  color: rgba(47, 56, 41, 0.7);
  flex-shrink: 0;
}

/* ==========================================================================
   faq
   ========================================================================== */

.faq {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  width: 100%;
  padding: 96px 300px;
  background: var(--sand);
  overflow: hidden;
  flex-shrink: 0;
}

.faq-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 840px;
  flex-shrink: 0;
}

.faq-item {
  width: 100%;
  border-bottom: 3px solid var(--background);
  flex-shrink: 0;
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.faq-item__q {
  font-weight: 500;
  font-size: 24px;
  line-height: normal;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}
.faq-item summary:hover .faq-icon { transform: scale(1.15); }
.faq-item__a {
  padding: 0 44px 20px 0;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  color: rgba(47, 56, 41, 0.7);
}
.faq-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19.799px;
  height: 19.799px;
  flex-shrink: 0;
  transition: transform .18s ease;
}
.faq-icon img {
  width: 14px;
  height: 14px;
  max-width: none;
  transform: rotate(-45deg);
  transition: transform .18s ease;
}
/* открыто — поворот ровно на 180° от закрытого состояния,
   чтобы шеврон переворачивался целиком, а не вставал углом */
.faq-item[open] .faq-icon img { transform: rotate(135deg); }

/* ==========================================================================
   booking
   ========================================================================== */

.booking {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  width: 100%;
  padding: 96px 120px;
  flex-shrink: 0;
}

.booking-box {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;          /* из макета, node 224:130 */
  padding: 32px;
  background: var(--primary);
  border-radius: var(--big_radius);
  overflow: hidden;
  flex-shrink: 0;
}

.booking-img {
  position: relative;
  width: 552px;
  height: 552px;
  border-radius: var(--big_radius);
  flex-shrink: 0;
}
.booking-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: var(--big_radius);
  pointer-events: none;
}

.booking-card {
  display: flex;
  flex-direction: column;
  gap: 38px;
  align-items: flex-start;
  width: 552px;
  padding: 40px;
  background: var(--background);
  border-radius: var(--big_radius);
  overflow: hidden;
  flex-shrink: 0;
}

.booking-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
}

.placeholders {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
}
.field__label {
  width: 100%;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  color: var(--text);
}
.field__box {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 16px;
  background: var(--sand);
  border-radius: 12px;
  flex-shrink: 0;
}
.field__box input {
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  outline: none;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: normal;
  color: var(--text);
}
.field__box input::placeholder {
  color: var(--background);
  opacity: 1;
}
.field__box:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }

.checkboxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
}
.checkrow {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  flex-shrink: 0;
}
/* высота из макета — как минимум, а не как предел: на узких экранах
   текст переносится на 3-4 строки и вылезал под кнопку */
.checkrow--h36 { min-height: 36px; }
.checkrow__box-wrap {
  display: flex;
  align-items: center;
  padding: 9px 0;
  flex-shrink: 0;
}
.checkrow__box {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 18px;
  height: 18px;
  background: none;
  border: 1px solid rgba(122, 139, 111, 0.71);
  border-radius: 4px;
  flex-shrink: 0;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background-color .15s ease, border-color .15s ease;
}
.checkrow__box:checked {
  background: var(--primary);
  border-color: var(--primary);
}
.checkrow__box::after {
  content: '';
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--background);
  border-bottom: 2px solid var(--background);
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
  transition: opacity .12s ease;
}
.checkrow__box:checked::after { opacity: 1; }
.checkrow__box:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.checkrow__text {
  flex: 1 0 0;
  min-width: 0;
  font-weight: 400;
  font-size: 13px;
  line-height: normal;
  color: rgba(122, 139, 111, 0.71);
  word-break: break-word;
  cursor: pointer;
}
.checkrow__text a {
  text-decoration: underline;
  text-underline-position: from-font;
}

/* согласие не отмечено при попытке отправки */
.checkrow.is-invalid .checkrow__text { color: var(--error); }
.checkrow.is-invalid .checkrow__text a { color: var(--error); }
.checkrow.is-invalid .checkrow__box {
  border-color: var(--error);
  border-width: 2px;
}

/* ловушка для ботов — убрана из потока, но остаётся заполняемой для скриптов */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* состояния отправки формы */
.booking-done {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 472px;        /* 552 фото минус 2×40 внутренних отступов карточки */
  padding: 40px 24px;
  text-align: center;
}
.booking-done__icon {
  display: grid;
  place-content: center;
  width: 72px;
  height: 72px;
  background: var(--primary);
  border-radius: 50%;
  flex-shrink: 0;
}
/* галочка собрана из границ, как в чекбоксе формы — без внешних картинок */
.booking-done__icon::after {
  content: '';
  width: 26px;
  height: 14px;
  border-left: 4px solid var(--background);
  border-bottom: 4px solid var(--background);
  transform: rotate(-45deg) translate(2px, -2px);
}
.booking-done__title {
  font-family: 'Wix Madefor Display', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: normal;
  color: var(--text);
}
.booking-done__text {
  max-width: 320px;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(47, 56, 41, 0.7);
}
.booking-status {
  width: 100%;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--error);
  line-height: 1.45;
}
.booking-status[hidden] { display: none; }

/* ==========================================================================
   contacts
   ========================================================================== */

.contacts {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 96px 120px;
  background: var(--sand);
  overflow: hidden;
  flex-shrink: 0;
}

.contacts-inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  width: 100%;
  max-width: 1200px;          /* из макета, node 280:250 */
  flex-shrink: 0;
}

.contacts-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-shrink: 0;
}

.contacts-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  width: 370px;
  flex-shrink: 0;
}

.contact-item {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-shrink: 0;
}

.contact-bubble {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}
.contact-bubble__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
.contact-bubble__bg--rot90 { transform: rotate(-90deg); }
.contact-bubble__icon {
  position: absolute;
  left: 23px;
  top: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 41px;
  height: 41px;
  padding: 2px;
  overflow: hidden;
}
.contact-bubble__icon img {
  width: 36px;
  height: 36px;
  max-width: none;
  flex-shrink: 0;
}

.contact-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  width: 187px;
  line-height: normal;
  flex-shrink: 0;
}
.contact-text--wide { gap: 8px; width: 266px; }
.contact-text__label {
  width: 100%;
  font-weight: 400;
  font-size: 20px;
  color: rgba(47, 56, 41, 0.7);
  flex-shrink: 0;
}
.contact-text__value {
  width: 100%;
  font-weight: 600;
  font-size: 24px;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}
.contact-text--wide .contact-text__label { width: 187px; }
a.contact-text__value { width: auto; cursor: pointer; }
a.contact-text__value:hover { color: var(--accent); }
.contact-text__value--link {
  text-decoration: underline;
  text-underline-position: from-font;
}

.map {
  position: relative;
  width: 767px;
  height: 407px;
  background: var(--primary);
  border-radius: var(--big_radius);
  overflow: hidden;
  flex-shrink: 0;
}
.map__img {
  position: absolute;
  inset: 24px;              /* одинаковый отступ со всех сторон, а не 4 разных числа */
  border-radius: var(--big_radius);
  overflow: hidden;
}
.map__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--big_radius);   /* без этого Chrome не всегда клипует
     углы iframe родительским overflow:hidden — у iframe своя compositing-
     прослойка, отсюда острые углы и "квадратится после загрузки" */
}
.map__img img {
  position: absolute;
  left: -0.03%;
  top: -31.46%;
  width: 106.79%;
  height: 164.33%;
  max-width: none;
}

/* ==========================================================================
   footer
   ========================================================================== */

.footer {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  width: 100%;
  padding: 96px 0 8px;
  background: #7a8b6f;
  overflow: hidden;
  flex-shrink: 0;
}

.footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1426px;
  max-width: 100%;
  flex-shrink: 0;
}

.f-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
}

.f-about {
  font-weight: 400;
  font-size: 20px;
  line-height: normal;
  color: var(--background);
  white-space: nowrap;
  flex-shrink: 0;
}

.f-contacts {
  display: flex;
  gap: 32px;
  align-items: center;
  width: 559px;
  max-width: 100%;
  flex-shrink: 0;
}
.f-col {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}
.f-col:first-child { min-width: 247px; }
.f-col__label {
  font-size: 20px;
  color: rgba(247, 245, 238, 0.7);
  text-align: center;
  flex-shrink: 0;
}
.f-col__value {
  font-size: 24px;
  color: #fff;
  flex-shrink: 0;
}
a.f-col__value { cursor: pointer; }
a.f-col__value:hover { text-decoration: underline; }
.f-divider {
  width: 1px;
  height: 64px;
  background: #d2d5c9;
  flex-shrink: 0;
}

.f-watermark {
  width: 100%;
  font-family: 'Wix Madefor Display', sans-serif;
  font-weight: 800;
  font-size: 270px;
  line-height: 300px;
  color: rgba(247, 245, 238, 0.13);
  text-align: center;
  word-break: break-word;
  flex-shrink: 0;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
}
.f-line {
  width: 100%;
  height: 2px;
  background: #9ca791;
  flex-shrink: 0;
}
.copyright {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;      /* было 1440px */
  padding: 0 16px;
  font-weight: 400;
  font-size: 20px;
  line-height: normal;
  color: #d9d9d9;
  white-space: nowrap;
}
.copyright a {
  text-decoration: underline;
  text-underline-position: from-font;
  cursor: pointer;
}
.copyright a:hover { color: #fff; }

/* ==========================================================================
   модалка мастер-класса (Figma node 2020:53) — общий дизайн, свой текст/фото
   ========================================================================== */

.mc-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(47, 56, 41, 0.55);
}
.mc-modal-overlay[hidden] { display: none; }

.mc-modal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 480px;
  max-width: 100%;
  max-height: 90vh;
  overflow: hidden auto;
  background: var(--background);
  border-radius: var(--big_radius);
}
.mc-modal[hidden] { display: none; }

.mc-modal__photo {
  position: relative;
  width: 100%;
  height: 360px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--primary);
}

.mc-modal__slides {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
.mc-modal__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}
.mc-modal__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* заглушка фото — на заполненных слайдах не используется */
.mc-modal__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: rgba(247, 245, 238, 0.6);
  background: repeating-linear-gradient(135deg, #9eaa94, #9eaa94 12px, #93a088 12px, #93a088 24px);
}

.mc-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--background);
  border: none;
  border-radius: 50%;
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: transform .2s ease;
}
.mc-modal__close:hover { transform: scale(1.1); }
.mc-modal__close:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.mc-modal__arrow {
  position: absolute;
  top: 158px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--background);
  border: none;
  border-radius: 22px;
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: transform .2s ease;
}
.mc-modal__arrow:hover { transform: scale(1.08); }
.mc-modal__arrow:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.mc-modal__arrow--left  { left: 16px; }
.mc-modal__arrow--right { right: 16px; }

.mc-modal__dots {
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 2;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}
.mc-modal__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  background: rgba(247, 245, 238, 0.5);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.mc-modal__dot.is-active { background: var(--background); transform: scale(1.2); }

.mc-modal__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
  padding: 24px 32px 28px;
  word-break: break-word;
}

.mc-modal__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  width: 100%;
}
.mc-modal__title {
  width: 100%;
  font-family: 'Wix Madefor Display', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: normal;
  color: var(--text);
}
.mc-modal__details {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 16px;
}
.mc-modal__age {
  font-family: 'Wix Madefor Display', sans-serif;
  font-weight: 600;
  color: rgba(47, 56, 41, 0.7);
}
.mc-modal__price {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  color: var(--text);
}
.mc-modal__desc {
  width: 100%;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .mc-modal__slides { transition: none; }
}

/* ==========================================================================
   планшетная вариация (Figma node 2038:52, сам фрейм 1180px)
   брейкпоинт растянут до 1366px, чтобы захватить планшеты в альбомной
   ориентации (iPad и подобные — реальная ширина обычно 1024–1366px) —
   срабатывает сама по ширине окна, отдельной страницы или переключателя нет
   ========================================================================== */

@media (max-width: 1366px) {
  /* горизонтальные отступы у большинства секций сужаются со 120 до 96,
     .advantages в макете остаётся на 120 — без изменений */
  .bar        { padding: 12px 96px; }
  .about-us   { padding: 96px; }
  .programms  { padding: 96px; }
  .faq        { padding: 96px; }
  .booking    { padding: 96px; }
  .contacts   { padding: 96px; }

  .bar__menu { gap: 32px; }

  /* карточки мастер-классов меньше: 368 → 296, шрифт заголовка тоже
     меньше по макету (25 → 22), иначе «Пластилинография» переносится */
  .mc-cards          { justify-content: center; }
  .mc-card           { width: 296px; height: 296px; }
  .mc-card__content  { width: 296px; }
  .mc-card__title    { font-size: 22px; }

  /* hero: в планшетном макете (2038:53) картинка специально сдвинута
     намного ниже относительно текста, чем на десктопе (235/1180 против
     148/1440) — так задумано, чтобы кнопка не заезжала на иллюстрацию.
     Десктопные vw-пропорции сюда не подходят, берём планшетные отдельно */
  .hero-bg {
    margin-top: 19.915vw;   /* 235 / 1180 * 100 */
    margin-bottom: 0;        /* на планшете картинка кончается ровно у низа hero, без обрезки */
  }
  .hero-content { top: 12.034vw; }   /* 142 / 1180 * 100 */

  /* фото в блоке записи уже: 552 → 338, высота та же;
     сам блок теперь ограничен своим max-width 988 (в макете задан отдельно
     от десктопных 1200, а не просто занимает всю доступную ширину) */
  .booking-box { max-width: 988px; }
  .booking-img { width: 338px; }

  /* карта у контактов уже: 767 → 548 — отступ вокруг сам держится через inset */
  .map { width: 548px; }

  /* водяной знак в подвале меньше: 270 → 220 */
  .f-watermark { font-size: 220px; }
}

/* ==========================================================================
   мобильная вариация (Figma node 2055:2, фрейм 390px)
   идёт последней, чтобы перекрывать планшетный брейкпоинт выше
   ========================================================================== */

/* десктоп/планшет: обёртки прозрачны для раскладки, бургера нет */
.bar__panel  { display: contents; }
.about-card  { display: contents; }
.bar__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background: var(--primary);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: background-color .2s ease;
}
.bar__toggle span {
  font-weight: 700;
  font-size: 16px;
  line-height: normal;
  color: var(--background);
  white-space: nowrap;
}
.bar__toggle:hover { background: #6b7b61; }
.bar__toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

@media (max-width: 900px), (orientation: portrait) and (max-width: 1024px) {
  :root { --bar-h: 72px; }

  /* ---------- bar + кнопка "меню" ---------- */
  .bar {
    padding: 14px 24px;
    justify-content: space-between;
  }
  .bar__logo { width: 172px; height: 26px; }

  .bar__toggle { display: flex; }

  /* панель разворачивается под баром */
  .bar__panel {
    position: absolute;
    top: 100%;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    padding: 24px;
    background: #f8f4ed;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .bar.is-open .bar__panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  .bar__menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    font-size: 20px;
    text-align: left;
  }
  .bar__menu-item,
  .bar__menu-item--flex,
  .bar__menu-item--min116,
  .bar__menu-item--w69,
  .bar__menu-item--w74 { width: auto; min-width: 0; flex: 0 0 auto; }
  .bar__button { width: 100%; min-width: 0; }

  /* ---------- типографика ---------- */
  .h2         { font-size: 28px; width: 100%; height: auto; }
  .h2--w566   { width: 100%; }
  .h2--h70    { height: auto; }
  .eyebrow    { font-size: 16px; }
  /* надзаголовки переносятся: "МАСТЕР-КЛАССЫ · ПО НАБОРУ ГРУППЫ" с трекингом
     5.12px шире 342 и вылезал за оба края */
  .eyebrow--nowrap { white-space: normal; width: 100%; text-align: center; }
  .section-header,
  .section-header--nowrap { text-align: center; white-space: normal; }

  /* ---------- hero: картинка уходит под текст, а не за него ---------- */
  .hero {
    display: flex;
    flex-direction: column;
    padding-top: 96px;
  }
  .hero-content {
    position: static;
    transform: none;
    order: 1;
    max-width: 342px;
    margin: 0 auto;
    gap: 24px;
  }
  .hero-bg {
    order: 2;
    margin-top: 0;      /* в макете картинка начинается сразу после контента */
    margin-bottom: 0;
  }
  .hero-title { font-size: 30px; }
  .hero-sub   { font-size: 16px; }
  .btn--hero      { width: auto; }
  .btn--hero span { flex: 0 0 auto; font-size: 18px; }

  /* ---------- общие отступы секций ---------- */
  .about-us,
  .programms,
  .advantages,
  .faq,
  .booking,
  .contacts { padding: 64px 24px; }

  /* ---------- о педагоге: фото и текст в одной белой карточке ---------- */
  .about-us { flex-direction: column; gap: 0; }
  .about-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: var(--big_radius);
  }
  .about-photo {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    max-height: none;
  }
  /* в базе кадрирование задано процентами из макета (height: 150.24% со
     сдвигом вверх) — на другом размере контейнера низ фото срезался.
     object-fit кадрирует по центру при любых пропорциях */
  .about-photo img {
    inset: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .bubble-bg { display: none; }   /* баббл заменён карточкой-обёрткой */
  .message {
    width: 100%;
    min-height: 0;
    padding: 0;
  }
  .message-content,
  .text-content { width: 100%; }
  .message-content { gap: 16px; }   /* в макете 16, базовые 48 давали провал под заголовком */
  .message-header .h2 { white-space: normal; font-size: 24px; }
  .quote { width: 100%; }

  /* ---------- программы ---------- */
  .programms { height: auto; gap: 32px; }
  .prog-cards { flex-direction: column; height: auto; gap: 32px; max-width: none; }
  /* в базе у карточки flex: 1 0 0 — в колоночном флексе это обнуляет ВЫСОТУ,
     из-за чего карточки программ пропадали с экрана целиком */
  .prog-card  { flex: 0 0 auto; width: 100%; height: auto; }
  .prog-card__content { padding: 0 24px 24px; gap: 24px; }
  .prog-card__header--left { max-width: none; }
  .prog-card__title { font-size: 20px; height: auto; }
  .prog-card__title--tall { height: auto; }
  .card-content--left { height: auto; }
  .prog-card__desc { max-width: none; }
  .pill p { font-size: 12px; }
  .pill { padding: 5px 10px; }
  .result__item--fixed { height: auto; }
  .prog-card__footer--fixed { height: auto; }
  /* цена 234 + кнопка 156 не помещаются в 294 — в колонку */
  .price-row { flex-direction: column; align-items: stretch; gap: 16px; }
  .price, .price--tall { width: 100%; height: auto; }
  .btn--sm { width: 100%; }

  .mc-cards { flex-direction: column; gap: 24px; max-width: none; }
  .mc-card  { width: 100%; height: 300px; }
  .mc-card__content { width: 100%; }
  .mc-card__title { font-size: 18px; }

  /* ---------- преимущества ---------- */
  .adv-content { flex-direction: column; gap: 32px; max-width: none; }
  .adv-item    { flex: 0 0 auto; width: 100%; }   /* тот же flex: 1 0 0, что и у карточек */

  /* ---------- faq ---------- */
  .faq-content { min-width: 0; }
  .faq-item summary { gap: 16px; }
  /* в базе у вопроса flex-shrink: 0 — он не давал тексту сжиматься,
     и строка вылезала за правый край */
  .faq-item__q { flex-shrink: 1; min-width: 0; white-space: normal; font-size: 18px; }
  .faq-item__a { font-size: 16px; padding-right: 0; }

  /* ---------- запись ---------- */
  .booking-box {
    flex-direction: column;
    gap: 24px;
    max-width: none;
    padding: 16px;
  }
  .booking-img  { display: none; }   /* в мобильном макете фото удалено */
  .booking-card { width: 100%; padding: 24px; gap: 24px; }
  /* фото на мобиле скрыто, поэтому подгонять высоту не под что */
  .booking-done { min-height: 0; padding: 32px 8px; gap: 16px; }
  .booking-done__icon { width: 60px; height: 60px; }
  .booking-done__title { font-size: 24px; }
  .field__box input { font-size: 18px; }
  .btn--full span { font-size: 18px; }

  /* ---------- контакты ---------- */
  .contacts-inner { max-width: none; }
  .contacts-row   { flex-direction: column; gap: 32px; }
  .contacts-list  { width: 100%; }
  .contact-text,
  .contact-text--wide { width: auto; }
  .contact-text--wide .contact-text__label { width: auto; }
  .contact-text__label { font-size: 16px; }
  /* в базе стоит nowrap — длинные значения вылезали за край.
     Разрешаем перенос, в том числе внутри длинного слова */
  .contact-text__value {
    font-size: 18px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .map { width: 100%; height: 240px; }

  /* ---------- подвал ---------- */
  .footer { padding: 64px 0 8px; gap: 32px; }
  .footer-top { width: 100%; padding: 0 24px; }
  .f-content  { width: 100%; gap: 24px; }
  .f-about    { white-space: normal; font-size: 16px; text-align: center; }
  .f-contacts { flex-direction: column; width: 100%; gap: 20px; }
  .f-col,
  .f-col:first-child { flex: 0 0 auto; width: 100%; min-width: 0; }
  .f-divider  { width: 100%; height: 1px; }
  .f-watermark { font-size: 40px; line-height: 48px; }
  .copyright {
    flex-direction: column;
    gap: 8px;
    padding: 0 24px;
    font-size: 14px;
    text-align: center;
    white-space: normal;
  }

  /* ---------- модалка мастер-класса ---------- */
  .mc-modal { width: 100%; }
  .mc-modal__photo { height: 260px; }
  .mc-modal__arrow { top: 108px; width: 40px; height: 40px; }
  .mc-modal__content { padding: 20px 24px 24px; }
}

/* ==========================================================================
   privacy.html — страница политики: только текст, поля и те же токены
   ========================================================================== */

.legal {
  max-width: 820px;
  margin: 0 auto;
  padding: 96px 24px 120px;
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
}
.legal__back {
  display: inline-block;
  margin-bottom: 40px;
  font-weight: 600;
  color: var(--primary);
  transition: color .18s ease;
}
.legal__back:hover { color: var(--accent); }
.legal h1 {
  margin: 0 0 8px;
  font-family: 'Wix Madefor Display', sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 1.2;
}
.legal h2 {
  margin: 40px 0 12px;
  font-family: 'Wix Madefor Display', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
}
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal strong { font-weight: 700; }
.legal a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-position: from-font;
  overflow-wrap: anywhere;   /* длинные адреса не рвут страницу вширь */
}
.legal a:hover { color: var(--accent); }

@media (max-width: 900px), (orientation: portrait) and (max-width: 1024px) {
  .legal { padding: 64px 20px 80px; line-height: 1.6; }
  .legal h1 { font-size: 26px; }
  .legal h2 { font-size: 19px; margin-top: 32px; }
  .legal__back { margin-bottom: 28px; }
}