/* =====================================================================
   Corporate cut (index2). Loads on top of style.css and changes nothing
   for the original page — every rule is scoped to .is-corp. The design
   language is untouched: only the things the client's structure and copy
   actually break are adjusted.
   ===================================================================== */

/* ------------------------------------------------------------------ menu */

/* Six items, so the row keeps the type size the design was drawn at. */
.is-corp .nav__list { flex-wrap: nowrap; }
.is-corp .nav__link { white-space: nowrap; }

/* The parent of the formats submenu. It is a button, not a link — there is
   no single page behind "events", only the four beneath it. */
.is-corp .nav__toggle {
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	padding: 0;
}

.is-corp .nav__item--sub { position: relative; }

.is-corp .nav__sub {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 6px);
	margin: 0;
	padding: .7rem .95rem .8rem;
	min-width: 9.5rem;
	list-style: none;
	background: rgba(11, 11, 13, .94);
	backdrop-filter: blur(14px);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, transform .3s ease, visibility .3s;
}

/* Hover, keyboard focus and the tap-to-open state all reveal it. */
.is-corp .nav__item--sub:hover .nav__sub,
.is-corp .nav__item--sub:focus-within .nav__sub,
.is-corp .nav__item--sub.is-open .nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.is-corp .nav__sublink {
	display: block;
	padding: .42rem 0;
	font-family: var(--mono);
	font-size: .7rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-soft);
	text-decoration: none;
	white-space: nowrap;
	transition: color .3s ease;
}

.is-corp .nav__sublink:hover,
.is-corp .nav__sublink:focus-visible { color: #F5F5F5; }

/* In the burger the submenu is simply always open and indented — a panel
   inside a panel would be one layer too many on a phone. */
@media (max-width: 900px) {
	.is-corp .nav__sub {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		background: none;
		border: 0;
		backdrop-filter: none;
		padding: 0 0 .4rem 1.1rem;
		min-width: 0;
	}

	.is-corp .nav__toggle { pointer-events: none; }
	.is-corp .nav__sublink { padding: .55rem 0; font-size: .78rem; }
}

/* ------------------------------------------------------------------ hero */

/* Node 24144:52 is drawn on a 1783-wide frame, so the whole screen is
   measured against that. Every --u figure below is the frame's own number,
   which is why they can be read straight off the design. */
.hero--corp { --u: calc(100vw / 1783); }

/* The client's headline is a sentence, not two words, so it is set a size
   down and allowed to run to three lines. Everything else about the face
   — weight, colour — is the one we already built.

   The tracking has to be restated. The display line carries an absolute
   -10.88 design units, measured for type at 139.8; on a sentence three
   sizes down that same value closes the letters into each other and eats
   the word gaps whole. Here it is expressed relative to the type and the
   gaps are given back with word-spacing — the treatment .reel__line
   already uses for the same reason. */
/* Node 24144:63. The double spaces in the markup are load-bearing, so the
   pre-wrap the base rule already sets is kept. */
.hero__title--corp {
	width: calc(834.75 * var(--u));
	font-weight: 500;
	font-size: calc(65.25 * var(--u));
	line-height: calc(67 * var(--u));
	letter-spacing: calc(-2.511 * var(--u));
}

/* Боковая надпись. В первом макете здесь стоял короткий город, и разрядка
   ему была не нужна. Клиентская строка втрое длиннее и в верхнем регистре —
   без интервала прописные слипаются в сплошную ленту. */
.is-corp .hero__city {
	font-size: calc(11.4 * var(--u));
	letter-spacing: calc(1.9 * var(--u));
}

/* Курсив по макету 24192:18. Прежде здесь стояло короткое «art music» под
   Mr Dafoe; клиент сменил и начертание, и место — строка ушла вправо, выросла
   в ширину и легла круче под наклоном, над правым столбцом. Координаты сняты
   с кадра 1793 и пересчитаны в его же единицы. */
.is-corp .hero__script {
	--script: 'Lucy the Cat', cursive;
	left: calc(642.4 * var(--u));
	bottom: calc(266.6 * var(--u));
	width: calc(589.1 * var(--u));
	height: calc(142.1 * var(--u));
}

.is-corp .hero__script-rot { transform: rotate(-9.56deg); }

/* Строка выводится контурами, а не шрифтом. Ширина подобрана так, чтобы она
   встала ровно там же, где стояла живым начертанием: 9.37 кегля при кегле
   63.6 единицы. Всю машинерию заливки текста снимаем — она была нужна, чтобы
   протянуть градиент сквозь буквы, а теперь градиент живёт внутри самого
   рисунка. Заодно уходит и запас под свисающие росчерки: у рисунка они
   внутри рамки. */
.is-corp .hero__script-text {
	display: block;
	/* Ширина долей окна, а не через кадровую единицу: 596 единиц кадра шириной
	   1783 — это ровно 33.4vw. Через var(--u) браузер эту строку не принимал,
	   и рисунок вставал в свою натуральную величину — девять с лишним тысяч
	   пикселей поперёк, отчего и вылезал за экран. */
	width: 33.4vw;
	height: auto;
	padding: 0;
	margin: 0;
	background: none;
	-webkit-background-clip: border-box;
	        background-clip: border-box;
	font-size: 0;
}

/* Правый столбец. В макете он был уже: там стояла короткая строка в два
   ряда. Клиентская длиннее и на прежней мере ложилась в три, отчего кнопка
   упиралась в текст. Столбец расширен влево — правый край остался на месте,
   чтобы поля кадра не поехали. Кнопка просмотра стоит на том же отсчёте и
   уезжает вместе с ним. */
.is-corp .hero__aside {
	left: calc(995 * var(--u));
	width: calc(600 * var(--u));
	bottom: calc(73.6 * var(--u));
	/* Нижнее поле у столбца своё: в макете кнопка не прижата к его краю, под
	   ней остаётся восемь единиц воздуха. */
	padding-bottom: calc(8 * var(--u));
}

/* Node 24144:74 — two lines, set to the frame's own measure. */
.is-corp .hero__tagline {
	margin: 0;
	max-width: calc(600 * var(--u));
	font-size: calc(17.86 * var(--u));
	line-height: calc(25.718 * var(--u));
	letter-spacing: calc(-.3175 * var(--u));
	color: rgba(255, 255, 255, .85);
}

/* Node 24144:76 — the row's own top padding is the gap under the sentence. */
.hero__actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: calc(13.891 * var(--u));
	margin: 0;
	/* Зазор между подзаголовком и кнопкой — по макету 24192:22. */
	padding-top: calc(25.7 * var(--u));
}

/* Nodes 24144:81 and 24144:98 are the same button drawn twice, so both
   actions share one rule — the primary just keeps its flip. Each hugs its
   own label with the frame's 25 of padding on either side. */
.is-corp .hero__btn,
.is-corp .hero__btn-alt {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	flex: none;
	width: auto;
	height: calc(55.563 * var(--u));
	padding: 0 calc(48 * var(--u));
	border: 1px solid #F5F5F5;
	border-radius: var(--radius);
	font-family: var(--display);
	font-size: calc(10.795 * var(--u));
	line-height: calc(17.272 * var(--u));
	letter-spacing: calc(1.9431 * var(--u));
	text-transform: uppercase;
	color: #F5F5F5;
	white-space: nowrap;
	/* The frame indents the first line by one tracking step; on a centred
	   label that reads as the text sitting off to the right, so the same
	   value is given back as a left margin on the trailing space instead. */
	text-indent: 0;
}

/* The brochure flips like the rest; its frame must stay put while it turns,
   so the fill lives on the faces rather than on the button. */
.is-corp .hero__btn-alt:hover.btn-flip,
.is-corp .hero__btn-alt:focus-visible.btn-flip { background: none; color: #F5F5F5; }

/* Back face: white plate, dark label, download mark beside it. */
.is-corp .hero__btn-alt .btn-flip__back {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(8 * var(--u));
}

.hero__btn-icon {
	flex: none;
	width: calc(12 * var(--u));
	height: calc(12 * var(--u));
}

/* Holds the flip button open: both of its faces are absolutely positioned,
   so without this the box collapses to its padding and the labels spill. */
.btn-flip__sizer {
	grid-area: 1 / 1;
	visibility: hidden;
	pointer-events: none;
}

/* Nodes 24144:85–90 — ring on the footage, label to its right on the same
   centre line, both sitting above the copy block. */
.hero__play {
	/* Теперь это кнопка, а не ссылка: собственное оформление элемента
	   управления надо снять, иначе оно перебивает вёрстку. */
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	position: absolute;
	z-index: 3;
	/* Кнопка переехала внутрь ряда действий, а тот лежит в правом столбце —
	   и столбец сам позиционирован, значит отсчёт теперь от него. Прежние
	   координаты были от кадра: 996.4 и 232.3; столбец стоит на 995 и 73.6,
	   отсюда и разность. Место на экране осталось прежним. */
	left: calc(1.4 * var(--u));
	bottom: calc(158.7 * var(--u));
	display: inline-flex;
	align-items: center;
	gap: calc(22.9 * var(--u));
	text-decoration: none;
}

/* Solid white at rest, so the showreel reads as the one filled control on a
   screen of outlines. */
.hero__play-ring {
	position: relative;
	display: grid;
	place-items: center;
	width: calc(76 * var(--u));
	height: calc(76 * var(--u));
	border-radius: 50%;
	/* The triangle is optically left-heavy; the frame nudges it back. */
	padding-left: calc(3 * var(--u));
	background: #F5F5F5;
	transition: background .45s ease, transform .45s var(--ease-spring);
}

.hero__play-ring img {
	position: relative;
	z-index: 1;
	display: block;
	width: calc(18 * var(--u));
	height: calc(18 * var(--u));
	/* The exported glyph is white; on the light disc it has to be dark. */
	filter: invert(1);
	transition: filter .45s ease;
}

/* Hover: the disc empties to an outline and a ring pulses out of it, like a
   speaker throwing a wave — the fill and the icon trade places. */
.hero__play-ring::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 1px solid rgba(245, 245, 245, .55);
	border-radius: 50%;
	opacity: 0;
	transform: scale(1);
}

.hero__play:hover .hero__play-ring,
.hero__play:focus-visible .hero__play-ring {
	background: rgba(11, 11, 13, .18);
	box-shadow: inset 0 0 0 1px #F5F5F5;
	transform: scale(1.06);
}

.hero__play:hover .hero__play-ring img,
.hero__play:focus-visible .hero__play-ring img { filter: none; }

.hero__play:hover .hero__play-ring::after,
.hero__play:focus-visible .hero__play-ring::after { animation: play-pulse 1.6s ease-out infinite; }

