/* ============================================================
   Intellectum Property — оформление по системе Steep (DESIGN.md).
   Те же токены, что в калькуляторе: сайт и калькулятор не должны
   выглядеть двумя разными продуктами.

   ВАЖНО ПРО НАПРАВЛЕНИЕ ПИСЬМА. Ни одного left/right в отступах и
   выравнивании — только логические свойства (inline-start, inline-end,
   text-align: start). Иврит разворачивает страницу целиком, и вёрстка
   на физических сторонах потребовала бы второго набора правил.
   ============================================================ */

/* Акцидентный шрифт лежит у нас, а не на стороннем сервисе: аудитория
   частью из России, где шрифтовые сервисы работают ненадёжно.
   swap — чтобы текст был виден сразу, не дожидаясь загрузки. */
@font-face{
  font-family:Akrobat;
  src:url(assets/fonts/Akrobat-Light.ttf?v=14719ed1) format('truetype');
  font-weight:300; font-style:normal; font-display:swap;
}
:root{
  --ink:#17191c;          /* Ink Black — единственная тёмная поверхность системы */
  --ink-2:#5a5f66;
  --muted:#8a9099;
  --mist:#f2f2f3;         /* Card Mist — тихий слой под вложенным содержимым */
  --fog:#fafafb;          /* Section Fog — чередование полос без контраста */
  --white:#fff;
  --line:#ececec;
  --gold:#A87830;         /* золото фирменного знака */
  --peach:#fbe1d1;        /* Blush Peach — не чаще одного раза на страницу */
  --sienna:#5d2a1a;
  --green:#3d6b4f;
  --red:#8c3a28;          /* те же плюс и минус, что на карточках мастера */
  /* Наезд раздела моделей на конец первого экрана. Ниже 820px наезда нет:
     там кадр стоит неподвижной заставкой и накладывать нечего. */
  --overlap:75vh;
  --r:24px;               /* карточки */
  --r-pill:9999px;        /* кнопки — только так */
  /* Акцидентный шрифт заголовков. Не сериф: выбран Akrobat —
     вытянутый геометрический гротеск со скруглёнными формами. */
  --display:Akrobat,"Avenir Next Condensed",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
/* В Акробате ивритских глифов нет — проверено по таблице cmap самого файла.
   Без подмены заголовки на иврите уезжали бы в случайный системный шрифт.
   Акробат оставлен первым: латиница в тех же строках (Intellectum Property)
   набирается им, а ивритские знаки берёт следующий по списку. */
html[lang="he"]{
  --display:Akrobat,"Arial Hebrew","Noto Sans Hebrew","Segoe UI",sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Arial Hebrew","Noto Sans Hebrew","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
/* Shared layout/motion tokens must apply to every language. */
:root{
  --ease:cubic-bezier(0.22,0.61,0.36,1);
  --top-h:66px;           /* высота шапки; на неё поднимается первый экран */
  --dur:.26s;             /* отклик на действие */
  --enter:.55s;           /* появление экрана — другой жанр, другая длительность */
  --shadow:0 0 0 1px rgba(4,23,43,.05), 0 20px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Touch: one swipe per stop. Wheel/trackpad remain proportional to input. */
html.scroll-steps{touch-action:pan-x pinch-zoom}
[data-native-scroll], input, textarea, select, [contenteditable]{touch-action:auto}
/* Invisible stop markers, shared with scroll.js. */
.snap{position:absolute;inset-inline-start:0;width:1px;height:1px;
      pointer-events:none;scroll-snap-align:start;scroll-snap-stop:always}
/* Вторая остановка развилки — на приземлившихся кнопках. Отрезок прилёта
   90vh, прилёт кончается на семи десятых, поэтому метка на 72vh: экран ещё
   держится, кнопки уже на месте. Без неё остановиться можно было посреди
   полёта, а долистав — проскочить готовый экран насквозь. */
#start .snap{top:72vh}
.story-restart-veil{position:fixed;inset:0;z-index:10000;pointer-events:none;
                    background:rgba(255,255,255,0);backdrop-filter:blur(0);
                    -webkit-backdrop-filter:blur(0)}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);
     font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1080px;margin-inline:auto;padding-inline:24px}

/* ---------- шапка ----------
   Знак в начале строки, глобус и бургер — в конце. Горизонтального меню нет
   ни на каком размере: один способ добраться до разделов, а не два.
   Слова «слева» и «справа» здесь не годятся — под иврит строка развернётся. */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);
     backdrop-filter:saturate(180%) blur(12px);
     /* волосяная линия тенью, а не рамкой: рамка добавляет высоту, и первый
        экран съезжал на этот один пиксель */
     box-shadow:0 1px 0 var(--line);
     transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
