/* ==========================================================================
   GRANOV.PROD — design prototype R2
   Направление «Прокат»: сайт ведёт себя как фильм, а не как брошюра.
   ========================================================================== */

@font-face {
  font-family: Unbounded;
  /* woff2 с сабсетом по кириллице и латинице: 92 КБ вместо 760 КБ в ttf.
     Сборка: python3 tools/build_font.py (см. ТЗ). */
  src: url('../assets/fonts/unbounded-cyr.woff2') format('woff2');
  font-weight: 200 900;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Палитра: не чистый чёрный и не чистый белый — оттуда берётся глубина */
  --black:   #0A0A0B;
  --film:    #121214;
  --film-2:  #18181B;
  --paper:   #F2F0ED;
  --grey:    #8C8A87;
  --grey-dim:#5A5856;
  --rule:    rgba(242, 240, 237, .12);
  --rule-soft: rgba(242, 240, 237, .07);
  --signal:  #FF2A1C;

  /* Ритм */
  --gutter: clamp(20px, 4.2vw, 84px);
  --section: clamp(88px, 11vw, 190px);
  --maxw: 1680px;

  /* Движение: одна кривая на весь сайт */
  --ease: cubic-bezier(.16, 1, .3, 1);

  font-family: Onest, "Helvetica Neue", Arial, sans-serif;
  background: var(--black);
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
/* picture — только контейнер для source. Схлопываем его, чтобы вся
   существующая раскладка продолжала адресовать саму картинку. */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ol, ul { list-style: none; padding: 0; }
::selection { background: var(--signal); color: var(--paper); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }

.display { font-family: Unbounded, Onest, sans-serif; }

/* --- Зерно плёнки: 2% шума снимает «цифровую плоскость» ------------------- */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none;
  opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(6) infinite;
}
@keyframes grain {
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,1%)}
}

/* --- Ракорд: чёрный кадр перед первым показом ---------------------------- */
.leader {
  position: fixed; inset: 0; z-index: 95; background: var(--black);
  pointer-events: none; opacity: 1;
  transition: opacity .7s var(--ease);
}
body.is-ready .leader { opacity: 0; }

/* ==========================================================================
   ШАПКА
   ========================================================================== */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; gap: clamp(20px, 4vw, 64px);
  padding: 22px var(--gutter);
  transition: background-color .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.topbar.is-stuck {
  background: rgba(10, 10, 11, .78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--rule-soft);
  padding-block: 14px;
}
.mark { width: clamp(132px, 11vw, 168px); flex: 0 0 auto; }
.mark img { width: 100%; height: auto; }

.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); margin-left: auto; }
.nav a {
  font-size: 14px; letter-spacing: .01em; color: var(--paper);
  padding-block: 6px; position: relative;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-lang { color: var(--grey) !important; }

.nav-cta {
  flex: 0 0 auto; font-size: 14px; padding: 12px 22px;
  border: 1px solid var(--rule); border-radius: 100px;
  transition: border-color .45s var(--ease), background-color .45s var(--ease), color .45s var(--ease);
}
.nav-cta:hover { background: var(--paper); color: var(--black); border-color: var(--paper); }

/* ==========================================================================
   01 · ОТКРЫВАЮЩИЙ КАДР
   ========================================================================== */
.opening {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--gutter) 108px;
  isolation: isolate; overflow: hidden;
}
.opening-media { position: absolute; inset: 0; z-index: -1; }
.opening-poster, .opening-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  /* Прототип: плашка героя не отгрейжена, поэтому поднимаем её здесь.
     В продакшне грейд запекается в сам файл, а фильтр убирается. */
  filter: brightness(1.42) saturate(1.06) contrast(.96);
}
.opening-video { opacity: 0; transition: opacity 1.1s var(--ease); }
.opening-video.is-live { opacity: 1; }
/* Виньетка вместо плоской заливки: кадр остаётся читаемым, текст — контрастным */
.vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(10,10,11,.94) 0%, rgba(10,10,11,.84) 20%, rgba(10,10,11,.52) 40%, rgba(10,10,11,.14) 66%, rgba(10,10,11,.03) 84%, rgba(10,10,11,.45) 100%),
    linear-gradient(to right, rgba(10,10,11,.58) 0%, rgba(10,10,11,.16) 46%, rgba(10,10,11,0) 72%),
    radial-gradient(ellipse 72% 58% at 20% 82%,
      rgba(10,10,11,.8) 0%, rgba(10,10,11,.52) 34%, rgba(10,10,11,.2) 58%, rgba(10,10,11,0) 80%);
}