@keyframes play-pulse {
	0%   { opacity: .8; transform: scale(1); }
	100% { opacity: 0;  transform: scale(1.55); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__play:hover .hero__play-ring::after,
	.hero__play:focus-visible .hero__play-ring::after { animation: none; opacity: .5; }
}

.hero__play-label {
	font-family: var(--display);
	font-size: calc(11.2 * var(--u));
	line-height: calc(17.92 * var(--u));
	letter-spacing: calc(1.792 * var(--u));
	text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
	white-space: nowrap;
	transition: color .4s ease;
}

.hero__play:hover .hero__play-label { color: #FFF; }

/* Планшеты и телефоны. Кадровая раскладка первого экрана здесь бесполезна:
   всё, что в ней расставлено по абсолютным координатам от нижнего края,
   сходится в одну точку и налезает друг на друга — заголовок ложился поверх
   подзаголовка и кнопки. Поэтому заголовок с правым столбцом выкладываются
   потоком, колонкой у нижнего края.

   Кегли здесь заданы своими мерами, а не долей от кадра: доля тает вместе с
   шириной, и на планшете подзаголовок выходил в восемь пикселей. */
@media (max-width: 1024px) {
	.hero--corp {
		--u: calc(100vw / 1100);
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		/* Прижато к низу плотнее: воздуха под кнопкой было почти на треть
		   экрана, и содержимое висело в середине. */
		padding: 0 var(--gutter) clamp(1.6rem, 4.5vh, 3rem);
	}

	.is-corp .hero__title {
		position: static;
		width: auto;
		max-width: 18ch;
		margin: 0 0 clamp(.6rem, 1.5vh, .95rem);
		font-size: clamp(1.85rem, 6.2vw, 3.4rem);
		line-height: 1.03;
		letter-spacing: -.02em;
	}

	.is-corp .hero__aside {
		position: static;
		left: auto;
		right: auto;
		bottom: auto;
		width: auto;
		padding-bottom: 0;
	}

	.is-corp .hero__tagline {
		max-width: 46ch;
		font-size: clamp(.96rem, 1.7vw, 1.12rem);
		line-height: 1.5;
	}

	.is-corp .hero__actions { padding-top: clamp(1rem, 2.6vh, 1.5rem); }

	.is-corp .hero__btn {
		width: min(100%, 21rem);
		height: 3.2rem;
		padding: 0;
		font-size: clamp(.62rem, 1.1vw, .72rem);
	}

	/* Кнопка и просмотр идут одной строкой: сперва действие, за ним мелкий
	   просмотр. Высоту просмотру не задаём — растяжка по строке равняет его
	   с кнопкой сама, при любом её росте. */
	.is-corp .hero__actions {
		display: flex;
		align-items: stretch;
		gap: clamp(.6rem, 2.6vw, 1rem);
	}

	.is-corp .hero__btn { flex: 1 1 auto; width: auto; }

	.is-corp .hero__play {
		position: static;
		flex: none;
		display: inline-flex;
		align-items: center;
		gap: .5rem;
	}

	.hero__play-ring { width: 2rem; height: 2rem; }
	.hero__play-ring img { width: 10px; height: 10px; }

	.hero__play-label {
		font-size: .62rem;
		line-height: 1;
		letter-spacing: .12em;
	}

	.hero__city,
	.hero__socials { font-size: clamp(.56rem, .9vw, .66rem); }

	.hero__scroll {
		right: var(--gutter);
		bottom: clamp(1rem, 2.6vh, 1.8rem);
		font-size: clamp(.56rem, .9vw, .66rem);
	}

	/* Курсив держится, пока помещается: ему нужна почти вся ширина кадра. */
	.is-corp .hero__script {
		left: 50%;
		bottom: auto;
		top: 26%;
		width: min(86vw, 620px);
		height: auto;
		transform: translateX(-50%);
	}

	/* Ширина рисунку задаётся мерой, а не долей. Доля здесь считается от
	   поворотной обёртки, а у неё ширина по содержимому — то есть по этому
	   же рисунку. Круг замыкается, браузер берёт натуральный размер, и
	   строка в девять тысяч пикселей вылезала за экран поверх кнопки. */
	.is-corp .hero__script-text { width: min(86vw, 620px); }
}

/* Низкие окна — альбомный телефон или просто уменьшенное окно браузера.
   Столбец первого экрана в такую высоту не помещается, а кнопка просмотра и
   боковые рейки расставлены по абсолютным координатам и оказываются прямо на
   заголовке. Кнопку ставим в поток и поднимаем первой, рейки с указателем
   прокрутки снимаем: на такой высоте им негде стоять. Содержимое при этом
   идёт от верха, а не жмётся к низу, — иначе оно уползает под шапку. */
/* Порог по высоте низкий нарочно: у обычного телефона в портрете видимая
   высота бывает и шестьсот пикселей, и при пороге в семьсот это правило
   срабатывало на нём — весь первый экран уезжал наверх. Здесь нужен только
   альбомный телефон и сильно уменьшенное окно. */
@media (max-width: 1024px) and (max-height: 460px) {
	.hero--corp {
		justify-content: flex-start;
		padding-top: calc(var(--header-h) + clamp(.6rem, 2vh, 1.4rem));
		padding-bottom: clamp(1.4rem, 4vh, 2.4rem);
	}

	.is-corp .hero__title {
		font-size: clamp(1.5rem, 4.6vw, 2.2rem);
		margin-bottom: clamp(.6rem, 1.8vh, 1rem);
	}

	.is-corp .hero__tagline { font-size: .92rem; line-height: 1.45; }
	.is-corp .hero__actions { padding-top: clamp(.7rem, 2vh, 1.1rem); }
	.is-corp .hero__btn { height: 2.8rem; }

	.is-corp .hero__script,
	.hero__city,
	.hero__socials,
	.hero__scroll { display: none; }
}

/* Кадр первого экрана на телефоне режется по вертикали, и человек уходил
   к самому краю: снимок построен на широкую рамку, где он в левой трети.
   Смещаем точку кадрирования вправо — так он остаётся в середине узкого. */
@media (max-width: 760px) {
	.is-corp .hero__media video,
	.is-corp .hero__media img,
	.is-corp .hero__poster { object-position: 68% center; }
}

/* Планшеты: курсив мельче и ниже.

   На широком экране он лежит поверх кадра посередине — там ему просторно.
   На планшете кадр уже, и надпись в прежнюю меру перекрывала пол-экрана;
   опускаем её ближе к тексту и убавляем — она подпись к заголовку, а не
   отдельное заявление.

   Указатель прокрутки там же снимается: он стоит у правого края на одной
   высоте с рядом кнопок и наезжает на них. На планшете он и не нужен —
   листают пальцем. */
@media (min-width: 621px) and (max-width: 1024px) {
	.is-corp .hero__script {
		top: auto;
		/* Выше заголовка: на 34% надпись садилась прямо на его первую строку. */
		bottom: 46%;
		width: min(54vw, 380px);
	}

	.is-corp .hero__script-text { width: min(54vw, 380px); }

	.hero__scroll { display: none; }
}

/* Телефоны: рейки по краям и курсив снимаются — места им нет, и они уходили
   за край экрана. Кнопка растягивается на всю ширину: обрубком она выглядит
   случайной. */
@media (max-width: 620px) {

	/* Кнопка растянулась во всю ширину и дошла до правого края, где стоит
	   указатель прокрутки — они наложились. На телефоне указатель лишний:
	   там и так понятно, что страницу листают. */
	.hero__scroll { display: none; }
	.is-corp .hero__script { display: none; }
	.hero__city,
	.hero__socials { display: none; }
}

/* Section heading above the standing caption in the slider. It takes the
   caption's grid slot so the photo plate opposite is unaffected. */
.about__note-block { grid-column: 1; }

/* Variant 2 hides the standalone opening statement, but this one is a
   section heading and stays. It borrows that statement's size and reveal —
   only the indent and the width cap belong to the other use. */
body.is-v2 .about__intro--heading { display: block; }

.about__intro--heading {
	margin: 0 0 clamp(.8rem, 2vh, 1.4rem);
	max-width: none;
	text-indent: 0;
	font-size: clamp(2.5rem, 5.2vw, 4.9rem);
	line-height: 1;
	/* Two words, kept on one line — the caption below carries the wrapping. */
	white-space: nowrap;
}

/* The rise splits the heading into word wrappers, and those are inline-block:
   the no-wrap has to reach them too, or the line can still break between. */
.about__intro--heading .about__wd { white-space: nowrap; }

/* Абзац под Corporate Events набран фиксированными 16px — заголовок над ним
   и без того крупный, а строка должна читаться как справка, а не как ещё
   одно заявление. */
.is-corp .about__note { font-size: 16px; }

/* Рейки подняты выше середины. По горизонтали они стоят там, где в макете:
   левая на 65 единицах, правая на 1724 — и правая нарочно на одной линии с
   указателем прокрутки, сдвигать её нельзя.

   Дело было в высоте: рейки отсчитываются от середины экрана, а заголовок
   стоит у нижнего края, и на широком и низком экране левая рейка спускалась
   прямо в его строки. Поднимаем обе — пара сохраняется, а с заголовком они
   расходятся. */
@media (min-width: 621px) {
	.is-corp .hero__city,
	.is-corp .hero__socials { top: 36%; }
}

/* Кадр опускается к разделительной линии. Верхняя строка прикреплённого
   экрана растянута на всю свободную высоту — так задумано, туда поднимается
   стопка призрачных названий, — а кадр стоял у её верха, и между ним и текстом
   зиял провал в пол-экрана. Прижимаем кадр к низу строки: он оказывается прямо
   над линией, рядом с названием, к которому и относится. */
@media (min-width: 1025px) {
	.is-corp .about__top { align-items: end; }

	/* Прижат к низу строки, но не вплотную к линии: между кадром и линией
	   остаётся воздух, иначе они читаются одним куском. */
	.is-corp .about__shot {
		align-self: end;
		margin-bottom: clamp(2rem, 5vh, 4rem);
	}

	/* И воздух сверху. Первая строка экрана была растянута на всю свободную
	   высоту — под стопку призрачных названий, — но названия эти прозрачны и
	   висят поверх, места в раскладке им не нужно. Ставим строки по
	   содержимому, всю группу по центру кадра, а под призраки оставляем
	   умеренный запас. */
	.is-corp .about__pin {
		grid-template-rows: auto auto auto;
		align-content: center;
	}

	body.is-corp .about__top { min-height: clamp(7rem, 19vh, 13rem); }
}

/* Стык блока доверия и слайдера форматов. От последней строки до кадра было
   358 пикселей пустоты: своё нижнее поле у блока, отступ между секциями,
   собственный верхний отступ сцены и поле над кадром внутри прикреплённого
   экрана — четыре меры подряд, каждая сама по себе разумная. Сводим их к
   одной паузе. */
@media (min-width: 1025px) {
	.is-corp .trust { padding-bottom: clamp(2rem, 4vh, 3.4rem); }
	.is-corp .about__stage { margin-top: 0; }
	body.is-corp .about__top { padding-top: calc(var(--header-h) * .5); }
}

/* ------------------------------------------------- заголовки разделов */

/* Один заголовок на все разделы — ровно тот, что у Corporate Events: тот же
   кегль, та же светлая насыщенность, то же посимвольное появление. Класс
   about__intro нужен скрипту, который разбирает строку на буквы;
   section__head правит только метрику.

   Отличие от --heading одно: длинный заголовок здесь переносится, а не
   держится в строку любой ценой. */
body.is-v2 .section__head { display: block; }

.section__head {
	margin: clamp(.7rem, 1.8vh, 1.1rem) 0 0;
	max-width: 17ch;
	text-indent: 0;
	font-size: clamp(2.5rem, 5.2vw, 4.9rem);
	line-height: 1;
}

/* Раздел, который открывается заголовком, а не строкой-меткой над ним. */
.section__head:first-child { margin-top: 0; }

/* В одно-два слова — держим строкой. */
.section__head--tight { max-width: none; white-space: nowrap; }

/* На узком экране запрет переноса режет заголовок по краю контейнера —
   там он переносится, как любой другой. */
@media (max-width: 860px) {
	.about__intro--heading,
	.section__head--tight { white-space: normal; }
}

/* The slider words run longer than the first version's ("Award ceremonies"
   against "Music"), so the display size steps down to keep them clear of the
   sentence beside them. */
.is-corp .about__titles { font-size: clamp(2rem, 4.4vw, 4.1rem); }

/* Первая половина — три слова через точку. Идёт одной строкой, поэтому
   размер выбран так, чтобы она укладывалась в ширину экрана и на узком. */
.is-corp .reel__line--a {
	max-width: none;
	white-space: nowrap;
	font-size: clamp(1.9rem, 6.2vw, 6.2rem);
	/* Разрядку между словами общий стиль задаёт щедро — там она возвращает то,
	   что съедает плотный межбуквенный интервал у длинной фразы. Здесь слова
	   короткие и разделены точками, и на этом кегле такие промежутки читаются
	   провалами. Оставляем ровно столько, чтобы точка не липла к следующему
	   слову.

	   Межбуквенный интервал переведён в доли кегля. В общих стилях он задан
	   пятью пикселями — на крупном кегле это около пяти сотых кегля, а на
	   телефоне, где буквы втрое мельче, те же пять пикселей съедали пробелы
	   целиком: «Music.Energy.Presence.» слипалось в одно слово. */
	letter-spacing: -.052em;
	word-spacing: .1em;
}

/* Вторая половина набрана тем же кеглем, что и первая: клиент просил не
   ронять её на ступень. Предложение вдвое длиннее и в одну строку на экран
   не встаёт, поэтому перенос после запятой поставлен жёстко — сама по себе
   строка рвалась бы где придётся. */
.is-corp .reel__line--b {
	max-width: none;
	white-space: normal;
	font-size: clamp(1.9rem, 6.2vw, 6.2rem);
	line-height: .92;
	letter-spacing: -.052em;
	word-spacing: .1em;
}

/* Подстрочник под каждой половиной. Размер задан своим clamp, а не долей от
   родителя: на узком экране доля от уменьшенного заголовка выродилась бы в
   нечитаемые шесть пикселей. Плотную разрядку и разбивку слов, которые несёт
   крупная строка, здесь приходится снимать — на мелком кегле они слипаются. */
/* Подстрочник у обеих половин один и тот же: кегль, вес, цвет и отступ.
   Клиент просил, чтобы вторая строка была набрана как первая. Отступ считается
   от кегля самого подстрочника, а он мелкий, — чтобы строка отошла от
   заголовка заметно, доля нужна крупная. */
.is-corp .reel__sub {
	display: block;
	/* Переносы вернуть обязательно: заголовок над этой строкой набран без них —
	   он в два слова, — а подпись их наследовала. Пока там стояло «Designed for
	   exceptional events» это было незаметно; с рассказом о себе строка
	   растянулась на три экрана в стороны. */
	white-space: normal;
	max-width: 58ch;
	margin: 2.1em auto 0;
	/* Приходит отдельно от заголовка — см. reelWall в скрипте: сперва имя на
	   светлой стене, потом, когда фон уйдёт в тень, под ним проступает текст. */
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .6s ease, transform .7s cubic-bezier(.25, .6, .25, 1);
	/* Блок по центру, строки — по левому краю. Абзац в четыре строки с
	   выключкой по центру читается тяжело: каждая строка начинается в новом
	   месте, и глаз ищет начало. */
	text-align: left;
	font-weight: 200;
	font-size: clamp(.95rem, 1.32vw, 1.36rem);
	line-height: 1.5;
	letter-spacing: -.01em;
	word-spacing: normal;
	color: #FFF;
}



.is-corp .reel__sub.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.is-corp .reel__sub { transition: none; }
}

/* The wall copy keeps the typography of the original page — the corporate
   cut only swaps the words. */

/* =====================================================================
   Blocks below the fold, built to the client's structure. Everything
   here is scoped to .is-corp so index.html is untouched.
   ===================================================================== */

/* ------------------------------------------------------------ slider */

/* Экран форматов собран в одну полосу: подпись, название, описание и кадр
   стоят рядом. Прежде кадр висел один в правом верхнем углу, а между ним и
   полосой зияла пустота во весь экран — она нужна была только затем, чтобы
   туда поднималась стопка призрачных названий.

   Теперь под стопку отведена своя мера, а вся группа стоит по центру экрана,
   а не прижата к его низу: воздух распределён поровну сверху и снизу вместо
   одного большого провала наверху. */
/* ------------------------------------------- средние экраны: шапка */

/* От 900 до 1200 меню показано целиком, и пять пунктов с телефоном едва
   расходятся: между последним пунктом и кнопкой оставалось несколько
   пикселей. Приписку у марки на этих ширинах снимаем — она держала место,
   которое нужнее пунктам, — а сами пункты чуть ужимаем. */
@media (max-width: 1200px) {
	.is-corp .header__loc { display: none; }
	.is-corp .header__brand { gap: 0; }
	.is-corp .nav__list { gap: clamp(.85rem, 1.9vw, 1.7rem); }
	.is-corp .nav__link { font-size: clamp(13px, 1.5vw, 17px); }
}

/* ------------------------------------------ узкие экраны: ящик заявки */

@media (max-width: 760px) {
	/* Заголовок уходил под крестик: у крестика свой угол, и место под него
	   надо освободить в самом заголовке. */
	.is-corp .drawer .book__title { padding-right: 3.4rem; }

	/* Края ленты отзывов гасим заметнее: на телефоне в кадр попадает одна
	   карточка с половинками соседей по бокам, и без растушёвки обрез читается
	   поломкой, а не продолжением ленты. */
	.marq-wrap::before,
	.marq-wrap::after { width: 2.2rem; }
}

/* На телефоне ящик заявки выезжает снизу, а не сбоку. Боковая панель на узком
   экране занимает почти всю ширину и всё равно читается сдвинутой вбок, а
   высота в сто процентов на телефоне обманчива: адресная строка то появляется,
   то уходит, и низ формы уезжал за край. svh считает по видимой части. */
@media (max-width: 620px) {
	.is-corp .lightbox--drawer {
		place-items: end stretch;
		justify-items: stretch;
	}

	/* На телефоне ящик разворачивается во весь экран, как меню.

	   Панелью снизу он читался обрывком: половина экрана занята размытой
	   страницей, кнопка упирается в нижний край, и непонятно, окно это или
	   часть страницы. Во весь экран — это законченное окно, и форме есть где
	   дышать. Приходит по-прежнему снизу. */
	.is-corp .drawer {
		width: 100%;
		/* Высота от экрана, а не долей от родителя. Сто процентов здесь
		   считались от оверлея, а он на этой странице оказывается размером во
		   всю страницу — пятнадцать тысяч пикселей: где-то выше по дереву есть
		   превращение, и закреплённый элемент считает себя от него, а не от
		   окна. Панель уезжала вниз на эту же величину и в кадр не попадала. */
		height: 100svh;
		max-height: 100svh;
		padding: clamp(3.4rem, 8vh, 4.6rem) var(--gutter) clamp(2rem, 5vh, 3rem);
		border: 0;
		border-radius: 0;
		transform: translateY(100%);
	}

	.is-corp .lightbox--drawer.is-open .drawer { transform: translateY(0); }

	/* Позванный из другого окна ящик и на телефоне остаётся листом по центру. */
	.is-corp .lightbox--drawer.is-centred { place-items: center; }
	.is-corp .lightbox--drawer.is-centred .drawer { transform: none; }

	/* Поля крупнее: в них попадают пальцем, а не курсором. */
	.is-corp .book__input { min-height: 2.9rem; }
	.is-corp .book__input--area { min-height: 6rem; }

	/* Родной значок календаря спрятан выше — поле рисует свой. */
}

/* Поля секций на планшете короче общих: по семьдесят пикселей сверху и снизу
   на стыке давали почти полтораста пустоты подряд. */
@media (min-width: 621px) and (max-width: 1024px) {
	.is-corp .section { padding-block: clamp(2.6rem, 5.5vh, 3.6rem); }
}

/* Планшеты: сетка шире.

   Ряды марок и полей формы считаются долями кадра шириной 1783 — на планшете
   эта доля даёт узкую колонку посреди пустых полей. Здесь они идут по всей
   ширине контейнера: места мало, и отдавать его полям незачем. */
@media (min-width: 621px) and (max-width: 1024px) {
	/* body в селекторе для веса: у формы своя мера объявлена ниже по файлу,
	   и правило равного веса ей проигрывало. */
	body.is-corp .clients__row,
	body.is-corp .book--wide,
	body.is-corp .faq__list,
	body.is-corp .contact__grid { max-width: none; }

	.is-corp .clients__row { gap: clamp(.7rem, 1.6vw, 1.2rem); }
}

/* Ведущий кадр стены на телефоне: точка кадрирования сдвинута на человека.

   Снимок широкий, 1440 в ширину, а экран узкий — в окно попадает чуть больше
   трети кадра. Значение подобрано по двум замерам: на 35% человек стоял в левой
   четверти, на 18% ушёл в правую треть — цена одного пункта здесь около двух
   с половиной пунктов положения, отсюда и 26. */
@media (max-width: 760px) {
	.is-corp .reel__cell--lead img { object-position: 26% var(--pos, 30%); }
}

/* Совсем узкие экраны. Кнопка с подписью «Watch video» в один ряд уже не
   помещаются — подпись обрезалась по краю. Оставляем от просмотра один кружок:
   он и так читается, а ряд сохраняется. */
@media (max-width: 380px) {
	.is-corp .hero__play-label { display: none; }
	.is-corp .hero__play { gap: 0; }
	.is-corp .hero__actions { gap: .7rem; }

	/* Кнопке разрешено ужиматься. По умолчанию элемент строки не сжимается
	   ниже своей надписи, и на трёхстах двадцати пикселях кнопка выдавливала
	   кружок просмотра за край — в ряду его просто не было видно. */
	/* Ширину снимаем совсем: выше по файлу кнопке задано сто процентов, и она
	   занимала всю строку, выдавливая кружок просмотра за край. Пусть её размер
	   определяет сама строка. */
	.is-corp .hero__btn {
		width: auto;
		min-width: 0;
		flex: 1 1 auto;
		padding: 0 .6rem;
		font-size: .6rem;
		letter-spacing: .08em;
	}

	.hero__play-ring { width: 2.4rem; height: 2.4rem; }
}

/* --------------------------------------------- узкие экраны: мелкий текст */

/* Все служебные подписи набраны долей от ширины кадра, и на узком экране доля
   вырождается в восемь-десять пикселей — прописные с разрядкой на таком кегле
   уже не читаются, а сливаются в серую нить. Здесь у них свои меры, и ни одна
   не опускается ниже одиннадцати. */
@media (max-width: 1024px) {
	.is-corp .hero__btn,
	.is-corp .hero__btn .btn-flip__face { font-size: .72rem; letter-spacing: .14em; }

	.is-corp .hero__play-label { font-size: .72rem; letter-spacing: .14em; }
	.is-corp .hero__scroll { font-size: .7rem; letter-spacing: .14em; }
	.is-corp .about__our { font-size: .72rem; letter-spacing: .14em; }
	.is-corp .spec__cats-label { font-size: .8rem; }
	.is-corp .contact__label { font-size: .72rem; }
	.is-corp .book__label { font-size: .74rem; }

	.is-corp .quote__name { font-size: .85rem; }
	.is-corp .quote__where { font-size: .72rem; }

	.is-corp .header__btn,
	.is-corp .header__btn .btn-flip__face { font-size: .66rem; letter-spacing: .1em; }
	.is-corp .header__loc { font-size: .64rem; letter-spacing: .18em; }

	.is-corp .hero__city,
	.is-corp .hero__socials { font-size: .7rem; letter-spacing: .16em; }

	.is-corp .hero__scroll-label { font-size: .7rem; }
	.is-corp .spec__no { font-size: .72rem; }
	.is-corp .contact__socials a { font-size: .95rem; }
}

/* ------------------------------------------------- узкие экраны: отзывы */

/* Ширину карточек подбирает скрипт — он равняет число строк во всех отзывах и
   на телефоне выбирал полтысячи пикселей. Лента обрезана по краю экрана, и
   текст уезжал под обрез. Потолок — ширина экрана без полей. */
@media (max-width: 767px) {
	/* Ширину карточек подбирает скрипт, и на телефоне он берёт полтысячи
	   пикселей — лента обрезана по экрану, и текст уезжал под обрез. Здесь
	   карточка равна экрану без полей: одна в кадре, строки длиннее. Нижняя
	   граница обязательна — верхняя одна инлайновую ширину скрипта не
	   перебивает, а min-width перебивает всегда. */
	/* Карточка вытянута по вертикали: узкая и высокая, как на присланном
	   образце. В кадр попадает одна целиком и край соседней — по ней и видно,
	   что лента едет. */
	.quote {
		min-width: min(74vw, 320px);
		max-width: min(74vw, 320px);
	}
}

/* ------------------------------------------------- узкие экраны: слайдер */

/* Прикреплённый экран форматов складывается в колонку: кадр сверху, под ним
   линия, подпись, название и описание. Трёхколонный ряд тесен и на планшете —
   описанию остаётся ширина в одно-два слова, и название ложится поверх него.
   Поэтому граница здесь та же, что у остальной планшетной раскладки. */
@media (max-width: 1024px) {
	/* Зазор перед блоком форматов складывался из трёх кусков: собственный
	   верхний отступ сцены — сто девятнадцать пикселей, отступ прикреплённого
	   экрана — сто шесть, и поле над кадром внутри верхней части — ещё сто
	   тридцать. Вместе почти четыреста, при том что от блока доверия его
	   отделяет всего шестьдесят. Первые два снимаем, третий сводим к просвету
	   под шапкой. */
	.is-corp .about__stage { margin-top: 0; }

	/* body в селекторе не для красоты: у первого макета правило записано как
	   body.is-v2 .about__top, и по весу оно перебивает .is-corp .about__top. */
	body.is-corp .about__top {
		padding-top: 0;
		min-height: 0;
	}

	.is-corp .about__pin {
		grid-template-rows: auto auto auto;
		grid-template-columns: minmax(0, 1fr);
		/* Группа по центру экрана. Держать её у верха было нельзя: свободная
		   высота целиком уходила вниз, и под описанием зиял пустой экран —
		   ровно та же беда, что раньше была сверху. По центру остаток делится
		   пополам, и ни один край не читается провалом. Сам зазор до этого
		   срезан отступами блока и сцены. */
		align-content: center;
		/* На узких экранах общий стиль ставит justify-items: start, и ряд
		   сжимался по содержимому — а всё содержимое там вынуто из потока,
		   так что мерить было нечего: колонка выходила в семьдесят пикселей,
		   и описание падало по одному слову в строку. */
		justify-items: stretch;
		/* Полной высоты шапки здесь не нужно: она полупрозрачна и наезжает на
		   кадр только когда экран уже прикреплён, а на подходе к блоку кадр
		   и так стоит ниже неё. */
		padding-top: calc(var(--header-h) * .5);
		padding-bottom: clamp(1.6rem, 5vh, 3rem);
	}

	.is-corp .about__top {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		padding-top: 0;
	}

	/* На планшете кадру просторно: в прежние 260 пикселей он терялся посреди
	   пустого экрана. На телефоне ниже своё правило — там он во всю ширину. */
	.is-corp .about__shot {
		grid-column: 1;
		/* Мера и по высоте тоже: кадр квадратный, и одной ширины мало —
		   на узком планшете он вырастал так, что название с описанием
		   переставали помещаться и ложились прямо на него. */
		width: min(64vw, 520px, 46svh);
	}

	.is-corp .about__row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(.5rem, 1.8vh, 1rem);
	}

	/* Подпись возвращается: без неё блок теряет имя, а места на строку хватает. */
	.is-corp .about__our {
		display: block;
		grid-column: 1;
	}

	.is-corp .about__titles { font-size: clamp(1.6rem, 7.6vw, 2.7rem); }

	.is-corp .about__col--texts {
		width: 100%;
		min-height: clamp(5.5rem, 17vh, 7.5rem);
	}

	.is-corp .about__stage-text {
		max-width: none;
		font-size: .94rem;
		line-height: 1.55;
	}
}