/* Пока под шапкой идёт первый экран, она прозрачна: иначе кадр начинается
   не от края окна, а из-под белой полосы, и это уже не «на весь экран». */
.top.clear{background:transparent;backdrop-filter:none;box-shadow:none;pointer-events:none}
.top.clear .tools{pointer-events:auto}
.top .wrap{display:flex;align-items:center;height:var(--top-h)}
/* Знак в шапке появляется вместе с самой шапкой: пока под ней идёт первый
   экран, шапка прозрачна и знак там был бы вторым — крупный знак первого
   экрана в это время ещё на месте. Кончился первый экран — шапка стала
   шапкой, и знак встал в неё насовсем.
   Высота знака взята под шапку: он сложен в два яруса, и в 66 точках высоты
   больше не помещается. */
.top-mark{flex:none;display:block;line-height:0;
          opacity:1;transition:opacity var(--enter) var(--ease)}
.top-mark img{height:46px;width:auto;display:block}
.top.clear .top-mark{opacity:0;pointer-events:none}
.tools{margin-inline-start:auto;display:flex;align-items:center;gap:2px;flex:none}
.icon{width:44px;height:44px;padding:10px;background:none;border:0;cursor:pointer;
      color:var(--ink);border-radius:var(--r-pill);
      transition:background var(--dur) var(--ease)}
.icon:hover{background:var(--mist)}
.icon svg{width:100%;height:100%;display:block}

/* Панель — «плавающий артефакт»: единственное, чему система разрешает тень. */
.pop{position:relative}
.pop-menu{display:none;position:absolute;inset-block-start:calc(100% + 8px);inset-inline-end:0;
          background:var(--white);border-radius:16px;padding:6px;min-width:172px;
          box-shadow:0 0 0 1px rgba(0,0,0,.05), 0 4px 24px rgba(0,0,0,.08)}
.pop.open .pop-menu{display:block}
.pop-menu a{display:block;padding:10px 14px;border-radius:10px;text-decoration:none;
            color:var(--ink-2);font-size:15px;white-space:nowrap;
            transition:background var(--dur) var(--ease), color var(--dur) var(--ease)}
.pop-menu a:hover{background:var(--mist);color:var(--ink)}
.pop-menu a.on{color:var(--ink);font-weight:500}
.pop-menu a.on::after{content:"\2713";margin-inline-start:8px;color:var(--gold)}

/* ---------- первый экран ----------
   Кадры ролика сменяются по мере прокрутки. Высокая обёртка задаёт длину
   прокрутки, сам экран внутри неё прилипает — отсюда ощущение, что страница
   стоит, а картинка живёт.

   Текст стоит сбоку не по прихоти: по карте светлоты ролика тёмная область —
   узкая полоса по центру внизу, а край и правая половина остаются светлыми
   весь ролик. Затемнения поэтому нет, ролик снят светлым намеренно. */
/* Экран поднят под шапку на её высоту: шапка стоит в потоке и иначе
   отодвигала бы кадр вниз, срезая столько же снизу. */
.hero-scroll{height:340vh;position:relative;margin-block-start:calc(-1 * var(--top-h))}
/* Кадры во всю площадь. Экран прилипает, поэтому картинка стоит на месте,
   а прокрутка перебирает кадры и сменяет блоки текста поверх. */
.hero{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;
      background:var(--white)}
/* Кадры проявляются из белого и уходят в белое прозрачностью, а не сами
   собой: засвет ролика — серый #bfbfbf, и без этого ни старт, ни стык
   с разделом ниже белыми не были бы. */