.opening-copy { position: relative; max-width: min(1240px, 100%); text-shadow: 0 2px 34px rgba(10,10,11,.55); }
/* Первый экран виден всегда: его появление — чистая CSS-анимация.
   Наблюдателю тут делать нечего, он на первом кадре ошибается с видимостью,
   и тогда герой остаётся пустым. Ниже сгиба — по-прежнему observer. */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }

.eyebrow {
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(242, 240, 237, .74); margin-bottom: 26px;
}
.opening h1, .contact-title {
  font-family: Unbounded, Onest, sans-serif;
  font-weight: 500; letter-spacing: -.045em; line-height: .98;
  font-size: clamp(30px, 4.6vw, 86px);
}
.line { display: block; }
.line > span { display: block; }
@media (min-width: 761px) {
  .opening h1 .line > span { white-space: nowrap; }
}

.opening-actions { display: flex; align-items: center; gap: 28px; margin-top: 38px; flex-wrap: wrap; }

/* Главный CTA — не красный прямоугольник, а строка проката */
.reel {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 15px 28px 15px 22px;
  border: 1px solid var(--rule); border-radius: 100px;
  background: rgba(242,240,237,.05);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background-color .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease);
}
.reel-tri {
  width: 0; height: 0; flex: 0 0 auto;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-left: 10px solid var(--signal);
  transition: border-left-color .5s var(--ease);
}
.reel-label { font-size: 16px; }
.reel-time { font-size: 13px; color: var(--grey); font-variant-numeric: tabular-nums; transition: color .5s var(--ease); }
.reel:hover { background: var(--paper); color: var(--black); border-color: var(--paper); }
.reel:hover .reel-tri { border-left-color: var(--black); }
.reel:hover .reel-time { color: var(--grey-dim); }

.ghost { font-size: 16px; color: var(--grey); border-bottom: 1px solid var(--rule); padding-bottom: 3px; transition: color .4s var(--ease), border-color .4s var(--ease); }
.ghost:hover { color: var(--paper); border-color: var(--paper); }

/* Нижняя планка — как инфо-строка в плеере */
.opening-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 24px;
  padding: 16px var(--gutter);
  border-top: 1px solid var(--rule-soft);
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--grey);
}
.bar-scroll { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; }
.bar-scroll i { font-style: normal; color: var(--signal); animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 0%, 70%, 100% { transform: translateY(0); } 85% { transform: translateY(4px); } }

/* ==========================================================================
   02 · КЛИЕНТЫ
   ========================================================================== */
.credits { padding: clamp(56px, 7vw, 96px) 0; border-bottom: 1px solid var(--rule-soft); }
.credits-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  padding: 0 var(--gutter) clamp(34px, 4vw, 54px);
}
.credits-caption { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--grey-dim); }
.credits-stats { display: flex; gap: clamp(22px, 3vw, 54px); font-size: 14px; color: var(--grey); }
.credits-stats b { font-family: Unbounded, sans-serif; font-weight: 500; color: var(--paper); font-size: 18px; margin-right: 7px; letter-spacing: -.02em; }