/* ----------------------------------------------------------- motion */

/* Четыре плитки с петлями вместо прежней шахматки снимков. Ролик в плитке
   молчит и крутится сам, а по нажатию тот же материал открывается целиком
   в окне — поэтому плитка сделана кнопкой, а не просто кадром. */
.motion__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(.9rem, 1.6vw, 1.5rem);
	margin: clamp(2.4rem, 6vh, 4rem) 0 0;
	padding: 0;
	list-style: none;
}

.motion__cell { margin: 0; }

.motion__open {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	overflow: hidden;
	background: #101013;
	cursor: pointer;
}

.motion__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Тот же лёгкий увод, что у кадров в слайдере: сырые ролики ярче и
	   насыщеннее всего остального на странице. */
	filter: brightness(.92) saturate(.97);
	transition: transform .8s cubic-bezier(.25, .6, .25, 1), filter .5s ease;
}

.motion__open:hover .motion__video,
.motion__open:focus-visible .motion__video {
	transform: scale(1.035);
	filter: brightness(1) saturate(1);
}

/* Кольцо с треугольником — то же, что над кадром первого экрана. */
.motion__ring {
	position: absolute;
	left: 50%;
	top: 50%;
	display: grid;
	place-items: center;
	width: clamp(46px, 4.4vw, 62px);
	height: clamp(46px, 4.4vw, 62px);
	border: 1px solid rgba(245, 245, 245, .55);
	border-radius: 50%;
	background: rgba(11, 11, 13, .28);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transform: translate(-50%, -50%);
	transition: background .35s ease, border-color .35s ease, transform .35s ease;
}

.motion__open:hover .motion__ring,
.motion__open:focus-visible .motion__ring {
	background: rgba(11, 11, 13, .45);
	border-color: #F5F5F5;
	transform: translate(-50%, -50%) scale(1.06);
}

@media (max-width: 700px) {
	.motion__grid { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------- заставка */

/* Тёмный экран, марка посередине, тонкая полоса под ней. Больше ничего.

   Занавес лежит ПОВЕРХ шапки: так её в заставке не видно и — главное — её не
   приходится прятать. Накрытая кнопка не нажимается сама собой, а когда
   занавес уходит, она просто оказывается на виду и работает. */
.is-corp .preloader {
	z-index: 60;
	background: var(--bg);
	opacity: 1;
	transition: opacity .5s ease;
}

.is-corp .preloader.is-done { opacity: 0; }

.is-corp .preloader__field { display: none; }

.is-corp .preloader__center {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 5;
	display: grid;
	justify-items: center;
	gap: clamp(1.4rem, 3.4vh, 2.4rem);
	transform: translate(-50%, -50%);
}

/* Марка. Появляется мягко и слегка приближается — знак «страница пришла в
   движение», без суеты. */
.is-corp .preloader__logo {
	display: block;
	width: clamp(150px, 22vw, 260px);
	height: auto;
	opacity: 0;
	transform: scale(.965);
	animation: intro-logo .8s cubic-bezier(.22, .68, .28, 1) .06s forwards;
}

@keyframes intro-logo {
	to { opacity: 1; transform: none; }
}

/* Полоса загрузки. Узкая, во всю ширину марки: ход виден, а внимания на себя
   не тянет. */
.is-corp .preloader__bar {
	display: block;
	width: clamp(150px, 22vw, 260px);
	height: 2px;
	overflow: hidden;
	background: rgba(245, 245, 245, .14);
	border-radius: 2px;
	opacity: 0;
	animation: intro-bar .5s ease .34s forwards;
}

@keyframes intro-bar { to { opacity: 1; } }

.is-corp .preloader__bar i {
	display: block;
	width: 100%;
	height: 100%;
	background: #F5F5F5;
	transform: scaleX(var(--load, 0));
	transform-origin: 0 50%;
	/* Ход сглажен: доля растёт рывками, и без сглаживания полоса дёргалась бы
	   вместе с ней. */
	transition: transform .25s cubic-bezier(.3, .7, .2, 1);
}

/* Подписи по нижним углам: счётчик справа, год слева. Поля им выставляет
   скрипт — по марке в шапке, чтобы углы совпадали при любой ширине. */
.is-corp .preloader__tag,
.is-corp .preloader__since {
	position: absolute;
	bottom: 0;
	z-index: 5;
	margin: 0;
	font-family: var(--mono);
	font-size: .62rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: rgba(245, 245, 245, .55);
	opacity: 0;
	animation: intro-tag .5s ease .5s forwards;
}

.is-corp .preloader__tag--r { right: var(--gutter); }
.is-corp .preloader__since { left: var(--gutter); }

@keyframes intro-tag { to { opacity: 1; } }

.is-corp .preloader__pct {
	font-variant-numeric: tabular-nums;
	color: rgba(245, 245, 245, .85);
}

@media (prefers-reduced-motion: reduce) {
	.is-corp .preloader__logo,
	.is-corp .preloader__bar,
	.is-corp .preloader__tag,
	.is-corp .preloader__since { animation: none; opacity: 1; transform: none; }

	.is-corp .preloader__bar i { transition: none; }
}

@media (max-width: 760px) {
	.is-corp .preloader__logo,
	.is-corp .preloader__bar { width: clamp(130px, 46vw, 200px); }

	.is-corp .preloader__since { font-size: .56rem; letter-spacing: .14em; }
}

/* Появление первого экрана после заставки: содержимое въезжает от краёв
   кадра, а не проступает. Верхняя полоса опускается сверху, нижний блок
   поднимается снизу — экран собирается, а не проявляется.

   Боковые рейки сюда не взяты: у них свой поворот в transform, и подменять
   его значило бы переписывать всю их посадку. */
.is-corp .header {
	transition: opacity .55s ease .1s,
	            transform .95s cubic-bezier(.16, .84, .28, 1) .1s;
}

/* Шапка не гаснет вместе со страницей: она держит марку, которая должна
   гореть с первого кадра. */
body.is-corp.is-loading .header { opacity: 1; }

/* Шапка в заставке не участвует. Прежде её содержимое — меню, телефон,
   бургер — пряталось на время загрузки и опускалось потом; ход был красивый,
   но видимость кнопок оказывалась завязана на порядок снятия классов, и они
   застревали поднятыми над краем экрана: ни увидеть, ни нажать. Кнопка должна
   нажиматься просто так, а заставка — лежать поверх страницы и уйти. Ничего
   прятать не надо. */

.is-corp .hero__title,
.is-corp .hero__aside,
.is-corp .hero__play,
.is-corp .hero__scroll {
	transition: opacity .6s ease,
	            transform .95s cubic-bezier(.16, .84, .28, 1);
}

/* Лесенкой: сперва заголовок, следом правый столбец и мелочь по краям. */
.is-corp .hero__aside  { transition-delay: .09s; }
.is-corp .hero__play   { transition-delay: .15s; }
.is-corp .hero__scroll { transition-delay: .21s; }

body.is-corp.is-loading .hero__title,
body.is-corp.is-loading .hero__aside,
body.is-corp.is-loading .hero__play,
body.is-corp.is-loading .hero__scroll {
	opacity: 0;
	transform: translateY(58px);
}

/* ----------------------------------------------------------- header */

/* Клиент попросил укрупнить верх: весь визуальный вес первого экрана
   забирало видео, а марка на его фоне терялась. Логотип вырос в полтора
   раза, вместе с ним поднята высота полосы — иначе он упёрся бы в её края,
   — и на ступень подросли пункты меню с припиской у логотипа.

   Высота живёт переменной: по ней считаются и отступ якорей под шапку, и
   верхний воздух прикреплённого экрана. Правило стоит на теле, а не в
   :root, чтобы первый макет остался нетронутым; ниже 640 значение своё —
   базовое из style.css сюда уже не дотягивается. */
.is-corp { --header-h: 104px; }

.is-corp .logo__img,
.is-corp .preloader__logo {
	width: calc(140 * var(--u));
	height: calc(63.4 * var(--u));
}

.is-corp .header__loc {
	padding-left: calc(21 * var(--u));
	font-size: calc(12.2 * var(--u));
	letter-spacing: calc(2.6 * var(--u));
}

.is-corp .header__brand { gap: 1.35rem; }

.is-corp .nav__link {
	font-size: calc(20 * var(--u));
	line-height: calc(28 * var(--u));
}

@media (max-width: 1024px) {
	.is-corp { --header-h: 84px; }
	.is-corp .logo__img,
	.is-corp .preloader__logo { width: clamp(96px, 13vw, 124px); height: auto; }

	/* Ряд шапки — флекс, и телефонная кнопка в нём ужималась до своих полей:
	   обе её грани вынуты из потока, мерить нечего, а распорка внутри просто
	   вылезала за рамку — номер оказывался снаружи скобки. Ни кнопке, ни её
	   гнезду сжиматься нельзя. */
	.is-corp .header__side,
	.is-corp .header__btn { flex: none; }

	/* У малой кнопки ширина задана в кадровых единицах — на узком экране это
	   выходило тридцать четыре пикселя, и номер вылезал за скобку наружу.
	   Отпускаем по содержимому: держит его распорка внутри. */
	.is-corp .header__btn {
		width: auto;
		height: auto;
		padding: .62rem 1rem;
		font-size: .64rem;
	}
}

@media (max-width: 640px) {
	.is-corp { --header-h: 72px; }
	.is-corp .logo__img,
	.is-corp .preloader__logo { width: clamp(84px, 24vw, 104px); }
	.is-corp .nav__link { font-size: 16px; }

	/* На узком экране номер и бургер вдвоём не помещаются рядом с маркой:
	   номер ужимается до кода города и цифр без разрядки. */
	.is-corp .header__btn {
		padding: .5rem .72rem;
		font-size: .58rem;
		letter-spacing: .1em;
	}

	.is-corp .header__inner { gap: .7rem; }
}

.is-corp .section { padding-block: clamp(4.5rem, 11vh, 9rem); }

/* ------------------------------------------------------------ trust */

/* Четыре довода к вопросу из заголовка блока выше. Подача нарочно тихая:
   стоят они сразу за экраном со слайдером, и ещё одно движение следом
   читалось бы как суета — прежняя лента с бегущими плашками именно этим
   клиенту и мешала. Полоска над колонкой — тот же приём, что у перечня
   форматов ниже, так блоки держатся одной семьёй. */
/* Блок доверия собран по образцу, присланному клиентом: слева вопрос, и он
   держится на месте, пока справа одна за другой проходят строки ответа.
   Разделяют их линии сетки — вертикальная между колонками и по одной над
   каждой строкой. Верхняя линия идёт через обе колонки и служит зачином.

   Правая колонка шире левой: там длинные названия в две строки, а слева —
   короткий вопрос и абзац. */
.is-corp .trust__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
	column-gap: clamp(2rem, 5vw, 5rem);
	padding-top: clamp(2.4rem, 6vh, 4rem);
}

/* Ради этого блок и затевался: вопрос не уезжает, пока читаются ответы.
   align-self: start обязателен — растянутый на всю высоту элемент липким
   не бывает, ему нечем двигаться внутри своей ячейки. */
.is-corp .trust__aside {
	position: sticky;
	top: calc(var(--header-h) + clamp(1.6rem, 5vh, 3.4rem));
	align-self: start;
	/* Во всю высоту экрана — чтобы приглашению было куда опуститься:
	   прижимается оно к низу колонки, а колонка кончается у края окна. */
	display: flex;
	flex-direction: column;
	height: calc(100svh - var(--header-h) - clamp(1.6rem, 5vh, 3.4rem) - clamp(1.4rem, 4vh, 2.6rem));
}

/* Раздел центрирует свои заголовки, а этот стоит слева — вместе с абзацем и
   строками справа. Без явного выравнивания вторая строка вставала по центру
   под первой. */
.is-corp .trust__title {
	margin: 0;
	max-width: 18ch;
	text-align: left;
}

.is-corp .trust__lead {
	margin: clamp(1.2rem, 3vh, 2rem) 0 0;
	max-width: 46ch;
	text-align: left;
	font-size: clamp(1rem, 1.2vw, 1.18rem);
	line-height: 1.6;
	color: var(--text-mute);
}

.is-corp .trust__list {
	display: block;
	margin: 0;
	padding: 0 0 0 clamp(2rem, 5vw, 5rem);
	border-left: 1px solid var(--line-soft);
	list-style: none;
}

/* Поля ряда: после того как описания стали мельче, прежние семь процентов
   высоты экрана превращали каждый ряд в остров посреди пустого поля. */
.is-corp .trust__item {
	padding: clamp(1.9rem, 4.2vh, 3.1rem) 0;
	border-top: 1px solid var(--line-soft);
}

/* Верхней полосы у блока нет, поэтому первой строке своя линия тоже не нужна:
   иначе она висела бы одна, ни от чего не отделяя. */
.is-corp .trust__item:first-child {
	padding-top: 0;
	border-top: 0;
}

/* Появление — то же, что у присланного образца: строка приходит снизу,
   проявляясь и теряя размытие. Приглушённого ожидания больше нет: строка
   либо ещё не пришла, либо стоит в полную силу. */
.is-corp .trust__item {
	opacity: 0;
	transform: translateY(34px);
	filter: blur(7px);
	transition: opacity .9s ease,
	            transform 1s cubic-bezier(.22, .68, .28, 1),
	            filter .9s ease;
}

.is-corp .trust__item.is-in {
	opacity: 1;
	transform: none;
	filter: none;
}

/* Знак довода. Один набор на четыре строки: тонкая обводка в один тон, без
   заливок и без углов — та же графика, что у стрелок и кружка просмотра на
   странице. Крупный: на таком кегле заголовков мелкий значок читался бы
   мусором у строки, а не меткой раздела.

   Цвет притушен, чтобы знак не спорил с названием: он отмечает начало строки,
   а не заявляет о себе. */
.is-corp .trust__mark {
	display: block;
	margin: 0 0 clamp(.7rem, 1.5vh, 1.05rem);
	line-height: 0;
	color: rgba(245, 245, 245, .55);
}

.is-corp .trust__mark svg {
	width: clamp(56px, 4.4vw, 74px);
	height: auto;
}

@media (max-width: 900px) {
	.is-corp .trust__mark {
		margin-bottom: clamp(.8rem, 2vh, 1.2rem);
	}

	.is-corp .trust__mark svg { width: clamp(48px, 13vw, 62px); }
}

.is-corp .trust__name {
	margin: 0 0 clamp(.55rem, 1.2vh, .8rem);
	/* Меры нет: каждое название должно укладываться в одну строку. */
	max-width: none;
	font-family: var(--body);
	font-weight: 300;
	/* Кегль подобран по самому длинному названию: «Professional & Vendor-Ready»
	   должно укладываться в строку, а не переноситься. */
	font-size: clamp(1.7rem, 3.25vw, 3.3rem);
	line-height: 1.04;
	letter-spacing: -.03em;
	color: #F5F5F5;
}

/* Тот же набор, что у описаний под карточками форматов: один кегль, один вес
   и один тон на все описания сайта. */
.is-corp .trust__text {
	margin: 0;
	max-width: 46ch;
	font-family: var(--body);
	font-weight: 300;
	font-size: clamp(.8rem, .94vw, .96rem);
	line-height: 1.55;
	letter-spacing: -.01em;
	color: rgba(245, 245, 245, .62);
}

/* Ниже 900 колонки складываются в одну: липкости там негде работать — вопрос
   занял бы весь экран, — а вертикальная линия делить больше нечего. */
@media (max-width: 900px) {
	.is-corp .trust__grid { grid-template-columns: minmax(0, 1fr); row-gap: clamp(2rem, 6vh, 3.4rem); }
	/* Липкости здесь нет, а с ней не нужна и высота в целый экран: колонка
	   должна занимать ровно столько, сколько занимает её текст. */
	.is-corp .trust__aside {
		position: static;
		display: block;
		height: auto;
	}
	.is-corp .trust__list { padding-left: 0; border-left: 0; }
	.is-corp .trust__item:first-child { padding-top: clamp(2rem, 5vh, 3rem); border-top: 1px solid var(--line-soft); }
}

/* ------------------------------------------------------------- types */

/* The full inventory of formats, set as one continuous run of type: it
   reads as a list without needing bullets or boxes. */
/* Перечень форматов. Раньше по нему был набран и блок Event Types, сейчас
   он остался у Weddings и Private Events — разметка там прежняя. */
.types__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 clamp(1rem, 2.4vw, 2.2rem);
	margin: clamp(1.4rem, 3vh, 2.2rem) 0 0;
	padding: 0;
	list-style: none;
}

