/* ═══════════════════════════════════════════════════
   Дом среди сосен — ФРМУ
   Палитра и типографика: «лесной модерн»
   ═══════════════════════════════════════════════════ */

:root{
  --cream:      #F5F2EE;
  --pale:       #EAE4DF;
  --tan:        #B89578;
  /* Осветлённый акцент — только для текста поверх ролика. Основной тан
     это средний тон: он проигрывает и светлому фону, и тёмному. Замер
     на кадре хиро при затемнении 70%: тан даёт контраст 2.74 при норме
     3.0, этот оттенок — 4.66. Догонять тем же таном пришлось бы
     затемнением под 85%, а это уже глухая заливка вместо ролика. */
  --tan-hero:   #DCC8B4;
  --bronze:     #B07A55;
  --gray:       #7A706A;
  --charcoal:   #3C3A38;
  --ink:        #1C1A18;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Bona Nova', Georgia, serif;
  --font-script:  'Great Vibes', cursive;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --gut: clamp(20px, 5vw, 90px);
  --nav-h: 76px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

/* overscroll-behavior-y:none отключает «потянуть вниз для обновления».
   Жест легко поймать случайно, листая фото, и страница перезагружается
   посреди просмотра. Резинка у краёв при этом сохраняется —
   убирается только само обновление. */
html{ scroll-behavior:auto; -webkit-text-size-adjust:100%; overscroll-behavior-y:none }

body{
  background:var(--cream);
  color:var(--charcoal);
  font-family:var(--font-body);
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Плёнка зерна поверх всего — даёт «аналоговую» глубину */
body::after{
  content:''; position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.28; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

img,video{ display:block; max-width:100%; height:auto }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
a{ color:inherit; text-decoration:none }
ul{ list-style:none }

::selection{ background:var(--bronze); color:var(--cream) }

/* ─────────── ТИПОГРАФИКА ─────────── */

.h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(34px,5vw,64px);
  line-height:1.08;
  letter-spacing:-.02em;
}

.h3{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(22px,2.2vw,32px);
  line-height:1.2;
  letter-spacing:-.01em;
}

.label{
  display:block;
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--bronze);
  margin-bottom:1.4em;
}
.label--light{ color:var(--tan) }

.script-lg{
  font-family:var(--font-script);
  font-size:clamp(34px,4.6vw,60px);
  line-height:1.3;
  color:var(--bronze);
  font-weight:400;
}
.script-lg--light{ color:var(--tan) }

/* Аббревиатура внутри рукописной строки.
   Great Vibes рисует заглавные росчерками: одна такая буква в начале
   слова читается как украшение, но четыре подряд — «ФРМУ» — сливаются
   в неразборчивую вязь. Отдаём аббревиатуру наборному шрифту.

   Кегль меньше: 26px рукописного и 26px наборного — разный видимый
   размер, у Playfair прописные крупные и в одном кегле аббревиатура
   забивала бы всю строку. При 0.6em её высота 10.9px против 12.4px
   у соседних букв — на глаз вровень.

   Вертикальный сдвиг не нужен: замер показал спуск 0.2px у обоих
   шрифтов, то есть базовая линия у них общая. Поправка, которую
   напрашивается поставить, наоборот приподнимала бы аббревиатуру
   над строкой. */
.script-abbr{
  font-family:var(--font-display);
  font-size:.6em;
  letter-spacing:.09em;
  padding-left:.08em;
}

/* ─────────── СЕКЦИИ ─────────── */

.section{ padding:clamp(90px,12vh,170px) var(--gut); position:relative }
.section--cream{ background:var(--cream) }
.section--pale{ background:var(--pale) }

.section__head{ max-width:900px; margin-bottom:clamp(48px,7vh,90px) }
.section__head--light .h2{ color:var(--cream) }

/* Волокнистый разделитель между светлыми секциями */
.section--pale::before{
  content:''; position:absolute; top:0; left:var(--gut); right:var(--gut);
  height:1px; background:linear-gradient(90deg,transparent,var(--tan) 22%,var(--tan) 78%,transparent);
  opacity:.45;
}

/* ─────────── КНОПКИ ─────────── */

.btn{
  --btn-c:var(--cream);
  position:relative; display:inline-block; overflow:hidden;
  padding:1.05em 2.6em;
  font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid currentColor; color:var(--btn-c);
  transition:color .45s var(--ease);
}
.btn span{ position:relative; z-index:2 }
.btn::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:var(--bronze);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .45s var(--ease);
}
.btn:hover{ color:var(--cream) }
.btn:hover::before{ transform:scaleY(1); transform-origin:top }

.btn--solid{ --btn-c:var(--tan) }

/* ─────────── ЦЕЛЕВЫЕ ДЕЙСТВИЯ ─────────── */

/* Действие в конце каждого блока. Вес чередуется: где-то кнопка,
   где-то подчёркнутая строка со стрелкой. Восемь одинаковых кнопок
   подряд читаются как навязчивость, а не как приглашение. */
.cta{
  margin-top:clamp(46px,7vh,80px);
  display:flex; justify-content:center;
}

/* Секции «Поэтажно» и «Расположение» держат отступы не на себе, а на
   внутреннем блоке. Действие в их конце оказывалось без полей вовсе —
   в «Поэтажно» кнопка прилипала вплотную к нижнему краю секции. */
.floors .cta,
.location .cta{ padding-left:var(--gut); padding-right:var(--gut) }
.floors .cta{ padding-bottom:clamp(90px,12vh,170px) }

/* На светлых секциях рамка кнопки цвета текста, иначе она пропадает:
   по умолчанию у .btn цвет кремовый, он рассчитан на тёмный фон. */
