/* Стили сайта школы.
   Вынесены из index.html 16.08.2026, чтобы страницы категорий (/laboratory, /intensive)
   пользовались теми же, а не своей копией. Единственная ссылка на файл внутри -
   /logo-mark.svg, путь абсолютный, от переноса не сломался. */

/* =============================================================
   TA SAMAYA SCHOOL — v2 «минимализм с небрежностью»
   Бумажный фон, тёплый чёрный текст, акцент вращается по блокам:
   терракота / горчица / кофе / хвоя. Рукописные штрихи Bad Script.
   Источник стиля: business/assets/design/year-schedule-assets/preview.html
   ============================================================= */
:root {
  --paper: #F7F5F0;
  --paper-2: #EFEBE2;
  --white: #FFFFFF;
  --ink: #2A2A28;
  --soft: #6B6862;
  --line: rgba(42,42,40,0.14);

  --terracotta: #C0492E;
  --mustard: #C98A1B;
  --coffee: #8A5A3B;
  --pine: #3E6B4F;

  --radius: 18px;
  --radius-sm: 10px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--ink); color: var(--paper); }

.script { font-family: 'Bad Script', cursive; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 26px; }
section { padding: clamp(48px, 6.5vw, 88px) 0; position: relative; }

.doodle { position: absolute; pointer-events: none; z-index: 0; }
.star-mark { position: absolute; pointer-events: none; }

/* =============================================================
   HEADER
============================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247, 245, 240, 0.88);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; padding: 16px 26px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.lang-switch { font-size: 13px; font-weight: 600; color: var(--soft); padding: 9px 14px; border-radius: 999px; }
.lang-switch:hover { background: var(--ink); color: var(--paper); }
/* переключатель языка в шапке */
.lang-toggle { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.lang-toggle a { padding: 7px 11px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--soft); transition: background .2s, color .2s; }
.lang-toggle a.on { background: var(--ink); color: var(--paper); }
.lang-toggle a:not(.on):hover { background: rgba(42,42,40,.07); }
/* знак бренда - неровный кружок из фавиконки, вырезан маской, цвет задаётся фоном */
.brand .dot { width: 15px; height: 15px; background: var(--terracotta); flex-shrink: 0;
  -webkit-mask: url(/logo-mark.svg) center/contain no-repeat; mask: url(/logo-mark.svg) center/contain no-repeat; }
.site-nav { display: flex; gap: 2px; }
/* nowrap и поля потеснее: пунктов семь, а полоса шапки ограничена 1180px -
   с прежними 14px «как это устроено» и кнопка ломались на две строки */
.site-nav a { padding: 9px 10px; white-space: nowrap; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--soft); transition: color .2s, background .2s; }
.site-header > .wrap > .btn { white-space: nowrap; }
.site-nav a:hover { background: var(--ink); color: var(--paper); }

/* Выпадающий список «программы». Имена классов свои (nav-group, nav-drop):
   готовые классы шапки несут свою геометрию и здесь бы её притащили.
   На мышке открывается наведением, на тач-экране и с клавиатуры - кликом
   по кнопке (site.js). Мостик сверху нужен, чтобы курсор доезжал от кнопки
   до списка через зазор и список не схлопывался по дороге. */
.nav-group { position: relative; }
.nav-group-btn { display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  color: var(--soft); white-space: nowrap; transition: color .2s, background .2s; }
.nav-group:hover .nav-group-btn, .nav-group.open .nav-group-btn { background: var(--ink); color: var(--paper); }
.nav-caret { font-size: 10px; line-height: 1; transition: transform .2s; }
.nav-group:hover .nav-caret, .nav-group.open .nav-caret { transform: rotate(180deg); }
.nav-drop { position: absolute; top: calc(100% + 10px); left: 0; z-index: 10;
  min-width: 190px; padding: 8px; border-radius: var(--radius-sm);
  background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 14px 30px rgba(42,42,40,0.14);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s; }
.nav-drop::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav-group:hover .nav-drop, .nav-group.open .nav-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-drop a { display: block; padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
/* цвет обязателен: общее правило .site-nav a:hover красит текст в светлый,
   и на светлой подложке пункт становился невидимым */
.nav-drop a:hover { background: var(--paper-2); color: var(--ink); }
/* бургер и выпадающее меню живут только на узком экране, на широком меню в строку */
.nav-toggle, .mobile-nav { display: none; }

/* Точка, где меню сворачивается в бургер. Она выше обычных 880, потому что в
   меню есть пункты-страницы, а не только якоря. Минимум, при котором шапка
   влезает без переносов, - 1064px (посчитано 20.08.2026 по реальной ширине
   пунктов), отсюда 1070. Внутри - только про меню; остальное поведение шапки
   живёт в своей точке ниже. */
@media (max-width: 1070px) {
  .site-nav { display: none; }
  .site-header > .wrap > .btn { display: none; }   /* кнопку заменил бургер: «прийти на занятие» и так висит внизу экрана */
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 42px; height: 42px; flex-shrink: 0;
    border: 1px solid var(--line); border-radius: 999px;
    background: transparent; cursor: pointer; padding: 0;
  }
  .nav-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s, opacity .18s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mobile-nav {
    display: block; overflow: hidden; max-height: 0;
    background: rgba(247, 245, 240, 0.97);
    border-top: 1px solid transparent;
    transition: max-height .3s ease, border-color .3s ease;
  }
    /* хватает на девять пунктов: семь разделов + english + «прийти на занятие».
     Меньше - и последние пункты обрезаются, а человек этого не видит */
.mobile-nav.open { max-height: 700px; border-top-color: var(--line); }
  .mobile-nav a { display: block; padding: 15px 18px; font-size: 15.5px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); }
  .mobile-nav a:last-child { border-bottom: none; color: var(--terracotta); }
  /* на телефоне выпадать некуда - «программы» становятся подписью группы,
     а её пункты сдвинуты вправо, чтобы читалось как вложенность */
  .mobile-nav-label { display: block; padding: 14px 18px 6px; font-size: 12.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em; color: var(--soft); }
  .mobile-nav a.mobile-nav-sub { padding-left: 34px; }
}

