/* Школа №15 — стили страницы поверх системы (assets/system.css) */

/* Цвета школы: зелёный логотипа, жёлтый и кремовый фасада, тёмно-зелёный подвал */
:root {
  --p-bg: #fbf7ea; --p-surface: #f1e9cf; --p-ink: #14301d; --p-muted: #535f4f;
  --p-accent: #10773c; --p-accent-ink: #ffffff; --p-action: #10773c; --p-action-ink: #ffffff;
  --p-inv-bg: #0f4d27; --p-inv-surface: #145a2f; --p-inv-ink: #fbf7ea; --p-inv-muted: #bccfb9;
  --p-inv-accent: #f2cf1d; --p-inv-accent-ink: #14301d; --p-inv-action: #f2cf1d; --p-inv-action-ink: #14301d;
  --font-display: "Onest", system-ui, sans-serif;
  --font-text: "Onest", system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: -0.035em;
  --display-tracking-xl: -0.04em;
  --school-green: #10773c;
  --school-green-deep: #0f4d27;
  --school-yellow: #f2cf1d;
  --school-cream: #f1e9cf;
  --school-blue: #1f5fae;
  --school-red: #952f43;
}

:root {
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
}

.nowrap { white-space: nowrap; }

/* Логотип в шапке и подвале: круглая эмблема (углы исходного файла обрезаются) */
.nav__logo { display: inline-flex; align-items: center; gap: var(--s-3); }
.nav__emblem { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.footer__brand .nav__emblem { width: 28px; height: 28px; }

/* Переключатель языка: кнопки и ползунок под активной */
.lang {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr;
  height: 40px; padding: 4px; border-radius: 999px;
  background: var(--surface); isolation: isolate;
}
.lang__thumb {
  position: absolute; inset: 4px auto 4px 4px; width: calc(50% - 4px);
  border-radius: 999px; background: var(--bg); box-shadow: 0 1px 2px rgb(29 42 31 / 0.14);
  z-index: -1;
  transition: transform 200ms var(--ease-out-strong);
}
html[lang="ru"] .lang__thumb { transform: translateX(100%); }
.lang__btn {
  min-width: 48px; padding: 0 var(--s-3); border: 0; background: none; border-radius: 999px;
  font: 500 14px/1 var(--font-text); color: var(--muted); cursor: pointer;
  transition: color 150ms ease;
}
.lang__btn[aria-pressed="true"] { color: var(--ink); }
.lang__btn:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
@media (max-width: 1023px) {
  .nav__actions .btn { display: none; }
}

/* Главный экран: логотип и название учреждения над заголовком */
.hero-brand { display: flex; align-items: center; gap: var(--s-5); }
.hero-brand__logo {
  width: 112px; height: 112px; flex: none; border-radius: 50%; object-fit: cover;
  background: #fff; box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px var(--line);
}
.hero-brand__org { font-size: var(--t-small); line-height: 1.45; color: var(--muted); max-width: 34ch; margin: 0; }
.hero-copy > .hero-brand + h1 { margin-top: var(--s-6); }
.hero-visual .frame__img { object-position: 50% 60%; }
@media (max-width: 639px) {
  .hero-brand { gap: var(--s-4); }
  .hero-brand__logo { width: 72px; height: 72px; box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--line); }
}

/* Вход главного экрана: один раз при загрузке, по очереди с шагом 70 мс.
   Только transform и opacity; при «уменьшить движение» — короткое проявление без сдвига. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > [style*="--i"] {
    animation: hero-rise 700ms var(--ease-out-strong) backwards;
    animation-delay: calc(120ms + var(--i) * 70ms);
  }
  .hero-brand__logo { animation: logo-in 800ms var(--ease-out-strong) 60ms backwards; }
  .hero-visual { animation: photo-in 900ms var(--ease-out-strong) 200ms backwards; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy > [style*="--i"], .hero-visual { animation: fade-in 300ms ease backwards; }
}
@keyframes hero-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes logo-in   { from { opacity: 0; transform: scale(0.94) rotate(-6deg); } }
@keyframes photo-in  { from { opacity: 0; transform: scale(0.985); } }
@keyframes fade-in   { from { opacity: 0; } }

/* О школе */
.care-photo, .director-photo { height: 100%; min-height: 420px; }
.care-photo .frame__img { object-position: 55% 50%; }
.director-photo .frame__img { object-position: 50% 15%; }
.rows > li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-5); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.rows .rows__value { text-align: right; max-width: 60%; white-space: normal; }
.director-head { margin-bottom: 0; }

/* Кружки */
.club-group { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-6); }
.club-group h3 { font: 500 var(--t-card)/1.3 var(--font-text); margin: 0; }
.club-group__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--dot); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chips li {
  padding: 6px 12px; border-radius: 999px; background: var(--surface);
  font-size: 15px; line-height: 1.35;
}

/* Родителям */
.quick { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-6); color: inherit; text-decoration: none; min-height: 220px; }
.quick__num { font: 500 13px/1 var(--font-text); color: var(--accent); }
.quick h3 { font: 500 var(--t-card)/1.3 var(--font-text); margin: 0; }
.quick p { margin: 0; color: var(--muted); }
.docs { margin-top: var(--s-6); max-width: 640px; }