.types__item {
	font-family: var(--body);
	font-weight: 200;
	font-size: clamp(1.3rem, 3.1vw, 2.9rem);
	line-height: 1.34;
	letter-spacing: -.03em;
	color: var(--text-mute);
	transition: color .35s ease;
}

.types__item:hover { color: #F5F5F5; }

/* A hairline between items, never trailing at the end of a row. */
.types__item + .types__item::before {
	content: '';
	display: inline-block;
	width: clamp(.9rem, 2vw, 1.8rem);
	height: 1px;
	margin-right: clamp(1rem, 2.4vw, 2.2rem);
	vertical-align: middle;
	background: var(--line);
}

/* --------------------------------------------------- перечень форматов */

/* Счётчик разделов возле заголовка. Заголовок разбирается скриптом на буквы,
   разметку внутри он сохраняет, поэтому счётчик спокойно живёт внутри h2 и
   появляется вместе с остальными знаками. */
.is-corp .spec__count {
	font-size: .3em;
	vertical-align: super;
	color: var(--text-mute);
	letter-spacing: 0;
}

.is-corp .spec__list {
	--peek-w: clamp(14rem, 21vw, 22rem);
	/* Насколько каждая следующая карточка садится ниже предыдущей.
	   Ровно на эту полоску и видно, что под ней лежат другие. */
	--step: clamp(1.1rem, 2.4vh, 2rem);
	--dock: calc(var(--header-h) + clamp(1rem, 3vh, 2.2rem));
	/* Карточка почти во весь экран: пока их было по 320px, на экран
	   помещались сразу две и наползание не читалось. */
	--card-h: calc(100vh - var(--dock) - clamp(2.5rem, 7vh, 5rem));
	margin: clamp(2.4rem, 4.4vw, 4.4rem) 0 0;
	padding: 0;
	/* Своя область форматирования: иначе отступ последней карточки
	   схлопнется наружу и не удлинит список. */
	display: flow-root;
	list-style: none;
}

/* Стопка карточек. Каждая липнет под шапкой на своей высоте: первая выше
   всех, каждая следующая на шаг ниже - поэтому, когда она наезжает,
   от предыдущей остаётся видна полоска, и стопка читается как стопка.
   Слои по возрастанию, чтобы поздняя карточка ложилась поверх ранней,
   а её собственное фото не всплывало над соседкой: z-index заводит
   карточке свой контекст наложения.

   Внутри - те же три колонки: номер, название с описанием, перечень. */
.is-corp .spec__row {
	position: sticky;
	top: var(--dock);
	margin-bottom: clamp(1.6rem, 4vh, 3rem);
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1.25fr) minmax(0, .9fr);
	gap: clamp(1.2rem, 3vw, 3.4rem);
	/* Колонки - по верхней линии, а вся группа целиком - по центру карточки.
	   Разница принципиальная: при align-items: center каждая колонка
	   центруется сама по себе, и «Categories» с номером уезжают на разную
	   высоту в каждой карточке - объём текста и число плашек везде свои.
	   Здесь центруется ряд-дорожка, а внутри неё все прижаты к верху. */
	align-items: start;
	align-content: center;
	min-height: var(--card-h);
	/* Поле сверху вынесено в переменную: по нему же сажается кадр, чтобы он
	   стоял на одной линии с номером, названием и «Categories». */
	--pad-y: clamp(1.6rem, 4vh, 2.6rem);
	padding: var(--pad-y) clamp(1.4rem, 3vw, 2.8rem);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-lift);
	overflow: hidden;
	/* Насколько притушено видео на фоне. Одно число на всю правку:
	   больше - темнее и текст читается спокойнее, меньше - ролик ярче. */
	--veil: .74;
}

.is-corp .spec__row:nth-child(1) { z-index: 1; }
.is-corp .spec__row:nth-child(2) { top: calc(var(--dock) + var(--step)); z-index: 2; }
.is-corp .spec__row:nth-child(3) { top: calc(var(--dock) + var(--step) * 2); z-index: 3; }

/* Запас под стопкой - иначе она распадается ровно в тот момент, когда
   наезжает последняя карточка. Ни полем списка, ни отступом карточки это
   не решается: область удержания липкого элемента считается по родителю
   и вдобавок уменьшается на собственные поля элемента. Поэтому отдельным
   пустым элементом в потоке. */
.is-corp .spec__spacer {
	/* Короткая: она задаёт, сколько собранная стопка стоит на месте до
	   того, как уехать. Последнюю карточку зритель уже разглядел, пока она
	   поднималась, так что держать её дольше - пустая прокрутка. */
	height: clamp(3rem, 10vh, 7rem);
	list-style: none;
	pointer-events: none;
}

.is-corp .spec__row:last-of-type { margin-bottom: 0; }

/* Содержимое поверх фона и завесы: без своего слоя оно остаётся
   непозиционированным, а видео и завеса позиционированы - и ложатся
   сверху, закрывая текст. */
.is-corp .spec__no,
.is-corp .spec__main,
.is-corp .spec__cats { position: relative; z-index: 1; }

.is-corp .spec__no {
	font-family: var(--mono);
	font-size: .78rem;
	letter-spacing: .08em;
	color: var(--text-mute);
	/* Ловим первую строку названия, а не верх его коробки. */
	padding-top: .5em;
}

.is-corp .spec__name {
	margin: 0;
	font-family: var(--body);
	font-weight: 300;
	font-size: clamp(2.8rem, 5.2vw, 4.8rem);
	line-height: 1.05;
	letter-spacing: -.03em;
	color: var(--text);
}

.is-corp .spec__text {
	margin: clamp(.6rem, 1.4vh, 1rem) 0 0;
	/* Уже колонки: по центру строки висит кадр, и самая длинная строка
	   текста не должна доходить до его края. */
	max-width: 30ch;
	font-family: var(--body);
	font-weight: 200;
	font-size: .875rem;
	line-height: 1.55;
	color: var(--text-mute);
}

.is-corp .spec__cats-label {
	margin: 0 0 .7rem;
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-mute);
}

.is-corp .spec__tags {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin: 0;
	padding: 0 0 .2rem;
	list-style: none;
}

/* Плашки без заливки: светлый контур и белые буквы. Скругление общее для
   сайта, не пилюля. */
.is-corp .spec__tag {
	padding: .55em 1.05em .6em;
	border: 1px solid rgba(245, 245, 245, .35);
	border-radius: var(--radius);
	background: none;
	font-family: var(--body);
	font-weight: 300;
	/* Кегль крупнее прежнего: клиент просил, чтобы категории читались, а не
	   стояли примечанием. */
	font-size: 1.26rem;
	line-height: 1.25;
	letter-spacing: -.015em;
	color: #F5F5F5;
	white-space: nowrap;
}

/* Кнопка ролика. Оформление целиком с первого экрана, здесь только
   снимается его абсолютная посадка и убавляются размеры. */
.is-corp .spec__play {
	position: static;
	margin-top: clamp(.9rem, 2vh, 1.4rem);
	gap: .6rem;
}

.is-corp .spec__play .hero__play-ring {
	width: 2.1rem;
	height: 2.1rem;
	padding-left: 1px;
}

.is-corp .spec__play .hero__play-ring img { width: .72rem; height: .72rem; }

.is-corp .spec__play .hero__play-label {
	font-size: .66rem;
	line-height: 1;
	letter-spacing: .15em;
}

/* Видео на фоне карточки вместо кадра по центру. Кроется скруглением
   самой карточки, поэтому у неё overflow. Поверх - ровная тёмная завеса:
   без неё белый текст и контурные плашки на светлых кадрах пропадают. */
.is-corp .spec__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* На треть тише: ролик остаётся фоном, а не спорит с текстом. */
	opacity: .7;
	pointer-events: none;
}

/* Завеса - последним псевдоэлементом, поэтому ложится поверх видео при
   том же слое, а содержимое со своим z-index остаётся выше обоих. */
.is-corp .spec__row::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(11, 11, 13, var(--veil));
	pointer-events: none;
}

/* Движение отключено в системе - скрипт видео не запускает, на экране
   остаётся первый кадр из poster. */
@media (prefers-reduced-motion: reduce) {
	.is-corp .spec__row { --veil: .8; }
}

/* Кнопка ровно та же, что на первом экране, поэтому своих размеров ей не
   назначаем - только место в подвале перечня. */
/* Нижнее поле снимаем у той карточки, что идёт последней на виду. Правило по
   :last-of-type до неё не дотягивалось: последним в списке стоит распорка —
   такой же li, — и «последним своего рода» браузер считал её. Целимся по
   предпоследнему ребёнку. */
.is-corp .spec__list > .spec__row:nth-last-child(2) { margin-bottom: 0; }

.is-corp .spec__foot {
	display: flex;
	justify-content: center;
	/* Ровно пятьдесят пикселей и не больше. Прежний просвет считался долей
	   высоты экрана и на планшете разрастался так, что кнопка читалась началом
	   следующего блока, а не концом этого. */
	padding-top: 50px;
}

@media (max-width: 900px) {
	.is-corp .spec__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.2rem;
		/* relative, а не static: липкость этим снимается так же, но карточка
		   остаётся системой отсчёта для фонового видео. При static оно
		   срывалось с якоря, растягивалось на весь документ, всегда попадало
		   в поле зрения - и все три ролика качались на первой же загрузке. */
		position: relative;
		/* Ростом с две трети экрана: по содержимому карточка выходила плоской
		   плашкой, и стопка не читалась стопкой. Липкости здесь нет, поэтому
		   считать от --card-h незачем — берём прямо от экрана. */
		min-height: 62svh;
	}
	.is-corp .spec__no { padding-top: 0; }
	.is-corp .spec__text { max-width: none; }
}

/* --------------------------------------------------------------- why */

/* Заголовок по центру, перечень под ним — тоже по центру. */
.is-corp .why__title { max-width: none; }

/* Перечень. Строка при наведении заливается светлой полосой, которая
   въезжает с той стороны, откуда пришёл курсор. Направление считает
   скрипт, здесь только начальное положение и переход. */
/* Перечень идёт от края до края, вне контейнера: у образца он тоже во всю
   ширину. Строки высокие, набор крупный. */
.flow {
	width: 100%;
	margin: clamp(2.4rem, 4.4vw, 4.4rem) 0 0;
	padding: 0;
	list-style: none;
}

.flow__item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: clamp(4.4rem, 10vh, 7.5rem);
	/* Линии нарисованы внутренней тенью, а не рамкой. Рамка лежит по краю
	   строки, а белая полоса при наведении ложится внутрь и до края не
	   достаёт — линия оставалась на тёмном фоне и читалась серой поперёк
	   белого. Внутреннюю тень полоса накрывает целиком.
	   У соседних строк линии совпадают, поэтому двойных нет. */
	box-shadow: inset 0 1px 0 rgba(245, 245, 245, .2),
	            inset 0 -1px 0 rgba(245, 245, 245, .2);
	overflow: hidden;
	cursor: pointer;
}

.flow__label {
	font-family: var(--body);
	font-weight: 300;
	font-size: 4vh;
	line-height: 1.2;
	letter-spacing: -.03em;
	color: #F5F5F5;
}

/* Полоса. По умолчанию убрана вниз; скрипт ставит её вверх, если курсор
   пришёл сверху. */
.flow__strip {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	background: #F5F5F5;
	transform: translateY(101%);
	will-change: transform;
}

/* Отступы внутри полосы — значения образца: у слова padding 1vh 1vw 0, у
   плашки margin 2em 2vw. Своего зазора у ленты нет, всё расстояние набирают
   эти поля. */
.flow__track {
	display: flex;
	align-items: center;
	width: max-content;
	will-change: transform;
}

.flow__word {
	font-family: var(--body);
	font-weight: 300;
	font-size: 4vh;
	line-height: 1.2;
	padding: 1vh 1vw 0;
	letter-spacing: -.03em;
	white-space: nowrap;
	color: var(--bg);
}

/* Плашка в пропорции самих кадров (1376:768), а не капсула образца. Все
   восемь снимков одного размера и масштаб предмета внутри выставлен при
   съёмке — поэтому кадр показывается целиком, без обрезки: только так
   масштабы совпадают между строками. Поля и скругление от образца. */
.flow__plate {
	flex: none;
	display: block;
	height: 7vh;
	aspect-ratio: 1376 / 768;
	margin: 2em 2vw;
	border-radius: 12px;
	overflow: hidden;
	background: #FFF;
}

.flow__plate img {
	display: block;
	width: 100%;
	height: 100%;
	/* Пропорция плашки равна пропорции кадра, поэтому обрезать нечего. */
	object-fit: contain;
}

@media (max-width: 860px) {
	.flow__item { height: clamp(3.6rem, 8vh, 5rem); }
}

/* ----------------------------------------------------------- clients */

/* Строится по эталону Origin: центрированный заголовок в две части и сетка
   квадратных плашек, которые проявляются одна за другой. */
.clients__inner { text-align: center; }

/* Заголовок этого раздела — обычный section__head: то же начертание, тот
   же посимвольный выход из размытия, что у «A vendor you don't have to
   worry about». Своего здесь только два: выключка по центру, под стать
   сетке плашек, и собственная середина кегля при общих пределах. */
.clients__title {
	max-width: none;
	margin: 0 auto;
	font-size: clamp(2.5rem, 4.98vw, 4.9rem);
	text-align: center;
}

/* Движение «как Works» с полосой воздуха и затуханием снизу отложено, а не
   выброшено: скрипт scrubTitles в main.js ждёт атрибута data-scrub-title и
   без него молчит. Вернуть — значит поставить атрибут обратно и снять с
   заголовка section__head. */
.scrub__c {
	display: inline-block;
	will-change: transform, opacity;
}

/* Мера сетки — собственная у Origin: четыре квадрата по 13.33vw с зазором
   2.22vw, дальше она не растёт. Вынесена в переменную, потому что по этой
   же мере строится список FAQ — два блока должны сидеть на одной сетке и не
   разъехаться при следующей правке. */
.is-corp { --row-4: calc(4 * 13.33vw + 3 * 2.22vw); }

.clients__row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(.7rem, 2.22vw, 2.4rem);
	width: 100%;
	max-width: var(--row-4);
	/* Тот же просвет под заголовком, что у списка в «Почему DJ ART». */
	margin: clamp(2.4rem, 6vh, 4rem) auto 0;
	padding: 0;
	list-style: none;
}

.clients__plate {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border: 1px solid rgba(255, 255, 255, .05);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .02);
	transition: border-color .35s ease, background .35s ease;
}

.clients__plate:hover {
	border-color: rgba(255, 255, 255, .14);
	background: rgba(255, 255, 255, .04);
}

/* Марки белые и на прозрачном фоне, поэтому обесцвечивать нечего: работает
   только приглушение, которое снимается при наведении на плашку.

   Мера задана по высоте с потолком по ширине — так длинный шрифтовой знак
   не разъезжается на всю плашку, а короткий не проваливается. Это же делает
   Origin своими .brand / .brand.smaller, только двумя ступенями. */
.clients__logo {
	max-width: 64%;
	max-height: 26%;
	object-fit: contain;
	opacity: .82;
	transition: opacity .35s ease;
}

.clients__plate:hover .clients__logo { opacity: 1; }

/* Круглый знак при одинаковой высоте читается мельче остальных — ему нужен
   свой размер. У клиента на сайте он выставлен ровно так же, отдельно. */
.clients__logo--badge { max-width: 34%; max-height: 34%; }

/* Появление: у Origin плашки не едут, а проступают из размытия — 16px в
   ноль, по одной каждые 0.3 с, один раз. */
.is-corp [data-stagger] > * {
	opacity: 0;
	filter: blur(16px);
	transition: opacity .5s ease, filter .5s ease;
}

.is-corp [data-stagger].is-in > * {
	opacity: 1;
	filter: none;
}

@media (prefers-reduced-motion: reduce) {
	.is-corp [data-stagger] > * { opacity: 1; filter: none; transition: none; }
}

@media (max-width: 860px) {
	.clients__row { grid-template-columns: repeat(2, 1fr); max-width: none; }
}

/* ---------------------------------------------------------- packages */

/* Карточка состава — карточка Works у эталона, значение в значение.
   Их метрика: обойма во весь малый экран, кадр 90vw x 90vh абсолютом по
   центру с клипом-многоугольником, поверх — имя по дуге в режиме
   exclusion, и плашка 8rem x 2rem, которая тянется за курсором. */