/* Поведение самой шапки на телефоне: поля поменьше и уезжает вверх при прокрутке */
@media (max-width: 880px) {
  .site-header .wrap { padding: 14px 18px; }
  .site-header { transition: transform .28s ease; }
  .site-header.hide { transform: translateY(-100%); }
}

/* =============================================================
   BUTTONS
============================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px;
  background: var(--mustard); color: var(--ink);
  font-weight: 700; font-size: 15px;
  border-radius: 999px;
  transition: transform .25s cubic-bezier(.2,.9,.3,1.2), background .2s, box-shadow .2s;
  box-shadow: 0 3px 0 rgba(42,42,40,0.18);
}
.btn:hover { transform: translateY(-2px); background: #b67a15; }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(42,42,40,0.18); }
.btn .arrow { transition: transform .25s; }
.btn:hover .arrow { transform: translateX(3px); }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid rgba(42,42,40,0.25); box-shadow: none; padding: 14.5px 26px; }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn.on-dark { background: var(--paper); color: var(--ink); }
.btn.on-dark:hover { background: var(--white); }
.btn.ghost-on-dark { background: transparent; color: var(--paper); border: 1.5px solid rgba(247,245,240,0.55); box-shadow: none; padding: 14.5px 26px; }
.btn.ghost-on-dark:hover { background: rgba(247,245,240,0.14); }

/* =============================================================
   SECTION HEADING HELPER
============================================================= */
.eyebrow {
  display: inline-block; font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  padding: 6px 14px; border-radius: 999px; border: 1.5px solid currentColor;
  margin-bottom: 18px;
}
/* Селектор именно `.h`, а не `h2.h`: на страницах категорий заголовок первого
   экрана - это h1, и с привязкой к h2 он не получал вообще ничего. Выглядел как
   браузерный дефолт: 34px вместо 44, вес 700 вместо 800, без переноса по смыслу
   и с некрашеной второй половиной (найдено 20.08.2026). */
.h {
  text-wrap: balance;
  font-weight: 800; font-size: clamp(28px, 4vw, 44px);
  line-height: 1.12; letter-spacing: -0.015em; max-width: 760px;
}
/* вторая половина заголовка - цветом, как в первом экране.
   На цветных секциях (safety/alts/people) не применяем: на них заголовок и так светлый */
.h .accent, .focus-text h3 .accent { color: var(--terracotta); }
.lede { font-size: 17px; color: var(--soft); max-width: 620px; margin-top: 14px; line-height: 1.65; }

.underline { position: relative; display: inline-block; }
.underline svg { position: absolute; left: -2%; bottom: -6px; width: 104%; height: 10px; }

/* =============================================================
   HERO — две половины: текст слева, видео во всю правую половину
============================================================= */
.hero { padding: 0; overflow: hidden; position: relative; }
.hero-split {
  display: grid; grid-template-columns: 1fr 1fr;
  height: calc(100vh - 70px); min-height: 600px; max-height: 900px;
}
.hero-text {
  display: flex; flex-direction: column; justify-content: center;
  /* стык колонок ровно по центру экрана, а левый край текста совпадает с контейнером страницы */
  padding: clamp(60px, 8vw, 90px) clamp(30px, 5vw, 60px) clamp(60px, 8vw, 90px)
           calc((100vw - min(calc(100vw - 52px), 1180px)) / 2);
  position: relative; z-index: 2;
}
.hero-claim {
  font-weight: 800; font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 16px;
}
.hero-claim .accent { color: var(--terracotta); }
/* заголовок страницы: по смыслу главный, по виду - спокойная строка под крупной фразой */
.hero h1 {
  font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; color: var(--ink);
  line-height: 1.4; letter-spacing: -0.005em; margin-bottom: 14px; max-width: 520px;
}
.hero-sub {
  text-wrap: pretty;
  font-size: clamp(16.5px, 1.35vw, 19px); color: var(--soft);
  max-width: 500px; margin-bottom: 12px; line-height: 1.55;
}
/* обе строки первого экрана одним начертанием - спокойнее читается */
/* та же гарнитура и цвет, что у строки выше; выделены только названия форматов */
.hero-meta { text-wrap: pretty; font-size: clamp(16.5px, 1.35vw, 19px); color: var(--soft); max-width: 520px; margin-bottom: 10px; line-height: 1.55; font-weight: 400; }
.hero-meta b { font-weight: 700; color: var(--ink); }
.hero-hand {
  font-family: 'Bad Script', cursive; font-size: clamp(19px, 1.7vw, 23px);
  color: var(--coffee); transform: rotate(-1deg); display: inline-block;
  margin-bottom: 28px;
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-media { position: relative; background: var(--paper-2); overflow: hidden; }
.hero-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* стык видео с текстовой половиной - ровная линия, без растушёвки */
.hero-media { border-left: 1.5px solid var(--line); }
.hero .doodle-star { top: 5%; left: 46%; width: 92px; height: 92px; color: var(--terracotta); opacity: .9; transform: rotate(8deg); z-index: 3; }
.hero .doodle-star-sm { bottom: 12%; left: 47.5%; width: 40px; height: 40px; color: var(--mustard); opacity: .85; transform: rotate(-10deg); z-index: 3; }

@media (max-width: 900px) {
  /* на телефоне видео уходит на фон всего экрана, текст читается поверх бумажной вуали */
  .hero-split { display: block; position: relative; height: calc(100vh - 70px); min-height: 520px; max-height: none; }
  .hero-media { position: absolute; inset: 0; border: none; }
  .hero-media::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to bottom, rgba(247,245,240,0.90) 0%, rgba(247,245,240,0.84) 45%, rgba(247,245,240,0.88) 100%);
  }
  /* на телефоне текст лежит поверх кадра - серый на просвете читался плохо */
  .hero-sub { color: var(--ink); }
  .hero-hand { color: #7A4B2E; }
  .hero-text { position: relative; z-index: 3; height: 100%; justify-content: center; padding: 40px 26px; }
  .hero .doodle-star { top: auto; bottom: 2%; left: auto; right: 6%; width: 70px; height: 70px; }
  .hero .doodle-star-sm { display: none; }
}

