/* Overrides placed in a separate final stylesheet so no legacy cascade can undo them. */
#map-wrapper {
  pointer-events: none;
}

#map-wrapper.is-ready {
  pointer-events: auto;
}

.contacts-map {
  z-index: 0;
}

.contacts-frame {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.contacts-card {
  pointer-events: auto;
}

@media (min-width: 1101px) {

  /* 2026-08-21: client — the lion must sit INSIDE the grid blob. The previous
     offset pushed its muzzle past the blob's right curve. Pulled left. */
  .hero .hero__crest {
    left: calc(50% + clamp(300px, 19vw, 380px));
  }
}

.section-contacts {
  margin-bottom: 0;
}

.section-achievements .content-slider__viewport {
  /* Vertical padding below keeps the hexagons inside this clipping frame. */
  overflow: hidden;
}

.section-achievements .content-slider {
  overflow: visible;
}

.section-achievements .student-pair {
  padding-right: 0;
}

.section-achievements .student-card>img {
  right: 0;
}

.section-prices>.container {
  width: min(var(--container), calc(100% - (var(--page-padding) * 2)));
  max-width: var(--container);
  margin-inline: auto;
}

@media (min-width: 1101px) {
  .section-formats .format-card:nth-child(2) .format-card__duration {
    right: 30px;
  }
}

.section-curriculum>.container {
  width: min(var(--container), calc(100% - (var(--page-padding) * 2)));
  max-width: var(--container);
  margin-inline: auto;
}

@media (max-width: 768px) {
  .site-footer .site-footer__nav a {
    border: 0;
    border-right: 1px solid #9d9d9d;
  }

  .site-footer .site-footer__nav a:nth-child(2n),
  .site-footer .site-footer__nav a:last-child {
    border-right: 0;
  }
}

@media (min-width: 769px) {
  .section-trial__piece {
    left: 37%;
    right: auto;
    bottom: 7%;
    width: min(11%, 154px);
    transform: none;
  }
}

@media (min-width: 1500px) {
  .section-reasons__content {
    padding-right: 0;
  }

  .section-achievements>.container {
    width: calc(100% - 160px);
    max-width: none;
  }

  .section-achievements .content-slider {
    width: calc(100% + 96px);
    padding: 0;
    margin-left: -24px;
  }

  .section-achievements .student-pair {
    gap: 112px;
  }

  .section-achievements .student-card {
    min-height: 320px;
  }

  .section-achievements .student-card>img {
    top: -38px;
    right: 0;
    width: 400px;
    height: 450px;
  }

  .section-achievements .student-card h3 {
    font-size: 40px;
  }

  .section-achievements .student-card ul {
    font-size: 20px;
  }

  .section-achievements .student-card__copy>p {
    right: 52px;
    min-height: 53px;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 18px;
  }

  .section-curriculum>.container {
    width: min(var(--container), calc(100% - (var(--page-padding) * 2)));
    max-width: var(--container);
  }

  .section-curriculum .curriculum-grid {
    gap: 42px 48px;
  }

  .curriculum-card {
    min-height: 380px;
  }
}

/* The inactive slide must not peek from the viewport edge. */
.section-achievements .content-slider__slide[aria-hidden="true"] {
  visibility: hidden;
  pointer-events: none;
}

/* 2026-08-15: achievements block — match the shared 1400px axis instead of a
   special wide container, let hexagon photos bleed past the card, tighten
   the gap before the pill button. Widened per client request beyond the
   standard 1400px axis for more room, but capped (not flush with the header's
   full width) — flush-to-page-padding left no room for the photo's 157px
   bleed past the card (page-padding maxes at 96px, less than 157px), which
   is what pushed it past the viewport. A 1560px cap keeps a ~180px gutter,
   comfortably more than the bleed. */
.section-achievements .container {
  width: min(1560px, calc(100% - (var(--page-padding) * 2)));
  max-width: 1560px;
  margin-inline: auto;
}

.section-achievements .content-slider {
  width: 100%;
  max-width: none;
  margin-left: 0;
  padding: 0;
}

.section-achievements .content-slider__viewport {
  overflow: visible;
  clip-path: inset(-1000px -220px -1000px 0);
}

.section-achievements .student-card {
  overflow: visible;
}

.section-achievements .student-card__copy {
  padding-bottom: 0;
}

.section-achievements .student-card__copy>p {
  position: static;
  display: block;
  width: max-content;
  max-width: calc(100% - 20px);
  margin: 24px 0 0;
  padding: 13px 16px;
}

.section-achievements .student-card>img {
  right: -134px;
}

/* The 157px bleed the client approved can exceed the page's own right gutter
   on the now-wider container, pushing the image past the browser viewport
   and causing horizontal scroll. Clip only at the section's own edge (which
   already spans full viewport width) instead of shrinking the bleed. */
.section-achievements {
  overflow-x: hidden;
}

@media (min-width: 1500px) {

  /* Wider container frees up room per card; widen the gap past 157px so the
     photo's rightward bleed no longer intrudes into the neighbouring card,
     and shrink the oversized fixed h3/list sizes so the copy reads normally
     instead of feeling cramped against the photo. */
  .section-achievements .student-pair {
    gap: 170px;
  }

  .section-achievements .student-card h3 {
    font-size: 30px;
  }

  .section-achievements .student-card ul {
    font-size: 16px;
  }

  /* The 43% second grid column was sized for the old narrow card; the photo
     is a fixed 400px now regardless of card width, so on the wider card that
     column reserved far more space than the photo needs, leaving a huge gap
     before the text. The image is absolutely positioned anyway (not really a
     grid item), so drop the split and cap the copy width directly. */
  .section-achievements .student-card {
    grid-template-columns: 1fr;
  }

  .section-achievements .student-card__copy {
    max-width: 400px;
  }

  .section-achievements .content-slider__controls {
    margin-top: 110px;
  }

  .section-achievements .student-card>img {
    top: -38px;
    width: 357px;
    height: 424px;
    object-fit: contain;
  }
}

@media (max-width: 767px) {

  /* Scale the bleed proportionally for mobile instead of inheriting the
     134px fixed desktop offset, which would be a huge fraction of a phone-
     width card and risk horizontal overflow. */
  .section-achievements .student-card>img {
    right: -8%;
  }
}

@media (min-width: 1500px) {
  .section-title--achievements {
    margin-bottom: 105px;
  }
}

/* 2026-08-15: curriculum block — the circle artwork is wider (711x379) than
   the card box, so cover-crop was trimming it equally from both sides and
   cutting the circle short of the card's right edge. Crop from the flat-color
   left side only. */
.curriculum-card__surface {
  object-position: right center;
}

/* Piece was bottom/right-anchored (43% wide, touching the card's bottom-right
   corner), which both overlapped the text column and didn't match the
   reference (остальные блоки/8/8.png): measured pixel-for-pixel there, the
   piece is anchored top-right, starts ~10% down from the card's top edge,
   its right edge sits ~15% past the card's right edge, and it's ~40% of the
   card's width with no forced height (natural aspect ratio). */
.curriculum-card {
  overflow: visible;
}

.curriculum-card__piece {
  top: 10%;
  right: -15%;
  bottom: auto;
  width: 40%;
  height: auto;
  max-height: none;
}

/* 2026-08-15: advantages ("План занятий") icon badge — measured pixel-for-
   pixel against остальные блоки/2/2 (3).png: the badge there is a fully
   rounded, standalone shape sitting ~17px above the card with a clear gap.
   Ours used a flat-bottomed dome (border-radius 140px 140px 0 0) sunk 44px
   into the card, i.e. overlapping instead of separate. */
.plan-card__icon {
  top: -182px;
  height: 165px;
  border-radius: 64%;
}

/* 2026-08-21: prices (both Групповые + Индивидуальные grids). Client asks:
   "Пробное занятие" on one line, "БЕСПЛАТНО" a touch smaller, descriptor
   line smaller so it doesn't touch the piece art, and the individual
   sub-heading not bold (match the group one). */
.section-prices .price-card__main>p {
  font-size: 22px;
}

.section-prices .price-card--gray .price-card__main>strong {
  font-size: 34px;
}

.section-prices .price-card__main>span {
  font-size: 16px;
}

.section-prices .section-prices__individual p {
  font-weight: 400;
}

/* 2026-08-21: hero — client corrections (main-page screenshot). */
/* Boy was cropped at the bottom by max-height:645px; show him in full "как был". */
.hero__visual {
  max-height: none;
}

/* Equal vertical rhythm: gap heading→subhead and subhead→button were 76 vs 93. */
.hero__subhead {
  margin-top: 76px;
  margin-bottom: 76px;
}

/* 2026-08-21: achievements cards — client: button text same size as the list
   items, and equal breathing room above/below the pill. Anchor the list+pill
   cluster to the bottom (h3 stays up top) and give the pill matching top and
   bottom gaps. */
.section-achievements .student-card__copy {
  display: flex;
  flex-direction: column;
  padding-bottom: 30px;
}

.section-achievements .student-card__copy>ul {
  margin-top: auto;
}

.section-achievements .student-card__copy>p {
  margin: 30px 0 0;
  font-size: 16px;
}

/* 2026-08-21: reviews — client keeps the underline rule (restored), just wants
   the empty strip tightened and the card pushed flush to the right edge. */
.section-reviews .reviews-heading {
  margin-bottom: 34px;
}

/* 2026-08-21: curriculum "Что мы изучаем" — rebuilt from the client's clean
   elements (8 страница изменения 1) so all 4 cards are identical: solid colour
   + one consistent grid semisphere (disc) + a same-scale piece. Removes the
   odd full-circle artefact on card 1 and keeps text off the artwork. */
.section-curriculum__title h2 span {
  color: var(--color-orange);
}

.section-curriculum .curriculum-card {
  position: relative;
  overflow: visible;
  border-radius: 28px;
  min-height: 392px;
  background: #7c958e;
}

.section-curriculum .curriculum-card--basics {
  background: #8e8e8e;
}

.section-curriculum .curriculum-card--tactics {
  background: #f0905d;
}

.section-curriculum .curriculum-card--strategy {
  background: #998e79;
}

.section-curriculum .curriculum-card--stages {
  background: #7c958e;
}

.curriculum-card__clip {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: 28px;
}

.curriculum-card__disc {
  position: absolute;
  top: 50%;
  right: 0;
  width: 52%;
  aspect-ratio: 1 / 1;
  transform: translate(30%, -50%);
  border-radius: 50%;
  background-color: #ffffff;
  background-image:
    linear-gradient(rgb(198 198 198 / 55%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(198 198 198 / 55%) 1px, transparent 1px);
  background-size: 22px 22px;
}

.section-curriculum .curriculum-card__copy {
  position: relative;
  z-index: 2;
  width: 50%;
  padding: 46px 0 40px 46px;
}

.section-curriculum .curriculum-card h2 {
  margin: 0 0 22px;
  padding-bottom: 22px;
  border-bottom: 2px solid rgb(255 255 255 / 85%);
}

.section-curriculum .curriculum-card p {
  margin: 0;
}

.curriculum-card__piece {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  height: auto;
  max-height: none;
  object-fit: contain;
  filter: drop-shadow(0 10px 10px rgb(47 39 30 / 22%));
}

.curriculum-card__piece--basics {
  width: 40%;
  top: -4%;
}

.curriculum-card__piece--tactics {
  width: 30%;
  top: 8%;
}

.curriculum-card__piece--strategy {
  width: 39%;
  top: 2%;
}

.curriculum-card__piece--stages {
  width: 27%;
  top: 10%;
}

/* Curriculum on tablet/phone: give the copy more room, shrink the disc/piece
   so the text isn't squeezed into a narrow left strip. */
@media (max-width: 768px) {
  .section-curriculum .curriculum-card {
    min-height: 300px;
  }

  .section-curriculum .curriculum-card__copy {
    width: 66%;
    padding: 34px 0 30px 30px;
  }

  .curriculum-card__disc {
    width: 44%;
    transform: translate(36%, -50%);
  }

  .curriculum-card__piece--basics {
    width: 34%;
    top: -5%;
  }

  .curriculum-card__piece--tactics {
    width: 26%;
    top: 6%;
  }

  .curriculum-card__piece--strategy {
    width: 33%;
    top: 0;
  }

  .curriculum-card__piece--stages {
    width: 24%;
    top: 8%;
  }
}

/* 2026-08-21: footer rebuilt to the client's PSD (Нижний колонтитул):
   three columns (Навигация / Контакты / Звоните), NO divider borders,
   rounded top corners, gold lion bottom-left, white gap above. */
.site-footer {
  position: relative;
  margin-top: 96px;
  min-height: auto;
  padding: 72px 0 46px;
  border-radius: 44px 44px 0 0;
  color: #7c7c7c;
  background: #ededed;
  overflow: hidden;
}

.site-footer__lion {
  position: absolute;
  bottom: 0;
  left: 0;
  width: min(19vw, 290px);
  opacity: 0.95;
  pointer-events: none;
}

.site-footer__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: clamp(48px, 9vw, 150px);
  padding-left: min(16vw, 240px);
  text-align: center;
}

.footer-col h3 {
  margin: 0 0 24px;
  color: #7c7c7c;
  font-size: clamp(24px, 1.9vw, 34px);
  font-weight: 400;
}

.footer-col--nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-col--nav a {
  color: inherit;
  font-size: clamp(17px, 1.25vw, 22px);
  transition: color 160ms ease;
}

.footer-col--nav a:hover {
  color: var(--color-orange);
}

.footer-col--info p {
  margin: 0 0 14px;
  font-size: clamp(17px, 1.25vw, 22px);
  line-height: 1.35;
}

.footer-col__phone {
  display: block;
  margin-bottom: 22px;
  color: inherit;
  font-size: clamp(18px, 1.35vw, 24px);
}

.footer-col__phone:hover {
  color: var(--color-orange);
}

.footer-col__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.footer-col__actions button {
  min-width: 224px;
  min-height: 50px;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  background: var(--color-orange);
  font: inherit;
  font-size: 18px;
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease;
}

.footer-col__actions button:hover {
  transform: translateY(-2px);
}

.footer-col__socials {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.footer-col__socials button {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #ffffff;
  background: #9a9a9a;
  cursor: pointer;
  transition: background-color 160ms ease;
}

.footer-col__socials button:hover {
  background: var(--color-orange);
}

.footer-col__socials svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke: none;
}

.site-footer__bottom {
  position: relative;
  z-index: 1;
  margin-top: 64px;
  text-align: center;
}

.site-footer__bottom>p {
  margin: 0 0 10px;
  color: #7c7c7c;
  font-size: clamp(17px, 1.25vw, 22px);
}

.site-footer__legal {
  display: flex;
  justify-content: center;
  gap: 22px;
  font-size: 15px;
}

@media (max-width: 768px) {
  .site-footer {
    margin-top: 56px;
    padding: 48px 0 32px;
    border-radius: 28px 28px 0 0;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-left: 0;
  }

  .site-footer__lion {
    width: 150px;
    opacity: 0.65;
  }

  .site-footer__bottom {
    margin-top: 40px;
  }

  .site-footer__legal {
    flex-direction: column;
    gap: 6px;
  }
}

/* 2026-08-21: trial banner after "Цена" = boy + king (7.png). Show the subhead
   and place the boy/king cutout across the bottom, straddling panel + form. */
.section-trial--boy .section-trial__offer>p {
  display: block;
}

@media (min-width: 769px) {
  .section-trial--boy .section-trial__child {
    position: absolute;
    z-index: 4;
    bottom: 0;
    left: 34%;
    width: min(40%, 560px);
    pointer-events: none;
  }
}

/* 2026-08-21: header — client wants the address centred in the gap between
   "Контакты" and the phone. Widen the gap between the two contact items so
   the address sits midway rather than hugging the phone. */
@media (min-width: 1101px) {
  .header-contacts {
    gap: clamp(40px, 4.4vw, 76px);
  }
}

/* ============ 2026-08-21 · второй круг правок клиента ============ */

/* [5] Отзывы — карточку прижать к правому краю контейнера. */
@media (min-width: 1101px) {
  .section-reviews .review-slider {
    margin-left: auto;
    margin-right: 0;
  }
}

/* [2] Курс — сетка должна занимать всю ширину контейнера 1400 (общая группа
   «оси 1400» повторно вычитала page-padding уже внутри контейнера). */
.section-curriculum {
  overflow-x: clip;
}

.section-curriculum .curriculum-grid {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* [2] Курс — центр каждой фигуры совпадает с центром круговой сетки. */
.section-curriculum .curriculum-card__piece {
  top: 50%;
  left: 89.6%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
}

.curriculum-card__piece--basics {
  width: 40%;
}

.curriculum-card__piece--tactics {
  width: 31%;
}

.curriculum-card__piece--strategy {
  width: 39%;
}

.curriculum-card__piece--stages {
  width: 31%;
}

@media (max-width: 768px) {
  .section-curriculum .curriculum-card__piece {
    left: 93.8%;
  }
}

/* [3] Баннер с мальчиком — мальчик над формой, поля сразу после его видимого края. */
@media (min-width: 769px) {
  .section-trial--boy .section-trial__child {
    z-index: 6;
    left: 29%;
  }

  .section-trial--boy .section-trial__form-panel {
    width: 51%;
    padding-left: clamp(120px, 8.75vw, 168px);
  }
}

/* [1] Баннер с ладьёй — уменьшаем и центрируем фигуру по высоте. */
@media (min-width: 769px) {
  .section-trial--rook .section-trial__piece {
    top: 50%;
    bottom: auto;
    width: min(8%, 116px);
    transform: translateY(-50%);
  }
}

#trial-2 .trial-benefits {
  padding-top: 20px;
  margin-top: 45px;
}

/* [1] Обе формы — кнопка становится цветной, когда отмечено согласие. */
.trial-form:has(.trial-form__consent input:checked) button {
  color: #ffffff;
  background: var(--color-orange);
}

.section-trial .trial-form[hidden] {
  display: none !important;
}

/* [4] Нижняя строка футера — по центру футера (не смещать колонкой со львом). */
.site-footer__bottom {
  margin-inline: auto;
}

/* [7] «План занятий» — бейдж иконки должен быть ровным кругом. */
.plan-card__icon {
  top: -189px;
  width: 172px;
  height: 172px;
  border-radius: 50%;
}

/* 2026-08-22: final responsive and interaction corrections. */
@media (min-width: 769px) {
  .section-reviews .reviews-heading {
    width: 100%;
  }

  .section-reviews .review-slider {
    justify-self: end;
    width: min(814px, 100%);
    max-width: 100%;
    margin-right: 0;
  }

  .section-reviews .review-slide {
    padding-right: 0;
  }

}

@media (min-width: 1500px) {
  .section-reviews .review-slider {
    transform: translateX(calc((100vw - var(--container)) / 2 - var(--page-padding)));
  }
}

/* На главной карта и футер являются одной нижней композицией — без белой полосы. */
.home-page .site-footer {
  margin-top: 0;
}

.section-achievements .student-card {
  --achievement-copy-size: 16px;
}

.section-achievements .student-card ul,
.section-achievements .student-card__copy>p {
  font-size: var(--achievement-copy-size);
}

@media (min-width: 1200px) and (max-width: 1499px) {
  .section-achievements .student-card {
    --achievement-copy-size: 15px;
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  .section-achievements .student-card {
    --achievement-copy-size: 14px;
  }
}

@media (max-width: 768px) {
  .section-achievements .student-card {
    --achievement-copy-size: 14px;
  }

  .section-advantages .plan-card__icon {
    top: -79px !important;
    width: 130px;
    height: 130px !important;
    border-radius: 50%;
  }

  .section-trial--rook .section-trial__piece {
    position: relative;
    z-index: 4;
    right: auto;
    bottom: auto;
    display: block;
    width: 70px;
    margin: -140px 26px 46px auto;
    transform: none;
  }
}

@media (max-width: 480px) {
  .section-achievements .student-card {
    --achievement-copy-size: 12px;
  }
}

/* Mobile: keep student portraits at their natural proportions inside each
   achievement card instead of inheriting the desktop full-card photo height. */
@media (max-width: 768px) {
  .section-achievements .student-card {
    min-height: 280px;
    overflow: hidden;
  }

  .section-achievements .student-card>img {
    top: 50%;
    right: -8%;
    width: 43%;
    height: auto;
    max-height: none;
    transform: translateY(-50%);
    object-fit: contain;
  }

  /* The map must remain a visible, separate surface on phones; the contact
     card follows it instead of covering the map as an overlay. */
  .section-contacts {
    display: flex;
    min-height: 0;
    flex-direction: column;
  }

  .section-contacts .contacts-map {
    position: relative;
    z-index: 0;
    inset: auto;
    width: 100%;
    height: 280px;
    min-height: 280px;
  }

  .section-contacts .contacts-frame {
    display: block;
    min-height: 0;
    margin: 0;
  }

  .section-contacts .contacts-card {
    width: 100%;
  }
}

/* News pages: use the approved centered content axis and current footer. */
.article-page>.container {
  width: min(var(--container), calc(100% - (var(--page-padding) * 2)));
  max-width: var(--container);
  margin-inline: auto;
}

.news-page .site-footer__grid {
  width: min(var(--container), calc(100% - (var(--page-padding) * 2)));
  max-width: var(--container);
  margin-inline: auto;
}

/* On tablets the portrait is wider than on a phone. Keep enough card height
   for its natural aspect ratio, rather than clipping its head or certificate. */
@media (min-width: 431px) and (max-width: 768px) {
  .section-achievements .student-card {
    min-height: 340px;
  }
}

/* 2026-08-23: user-requested achievement, curriculum, trial and contacts
   corrections. Kept in one isolated block so the change is reversible. */
@media (min-width: 769px) {
  #achievements .student-pair {
    grid-template-columns: repeat(2, minmax(0, 696px));
    justify-content: center;
    gap: clamp(80px, 8.8vw, 170px);
  }

  #achievements .student-card {
    width: 100%;
    max-width: 696px;
  }

  #achievements .student-card>img {
    right: -64px;
  }

  /* Return the second trial rook to the vertical position used before the
     previous upward correction. */
  #trial-2 .section-trial__piece {
    top: 56%;
  }
}