/* Контакты в подвале */
.contact__big { font: var(--display-weight) clamp(26px, 1.4vw + 18px, 40px)/1.2 var(--font-display); letter-spacing: -0.02em; font-style: normal; }
.contact__list { display: grid; gap: var(--s-5); margin: 0; }
.contact__list > div { display: grid; gap: var(--s-1); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.contact__list dt { font-size: var(--t-small); color: var(--muted); }
.contact__list dd { margin: 0; font-size: 18px; }
.footer__brand { display: inline-flex; align-items: center; gap: var(--s-3); }

@media (max-width: 1023px) {
  .care-photo, .director-photo { min-height: 300px; height: 300px; }
  .quick { min-height: 0; }
}
@media (max-width: 639px) {
  .rows > li { flex-direction: column; gap: var(--s-1); }
  .rows .rows__value { text-align: left; max-width: none; color: var(--muted); }
}

/* Секции по высоте содержимого: тексты на двух языках разной длины, жёсткая высота
   «один экран» резала бы казахскую версию. Главный экран остаётся ровно в экран. */
main > section.section:not(.hero), footer.footer.closing {
  height: auto !important; min-height: 0 !important;
}
main > section.section:not(.hero) > .wrap, footer.footer.closing > .wrap { height: auto !important; }
footer.closing > .wrap { display: grid; gap: var(--s-9); }

/* Телефон и планшет: в шапке остаются переключатель языка и меню, кнопка звонка — в главном экране */
@media (max-width: 1023px) {
  .nav:not(.is-open) .nav__actions > .lang { display: inline-grid; }
  .nav:not(.is-open) .nav__actions > .btn { display: none; }
  .nav.is-open .nav__actions > .lang { justify-self: center; }
}

/* Директор на телефоне и планшете: фото сразу над именем, а не после всего текста */
@media (max-width: 1023px) {
  .director-photo { order: -1; height: auto !important; min-height: 0 !important; aspect-ratio: 4 / 5; width: min(100%, 320px); }
  #director .grid { display: flex; flex-direction: column; gap: var(--s-6); }
}

/* Почему выбирают: одна крупная цифра на карточку */
.why { row-gap: var(--gutter); }
.why-card { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-6); background: var(--bg); }
.why-card > .why-card__num {
  margin: 0 0 var(--s-2); color: var(--accent);
  font: var(--display-weight) clamp(40px, 2.4vw + 22px, 56px)/1 var(--font-display); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.why-card > .why-card__num span { font-size: 0.6em; margin-left: 2px; }
.why-card h3 { font: 500 var(--t-card)/1.3 var(--font-text); margin: 0; }
.why-card p:not(.why-card__num) { margin: 0; }
.why-source { margin-top: var(--s-6); color: var(--muted); font-size: var(--t-small); }

/* Отклик карточек на наведение: только мышь, только transform */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .why-card { transition: transform 200ms var(--ease-out-strong); }
  .why-card:hover { transform: translateY(-2px); }
}

/* Победы под кружками */
.wins { list-style: none; padding: 0; margin: var(--s-7) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.wins li { padding-top: var(--s-4); border-top: 2px solid var(--accent); }
.wins b { display: block; font: var(--display-weight) 24px/1.2 var(--font-display); margin-bottom: var(--s-1); }
.wins span { color: var(--muted); }
@media (max-width: 639px) { .wins { grid-template-columns: 1fr; gap: var(--s-5); } }
.quick { background: var(--bg); }
/* карточки на кремовом фоне секции — светлее фона, чтобы читались */
.ground-surface .card { background: var(--bg); }

/* ------------------------------------------------------------------ цвета школы */
/* Полоса фасада под шапкой: зелёный — жёлтый — зелёный, как у входа в школу */
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; pointer-events: none;
  background: linear-gradient(90deg, var(--school-green) 0 38%, var(--school-yellow) 38% 62%, var(--school-green) 62% 100%);
  transform-origin: 50% 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .nav::after { animation: stripe-in 900ms var(--ease-out-strong) 100ms backwards; }
}
@keyframes stripe-in { from { transform: scaleX(0); } }

/* «Почему выбирают» — на зелёном фоне логотипа, цифры жёлтым цветом фасада */
#why .why-card { background: color-mix(in oklab, var(--school-green) 86%, #ffffff); --c-border: rgb(255 255 255 / 0.14); }
#why .why-card > .why-card__num { color: var(--school-yellow); }
#why .why-card p:not(.why-card__num) { color: color-mix(in oklab, #ffffff 86%, var(--school-green)); }
#why .why-source { color: color-mix(in oklab, #ffffff 78%, var(--school-green)); }

/* Точки групп кружков и рамка логотипа — цвета радуги с эмблемы */
.hero-brand__logo { box-shadow: 0 0 0 6px var(--bg), 0 0 0 8px var(--school-yellow); }
@media (max-width: 639px) { .hero-brand__logo { box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--school-yellow); } }
.wins li:nth-child(2) { border-top-color: var(--school-yellow); }
.wins li:nth-child(3) { border-top-color: var(--school-blue); }
.chips li { background: color-mix(in oklab, var(--school-green) 10%, var(--bg)); }

/* ------------------------------------------------------------------ движение */
/* Появление блоков при прокрутке: один раз, только transform и opacity.
   Класс .anim ставит site.js, и только без «уменьшить движение» — без JS всё видно сразу. */