.hero-film{position:absolute;inset:0;opacity:0;
           will-change:opacity;
           background:transparent 50% 50%/min(100%,1280px) auto no-repeat}
/* Canvas keeps a decoded frame above the opening-image fallback. */
.hero-frames{position:absolute;left:50%;top:50%;width:min(100%,1280px);height:auto;
             max-height:100%;aspect-ratio:16/9;object-fit:contain;
             transform:translate(-50%,-50%);display:none;
             mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 12px),transparent),
                        linear-gradient(to bottom,transparent,#000 12px,#000 calc(100% - 12px),transparent);
             mask-composite:intersect}
.hero-edge{position:absolute;left:50%;top:50%;width:min(100%,1280px);height:auto;
           max-height:100%;aspect-ratio:16/9;object-fit:contain;
           transform:translate(-50%,-50%);filter:blur(8px);opacity:.85;
           display:none;pointer-events:none}
.hero-film.on-canvas .hero-frames{display:block}
.hero-film.on-canvas .hero-edge{display:block}
.hero-film.on-canvas{background-image:none!important}

/* Блоки лежат друг на друге в одной точке; видно всегда один. Держим их
   в потоке через grid, а не абсолютным позиционированием: так высота блока
   участвует в раскладке и длинный текст не вылезает за экран. */
/* Отступы сверху и снизу равные, иначе содержимое встаёт ниже середины.
   88px хватает, чтобы не лезть под шапку: знака там больше нет,
   остались только глобус и бургер у противоположного края. */
.hero-stage{position:absolute;inset:0;display:grid;place-items:center;
            padding:88px clamp(24px,6vw,80px)}
/* Знак в блоке — крупный, во всю ширину блока. Ради него блок шире
   текстового: 26ch мал для знака, а тексту широкое поле ни к чему. */
/* width, а не max-width: слои знака абсолютные, содержимого у блока нет,
   и от максимума ширина схлопнулась бы в ноль вместе с высотой. */
.beat.mark{width:min(460px,46vw);max-width:none}
/* Знак — пять слоёв на общем холсте. Пропорция задана самой картинкой,
   поэтому слои можно класть друг на друга и не считать совмещение. */