@media (max-width: 768px) {

  /* One student per slide on phones, with a larger portrait. */
  #achievements .student-pair--mobile {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  #achievements .student-card {
    min-height: 400px;
    grid-template-columns: 1fr;
    overflow: hidden;
  }

  #achievements .student-card__copy {
    position: relative;
    z-index: 2;
    max-width: 60%;
    padding: 28px 8px 28px 24px;
  }

  #achievements .student-card h3 {
    margin-bottom: 34px;
    font-size: 27px;
    line-height: 1;
  }

  #achievements .student-card ul {
    gap: 15px;
  }

  #achievements .student-card li {
    font-size: 14px;
    line-height: 1.12;
  }

  #achievements .student-card__copy>p {
    width: 100%;
    min-height: 56px;
    margin-top: 28px;
    padding: 10px 8px;
    font-size: 13px;
    line-height: 1.12;
  }

  #achievements .student-card>img {
    top: 50%;
    right: -18%;
    width: 60%;
    height: auto;
    max-height: none;
    transform: translateY(-50%);
    object-fit: contain;
  }

  /* Keep curriculum pieces inside the viewport while they still overlap the
     circle edge as in the approved composition. */
  #curriculum .curriculum-card__piece {
    left: 85.8%;
  }

  /* The rook remains beside the benefits, but no longer covers their text. */
  #trial-2 .section-trial__piece {
    position: absolute;
    top: clamp(310px, 86vw, 360px);
    right: 26px;
    bottom: auto;
    width: 64px;
    margin: 0;
    transform: none;
  }

  #trial-2 .trial-benefits {
    padding-right: 100px;
  }

  /* Make the mobile contacts card a clean full-width continuation of map. */
  #contacts .contacts-frame {
    width: 100%;
    padding: 0;
  }

  #contacts .contacts-card {
    width: 100%;
    padding: 38px 28px 42px;
    border-radius: 0;
    box-shadow: none;
  }

  #contacts .contacts-card h2 {
    margin-bottom: 32px;
    font-size: clamp(32px, 9vw, 38px);
    line-height: 1.05;
  }

  #contacts .contacts-card__phone {
    margin-bottom: 20px;
    font-size: 24px;
    line-height: 1.2;
  }

  #contacts .contacts-card address {
    font-size: 22px;
    line-height: 1.4;
  }
}