/* =============================================================
   КАК ЭТО УСТРОЕНО — что за услуга, до всех сравнений
============================================================= */
.howto { background: #E9EFE7; }   /* мягкий зелёный из палитры карточки лабы */
.howto .lede { max-width: 720px; font-size: 17.5px; color: var(--ink); }
.howto .lede { font-size: 15px; max-width: 760px; }
.howto-facts { margin-top: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.howto-fact { border-left: 3px solid var(--mustard); padding: 4px 0 4px 20px; }
.howto-fact .hf-emoji { display: block; font-size: 32px; line-height: 1; margin-bottom: 12px; }
.howto-fact b { display: block; font-size: 17px; margin-bottom: 8px; }
.howto-fact span { color: var(--soft); font-size: 15px; line-height: 1.6; }
.howto-fact .hf-more { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 700;
  color: var(--terracotta); border-bottom: 1px solid transparent; transition: border-color .2s; }
.howto-fact .hf-more:hover { border-bottom-color: var(--terracotta); }
@media (max-width: 950px) and (min-width: 621px) { .howto-facts { grid-template-columns: 1fr; gap: 22px; } }
/* на телефоне три программы листаются вбок, а не идут столбиком */
@media (max-width: 620px) {
  .howto-facts {
    display: flex; gap: 14px; margin-right: -26px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .howto-facts::-webkit-scrollbar { display: none; }
  .howto-facts::after { content: ''; flex: 0 0 14px; }
  .howto-fact { flex: 0 0 78%; scroll-snap-align: start; }
}

/* =============================================================
   BLOCK 2 — фокус работы
============================================================= */
.focus { background: var(--paper); padding-top: clamp(50px, 6.5vw, 90px); padding-bottom: clamp(88px, 10vw, 150px); }
.focus .wrap { text-align: left; }
.focus h3 {
  text-wrap: balance;
  font-weight: 800; font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.015em; margin-bottom: 24px; line-height: 1.12; max-width: 780px;
}
.focus p { font-size: 17px; color: var(--soft); line-height: 1.7; max-width: 680px; }
.focus p + p { margin-top: 16px; }
/* участники, вырезанные из съёмок занятий: стоят по краям, текст между ними */
.focus { overflow: hidden; }
.focus-row { position: relative; }
.focus-text { max-width: 600px; margin: 0 auto; }
/* фигуры стоят по краям поверх пустого поля - текст они не толкают, поэтому не сжимают его */
.focus-side {
  position: absolute; bottom: calc(-1 * clamp(28px, 5vw, 80px));
  display: flex; align-items: flex-end;
}
.focus-side.left { left: calc(-1 * clamp(30px, 7vw, 130px)); }
.focus-side.right { right: calc(-1 * clamp(30px, 7vw, 130px)); }
.focus-side img { width: auto; filter: drop-shadow(4px 12px 16px rgba(42,42,40,0.14)); }
/* все стоят на одной линии пола; рост соразмерный, сидящая ниже - потому что сидит */
.focus-side img { height: clamp(170px, 24vw, 360px); }
/* обе стороны развёрнуты лицом к тексту */
.focus-side.right img, .focus-side.left img { transform: scaleX(-1); }
.focus-text { flex: 1; min-width: 0; }
.focus-hand {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 26px; color: var(--coffee); font-size: clamp(17px, 1.8vw, 21px);
}
.focus-hand svg { width: clamp(46px, 6vw, 86px); height: 24px; flex-shrink: 0; }
.focus-hand .hand-text { text-align: center; line-height: 1.3; white-space: nowrap; }
.focus-hand svg.to-right { transform: scaleX(-1); }

/* средние экраны: текст сужается отступами, фигуры встают в них по бокам */
@media (max-width: 1150px) and (min-width: 521px) {
  .focus-text { max-width: none; padding: 0 clamp(120px, 24vw, 300px); position: relative; z-index: 2; }
  /* рост фигур привязан к высоте блока плюс запас - иначе на коротком тексте
     фиксированная высота вылезает за секцию и ноги срезает */
  .focus-side { top: calc(-1 * clamp(24px, 4.5vw, 60px)); bottom: calc(-1 * clamp(24px, 4.5vw, 60px)); transform: none; }
  .focus-side img { height: 100%; max-height: clamp(280px, 56vw, 460px); width: auto; }
  .focus-side.left { left: calc(-1 * clamp(80px, 20vw, 150px)); }
  .focus-hand svg { width: clamp(28px, 5vw, 70px); }
  .focus-side.right { right: calc(-1 * clamp(105px, 25vw, 175px)); }
}
/* самые узкие экраны: фигуры прячем совсем, места для них нет */
@media (max-width: 520px) {
  .focus { padding-bottom: clamp(48px, 6.5vw, 88px); }
  .focus-side { display: none; }
  .focus-hand { display: none; }   /* без фигур подпись со стрелками указывает в пустоту */
  .focus-text { max-width: none; }
}

/* =============================================================
   BLOCK 3 — с чем приходят
============================================================= */
.triggers { background: var(--paper-2); }
.trigger-list { margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
/* работа и её реплики - один объект: панель с цветной полосой сверху, как в блоке направлений */
.trigger-item {
  position: relative; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--white); border-radius: var(--radius);
  padding: 26px 22px 34px;
  box-shadow: 0 1px 2px rgba(42,42,40,.05), 0 14px 30px -14px rgba(42,42,40,.20);
}
.trigger-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--c); }
.trigger-item.t-1 { --c: var(--terracotta); --tint: #F3E3DE; }
.trigger-item.t-2 { --c: var(--pine);       --tint: #E9EFE7; }
.trigger-item.t-3 { --c: var(--coffee);     --tint: #F1E7DF; }
.trigger-item .trigger-num { display: block; font-size: 34px; line-height: 1; margin-bottom: 16px; }
.trigger-item b { display: block; font-size: 18px; margin-bottom: 10px; letter-spacing: -0.005em; line-height: 1.25; }
.trigger-item .about { display: block; color: var(--soft); font-size: 15px; line-height: 1.6; }
.trigger-head { margin-bottom: 26px; }
.quotes { display: flex; flex-direction: column; }
.quotes .quote { margin-bottom: 30px; padding-left: 8px; }
.quotes .quote:last-child { margin-bottom: 0; }
.quotes .bubble {
  position: relative; display: block; background: var(--white); border: none;
  border-radius: 18px 18px 18px 4px; padding: 13px 17px 14px; margin-bottom: 9px;
  font-size: 15px; line-height: 1.5; color: var(--ink);
  box-shadow: 0 1px 1.5px rgba(42,42,40,.07), 0 10px 24px -10px rgba(42,42,40,.30);
}
.quotes .bubble + .bubble { margin-top: 8px; }
.quotes .bubble:has(+ .bubble)::before, .quotes .bubble:has(+ .bubble)::after { display: none; }
.quotes .bubble::before { content: ''; position: absolute; left: -6px; bottom: 0; width: 12px; height: 14px; background: var(--white); }
/* уголок хвостика вырезается цветом подложки, поэтому у него два значения:
   внутри панели работ - цвет панели, в блоке безопасности - цвет секции */
.quotes .bubble::after { content: ''; position: absolute; left: -13px; bottom: 0; width: 13px; height: 18px; background: var(--paper-2); border-bottom-right-radius: 13px; }
.quotes .who { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--soft); line-height: 1.45; }
.quotes .who img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--white); flex-shrink: 0; }
.quotes .who .ava-init { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #A6DBFF 0%, #7BB4FF 100%); color: var(--white); font-size: 12.5px; font-weight: 700; }
/* внутри белой панели реплики бежевые и без теней - плоско и спокойно */
.trigger-item .quotes .bubble { background: var(--paper-2); box-shadow: none; }
.trigger-item .quotes .bubble::before { background: var(--paper-2); }
.trigger-item .quotes .bubble::after { background: var(--white); }
.tiny-note { margin-top: 22px; font-size: 13px; color: var(--soft); }
@media (max-width: 900px) { .trigger-list { grid-template-columns: 1fr; gap: 34px; } }
/* на телефоне: работа и пояснение во всю ширину, а её реплики листаются вбок */
@media (max-width: 620px) {
  .quotes {
    flex-direction: row; gap: 12px; margin-right: -26px;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .quotes::-webkit-scrollbar { display: none; }
  .quotes::after { content: ''; flex: 0 0 14px; }
  .quotes .quote { flex: 0 0 78%; scroll-snap-align: start; margin-bottom: 0; display: flex; flex-direction: column; }
  .quotes .bubble { flex: 1; }
  /* внутри панели лента уезжает до её края, а не за край экрана */
  .trigger-item { padding: 22px 18px 28px; }
  .trigger-item .quotes { margin-right: -18px; }
}

/* =============================================================
   ЦЕННОСТЬ В КРИТЕРИЯХ УЧАСТНИКОВ
============================================================= */
.worth { background: var(--paper); }
.worth-grid { margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.worth-card {
  position: relative; overflow: hidden;
  background: var(--white); border-radius: var(--radius); padding: 26px 24px 24px;
  box-shadow: 0 1px 2px rgba(42,42,40,.05), 0 14px 30px -14px rgba(42,42,40,.20);
}
.worth-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--c); }
.worth-card.w-1 { --c: var(--terracotta); }
.worth-card.w-2 { --c: var(--pine); }
.worth-card.w-3 { --c: var(--coffee); }
.worth-card .worth-emoji { display: flex; align-items: center; gap: 10px; font-size: 30px; line-height: 1; margin-bottom: 14px; }
/* стрелка между «было» и «стало» - в цвет полосы карточки */
.worth-card .w-arrow { font-style: normal; font-size: 22px; color: var(--c); opacity: .8; }
.worth-card b { display: block; font-size: 18px; margin-bottom: 14px; letter-spacing: -0.005em; }
.worth-card ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.worth-card li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.55; color: var(--soft); }
/* галочка вместо маркера - тем же знаком, что в блоке безопасности */
.worth-card li::before {
  content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 9px;
  border-left: 2.5px solid var(--c); border-bottom: 2.5px solid var(--c);
  transform: rotate(-45deg); border-radius: 1px;
}
@media (max-width: 860px) and (min-width: 621px) { .worth-grid { grid-template-columns: 1fr; } }
/* на телефоне колонки листаются вбок, как остальные ленты */
@media (max-width: 620px) {
  .worth-grid {
    display: flex; gap: 14px; margin-right: -26px;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .worth-grid::-webkit-scrollbar { display: none; }
  .worth-grid::after { content: ''; flex: 0 0 14px; }
  .worth-card { flex: 0 0 78%; scroll-snap-align: start; }
}
/* подзаголовки внутри объединённого блока «что вы уже пробовали» */
.alts-sub { margin-top: 30px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; letter-spacing: -0.01em; color: var(--white); }
.alts-sub.second { margin-top: 52px; }

/* =============================================================
   BLOCK 5 — как устроено (безопасность)
============================================================= */
.safety { background: var(--pine); color: var(--paper); }
.safety .eyebrow { color: var(--paper); border-color: rgba(247,245,240,0.5); }
.safety h2.h { color: var(--paper); }
.safety .lede { color: rgba(247,245,240,0.75); }
/* пять правил стоят в один ряд: галочка сверху, текст под ней - иначе в узкой колонке не помещается */
.safety-list { margin-top: 34px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.safety-item {
  background: rgba(247,245,240,0.08); border: 1.5px solid rgba(247,245,240,0.22);
  border-radius: var(--radius); padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.safety-item svg.check { width: 24px; height: 24px; flex-shrink: 0; color: var(--mustard); }
.safety-item b { display: block; font-size: 15.5px; margin-bottom: 6px; line-height: 1.25; }
.safety-item span { font-size: 14px; color: rgba(247,245,240,0.72); line-height: 1.5; }
.safety-item.wide { grid-column: span 1; }
@media (max-width: 1100px) { .safety-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .safety-list { grid-template-columns: repeat(2, 1fr); } }

/* реплики участников про безопасность - те же плашки-сообщения, что в блоке «С чем к нам приходят» */
.safety-quotes { margin-top: 44px; }
.sq-lead { font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; color: var(--paper); margin-bottom: 24px; }
.sq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 26px; align-items: start; }
.sq { display: flex; flex-direction: column; padding-left: 8px; }   /* отступ под хвостик */
.sq .bubble {
  position: relative; background: var(--white); color: var(--ink);
  border-radius: 18px 18px 18px 4px; padding: 13px 17px 14px; margin-bottom: 9px;
  font-size: 15px; line-height: 1.5;
  box-shadow: 0 1px 1.5px rgba(0,0,0,.10), 0 12px 26px -12px rgba(0,0,0,.45);
}
.sq .bubble::before { content: ''; position: absolute; left: -6px; bottom: 0; width: 12px; height: 14px; background: var(--white); }
.sq .bubble::after { content: ''; position: absolute; left: -13px; bottom: 0; width: 13px; height: 18px; background: var(--pine); border-bottom-right-radius: 13px; }
.sq .who img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--white); flex-shrink: 0; }
.sq .who .ava-init { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #A6DBFF 0%, #7BB4FF 100%); color: var(--white); font-size: 12.5px; font-weight: 700; }
.sq .bubble + .bubble { margin-top: 8px; }
.sq .bubble:has(+ .bubble)::before, .sq .bubble:has(+ .bubble)::after { display: none; }
.sq .who { display: flex; align-items: center; gap: 9px; font-size: 13px; color: rgba(247,245,240,0.7); line-height: 1.45; padding-left: 2px; }
.safety-quotes .tiny-note { color: rgba(247,245,240,0.55); margin-top: 22px; }
@media (max-width: 900px) { .sq-grid { grid-template-columns: repeat(2, 1fr); } }
/* на телефоне правила и реплики не растягивают страницу вниз, а листаются вбок */
@media (max-width: 620px) {
  .safety-list, .sq-grid {
    display: flex; gap: 12px; margin-right: -26px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .safety-list::-webkit-scrollbar, .sq-grid::-webkit-scrollbar { display: none; }
  .safety-list::after, .sq-grid::after { content: ''; flex: 0 0 14px; }   /* воздух в конце ленты */
  .safety-item, .sq { flex: 0 0 78%; scroll-snap-align: start; }
  /* галочка и заголовок в одну строку, описание - на всю ширину карточки */
  .safety-item { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 10px; align-items: start; }
  .safety-item > div { display: contents; }
  .safety-item svg.check { grid-column: 1; grid-row: 1; }
  .safety-item b { grid-column: 2; grid-row: 1; margin-bottom: 0; align-self: center; }
  .safety-item span { grid-column: 1 / -1; grid-row: 2; }
  .sq .bubble { flex: 1; }
}

/* =============================================================
   BLOCK 6 — как проходит занятие
============================================================= */
.session { background: var(--paper); }
.session-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: start; }
.session-grid > * { min-width: 0; }   /* иначе лента внутри колонки распирает страницу вбок */
.session p { color: var(--soft); font-size: 16px; line-height: 1.7; }
.session p + p { margin-top: 14px; }
/* правая колонка - бытовая памятка: то, чего человек про занятие не знает */
/* эмодзи отдельной строкой: если оставить в строке, первая строка абзаца съезжает вправо */
.session p .p-emoji { display: block; font-size: 20px; line-height: 1; margin-bottom: 8px; }
.session-facts-lead { font-size: 15px; color: var(--soft); font-weight: 600; margin-top: 30px !important; }
.session-facts { list-style: none; margin-top: 18px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
/* эмодзи сверху, текст под ним на всю ширину карточки */
.session-facts li { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; background: var(--white); border-radius: var(--radius); padding: 18px 20px; box-shadow: 0 1px 2px rgba(42,42,40,.05), 0 12px 26px -14px rgba(42,42,40,.22); }
.session-facts li p { width: 100%; }
.session-facts li span { font-size: 22px; line-height: 1.2; flex-shrink: 0; }
.session-facts li p { font-size: 15px; line-height: 1.55; color: var(--soft); }
.session-embed video { width: 100%; max-width: 340px; display: block; margin: 0 auto; border-radius: var(--radius-sm); background: #000; box-shadow: 0 2px 6px rgba(42,42,40,.10), 0 20px 40px -18px rgba(42,42,40,.40); }
.session-embed-cap { max-width: 340px; margin: 12px auto 0; text-align: center; font-size: 13px; color: var(--soft); }
/* на телефоне подпись становится заголовком и встаёт над роликом */
@media (max-width: 860px) {
  .session-embed { display: flex; flex-direction: column; }
  .session-embed-cap { order: -1; margin: 0 auto 14px; font-size: 18px; font-weight: 700; color: var(--ink); }
}
@media (max-width: 860px) { .session-grid { grid-template-columns: 1fr; gap: 30px; } }
/* на телефоне памятка тоже листается вбок, а не растягивает блок вниз */
@media (max-width: 620px) {
  .session-facts {
    display: flex; flex-direction: row; gap: 12px; margin-right: -26px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .session-facts::-webkit-scrollbar { display: none; }
  .session-facts::after { content: ''; flex: 0 0 14px; }
  .session-facts li { flex: 0 0 78%; scroll-snap-align: start; }
}

/* =============================================================
   BLOCK 7 — альтернативы
============================================================= */
/* был горчичный - белый текст на нём давал контраст 2,9:1 и плохо читался; кофейный даёт 5,8:1 */
.alts { background: var(--coffee); color: var(--white); }
.alts .eyebrow { color: var(--white); border-color: rgba(255,255,255,0.55); }
.alts h2.h { color: var(--white); }
/* терракотовый акцент на кофейном фоне не читался - берём светлый песочный */
.alts h2.h .accent { color: #F0D2A8; }
.alts-grid { margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.alt-card {
  background: rgba(255,255,255,0.12); border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: var(--radius); padding: 30px 26px; min-height: 210px;
}
.alt-card .alt-emoji { display: block; font-size: 30px; line-height: 1; margin-bottom: 14px; }
.alt-card b { display: block; font-size: 18px; margin-bottom: 12px; }
.alt-card span { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.92); }
/* реплики участницы - баблами, как в остальных блоках: рукописный шрифт тут не читался */
.alts-talk { margin-top: 34px; display: flex; gap: 20px; align-items: flex-end; }
.alts-talk img { width: 128px; height: 128px; object-fit: cover; border-radius: 50%; background: var(--white); flex-shrink: 0; }
.alts-bubbles { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.alts-bubbles .ab {
  position: relative; background: var(--white); color: var(--ink);
  border-radius: 18px 18px 18px 4px; padding: 14px 18px; margin-left: 8px;
  font-size: 15.5px; line-height: 1.5;
}
.alts-bubbles .ab:last-of-type::before { content: ''; position: absolute; left: -6px; bottom: 0; width: 12px; height: 14px; background: var(--white); }
.alts-bubbles .ab:last-of-type::after { content: ''; position: absolute; left: -13px; bottom: 0; width: 13px; height: 18px; background: var(--coffee); border-bottom-right-radius: 13px; }
.ab-who { margin-left: 10px; font-size: 13px; color: rgba(255,255,255,0.75); }
@media (max-width: 620px) { .alts-talk { gap: 14px; align-items: flex-start; } .alts-talk img { width: 76px; height: 76px; } }
@media (max-width: 860px) and (min-width: 621px) { .alts-grid { grid-template-columns: 1fr; } }
/* на телефоне альтернативы листаются вбок */
@media (max-width: 620px) {
  .alts-grid {
    display: flex; gap: 14px; margin-right: -26px;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .alts-grid::-webkit-scrollbar { display: none; }
  .alts-grid::after { content: ''; flex: 0 0 14px; }
  .alt-card { flex: 0 0 78%; scroll-snap-align: start; }
}

/* =============================================================
   BLOCK 8 — сомнения
============================================================= */
/* =============================================================
   BLOCK 9 — что меняется
============================================================= */
.change { background: var(--ink); color: var(--paper); }
.change .eyebrow { color: var(--paper); border-color: rgba(247,245,240,0.5); }
.change h2.h { color: var(--paper); }
.change h2.h .accent { color: #F0DDBB; }
/* набор сообщений на тёмном - те же баблы, что в остальных блоках */
/* круглая стрелка поверх ленты (только телефон), гаснет после первого свайпа */
.scroll-wrap { position: relative; min-width: 0; }
.scroll-arrow {
  position: absolute; top: 50%; right: 20px; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: #EFAE55; color: var(--ink);
  box-shadow: 0 2px 6px rgba(42,42,40,.18), 0 10px 22px -10px rgba(42,42,40,.55);
  display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1;
  z-index: 3; cursor: pointer; transition: opacity .3s;
  animation: arrow-nudge 1.8s ease-in-out infinite;
}
.scroll-arrow.gone { opacity: 0; pointer-events: none; animation: none; }
@keyframes arrow-nudge { 0%,100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(3px); } }

/* три колонки: браузер сам балансирует высоту, ничего руками не раскидываем */
.change-chat { margin-top: 34px; column-count: 3; column-gap: 30px; }
.ch-row { break-inside: avoid; margin-bottom: 26px; }
.ch-row { display: flex; gap: 12px; align-items: flex-end; }
.ch-row img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--white); flex-shrink: 0; }
.ch-row .ava-init { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #A6DBFF 0%, #7BB4FF 100%); color: var(--white); font-size: 13px; font-weight: 700; }
.ch-stack { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ch-msg { background: var(--white); color: var(--ink); border-radius: 18px 18px 18px 4px; padding: 14px 17px; font-size: 15.5px; line-height: 1.5; }
.ch-who { font-size: 13px; color: rgba(247,245,240,0.65); padding-left: 4px; }
.change-closing { margin-top: 32px; color: rgba(247,245,240,0.65); font-size: 14.5px; max-width: 560px; }
@media (max-width: 1100px) { .change-chat { column-count: 2; } }
@media (max-width: 760px) { .change-chat { column-count: 1; } }

/* =============================================================
   РАСПИСАНИЕ
============================================================= */
.schedule { background: var(--paper-2); }
.sch-list { margin-top: 30px; display: flex; flex-direction: column; gap: 30px; }
.sch-month { display: flex; flex-direction: column; gap: 12px; }
.sch-mname { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #A83C24; }
.sch-item {
  display: grid; grid-template-columns: 0.9fr 1.4fr auto; gap: 18px 26px; align-items: center;
  background: var(--white); border-radius: var(--radius); padding: 22px 26px;
  box-shadow: 0 1px 2px rgba(42,42,40,.05), 0 12px 26px -14px rgba(42,42,40,.22);
}
.sch-when b { display: block; font-size: 16.5px; letter-spacing: -0.005em; }
.sch-when span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--soft); }
.sch-what > b { font-size: 18px; letter-spacing: -0.005em; }
.sch-sub, .sch-en { display: inline-block; margin-left: 8px; font-size: 13px; color: var(--soft); }
.sch-en { background: var(--paper-2); border-radius: 999px; padding: 3px 10px; }
.sch-who { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; color: var(--soft); }
.sch-faces { display: flex; flex-shrink: 0; }
.sch-faces img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: center 15%;
  background: var(--white); box-shadow: 0 2px 6px rgba(42,42,40,.18); filter: grayscale(100%) contrast(1.05); }
.sch-faces img + img { margin-left: -12px; }
.sch-faces img:nth-child(odd) { transform: rotate(-3deg); }
.sch-faces img:nth-child(even) { transform: rotate(3deg); }
.sch-price { display: flex; align-items: center; gap: 14px; justify-self: end; }
.price-pill { display: inline-block; padding: 8px 16px; border-radius: 999px; font-weight: 800; font-size: 15.5px; color: var(--ink); }
.sch-price .price-pill { background: var(--mustard); flex-shrink: 0; white-space: nowrap; }
.sch-go { font-weight: 700; font-size: 14.5px; color: #A83C24; white-space: nowrap; }
.sch-live { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--pine); }
.sch-note { margin-top: 24px; font-size: 15px; color: var(--soft); max-width: 720px; line-height: 1.6; }
.sch-empty { margin-top: 20px; font-size: 15px; color: var(--soft); }
@media (max-width: 860px) {
  .sch-item { grid-template-columns: 1fr; gap: 12px; padding: 20px 22px; }
  .sch-price { justify-self: start; }
}

/* =============================================================
   МАСТЕРА
============================================================= */
.masters { background: var(--paper); }
.masters-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 22px; }
.master { text-align: center; }
.master .m-photo {
  width: 74%; max-width: 152px; margin: 0 auto 14px; aspect-ratio: 1;
  border-radius: 50%; overflow: hidden; background: var(--white);
  box-shadow: 3px 6px 14px rgba(42,42,40,0.18); transition: transform .3s;
}
.master:nth-child(odd) .m-photo { transform: rotate(-3deg); }
.master:nth-child(even) .m-photo { transform: rotate(3deg); }
.master:hover .m-photo { transform: rotate(0deg) translateY(-4px); }
/* Часть исходных фото цветные, часть чёрно-белые - приводим к одному виду */
.master .m-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; filter: grayscale(100%) contrast(1.05); }
.master .m-photo img.pos-low { object-position: center 5%; }
.master .m-photo img.pos-high { object-position: center 60%; }
.master .m-photo img.pos-top { object-position: center 0%; }
.master .m-photo img.pos-down { object-position: center 35%; }
.master .m-photo img.pos-left-up { object-position: 45% 50%; }
.master .m-name { font-weight: 700; font-size: 16px; letter-spacing: -0.005em; }
.master .m-role { font-size: 12.5px; color: var(--soft); line-height: 1.45; margin-top: 5px; }
.guests-label {
  margin: 60px 0 26px; display: flex; align-items: center; gap: 16px;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: var(--coffee);
}
.guests-label::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.guests-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px 18px; }
.guests-grid .m-photo { max-width: 104px; }
.guests-grid .m-name { font-size: 14.5px; }
.guests-grid .m-role { font-size: 11.5px; }
/* на телефоне сетка перестраивается: штатные по двое, приглашённые (фото мельче) по трое.
   Раньше у .guests-grid стояло !important на 5 колонок - оно било этот медиазапрос,
   и пятеро пытались влезть в ширину телефона */
@media (max-width: 860px) {
  .masters-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
  .guests-grid { grid-template-columns: repeat(3, 1fr); gap: 24px 12px; }
}
/* на телефоне приглашённые не растягивают страницу вниз, а листаются вбок - как остальные ленты */
@media (max-width: 620px) {
  .guests-grid {
    display: flex; gap: 12px; margin-right: -26px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .guests-grid::-webkit-scrollbar { display: none; }
  .guests-grid::after { content: ''; flex: 0 0 14px; }   /* воздух в конце ленты */
  .guests-grid .master { flex: 0 0 33%; scroll-snap-align: start; }
  /* карточки тут низкие: по центру ленты стрелка накрывала бы имя, поэтому ставим её на уровень фотографий */
  .scroll-wrap:has(.guests-grid) .scroll-arrow { top: 55px; }
}

/* =============================================================
   НАПРАВЛЕНИЯ
============================================================= */
.dirs { background: var(--paper-2); }
.dirs-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* карточки в фирменных цветах: белая подложка, цветная шапка-полоса и акцент у ссылки */
.dir-card {
  position: relative; overflow: hidden; border: none; border-radius: var(--radius);
  background: var(--white); padding: 30px 28px 28px; display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(42,42,40,.05), 0 14px 30px -14px rgba(42,42,40,.22);
  transition: transform .3s, box-shadow .3s;
}
.dir-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--c); }
.dir-card:hover { transform: translateY(-5px); box-shadow: 0 2px 4px rgba(42,42,40,.07), 0 20px 38px -16px rgba(42,42,40,.28); }
.dir-card.d-en  { --c: var(--pine);       --tint: #E9EFE7; }
.dir-card.d-b2b { --c: var(--coffee);     --tint: #F1E7DF; }
.dir-card.d-ru  { --c: var(--mustard);    --tint: #F7EBD3; }
.dir-card .d-emoji {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; background: var(--tint);
  font-size: 26px; line-height: 1; margin-bottom: 16px;
}
.dir-card h3 { font-weight: 800; font-size: 21px; margin-bottom: 10px; letter-spacing: -0.01em; }
.dir-card p { color: var(--soft); font-size: 14.5px; line-height: 1.6; margin-bottom: 22px; }
.dir-card p:last-child { margin-bottom: 0; }   /* карточки без ссылки-действия не тянут лишнюю пустоту снизу */
.dir-card .d-go {
  margin-top: auto; align-self: flex-start; font-weight: 700; font-size: 14px;
  color: var(--c); background: var(--tint); border-radius: 999px; padding: 9px 18px;
  transition: background .25s, color .25s;
}
.dir-card .d-go:hover { background: var(--c); color: var(--white); }
@media (max-width: 860px) { .dirs-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .dirs-grid {
    display: flex; grid-template-columns: none; overflow-x: auto; gap: 14px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-bottom: 12px; margin-right: -26px; padding-right: 26px;
  }
  .dirs-grid::-webkit-scrollbar { display: none; }
  .dirs-grid .dir-card { flex: 0 0 78%; scroll-snap-align: start; }
}

/* =============================================================
   MAP
============================================================= */
.map-section { background: var(--paper); }
.map-wrap { position: relative; border: none; box-shadow: 0 1px 2px rgba(42,42,40,.05), 0 16px 34px -16px rgba(42,42,40,.24); border-radius: var(--radius); overflow: hidden; aspect-ratio: 21/9; max-height: 560px; background: var(--paper-2); }
.map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; filter: sepia(0.15) saturate(0.85) contrast(1.02); }
.map-pin-card {
  position: absolute; top: 24px; left: 24px; background: var(--white);
  border: none; box-shadow: 0 2px 6px rgba(42,42,40,.10), 0 18px 36px -16px rgba(42,42,40,.35); border-radius: var(--radius); padding: 22px 26px; max-width: 320px; z-index: 2;
}
.map-pin-card h3 { font-weight: 800; font-size: 18px; margin-bottom: 8px; }
.map-pin-card p { font-size: 13.5px; color: var(--soft); line-height: 1.55; margin-bottom: 12px; }
.map-pin-card .map-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12.5px; color: var(--ink); border-bottom: 1.5px solid var(--terracotta); padding-bottom: 2px; }
@media (max-width: 680px) {
  .map-wrap { aspect-ratio: 4/5; }
  .map-pin-card { position: relative; top: auto; left: auto; max-width: none; margin-bottom: -1px; }
}

/* =============================================================
   ЛЕНТА ИНСТАГРАМА
============================================================= */
.iglife { background: var(--paper-2); }
.iglife .wrap { display: flex; flex-direction: column; }
.ig-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ig-at { font-size: 15px; color: var(--soft); margin-top: 8px; }
/* колонки, а не строгая сетка: посты разной высоты стоят как легли */
.ig-wall { margin-top: 30px; display: flex; gap: 16px; align-items: flex-start; }
.ig-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ig-card {
  display: block;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; transition: transform .25s, box-shadow .25s;
}
.ig-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(42,42,40,0.10); }
.ig-top { display: flex; align-items: center; gap: 9px; padding: 11px 13px; }
.ig-ava { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none;
  box-shadow: 0 0 0 1.5px var(--white), 0 0 0 3px var(--terracotta); background: var(--paper-2); }
.ig-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ig-who b { font-size: 13.5px; font-weight: 700; }
.ig-who span { font-size: 11.5px; color: var(--soft); }
.ig-ph { position: relative; display: block; background: var(--paper-2); }
.ig-ph img { width: 100%; height: auto; display: block; }
.ig-mark { position: absolute; right: 10px; top: 10px; color: #fff; line-height: 0;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45)); }
.ig-mark svg { width: 19px; height: 19px; }
.ig-acts { display: flex; align-items: center; gap: 16px; padding: 11px 13px 6px; color: var(--ink); }
.ig-acts svg { width: 21px; height: 21px; flex: none; }
.ig-acts .act { display: inline-flex; align-items: center; gap: 6px; }
.ig-acts .act i { font-style: normal; font-size: 13.5px; font-weight: 700; }
.ig-acts .save { margin-left: auto; }
.ig-text { display: block; padding: 4px 13px 0; font-size: 13.5px; line-height: 1.5; }
.ig-text b { font-weight: 700; }
.ig-date { display: block; padding: 8px 13px 13px; font-size: 11.5px; color: var(--soft);
  text-transform: uppercase; letter-spacing: 0.05em; }
/* на телефоне посты листаются вбок, как в самом инстаграме */
.ig-wall.swipe { display: flex; overflow-x: auto; gap: 14px; padding-bottom: 12px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  /* лента уходит за правый край экрана - видно, что она продолжается */
  margin-right: -26px; padding-right: 26px; }
.ig-wall.swipe::-webkit-scrollbar { display: none; }
.ig-wall.swipe .ig-card { flex: 0 0 78%; scroll-snap-align: start; }
.ig-more { display: flex; justify-content: center; margin-top: 26px; }
.ig-more .btn { padding: 13px 26px; font-size: 14.5px; }
/* значок инстаграма рядом с ником - чтобы блок сразу читался */
.ig-at { display: inline-flex; align-items: center; gap: 7px; }
.ig-at svg { width: 17px; height: 17px; flex: none; opacity: .75; }
.ig-head .btn svg { width: 17px; height: 17px; }

/* =============================================================
   FINAL CTA
============================================================= */
.final2 { background: var(--coffee); color: var(--white); text-align: center; overflow: hidden; }
.final2 .wrap { position: relative; z-index: 2; }
.final2 h2 { font-weight: 800; font-size: clamp(30px, 5vw, 52px); letter-spacing: -0.02em; margin-bottom: 30px; line-height: 1.12; }
.final2 .ctas { display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; }
.final2 .fine { font-size: 14px; color: rgba(255,255,255,0.78); max-width: 420px; margin: 0 auto; line-height: 1.5; }
.final2 .doodle-star { top: 6%; left: 6%; width: 60px; height: 60px; color: rgba(255,255,255,0.25); }
.final2 .doodle-star-2 { bottom: 10%; right: 8%; width: 46px; height: 46px; color: rgba(255,255,255,0.25); }

/* =============================================================
   FOOTER
============================================================= */
.site-footer { background: var(--paper); border-top: 1.5px solid var(--ink); padding: 60px 0 32px; }
.site-footer .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 36px; }
.site-footer .brand { margin-bottom: 14px; }
.site-footer p.about { font-size: 14px; max-width: 340px; color: var(--soft); line-height: 1.6; }
.site-footer h3 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: #A83C24; margin-bottom: 14px; }
.site-footer a { display: block; padding: 3px 0; font-size: 14px; color: var(--soft); transition: color .2s; }
.site-footer a:hover { color: var(--ink); }
.site-footer .adr { font-size: 14px; color: var(--soft); line-height: 1.6; }
.site-footer .copy {
  grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: 26px; padding-top: 22px;
  font-size: 12px; color: var(--soft); display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 8px;
  font-weight: 600; letter-spacing: 0.04em; line-height: 1.7;
}
/* Юридическое название - нужно Мете для подтверждения компании, не убирать */
.site-footer .legal { display: block; font-weight: 500; }
@media (max-width: 780px) { .site-footer .wrap { grid-template-columns: 1fr; } }

/* =============================================================
   STICKY CTA
============================================================= */
.sticky-cta { position: fixed; bottom: 26px; right: 26px; z-index: 999; opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .3s; pointer-events: none; }
.sticky-cta.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (max-width: 600px) {
  .sticky-cta { left: 14px; right: 14px; bottom: 14px; text-align: center; }
  .sticky-cta .btn { width: 100%; justify-content: center; }
  body { padding-bottom: 88px; }
}

/* =============================================================
   REVEAL ON SCROLL
============================================================= */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.25,.9,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d2 { transition-delay: .1s; }
.reveal.d3 { transition-delay: .2s; }
.reveal.d4 { transition-delay: .3s; }
.reveal.d5 { transition-delay: .4s; }
.reveal.d6 { transition-delay: .5s; }