/* Шрифты лежат в fonts/ (woff2). Браузер скачивает только те начертания,
   символы которых есть на странице; основные предзагружаются в <head>. */
@font-face{font-family:'Marck Script';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/marck-cyrillic.woff2) format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Marck Script';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/marck-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(fonts/montserrat-cyrillic.woff2) format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(fonts/montserrat-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/playfair-cyrillic.woff2) format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/playfair-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/playfair-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Yeseva One';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/yeseva-cyrillic.woff2) format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Yeseva One';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/yeseva-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ============================================================
   Красота с любовью — бьюти-пространство в Гатчине
   ============================================================ */

:root{
  --cream:#FCF5F0;
  --cream-2:#FAEFE7;
  --cream-3:#F8EDE4;
  --pink-soft:#F7D2D6;
  --pink-band:#F5C7CE;
  --pink-pale:#FDEFF1;
  --pink-icon:#F9DCE1;
  --rose:#E77E93;
  --rose-dk:#D9647C;
  --rose-ink:#9E3248;               /* тёмная роза для мелкого текста: контраст 7:1 на белом */
  --rose-lt:#F0A7B6;
  --ink:#2C2523;
  --ink-2:#4A3E39;
  --muted:#7A6A64;
  --line:rgba(44,37,35,.10);
  --line-rose:rgba(231,126,147,.35);

  --f-disp:'Playfair Display',Georgia,'Times New Roman',serif;
  --f-script:'Marck Script','Playfair Display',cursive;
  --f-logo:'Yeseva One','Playfair Display',Georgia,serif;
  --f-body:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;

  --shadow-sm:0 2px 10px rgba(120,80,70,.05);
  --shadow-md:0 8px 28px rgba(150,100,95,.10);
  --shadow-lg:0 18px 50px rgba(150,100,95,.14);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.32,.72,0,1);

  /* паспарту — рама вокруг фото, как оправа гримёрного зеркала */
  --mat:10px;                       /* ширина поля рамы */
  --mat-bg:#FFFDFB;                 /* сама рама */
  --mat-line:rgba(44,37,35,.09);    /* её внешний контур */
  --pad:clamp(20px,4vw,48px);
}

*,*::before,*::after{box-sizing:border-box}

/* атрибут hidden должен побеждать любой display из классов */
[hidden]{display:none!important}

html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* height:auto — иначе HTML-атрибут height перебивает aspect-ratio */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

h1,h2,h3,h4{font-family:var(--f-disp);font-weight:400;line-height:1.15;margin:0;letter-spacing:.005em}

.container{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.center{text-align:center}

/* ---------- утилиты ---------- */
.script{font-family:var(--f-script);color:var(--rose);font-weight:400}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   Кнопки
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-body);font-size:13.5px;font-weight:500;letter-spacing:.01em;
  padding:13px 30px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease),
    box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease);
}
.btn--rose{background:var(--rose);color:#fff;box-shadow:0 6px 18px rgba(231,126,147,.28)}
.btn--rose:hover{background:var(--rose-dk);box-shadow:0 10px 26px rgba(231,126,147,.38);transform:translateY(-2px)}
.btn--pale{background:var(--pink-icon);color:var(--rose-dk)}
.btn--pale:hover{background:var(--rose);color:#fff;transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--rose-dk);border-color:var(--line-rose)}
.btn--ghost:hover{background:var(--rose);color:#fff;border-color:var(--rose)}
.btn--sm{padding:10px 24px;font-size:12.5px}
.btn--lg{padding:15px 36px;font-size:14.5px}
.btn--block{width:100%}
.btn:active{transform:scale(.98)}

/* стрелка у главных кнопок живёт в своём кружке и уезжает по диагонали */
.btn__go{
  width:26px;height:26px;margin:-6px -14px -6px 2px;flex:none;
  border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.22);
  transition:transform .45s var(--ease-soft),background .3s var(--ease);
}
.btn__go svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.btn:hover .btn__go{transform:translate(3px,-3px);background:rgba(255,255,255,.34)}
.btn--pale .btn__go,.btn--ghost .btn__go{background:rgba(231,126,147,.16)}
.btn--pale:hover .btn__go,.btn--ghost:hover .btn__go{background:rgba(255,255,255,.28)}
@media (prefers-reduced-motion:reduce){.btn__go{transition:none}}

/* ============================================================
   Иконки
   ============================================================ */
.ic{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.4;
    stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic-badge{
  width:52px;height:52px;border-radius:50%;background:var(--pink-icon);
  display:grid;place-items:center;color:var(--rose-dk);flex:none;
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.ic-badge .ic{width:26px;height:26px}
.ic-badge--lg{width:64px;height:64px}
.ic-badge--lg .ic{width:30px;height:30px}

/* ============================================================
   Шапка
   ============================================================ */
.hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(252,245,240,.86);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .5s var(--ease-soft),background .5s var(--ease-soft);
}
/* при прокрутке сплошная полоса уходит, стеклом становится сам «остров»
   (у родителя backdrop-filter снимаем — иначе размытие у острова не видит страницу) */
.hdr.is-stuck{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
/* при прокрутке шапка собирается в «остров» и отрывается от краёв */
.hdr__in{
  display:flex;align-items:center;gap:28px;min-height:78px;
  border-radius:0;background:transparent;
  box-shadow:0 0 0 rgba(150,110,100,0);
  transition:min-height .5s var(--ease-soft),border-radius .5s var(--ease-soft),
    box-shadow .5s var(--ease-soft),background .5s var(--ease-soft),
    margin .5s var(--ease-soft),padding .5s var(--ease-soft);
}
.hdr.is-stuck .hdr__in{
  min-height:64px;margin:10px auto;border-radius:999px;
  padding-inline:clamp(18px,2.4vw,30px);
  /* стекло: полупрозрачный фон, сильное размытие с насыщенностью, светлая кромка */
  background:rgba(255,251,248,.62);
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 12px 34px rgba(150,110,100,.16),inset 0 1px 0 rgba(255,255,255,.8),
    0 0 0 1px rgba(255,255,255,.5),0 0 0 1.5px rgba(150,110,100,.08);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hdr.is-stuck .hdr__in{background:rgba(255,251,248,.95)}
}
@media (prefers-reduced-motion:reduce){.hdr__in{transition:none}}

.logo{display:block;line-height:1;flex:none;padding:4px 0}
.logo__a{display:block;font-family:var(--f-logo);color:var(--rose);font-size:24px;letter-spacing:.015em}
.logo__b{display:block;font-family:var(--f-logo);color:var(--rose);font-size:16px;opacity:.8;margin:4px 0 0 32px;letter-spacing:.01em}

.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav a{
  position:relative;font-size:13.5px;font-weight:500;color:var(--ink-2);
  padding:6px 0;transition:color .3s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--rose);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav a:hover{color:var(--rose-dk)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.nav a.is-active{color:var(--rose-dk)}

.hdr__cta{flex:none}
.nav .btn{display:none} /* дублирующая кнопка — только в мобильном меню */

/* Гамбургер — та же круглая розовая плашка, что у иконок по всему сайту
   (.ic-badge), а не голый хайлайн-кружок. Полоски разной длины — деталь,
   а не три одинаковых штриха; при открытии складываются в ровный крестик
   и вся кнопка чуть довoрачивается для лёгкого «щелчка». */
.burger{
  display:none;width:44px;height:44px;border:0;border-radius:50%;
  background:var(--pink-icon);cursor:pointer;padding:0;place-items:center;place-content:center;margin-left:auto;
  transition:background .35s var(--ease),transform .5s var(--ease-soft);
}
.burger:hover{background:var(--rose-lt)}
.burger:active{transform:scale(.92)}
.burger.is-open{transform:rotate(90deg)}
.burger.is-open:active{transform:rotate(90deg) scale(.92)}

.burger span{
  display:block;height:1.6px;border-radius:2px;background:var(--rose-dk);
  transition:width .45s var(--ease-soft),transform .5s var(--ease-soft),
    opacity .3s var(--ease),background .35s var(--ease);
}
.burger span:nth-child(1){width:20px}
.burger span:nth-child(2){width:13px}
.burger span:nth-child(3){width:20px}
.burger span+span{margin-top:4.5px}

.burger.is-open span{background:var(--ink)}
.burger.is-open span:nth-child(1){width:19px;transform:translateY(6.1px) rotate(45deg)}
.burger.is-open span:nth-child(2){width:19px;opacity:0}
.burger.is-open span:nth-child(3){width:19px;transform:translateY(-6.1px) rotate(-45deg)}

@media (prefers-reduced-motion:reduce){
  .burger,.burger span{transition:none}
}

/* ============================================================
   Заголовки секций
   ============================================================ */
.sec{padding:clamp(64px,8.5vw,116px) 0}
.sec--tight{padding:clamp(40px,5vw,60px) 0}
.sec-head{max-width:640px;margin:0 auto clamp(32px,4vw,48px)}
.sec-head h2{font-size:clamp(27px,3.4vw,38px)}
.sec-head p{margin:16px 0 0;color:var(--muted);font-size:14.5px}

.hdiv{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:16px}
.hdiv i{display:block;width:150px;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-rose) 22%,var(--line-rose) 78%,transparent)}
.hdiv svg{width:15px;height:15px;color:var(--rose-lt);fill:currentColor;stroke:none}

/* ============================================================
   Дуговое фото — общий приём макета
   ============================================================ */
.arc{
  position:relative;overflow:hidden;
  border-radius:36% 0 0 36% / 50% 0 0 50%;
  background:var(--cream-3);
  /* без паспарту: дуга выходит за край экрана, рама обрывалась бы */
  box-shadow:var(--shadow-md);
}
.arc img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   Хиро (главная)
   ============================================================ */
.hero{position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%)}
.hero__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  align-items:center;gap:clamp(24px,4vw,56px);
  min-height:min(78vh,660px);
  padding-block:clamp(40px,5vw,64px) clamp(48px,6vw,72px);
}
.hero__title{font-size:clamp(46px,7.2vw,84px);line-height:1.02}
.hero__title .script{display:block;font-size:clamp(38px,5.8vw,68px);line-height:1.05;
  margin:2px 0 0 clamp(24px,4.5vw,64px)}
.hero__sub{margin:26px 0 0;font-size:clamp(15px,1.4vw,17.5px);font-weight:500;color:var(--ink-2)}
.hero__tags{margin:12px 0 0;font-size:14.5px;color:var(--muted);letter-spacing:.01em}
.hero__cta{margin-top:30px}

.hero__feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.8vw,22px);margin-top:clamp(38px,5vw,58px)}
/* иконка над текстом при любой ширине — так же, как в блоке
   преимуществ на «Коворкинге»/«Услугах». Строчная раскладка
   (иконка слева от текста) была тесной для «Профессиональное
   оборудование» почти на всём диапазоне окна, от ~1000 до ~1250px,
   и распрямлялась только при развёрнутом на весь экран окне —
   слишком хрупко, чтобы полагаться на ширину */