@media (max-width: 480px) {

  #trial .trial-form button,
  #trial-2 .trial-form button {
    padding-inline: 18px;
    font-size: 16px;
    line-height: 1.15;
  }
}

@media (min-width: 600px) and (max-width: 768px) {

  /* At tablet width keep the copy clear of the enlarged portrait. */
  #achievements .student-card__copy {
    max-width: 50%;
  }

  /* Tablet cards are wider than phone cards, so their pieces need a little
     more inset to remain visible while crossing the circle edge. */
  #curriculum .curriculum-card__piece {
    left: 82%;
  }
}

/* ============================================================================
   2026-08-24 · КОМП-ВЕРСИЯ · правки по красным пометкам клиента.
   Всё изолировано в один блок и обёрнуто в десктопный медиазапрос
   (>=1101px). Планшет/мобилка НЕ затрагиваются. Легко откатывается.
   ============================================================================ */

/* [1] Логотип в шапке — надпись капсом «ГАМБИТ» (только написание, глобально). */
.brand__text>span {
  text-transform: uppercase;
}

@media (min-width: 1101px) {

  /* [2] Hero — чуть приподнять золотого льва-эмблему (было top:199px). */
  .hero .hero__crest {
    top: 172px;
  }

  /* [3] Обе формы (мальчик + ладья) — согласие: чекбокс крупнее и заметнее,
     сама надпись мельче. */
  .section-trial .trial-form__consent {
    align-items: center;
    font-size: clamp(13px, 0.85vw, 15px);
    line-height: 1.3;
  }

  .section-trial .trial-form__consent input {
    width: 28px;
    height: 28px;
    margin: 0;
    flex: 0 0 28px;
  }

  /* Баннер с мальчиком: его скрещённые ноги перекрывают левый угол панели,
     из-за чего чекбокс согласия не видно. Опаковый край ноги = ~1126px,
     чекбокс без сдвига = 1093px. Минимальный сдвиг, чтобы чекбокс just
     вышел из-под ноги (не уводя строку слишком вправо). */
  #trial .trial-form__consent {
    padding-left: 48px;
  }

  /* [5] Обе формы — ровная тень белого блока. Убираем «запечённую» неровную
     тень из trial-shell-bg.png: зелёная оболочка становится сплошным цветом,
     а белая панель — плавающей карточкой с равномерной CSS-тенью. */
  .section-trial__shell {
    background: #849a94;
  }

  .section-trial__form-panel {
    top: 3.2%;
    right: 1%;
    bottom: 3.2%;
    min-height: auto;
    background: #ffffff;
    border-radius: clamp(24px, 2.4vw, 40px);
    box-shadow: 0 18px 46px rgba(45, 42, 37, 0.18);
  }

  /* [6] Баннер с ладьёй — чуть опустить фигуру, чтобы её основание закрывало
     нижний-правый угол белого блока «плюшек». Точное значение выверю по скрину. */
  #trial-2 .section-trial__piece {
    top: 63%;
  }

  /* [7] Блок «Под главной» (План занятий: Подготовка/Домашнее/Растим) —
     ⚠️ НЕ УВЕРЕН / ЖДЁТ ПОДТВЕРЖДЕНИЯ КЛИЕНТА: на скрине этой секции красной
     пометки НЕ было, был только черновой PSD (признан ненадёжным). Сделана
     МИНИМАЛЬНАЯ аккуратная компактность: иконки прижаты к верхней кромке
     карточки и карточки чуть ниже. Ширину контейнера НЕ трогаем (иначе
     длинные заголовки вылезают за карточку). Если клиент захочет иначе —
     менять здесь. PSD буквально не копируем. */
  .section-advantages {
    padding-bottom: 96px;
  }

  .plan-card {
    min-height: 210px;
    padding: 46px 30px 30px;
  }

  .plan-card__icon {
    top: -114px;
    width: 126px;
    height: 126px;
    background: transparent;
    z-index: -1;
  }

  .plan-card__icon img {
    width: 104px;
    height: 104px;
  }

  /* [8] Цены — первая (серая) карточка «Пробное — БЕСПЛАТНО»: текстовый блок
     опустить ниже, но с небольшим зазором, чтобы «Оценка способностей»
     не касалась фигуры-коня. */
  .section-prices .price-card--gray .price-card__main {
    padding-top: 38px;
  }

  .section-prices .price-card--gray .price-card__main>strong {
    font-size: 40px;
    padding-top: 18px;
  }

  /* [9] Цены — карточка «Разовое»: лавр выровнять СИММЕТРИЧНО по центру со
     значками-шестиугольниками на соседних карточках. Замер: центр шести-
     угольника (cx≈281.6, cy≈55) в карточке 333px; лавр 52×45. Отсюда
     top=55-45/2≈32, right=(333-281.6)-52/2≈25. */
  .section-prices .price-card__badge-icon {
    top: 32px !important;
    right: 25px !important;
  }

  /* [10] Отзывы — на широких экранах карточка отзыва выступает вправо за
     контейнер (bleed). Линия-разделитель под заголовком должна доходить до
     правого края карточки. */
  @media (min-width: 1500px) {
    .section-reviews .reviews-heading {
      width: calc(100% + ((100vw - var(--container)) / 2 - var(--page-padding)));
      max-width: none;
    }
  }

  /* [11] Футер — белая полоса между картой и футером на главной (карта не
     «перетекает» сразу в футер). */
  .home-page .site-footer {
    margin-top: 100px;
  }

  /* [12] Футер — колонки по центру с равными отступами по краям: убираем
     левый сдвиг под льва И центрируем сам контейнер (базовый .container
     прижат влево). */
  .site-footer__grid {
    padding-left: 0;
    margin-inline: auto;
  }

  /* [13] Футер — нижняя строка мельче: копирайт до размера пунктов навигации,
     ссылки «Условия/Конфиденциальность» ещё чуть меньше. */
  .site-footer__bottom>p {
    font-size: clamp(17px, 1.25vw, 22px);
  }

  .site-footer .site-footer__legal {
    font-size: 16px;
  }
}