html.anim .rv { opacity: 0; transform: translateY(18px); }
html.anim .rv.in {
  opacity: 1; transform: none;
  transition: opacity 600ms var(--ease-out-strong), transform 700ms var(--ease-out-strong);
  transition-delay: var(--d, 0ms);
}

/* Отклик на наведение: только мышь */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .quick, .club-group { transition: transform 200ms var(--ease-out-strong), box-shadow 200ms ease; }
  .quick:hover, .club-group:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgb(20 48 29 / 0.35); }
  .chips li { transition: background-color 150ms ease, color 150ms ease; }
  .chips li:hover { background: var(--school-green); color: #fff; }
  .frame--photo { overflow: hidden; }
  .frame--photo .frame__img { transition: transform 600ms var(--ease-out-strong); }
  .frame--photo:hover .frame__img { transform: scale(1.03); }
  .quick__num { transition: transform 200ms var(--ease-out-strong); display: inline-block; }
  .quick:hover .quick__num { transform: translateX(4px); }
}
.why-card > .why-card__num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ подстраницы */
.subpage > section.page-hero { padding-top: calc(var(--nav) + 72px); padding-bottom: 56px; }
.page-hero h1 { font: var(--display-weight) clamp(36px, 2.6vw + 22px, 60px)/1.05 var(--font-display); letter-spacing: var(--display-tracking); margin: var(--s-4) 0 var(--s-5); max-width: 18ch; }
.page-hero .t-lead { max-width: 60ch; }
.crumbs { display: flex; gap: var(--s-2); align-items: center; font-size: var(--t-small); color: var(--muted); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.page-toc { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); }
.page-hero { position: relative; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; right: 0; top: var(--nav); bottom: 0; width: min(28vw, 360px); opacity: .9; pointer-events: none;
  background: linear-gradient(90deg, transparent 0 18%, var(--school-green) 18% 46%, var(--school-yellow) 46% 66%, var(--school-green) 66% 100%);
  -webkit-mask: linear-gradient(180deg, #000, transparent 85%); mask: linear-gradient(180deg, #000, transparent 85%);
}
@media (max-width: 1023px) { .page-hero::before { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .page-hero::before { animation: band-in 1000ms var(--ease-out-strong) 150ms backwards; transform-origin: 100% 0; }
  .page-hero .wrap > * { animation: hero-rise 700ms var(--ease-out-strong) backwards; }
  .page-hero .wrap > :nth-child(2) { animation-delay: 70ms; }
  .page-hero .wrap > :nth-child(3) { animation-delay: 140ms; }
  .page-hero .wrap > :nth-child(4) { animation-delay: 210ms; }
}
@keyframes band-in { from { transform: scaleY(0.2); opacity: 0; } }

.page-rows .rows__value { max-width: 66%; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.page-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.page-table caption { text-align: left; font: 500 var(--t-card)/1.3 var(--font-text); padding-bottom: var(--s-4); }
.page-table th, .page-table td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.page-table th:first-child, .page-table tbody th { text-align: left; white-space: normal; font-weight: 400; padding-left: 0; }
.page-table thead th { font-size: var(--t-small); color: var(--muted); font-weight: 500; }
.page-table tbody td:last-child { color: var(--accent); font-weight: 500; }
.grid > .page-table.span-12 { margin-top: var(--s-7); }
.page-source { margin-top: var(--s-7); }

.doc-groups { row-gap: var(--s-8); }
.doc-group__h { font: 500 var(--t-card)/1.3 var(--font-text); margin: 0 0 var(--s-3); padding-bottom: var(--s-3); border-bottom: 2px solid var(--school-yellow); }
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-list a { display: grid; gap: 2px; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.doc-list__t { font-weight: 500; }
.doc-list__m { font-size: var(--t-small); color: var(--muted); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .doc-list a { transition: transform 200ms var(--ease-out-strong), color 150ms ease; }
  .doc-list a:hover { transform: translateX(6px); color: var(--accent); }
}
@media (max-width: 639px) {
  .page-rows .rows__value { max-width: none; }
  .page-table th, .page-table td { padding: 12px 8px; }
}
/* шапка на ноутбуках 1024–1279: пять пунктов, язык и кнопка не помещаются — кнопка звонка уходит */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav__actions .btn { display: none; }
}

/* Поступление: шаги, списки документов, профили */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.step { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-6); }
.step__n {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--school-green); color: #fff; font: 500 18px/1 var(--font-display); margin-bottom: var(--s-2);
}
.step:nth-child(2) .step__n { background: var(--school-yellow); color: var(--ink); }
.step:nth-child(3) .step__n { background: var(--school-blue); }
.step h3 { font: 500 var(--t-card)/1.3 var(--font-text); margin: 0; }
.step p { margin: 0; }
.adm-docs { margin-top: var(--s-8); }
.checks-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.checks-list li { position: relative; padding-left: 32px; line-height: 1.5; }
.checks-list li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--school-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.adm-note { margin-top: var(--s-4); color: var(--muted); font-size: var(--t-small); }
.adm-link { margin-top: var(--s-5); }
.profile-chips { display: grid; gap: var(--s-3); }
.profile-chip { display: block; padding: 14px 18px; border-radius: 12px; background: color-mix(in oklab, var(--c) 12%, var(--bg)); border-left: 4px solid var(--c); font-weight: 500; }
.adm-cta__box {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap;
  padding: var(--s-7); border-radius: 20px; background: var(--school-green-deep); color: #fbf7ea;
}
.adm-cta__box h2 { font: var(--display-weight) clamp(26px, 1.2vw + 18px, 36px)/1.15 var(--font-display); margin: 0 0 var(--s-3); color: inherit; }
.adm-cta__box p { margin: 0; max-width: 56ch; color: #d6e3d1; }
.adm-cta__box .btn--primary { background: var(--school-yellow); color: var(--ink); }
@media (max-width: 1023px) { .steps { grid-template-columns: 1fr; } }
@media (max-width: 639px) { .adm-cta__box { padding: var(--s-6); } .adm-cta__box .btn { width: 100%; justify-content: center; } }


/* ===================================================================== Material 3 Expressive
   Тональные контейнеры из цветов школы, крупные скругления и формы из библиотеки M3,
   кнопки-пилюли, которые меняют форму при нажатии, пружинная анимация. */
:root {
  --md-primary: #10773c; --md-on-primary: #ffffff;
  --md-primary-container: #b9efc2; --md-on-primary-container: #002110;
  --md-secondary-container: #ffe17a; --md-on-secondary-container: #251a00;
  --md-tertiary-container: #d6e3ff; --md-on-tertiary-container: #001b3e;
  --md-rose-container: #ffd9de; --md-on-rose-container: #3f0016;
  --md-surface: #fcf9ef; --md-surface-low: #f6f1e2; --md-surface-c: #efe9d7; --md-surface-high: #e8e1cc;
  --md-outline-variant: #cfc7b0;
  --p-bg: var(--md-surface); --p-surface: var(--md-surface-low);
  --shape-m: 16px; --shape-l: 24px; --shape-xl: 32px; --shape-2xl: 48px;
  /* пружина M3 «spatial default»: лёгкий перелёт ~2%, без раскачки */
  --spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);
  --spring-dur: 550ms;
  --display-weight: 500;
  --btn-h: 52px;
  --shape-cookie12: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50.00 1.00 L51.70 1.30 L53.35 2.15 L54.90 3.42 L56.34 4.91 L57.69 6.38 L59.01 7.62 L60.35 8.47 L61.80 8.86 L63.39 8.79 L65.15 8.38 L67.06 7.78 L69.05 7.22 L71.03 6.89 L72.88 6.97 L74.50 7.56 L75.82 8.68 L76.82 10.24 L77.53 12.11 L78.03 14.12 L78.47 16.07 L78.99 17.80 L79.73 19.21 L80.79 20.27 L82.20 21.01 L83.93 21.53 L85.88 21.97 L87.89 22.47 L89.76 23.18 L91.32 24.18 L92.44 25.50 L93.03 27.12 L93.11 28.97 L92.78 30.95 L92.22 32.94 L91.62 34.85 L91.21 36.61 L91.14 38.20 L91.53 39.65 L92.38 40.99 L93.62 42.31 L95.09 43.66 L96.58 45.10 L97.85 46.65 L98.70 48.30 L99.00 50.00 L98.70 51.70 L97.85 53.35 L96.58 54.90 L95.09 56.34 L93.62 57.69 L92.38 59.01 L91.53 60.35 L91.14 61.80 L91.21 63.39 L91.62 65.15 L92.22 67.06 L92.78 69.05 L93.11 71.03 L93.03 72.88 L92.44 74.50 L91.32 75.82 L89.76 76.82 L87.89 77.53 L85.88 78.03 L83.93 78.47 L82.20 78.99 L80.79 79.73 L79.73 80.79 L78.99 82.20 L78.47 83.93 L78.03 85.88 L77.53 87.89 L76.82 89.76 L75.82 91.32 L74.50 92.44 L72.88 93.03 L71.03 93.11 L69.05 92.78 L67.06 92.22 L65.15 91.62 L63.39 91.21 L61.80 91.14 L60.35 91.53 L59.01 92.38 L57.69 93.62 L56.34 95.09 L54.90 96.58 L53.35 97.85 L51.70 98.70 L50.00 99.00 L48.30 98.70 L46.65 97.85 L45.10 96.58 L43.66 95.09 L42.31 93.62 L40.99 92.38 L39.65 91.53 L38.20 91.14 L36.61 91.21 L34.85 91.62 L32.94 92.22 L30.95 92.78 L28.97 93.11 L27.12 93.03 L25.50 92.44 L24.18 91.32 L23.18 89.76 L22.47 87.89 L21.97 85.88 L21.53 83.93 L21.01 82.20 L20.27 80.79 L19.21 79.73 L17.80 78.99 L16.07 78.47 L14.12 78.03 L12.11 77.53 L10.24 76.82 L8.68 75.82 L7.56 74.50 L6.97 72.88 L6.89 71.03 L7.22 69.05 L7.78 67.06 L8.38 65.15 L8.79 63.39 L8.86 61.80 L8.47 60.35 L7.62 59.01 L6.38 57.69 L4.91 56.34 L3.42 54.90 L2.15 53.35 L1.30 51.70 L1.00 50.00 L1.30 48.30 L2.15 46.65 L3.42 45.10 L4.91 43.66 L6.38 42.31 L7.62 40.99 L8.47 39.65 L8.86 38.20 L8.79 36.61 L8.38 34.85 L7.78 32.94 L7.22 30.95 L6.89 28.97 L6.97 27.12 L7.56 25.50 L8.68 24.18 L10.24 23.18 L12.11 22.47 L14.12 21.97 L16.07 21.53 L17.80 21.01 L19.21 20.27 L20.27 19.21 L21.01 17.80 L21.53 16.07 L21.97 14.12 L22.47 12.11 L23.18 10.24 L24.18 8.68 L25.50 7.56 L27.12 6.97 L28.97 6.89 L30.95 7.22 L32.94 7.78 L34.85 8.38 L36.61 8.79 L38.20 8.86 L39.65 8.47 L40.99 7.62 L42.31 6.38 L43.66 4.91 L45.10 3.42 L46.65 2.15 L48.30 1.30Z'/%3E%3C/svg%3E");
  --shape-cookie9: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50.00 1.00 L51.70 1.25 L53.36 1.96 L54.93 3.08 L56.40 4.49 L57.74 6.09 L58.99 7.72 L60.16 9.25 L61.31 10.57 L62.48 11.58 L63.74 12.24 L65.13 12.55 L66.69 12.52 L68.41 12.25 L70.29 11.83 L72.29 11.38 L74.35 11.03 L76.38 10.88 L78.31 11.04 L80.03 11.56 L81.50 12.46 L82.64 13.75 L83.45 15.36 L83.94 17.22 L84.15 19.25 L84.16 21.34 L84.06 23.39 L83.98 25.31 L84.01 27.06 L84.26 28.59 L84.80 29.91 L85.67 31.04 L86.87 32.02 L88.37 32.92 L90.08 33.81 L91.90 34.75 L93.70 35.80 L95.35 36.99 L96.73 38.35 L97.72 39.86 L98.26 41.49 L98.31 43.21 L97.89 44.97 L97.07 46.71 L95.92 48.40 L94.59 50.00 L93.20 51.51 L91.90 52.93 L90.80 54.29 L90.00 55.62 L89.57 56.98 L89.51 58.40 L89.80 59.92 L90.37 61.58 L91.11 63.36 L91.90 65.25 L92.61 67.21 L93.10 69.19 L93.28 71.11 L93.07 72.90 L92.44 74.50 L91.37 75.85 L89.92 76.93 L88.17 77.73 L86.21 78.29 L84.16 78.66 L82.12 78.92 L80.21 79.17 L78.50 79.51 L77.03 80.02 L75.83 80.78 L74.87 81.83 L74.11 83.19 L73.48 84.82 L72.91 86.66 L72.30 88.62 L71.57 90.57 L70.68 92.41 L69.59 93.99 L68.27 95.23 L66.76 96.04 L65.08 96.40 L63.27 96.29 L61.41 95.78 L59.55 94.95 L57.74 93.91 L56.02 92.81 L54.39 91.77 L52.86 90.92 L51.41 90.37 L50.00 90.18 L48.59 90.37 L47.14 90.92 L45.61 91.77 L43.98 92.81 L42.26 93.91 L40.45 94.95 L38.59 95.78 L36.73 96.29 L34.92 96.40 L33.24 96.04 L31.73 95.23 L30.41 93.99 L29.32 92.41 L28.43 90.57 L27.70 88.62 L27.09 86.66 L26.52 84.82 L25.89 83.19 L25.13 81.83 L24.17 80.78 L22.97 80.02 L21.50 79.51 L19.79 79.17 L17.88 78.92 L15.84 78.66 L13.79 78.29 L11.83 77.73 L10.08 76.93 L8.63 75.85 L7.56 74.50 L6.93 72.90 L6.72 71.11 L6.90 69.19 L7.39 67.21 L8.10 65.25 L8.89 63.36 L9.63 61.58 L10.20 59.92 L10.49 58.40 L10.43 56.98 L10.00 55.62 L9.20 54.29 L8.10 52.93 L6.80 51.51 L5.41 50.00 L4.08 48.40 L2.93 46.71 L2.11 44.97 L1.69 43.21 L1.74 41.49 L2.28 39.86 L3.27 38.35 L4.65 36.99 L6.30 35.80 L8.10 34.75 L9.92 33.81 L11.63 32.92 L13.13 32.02 L14.33 31.04 L15.20 29.91 L15.74 28.59 L15.99 27.06 L16.02 25.31 L15.94 23.39 L15.84 21.34 L15.85 19.25 L16.06 17.22 L16.55 15.36 L17.36 13.75 L18.50 12.46 L19.97 11.56 L21.69 11.04 L23.62 10.88 L25.65 11.03 L27.70 11.38 L29.71 11.83 L31.59 12.25 L33.31 12.52 L34.87 12.55 L36.26 12.24 L37.52 11.58 L38.69 10.57 L39.84 9.25 L41.01 7.72 L42.26 6.09 L43.60 4.49 L45.07 3.08 L46.64 1.96 L48.30 1.25Z'/%3E%3C/svg%3E");
  --shape-sunny8: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50.00 1.00 L51.70 1.28 L53.35 2.08 L54.90 3.36 L56.32 5.02 L57.59 6.93 L58.72 8.95 L59.74 10.95 L60.67 12.79 L61.58 14.36 L62.53 15.57 L63.59 16.37 L64.80 16.75 L66.22 16.74 L67.86 16.41 L69.72 15.84 L71.77 15.15 L73.96 14.47 L76.21 13.92 L78.44 13.60 L80.54 13.61 L82.42 14.00 L84.00 14.80 L85.20 16.00 L86.00 17.58 L86.39 19.46 L86.40 21.56 L86.08 23.79 L85.53 26.04 L84.85 28.23 L84.16 30.28 L83.59 32.14 L83.26 33.78 L83.25 35.20 L83.63 36.41 L84.43 37.47 L85.64 38.42 L87.21 39.33 L89.05 40.26 L91.05 41.28 L93.07 42.41 L94.98 43.68 L96.64 45.10 L97.92 46.65 L98.72 48.30 L99.00 50.00 L98.72 51.70 L97.92 53.35 L96.64 54.90 L94.98 56.32 L93.07 57.59 L91.05 58.72 L89.05 59.74 L87.21 60.67 L85.64 61.58 L84.43 62.53 L83.63 63.59 L83.25 64.80 L83.26 66.22 L83.59 67.86 L84.16 69.72 L84.85 71.77 L85.53 73.96 L86.08 76.21 L86.40 78.44 L86.39 80.54 L86.00 82.42 L85.20 84.00 L84.00 85.20 L82.42 86.00 L80.54 86.39 L78.44 86.40 L76.21 86.08 L73.96 85.53 L71.77 84.85 L69.72 84.16 L67.86 83.59 L66.22 83.26 L64.80 83.25 L63.59 83.63 L62.53 84.43 L61.58 85.64 L60.67 87.21 L59.74 89.05 L58.72 91.05 L57.59 93.07 L56.32 94.98 L54.90 96.64 L53.35 97.92 L51.70 98.72 L50.00 99.00 L48.30 98.72 L46.65 97.92 L45.10 96.64 L43.68 94.98 L42.41 93.07 L41.28 91.05 L40.26 89.05 L39.33 87.21 L38.42 85.64 L37.47 84.43 L36.41 83.63 L35.20 83.25 L33.78 83.26 L32.14 83.59 L30.28 84.16 L28.23 84.85 L26.04 85.53 L23.79 86.08 L21.56 86.40 L19.46 86.39 L17.58 86.00 L16.00 85.20 L14.80 84.00 L14.00 82.42 L13.61 80.54 L13.60 78.44 L13.92 76.21 L14.47 73.96 L15.15 71.77 L15.84 69.72 L16.41 67.86 L16.74 66.22 L16.75 64.80 L16.37 63.59 L15.57 62.53 L14.36 61.58 L12.79 60.67 L10.95 59.74 L8.95 58.72 L6.93 57.59 L5.02 56.32 L3.36 54.90 L2.08 53.35 L1.28 51.70 L1.00 50.00 L1.28 48.30 L2.08 46.65 L3.36 45.10 L5.02 43.68 L6.93 42.41 L8.95 41.28 L10.95 40.26 L12.79 39.33 L14.36 38.42 L15.57 37.47 L16.37 36.41 L16.75 35.20 L16.74 33.78 L16.41 32.14 L15.84 30.28 L15.15 28.23 L14.47 26.04 L13.92 23.79 L13.60 21.56 L13.61 19.46 L14.00 17.58 L14.80 16.00 L16.00 14.80 L17.58 14.00 L19.46 13.61 L21.56 13.60 L23.79 13.92 L26.04 14.47 L28.23 15.15 L30.28 15.84 L32.14 16.41 L33.78 16.74 L35.20 16.75 L36.41 16.37 L37.47 15.57 L38.42 14.36 L39.33 12.79 L40.26 10.95 L41.28 8.95 L42.41 6.93 L43.68 5.02 L45.10 3.36 L46.65 2.08 L48.30 1.28Z'/%3E%3C/svg%3E");
}

/* мобильная база: без серой вспышки при тапе, без задержки, текст кнопок не выделяется */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
a, button, .btn { touch-action: manipulation; }
.btn, .lang__btn, .nav__toggle, .chips li { -webkit-user-select: none; user-select: none; }

/* типографика: акцентные заголовки */
h1, .page-hero h1 { font-weight: 600; letter-spacing: -0.035em; }
h2 { font-weight: 500; letter-spacing: -0.03em; }

/* ---------- кнопки: пилюли, тональная вторая, морфинг формы при нажатии */
.btn {
  height: var(--btn-h); padding-inline: 28px; border-radius: 999px; font-weight: 500;
  transition: border-radius var(--spring-dur) var(--spring), transform var(--spring-dur) var(--spring), background-color 150ms ease, box-shadow 150ms ease;
}
.btn--primary { background: var(--md-primary); color: var(--md-on-primary); border-color: transparent; }
.btn--secondary { background: var(--md-primary-container); color: var(--md-on-primary-container); border-color: transparent; }
.btn:active { border-radius: 14px; transform: scale(0.97); transition-duration: 120ms; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: color-mix(in oklab, var(--md-primary) 90%, #ffffff); box-shadow: 0 2px 6px -2px rgb(16 119 60 / 0.45); }
  .btn--secondary:hover { background: color-mix(in oklab, var(--md-primary-container) 88%, var(--md-on-primary-container)); }
}
.ground-inverse .btn--primary { background: var(--school-yellow); color: #1f1a00; }
.ground-inverse .btn--secondary { background: rgb(255 255 255 / 0.12); color: #fbf7ea; }
.nav__actions .btn { height: 44px; }

/* ---------- шапка: индикатор-пилюля у текущей страницы, сегментная кнопка языка */
.nav__link { border-radius: 999px; padding-inline: 14px; transition: background-color 150ms ease; }
.nav__link[aria-current="page"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.nav__link[aria-current="page"]::after { display: none; }
@media (hover: hover) and (pointer: fine) { .nav__link:hover { background: var(--md-surface-c); } }
.lang { background: var(--md-surface-c); height: 44px; }
.lang__thumb { background: var(--md-primary-container); box-shadow: none; transition: transform var(--spring-dur) var(--spring); }
.lang__btn[aria-pressed="true"] { color: var(--md-on-primary-container); }

/* ---------- главный экран: асимметричная форма фото, «печенье» за логотипом, «солнце» у фото */
.hero-visual.frame { border-radius: var(--shape-2xl) 180px var(--shape-2xl) var(--shape-2xl); overflow: hidden; }
.hero-text.hero-split { position: relative; }
.hero-split::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 220px; aspect-ratio: 1; left: calc(50% - 60px); bottom: -40px;
  background: var(--md-secondary-container); -webkit-mask: var(--shape-sunny8) center / contain no-repeat; mask: var(--shape-sunny8) center / contain no-repeat;
}
.hero { isolation: isolate; }
.hero-brand { position: relative; isolation: isolate; }
.hero-brand__logo { box-shadow: none !important; background: #fff; }
.hero-brand::before {
  content: ""; position: absolute; z-index: -1; left: -14px; top: 50%; width: 140px; aspect-ratio: 1; margin-top: -70px;
  background: var(--md-secondary-container); -webkit-mask: var(--shape-cookie12) center / contain no-repeat; mask: var(--shape-cookie12) center / contain no-repeat;
}
@media (max-width: 1023px) { .hero-split::after { display: none; } }
@media (max-width: 639px) { .hero-brand::before { width: 92px; margin-top: -46px; left: -10px; } .hero-visual.frame { border-radius: var(--shape-xl) 96px var(--shape-xl) var(--shape-xl); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-brand::before { animation: shape-spin-in 1200ms var(--spring) 150ms backwards; }
  .hero-split::after { animation: shape-spin-in 1400ms var(--spring) 350ms backwards; }
}
@keyframes shape-spin-in { from { transform: rotate(-60deg) scale(0.6); opacity: 0; } }

/* ---------- карточки: тональные поверхности, крупное скругление, морфинг угла при наведении */
.card { --c-border: transparent; border-radius: var(--shape-xl); box-shadow: none; background: var(--md-surface-low); }
.ground-surface .card { background: var(--md-surface); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card { transition: border-radius var(--spring-dur) var(--spring), transform var(--spring-dur) var(--spring), box-shadow 200ms ease; }
  .quick:hover, .club-group:hover, .why-card:hover, .step:hover { border-radius: var(--shape-2xl); transform: translateY(-3px); box-shadow: 0 12px 28px -18px rgb(20 48 29 / 0.45); }
}

/* «Почему выбирают»: разноцветные контейнеры вместо зелёного фона */
#why { background: var(--md-surface-low); }
#why .why-card { --c-border: transparent; }
#why .why-card:nth-child(6n+1) { background: var(--md-primary-container); color: var(--md-on-primary-container); border-radius: var(--shape-xl) var(--shape-xl) var(--shape-xl) 88px; }
#why .why-card:nth-child(6n+2) { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
#why .why-card:nth-child(6n+3) { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); border-radius: var(--shape-xl) 88px var(--shape-xl) var(--shape-xl); }
#why .why-card:nth-child(6n+4) { background: var(--md-rose-container); color: var(--md-on-rose-container); border-radius: 88px var(--shape-xl) var(--shape-xl) var(--shape-xl); }
#why .why-card:nth-child(6n+5) { background: var(--md-primary-container); color: var(--md-on-primary-container); }
#why .why-card:nth-child(6n+6) { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-radius: var(--shape-xl) var(--shape-xl) 88px var(--shape-xl); }
#why .why-card > .why-card__num { color: inherit; font-weight: 600; font-size: clamp(48px, 3vw + 26px, 72px); letter-spacing: -0.04em; }
#why .why-card h3 { color: inherit; }
#why .why-card p:not(.why-card__num) { color: inherit; opacity: 0.86; }
#why .why-source { color: var(--muted); }

/* ---------- директор: фото в форме арки; на телефоне — арка рядом с именем */
.director {
  display: grid; column-gap: var(--gutter); row-gap: var(--s-5); align-items: start;
  grid-template-columns: minmax(0, 7fr) minmax(0, 1fr) minmax(0, 4fr);
  grid-template-areas: "id . photo" "body . photo";
}
.director__photo { grid-area: photo; }
.director__photo img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%;
  border-radius: 999px 999px var(--shape-xl) var(--shape-xl); background: var(--md-primary-container);
}
.director__id { grid-area: id; display: grid; gap: var(--s-3); }
.director__id h2 { margin: 0; }
.director__body { grid-area: body; display: grid; gap: var(--s-6); }
.director__body .t-lead { margin: 0; max-width: 56ch; }
@media (max-width: 1023px) {
  .director { grid-template-columns: 160px minmax(0, 1fr); grid-template-areas: "photo id" "body body"; align-items: center; column-gap: var(--s-6); }
  .director__body { margin-top: var(--s-3); }
}
@media (max-width: 639px) {
  .director { grid-template-columns: 104px minmax(0, 1fr); column-gap: var(--s-4); }
  .director__photo img { border-radius: 999px 999px 20px 20px; }
  .director__id h2 { font-size: 24px; line-height: 1.2; }
}

/* ---------- чипы, кружки, Instagram */
.chips li { background: var(--md-surface-c); border-radius: 999px; padding: 8px 14px; }
.ground-surface .chips li { background: var(--md-surface-low); }
.club-group__dot { width: 40px; height: 40px; border-radius: 0; background: var(--dot); -webkit-mask: var(--shape-cookie9) center / contain no-repeat; mask: var(--shape-cookie9) center / contain no-repeat; }
.ig-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); margin-top: var(--s-7); }
.ig-card {
  display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5) var(--s-6); border-radius: 999px;
  background: var(--md-primary-container); color: var(--md-on-primary-container); text-decoration: none;
  transition: border-radius var(--spring-dur) var(--spring), transform var(--spring-dur) var(--spring);
}
.ig-card--kids { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.ig-card .ig { width: 28px; height: 28px; flex: none; }
.ig-card > span { display: grid; gap: 2px; }
.ig-card b { font-weight: 600; }
.ig-card > span > span { font-size: var(--t-small); opacity: 0.85; }
.ig-card:active { border-radius: var(--shape-l); transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .ig-card:hover { border-radius: var(--shape-xl); transform: translateY(-2px); } }
@media (max-width: 639px) { .ig-row { grid-template-columns: 1fr; gap: var(--s-3); } .ig-card { border-radius: var(--shape-xl); } }
.contact__ig { line-height: 1.8; }

/* ---------- поступление: номера шагов в форме «печенья» */
.step__n { border-radius: 0; width: 52px; height: 52px; -webkit-mask: var(--shape-cookie9) center / contain no-repeat; mask: var(--shape-cookie9) center / contain no-repeat; }
.profile-chip { border-radius: var(--shape-l); border-left: 0; background: color-mix(in oklab, var(--c) 16%, var(--bg)); }
.adm-cta__box { border-radius: var(--shape-2xl) var(--shape-2xl) var(--shape-2xl) 120px; }
.doc-list a { border-radius: var(--shape-m); }

/* ---------- появление при прокрутке — на пружине */
html.anim .rv.in { transition: opacity 500ms var(--ease-out-strong), transform 800ms var(--spring); transition-delay: var(--d, 0ms); }
/* правки M3: арка директора, ритм блока, кнопки без подчёркивания, «солнце» не налезает на текст */
.director { grid-template-rows: auto 1fr; }
.director__photo img { border-radius: 50% 50% var(--shape-xl) var(--shape-xl) / 40% 40% var(--shape-xl) var(--shape-xl); }
@media (max-width: 1023px) { .director { grid-template-rows: auto auto; } }
@media (max-width: 639px) { .director__photo img { border-radius: 50% 50% 18px 18px / 40% 40% 18px 18px; } }
.btn, .btn:hover { text-decoration: none; background-image: none; }
.hero-split::after { left: calc(50% - 16px); bottom: -56px; width: 200px; }

/* ---------- «Безопасно и удобно»: восемь карточек с фото из Instagram школы */
.care-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.care-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--md-surface-low); }
.care-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--md-surface-c); }
.care-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--spring); }
.care-card__body { display: grid; gap: var(--s-2); padding: var(--s-5) var(--s-5) var(--s-5); align-content: start; flex: 1; }
.care-card h3 { font: 600 var(--t-card)/1.25 var(--font-text); margin: 0; }
.care-card p { margin: 0; font-size: 15px; line-height: 1.5; color: color-mix(in oklab, var(--ink) 86%, transparent); }
.care-card__src {
  justify-self: start; margin-top: var(--s-2); display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--md-surface-c); color: var(--muted);
  font-size: 13px; font-weight: 500; text-decoration: none; transition: background-color 150ms ease, color 150ms ease;
}
.care-card__src .ig { width: 14px; height: 14px; }
.care-card:nth-child(4n+1) .care-card__media { border-radius: 0 0 var(--shape-xl) 0; }
.care-card:nth-child(4n+3) .care-card__media { border-radius: 0 0 0 var(--shape-xl); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .care-card { transition: border-radius var(--spring-dur) var(--spring), transform var(--spring-dur) var(--spring), box-shadow 200ms ease; }
  .care-card:hover { border-radius: var(--shape-2xl); transform: translateY(-3px); box-shadow: 0 12px 28px -18px rgb(20 48 29 / 0.45); }
  .care-card:hover .care-card__media img { transform: scale(1.04); }
  .care-card__src:hover { background: var(--md-primary-container); color: var(--md-on-primary-container); }
}
@media (max-width: 1279px) { .care-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .care-grid { grid-template-columns: 1fr; gap: var(--s-3); }
  .care-card { flex-direction: row; border-radius: var(--shape-l); }
  .care-card__media { flex: none; width: 112px; aspect-ratio: auto; border-radius: 0 !important; }
  .care-card__body { padding: var(--s-4); gap: 6px; }
  .care-card h3 { font-size: 17px; }
  .care-card p { font-size: 14px; }
}
/* дата поста прижата к низу карточки — в одной линии по всему ряду */
.care-card__body { display: flex; flex-direction: column; }
.care-card__src { margin-top: auto; align-self: flex-start; }
.care-card__body > p { margin-bottom: var(--s-3); }