.work-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.work {
	position: relative;
	/* Обрезка по карточке. Имя состава на дуге и плашка за курсором заходят
	   за края экрана — без этого страница получала горизонтальную прокрутку
	   в полтора десятка пикселей. */
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100svh;
}

/* Клип продолжает вести скрипт; здесь он объявлен, чтобы кадр был обрезан
   ещё до того, как скрипт до него доберётся. */
.work__shot {
	/* Кадр тоже открывает окно, поэтому это кнопка — снимаем её оформление. */
	display: block;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
	position: absolute;
	width: 90vw;
	height: 90vh;
	will-change: clip-path;
	clip-path: polygon(25% 25%, 75% 40%, 100% 100%, 0% 100%);
}

/* У эталона object-fit не задан вовсе, то есть снимок тянется под рамку
   90vw x 90vh без сохранения пропорций. Кадры у нас 3:2, рамка около 16:9 —
   растяжение выходило под 19% по горизонтали и было заметно на лицах,
   поэтому кадрируем. Сознательное расхождение с оригиналом. */
.work__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Кадр снят чуть выше центра: при обрезке до широкой рамки окно надо
   поднять, иначе макушка уходит под верхний край. */
.work[data-word="DJ + Sax"] .work__img,
#pkg-2 .pkg__shot img { object-position: 50% 28%; }

/* Полоса под дугой. Лежит внутри кадра, поэтому обрезается тем же клипом и
   деформируется вместе с ним. Края растворяются, так что это читается как
   тень на снимке, а не как плашка. */
.work__shot::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		transparent 20%,
		rgba(6, 6, 8, .52) 36%,
		rgba(6, 6, 8, .52) 60%,
		transparent 76%
	);
}

/* z-index не нужен: и кадр, и строка позиционированы без него, поэтому
   порядок в разметке сам кладёт строку выше. (Раньше здесь стояло, что
   z-index убил бы наложение — это неверно: у эталона z-index: 10 висит
   ровно на том элементе, который смешивается, и всё работает. Группу
   наложения задаёт ближайший изолирующий предок, а не сам элемент.)

   Кегль стоит и здесь, и на самой строке — у эталона класс .svg висит разом
   на контейнере и на <text>. Это не дубль: от кегля контейнера растёт
   строчный слепок, а он и поднимает коробку с дугой примерно на 24px выше
   середины карточки. Без него дуга садится по центру, и это заметно. */
.work__script {
	position: relative;
	width: 100%;
	font-size: 6rem;
	/* У эталона строчный слепок растёт от интерлиньяжа 1.7, у нас по умолчанию
	   1.6 — из-за этого коробка поднималась на 2-3px меньше. */
	line-height: 1.7;
	pointer-events: none;
}

/* Строчный намеренно: у эталона у <svg> нет своего правила, он остаётся
   inline. Под ним от этого держится зазор на выносной элемент (~47px), и
   вся коробка садится примерно на 24px выше середины карточки. С display:
   block зазор пропадает и строка едет вниз — расхождение с оригиналом. */
/* overflow не переопределяем: у эталона своего правила на <svg> нет, и
   действует значение по умолчанию — всё, что выходит за viewBox, режется.
   На 6rem и 7rem до края не достаёт ничто, а на 10rem (479px) выносные
   элементы у эталона обрезаются — теперь и у нас. */
.work__script svg {
	width: 100%;
}

/* Буквы просто белые. Читаемость на любом кадре даёт не эффект на самих
   буквах, а затемняющая полоса на фотографии ровно там, где идёт дуга (см.
   .work__shot::after). Так буквы остаются чистого цвета, без подмены и без
   обводки, и ничего не пересчитывается на каждом кадре. */
.work__text {
	font-family: var(--body);
	font-size: 6rem;
	font-weight: 500;
	letter-spacing: -.03em;
	fill: #F5F5F5;
}

@media (max-width: 767px) {
	.work__script,
	.work__text { font-size: 7rem; }
}

@media (max-width: 479px) {
	.work__script,
	.work__text { font-size: 10rem; }
}

/* Плашка за курсором. Ход её — от эталона, а вид наш: та же рамка в
   волосок, тот же радиус и тот же моношрифт вразрядку, что у кнопок на
   первом экране. Размытие подложки, которое стоит у эталона, снято: на
   элементе, который двигается каждый кадр, оно дорого и на слабой карте
   даёт рывки — вместо него глухая подложка. Ширину плашка берёт по
   надписи, как и остальные кнопки. */
.work__tag {
	/* Теперь это кнопка, открывающая окно, а не ссылка. */
	font: inherit;
	cursor: pointer;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	display: grid;
	place-items: center;
	height: 2.9rem;
	padding: 0 1.5rem;
	border: 1px solid #F5F5F5;
	border-radius: var(--radius);
	background: rgba(11, 11, 13, .55);
	text-decoration: none;
	opacity: 0;
	/* Центрируется отрицательным отступом, как на первом экране Peroni: тогда
	   в transform остаётся только сдвиг, который ведёт скрипт, и браузеру не
	   надо разрешать проценты на каждом кадре. */
	margin-top: -1.45rem;
	will-change: transform, opacity;
}

.work__tag-label {
	font-family: var(--display);
	font-size: .67rem;
	line-height: 1;
	letter-spacing: .18em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #F5F5F5;
}

/* Курсора там нет, а значит нет и плашки — у эталона ровно та же граница. */
@media (max-width: 991px) {
	.work__tag { display: none; }
}

/* ---------------------------------------------------------- lightbox */

/* Ролик поверх страницы. Отдельного раздела под него в структуре клиента
   нет, а кнопка на первом экране есть. */
.lightbox {
	position: fixed;
	inset: 0;
	/* Выше всего, включая шапку и полосу размытия. */
	z-index: 1200;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 4vw, 3.5rem);
	background: rgba(6, 6, 8, .93);
	backdrop-filter: blur(12px);
	opacity: 0;
	transition: opacity .35s ease;
}

/* Бьёт display: grid — без этого скрытый оверлей продолжал бы занимать
   экран и перехватывать нажатия. */
.lightbox[hidden] { display: none; }

.lightbox.is-open { opacity: 1; }

.lightbox__frame {
	width: min(100%, 1180px);
	border-radius: var(--radius);
	overflow: hidden;
	background: #000;
}

.lightbox__video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	background: #000;
}

/* Кнопки окна — крестик и стрелки. В покое это едва заметный тёмный диск
   без рамки; при наведении он заливается светлым, а знак становится
   тёмным. Одно движение вместо трёх, и то же правило, что у круглой кнопки
   на первом экране: заливка — признак действия. */
.lightbox__close,
.viewer__nav {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 1px solid rgba(245, 245, 245, .22);
	border-radius: 50%;
	background: rgba(11, 11, 13, .5);
	color: #F5F5F5;
	cursor: pointer;
	transition: background .3s ease, border-color .3s ease;
}

/* Увеличения при наведении здесь быть не должно: кнопка растёт, край
   уезжает из-под курсора, наведение слетает и тут же возвращается — она
   дрожит и в неё невозможно попасть. Меняется только заливка. */
/* Тот же язык, что у остальных элементов управления на сайте: рамка в
   полный тон и лёгкая заливка. Ни выворотки, ни движения — от движения
   кнопка дрожала и в неё было не попасть. */
.lightbox__close:hover,
.lightbox__close:focus-visible,
.viewer__nav:hover,
.viewer__nav:focus-visible {
	border-color: #F5F5F5;
	background: rgba(245, 245, 245, .14);
	outline: none;
}

/* Нажатие — можно: курсор уже прижат, слететь наведению некуда. */
.lightbox__close:active,
.viewer__nav:active { transform: scale(.94); }

/* Заявка выезжает панелью от правого края. Приём взят с Солдат.рф:
   затемнение проявляется, панель едет по X. Остальные окна
   разворачиваются по центру и этих правил не касаются. */
.lightbox--drawer {
	place-items: stretch;
	justify-items: end;
	padding: 0;
}

.drawer {
	position: relative;
	width: min(30rem, 94vw);
	height: 100%;
	overflow-y: auto;
	padding: clamp(3.4rem, 7vh, 5rem) clamp(1.5rem, 3vw, 2.6rem) clamp(2rem, 5vh, 3rem);
	background: var(--bg-sunk);
	border-left: 1px solid var(--line);
	transform: translateX(100%);
	transition: transform .6s cubic-bezier(.625, .05, 0, 1);
}

.lightbox--drawer.is-open .drawer { transform: translateX(0); }

/* Позвали из окна состава — разворачиваем по центру, как и само это окно.
   Панель превращается в обычную раму: ход по X снят, появление берёт на
   себя затухание оверлея. */
.lightbox--drawer.is-centred { place-items: center; padding: clamp(1rem, 4vw, 3.5rem); }

.lightbox--drawer.is-centred .drawer {
	width: min(32rem, 100%);
	height: auto;
	max-height: 88vh;
	padding: clamp(1.4rem, 3vw, 2.2rem);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transform: none;
}

/* Внутри панели у формы нет своей рамы: рамой служит сама панель. */
.drawer .book {
	width: 100%;
	max-height: none;
	overflow: visible;
	padding: 0;
	border: 0;
	background: none;
}

.drawer .lightbox__close {
	top: clamp(1.1rem, 2.4vh, 1.8rem);
	right: clamp(1.1rem, 2.4vw, 1.8rem);
}

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

.lightbox__close {
	top: clamp(1rem, 3vw, 2.2rem);
	right: clamp(1rem, 3vw, 2.2rem);
}

.viewer__nav {
	top: 50%;
	margin-top: -25px;
}

.viewer__nav--prev { left: clamp(.7rem, 2.4vw, 2.2rem); }
.viewer__nav--next { right: clamp(.7rem, 2.4vw, 2.2rem); }

.viewer__count {
	position: absolute;
	left: 50%;
	/* Ниже, к самой кромке: поля рамы одинаковые со всех сторон, и просвет
	   над счётчиком набирается за счёт его собственного положения. */
	bottom: .7rem;
	transform: translateX(-50%);
	margin: 0;
	font-family: var(--mono);
	font-size: .66rem;
	letter-spacing: .16em;
	color: var(--text-mute);
}

/* --------------------------------------------------------------- заявка */

/* Состав полей — с формы, которая уже стоит у клиента. Оформление наше:
   тонкая рамка, подписи моношрифтом вразрядку, кнопка с тем же переворотом,
   что на первом экране. */
.book {
	width: min(100%, 32rem);
	max-height: 88vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: clamp(.7rem, 1.6vw, 1rem);
	padding: clamp(1.4rem, 3vw, 2.2rem);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-sunk);
	text-align: left;
}

/* Широкий вариант формы — тот же набор полей, но в один ряд: она стоит
   на последнем экране во всю ширину, а не в узком окне. Пара «Дата и
   время» лежит в своей обёртке, поэтому она отдаёт детей общей сетке
   через display: contents, иначе занимала бы одну колонку на двоих. */
.is-corp .book--wide {
	width: 100%;
	/* Та же мера, что у списка FAQ и ряда логотипов: ширина четырёх плиток
	   с промежутками. По ней на странице выстроены все центрованные блоки. */
	max-width: var(--row-4);
	max-height: none;
	overflow: visible;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(.8rem, 1.5vw, 1.4rem);
	align-items: end;
	position: relative;
	/* Матовое стекло: под плашкой ходят пряди, и глухой фон их бы срезал.
	   Полупрозрачная подложка плюс размытие того, что за ней — движение
	   читается сквозь плашку, а поля остаются разборчивыми. Рамка светлее
	   обычной: на подвижном фоне тонкая линия иначе теряется. */
	background: rgba(18, 18, 22, .55);
	-webkit-backdrop-filter: blur(22px) saturate(115%);
	backdrop-filter: blur(22px) saturate(115%);
	border-color: rgba(245, 245, 245, .18);
	margin: clamp(2rem, 5vh, 3.2rem) auto 0;
	padding: clamp(1.2rem, 2.4vw, 1.8rem);
}

.is-corp .book--wide .book__row { display: contents; }

/* Три колонки: имя, телефон, почта в один ряд, кнопка во всю ширину под
   ними. Это запись на консультацию, а не бронь события — полей про само
   мероприятие здесь нет, они в панели заявки. */
.is-corp .book--wide .book__send { grid-column: 1 / -1; align-self: end; }
.is-corp .book--wide .book__done { grid-column: 1 / -1; margin-top: .4rem; }

@media (max-width: 900px) {
	.is-corp .book--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.is-corp .book--wide .book__send { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
	.is-corp .book--wide { grid-template-columns: minmax(0, 1fr); }
}

.book__title {
	margin: 0 0 .4rem;
	font-family: var(--body);
	font-weight: 300;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	line-height: 1.1;
	letter-spacing: -.03em;
	color: #F5F5F5;
}

.book__field {
	display: flex;
	flex-direction: column;
	gap: .38rem;
	min-width: 0;
}

.book__label {
	font-family: var(--mono);
	font-size: .6rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-mute);
}

.book__input {
	width: 100%;
	padding: .78rem .9rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .02);
	font-family: var(--body);
	font-size: .92rem;
	color: #F5F5F5;
	/* Именно background-color, а не background: в сокращении лежит и картинка
	   фона, а у поля выбора это стрелка — браузер начинал переливать её
	   и возить по месту, и знак дёргался при наведении. */
	transition: border-color .3s ease, background-color .3s ease;
}

/* Нативное поле даты выше остальных на пару пикселей — у него свой
   внутренний виджет. В ряд это заметно, поэтому однострочным полям
   задана общая высота, а вертикальные поля отданы центрированию. */
.book__input:not(textarea) {
	height: 2.85rem;
	padding-top: 0;
	padding-bottom: 0;
	line-height: 1.2;
}

/* Chrome рисует у поля даты собственный индикатор — приглушаем его до
   тона остального набора. */
.book__input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1);
	opacity: .45;
	cursor: pointer;
}

.book__input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: .8; }

.book__input:focus {
	outline: none;
	border-color: rgba(245, 245, 245, .5);
	background: rgba(255, 255, 255, .04);
}

/* Телефон: приставка с кодом страны и поле рядом, вместе — одна рамка. */
.book__tel {
	display: flex;
	align-items: stretch;
	/* Та же высота, что у одиночного поля: своя рамка добавляла обёртке
	   пару пикселей, и телефон вставал выше соседей по ряду. */
	height: 2.85rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .02);
	/* Именно background-color, а не background: в сокращении лежит и картинка
	   фона, а у поля выбора это стрелка — браузер начинал переливать её
	   и возить по месту, и знак дёргался при наведении. */
	transition: border-color .3s ease, background-color .3s ease;
}

.book__tel .book__input { height: 100%; }

.book__tel:focus-within {
	border-color: rgba(245, 245, 245, .5);
	background: rgba(255, 255, 255, .04);
}

.book__code {
	display: grid;
	place-items: center;
	padding: 0 .2rem 0 .9rem;
	font-family: var(--body);
	font-size: .92rem;
	color: var(--text-mute);
}

/* Рамка теперь на обойме, у самого поля её быть не должно. */
.book__tel .book__input {
	border: 0;
	background: none;
	padding-left: .35rem;
}

.book__tel .book__input:focus { background: none; }

/* Выбор часа. Собственную стрелку системы снимаем и рисуем свою, иначе на
   тёмном поле она остаётся тёмной и не видна. */
.book__select {
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	padding-right: 2.6rem;
	/* Стрелка одной картинкой. Прежде её складывали из двух половинок двумя
	   градиентами, а их позиции отличались на .3rem при размере в 6px — половинки
	   вставали с нахлёстом, и вместо треугольника выходила косая фигура. Заодно
	   это теперь птичка в обвод, как все прочие знаки на странице, а не заливка. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none' stroke='%23F5F5F5' stroke-opacity='.55' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.2 1.3 5.5 5.6 9.8 1.3'/%3E%3C/svg%3E");
	background-position: right 1rem center;
	background-size: 11px 7px;
	background-repeat: no-repeat;
	cursor: pointer;
}

/* Поле даты получает свой знак календаря — на том же месте, что птичка у
   списка. Родной значок у каждой системы свой: на одной календарик, на другой
   такая же птичка, и стоят они по-разному — рядом два поля выглядели
   несогласованно. Родной прячем прозрачностью, а не display: none, чтобы
   нажатие по нему по-прежнему открывало выбор даты. */
.is-corp .book__input[type="date"] {
	/* Родное оформление поля снимаем целиком: система рисует к нему свою
	   стрелку, и рядом с нашим календарём получалось два значка. Открывает
	   выбор теперь нажатие по всему полю — это делает скрипт. */
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	padding-right: 2.6rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none' stroke='%23F5F5F5' stroke-opacity='.55' stroke-width='1.1' stroke-linecap='round'%3E%3Crect x='1.2' y='2.6' width='12.6' height='11.2' rx='1.6'/%3E%3Cpath d='M1.2 6.2h12.6M4.6 1.2v2.6M10.4 1.2v2.6'/%3E%3C/svg%3E");
	background-position: right 1rem center;
	background-repeat: no-repeat;
}

/* Родной значок убран: вместо него свой календарь, а открывает выбор нажатие
   по всему полю. */
.is-corp .book__input[type="date"]::-webkit-calendar-picker-indicator {
	display: none;
	-webkit-appearance: none;
}

/* Раскрытый список рисует система — на тёмной странице он останется
   светлым, поэтому его собственные цвета задаём явно. */
.book__select option {
	background: var(--bg-sunk);
	color: #F5F5F5;
}

.book__input--area {
	resize: vertical;
	min-height: 5.5rem;
	line-height: 1.5;
}

/* Собственная иконка календаря у поля даты тёмная на тёмном — осветляем. */
.book__input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .5; cursor: pointer; }
.book__input::-webkit-calendar-picker-indicator:hover { opacity: .9; }