/* Mobile red mark: hero lion under the child. */
@media (max-width: 768px) {
  #hero .hero__crest {
    left: calc(50% + clamp(40px, 12vw, 64px));
  }
}

/* Mobile red mark: keep the rook inside the benefits card on tablets. */
@media (max-width: 768px) {
  #trial-2 .section-trial__piece {
    transform: translateY(-108px);
  }
}

@media (max-width: 480px) {
  #trial-2 .section-trial__piece {
    transform: translateY(8px);
  }
}

/* Mobile red mark: contour shadow for the boy trial form. */
@media (max-width: 768px) {
  #trial.section-trial--boy .section-trial__form-panel {
    box-shadow: 0 10px 24px rgba(45, 42, 37, 0.16);
  }
}

@media (max-width: 480px) {
  #trial.section-trial--boy .section-trial__form-panel {
    box-shadow: 0 8px 16px rgba(45, 42, 37, 0.16);
  }
}

/* Student photos use the approved right-edge treatment on wider screens. */
@media (min-width: 769px) {
  #achievements .student-card>img {
    top: -4px;
    right: 0;
    bottom: auto;
    width: auto;
    height: calc(100% + 8px);
    max-height: none;
    transform: none;
    object-fit: contain;
    object-position: right center;
    clip-path: none;
    filter: none;
  }
}