.section--cream .cta .btn,
.section--pale .cta .btn{ --btn-c:var(--charcoal) }

.cta-link{
  display:inline-flex; align-items:center; gap:.9em;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bronze); padding:.5em 0;
  border-bottom:1px solid rgba(184,149,120,.45);
  transition:color .35s var(--ease),border-color .35s var(--ease),gap .35s var(--ease);
}
.cta-link:hover{ color:var(--charcoal); border-color:currentColor; gap:1.3em }
.cta-link svg{ width:22px; height:11px; flex:none }

/* На тёмных секциях — светлее фона, иначе бронзовый по чёрному глухой */
.interior .cta-link,
.floors .cta-link,
.location .cta-link{ color:var(--tan) }
.interior .cta-link:hover,
.floors .cta-link:hover,
.location .cta-link:hover{ color:var(--cream) }

/* ─────────── ПРЕЛОАДЕР ─────────── */

.preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--ink);
  display:grid; place-items:center;
}
.preloader__inner{ text-align:center; padding:0 24px }
.preloader__sub{
  display:block; font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--tan); margin-bottom:1.4em;
  opacity:0; animation:pFade .9s var(--ease) .15s forwards;
}
.preloader__title{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(30px,6vw,68px); letter-spacing:-.02em; color:var(--cream);
  opacity:0; animation:pFade 1.1s var(--ease) .35s forwards;
}
.preloader__bar{
  width:min(240px,50vw); height:1px; margin:2.4em auto 0;
  background:rgba(184,149,120,.25); overflow:hidden;
}
.preloader__bar span{
  display:block; height:100%; width:100%; background:var(--tan);
  transform:scaleX(0); transform-origin:left;
  animation:pBar 1.5s var(--ease) .5s forwards;
}
@keyframes pFade{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@keyframes pBar{ to{ transform:scaleX(1) } }

.preloader.is-done{
  transform:translateY(-100%);
  transition:transform 1.05s var(--ease-out);
}

/* ─────────── КУРСОР ─────────── */

.cursor,.cursor-ring{
  position:fixed; top:0; left:0; z-index:9997; pointer-events:none;
  border-radius:50%; mix-blend-mode:difference;
  opacity:0; transition:opacity .3s;
}
.cursor{ width:6px; height:6px; background:var(--cream); margin:-3px 0 0 -3px }
.cursor-ring{
  width:38px; height:38px; margin:-19px 0 0 -19px;
  border:1px solid rgba(245,242,238,.65);
  display:grid; place-items:center;
  transition:width .35s var(--ease),height .35s var(--ease),opacity .3s,background .35s;
}
.cursor-ring__label{
  font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream); opacity:0; transition:opacity .25s; white-space:nowrap;
}
body.cursor-ready .cursor,
body.cursor-ready .cursor-ring{ opacity:1 }

.cursor-ring.is-link{ width:58px; height:58px; margin:-29px 0 0 -29px }
.cursor-ring.is-view{
  width:82px; height:82px; margin:-41px 0 0 -41px;
  background:rgba(245,242,238,.14);
}
.cursor-ring.is-view .cursor-ring__label{ opacity:1 }

/* ─────────── НАВИГАЦИЯ ─────────── */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  /* Шапка должна уходить под вырез и статус-бар, иначе контент
     скроллится над ней и панель выглядит оторванной полосой. */
  height:calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding-top:env(safe-area-inset-top, 0px);
  display:flex; align-items:center; justify-content:space-between;
  padding-left:var(--gut); padding-right:var(--gut);
  color:var(--cream);
  transition:background .5s var(--ease),color .5s var(--ease),
             box-shadow .5s var(--ease),backdrop-filter .5s;
}
.nav.is-stuck{
  background:rgba(245,242,238,.82);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);
  color:var(--charcoal);
  box-shadow:0 1px 0 rgba(184,149,120,.34);
}

.nav__brand{ display:flex; align-items:center; gap:.75em }
.nav__mark{ width:16px; height:22px; color:var(--tan); flex:none }
.nav__brand-text{
  font-family:var(--font-display); font-size:17px;
  letter-spacing:.02em; white-space:nowrap;
}

.nav__links{ display:flex; gap:clamp(18px,2.4vw,38px) }
.nav__links a{
  position:relative; font-size:13px; letter-spacing:.1em; padding:.4em 0;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .42s var(--ease);
}
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left }

.nav__right{ display:flex; align-items:center; gap:18px }

/* Кнопка звонка. Рамка в currentColor, потому что шапка меняет цвет
   при прилипании: поверх видео она светлая, на кремовом фоне — тёмная. */
.nav__call{
  display:flex; align-items:center; gap:.55em;
  font-size:12.5px; letter-spacing:.05em; white-space:nowrap;
  padding:.52em .9em;
  border:1px solid currentColor; border-radius:2px;
  opacity:.86;
  transition:opacity .3s var(--ease),background .3s var(--ease),
             border-color .3s var(--ease),color .3s var(--ease);
}
.nav__call:hover{
  opacity:1; background:var(--tan); border-color:var(--tan); color:var(--ink);
}
.nav__call-icon{ width:13px; height:13px; flex:none }

.lang{ display:flex; align-items:center; gap:6px; font-size:12px; letter-spacing:.12em }
.lang__btn{ opacity:.5; transition:opacity .3s; padding:2px }
.lang__btn.is-active,.lang__btn:hover{ opacity:1 }
.lang__sep{ opacity:.35 }