.hero__feat{display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:8px;min-width:0}
.hero__feat .ic-badge{width:42px;height:42px}
.hero__feat .ic-badge .ic{width:21px;height:21px}
.hero__feat span{font-size:12.5px;line-height:1.45;color:var(--ink-2);
  min-width:0;overflow-wrap:break-word;max-width:150px}

.hero__media{
  position:relative;align-self:stretch;min-height:clamp(360px,52vw,620px);
  margin-right:calc(var(--pad) * -1);
}
.hero__media .arc{
  position:absolute;inset:clamp(18px,2.5vw,32px) 0;
  width:calc(100% + 6vw);
}
.hero__media .arc img{object-position:50% 42%}

.hero__blob{
  position:absolute;pointer-events:none;border-radius:50%;z-index:0;
  background:radial-gradient(circle at 35% 35%,rgba(247,210,214,.55),rgba(247,210,214,0) 68%);
  transition:transform 1.1s var(--ease-soft); /* сглаживает шаги параллакса за курсором */
}
.hero__blob--1{width:420px;height:420px;left:-160px;top:-120px}
.hero__blob--2{width:320px;height:320px;left:32%;bottom:-170px}
@media (prefers-reduced-motion:reduce){.hero__blob{transition:none}}

/* ============================================================
   Галерея пространства
   ============================================================ */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.5vw,18px)}
.gal figure{
  margin:0;padding:var(--mat);border-radius:20px;
  background:var(--mat-bg);box-shadow:0 1px 0 var(--mat-line) inset,var(--shadow-sm);
  outline:1px solid var(--mat-line);outline-offset:-1px;
  transition:box-shadow .5s var(--ease-soft),translate .5s var(--ease-soft);
}
.gal figure:hover{translate:0 -4px;box-shadow:var(--shadow-lg)}
.gal figure img{border-radius:12px}
.gal img{aspect-ratio:3/4;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
/* зум только в пределах рамы: рама 10px, картинка при 1.03 вырастает на ~2.5px */
.gal figure:hover img{transform:scale(1.03)}

/* ============================================================
   Направления
   ============================================================ */
.dirs{position:relative;background:var(--pink-soft);overflow:hidden}
.dirs__deco{
  position:absolute;left:-70px;bottom:-70px;width:min(300px,26vw);opacity:.34;z-index:0;
  pointer-events:none;user-select:none;filter:blur(2px) saturate(.9);
  -webkit-mask-image:radial-gradient(circle at 34% 68%,#000 22%,transparent 66%);
  mask-image:radial-gradient(circle at 34% 68%,#000 22%,transparent 66%);
}
@media (max-width:820px){.dirs__deco{display:none}}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);position:relative;z-index:1}
.card{
  background:#fff;border:1px solid rgba(255,255,255,.9);border-radius:16px;
  padding:clamp(26px,3vw,36px) clamp(20px,2.4vw,28px);
  text-align:center;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;align-items:center;
  transition:translate .4s var(--ease),box-shadow .4s var(--ease);
}
.card:hover{translate:0 -6px;box-shadow:var(--shadow-lg)}
.card:hover .ic-badge{background:var(--rose);color:#fff;transform:scale(1.08) rotate(-6deg)}
.card h3{margin:18px 0 0;font-size:clamp(19px,2vw,22px)}
.card p{margin:12px 0 22px;font-size:13.5px;color:var(--muted);line-height:1.6;flex:1}
.card .btn{margin-top:auto}

/* ============================================================
   Двухколоночные блоки
   ============================================================ */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,64px);align-items:center}