#prices .section-prices__swipe-hint {
  display: none;
}

@media (max-width: 768px) {
  #hero .hero__subhead {
    margin: 20px 0 0;
  }

  #advantages.section-advantages {
    padding: 90px 0 40px;
  }

  #advantages .section-advantages__grid {
    width: min(500px, calc(100% - 56px));
    margin: 0 auto;
    gap: 90px;
  }

  #advantages .plan-card {
    min-height: 160px;
    padding: 44px 18px 18px;
  }

  #advantages .plan-card__icon {
    top: -70px !important;
    width: 96px !important;
    height: 76px !important;
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }

  #advantages .plan-card__icon img {
    width: auto;
    height: auto;
    max-width: 96px;
    max-height: 76px;
    object-fit: contain;
  }

  #advantages .plan-card h2 {
    margin-bottom: 16px;
    font-size: 22px;
    line-height: 1.1;
    white-space: nowrap;
  }

  #advantages .plan-card p {
    font-size: 16px;
    line-height: 1.25;
  }

  #formats .format-card::after {
    display: none;
  }

  #formats .format-card>img {
    width: 44%;
  }

  #achievements .student-card>img {
    top: auto;
    right: 0;
    bottom: 0;
    width: 43%;
    height: auto;
    max-height: none;
    transform: none;
    object-fit: contain;
    object-position: right bottom;
    clip-path: none;
    filter: none;
  }

  #prices .section-prices__swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 18px;
    color: #666666;
  }

  #prices .section-prices__swipe-hint svg {
    width: 44px;
    height: 28px;
    fill: none;
    stroke: #e59661;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  #prices .price-grid {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    padding-bottom: 8px;
  }

  #prices .price-grid::-webkit-scrollbar {
    display: none;
  }

  #prices .price-grid>.price-card {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .site-footer .site-footer__lion {
    display: none;
  }
}