.burger{ display:none; width:26px; height:14px; position:relative }
.burger span{
  position:absolute; left:0; width:100%; height:1px; background:currentColor;
  transition:transform .4s var(--ease),opacity .3s;
}
.burger span:first-child{ top:0 }
.burger span:last-child{ bottom:0 }
.burger.is-open span:first-child{ transform:translateY(6.5px) rotate(45deg) }
.burger.is-open span:last-child{ transform:translateY(-6.5px) rotate(-45deg) }

/* ─────────── HERO ─────────── */

.hero{
  /* vh перед svh — запасной вариант для браузеров без единиц svh.
     Без него правило отбрасывается целиком. */
  position:relative; min-height:100vh; min-height:100svh;
  /* Текст прижат к низу, а не по центру. В середине кадра проходит самая
     светлая и пёстрая часть ролика — кроны на солнце, — и надпись там
     тонула. Внизу же лежит основание затемнения, на нём буквы читаются
     без обводок и подложек.
     Нижнее поле оставляет место подсказке «листайте», она абсолютная
     и в поток не входит. */
  display:flex; flex-direction:column; justify-content:flex-end;
  /* Нижнее поле ровно под подсказку «листайте»: она абсолютная, высотой
     около сотни точек вместе с чертой. Лишний запас поднимал бы блок
     обратно в светлую часть кадра. */
  padding:calc(var(--nav-h) + env(safe-area-inset-top, 0px)) var(--gut)
          clamp(104px,13vh,140px);
  color:var(--cream); overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:0 }
/* pointer-events:none обязателен. Ролик здесь — фон, а не проигрыватель,
   но браузер об этом не знает: по правой кнопке он показывает своё меню
   с «Паузой» и «Картинка в картинке» даже без атрибута controls. Одним
   случайным нажатием фон останавливался. Кликать здесь всё равно не по
   чему: содержимое героя лежит выше по слоям. */
.hero__video{
  width:100%; height:100%; object-fit:cover;
  pointer-events:none;
}
/* Затемнение смещено вниз вслед за текстом.
   Верх остаётся почти чистым — там ролик и должен работать. К низу
   плотность нарастает и под самой надписью доходит до 88%: кроны на
   солнце дают яркие пятна, и без такой подложки светлые буквы на них
   пропадали. Переход растянут через несколько точек, иначе на ровном
   небе видна полоса стыка. */
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(28,26,24,.48) 0%,
    rgba(28,26,24,.14) 16%,
    rgba(28,26,24,.18) 32%,
    rgba(28,26,24,.68) 47%,
    rgba(28,26,24,.80) 62%,
    rgba(28,26,24,.88) 82%,
    rgba(28,26,24,.90) 100%);
}

.hero__content{ position:relative; z-index:2; max-width:1000px }

.hero__eyebrow{
  display:block; font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--tan-hero); margin-bottom:1.15em;
}

.hero__title{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(46px,9.5vw,124px);
  line-height:.98; letter-spacing:-.025em;
  margin-bottom:.18em;
}

.hero__script{
  font-family:var(--font-script);
  font-size:clamp(26px,3.4vw,46px);
  color:var(--tan-hero); line-height:1.2; margin-bottom:.75em;
}

.hero__facts{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(14px,2vw,30px);
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:clamp(24px,3.4vh,38px);
}
.hero__facts li{ display:flex; align-items:center; gap:clamp(14px,2vw,30px) }
.hero__facts li:not(:last-child)::after{
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--tan); opacity:.75;
}

.hero__cta{ --btn-c:var(--cream) }

.scroll-hint{
  position:absolute; left:50%; bottom:26px; z-index:3;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.scroll-hint__label{
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--tan);
}
.scroll-hint__line{
  width:1px; height:54px; background:rgba(184,149,120,.32);
  position:relative; overflow:hidden;
}
.scroll-hint__line::after{
  content:''; position:absolute; inset:0; background:var(--tan);
  animation:hintRun 2.1s var(--ease) infinite;
}
@keyframes hintRun{
  0%{ transform:translateY(-100%) }
  55%,100%{ transform:translateY(100%) }
}

/* ─────────── О ДОМЕ ─────────── */

.about{ overflow:hidden }

.about__numeral{
  position:absolute; left:calc(var(--gut) - .06em); top:clamp(40px,7vh,110px);
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(200px,34vw,460px); line-height:.8;
  color:var(--tan); opacity:.15;
  pointer-events:none; user-select:none; z-index:0;
}

.about__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(40px,6vw,100px);
  align-items:start;
}

.about__text p{ color:var(--gray); margin-top:1.5em; max-width:60ch }
.about__text .h2{ margin-bottom:.5em; color:var(--charcoal) }

.about__cards{ display:grid; gap:1px; background:rgba(184,149,120,.4) }

.fact-card{
  background:var(--cream);
  padding:clamp(22px,2.4vw,34px);
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  column-gap:18px; row-gap:6px; align-items:center;
  transition:background .5s var(--ease);
}
.fact-card:hover{ background:var(--pale) }
.fact-card__icon{ grid-row:1/3; width:34px; height:34px; color:var(--bronze) }
.fact-card__label{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gray);
}
.fact-card__value{
  font-family:var(--font-display); font-size:clamp(24px,2.4vw,32px);
  line-height:1; color:var(--charcoal);
}
.fact-card__value em{
  font-family:var(--font-body); font-style:normal;
  font-size:14px; color:var(--gray); letter-spacing:.02em;
}

.pull-quote{
  position:relative; z-index:1;
  margin:clamp(70px,10vh,130px) auto 0;
  max-width:840px; text-align:center;
}
.ornament{ display:block; color:var(--tan); margin-bottom:1.1em }
.ornament svg{ width:130px; height:26px; margin:0 auto }

/* ─────────── ИНТЕРЬЕР ─────────── */