.split__media{
  padding:var(--mat);border-radius:26px;
  background:var(--mat-bg);box-shadow:var(--shadow-md);
  outline:1px solid var(--mat-line);outline-offset:-1px;
}
.split__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px}
/* вертикальные кадры (портрет, выпускница под неоном) — без обрезки в горизонталь */
.split__media--tall img{aspect-ratio:4/5}
.split--rev .split__media{order:2}
.split h2{font-size:clamp(26px,3.2vw,36px)}
.split .lead{margin:20px 0 0;color:var(--muted);font-size:14.5px}
.split .btn{margin-top:28px}
.split__line{width:110px;height:1px;background:var(--line-rose);margin-top:18px}

.ticks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.ticks .ic{width:19px;height:19px;color:var(--rose);margin-top:2px}

/* ============================================================
   Хлебные крошки и шапка внутренней страницы
   ============================================================ */
.crumbs{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);padding:22px 0 0}
.crumbs a:hover{color:var(--rose-dk)}
.crumbs span{opacity:.55}

.phead{position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%)}
.phead__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(24px,4vw,56px);align-items:center;
  padding-block:clamp(28px,4vw,50px) clamp(40px,5vw,64px);
}
.phead h1{font-size:clamp(34px,4.6vw,50px)}
.phead .lead{margin:20px 0 0;color:var(--muted);font-size:14.5px;max-width:430px}
.phead__media{position:relative;height:clamp(240px,30vw,340px);margin-right:calc(var(--pad) * -1)}
.phead__media .arc{height:100%;width:calc(100% + 4vw)}

/* ============================================================
   Полоса преимуществ
   ============================================================ */
.feats{background:var(--cream-3);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.feats__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,30px);
  padding-block:clamp(32px,4vw,46px)}
.feat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;min-width:0}
.feat span{font-size:12.5px;line-height:1.5;color:var(--ink-2);max-width:195px;
  min-width:0;overflow-wrap:break-word}

/* ============================================================
   Тарифы
   ============================================================ */
.tariffs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);align-items:stretch;margin-top:14px}
.tariffs--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.edu-tariffs{margin-top:clamp(52px,6.5vw,84px)}

/* --- запись на обучение: одна для всех тарифов, номер — главное действие --- */
.edu-zapis{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:clamp(22px,2.6vw,30px);padding:18px 26px 18px 18px;
  background:var(--pink-pale);border:1px solid var(--line-rose);border-radius:22px;
}
.edu-zapis .ic-badge{width:48px;height:48px;flex:none;background:#fff}
.edu-zapis__text{flex:1;min-width:200px}
.edu-zapis__text p{margin:4px 0 0;font-size:13px;color:var(--muted)}
.edu-zapis__text .edu-zapis__title{margin:0;font-family:var(--f-disp);font-size:clamp(18px,1.9vw,21px);color:var(--ink)}
.edu-zapis__phone{
  font-family:var(--f-disp);font-size:clamp(20px,2.3vw,26px);color:var(--rose-dk);
  text-decoration:none;white-space:nowrap;
  border-bottom:1px solid var(--line-rose);padding-bottom:2px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.edu-zapis__phone:hover{color:var(--rose);border-color:var(--rose)}
.edu-zapis__phone:focus-visible{outline:2px solid var(--rose);outline-offset:4px;border-radius:4px}

/* три варианта записи на «Контактах» */
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.book-ways{margin-top:clamp(16px,2vw,22px)}
.tariff{
  position:relative;display:flex;flex-direction:column;
  background:var(--pink-pale);border:1px solid rgba(231,126,147,.16);border-radius:16px;
  padding:clamp(24px,2.8vw,32px) clamp(20px,2.4vw,26px);text-align:center;
  transition:translate .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.tariff:hover{translate:0 -6px;box-shadow:var(--shadow-lg);border-color:var(--line-rose)}
.tariff h3{font-size:clamp(19px,2vw,22px)}
.tariff__price{margin:10px 0 0;font-family:var(--f-disp);font-size:clamp(19px,2vw,22px);color:var(--ink)}
.tariff__price b{color:var(--rose);font-weight:600}
.tariff__list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px;
  text-align:left;align-content:start;flex:1}
.tariff__list li{display:flex;gap:9px;align-items:center;font-size:13px;color:var(--ink-2)}
.tariff__list .ic{width:17px;height:17px;color:var(--rose)}
.tariff .btn{margin-top:24px}
.tariff__note{margin:6px 0 0;font-size:12px;color:var(--muted)}
/* повышение квалификации — горизонтальная карточка на всю ширину под тарифами */
.tariff--wide{grid-column:1/-1;flex-direction:row;align-items:center;
  gap:clamp(22px,4vw,64px);padding-inline:clamp(26px,4vw,56px)}
.tariff--wide .tariff__lead{flex:none;min-width:min(250px,100%)}
.tariff--wide .tariff__list{margin:0;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px 28px;align-content:center}
.tariff--wide .teacher__eyebrow{margin-bottom:8px}
@media (max-width:820px){
  .tariff--wide{flex-direction:column;align-items:stretch;gap:20px}
  .tariff--wide .tariff__lead{min-width:0}
  .tariff--wide .tariff__list{grid-template-columns:1fr}
}
.tariff--best{border-color:var(--line-rose);box-shadow:var(--shadow-md)}
.tariff__tag{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  padding:4px 14px;border-radius:999px;white-space:nowrap;
  background:var(--rose);color:#fff;font-size:11px;letter-spacing:.03em;font-weight:500;
  box-shadow:0 4px 12px rgba(231,126,147,.3);
}

/* ============================================================
   Типы рабочих мест
   ============================================================ */
.places{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.place{
  display:flex;gap:18px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:clamp(20px,2.2vw,26px);box-shadow:var(--shadow-sm);
  transition:translate .4s var(--ease),box-shadow .4s var(--ease);
}
.place:hover{translate:0 -4px;box-shadow:var(--shadow-md)}
.place:hover .ic-badge{background:var(--rose);color:#fff;transform:scale(1.08) rotate(-6deg)}
.place__body{min-width:0}
.place h3{font-size:clamp(17px,1.7vw,19px)}
.place p{margin:8px 0 0;font-size:13.5px;color:var(--muted);line-height:1.6}
.place__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:16px}
.place__price{font-family:var(--f-disp);font-size:17px;color:var(--ink)}
.place__price b{color:var(--rose);font-weight:600}

/* ============================================================
   Услуги
   ============================================================ */
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,26px)}
.svc-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:clamp(24px,2.6vw,32px);box-shadow:var(--shadow-sm);
  transition:translate .4s var(--ease),box-shadow .4s var(--ease);
}
.svc-card:hover{translate:0 -6px;box-shadow:var(--shadow-lg)}
.svc-card:hover .ic-badge{background:var(--rose);color:#fff;transform:scale(1.08) rotate(-6deg)}
.svc-card h3{margin:16px 0 0;font-size:clamp(19px,2vw,21px)}
/* кто принимает: Анастасия лично или мастер на выбор */
.svc-card__who{margin:6px 0 0;font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.svc-card__who--own{color:var(--rose-ink)}
.svc-card ul{list-style:none;margin:16px 0 24px;padding:0;display:grid;gap:9px;
  align-content:start;flex:1}
.svc-card li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--ink-2)}
.svc-card li::before{
  content:"";flex:none;width:5px;height:5px;margin-top:8px;border-radius:50%;
  background:var(--rose-lt);
}
.svc-card .btn{margin-top:auto;align-self:flex-start}