@media (max-width: 480px) {
  #hero .hero__subhead {
    margin: 17px 0 0;
  }

  #advantages.section-advantages {
    padding: 70px 0 34px;
  }

  #advantages .section-advantages__grid {
    width: min(243px, calc(100% - 40px));
    gap: 68px;
  }

  #advantages .plan-card {
    min-height: 116px;
    padding: 32px 10px 14px;
  }

  #advantages .plan-card__icon {
    top: -58px !important;
    width: 74px !important;
    height: 58px !important;
  }

  #advantages .plan-card__icon img {
    max-width: 74px;
    max-height: 58px;
  }

  #advantages .plan-card h2 {
    margin-bottom: 15px;
    font-size: 18px;
    line-height: 1.1;
  }

  #advantages .plan-card p {
    font-size: 14px;
    line-height: 1.2;
  }

  #prices .section-prices__swipe-hint {
    margin-bottom: 12px;
    font-size: 16px;
  }

  #prices .section-prices__swipe-hint svg {
    width: 40px;
    height: 26px;
  }
}

/* ============================================================================
   2026-08-24 · МОБ-ДОРАБОТКА (Claude): три пункта, не закрытые Codex.
   Узкие правки, только мобильные медиазапросы. Десктоп/планшет-логику Codex
   не трогаем. Легко откатывается удалением этого блока.
   ============================================================================ */