.book__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(.7rem, 1.6vw, 1rem);
}

.book__field.is-bad .book__input { border-color: #B4553F; }

.book__send {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 100%;
	height: 3.4rem;
	margin-top: .5rem;
	padding: 0 1.6rem;
	border: 1px solid #F5F5F5;
	border-radius: var(--radius);
	background: none;
	font-family: var(--display);
	font-size: .68rem;
	line-height: 1;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #F5F5F5;
	cursor: pointer;
	white-space: nowrap;
}

.book__done {
	margin: 0;
	padding: .9rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .03);
	font-size: .88rem;
	line-height: 1.5;
	color: var(--text-soft);
}

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

/* ----------------------------------------------------------- gallery */

/* Заголовок стоит в потоке над сеткой и уезжает вверх при прокрутке —
   закрепляется только сама сетка. Раньше он был наложен поверх и вместе с
   разделом застревал у верхней кромки. */
.is-corp .gallery {
	padding-block: clamp(3rem, 8vh, 6rem) 0;
}

.shots {
	width: 100%;
	max-width: 100vw;
	/* Тот же просвет под заголовком, что у списка FAQ и ряда логотипов. */
	margin: clamp(2.4rem, 4.4vw, 4.4rem) auto 0;
	overflow: hidden;
}

/* Сетка во весь экран, кадр 49.5vh — значения эталона. */
.shots__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1vw;
	align-content: space-between;
	place-items: center;
	width: 100%;
	height: 100vh;
	position: relative;
}

.shots__cell {
	position: relative;
	display: block;
	width: 100%;
	height: 49.5vh;
	padding: 0;
	border: 0;
	background: none;
	border-radius: var(--radius);
	overflow: hidden;
	cursor: pointer;
	transform: translate3d(0, 0, .1px);
	/* preserve-3d здесь убран намеренно: в паре с overflow: hidden и
	   скруглением он ломает обрезку углов на время перехода. Перспектива
	   задана на сетке, поворот кадра от этого не страдает. */
}

/* Снимок прижат к краям ячейки абсолютом — так его размер не зависит от
   разрешения процентов внутри сетки. */
.shots__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* Своё скругление, а не только обрезка родителем: на время перехода
	   непрозрачности снимок уезжает в отдельный слой, и обрезка по
	   border-radius у родителя на кадр перестаёт действовать. */
	border-radius: inherit;
	object-fit: cover;
	object-position: 50% 35%;
	will-change: opacity;
	transition: opacity .35s ease;
}

.shots__cell:hover .shots__img { opacity: .82; }

@media (max-width: 767px) {
	.shots__grid { grid-template-columns: repeat(2, 1fr); height: auto; align-content: start; gap: 2vw; }
	.shots__cell { height: 32vh; }
}

/* Окно состава. Порядок сверху вниз: кадр, название, короткое описание,
   перечень того, что входит, и кнопка тем же оформлением, что на первом
   экране. Рама, затемнение, крестик, Esc и клик по фону — общие с роликом. */
.pkg {
	width: min(100%, 34rem);
	max-height: 88vh;
	overflow-y: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-sunk);
	text-align: left;
}

.pkg__shot {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
}

.pkg__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
}

.pkg__title {
	margin: clamp(1.3rem, 3vw, 1.9rem) clamp(1.3rem, 3vw, 1.9rem) 0;
	font-family: var(--body);
	font-weight: 300;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	line-height: 1.1;
	letter-spacing: -.03em;
	color: #F5F5F5;
}

.pkg__text {
	margin: .8rem clamp(1.3rem, 3vw, 1.9rem) 0;
	font-size: .92rem;
	line-height: 1.6;
	color: var(--text-soft);
}

.pkg__list {
	margin: clamp(1.2rem, 2.6vw, 1.7rem) clamp(1.3rem, 3vw, 1.9rem) 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .62rem;
}

.pkg__list li {
	position: relative;
	padding-left: 1.65rem;
	font-size: .88rem;
	line-height: 1.45;
	color: #F5F5F5;
}

/* Галочка нарисована двумя сторонами рамки, повёрнутыми на 45 градусов, —
   так не нужен ни файл, ни шрифтовой знак. */
.pkg__list li::before {
	content: '';
	position: absolute;
	left: .1rem;
	top: .34em;
	width: .5rem;
	height: .28rem;
	border-left: 1.5px solid var(--brass);
	border-bottom: 1.5px solid var(--brass);
	transform: rotate(-45deg);
}

/* Кнопка первого экрана, пересчитанная в rem: там её размеры завязаны на
   --u, которая живёт только внутри hero. */
.pkg__cta {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: calc(100% - 2 * clamp(1.3rem, 3vw, 1.9rem));
	margin: clamp(1.5rem, 3.2vw, 2.1rem) clamp(1.3rem, 3vw, 1.9rem) clamp(1.5rem, 3vw, 1.9rem);
	height: 3.4rem;
	padding: 0 1.6rem;
	border: 1px solid #F5F5F5;
	border-radius: var(--radius);
	background: none;
	font-family: var(--display);
	font-size: .68rem;
	line-height: 1;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #F5F5F5;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

/* ---------------------------------------------------------- просмотрщик */

/* Поля держим на раме и одинаковые со всех четырёх сторон. place-items
   здесь переопределён на stretch: при center высота содержимого считается
   по нему самому, проценты внутри становятся неопределёнными, и снимок
   перестаёт слушаться max-height — вылезает за нижнюю кромку. */
.lightbox--viewer {
	padding: clamp(2.2rem, 5vh, 4rem);
	place-items: stretch;
}

.viewer {
	position: relative;
	min-width: 0;
	min-height: 0;
	display: grid;
	place-items: center;
}

.viewer__slide {
	grid-area: 1 / 1;
	position: relative;
	margin: 0;
	padding: 0;
	min-width: 0;
	min-height: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease, visibility .4s;
}

.viewer__slide.is-on { opacity: 1; visibility: visible; }

/* Снимок прижат к краям слайда абсолютом и вписан contain. Ни max-height,
   ни height в процентах здесь не работали: строка сетки авторазмерная, её
   высота считается по содержимому, а содержимое хочет считаться от неё —
   круг замыкается, и браузер откатывается к собственным пропорциям снимка,
   из-за чего он вылезал за нижнюю кромку. Абсолют убирает проценты вовсе,
   и поля вокруг получаются равными по построению. */
.viewer__slide img {
	position: absolute;
	inset: 0;
	/* Обязательно явно: замещаемый элемент с абсолютом и auto-размерами
	   берёт собственный размер, а inset при этом просто игнорируется. */
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: var(--radius);
}

.viewer__count {
	position: absolute;
	left: 50%;
	/* Ниже, к самой кромке: поля рамы одинаковые со всех сторон, и просвет
	   над счётчиком набирается за счёт его собственного положения. */
	bottom: .7rem;
	transform: translateX(-50%);
	margin: 0;
	font-family: var(--mono);
	font-size: .66rem;
	letter-spacing: .16em;
	color: var(--text-mute);
}

/* ----------------------------------------------------------- reviews */

/* Две встречные ленты. Лента едет ровно на половину своей ширины, а набор
   внутри продублирован — в этой точке вторая копия встаёт ровно туда, где
   была первая, и шов не виден. На наведение обе замирают: отзывы длинные,
   на ходу их не прочесть. */
.marq-wrap {
	position: relative;
	/* Обязательно: у краёв ниже стоит z-index, а position: relative без
	   z-index контекста наложения не создаёт — двойка утекала в корень, и
	   края рисовались поверх соседних разделов. */
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: clamp(.6rem, 1.2vw, 1rem);
	/* Тот же просвет под заголовком, что у остальных разделов. */
	margin: clamp(2.4rem, 4.4vw, 4.4rem) 0 0;
	overflow: hidden;
}

/* Края растворяются в фон страницы, чтобы карточки не обрубались. */
.marq-wrap::before,
.marq-wrap::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: clamp(3rem, 12vw, 12rem);
	pointer-events: none;
}

/* Именно --bg-sunk: это фон страницы в этом варианте (body.is-v2).
   С --bg края не растворялись, а темнели пятнами. */
.marq-wrap::before { left: 0; background: linear-gradient(to right, var(--bg-sunk), rgba(18, 18, 22, 0)); }
.marq-wrap::after  { right: 0; background: linear-gradient(to left,  var(--bg-sunk), rgba(18, 18, 22, 0)); }

.marq { overflow: hidden; }

/* Ход ленты ведёт скрипт, а не анимация: только так одно и то же положение
   могут двигать и автопрокрутка, и перетаскивание мышью. */
.marq__track {
	display: flex;
	gap: clamp(.6rem, 1.2vw, 1rem);
	width: max-content;
	will-change: transform;
}

.marq {
	cursor: pointer;
	/* Без этого на телефоне лента не тянется: браузер забирает жест себе
	   под прокрутку страницы и обрывает цепочку событий указателя, не дав
	   ей дойти до обработчика. Вертикальную прокрутку оставляем ему,
	   горизонтальную берём себе. */
	touch-action: pan-y;
}

/* Пока тянут — курсор другой, и выделение текста не мешает. */
.marq.is-drag {
	cursor: grabbing;
	user-select: none;
}

/* Карточка — наша: рамка в волосок, тот же радиус и та же подложка, что у
   плашек и позиций FAQ. */
/* Ширину каждой плашки и общую для всех высоту ставит скрипт: высота
   берётся по самому длинному отзыву, ширина ужимается до минимальной, при
   которой текст ещё умещается целиком. До того как скрипт отработает,
   действуют значения ниже. */
.quote {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: .7rem;
	width: clamp(17rem, 22vw, 21rem);
	margin: 0;
	padding: clamp(1rem, 1.5vw, 1.3rem);
	/* Просвет под текстом одинаковый у всех — скрипт подбирает ширину так,
	   чтобы строк везде было поровну, и низ упирается ровно в этот отступ. */
	padding-bottom: 30px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .02);
	transition: border-color .35s ease, background .35s ease;
}

.quote:hover {
	border-color: rgba(245, 245, 245, .28);
	background: rgba(255, 255, 255, .04);
}

.quote__who {
	display: flex;
	align-items: center;
	gap: .6rem;
}

.quote__face {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	filter: grayscale(1);
}

/* Часть отзывов пришла без фотографии. Вместо чужого лица — инициал в том
   же круге: место занято, а человека не выдумываем. */
.quote__face--mono {
	display: grid;
	place-items: center;
	flex: none;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, .03);
	color: var(--text-mute);
	filter: none;
}

.quote__id {
	display: flex;
	flex-direction: column;
	/* Имя и город — одна подпись в два яруса, поэтому просвет между ними
	   меньше собственного интерлиньяжа строк. */
	gap: 0;
	min-width: 0;
	line-height: 1.25;
}

.quote__name {
	font-family: var(--mono);
	font-size: .64rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #F5F5F5;
}

/* Город есть только у части отзывов — там, где он был в исходнике. */
.quote__where {
	font-family: var(--mono);
	font-size: .58rem;
	letter-spacing: .1em;
	color: var(--text-mute);
}

/* Текст виден целиком сразу — плашка подобрана под него. */
.quote__text {
	flex: 1;
	min-height: 0;
	margin: 0;
	font-size: .85rem;
	line-height: 1.6;
	color: var(--text-soft);
	overflow: hidden;
}

/* --------------------------------------------------------------- faq */

/* Раскладка эталона: всё по центру, заголовок в узкой колонке, список в
   колонке пошире, каждая позиция — своя рамка. Значения их: колонка 70%,
   просветы 4.4vw между заголовком и списком и 2.2vw между позициями. */
/* FAQ и отзывы по эталону центрированы целиком; остальные разделы
   центрируют только заголовок — списки и сетки в них остаются как были. */
/* Отзывы — сплошная плита: без собственного фона и контекста секция ничем
   не перекрывала соседей, и её карточки прорастали сквозь чужие блоки. */
.is-corp .reviews {
	position: relative;
	z-index: 1;
	background: var(--bg-sunk);
	/* Чуть больше обычного отступа раздела — но именно чуть: разрыв после
	   экрана с кадрами нужен, а двойное поле читалось провалом. От наезда
	   соседей секцию держит свой фон и слой, а не пустота сверху. */
	padding-top: clamp(4.4rem, 12vh, 9.5rem);
}

.is-corp .faq .container,
.is-corp .reviews .container { text-align: center; }

.faq__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(.7rem, 1.1vw, 1.1rem);
	width: min(50%, 40rem);
	margin: 0 auto;
}

/* Заголовки разделов — по центру на всей странице. Мера у section__head
   своя и узкая, поэтому центрируется и сама коробка, и текст в ней. */
.section__head {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* Ширина — та же, что у ряда логотипов в Trusted by: строка вопроса и
   полоса из четырёх плашек кончаются на одной вертикали. */
.faq__list {
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2.2vw, 2.2rem);
	width: 100%;
	max-width: var(--row-4);
	margin: clamp(2.4rem, 4.4vw, 4.4rem) auto 0;
	padding: 0;
	list-style: none;
}

/* Позиция: рамка в 5% белого на подложке в 2% — те же значения, что у
   плашек в Trusted by, они у эталона общие. */
.faq__item {
	border: 1px solid rgba(255, 255, 255, .05);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .02);
	transition: border-color .35s ease, background .35s ease;
}

.faq__item:hover { border-color: rgba(255, 255, 255, .12); }

/* У эталона нажимается вся коробка целиком, вместе с ответом. Здесь
   нажимается только строка вопроса: клик по тексту ответа, который
   схлопывает его на середине чтения, — не то поведение, которое стоит
   копировать. */
.faq__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 2.1vw, 2.1rem);
	width: 100%;
	padding: clamp(1rem, 1.6vw, 1.6rem) clamp(1.2rem, 2.2vw, 2.2rem);
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
}

.faq__q {
	font-family: var(--body);
	font-weight: 300;
	font-size: clamp(1rem, 1.5vw, 1.5rem);
	line-height: 1.6;
	letter-spacing: -.02em;
	text-transform: capitalize;
	color: #F5F5F5;
}

/* Знак — две линии по 1rem, скрещенные в квадрате 1rem. При раскрытии
   вертикальная схлопывается, и плюс становится минусом. */
.faq__icon {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1rem;
}

.faq__icon-h,
.faq__icon-v {
	position: absolute;
	background: #F5F5F5;
}

.faq__icon-h { width: 1rem; height: 1px; }

.faq__icon-v {
	width: 1px;
	height: 1rem;
	transition: transform .35s cubic-bezier(.3, .7, .2, 1);
}

.faq__toggle[aria-expanded='true'] .faq__icon-v { transform: scaleY(0); }

/* Высоту ведёт скрипт, поэтому ответ любой длины раскрывается ровно. */
.faq__a {
	height: 0;
	overflow: hidden;
	transition: height .4s cubic-bezier(.3, .7, .2, 1);
}

.faq__a p {
	margin: 0 0 1rem;
	padding: 0 clamp(1.2rem, 2.2vw, 2.2rem);
	font-size: clamp(.86rem, 1vw, .98rem);
	line-height: 1.66;
	text-align: left;
	color: var(--text-soft);
}

.faq__a p:first-child { padding-top: .2rem; }

@media (max-width: 860px) {
	.faq__head { width: 100%; }
	.faq__list { max-width: none; }
}

/* ----------------------------------------------------- weddings etc. */

/* Кадр из этих разделов убран, поэтому колонка одна — и перечень идёт во
   всю ширину тем же набором, что в Event Types. */
.formats__inner {
	display: block;
}

/* Перечень здесь тот же, что в Event Types, только на полколонки — оттого
   на ступень мельче. Раскладка блока прежняя: текст и кадр рядом. */
.formats__list {
	margin-top: clamp(1.4rem, 3vh, 2.2rem);
}



/* ----------------------------------------------------------- contact */

/* Последний блок страницы, дальше ничего нет — поэтому он закрывает её
   целым экраном. Заголовок стоит вверху, контакты прижаты к низу, весь
   остаток высоты уходит в просвет между ними. Раскладку держит не сама
   секция, а контейнер: заголовок и сетка лежат внутри него, и снаружи
   их не развести. */
.is-corp .contact {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding-top: clamp(4.4rem, 12vh, 9.5rem);
	/* Снизу поле меньше верхнего: это низ страницы, и контакты стоят ближе
	   к краю. Но не впритык - блоку нужен воздух с обеих сторон. */
	padding-bottom: clamp(3.2rem, 8vh, 6rem);
}