.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marquee-track {
  display: flex; align-items: center; gap: clamp(38px, 4.6vw, 86px); width: max-content;
  animation: slide 46s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
/* Логотипы приведены к одной оптической высоте и перекрашены в белый с
   альфой: разнобой размеров и цветов — главная причина, по которой строка
   клиентов выглядит самодельной. */
.marquee-track img {
  height: clamp(26px, 2.4vw, 38px); width: auto; flex: 0 0 auto;
  opacity: .5; filter: grayscale(1);
  transition: opacity .45s var(--ease);
}
.marquee-track img[alt="Lamborghini"],
.marquee-track img[alt="Renault"] { height: clamp(34px, 3.1vw, 50px); }
.marquee:hover .marquee-track img { opacity: .78; }
.marquee-track img:hover { opacity: 1; }

@keyframes slide { to { transform: translateX(-50%); } }

/* ==========================================================================
   Заголовки секций
   ========================================================================== */
.section-head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 24px;
  padding: var(--section) var(--gutter) clamp(28px, 3vw, 46px);
}
.section-head--plain { grid-template-columns: auto 1fr; }
.section-num {
  font-family: Unbounded, sans-serif; font-weight: 400; font-size: 12px;
  letter-spacing: .1em; color: var(--signal); padding-bottom: 10px;
}
.section-title {
  font-family: Unbounded, Onest, sans-serif; font-weight: 500;
  font-size: clamp(28px, 3.6vw, 60px); letter-spacing: -.04em; line-height: 1.02;
}

.filters { display: flex; gap: clamp(12px, 1.5vw, 26px); flex-wrap: wrap; padding-bottom: 8px; }
.filter {
  font-size: 14px; color: var(--grey-dim); padding-bottom: 5px;
  border-bottom: 1px solid transparent;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.filter:hover { color: var(--paper); }
.filter.is-active { color: var(--paper); border-bottom-color: var(--signal); }

/* ==========================================================================
   03 · ПЛИТКА РАБОТ
   Три в ряд, зазор 2px: страница читается кадрами. Подпись выходит по
   наведению — в покое на экране только картинки, и это главное «ярко».
   ========================================================================== */
.tiles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px; padding: 0; margin: 0;
}
.tile {
  position: relative; list-style: none; background: var(--film);
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.tile.is-in { opacity: 1; transform: none; }
.tile-link { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.tile img, .tile-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--crop, 50% 50%);
}
.tile img {
  filter: brightness(1.08) saturate(1.05);
  transition: transform 1.1s var(--ease), filter .6s var(--ease);
}
.tile-video { opacity: 0; transition: opacity .45s var(--ease); z-index: 1; }
.tile.is-playing .tile-video { opacity: 1; }
.tile:hover img { transform: scale(1.055); }

/* Затемнение приходит только под подпись и только по наведению */
.tile-shade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(10,10,11,.92) 0%, rgba(10,10,11,.45) 34%, transparent 66%);
  opacity: 0; transition: opacity .45s var(--ease);
}
.tile:hover .tile-shade, .tile:focus-within .tile-shade { opacity: 1; }

.tile-meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: block; padding: 0 clamp(14px, 1.2vw, 22px) clamp(14px, 1.2vw, 20px);
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s var(--ease), transform .55s var(--ease);
}
.tile:hover .tile-meta, .tile:focus-within .tile-meta { opacity: 1; transform: none; }
.tile-title {
  display: block; font-family: Unbounded, Onest, sans-serif; font-weight: 400;
  font-size: clamp(15px, 1.2vw, 20px); letter-spacing: -.03em; line-height: 1.2;
}
.tile-sub { display: block; margin-top: 6px; font-size: 12px; color: var(--grey); }

/* Уголок у работ, под которыми лежит ролик */
.tile-mark {
  position: absolute; left: clamp(14px, 1.2vw, 22px); top: clamp(14px, 1.2vw, 22px); z-index: 3;
  width: 0; height: 0;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-left: 10px solid var(--signal);
  filter: drop-shadow(0 2px 10px rgba(10,10,11,.8));
}

.tiles-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; padding: clamp(24px, 2.6vw, 38px) var(--gutter) 0;
}
.more {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 28px; border: 1px solid var(--rule); border-radius: 100px;
  font-size: 15px;
  transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.more:hover { background: var(--paper); color: var(--black); border-color: var(--paper); }
.more i { font-style: normal; color: var(--signal); transition: color .5s var(--ease); }
.more:hover i { color: var(--black); }
.tiles-note { font-size: 13px; color: var(--grey-dim); max-width: 46ch; }

.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; margin-top: 22px; }
.link-arrow span { border-bottom: 1px solid var(--rule); padding-bottom: 3px; transition: border-color .4s var(--ease); }
.link-arrow::after { content: '↗'; font-size: 14px; color: var(--signal); transition: transform .45s var(--ease); }
.link-arrow:hover span { border-color: var(--paper); }
.link-arrow:hover::after { transform: translate(3px, -3px); }