@media (max-width: 768px) {

  /* [Главная] Лев был почти полностью скрыт за мальчиком (наружу торчало ~20px
     гривы). Тело мальчика непрозрачно до правого края (~x306), поэтому морду
     льва нужно вывести правее него. Снимаем базовый left+translateX, крепим
     к правому краю, поднимаем и чуть увеличиваем. z-index 1 (за мальчиком)
     сохраняется — «под чела», как просил клиент (эталон «Скриншот-01-08»). */
  #hero .hero__crest {
    left: auto;
    right: -10px;
    top: 30px;
    width: 200px;
    transform: none;
  }

  /* [Ученики] Фото-портрет касалось текста маркеров. Сужаем текстовую колонку,
     чтобы между маркерами и фото остался зазор. */
  #achievements .student-card__copy {
    max-width: 54%;
  }

  /* [Баннер 1 · ладья] Тень фигуры была едва заметной — усиливаем. */
  #trial-2 .section-trial__piece {
    filter: drop-shadow(0 14px 13px rgba(35, 30, 24, 0.4));
  }
}

@media (max-width: 480px) {
  #hero .hero__crest {
    right: -19px;
    top: 26px;
    width: 200px;
  }

  #trial-2 .section-trial__piece {
    filter: drop-shadow(0 11px 10px rgba(35, 30, 24, 0.4));
  }
}

/* ============================================================================
   2026-08-24 · доп. правки (Claude): курсор-палец на кнопках + тень формы
   «по контуру» на баннере с мальчиком.
   ============================================================================ */
button:not([disabled]),
[data-modal-open],
.button {
  cursor: pointer;
}

/* [Баннер 2 · мальчик] Равномерная тень белого блока по всему контуру
   (была только нижняя). */
@media (max-width: 768px) {
  #trial.section-trial--boy .section-trial__form-panel {
    box-shadow: 0 0 24px rgba(45, 42, 37, 0.2);
  }
}

@media (max-width: 480px) {
  #trial.section-trial--boy .section-trial__form-panel {
    box-shadow: 0 0 18px rgba(45, 42, 37, 0.2);
  }
}

/* ============================================================================
   2026-08-24 · батч правок клиента (Claude). Только мобилка, узкие селекторы.
   ============================================================================ */
@media (max-width: 768px) {

  /* [1] Ученики — фото крупнее и выше (по центру, как на скрине), карточка
     со скруглением. */
  #achievements .student-card {
    border-radius: 25px;
  }

  #achievements .student-card ul {
    margin-top: 0;
  }

  #achievements .student-card>img {
    top: 19%;
    bottom: auto;
    width: 50%;
  }

  /* [2] Обучение — фото круглым (как на десктопе), БЕЗ серой вуали, текст
     слева не касается круга. PNG уже круглый (245×409): держим натуральные
     пропорции (height:auto), иначе фикс-высота кропала круг в прямоугольник.
     Вуаль ::after убираем — она давала «серое затемнение». Текст (список и
     кнопку) ограничиваем слева, чтобы не наезжал на круг. */
  #formats .format-card::after {
    display: none;
  }

  #formats .format-card>img {
    width: 50%;
    height: auto;
    right: 0px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  #formats .format-card ul {
    /*max-width: 44%;*/
    max-width: 75%;
  }

  #formats .format-card button {
    max-width: 52%;
    left: 20px;
    margin-left: -20px;
  }

  /* [4] Формы — текст согласия мельче. */
  .trial-form__consent {
    font-size: 12px;
  }

  /* [5] Баннеры — отступы плюшек, позиция ладьи, отступ формы. */
  #trial-2 .trial-benefits {
    margin-top: 30px;
  }

  .trial-benefits {
    padding: 20px 15px;
  }

  #trial-2 .section-trial__piece {
    top: clamp(304px, 83vw, 360px);
    right: 37px;
    transform: none;
  }

  .section-trial__form-panel {
    margin-top: 20px;
  }

  /* [6] Футер — жёсткое центрирование колонок на мобилке. */
  .site-footer__grid {
    margin-inline: auto;
    justify-items: center;
    text-align: center;
  }

  .site-footer .footer-col {
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .site-footer .footer-col--nav {
    align-items: center;
  }

  .site-footer__bottom {
    margin-inline: auto;
    text-align: center;
  }
}

/* Заголовки из админки — одно поле с тегами (|raw). Любой <span> внутри
   заголовка Hero делаем оранжевым (в секционных заголовках это уже работает
   через .section-title h2 span). */
.hero h1 span {
  color: var(--color-orange);
}

/* Соцсети/мессенджеры из админки (settings.socials): картинки-иконки в футере,
   контактах и боковом виджете. Ссылки-<a> стилизуем как круглые кнопки-иконки. */