.is-corp .contact > .container {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* Заголовок набран одним шрифтом: прописная вставка на «free consultation»
   убрана по правке клиента. */
/* Та же линия, что у Scroll на первом экране: та же ширина, та же мера
   высоты и та же отрисовка сверху вниз. Число в мере удвоено - линия
   вдвое длиннее исходной и масштабируется вместе со всей вёрсткой. */
.is-corp .contact__rule {
	position: relative;
	display: block;
	width: 2px;
	height: calc(192 * var(--u));
	margin: 0 auto clamp(1.4rem, 3vh, 2.4rem);
	overflow: hidden;
	opacity: .7;
}

.is-corp .contact__rule-bar {
	position: absolute;
	inset: 0;
	background: #F5F5F5;
	animation: scroll-draw 2.4s cubic-bezier(.5, 0, .35, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
	.is-corp .contact__rule-bar { animation: none; }
}

/* Портрет над заголовком. Кадр квадратный, круг делает скругление —
   так его легко подправить, не трогая файл. */
.is-corp .contact__face {
	width: clamp(5.5rem, 9vw, 8.5rem);
	aspect-ratio: 1;
	margin: 0 auto clamp(1.4rem, 3vh, 2.4rem);
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid var(--line);
}

.is-corp .contact__face img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.contact__title { max-width: 24ch; }

/* Две строки под заголовком подвала: что прислать и что придёт в ответ.
   Мера уже заголовка — так они читаются связкой с формой, а не отдельным
   абзацем. */
.is-corp .contact__lead {
	max-width: 52ch;
	margin: clamp(.9rem, 2.2vh, 1.5rem) auto 0;
	text-align: center;
	font-size: clamp(.96rem, 1.12vw, 1.1rem);
	line-height: 1.62;
	color: var(--text-mute);
}

/* Полей стало пять, а ряд по три: тип события занимает две колонки, иначе
   во втором ряду зияла бы пустая треть. */
.is-corp .book--wide .book__field--type { grid-column: span 2; }

@media (max-width: 560px) {
	.is-corp .book--wide .book__field--type { grid-column: span 1; }
}

/* Пряди фоном всего экрана контактов. Не внутри плашки формы: в узкой
   коробке огибающая шейдера сплющивает их в одно светлое пятно, ей нужен
   кадр, близкий к экрану по пропорциям.

   Холст лежит слоем ниже содержимого. Плашка формы непрозрачная, так что
   середину она накрывает, а по краям экрана пряди видны. */
.is-corp .contact { position: relative; }

.is-corp .contact__glow {
	position: absolute;
	/* Не на всю секцию: сверху её занимают линия, портрет и заголовок, и
	   свечение, центрованное по всей высоте, уходило выше формы. Отступ
	   сверху сажает центр холста на центр формы. */
	inset: 26.5% 0 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	opacity: .55;
	/* Верхняя кромка холста иначе видна полосой: свечение обрывается на
	   границе секции. Растворяем его к краям, чтобы стыка не читалось. */
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 88%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 88%, transparent 100%);
}

.is-corp .contact__glow canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

/* Содержимое поверх холста. */
.is-corp .contact > .container { position: relative; z-index: 1; }

/* Кнопка «наверх». Сидит верхом на разделительной полосе подвала, поэтому
   у контейнера свой отсчёт, а сама она уезжает на половину роста вверх.
   Заливки нет — только обводка в тон линии; на наведении круг заливается
   белым, а стрелка становится тёмной. */
.is-corp .contact__top {
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.9rem;
	height: 2.9rem;
	margin: 0;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: none;
	color: var(--text-mute);
	cursor: pointer;
	transform: translate(-50%, -50%);
	transition: color .3s ease, border-color .3s ease, background-color .3s ease,
	            transform .35s cubic-bezier(.22, .61, .36, 1);
}

.is-corp .contact__top:hover,
.is-corp .contact__top:focus-visible {
	background: #F5F5F5;
	border-color: #F5F5F5;
	color: #0B0B0D;
	transform: translate(-50%, calc(-50% - 3px));
}

@media (prefers-reduced-motion: reduce) {
	.is-corp .contact__top { transition: color .3s ease, border-color .3s ease; }
	.is-corp .contact__top:hover { transform: translate(-50%, -50%); }
}

.contact__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(clamp(170px, 20vw, 240px), 1fr));
	gap: clamp(1.4rem, 3vw, 2.6rem);
	/* Контакты — это подвал страницы, и он должен стоять отдельно от
	   формы, а не подпирать её. Отсюда просвет заметно больше обычного. */
	margin: clamp(4.5rem, 12vh, 9rem) 0 0;
	padding-top: clamp(3.1rem, 7vh, 4.6rem);
	/* Отсчёт для кнопки «наверх»: она садится на эту самую полосу. */
	position: relative;
	/* Разделитель нарисован фоном, а не рамкой, ради разрыва посередине:
	   кнопка прозрачная, и сплошная линия шла бы сквозь неё перекрестием.
	   Ширина окна на четверть больше самой кнопки, чтобы остался просвет. */
	background-image: linear-gradient(90deg,
		var(--line-soft) 0, var(--line-soft) calc(50% - 1.85rem),
		transparent calc(50% - 1.85rem), transparent calc(50% + 1.85rem),
		var(--line-soft) calc(50% + 1.85rem), var(--line-soft) 100%);
	background-size: 100% 1px;
	background-repeat: no-repeat;
	background-position: 0 0;
}

.contact__label {
	margin: 0 0 .6rem;
	font-family: var(--mono);
	font-size: .62rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-mute);
}

.contact__link,
.contact__where {
	margin: 0;
	font-size: clamp(1rem, 1.35vw, 1.25rem);
	line-height: 1.4;
	color: #F5F5F5;
	text-decoration: none;
	transition: color .3s ease;
}

.contact__link:hover { color: var(--brass); }

.contact__socials {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	margin: 0;
}

.contact__socials a {
	font-size: clamp(.92rem, 1.15vw, 1.08rem);
	color: #F5F5F5;
	text-decoration: none;
	transition: color .3s ease;
}

.contact__socials a:hover { color: var(--brass); }

/* -------------------------------------------------------- responsive */

@media (max-width: 860px) {
	.gallery__grid { grid-template-columns: repeat(2, 1fr); }
	.gallery__cell--tall { grid-row: span 1; }
}



/* ------------------------------------------------- нижняя кромка экрана */

/* Ступенчатое размытие у верхнего края — код эталона, значение в значение.
   Десять слоёв поверх страницы: у каждого своя сила размытия, вдвое с
   небольшим слабее предыдущей (делится на --ratio), и своя маска-градиент,
   сдвинутая вниз по стопке. Наложение этих полос и даёт не полосу с резкой
   границей, а плавный переход от чёткого к мутному.

   У эталона полоса стоит внизу и обойма для этого перевёрнута на 180
   градусов. Здесь она наверху, под шапкой, поэтому переворот снят: маски
   слоёв и так идут от верхнего края вниз, и самый сильный слой сам ложится
   к кромке.

   Ещё два отличия: у них полоса висит всегда, а здесь включается с блока
   «A vendor you don't have to worry about» (класс is-on ставит скрипт), и
   лежит она ниже шапки — шапка со своим z-index 30 остаётся поверх, а
   полоса размывает то, что проезжает под ней.

   Цена: десять элементов с backdrop-filter поверх всего. Если на слабой
   карте пойдут рывки — снять is-on, больше эта обойма ни с чем не связана. */
.progressive-blur-wrapper {
	position: fixed;
	inset: 0% 0% auto;
	z-index: 29;
	min-height: 16vh;
	overflow: clip;
	pointer-events: none;
	opacity: 0;
	transition: opacity .5s ease;
}

.progressive-blur-wrapper.is-on { opacity: 1; }

/* Пока открыто окно, полоса не нужна: под ней уже не страница. */
body.is-modal .progressive-blur-wrapper { opacity: 0; }

/* Полоса сведена к одному слою.

   Была обойма из десяти: каждый со своим backdrop-filter и своей маской —
   так делается «постепенное» размытие. Красиво, но цена непомерная: десять
   раз за кадр браузер размывает всё, что под полосой, а под ней играет
   полноэкранный ролик. Chrome честно считает каждый слой и заметно
   спотыкается; Яндекс.Браузер размытие фона урезает и потому летал — отсюда
   и разница, которую нельзя было объяснить ничем другим.

   Один слой с маской-градиентом даёт почти ту же картинку: у края размыто,
   к низу сходит на нет. Разница видна только если сравнивать вплотную, а
   считается это в десять раз дешевле. */