/* ============================================================
   Розовая CTA-полоса
   ============================================================ */
.band{background:var(--pink-band)}
.band__in{display:flex;align-items:center;gap:clamp(16px,3vw,34px);padding-block:clamp(24px,3vw,34px)}
.band .ic-badge{background:rgba(255,255,255,.62);color:var(--rose-dk)}
.band p{margin:0;font-size:15px;color:var(--ink);max-width:520px;line-height:1.55}
.band .btn{margin-left:auto}

/* ============================================================
   Мастера (наполняется из Google Таблицы)
   ============================================================ */
.masters{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:clamp(16px,2.2vw,26px);
}
.master{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:clamp(22px,2.6vw,30px) clamp(18px,2.2vw,24px);
  box-shadow:var(--shadow-sm);
  transition:translate .4s var(--ease),box-shadow .4s var(--ease);
}
.master:hover{translate:0 -5px;box-shadow:var(--shadow-lg)}
.master__ph{
  width:112px;height:112px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--pink-icon);display:grid;place-items:center;
}
.master__ph img{width:100%;height:100%;object-fit:cover}
.master__ini{
  font-family:var(--f-disp);font-size:34px;color:var(--rose-dk);
  letter-spacing:.02em;user-select:none;
}
.master h3{margin:16px 0 0;font-size:clamp(17px,1.8vw,19px)}
.master__role{margin:5px 0 0;font-size:12.5px;color:var(--rose-dk);
  letter-spacing:.02em}
.master__bio{margin:12px 0 20px;font-size:13.5px;color:var(--muted);
  line-height:1.6;flex:1}
.master .btn{margin-top:auto}

/* пометка на демонстрационном наполнении — исчезает, когда подключена таблица */
.demo-note{
  display:inline-block;margin:18px 0 0;padding:7px 16px;border-radius:99px;
  background:var(--pink-pale);border:1px dashed var(--line-rose);
  font-size:12.5px;color:var(--muted);
}

/* ============================================================
   Блок онлайн-записи
   ============================================================ */
.book{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,3vw,40px);
  background:var(--pink-pale);border:1px solid rgba(231,126,147,.16);border-radius:20px;
  padding:clamp(26px,3.2vw,38px) clamp(24px,3vw,40px);
}
.book h2{font-size:clamp(23px,2.6vw,30px)}
.book__who{
  margin:12px 0 0;padding:8px 16px;border-radius:99px;display:inline-block;
  background:var(--rose);color:#fff;font-size:13px;font-weight:500;
}
.book p{margin:12px 0 0;font-size:14.5px;color:var(--muted);max-width:430px}
.book__actions{display:flex;flex-wrap:wrap;gap:12px;margin-left:auto}

/* ============================================================
   Контакты
   ============================================================ */
.contacts__grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(28px,4vw,56px);align-items:start}
.clist{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:20px}
.clist li{display:flex;gap:14px;align-items:flex-start}
.clist .ic-badge{width:42px;height:42px}
.clist .ic-badge .ic{width:20px;height:20px}
.clist dl{margin:0}
.clist dt{font-size:12.5px;color:var(--muted);letter-spacing:.01em;font-weight:500}
.clist dd{margin:2px 0 0;font-size:15px;color:var(--ink)}
.clist a:hover{color:var(--rose-dk)}
.clist__note{display:block;margin-top:3px;font-size:13px;color:var(--muted)}
.clist__route{display:inline-block;margin-top:6px;font-size:13px;color:var(--rose-dk);
  text-decoration:none;border-bottom:1px solid var(--line-rose)}
.clist__route:hover{border-color:var(--rose-dk)}

/* вход в здание — фото двери и короткая подсказка */
.entry{
  display:flex;gap:18px;align-items:center;margin:30px 0 0;padding:var(--mat);
  border-radius:22px;background:var(--mat-bg);box-shadow:var(--shadow-md);
  outline:1px solid var(--mat-line);outline-offset:-1px;
}
.entry img{width:clamp(118px,14vw,160px);height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:16px;flex:none}
.entry figcaption{font-size:13.5px;line-height:1.6;color:var(--ink-2);padding-right:12px}
.entry figcaption b{display:block;margin-bottom:4px;font-family:var(--f-disp);font-weight:400;font-size:18px;color:var(--ink)}

.map{
  position:relative;margin:0;overflow:hidden;
  border-radius:32% 20px 20px 20px / 42% 20px 20px 20px;
  box-shadow:0 0 0 var(--mat) var(--mat-bg),0 0 0 calc(var(--mat) + 1px) var(--mat-line),var(--shadow-md);
  background:var(--cream-3);aspect-ratio:4/3;
}
/* карта — одна готовая картинка: цвет смягчён при сборке, а не фильтром на каждый кадр */
.map__tiles{width:100%;height:100%}
.map__tiles img{width:100%;height:100%;display:block;object-fit:cover}
/* вся карта ведёт в Яндекс Карты; подпись OSM остаётся кликабельной поверх */
.map__open{
  position:absolute;left:14px;bottom:12px;z-index:2;
  padding:8px 14px;border-radius:999px;font-size:12.5px;font-weight:500;
  color:var(--ink);text-decoration:none;
  background:rgba(255,251,248,.7);
  backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:0 4px 14px rgba(120,80,80,.16),inset 0 1px 0 rgba(255,255,255,.7);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.map__open::before{content:"";position:absolute;inset:-100vmax;z-index:-1}
.map__open:hover{background:rgba(255,255,255,.88);transform:translateY(-2px)}
.map__open:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.map__attr{z-index:3}
.map__pin{
  position:absolute;left:49.4%;top:46.5%;transform:translate(-50%,-100%);
  width:34px;height:34px;color:var(--rose);
  filter:drop-shadow(0 3px 5px rgba(120,60,70,.35));
}
.map__pin svg{width:100%;height:100%;fill:currentColor;stroke:#fff;stroke-width:1.4}
.map__attr{
  position:absolute;right:8px;bottom:6px;
  font-size:10.5px;color:var(--ink-2);background:rgba(255,255,255,.72);
  padding:2px 7px;border-radius:6px;
}
.map__attr a{text-decoration:underline}

/* ============================================================
   Подвал
   ============================================================ */
.ftr{
  /* тёмная роза нужна только здесь: бледный логотип и заголовки на розовом не читались */
  --rose-ink:#9E3248;
  position:relative;color:var(--ink);isolation:isolate;
  background:
    radial-gradient(90% 130% at 100% 0%,rgba(255,255,255,.5),transparent 60%),
    radial-gradient(70% 100% at 0% 100%,rgba(231,126,147,.16),transparent 65%),
    var(--pink-band);
}
/* светлая кромка по верхнему краю — отделяет подвал от плашки без рамки */
.ftr::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95) 18%,rgba(255,255,255,.95) 82%,transparent);
}
.ftr__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.7fr);
  gap:clamp(28px,4vw,64px);align-items:start;
  padding:clamp(34px,4vw,48px) 0 clamp(28px,3vw,36px);
}
.ftr__col{min-width:0}
.ftr .logo__a{color:var(--rose-ink)}
.ftr .logo__b{color:var(--rose-ink);opacity:.82}
.ftr__tag{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2)}

