/* ===================== FONTS ===================== */
@font-face {
  font-family: 'Akzidenz-Grotesk Pro';
  src: url('assets/fonts/ag-light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Akzidenz-Grotesk Pro';
  src: url('assets/fonts/ag-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Akzidenz-Grotesk Pro';
  src: url('assets/fonts/ag-medium.woff2') format('woff2');
  font-weight: 500 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Akzidenz-Grotesk Pro';
  src: url('assets/fonts/ag-bold.woff2') format('woff2');
  font-weight: 700 900; font-style: normal; font-display: swap;
}

/* ===================== TOKENS ===================== */
:root {
  --green: #16BF41;
  --green-d: #0C5C46;
  --green-dd: #0A4D3B;
  --green-band1: #C7E94F;
  --green-band2: #5FC22E;
  --dev-green: #A9DD57;
  --orange: #FF6A2B;
  --orange-d: #F2581A;
  --coral: #FF6F61;
  --blue: #3FA9F5;
  --yellow: #FFC23C;
  --ink: #2C2F33;
  --muted: #7C8088;
  --bg: #FFFFFF;
  --bg-soft: #FAF7F5;
  --radius: 22px;
  --radius-lg: 32px;
  --shadow: 0 18px 40px rgba(20,40,30,.08);
  --shadow-sm: 0 8px 22px rgba(20,40,30,.07);
  --maxw: 1860px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --font-body: 'Akzidenz-Grotesk Pro', 'Montserrat', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 3.5vw, 64px); }

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 15px; border: none; cursor: pointer;
  padding: 14px 26px; border-radius: 40px; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
  font-family: inherit; white-space: nowrap;
}
.btn-lg { padding: 17px 32px; font-size: 16px; }
.btn-orange { background: var(--orange); color: #fff; box-shadow: 0 10px 24px rgba(255,106,43,.32); }
.btn-orange:hover { background: var(--orange-d); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255,106,43,.4); }
.btn-ghost { background: transparent; color: var(--green-d); border: 2px solid #d7e0d8; }
.btn-ghost:hover { border-color: var(--green); color: var(--green); transform: translateY(-2px); }
.btn-teal { background: var(--green-d); color: #fff; box-shadow: 0 12px 26px rgba(12,92,70,.30); }
.btn-teal:hover { background: var(--green-dd); transform: translateY(-2px); box-shadow: 0 16px 32px rgba(12,92,70,.38); }
.btn-white-green { background: #fff; color: var(--green); border: 4px solid #AEE0B1; }
.btn-white-green:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(22,191,65,.18); }
.btn-link-light { background: transparent; color: #fff; text-decoration: underline; text-underline-offset: 4px; padding: 14px 10px; }
.btn-link-light:hover { opacity: .8; }

.circle-btn {
  width: 38px; height: 38px; border-radius: 50%; background: var(--orange); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; transition: transform .2s, background .2s;
}
.circle-btn:hover { background: var(--orange-d); transform: translateY(-2px); }
.square-btn { width: 40px; height: 40px; border-radius: 12px; }

/* ===================== HEADER ===================== */
.header { position: sticky; top: 0; z-index: 100; }
.topbar { background: var(--green); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.topnav { display: flex; gap: 30px; flex-wrap: wrap; }
.topnav a { color: #fff; font-size: 15px; font-weight: 500; transition: opacity .2s; }
.topnav a:hover { opacity: .75; }
.topbar-phone { color: #fff; font-weight: 800; font-size: 18px; letter-spacing: .3px; }

.brandbar { background: #fff; border-bottom: 3px solid var(--green); }
.brandbar-inner { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.logo { height: 46px; width: auto; }
.brandbar-actions { display: flex; align-items: center; gap: 12px; }

/* hamburger — hidden on desktop, shown on mobile (see media queries) */
.nav-toggle { display: none; width: 34px; height: 30px; padding: 5px 4px; background: none;
  border: none; cursor: pointer; flex-direction: column; justify-content: space-between; }
.nav-toggle span { display: block; height: 3px; width: 100%; border-radius: 3px; background: #fff;
  transition: transform .25s var(--ease), opacity .2s var(--ease); }
.header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ===================== HERO ===================== */
.hero { background: #FFFFFF; position: relative; overflow: hidden; }
.hero-inner { position: relative; display: flex; align-items: center; min-height: clamp(480px, 41vw, 840px); }
.hero-text { position: relative; z-index: 2; width: 42%; flex: 0 0 42%; margin-left: clamp(0px, 2.2vw, 46px); }
.hero-text h1 { font-size: clamp(30px, 4.05vw, 80px); line-height: 1.1; color: var(--green-d); font-weight: 400; letter-spacing: -.5px; white-space: nowrap; }
.hero-text h1 .h1-bold { font-weight: 700; }
.hero-sub { margin: clamp(16px, 1.7vw, 30px) 0 clamp(20px, 2.1vw, 36px); color: var(--ink); font-size: clamp(15px, 1.35vw, 21px); font-weight: 400; }
/* Подзаголовок не должен заезжать на фото: строка переносится раньше видимого края картинки.
   Видимый край = левый край .hero-media + ~22,4% ширины (прозрачное поле PNG и маска-фейд),
   из него вычитается отступ текста от края экрана. На обычных ширинах лимит шире текущей
   строки и ничего не меняет — он срабатывает только там, где иначе было бы наложение. */
@media (min-width: 901px) and (max-width: 1080px) {
  .hero-sub { max-width: calc(99vw - 0.7764*min(70vw, 720px) - clamp(20px, 3.5vw, 64px) - clamp(0px, 2.2vw, 46px) - 2px); }
}
@media (min-width: 1081px) {
  .hero-sub { max-width: calc(99vw - 0.7764*min(78vw, 1560px) - max((100vw - 1860px)/2, 0px) - clamp(20px, 3.5vw, 64px) - clamp(0px, 2.2vw, 46px) - 2px); }
}
.hero-buttons { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(12px, 1.1vw, 18px); }
.hero-buttons .btn { border-radius: 14px; padding: clamp(13px, 1.45vw, 21px) clamp(22px, 2.4vw, 40px); font-size: clamp(14px, 1.15vw, 17px); min-width: min(380px, 27vw); }
.hero-media {
  position: absolute; top: 44%; transform: translateY(-50%);
  right: calc((100% - 100vw) / 2 + 1vw);   /* nudged slightly left of the viewport edge */
  width: min(78vw, 1560px); z-index: 1; pointer-events: none; line-height: 0;
  /* fade all edges so the image melts into the white background (no visible rectangle) */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 74%, transparent 99%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 74%, transparent 99%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 93%, transparent 100%);
          mask-composite: intersect;
}
.hero-media img { width: 100%; height: auto; display: block; }

/* ===================== FEATURE BAND ===================== */
.features { background: #FFFFFF; padding: 78px 0 70px; }
.features-band {
  position: relative; border-radius: 36px; padding: 56px clamp(40px, 12vw, 195px) 50px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  background:
    radial-gradient(120% 150% at 50% -25%, rgba(247,150,53,.85) 0%, rgba(247,170,60,.18) 38%, rgba(247,170,60,0) 60%),
    linear-gradient(180deg, #9CC81E 0%, #5BC130 42%, var(--green) 100%);
  box-shadow: 0 22px 48px rgba(22,191,65,.22);
  overflow: hidden;
}
.feat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; color: #fff; }
.feat-icon { width: 104px; height: 104px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.12)); }
.feat p { font-weight: 700; font-size: 18px; line-height: 1.35; }
/* mobile shows its own shorter feature text; desktop keeps the original copy */
.feat p .ft-m { display: none; }

/* ===================== SECTION TITLES ===================== */
.section-title { text-align: center; font-size: 36px; font-weight: 800; color: var(--green-d); margin-bottom: 14px; }
.section-title-left { text-align: left; }
.section-title-light { color: #fff; }
.section-lead { text-align: center; max-width: 720px; margin: 0 auto 40px; color: var(--muted); font-size: 17px; font-weight: 500; }
/* programs lead: .lead-d desktop copy, .lead-m mobile copy (defined before media queries) */
.lead-m { display: none; }

/* ===================== PROGRAMS / CAROUSEL ===================== */
.programs { position: relative; padding: 76px 0 96px; overflow: hidden; }
.programs .container { position: relative; z-index: 1; }
.section-title-prog { font-weight: 600; }
.prog-curve { position: absolute; top: 6px; right: -1%; width: min(48%, 780px); height: auto; z-index: 0; pointer-events: none; user-select: none; }

.carousel { position: relative; padding: 0 8px; }
.car-viewport { overflow: hidden; min-width: 0; }
.car-track { display: flex; gap: 24px; transition: transform .5s var(--ease); will-change: transform; align-items: stretch; }
.car-track > * { flex: 0 0 calc((100% - 60px) / 3.7); }

.car-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 54px; height: 54px; border-radius: 50%; background: #fff; color: var(--green);
  border: 2px solid var(--green); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow-sm); transition: all .2s var(--ease);
}
.car-arrow:hover { background: var(--green); color: #fff; border-color: var(--green); }
.car-arrow:disabled { opacity: .35; cursor: default; }
.car-arrow:disabled:hover { background: #fff; color: var(--green); border-color: var(--green); }
.car-prev { left: -22px; }
.car-next { right: -22px; }

.car-dots { display: flex; gap: 8px; justify-content: center; margin-top: 26px; }
.car-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; background: #d6ded7; cursor: pointer; padding: 0; transition: all .2s; }
.car-dots button.active { background: var(--green); width: 26px; border-radius: 5px; }

/* Program cards: carousel of expanding panels (resting / hover / open) */
.prog-carousel { position: relative; padding: 0 8px 0 78px; }
.prog-carousel .car-prev { left: 8px; }
.prog-carousel .car-next { right: -6px; }
.prog-track { display: flex; gap: 22px; align-items: stretch; transition: transform .55s var(--ease); will-change: transform; }
/* show three full cards + a sliver of the next (cards a touch narrower) */
.prog-track > .prog-card { flex: 0 0 calc((100% - 48px) / 3.42); }
.prog-card {
  position: relative; min-width: 0;
  height: clamp(440px, 36vw, 520px);
  background: #fff; border: 2px solid; border-radius: 26px;
  padding: clamp(24px, 2vw, 34px); overflow: hidden; box-shadow: 0 14px 34px rgba(20,40,30,.06);
  transition: flex-basis .5s var(--ease), opacity .4s var(--ease), border-color .3s, box-shadow .3s, border-width .25s;
}
.pc-content { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; min-width: 0; }
.pc-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pc-age { font-size: clamp(24px, 2vw, 34px); font-weight: 800; line-height: 1; letter-spacing: -.5px; white-space: nowrap; }
.pc-time { display: inline-flex; align-items: center; gap: 6px; background: #EEF2EF; color: var(--green-d);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 6px 12px; border-radius: 20px; white-space: nowrap; }
.pc-time svg { width: 14px; height: 14px; }
.pc-title { font-size: clamp(17px, 1.4vw, 22px); font-weight: 700; color: var(--green-d); margin-bottom: 12px; line-height: 1.15; }
.pc-desc, .pc-desc-long { font-size: 15px; color: #6f7378; font-weight: 400; line-height: 1.5; max-width: 30ch; }
.pc-desc-long { display: none; }

/* benefits — shown when open */
.pc-benefits { display: none; grid-template-columns: 1fr 1fr; gap: 16px 20px; list-style: none; margin: 22px 0 0; padding: 0; max-width: 34ch; }
.pc-benefits li { position: relative; padding-left: 32px; font-size: 14px; font-weight: 700; color: var(--green-d); line-height: 1.25; }
.pc-benefits li::before { content: ""; position: absolute; left: 0; top: -1px; width: 23px; height: 23px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='none' stroke='%2346B54A' stroke-width='2'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%2346B54A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }

/* photo — sits behind the text. The image fills its box (cover) and the box bleeds off the
   card on every side except the one facing the text, so only that edge needs fading. */
.pc-photo { position: absolute; z-index: 1; pointer-events: none; left: 2%; right: 2%; bottom: 0; width: auto; height: 60%; transition: all .5s var(--ease); }
.pc-photo img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; display: block;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 100%); }
/* the two right-most resting cards + every open card: text grouped on the left, subject on the right.
   The angled mask keeps the upper-left fade while letting the lower part (legs) show under the text. */
.pc-yellow .pc-photo, .pc-navy .pc-photo { left: auto; right: -6%; width: 66%; height: 114%; top: -7%; bottom: auto; }
.pc-yellow .pc-photo img, .pc-navy .pc-photo img {
  object-fit: cover; object-position: 72% bottom;
  -webkit-mask-image: linear-gradient(104deg, transparent 2%, #000 36%, #000 100%);
  mask-image: linear-gradient(104deg, transparent 2%, #000 36%, #000 100%);
}
/* 10+ (navy): fade the whole left edge of the photo so its border can't be seen */
.pc-navy .pc-photo img {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 32%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 32%, #000 100%);
}
/* 7-10: show the whole boy (contain) so the legs are fully visible; white backdrop blends borderlessly */
.pc-yellow .pc-photo { right: 0; width: 64%; top: auto; bottom: 0; height: 102%; }
.pc-yellow .pc-photo img { object-fit: contain; object-position: right bottom; }
/* 5-7: fade the right edge of the photo so its border can't be seen */
.pc-blue .pc-photo {
  -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 16%, #000 100%);
  mask-image: linear-gradient(to left, transparent 0%, #000 16%, #000 100%);
}
.pc-yellow .pc-desc, .pc-yellow .pc-title,
.pc-navy .pc-desc, .pc-navy .pc-title { max-width: 54%; }

/* CTA — shown on hover/open */
.pc-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 18px;
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.pc-primary { display: inline-flex; align-items: center; justify-content: center; background: var(--green-d); color: #fff;
  font-weight: 700; font-size: 14px; padding: 13px 22px; border-radius: 12px; white-space: nowrap; transition: background .2s, transform .2s; }
.pc-primary:hover { background: var(--green-dd); transform: translateY(-2px); }
.pc-primary .t-long { display: none; }
.pc-secondary { display: none; align-items: center; justify-content: center; background: #fff; color: #46B54A;
  border: 2px solid #9CD9A0; font-weight: 700; font-size: 14px; padding: 11px 18px; border-radius: 12px; white-space: nowrap; transition: border-color .2s, color .2s; }
.pc-secondary:hover { border-color: #46B54A; color: #2E8B3E; }

/* toggle arrow */
.pc-toggle { position: absolute; z-index: 3; right: clamp(20px, 1.8vw, 30px); bottom: clamp(20px, 1.8vw, 30px);
  width: 52px; height: 52px; border-radius: 50%; border: 2px solid #cdd6cf; background: #fff; color: var(--green-d);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; transform: scale(.85); transition: opacity .3s var(--ease), transform .3s var(--ease), border-color .2s, background .2s; }
.pc-toggle:hover { border-color: var(--green-d); background: #F1F7F1; }
.pc-arrow { width: 22px; height: 22px; transition: transform .4s var(--ease); }

/* ---- HOVER (no card open): card widens, siblings keep size + slide right + fade ---- */
.prog-track:not(.has-open) .prog-card:hover { flex-basis: clamp(400px, 33vw, 470px); box-shadow: 0 22px 46px rgba(20,40,30,.13); }
.prog-track:not(.has-open):hover .prog-card:not(:hover) { opacity: .32; }
.prog-track:not(.has-open) .prog-card:hover .pc-cta { opacity: 1; transform: none; pointer-events: auto; }
.prog-track:not(.has-open) .prog-card:hover .pc-toggle { opacity: 1; transform: none; }
/* image stays exactly where it is on hover — only the button overlaps it; it moves only on open */

/* ---- OPEN: card expands far more; siblings keep size + slide right + fade out ---- */
.prog-card.is-open { flex-basis: clamp(620px, 56vw, 800px); border-width: 4px; box-shadow: 0 28px 56px rgba(20,40,30,.18); }
.prog-track.has-open .prog-card:not(.is-open) { opacity: .1; pointer-events: none; }
.prog-card.is-open .pc-content { width: 58%; }
.prog-card.is-open .pc-cta { flex-wrap: nowrap; opacity: 1; transform: none; pointer-events: auto; }
.prog-card.is-open .pc-desc { display: none; }
.prog-card.is-open .pc-desc-long { display: block; }
.prog-card.is-open .pc-benefits { display: grid; }
.prog-card.is-open .pc-primary .t-short { display: none; }
.prog-card.is-open .pc-primary .t-long { display: inline; }
.prog-card.is-open .pc-secondary { display: inline-flex; }
.prog-card.is-open .pc-toggle { opacity: 1; transform: none; }
.prog-card.is-open .pc-arrow { transform: rotate(180deg); }
.prog-card.is-open .pc-photo { left: auto; right: -3%; bottom: -4%; top: -6%; height: 114%; width: 60%; }
/* the red (first) card's open image reaches further across the right */
.pc-coral.is-open .pc-photo { right: -3%; width: 70%; }
/* open image: show the whole subject (contain) integrated on the right, gently faded only at the outer edge */
/* two-level mask: the container softens the outer edges, the image fades its own left half —
   both always apply, with no reliance on mask-composite support */
.prog-card.is-open .pc-photo {
  -webkit-mask-image: radial-gradient(120% 104% at 70% 58%, #000 62%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(120% 104% at 70% 58%, #000 62%, rgba(0,0,0,0) 100%);
}
.prog-card.is-open .pc-photo img {
  object-fit: contain; object-position: bottom right;
  -webkit-mask-image: linear-gradient(to right, transparent 5%, #000 55%, #000 100%);
  mask-image: linear-gradient(to right, transparent 5%, #000 55%, #000 100%);
}
.prog-card.is-open .pc-title, .prog-card.is-open .pc-desc-long { max-width: none; }

/* colour variants */
.pc-coral { border-color: #FF6F5E; } .pc-coral .pc-age { color: #FF6F5E; }
.pc-green { border-color: #45BE54; } .pc-green .pc-age { color: #45BE54; }
.pc-blue { border-color: #4FACEA; } .pc-blue .pc-age { color: #4FACEA; }
.pc-yellow { border-color: #FBC02D; } .pc-yellow .pc-age { color: #F4B400; }
.pc-navy { border-color: #0C5C46; } .pc-navy .pc-age { color: #0C5C46; }

/* tablet (621–1080): keep the desktop carousel, two cards per view */
@media (max-width: 1080px) {
  .prog-carousel { padding: 0 8px 0 64px; }
  .prog-carousel .car-prev { left: 4px; }
  .prog-track > .prog-card { flex: 0 0 calc((100% - 22px) / 2.06); height: clamp(430px, 56vw, 500px); }
  .prog-track:not(.has-open) .prog-card:hover { flex-basis: clamp(330px, 48vw, 470px); }
  .prog-card.is-open { flex-basis: clamp(460px, 78vw, 800px); }
  .pc-desc, .pc-desc-long { max-width: 100%; }
  .pc-yellow .pc-desc, .pc-yellow .pc-title,
  .pc-navy .pc-desc, .pc-navy .pc-title { max-width: 58%; }
  .pc-benefits { gap: 12px 14px; }
}
@media (max-width: 620px) {
  /* ===== «Чем будем заниматься?» — mobile carousel ===== */
  /* heading + lead: left-aligned, mobile-specific wording */
  .lead-d { display: none; }
  .lead-m { display: inline; }
  /* less air above the title (was 30px → halved), 20 % bigger heading.
     The extra specificity beats the generic `.section-title { 27px }` below. */
  .programs { padding: 15px 0 54px; }
  .programs .section-title-prog { text-align: left; font-size: clamp(30px, 8.6vw, 33px); line-height: 1.1; }
  .programs .section-lead { text-align: left; max-width: none; margin: 0 0 26px;
    font-size: clamp(12.5px, 3.6vw, 15px); line-height: 1.5; color: #111; }

  /* wavy line to the right of the heading, fading in from the left —
     back to its original (un-squashed) proportions, and nudged down a little
     so its top can't be clipped by the section's overflow */
  .prog-curve { top: clamp(12px, 4.5vw, 30px); right: -4%; left: auto; width: 68%; height: auto; opacity: .95;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%);
    mask-image: linear-gradient(to right, transparent 0%, #000 55%); }

  /* swipeable strip: no arrows, auto-advance handled in script.js.
     Cards keep the desktop size, image placement and edge fades — the only
     changes are the always-visible «Пробное занятие» button and no expand-on-tap. */
  .prog-carousel { padding: 0; }
  .prog-carousel .car-arrow { display: none; }
  .car-viewport { overflow: visible; }
  .prog-track { flex-direction: row; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 6px 2px;
    transform: none !important; transition: none; }
  .prog-track::-webkit-scrollbar { display: none; }
  .prog-track > .prog-card { flex: 0 0 86%; width: 86%; scroll-snap-align: center; opacity: 1 !important; }
  /* neutralise the desktop hover-expand / dim behaviour on touch */
  .prog-track .prog-card:hover { flex-basis: 86%; box-shadow: 0 14px 34px rgba(20,40,30,.06); }
  .prog-track:hover .prog-card:not(:hover) { opacity: 1; }
  .prog-card .pc-content { width: 100% !important; }
  /* no expansion UI on mobile */
  .pc-desc-long, .pc-benefits, .pc-secondary, .pc-toggle { display: none !important; }
  /* the button sits right under the text, sized to its label like the mock */
  .pc-cta { margin-top: 16px; padding-top: 0; opacity: 1; transform: none; pointer-events: auto; }
  .pc-primary .t-short { display: inline; }
  .pc-primary .t-long { display: none; }

  /* «3–4 года» card only: push the photo to the right edge and down, per the mock.
     bottom:0 drops the girl's plank onto the card's bottom edge; object-position 118%
     slides the image right so the tip of the kangaroo's tail crops off. */
  .pc-green .pc-photo { left: auto; right: 0; bottom: -5%; width: 84%; height: 66%; overflow: hidden; }
  .pc-green .pc-photo img { object-position: 122% bottom; }
}

/* ===================== DEVELOP ===================== */
.develop { padding: 30px 0 84px; }
.develop .section-title { margin-bottom: 40px; }
.develop-band {
  border-radius: 44px; padding: 56px 40px 50px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; align-items: end;
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFEF6 30%, #E6F4BC 52%, #C7E97A 72%, #A8DD33 100%);
}
.dev-item { text-align: center; display: flex; flex-direction: column; align-items: center; }
.dev-ic { width: clamp(120px, 11vw, 170px); height: auto; margin: 0 auto 16px; display: block; }
.dev-item p { font-weight: 700; font-size: 17px; line-height: 1.3; color: #005E50; }

/* ===================== HOW ===================== */
.how { padding: 34px 0 80px; }
.how-stage { position: relative; width: 100%; max-width: 1340px; margin: 28px auto 0; aspect-ratio: 1989 / 1150; }
/* wave: starts fading in at the left and runs until the right edge of the viewport */
.how-bg-curve { position: absolute; left: -4%; top: 22%; width: calc(54% + 50vw); max-width: none; height: auto; z-index: 0; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 100%); }

/* a step = circular photo + label, absolutely placed */
.how-step { position: absolute; width: 20%; text-align: center; z-index: 2; }
.st1 { left: 4.5%;  top: 1%; }
.st2 { left: 22%;   top: 47%; }
.st3 { left: 39%;   top: 0; }
.st4 { left: 55.5%; top: 47.5%; }
.st5 { left: 70.5%; top: 1%; }

.how-photo { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%;
  border: 6px solid var(--c); background: #f1f6f1; overflow: visible; color: var(--c); }
.how-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

.how-num { position: absolute; top: 6%; left: -4%; width: 30%; aspect-ratio: 1; border-radius: 50%;
  background: var(--c); display: flex; align-items: center; justify-content: center; z-index: 3;
  box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.how-num b { color: #fff; font-weight: 800; font-size: clamp(15px, 1.9vw, 30px); line-height: 1; }
.deco { position: absolute; color: var(--c); }
.deco-rays { width: 80%; height: 82%; top: -50%; left: -44%; }
/* step 1: the spark sits just above the number and centred over it */
.st1 .deco-rays { top: -50%; left: 15%; }
.deco-arc  { width: 50%; left: -58%; }
.st2 .deco-arc { height: 136%; top: -18%; }
/* number 4: a gentle curve that wraps above the top of the badge */
.deco-arc-top { width: 60%; height: auto; top: -34%; left: -20%; }
/* number 5: an arc concentric with the photo circle (same curvature), just outside its right side */
.deco-bigarc { width: 115%; height: 100%; top: 0; left: 7%; right: auto; }

.how-step h4 { font-size: clamp(14px, 1.25vw, 19px); font-weight: 700; color: var(--green-d); margin-top: clamp(10px, 1.4vw, 22px); line-height: 1.25; }

/* orange CTA circle (links to schedule) */
.how-cta { position: absolute; left: 81%; top: 50%; width: 16%; aspect-ratio: 1; border-radius: 50%;
  background: #EE5A2A; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6%; text-align: center; z-index: 2; box-shadow: 0 16px 34px rgba(238,90,42,.32); transition: transform .2s var(--ease); }
.how-cta:hover { transform: translateY(-3px); }
.how-cta .cta-arrow { width: 26%; height: auto; }
.how-cta span { font-weight: 800; font-size: clamp(12px, 1.15vw, 18px); line-height: 1.2; }
.cta-m { display: none; }                       /* mobile-only CTA label */
/* three background waves — mobile only (see media query) */
.how-wave-m { display: none; position: absolute; z-index: 0; pointer-events: none;
  background: url("assets/img/how-curve.png") left center / 100% 100% no-repeat; }

/* ===================== METHOD ===================== */
.method { padding: 20px 0 70px; position: relative; overflow: hidden; }
.method-wave { position: absolute; left: 0; top: 30%; width: 100%; height: auto; z-index: 0; pointer-events: none; user-select: none; }
/* title sits lower, between the tops of the red and green cards */
.method .section-title { position: relative; z-index: 5; margin-top: clamp(20px, 3vw, 46px); }
.method-stage { position: relative; max-width: 1180px; margin: clamp(-90px, -6.5vw, -40px) auto 0; aspect-ratio: 1180 / 600; z-index: 1; }

/* a tilted card + its outside decorations */
.mcard-wrap { position: absolute; width: 35.5%; }
.mw-red    { left: 0.5%;  top: 6%;  transform: rotate(-5deg); z-index: 4; }
.mw-yellow { left: 35%;   top: 35%; transform: rotate(4deg);  z-index: 2; }
.mw-green  { left: 66.5%; top: 8%;  transform: rotate(-3deg); z-index: 3; }

.method-card { position: relative; aspect-ratio: 1.1 / 1; border-radius: 30px;
  box-shadow: 0 22px 46px rgba(20,40,30,.18); display: flex; }
.method-coral  { background: #ED4C39; color: #fff; }
.method-yellow { background: #FCC400; color: #0E2E5E; }
.method-green  { background: #46B449; color: #fff; }

/* streaks live in their own rounded clip layer so the upright text is never clipped */
.streak-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: 1; }

/* text kept upright while the card itself is tilted; pivot on the text mass
   (~top third) so it doesn't swing off the tilted card */
.mcard-body { position: relative; z-index: 2; width: 100%; padding: clamp(20px, 2.2vw, 34px);
  display: flex; flex-direction: column; transform-origin: 50% 50%; }
.mw-red    .mcard-body { transform: rotate(5deg); }
.mw-yellow .mcard-body { transform: rotate(-4deg); }
.mw-green  .mcard-body { transform: translateX(8px) rotate(3deg); }
.method-card h3 { font-size: clamp(20px, 2.65vw, 38px); font-weight: 700; margin: 2px 0 clamp(10px, 1.7vw, 24px); }
.method-card p { font-size: clamp(12px, 1.45vw, 21px); font-weight: 400; line-height: 1.45; }

/* white streaks */
.streak { position: absolute; pointer-events: none; user-select: none; }
.sk-red-a { width: 150%; top: -18%; left: -6%; transform: rotate(6deg); }
.sk-red-b { width: 150%; bottom: -30%; left: -34%; transform: rotate(8deg); }
.sk-yel-a { width: 78%; top: -16%; left: -14%; transform: rotate(2deg); }
.sk-yel-b { width: 70%; top: -8%; left: 28%; transform: scaleX(-1) rotate(4deg); }
/* new corner swoosh in the green card's top-right corner (from supplied vector) */
.sk-green-corner { width: 82%; top: -10%; right: -12%; left: auto; opacity: .22; transform: rotate(0deg); }

/* coral corner brackets on the red card — straight arms with a rounded corner
   (matching the card's corner curvature), drawn inside the tilted wrap so they
   stay parallel to the card's rounded corners */
.corner-curve { position: absolute; width: 31%; height: auto; z-index: 3; pointer-events: none; color: #F0552F; }
.cc-tr { top: -13%; right: -12%; transform: rotate(180deg); }
.cc-bl { bottom: -13%; left: -12%; }

/* 3-line sparks next to yellow & green cards (same style as the first-lesson section) */
.spark { position: absolute; width: 15%; height: auto; z-index: 3; pointer-events: none; }
/* yellow spark lives at stage level (not inside the yellow wrap) so it can sit
   ABOVE the red card that overlaps the yellow card's corner */
.spark-yellow { position: absolute; z-index: 5; width: 6.2%; color: #FCC400; left: calc(31.8% + 4px); top: calc(31% - 66px); transform: rotate(208deg); }
.spark-green  { color: #7DC243; bottom: calc(-6.5% - 32px); right: calc(-5% - 28px); transform: rotate(360deg); }

/* ===================== SPACE ===================== */
.space { padding: 30px 0 70px; }
/* thin green lines above and below the big rectangle */
.space-rule { display: block; height: 4px; border-radius: 2px; background: var(--green); margin: 0 6px; }
.space-card { display: grid; grid-template-columns: 1.12fr 1fr; gap: clamp(28px, 3.5vw, 64px); align-items: center;
  background: linear-gradient(180deg, #A6D85B 0%, #CFE9A0 38%, #FFFFFF 88%);
  border-radius: 30px; padding: clamp(34px, 4vw, 64px); margin: 34px 0; }
.space-text h2 { color: var(--green-d); font-size: clamp(28px, 3.1vw, 50px); font-weight: 800; line-height: 1.18; margin-bottom: clamp(26px, 3vw, 44px); }
.space-list { list-style: none; display: flex; flex-direction: column; gap: clamp(18px, 2vw, 30px); }
.space-list li { position: relative; padding-left: 52px; font-size: clamp(16px, 1.3vw, 21px); font-weight: 700; color: var(--green-d); }
/* large green checkmark, no circle */
.space-list li::before { content: ""; position: absolute; left: 4px; top: 50%;
  width: 26px; height: 14px; border-left: 5px solid var(--green); border-bottom: 5px solid var(--green);
  border-radius: 1px; transform: translateY(-65%) rotate(-45deg); }
.space-photo { border-radius: 24px; overflow: hidden; background: #eef4ef; align-self: stretch; aspect-ratio: 1 / 1; }
.space-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; display: block; }

/* ===================== COACHES ===================== */
.coaches { padding: 30px 0 90px; }
.link-all { color: var(--green); font-weight: 800; font-size: 14px; letter-spacing: .6px; display: inline-flex; align-items: center; gap: 8px; }
.link-all:hover { color: var(--green-d); }
.link-all-center { display: flex; justify-content: center; margin-top: 36px; }

.coaches-grid { display: grid; grid-template-columns: 26% 1fr; gap: 2.5%; align-items: start; }

/* ---- left intro column ---- */
.coaches-intro { position: relative; }
.coaches-title { color: var(--green-d); font-size: clamp(26px, 2.7vw, 44px); font-weight: 800; line-height: 1.05; white-space: nowrap; }
.coaches-lead { color: #141414; font-weight: 400; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.5; max-width: 360px; margin: 20px 0 26px; }
.coaches-all { display: inline-flex; align-items: center; gap: 16px; color: var(--green-d); font-weight: 400;
  font-size: 16px; letter-spacing: 1.4px; text-transform: uppercase; }
.coaches-all .all-arrow { width: 43px; height: 14px; color: #84C746; flex: none; }
.coaches-all:hover .all-arrow { color: var(--green); }
.coaches-mascot { position: relative; margin-top: 6px; }
.mascot-arch { position: absolute; left: -4%; bottom: 23%; width: 62%; height: auto; z-index: 1; }
.mascot-roo { position: relative; z-index: 2; display: block; width: 71%; max-width: none; margin-left: 24%; margin-top: 52px; height: auto; }

/* ---- right carousel stage ---- */
.coaches-stage { position: relative; min-width: 0; }
.cstage-viewport { overflow: hidden; min-width: 0; padding: 14px 0 18px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%); }
.cstage-track { display: flex; gap: 30px; transition: transform .5s var(--ease); will-change: transform; align-items: stretch; }

.coach-card { flex: 0 0 39%; background: #eef0ee; border-radius: 28px; padding: 20px 20px 26px;
  border: 3px solid transparent; opacity: .5; transition: opacity .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); }
.coach-card.is-active { opacity: 1; border-color: #5FC24A; box-shadow: 0 20px 44px rgba(20,40,30,.12); }

.coach-tags { display: flex; gap: 12px; margin-bottom: 18px; }
.tag-pos, .tag-exp { font-size: clamp(11px, .82vw, 13px); font-weight: 800; text-transform: uppercase;
  letter-spacing: .6px; padding: 10px 18px; border-radius: 999px; white-space: nowrap; }
.tag-pos { background: #E4F3DC; color: var(--green-d); }
.tag-exp { background: var(--green); color: #fff; }

.coach-photo { border-radius: 18px; overflow: hidden; background: #e9eae9; aspect-ratio: 1.12 / 1; }
.coach-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.coach-card h3 { font-size: clamp(22px, 1.95vw, 32px); font-weight: 800; color: #4FBE3A; line-height: 1.08; margin: 18px 4px 12px; }
.coach-card p { font-size: clamp(13px, 1vw, 16px); color: #2b2b2b; font-weight: 400; line-height: 1.45; margin: 0 4px; }

/* circular light-green arrows flanking the active card */
.cstage-arrow { position: absolute; top: 50%; width: 68px; height: 68px; border-radius: 50%;
  background: #fff; border: 2.5px solid #5FC24A; color: #5FC24A; display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 6; box-shadow: 0 8px 20px rgba(20,40,30,.14); transition: background .2s, color .2s, transform .2s; }
.cstage-arrow svg { width: 30px; height: 30px; }
.cstage-arrow:hover { background: #5FC24A; color: #fff; }
.cstage-arrow:disabled { opacity: 0; pointer-events: none; }
.cstage-prev { left: 25.5%; transform: translate(-50%, -50%); }
.cstage-next { right: 25.5%; transform: translate(50%, -50%); }
.cstage-prev:hover { transform: translate(-50%, -50%) scale(1.06); }
.cstage-next:hover { transform: translate(50%, -50%) scale(1.06); }

/* ===================== GALLERY ===================== */
.gallery { padding: 30px 0 90px; }
.gallery-card { background: #fff; border: 2px solid #5FC24A; border-radius: 34px;
  padding: clamp(28px, 3.4vw, 56px); box-shadow: 0 18px 44px rgba(20,40,30,.06); }
.gallery-card .section-title { margin-bottom: clamp(24px, 2.6vw, 40px); }
/* two rows that flow into columns and scroll horizontally: with the current
   photos it looks like the same 4×2 grid, but «БОЛЬШЕ ФОТО» / a swipe pages
   to the next columns as soon as more photos are added. */
.gallery-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 1fr);
  grid-auto-columns: calc((100% - 3 * clamp(14px, 1.4vw, 22px)) / 4);
  gap: clamp(14px, 1.4vw, 22px);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
  /* a small gutter on every side so the green hover frame around a photo is
     never clipped by the scroll container (top / left were getting cut) */
  padding: 7px; scroll-padding: 7px; }
.gallery-grid::-webkit-scrollbar { display: none; }
.gal-item { aspect-ratio: 1 / 1; border-radius: 22px; overflow: hidden; background: #eef4ef;
  scroll-snap-align: start; cursor: pointer; transition: box-shadow .2s var(--ease); }
.gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-item:hover { box-shadow: 0 0 0 3px #5FC24A; }
.gallery-more { margin-top: clamp(24px, 2.6vw, 38px); }
.gallery-more .all-arrow { width: 86px; height: 14px; color: var(--green); flex: none; }
/* gallery nav arrows: hidden on desktop (grid), shown on mobile over the strip */
.gal-arrow { display: none; }

/* ===================== EQUIP ===================== */
.equip { padding: 30px 0 90px; }
/* header row: title + green line stretching to the right edge */
.equip-head { display: flex; align-items: center; gap: 30px; margin-bottom: 26px; }
.equip-head .section-title { margin-bottom: 0; white-space: nowrap; }
.equip-line { display: block; flex: 1; height: 4px; border-radius: 2px; background: #46B54A; }
.equip-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 44px; align-items: center; }
.equip-plan-wrap { position: relative; }
.equip-plan { display: block; width: 100%; }
.equip-list { padding-top: 6px; }

/* Accordion */
.acc { border-bottom: 1px solid #e2e6e2; }
.acc-head { width: 100%; background: none; border: none; text-align: left; font-family: inherit;
  font-size: 18px; cursor: pointer; padding: 18px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.acc-title { color: var(--green-d); font-weight: 400; line-height: 1.3; transition: color .2s; }
.acc.open .acc-title { color: #46B54A; font-weight: 700; }

.acc-ic { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #cdd2cd; color: #aab0aa;
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; transition: border-color .25s, color .25s; }
.acc-ic svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.acc.open .acc-ic { border-color: #46B54A; color: #46B54A; }
.acc.open .acc-ic svg { transform: rotate(180deg); }

.acc-body { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.acc-body p { padding: 0 30px 22px 2px; color: #111; font-weight: 400; font-size: 16px; line-height: 1.4; }

/* ===================== SCHEDULE ===================== */
.schedule { padding: 20px 0 90px; }
.sched-card { position: relative; overflow: visible; background: #82C63C; border-radius: 36px;
  padding: clamp(34px, 3.6vw, 52px); padding-left: clamp(56px, 6.5vw, 110px); padding-right: clamp(190px, 23vw, 330px);
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "cal text" "actions actions";
  align-items: start; column-gap: clamp(28px, 3.6vw, 58px); row-gap: clamp(18px, 2.4vw, 34px);
  box-shadow: 0 22px 48px rgba(140,198,63,.30); }

.sched-cal { grid-area: cal; align-self: start; width: clamp(160px, 17.5vw, 256px); height: auto;
  margin-top: 26px; transform: rotate(-9deg); filter: drop-shadow(0 12px 20px rgba(60,90,30,.18)); }
.sched-text { grid-area: text; }
.sched-actions { grid-area: actions; display: flex; align-items: center; gap: clamp(28px, 4vw, 60px); margin-top: clamp(8px, 1.4vw, 22px); }

.sched-eyebrow { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.22);
  color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  padding: 8px 18px; border-radius: 30px; margin-bottom: 18px; }
.sched-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }

.sched-text h2 { color: #fff; font-size: clamp(30px, 3.3vw, 46px); font-weight: 800; line-height: 1.08; margin-bottom: 16px; }
.sched-text p { color: var(--green-d); font-weight: 400; font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.5; max-width: 540px; margin-bottom: 28px; }

.sched-buttons { display: flex; align-items: center; gap: clamp(18px, 2vw, 30px); flex-wrap: wrap; }
.sched-btn { display: inline-flex; align-items: center; gap: 14px; background: var(--green-d); color: #fff;
  font-weight: 700; font-size: 16px; padding: 16px 26px; border-radius: 14px;
  transition: background .2s var(--ease), transform .2s var(--ease); }
.sched-btn:hover { background: var(--green-dd); transform: translateY(-2px); }
.sched-btn svg { width: 18px; height: 18px; color: #8CD64A; flex: none; }
.sched-link { display: inline-flex; align-items: center; gap: 10px; color: var(--green-d); font-weight: 700;
  font-size: 16px; text-decoration: underline; text-underline-offset: 4px; }
.sched-link svg { width: 20px; height: 18px; flex: none; }
.sched-link:hover { color: var(--green-dd); }

.sched-mascot { position: absolute; right: clamp(2px, 1.2vw, 26px); bottom: -40px;
  height: calc(100% + 74px); width: auto; pointer-events: none; }

/* ===================== REVIEWS ===================== */
.reviews { padding: 20px 0 90px; }
.reviews-inner { display: grid; grid-template-columns: 1.72fr 1fr; gap: 30px; align-items: stretch; }

/* Left gradient card */
.reviews-card { position: relative; overflow: hidden; border-radius: 36px;
  background: linear-gradient(180deg, #85C63F 0%, #82C44C 7%, #77BE7E 18%, #72BBB0 28%, #77BED9 40%, #7AC0E6 56%, #7CC1EA 100%);
  padding: clamp(34px, 3.4vw, 54px) clamp(30px, 3.2vw, 50px) clamp(30px, 3vw, 46px);
  display: flex; flex-direction: column; }
.reviews-wave { position: absolute; top: clamp(16px, 2vw, 40px); right: 0; width: 62%; max-width: 560px; height: auto; pointer-events: none; z-index: 1; }
.reviews-heading { position: relative; z-index: 2; color: #fff; font-size: clamp(30px, 3.2vw, 46px); font-weight: 800; line-height: 1.05; }
.reviews-rule { position: relative; z-index: 2; display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.92);
  margin: clamp(22px, 2.6vw, 36px) 6px clamp(22px, 2.6vw, 34px); }
/* horizontal carousel of "pages"; each page = two reviews, free-scroll + snap.
   the bottom padding leaves room for the cards' drop shadow. */
.reviews-grid { position: relative; z-index: 2; display: flex; gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 0 16px; }
.reviews-grid::-webkit-scrollbar { display: none; }
/* a page fills the view; its two cards sit side by side (desktop) */
.review-page { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; display: flex; gap: 18px; align-items: stretch; }
.review-page > .review-card { flex: 1 1 0; min-width: 0; }
.review-card { background: #fff; border-radius: 22px; padding: clamp(22px, 2.3vw, 32px); box-shadow: 0 16px 32px rgba(40,80,90,.12); }
.stars { color: var(--green-d); font-size: 19px; letter-spacing: 3px; margin-bottom: clamp(16px, 1.9vw, 26px); }
.review-card p { font-size: clamp(15px, 1.18vw, 17px); color: #1b1b1b; font-weight: 400; line-height: 1.5; margin-bottom: clamp(20px, 2.4vw, 34px); }
.review-author { color: var(--green-d); font-weight: 400; font-size: clamp(14px, 1vw, 16px); }
.reviews-more { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 16px; margin-top: clamp(22px, 2.4vw, 34px);
  color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .8px; text-transform: uppercase; }
.reviews-more svg { width: 60px; height: 13px; color: #fff; flex: none; }

/* Right form card */
.review-form-card { background: #F1F3F2; border: 2px solid #46B54A; border-radius: 36px;
  padding: clamp(30px, 3vw, 46px) clamp(26px, 2.6vw, 38px); box-shadow: none;
  display: flex; flex-direction: column; }
.review-form-card h3 { font-size: clamp(28px, 3vw, 44px); font-weight: 800; color: var(--green-d); line-height: 1.05; margin-bottom: clamp(16px, 1.8vw, 22px); }
.review-form { display: flex; flex-direction: column; flex: 1; }
/* star rating, right under the title */
.review-rating { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 16px); flex-wrap: wrap;
  margin-bottom: clamp(16px, 1.8vw, 24px); }
.review-rating-label { font-size: 14px; font-weight: 700; color: var(--green-d); }
.rating-stars { display: inline-flex; gap: 6px; }
.rating-star { border: 0; background: none; padding: 2px; line-height: 0; cursor: pointer; color: #C6D3CD;
  transition: transform .12s var(--ease), color .12s var(--ease); }
.rating-star svg { width: clamp(26px, 2.4vw, 32px); height: clamp(26px, 2.4vw, 32px); display: block; fill: currentColor; }
.rating-star.on { color: var(--green-d); }
.rating-star:hover { transform: scale(1.12); }
.rating-star:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 6px; }
.rating-star.pop { animation: star-pop .3s var(--ease); }
@keyframes star-pop { 0% { transform: scale(1); } 40% { transform: scale(1.32); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .rating-star, .rating-star.pop { transition: none; animation: none; } }
.review-fields { background: #fff; border-radius: 20px; padding: clamp(15px, 1.5vw, 20px); display: flex; flex-direction: column; gap: 13px; flex: 1; }
.review-fields input, .review-fields textarea {
  font-family: inherit; font-size: 15px; padding: 14px 16px; border-radius: 12px; border: 1.5px solid #6FB29A; background: #fff; color: var(--ink); resize: none; transition: border .2s; }
/* smaller review box; still flexes to fill the (unchanged) card height */
.review-fields textarea { flex: 1; min-height: 84px; }
.review-fields input::placeholder, .review-fields textarea::placeholder { color: #9aa3a0; }
.review-fields input:focus, .review-fields textarea:focus { outline: none; border-color: var(--green); }
.review-submit { align-self: flex-start; margin-top: clamp(20px, 2.2vw, 30px); background: var(--green-d); color: #fff;
  font-family: inherit; font-weight: 600; font-size: 16px; padding: 14px 32px; border: none; border-radius: 12px; cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease); }
.review-submit:hover { background: var(--green-dd); transform: translateY(-2px); }

/* Signup form inputs — white framed, transparent fill over the gradient */
.signup-form input {
  font-family: inherit; font-size: 16px; padding: 18px 24px; border-radius: 14px;
  border: 2px solid rgba(255,255,255,.75); background: transparent; color: #fff; resize: none; transition: border .2s;
}
.signup-form input::placeholder { color: rgba(255,255,255,.85); }
.signup-form input:focus { outline: none; border-color: #fff; }

/* ===================== FAQ ===================== */
.faq { padding: 20px 0 90px; }
.faq-line { display: block; height: 4px; border-radius: 2px; background: #46B54A; margin-bottom: 30px; }
.faq-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: center; }
.faq-list { margin-top: 24px; }
.faq-mascot { width: 100%; max-width: 100%; justify-self: center; border-radius: 28px; }

/* ===================== SIGNUP ===================== */
/* horizontal padding leaves a bit of empty space between the green box and the screen edges */
.signup { padding: 20px clamp(20px, 3.5vw, 64px) 90px; }
.signup-inner { position: relative; overflow: hidden; border-radius: 44px; text-align: center; color: #fff;
  background: linear-gradient(180deg, #A8CB3A 0%, #84C13E 12%, #49B24B 30%, #3CAF49 58%, #36A948 100%);
  padding: clamp(48px, 5vw, 78px) clamp(30px, 4vw, 60px) clamp(40px, 4.4vw, 70px);
  box-shadow: 0 24px 50px rgba(40,150,60,.24); }
.signup-wave { position: absolute; top: 50%; right: 0; transform: translateY(-46%); width: 86%; max-width: 1500px; height: auto; pointer-events: none; z-index: 0; }
.signup-inner h2 { position: relative; z-index: 1; font-size: clamp(28px, 3.6vw, 50px); font-weight: 800; line-height: 1.08; margin-bottom: clamp(14px, 1.6vw, 22px); }
.signup-inner > p { position: relative; z-index: 1; color: rgba(255,255,255,.96); font-weight: 400; font-size: clamp(16px, 1.5vw, 22px); line-height: 1.4; margin-bottom: clamp(28px, 3vw, 42px); }
.signup-form { position: relative; z-index: 1; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; max-width: 760px; margin: 0 auto clamp(22px, 2.4vw, 32px); }
.signup-form input { flex: 1; min-width: 240px; }
.signup-btn { position: relative; z-index: 1; flex-basis: 100%; max-width: 460px; margin: clamp(6px, 1.2vw, 14px) auto 0;
  border: none; cursor: pointer; border-radius: 16px; padding: 18px 40px; font-size: 17px; font-weight: 700; }
.signup-inner small { position: relative; z-index: 1; display: block; color: rgba(255,255,255,.88); font-size: 13px; }

/* line-break toggles: .br-d shows on desktop only, .br-m on mobile only */
.br-m { display: none; }

/* ===================== FOOTER ===================== */
.footer { background: #fff; padding: 50px 0 0; }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: clamp(26px, 3vw, 40px); padding-bottom: 34px; }
.footer-phone { font-size: clamp(28px, 3vw, 40px); font-weight: 800; color: var(--green-d); letter-spacing: .5px; }
.footer-main { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.footer-center { grid-column: 2; justify-self: center; display: flex; align-items: center; gap: clamp(20px, 2.4vw, 34px); flex-wrap: wrap; justify-content: center; }
.footer-nav { display: flex; gap: clamp(20px, 2vw, 32px); flex-wrap: wrap; justify-content: center; }
.footer-nav a { color: var(--green-d); font-weight: 600; font-size: 15px; }
.footer-nav a:hover { color: var(--green); }
.footer-socials { display: flex; gap: 10px; }
.footer-logo { grid-column: 3; justify-self: end; height: 54px; width: auto; }
.footer-bottom { border-top: 3px solid var(--green); }
.footer-bottom-inner { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; padding: 22px 0 30px; }
.footer-links { display: flex; gap: 34px; }
.footer-links a { color: var(--green-d); font-weight: 600; font-size: 14px; }
.footer-links a:hover { color: var(--green); }
.copyright { color: var(--muted); font-size: 13px; font-weight: 600; }

/* ===================== MESSENGER FLOAT ===================== */
.wa-float { position: fixed; right: 26px; bottom: 26px; width: 60px; height: 60px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(37,211,102,.45); z-index: 200; transition: transform .2s var(--ease); animation: waPulse 2.4s infinite; }
.wa-float:hover { transform: scale(1.08); }
@keyframes waPulse { 0%,100% { box-shadow: 0 10px 30px rgba(37,211,102,.45); } 50% { box-shadow: 0 10px 30px rgba(37,211,102,.45), 0 0 0 14px rgba(37,211,102,.0); } }

/* the wrapper carries the fixed position; the (former WhatsApp) circle lives inside */
.msg-float { position: fixed; right: 26px; bottom: 26px; z-index: 200; }
.msg-float .wa-float { position: relative; right: auto; bottom: auto; border: 0; cursor: pointer; padding: 0; font-family: inherit; }
/* the three logos stack on the circle and crossfade in a loop:
   the incoming icon rolls up into place, the outgoing one rolls away upward */
.mf-ic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff;
  opacity: 0; transform: translateY(16px) scale(.4) rotate(-30deg); pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease); }
.mf-ic.is-on { opacity: 1; transform: none; }
.mf-ic.is-out { opacity: 0; transform: translateY(-16px) scale(.4) rotate(30deg); }
.mf-max { font-weight: 800; font-size: 15px; letter-spacing: .5px; }
/* chooser: pops up above the button */
.msg-menu { position: absolute; right: 0; bottom: calc(100% + 14px); display: flex; flex-direction: column; gap: 4px;
  background: #fff; border-radius: 18px; padding: 10px; box-shadow: 0 18px 44px rgba(20,40,30,.24); min-width: 200px;
  opacity: 0; transform: translateY(12px) scale(.94); transform-origin: bottom right; pointer-events: none; visibility: hidden;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; }
.msg-float.open .msg-menu { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.msg-opt { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 12px;
  font-weight: 700; font-size: 15px; color: var(--green-d); transition: background .15s; }
.msg-opt:hover { background: #F0F6F0; }
.msg-opt:focus-visible { outline: 3px solid var(--green); outline-offset: 1px; }
.msg-ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  color: #fff; flex: none; font-weight: 800; font-size: 17px; }
.mi-wa { background: #25D366; }
.mi-tg { background: #229ED9; }
.mi-max { background: linear-gradient(135deg, #7B4DFF 0%, #2E9BFF 100%); }
.mi-vk { background: #0077FF; }
@media (prefers-reduced-motion: reduce) { .mf-ic, .msg-menu { transition: none; } }

/* ===================== SCROLL REVEAL ===================== */
/* Fail-safe: content is visible by default. The reveal animation only
   applies once JS has confirmed it can run (html.js-reveal). This guarantees
   that if the observer never fires (or JS fails), sections never stay blank. */
.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js-reveal .reveal { opacity: 0; transform: translateY(48px); }
.js-reveal .reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .js-reveal .reveal { opacity: 1; transform: none; transition: none; } .wa-float { animation: none; } }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1080px) {
  .hero-text { width: 46%; flex-basis: 46%; }
  .hero-media { width: min(70vw, 720px); }
  .car-track > * { flex-basis: calc((100% - 40px) / 2.6); }
  .develop-band { grid-template-columns: repeat(3, 1fr); gap: 28px 16px; }
}
@media (max-width: 820px) {
  /* stack the first-lesson steps vertically on small screens */
  .how-stage { aspect-ratio: auto; max-width: 420px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .how-bg-curve { display: none; }
  .how-step { position: static; width: 100%; }
  .how-cta { position: static; width: 100%; aspect-ratio: 1; max-width: 200px; margin: 0 auto; }
  .deco-bigarc { display: none; }
}
/* the inline top menu fits on one line only from 1120px up — below that
   (tablets incl. iPad Pro portrait) the hamburger menu is used instead */
@media (max-width: 1119px) {
  .nav-toggle { display: flex; }
  /* the nav becomes a full-width dropdown under the green bar when the burger is tapped */
  .topnav { display: none; }
  .header.nav-open .topnav {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 56px; left: 0; right: 0; z-index: 90;
    background: var(--green); padding: 4px 20px 14px;
    box-shadow: 0 16px 26px rgba(0, 0, 0, .16); flex-wrap: nowrap;
  }
  .header.nav-open .topnav a { font-size: 16px; font-weight: 600; padding: 13px 2px;
    border-top: 1px solid rgba(255, 255, 255, .22); }
  .header.nav-open .topnav a:first-child { border-top: none; }
}
@media (max-width: 900px) {
  .hero-inner { flex-direction: column; min-height: 0; padding-top: 22px; padding-bottom: 44px; text-align: center; }
  /* mobile hero stacking order: title, subtitle, image, then the two buttons.
     display:contents lets the buttons (inside .hero-text) be ordered between
     the subtitle and the image without any HTML change. */
  .hero-text { display: contents; }
  .hero-text h1 { order: 1; white-space: normal; font-size: clamp(28px, 7vw, 40px); color: #111; }
  .hero-text h1 .h1-bold { color: var(--green-d); }
  .hero-sub { order: 2; font-size: 17px; color: #111; margin: clamp(10px, 3vw, 16px) auto clamp(4px, 1.5vw, 10px); }
  .hero-media { order: 3; position: static; transform: none; width: 100%; max-width: 520px; margin: clamp(16px, 4.5vw, 24px) auto clamp(20px, 5.5vw, 28px); }
  .hero-buttons { order: 4; align-items: center; width: 100%; }
  .hero-buttons .btn { min-width: 0; width: 100%; max-width: 440px; font-size: 16px; padding: 16px 30px; }
  .features-band { grid-template-columns: 1fr; gap: 36px; padding: 44px 28px; }
  /* «Наша методика»: smaller stacked cards with clear gaps, stronger tilts,
     desktop decorations (red top-right curve, yellow & green sparks) */
  .method-stage { position: relative; aspect-ratio: auto; max-width: 400px;
    width: calc(100vw - 64px); display: flex; flex-direction: column; gap: 0; margin: 32px auto 0; }
  .method-wave { display: none; }
  .mcard-wrap { position: relative; width: 100%; }
  .mw-red    { left: auto; top: auto; transform: rotate(-6deg); z-index: 1; }
  .mw-yellow { left: auto; top: auto; transform: rotate(5deg);  z-index: 2; margin-top: 4px; }
  .mw-green  { left: auto; top: auto; transform: rotate(-6deg); z-index: 3; margin-top: -8px; }
  /* preferred square-ish shape, but let the card grow if the text needs more */
  .method-card { aspect-ratio: auto; min-height: calc(min(400px, 100vw - 64px) / 1.15); }
  .mcard-body { padding: 30px 26px; }
  /* text stays level (counter-rotated against the card tilt), like desktop */
  .mw-red    .mcard-body { transform: rotate(6deg); }
  .mw-yellow .mcard-body { transform: rotate(-5deg); }
  .mw-green  .mcard-body { transform: rotate(6deg); }
  .method-card h3 { font-size: 27px; }
  .method-card p { font-size: 17px; }
  /* narrower cards: let the paragraphs wrap naturally like the mock */
  .method-card p br { display: none; }
  /* red curve: only at the top-right, outside the card */
  .corner-curve.cc-bl { display: none; }
  .corner-curve.cc-tr { width: 82px; top: -36px; right: -30px; }
  /* yellow spark anchored to the yellow card's top-left corner
     (drawn as a pseudo-element so it follows the card on any screen) */
  .spark-yellow { display: none; }
  .mw-yellow::before { content: ""; position: absolute; width: 48px; height: 49px;
    top: -40px; left: -46px; z-index: 4; transform: rotate(178deg);
    background: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 64.957092 66.326172%22 fill%3D%22%23FCC400%22%3E%3Cpath d%3D%22M8.98 29.34 C8.39 27.21 6.19 25.96 4.06 26.55 C1.93 27.13 0.68 29.34 1.27 31.47 L5.12 30.40 L8.98 29.34 Z M10.06 63.39 C10.64 65.52 12.84 66.77 14.97 66.18 C17.10 65.60 18.35 63.39 17.77 61.26 L13.91 62.33 L10.06 63.39 Z M5.12 30.40 L1.27 31.47 L10.06 63.39 L13.91 62.33 L17.77 61.26 L8.98 29.34 L5.12 30.40 Z M19.53 20.31 C18.00 18.72 15.47 18.67 13.88 20.20 C12.29 21.74 12.24 24.27 13.77 25.86 L16.65 23.08 L19.53 20.31 Z M40.19 53.25 C41.72 54.84 44.26 54.89 45.85 53.35 C47.44 51.82 47.48 49.29 45.95 47.70 L43.07 50.47 L40.19 53.25 Z M16.65 23.08 L13.77 25.86 L40.19 53.25 L43.07 50.47 L45.95 47.70 L19.53 20.31 L16.65 23.08 Z M23.98 4.31 C21.82 3.83 19.68 5.18 19.20 7.34 C18.71 9.49 20.06 11.63 22.22 12.12 L23.10 8.22 L23.98 4.31 Z M54.74 19.46 C56.89 19.95 59.03 18.59 59.52 16.44 C60.01 14.28 58.66 12.14 56.50 11.66 L55.62 15.56 L54.74 19.46 Z M23.10 8.22 L22.22 12.12 L54.74 19.46 L55.62 15.56 L56.50 11.66 L23.98 4.31 L23.10 8.22 Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
  /* green spark bursting out of the green card's bottom-right corner */
  .spark-green { width: 46px; left: auto; right: -30px; bottom: -44px; transform: rotate(14deg); }
  .space-card, .equip-inner, .reviews-inner, .faq-inner, .sched-card { grid-template-columns: 1fr; }
  /* .reviews-grid keeps its two-per-view carousel layout on every size */
  .space-photo { aspect-ratio: 4 / 3; }
  .sched-card { grid-template-areas: "cal" "text" "actions"; padding: 36px 28px 0; justify-items: center; text-align: center; }
  .sched-cal { width: 168px; transform: rotate(-9deg); margin: 0 0 6px; }
  .sched-text p { margin-left: auto; margin-right: auto; }
  .sched-actions { flex-wrap: wrap; justify-content: center; }
  .sched-mascot { position: static; height: auto; width: 230px; margin: 10px auto 0; }
  .coaches-grid { grid-template-columns: 1fr; gap: 10px; }
  .coaches-mascot { min-height: 0; max-width: 360px; margin: 8px auto 24px; }
  .mascot-roo { width: 58%; margin-left: 30%; margin-top: 0; }
  .mascot-arch { width: 52%; left: 2%; bottom: 6%; }
  .coach-card { flex-basis: 84%; }
  .cstage-prev { left: 8%; } .cstage-next { right: 8%; }
  .car-track > * { flex-basis: calc((100% - 24px) / 2); }
  .sched-mascot, .faq-mascot { max-width: 220px; margin: 0 auto; }
}
@media (max-width: 620px) {
  .container { padding: 0 16px; }
  .section-title { font-size: 27px; }
  /* «Что есть у нас в зале?»: the gallery card's bottom border above already
     separates the sections, so this section's own green line is hidden and
     the heading moves up close to it */
  .equip { padding: 8px 0 34px; }
  .equip-head { flex-direction: column-reverse; align-items: stretch; gap: 0; margin-bottom: 16px; }
  .equip-head .section-title { white-space: normal; text-align: center; }
  .equip-line { display: none; }
  .equip-inner { gap: 8px; }
  /* «Расписание занятий» teaser: near-square vertical card — calendar on the
     left, text (eyebrow / title / black paragraph) on the right, then the dark
     button and the underlined link stacked beneath. No mascot. */
  .schedule { padding: 7px 0 34px; }
  .sched-card {
    grid-template-columns: auto 1fr; grid-template-areas: "cal text" "actions actions";
    padding: 26px 18px 28px; column-gap: 16px; row-gap: 20px;
    justify-items: stretch; text-align: left; align-items: center; border-radius: 30px;
  }
  .sched-mascot { display: none; }
  /* calendar centred between the card's top edge and the dark button below */
  .sched-cal { width: clamp(88px, 27vw, 112px); margin: 0; transform: rotate(-9deg); align-self: center; }
  .sched-eyebrow { font-size: 11px; padding: 6px 13px; margin-bottom: 10px; }
  .sched-text h2 { font-size: clamp(23px, 7vw, 28px); margin-bottom: 8px; }
  .sched-text p { color: #111; font-size: clamp(13px, 3.9vw, 15px); line-height: 1.45; margin-bottom: 0; }
  .sched-text p br { display: none; }        /* let the narrow column wrap naturally */
  .sched-actions { flex-direction: column; align-items: center; gap: 15px; margin-top: 0; }
  .sched-btn { width: 100%; max-width: 300px; justify-content: center; font-size: 15px; padding: 15px 22px; }
  .sched-link svg { color: var(--green); }   /* green arrow beside the underlined link */
  /* full-bleed image: break out of the 16px container padding */
  .equip-plan-wrap { margin: 0 -16px; }
  .equip-list { padding-top: 10px; }
  /* «Что будем развивать»: everything inside one rounded, light-green→white card.
     Title white/bold at the top; items in a 2 + 2 + 1(centred) grid. */
  .develop { padding: 22px 0 56px; }
  .develop-card {
    border: 2px solid var(--dev-green);
    border-radius: 30px;
    background: linear-gradient(180deg, var(--dev-green) 0%, #E9F6CC 44%, #FFFFFF 100%);
    padding: clamp(18px, 5vw, 26px) clamp(14px, 4vw, 22px) clamp(24px, 7vw, 34px);
    box-shadow: 0 14px 32px rgba(120, 185, 40, .18);
  }
  .develop-card .section-title {
    color: #fff; font-weight: 800; text-align: center;
    margin: 2px 0 clamp(16px, 5vw, 24px);
    font-size: clamp(24px, 8.5vw, 36px); line-height: 1.06;
  }
  .develop-card .section-title .dv-t1 { display: block; }
  .develop-band {
    background: none; border-radius: 0; padding: 0;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 6vw, 32px) clamp(10px, 3vw, 20px);
    align-items: start;
  }
  .develop-band .dev-item:nth-child(5) { grid-column: 1 / -1; }
  .develop-band .dev-ic { width: clamp(84px, 30vw, 132px); margin-bottom: clamp(6px, 2vw, 12px); }
  .develop-band .dev-item p { font-size: clamp(13px, 4vw, 17px); }

  /* «Пространство для движения…»: one rounded card with a light-green
     outline and a light-green→white ombré. Title (3 lines) at the top,
     then tick rows divided by green lines, then the flipped photo. */
  .space { padding: 22px 0 56px; }
  .space-rule { display: none; }             /* the card carries its own outline */
  .space-card {
    border: 2px solid var(--dev-green);
    background: linear-gradient(180deg, var(--dev-green) 0%, #E9F6CC 42%, #FFFFFF 100%);
    border-radius: 30px;
    padding: clamp(22px, 6vw, 32px) clamp(18px, 5vw, 26px) clamp(24px, 7vw, 34px);
    margin: 18px 0;
    box-shadow: 0 14px 32px rgba(120, 185, 40, .16);
  }
  .space-text h2 { text-align: center; font-size: clamp(24px, 7.4vw, 32px); line-height: 1.16;
    margin-bottom: clamp(14px, 4.5vw, 22px); }
  .space-list { gap: 0; }
  .space-list li {
    font-weight: 400;                        /* not bold */
    color: #0E4B57;                          /* dark greenish-blue */
    font-size: clamp(15px, 4.4vw, 19px);
    padding: clamp(11px, 3.4vw, 15px) 0 clamp(11px, 3.4vw, 15px) 48px;
    border-top: 1.5px solid #46B54A;         /* line above each tick + text */
  }
  .space-list li:last-child { border-bottom: 1.5px solid #46B54A; }  /* line below the last */
  .space-photo { margin-top: clamp(20px, 6vw, 28px); aspect-ratio: 4 / 3; }
  .space-photo img { transform: scaleX(-1); }  /* horizontal flip */
  /* Gallery «Познакомьтесь с залом!»: drop the boxed outline — separate the
     slide with a green line on top and bottom. Photos scroll in one row.
     «БОЛЬШЕ ФОТО» centred at the bottom, above the lower line. */
  /* «Наши тренеры»: big title, 3-line lead, white outlined cards, then the
     round prev/next arrows on the left with СМОТРЕТЬ ВСЕХ on the same line */
  .coaches { padding: 18px 0 26px; }
  .coaches-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .coaches-intro { display: contents; }        /* lets СМОТРЕТЬ ВСЕХ move below the cards */
  .coaches-title { order: 1; white-space: normal; font-size: 34px; font-weight: 700; }
  .coaches-lead { order: 2; font-size: 15px; max-width: none; margin: 14px 0 20px; }
  .coaches-lead br { display: none; }
  .coaches-lead .br-m, .coaches-lead br.br-m { display: inline; }
  .coaches-mascot { display: none; }
  .coaches-stage { order: 3; padding-bottom: 72px; }
  .coaches-all { order: 4; align-self: flex-end; margin: -38px 2px 0 0; position: relative; z-index: 5; }
  .cstage-viewport { padding: 8px 0 12px; }
  .cstage-track { gap: 12px; }                 /* lets the neighbours peek at the edges */
  .coach-card { flex: 0 0 80%; background: #fff; border: 2px solid #BFE49E; opacity: 1;
    border-radius: 24px; padding: 16px 16px 20px; }
  .coach-card.is-active { border-color: #5FC24A; box-shadow: none; }
  .coach-tags { gap: 8px; margin-bottom: 14px; }
  .tag-pos, .tag-exp { font-weight: 400; font-size: 11px; padding: 8px 13px; border-radius: 12px; }
  .coach-photo { aspect-ratio: 1; border-radius: 16px; }
  .coach-card h3 { font-size: 27px; margin: 14px 2px 10px; }
  .coach-card p { font-size: 13px; margin: 0 2px; }
  .coach-card p br { display: none; }
  .coach-card p br.br-m { display: inline; }
  /* round arrows: bottom-left, side by side */
  .cstage-arrow { top: auto; bottom: 0; width: 52px; height: 52px; border-width: 2px; box-shadow: none; }
  .cstage-prev { left: 2px; transform: none; }
  .cstage-next { left: 68px; right: auto; transform: none; }
  .cstage-prev:hover, .cstage-next:hover { transform: none; }
  .cstage-arrow:disabled { opacity: .35; pointer-events: none; }

  .gallery { padding: 8px 0 24px; }
  .gallery-card {
    background: none; border: none; border-radius: 0; box-shadow: none;
    border-top: 2px solid #5FC24A; border-bottom: 2px solid #5FC24A;
    padding: clamp(28px, 8.4vw, 42px) 16px;
    margin-left: -16px; margin-right: -16px;   /* lines run edge-to-edge */
  }
  .gallery-card .section-title { font-weight: 600; margin-bottom: clamp(16px, 5vw, 24px); }
  .gallery-grid {
    display: flex; grid-template-columns: none;
    gap: 12px; overflow-x: auto;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    padding: 7px; scroll-padding: 7px; scrollbar-width: none;  /* gutter for the hover frame */
  }
  .gallery-grid::-webkit-scrollbar { display: none; }
  .gal-item { flex: 0 0 auto; width: clamp(150px, 58vw, 210px); scroll-snap-align: center; border-radius: 18px; }
  /* no arrows on mobile — the strip auto-scrolls until the visitor swipes */
  .gallery-strip { position: relative; }
  .gal-arrow { display: none; }
  .gallery-more {
    display: flex; justify-content: center; align-items: center;
    margin-top: clamp(18px, 5vw, 26px);
    color: #0E4B57; font-weight: 400;      /* dark greenish-blue, not bold */
  }
  .gallery-more .all-arrow { color: var(--dev-green); }   /* light green, points right */
  .car-track > * { flex-basis: 100%; }
  .car-prev { left: -6px; } .car-next { right: -6px; }
  /* reviews carousel: each page stacks its two full-width cards vertically,
     just like the original mobile layout — the arrow/scroll pages by two */
  .review-page { flex-direction: column; gap: 22px; }
  .reviews-grid { padding-bottom: 22px; }
  /* FAQ separator line: edge-to-edge, thin neon green, midway between sections */
  .reviews { padding-bottom: 22px; }
  .faq { padding-top: 20px; }
  .faq-line { margin: 0 -16px 42px; height: 2px; background: #5FC24A; }
  /* «Частые вопросы»: centred title, then the big kangaroo photo, then the Q&As */
  .faq-inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .faq-left { display: contents; }
  .faq-left .section-title { order: 1; text-align: center; margin-bottom: 18px; }
  .faq-mascot { order: 2; width: 100%; max-width: 100%; margin: 0 0 24px; border-radius: 28px; }
  .faq-list { order: 3; }
  /* ---- footer (mobile) ---- : phone + socials on top row, nav list on the
     left with the logo to its lower-right, then the divider + centred legal.
     display:contents flattens the wrappers so every leaf can be placed on one
     grid. */
  .footer { padding-top: 16px; }        /* far less gap under the signup card */
  .footer-inner {
    display: grid; grid-template-columns: 1fr auto;
    grid-template-areas: "phone socials" "nav logo";
    column-gap: 14px; row-gap: 22px; padding-bottom: 26px; text-align: left; align-items: center;
  }
  .footer-main, .footer-center { display: contents; }
  .footer-spacer { display: none; }
  .footer-phone { grid-area: phone; justify-self: start; white-space: nowrap; font-size: clamp(21px, 6.4vw, 27px); }
  .footer-socials { grid-area: socials; justify-self: end; gap: 12px; }
  .footer-nav { grid-area: nav; flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-nav a { font-size: 16px; font-weight: 600; }
  .footer-logo { grid-area: logo; justify-self: end; align-self: end; height: auto; width: clamp(120px, 38vw, 150px); }
  /* legal block: stacked + centred, policy links black, copyright dark blue */
  .footer-links { flex-direction: column; gap: 10px; align-items: center; }
  .footer-links a { color: #111; }
  .copyright { color: var(--green-d); }
  /* a little more breathing room under the green divider */
  .footer-bottom-inner { padding-top: 34px; }
  .topbar-phone { font-size: 15px; }

  /* ---- top header (mobile) ---- */
  /* a taller white bar with a larger logo and more air above/below it */
  .brandbar-inner { height: 88px; gap: 10px; }
  .logo-link { flex: 0 0 auto; }
  .logo { height: clamp(41px, 13.4vw, 50px); max-width: none; }
  /* actions grouped tight on the right, gaps a touch smaller */
  .brandbar-actions { flex: 0 0 auto; gap: clamp(4px, 1.6vw, 6px); }
  /* «Пробное занятие»: slightly smaller still, rectangular with light rounding.
     Sizes scale with the viewport so even 320px phones fit without overflow. */
  .brandbar-actions .btn-orange {
    padding: 9px clamp(8px, 3vw, 12px); font-size: clamp(10px, 3.1vw, 11.5px); border-radius: 10px;
    box-shadow: 0 6px 14px rgba(255, 106, 43, .26);
  }
  /* VK + phone: square-ish, rounded corners, matched to the button height */
  .brandbar-actions .circle-btn { width: clamp(31px, 9.6vw, 35px); height: clamp(31px, 9.6vw, 35px); border-radius: 10px; }
  /* even thinner green underline */
  .brandbar { border-bottom-width: 1.5px; }
  /* hero heading + subtitle sit on the left with the container's edge gap */
  .hero-inner { padding-top: 34px; text-align: left; align-items: flex-start; }
  .hero-text h1 { align-self: flex-start; }
  .hero-sub { margin-left: 0; margin-right: 0; align-self: flex-start; }

  /* ---- «Как проходит первое занятие»: diagonal zig-zag of circles ---- */
  .how { padding: 26px 0 52px; overflow: hidden; }  /* clip the edge-to-edge waves */
  .how .section-title { font-weight: 700; }      /* a touch lighter, still bold + dark greenish-blue */
  .how-stage {
    display: flex; flex-direction: column; align-items: stretch;
    grid-template-columns: none;                 /* cancel the ≤820 grid */
    aspect-ratio: auto; max-width: 340px; gap: 0;
    margin: 20px auto 0; position: relative;
  }
  /* circles alternate left / right, each pulled up so it sits diagonally
     below (and offset from) the one before — a clean staircase */
  .how-step { position: static; width: 47%; margin-top: -13%; z-index: 2; }
  .how-step.st1 { margin-top: 0; }
  .st1, .st3, .st5 { align-self: flex-start; }
  .st2, .st4 { align-self: flex-end; }
  .how-photo { border-width: 4px; }              /* thinner ring around each photo */
  .how-num b { font-size: 20px; }
  /* badges 2 and 5 sit on the top-RIGHT of their circles */
  .st2 .how-num { left: auto; right: -4%; }
  /* badge 5 centred ON the outline like the others (badge centre on the ring) */
  .st5 .how-num { left: auto; right: -15%; top: 20%; }
  /* red arc: above the small number badge — a bit lower, shorter, thicker
     and tilted 5° further clockwise */
  .st2 .deco-arc { left: 33%; top: -78%; height: 98%; transform: rotate(95deg); }
  .st2 .deco-arc path { stroke-width: 8; }
  .how-step h4 { font-size: 15px; margin-top: 10px; line-height: 1.2; }
  /* (number 5's big arc stays hidden — inherited from the ≤820 rules) */
  /* orange CTA: smaller circle to the right of circle 5, raised and nudged left */
  .how-cta {
    position: static; align-self: flex-end; width: 33%; max-width: none;
    margin: -24% 7% 0 0; aspect-ratio: 1; gap: 4%; z-index: 2;
  }
  .how-cta .cta-arrow { width: 32%; }
  .how-cta .cta-d { display: none; }
  .how-cta .cta-m { display: block; font-size: 13px; }
  /* three faint green waves behind the staircase */
  .how-wave-m { display: block; }
  /* 1 · full width at the level of circles 1–2: thicker, both humps showing.
     The artwork is stacked twice (its own left tail is nearly transparent) and
     slightly cropped so the wave stays visible at the page's left edge, then a
     mask keeps it dimmer on the left and bolder toward the right. */
  .hw-1 { top: 4%; left: calc(50% - 50vw); right: calc(50% - 50vw); width: auto; height: 100px;
    background: url("assets/img/how-curve.png") right center / 212% 100% no-repeat,
                url("assets/img/how-curve.png") right center / 212% 100% no-repeat;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.5) 0, #000 55%, #000 100%);
            mask-image: linear-gradient(to right, rgba(0,0,0,.5) 0, #000 55%, #000 100%); }
  /* 2 · fades in gradually from the very left edge, runs to the very end of the
     page, just above circle 4 */
  .hw-2 { top: 44%; left: calc(50% - 50vw); right: calc(50% - 50vw); width: auto; height: 74px; opacity: .95;
    -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.3) 35%, #000 75%, #000 100%);
            mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.3) 35%, #000 75%, #000 100%); }
  /* 3 · faint: a sliver to the left of circle 5, ending behind it —
     nothing shows to the circle's right */
  .hw-3 { top: 78%; left: calc(50% - 50vw); width: calc(2% + 50vw); height: 56px; opacity: .6;
    background-position: right center; background-size: 230% 100%;  /* use the artwork's bolder half */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 60%, transparent 92%);
            mask-image: linear-gradient(to right, #000 0, #000 60%, transparent 92%); }

  /* mobile line-break toggles */
  .br-d { display: none; }
  .br-m { display: inline; }

  /* Signup CTA: near-square card; title 2 lines, sub 3 lines, inputs stacked,
     button, then fine print 2 lines. Rectangle gradient/rounding unchanged. */
  .signup { padding: 16px 14px 22px; }   /* ~65% less blank space before the footer */
  .signup-inner {
    padding: clamp(24px, 6.5vw, 34px) clamp(20px, 5.5vw, 28px) clamp(24px, 6.5vw, 34px);
    display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  }
  .signup-inner h2 { font-size: clamp(25px, 7.6vw, 33px); line-height: 1.12; margin-bottom: clamp(9px, 3vw, 14px); }
  .signup-inner > p { font-size: clamp(14px, 4.2vw, 18px); line-height: 1.4; margin-bottom: clamp(16px, 4.5vw, 24px); }
  /* white wave raised so it flows behind the «Оставьте заявку…» subtitle
     (applies to both copies of this section) */
  .signup-wave { top: 14%; transform: none; width: 120%; }
  .signup-form { gap: 11px; margin-bottom: clamp(11px, 3vw, 16px); }
  .signup-form input {
    min-width: 100%; width: 100%; text-align: left;
    border-radius: 12px;              /* sharper than the default 14px, still soft */
    padding: 16px 18px; font-size: 15px;
  }
  .signup-form input::placeholder { color: rgba(255, 255, 255, .55); }
  .signup-btn { border-radius: 13px; padding: 16px 30px; font-size: 16px; max-width: 100%; }
  .signup-inner small { font-size: 12px; line-height: 1.4; }

  /* second slide (features): rounded square, each item is icon-left + text-right */
  .features-band {
    aspect-ratio: 1 / 1;
    grid-template-columns: 1fr;
    align-content: space-between;
    justify-items: start;
    gap: clamp(10px, 3vw, 18px);
    /* extra left padding pushes the icons + text further to the right, like the screenshot */
    padding: clamp(22px, 6vw, 34px) clamp(8px, 2.5vw, 16px) clamp(22px, 6vw, 34px) clamp(24px, 7.5vw, 52px);
    border-radius: 40px;
  }
  /* larger icons, a wider gap before the (much lighter) text */
  .feat { flex-direction: row; align-items: center; text-align: left; gap: clamp(20px, 7vw, 38px); width: 100%; }
  .feat-icon { width: clamp(74px, 23vw, 104px); height: auto; flex: 0 0 auto; }
  .feat p { font-size: clamp(16px, 5.2vw, 23px); font-weight: 500; }
  .feat p .ft-d { display: none; }
  .feat p .ft-m { display: inline; }
}

/* ===================== SCHEDULE PAGE ===================== */
.topnav a.is-active { font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }

.sched-hero { background: linear-gradient(180deg, #A8CB3A 0%, #6FBF40 30%, #3FAE49 100%); color: #fff; padding: clamp(40px, 5vw, 70px) 0 clamp(44px, 5vw, 74px); }
.sched-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.22); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; padding: 8px 18px; border-radius: 30px; }
.sched-hero h1 { font-size: clamp(30px, 4vw, 56px); font-weight: 800; line-height: 1.06; margin: clamp(16px, 1.8vw, 24px) 0 clamp(12px, 1.4vw, 18px); }
.sched-hero p { color: rgba(255,255,255,.96); font-weight: 400; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.5; max-width: 760px; }

.sched-page { padding: clamp(34px, 4vw, 60px) 0 clamp(50px, 6vw, 90px); background: var(--bg-soft); }
.sched-layout { display: grid; grid-template-columns: 1.62fr 0.9fr; gap: clamp(24px, 2.6vw, 40px); align-items: start; }
.sched-content { min-width: 0; }

/* Filters */
.sched-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(12px, 1.4vw, 20px);
  background: #fff; border: 1px solid #e7ece8; border-radius: 22px; padding: clamp(18px, 2vw, 26px); box-shadow: var(--shadow-sm); }
.filter-field { display: flex; flex-direction: column; gap: 7px; flex: 1 1 180px; min-width: 150px; }
.filter-field label { font-size: 13px; font-weight: 700; color: var(--green-d); letter-spacing: .2px; }
.filter-select { font-family: inherit; font-size: 15px; color: var(--ink); background: #fff; border: 1.5px solid #cfe0d4;
  border-radius: 12px; padding: 12px 38px 12px 14px; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230C5C46' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; transition: border-color .2s; }
.filter-select:focus { outline: none; border-color: var(--green); }
.filter-check { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--green-d); cursor: pointer; flex: 0 0 auto; padding-bottom: 12px; }
.filter-check input { width: 18px; height: 18px; accent-color: var(--green); cursor: pointer; }
.filter-reset { font-family: inherit; font-size: 14px; font-weight: 700; color: var(--green-d); background: transparent;
  border: 1.5px solid #cfe0d4; border-radius: 12px; padding: 12px 18px; cursor: pointer; transition: all .2s; flex: 0 0 auto; }
.filter-reset:hover { border-color: var(--green); color: var(--green); }

.sched-count { color: var(--muted); font-size: 14px; font-weight: 600; margin: 18px 2px 14px; }
.sched-count span { color: var(--green-d); font-weight: 800; }

/* Table */
.sched-table { background: #fff; border: 1px solid #e7ece8; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-sm); }
/* the last track is fixed: with `auto`, the button-less header row resolved
   different column widths than the body rows and the labels drifted */
.sch-row { display: grid; grid-template-columns: 1fr 1.15fr 1.15fr 1.35fr 0.85fr 136px; align-items: center;
  gap: 14px; padding: 16px clamp(18px, 1.8vw, 26px); border-bottom: 1px solid #eef2ef; }
.sch-row:last-child { border-bottom: none; }
.sch-row[hidden] { display: none; }   /* отфильтрованные занятия исчезают */
.sch-head { background: #F1F7F1; font-size: 12.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--green-d); padding-top: 15px; padding-bottom: 15px; }
.sch-row:not(.sch-head):hover { background: #FAFCFA; }
.sch-cell { min-width: 0; }
.sch-k { display: none; }
.sch-v { font-size: 15px; color: var(--ink); }
.sch-dir .sch-v { font-weight: 700; color: var(--green-d); }
.sch-badge { display: inline-block; background: #EAF6E9; color: #2E8B3E; font-weight: 700; font-size: 13px; padding: 5px 12px; border-radius: 20px; white-space: nowrap; }
.sch-spots { font-weight: 600; color: #2E8B3E; }
.sch-spots.sch-few { color: #2E8B3E; }   /* места всегда зелёные */
.sch-act { justify-self: end; }
.sch-book { font-family: inherit; font-size: 14px; font-weight: 700; color: #fff; background: var(--orange);
  border: none; border-radius: 12px; padding: 11px 20px; cursor: pointer; white-space: nowrap;
  transition: background .2s var(--ease), transform .2s var(--ease); box-shadow: 0 8px 18px rgba(255,106,43,.26); }
.sch-book:hover { background: var(--orange-d); transform: translateY(-2px); }

.sched-empty { text-align: center; color: var(--muted); font-size: 15px; font-weight: 600; padding: 40px 20px; }

/* Booking card */
.book-card { position: sticky; top: 156px; background: #fff; border: 2px solid #46B54A; border-radius: 28px;
  padding: clamp(26px, 2.6vw, 38px); box-shadow: var(--shadow); }
.book-card.book-flash { animation: bookflash .9s var(--ease); }
@keyframes bookflash { 0% { box-shadow: 0 0 0 0 rgba(70,181,74,.5); } 100% { box-shadow: 0 0 0 16px rgba(70,181,74,0); } }
.book-title { font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; color: var(--green-d); line-height: 1.08; margin-bottom: 10px; }
.book-sub { color: var(--ink); font-weight: 400; font-size: 14.5px; line-height: 1.45; margin-bottom: 22px; }
.book-form { display: flex; flex-direction: column; gap: 14px; }
.book-field { display: flex; flex-direction: column; gap: 6px; }
.book-field span { font-size: 13px; font-weight: 700; color: var(--green-d); }
.book-field input { font-family: inherit; font-size: 15px; padding: 13px 16px; border-radius: 12px;
  border: 1.5px solid #cfe0d4; background: #fff; color: var(--ink); transition: border .2s; width: 100%; }
.book-field input::placeholder { color: #9aa3a0; }
.book-field input:focus { outline: none; border-color: var(--green); }
.book-field input[readonly] { background: #F1F7F1; color: var(--green-d); font-weight: 600; cursor: default; }
.book-submit { width: 100%; margin-top: 6px; border-radius: 14px; }
.book-note { display: block; text-align: center; color: var(--muted); font-size: 12px; margin-top: 2px; }
/* «Отправить заявку через:» — четыре мессенджера */
.book-send-label { font-size: 13px; font-weight: 700; color: var(--green-d); margin-top: 4px; }
.book-msgrs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.book-msgr { display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 14px; color: #fff; padding: 13px 8px; border-radius: 12px;
  transition: filter .15s var(--ease), transform .15s var(--ease); }
.book-msgr:hover { filter: brightness(1.08); transform: translateY(-1px); }
.book-msgr:focus-visible { outline: 3px solid var(--green-d); outline-offset: 2px; }
.bm-wa { background: #25D366; }
.bm-tg { background: #229ED9; }
.bm-max { background: linear-gradient(135deg, #7B4DFF 0%, #2E9BFF 100%); }
.bm-vk { background: #0077FF; }
.bm-m { font-weight: 800; font-size: 15px; }
.book-copied { margin: 2px 0 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--green-d); }

/* «Заявка отправлена» — подтверждение после отправки в amoCRM */
.form-sent { display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: var(--green-d); border-radius: 14px; padding: 14px 18px; margin-top: 6px;
  font-weight: 700; font-size: 15px; line-height: 1.35; text-align: left;
  box-shadow: 0 10px 26px rgba(12, 92, 70, .16); animation: formSentIn .3s var(--ease, ease); }
.form-sent .form-sent-ic { flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--green); color: #fff; font-size: 15px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; }
/* внутри зелёного блока «Запишитесь на пробное занятие» — на всю ширину формы */
.signup-form .form-sent { flex-basis: 100%; justify-content: center; margin-top: 2px; }
@keyframes formSentIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 1080px) {
  /* minmax(0,1fr) lets the single column shrink below its content's
     min-width, preventing horizontal overflow on narrow phones */
  .sched-layout { grid-template-columns: minmax(0, 1fr); }
  .sched-content, .book-card { min-width: 0; }
  .book-card { position: static; }
}
@media (max-width: 820px) {
  /* Stack each schedule row into a card */
  .sch-head { display: none; }
  .sch-row { grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 18px; border-bottom: 8px solid #f3f6f3; }
  .sch-cell { display: flex; flex-direction: column; gap: 3px; }
  .sch-dir { grid-column: 1 / -1; }
  .sch-act { grid-column: 1 / -1; justify-self: stretch; margin-top: 4px; }
  .sch-book { width: 100%; }
  .sch-k { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
}
@media (max-width: 620px) {
  .filter-field { flex-basis: 100%; }
  .filter-check, .filter-reset { width: 100%; justify-content: center; }
  .sch-row { grid-template-columns: 1fr; }
}

/* ===================== CMS ADDITIONS ===================== */
.sch-spots.sch-none { color: #2E8B3E; font-weight: 700; }
.review-thanks { margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--green-d); }