/* ==========================================================
   ЦВЕТА И ШРИФТЫ САЙТА
   Здесь хранятся общие переменные. Изменение значения
   автоматически обновляет соответствующий цвет или шрифт
   во всех разделах сайта.
   ========================================================== */
:root {
  --ink: #263129;
  --paper: #f2f0e9;
  --cream: #ded9ca;
  --sage: #899384;
  --deep: #26342d;
  --warm: #b77755;
  --line: rgba(38,49,41,.22);
  --serif: 'Prata',serif;
  --sans: 'Manrope',sans-serif
}

/* Базовый расчёт размеров: отступы и рамки входят в ширину элемента. */
* {
  box-sizing: border-box
}

/* Плавная прокрутка к разделам при нажатии на ссылки меню. */
html {
  scroll-behavior: smooth
}

/* Основное оформление страницы: фон, цвет и параметры обычного текста. */
body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6
}

/* Плавающая запись и форма обратного звонка. */
.booking-widget{position:fixed;right:clamp(18px,3vw,44px);bottom:clamp(18px,3vw,36px);z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.booking-toggle,.booking-callback,.callback-form button{border:0;font:600 .78rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;cursor:pointer}
.booking-toggle{min-width:148px;padding:18px 24px;border-radius:999px;color:#fff;background:var(--warm);box-shadow:0 14px 36px rgba(38,49,41,.25);transition:transform .25s,background .25s,box-shadow .25s}
.booking-toggle:hover,.booking-toggle[aria-expanded="true"]{transform:translateY(-2px);background:var(--deep);box-shadow:0 18px 42px rgba(38,49,41,.32)}
.booking-panel{width:min(310px,calc(100vw - 36px));padding:22px;border:1px solid rgba(255,255,255,.45);border-radius:22px;color:var(--ink);background:rgba(242,240,233,.9);backdrop-filter:blur(18px);box-shadow:0 18px 50px rgba(38,49,41,.22);opacity:0;visibility:hidden;transform:translateY(12px) scale(.97);transform-origin:right bottom;transition:opacity .25s,transform .25s,visibility .25s}
.booking-panel.is-open{opacity:1;visibility:visible;transform:none}
.booking-panel>p{margin:0 0 5px;color:rgba(38,49,41,.62);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase}
.booking-phone{display:block;margin-bottom:18px;font-family:var(--serif);font-size:1.45rem}
.booking-callback{width:100%;padding:15px 18px;border-radius:999px;color:#fff;background:var(--deep)}
.callback-dialog{width:min(620px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:clamp(28px,5vw,52px);border:0;border-radius:28px;color:var(--ink);background:rgba(242,240,233,.97);box-shadow:0 30px 90px rgba(15,18,16,.38)}
.callback-dialog::backdrop{background:rgba(20,25,22,.58);backdrop-filter:blur(8px)}
.callback-close{position:absolute;top:16px;right:18px;width:42px;height:42px;border:0;border-radius:50%;color:var(--ink);background:rgba(38,49,41,.08);font-size:1.6rem;cursor:pointer}
.callback-heading>p:first-child{margin-bottom:12px;color:var(--warm);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.callback-heading h2{margin-bottom:16px;font-size:clamp(2rem,5vw,3.4rem)}
.callback-form{display:grid;gap:16px;margin-top:28px}
.callback-form label{display:grid;gap:7px;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase}
.callback-form small{opacity:.55}
.callback-hint{margin-top:4px;color:rgba(38,49,41,.58);font-size:.78rem;letter-spacing:0;text-transform:none}
.callback-examples{display:grid;gap:3px;margin:0 0 2px;padding-left:20px;color:rgba(38,49,41,.68);font-size:.82rem;letter-spacing:0;text-transform:none}
.callback-form input,.callback-form textarea{width:100%;padding:14px 0;border:0;border-bottom:1px solid rgba(38,49,41,.28);outline:0;color:var(--ink);background:transparent;font:400 1rem/1.5 var(--sans);resize:vertical}
.callback-form input:focus,.callback-form textarea:focus{border-color:var(--warm)}
.callback-form button{justify-self:start;margin-top:8px;padding:17px 24px;border-radius:999px;color:#fff;background:var(--warm)}
.callback-status{min-height:1.5em;margin:0;font-size:.85rem}
@media(max-width:600px){.booking-toggle{min-width:132px;padding:16px 20px}.callback-dialog{padding:48px 24px 28px;border-radius:22px}}

/* ==========================================================
   ЕДИНЫЙ ЖИВОЙ ФОН САЙТА
   Размытая фотография зала остаётся неподвижной относительно окна,
   а её положение мягко меняется при переходе между разделами.
   ========================================================== */
html {
  background: #73796f;
}

body {
  isolation: isolate;
  --site-bg-x: 0px;
  --site-bg-y: 0px;
  --site-bg-scale: 1.13;
}

.site-background {
  position: fixed;
  z-index: -1;
  inset: -7vh -7vw;
  background: url("assets/background/studio-hall.webp") center/cover no-repeat;
  filter: blur(22px) saturate(.82) brightness(.88);
  transform: translate3d(var(--site-bg-x),var(--site-bg-y),0) scale(var(--site-bg-scale));
  transition: transform 1.25s cubic-bezier(.22,.75,.24,1),filter .7s ease;
  will-change: transform;
  pointer-events: none;
}

main > section {
  background: rgba(242,240,233,.48) !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

main > .trainers {
  background: rgba(15,18,16,.16) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.trainers::before,
.trainers::after {
  display: none;
}

.footer {
  background: rgba(38,52,45,.72) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.footer-socials {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-socials a {
  width: max-content;
  transition: color .2s ease,transform .2s ease;
}

.footer-socials a:hover {
  color: #e0a17b;
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .site-background {
    transition: none;
    transform: scale(1.13);
  }
}

/* Общие стили ссылок и заголовков. */
a {
  color: inherit;
  text-decoration: none
}

h1,h2,h3,p {
  margin-top: 0
}

h1,h2 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08
}

h1 {
  font-size: clamp(3rem,6.6vw,7rem);
  letter-spacing: -.04em;
  margin-bottom: 2rem
}

h2 {
  font-size: clamp(2.25rem,4.3vw,4.8rem);
  letter-spacing: -.035em
}

h1 em,h2 em {
  font-weight: 400;
  color: var(--warm)
}

/* Раздел «О клубе»: два зала в одном доме. */
.studio-about {
  padding: 9vw 4vw;
}

.studio-about-heading {
  width: 100%;
}

.studio-about-heading h2 {
  width: 100%;
  margin: 0;
  font-size: clamp(3.4rem,7.4vw,8.4rem);
  line-height: .9;
}

.studio-halls {
  display: grid;
  grid-template-columns: 1.18fr .91fr .91fr;
  gap: clamp(18px,2vw,34px);
  margin-top: clamp(44px,6vw,90px);
}

.studio-address {
  display: grid;
  grid-template-columns: .55fr 1.05fr auto;
  gap: 24px;
  align-items: center;
  margin-top: clamp(34px,4vw,62px);
  padding: 24px 0;
  border-top: 1px solid rgba(38,49,41,.22);
  border-bottom: 1px solid rgba(38,49,41,.22);
}

.studio-address span {
  color: var(--warm);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.studio-address strong {
  font-family: var(--serif);
  font-size: clamp(1.2rem,2vw,1.8rem);
  font-weight: 400;
}

.studio-address em {
  font-size: .78rem;
  font-style: normal;
}

.studio-overview {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(28px,5vw,76px);
  align-items: start;
  margin-top: clamp(44px,6vw,90px);
}

.studio-overview-photo {
  height: min(62vw,650px);
  overflow: hidden;
  border-radius: 30px;
}

.studio-overview-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-overview-info > p {
  max-width: 500px;
  font-size: clamp(1rem,1.4vw,1.25rem);
}

.studio-overview .studio-address {
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 28px 0;
}

.studio-more {
  justify-self: start;
  color: var(--ink);
  font: 400 1rem/1.4 var(--sans);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
  cursor: pointer;
  transition: color .25s ease;
}

.studio-more:hover {
  color: var(--warm);
}

.studio-dialog {
  width: min(1440px,calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: clamp(34px,5vw,72px);
  border: 0;
  border-radius: 30px;
  color: var(--ink);
  background: rgba(242,240,233,.97);
  box-shadow: 0 30px 90px rgba(15,18,16,.4);
}

.studio-dialog::backdrop {
  background: rgba(20,25,22,.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.studio-dialog-close {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: rgba(38,49,41,.08);
  font-size: 1.65rem;
  cursor: pointer;
}

.studio-dialog-heading > p:first-child {
  margin-bottom: 10px;
  color: var(--warm);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.studio-dialog-heading h2 {
  margin-bottom: 14px;
}

.studio-dialog .studio-halls {
  margin-top: clamp(32px,4vw,60px);
}

.studio-details {
  margin-top: clamp(56px,7vw,100px);
  padding-top: clamp(38px,5vw,70px);
  border-top: 1px solid rgba(38,49,41,.2);
}

.studio-details-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .42fr);
  column-gap: clamp(32px, 6vw, 100px);
  align-items: start;
  margin-bottom: clamp(28px,4vw,52px);
}

.studio-details-title {
  grid-column: 1;
}

.studio-details-heading .studio-details-title > p {
  margin-bottom: 6px;
  color: var(--warm);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.studio-details-title h2 {
  margin-bottom: 0;
}

.studio-details-heading > p {
  grid-column: 2;
  align-self: end;
  max-width: 360px;
}

.studio-details-heading h2,
.studio-details-heading p {
  margin-bottom: 0;
}

.studio-details-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px,3vw,42px);
}

.studio-details-grid figure {
  margin: 0;
}

.studio-details-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 24px;
}

.studio-details-grid figcaption {
  padding: 18px 4px 0;
}

.studio-details-grid span {
  display: block;
  margin-bottom: 7px;
  font-family: var(--serif);
  font-size: clamp(1.25rem,2vw,1.8rem);
}

.studio-details-grid p {
  margin: 0;
  color: rgba(38,49,41,.68);
}

.studio-hall {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-radius: 30px;
  color: #fff;
}

.studio-hall img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}

.studio-hall-panorama img {
  object-position: 15% center;
}

.studio-hall:hover img {
  transform: scale(1.025);
}

.studio-hall-gallery {
  position: absolute;
  inset: 0;
}

.studio-hall-gallery img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .45s ease, transform .8s ease;
}

.studio-hall-gallery img.is-active {
  opacity: 1;
}

.studio-hall-gallery-next {
  position: absolute;
  z-index: 3;
  top: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px;
  color: #fff;
  background: rgba(20,27,23,.62);
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.studio-hall-gallery-next span {
  margin: 0;
  color: inherit;
  font-size: .7rem;
  letter-spacing: .08em;
}

.studio-hall-gallery-next b {
  font-size: 1rem;
  font-weight: 400;
}

.studio-hall::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,transparent 38%,rgba(19,25,21,.82));
}

.studio-hall > div:not(.studio-hall-gallery) {
  position: absolute;
  z-index: 1;
  right: clamp(22px,3vw,44px);
  bottom: clamp(24px,3vw,42px);
  left: clamp(22px,3vw,44px);
}

.studio-hall > div:not(.studio-hall-gallery) span {
  display: block;
  margin-bottom: 10px;
  color: #e0a17b;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.studio-hall h3 {
  max-width: 600px;
  margin-bottom: 12px;
  font-family: var(--serif);
  font-size: clamp(1.55rem,2.4vw,2.8rem);
  font-weight: 400;
  line-height: 1.18;
}

.studio-hall p {
  max-width: 560px;
  margin: 0;
  color: rgba(255,255,255,.82);
}

@media (max-width: 1100px) and (min-width: 801px) {
  .studio-halls {
    grid-template-columns: 1fr 1fr;
  }

  .studio-hall-main {
    grid-column: 1 / -1;
  }

  .studio-hall {
    min-height: 460px;
  }
}

@media (max-width: 800px) {
  .studio-halls {
    grid-template-columns: 1fr;
  }

  .studio-hall {
    min-height: 470px;
    border-radius: 24px;
  }

  .studio-hall-main {
    grid-column: auto;
  }

  .studio-overview {
    grid-template-columns: 1fr;
  }

  .studio-overview-photo {
    height: 62vh;
    border-radius: 24px;
  }

  .studio-dialog {
    padding: 54px 18px 24px;
    border-radius: 22px;
  }

  .studio-details-heading,
  .studio-details-grid {
    grid-template-columns: 1fr;
  }

  .studio-details-heading {
    gap: 0;
    align-items: start;
  }

  .studio-details-title,
  .studio-details-heading > p {
    grid-column: 1;
  }

  .studio-details-heading > p {
    margin-top: 12px;
  }

  .studio-address {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ==========================================================
   ШАПКА САЙТА
   Логотип, основное меню, телефон и мобильная кнопка «Меню».
   ========================================================== */
.header {
  height: 92px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 4vw;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(242,240,233,.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: box-shadow .25s ease,background .25s ease
}

.header.is-scrolled {
  background: rgba(242,240,233,.97);
  box-shadow: 0 8px 30px rgba(38,49,41,.08)
}

.logo {
  font-family: var(--serif);
  font-size: 1.55rem;
  line-height: .85;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .8rem;
  width: max-content
}

.brand-mark {
  display: block;
  width: 37px;
  height: 52px;
  object-fit: contain;
  flex: 0 0 auto
}

.logo-copy {
  display: flex;
  flex-direction: column
}

.logo-copy small {
  font-family: var(--sans);
  font-size: .52rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 8px;
  margin-left: 4px
}

.logo-light .brand-mark {
  filter: invert(1)
}

.nav {
  display: flex;
  gap: 2rem;
  font-size: .82rem
}

.nav a,.header-phone {
  transition: opacity .2s,color .2s
}

.nav a:hover,.header-phone:hover {
  opacity: .55
}

.nav a {
  position: relative;
  padding: .55rem 0
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: .18rem;
  height: 1px;
  background: var(--warm);
  transition: right .28s ease
}

.nav a.is-active {
  color: var(--warm)
}

.nav a.is-active::after {
  right: 0
}

.header-phone {
  justify-self: end;
  font-weight: 600;
  font-size: .82rem
}

.menu-button {
  display: none
}

/* ==========================================================
   ПЕРВЫЙ ЭКРАН
   Главный заголовок, вводный текст, кнопки и фотография.
   ========================================================== */
.hero {
  min-height: calc(100vh - 92px);
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  grid-template-rows: 1fr auto;
  padding: 5vw 4vw 2.5vw;
  gap: 2rem 4vw
}

.hero-copy {
  align-self: center;
  max-width: 980px
}

.eyebrow,.section-number {
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: .7rem;
  font-weight: 600;
  margin-bottom: 2rem
}

.hero-lead {
  font-size: clamp(1rem,1.4vw,1.3rem);
  max-width: 620px
}

.hero-copy h1 {
  margin-bottom: 12px;
  font-size: clamp(4.6rem,10vw,10rem);
  line-height: .9;
}

.hero-kicker {
  max-width: 760px;
  margin-bottom: 24px;
  font-family: var(--serif);
  font-size: clamp(1.65rem,3vw,3.4rem);
  line-height: 1.15;
}

.hero-kicker em {
  color: var(--warm);
  font-style: normal;
}

.hero-contacts {
  display: grid;
  grid-template-columns: repeat(2,minmax(180px,1fr));
  max-width: 690px;
  margin-top: 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.hero-contacts a {
  display: grid;
  gap: 4px;
  padding: 18px 18px 18px 0;
}

.hero-contacts a + a {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}

.hero-contacts span {
  color: var(--warm);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero-contacts strong {
  font-size: clamp(.9rem,1.15vw,1.05rem);
  font-weight: 500;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 2.2rem
}

.button {
  border: 0;
  background: var(--deep);
  color: #fff;
  padding: 1rem 1.5rem;
  font: 600 .82rem var(--sans);
  cursor: pointer;
  display: inline-block;
  transition: transform .2s,background .2s
}

.button:hover {
  transform: translateY(-2px);
  background: var(--warm)
}

.text-link {
  font-size: .85rem;
  border-bottom: 1px solid var(--ink);
  padding: .5rem 0
}

.text-link span {
  margin-left: 1rem
}

.hero-visual,.founder-visual,.audience-image {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg,#69796d,#b1ad9e 52%,#5b685e);
  min-height: 520px
}

.hero-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(20,25,22,.04),rgba(20,25,22,.3));
  pointer-events: none;
}

.hero-visual:before,.founder-visual:before,.audience-image:before {
  content: "";
  position: absolute;
  inset: 14% 20% -10%;
  border-radius: 50% 50% 0 0;
  background: rgba(242,240,233,.18);
  filter: blur(2px)
}

.photo-note {
  position: absolute;
  bottom: 1.3rem;
  left: 1.3rem;
  right: 1.3rem;
  padding: 1rem;
  background: rgba(242,240,233,.88);
  font-size: .72rem
}

.visual-word {
  position: absolute;
  z-index: 2;
  right: -.4rem;
  top: 7%;
  font: 400 clamp(3rem,5.5vw,6rem) var(--serif);
  color: rgba(255,255,255,.45);
  writing-mode: vertical-rl
}

.hero-aside {
  grid-column: 1/-1;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 1.5rem;
  padding-top: 1rem;
  font-size: .82rem
}

.hero-aside span {
  color: var(--warm)
}

.hero-aside p {
  max-width: 410px;
  margin: 0
}

/* ==========================================================
   БЛОК «О МЕТОДЕ»
   Описание подхода и три основных принципа работы клуба.
   ========================================================== */
.intro {
  padding: 9vw 4vw;
  background: #e4e2d8
}

.intro-main {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 7vw;
  align-items: end
}

.intro-main p {
  font-size: 1.08rem;
  margin-bottom: 1.2rem
}

/* Акцент во фразе «Это про качество жизни»: прямое начертание и высокий контраст. */
.intro-main h2 em {
  color: var(--ink);
  font-style: normal;
  font-weight: 500
}

.principles {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0;
  margin-top: 7vw;
  border-top: 1px solid var(--line)
}

.principle {
  padding: 2rem 3vw 0 0;
  border-right: 1px solid var(--line);
  min-height: 230px
}

.principle:not(:first-child) {
  padding-left: 3vw
}

.principle:last-child {
  border: 0
}

.principle span {
  font-size: .7rem;
  color: var(--warm)
}

.principle h3 {
  font: 400 1.25rem var(--serif);
  margin-top: 2rem
}

.principle p {
  font-size: .85rem;
  max-width: 300px
}

/* ==========================================================
   БЛОК «ДЛЯ КОГО»
   Фотография занятия, список показаний и успокаивающий текст.
   ========================================================== */
.audience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 760px
}

.audience-image {
  min-height: 760px;
  background: linear-gradient(35deg,#4a544e,#8f9488 55%,#363c38)
}

.audience-image span,.founder-visual span {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  color: white;
  font: 400 1.2rem var(--serif)
}

.audience-copy {
  padding: 9vw 8vw;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center
}

.audience-copy h2 {
  font-size: clamp(2.3rem,3.6vw,4rem)
}

.audience-copy ul {
  list-style: none;
  padding: 0;
  margin: 2rem 0
}

.audience-copy li {
  border-top: 1px solid var(--line);
  padding: .85rem 0;
  font-size: .9rem
}

.audience-copy li:before {
  content: "—";
  color: var(--warm);
  margin-right: 1rem
}

.reassurance {
  background: var(--cream);
  padding: 1.5rem;
  font: 400 1.1rem var(--serif)
}

/* ==========================================================
   БЛОК ОБ ОЛЬГЕ ВЕРЛАН
   Текст об основателе, профессиональные факты и фотография.
   ========================================================== */
.founder {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  background: var(--sage);
  padding: 8vw 8vw;
  gap: 9vw;
  align-items: center
}

.founder-copy {
  max-width: 600px
}

.founder-copy h2 {
  margin-bottom: 1rem
}

.founder-role {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 3rem
}

.founder-copy>p:not(.section-number):not(.founder-role) {
  font: 400 1.3rem/1.6 var(--serif)
}

.founder dl {
  margin-top: 3rem;
  border-top: 1px solid rgba(38,49,41,.35)
}

.founder dl div {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(38,49,41,.35)
}

.founder dt {
  font: 400 1.05rem var(--serif)
}

.founder dd {
  margin: 0;
  font-size: .78rem
}

.founder-visual {
  min-height: 650px;
  background: linear-gradient(150deg,#b9b2a0,#687467 70%)
}

/* ==========================================================
   ФОРМАТЫ ЗАНЯТИЙ
   Заголовок раздела и базовое оформление списка форматов.
   Детальные стили прайс-листа находятся в prices.css.
   ========================================================== */
.classes {
  padding: 9vw 4vw
}

.classes-heading {
  display: grid;
  grid-template-columns: .45fr 1.2fr .55fr;
  gap: 4vw;
  align-items: start
}

.classes-heading h2 {
  font-size: clamp(2.3rem,3.7vw,4.2rem)
}

.classes-heading>p:last-child {
  font-size: .85rem
}

/* Важная информация о первой тренировке. */
.first-session-note {
  display: grid;
  grid-template-columns: minmax(150px,.55fr) minmax(280px,1.45fr);
  gap: clamp(28px,6vw,90px);
  align-items: start;
  margin-top: clamp(42px,6vw,86px);
  padding: clamp(28px,4vw,54px);
  border: 1px solid rgba(38,49,41,.2);
  border-radius: 28px;
  background: rgba(242,240,233,.62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.first-session-note > span {
  color: var(--warm);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.first-session-note h3 {
  max-width: 720px;
  margin-bottom: 16px;
  font-family: var(--serif);
  font-size: clamp(1.7rem,3vw,3rem);
  font-weight: 400;
  line-height: 1.18;
}

.first-session-note p {
  max-width: 720px;
  margin: 0;
}

@media (min-width: 561px) and (max-width: 900px) {
  .footer > .footer-documents {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 700px) {
  .first-session-note {
    grid-template-columns: 1fr;
    gap: 18px;
    border-radius: 22px;
  }
}

.class-list {
  margin-top: 5vw;
  border-top: 1px solid var(--line)
}

.class-card {
  display: grid;
  grid-template-columns: .15fr 1fr .3fr;
  gap: 3vw;
  align-items: start;
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--line)
}

.class-card>span {
  color: var(--warm);
  font-size: .72rem
}

.class-card h3 {
  font: 400 1.5rem var(--serif);
  margin-bottom: .6rem
}

.class-card p {
  max-width: 680px;
  font-size: .85rem;
  margin: 0
}

.class-card strong {
  justify-self: end;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em
}

.price-note {
  text-align: right;
  font-size: .72rem;
  margin-top: 1rem
}

.price-note a {
  color: inherit;
  font: inherit;
  text-decoration: none;
}

/* ==========================================================
   ФОРМА ЗАПИСИ
   Текст приглашения, поля формы, согласие и кнопка отправки.
   ========================================================== */
.contact {
  background: var(--cream);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10vw;
  padding: 9vw 8vw
}

.contact-copy h2 {
  font-size: clamp(2.3rem,3.8vw,4.4rem)
}

.contact-copy>p:last-child {
  max-width: 500px
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem
}

.contact-form label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em
}

.contact-form input,.contact-form textarea {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  padding: .8rem 0;
  font: 400 1rem var(--sans);
  border-radius: 0;
  outline: none
}

.contact-form input:focus,.contact-form textarea:focus {
  border-color: var(--warm)
}

.contact-form small {
  text-transform: none;
  letter-spacing: 0
}

.consent {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-transform: none!important;
  letter-spacing: 0!important
}

.consent input {
  width: auto
}

.contact-form .button {
  align-self: flex-start;
  margin-top: .5rem
}

.form-status {
  font-size: .78rem;
  min-height: 1.3rem
}

/* ==========================================================
   ПОДВАЛ
   Логотип, контакты, социальные сети и авторское право.
   ========================================================== */
.footer {
  background: var(--deep);
  color: #eeeade;
  padding: 4vw;
  display: grid;
  grid-template-columns: 1fr repeat(3, auto);
  gap: 3vw;
  align-items: end;
  font-size: .78rem
}

.footer p {
  margin: 0
}

.footer>div {
  display: flex;
  flex-direction: column
}

.logo-light {
  color: #fff
}

/* ==========================================================
   АНИМАЦИЯ ПОЯВЛЕНИЯ
   Элементы с классом reveal плавно появляются при прокрутке.
   Класс visible добавляется скриптом script.js.
   ========================================================== */
.reveal {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity .8s ease,transform .8s ease
}

.reveal.visible {
  opacity: 1;
  transform: none
}

/* ==========================================================
   АДАПТАЦИЯ ДЛЯ ПЛАНШЕТОВ И НЕБОЛЬШИХ ЭКРАНОВ
   Срабатывает при ширине окна до 900 пикселей.
   ========================================================== */
@media (max-width:900px) {
  .header {
    grid-template-columns: 1fr;
    height: auto;
    padding: .85rem 4vw 0
  }
  .menu-button {
    display: none
  }
  .nav {
    display: flex;
    grid-column: 1 / -1;
    position: static;
    width: calc(100% + 8vw);
    margin-left: -4vw;
    margin-top: .75rem;
    padding: 0 4vw;
    gap: 1.35rem;
    flex-direction: row;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    border-top: 1px solid var(--line);
    border-bottom: 0;
    white-space: nowrap
  }
  .nav::-webkit-scrollbar {
    display: none
  }
  .nav a {
    flex: 0 0 auto;
    padding: .78rem 0
  }
  .nav a::after {
    bottom: .45rem
  }
  .header-phone {
    display: none
  }
  .hero {
    grid-template-columns: 1fr;
    padding-top: 12vw
  }
  .hero-visual {
    min-height: 65vh
  }
  .hero-aside {
    grid-column: auto
  }
  .intro-main,.classes-heading {
    grid-template-columns: 1fr
  }
  .principles {
    grid-template-columns: 1fr
  }
  .principle,.principle:not(:first-child) {
    padding: 1.5rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    min-height: auto
  }
  .audience {
    grid-template-columns: 1fr
  }
  .audience-image {
    min-height: 70vh
  }
  .audience-copy {
    padding: 15vw 6vw
  }
  .founder {
    grid-template-columns: 1fr;
    padding: 15vw 6vw
  }
  .founder-visual {
    min-height: 70vh;
    grid-row: 1
  }
  .classes {
    padding: 15vw 6vw
  }
  .class-card {
    grid-template-columns: .15fr 1fr
  }
  .class-card strong {
    grid-column: 2;
    justify-self: start
  }
  .contact {
    grid-template-columns: 1fr;
    padding: 15vw 6vw
  }
  .footer {
    grid-template-columns: 1fr 1fr;
    gap: 2rem
  }
  .footer>p {
    grid-column: 1/-1
  }
}

/* ==========================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   Срабатывает на телефонах с шириной экрана до 560 пикселей.
   ========================================================== */
@media (max-width:560px) {
  h1 {
    font-size: 2.9rem
  }
  .hero {
    padding: 3rem 1.2rem 1.5rem
  }
  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem
  }
  .hero-copy h1 {
    font-size: clamp(4rem,24vw,6rem)
  }
  .hero-contacts {
    grid-template-columns: 1fr
  }
  .hero-contacts a + a {
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0
  }
  .hero-visual {
    min-height: 430px
  }
  .intro {
    padding: 5rem 1.2rem
  }
  .audience-copy,.founder,.classes,.contact {
    padding: 5rem 1.2rem
  }
  .founder-visual {
    min-height: 500px
  }
  .class-card {
    grid-template-columns: 1fr
  }
  .class-card strong {
    grid-column: auto
  }
  .footer {
    padding: 3rem 1.2rem;
    grid-template-columns: 1fr
  }
  .footer>p {
    grid-column: auto
  }
}

/* Главный экран 3.31: цельная фотография с текстом поверх неё. */
.hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 92px);
  display: flex;
  align-items: flex-end;
  padding: clamp(80px,10vw,150px) 5vw clamp(94px,9vw,130px);
  overflow: hidden;
  color: #fff;
  background: transparent !important;
}

.hero-copy {
  position: relative;
  z-index: 3;
  max-width: 920px;
}

.hero-copy h1 {
  margin-bottom: 12px;
  font-family: 'Montserrat Alternates',var(--sans);
  font-weight: 400;
  font-size: clamp(4.6rem,10vw,10rem);
  line-height: .86;
  letter-spacing: -.075em;
  text-shadow: 0 8px 34px rgba(12,17,14,.25);
}

.hero-kicker,.hero-lead {
  text-shadow: 0 5px 24px rgba(12,17,14,.35);
}

.hero-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  max-width: 690px;
  margin-top: 32px;
  border: 0;
}

.hero-contacts a,
.hero-contacts a + a {
  display: grid;
  gap: 4px;
  padding: 0;
  border: 0;
}

.hero-contacts strong {
  color: #fff;
}

.hero .hero-visual {
  position: absolute;
  z-index: -2;
  inset: 0;
  min-height: 0;
  background: #556158;
}

.hero .hero-visual::before {
  display: none;
}

.hero-visual::after {
  z-index: 1;
  background: linear-gradient(90deg,rgba(16,22,18,.76) 0%,rgba(16,22,18,.5) 42%,rgba(16,22,18,.08) 78%),linear-gradient(0deg,rgba(16,22,18,.48),transparent 52%);
}

.hero-aside {
  position: absolute;
  z-index: 3;
  right: 5vw;
  bottom: 30px;
  left: 5vw;
  display: block;
  padding: 0;
  border: 0;
}

.hero-aside p {
  max-width: 720px;
}

.hero .button {
  border-radius: 999px;
  background: var(--warm);
}

.hero .text-link {
  border-color: rgba(255,255,255,.72);
}

@media (max-width: 900px) {
  .hero {
    display: flex;
    padding: 100px 6vw 110px;
  }

  .hero .hero-visual {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .hero {
    padding: 84px 22px 105px;
  }

  .hero-copy h1 {
    font-size: clamp(4rem,23vw,6rem);
  }

  .hero-contacts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .hero-contacts a + a {
    padding-top: 10px;
  }
}

/* Главный экран 3.32: новый шрифт, новый кадр и контакты справа внизу. */
.hero-copy h1 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.045em;
}

/* Кнопка 6.14 ведёт к разделу контактов и сохраняет вид кнопки. */
a.booking-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Адрес 6.19: заметная ссылка на карточку клуба в 2ГИС. */
.footer-address {
  display: block;
  margin-bottom: 6px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

/* Спокойный подвал: служебный текст выровнен сверху и не спорит с содержанием. */
.footer {
  align-items: start;
  color: rgba(238, 234, 222, .72);
  font-size: .7rem;
  line-height: 1.65;
}

.footer > div,
.footer > p {
  align-self: start;
  padding-top: 4px;
}

.footer > p {
  max-width: 18ch;
  color: rgba(238, 234, 222, .56);
}

.footer > .logo {
  align-self: start;
  align-items: flex-start;
  margin-top: 0;
  padding-top: 4px;
}

.footer .footer-address {
  text-decoration-color: rgba(238, 234, 222, .34);
}

.footer-socials a:hover {
  transform: none;
}

.footer > .footer-documents {
  display: grid;
  align-content: start;
  gap: 12px;
  margin-top: 0;
  padding-top: 4px;
  border-top: 0;
}

.footer-documents > strong {
  color: rgba(238, 234, 222, .9);
  font-weight: 500;
}

.footer-document-links {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}

.footer-document-links a {
  color: rgba(238, 234, 222, .65);
  text-decoration: underline;
  text-decoration-color: rgba(238, 234, 222, .28);
  text-underline-offset: 4px;
}

.footer-document-links a:hover {
  color: #eeeade;
  text-decoration-color: currentColor;
}

@media (min-width: 901px) {
  .footer {
    padding-top: 18px;
  }

  .footer > .logo {
    margin-top: 0;
  }
}

@media (min-width: 561px) and (max-width: 900px) {
  .footer > .footer-documents {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 700px) {
  .footer-document-links {
    gap: 9px;
  }
}

/* Ссылки на адрес 7.10: подчёркивание и движение показывают кликабельность. */
.address-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

/* ==========================================================
   МЕНЮ 7.24
   Сохраняет усиленный активный пункт и прозрачную шапку без свечения.
   ========================================================== */
.nav a.is-active,
.nav a.is-active:hover {
  color: var(--warm);
  font-weight: 700;
  opacity: 1;
  border-radius: 8px;
  background: rgba(204, 148, 112, .16);
  box-shadow: none;
}

.nav a.is-active::after {
  right: 0;
  bottom: .08rem;
  height: 3px;
  border-radius: 999px;
}

/* Версия 7.59: существующая кнопка записи перенесена внутрь меню. */
.header .nav {
  align-items: center;
}

.header .booking-widget {
  position: static;
  right: auto;
  bottom: auto;
  z-index: auto;
  flex: 0 0 auto;
}

.header .nav .booking-toggle {
  min-width: 148px;
  padding: 18px 24px;
  color: #fff;
}

.header .nav .booking-toggle:hover,
.header .nav .booking-toggle.is-active {
  color: #fff;
  opacity: 1;
}

.header .nav .booking-toggle::after {
  display: none;
}

@media (max-width: 600px) {
  .header .nav .booking-toggle {
    min-width: 132px;
    padding: 16px 20px;
  }
}

.header.is-scrolled {
  background: rgba(242, 240, 233, .4);
  -webkit-backdrop-filter: blur(20px) saturate(1.08);
  backdrop-filter: blur(20px) saturate(1.08);
  border-bottom-color: rgba(38, 49, 41, .08);
  box-shadow: 0 10px 34px rgba(38, 49, 41, .07);
}

/* ==========================================================
   ОТКРЫТАЯ ФОРМА ЗАПИСИ 6.15
   Компактная форма всегда видна в контактах и помещается в один экран.
   ========================================================== */
.contact {
  gap: clamp(36px, 7vw, 100px);
  padding-top: clamp(58px, 7vw, 92px);
  padding-bottom: clamp(58px, 7vw, 92px);
}

.contact-inline-phone {
  display: inline-block;
  margin-top: 28px;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1;
}

.contact-inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-self: center;
  margin: 0;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid rgba(38, 49, 41, .15);
  border-radius: 28px;
  background: rgba(242, 240, 233, .82);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 52px rgba(38, 49, 41, .1);
}

.contact-inline-form > label {
  display: grid;
  grid-template-rows: 16px 46px;
  gap: 5px;
  align-content: start;
  min-width: 0;
  margin: 0;
}

.contact-inline-form input,
.contact-inline-form select,
.contact-inline-form textarea {
  width: 100%;
  height: 46px;
  min-height: 46px;
  padding: 12px 0 9px;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid rgba(38, 49, 41, .28);
  border-radius: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font: 400 .95rem/1.25 var(--sans);
}

.contact-inline-form select {
  cursor: pointer;
}

.contact-inline-form textarea {
  min-height: 46px;
  overflow: hidden;
  resize: vertical;
}

.contact-inline-form button {
  grid-column: 1;
  grid-row: auto;
  justify-self: end;
  margin-top: 2px;
}

.contact-inline-form .callback-status {
  display: none;
  grid-column: 1;
  grid-row: auto;
  align-self: center;
}

.contact-inline-form.is-submitted {
  min-height: 430px;
  align-content: center;
  justify-items: center;
}

.contact-inline-form.is-submitted > label,
.contact-inline-form.is-submitted > button {
  display: none;
}

.contact-inline-form.is-submitted .callback-status {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 320px;
  min-height: 0;
  text-align: center;
}

.callback-success-icon {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  margin-bottom: 8px;
  border-radius: 50%;
  color: #fff;
  background: var(--warm);
  font-size: 1.7rem;
  line-height: 1;
}

.callback-success-title {
  font: 400 clamp(2rem, 3.2vw, 3rem)/1.05 var(--serif);
}

.callback-success-copy {
  color: rgba(38, 49, 41, .7);
  font-size: .95rem;
  line-height: 1.55;
}

@media (min-width: 561px) and (max-width: 900px) {
  .footer > .footer-documents {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 700px) {
  .contact-inline-form {
    grid-template-columns: 1fr;
    padding: 24px 20px;
  }

  .contact-inline-form button {
    grid-column: 1;
    grid-row: auto;
    justify-self: end;
  }

  .contact-inline-form .callback-status {
    grid-column: 1;
    grid-row: auto;
  }
}

.hero .hero-visual img {
  object-position: center center;
}

.hero-contacts {
  position: absolute;
  z-index: 4;
  right: 5vw;
  bottom: 28px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 12px 38px;
  max-width: none;
  margin: 0;
  text-align: right;
}

.hero-contacts a {
  justify-items: end;
}

.hero-aside {
  right: auto;
  max-width: 46vw;
}

.hero-visual::after {
  background: linear-gradient(90deg,rgba(16,22,18,.72) 0%,rgba(16,22,18,.43) 42%,rgba(16,22,18,.05) 74%),linear-gradient(0deg,rgba(16,22,18,.55),transparent 48%);
}

@media (max-width: 760px) {
  .hero {
    align-items: center;
    padding-bottom: 190px;
  }

  .hero-contacts {
    right: 22px;
    bottom: 28px;
    left: 22px;
    grid-template-columns: 1fr;
    gap: 9px;
    text-align: left;
  }

  .hero-contacts a,
  .hero-contacts a + a {
    justify-items: start;
    padding: 0;
  }

  .hero-aside {
    display: none;
  }
}

/* Светлый контрастный текст вместо персикового на главной фотографии. */
.hero .eyebrow,
.hero .hero-kicker em,
.hero .hero-contacts span {
  color: #fff;
  text-shadow: 0 3px 16px rgba(8,12,10,.75);
}

/* Фирменное начертание названия на главном экране. */
.hero-copy h1 {
  font-family: 'Cormorant Infant',var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(6.5rem,14vw,14rem);
  letter-spacing: -.055em;
  transform: translateX(-.04em);
}

@media (max-width: 560px) {
  .hero-copy h1 {
    font-size: clamp(5rem,27vw,7rem);
  }
}

/* Главный экран 5.5: название набрано тем же шрифтом, что и логотип в шапке. */
.hero-copy h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -.045em;
}

/* ==========================================================
   КОНТАКТЫ 6.1
   Вместо второй формы показываются телефон и кнопка, открывающая
   тот же опросник, что и постоянная кнопка «Записаться».
   ========================================================== */
.contact-actions {
  align-self: center;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid rgba(38, 49, 41, .16);
  border-radius: 28px;
  background: rgba(242, 240, 233, .76);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 52px rgba(38, 49, 41, .1);
}

.contact-actions > p {
  margin: 0 0 8px;
  color: rgba(38, 49, 41, .62);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.contact-phone {
  display: block;
  margin-bottom: 28px;
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 4.2rem);
  line-height: 1;
}

.contact-callback {
  width: auto;
  padding: 18px 25px;
  color: #fff;
  border-radius: 999px;
  background: var(--deep);
  box-shadow: 0 14px 34px rgba(38, 49, 41, .2);
}

.contact-callback:hover {
  transform: translateY(-2px);
  background: var(--warm);
}

.contact-actions > small {
  display: block;
  max-width: 36ch;
  margin-top: 18px;
  color: rgba(38, 49, 41, .58);
  font-size: .78rem;
  line-height: 1.5;
}