.ftr__h{font-family:var(--f-body);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--rose-ink);margin:0 0 14px}
.ftr__nav{
  display:grid;grid-template-columns:repeat(2,max-content);grid-template-rows:repeat(3,auto);
  grid-auto-flow:column;gap:10px clamp(22px,3vw,40px);
}
.ftr__nav a,.ftr__contacts a{
  width:fit-content;font-size:13.5px;color:var(--ink-2);padding-bottom:2px;
  /* подчёркивание «вырастает» слева направо */
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:color .3s var(--ease),background-size .45s var(--ease-soft);
}
.ftr__nav a:hover,.ftr__nav a:focus-visible,
.ftr__contacts a:hover,.ftr__contacts a:focus-visible{color:var(--rose-ink);background-size:100% 1px}
.ftr a:focus-visible{outline:2px solid var(--rose-ink);outline-offset:3px;border-radius:4px}

.ftr__where{display:flex;align-items:center;gap:20px}
.ftr__contacts{font-style:normal;display:grid;gap:7px;font-size:13.5px;color:var(--ink-2)}
.ftr__contacts b{display:block;color:var(--ink);font-weight:500}
.ftr__contacts a{font-size:15px;font-weight:500;color:var(--ink)}

.ftr__base{
  border-top:1px solid rgba(158,50,72,.14);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:16px 0 20px;font-size:12.5px;color:var(--ink-2);
}
.ftr__base svg{width:13px;height:13px;color:var(--rose-ink);fill:currentColor}
.ftr__base small{margin-left:auto;font-size:11.5px;opacity:.75}

/* ============================================================
   Появление при скролле
   ============================================================ */
.js .rev{opacity:0;transform:translateY(26px);filter:blur(6px);
  transition:opacity .9s var(--ease-soft),transform .9s var(--ease-soft),filter .9s var(--ease-soft)}
.js .rev.is-in{opacity:1;transform:none;filter:none}
@media (hover:none){.js .rev{filter:blur(4px)}}
.js .rev-d1{transition-delay:.09s}
.js .rev-d2{transition-delay:.18s}
.js .rev-d3{transition-delay:.27s}
.no-anim .rev{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  .js .rev{opacity:1;transform:none;filter:none;transition:none}
  .gal img,.card,.tariff,.btn{transition:none}
}

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width:1000px){

  .hero__grid{grid-template-columns:1fr;min-height:0;gap:36px}
  .hero__media{margin:0 calc(var(--pad) * -1) 0 0;height:clamp(300px,56vw,420px)}
  .hero__media .arc{inset:0}
  .hero__feats{margin-top:34px}
  .phead__grid{grid-template-columns:1fr;gap:30px}
  .phead__media{height:clamp(220px,42vw,300px)}
  .cards,.tariffs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards--3,.tariffs--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .places,.svc{grid-template-columns:1fr}
  .feats__grid{grid-template-columns:repeat(2,1fr);gap:28px}
  .gal{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:28px}
  .split--rev .split__media{order:0}
  .contacts__grid{grid-template-columns:1fr}
  .map{border-radius:70px 20px 20px 20px}
  .band__in{flex-wrap:wrap}
  .band .btn{margin-left:0}
}

@media (max-width:1240px){
  .nav{gap:clamp(12px,1.5vw,20px)}
  .nav a{font-size:13px}
}

@media (max-width:820px){
  .hdr__in{min-height:68px;gap:14px}
  .burger{display:grid}
  .hdr__cta{display:none}
  .nav{
    position:fixed;inset:68px 0 auto;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);border-bottom:1px solid var(--line);
    padding:8px var(--pad) 26px;
    box-shadow:0 24px 40px rgba(150,110,100,.10);
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:transform .35s var(--ease),opacity .3s var(--ease);
  }
  .nav.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
  .nav a::after{display:none}
  .nav .btn{display:inline-flex;margin-top:18px}
  .hero__title .script{margin-left:clamp(12px,4vw,40px)}
}