.progressive-blur {
	position: absolute;
	inset: 0;
	padding: 0;
	-webkit-backdrop-filter: blur(var(--blur));
	        backdrop-filter: blur(var(--blur));
	-webkit-mask: linear-gradient(#000 0%, #000 22%, rgba(0, 0, 0, .55) 55%, #0000 100%);
	        mask: linear-gradient(#000 0%, #000 22%, rgba(0, 0, 0, .55) 55%, #0000 100%);
}

/* Слои со второго по десятый больше не нужны: их прячем, а разметку не
   трогаем — она общая с первым макетом. */
.progressive-blur._02,
.progressive-blur._03,
.progressive-blur._04,
.progressive-blur._05,
.progressive-blur._06,
.progressive-blur._07,
.progressive-blur._08,
.progressive-blur._09,
.progressive-blur._10 { display: none; }

/* У эталона полоса снимается на телефоне — там она только ест кадры. */
@media (max-width: 767px) {
	.progressive-blur-wrapper { display: none; }
}

/* Две строки под заголовком подвала на телефоне сливаются в один абзац:
   принудительный перенос там оставлял в первой строке одно слово. Перенос
   спрятан вместе со своей обёрткой, а пробел перед ней остаётся. */
@media (max-width: 760px) {
	.is-corp .contact__lead-br { display: none; }
}

/* Пряди на экране контактов рассчитаны на широкий кадр: в узком портретном
   холсте огибающая сплющивает их в тонкую нить, и свечения почти не видно.
   Увеличиваем сам холст — обрезка у него своя, за край экрана он не вылезет,
   — и поднимаем яркость. */
@media (max-width: 900px) {
	.is-corp .contact__glow {
		inset: 16% 0 0;
		opacity: .75;
	}

	.is-corp .contact__glow canvas {
		transform: scale(2.4);
		transform-origin: 50% 50%;
	}
}

.nav__foot { display: none; }

/* ------------------------------------------------ меню на весь экран */

/* Панель по образцу, присланному клиентом: тёмный экран целиком, крупные
   пункты в столбик, внизу соцсети и кнопка действия. Марка и крестик остаются
   на своих местах в шапке — панель проходит под ними.

   Раньше меню было полосой под шапкой: пять строк мелким моноширинным шрифтом
   на треть экрана, а остальные две трети — просвечивающий первый экран. */
@media (max-width: 900px) {
	.is-corp .nav {
		position: fixed;
		inset: 0;
		z-index: 1;
		/* Закрытая панель снята с экрана видимостью, а не display: none —
		   иначе её нечем гасить, и меню исчезало рывком. Прежде здесь стоял
		   просто flex без условия, и панель висела всегда: крестик классы
		   снимал, а она оставалась. */
		display: flex;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity .34s ease, visibility .34s;
		flex-direction: column;
		justify-content: space-between;
		padding: calc(var(--header-h) + clamp(2rem, 8vh, 5rem)) var(--gutter) clamp(1.6rem, 5vh, 2.6rem);
		background: var(--bg);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.is-corp .nav.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/* Пункты приходят по очереди, а не всей плитой разом: панель успевает
	   раскрыться, и глаз ведут сверху вниз. Ход тот же, что у строк в блоке
	   доверия — подъём с проявлением и снятием размытия.

	   Задержки перечислены поштучно: пунктов пять и подвал из четырёх частей,
	   считать их в разметке незачем. */
	@keyframes menu-item-in {
		from { opacity: 0; transform: translateY(16px); filter: blur(6px); }
		to   { opacity: 1; transform: none; filter: none; }
	}

	.is-corp .nav.is-open .nav__item,
	.is-corp .nav.is-open .nav__label,
	.is-corp .nav.is-open .nav__socials,
	.is-corp .nav.is-open .nav__where,
	.is-corp .nav.is-open .nav__cta {
		animation: menu-item-in .55s cubic-bezier(.22, .68, .28, 1) both;
	}

	.is-corp .nav.is-open .nav__item:nth-child(1) { animation-delay: .08s; }
	.is-corp .nav.is-open .nav__item:nth-child(2) { animation-delay: .14s; }
	.is-corp .nav.is-open .nav__item:nth-child(3) { animation-delay: .20s; }
	.is-corp .nav.is-open .nav__item:nth-child(4) { animation-delay: .26s; }
	.is-corp .nav.is-open .nav__item:nth-child(5) { animation-delay: .32s; }

	.is-corp .nav.is-open .nav__label { animation-delay: .40s; }
	.is-corp .nav.is-open .nav__socials { animation-delay: .45s; }
	.is-corp .nav.is-open .nav__label--where { animation-delay: .50s; }
	.is-corp .nav.is-open .nav__where { animation-delay: .54s; }
	.is-corp .nav.is-open .nav__cta { animation-delay: .60s; }

	/* При отключённом движении панель просто появляется. */
	@media (prefers-reduced-motion: reduce) {
		.is-corp .nav,
		.is-corp .nav.is-open .nav__item,
		.is-corp .nav.is-open .nav__label,
		.is-corp .nav.is-open .nav__socials,
		.is-corp .nav.is-open .nav__where,
		.is-corp .nav.is-open .nav__cta {
			animation: none;
			transition: none;
		}
	}

	/* Марка и крестик стоят выше панели — она их не накрывает. */
	.is-corp .header__brand,
	.is-corp .burger { position: relative; z-index: 2; }

	/* Крестик рисуется картинкой, а перекладины прячутся. В общих стилях он
	   сходится поворотом каждой из них, и здесь это не срабатывало ни в каком
	   виде: правило селектору отвечает, соседние свойства из того же блока
	   применяются, а transform на перекладинах остаётся единичным. Разбираться
	   в этом дороже, чем нарисовать две линии крест-накрест — знак от этого
	   не меняется, а поведение перестаёт зависеть от поворотов. */
	.is-corp .burger.is-open .burger__bar { display: none; }

	.is-corp .burger.is-open {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23F5F5F5' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M3.4 3.4 16.6 16.6M16.6 3.4 3.4 16.6'/%3E%3C/svg%3E");
		background-position: center;
		background-repeat: no-repeat;
	}

	/* Телефонной кнопке в открытом меню места нет: её место занял крестик,
	   а номер и так стоит внизу панели строкой. */
	body.is-menu .is-corp .header__side { opacity: 0; pointer-events: none; }

	.is-corp .nav__list {
		flex-direction: column;
		gap: clamp(.1rem, 1vh, .5rem);
		padding: 0;
		margin: 0;
	}

	/* Пункты крупные и в обычном регистре, а не моноширинными прописными:
	   у образца это заголовки, а не служебные подписи. */
	.is-corp .nav__link {
		display: block;
		padding: clamp(.28rem, 1.1vh, .5rem) 0;
		font-family: var(--body);
		font-weight: 300;
		font-size: clamp(1.9rem, 8.4vw, 3rem);
		line-height: 1.12;
		letter-spacing: -.03em;
		text-transform: capitalize;
		color: #F5F5F5;
	}

	/* Подчёркивание активного пункта на таком кегле читается подчёркиванием
	   строки, а не меткой — гасим его и метим пункт цветом. Класс именно
	   is-active: его вешает разметчик текущего раздела. */
	.is-corp .nav__link::after { display: none; }
	.is-corp .nav__link { color: rgba(245, 245, 245, .55); }
	.is-corp .nav__link.is-active { color: #F5F5F5; }

	/* Подвал меню набран как колонки контактов в футере: мелкая подпись
	   прописными, под ней ссылки в полный тон. Кнопка — обычная кнопка сайта,
	   во всю ширину по низу, а не пилюля со своим рисунком. */
	.is-corp .nav__foot {
		display: block;
		margin: clamp(1.4rem, 4vh, 2.4rem) 0 0;
		padding: 0;
		border: 0;
	}

	.is-corp .nav__label {
		margin: 0 0 .5rem;
		font-family: var(--mono);
		font-size: .62rem;
		letter-spacing: .16em;
		text-transform: uppercase;
		color: var(--text-mute);
	}

	.is-corp .nav__label--where { margin-top: clamp(1rem, 3vh, 1.5rem); }

	.is-corp .nav__socials {
		display: flex;
		flex-direction: column;
		gap: .35rem;
		margin: 0;
	}

	.is-corp .nav__socials a {
		font-size: clamp(.92rem, 1.15vw, 1.08rem);
		color: #F5F5F5;
		text-decoration: none;
		transition: color .3s ease;
	}

	.is-corp .nav__socials a:hover { color: var(--brass); }

	.is-corp .nav__where {
		margin: 0;
		font-size: clamp(1rem, 1.35vw, 1.25rem);
		line-height: 1.4;
		color: #F5F5F5;
	}

	.is-corp .nav__cta {
		width: 100%;
		height: 3.2rem;
		margin-top: clamp(1.4rem, 4vh, 2.2rem);
		padding: 0;
		font-size: .72rem;
		letter-spacing: .14em;
	}

	/* Пока меню открыто, страница под ним не прокручивается. */
	body.is-menu { overflow: hidden; }
}

/* ------------------------------------------ узкие экраны: общий ритм */

/* Между блоками на телефоне стояло по девяносто пикселей сверху и снизу —
   почти два экрана воздуха на стык, и было непонятно, зачем он там. Отступы
   разделов, заголовков и подзаголовков сведены к одной мере. */
@media (max-width: 900px) {
	.is-corp .section { padding-block: clamp(2.8rem, 7vh, 4.4rem); }

	/* Перед блоком форматов поле снизу короче общего: следом идёт кадр во
	   всю ширину, и он сам по себе держит паузу. */
	.is-corp .trust { padding-bottom: clamp(1.4rem, 3.5vh, 2.4rem); }
	.is-corp .section__head { margin-top: 0; }

	/* По центру только заголовок: абзац под ним — обычный текст, и по центру
	   он читается тяжело, строка за строкой ищет начало. */
	.is-corp .trust__title {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}

	.is-corp .trust__lead { text-align: left; }

	.is-corp .trust__head { margin-bottom: clamp(1.8rem, 5vh, 2.8rem); }
	.is-corp .trust__item { padding: clamp(1.6rem, 4.5vh, 2.6rem) 0; }

	/* Форма в подвале идёт по ширине сетки контактов под ней, а не уже её. */
	.is-corp .book--wide {
		max-width: none;
		margin-top: clamp(1.6rem, 4vh, 2.4rem);
	}

	.is-corp .contact__grid { margin-top: clamp(2.6rem, 7vh, 4.4rem); }
}

/* ------------------------------------- узкие экраны: стена кадров */

/* Обе половины набраны как обычный заголовок раздела: display-типографика с
   плотной разрядкой рассчитана на кегль под сотню пикселей, а на телефоне
   она съедала пробелы — «built around your event» слипалось в одно слово. */
@media (max-width: 760px) {
	.is-corp .reel__line--a,
	.is-corp .reel__line--b {
		white-space: normal;
		max-width: none;
		/* Меры нет, а кегль подобран так, чтобы «built around your event.»
		   укладывалось в строку целиком: со своей мерой в четырнадцать знаков
		   заявление разваливалось на три строки вместо двух. */
		font-size: clamp(1.6rem, 7vw, 2.6rem);
		line-height: 1.06;
		letter-spacing: -.02em;
		word-spacing: normal;
	}

	/* Первая половина — это название раздела «Meet DJ ART», и набрана она
	   должна быть как все прочие названия разделов. Мелкий кегль выше
	   остался для второй половины: там длинное заявление в две строки, ему
	   он и нужен. */
	.is-corp .reel__line--a {
		font-size: clamp(2.5rem, 5.2vw, 4.9rem);
		line-height: 1.12;
		letter-spacing: -.025em;
	}

	.is-corp .reel__sub {
		margin-top: 1.2em;
		font-size: clamp(.95rem, 4vw, 1.12rem);
	}
}

/* ------------------------------------------ узкие экраны: слайдер */

@media (max-width: 860px) {
	/* Кадр во всю ширину сетки: вдвое уже экрана он висел одиноко, а места
	   вокруг него оставалось больше, чем занимал он сам. Но и не выше меры:
	   он квадратный, и на широком узком экране (планшет в портрете) полная
	   ширина давала такую высоту, что название с описанием переставали
	   помещаться и ложились прямо на кадр. */
	.is-corp .about__shot { width: min(100%, 46svh); }

	/* Стопка призрачных названий поднимается над разделительной линией и на
	   узком экране ложилась на подпись и на соседние названия — разойтись им
	   негде. Прячем неактивные целиком.

	   Обрезкой это не решается: коробка названий ростом ровно в строку, и
	   вместе с призраками под нож уходило само активное название — при
	   прокрутке заголовков не оставалось вовсе. */
	.is-corp .about__stage-title:not(.is-active) { opacity: 0; }

	/* Вместе с призраками отменяем и подъём стопки. Она едет вверх на строку
	   за слайд, чтобы прочитанные названия оставались висеть над линией; но
	   названия лежат друг на друге, и подъём двигает их все разом — а раз
	   призраков не видно, наверх уезжает одно только активное название,
	   прямо на фотографию. */
	.is-corp .about__titles-track { transform: none; }
}

/* -------------------------------------- узкие экраны: шапка и карточки */

@media (max-width: 1024px) {
	/* Кнопка телефона ростом с марку. Коробки у них и так были равны, но знак
	   нарисован с полями внутри своего кадра: видимая пилюля занимает по высоте
	   около трёх четвертей. Считаем от неё, иначе кнопка выглядит выше. */
	.is-corp .header__btn { height: calc(clamp(96px, 13vw, 124px) / 2.21 * .74); }
}

@media (max-width: 640px) {
	.is-corp .header__btn { height: calc(clamp(84px, 24vw, 104px) / 2.21 * .74); }
}

/* Карточки перечня форматов на телефоне были едва выше своего содержимого —
   стопка не читалась стопкой. Даём им больше роста. */
@media (max-width: 860px) {
	/* Просвет под заголовком — общий для всех блоков: у перечня форматов и у
	   плиток он был больше остальных и читался провалом. */
	.is-corp .spec__list,
	.is-corp .motion__grid { margin-top: clamp(1.6rem, 4.5vh, 2.6rem); }
}

/* ---------------------------------------- узкие экраны: отзывы и хвосты */

@media (max-width: 767px) {
	/* Лента отзывов в одну строку: две ленты в узком кадре читаются кашей,
	   а по одной карточке в каждой — это половина экрана на отзыв. Вторая
	   лента снимается, первая становится выше. */
	.is-corp .marq--back { display: none; }

	.is-corp .quote {
		min-height: 16.5rem;
		padding-bottom: 1.4rem;
	}

	/* Просвет между стопкой карточек и кнопкой под ней был вчетверо больше
	   обычного — кнопка висела сама по себе. Собственный отступ подвала мало
	   что решал: место занимала распорка в конце списка. Она нужна липкой
	   стопке, чтобы последняя карточка успела дойти до верха, а на телефоне
	   липкости нет — значит и распорка не нужна. */
	.is-corp .spec__spacer { display: none; }

	/* Хвост ленты кадров: после последней строки она прокручивалась ещё
	   вхолостую, и до «Trusted by» оставался пустой экран. */
	.is-corp .reel__stage { height: 320vh; }
}

/* Распорка в конце списка нужна липкой стопке: последняя карточка должна
   успеть дойти до верха. Липкости ниже 900 нет, значит и распорка там лишняя —
   без неё кнопка стояла бы на другом экране. */
@media (max-width: 900px) {
	.is-corp .spec__spacer { display: none; }
}

/* --------------------------------------- узкие экраны: карточки форматов */

/* Верх карточки — номер, название и просмотр; теги уходят вниз, к её нижнему
   краю. Ряд на узком экране и так в одну колонку, поэтому переводим его в
   столбец: тогда нижнюю группу можно отжать автоматическим отступом. */
@media (max-width: 900px) {
	.is-corp .spec__row {
		display: flex;
		flex-direction: column;
	}

	/* Смещение от липкой стопки на узком экране лишнее: липкости здесь нет,
	   а top у относительного блока всё равно действует — карточка съезжала
	   на сотню пикселей вниз, и просвет под заголовком выходил втрое больше,
	   чем у соседних блоков. */
	.is-corp .spec__row,
	.is-corp .spec__row:nth-child(1),
	.is-corp .spec__row:nth-child(2),
	.is-corp .spec__row:nth-child(3),
	.is-corp .spec__row:nth-child(4),
	.is-corp .spec__row:nth-child(5) { top: auto; }

	.is-corp .spec__cats { margin-top: auto; }

	/* Теги мельче своей подписи: набор из шести штук в полный кегль забивал
	   низ карточки и спорил с названием. */
	.is-corp .spec__tag {
		padding: .42em .8em .48em;
		font-size: 1.02rem;
	}
}

/* Название карточки не должно спорить с заголовком раздела: на узком экране
   они шли вровень, и было непонятно, что чему подчинено. Карточкам — ступень
   ниже. */
@media (max-width: 860px) {
	.is-corp .spec__name { font-size: clamp(1.7rem, 7vw, 2.4rem); }
}

/* ------------------------------------------ узкие экраны: марки */

/* Четыре в строку остаются четырьмя — просто мельче. Разбивать их на две
   колонки значило бы растянуть ряд на четыре строки, а он должен читаться
   одним взглядом. */
@media (max-width: 640px) {
	.is-corp .clients__row {
		grid-template-columns: repeat(4, 1fr);
		gap: .5rem;
		margin-top: clamp(1.6rem, 4.5vh, 2.6rem);
	}

	.is-corp .clients__logo { max-width: 72%; max-height: 30%; }
	.is-corp .clients__logo--badge { max-width: 44%; max-height: 44%; }
}

/* ---------------------------------------------------- заявка отправлена */

/* Ловушку для роботов не видно и не нащупать табом: она нужна только тому,
   кто читает разметку. display: none её бы обесценил — часть рассылок такие
   поля пропускает, — поэтому убираем её с глаз размером и выносом за край. */
.book__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* Окно с подтверждением. Тот же тёмный лист, что у ящика заявки, только
   небольшой и по центру экрана. */
/* display здесь не трогаем. Правило со своим display перебивало
   .lightbox[hidden] { display: none } — они одного веса, а это стоит ниже, —
   и закрытое окно оставалось в раскладке: невидимый лист во весь экран висел
   поверх страницы всегда. Он глотал каждое нажатие (кнопки «не работали») и
   заставлял браузер держать лишний слой — отсюда и тормоза. Раскладку
   центрируем, показ оставляем общему правилу. */
.is-corp .lightbox--note { place-items: center; }

.is-corp .note {
	position: relative;
	width: min(92vw, 30rem);
	padding: clamp(2rem, 4vw, 3rem) clamp(1.6rem, 3.4vw, 2.6rem) clamp(1.8rem, 3.4vw, 2.4rem);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-sunk);
	text-align: center;
	transform: translateY(14px);
	opacity: 0;
	transition: opacity .4s ease, transform .5s cubic-bezier(.22, .68, .28, 1);
}

.is-corp .lightbox--note.is-open .note {
	opacity: 1;
	transform: none;
}

/* Галочка в круге. Обводка, а не заливка: на тёмном листе залитый круг
   читается кнопкой, а это знак, а не действие. */
.is-corp .note__mark {
	display: grid;
	place-items: center;
	width: 4.2rem;
	height: 4.2rem;
	margin: 0 auto clamp(1.1rem, 2.4vw, 1.6rem);
	border: 1px solid rgba(245, 245, 245, .35);
	border-radius: 50%;
	color: #F5F5F5;
}

/* Галочка прочерчивается, а не появляется целиком: короткий ход, который
   читается как «готово», а не как картинка на месте. */
.is-corp .note__mark path {
	stroke-dasharray: 26;
	stroke-dashoffset: 26;
}

.is-corp .lightbox--note.is-open .note__mark path {
	animation: note-tick .5s cubic-bezier(.65, 0, .35, 1) .18s forwards;
}

@keyframes note-tick { to { stroke-dashoffset: 0; } }

.is-corp .note__title {
	margin: 0 0 .7rem;
	font-family: var(--body);
	font-weight: 300;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.1;
	letter-spacing: -.02em;
	color: #F5F5F5;
}

.is-corp .note__text {
	margin: 0 auto clamp(1.4rem, 3vw, 2rem);
	max-width: 34ch;
	font-size: .98rem;
	line-height: 1.55;
	color: var(--text-mute);
}

.is-corp .note__btn {
	width: 100%;
	height: 3rem;
	padding: 0;
	font-size: .7rem;
	letter-spacing: .14em;
}

/* Кнопка отправки на время запроса гаснет и не нажимается: иначе с медленной
   связью заявку успевают отправить дважды. */
.is-corp .book.is-sending .book__send {
	opacity: .55;
	pointer-events: none;
}

/* Строка ошибки под кнопкой. Показывается только когда есть что сказать. */
.is-corp .book__error {
	margin: .9rem 0 0;
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #E0736A;
}

@media (prefers-reduced-motion: reduce) {
	.is-corp .note { transition: none; }
	.is-corp .lightbox--note.is-open .note__mark path { animation: none; stroke-dashoffset: 0; }
}

/* ============================================================ Event types

   Раздел с боковым ходом. Высоту секции задаёт скрипт: она равна тому, на
   сколько дорожка шире экрана, плюс сам экран. Пока секция приколота,
   прокрутка вниз двигает дорожку влево, и карточки проходят под заголовком.

   Шахматка получается сама: плашки двух размеров выровнены по верху, поэтому
   подписи под ними встают на разных уровнях. Никаких смещений вручную. */

.is-corp .events { position: relative; z-index: 2; padding-block: 0; }

.is-corp .events__sticky {
	position: sticky;
	top: 0;
	height: 100svh;
	/* Обрезает дорожку, уехавшую вбок. */
	overflow: hidden;
}

/* Заголовок стоит на месте — он вне дорожки и вместе с ней не едет. */
.is-corp .events__head {
	position: absolute;
	top: calc(var(--header-h) + clamp(.8rem, 2.6vh, 2rem));
	left: var(--gutter);
	z-index: 5;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	width: calc(100% - var(--gutter) * 2);
}

.is-corp .events__title {
	margin: 0;
	/* Тот же набор, что у всех заголовков разделов: лёгкий гротеск с плотным
	   межбуквенным. Моношириной на сайте набраны только метки. */
	font-family: var(--body);
	font-weight: 300;
	font-size: clamp(2.2rem, 4.4vw, 4.2rem);
	line-height: 1;
	letter-spacing: -.025em;
	color: #F5F5F5;
}

.is-corp .events__label {
	display: flex;
	align-items: center;
	gap: .5em;
	margin: 0;
	font-family: var(--mono);
	font-size: clamp(.62rem, .74vw, .76rem);
	letter-spacing: .16em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(245, 245, 245, .6);
}

.is-corp .events__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #F5F5F5;
}

/* Дорожка. Ширина по содержимому, сдвиг задаёт скрипт. */
.is-corp .events__track {
	position: relative;
	height: 100%;
	display: flex;
	align-items: flex-start;
	gap: clamp(40px, 4vw, 80px);
	width: max-content;
	padding: clamp(150px, 15vw, 250px) var(--gutter) 0;
	will-change: transform;
}

.is-corp .events__card {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
}

.is-corp .events__plaque {
	position: relative;
	margin-bottom: 16px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .08);
	background: rgba(255, 255, 255, .05);
}

.is-corp .events__plaque img,
.is-corp .events__plaque video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Уголки — тонкие скобки по краям плашки. */
.is-corp .events__corner {
	position: absolute;
	width: 10px;
	height: 10px;
	border: 0 solid rgba(255, 255, 255, .5);
	pointer-events: none;
}

.is-corp .events__corner--tl { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.is-corp .events__corner--tr { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.is-corp .events__corner--bl { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
.is-corp .events__corner--br { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

/* Два размера плашки. Пропорции взяты у образца: 592×436 и 288×259.

   Третье слагаемое в min() — предел по высоте экрана. Ширина сама по себе
   ничего не знает про то, сколько места осталось под подпись, и на широком,
   но невысоком окне текст под плашкой упирался в край приколотого экрана и
   срезался. Вычитаем место под шапку с заголовком и под саму подпись, а
   остаток переводим в ширину через пропорцию плашки. */
.is-corp .events__card--lg { width: min(41vw, 720px, calc((100svh - 340px) * 1.3578)); }
.is-corp .events__card--lg .events__plaque { aspect-ratio: 592 / 436; }

.is-corp .events__card--sm { width: min(20vw, 350px, calc((100svh - 380px) * 1.1120)); }
.is-corp .events__card--sm .events__plaque { aspect-ratio: 288 / 259; }

.is-corp .events__card-title {
	margin: 0;
	font-family: var(--body);
	font-weight: 300;
	/* 33px на широком экране; ниже — по ширине окна, чтобы длинные названия
	   не ломались на две строки в узкой карточке. */
	font-size: clamp(1.15rem, 2.3vw, 33px);
	line-height: 1.25;
	letter-spacing: -.02em;
	color: #F5F5F5;
}

.is-corp .events__card-desc {
	margin: .55em 0 0;
	font-family: var(--body);
	font-weight: 300;
	font-size: clamp(.8rem, .94vw, .96rem);
	line-height: 1.55;
	letter-spacing: -.01em;
	color: rgba(245, 245, 245, .62);
}

/* Планшеты и телефоны: бокового хода нет — карточки встают столбцом,
   заголовок возвращается в общий поток. Скрипт при такой ширине снимает
   высоту секции и сдвиг дорожки. */
@media (max-width: 900px) {
	.is-corp .events__sticky {
		position: static;
		height: auto;
		overflow: visible;
		padding: clamp(2.6rem, 7vh, 4.4rem) 0 clamp(1rem, 3vh, 2rem);
	}

	/* Заголовок по центру — как у всех разделов на этой ширине. */
	.is-corp .events__head {
		position: static;
		width: auto;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: .7rem;
		margin: 0 var(--gutter) clamp(1.6rem, 4.4vh, 2.6rem);
	}

	.is-corp .events__track {
		position: static;
		transform: none !important;
		flex-direction: column;
		width: auto;
		height: auto;
		padding: 0 var(--gutter);
		gap: clamp(1.8rem, 5vh, 2.8rem);
	}

	.is-corp .events__card--lg,
	.is-corp .events__card--sm { width: 100%; max-width: 520px; margin-inline: auto; }
}

/* Планшеты: карточки форматов по две в ряд.

   Одной колонкой на такой ширине каждая карточка занимала пол-экрана по
   высоте, а рядом с ней оставалось пустое поле шириной с неё же. Пропорция
   плашек здесь общая для крупных и мелких — иначе ряд получался рваным. */
@media (min-width: 601px) and (max-width: 900px) {
	.is-corp .events__track {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: clamp(1.8rem, 4.4vh, 2.6rem) clamp(18px, 2.8vw, 32px);
	}

	.is-corp .events__card--lg,
	.is-corp .events__card--sm {
		width: 100%;
		max-width: none;
		margin-inline: 0;
	}

	.is-corp .events__card--lg .events__plaque,
	.is-corp .events__card--sm .events__plaque { aspect-ratio: 4 / 3; }
}

/* Окно с вертикальным роликом.

   Съёмки клиента сняты телефоном стоймя. В плитке они обрезаны до общей
   ленты 16:9, но в окне резать нечего — там место есть, и кадр показывается
   целиком, во всю доступную высоту. */
.is-corp .lightbox--tall .lightbox__frame {
	width: auto;
	max-width: min(100%, 560px);
}

.is-corp .lightbox--tall .lightbox__video {
	width: auto;
	height: min(84svh, 940px);
	max-width: 100%;
	aspect-ratio: 9 / 16;
}

/* Приглашение в левой колонке блока доверия.

   Колонка липкая и тянется до низа окна, поэтому подпись с кнопкой стоят у
   самого края экрана всё время, пока справа идут строки. */
.is-corp .trust__promo {
	margin-top: auto;
	padding-top: clamp(1.4rem, 3.4vh, 2.2rem);
}

.is-corp .trust__promo-body {
	display: grid;
	gap: clamp(1rem, 2.4vh, 1.5rem);
	justify-items: start;
}

.is-corp .trust__promo-text {
	margin: 0;
	max-width: 34ch;
	font-family: var(--body);
	font-weight: 300;
	font-size: clamp(.92rem, 1.12vw, 1.12rem);
	line-height: 1.45;
	letter-spacing: -.015em;
	color: #F5F5F5;
}

/* На узких экранах колонка перестаёт быть липкой и просто стоит над строками —
   там это приглашение только отодвигало бы ответы, а своя кнопка есть и в
   шапке, и в конце страницы. */
@media (max-width: 900px) {
	.is-corp .trust__promo { display: none; }
}