.interior{
  background:var(--ink); color:var(--cream);
  padding:clamp(90px,12vh,170px) var(--gut);
  display:grid; gap:clamp(80px,11vh,150px);
}

/* Каждое «движение» — текст и два снимка. Двенадцать колонок дают
   ту же асимметрию, что была у подписей поверх ролика: текст жмётся
   к краю, снимки уходят в противоположную сторону.

   Все исходники широкие, 16:9. Поэтому вертикальных рамок здесь нет:
   кадр 16:9 в портретной рамке теряет больше половины ширины, а остаток
   растягивается вдвое — видно и обрезку, и мыло. Асимметрию даёт размер,
   а не обрезка: главный снимок занимает обе строки и тянется по высоте
   колонки с текстом, обрезаясь мягко и только по краям. */
.interior__move{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(20px,2.4vw,40px);
}

.interior__text{ grid-column:1 / 6; grid-row:1; align-self:end }
.interior__text .h2{ color:var(--cream) }

/* Общий кегль .h2 задан от ширины экрана (5vw) — он рассчитан на
   заголовок во всю ширину секции. Здесь заголовок живёт в колонке
   шириной около трети экрана, и на промежуточных размерах окна длинные
   русские слова — «Продуманный», «пространство» — в неё не помещались
   и наезжали на соседний снимок. Переносить их нельзя: перенос посреди
   слова в заголовке выглядит как ошибка. Поэтому кегль считаем от
   колонки, а не от экрана. */
.interior__text .h2{ font-size:clamp(28px,3.6vw,58px) }
.interior__text p{
  margin-top:1.1em; color:rgba(245,242,238,.72);
  font-size:clamp(15px,1.05vw,17px);
}

/* Колонка: снимок забирает всю свободную высоту, подпись — по себе */
.interior__shot{ display:flex; flex-direction:column; min-height:0 }
.interior__shot img{ display:block; width:100%; object-fit:cover }
.interior__shot figcaption{
  margin-top:.9em;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tan);
}

/* Рамка задана явно, а не растяжением по высоте соседней колонки.
   При растяжении высота зависела от того, во сколько строк лёг
   заголовок: на узком экране колонка вырастала, кадр становился почти
   квадратным и терял до 37% ширины. Теперь обрезка одинакова на любом
   экране — 16:10 против исходных 16:9, это 10%. */
.interior__shot--lead{ grid-column:6 / 13; grid-row:1 / 3; align-self:center }
.interior__shot--lead img{ flex:none; aspect-ratio:16/10 }
.interior__shot--inset{ grid-column:1 / 6; grid-row:2 }
.interior__shot--inset img{ flex:none; aspect-ratio:3/2 }

/* Второе движение зеркалит первое */
.interior__move--mirror .interior__text{ grid-column:8 / 13; text-align:right }
.interior__move--mirror .interior__shot--lead{ grid-column:1 / 8 }
.interior__move--mirror .interior__shot--inset{ grid-column:8 / 13 }
.interior__move--mirror .interior__shot figcaption{ text-align:right }

/* ─────────── ХАРАКТЕРИСТИКИ ─────────── */

.spec-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(40px,6vw,100px);
}
.spec{
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding:1.25em 0;
  border-bottom:1px solid rgba(184,149,120,.42);
}
.spec__k{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gray); flex:none;
}
.spec__v{
  font-family:var(--font-display); font-size:clamp(17px,1.5vw,21px);
  color:var(--charcoal); text-align:right;
}
.spec__v b{ font-weight:400; font-size:1.32em; color:var(--bronze) }

/* ─────────── ПОЭТАЖНО ─────────── */

.floors{ background:var(--charcoal); color:var(--cream) }
.floors__pin{ height:100vh; height:100svh; overflow:hidden; display:flex; align-items:center }
.floors__track{
  display:flex; align-items:stretch; gap:clamp(24px,3vw,56px);
  padding:0 var(--gut); will-change:transform;
}

.floors__intro{
  flex:none; width:min(400px,74vw);
  display:flex; flex-direction:column; justify-content:center;
}
.floors__intro .h2{ color:var(--cream) }
.floors__hint{
  margin-top:2em; font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--tan);
}

.floor-card{
  flex:none; width:min(430px,80vw);
  display:flex; flex-direction:column;
  padding:clamp(30px,3vw,44px);
  border:1px solid rgba(184,149,120,.3);
  background:rgba(245,242,238,.03);
  transition:border-color .5s var(--ease),background .5s var(--ease);
}
.floor-card:hover{
  border-color:rgba(184,149,120,.62);
  background:rgba(245,242,238,.06);
}
.floor-card__num{
  font-family:var(--font-display); font-size:13px;
  letter-spacing:.2em; color:var(--tan); margin-bottom:2.2em;
}
.floor-card .h3{ color:var(--cream); margin-bottom:1.2em }
.floor-card__list{ display:grid; gap:.55em }
.floor-card__list li{
  position:relative; padding-left:1.5em;
  color:rgba(245,242,238,.76); font-size:15px;
}
.floor-card__list li::before{
  content:''; position:absolute; left:0; top:.72em;
  width:9px; height:1px; background:var(--tan);
}
.floor-card__note{
  margin-top:auto; padding-top:2em;
  font-size:14px; font-style:italic; color:var(--tan); line-height:1.6;
}

/* ─────────── ГАЛЕРЕЯ ─────────── */

.filters{
  display:flex; flex-wrap:wrap; gap:clamp(8px,1.4vw,16px);
  margin-bottom:clamp(30px,4vh,48px);
}
.filters__btn{
  padding:.62em 1.5em;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gray); border:1px solid rgba(184,149,120,.42);
  border-radius:999px;
  transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.filters__btn:hover{ color:var(--charcoal); border-color:var(--bronze) }