/* ==========================================================================
   05 · НАПРАВЛЕНИЯ
   ========================================================================== */
.division-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 0 var(--gutter); }
.division { position: relative; display: block; overflow: hidden; background: var(--film); min-height: clamp(340px, 38vw, 520px); }
.division-media { position: absolute; inset: 0; }
.division-media img { width: 100%; height: 100%; object-fit: cover; opacity: .42; transform: scale(1.02); transition: transform 1.1s var(--ease), opacity .7s var(--ease); }
.division:hover .division-media img { transform: scale(1.07); opacity: .55; }
.division::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,11,.95), rgba(10,10,11,.25) 70%); }
.division-body { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(26px, 3vw, 46px); }
.division-body h3 { font-family: Unbounded, sans-serif; font-weight: 500; font-size: clamp(24px, 2.6vw, 42px); letter-spacing: -.04em; }
.division-body p { margin-top: 14px; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.55; color: var(--grey); max-width: 34ch; }
.division-go { margin-top: 22px; font-size: 14px; color: var(--paper); display: inline-flex; align-items: center; gap: 8px; }
.division-go::after { content: '→'; transition: transform .45s var(--ease); }
.division:hover .division-go::after { transform: translateX(5px); }
.division--vision .division-body h3 { color: #7FE3F0; }
.division--prod .division-body h3 { color: var(--paper); }

/* ==========================================================================
   06 · СТУДИЯ
   ========================================================================== */
.studio {
  margin-top: var(--section);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 88px); align-items: center;
  padding: 0 var(--gutter);
}
.studio-media { overflow: hidden; aspect-ratio: 4 / 5; }
.studio-media img { width: 100%; height: 100%; object-fit: cover; }
.studio-copy .section-num { padding-bottom: 14px; }
.studio-copy .section-title { margin-bottom: clamp(26px, 3vw, 44px); }
.studio-list { display: grid; gap: 0; border-top: 1px solid var(--rule-soft); }
.studio-list li { padding: clamp(18px, 1.8vw, 26px) 0; border-bottom: 1px solid var(--rule-soft); font-size: clamp(15px, 1.15vw, 18px); line-height: 1.55; color: var(--grey); }
.studio-list b { font-weight: 400; color: var(--paper); margin-right: 6px; }

/* ==========================================================================
   07 · КОНТАКТЫ
   ========================================================================== */
.contact { margin-top: var(--section); padding: clamp(64px, 8vw, 130px) var(--gutter) clamp(50px, 6vw, 90px); border-top: 1px solid var(--rule); }
.contact .section-num { padding-bottom: 22px; }
.contact-title { max-width: 14ch; }
.contact-lead { margin-top: 26px; font-size: clamp(16px, 1.3vw, 21px); line-height: 1.55; color: var(--grey); max-width: 46ch; }

.contact-rows { margin-top: clamp(40px, 5vw, 76px); border-top: 1px solid var(--rule-soft); }
.contact-row {
  display: grid; grid-template-columns: 148px 1fr 40px; align-items: center; gap: 20px;
  padding: clamp(18px, 2vw, 28px) 0; border-bottom: 1px solid var(--rule-soft);
  transition: padding-left .5s var(--ease);
}
.contact-row:hover { padding-left: 16px; }
.contact-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-dim); }
.contact-value { font-family: Unbounded, Onest, sans-serif; font-weight: 400; font-size: clamp(17px, 1.75vw, 30px); letter-spacing: -.04em; overflow-wrap: break-word; }
.contact-go { text-align: right; color: var(--signal); transition: transform .45s var(--ease); }
.contact-row:hover .contact-go { transform: translate(3px, -3px); }