@media (max-width:560px){
  body{font-size:14.5px}
  .gal{grid-template-columns:repeat(2,1fr);gap:10px}
  .feats__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
  .cards,.tariffs{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
  .place{flex-direction:column;gap:14px}
  .hero__feats{grid-template-columns:1fr}
}

/* ============================================================
   Телефон — отдельный проход по удобству
   ============================================================ */
@media (max-width:820px){

  /* --- фото-блоки: во всю ширину экрана, скругление снизу --- */
  .hero__media,.phead__media{
    margin:0 calc(var(--pad) * -1);
    height:auto;min-height:0;
  }
  .hero__media .arc,.phead__media .arc{
    position:static;inset:auto;width:100%;height:clamp(280px,68vw,380px);
    border-radius:0 0 34px 34px;box-shadow:0 12px 30px rgba(150,100,95,.12);
  }
  .hero__media .arc img{object-position:50% 38%}
  .hero{padding-bottom:0;padding-top:0}
  .hero__grid{padding-block-end:0;padding-block-start:0;gap:26px}
  .phead__grid{padding-block-end:0}
  .phead{padding-bottom:clamp(28px,6vw,40px)}

  /* --- лицо сайта: фото сразу под шапкой, текст короче ---
     фото первым, заголовок только самое нужное: título + одна
     строка + кнопка. Теги-строка и три плашки-факта убраны с
     первого экрана телефона — та же мысль уже есть в «Направлениях»
     сразу под хиро, повторять её текстом тут незачем. */
  .hero__media{order:-1}
  .hero__copy{padding-top:26px}
  .hero__tags,.hero__feats{display:none}
  .hero__sub{margin-top:14px}
  .hero__cta{margin-top:22px}
  .hero__cta .btn{width:100%}

  /* --- удобные тач-цели --- */
  .btn{min-height:46px;padding-inline:26px}
  .btn--sm{min-height:44px;font-size:13.5px}
  .card .btn,.svc-card .btn,.place .btn{width:100%}
  .band .btn,.split .btn{width:100%}
  .band__in{flex-direction:column;align-items:flex-start;gap:16px}
  .band p{max-width:none;text-wrap:balance}
  .band p br{display:none}

  /* три карточки в ряд на телефоне тесно — столбиком */
  .cards--3,.tariffs--3{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .edu-zapis{padding:18px}

  /* «Направления»: компактная сетка 2×2, вся карточка — ссылка */
  .dirs .cards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;gap:12px}
  .dirs .card{position:relative;padding:22px 14px 18px}
  .dirs .card .ic-badge--lg{width:52px;height:52px}
  .dirs .card .ic-badge--lg .ic{width:24px;height:24px}
  .dirs .card h3{margin-top:12px;font-size:17px}
  .dirs .card p{margin:8px 0 12px;font-size:12.5px;line-height:1.5}
  .dirs .card .btn{
    width:auto;min-height:0;padding:0;gap:5px;background:none;box-shadow:none;
    font-size:12.5px;color:var(--rose-dk);
  }
  .dirs .card .btn::after{content:"";position:absolute;inset:0;border-radius:16px}
  .dirs .card .btn::before{content:"→";order:2}

  /* зоны нажатия не меньше пальца */
  .tslider .tslider__dots{gap:0;bottom:6px}
  .tslider .tslider__dots button{width:28px;height:28px;background:transparent;position:relative}
  .tslider .tslider__dots button::before{
    content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
    border-radius:50%;background:rgba(255,255,255,.55);transition:transform .3s var(--ease),background .3s var(--ease);
  }
  .tslider .tslider__dots button.is-active{transform:none;background:transparent}
  .tslider .tslider__dots button.is-active::before{background:#fff;transform:scale(1.35)}
  .edu-zapis__phone{padding:10px 0 4px}
  .map__open{padding:12px 16px}

  /* --- блок записи --- */
  .book{flex-direction:column;align-items:stretch;gap:22px}
  .book__actions{margin-left:0;display:grid;gap:10px}
  .book__actions .btn{width:100%}

  /* --- карта: квадратнее, крупнее --- */
  .map{aspect-ratio:1/1;border-radius:64px 18px 18px 18px}
  .map__attr{font-size:10px}

  /* --- подвал: один столбец, разделы — «таблетки» под палец --- */
  .ftr__in{grid-template-columns:1fr;gap:24px;padding:30px 0 22px}
  .ftr__nav{display:flex;flex-wrap:wrap;gap:8px}
  .ftr__nav a{
    padding:10px 15px;border-radius:999px;color:var(--ink);
    background:rgba(255,255,255,.52);box-shadow:inset 0 0 0 1px rgba(255,255,255,.75);
  }
  .ftr__where{gap:16px}
  .ftr__contacts a{padding:11px 0;margin:-7px 0}
  .fmap-row{width:96px}
  .ftr__base{padding-bottom:18px}
  .ftr__base small{margin-left:0;width:100%}

  /* --- меню на весь экран, со скроллом если не влезает --- */
  .nav{max-height:calc(100dvh - 68px);overflow-y:auto}
  body.nav-open{overflow:hidden}
}

/* ============================================================
   Нижняя панель записи — только на телефоне
   ============================================================ */
.mbar{display:none}

@media (max-width:820px){
  .mbar{
    display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(252,245,240,.86);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-top:1px solid rgba(150,110,100,.14);
    box-shadow:0 -6px 22px rgba(150,110,100,.08);
    transform:translateY(110%);transition:transform .35s var(--ease);
  }
  .mbar.is-in{transform:none}
  .mbar .btn{margin:0}
  .mbar__call{
    width:46px;height:46px;min-height:46px;padding:0;border-radius:50%;
    display:grid;place-items:center;flex:none;
  }
  .mbar__call .ic{width:20px;height:20px}
  body{padding-bottom:84px}
  .no-anim .mbar{transform:none}
}


/* ============================================================
   Плёночное зерно — едва заметная фактура поверх кремового фона
   ============================================================ */
body::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media print{body::after{display:none}}

/* ============================================================
   Телефон: остров и широкое паспарту тут только мешают
   ============================================================ */
@media (max-width:820px){
  :root{--mat:6px}
  .hdr.is-stuck .hdr__in{
    min-height:68px;margin:0;border-radius:0;
    padding-inline:0;background:transparent;box-shadow:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  /* на телефоне стекло — вся полоса, как панель навигации в iOS */
  .hdr.is-stuck{
    background:rgba(252,245,240,.74);
    backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
    border-bottom-color:rgba(150,110,100,.14);box-shadow:0 4px 20px rgba(150,110,100,.06);
  }
  body.nav-open .hdr{background:var(--cream)}
  .gal figure{border-radius:14px}
  .gal figure img{border-radius:9px}
}

/* ============================================================
   Преподаватель курса — та же вёрстка split, что и у «Обучения»,
   плюс минималистичный слайдер её работ вместо сетки фото
   ============================================================ */
.split--pair{margin-top:clamp(52px,6.5vw,84px)}

.teacher__eyebrow{
  margin:0 0 6px;font-size:11.5px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--rose-dk);
}
.teacher__who{display:flex;align-items:center;gap:16px;margin-bottom:4px}
.teacher__who .master__ph{width:72px;height:72px;flex:none}
.teacher-split h3{font-size:clamp(22px,2.6vw,28px)}

/* --- слайдер: один кадр за раз, переключение точками --- */
.tslider{
  position:relative;overflow:hidden;border-radius:18px;
  aspect-ratio:1/1;background:var(--cream-3);
}
.tslider__slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1s var(--ease-soft);
}
.tslider__slide.is-active{opacity:1}
.tslider__slide img{width:100%;height:100%;object-fit:cover;display:block}

.tslider::after{
  content:"";position:absolute;inset:auto 0 0 0;height:40%;pointer-events:none;
  background:linear-gradient(to top,rgba(20,14,12,.32),transparent);
}
.tslider__dots{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:2;
  display:flex;gap:8px;
}
.tslider__dots button{
  width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.55);
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.tslider__dots button.is-active{background:#fff;transform:scale(1.35)}
.tslider__dots button:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .tslider__slide{transition:none}
}

/* ============================================================
   Подпись основателя — в секции «О нас»
   ============================================================ */
.founder{
  display:flex;align-items:center;gap:14px;margin:26px 0 28px;
}
.founder .master__ph{width:56px;height:56px}
.founder .master__ini{font-size:19px}
.founder__name{margin:0;font-family:var(--f-disp);font-size:17px;color:var(--ink)}
.founder__role{margin:2px 0 0;font-size:12.5px;color:var(--rose-dk)}

/* ============================================================
   Места аренды — количество и заметка про расходники
   ============================================================ */
.place__count{
  margin:6px 0 0;font-size:12.5px;font-weight:600;color:var(--rose-dk);
  letter-spacing:.02em;
}
.places__note{
  margin:18px auto 0;max-width:62ch;text-align:center;
  font-size:13.5px;color:var(--muted);
}
@media (max-width:720px){.places{grid-template-columns:1fr}}

/* ============================================================
   Чёрно-белая карта в подвале — миниатюра рядом с адресом
   ============================================================ */
.fmap-row{display:block;flex:none;width:clamp(104px,9vw,124px);border-radius:12px;color:inherit}
.fmap-row:focus-visible{outline:2px solid var(--rose-ink,var(--rose));outline-offset:3px}

.fmap{
  position:relative;display:block;width:100%;aspect-ratio:4/3;
  overflow:hidden;border-radius:12px;
  box-shadow:0 0 0 1px rgba(44,37,35,.1),0 6px 16px rgba(158,50,72,.12);
  transition:transform .45s var(--ease-soft),box-shadow .45s var(--ease-soft);
}
.fmap-row:hover .fmap,.fmap-row:focus-visible .fmap{
  transform:translateY(-3px);
  box-shadow:0 12px 24px rgba(158,50,72,.2),0 0 0 1px rgba(44,37,35,.1);
}
/* миниатюра — готовая чёрно-белая картинка с булавкой точно в центре кадра */
.fmap__tiles{display:block;width:100%;height:100%}
.fmap__tiles img{width:100%;height:100%;display:block;object-fit:cover}
.fmap__pin{
  position:absolute;left:49.9%;top:50%;transform:translate(-50%,-100%);
  width:17px;height:17px;color:var(--rose-dk);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));
}
.fmap__pin svg{width:100%;height:100%;fill:currentColor;stroke:#fff;stroke-width:1.6}
@media (prefers-reduced-motion:reduce){
  .fmap{transition:none}
}

/* ============================================================
   Подсветка под курсором и живые карточки
   Мягкий свет следует за курсором внутри карточки, а по кромке бежит
   тонкая розовая линия — как подсветка на стекле. На фотографиях —
   одиночный блик. Положение света пишет main.js в --mx/--my.
   Только там, где есть настоящая мышь; на телефоне — «вжатость» при касании.
   ============================================================ */
:is(.card,.tariff,.place,.svc-card,.master,.edu-zapis){
  position:relative;isolation:isolate;
  --glow-in:rgba(231,126,147,.14);
  --glow-line:rgba(231,126,147,.9);
}
:is(.tariff,.edu-zapis){--glow-in:rgba(255,255,255,.9)}

/* у блоков с .rev правило «.js .rev.is-in{transform:none}» перебивало :hover,
   и подъём карточек не работал вовсе. Теперь подъём — свойство translate:
   оно с transform не конфликтует. Задержки появления (rev-d1…3) — только
   у самого появления, на наведение они не действуют. */
.rev-d1{--rd:.09s}
.rev-d2{--rd:.18s}
.rev-d3{--rd:.27s}
.js .rev:is(.card,.tariff,.place,.svc-card,.master),
.js .gal figure.rev{
  transition:opacity .9s var(--ease-soft),transform .9s var(--ease-soft),filter .9s var(--ease-soft),
    translate .45s var(--ease),box-shadow .45s var(--ease),border-color .4s var(--ease),scale .25s var(--ease);
  transition-delay:var(--rd,0s),var(--rd,0s),var(--rd,0s),0s,0s,0s,0s;
}

@media (hover:hover) and (pointer:fine){
  :is(.card,.tariff,.place,.svc-card,.master,.edu-zapis)::before{
    content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
    background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),var(--glow-in),transparent 70%);
    opacity:0;transition:opacity .5s var(--ease-soft);
  }
  :is(.card,.tariff,.place,.svc-card,.master,.edu-zapis)::after{
    content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),var(--glow-line),transparent 72%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    opacity:0;transition:opacity .5s var(--ease-soft);
  }
  :is(.card,.tariff,.place,.svc-card,.master,.edu-zapis):is(:hover,:focus-within)::before,
  :is(.card,.tariff,.place,.svc-card,.master,.edu-zapis):is(:hover,:focus-within)::after{opacity:1}

  /* блик по фотографии — один раз за наведение */
  .gal figure,.split__media{position:relative;overflow:hidden}
  :is(.gal figure,.split__media)::after{
    content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
    background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.5) 50%,transparent 64%);
    transform:translateX(-130%);transition:transform 1.1s var(--ease-soft);
  }
  :is(.gal figure,.split__media):hover::after{transform:translateX(130%)}
}
/* ============================================================
   Телефон и планшет: те же эффекты, только без мыши
   Навести палец нельзя, поэтому триггер другой (классы ставит main.js):
   — .is-lit   — карточка или фото проходит середину экрана: как наведение;
   — .is-glint — по фото пробегает блик: при выезде на середину и при касании;
   — .is-touch — свет на карточке перескакивает под палец.
   ============================================================ */