.brandmark{position:relative;width:100%;aspect-ratio:1281/807}
.logo-tagline{display:flex;justify-content:center;margin:14px -18px 0;
              font-family:var(--display);font-weight:300;
              font-size:clamp(17px,2vw,23px);line-height:1;
              letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.logo-tag-char{display:inline-block;white-space:pre;will-change:transform,opacity,filter;
               transform-origin:50% 50%}
.hero-whatsapp{position:absolute;top:11px;left:clamp(14px,3vw,38px);
                display:inline-flex;align-items:center;justify-content:center;gap:8px;
                min-height:44px;margin:0;padding:6px 10px;color:#000;
                font-size:16px;font-weight:400;text-decoration:none;direction:ltr;
                border-radius:var(--r-pill);cursor:pointer;
                transition:background var(--dur) var(--ease)}
.beat.live .hero-whatsapp{pointer-events:auto}
.hero-whatsapp svg{width:24px;height:24px;flex:none}
.hero-whatsapp:hover,.hero-whatsapp:focus-visible{background:var(--mist)}
.hero-whatsapp:focus-visible{outline:2px solid #000;outline-offset:4px}
html[dir="rtl"] .hero-whatsapp{top:calc(var(--top-h) + 10px)}
/* Каждый слой — прямоугольник со своим местом на холсте (доли ставит сборка).
   Знак приходит с прозрачностью, поэтому слои просто лежат друг на друге. */
.pc{position:absolute;display:block;
    transform-origin:50% 50%;will-change:transform,opacity}
/* Прозрачность и сдвиг блока задаются прокруткой покадрово, поэтому
   переходов здесь нет: они бы спорили с покадровым расчётом и отставали. */
.beat{grid-area:1/1;max-width:26ch;text-align:center;opacity:0;pointer-events:none}
/* Блок можно прижать к краю строки. Край, а не «право»: под ивритом строка
   развёрнута, и блок уедет к противоположной стороне сам. */
/* Блок стоит там, где сказано, и не двигается: по прокрутке меняется только
   его плотность. Стороны логические — под ивритом строка развёрнута, и
   «ближний край» уедет к противоположной стороне сам. */
.beat.at-bottom-start{justify-self:start;align-self:end;text-align:start}
.beat.at-bottom-left{justify-self:left;align-self:end;text-align:start}
.beat.at-bottom-end  {justify-self:end;  align-self:end;text-align:end}
.beat.at-top-start   {justify-self:start;align-self:start;text-align:start}
.beat.at-top-end     {justify-self:end;  align-self:start;text-align:end}
.beat.to-start{text-align:start}
.beat.to-end  {text-align:end;max-width:none}
.beat.to-start .rule{margin-inline:0 auto}
.beat.to-end   .rule{margin-inline:auto 0}
/* Разбивка на строки задана в тексте, поэтому автоперенос выключен: иначе
   браузер добавляет свои переносы поверх заданных. */
.beat.to-start h1, .beat.to-end h1,
.beat.to-start .say, .beat.to-end .say{white-space:nowrap}

.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
         margin:0 0 16px;font-weight:450}
.beat h1{font-family:var(--display);font-weight:300;font-size:clamp(32px,5vw,60px);
         line-height:1.14;letter-spacing:-0.01em;margin:0 0 20px;text-wrap:balance}
/* width, а не только max-width: линейка — элемент сетки, и без заданной
   ширины сжималась бы в ноль */
.rule{width:96px;height:1px;background:var(--gold);opacity:.4;margin:0 auto}
/* Кегль тот же, что у заголовка: блоки должны читаться одним голосом.
   text-wrap здесь не нужен — разбивка задана в тексте вручную. */
.beat .say{font-family:var(--display);font-weight:300;color:var(--ink);
           font-size:clamp(32px,5vw,60px);line-height:1.14;letter-spacing:-0.01em;
           margin:0}
.beat[data-beat="2"] .say{font-size:clamp(28px,4.2vw,50px)}
.tags{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin:26px 0 0}
.tag{font-size:13px;color:var(--ink-2);background:rgba(255,255,255,.66);
     border-radius:var(--r-pill);padding:7px 15px;backdrop-filter:blur(6px)}
.cue{width:44px;height:44px;padding:11px;opacity:.34;color:var(--ink);background:none;border:0;
     cursor:pointer;transition:opacity var(--dur) var(--ease);margin:24px auto 0;display:block}
.cue:hover{opacity:.6}
/* Пульс раз в три секунды: почти весь цикл шеврон стоит, и лишь в конце
   коротко клюёт вниз и светлеет. Непрерывное покачивание на первом экране
   мельтешит и спорит с разлётом знака. */
.cue svg{width:100%;height:100%;animation:pulse 3s var(--ease) infinite}
@keyframes pulse{
  0%, 72%, 100%{ transform:translateY(0);   opacity:1 }
  80%          { transform:translateY(7px); opacity:.55 }
  88%          { transform:translateY(0);   opacity:1 }
}
/* Под знаком шеврон стоит просторнее: там нет ни меток, ни строки текста. */
.beat.mark .cue{margin-block-start:36px}

/* Узкий экран: кадры не грузятся — 2.3 МБ ради украшения на мобильной сети
   несоразмерны. Остаётся один неподвижный кадр; блоки сменяются так же. */
@media (max-width:820px){
  /* Отрезки те же, что на большом экране: ступенями правит свой счётчик,
     и любое расстояние проходится одним движением — укорачивать нечего. */
  /* Кадр вписывается целиком, а не обрезается по центру. При обрезке на экран
     попадала только середина — тёмная бронза, и текст поверх неё не читался
     (померено: середина 100–135 против 226–250 наверху). Теперь видно всё:
     руно, статую, город и светлое небо. Полоса стоит вверху, текст ложится
     под ней на белое. */
  .hero-film{background-image:url(assets/medea2/f001.webp?v=b35c234e) !important;
             background-size:contain;
             background-position:50% 12%}
  /* Блоки опущены: поле, в котором они центруются, начинается ниже полосы
     кадра. Раньше между кадром и текстом оставалось 26 точек — текст сидел
     на картинке впритык. */
  .hero-stage{padding:210px 24px 88px}
  .beat{max-width:20ch}
  /* Узкому экрану заданная разбивка не по силам: возвращаем автоперенос,
     иначе строка вылезет за край. */
  /* Узкому экрану заданная разбивка и углы не по силам: блоки встают
     по центру, перенос возвращается. */
  /* Блоки по центру экрана — то есть под полосой кадра, на белом. */
  .beat{justify-self:center !important;align-self:center !important;
        text-align:center !important;max-width:20ch}
  .beat h1, .beat .say{white-space:normal !important}
  .beat .rule{margin-inline:auto !important}
  /* Наезд меньше, чем на большом экране, но есть: без него от третьего блока
     до кнопок выходило 2118 точек — два с половиной экрана и почти три
     секунды хода. Наезд срезает от этого пути четыре сотни. */
  :root{--overlap:50vh}
}

/* ---------- полосы разделов ---------- */
section{padding-block:86px}
/* Каждый раздел — своя остановка, вровень с нижней кромкой шапки.
   Первый экран исключён: он прилипший, и точка на нём означала бы привязку
   к самому себе; его остановки расставлены метками внутри. */
/* Остановка у каждого раздела. Действует только на большом экране: там
   привязку ведёт свой счётчик. На пальце привязки нет вовсе — см. конец
   страницы, там сказано почему. */
section:not(.hero){position:relative;scroll-snap-align:start;scroll-snap-stop:always;
                   scroll-margin-block-start:var(--top-h)}

section.fog{background:var(--fog);border-block:1px solid var(--line)}
h2{font-family:var(--display);font-weight:300;font-size:clamp(26px,3.6vw,40px);
   line-height:1.2;letter-spacing:-0.015em;margin:0 0 14px;text-wrap:balance}
.centered{text-align:center}
.centered h2{max-width:22ch;margin-inline:auto}
.lead{color:var(--ink-2);max-width:54ch;margin:0 0 46px}
.centered .lead{margin-inline:auto}

/* ---------- развилка ---------- */
/* Экран наезжает на конец первого листом поверх кадра. Без наезда кадр
   успевал раствориться раньше, чем следующий экран покажется из-под сгиба,
   и между двумя движениями оставалось полэкрана пустой прокрутки.
   Лист непрозрачный: сквозной пробовали — текст ложился на фотографию
   и не читался. Кадр при этом не просто закрывается, а гаснет сам —
   видимая полоса над листом сужается и одновременно светлеет.
   Приходит лист не кромкой, а растворением: непрозрачный край резал
   фотографию поперёк во всю ширину, и на большом экране эта линия читалась
   как граница страницы. Поэтому верх листа — растяжка из ничего в подложку,
   а линейка полосы «fog» сверху снята. */
#start{position:relative;z-index:1;margin-block-start:calc(-1 * var(--overlap));
       background:linear-gradient(to bottom,
                  rgba(250,250,251,0) 0, var(--fog) 28vh);
       border-block-start:0;
       /* Раздел выше экрана: лишнее — отрезок прокрутки на прилёт кнопок. */
       height:190vh;
       /* Полей у раздела нет: внутри целый экран, и отступ только сдвигал бы
          момент прилипания — экран вставал на место позже, чем раздел. */
       padding-block:0;
       /* Отступа под шапку здесь нет: раздел встаёт вровень с кромкой окна,
          иначе над ним оставалась бы белая полоса первого экрана. */
       scroll-margin-block-start:0}