.filters__btn.is-active{
  color:var(--cream); background:var(--bronze); border-color:var(--bronze);
}

.grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(150px,15vw,250px);
  grid-auto-flow:dense;
  gap:clamp(10px,1.3vw,20px);
}

.tile{
  grid-column:span 4;
  position:relative; overflow:hidden;
  background:rgba(184,149,120,.14);
  cursor:pointer;
}
/* Равная высота рядов + разная ширина: кадры кадрируются, дыр не остаётся.
   Крупные помечены флагом в массиве снимков, а не позицией: nth-child
   считает и скрытые фильтром плитки, поэтому «каждый седьмой» при
   переключении категории попадал на произвольный кадр. */
.tile--big{ grid-column:span 8; grid-row:span 2 }
.tile:nth-child(7n+6),
.tile:nth-child(7n+7){ grid-column:span 6 }

.tile img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.05s var(--ease-out), filter .7s var(--ease);
}
.tile:hover img{ transform:scale(1.055); filter:brightness(.82) }

.tile__cat{
  position:absolute; left:16px; bottom:14px; z-index:2;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cream);
  opacity:0; transform:translateY(8px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.tile:hover .tile__cat{ opacity:1; transform:none }

.tile::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(28,26,24,.6) 100%);
  opacity:0; transition:opacity .45s var(--ease);
}
.tile:hover::after{ opacity:1 }

.tile.is-hidden{ display:none }

.more{
  display:block; margin:clamp(26px,4vh,44px) auto 0;
  padding:1.05em 2.6em;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--charcoal);
  border:1px solid var(--tan); border-radius:999px;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.more:hover{ background:var(--bronze); border-color:var(--bronze); color:var(--cream) }
.more[hidden]{ display:none }

/* ─────────── РАСПОЛОЖЕНИЕ ─────────── */

.location{
  position:relative; overflow:hidden;
  padding:clamp(90px,14vh,170px) 0;
  background:var(--ink); color:var(--cream);
}
.location__bg{
  position:absolute; inset:-12% 0;
  /* 900px хватает: фон идёт под прозрачностью .24 и затемнением.
     Полноразмерный вариант весил 750 КБ против 187. */
  background:url('../images/loc-02-t.webp') center/cover no-repeat;
  opacity:.24; will-change:transform;
}
.location::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(28,26,24,.72),rgba(28,26,24,.9));
}
.location__inner{ position:relative; z-index:2; padding:0 var(--gut) }
.location__lead{
  max-width:70ch; color:rgba(245,242,238,.8);
  margin-bottom:clamp(44px,6vh,72px);
}

.location__rail{
  display:flex; gap:clamp(20px,3vw,52px);
  overflow-x:auto;
  /* Обязательно явно. По спецификации, если одна ось не visible, вторая
     из visible вычисляется в auto — и лента становилась контейнером
     прокрутки ещё и по вертикали. Прокручивать там нечего, но жест она
     забирала себе: палец, попавший на эту полосу, страницу не двигал,
     и пролистывание глохло. Отсюда «скролл местами прерывается».
     touch-action страхует сверху: по вертикали лента жест не берёт. */
  overflow-y:hidden;
  touch-action:pan-x pinch-zoom;
  padding-bottom:20px;
  scrollbar-width:thin;
  scrollbar-color:rgba(184,149,120,.5) transparent;
  -webkit-overflow-scrolling:touch;
}
.location__rail::-webkit-scrollbar{ height:2px }
.location__rail::-webkit-scrollbar-track{ background:rgba(245,242,238,.1) }
.location__rail::-webkit-scrollbar-thumb{ background:var(--tan) }

.poi{
  flex:none; width:min(230px,64vw);
  padding-top:1.5em; border-top:1px solid rgba(184,149,120,.46);
}
.poi__v{
  display:block; font-family:var(--font-display);
  font-size:clamp(28px,3vw,42px); line-height:1; color:var(--tan);
  margin-bottom:.42em;
}
.poi__v em{ font-style:normal; font-size:.45em; letter-spacing:.04em }
.poi__k{
  display:block; font-size:14px; line-height:1.55;
  color:rgba(245,242,238,.66);
}

/* ─────────── КОНТАКТ ─────────── */

.contact{
  background:var(--charcoal); color:var(--cream);
  padding:clamp(90px,14vh,170px) var(--gut);
  position:relative; overflow:hidden;
}
.contact::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(1100px,86vw); height:1px;
  background:linear-gradient(90deg,transparent,var(--tan),transparent);
  opacity:.5;
}
.contact__inner{ max-width:1100px; margin:0 auto; text-align:center }

.price{ margin:clamp(30px,5vh,50px) 0 clamp(44px,6vh,70px) }
.price__value{
  display:block; font-family:var(--font-display); font-weight:400;
  font-size:clamp(34px,6vw,78px); line-height:1;
  letter-spacing:-.02em; color:var(--cream);
}
.price__value em{ font-style:normal; color:var(--tan) }
.price__note{
  display:block; margin-top:1.2em;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gray);
}

/* ─────────── ФОРМА ЗАЯВКИ ─────────── */

.lead{
  max-width:640px; margin:clamp(40px,6vh,64px) auto 0;
  text-align:left;
}
.lead__row{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,22px);
}