@property --mx{syntax:'<length-percentage>';inherits:true;initial-value:50%}
@property --my{syntax:'<length-percentage>';inherits:true;initial-value:0%}
@keyframes lit-sweep{from{--mx:-20%}to{--mx:50%}}
@keyframes glint{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
@keyframes blob-breathe{to{scale:1.12}}

@media (hover:none){
  /* свет и розовая кромка — те же, что под курсором */
  :is(.card,.tariff,.place,.svc-card,.master,.edu-zapis)::before{
    content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
    background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),var(--glow-in),transparent 70%);
    opacity:0;transition:opacity .5s var(--ease-soft);
  }
  :is(.card,.tariff,.place,.svc-card,.master,.edu-zapis)::after{
    content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),var(--glow-line),transparent 72%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    opacity:0;transition:opacity .5s var(--ease-soft);
  }
  :is(.card,.tariff,.place,.svc-card,.master,.edu-zapis):is(.is-lit,.is-touch)::before,
  :is(.card,.tariff,.place,.svc-card,.master,.edu-zapis):is(.is-lit,.is-touch)::after{opacity:1}
  /* «загорание»: свет въезжает слева и останавливается сверху по центру */
  :is(.card,.tariff,.place,.svc-card,.master,.edu-zapis).is-lit:not(.is-touch){animation:lit-sweep 1.3s var(--ease-soft)}

  /* то, что у мыши происходило при наведении */
  :is(.card,.svc-card,.master).is-lit{box-shadow:var(--shadow-lg)}
  .tariff.is-lit{box-shadow:var(--shadow-lg);border-color:var(--line-rose)}
  .place.is-lit{box-shadow:var(--shadow-md)}
  :is(.card,.place,.svc-card).is-lit .ic-badge{background:var(--rose);color:#fff;transform:scale(1.08) rotate(-6deg)}
  :is(.card,.tariff,.place,.svc-card,.master):active{scale:.985}

  /* фото: блик и лёгкий наезд */
  .gal figure,.split__media{position:relative;overflow:hidden}
  :is(.gal figure,.split__media)::after{
    content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
    background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.5) 50%,transparent 64%);
    transform:translateX(-130%);
  }
  /* ровнее и дольше, чем у мыши: на телефоне блик видят один раз, «повторить наведением» нельзя */
  :is(.gal figure,.split__media).is-glint::after{animation:glint 1.5s cubic-bezier(.45,.1,.35,1)}
  .gal figure:nth-child(even).is-glint::after{animation-delay:.16s}   /* в сетке 2×2 блик идёт волной */
  .gal figure.is-lit{box-shadow:var(--shadow-lg)}
  .gal figure.is-lit img{transform:scale(1.03)}

  /* кнопки: вместо подъёма при наведении — вжатие при нажатии.
     iOS после касания «залипает» в :hover — кнопка не должна оставаться приподнятой */
  .btn:hover,.map__open:hover{transform:none}
  .btn:active{transform:scale(.96)}
  .btn:active .btn__go{transform:translate(3px,-3px);background:rgba(255,255,255,.34)}
  .map__open:active{transform:scale(.96)}
  .fmap-row:active .fmap{transform:scale(.96)}
  .ftr__nav a:active{background:rgba(255,255,255,.88)}
  .burger:active{transform:scale(.9)}

  /* пятна в хиро медленно «дышат»; при прокрутке их сдвигает main.js */
  .hero__blob{animation:blob-breathe 9s ease-in-out infinite alternate}
  .hero__blob--2{animation-duration:12s;animation-delay:-5s}

  /* слайдер листается свайпом: горизонтальный жест — скрипту, вертикальный — странице */
  .tslider{touch-action:pan-y}
}
@media (prefers-reduced-motion:reduce){
  :is(.card,.tariff,.place,.svc-card,.master,.edu-zapis)::before,
  :is(.card,.tariff,.place,.svc-card,.master,.edu-zapis)::after,
  :is(.gal figure,.split__media)::after{display:none}
  :is(.card,.tariff,.place,.svc-card,.master,.gal figure):hover{translate:none}
  :is(.card,.tariff,.place,.svc-card,.master,.edu-zapis).is-lit{animation:none}
  .gal figure.is-lit img{transform:none}
  .hero__blob{animation:none}
}