/* ==========================================================================
   ПОДВАЛ
   ========================================================================== */
.footer {
  display: grid; grid-template-columns: 1.6fr 1fr 1.2fr auto; gap: 40px;
  padding: clamp(44px, 5vw, 72px) var(--gutter); border-top: 1px solid var(--rule);
  font-size: 14px; color: var(--grey);
}
.footer-mark { width: 150px; height: auto; margin-bottom: 20px; }
.footer-col h4 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-dim); font-weight: 400; margin-bottom: 16px; }
.footer-col a { display: block; padding-block: 5px; transition: color .35s var(--ease); }
.footer-col a:hover { color: var(--paper); }
.footer-col p { line-height: 1.6; }
.footer-col--end { text-align: right; }
.footer-year { color: var(--grey-dim); }

/* ==========================================================================
   ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ
   ========================================================================== */
[data-rise], [data-rise-group] .line > span {
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .9s var(--ease);
}
[data-rise].is-in, [data-rise-group].is-in .line > span { opacity: 1; transform: none; }
[data-rise-group].is-in .line:nth-child(2) > span { transition-delay: .09s; }
[data-reveal-img] { transform: scale(1.06); transition: transform 1.3s var(--ease); }
[data-reveal-img].is-in { transform: scale(1); }
.index-row { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.index-row.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   АДАПТИВ
   ========================================================================== */
@media (max-width: 1100px) {
  .nav-cta { display: none; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: 1fr; }
  .studio { grid-template-columns: 1fr; }
  .studio-media { aspect-ratio: 16 / 10; }
  .footer { grid-template-columns: 1fr 1fr; }
  .footer-col--end { text-align: left; grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .topbar { padding: 16px var(--gutter); gap: 14px; }
  .mark { width: 124px; }
  .nav { gap: 16px; }
  .nav a { font-size: 13px; }
  .nav a[href="#divisions"], .nav a[href="#studio"] { display: none; }

  .opening { padding-bottom: 92px; min-height: 92svh; }
  .opening h1 { font-size: clamp(27px, 7.6vw, 42px); }
  .opening-copy { max-width: none; }
  .opening-actions { gap: 18px; margin-top: 28px; }
  .reel { padding: 13px 22px 13px 18px; }
  .opening-bar { font-size: 10px; gap: 12px; padding: 12px var(--gutter); }
  .bar-item { letter-spacing: .04em; }

  .credits-head { padding-bottom: 28px; }
  .credits-stats { gap: 18px; font-size: 13px; }
  .section-head { grid-template-columns: auto 1fr; row-gap: 20px; }
  .filters { grid-column: 1 / -1; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 12px; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filter { white-space: nowrap; }

  /* На телефоне индекс превращается в кадры: превью за курсором там не работает */
  /* На телефоне кадр должен быть крупным: одна колонка во всю ширину,
     подпись всегда видна — наведения там не существует. */
  .tiles { grid-template-columns: 1fr; padding-inline: 0; gap: 3px; }
  .tile-shade, .tile-meta { opacity: 1; transform: none; }
  .tiles-foot { flex-direction: column; align-items: stretch; }
  .more { justify-content: center; }

  .division-grid { grid-template-columns: 1fr; }
  .division { min-height: 300px; }
  .contact-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .contact-label { grid-column: 1 / -1; }
  .footer { grid-template-columns: 1fr; gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  [data-rise], [data-rise-group] .line > span, .index-row { opacity: 1; transform: none; }
  .grain { animation: none; }
}

/* ==========================================================================
   КИНЕТИЧЕСКАЯ ПОЛОСА
   Крупный кегль, который живёт от скорости скролла. Две строки навстречу
   друг другу: одна залитая, вторая контурная — так полоса читается как
   фактура, а не как бегущая реклама.
   ========================================================================== */
.kinetic {
  padding: clamp(50px, 6vw, 90px) 0;
  border-block: 1px solid var(--rule-soft);
  overflow: hidden;
  background: var(--black);
}
.kinetic-row { overflow: clip visible; }
.kinetic-row + .kinetic-row { margin-top: clamp(-6px, -.4vw, -2px); }
.kinetic-track {
  display: flex; align-items: center; gap: clamp(18px, 2vw, 40px);
  width: max-content; will-change: transform;
}
.kinetic-track span {
  font-family: Unbounded, sans-serif; font-weight: 500;
  font-size: clamp(42px, 8.4vw, 150px); letter-spacing: -.05em; line-height: .96;
  white-space: nowrap; color: var(--paper);
}
.kinetic-row--out .kinetic-track span {
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 240, 237, .3);
}
.kinetic-track em {
  font-style: normal; color: var(--signal);
  font-size: clamp(14px, 1.6vw, 26px); transform: translateY(-.25em);
}

/* ==========================================================================
   ДИАФРАГМА
   Канвас затемняет кадр и вырезает в нём лепестковое отверстие. Отверстие
   раскрывается по мере прохода секции — камера буквально открывается.
   ========================================================================== */
.iris { position: relative; height: 230vh; margin-top: var(--section); }
.iris-sticky {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.iris-plate { position: absolute; inset: 0; }
.iris-plate img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(1.18) saturate(1.1);
  transform: scale(1.12); will-change: transform;
}
.iris-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.iris-copy {
  position: relative; z-index: 2; text-align: center;
  padding: 0 var(--gutter); pointer-events: none;
}
.iris-copy > * { pointer-events: auto; }
/* Мягкая подложка: кадр внутри диафрагмы бывает любой яркости */
.iris-copy::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 150%; height: 185%; transform: translate(-50%, -50%);
  z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(10,10,11,.74) 0%, rgba(10,10,11,.36) 46%, transparent 74%);
}
.iris-kicker {
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--paper); margin-bottom: 20px;
  text-shadow: 0 2px 22px rgba(10, 10, 11, .9);
}
.iris-copy h2 {
  font-family: Unbounded, sans-serif; font-weight: 500;
  font-size: clamp(44px, 8.6vw, 148px); letter-spacing: -.05em; line-height: .9;
  text-shadow: 0 6px 60px rgba(10, 10, 11, .7);
}
.reel--lg { margin-top: clamp(26px, 3vw, 44px); padding: 18px 32px 18px 26px; }
.reel--lg .reel-label { font-size: 17px; }