.field{ display:block; margin-bottom:clamp(14px,2vw,22px) }
.field__label{
  display:block; margin-bottom:.7em;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tan);
}
.field__input{
  width:100%; padding:.9em 1.1em;
  font-family:var(--font-body); font-size:16px;   /* 16px — иначе iOS зумит при фокусе */
  color:var(--cream); background:rgba(245,242,238,.05);
  border:1px solid rgba(184,149,120,.36); border-radius:0;
  transition:border-color .35s var(--ease), background .35s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.field__input:focus{
  outline:none; border-color:var(--tan); background:rgba(245,242,238,.09);
}
.field__input.is-bad{ border-color:#C4614F }

/* Приманка для ботов: убрана из потока, но не display:none —
   часть автоматов такие поля игнорирует. */
.lead__trap{
  position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden; opacity:0;
}

.check{
  display:flex; align-items:flex-start; gap:.85em;
  margin-bottom:.9em; cursor:pointer;
  font-size:14px; line-height:1.55; color:rgba(245,242,238,.72);
}
.check__box{ position:absolute; opacity:0; width:0; height:0 }
.check__mark{
  flex:none; width:20px; height:20px; margin-top:.12em;
  border:1px solid rgba(184,149,120,.5);
  position:relative;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.check__mark::after{
  content:''; position:absolute; left:6px; top:2px;
  width:5px; height:10px;
  border:solid var(--ink); border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0); transform-origin:center;
  transition:transform .25s var(--ease);
}
.check__box:checked + .check__mark{ background:var(--tan); border-color:var(--tan) }
.check__box:checked + .check__mark::after{ transform:rotate(45deg) scale(1) }
.check__box:focus-visible + .check__mark{ outline:2px solid var(--tan); outline-offset:3px }
.check.is-bad .check__mark{ border-color:#C4614F }

.check__text a{
  color:var(--tan); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
}
.check__text a:hover{ color:var(--cream) }

.lead__submit{ width:100%; margin-top:clamp(18px,3vh,28px) }

.lead__status{
  margin-top:1.1em; min-height:1.4em;
  font-size:14px; text-align:center; color:var(--tan);
}
.lead__status.is-bad{ color:#D98A78 }
.lead__status.is-ok{ color:#9DBF8E }

/* Три равные кнопки. Сетка, а не flex: у flex-wrap ширина зависит от
   длины надписи, и «Позвонить» выходило вдвое уже «Записаться на
   экскурсию». Колонки одинаковой доли дают одинаковый размер вне
   зависимости от текста — в том числе после переключения языка. */
.contact__actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.8vw,20px);
  margin-top:clamp(36px,5vh,56px);
  max-width:900px; margin-inline:auto;
}
.contact__actions .btn{
  /* Надписи разной длины: у «Позвонить» одна строка, у «Записаться на
     экскурсию» на узком экране две. Выравниваем по центру, чтобы
     кнопки оставались одной высоты. */
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding-inline:clamp(14px,1.6vw,26px);
}

/* ─────────── ФУТЕР ─────────── */

.footer{
  background:var(--ink); color:rgba(245,242,238,.56);
  padding:clamp(34px,5vh,52px) var(--gut);
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:18px;
  font-size:12px; letter-spacing:.1em;
}
.footer__brand{
  font-family:var(--font-display); font-size:16px;
  letter-spacing:.02em; color:var(--cream);
}
.lang--footer{ color:var(--cream) }

.footer__docs{ display:flex; gap:clamp(12px,2vw,24px) }
.footer__docs a{
  color:rgba(245,242,238,.56); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.footer__docs a:hover{ color:var(--tan); border-color:rgba(184,149,120,.5) }

/* Подпись автора — сдержанно, не спорит с брендом объекта */
.footer__by{
  font-size:11px; letter-spacing:.12em;
  color:rgba(245,242,238,.32);
  transition:color .35s var(--ease);
}
.footer__by:hover{ color:var(--tan) }

/* ─────────── ЛАЙТБОКС ─────────── */

/* ─────────── ЗАЯВКА: МОДАЛЬНОЕ ОКНО ─────────── */

.modal{
  position:fixed; inset:0; z-index:9600;
  display:grid; place-items:center;
  padding:clamp(16px,4vh,40px) var(--gut);
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease),visibility .4s;
}
.modal.is-open{ opacity:1; visibility:visible }

.modal__backdrop{
  position:absolute; inset:0;
  background:rgba(20,18,17,.72);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
}

.modal__panel{
  position:relative; z-index:1;
  width:min(560px,100%);
  /* Окно может не поместиться на короткий экран в альбомной ориентации,
     поэтому прокручивается внутри себя. contain не даёт странице
     под окном уехать, когда список полей домотан до края. */
  max-height:100%; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:var(--cream); color:var(--charcoal);
  padding:clamp(28px,4vw,48px);
  box-shadow:0 30px 90px rgba(20,18,17,.45);
  transform:translateY(14px) scale(.985);
  transition:transform .45s var(--ease-out);
}
.modal.is-open .modal__panel{ transform:none }

.modal__close{
  position:absolute; top:14px; right:14px;
  width:38px; height:38px; display:grid; place-items:center;
  color:var(--gray); transition:color .3s;
}
.modal__close:hover{ color:var(--charcoal) }
.modal__close svg{ width:17px; height:17px }

.modal__title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(24px,3vw,33px); line-height:1.18;
  margin-top:.35em;
}
.modal__note{
  margin-top:.6em; color:var(--gray);
  font-size:clamp(14px,1vw,15px);
}
/* Форма изначально стояла на тёмном фоне секции контактов: светлый текст
   в полупрозрачных полях. На кремовой панели окна её пришлось перекрасить,
   иначе поля и подписи к галочкам просто не видны. */
.modal .lead{ margin:clamp(22px,3vh,32px) 0 0; max-width:none }

.modal .field__label{ color:var(--bronze) }
.modal .field__input{
  color:var(--charcoal); background:#fff;
  border-color:rgba(184,149,120,.55);
}
.modal .field__input:focus{ border-color:var(--bronze); background:#fff }
.modal .field__input::placeholder{ color:rgba(122,112,106,.6) }

.modal .check{ color:var(--gray) }
.modal .check__mark{ border-color:rgba(184,149,120,.7); background:#fff }
.modal .check__box:checked + .check__mark{ background:var(--bronze); border-color:var(--bronze) }
.modal .check__mark::after{ border-color:var(--cream) }
.modal .check__text a{ color:var(--bronze) }

.modal .lead__submit{ width:100% }
.modal .lead__status{ color:var(--gray) }

/* Запасная ссылка на файл: появляется после отправки, если браузер
   придержал скачивание, запущенное из кода */
.lead__file{
  display:inline-block; margin-top:.7em;
  font-size:13px; color:var(--bronze);
  text-decoration:underline; text-underline-offset:3px;
}
.lead__file:hover{ color:var(--charcoal) }

.lightbox{
  position:fixed; inset:0; z-index:9500;
  background:rgba(20,18,17,.97);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease),visibility .5s;
}
.lightbox.is-open{ opacity:1; visibility:visible }

.lightbox .swiper{ width:100%; height:100% }
.lightbox .swiper-slide{
  display:grid; place-items:center; padding:clamp(50px,9vh,90px) clamp(50px,8vw,110px);
}
.lightbox .swiper-slide img{
  max-width:100%; max-height:100%; object-fit:contain;
  box-shadow:0 40px 90px rgba(0,0,0,.55);
}

.lightbox__close,.lightbox__nav{
  position:absolute; z-index:3; color:var(--cream);
  width:52px; height:52px; display:grid; place-items:center;
  border:1px solid rgba(245,242,238,.22); border-radius:50%;
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.lightbox__close:hover,.lightbox__nav:hover{
  background:rgba(245,242,238,.1); border-color:var(--tan);
}
.lightbox__close{ top:26px; right:26px }
.lightbox__close svg,.lightbox__nav svg{ width:19px; height:19px }
.lightbox__nav{ top:50%; transform:translateY(-50%) }
.lightbox__nav--prev{ left:22px }
.lightbox__nav--next{ right:22px }

.lightbox__counter{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%); z-index:3;
  font-size:12px; letter-spacing:.2em; color:var(--tan);
}

/* ─────────── АНИМАЦИЯ ПОЯВЛЕНИЯ ─────────── */

[data-reveal]{ opacity:0; transform:translateY(30px) }

/* Маска на слово, а не на строку: слова переносятся естественно.
   padding/margin дают место выносным элементам (р, у, д) при overflow:hidden. */
.split-line{
  display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-bottom:.14em; margin-bottom:-.14em;
}
.split-line__inner{ display:inline-block; will-change:transform }

/* ═══════════ АДАПТИВ ═══════════ */

@media (max-width:1080px){
  .about__grid{ grid-template-columns:1fr }
  .about__numeral{ font-size:clamp(170px,42vw,300px); opacity:.1 }
  .spec-grid{ grid-template-columns:1fr }
  .grid{ grid-auto-rows:clamp(140px,19vw,210px) }
  .tile{ grid-column:span 6 }
  .tile--big{ grid-column:span 12; grid-row:span 2 }
  .tile:nth-child(7n+6),.tile:nth-child(7n+7){ grid-column:span 6 }
}

@media (max-width:820px){
  :root{ --nav-h:64px }

  /* Шапка на телефоне: плотная заливка вместо полупрозрачной.
     backdrop-filter на iOS не поспевает за прокруткой — размытый слой
     отстаёт и полоса отрывается видимым швом. */
  .nav.is-stuck{
    background:var(--cream);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    box-shadow:0 1px 0 rgba(184,149,120,.28);
  }

  /* И не висит поверх контента постоянно: уезжает при прокрутке вниз,
     возвращается при движении вверх. */
  .nav{ transition:transform .32s var(--ease),background .4s var(--ease),color .4s var(--ease) }
  .nav.is-hidden{ transform:translateY(-100%) }

  /* При открытом меню шапка обязана быть без transform: трансформированный
     предок становится системой координат для вложенного position:fixed,
     и меню отсчитывает inset от полоски шапки — получая нулевую высоту.
     transition тоже снимаем, иначе те же 320ms анимации ломают отсчёт. */
  .nav.is-menu-open{ transform:none !important; transition:none }

  .nav__links{
    position:fixed; z-index:880;
    inset:calc(var(--nav-h) + env(safe-area-inset-top, 0px)) 0 0;
    flex-direction:column; justify-content:center; align-items:center;
    gap:clamp(20px,4vh,36px);
    background:var(--ink); color:var(--cream);
    opacity:0; visibility:hidden; transform:translateY(-12px);
    transition:opacity .45s var(--ease),visibility .45s,transform .45s var(--ease);
  }
  .nav__links.is-open{ opacity:1; visibility:visible; transform:none }
  .nav__links a{ font-size:20px; font-family:var(--font-display); letter-spacing:.02em }
  .burger{ display:block }

  /* 14px, а не 15: на экране в 375 точек шапка со значком звонка
     иначе не укладывается в поля и правый край выходит за них. */
  .nav__brand-text{ font-size:14px }

  /* Рядом с логотипом, переключателем языка и бургером полный номер
     не помещается — оставляем значок. Он остаётся кнопкой в 33px,
     то есть по нему можно попасть пальцем. */
  .nav__right{ gap:11px }
  .nav__call{ padding:.5em; border-color:transparent; opacity:1 }
  .nav__call:hover{ background:none; color:inherit }
  .nav__call-text{ display:none }
  .nav__call-icon{ width:17px; height:17px }

  .hero__facts{ font-size:11px; letter-spacing:.12em }

  /* На телефоне заголовок в две строки, и блок дотягивается до подсказки
     «листайте» — кнопка и подсказка налезали друг на друга. Даём блоку
     запас снизу, а подсказку приподнимаем над краем. */
  .hero{ padding-bottom:clamp(140px,20vh,190px) }
  .scroll-hint{ bottom:40px }
  .scroll-hint__line{ height:38px }

  /* Двенадцать колонок на телефоне рассыпаются: текст в четыре колонки
     становится нечитаемым столбиком. Складываем всё в одну, строки
     назначаем автоматически — иначе главный снимок так и остался бы
     растянутым на две. */
  .interior{ gap:clamp(56px,8vh,80px) }
  .interior__move{ grid-template-columns:1fr; gap:clamp(28px,5vh,44px) }
  .interior__text,
  .interior__shot--lead,
  .interior__shot--inset,
  .interior__move--mirror .interior__text,
  .interior__move--mirror .interior__shot--lead,
  .interior__move--mirror .interior__shot--inset{ grid-column:1 / -1; grid-row:auto }

  /* Зеркальное выравнивание вправо имеет смысл только рядом со снимком.
     В столбик оно читается как случайность. */
  .interior__move--mirror .interior__text,
  .interior__move--mirror .interior__shot figcaption{ text-align:left }

  /* На узком экране кадр чуть выше, чем на десктопе: 16:10 в одну
     колонку выглядит полоской. 3:2 теряет 16% ширины — приемлемо. */
  .interior__shot--lead img{ aspect-ratio:3/2 }

  /* Уменьшенный кегль нужен был только из-за узкой колонки на десктопе.
     Здесь заголовок идёт во всю ширину — возвращаем общий размер,
     иначе он мельче всех остальных заголовков на странице. */
  .interior__text .h2{ font-size:clamp(34px,5vw,64px) }

  /* Вертикальные отступы на телефоне заметно меньше десктопных.
     Отступ снизу секции и отступ сверху следующей складываются: при
     прежних 12vh под кнопкой набегало под 200 точек пустоты — четверть
     экрана, на которой не видно ничего. На широком мониторе такой воздух
     работает на впечатление, на телефоне читается как недоделка. */
  .section,
  .interior{ padding:clamp(56px,8vh,90px) var(--gut) }
  .location{ padding:clamp(56px,8vh,90px) 0 }
  .contact{ padding:clamp(56px,8vh,90px) var(--gut) }

  /* И сама кнопка ближе к блоку, за которым стоит */
  .cta{ margin-top:clamp(28px,4.4vh,46px) }

  /* В «Интерьере» секция — сетка со своим зазором между движениями.
     Он и отступ кнопки складывались: над ней набегало вдвое больше,
     чем в остальных блоках. Зазора сетки достаточно. */
  .interior .cta{ margin-top:0 }
  .floors .cta{ padding-bottom:clamp(56px,8vh,90px) }

  /* Снизу отступ меньше: за блоком идёт кнопка со своим собственным.
     При симметричном они складывались и давали 93 точки против 36
     в остальных блоках. */
  .floors__pin{ height:auto; padding:clamp(52px,7vh,80px) 0 clamp(16px,2.4vh,26px) }
  .floors__track{
    flex-direction:column; transform:none !important;
    gap:24px; width:100%;
  }
  .floors__intro,.floor-card{ width:100% }
  .floors__hint{ display:none }

  /* Две колонки вместо одной: 25 кадров в столбик — слишком длинная
     прокрутка. Каждый седьмой оставляем во всю ширину ради ритма. */
  .grid{
    grid-template-columns:repeat(2,1fr); gap:8px;
    grid-auto-rows:clamp(96px,26vw,140px);
  }
  .tile,
  .tile:nth-child(7n+6),
  .tile:nth-child(7n+7){ grid-column:span 1; grid-row:span 1 }
  .tile--big{ grid-column:span 2; grid-row:span 2 }

  .tile__cat{ font-size:9px; left:10px; bottom:8px }

  /* Три кнопки в ряд на телефоне не помещаются: «Записаться на
     экскурсию» ломается на три строки и ряд разъезжается по высоте.
     Ставим в столбик — ширина у всех и так одна. */
  .lead__row{ grid-template-columns:1fr }
  .contact__actions{ grid-template-columns:1fr }
  .btn{ padding:1.05em 1.6em }

  .lightbox__nav{ width:44px; height:44px }
  .lightbox__nav--prev{ left:10px }
  .lightbox__nav--next{ right:10px }
  .lightbox .swiper-slide{ padding:70px 16px }

  .footer{ justify-content:center; text-align:center }
}

@media (hover:none),(pointer:coarse){
  /* Полноэкранный слой смешивания заставляет iOS перерисовывать всю
     страницу на каждом кадре прокрутки — вместе со sticky-пином это
     и даёт рывки. На телефоне зерно того не стоит. */
  body::after{ display:none }

  .cursor,.cursor-ring{ display:none }
  .tile__cat{ opacity:1; transform:none }
  .tile::after{ opacity:1 }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  /* Всё, что в обычном режиме показывает скрипт, при отключённых
     анимациях должно быть видно сразу — иначе заголовки останутся
     прозрачными навсегда. */
  [data-reveal]{ opacity:1; transform:none }
  .split-line__inner{ opacity:1; transform:none }
  .scroll-hint__line::after{ display:none }
}