.footer-col__socials a,
.contacts-card__socials a {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #ffffff;
  background: #9a9a9a;
  overflow: hidden;
  transition: background-color 160ms ease;
}

.footer-col__socials a:hover,
.contacts-card__socials a:hover {
  background: var(--color-orange);
}

.footer-col__socials a svg,
.contacts-card__socials a svg {
  width: 22px;
  height: 22px;
  fill: #ffffff;
}

.footer-col__socials a img,
.contacts-card__socials a img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.contact-widget__item img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* Боковой виджет: цвет кружка по типу канала (иконка белая — задано в базе). */
.contact-widget__item--phone {
  background: #e59661;
}

.contact-widget__item--vk {
  background: #4680c2;
}

.contact-widget__item--instagram {
  background: #d6336c;
}

.contact-widget__item--youtube {
  background: #ff0000;
}

.contact-widget__item--max {
  background: #6f52ff;
}

.contact-widget__item--other {
  background: #9a9a9a;
}

/* Privacy-policy dialog and explicit links in the existing consent copy. */
.privacy-policy-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.privacy-modal[hidden] {
  display: none;
}

.privacy-modal {
  position: fixed;
  z-index: 101;
  inset: 0;
  display: grid;
  padding: 24px;
  place-items: center;
}

.privacy-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgb(37 37 37 / 52%);
}

.privacy-modal__dialog {
  position: relative;
  width: min(100%, 760px);
  max-height: calc(100svh - 48px);
  padding: 48px;
  overflow-y: auto;
  border-radius: 28px;
  color: var(--color-dark);
  background: var(--color-white);
  box-shadow: 0 30px 80px rgb(0 0 0 / 25%);
}

.privacy-modal__close {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--color-dark);
  background: #f1f1f1;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}

.privacy-modal h2 {
  margin: 0 48px 20px 0;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.privacy-modal__text {
  margin: 0;
  white-space: pre-line;
  font-size: 16px;
  line-height: 1.55;
}

.terms-modal[hidden] {
  display: none;
}

.terms-modal {
  position: fixed;
  z-index: 101;
  inset: 0;
  display: grid;
  padding: 24px;
  place-items: center;
}

.terms-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgb(37 37 37 / 52%);
}

.terms-modal__dialog {
  position: relative;
  width: min(100%, 760px);
  max-height: calc(100svh - 48px);
  padding: 48px;
  overflow-y: auto;
  border-radius: 28px;
  color: var(--color-dark);
  background: var(--color-white);
  box-shadow: 0 30px 80px rgb(0 0 0 / 25%);
}

.terms-modal__close {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--color-dark);
  background: #f1f1f1;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}

.terms-modal h2 {
  margin: 0 48px 20px 0;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.terms-modal__text {
  margin: 0;
  white-space: pre-line;
  font-size: 16px;
  line-height: 1.55;
}

@media (max-width: 768px) {
  .privacy-modal {
    padding: 16px;
  }

  .privacy-modal__dialog {
    max-height: calc(100svh - 32px);
    padding: 38px 24px 28px;
    border-radius: 22px;
  }

  .privacy-modal__text {
    font-size: 15px;
  }

  .terms-modal {
    padding: 16px;
  }

  .terms-modal__dialog {
    max-height: calc(100svh - 32px);
    padding: 38px 24px 28px;
    border-radius: 22px;
  }

  .terms-modal__text {
    font-size: 15px;
  }
}

/* Правовые документы и cookies: локальные элементы, не влияющие на секции лендинга. */
.privacy-modal__warning {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-left: 4px solid var(--color-orange);
  border-radius: 10px;
  color: #5a3b17;
  background: #fff4df;
  font-size: 14px;
  line-height: 1.45;
}

.privacy-modal__text section + section {
  margin-top: 18px;
}

.privacy-modal__text h3 {
  margin: 0 0 6px;
  font-size: 19px;
  line-height: 1.25;
}

.privacy-modal__text p {
  margin: 0;
}

.privacy-modal__text p + p {
  margin-top: 7px;
}

.privacy-modal__updated {
  margin-top: 18px !important;
  color: #6b6b6b;
  font-size: 14px;
}

.site-footer__cookie-settings {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cookie-consent[hidden] {
  display: none;
}

.cookie-consent {
  position: fixed;
  z-index: 120;
  right: 24px;
  bottom: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  width: min(720px, calc(100% - 48px));
  padding: 24px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 20px;
  color: #fff;
  background: #2c2c2c;
  box-shadow: 0 20px 50px rgb(0 0 0 / 30%);
}

.cookie-consent h2 {
  margin: 0 0 8px;
  color: inherit;
  font-size: 21px;
}

.cookie-consent p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.cookie-consent p + p {
  margin-top: 9px;
}

.cookie-consent a {
  color: #fff;
  text-underline-offset: 3px;
}

.cookie-consent__actions {
  display: grid;
  align-content: center;
  gap: 10px;
}

.cookie-consent__actions button {
  min-width: 132px;
  min-height: 42px;
  padding: 8px 16px;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.cookie-consent__accept {
  border: 1px solid var(--color-orange);
  color: #fff;
  background: var(--color-orange);
}

.cookie-consent__reject {
  border: 1px solid rgb(255 255 255 / 68%);
  color: #fff;
  background: transparent;
}

/* The policy must remain accessible when opened from the cookie banner. */
.privacy-modal,
.terms-modal {
  z-index: 130;
}

@media (max-width: 768px) {
  .cookie-consent {
    right: 16px;
    bottom: 16px;
    grid-template-columns: 1fr;
    width: calc(100% - 32px);
    padding: 20px;
  }

  .cookie-consent__actions {
    grid-template-columns: 1fr 1fr;
  }

  .cookie-consent__actions button {
    min-width: 0;
  }
}