/* Развилка занимает экран целиком: две кнопки посреди полосы высотой
   в двести точек читались бы подписью к первому экрану, а это отдельный
   шаг — вопрос, куда идти дальше.
   Экран прилипает: пока он поднимается, кнопок ещё нет; встал на место —
   пошёл прилёт, и движется уже только он. Иначе движение прокрутки
   и движение кнопок складывались, и полёта не читалось. */
.screen{position:sticky;top:0;height:100vh;height:100dvh;
        display:grid;align-items:center}
/* Ролик на фоне развилки. Проявляется вместе с прилётом кнопок, а не стоит
   с самого начала: пока экран поднимается, он ещё лист, и картинка на нём
   спорила бы с растворением первого экрана.
   На узком экране ролик не проигрывается — остаётся его заставка: там
   и трафик дороже, и автозапуск ведёт себя по-своему. */
/* Края растворяются в белизну: без этого ролик стоял бы прямоугольником
   с резкой кромкой, а внизу кадра тёмной полосой лежали бы горы.
   Маска, а не затемнение: сквозь неё видно подложку экрана, то есть ту же
   белизну, что и на всей странице. */
.fork-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
           opacity:0;pointer-events:none;
           /* Две маски разом. Кольцевая растворяет углы и низ; линейная гасит
              верхнюю кромку. Без второй ролик приходил снизу видимой чертой:
              у верхней грани кольцевая маска оставляет ещё 79% плотности. */
           -webkit-mask-image:radial-gradient(118% 96% at 50% 42%,
                     #000 30%, rgba(0,0,0,.55) 60%, transparent 88%),
                     linear-gradient(to bottom, transparent 0, #000 26%);
           -webkit-mask-composite:source-in;
           mask-image:radial-gradient(118% 96% at 50% 42%,
                     #000 30%, rgba(0,0,0,.55) 60%, transparent 88%),
                     linear-gradient(to bottom, transparent 0, #000 26%);
           mask-composite:intersect;
           /* Свой слой у видео: внутри прилипшего экрана оно
              перерисовывалось на каждом кадре прокрутки и мерцало. */
           transform:translateZ(0);backface-visibility:hidden;will-change:opacity}
/* На узком экране головы у фигур пропадали. Причина не в обрезке — по высоте
   кадр помещается целиком, — а в маске: её верхнее затухание занимало четверть
   экрана, и головы оказывались ровно под ним. Вписывать кадр целиком тоже
   не годится: он ложится тёмным прямоугольником посреди белого, потому что
   маска считается от всего экрана, а не от кадра.
   Поэтому кадр по-прежнему заполняет экран, но затухание сверху короткое,
   а кольцевая маска шире — она гасит бока и низ, не трогая фигур.
   Правило стоит после основного намеренно: вескость одинаковая, побеждает
   тот, кто ниже. */
@media (max-width:820px){
  /* Поджимать кадр пробовали — маска рассчитана шире экрана, и её резкий
     край, прежде уходивший за кадр, становился виден рамкой. Кадр остаётся
     во весь экран. */
  .fork-film{-webkit-mask-image:radial-gradient(150% 118% at 50% 52%,
                       #000 52%, rgba(0,0,0,.6) 78%, transparent 97%),
                       linear-gradient(to bottom, transparent 0, #000 9%);
             mask-image:radial-gradient(150% 118% at 50% 52%,
                       #000 52%, rgba(0,0,0,.6) 78%, transparent 97%),
                       linear-gradient(to bottom, transparent 0, #000 9%)}
}

/* Содержимое поверх ролика. */
.screen > .wrap{position:relative;z-index:1}
.fork{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
/* Кнопки крупнее обычных: на пустом экране они единственное, что есть.
   Обе белые — пара «сплошная плюс призрачная» здесь не работает: экран
   пустой, и призрачная на нём читалась бы недоделанной. Держит их тень,
   единственное, чему система разрешает тень: они и есть плавающие артефакты. */
.fork .btn{padding:19px 44px;font-size:20px;
           font-family:var(--display);font-weight:300;letter-spacing:.01em;
           background:var(--white);color:var(--ink);border-color:transparent;
           box-shadow:var(--shadow);
           transform-origin:50% 50%;will-change:transform,opacity,filter}
.fork .btn:hover{opacity:1;box-shadow:0 0 0 1px rgba(4,23,43,.05),
                 0 28px 34px -6px rgba(0,0,0,.13), 0 10px 12px -6px rgba(0,0,0,.12)}
/* Прилёт ведёт прокрутка покадрово, поэтому своих переходов на transform
   у кнопки нет — они бы спорили с расчётом. */
.fork .btn{transition:box-shadow var(--dur) var(--ease)}
/* Переход по якорю ставит раздел под липкую шапку — отступаем на её высоту. */
#why{scroll-margin-block-start:var(--top-h)}
.foot-note{color:var(--muted);font-size:13px;margin:38px auto 0;max-width:62ch}

/* ---------- страница услуг ---------- */
/* Услуги идут списком, а не плитками: тексты из коммерческого предложения
   длинные, в карточке они превращаются в кашу. Разделяет их линейка. */
.page-head{text-align:center}
.page-head .lead{margin-inline:auto}
.deeds{display:grid;margin-block-start:44px}
.deed{display:grid;grid-template-columns:64px 1fr;gap:24px;
      padding-block:34px;border-block-end:1px solid var(--line)}
.deed:first-child{padding-block-start:0}
.deed:last-child{border-block-end:0}
.deed .n{font-family:var(--display);font-weight:300;font-size:26px;
         color:var(--gold);line-height:1.2}
.deed h3{font-family:var(--display);font-weight:300;font-size:clamp(22px,2.6vw,28px);
         line-height:1.2;letter-spacing:-0.01em;margin:0 0 10px}
.deed p{color:var(--ink-2);font-size:16px;line-height:1.7;margin:0;max-width:66ch}
@media (max-width:640px){
  .deed{grid-template-columns:1fr;gap:8px;padding-block:26px}
  .deed .n{font-size:20px}
  .deed p{font-size:15px}
}

/* ---------- страница связи ---------- */
/* Отдельная страница живёт без первого экрана, поэтому отступ сверху задаётся
   ей самой: иначе заголовок ушёл бы под липкую шапку. */
.page{padding-block:calc(var(--top-h) + 64px) 96px}
.page h1{font-family:var(--display);font-weight:300;
         font-size:clamp(30px,4.4vw,48px);line-height:1.15;
         letter-spacing:-0.015em;margin:0 0 14px}
/* Способы связи — плитками: у каждого своё имя и своё значение, и любой
   из них нажимается целиком, а не только текст ссылки. */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-block-start:8px}
@media (max-width:860px){.ways{grid-template-columns:1fr}}
.way{display:flex;flex-direction:column;gap:4px;text-align:start;
     background:var(--mist);border-radius:var(--r);padding:22px 24px;
     text-decoration:none;color:inherit;
     transition:box-shadow var(--dur) var(--ease)}
.way:hover{box-shadow:var(--shadow)}
.way-kind{font-size:13px;color:var(--muted);letter-spacing:.02em}
.way-val{font-family:var(--display);font-weight:300;font-size:24px;line-height:1.2}

/* Связь в подвале: тем же способам, что и на странице, но в строку. */
.footer-ways{display:flex;gap:8px 26px;flex-wrap:wrap}
.footer-ways a{text-decoration:none;display:inline-flex;gap:7px;align-items:baseline}
/* Вотсап и телефон Грузии — один номер: без подписи канала это читается
   как опечатка, поэтому подпись стоит у каждого способа. */
.footer-ways .fk{color:var(--muted);font-size:12px;letter-spacing:.02em}
.footer-ways a:hover{color:var(--ink)}

/* ---------- сетки фактов, услуг, сегментов ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media (max-width:860px){.grid-3,.grid-2{grid-template-columns:1fr}}
.fact h3, .svc h3, .seg h3{font-size:16px;font-weight:600;margin:0 0 6px}
.fact p, .svc p, .seg p{color:var(--ink-2);font-size:15px;margin:0}
.fact{padding-inline-start:16px;border-inline-start:2px solid var(--gold);opacity:.98}
.svc{background:var(--white);border-radius:var(--r);padding:26px 22px;border:1px solid var(--line)}
.svc .num{font-family:var(--display);font-size:22px;color:var(--gold);margin-block-end:10px}
.seg{background:var(--mist);border-radius:var(--r);padding:26px 22px}

/* ---------- шаги работы ---------- */
.steps{counter-reset:s;display:grid;gap:2px}
.step{display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:baseline;
      padding-block:20px;border-block-end:1px solid var(--line)}
.step:last-child{border-block-end:0}
.step .n{font-family:var(--display);font-size:26px;color:var(--muted)}
.step h3{font-size:16px;font-weight:600;margin:0 0 4px}
.step p{color:var(--ink-2);font-size:15px;margin:0}

/* ---------- призыв и подвал ---------- */
/* Плашка была чернильной. На светлой странице такой прямоугольник читается
   провалом, а не призывом: глаз видит дыру, а не приглашение.
   Цвета только те, что в знаке: серый, чёрный, золото. Плашка светло-серая,
   заголовок чернилами, золото приходит одной линейкой — той же, что под
   блоками первого экрана. Объём даёт тень: плашка здесь плавающий артефакт,
   а им тень положена. */
.cta{background:var(--mist);color:var(--ink);border-radius:var(--r);
     padding:clamp(44px,6vw,72px) clamp(24px,5vw,56px);text-align:center;
     box-shadow:0 0 0 1px rgba(4,23,43,.05), 0 24px 40px -12px rgba(0,0,0,.14)}
.cta h2{color:var(--ink);margin-block-end:20px}
/* Золото на плашке — та же линейка, что под блоками первого экрана: цвет
   берётся из знака и больше ниоткуда. */
.cta .rule{margin-block:0 24px}
.cta p{color:var(--ink-2);max-width:52ch;margin:0 auto 32px}
.btn{display:inline-block;padding:13px 28px;border-radius:var(--r-pill);font-size:16px;
     text-decoration:none;border:1px solid transparent;background:var(--white);color:var(--ink);
     transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease)}
.btn:active{transform:scale(.985)}
/* Кнопки призыва той же породы, что на развилке: обе светлые, набраны
   акробатом, держит их тень. Пары «сплошная плюс призрачная» здесь нет —
   призрачная на цветном поле выглядела бы недоделанной. */
.cta .btn{font-family:var(--display);font-weight:300;font-size:18px;
          padding:16px 38px;
          box-shadow:0 1px 2px rgba(0,0,0,.08), 0 10px 18px -6px rgba(0,0,0,.18)}
.cta .btn:hover{box-shadow:0 2px 4px rgba(0,0,0,.10), 0 18px 28px -8px rgba(0,0,0,.22)}
.btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
footer{padding-block:44px;border-block-start:1px solid var(--line);color:var(--muted);font-size:14px}
footer .wrap{display:grid;gap:16px}
.foot-top{display:flex;gap:20px;flex-wrap:wrap;align-items:baseline}
footer .sp{margin-inline-start:auto}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--ink)}

/* уважаем системную настройку: движение выключается целиком */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;
                       animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* Keep the complete frame above the mobile text, with a soft continuation. */
@media (max-width:820px){
  .hero-frames{top:12%;transform:translateX(-50%)}
  .hero-edge{top:12%;transform:translateX(-50%)}
}
/* Reduced motion is a readable document, not an invisible scroll timeline. */
@media (prefers-reduced-motion:reduce){
  html.scroll-steps{touch-action:auto}
  .hero-scroll{height:auto;margin-block-start:0}
  .hero{position:relative;height:auto;overflow:visible;padding-block:40px}
  .hero-film,.fork-film,.snap,.cue{display:none!important}
  .hero-stage{position:relative;display:flex;flex-direction:column;gap:48px;padding:24px}
  .beat{opacity:1!important;transform:none!important;pointer-events:auto;max-width:100%!important}
  .beat h1,.beat .say{white-space:normal!important}
  .pc{opacity:1!important;transform:none!important}
  .hero-whatsapp{position:static;opacity:1!important;transform:none!important}
  .beat .rule{transform:none!important}
  #start{height:auto;margin-block-start:0;background:var(--fog)}
  .screen{position:relative;height:auto;padding-block:64px}
  .rise{opacity:1!important;transform:none!important;filter:none!important}
}