/* ==========================================================================
   3D-КОЛЬЦО
   Настоящая перспектива на CSS: кадры стоят по окружности и вращаются.
   ========================================================================== */
/* Кадры кольца уезжают за края сцены — на узком экране это давало
   горизонтальный скролл всей страницы. clip по X режет только вылет,
   не превращая секцию в контейнер прокрутки и не ломая 3D внутри. */
.ring-section { padding-bottom: clamp(30px, 4vw, 60px); overflow-x: clip; overflow-y: visible; }
.ring-stage {
  position: relative;
  height: clamp(370px, 47vw, 640px);
  perspective: 1250px;
  perspective-origin: 50% 50%;
  cursor: grab;
  touch-action: pan-y;
}
.ring-stage:active { cursor: grabbing; }
.ring {
  position: absolute; inset: 0; margin: auto;
  width: clamp(252px, 29vw, 430px); aspect-ratio: 16 / 9; height: auto;
  transform-style: preserve-3d; will-change: transform;
}
.ring-item {
  position: absolute; inset: 0; margin: 0;
  backface-visibility: hidden;
  outline: 1px solid rgba(242, 240, 237, .1); outline-offset: -1px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .65);
}
.ring-item img { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.12) saturate(1.06); }
.ring-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 14px 10px; font-size: 12px; letter-spacing: .04em;
  background: linear-gradient(to top, rgba(10,10,11,.92), transparent);
}
/* Красный засвет за кольцом — единственное «яркое пятно» на странице */
.ring-glow {
  position: absolute; left: 50%; top: 50%; width: 52vw; height: 52vw;
  max-width: 580px; max-height: 580px;
  transform: translate(-50%, -50%); pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgba(255, 42, 28, .66) 0%, rgba(255, 42, 28, .24) 28%, rgba(255, 42, 28, .06) 50%, transparent 70%);
  filter: blur(8px);
  animation: pulse 7s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: .65; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.09); }
}
.ring-hint {
  text-align: center; margin-top: clamp(18px, 2vw, 30px);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--grey-dim);
}