/* ============================================================
   Юридические документы: политика конфиденциальности
   ============================================================ */
.phead--doc .phead__doc{padding-block:clamp(26px,4vw,44px) clamp(34px,5vw,56px)}
.phead--doc .lead{max-width:600px}
.doc-date{margin:16px 0 0;font-size:12.5px;color:var(--muted)}

.doc{max-width:780px;margin-inline:auto}
.doc-note{
  padding:clamp(20px,3vw,28px);
  background:var(--pink-pale);border:1px solid var(--line-rose);border-radius:22px;
}
.doc-note h2{font-size:clamp(20px,2.2vw,24px)}
.doc-note .ticks{margin-top:16px}

.doc-toc{
  margin-top:clamp(16px,2vw,22px);padding:clamp(16px,2.4vw,22px) clamp(20px,3vw,28px);
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);
}
.doc-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;columns:2 250px;column-gap:32px}
.doc-toc li{counter-increment:toc;break-inside:avoid}
.doc-toc a{
  display:block;padding:6px 0;font-size:13.5px;color:var(--ink-2);
  transition:color .3s var(--ease);
}
.doc-toc a::before{content:counter(toc) ".";display:inline-block;min-width:1.9em;color:var(--rose-ink);font-weight:500}
.doc-toc a:hover,.doc-toc a:focus-visible{color:var(--rose-ink)}

.doc-sec{margin-top:clamp(34px,4.6vw,52px);scroll-margin-top:96px}
.doc-sec h2{font-size:clamp(22px,2.6vw,28px);margin-bottom:16px}
.doc-sec h2 span{color:var(--rose-dk)}
.doc-sec p{margin:0 0 12px;font-size:14.5px;color:var(--ink-2)}
.doc-sec p a,.doc-list a{color:var(--rose-ink);border-bottom:1px solid var(--line-rose)}
.doc-sec p a:hover{border-color:var(--rose-ink)}

.doc-card{
  margin-top:14px;padding:clamp(18px,2.6vw,26px);
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);
}
.doc-card h3{font-size:clamp(17px,1.9vw,20px);margin-bottom:14px}
.doc-dl{margin:0;display:grid;gap:12px}
.doc-dl>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 18px}
.doc-dl dt{padding-top:3px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--rose-ink)}
.doc-dl dd{margin:0;font-size:14px;color:var(--ink-2)}

.doc-list{margin:0 0 12px;padding-left:1.2em;display:grid;gap:9px;font-size:14.5px;color:var(--ink-2)}
.doc-list li::marker{color:var(--rose)}
.doc-list b{font-weight:600;color:var(--ink)}

/* незаполненное поле реквизитов: заметная заглушка, чтобы её нельзя было пропустить */
.fill{
  background:rgba(231,126,147,.16);color:var(--rose-ink);font-style:normal;
  padding:1px 6px;border-radius:6px;border-bottom:1px dashed var(--rose-ink);
}

/* подвал: реквизиты продавца и ссылка на политику */
.ftr__req{margin:0;padding:0 0 16px;font-size:12px;line-height:1.55;color:var(--ink-2)}
.ftr__base a,.ftr__base small a{
  color:inherit;padding-bottom:2px;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:color .3s var(--ease),background-size .45s var(--ease-soft);
}
.ftr__base a:hover,.ftr__base a:focus-visible{color:var(--rose-ink);background-size:100% 1px}

/* тарифы: название по-русски над латинским — новый закон о русском языке требует русский текст рядом */
.tariff>.tariff__ru{margin:0 0 3px;color:var(--rose-ink)}
.edu-note{margin:16px auto 0;max-width:640px;text-align:center;font-size:12.5px;line-height:1.55;color:var(--muted)}

@media (max-width:560px){
  .doc-dl>div{grid-template-columns:1fr;gap:2px}
  .doc-toc ol{columns:1}
  .doc-toc a{padding:9px 0}
  .ftr__base a{padding:11px 0;margin:-9px 0}
}

/* страница «404» */
.nf-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* график работы: коворкинг и Анастасия */
.sched{display:flex;align-items:center;gap:14px;margin-top:22px;padding:14px 18px;border-radius:18px;
  background:var(--pink-pale);border:1px solid var(--line-rose);max-width:560px}
.sched p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.sched b{color:var(--ink);font-weight:600}
.sched .ic-badge{width:42px;height:42px;background:#fff}
.sched .ic-badge .ic{width:20px;height:20px}
.sched--center{margin-inline:auto;justify-content:center;text-align:left}
.sec-head .sched{margin-top:20px}
@media (max-width:620px){.sched{padding:12px 14px;gap:12px}}