/* база из макета */

  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; background: #FAF7F1; color: #17130F; font-family: "Golos Text", system-ui, sans-serif; font-size: 19px; line-height: 1.6; text-wrap: pretty; overflow-x: hidden; }
  * { box-sizing: border-box; }
  a { color: #17130F; text-decoration: none; }
  a:hover { color: #A8482A; }
  h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.015em; }
  p { margin: 0; }
  summary::-webkit-details-marker { display: none; }
  summary { list-style: none; cursor: pointer; }
  details[open] > summary > span[data-plus] { transform: rotate(45deg); }
  input, select, textarea, button { font: inherit; color: inherit; }
  ::selection { background: #E8D9C6; }


/* состояния наведения и фокуса, переведённые из холста */
.gh-1:hover{color: #17130F}
.gh-2:hover{color: #17130F}
.gh-3:hover{color: #17130F}
.gh-4:hover{background: #2A231C}
.gh-5:hover{background: #2A231C}
.gh-6:hover{background: rgba(23,19,15,0.04); border-color: rgba(23,19,15,0.4)}
.gh-7:hover{transform: translateY(-6px)}
.gh-8:hover{background: rgba(23,19,15,0.05); border-color: rgba(23,19,15,0.38)}
.gh-9:hover{transform: translateY(-6px)}
.gh-10:hover{background: rgba(23,19,15,0.05); border-color: rgba(23,19,15,0.38)}
.gh-11:hover{transform: translateY(-6px)}
.gh-12:hover{background: rgba(23,19,15,0.05); border-color: rgba(23,19,15,0.38)}
.gh-13:hover{background: #2A231C}
.gh-14:hover{background: #2A231C}
.gh-15:hover{background: #2A231C}
.gh-16:hover{background: rgba(250,247,241,0.08); color: #FAF7F1}
.gh-17:hover{background: #FFFFFF}
.gh-18:active{transform: scale(0.97)}
.gh-19:active{transform: scale(0.98)}
.gh-20:active{transform: scale(0.98)}
.gh-21:active{transform: scale(0.98)}
.gh-22:active{transform: scale(0.98)}
.gh-23:active{transform: scale(0.98)}
.gh-24:active{transform: scale(0.98)}
.gh-25:focus-visible{border-color: rgba(250,247,241,0.5)}
.gh-26:focus-visible{border-color: rgba(250,247,241,0.5)}
.gh-27:hover{color: #17130F}
.gh-28:hover{color: #17130F}
.gh-29:hover{background: #2A231C}
.gh-30:hover{background: rgba(23,19,15,0.05)}
.gh-31:hover{background: rgba(23,19,15,0.05)}
.gh-32:hover{background: rgba(23,19,15,0.06)}
.gh-33:hover{background: rgba(23,19,15,0.05)}
.gh-34:hover{background: #2A231C}
.gh-35:hover{background: rgba(23,19,15,0.04)}
.gh-36:active{transform: scale(0.97)}
.gh-37:active{transform: scale(0.98)}
.gh-38:active{transform: scale(0.98)}
.gh-39:active{transform: scale(0.98)}
.gh-40:active{transform: scale(0.98)}
.gh-41:hover{color: #17130F}
.gh-42:hover{color: #17130F}
.gh-43:hover{background: #2A231C}
.gh-44:hover{transform: translateY(-4px)}
.gh-45:hover{background: #2A231C}
.gh-46:hover{transform: translateY(-4px)}
.gh-47:hover{background: rgba(23,19,15,0.05)}
.gh-48:hover{transform: translateY(-4px)}
.gh-49:hover{background: rgba(23,19,15,0.05)}
.gh-50:hover{color: #17130F}
.gh-51:hover{background: rgba(250,247,241,0.08); color: #FAF7F1}
.gh-52:active{transform: scale(0.97)}
.gh-53:active{transform: scale(0.98)}
.gh-54:active{transform: scale(0.98)}
.gh-55:hover{color: #17130F}
.gh-56:hover{color: #17130F}
.gh-57:hover{color: #17130F}
.gh-58:hover{background: #2A231C}
.gh-59:hover{background: #2A231C}
.gh-60:hover{background: rgba(23,19,15,0.04)}
.gh-61:hover{background: rgba(250,247,241,0.08); color: #FAF7F1}
.gh-62:hover{background: #FFFFFF}
.gh-63:active{transform: scale(0.97)}
.gh-64:active{transform: scale(0.98)}
.gh-65:active{transform: scale(0.98)}
.gh-66:focus-visible{border-color: rgba(250,247,241,0.5)}
.gh-67:focus-visible{border-color: rgba(250,247,241,0.5)}
.gh-68:focus-visible{border-color: rgba(250,247,241,0.5)}
.gh-69:hover{color: #17130F}
.gh-70:hover{color: #17130F}
.gh-71:hover{background: #2A231C}
.gh-72:hover{background: #2A231C}
.gh-73:hover{background: rgba(23,19,15,0.04)}
.gh-74:hover{transform: translateY(-6px)}
.gh-75:hover{background: rgba(250,247,241,0.08); color: #FAF7F1}
.gh-76:hover{background: #FFFFFF}
.gh-77:active{transform: scale(0.97)}
.gh-78:active{transform: scale(0.98)}
.gh-79:active{transform: scale(0.98)}
.gh-80:focus-visible{border-color: rgba(250,247,241,0.5)}
.gh-81:focus-visible{border-color: rgba(250,247,241,0.5)}
.gh-82:focus-visible{border-color: rgba(250,247,241,0.5)}
.gh-83:focus-visible{border-color: rgba(250,247,241,0.5)}

/* появление блоков при прокрутке */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(18px);
    transition: opacity 900ms cubic-bezier(0.32,0.72,0,1), transform 900ms cubic-bezier(0.32,0.72,0,1); }
  [data-reveal].gh-in { opacity: 1; transform: none; }
}
[data-reveal].gh-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------
   Мобильное меню.

   Пять элементов в «таблетке» не помещаются в узкий экран и
   переносятся на вторую строку. На мобильном разделы уезжают в
   выпадающее меню под кнопкой-бургером, а в шапке остаются только
   бургер и кнопка «Записаться».

   Разметку меню создаёт site.js, поэтому правила спрятать ссылки
   действуют только когда на <html> появился класс .gh-js. Если
   скрипт не отработал, ссылки остаются на месте — навигация
   не пропадает.
   --------------------------------------------------------------- */
.gh-burger { display: none; }

@media (max-width: 760px) {
  header nav {
    flex-wrap: nowrap !important;
    max-width: 100%;
    gap: 10px !important;
    padding: 8px 8px 8px 8px !important;
    /* На телефоне «стекло» ненадёжно: если размытие не поддержано,
       текст страницы читается прямо сквозь шапку. Делаем фон плотным. */
    background: #F4F0E8 !important;
    border-color: rgba(23,19,15,0.12) !important;
  }
  header nav > a { white-space: nowrap; flex: 0 0 auto; }

  /* логотип и разделитель убираем — их роль берёт на себя H1 сразу под шапкой */
  header nav > a:first-child,
  header nav > span:first-of-type { display: none !important; }

  /* кнопка призыва — компактнее, но по-прежнему заметная */
  header nav > a:last-child { font-size: 15px !important; padding: 9px 9px 9px 18px !important; }
  header nav > a:last-child > span { width: 28px !important; height: 28px !important; }

  /* ссылки разделов, переехавшие в выпадающее меню */
  .gh-js header nav > a.gh-moved { display: none !important; }

  .gh-js .gh-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(23,19,15,0.14);
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .gh-js .gh-burger:active { transform: scale(0.96); }

  .gh-burger i {
    display: block;
    position: relative;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #17130F;
    transition: background 200ms;
  }
  .gh-burger i::before,
  .gh-burger i::after {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #17130F;
    transition: transform 260ms cubic-bezier(0.32,0.72,0,1);
  }
  .gh-burger i::before { top: -6px; }
  .gh-burger i::after  { top: 6px; }

  .gh-burger[aria-expanded="true"] i { background: transparent; }
  .gh-burger[aria-expanded="true"] i::before { transform: translateY(6px) rotate(45deg); }
  .gh-burger[aria-expanded="true"] i::after  { transform: translateY(-6px) rotate(-45deg); }

  .gh-mobile-menu {
    pointer-events: auto;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    background: #F4F0E8;
    border: 1px solid rgba(23,19,15,0.12);
    box-shadow: 0 24px 60px -30px rgba(23,19,15,0.45);
    border-radius: 26px;
    padding: 10px;
  }
  .gh-mobile-menu.gh-open { display: flex; }
  .gh-mobile-menu a {
    display: block;
    padding: 13px 16px;
    border-radius: 18px;
    font-size: 18px;
    color: #17130F;
  }
  .gh-mobile-menu a:active { background: rgba(23,19,15,0.05); }
}

/* На десктопе выпадающее меню не показываем никогда */
@media (min-width: 761px) {
  .gh-mobile-menu { display: none !important; }
}

/* ---------------------------------------------------------------
   Сетки на узких экранах.
   В макете колонки заданы в пикселях прямо в атрибуте style, поэтому
   на телефоне часть блоков оказывается шире экрана. Правила ниже
   ловят их по содержимому style и распрямляют в одну колонку.
   --------------------------------------------------------------- */
@media (max-width: 700px) {
  /* строки «подпись — содержание»: подпись встаёт над текстом */
  [style*="minmax("][style*="1fr"]:not([style*="repeat("]) {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* карточки: минимальная колонка не может быть шире экрана */
  [style*="repeat(auto-fit"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
  }
}

/* Таблица сравнения шире телефона — даём ей прокрутку внутри своей рамки */
.gh-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.gh-scroll-x > table { min-width: 560px; }

/* ---------------------------------------------------------------
   Встроенный плеер YouTube.
   Показываем обложку с кнопкой, а сам iframe подгружаем только по
   клику: страница не тянет скрипты YouTube и не ставит их куки до
   того, как человек решил смотреть.
   --------------------------------------------------------------- */
.gh-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  overflow: hidden;
  background: #17130F;
  box-shadow: 0 24px 60px -34px rgba(23,19,15,0.55);
}
.gh-video-play {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gh-video-play img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.32,0.72,0,1), opacity 400ms;
}
.gh-video-play:hover img { transform: scale(1.03); opacity: 0.92; }

.gh-video-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: rgba(250,247,241,0.92);
  color: #17130F;
  padding-left: 4px; /* оптическая компенсация треугольника */
  transition: transform 500ms cubic-bezier(0.32,0.72,0,1), background 300ms;
}
.gh-video-play:hover .gh-video-btn { transform: translate(-50%, -50%) scale(1.07); background: #FAF7F1; }
.gh-video-play:active .gh-video-btn { transform: translate(-50%, -50%) scale(0.97); }
.gh-video-play:focus-visible { outline: 2px solid #A8482A; outline-offset: 3px; }

.gh-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 700px) {
  .gh-video { border-radius: 20px; }
  .gh-video-btn { width: 62px; height: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .gh-video-play img,
  .gh-video-btn { transition: none; }
  .gh-video-play:hover img { transform: none; }
}