@media (max-width: 760px) {
  .iris { height: 190vh; }
  .kinetic { padding-block: 34px; }
  .ring-stage { height: 320px; perspective: 760px; }
  .ring-hint { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .kinetic-track { animation: none; }
  .ring-glow { animation: none; opacity: .7; }
  .iris { height: auto; }
  .iris-sticky { position: relative; height: 72svh; }
  .iris-canvas { display: none; }
  .iris-plate img { transform: none; filter: brightness(.55); }
}

/* ==========================================================================
   ЗАЯВКА
   Поля без коробок: только линия снизу. Боксовые инпуты — самый быстрый
   способ превратить премиальную страницу в админку.
   ========================================================================== */
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(36px, 5vw, 96px); align-items: start;
}

.lead {
  border: 1px solid var(--rule); padding: clamp(24px, 2.6vw, 40px);
  background: var(--film); display: grid; gap: clamp(18px, 1.7vw, 26px);
}
.lead-title {
  font-family: Unbounded, Onest, sans-serif; font-weight: 500;
  font-size: clamp(18px, 1.5vw, 24px); letter-spacing: -.035em;
}
.field { display: grid; gap: 9px; }
.field > span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-dim); }
.field input, .field textarea {
  font: inherit; font-size: 16px; color: var(--paper);
  background: none; border: 0; border-bottom: 1px solid var(--rule);
  padding: 9px 0; border-radius: 0; resize: vertical;
  transition: border-color .4s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--grey-dim); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--paper); }
.field.is-bad > span { color: var(--signal); }
.field.is-bad input, .field.is-bad textarea { border-bottom-color: var(--signal); }

.lead-send {
  justify-self: start; min-height: 56px; padding: 16px 34px;
  background: var(--signal); color: #fff; font-size: 16px; font-weight: 500;
  border-radius: 100px; transition: background-color .4s var(--ease), transform .4s var(--ease);
}
.lead-send:hover { background: #E01E12; }
.lead-send:active { transform: scale(.985); }
.lead-small { font-size: 12px; line-height: 1.5; color: var(--grey-dim); margin-top: -8px; }
.lead-note { font-size: 14px; line-height: 1.5; color: var(--grey); }
.lead-note.is-bad { color: var(--signal); }

/* ==========================================================================
   ПОП-АП
   ========================================================================== */
.popup {
  width: min(520px, calc(100vw - 32px)); padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--rule); background: var(--film-2); color: var(--paper);
  position: fixed; inset: 0; margin: auto;
}
.popup::backdrop { background: rgba(10, 10, 11, .78); backdrop-filter: blur(6px); }
.popup[open] { animation: popIn .55s var(--ease); }
@keyframes popIn { from { opacity: 0; transform: translateY(14px); } }
.popup-close {
  position: absolute; top: 12px; right: 14px; width: 40px; height: 40px;
  font-size: 24px; line-height: 1; color: var(--grey);
  transition: color .35s var(--ease);
}
.popup-close:hover { color: var(--paper); }
.popup-kicker { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--signal); }
.popup h2 {
  margin-top: 14px; font-family: Unbounded, Onest, sans-serif; font-weight: 500;
  font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.04em; line-height: 1.05;
}
.popup-text { margin-top: 14px; font-size: 16px; line-height: 1.55; color: var(--grey); }
.lead--compact { margin-top: 26px; border: 0; padding: 0; background: none; }

@media (max-width: 760px) {
  .lead { padding: 22px 20px 26px; }
  .lead-send { justify-self: stretch; text-align: center; }
  .popup { padding: 26px 20px 28px; }
}

/* Правило .contact-grid объявлено ниже медиазапросов, поэтому одноколоночную
   раскладку возвращаем здесь — иначе форма уезжает за правый край телефона. */
@media (max-width: 1100px) {
  .contact-grid { grid-template-columns: 1fr; }
}