/* ==========================================================================
   djparty - стилове

   Един файл, зареден нормално. Няма собствена минификация: предишният вариант
   на темата чупеше всеки clamp(), защото махаше интервалите около `+`.

   Подредба:
     1. Шрифтове
     2. Променливи
     3. Reset и типография
     4. Бутони и дребни части
     5. Header: лента, бар, лого, навигация
     6. Мега-меню „Каналите"
     7. Мобилен лист
     8. Сцената (hero)
     9. Секциите на началната
    10. Кинолентата
    11. Вечерта като вълна
    12. Запитването
    13. Вътрешните страници
    14. Класическата начална
    15. Сватби
    16. Страниците на услугите
    17. Footer
    18. Движение и достъпност
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Шрифтове

   Geologica носи заглавията и номерата - техничен гротеск с много тегла и
   кирилица, рисувана заедно с латиницата, а не прилепена после.
   Golos Text носи текста - създаден е за кирилица от Paratype.

   Двата файла са орязани до латиница + кирилица: 61 KB общо.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: "Geologica";
	src: url("../fonts/geologica-var.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Golos";
	src: url("../fonts/golos-var.woff2") format("woff2");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Променливи и теми

   Три теми, един набор от имена. Нищо извън този блок не знае коя тема е
   пусната - компонентите четат само токени. Затова добавянето на четвърта
   тема е въпрос на още един блок тук, а не на обхождане на целия файл.

   Темата се слага като data-theme на <html> от малък скрипт в <head>, преди
   първото рисуване - иначе страницата мига в тъмно, преди да светне.
   -------------------------------------------------------------------------- */

:root {
	/* Типография - обща за трите теми. */
	--f-display: "Geologica", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-body: "Golos", system-ui, -apple-system, "Segoe UI", sans-serif;

	--t--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
	--t-0: clamp(0.9375rem, 0.91rem + 0.13vw, 1rem);
	--t-1: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	--t-2: clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem);
	--t-3: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
	--t-4: clamp(2.5rem, 1.6rem + 3.9vw, 5rem);

	/* Мерки */
	--wrap: 1320px;
	--gutter: clamp(1.15rem, 4vw, 2.5rem);
	--strip-h: 34px;
	--bar-h: 72px;
	--hdr-h: calc(var(--strip-h) + var(--bar-h));

	--r: 12px;
	--r-lg: 20px;
	--pill: 999px;

	/* Движение */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--fast: 0.2s;
	--mid: 0.4s;
	--slow: 0.62s;
}

/* --------------------------------------------------------------------------
   Тъмна - по подразбиране. Нощта, в която работи DJ-ят.
   -------------------------------------------------------------------------- */

:root,
:root[data-theme="dark"] {
	color-scheme: dark;

	--bg: #07070a;
	--bg-2: #0d0d12;
	--bg-3: #14141b;
	--ink: #f6f6f8;
	--muted: #8e8e9c;

	--line: rgba(255, 255, 255, 0.09);
	--line-2: rgba(255, 255, 255, 0.16);

	/* Степени на текста върху основния фон. */
	--ink-2: rgba(255, 255, 255, 0.78);
	--ink-3: rgba(255, 255, 255, 0.62);

	/* Пълнежи при посочване и повдигане. */
	--fill-1: rgba(255, 255, 255, 0.04);
	--fill-2: rgba(255, 255, 255, 0.07);
	--fill-3: rgba(255, 255, 255, 0.1);

	--ghost: rgba(255, 255, 255, 0.11);
	--glow: rgba(255, 255, 255, 0.35);
	--scrim: rgba(0, 0, 0, 0.55);

	--page: var(--bg);

	/* Каналите - светлината на всеки повод. */
	--c-svatbi: #e7c27d;
	--c-partita: #ff3d8b;
	--c-firmeni: #3ad6e8;
	--c-tehnika: #9b6bff;

	/*
	 * Медия: снимките в менюто и на сцената. Държат се отделно от фона,
	 * защото текстът върху тях остава светъл във всяка тема.
	 */
	--media-ink: #ffffff;
	--media-ink-2: rgba(255, 255, 255, 0.78);
	--media-ink-3: rgba(255, 255, 255, 0.62);
	--media-base: #07070a;
	--media-chip: rgba(0, 0, 0, 0.35);
	--media-glow: 55%;
	--media-veil: 0;
	--shot-rest: grayscale(0.6) brightness(0.62) contrast(1.06);
	--shot-on: grayscale(0) brightness(0.92) contrast(1.04) saturate(1.1);
	--stage-shot: brightness(0.42) saturate(0.85) contrast(1.05);

	/* Светлинното поле върху сцената. */
	--light-blend: screen;
	--light-alpha: 0.85;

	--logo-dark: none;
	--logo-light: block;
}

/* --------------------------------------------------------------------------
   Светла - за сватбите. Топла и цветна, не бледа.
   -------------------------------------------------------------------------- */

:root[data-theme="light"] {
	color-scheme: light;

	--bg: #fdfaf5;
	--bg-2: #ffffff;
	--bg-3: #f6efe4;
	--ink: #17140f;
	--muted: #6d665b;

	--line: rgba(23, 20, 15, 0.12);
	--line-2: rgba(23, 20, 15, 0.22);

	--ink-2: rgba(23, 20, 15, 0.76);
	--ink-3: rgba(23, 20, 15, 0.58);

	--fill-1: rgba(23, 20, 15, 0.045);
	--fill-2: rgba(23, 20, 15, 0.075);
	--fill-3: rgba(23, 20, 15, 0.1);

	--ghost: rgba(23, 20, 15, 0.13);
	--glow: rgba(23, 20, 15, 0.22);
	--scrim: rgba(40, 34, 26, 0.35);

	/*
	 * И тук фонът не е плосък. Три много слаби петна в цветовете на каналите
	 * държат страницата цветна, без да пипат четимостта на текста.
	 */
	--page:
		radial-gradient(70% 50% at 8% -5%, rgba(232, 160, 20, 0.16), transparent 62%),
		radial-gradient(60% 45% at 95% 4%, rgba(225, 29, 116, 0.12), transparent 64%),
		radial-gradient(75% 55% at 50% 108%, rgba(11, 164, 196, 0.10), transparent 66%),
		#fdfaf5;

	/*
	 * Наситени, а не потъмнени до кафяво. Измерени са върху #fdfaf5: златото
	 * при #b8790a даваше само 3.49:1 и падаше под прага за дребен текст,
	 * затова е свалено до 4.76:1. Останалите три минават както са.
	 */
	--c-svatbi: #9c6405;
	--c-partita: #d81b60;
	--c-firmeni: #067d95;
	--c-tehnika: #6b34e0;

	--media-ink: #17140f;
	--media-ink-2: rgba(23, 20, 15, 0.75);
	--media-ink-3: rgba(23, 20, 15, 0.55);
	--media-base: #fdfaf5;
	--media-chip: rgba(255, 255, 255, 0.7);
	--media-glow: 0%;

	/*
	 * Воалът пада от 0.42 на 0.18: снимките запазват цвета си. Текстът пак се
	 * чете, защото затъмненията в дъното си остават - там сяда той.
	 */
	--media-veil: 0.18;
	--shot-rest: grayscale(0.12) brightness(1.04) saturate(1.15);
	--shot-on: grayscale(0) brightness(1.06) saturate(1.3);
	--stage-shot: brightness(1.06) saturate(1.2) contrast(1.02);

	--light-blend: multiply;
	--light-alpha: 0.5;

	--logo-dark: block;
	--logo-light: none;
}

/* --------------------------------------------------------------------------
   Клуб - шарената. Индигова нощ с усилени докрай цветове.
   -------------------------------------------------------------------------- */

:root[data-theme="neon"] {
	color-scheme: dark;

	--bg: #0a0618;
	--bg-2: #170d33;
	--bg-3: #23154d;
	--ink: #f7f2ff;
	--muted: #a99ad0;

	--line: rgba(196, 174, 255, 0.16);
	--line-2: rgba(196, 174, 255, 0.3);

	--ink-2: rgba(247, 242, 255, 0.82);
	--ink-3: rgba(247, 242, 255, 0.64);

	--fill-1: rgba(196, 174, 255, 0.07);
	--fill-2: rgba(196, 174, 255, 0.12);
	--fill-3: rgba(196, 174, 255, 0.16);

	--ghost: rgba(196, 174, 255, 0.18);
	--glow: rgba(255, 45, 150, 0.55);
	--scrim: rgba(6, 2, 18, 0.62);

	/* Четири петна вместо две - цялата страница е осветена сцена. */
	--page:
		radial-gradient(75% 55% at 10% -8%, rgba(155, 107, 255, 0.30), transparent 62%),
		radial-gradient(65% 50% at 92% 6%, rgba(255, 45, 150, 0.24), transparent 64%),
		radial-gradient(70% 45% at 50% 45%, rgba(34, 232, 255, 0.12), transparent 68%),
		radial-gradient(80% 60% at 20% 105%, rgba(255, 209, 102, 0.12), transparent 66%),
		#0a0618;

	--c-svatbi: #ffd166;
	--c-partita: #ff2d96;
	--c-firmeni: #22e8ff;
	--c-tehnika: #b388ff;

	--media-ink: #ffffff;
	--media-ink-2: rgba(255, 255, 255, 0.8);
	--media-ink-3: rgba(255, 255, 255, 0.64);
	--media-base: #0a0618;
	--media-chip: rgba(6, 2, 18, 0.42);
	--media-glow: 80%;
	--media-veil: 0.1;

	/* Снимките са преситени нарочно - това е клубът, не документален кадър. */
	--shot-rest: grayscale(0.2) brightness(0.68) contrast(1.14) saturate(1.7);
	--shot-on: grayscale(0) brightness(1) contrast(1.12) saturate(1.9);
	--stage-shot: brightness(0.58) saturate(1.75) contrast(1.12);

	--light-blend: screen;
	--light-alpha: 1;

	--logo-dark: none;
	--logo-light: block;
}


/* --------------------------------------------------------------------------
   3. Reset и типография
   -------------------------------------------------------------------------- */

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--hdr-h) + 1.5rem);
}

body {
	background: var(--page);
	background-attachment: fixed;
	color: var(--ink);
	font-family: var(--f-body);
	font-size: var(--t-0);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Докато мега-панелът или мобилният лист е отворен, страницата не скролва. */
body.is-locked {
	overflow: hidden;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	cursor: pointer;
}

a {
	color: inherit;
	text-decoration: none;
}

h1,
h2,
h3 {
	font-family: var(--f-display);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

h1 {
	font-size: var(--t-4);
	letter-spacing: -0.045em;
}

h2 {
	font-size: var(--t-3);
}

p {
	text-wrap: pretty;
}

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/*
 * Header-ът е fixed, значи не заема място. Мястото се дава на <main> и се
 * връща обратно на сцената, която си носи собствения горен отстъп. Така
 * работи навсякъде, без :has() и без клас според шаблона.
 */
#main {
	padding-top: var(--hdr-h);
}

.stage {
	margin-top: calc(-1 * var(--hdr-h));
}

.section {
	padding-block: clamp(3rem, 7vw, 6rem);
}

.entry {
	max-width: 72ch;
}

.entry > * + * {
	margin-top: 1.1em;
}

.eyebrow {
	font-family: var(--f-display);
	font-size: var(--t--1);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

.sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip {
	position: absolute;
	top: -100%;
	left: var(--gutter);
	z-index: 200;
	padding: 0.8rem 1.25rem;
	background: var(--ink);
	color: var(--bg);
	font-weight: 600;
	border-radius: 0 0 var(--r) var(--r);
}

.skip:focus {
	top: 0;
}

:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
	border-radius: 4px;
}

/* --------------------------------------------------------------------------
   4. Бутони и дребни части
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.82em 1.4em;
	border: 1px solid transparent;
	border-radius: var(--pill);
	font-family: var(--f-display);
	font-size: var(--t--1);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1;
	white-space: nowrap;
	transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease),
		border-color var(--fast) var(--ease), transform var(--fast) var(--ease),
		box-shadow var(--fast) var(--ease);
}

.btn svg {
	flex: none;
}

.btn--lg {
	padding: 1.05em 1.8em;
	font-size: var(--t-0);
}

/*
 * Главният призив. Бяло върху черно е най-силният контраст на екрана - по-силен
 * от какъвто и да е цвят, а и оставя цветовете за каналите.
 */
.btn--cta {
	background: var(--ink);
	color: var(--bg);
	font-weight: 600;
}

.btn--cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 30px -12px var(--glow);
}

.btn--cta:active {
	transform: translateY(0);
}

.btn--ghost {
	border-color: var(--line-2);
	color: var(--ink);
}

.btn--ghost:hover {
	border-color: var(--ink);
	background: var(--fill-2);
}

.btn--light {
	background: var(--fill-3);
	border-color: var(--line-2);
	backdrop-filter: blur(8px);
}

.btn--light:hover {
	background: var(--ink);
	color: var(--bg);
}

.pill {
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 1.05rem;
	border: 1px solid var(--line);
	border-radius: var(--pill);
	font-family: var(--f-display);
	font-size: var(--t--1);
	font-weight: 500;
	color: var(--muted);
	transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease),
		background-color var(--fast) var(--ease);
}

.pill:hover {
	color: var(--ink);
	border-color: var(--line-2);
	background: var(--fill-1);
}

.pill--cta {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bg);
	font-weight: 600;
}

.pill--cta:hover {
	opacity: 0.88;
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

.hdr {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 100;
	background: color-mix(in oklab, var(--bg) 82%, transparent);
	backdrop-filter: blur(18px) saturate(150%);
	border-bottom: 1px solid var(--line);
	transition: background-color var(--mid) var(--ease);
}

/* Когато панелът е отворен, header-ът става плътен - панелът е сцената. */
.hdr.is-open {
	background: var(--bg);
}

/* Бягащата лента ------------------------------------------------------------
 *
 * Един ред текст, който върви наляво без прекъсване. Списъкът е изписан два
 * пъти в HTML-а и лентата се мести точно с половината си ширина - така краят
 * съвпада с началото и няма подскок.
 */

.strip {
	position: relative;
	height: var(--strip-h);
	display: flex;
	align-items: center;
	overflow: hidden;
	border-bottom: 1px solid var(--line);
	background: var(--bg-2);
}

/* Светлината, която минава по лентата - единствената цветна следа в header-а. */
.strip::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		transparent 0%,
		color-mix(in oklab, var(--c-tehnika) 55%, transparent) 22%,
		color-mix(in oklab, var(--c-partita) 55%, transparent) 40%,
		color-mix(in oklab, var(--c-svatbi) 55%, transparent) 58%,
		transparent 80%
	);
	opacity: 0.22;
	transform: translateX(-40%);
	animation: strip-light 9s linear infinite;
	pointer-events: none;
}

@keyframes strip-light {
	to {
		transform: translateX(40%);
	}
}

.strip__viewport {
	width: 100%;
	overflow: hidden;
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.strip__track {
	display: flex;
	align-items: center;
	gap: 3rem;
	list-style: none;
	padding: 0;
	margin: 0;
	width: max-content;
	animation: strip-run 38s linear infinite;
}

.strip__track li {
	position: relative;
	font-size: 0.75rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
}

/* Точка-разделител между надписите, вместо втори цвят или иконка. */
.strip__track li::after {
	content: "";
	position: absolute;
	right: -1.55rem;
	top: 50%;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--line-2);
	transform: translateY(-50%);
}

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

/* Барът --------------------------------------------------------------------- */

.hdr__bar {
	position: relative;
	z-index: 2;
	height: var(--bar-h);
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 2vw, 2rem);
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Логото -------------------------------------------------------------------- */

.brand {
	display: inline-flex;
	align-items: center;
	flex: none;
	/*
	 * Логото носи и името, и знака. Свети леко при посочване - толкова, колкото
	 * да покаже, че е връзка, без да подскача.
	 */
	transition: opacity var(--fast) var(--ease);
}

.brand:hover {
	opacity: 0.82;
}

.brand__img {
	height: 50px;
	width: auto;
}

.brand__img--light {
	display: var(--logo-light);
}

.brand__img--dark {
	display: var(--logo-dark);
}

.brand--lg .brand__img {
	height: 68px;
}

@media (max-width: 480px) {
	.brand__img {
		height: 40px;
	}
}

/* --------------------------------------------------------------------------
   Пултът е включен

   Три дребни знака в header-а, които казват едно и също: звукът свири,
   линията е свободна, светлината минава. Всеки е малък нарочно - заедно
   правят header-а жив, поотделно не крадат внимание от навигацията.
   -------------------------------------------------------------------------- */

/* 1. Еквалайзерът до логото ------------------------------------------------- */

.onair {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 19px;
	flex: none;
	/* Тласъкът надясно е ТУК, а не на логото - иначе еквалайзерът отлита
	   при навигацията и връзката със знака се губи. */
	margin-right: auto;
	margin-left: 0.95rem;
	padding-left: 0.95rem;
	border-left: 1px solid var(--line);
}

.onair i {
	width: 2.5px;
	height: 100%;
	border-radius: 2px;
	background: var(--bc);
	transform-origin: 50% 100%;
	transform: scaleY(0.22);
	/*
	 * Всяко стълбче има собствена дължина на цикъла и собствено отрицателно
	 * закъснение. Отрицателното закъснение го стартира „вече започнало", така
	 * че при зареждане редицата е в движение, а не строена в редица.
	 */
	animation: onair var(--bd) ease-in-out infinite alternate;
	animation-delay: var(--bt);
}

@keyframes onair {
	from { transform: scaleY(0.18); }
	to   { transform: scaleY(1); }
}

/* При посочване на логото звукът се усилва - една връзка между двете. */
.brand:hover ~ .onair i {
	animation-duration: calc(var(--bd) * 0.55);
}

@media (max-width: 620px) {
	.onair {
		display: none;
	}
}

/* 2. Телефонът: линията е свободна ------------------------------------------ */

.hdr__phone-dot {
	position: relative;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--c-firmeni);
	flex: none;
	box-shadow: 0 0 10px color-mix(in oklab, var(--c-firmeni) 70%, transparent);
}

/* Пръстенът се разширява и гасне - както свети индикатор на включен уред. */
.hdr__phone-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1.5px solid var(--c-firmeni);
	animation: ping 2.6s var(--ease) infinite;
}

@keyframes ping {
	0% {
		transform: scale(1);
		opacity: 0.9;
	}
	70%,
	100% {
		transform: scale(3.2);
		opacity: 0;
	}
}

/* 3. Светлината минава по бутона -------------------------------------------- */

.btn--cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/*
 * Бутонът е бял, затова бял отблясък върху него е невидим. Вместо това през
 * него минава самата светлина на сайта - четирите цвята на каналите, събрани
 * в тясна лента. Прожекторът минава по пулта.
 */
.btn--cta::after {
	content: "";
	position: absolute;
	inset: -1px;
	/*
	 * Лентата стои НАД белия фон и се смесва с multiply: върху бялото се вижда
	 * в пълен цвят, върху тъмния надпис не променя нищо. Отрицателен z-index
	 * тук би я пратил зад собствения фон на бутона и нямаше да се вижда.
	 */
	z-index: 1;
	mix-blend-mode: multiply;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		transparent 38%,
		color-mix(in oklab, var(--c-tehnika) 55%, transparent) 44%,
		color-mix(in oklab, var(--c-partita) 60%, transparent) 50%,
		color-mix(in oklab, var(--c-svatbi) 55%, transparent) 56%,
		transparent 62%
	);
	transform: translateX(-115%);
	/*
	 * Линейно, а не с --ease. Стандартната крива на сайта е рязък ease-out и
	 * изяжда 90% от пътя в първата третина - светлината проблясва, вместо да
	 * мине. Прожектор, който мете залата, върви с постоянна скорост.
	 */
	transition: transform 0.62s linear;
}

.btn--cta:hover::after,
.btn--cta:focus-visible::after {
	transform: translateX(115%);
}

/* --------------------------------------------------------------------------
   Без движение - без нито един от трите.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.onair i {
		animation: none !important;
		transform: scaleY(0.55);
	}

	.hdr__phone-dot::after {
		animation: none !important;
		opacity: 0;
	}

	.btn--cta::after {
		display: none;
	}
}

/* Превключвателят на теми ---------------------------------------------------
 *
 * Три кръгчета, всяко боядисано в собствената си тема: фонът е фонът ѝ,
 * точката вътре е акцентът ѝ. Затова не му трябва надпис - образецът е
 * самото обяснение.
 * -------------------------------------------------------------------------- */

.tsw {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--line);
	border-radius: var(--pill);
	flex: none;
}

.tsw__b {
	position: relative;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--sw-bg);
	box-shadow: inset 0 0 0 1px var(--line-2);
	transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.tsw__b::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sw-dot);
	transform: translate(-50%, -50%) scale(0.7);
	transition: transform var(--fast) var(--ease);
}

.tsw__b:hover {
	transform: scale(1.1);
}

.tsw__b[aria-pressed="true"] {
	box-shadow: inset 0 0 0 1px var(--line-2), 0 0 0 2px var(--ink);
}

.tsw__b[aria-pressed="true"]::after {
	transform: translate(-50%, -50%) scale(1);
}

/* В мобилния лист стои над бутоните и има място да е по-едър. */
.tsw--sheet {
	align-self: center;
	margin-bottom: 0.5rem;
	padding: 5px;
}

.tsw--sheet .tsw__b {
	width: 28px;
	height: 28px;
}

@media (max-width: 1100px) {
	.hdr__actions .tsw {
		display: none;
	}
}

/* Навигацията --------------------------------------------------------------- */

.nav__list {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.55rem 0.9rem;
	border-radius: var(--pill);
	font-family: var(--f-display);
	font-size: var(--t--1);
	font-weight: 500;
	color: var(--muted);
	white-space: nowrap;
	transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}

.nav__link:hover,
.nav__link[aria-current="page"],
.nav__item--mega[data-open="true"] .nav__link {
	color: var(--ink);
	background: var(--fill-2);
}

.nav__chev {
	opacity: 0.65;
	transition: transform var(--fast) var(--ease);
}

.nav__item--mega[data-open="true"] .nav__chev {
	transform: rotate(180deg);
}

/* Дясната страна ------------------------------------------------------------ */

.hdr__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: none;
	/*
	 * Двата автоматични отстъпа - тук и на еквалайзера - центрират навигацията
	 * между тях. Този трябва да е на действията, а не на еквалайзера: под
	 * 620 px еквалайзерът се скрива и без него логото и бутоните щяха да се
	 * слепят вляво.
	 */
	margin-left: auto;
}

.hdr__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.5rem 0.75rem;
	font-size: var(--t--1);
	font-variant-numeric: tabular-nums;
	color: var(--muted);
	transition: color var(--fast) var(--ease);
}

.hdr__phone:hover {
	color: var(--ink);
}

.hdr__call {
	display: none;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--line-2);
	border-radius: 50%;
	color: var(--ink);
	flex: none;
	transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.hdr__call:active {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bg);
}

.burger {
	display: none;
	position: relative;
	width: 42px;
	height: 42px;
	border: 1px solid var(--line-2);
	border-radius: 50%;
	flex: none;
}

.burger span:not(.sr) {
	position: absolute;
	left: 50%;
	width: 15px;
	height: 1.5px;
	background: var(--ink);
	border-radius: 2px;
	transform: translateX(-50%);
	transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}

.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 20px; }
.burger span:nth-child(3) { top: 26px; }

.burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateX(-50%) translateY(6px) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateX(-50%) translateY(-6px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   6. Мега-меню „Каналите"

   Четири вертикални панела и пети, по-тесен. Всеки панел е кадър от събитие;
   посоченият се разтваря, снимката му светва в цвета на канала и услугите
   изплуват отдолу. Един жест, едно значение: включваш канала.
   -------------------------------------------------------------------------- */

.mega {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease);
}

.mega[hidden] {
	display: none;
}

.mega.is-open {
	opacity: 1;
	transform: none;
}

.mega__rail {
	display: flex;
	height: clamp(360px, 54vh, 560px);
}

/* Каналът ------------------------------------------------------------------- */

.ch {
	--c: var(--line-2);

	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	isolation: isolate;
	border-right: 1px solid rgba(0, 0, 0, 0.5);
	transition: flex-grow var(--slow) var(--ease-out);
}

.ch--svatbi  { --c: var(--c-svatbi); }
.ch--partita { --c: var(--c-partita); }
.ch--firmeni { --c: var(--c-firmeni); }
.ch--tehnika { --c: var(--c-tehnika); }

/*
 * Посоченият канал взима повече място за сметка на останалите.
 *
 * Петият панел е изключен нарочно: той няма скрит списък, който да разкрива,
 * а разтягането реже снимката отгоре-надолу и лицето излиза от кадър.
 */
.mega__rail:hover .ch:not(.ch--me):hover,
.ch:not(.ch--me):focus-within {
	flex-grow: 2.4;
}

.ch__cover {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
}

/*
 * Воалът: колко от фона ляга върху снимката. В тъмната тема е нула - там
 * снимките са затъмнени с филтър. В светлата е почти половин воал и панелите
 * стават бледи като хартия, вместо да остават тъмни правоъгълници.
 */
.ch__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--media-base);
	opacity: var(--media-veil);
	pointer-events: none;
}

.ch__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * В покой снимките са приглушени, за да не се бият помежду си, но не
	 * толкова, че да станат черни правоъгълници. При посочване каналът
	 * „светва" - това е целият механизъм.
	 */
	filter: var(--shot-rest);
	transform: scale(1.06);
	transition: filter var(--slow) var(--ease), transform var(--slow) var(--ease-out);
}

.ch:hover .ch__cover img,
.ch:focus-within .ch__cover img {
	filter: var(--shot-on);
	transform: scale(1);
}

/*
 * Два слоя над снимката: черно към дъното, за да се чете текстът, и цвят на
 * канала, който се усилва при посочване.
 */
.ch::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, var(--bg) 4%, color-mix(in oklab, var(--bg) 55%, transparent) 42%, transparent 72%),
		linear-gradient(to top, color-mix(in oklab, var(--c) 60%, transparent), transparent 55%);
	opacity: 0.55;
	transition: opacity var(--slow) var(--ease);
	pointer-events: none;
}

.ch:hover::after,
.ch:focus-within::after {
	opacity: 1;
}

/* Номерът ------------------------------------------------------------------- */

.ch__num {
	color: var(--ghost);
	position: absolute;
	top: clamp(1rem, 2vw, 1.75rem);
	left: clamp(1rem, 2vw, 1.75rem);
	font-family: var(--f-display);
	font-size: clamp(3rem, 6vw, 5.5rem);
	font-weight: 800;
	line-height: 0.8;
	letter-spacing: -0.06em;
	transition: color var(--slow) var(--ease), text-shadow var(--slow) var(--ease);
	pointer-events: none;
}

.ch:hover .ch__num,
.ch:focus-within .ch__num {
	color: var(--c);
	text-shadow: 0 0 40px color-mix(in oklab, var(--c) 70%, transparent);
}

/* Текстът долу -------------------------------------------------------------- */

.ch__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: clamp(1rem, 1.8vw, 1.6rem) clamp(1rem, 1.8vw, 1.6rem) clamp(1.5rem, 2.4vw, 2rem);
}

.ch__title {
	color: var(--media-ink);
	font-size: var(--t-2);
	font-weight: 700;
	letter-spacing: -0.035em;
	text-transform: uppercase;
}

.ch__title--sm {
	font-size: var(--t-1);
	text-transform: none;
}

.ch__eyebrow {
	font-family: var(--f-display);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c);
	margin-bottom: 0.4rem;
}

/*
 * Подзаглавието се пренася на два реда вместо да се реже с многоточие -
 * в тесен панел „Професионално и гл…" не значи нищо.
 */
.ch__sub {
	color: var(--media-ink-3);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font-size: var(--t--1);
	line-height: 1.35;
	margin-top: 0.3rem;
	/*
	 * Място за два реда винаги, дори когато текстът е един. Иначе заглавията
	 * на каналите застават на различна височина и редицата се разпада всеки
	 * път, щом някой пренапише едно подзаглавие.
	 */
	min-height: 2.7em;
}

/*
 * Услугите растат от нула до естествената си височина. Решетката с 0fr → 1fr
 * е единственият начин това да се анимира, без да се знае височината
 * предварително - затова списъкът е обвит: обвивката е решетка с ЕДИН ред,
 * а той е целият <ul>.
 */
.ch__reveal {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows var(--slow) var(--ease-out), opacity var(--mid) var(--ease),
		margin-top var(--slow) var(--ease-out);
}

.ch:hover .ch__reveal,
.ch:focus-within .ch__reveal {
	grid-template-rows: 1fr;
	opacity: 1;
	margin-top: 0.85rem;
}

.ch__list {
	min-height: 0;
	overflow: hidden;
	list-style: none;
	padding: 0;
	margin: 0;
}

.ch__list a {
	display: block;
	padding: 0.32rem 0;
	font-size: var(--t--1);
	color: var(--media-ink-2);
	white-space: nowrap;
	transition: color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.ch__list a:hover {
	color: var(--media-ink);
	transform: translateX(5px);
}

/* Еквалайзерът -------------------------------------------------------------- */

.ch__eq {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 30px;
	display: flex;
	align-items: flex-end;
	gap: 2px;
	padding-inline: 2px;
	opacity: 0;
	transition: opacity var(--mid) var(--ease);
	pointer-events: none;
}

.ch:hover .ch__eq,
.ch:focus-within .ch__eq {
	opacity: 0.85;
}

.ch__eq i {
	flex: 1 1 0;
	height: 100%;
	background: linear-gradient(to top, var(--c), transparent);
	transform-origin: 50% 100%;
	transform: scaleY(0.12);
}

.ch:hover .ch__eq i,
.ch:focus-within .ch__eq i {
	animation: eq 0.9s ease-in-out infinite alternate;
	/* Всяко стълбче тръгва малко след предишното - вълна, не мигане. */
	animation-delay: calc(var(--b) * -0.11s);
}

@keyframes eq {
	from { transform: scaleY(0.1); }
	to   { transform: scaleY(0.85); }
}

/* Петият панел -------------------------------------------------------------- */

.ch--me {
	/* Няма цвят на канал - надписът тук е бял, не цветен. */
	--c: var(--ink-2);

	flex: 0 0 clamp(230px, 20%, 310px);
	border-right: 0;
	background: var(--bg-2);
}

/* Кадърът се държи за горната третина - там е лицето. */
.ch--me .ch__cover img {
	object-position: 50% 20%;
	filter: var(--shot-rest);
	transform: none;
}

.ch--me:hover .ch__cover img {
	transform: none;
	filter: var(--shot-on);
}

.ch--me::after {
	background: linear-gradient(to top, var(--bg) 12%, color-mix(in oklab, var(--bg) 62%, transparent) 55%, transparent 85%);
	opacity: 1;
}

.ch--me .ch__body .btn {
	margin-top: 1rem;
	width: 100%;
}

/* Тук текстът е изречение, не етикет - три реда, без заковаване. */
.ch--me .ch__sub {
	-webkit-line-clamp: 3;
	line-clamp: 3;
	min-height: 0;
	margin-top: 0.5rem;
}

/* Долната лента ------------------------------------------------------------- */

.mega__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 1.1rem var(--gutter);
}

.mega__note {
	font-size: var(--t--1);
	color: var(--muted);
}

.mega__note b {
	color: var(--ink);
	font-weight: 600;
}

.mega__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Затъмнението зад панела --------------------------------------------------- */

.scrim {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: var(--scrim);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity var(--mid) var(--ease);
}

.scrim[hidden] {
	display: none;
}

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

/* --------------------------------------------------------------------------
   7. Мобилен лист
   -------------------------------------------------------------------------- */

.sheet {
	position: fixed;
	inset: 0;
	z-index: 95;
	display: flex;
	flex-direction: column;
	padding: calc(var(--hdr-h) + 0.75rem) var(--gutter) 1.25rem;
	background: var(--bg);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease);
}

.sheet[hidden] {
	display: none;
}

.sheet.is-open {
	opacity: 1;
	transform: none;
}

/*
 * Целият лист поема цвета на отворения канал - слаб ореол горе, който се
 * сменя, щом отвориш друг. Прави същото, което прави разтварящият се панел
 * на десктоп: показва кой канал свири в момента.
 */
.sheet::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(
		90% 42% at 50% 4%,
		color-mix(in oklab, var(--glow, transparent) 26%, transparent),
		transparent 72%
	);
	opacity: 0;
	transition: opacity var(--slow) var(--ease);
}

.sheet:has(.sheet__ch[open])::after {
	opacity: 1;
}

.sheet:has(.ch--svatbi[open])  { --glow: var(--c-svatbi); }
.sheet:has(.ch--partita[open]) { --glow: var(--c-partita); }
.sheet:has(.ch--firmeni[open]) { --glow: var(--c-firmeni); }
.sheet:has(.ch--tehnika[open]) { --glow: var(--c-tehnika); }

/* Съдържанието стои над ореола. */
.sheet > nav,
.sheet__foot {
	position: relative;
	z-index: 1;
}

/* Каналът --------------------------------------------------------------------
 *
 * Същата механика като на десктоп, само че задвижена от [open] вместо от
 * посочване: снимката светва, номерът пламва в цвета на канала, еквалайзерът
 * тръгва, услугите излизат една след друга.
 * -------------------------------------------------------------------------- */

/*
 * Тук НЕ се задава --c. Цветът идва от класа ch--*, който е дефиниран
 * по-нагоре във файла; резервна стойност на това място би имала същата
 * специфичност, но по-късна позиция - и щеше да пребие цвета на канала.
 */
.sheet__ch {
	position: relative;
	border: 1px solid var(--line);
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: 0.6rem;
	background: var(--bg-2);
	transition: border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}

.sheet__ch[open] {
	border-color: color-mix(in oklab, var(--c) 42%, transparent);
	box-shadow: 0 20px 46px -28px color-mix(in oklab, var(--c) 85%, transparent);
}

.sheet__ch summary {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	min-height: 104px;
	/* Дясното поле е лентата на шеврона - цифрата не влиза в нея. */
	padding: 1.15rem 2.9rem 1.15rem 1.1rem;
	cursor: pointer;
	list-style: none;
}

.sheet__ch summary::-webkit-details-marker {
	display: none;
}

/* Слоевете: снимка → затъмнение с цвят → номер-водник → текст. */

.sheet__ch-img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: var(--shot-rest);
	transform: scale(1.07);
	transition: filter var(--slow) var(--ease), transform var(--slow) var(--ease-out);
}

.sheet__ch[open] .sheet__ch-img {
	filter: var(--shot-on);
	transform: scale(1);
}

/*
 * Два отделни слоя, защото при отваряне трябва да тръгнат в РАЗЛИЧНИ посоки:
 * цветът се усилва (паленето), а затъмнението отслабва (снимката се показва).
 * В един общ фон това не може да стане - общата непрозрачност движи и двете.
 */
.sheet__ch summary::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to right, color-mix(in oklab, var(--c) 42%, transparent), transparent 72%);
	opacity: 0.35;
	transition: opacity var(--slow) var(--ease);
}

.sheet__ch[open] summary::before {
	opacity: 1;
}

.sheet__ch summary::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(
		to right,
		var(--bg) 0%,
		color-mix(in oklab, var(--bg) 88%, transparent) 42%,
		color-mix(in oklab, var(--bg) 45%, transparent) 100%
	);
	opacity: 0.92;
	transition: opacity var(--slow) var(--ease);
}

.sheet__ch[open] summary::after {
	opacity: 0.66;
}

/* Номерът стои като воден знак вдясно и пламва, щом каналът се отвори. */
.sheet__ch-ghost {
	position: absolute;
	z-index: 3;
	/*
	 * Отрицателната разредка виси и след последната цифра, затова отстъпът е
	 * по-голям, отколкото изглежда нужен - иначе „01" опира ръба на картата.
	 */
	right: 4.5rem;
	top: 50%;
	font-family: var(--f-display);
	font-size: 3.5rem;
	font-weight: 800;
	line-height: 0.8;
	letter-spacing: -0.06em;
	color: var(--ghost);
	transform: translateY(-50%);
	transition: color var(--slow) var(--ease), text-shadow var(--slow) var(--ease);
	pointer-events: none;
}

.sheet__ch[open] .sheet__ch-ghost {
	color: color-mix(in oklab, var(--c) 62%, transparent);
	text-shadow: 0 0 30px color-mix(in oklab, var(--c) 65%, transparent);
}

.sheet__ch-name {
	position: relative;
	z-index: 4;
	display: grid;
	gap: 0.15rem;
	margin-right: auto;
}

.sheet__ch-name {
	color: var(--media-ink);
}

.sheet__ch-name b {
	font-family: var(--f-display);
	font-size: var(--t-1);
	font-weight: 600;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.sheet__ch-name i {
	font-size: var(--t--1);
	font-style: normal;
	color: var(--media-ink-3);
}

.sheet__ch summary > svg {
	position: relative;
	z-index: 4;
	flex: none;
	color: var(--muted);
	transition: transform var(--mid) var(--ease), color var(--mid) var(--ease);
}

.sheet__ch[open] summary > svg {
	transform: rotate(180deg);
	color: var(--c);
}

/* Еквалайзерът по долния ръб на реда. */
.sheet__ch-eq {
	position: absolute;
	z-index: 4;
	inset-inline: 0;
	bottom: 0;
	height: 22px;
	display: flex;
	align-items: flex-end;
	gap: 2px;
	padding-inline: 2px;
	opacity: 0;
	transition: opacity var(--mid) var(--ease);
	pointer-events: none;
}

.sheet__ch[open] .sheet__ch-eq {
	opacity: 0.9;
}

.sheet__ch-eq i {
	flex: 1 1 0;
	height: 100%;
	background: linear-gradient(to top, var(--c), transparent);
	transform-origin: 50% 100%;
	transform: scaleY(0.1);
}

.sheet__ch[open] .sheet__ch-eq i {
	animation: eq 0.9s ease-in-out infinite alternate;
	animation-delay: calc(var(--b) * -0.11s);
}

/*
 * Разтварянето на <details> е анимирано през ::details-content. Където
 * браузърът не го поддържа, редът просто се отваря веднага - точно както
 * правеше досега, така че нищо не се чупи.
 */
@supports selector(::details-content) {
	.sheet__ch::details-content {
		block-size: 0;
		overflow: hidden;
		transition: block-size var(--mid) var(--ease-out),
			content-visibility var(--mid) allow-discrete;
	}

	.sheet__ch[open]::details-content {
		block-size: auto;
	}
}

/* Услугите: цветна релса отляво и излизане една след друга. */
.sheet__sublist {
	position: relative;
	z-index: 1;
	list-style: none;
	margin: 0 1.1rem 1.1rem 1.6rem;
	padding: 0.3rem 0 0 0.9rem;
	border-left: 2px solid color-mix(in oklab, var(--c) 45%, transparent);
}

.sheet__ch[open] .sheet__sublist li {
	animation: sub-in 0.42s var(--ease-out) backwards;
	animation-delay: calc(var(--j) * 45ms + 90ms);
}

@keyframes sub-in {
	from {
		opacity: 0;
		transform: translateX(-10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.sheet__sublist a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.72rem 0;
	font-size: var(--t-0);
	color: var(--ink-2);
	border-bottom: 1px solid var(--line);
}

.sheet__sublist li:last-child a {
	border-bottom: 0;
}

.sheet__sublist a svg {
	flex: none;
	color: var(--c);
	opacity: 0.4;
	transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.sheet__sublist a:active {
	color: var(--ink);
}

.sheet__sublist a:active svg {
	opacity: 1;
	transform: translateX(4px);
}

.sheet__list {
	list-style: none;
	padding: 0;
	margin: 1.25rem 0 0;
}

.sheet__list a {
	display: block;
	padding: 0.9rem 0;
	font-family: var(--f-display);
	font-size: var(--t-2);
	font-weight: 500;
	letter-spacing: -0.03em;
	border-bottom: 1px solid var(--line);
}

.sheet__foot {
	margin-top: auto;
	padding-top: 1.5rem;
	display: grid;
	gap: 0.75rem;
}

.sheet__foot .btn {
	width: 100%;
	padding: 1.1em 1.5em;
	font-size: var(--t-0);
}

.sheet__phone {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: var(--t-0);
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}

/* Превключване между двете навигации ---------------------------------------- */

@media (max-width: 1100px) {
	.nav,
	.hdr__phone {
		display: none;
	}

	.burger {
		display: block;
	}

	.hdr__call {
		display: grid;
	}
}

@media (min-width: 1101px) {
	.sheet {
		display: none;
	}
}

@media (max-width: 420px) {
	.hdr__actions .btn--cta {
		display: none;
	}

	/* Тук бутонът за обаждане остава единственото действие в лентата -
	   затова изглежда като действие, а не като иконка. */
	.hdr__call {
		background: var(--ink);
		border-color: var(--ink);
		color: var(--bg);
	}
}

/* --------------------------------------------------------------------------
   8. Сцената (hero)

   Слоевете отдолу нагоре: кадър от събитие → светлинно поле в canvas →
   зърно → текст → каналните ленти. Полето и лентите се управляват от
   hero.js; без JavaScript остават кадърът, текстът и лентите като статичен
   избор - нищо не изчезва.
   -------------------------------------------------------------------------- */

.stage {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 100svh;
	padding-top: calc(var(--hdr-h) + clamp(2rem, 6vh, 5rem));
	overflow: hidden;
	isolation: isolate;
	background: var(--bg);
}

/* Кадрите ------------------------------------------------------------------- */

.stage__shots {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.stage__shot {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	/*
	 * Кадърът е приглушен нарочно: истинската светлина идва от полето отгоре.
	 * Ако снимката остане ярка, лъчите нямат върху какво да паднат.
	 */
	filter: var(--stage-shot);
	transform: scale(1.04);
	transition: opacity 1.1s var(--ease), transform 6s linear;
}

.stage__shot.is-on {
	opacity: 1;
	transform: scale(1);
}

/* Затъмнение към дъното, за да стъпи текстът. */
.stage__shots::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(color-mix(in oklab, var(--media-base) calc(var(--media-veil) * 100%), transparent),
			color-mix(in oklab, var(--media-base) calc(var(--media-veil) * 100%), transparent)),
		linear-gradient(to top, var(--bg) 2%, color-mix(in oklab, var(--bg) 55%, transparent) 40%, transparent 78%),
		linear-gradient(to right, color-mix(in oklab, var(--bg) 78%, transparent), transparent 65%);
}

/* Светлинното поле ---------------------------------------------------------- */

.stage__light {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	/*
	 * Платното се рисува на една трета и се разтяга дотук. Лекото размиване
	 * заглажда стъпалата от мащабирането и прави лъчите обемни.
	 */
	/* На тесен екран платното е физически по-малко - същото размиване там
	   размазва лъчите в петно, затова расте с ширината. */
	filter: blur(clamp(7px, 1.1vw, 16px));
	opacity: var(--light-alpha);
	mix-blend-mode: var(--light-blend);
	pointer-events: none;
}

/* Зърното ------------------------------------------------------------------- */

.stage__grain {
	position: absolute;
	inset: -50%;
	z-index: 2;
	pointer-events: none;
	opacity: 0.05;
	background-image: repeating-conic-gradient(#fff 0 0.0009turn, #000 0 0.0018turn);
	background-size: 3px 3px;
	animation: grain 6s steps(6) infinite;
}

@keyframes grain {
	0%   { transform: translate(0, 0); }
	20%  { transform: translate(-2%, 3%); }
	40%  { transform: translate(3%, -2%); }
	60%  { transform: translate(-3%, -3%); }
	80%  { transform: translate(2%, 2%); }
	100% { transform: translate(0, 0); }
}

/* Текстът ------------------------------------------------------------------- */

.stage__inner {
	position: relative;
	z-index: 3;
	/* Поема остатъка от височината, за да не смачква лентите под себе си. */
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-bottom: clamp(2.5rem, 6vh, 5rem);
}

.stage__eyebrow {
	font-family: var(--f-display);
	font-size: var(--t--1);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	/* Стои върху снимка, затова взема цвят за снимка, а не --muted: на светла
	   тема той е тъмносив и се губи в светлия воал. */
	color: var(--media-ink-2);
	margin-bottom: clamp(0.75rem, 2vh, 1.25rem);
}

.stage__title {
	color: var(--media-ink);
	font-size: clamp(2.75rem, 8.5vw, 7rem);
	line-height: 0.94;
	letter-spacing: -0.05em;
	max-width: 15ch;
}

/*
 * Всеки ред е маска, изпод която редът се вдига. Затова заглавието не се
 * появява, а „изплува" - един жест, не буква по буква.
 */
.stage__ln {
	display: block;
	overflow: hidden;
}

.stage__ln > span {
	display: block;
	animation: ln-up 1s var(--ease-out) backwards;
}

.stage__ln:nth-child(2) > span {
	animation-delay: 0.12s;
}

@keyframes ln-up {
	from { transform: translateY(105%); }
	to   { transform: none; }
}

.stage__lead {
	color: var(--media-ink-2);
	max-width: 44ch;
	margin-top: clamp(1rem, 2.5vh, 1.5rem);
	font-size: var(--t-1);
	transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
	/* Кратко и рано: този абзац е най-големият елемент в първия екран и
	   Google мери скоростта по него. Забавяне от 0.3 s тук е 0.3 s по-лош
	   резултат навсякъде. */
	animation: fade-up 0.6s var(--ease-out) 0.05s backwards;
}

/* Докато текстът се сменя, старият изгасва - не се подменя на живо. */
.stage__lead.is-out {
	opacity: 0;
	transform: translateY(6px);
}

@keyframes fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

.stage__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: clamp(1.25rem, 3vh, 2rem);
	animation: fade-up 0.9s var(--ease-out) 0.42s backwards;
}

/* Каналните ленти - пултът ---------------------------------------------------
 *
 * Долният ръб на сцената е умалено копие на мега-менюто: същите четири
 * канала, същите цветове, същият еквалайзер. Рима, а не повторение.
 * -------------------------------------------------------------------------- */

.deck {
	position: relative;
	z-index: 3;
	/* Никога не се свива - това е пултът, не остатъкът. */
	flex: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--line);
	background: color-mix(in oklab, var(--bg) 62%, transparent);
	backdrop-filter: blur(14px);
	animation: fade-up 0.9s var(--ease-out) 0.55s backwards;
}

.deck__ch {
	--c: var(--line-2);

	position: relative;
	display: grid;
	gap: 0.15rem;
	padding: clamp(0.9rem, 2vw, 1.35rem) clamp(0.75rem, 1.6vw, 1.5rem) clamp(1rem, 2.2vw, 1.5rem);
	text-align: left;
	color: var(--muted);
	border-left: 1px solid var(--line);
	transition: color var(--mid) var(--ease), background-color var(--mid) var(--ease);
}

.deck__ch:first-child {
	border-left: 0;
}

.deck__ch.ch--svatbi  { --c: var(--c-svatbi); }
.deck__ch.ch--partita { --c: var(--c-partita); }
.deck__ch.ch--firmeni { --c: var(--c-firmeni); }
.deck__ch.ch--tehnika { --c: var(--c-tehnika); }

.deck__ch:hover,
.deck__ch.is-on {
	color: var(--ink);
	background: var(--fill-1);
}

/* Показалецът: колко остава, докато каналът се смени сам. */
.deck__meter {
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 2px;
	overflow: hidden;
	background: transparent;
}

.deck__meter i {
	display: block;
	height: 100%;
	background: var(--c);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

.deck__ch.is-on .deck__meter {
	background: color-mix(in oklab, var(--c) 18%, transparent);
}

/* Щом посетителят избере сам, показалецът престава да отброява. */
.stage.is-held .deck__meter i {
	transform: scaleX(1) !important;
	opacity: 0.55;
}

.deck__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.deck__num {
	font-family: var(--f-display);
	font-size: var(--t--1);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--line-2);
	transition: color var(--mid) var(--ease);
}

.deck__ch.is-on .deck__num {
	color: var(--c);
}

/* Еквалайзерът свири само на включения канал. */
.deck__eq {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 12px;
	opacity: 0;
	transition: opacity var(--mid) var(--ease);
}

.deck__ch.is-on .deck__eq {
	opacity: 1;
}

.deck__eq i {
	width: 2px;
	height: 100%;
	border-radius: 1px;
	background: var(--c);
	transform-origin: 50% 100%;
	transform: scaleY(0.2);
}

.deck__ch.is-on .deck__eq i {
	animation: eq 0.85s ease-in-out infinite alternate;
	animation-delay: calc(var(--b) * -0.13s);
}

.deck__name {
	font-family: var(--f-display);
	font-size: var(--t-1);
	font-weight: 600;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: inherit;
}

.deck__sub {
	font-size: var(--t--1);
	line-height: 1.35;
	color: var(--muted);
	opacity: 0.75;
	transition: opacity var(--mid) var(--ease);
}

.deck__ch.is-on .deck__sub {
	opacity: 1;
}

/* На тесен екран лентите стават две по две - четири колони не се четат. */
@media (max-width: 760px) {
	.deck {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.deck__ch:nth-child(3) {
		border-left: 0;
	}

	.deck__ch:nth-child(n + 3) {
		border-top: 1px solid var(--line);
	}

	.deck__sub {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.stage__grain,
	.stage__shot,
	.stage__ln > span,
	.stage__lead,
	.stage__actions,
	.deck,
	.deck__eq i {
		animation: none !important;
		transition: none !important;
	}

	.stage__ln > span {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   9. Секциите на началната

   Три секции след сцената: техниката, вечерта час по час и числата.
   Всички стъпват на същите токени - сменяш темата, сменят се и те.
   -------------------------------------------------------------------------- */

.sect {
	padding-block: clamp(3.5rem, 9vw, 7rem);
}

.sect--gear {
	border-top: 1px solid var(--line);
}

.sect__head {
	max-width: 58ch;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.sect__head h2 {
	margin-top: 0.65rem;
}

.sect__lead {
	margin-top: 1rem;
	font-size: var(--t-1);
	color: var(--ink-3);
	max-width: 52ch;
}

/* --------------------------------------------------------------------------
   10. Кинолентата (секция 2)

   Закачена секция, чиито кадри се сменят при скрол. Смяната е ИЗРЕЗ, а не
   избледняване: новият кадър се отваря отдолу нагоре като завеса. При
   избледняване два образа се смесват в каша; изрезът показва по един и
   остава чист.

   Надписът е вътре в кадъра, затова се отваря заедно с него - и затова на
   телефон, където закачането отпада, всяка двойка става просто карта.
   -------------------------------------------------------------------------- */

.reel {
	position: relative;
	background: var(--bg);
	padding-top: clamp(3.5rem, 9vw, 7rem);
}

.reel__head {
	max-width: 58ch;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.reel__head h2 {
	margin-top: 0.65rem;
}

.reel__track {
	/*
	 * Височината дава пътя за скрола: по 62vh на кадър плюс един екран за
	 * самата сцена. По-малко и смяната става рязка; повече и се уморява.
	 */
	height: calc(var(--n) * 62vh + 100svh);
}

.reel__stage {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
	isolation: isolate;
}

/* Кадрите ------------------------------------------------------------------- */

.reel__frames {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.reel__f {
	position: absolute;
	inset: 0;
	margin: 0;
	/* Кадрите, които още не са дошли, чакат затворени отдолу. */
	clip-path: inset(100% 0 0 0);
	transition: clip-path 0.85s var(--ease-out);
	will-change: clip-path;
}

/* Текущият и вече отминалите са отворени; горният просто ги покрива. */
.reel__f.is-on,
.reel__f.is-past {
	clip-path: inset(0 0 0 0);
}

.reel__f img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: var(--stage-shot);
	transform: scale(1.05);
	transition: transform 1.8s var(--ease-out);
}

.reel__f.is-on img {
	transform: scale(1);
}

/* Затъмнение отляво и отдолу, за да стъпи текстът. */
.reel__f::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to top, var(--media-base) 3%, color-mix(in oklab, var(--media-base) 45%, transparent) 44%, transparent 74%),
		linear-gradient(to right, color-mix(in oklab, var(--media-base) 78%, transparent), transparent 60%),
		linear-gradient(150deg, color-mix(in oklab, var(--c) 30%, transparent), transparent 55%);
}

.reel__f.ch--svatbi  { --c: var(--c-svatbi); }
.reel__f.ch--partita { --c: var(--c-partita); }
.reel__f.ch--firmeni { --c: var(--c-firmeni); }
.reel__f.ch--tehnika { --c: var(--c-tehnika); }

/* Надписът ------------------------------------------------------------------ */

.reel__cap {
	position: absolute;
	inset-inline: 0;
	bottom: clamp(3.5rem, 9vh, 6rem);
	z-index: 2;
}

.reel__capin {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	grid-template-areas:
		"num ico title"
		"num ico text";
	align-items: center;
	gap: 0 clamp(0.75rem, 1.6vw, 1.25rem);
}

.reel__num {
	grid-area: num;
	align-self: center;
	font-family: var(--f-display);
	font-size: clamp(2.5rem, 5vw, 4.25rem);
	font-weight: 800;
	line-height: 0.85;
	letter-spacing: -0.06em;
	color: var(--c);
	text-shadow: 0 0 45px color-mix(in oklab, var(--c) var(--media-glow), transparent);
}

.reel__ico {
	grid-area: ico;
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid color-mix(in oklab, var(--c) 55%, transparent);
	background: color-mix(in oklab, var(--c) 14%, var(--media-chip));
	color: var(--c);
	backdrop-filter: blur(6px);
}

.reel__cap h3 {
	grid-area: title;
	align-self: end;
	font-size: var(--t-2);
	font-weight: 700;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	/*
	 * Цветът идва от темата, а НЕ е закодиран в бяло. В светлата тема кадърът
	 * се избелва до слонова кост и бял надпис върху него е нищо.
	 */
	color: var(--media-ink);
}

.reel__cap p {
	grid-area: text;
	align-self: start;
	margin-top: 0.2rem;
	max-width: 44ch;
	font-size: var(--t-0);
	color: var(--media-ink-2);
}

/* Релсата ------------------------------------------------------------------- */

.reel__railwrap {
	position: absolute;
	inset-inline: 0;
	bottom: clamp(1.5rem, 4vh, 2.5rem);
	z-index: 3;
}

.reel__rail {
	display: flex;
	gap: 6px;
	list-style: none;
	padding-inline: var(--gutter);
	margin: 0;
}

.reel__rail li {
	flex: 1 1 0;
	max-width: 90px;
	height: 3px;
	border-radius: 2px;
	background: color-mix(in oklab, var(--media-ink) 22%, transparent);
	overflow: hidden;
}

.reel__rail li.ch--svatbi  { --c: var(--c-svatbi); }
.reel__rail li.ch--partita { --c: var(--c-partita); }
.reel__rail li.ch--firmeni { --c: var(--c-firmeni); }
.reel__rail li.ch--tehnika { --c: var(--c-tehnika); }

.reel__rail i {
	display: block;
	height: 100%;
	background: var(--c);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 0.6s var(--ease-out);
}

.reel__rail li.is-on i,
.reel__rail li.is-past i {
	transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Без закачане

   Под 900 px и при изключено движение лентата е редица от карти. Закачен
   скрол на тъч е борба с потребителя, а не ефект.
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
	.reel__track {
		height: auto;
	}

	.reel__stage {
		position: static;
		height: auto;
		overflow: visible;
	}

	.reel__frames {
		position: static;
		display: grid;
		gap: 0.7rem;
	}

	.reel__f {
		position: relative;
		inset: auto;
		height: 66svh;
		min-height: 380px;
		border-radius: var(--r-lg);
		overflow: hidden;
		clip-path: none;
	}

	.reel__f img {
		transform: none;
	}

	.reel__cap {
		bottom: clamp(1.1rem, 3vw, 1.75rem);
	}

	.reel__capin {
		padding-inline: clamp(1.1rem, 3vw, 1.75rem);
	}

	.reel__railwrap {
		display: none;
	}
}

/* Без движение - всичко отворено, нищо не се изрязва. */
.reel.is-calm .reel__f {
	clip-path: none;
}

/* --------------------------------------------------------------------------
   Поводите - хоризонталната лента

   Секцията се закача и лентата пътува настрани, докато скролваш надолу.
   Местенето е едно transform, което CSS смята сам от ширината на лентата:
   translateX(var(--p) * (ширина на екрана − ширина на лентата)). Затова при
   скрол не се мери нищо в JavaScript.
   -------------------------------------------------------------------------- */

.occ {
	--p: 0;

	position: relative;
	padding-top: clamp(3.5rem, 9vw, 7rem);
	background: var(--bg-2);
	border-block: 1px solid var(--line);
}

.occ__head {
	max-width: 58ch;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.occ__head h2 {
	margin-top: 0.65rem;
}

.occ__track {
	/* Пътят: по един екран на карта плюс екрана на самата сцена. */
	height: calc(var(--n) * 55vh + 100svh);
}

.occ__stage {
	position: sticky;
	top: 0;
	height: 100svh;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.occ__rail {
	display: flex;
	gap: clamp(0.75rem, 1.6vw, 1.5rem);
	padding-inline: var(--gutter);
	/*
	 * Лентата е по-широка от екрана; --p я мести точно толкова, колкото е
	 * разликата. БЕЗ вадене на отстъпа: 100% тук е собствената ширина на
	 * лентата, а тя вече включва padding-а - вадене втори път оставя дупка
	 * в края.
	 */
	transform: translateX(calc(var(--p) * (100vw - 100%)));
	will-change: transform;
}

/* Картата ------------------------------------------------------------------- */

.occ__c {
	--c: var(--line-2);

	position: relative;
	flex: none;
	width: clamp(300px, 30vw, 440px);
	height: min(74svh, 640px);
	border-radius: var(--r-lg);
	overflow: hidden;
	isolation: isolate;
	background: var(--bg-3);
	transition: transform var(--mid) var(--ease);
}

.occ__c.ch--svatbi  { --c: var(--c-svatbi); }
.occ__c.ch--partita { --c: var(--c-partita); }
.occ__c.ch--firmeni { --c: var(--c-firmeni); }
.occ__c.ch--tehnika { --c: var(--c-tehnika); }

.occ__shot {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.occ__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: var(--shot-rest);
	transform: scale(1.04);
	transition: filter var(--slow) var(--ease), transform var(--slow) var(--ease-out);
}

.occ__c:hover .occ__shot img,
.occ__c:focus-within .occ__shot img {
	filter: var(--shot-on);
	transform: scale(1);
}

.occ__shot::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, var(--media-base) 6%, color-mix(in oklab, var(--media-base) 55%, transparent) 46%, transparent 82%),
		linear-gradient(150deg, color-mix(in oklab, var(--c) 45%, transparent), transparent 60%);
}

.occ__body {
	position: absolute;
	z-index: 2;
	inset-inline: 0;
	bottom: 0;
	padding: clamp(1.1rem, 2vw, 1.6rem);
}

.occ__num {
	display: block;
	font-family: var(--f-display);
	font-size: var(--t--1);
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--c);
	margin-bottom: 0.35rem;
}

.occ__c h3 {
	font-size: var(--t-2);
	font-weight: 700;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--media-ink);
}

.occ__sub {
	margin-top: 0.3rem;
	font-size: var(--t--1);
	color: var(--media-ink-3);
}

/* Услугите: свити, отварят се при посочване на картата. */
.occ__reveal {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows var(--slow) var(--ease-out), opacity var(--mid) var(--ease),
		margin-top var(--slow) var(--ease-out);
}

.occ__list {
	min-height: 0;
	overflow: hidden;
	list-style: none;
	padding: 0;
	margin: 0;
}

.occ__c:hover .occ__reveal,
.occ__c:focus-within .occ__reveal {
	grid-template-rows: 1fr;
	opacity: 1;
	margin-top: 0.8rem;
}

.occ__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.4rem 0;
	font-size: var(--t--1);
	color: var(--media-ink-2);
	border-bottom: 1px solid color-mix(in oklab, var(--media-ink) 12%, transparent);
	transition: color var(--fast) var(--ease), padding-left var(--fast) var(--ease);
}

.occ__list a svg {
	flex: none;
	color: var(--c);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.occ__list a:hover {
	color: var(--media-ink);
	padding-left: 0.4rem;
}

.occ__list a:hover svg {
	opacity: 1;
	transform: none;
}

/* Последната карта - изходът. */
.occ__c--end {
	background: var(--bg);
	border: 1px solid var(--line);
	display: flex;
	align-items: flex-end;
}

.occ__c--end .occ__body {
	position: static;
}

.occ__c--end h3 {
	color: var(--ink);
}

.occ__c--end .occ__sub {
	color: var(--ink-3);
	max-width: 30ch;
}

.occ__c--end .btn {
	margin-top: 1.25rem;
}

/* Показалецът -------------------------------------------------------------- */

.occ__bar {
	position: absolute;
	left: var(--gutter);
	right: var(--gutter);
	bottom: clamp(1.5rem, 4vh, 2.5rem);
	height: 2px;
	border-radius: 2px;
	background: var(--line-2);
	overflow: hidden;
}

.occ__bar i {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--ink);
	transform: scaleX(var(--p));
	transform-origin: 0 50%;
}

/* --------------------------------------------------------------------------
   Без закачане

   Под 900 px лентата се плъзга с пръст. Превръщането на вертикален скрол в
   хоризонтален на тъч е борба с това, което ръката очаква.
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
	.occ__track {
		height: auto;
	}

	.occ__stage {
		position: static;
		height: auto;
		display: block;
		overflow: visible;
	}

	.occ__rail {
		transform: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		padding-bottom: 1.25rem;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
	}

	.occ__rail::-webkit-scrollbar {
		height: 3px;
	}

	.occ__rail::-webkit-scrollbar-thumb {
		background: var(--line-2);
		border-radius: 2px;
	}

	.occ__c {
		scroll-snap-align: start;
		width: min(78vw, 340px);
		height: 68svh;
		min-height: 420px;
	}

	/* На тъч няма посочване - услугите стоят отворени. */
	.occ__reveal {
		grid-template-rows: 1fr;
		opacity: 1;
		margin-top: 0.8rem;
	}

	.occ__bar {
		display: none;
	}
}

/*
 * При изключено движение лентата НЕ просто спира: ако само махнем местенето,
 * последните карти остават извън изрязания екран и стават недостижими.
 * Затова секцията пада към същото поведение като на телефон - плъзгане.
 */
@media (prefers-reduced-motion: reduce) {
	.occ__track {
		height: auto;
	}

	.occ__stage {
		position: static;
		height: auto;
		display: block;
		overflow: visible;
	}

	.occ__rail {
		transform: none;
		overflow-x: auto;
		padding-bottom: 1.25rem;
	}

	.occ__reveal {
		grid-template-rows: 1fr;
		opacity: 1;
		margin-top: 0.8rem;
	}

	.occ__bar {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Поводите - типографският вариант (само на Начало 2)

   Същата работа като хоризонталната лента, но с други средства: там носят
   картите, тук носи буквата. Нула JavaScript.

   Слоевете са с ПОЛОЖИТЕЛНИ z-index-и: секцията си има собствен фон, а дете
   с отрицателен z-index би отишло зад него и просто нямаше да се вижда.
   -------------------------------------------------------------------------- */

.pick {
	position: relative;
	padding-block: clamp(4rem, 10vw, 8rem);
	background: var(--bg);
	border-block: 1px solid var(--line);
	overflow: hidden;
	isolation: isolate;
}

/* Кадрите ------------------------------------------------------------------- */

.pick__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.pick__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
	opacity: 0;
	filter: var(--shot-rest);
	transform: scale(1.06);
	transition: opacity 0.8s var(--ease), transform 1.8s var(--ease-out);
}

/* Първият стои, докато не бъде посочен друг. */
.pick__img[data-img="0"] {
	opacity: 1;
	transform: scale(1);
}

.pick__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to right, var(--bg) 20%, color-mix(in oklab, var(--bg) 74%, transparent) 60%, color-mix(in oklab, var(--bg) 45%, transparent)),
		linear-gradient(to top, var(--bg) 2%, transparent 45%);
}

.pick__inner {
	position: relative;
	z-index: 2;
}

/* Думите -------------------------------------------------------------------- */

.pick__words {
	list-style: none;
	padding: 0;
	margin: 0;
}

.pick__words > li {
	--c: var(--line-2);
}

.pick__words > li.ch--svatbi  { --c: var(--c-svatbi); }
.pick__words > li.ch--partita { --c: var(--c-partita); }
.pick__words > li.ch--firmeni { --c: var(--c-firmeni); }
.pick__words > li.ch--tehnika { --c: var(--c-tehnika); }

.pick__link {
	display: flex;
	/*
	 * По средата, не по основната линия. При дума от 6rem основната линия
	 * оставя номера да виси някъде под нея и колоната изглежда разбита.
	 */
	align-items: center;
	gap: clamp(0.6rem, 1.4vw, 1.1rem);
	padding-block: clamp(0.35rem, 1vw, 0.7rem);
}

.pick__num {
	font-family: var(--f-display);
	font-size: var(--t--1);
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--muted);
	/* Еднаква ширина, за да се строят номерата в колона. */
	flex: none;
	width: 2.4ch;
	transition: color var(--mid) var(--ease);
}

/*
 * Думата стои в контур и се налива при посочване. Контурът държи секцията
 * лека: четири плътни думи с такъв размер биха задушили всичко останало.
 */
.pick__w {
	font-family: var(--f-display);
	font-size: clamp(2.5rem, 7.5vw, 6rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.045em;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--ink-3);
	transition: color var(--mid) var(--ease), -webkit-text-stroke-color var(--mid) var(--ease);
}

.pick__sub {
	font-size: var(--t-1);
	color: var(--ink-2);
	margin-bottom: 0.9rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--line);
}

.pick__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.1rem;
}

.pick__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.45rem 0;
	font-size: var(--t-0);
	color: var(--ink-3);
	transition: color var(--fast) var(--ease), padding-left var(--fast) var(--ease);
}

.pick__list a svg {
	flex: none;
	color: var(--c);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.pick__list a:hover {
	color: var(--ink);
	padding-left: 0.4rem;
}

.pick__list a:hover svg {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   С посочване

   Думите вървят в лявата колона, панелите се наслагват в дясната. Понеже
   панелът е ВЪТРЕ в своята дума, палването му е обикновен :hover - не трябва
   нито скрипт, нито съответствие по номер.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (min-width: 900px) {
	.pick__words {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		/*
		 * БЕЗ пролука между колоните. Разстоянието се дава като вътрешен
		 * отстъп на панела, защото пролуката не принадлежи на никого: докато
		 * мишката я пресича на път към услугите, :hover пада и панелът
		 * изчезва под пръста.
		 */
		column-gap: 0;
	}

	/* Думата и панелът ѝ стават самостоятелни клетки на решетката. */
	.pick__words > li {
		display: contents;
	}

	.pick__link {
		grid-column: 1;
		/* Пълни колоната си докрай - иначе вдясно от думата остава мъртва зона. */
		justify-self: stretch;
	}

	/* Всички панели заемат една и съща клетка вдясно и се наслагват. */
	.pick__pane {
		grid-column: 2;
		grid-row: 1 / span 4;
		align-self: start;
		padding-left: clamp(2rem, 5vw, 4rem);
		opacity: 0;
		transform: translateY(10px);
		/*
		 * Изгасването изчаква малко. Ако мишката за миг мине през ръба между
		 * две думи, панелът не мига.
		 */
		transition: opacity 0.4s var(--ease) 0.12s, transform 0.5s var(--ease-out) 0.12s;
		pointer-events: none;
	}

	/* Първият е отворен по подразбиране. */
	.pick__words > li:first-child .pick__pane {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}

	.pick__words > li:hover .pick__pane,
	.pick__words > li:focus-within .pick__pane {
		opacity: 1;
		transform: none;
		pointer-events: auto;
		/* Появяването е веднага - изчаква само изгасването. */
		transition-delay: 0s;
	}

	/* Посочи ли се друга дума, подразбиращата се отстъпва. */
	.pick__words:hover > li:first-child:not(:hover) .pick__pane,
	.pick__words:focus-within > li:first-child:not(:focus-within) .pick__pane {
		opacity: 0;
		transform: translateY(10px);
		pointer-events: none;
	}

	/*
	 * Палим от реда, а не от връзката: докато мишката чете услугите вдясно,
	 * тя не е върху думата - а точно тогава е най-важно да се вижда кой
	 * повод е отворен.
	 */
	.pick__words > li:hover .pick__w,
	.pick__words > li:focus-within .pick__w {
		color: var(--c);
		-webkit-text-stroke-color: var(--c);
	}

	.pick__words > li:hover .pick__num,
	.pick__words > li:focus-within .pick__num {
		color: var(--c);
	}

	/* Първият повод е отворен по подразбиране - свети и той. */
	.pick__words > li:first-child .pick__w {
		color: var(--c);
		-webkit-text-stroke-color: var(--c);
	}

	.pick__words > li:first-child .pick__num {
		color: var(--c);
	}

	.pick__words:hover > li:first-child:not(:hover) .pick__w,
	.pick__words:focus-within > li:first-child:not(:focus-within) .pick__w {
		color: transparent;
		-webkit-text-stroke-color: var(--ink-3);
	}

	.pick__words:hover > li:first-child:not(:hover) .pick__num,
	.pick__words:focus-within > li:first-child:not(:focus-within) .pick__num {
		color: var(--muted);
	}

	/* Кадърът отзад следва посочената дума. */
	.pick:has(.pick__words > li:nth-child(2):hover) .pick__img[data-img="1"],
	.pick:has(.pick__words > li:nth-child(3):hover) .pick__img[data-img="2"],
	.pick:has(.pick__words > li:nth-child(4):hover) .pick__img[data-img="3"],
	.pick:has(.pick__words > li:nth-child(2):focus-within) .pick__img[data-img="1"],
	.pick:has(.pick__words > li:nth-child(3):focus-within) .pick__img[data-img="2"],
	.pick:has(.pick__words > li:nth-child(4):focus-within) .pick__img[data-img="3"] {
		opacity: 1;
		transform: scale(1);
	}

	.pick:has(.pick__words > li:nth-child(n + 2):hover) .pick__img[data-img="0"],
	.pick:has(.pick__words > li:nth-child(n + 2):focus-within) .pick__img[data-img="0"] {
		opacity: 0;
	}
}

/* --------------------------------------------------------------------------
   Без посочване

   На телефон всичко стои разгънато: думата, после нейните услуги. Панелът е
   вътре в думата, затова редуването идва само - нищо не се крие зад жест,
   който го няма.
   -------------------------------------------------------------------------- */

@media (hover: none), (max-width: 899px) {
	.pick__words > li + li {
		margin-top: 2.25rem;
	}

	.pick__w {
		color: var(--c);
		-webkit-text-stroke-color: var(--c);
	}

	.pick__num {
		color: var(--c);
	}

	.pick__pane {
		margin-top: 0.75rem;
	}

	.pick__img[data-img="0"] {
		opacity: 0.45;
	}
}

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

/* --------------------------------------------------------------------------
   11. Вечерта като вълна (секция 3)

   Вълната е и графика, и времева линия, и указател докъде си стигнал. Затова
   е една форма, а не три отделни неща едно под друго.

   Двата слоя стълбчета са еднакви: долният е приглушен, горният е цветен и се
   изрязва по иглата. Така „изсвирването" е една променлива - --p - и не иска
   нито клас на всяко стълбче, нито JavaScript при всеки кадър.
   -------------------------------------------------------------------------- */

.night {
	--p: 0;

	background: var(--bg-2);
	border-block: 1px solid var(--line);
	/*
	 * БЕЗ overflow тук. Родител с overflow:hidden става скрол контейнер и
	 * position:sticky на панела вътре престава да се хваща за екрана.
	 */
}

/*
 * Пистата дава пътя за скрола, панелът се закача върху нея. Без това
 * изсвирването се разпъваше само върху половин екран: докато секцията дойде
 * на удобно място за гледане, иглата вече беше стигнала края и първите
 * моменти минаваха невидени.
 */
.night__track {
	height: 240vh;
}

.night__panel {
	position: sticky;
	top: calc(var(--hdr-h) + clamp(1rem, 6vh, 4rem));
	padding-top: 2.5rem;
}

@media (max-width: 900px) {
	.night__track {
		height: 190vh;
	}
}

/* Часовете ------------------------------------------------------------------ */

.night__marks {
	position: relative;
	height: 2rem;
}

.night__mark {
	position: absolute;
	bottom: 0;
	left: calc(var(--at) * 100%);
	transform: translateX(-50%);
	font-family: var(--f-display);
	font-size: var(--t--1);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	color: var(--muted);
	white-space: nowrap;
	transition: color var(--mid) var(--ease), transform var(--mid) var(--ease);
}

/* Първият и последният се долепят до ръба, вместо да излизат извън него. */
.night__mark[data-mark="0"] {
	left: 0;
	transform: none;
}

.night__mark[data-mark="4"] {
	left: auto;
	right: 0;
	transform: none;
}

.night__mark.ch--svatbi  { --c: var(--c-svatbi); }
.night__mark.ch--partita { --c: var(--c-partita); }
.night__mark.ch--firmeni { --c: var(--c-firmeni); }
.night__mark.ch--tehnika { --c: var(--c-tehnika); }

.night__mark.is-on {
	color: var(--c);
	transform: translateX(-50%) translateY(-3px);
}

.night__mark[data-mark="0"].is-on,
.night__mark[data-mark="4"].is-on {
	transform: translateY(-3px);
}

/* Вълната ------------------------------------------------------------------- */

.night__wave {
	position: relative;
	height: clamp(140px, 22vw, 240px);
}

.night__bars {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	gap: clamp(1px, 0.35vw, 4px);
}

.night__bars i {
	flex: 1 1 0;
	height: calc(var(--h) * 100%);
	border-radius: 2px;
	background: currentColor;
	/* Стълбчетата растат отдолу нагоре, когато секцията влезе в екрана. */
	transform-origin: 50% 100%;
}

/*
 * Цветовете се дават САМО на горния слой. Ако се дадат на .night__bars i,
 * специфичността им (два класа) бие заглушаването на долния слой и цялата
 * вълна светва наведнъж - тоест иглата престава да значи нещо.
 */
.night__bars--lit i.ch--svatbi  { color: var(--c-svatbi); }
.night__bars--lit i.ch--partita { color: var(--c-partita); }
.night__bars--lit i.ch--firmeni { color: var(--c-firmeni); }
.night__bars--lit i.ch--tehnika { color: var(--c-tehnika); }

/* Долният слой е това, което още не е изсвирено. */
.night__bars--dim {
	color: var(--line-2);
}

/*
 * Горният е цветен и се вижда само дотам, докъдето е стигнала иглата.
 * Изрязването е по-евтино от 84 класа и се движи с една стойност.
 */
.night__bars--lit {
	clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0);
}

/* Иглата -------------------------------------------------------------------- */

.night__needle {
	position: absolute;
	top: -6px;
	bottom: -6px;
	left: calc(var(--p) * 100%);
	width: 1px;
	background: var(--ink);
	opacity: 0.5;
	transform: translateX(-0.5px);
}

.night__needle::after {
	content: "";
	position: absolute;
	top: -4px;
	left: 50%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ink);
	transform: translateX(-50%);
}

/* Надписът ------------------------------------------------------------------ */

.night__caps {
	position: relative;
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	min-height: 8.5rem;
}

.night__cap {
	position: absolute;
	inset-inline: 0;
	top: 0;
	max-width: 52ch;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.45s var(--ease), transform 0.55s var(--ease-out);
	pointer-events: none;
}

.night__cap.is-on {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.night__cap.ch--svatbi  { --c: var(--c-svatbi); }
.night__cap.ch--partita { --c: var(--c-partita); }
.night__cap.ch--firmeni { --c: var(--c-firmeni); }
.night__cap.ch--tehnika { --c: var(--c-tehnika); }

.night__cap time {
	display: block;
	font-family: var(--f-display);
	font-size: var(--t--1);
	font-weight: 700;
	letter-spacing: 0.1em;
	font-variant-numeric: tabular-nums;
	color: var(--c);
	margin-bottom: 0.4rem;
}

.night__cap h3 {
	font-size: var(--t-2);
	letter-spacing: -0.03em;
	margin-bottom: 0.4rem;
}

.night__cap p {
	font-size: var(--t-0);
	color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Влизане

   Вълната израства отдолу нагоре, стълбче след стълбче, когато секцията се
   покаже. Закъснението е по позиция, затова растежът минава като вълна отляво
   надясно - същата посока, в която после тръгва иглата.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.night__bars i {
			animation: night-grow 0.5s var(--ease-out) both;
			animation-timeline: view();
			animation-range: entry 10% entry 55%;
		}
	}
}

@keyframes night-grow {
	from { transform: scaleY(0.04); }
	to   { transform: scaleY(1); }
}

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

/* На тесен екран часовете се разреждат - иначе се застъпват. */
@media (max-width: 640px) {
	.night__mark[data-mark="1"],
	.night__mark[data-mark="3"] {
		display: none;
	}

	.night__caps {
		min-height: 10.5rem;
	}
}

/* Числата -------------------------------------------------------------------- */

.facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(50%, 160px), 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
	list-style: none;
	padding: 0;
	margin: 0 0 clamp(2.5rem, 6vw, 4rem);
}

.facts li {
	display: grid;
	gap: 0.3rem;
	padding-left: 1.1rem;
	border-left: 2px solid var(--line-2);
}

.facts b {
	font-family: var(--f-display);
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.facts span {
	font-size: var(--t--1);
	color: var(--ink-3);
}

/* Отзивът -------------------------------------------------------------------- */

.quote {
	max-width: 62ch;
	margin: 0;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--bg-2);
}

/* Пак еквалайзерът - знакът на сайта, тук вместо кавички. */
.quote__eq {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 20px;
	margin-bottom: 1.1rem;
}

.quote__eq i {
	width: 3px;
	height: 100%;
	border-radius: 2px;
	background: var(--c-partita);
	transform-origin: 50% 100%;
	transform: scaleY(0.25);
	animation: eq 1.1s ease-in-out infinite alternate;
	animation-delay: calc(var(--b) * -0.17s);
}

.quote blockquote {
	margin: 0;
}

.quote blockquote p {
	font-family: var(--f-display);
	font-size: var(--t-2);
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.quote figcaption {
	margin-top: 1.1rem;
	font-size: var(--t--1);
	color: var(--ink-3);
}

@media (prefers-reduced-motion: reduce) {
	.quote__eq i {
		animation: none;
		transform: scaleY(0.6);
	}
}

/* --------------------------------------------------------------------------
   12. Запитването

   Двете форми на сайта питат едно и също и вървят през един обработчик.
   Различават се само по подредба и усещане: на началната полетата стоят в
   стъклена плоча върху кадър, а на варианта ѝ имат формата на билет.

   Цветът на канала се сменя без JavaScript. Един :has() чете кой повод е
   избран и оттам тръгва всичко останало - кадърът отзад, ръбът на плочата,
   талонът. Скриптът добавя само това, което CSS не може: наклона, отблясъка
   и текста на талона.
   -------------------------------------------------------------------------- */

.djp-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.djp-msg {
	margin: 0 0 1.25rem;
	padding: 0.85rem 1.1rem;
	border-radius: var(--r);
	border: 1px solid var(--line-2);
	background: var(--fill-1);
	font-size: var(--t-0);
	color: var(--ink-2);
}

.djp-msg--ok {
	border-color: color-mix(in oklab, var(--c-firmeni) 55%, transparent);
	background: color-mix(in oklab, var(--c-firmeni) 12%, transparent);
	color: var(--ink);
}

.djp-msg--no {
	border-color: color-mix(in oklab, var(--c-partita) 55%, transparent);
	background: color-mix(in oklab, var(--c-partita) 12%, transparent);
	color: var(--ink);
}


/* ==========================================================================
   В - Върху снимка
   ========================================================================== */

.gl {
	--c: var(--c-svatbi);
	--par: 0px;

	/* Колко силно е цветното петно и колко покрива основата отляво. */
	--gl-glow: 30%;
	--gl-scrim: 78%;

	position: relative;
	isolation: isolate;
	overflow: clip;
	padding-block: clamp(4rem, 10vw, 8rem);
}

/* Изборът на повод води всичко останало. */
.gl:has([value="partita"]:checked) { --c: var(--c-partita); }
.gl:has([value="firmeni"]:checked) { --c: var(--c-firmeni); }
.gl:has([value="tehnika"]:checked) { --c: var(--c-tehnika); }
.gl:has([value="drugo"]:checked)   { --c: var(--c-svatbi); }

/* Кадърът ------------------------------------------------------------------ */

/*
 * Слоят е по-висок от секцията, за да има какво да се движи при паралакса.
 * --par идва от скрипта; без него слоят просто стои.
 */
.gl__bg {
	position: absolute;
	inset: -12% 0;
	z-index: 0;
	transform: translate3d(0, var(--par), 0);
	will-change: transform;
}

.gl__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.1);
	filter: var(--stage-shot);
	transition: opacity 0.9s var(--ease-out), transform 2.4s var(--ease-out);
}

/* Показва се кадърът на избрания повод. „Друго" остава при сватбите. */
.gl:has([value="svatbi"]:checked) .gl__img[data-img="svatbi"],
.gl:has([value="drugo"]:checked) .gl__img[data-img="svatbi"],
.gl:has([value="partita"]:checked) .gl__img[data-img="partita"],
.gl:has([value="firmeni"]:checked) .gl__img[data-img="firmeni"],
.gl:has([value="tehnika"]:checked) .gl__img[data-img="tehnika"] {
	opacity: 1;
	transform: scale(1);
}

/*
 * Воалът: едно петно в цвета на канала отляво, където сяда плочата, и лек
 * градиент към дъното. И двата се строят от --media-base, затова светлата
 * тема остава светла, вместо да се затъмни.
 */
/*
 * Клубната тема е цветна по замисъл: петното е двойно по-силно, добавя се
 * второ в контрастен цвят, а основата отдолу отстъпва, за да си личи кадърът.
 */
:root[data-theme="neon"] .gl {
	--gl-glow: 58%;
	--gl-glow2: 30%;
	--gl-scrim: 58%;
}

:root[data-theme="light"] .gl {
	--gl-glow: 26%;
	--gl-scrim: 74%;
}

.gl__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(58% 78% at 20% 52%, color-mix(in oklab, var(--c) var(--gl-glow), transparent), transparent 70%),
		radial-gradient(46% 60% at 88% 18%, color-mix(in oklab, var(--c-firmeni) var(--gl-glow2, 0%), transparent), transparent 72%),
		linear-gradient(
			104deg,
			color-mix(in oklab, var(--media-base) var(--gl-scrim), transparent) 0 30%,
			color-mix(in oklab, var(--media-base) 30%, transparent) 66%,
			color-mix(in oklab, var(--media-base) 52%, transparent)
		);
	transition: background 0.9s var(--ease-out);
}

.gl__inner {
	position: relative;
	z-index: 2;
}

/* Плочата ------------------------------------------------------------------ */

.gl__panel {
	position: relative;
	overflow: hidden;
	max-width: 40rem;
	padding: clamp(1.5rem, 4vw, 2.75rem);
	border-radius: clamp(var(--r), 2vw, var(--r-lg));
	border: 1px solid color-mix(in oklab, var(--media-ink) 18%, transparent);
	background: color-mix(in oklab, var(--media-base) 55%, transparent);
	color: var(--media-ink);
	box-shadow:
		0 40px 90px -50px rgba(0, 0, 0, 0.85),
		inset 0 1px 0 color-mix(in oklab, var(--media-ink) 22%, transparent);
	backdrop-filter: blur(26px) saturate(1.6);
	-webkit-backdrop-filter: blur(26px) saturate(1.6);
	transition: border-color 0.9s var(--ease-out);
}

/* Ръбът се оцветява от канала - оттам плочата изглежда като стъкло с фаска. */
.gl:has([value]:checked) .gl__panel {
	border-color: color-mix(in oklab, var(--c) 42%, color-mix(in oklab, var(--media-ink) 18%, transparent));
}

/*
 * Отблясъкът тръгва след показалеца. Координатите ги пише скриптът; докато
 * го няма, петното стои в горния ляв ъгъл и не мърда.
 */
.gl__sheen {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(
		18rem 18rem at var(--mx, 0%) var(--my, 0%),
		color-mix(in oklab, var(--media-ink) 16%, transparent),
		transparent 70%
	);
	transition: opacity var(--mid) var(--ease);
}

.gl__panel:hover .gl__sheen,
.gl__panel:focus-within .gl__sheen {
	opacity: 1;
}

.gl__panel > *:not(.gl__sheen) {
	position: relative;
	z-index: 1;
}

.gl__eyebrow {
	color: var(--c);
	transition: color 0.6s var(--ease-out);
}

.gl__h {
	margin: 0.6rem 0 1.4rem;
	font-size: var(--t-3);
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.gl__msg {
	background: color-mix(in oklab, var(--media-base) 60%, transparent);
	color: var(--media-ink);
}

.gl__form {
	display: grid;
	gap: 1.35rem;
}

/* Поводите ----------------------------------------------------------------- */

.gl__occ {
	margin: 0;
	padding: 0;
	border: 0;
}

.gl__occrow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.gl__o {
	--o: var(--media-ink-3);

	position: relative;
	cursor: pointer;
}

.gl__o.ch--svatbi  { --o: var(--c-svatbi); }
.gl__o.ch--partita { --o: var(--c-partita); }
.gl__o.ch--firmeni { --o: var(--c-firmeni); }
.gl__o.ch--tehnika { --o: var(--c-tehnika); }

.gl__o input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.gl__o span {
	display: block;
	padding: 0.48rem 1rem;
	border: 1px solid color-mix(in oklab, var(--media-ink) 22%, transparent);
	border-radius: var(--pill);
	font-size: var(--t--1);
	color: var(--media-ink-2);
	transition:
		color var(--fast) var(--ease),
		border-color var(--fast) var(--ease),
		background-color var(--fast) var(--ease),
		transform var(--fast) var(--ease);
}

.gl__o:hover span {
	transform: translateY(-2px);
	border-color: color-mix(in oklab, var(--o) 60%, transparent);
}

.gl__o input:checked + span {
	color: var(--o);
	border-color: var(--o);
	background: color-mix(in oklab, var(--o) 16%, transparent);
	box-shadow: 0 8px 24px -12px var(--o);
}

.gl__o input:focus-visible + span {
	outline: 2px solid var(--o);
	outline-offset: 3px;
}

/* Полетата ----------------------------------------------------------------- */

.gl__rows {
	display: grid;
	gap: 1.35rem;
}

@media (min-width: 640px) {
	.gl__rows {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.gl__f {
	position: relative;
	margin: 0;
}

.gl__f input,
.gl__f textarea {
	width: 100%;
	padding: 1.35rem 0 0.55rem;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--media-ink);
	font-family: var(--f-display);
	font-size: var(--t-1);
	font-weight: 500;
	resize: none;
}

.gl__f input:focus,
.gl__f textarea:focus {
	outline: none;
}

.gl__f input::-webkit-calendar-picker-indicator {
	filter: invert(var(--pick-invert, 1));
	opacity: 0.5;
	cursor: pointer;
}

.gl__f label {
	position: absolute;
	left: 0;
	top: 1.35rem;
	font-size: var(--t-0);
	color: var(--media-ink-2);
	pointer-events: none;
	transform-origin: left top;
	transition: transform var(--mid) var(--ease), color var(--mid) var(--ease);
}

/*
 * Етикетът се вдига при фокус и когато полето е пълно. Полето за дата винаги
 * показва формата си, затова етикетът му стои вдигнат от самото начало.
 */
.gl__f input:focus + label,
.gl__f textarea:focus + label,
.gl__f input:not(:placeholder-shown) + label,
.gl__f textarea:not(:placeholder-shown) + label,
.gl__f input[type="date"] + label {
	transform: translateY(-1.3rem) scale(0.74);
	color: var(--c);
}

/* Чертата се дърпа отляво надясно в цвета на канала. */
.gl__line {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: color-mix(in oklab, var(--media-ink) 22%, transparent);
}

.gl__line::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--c);
	box-shadow: 0 0 12px var(--c);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--mid) var(--ease-out);
}

.gl__f:focus-within .gl__line::after {
	transform: scaleX(1);
}

.gl__f--note textarea {
	min-height: 3.5rem;
}

/* Бутонът ------------------------------------------------------------------ */

.gl__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
}

.gl__send {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 1em 2em;
	border-radius: var(--pill);
	border: 1px solid var(--c);
	background: color-mix(in oklab, var(--c) 14%, transparent);
	color: var(--media-ink);
	font-family: var(--f-display);
	font-size: var(--t-0);
	font-weight: 600;
	transition: transform var(--fast) var(--ease), box-shadow var(--mid) var(--ease);
}

.gl__send:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 40px -18px var(--c);
}

.gl__send:active {
	transform: translateY(0);
}

/* Запълването минава линейно: с ускорение окото го чете като проблясък. */
.gl__sendfill {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--c);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.45s linear;
}

.gl__send:hover .gl__sendfill,
.gl__send:focus-visible .gl__sendfill {
	transform: scaleX(1);
}

.gl__send > *:not(.gl__sendfill) {
	position: relative;
	z-index: 1;
	transition: transform var(--mid) var(--ease), color var(--fast) var(--ease);
}

.gl__send:hover .gl__sendtxt,
.gl__send:focus-visible .gl__sendtxt {
	color: var(--bg);
}

.gl__send:hover svg,
.gl__send:focus-visible svg {
	transform: translateX(4px);
	color: var(--bg);
}

.gl__or {
	margin: 0;
	font-size: var(--t--1);
	color: var(--media-ink-3);
}

.gl__or a {
	color: var(--media-ink);
	border-bottom: 1px solid color-mix(in oklab, var(--c) 70%, transparent);
	padding-bottom: 1px;
}


/* ==========================================================================
   Г - Билетът
   ========================================================================== */

.tc {
	--c: var(--c-svatbi);
	--stub: 16rem;

	padding-block: clamp(3rem, 8vw, 6rem);
	overflow: clip;
}

.tc:has([value="partita"]:checked) { --c: var(--c-partita); }
.tc:has([value="firmeni"]:checked) { --c: var(--c-firmeni); }
.tc:has([value="tehnika"]:checked) { --c: var(--c-tehnika); }
.tc:has([value="drugo"]:checked)   { --c: var(--c-svatbi); }

.tc__head {
	max-width: 34rem;
	margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.tc__h {
	margin: 0.6rem 0 0.75rem;
	font-size: var(--t-3);
	line-height: 1.08;
	letter-spacing: -0.03em;
}

.tc__sub {
	margin: 0;
	color: var(--ink-3);
	max-width: 30rem;
}

.tc__msg {
	max-width: 58rem;
}

/*
 * Наклонът иска перспектива от родителя, а сянката трябва да следва
 * изрязаната форма - затова е filter: drop-shadow върху обвивката, а не
 * box-shadow върху билета: маската би отрязала и сянката заедно с ъглите.
 */
.tc__stage {
	perspective: 1400px;
}

.tc__tilt {
	--tc-shadow: 0 34px 46px rgba(0, 0, 0, 0.42);

	filter: drop-shadow(var(--tc-shadow));
	transition: filter var(--mid) var(--ease);
}

.tc__ticket {
	--rx: 0deg;
	--ry: 0deg;

	position: relative;
	display: grid;
	max-width: 58rem;
	border-radius: var(--r-lg);
	background: var(--bg-2);
	transform: rotateX(var(--rx)) rotateY(var(--ry));
	transform-style: preserve-3d;
	transition: transform 0.5s var(--ease-out);
}

/*
 * Двете полукръгчета в краищата на перфорацията са истински дупки, изрязани
 * с маска. Пълни кръгчета в цвета на фона биха личали върху градиента на
 * страницата, който не е плосък в нито една от трите теми.
 */
@media (min-width: 780px) {
	.tc__ticket {
		grid-template-columns: var(--stub) minmax(0, 1fr);
		mask-image:
			radial-gradient(circle 13px at var(--stub) 0, transparent 98%, #000 100%),
			radial-gradient(circle 13px at var(--stub) 100%, transparent 98%, #000 100%);
		mask-composite: intersect;
		-webkit-mask-image:
			radial-gradient(circle 13px at var(--stub) 0, transparent 98%, #000 100%),
			radial-gradient(circle 13px at var(--stub) 100%, transparent 98%, #000 100%);
		-webkit-mask-composite: source-in;
	}
}

.tc__stage:hover .tc__tilt {
	filter: drop-shadow(0 46px 60px rgba(0, 0, 0, 0.5));
}

/*
 * Дупките на перфорацията са истински, затова през тях се вижда сянката под
 * билета. В светлата тема плътната сива я издаваше като петно, не като сянка.
 */
:root[data-theme="light"] .tc__tilt {
	--tc-shadow: 0 26px 38px rgba(62, 46, 24, 0.16);
}

:root[data-theme="light"] .tc__stage:hover .tc__tilt {
	filter: drop-shadow(0 34px 48px rgba(62, 46, 24, 0.2));
}

/* Отблясъкът по картона се движи заедно с наклона. */
.tc__gloss {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	border-radius: inherit;
	opacity: 0;
	background: linear-gradient(
		105deg,
		transparent 38%,
		color-mix(in oklab, var(--ink) 12%, transparent) 48%,
		transparent 58%
	);
	transform: translateX(calc(var(--gx, 0) * 1%));
	transition: opacity var(--mid) var(--ease);
}

.tc__stage:hover .tc__gloss {
	opacity: 1;
}

/* Талонът ------------------------------------------------------------------ */

.tc__stub {
	position: relative;
	overflow: hidden;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 0.35rem;
	padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 1.75rem);
	background:
		linear-gradient(165deg, color-mix(in oklab, var(--c) 34%, transparent), transparent 62%),
		var(--bg-3);
	text-align: center;
	transition: background 0.6s var(--ease-out);
}

.tc__brand {
	font-family: var(--f-display);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	color: var(--c);
	margin-bottom: 0.4rem;
	transition: color 0.6s var(--ease-out);
}

.tc__date {
	display: grid;
	justify-items: center;
	gap: 0.3rem;
}

.tc__day {
	font-family: var(--f-display);
	font-size: clamp(3.5rem, 9vw, 5rem);
	font-weight: 300;
	line-height: 0.86;
	letter-spacing: -0.05em;
	font-variant-numeric: tabular-nums;
	color: var(--c);
	transition: color 0.6s var(--ease-out);
}

/* Числото подскача, когато се смени - иначе смяната минава незабелязано. */
/* Празният талон: тирето не бива да стои в цвета на канала. */
.tc__day--wait {
	color: var(--ink-3);
	opacity: 0.5;
}

.tc__day.is-bump {
	animation: tc-bump 0.5s var(--ease-out);
}

@keyframes tc-bump {
	0%   { transform: translateY(0.3em) scale(0.86); opacity: 0; }
	100% { transform: none; opacity: 1; }
}

.tc__mon {
	font-family: var(--f-display);
	font-size: var(--t--1);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.tc__occ {
	margin-top: 0.9rem;
	padding-top: 0.9rem;
	border-top: 1px dashed var(--line-2);
	width: 100%;
	font-family: var(--f-display);
	font-size: var(--t--1);
	font-weight: 600;
	color: var(--ink-2);
}

/* Баркодът е нарисуван с градиент - едно изображение по-малко за теглене. */
.tc__bars {
	width: 100%;
	height: 34px;
	margin-top: 1.1rem;
	background: repeating-linear-gradient(
		90deg,
		var(--ink-2) 0 2px,
		transparent 2px 4px,
		var(--ink-2) 4px 5px,
		transparent 5px 9px,
		var(--ink-2) 9px 12px,
		transparent 12px 14px
	);
	opacity: 0.5;
}

.tc__no {
	font-family: var(--f-display);
	font-size: 0.62rem;
	letter-spacing: 0.2em;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.tc__perf {
	display: none;
}

@media (min-width: 780px) {
	.tc__perf {
		display: block;
		position: absolute;
		left: var(--stub);
		top: 13px;
		bottom: 13px;
		width: 0;
		border-left: 2px dashed var(--line-2);
	}
}

/* Полетата ----------------------------------------------------------------- */

.tc__body {
	display: grid;
	gap: 1.35rem;
	padding: clamp(1.35rem, 3vw, 2.25rem);
}

.tc__occset {
	margin: 0;
	padding: 0;
	border: 0;
}

.tc__occrow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.tc__o {
	--o: var(--ink-3);

	position: relative;
	cursor: pointer;
}

.tc__o.ch--svatbi  { --o: var(--c-svatbi); }
.tc__o.ch--partita { --o: var(--c-partita); }
.tc__o.ch--firmeni { --o: var(--c-firmeni); }
.tc__o.ch--tehnika { --o: var(--c-tehnika); }

.tc__o input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.tc__o span {
	display: block;
	padding: 0.45rem 0.95rem;
	border: 1px solid var(--line-2);
	border-radius: var(--pill);
	font-size: var(--t--1);
	color: var(--ink-3);
	transition:
		color var(--fast) var(--ease),
		border-color var(--fast) var(--ease),
		background-color var(--fast) var(--ease),
		transform var(--fast) var(--ease);
}

.tc__o:hover span {
	transform: translateY(-2px);
	border-color: color-mix(in oklab, var(--o) 60%, transparent);
}

.tc__o input:checked + span {
	color: var(--o);
	border-color: var(--o);
	background: color-mix(in oklab, var(--o) 14%, transparent);
	box-shadow: 0 8px 22px -12px var(--o);
}

.tc__o input:focus-visible + span {
	outline: 2px solid var(--o);
	outline-offset: 3px;
}

.tc__rows {
	display: grid;
	gap: 1.1rem;
}

@media (min-width: 560px) {
	.tc__rows {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.tc__f {
	position: relative;
	margin: 0;
}

.tc__f input,
.tc__f textarea {
	width: 100%;
	padding: 1.25rem 0 0.5rem;
	border: 0;
	border-bottom: 1px dashed var(--line-2);
	border-radius: 0;
	background: none;
	color: var(--ink);
	font-family: var(--f-display);
	font-size: var(--t-1);
	font-weight: 500;
	resize: none;
	transition: border-color var(--fast) var(--ease);
}

.tc__f input:focus,
.tc__f textarea:focus {
	outline: none;
	border-bottom-color: var(--c);
	border-bottom-style: solid;
}

.tc__f label {
	position: absolute;
	left: 0;
	top: 1.25rem;
	font-size: var(--t-0);
	color: var(--ink-2);
	pointer-events: none;
	transform-origin: left top;
	transition: transform var(--mid) var(--ease), color var(--mid) var(--ease);
}

.tc__f input:focus + label,
.tc__f textarea:focus + label,
.tc__f input:not(:placeholder-shown) + label,
.tc__f textarea:not(:placeholder-shown) + label,
.tc__f input[type="date"] + label {
	transform: translateY(-1.25rem) scale(0.74);
	color: var(--c);
}

.tc__f--note textarea {
	min-height: 3.25rem;
}

.tc__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
}

.tc__send {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 1em 2em;
	border-radius: var(--pill);
	border: 1px solid var(--c);
	background: color-mix(in oklab, var(--c) 12%, transparent);
	color: var(--ink);
	font-family: var(--f-display);
	font-size: var(--t-0);
	font-weight: 600;
	transition: transform var(--fast) var(--ease), box-shadow var(--mid) var(--ease);
}

.tc__send:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 40px -18px var(--c);
}

.tc__send:active {
	transform: translateY(0);
}

.tc__sendfill {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--c);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.45s linear;
}

.tc__send:hover .tc__sendfill,
.tc__send:focus-visible .tc__sendfill {
	transform: scaleX(1);
}

.tc__send > *:not(.tc__sendfill) {
	position: relative;
	z-index: 1;
	transition: transform var(--mid) var(--ease), color var(--fast) var(--ease);
}

.tc__send:hover .tc__sendtxt,
.tc__send:focus-visible .tc__sendtxt,
.tc__send:hover svg,
.tc__send:focus-visible svg {
	color: var(--bg);
}

.tc__send:hover svg,
.tc__send:focus-visible svg {
	transform: translateX(4px);
}

.tc__or {
	margin: 0;
	font-size: var(--t--1);
	color: var(--ink-3);
}

.tc__or a {
	color: var(--ink);
	border-bottom: 1px solid color-mix(in oklab, var(--c) 70%, transparent);
	padding-bottom: 1px;
}


/* Влизане при скрол --------------------------------------------------------
   Плочата и билетът се появяват, щом секцията влезе в кадър, а полетата ги
   следват едно по едно. Прави се с animation-timeline, за да не виси още
   един наблюдател на скрола; браузърите без него просто ги показват готови.
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.gl__panel,
		.tc__tilt {
			animation: enq-in linear both;
			animation-timeline: view();
			animation-range: entry 5% entry 55%;
		}

		.gl__f,
		.tc__f {
			animation: enq-row linear both;
			animation-timeline: view();
			animation-range: entry 10% entry 60%;
			animation-delay: calc(var(--i, 0) * -0.06s);
		}
	}
}

@keyframes enq-in {
	from {
		opacity: 0;
		transform: translateY(2.5rem) scale(0.985);
	}
}

@keyframes enq-row {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}
}

/* Светлата тема има тъмна стрелка в полето за дата, тъмните - светла. */
:root[data-theme="light"] {
	--pick-invert: 0;
}

@media (prefers-reduced-motion: reduce) {
	.gl__img,
	.gl__veil,
	.tc__ticket,
	.tc__tilt {
		transition: none;
	}

	.tc__ticket {
		transform: none;
	}

	.tc__day.is-bump {
		animation: none;
	}

	.gl__sheen,
	.tc__gloss {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   13. Вътрешните страници

   Услугите, свободните дати, контактите и 404. Всички стъпват на същите
   токени като началната; тук е само подредбата, която е тяхна.
   -------------------------------------------------------------------------- */

.hub,
.dt,
.ct,
.nf {
	padding-block: clamp(3rem, 8vw, 6rem);
}

.hub__head,
.dt__head,
.ct__head {
	max-width: 46rem;
	margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.hub__h,
.dt__h,
.ct__h,
.nf__h {
	margin: 0.7rem 0 1rem;
	font-size: var(--t-4);
	line-height: 1.02;
	letter-spacing: -0.04em;
	text-wrap: balance;
}

.hub__lead,
.dt__lead {
	margin: 0;
	font-size: var(--t-1);
	color: var(--ink-3);
	max-width: 44ch;
}

/* Услуги ------------------------------------------------------------------- */

.hub__ch {
	--c: var(--c-svatbi);

	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	border-top: 1px solid var(--line);
	scroll-margin-top: calc(var(--hdr-h) + 1.5rem);
}

.hub__ch.ch--partita { --c: var(--c-partita); }
.hub__ch.ch--firmeni { --c: var(--c-firmeni); }
.hub__ch.ch--tehnika { --c: var(--c-tehnika); }

@media (min-width: 860px) {
	.hub__ch {
		grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
		align-items: start;
	}

	/*
	 * През един каналите сменят страните. Смяната е с изрично място в
	 * решетката, а не с order: order мести елемента в другата колона, но
	 * колоните си остават на място и снимката се разлива на цялата ширина.
	 */
	.hub__ch:nth-child(even) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
	}

	.hub__ch:nth-child(even) .hub__shot {
		grid-column: 2;
		grid-row: 1;
	}

	.hub__ch:nth-child(even) .hub__txt {
		grid-column: 1;
		grid-row: 1;
	}
}

.hub__shot {
	position: relative;
	overflow: hidden;
	border-radius: var(--r-lg);
	aspect-ratio: 4 / 5;
	background: var(--bg-3);
}

.hub__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: var(--shot-rest);
	transform: scale(1.02);
	transition: filter var(--slow) var(--ease), transform var(--slow) var(--ease);
}

.hub__ch:hover .hub__shot img {
	filter: var(--shot-on);
	transform: scale(1.06);
}

.hub__num {
	margin: 0;
	font-family: var(--f-display);
	font-size: var(--t--1);
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--c);
}

.hub__t {
	margin: 0.5rem 0 0.35rem;
	font-size: var(--t-3);
	letter-spacing: -0.03em;
}

.hub__s {
	margin: 0 0 1.75rem;
	color: var(--ink-3);
}

.hub__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.hub__list a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.95rem 0.25rem;
	border-bottom: 1px solid var(--line);
	font-family: var(--f-display);
	font-size: var(--t-1);
	font-weight: 500;
	color: var(--ink-2);
	transition: color var(--fast) var(--ease), padding-left var(--mid) var(--ease);
}

/* Чертата се дърпа в цвета на канала, а редът се отмества леко навътре. */
.hub__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--c);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--mid) var(--ease-out);
}

.hub__list a:hover,
.hub__list a:focus-visible {
	color: var(--ink);
	padding-left: 0.9rem;
}

.hub__list a:hover::after,
.hub__list a:focus-visible::after {
	transform: scaleX(1);
}

.hub__list svg {
	flex: none;
	color: var(--c);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity var(--fast) var(--ease), transform var(--mid) var(--ease);
}

.hub__list a:hover svg,
.hub__list a:focus-visible svg {
	opacity: 1;
	transform: none;
}

/* Свободни дати ------------------------------------------------------------ */

.dt__steps {
	display: grid;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

@media (min-width: 760px) {
	.dt__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.dt__step {
	padding-top: 1.25rem;
	border-top: 2px solid var(--line-2);
}

.dt__n {
	font-family: var(--f-display);
	font-size: var(--t--1);
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--c-svatbi);
	font-variant-numeric: tabular-nums;
}

.dt__step:nth-child(2) .dt__n { color: var(--c-partita); }
.dt__step:nth-child(3) .dt__n { color: var(--c-firmeni); }

.dt__st {
	margin: 0.6rem 0 0.4rem;
	font-size: var(--t-2);
	letter-spacing: -0.02em;
}

.dt__sp {
	margin: 0;
	color: var(--ink-3);
}

/* Контакти ----------------------------------------------------------------- */

.ct__lead {
	margin: 1rem 0 0;
	max-width: 46ch;
	font-size: var(--t-1);
	color: var(--media-ink-2);
}

.ct__grid {
	display: grid;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	align-items: start;
}

@media (min-width: 900px) {
	.ct__grid {
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	}
}

.ct__side {
	display: grid;
	gap: 0.9rem;
	align-content: start;
	color: var(--media-ink);
}

/* Телефонът - най-едрото нещо в колоната, защото е и най-краткият път. */

.ct__phone {
	position: relative;
	overflow: hidden;
	display: grid;
	gap: 0.45rem;
	padding: clamp(1.4rem, 3.5vw, 2rem);
	border-radius: var(--r-lg);
	border: 1px solid color-mix(in oklab, var(--media-ink) 20%, transparent);
	background: color-mix(in oklab, var(--media-base) 52%, transparent);
	box-shadow: inset 0 1px 0 color-mix(in oklab, var(--media-ink) 20%, transparent);
	backdrop-filter: blur(20px) saturate(1.4);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	transition: border-color var(--mid) var(--ease), transform var(--mid) var(--ease-out);
}

.ct__phone::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(135deg, color-mix(in oklab, var(--c-svatbi) 16%, transparent), transparent 55%);
	opacity: 0;
	transition: opacity var(--mid) var(--ease);
	pointer-events: none;
}

.ct__phone:hover {
	border-color: color-mix(in oklab, var(--c-svatbi) 55%, transparent);
	transform: translateY(-3px);
}

.ct__phone:hover::after { opacity: 1; }

.ct__label {
	font-family: var(--f-display);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--c-svatbi);
}

.ct__num {
	font-family: var(--f-display);
	font-size: var(--t-3);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--media-ink);
}

.ct__note {
	font-size: var(--t--1);
	line-height: 1.55;
	color: var(--media-ink-2);
}

.ct__mail {
	display: grid;
	gap: 0.3rem;
	padding: 0.95rem clamp(1.4rem, 3.5vw, 2rem);
	border-radius: var(--r-lg);
	border: 1px solid color-mix(in oklab, var(--media-ink) 16%, transparent);
	transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.ct__mail:hover {
	border-color: color-mix(in oklab, var(--c-svatbi) 55%, transparent);
	transform: translateY(-2px);
}

.ct__mailv {
	font-family: var(--f-display);
	font-size: var(--t-0);
	color: var(--media-ink);
	overflow-wrap: anywhere;
}

.ct__facts {
	display: grid;
	gap: 0;
	margin: 0.5rem 0 0;
	padding-inline: clamp(1.4rem, 3.5vw, 2rem);
	border-top: 1px solid color-mix(in oklab, var(--media-ink) 14%, transparent);
}

.ct__facts > div {
	display: grid;
	gap: 0.3rem;
	padding: 1rem 0;
	border-bottom: 1px solid color-mix(in oklab, var(--media-ink) 14%, transparent);
}

.ct__facts dt {
	font-family: var(--f-display);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--media-ink-3, rgba(255, 255, 255, 0.66));
}

.ct__facts dd {
	margin: 0;
	font-family: var(--f-display);
	font-size: var(--t-0);
	line-height: 1.45;
	color: var(--media-ink);
}

.ct__facts a {
	color: var(--media-ink);
	border-bottom: 1px solid var(--c-svatbi);
	padding-bottom: 1px;
	transition: color var(--fast) var(--ease);
}

.ct__facts a:hover { color: var(--c-svatbi); }

/* ==========================================================================
   Формата за контакт

   Същото стъкло като формата на началната, но с винаги видими етикети:
   плаващият етикет е красив, докато не бързаш. Полетата са с една линия
   отдолу, а не в кутии - така плочата остава лека.
   ========================================================================== */

.cf {
	position: relative;
	overflow: hidden;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border-radius: clamp(var(--r), 2vw, var(--r-lg));
	border: 1px solid color-mix(in oklab, var(--media-ink) 18%, transparent);
	background: color-mix(in oklab, var(--media-base) 62%, transparent);
	color: var(--media-ink);
	box-shadow:
		0 40px 90px -50px rgba(0, 0, 0, 0.85),
		inset 0 1px 0 color-mix(in oklab, var(--media-ink) 22%, transparent);
	backdrop-filter: blur(26px) saturate(1.6);
	-webkit-backdrop-filter: blur(26px) saturate(1.6);
}

/* Тънка златна нишка горе - същият знак като на останалите плочи по сайта. */
.cf::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--c-svatbi), transparent);
	opacity: 0.7;
}

.cf__h {
	margin: 0;
	font-family: var(--f-display);
	font-size: var(--t-2);
	line-height: 1.12;
	letter-spacing: -0.035em;
	color: var(--media-ink);
}

.cf__sub {
	margin: 0.45rem 0 1.75rem;
	font-size: var(--t--1);
	line-height: 1.6;
	color: var(--media-ink-2);
}

.cf__occ {
	margin: 0 0 1.6rem;
	padding: 0;
	border: 0;
}

.cf__occ legend {
	padding: 0 0 0.7rem;
	font-family: var(--f-display);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--media-ink-3, rgba(255, 255, 255, 0.66));
}

.cf__occrow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.cf__o input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.cf__o span {
	display: flex;
	align-items: center;
	min-height: 42px;
	padding: 0 1.15rem;
	border: 1px solid color-mix(in oklab, var(--media-ink) 22%, transparent);
	border-radius: var(--pill);
	font-size: var(--t--1);
	color: var(--media-ink-2);
	cursor: pointer;
	transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease),
		background-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.cf__o:hover span {
	border-color: color-mix(in oklab, var(--c-svatbi) 60%, transparent);
	color: var(--media-ink);
	transform: translateY(-1px);
}

.cf__o input:checked + span {
	background: var(--c-svatbi);
	border-color: var(--c-svatbi);
	color: #17140f;
	font-weight: 500;
}

.cf__o input:focus-visible + span {
	outline: 2px solid var(--c-svatbi);
	outline-offset: 3px;
}

.cf__rows {
	display: grid;
	gap: 1.25rem 1.5rem;
}

@media (min-width: 560px) {
	.cf__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cf__f {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 0.45rem;
	margin: 0;
	align-content: end;
}

/* Дълъг етикет се пречупва на два реда; без това съседното поле увисва. */
.cf__rows .cf__f label { min-height: 2.1em; display: flex; align-items: flex-end; }

.cf__f--note { margin-top: 1.35rem; }

.cf__f label {
	font-family: var(--f-display);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--media-ink-3, rgba(255, 255, 255, 0.66));
}

.cf__f label span { color: var(--c-svatbi); }

.cf__f input,
.cf__f textarea {
	width: 100%;
	padding: 0.55rem 0.1rem;
	border: 0;
	border-bottom: 1px solid color-mix(in oklab, var(--media-ink) 26%, transparent);
	border-radius: 0;
	background: transparent;
	font: inherit;
	font-size: var(--t-0);
	color: var(--media-ink);
	transition: border-color var(--fast) var(--ease);
}

.cf__f textarea {
	resize: vertical;
	min-height: 4.5rem;
	padding: 0.6rem 0.7rem;
	border: 1px solid color-mix(in oklab, var(--media-ink) 22%, transparent);
	border-radius: 3px;
}

/* Календарът на браузъра е тъмен вътре в плочата, иначе иконата изчезва. */
.cf__f input[type="date"] { color-scheme: dark; }

.cf__f input:focus,
.cf__f textarea:focus {
	outline: none;
	border-color: var(--c-svatbi);
}

.cf__f input::placeholder,
.cf__f textarea::placeholder { color: color-mix(in oklab, var(--media-ink) 45%, transparent); }

.cf__send {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	margin-top: 1.85rem;
	padding: 1.05em 2.4em;
	border: 0;
	border-radius: var(--pill);
	background: var(--c-svatbi);
	font-family: var(--f-display);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #17140f;
	cursor: pointer;
	transition: transform var(--fast) var(--ease), box-shadow var(--mid) var(--ease);
}

.cf__send::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.55), transparent 80%);
	transform: translateX(-120%);
	transition: transform 0.7s var(--ease-out);
}

.cf__send:hover {
	transform: translateY(-2px);
	box-shadow: 0 20px 44px -22px var(--c-svatbi);
}

.cf__send:hover::before { transform: translateX(120%); }

.cf__send > * { position: relative; }
.cf__send svg { transition: transform var(--mid) var(--ease); }
.cf__send:hover svg { transform: translateX(4px); }

.cf__msg { margin: 0 0 1.1rem; }

.cf .djp-privacy { color: var(--media-ink-3, rgba(255, 255, 255, 0.66)); }

/* 404 ---------------------------------------------------------------------- */

.nf__inner {
	max-width: 60rem;
}

.nf__code {
	color: var(--c-partita);
}

.nf__lead {
	margin: 0 0 clamp(2rem, 5vw, 3rem);
	font-size: var(--t-1);
	color: var(--ink-3);
	max-width: 40ch;
}

.nf__ch {
	display: grid;
	gap: 0.75rem;
	margin: 0 0 clamp(2rem, 5vw, 3rem);
	padding: 0;
	list-style: none;
}

@media (min-width: 720px) {
	.nf__ch {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.nf__c {
	--c: var(--c-svatbi);
}

.nf__c.ch--partita { --c: var(--c-partita); }
.nf__c.ch--firmeni { --c: var(--c-firmeni); }
.nf__c.ch--tehnika { --c: var(--c-tehnika); }

.nf__c a {
	display: grid;
	align-content: start;
	gap: 0.3rem;
	height: 100%;
	padding: 1.1rem 1.15rem;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--fill-1);
	transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease),
		transform var(--fast) var(--ease);
}

.nf__c a:hover,
.nf__c a:focus-visible {
	border-color: var(--c);
	background: color-mix(in oklab, var(--c) 10%, transparent);
	transform: translateY(-3px);
}

.nf__num {
	font-family: var(--f-display);
	font-size: var(--t--1);
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--c);
}

.nf__t {
	font-family: var(--f-display);
	font-size: var(--t-1);
	font-weight: 600;
	color: var(--ink);
}

.nf__s {
	font-size: var(--t--1);
	color: var(--ink-3);
}

.nf__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
}

.nf__or {
	margin: 0;
	font-size: var(--t--1);
	color: var(--ink-3);
}

.nf__or a {
	color: var(--ink);
	border-bottom: 1px solid var(--c-svatbi);
	padding-bottom: 1px;
}


/* --------------------------------------------------------------------------
   14. Класическата начална

   Третият вариант е нарочно по-кротък от другите два. Разликата в цвета е
   една: тук няма четири канала, а един акцент - топло злато върху дълбока
   основа. Затова --a се задава веднъж на тялото и оттам нататък всяка
   секция взема него, вместо да си избира канал.

   Каналните класове ch--* остават по картите, но само за иконата: така една
   и съща карта може да се върне към четирите цвята, ако решим.
   -------------------------------------------------------------------------- */

body.is-classic {
	--a: #d9b46a;
	--a-on: #17140f;
	--a-soft: rgba(217, 180, 106, 0.16);
	--cs-gap: clamp(3.5rem, 9vw, 7rem);
}

:root[data-theme="light"] body.is-classic {
	--a: #8a5a06;
	--a-on: #fdfaf5;
	--a-soft: rgba(138, 90, 6, 0.12);
}

:root[data-theme="neon"] body.is-classic {
	--a: #ffd166;
	--a-soft: rgba(255, 209, 102, 0.18);
}

/* Общи части на секциите --------------------------------------------------- */

.cs__head {
	max-width: 46rem;
	margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}

.cs__head--mid {
	margin-inline: auto;
	text-align: center;
}

.cs__eyebrow {
	margin: 0;
	font-family: var(--f-display);
	font-size: var(--t--1);
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--a);
}

.cs__h {
	margin: 0.75rem 0 0;
	font-size: var(--t-3);
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

/* Бутоните на тази страница са правоъгълни, не хапчета - това е разликата,
   която се вижда най-бързо. */
.cbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1.05em 2.1em;
	border: 1px solid var(--a);
	border-radius: 2px;
	font-family: var(--f-display);
	font-size: var(--t-0);
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease),
		transform var(--fast) var(--ease), box-shadow var(--mid) var(--ease);
}

.cbtn--solid {
	background: var(--a);
	color: var(--a-on);
}

.cbtn--ghost {
	color: var(--media-ink);
	background: transparent;
}

.cbtn:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -18px var(--a);
}

.cbtn--ghost:hover {
	background: var(--a-soft);
}

/* Герой -------------------------------------------------------------------- */

.chero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: min(92svh, 52rem);
	padding-block: clamp(5rem, 12vw, 9rem);
	overflow: clip;
	isolation: isolate;
	text-align: center;
}

.chero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.chero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: var(--stage-shot);
}

/* Един дълбок воал вместо цветните петна на другите две начални. */
.chero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(65% 55% at 50% 45%, transparent, color-mix(in oklab, var(--media-base) 55%, transparent)),
		linear-gradient(
			to bottom,
			color-mix(in oklab, var(--media-base) 70%, transparent),
			color-mix(in oklab, var(--media-base) 40%, transparent) 45%,
			var(--media-base)
		);
}

.chero__inner {
	position: relative;
	z-index: 1;
	max-width: 54rem;
	color: var(--media-ink);
}

.chero__eyebrow {
	margin: 0;
	font-family: var(--f-display);
	font-size: var(--t--1);
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--a);
}

.chero__h {
	margin: 1.1rem 0 0;
	font-size: var(--t-4);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.045em;
}

.chero__h em {
	display: block;
	font-style: normal;
	font-weight: 700;
	color: var(--a);
}

.chero__lead {
	margin: 1.35rem auto 0;
	max-width: 38ch;
	font-size: var(--t-1);
	color: var(--media-ink-2);
}

.chero__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 2.25rem;
}

.chero__down {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-top: clamp(2.5rem, 6vw, 4rem);
	border: 1px solid color-mix(in oklab, var(--media-ink) 25%, transparent);
	border-radius: 50%;
	color: var(--media-ink-2);
	animation: chero-bob 2.4s var(--ease) infinite;
}

.chero__down:hover {
	border-color: var(--a);
	color: var(--a);
}

@keyframes chero-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(6px); }
}

/* Числата ------------------------------------------------------------------ */

.ct2 {
	padding-block: var(--cs-gap);
	border-bottom: 1px solid var(--line);
}

.ct2__grid {
	display: grid;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--line);
	border: 1px solid var(--line);
}

@media (min-width: 640px) {
	.ct2__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.ct2__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ct2__tile {
	display: grid;
	grid-template-rows: 3.6rem auto;
	align-items: end;
	justify-items: center;
	gap: 0.5rem;
	padding: clamp(1.75rem, 4vw, 2.75rem) 1.25rem;
	background: var(--bg);
	text-align: center;
	transition: background-color var(--mid) var(--ease);
}

.ct2__tile:hover {
	background: var(--a-soft);
}

.ct2__num {
	font-family: var(--f-display);
	font-size: clamp(2.25rem, 5vw, 3.25rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
	color: var(--a);
}

/* Плочките без число носят дума, а не стойност - не бива да ѝ съперничат. */
.ct2__num:not([data-count]) {
	font-size: var(--t-2);
	font-weight: 600;
	letter-spacing: -0.02em;
	padding-bottom: 0.35rem;
}

.ct2__lab {
	max-width: 18ch;
	font-size: var(--t--1);
	color: var(--ink-3);
}

/* Картите ------------------------------------------------------------------ */

.cc {
	padding-block: var(--cs-gap);
}

.cc__grid {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.cc__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.cc__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.cc__card a {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-rows: auto auto auto 1fr;
	align-content: start;
	gap: 0.7rem;
	height: 100%;
	padding: clamp(1.5rem, 3vw, 2.1rem);
	border: 1px solid var(--line);
	border-radius: 2px;
	background: var(--bg-2);
	transition: border-color var(--mid) var(--ease), transform var(--mid) var(--ease),
		box-shadow var(--mid) var(--ease);
}

/* Тънка черта, която пълзи по горния ръб при посочване. */
.cc__card a::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: var(--a);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--slow) var(--ease-out);
}

.cc__card a:hover,
.cc__card a:focus-visible {
	border-color: color-mix(in oklab, var(--a) 45%, var(--line));
	transform: translateY(-4px);
	box-shadow: 0 26px 50px -34px rgba(0, 0, 0, 0.8);
}

.cc__card a:hover::before,
.cc__card a:focus-visible::before {
	transform: scaleX(1);
}

.cc__icon {
	display: inline-grid;
	place-items: center;
	width: 60px;
	height: 60px;
	margin-bottom: 0.35rem;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--a);
	transition: background-color var(--mid) var(--ease), border-color var(--mid) var(--ease),
		transform var(--mid) var(--ease);
}

.cc__card a:hover .cc__icon {
	background: var(--a-soft);
	border-color: var(--a);
	transform: scale(1.06);
}

.cc__t {
	margin: 0;
	font-size: var(--t-2);
	letter-spacing: -0.02em;
}

.cc__p {
	margin: 0;
	color: var(--ink-3);
}

.cc__more {
	display: inline-flex;
	align-items: end;
	gap: 0.4rem;
	margin-top: 0.4rem;
	font-family: var(--f-display);
	font-size: var(--t--1);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--a);
}

.cc__more svg {
	transition: transform var(--mid) var(--ease);
}

.cc__card a:hover .cc__more svg {
	transform: translateX(5px);
}

/* Галерията ---------------------------------------------------------------- */

.cg {
	padding-block: var(--cs-gap);
}

.cg__grid {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: clamp(9rem, 15vw, 14rem);
}

@media (min-width: 900px) {
	.cg__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.cg__it--wide {
		grid-column: span 2;
	}
}

.cg__it {
	position: relative;
	overflow: hidden;
	height: 100%;
	border-radius: 2px;
	background: var(--bg-3);
}

.cg__it img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: var(--shot-rest);
	transition: filter var(--slow) var(--ease), transform var(--slow) var(--ease);
}

.cg__it:hover img {
	filter: var(--shot-on);
	transform: scale(1.05);
}

.cg__cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 2.5rem 1rem 0.9rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
	color: #fff;
	font-family: var(--f-display);
	font-size: var(--t--1);
	font-weight: 600;
	letter-spacing: 0.04em;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease);
}

.cg__it:hover .cg__cap {
	opacity: 1;
	transform: none;
}

/* Стъпките ----------------------------------------------------------------- */

.cw {
	padding-block: var(--cs-gap);
	border-top: 1px solid var(--line);
	background: var(--bg-2);
}

.cw__list {
	display: grid;
	gap: clamp(1.75rem, 4vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 760px) {
	.cw__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.cw__s {
	position: relative;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line-2);
}

/* Точката на връзката между стъпките. */
.cw__s::before {
	content: "";
	position: absolute;
	top: -4px;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--a);
}

.cw__n {
	font-family: var(--f-display);
	font-size: var(--t--1);
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--a);
	font-variant-numeric: tabular-nums;
}

.cw__t {
	margin: 0.6rem 0 0.45rem;
	font-size: var(--t-2);
	letter-spacing: -0.02em;
}

.cw__p {
	margin: 0;
	color: var(--ink-3);
}

/* Отзивите ----------------------------------------------------------------- */

.cr {
	padding-block: var(--cs-gap);
}

.cr__grid {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 760px) {
	.cr__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.cr__it {
	display: grid;
	align-content: start;
	gap: 1rem;
	padding: clamp(1.5rem, 3vw, 2rem);
	border: 1px solid var(--line);
	border-radius: 2px;
	background: var(--bg-2);
}

.cr__it blockquote {
	margin: 0;
	font-size: var(--t-1);
	color: var(--ink-2);
}

.cr__who {
	display: grid;
	gap: 0.15rem;
	margin: 0;
	font-size: var(--t--1);
}

.cr__who strong {
	font-family: var(--f-display);
	color: var(--a);
}

.cr__who span {
	color: var(--ink-3);
}

/* Въпросите ---------------------------------------------------------------- */

.cf {
	padding-block: var(--cs-gap);
	border-top: 1px solid var(--line);
}

.cf__inner {
	max-width: 52rem;
}

.cf__list {
	border-top: 1px solid var(--line);
}

.cf__q {
	border-bottom: 1px solid var(--line);
}

.cf__q summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 0.25rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--f-display);
	font-size: var(--t-1);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--ink-2);
	transition: color var(--fast) var(--ease);
}

.cf__q summary::-webkit-details-marker {
	display: none;
}

.cf__q summary:hover,
.cf__q[open] summary {
	color: var(--a);
}

.cf__q summary svg {
	flex: none;
	color: var(--a);
	transition: transform var(--mid) var(--ease);
}

.cf__q[open] summary svg {
	transform: rotate(180deg);
}

/*
 * Височината се управлява от скрипта, затова тук стои само преходът. Без
 * скрипт details си работи както винаги - просто без плъзгане.
 */
.cf__a {
	overflow: hidden;
	transition: height var(--mid) var(--ease);
}

.cf__a p {
	margin: 0;
	padding: 0 0.25rem 1.4rem;
	color: var(--ink-3);
	max-width: 62ch;
}

/* Влизане при скрол -------------------------------------------------------- */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.ct2__tile,
		.cc__card,
		.cg__it,
		.cw__s,
		.cr__it {
			animation: cls-in linear both;
			animation-timeline: view();
			animation-range: entry 8% entry 58%;
			animation-delay: calc(var(--i, 0) * -0.05s);
		}
	}
}

@keyframes cls-in {
	from {
		opacity: 0;
		transform: translateY(1.75rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.chero__down {
		animation: none;
	}
}


/* --------------------------------------------------------------------------
   15. Сватби

   Страницата се държи като отделна брошура вътре в сайта: свой serif, своя
   хартия, свой ритъм. Затова и header-ът приема нейните цветове - иначе
   тъмната лента върху кремав лист изглежда като два различни сайта.

   Движението е много, но правилото е едно: показалецът и скролът само пишат
   в променливи, а рисува се в един requestAnimationFrame (виж wedding.js).
   Всичко тежко пада при prefers-reduced-motion.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: "Playfair";
	src: url("../fonts/playfair-lat.woff2") format("woff2");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Playfair";
	src: url("../fonts/playfair-cyr.woff2") format("woff2");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Playfair";
	src: url("../fonts/playfair-lat-i.woff2") format("woff2");
	font-weight: 400 900;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Playfair";
	src: url("../fonts/playfair-cyr-i.woff2") format("woff2");
	font-weight: 400 900;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Хартията ----------------------------------------------------------------- */

body.is-svatbi {
	--a: var(--w-gold);
	--f-serif: "Playfair", Georgia, "Times New Roman", serif;

	--w-paper: #fbf8f3;
	--w-paper-2: #f4eee4;
	--w-paper-3: #ece3d5;
	--w-band: #6b5a46;
	--w-ink: #221d17;
	--w-ink-2: #52493d;
	--w-ink-3: #7b7062;
	--w-gold: #9d6f2c;
	--w-gold-soft: rgba(157, 111, 44, 0.14);
	--w-rule: rgba(34, 29, 23, 0.13);
	--w-shadow: 0 30px 60px -40px rgba(60, 44, 22, 0.5);

	background: var(--w-paper);
	color: var(--w-ink);
}

/* Тъмна хартия за тъмната и клубната тема. */
:root[data-theme="dark"] body.is-svatbi,
:root[data-theme="neon"] body.is-svatbi {
	--w-paper: #14110d;
	--w-paper-2: #1b1712;
	--w-paper-3: #241e17;
	--w-band: #4a3c2c;
	--w-ink: #f8f3ea;
	--w-ink-2: rgba(248, 243, 234, 0.8);
	--w-ink-3: rgba(248, 243, 234, 0.58);
	--w-gold: #d8ac6a;
	--w-gold-soft: rgba(216, 172, 106, 0.16);
	--w-rule: rgba(248, 243, 234, 0.14);
	--w-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.8);
}

/* Header-ът приема хартията, за да не изглежда като чужда лента. */
body.is-svatbi .hdr {
	--bg: var(--w-paper);
	--bg-2: var(--w-paper-2);
	--ink: var(--w-ink);
	--ink-2: var(--w-ink-2);
	--ink-3: var(--w-ink-3);
	--muted: var(--w-ink-3);
	--line: var(--w-rule);
	--line-2: var(--w-rule);
}

/* Общи части --------------------------------------------------------------- */

.wsec {
	max-width: 44rem;
	margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.wsec--mid {
	margin-inline: auto;
	text-align: center;
}

.wsec__tag {
	margin: 0 0 1rem;
	font-family: var(--f-display);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--w-gold);
}

.wsec__h {
	margin: 0;
	font-family: var(--f-serif);
	font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.2rem);
	font-weight: 500;
	line-height: 1.16;
	letter-spacing: -0.015em;
	color: var(--w-ink);
	text-wrap: balance;
}

.wsec__h em,
.wi__h em,
.wc__line em {
	font-style: italic;
	font-weight: 400;
	color: var(--w-gold);
}

/* Бутон и връзка ----------------------------------------------------------- */

.wbtn {
	--tx: 0px;
	--ty: 0px;

	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1.15em 2.5em;
	border: 1px solid var(--w-band);
	border-radius: 2px;
	background: var(--w-band);
	color: #fbf8f3;
	font-family: var(--f-display);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	white-space: nowrap;
	transform: translate3d(var(--tx), var(--ty), 0);
	transition: transform 0.45s var(--ease-out), border-color var(--mid) var(--ease);
}

/* Златото се излива отдолу нагоре, а не просто сменя фона. */
.wbtn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--w-gold);
	transform: translateY(101%);
	transition: transform 0.5s var(--ease-out);
}

.wbtn:hover::before,
.wbtn:focus-visible::before {
	transform: translateY(0);
}

.wbtn:hover,
.wbtn:focus-visible {
	border-color: var(--w-gold);
}

.wbtn > span {
	position: relative;
	z-index: 1;
}

.wbtn--sm {
	padding: 0.85em 1.6em;
	font-size: 0.66rem;
	letter-spacing: 0.16em;
}

.wbtn--light {
	background: #fbf8f3;
	border-color: #fbf8f3;
	color: #221d17;
}

.wbtn--light::before {
	background: var(--w-gold);
}

.wbtn--light:hover,
.wbtn--light:focus-visible {
	color: #fbf8f3;
}

.wlink {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--f-display);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--w-ink-2);
	transition: color var(--mid) var(--ease);
}

.wlink span {
	position: relative;
}

/* Чертата се дърпа отляво, вместо да светва наведнъж. */
.wlink span::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1px;
	background: var(--w-gold);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.45s var(--ease-out);
}

.wlink:hover {
	color: var(--w-gold);
}

.wlink:hover span::after {
	transform: scaleX(1);
	transform-origin: left;
}

.wlink svg {
	transition: transform 0.45s var(--ease-out);
}

.wlink:hover svg {
	transform: translateX(5px);
}

/* Собствен показалец ------------------------------------------------------- */

.has-wcur,
.has-wcur a,
.has-wcur button,
.has-wcur summary {
	cursor: none;
}

.wcur__dot,
.wcur__ring {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 300;
	pointer-events: none;
	border-radius: 50%;
	will-change: transform;
}

.wcur__dot {
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	background: var(--w-gold);
}

.wcur__ring {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin: -19px 0 0 -19px;
	border: 1px solid color-mix(in oklab, var(--w-gold) 55%, transparent);
	transition: width 0.4s var(--ease-out), height 0.4s var(--ease-out),
		margin 0.4s var(--ease-out), background-color 0.4s var(--ease),
		border-color 0.4s var(--ease), opacity 0.3s var(--ease);
}

.wcur__ring span {
	font-family: var(--f-display);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fbf8f3;
	opacity: 0;
	transition: opacity 0.3s var(--ease);
}

.wcur__ring.is-link {
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	background: var(--w-gold-soft);
}

.wcur__ring.is-media {
	width: 88px;
	height: 88px;
	margin: -44px 0 0 -44px;
	background: color-mix(in oklab, var(--w-gold) 82%, transparent);
	border-color: transparent;
}

.wcur__ring.is-media span {
	opacity: 1;
}

.wcur__ring.is-down {
	transform-origin: center;
	background: color-mix(in oklab, var(--w-gold) 30%, transparent);
}

.wcur__ring.is-out,
.wcur__ring.is-out + .wcur__dot,
.wcur__dot.is-out {
	opacity: 0;
}

/* Влизане ------------------------------------------------------------------ */

.will-reveal {
	opacity: 0;
	transform: translateY(2rem);
	transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
	transition-delay: calc(var(--i, 0) * 90ms);
}

.will-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Думите изплуват иззад собствения си ръб. */
.w-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	/* Курсивът излиза извън реда си; без този отдушник се реже наполовина. */
	padding: 0.06em 0.04em 0.14em;
	margin: -0.06em -0.04em -0.14em;
}

.w-word > span {
	display: inline-block;
	transform: translateY(105%);
	transition: transform 0.95s var(--ease-out);
	transition-delay: calc(var(--wi, 0) * 55ms);
}

.will-split.is-in .w-word > span {
	transform: none;
}

/* Кадърът се открива изпод завеса, вместо просто да се появи. */
.will-veil {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.3s var(--ease-out);
}

.will-veil.is-in {
	clip-path: inset(0 0 0 0);
}

.will-veil img {
	transform: scale(1.16);
	transition: transform 1.8s var(--ease-out);
}

.will-veil.is-in img {
	transform: none;
}

/* Начало ------------------------------------------------------------------- */

.wh {
	position: relative;
	display: grid;
	align-items: center;
	min-height: min(92svh, 52rem);
	padding-block: clamp(4rem, 9vw, 6.5rem);
	overflow: clip;
	isolation: isolate;
	background: var(--w-paper);
}

.wh__stage {
	position: absolute;
	inset: -8% -4%;
	z-index: 0;
}

.wh__layer {
	position: absolute;
	inset: 0;
	will-change: transform;
}

.wh__layer img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Далечният слой е фон, близкият носи кадъра и се стапя наляво. */
.wh__layer--far img {
	object-position: 50% 40%;
	filter: blur(26px) saturate(0.7);
	opacity: 0.32;
}

.wh__layer--near {
	inset: 0 0 0 auto;
	width: 100%;
}

@media (min-width: 900px) {
	.wh__layer--near {
		width: 58%;
	}
}

.wh__layer--near img {
	object-position: 50% 42%;
	mask-image: linear-gradient(to right, transparent, #000 34%, #000 90%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 34%, #000 90%, transparent);
}

/*
 * Хартия върху лявата третина. Без нея заглавието лягаше върху рокли и лица
 * и на моменти изчезваше - маската сама по себе си не е достатъчна, защото
 * кадърът е светъл точно там, където е и текстът.
 */
.wh__veil {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(
		to right,
		var(--w-paper) 0 26%,
		color-mix(in oklab, var(--w-paper) 72%, transparent) 44%,
		transparent 64%
	);
}

@media (max-width: 899px) {
	.wh__veil {
		background: linear-gradient(
			to bottom,
			color-mix(in oklab, var(--w-paper) 82%, transparent),
			var(--w-paper) 70%
		);
	}
}

@media (max-width: 899px) {
	.wh__layer--near img {
		opacity: 0.22;
		mask-image: linear-gradient(to bottom, #000, transparent 84%);
		-webkit-mask-image: linear-gradient(to bottom, #000, transparent 84%);
	}
}

/* Топло петно, което следва показалеца из целия герой. */
.wh__glow {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(
		30rem 30rem at var(--gx, 50%) var(--gy, 50%),
		color-mix(in oklab, var(--w-gold) 22%, transparent),
		transparent 70%
	);
}

/* Много слаба хартиена шумка - маха плоското от градиентите. */
.wh__grain {
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: 0.5;
	background-image: radial-gradient(color-mix(in oklab, var(--w-ink) 8%, transparent) 0.5px, transparent 0.5px);
	background-size: 3px 3px;
}

.wh__petals {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.wh__petals i {
	position: absolute;
	top: -6%;
	left: var(--x);
	width: var(--s);
	height: calc(var(--s) * 0.7);
	border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%;
	background: color-mix(in oklab, var(--w-gold) 55%, transparent);
	opacity: 0;
	animation: w-petal var(--d) linear var(--t) infinite;
}

@keyframes w-petal {
	0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
	8%   { opacity: 0.7; }
	50%  { transform: translate3d(var(--sw), 52vh, 0) rotate(180deg); }
	92%  { opacity: 0.5; }
	100% { opacity: 0; transform: translate3d(0, 108vh, 0) rotate(360deg); }
}

.wh__inner {
	position: relative;
	z-index: 4;
	max-width: var(--wrap);
}

.wh__inner > * {
	max-width: 36rem;
}

.wh__kicker {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin: 0 0 1.5rem;
	font-family: var(--f-display);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--w-gold);
}

.wh__kicker span {
	display: block;
	width: 2.4rem;
	height: 1px;
	background: var(--w-gold);
	transform-origin: left;
	animation: w-rule 1.2s var(--ease-out) 0.2s both;
}

@keyframes w-rule {
	from { transform: scaleX(0); }
}

.wh__h {
	margin: 0;
	font-family: var(--f-serif);
	font-size: clamp(2.6rem, 1.3rem + 4.6vw, 5.4rem);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.025em;
}

.wh__w {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding: 0.06em 0.04em 0.14em;
	margin: -0.06em -0.04em -0.14em;
}

.wh__w > span {
	display: inline-block;
	transform: translateY(105%);
	animation: w-rise 1.1s var(--ease-out) both;
	animation-delay: calc(0.25s + var(--i) * 0.07s);
}

@keyframes w-rise {
	to { transform: none; }
}

.wh__w--em > span {
	font-style: italic;
	font-weight: 400;
	color: var(--w-gold);
}

.wh__lead {
	margin: 1.25rem 0 0;
	font-size: var(--t-0);
	line-height: 1.8;
	color: var(--w-ink-2);
}

.wh__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.wh__chips li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1rem;
	border: 1px solid var(--w-rule);
	border-radius: var(--pill);
	background: color-mix(in oklab, var(--w-paper) 72%, transparent);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	font-size: 0.8rem;
	color: var(--w-ink-2);
	transition: border-color var(--mid) var(--ease), transform var(--mid) var(--ease);
}

.wh__chips li:hover {
	border-color: var(--w-gold);
	transform: translateY(-3px);
}

.wh__chips svg {
	flex: none;
	color: var(--w-gold);
}

.wh__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
	margin-top: 1.9rem;
}

.wh__down {
	position: absolute;
	left: 50%;
	bottom: 2rem;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-left: -23px;
	border: 1px solid var(--w-rule);
	border-radius: 50%;
}

.wh__down span {
	display: block;
	width: 1px;
	height: 14px;
	background: var(--w-gold);
	animation: w-down 2s var(--ease) infinite;
}

@keyframes w-down {
	0%, 100% { transform: translateY(-4px); opacity: 0.3; }
	50%      { transform: translateY(4px); opacity: 1; }
}

/* Бягаща лента ------------------------------------------------------------- */

.wr {
	overflow: hidden;
	padding-block: 1.4rem;
	border-block: 1px solid var(--w-rule);
	background: var(--w-paper-2);
}

.wr__track {
	display: flex;
	width: max-content;
	animation: w-run 42s linear infinite;
}

.wr:hover .wr__track {
	animation-play-state: paused;
}

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

.wr__set {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	margin: 0;
	padding: 0 1.25rem;
	list-style: none;
}

.wr__set li {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	font-family: var(--f-serif);
	font-size: clamp(1rem, 0.85rem + 0.6vw, 1.5rem);
	font-style: italic;
	color: var(--w-ink-3);
	white-space: nowrap;
}

.wr__set b {
	display: block;
	width: 5px;
	height: 5px;
	background: var(--w-gold);
	transform: rotate(45deg);
}

/* Лентата с главите -------------------------------------------------------- */

.wn {
	position: sticky;
	top: var(--hdr-h);
	z-index: 40;
	border-bottom: 1px solid var(--w-rule);
	background: color-mix(in oklab, var(--w-paper) 92%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.wn__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--w-gold);
	transform: scaleX(0);
	transform-origin: left;
}

.wn__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 4.4rem;
}

.wn__list {
	display: flex;
	gap: 0.4rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wn__list a {
	position: relative;
	display: block;
	padding-block: 0.4rem;
	font-family: var(--f-display);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--w-ink-3);
	white-space: nowrap;
	transition: color var(--fast) var(--ease);
}

.wn__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--w-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s var(--ease-out);
}

.wn__list a:hover,
.wn__list a.is-on {
	color: var(--w-gold);
}

.wn__list a.is-on::after,
.wn__list a:hover::after {
	transform: scaleX(1);
}

@media (max-width: 780px) {
	.wn__inner .wbtn {
		display: none;
	}

	.wn__list {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.wn__list::-webkit-scrollbar {
		display: none;
	}
}

/* Идеята ------------------------------------------------------------------- */

.wi {
	padding-block: clamp(4rem, 11vw, 8.5rem);
}

.wi__inner {
	display: grid;
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}

@media (min-width: 900px) {
	.wi__inner {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	}
}

.wi__h {
	margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
	font-family: var(--f-serif);
	font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.4rem);
	font-weight: 500;
	line-height: 1.18;
	letter-spacing: -0.015em;
}

.wi__h em {
	display: block;
}

.wi__cols {
	display: grid;
	gap: 1.25rem 3rem;
}

@media (min-width: 620px) {
	.wi__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.wi__cols p {
	margin: 0;
	font-size: var(--t-0);
	line-height: 1.85;
	color: var(--w-ink-2);
}

.wi__fig {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 2px;
	box-shadow: var(--w-shadow);
}

.wi__fig img {
	display: block;
	width: 100%;
	height: clamp(22rem, 44vw, 34rem);
	object-fit: cover;
}

/* Вечерта ------------------------------------------------------------------ */

.we {
	padding-block: clamp(4rem, 11vw, 8.5rem);
	border-top: 1px solid var(--w-rule);
	background: var(--w-paper-2);
}

.we .wsec {
	max-width: 58rem;
	margin-inline: auto;
}

.we__list {
	max-width: 58rem;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.we__it {
	display: grid;
	gap: 0.4rem 2.5rem;
	padding-block: clamp(1.75rem, 4vw, 2.75rem);
	border-bottom: 1px solid var(--w-rule);
}

.we__it:last-child {
	border-bottom: 0;
}

@media (min-width: 720px) {
	.we__it {
		grid-template-columns: 9rem minmax(0, 1fr);
	}
}

.we__rail {
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
	padding-top: 0.35rem;
}

@media (min-width: 720px) {
	.we__rail {
		display: block;
	}
}

.we__num {
	display: block;
	font-family: var(--f-serif);
	font-size: 1.55rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.06em;
	color: var(--w-gold);
}

.we__tag {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--f-display);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--w-ink-3);
}

.we__t {
	margin: 0 0 0.7rem;
	font-family: var(--f-serif);
	font-size: clamp(1.4rem, 1rem + 1.2vw, 1.95rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--w-ink);
}

.we__p {
	margin: 0;
	font-size: var(--t-0);
	line-height: 1.85;
	color: var(--w-ink-2);
	max-width: 52ch;
}

.we__fig {
	position: relative;
	margin: 1.5rem 0 0;
	max-width: 30rem;
	overflow: hidden;
	border-radius: 2px;
}

.we__fig img {
	display: block;
	width: 100%;
	height: clamp(12rem, 18vw, 16rem);
	object-fit: cover;
}

.we__fig figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 3rem 1.1rem 0.9rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
	color: #fff;
	font-family: var(--f-display);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.6s var(--ease), transform 0.6s var(--ease-out);
}

.we__fig:hover figcaption {
	opacity: 1;
	transform: none;
}

.we__fig img {
	transition: transform 1.5s var(--ease-out);
}

.we__fig:hover img {
	transform: scale(1.06);
}

/* Атмосфера ---------------------------------------------------------------- */

.wa {
	padding-block: clamp(4rem, 11vw, 8.5rem);
	overflow: clip;
}

.wa__grid {
	display: grid;
	gap: clamp(0.75rem, 1.6vw, 1.25rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*
 * Мозайката се подрежда изрично. Оставена на автоматичното нареждане, една
 * плочка на три реда изместваше всичко след себе си и последният ред оставаше
 * наполовина празен.
 */
@media (min-width: 900px) {
	.wa__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: clamp(8rem, 11vw, 11rem);
	}

	.wa__it:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
	.wa__it:nth-child(2) { grid-area: 1 / 3 / 3 / 4; }
	.wa__it:nth-child(3) { grid-area: 1 / 4 / 3 / 5; }
	.wa__it:nth-child(4) { grid-area: 3 / 3 / 5 / 5; }
	.wa__it:nth-child(5) { grid-area: 3 / 1 / 5 / 2; }
	.wa__it:nth-child(6) { grid-area: 3 / 2 / 5 / 3; }
}

.wa__it {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 2px;
	background: var(--w-paper-3);
}

/* Рамката се движи с --py от скрипта; кадърът вътре е по-висок от нея. */
.wa__frame {
	position: absolute;
	inset: -12% 0;
	display: block;
	transform: translate3d(0, var(--py, 0px), 0);
	will-change: transform;
}

.wa__it img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.6s var(--ease-out), filter 1s var(--ease);
}

.wa__it:hover img {
	transform: scale(1.07);
	filter: saturate(1.12) brightness(1.04);
}

/* Топъл филтър, който се вдига при посочване. */
.wa__it::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to top, rgba(20, 15, 8, 0.5), transparent 55%);
	opacity: 0.85;
	transition: opacity 0.7s var(--ease);
}

.wa__it:hover::after {
	opacity: 0.45;
}

/*
 * Отстъпът стои на span-а, не на figcaption. overflow реже по padding box-а,
 * не по съдържанието - с отстъп отдолу надписът се показваше наполовина,
 * вместо да е скрит.
 */
.wa__it figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	overflow: hidden;
	padding: 0;
	color: #fff;
	font-family: var(--f-display);
	font-size: 0.74rem;
	letter-spacing: 0.1em;
}

.wa__it figcaption span {
	display: block;
	padding: 1rem 1.2rem 1.2rem;
	transform: translateY(100%);
	transition: transform 0.7s var(--ease-out);
}

.wa__it:hover figcaption span {
	transform: none;
}

/* Тънък златен ръб, който се появява отвътре. */
.wa__it::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	box-shadow: inset 0 0 0 0 var(--w-gold);
	transition: box-shadow 0.6s var(--ease);
}

.wa__it:hover::before {
	box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--w-gold) 70%, transparent);
}

/* Защо аз ------------------------------------------------------------------ */

.ww {
	padding-block: clamp(4rem, 11vw, 8.5rem);
	border-top: 1px solid var(--w-rule);
	background: var(--w-paper-2);
}

.ww__grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
	perspective: 1200px;
}

@media (min-width: 700px) {
	.ww__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1080px) {
	.ww__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ww__card {
	--rx: 0deg;
	--ry: 0deg;

	position: relative;
	overflow: hidden;
	display: grid;
	align-content: end;
	gap: 0.6rem;
	min-height: clamp(19rem, 26vw, 23rem);
	padding: clamp(1.4rem, 2.5vw, 1.9rem);
	border-radius: 2px;
	color: #fbf8f3;
	transform: rotateX(var(--rx)) rotateY(var(--ry));
	transform-style: preserve-3d;
	transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease);
}

.ww__card.is-tilting {
	transition: transform 0.12s linear, box-shadow 0.6s var(--ease);
	box-shadow: var(--w-shadow);
}

.ww__shot {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.ww__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.04);
	transition: transform 1.6s var(--ease-out);
}

.ww__card:hover .ww__shot img {
	transform: scale(1.12);
}

.ww__shot::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(16, 12, 7, 0.9) 12%, rgba(16, 12, 7, 0.35) 62%, rgba(16, 12, 7, 0.15));
}

/* Светлината минава от там, накъдето сочи показалецът. */
.ww__sheen {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(
		14rem 14rem at var(--sx, 50%) var(--sy, 50%),
		rgba(255, 255, 255, 0.16),
		transparent 70%
	);
	transition: opacity 0.5s var(--ease);
}

.ww__card:hover .ww__sheen {
	opacity: 1;
}

.ww__card > *:not(.ww__shot):not(.ww__sheen) {
	position: relative;
	z-index: 2;
}

.ww__ic {
	display: inline-grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 0.4rem;
	border: 1px solid rgba(251, 248, 243, 0.3);
	border-radius: 50%;
	color: #fbf8f3;
	transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease),
		transform 0.6s var(--ease-out);
}

.ww__card:hover .ww__ic {
	background: var(--w-gold);
	border-color: var(--w-gold);
	transform: translateY(-4px) rotate(-6deg);
}

.ww__t {
	margin: 0;
	font-family: var(--f-serif);
	font-size: var(--t-2);
	font-weight: 500;
	letter-spacing: -0.01em;
}

.ww__p {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.7;
	color: rgba(251, 248, 243, 0.8);
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.7s var(--ease-out), opacity 0.5s var(--ease);
}

.ww__card:hover .ww__p,
.ww__card:focus-within .ww__p {
	max-height: 12rem;
	opacity: 1;
}

/* Под 700 px няма посочване - текстът стои отворен. */
@media (hover: none) {
	.ww__p {
		max-height: none;
		opacity: 1;
	}
}

/* Стъпките ----------------------------------------------------------------- */

.ws {
	padding-block: clamp(4rem, 11vw, 8.5rem);
}

.ws__list {
	display: grid;
	gap: clamp(2rem, 4vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 760px) {
	.ws__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ws__it {
	position: relative;
	padding-top: 4.5rem;
}

.ws__n {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 3.2rem;
	height: 3.2rem;
	border: 1px solid var(--w-gold);
	border-radius: 50%;
	font-family: var(--f-serif);
	font-size: 1.3rem;
	color: var(--w-gold);
	background: var(--w-paper);
	transition: background-color 0.5s var(--ease), color 0.5s var(--ease),
		transform 0.5s var(--ease-out);
}

.ws__it:hover .ws__n {
	background: var(--w-gold);
	color: var(--w-paper);
	transform: scale(1.08);
}

/* Нишката между номерата; последният няма накъде да продължи. */
.ws__it::before {
	content: "";
	position: absolute;
	top: 1.6rem;
	left: 3.8rem;
	right: -1rem;
	height: 1px;
	background: var(--w-rule);
}

.ws__it:last-child::before {
	display: none;
}

@media (max-width: 759px) {
	.ws__it::before {
		display: none;
	}
}

.ws__t {
	margin: 0 0 0.5rem;
	font-family: var(--f-serif);
	font-size: var(--t-1);
	font-weight: 600;
	color: var(--w-ink);
}

.ws__p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.75;
	color: var(--w-ink-2);
}

/* Въпроси ------------------------------------------------------------------ */

.wq {
	padding-block: clamp(4rem, 11vw, 8.5rem);
	border-top: 1px solid var(--w-rule);
	background: var(--w-paper-2);
}

.wq__inner {
	max-width: 52rem;
}

.wq .cf__list,
.wq .cf__q {
	border-color: var(--w-rule);
}

.wq .cf__q summary {
	font-family: var(--f-serif);
	font-size: var(--t-1);
	font-weight: 500;
	letter-spacing: 0;
	color: var(--w-ink);
	padding-block: 1.4rem;
}

.wq .cf__q summary:hover,
.wq .cf__q[open] summary {
	color: var(--w-gold);
}

.wq .cf__q summary svg {
	color: var(--w-gold);
}

.wq .cf__a p {
	font-size: var(--t-0);
	line-height: 1.85;
	color: var(--w-ink-2);
}

/* Краят -------------------------------------------------------------------- */

.wc {
	position: relative;
	overflow: clip;
	isolation: isolate;
	padding-block: clamp(5rem, 13vw, 10rem);
	text-align: center;
}

.wc__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.wc__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
}

.wc__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(50% 60% at 50% 50%, color-mix(in oklab, var(--w-gold) 16%, transparent), transparent 72%),
		color-mix(in oklab, var(--w-paper) 80%, transparent);
	/* Силно замъгляване: искаме поле от светлини, а не разпознаваем кадър. */
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.wc__inner {
	position: relative;
	z-index: 1;
	max-width: 46rem;
}

.wc__orn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin: 0 auto 2.2rem;
}

.wc__orn i {
	display: block;
	width: clamp(2.5rem, 7vw, 4rem);
	height: 1px;
	background: linear-gradient(to right, transparent, color-mix(in oklab, var(--w-gold) 70%, transparent));
}

.wc__orn i:last-child {
	background: linear-gradient(to left, transparent, color-mix(in oklab, var(--w-gold) 70%, transparent));
}

.wc__orn b {
	display: block;
	width: 7px;
	height: 7px;
	background: var(--w-gold);
	transform: rotate(45deg);
}

.wc__line {
	margin: 0;
	font-family: var(--f-serif);
	font-size: clamp(1.5rem, 0.9rem + 2.2vw, 2.9rem);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--w-ink);
	text-wrap: balance;
}

.wc__line em {
	display: block;
	margin-top: 0.4rem;
}

/* Лентата накрая ----------------------------------------------------------- */

.wb {
	padding-block: clamp(2.5rem, 6vw, 4rem);
	background: var(--w-band);
}

.wb__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.25rem 2.5rem;
	text-align: center;
}

.wb__line {
	margin: 0;
	font-family: var(--f-serif);
	font-size: clamp(1.3rem, 0.9rem + 1.4vw, 2rem);
	font-weight: 400;
	color: #fbf8f3;
}

/* Клипове ------------------------------------------------------------------ */

.wv {
	padding-block: clamp(4rem, 11vw, 8.5rem);
	border-top: 1px solid var(--w-rule);
	background: var(--w-paper-2);
}

.wv__note {
	margin: 1rem 0 0;
	font-size: var(--t--1);
	color: var(--w-ink-3);
}

.wv__grid {
	display: grid;
	gap: clamp(0.5rem, 1.2vw, 1rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*
 * Клиповете са 16:9, освен един изправен - източникът му носи ъгъл на
 * завъртане. Затова горният ред е двойка: изправеният отляво и широк до
 * него, с еднаква височина; останалите четири падат на реда отдолу.
 */
@media (min-width: 860px) {
	.wv__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.wv__it {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 2px;
	aspect-ratio: 16 / 9;
	background: var(--w-paper-3);
}

/*
 * Специфичността тук е нарочна: правилата трябва да стоят след .wv__it,
 * иначе неговото 16/9 ги надписва.
 */
@media (min-width: 860px) {
	.wv__grid .wv__it--tall {
		grid-area: 1 / 1 / 3 / 2;
		aspect-ratio: 9 / 16;
	}

	.wv__grid .wv__it--feat {
		grid-area: 1 / 2 / 3 / 5;
		aspect-ratio: auto;
	}
}

/* Под 860 px изправеният заема двете колони, за да не се реже. */
@media (max-width: 859px) {
	.wv__grid .wv__it--tall {
		grid-column: span 2;
		aspect-ratio: 3 / 4;
	}
}

.wv__it video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.4s var(--ease-out);
}

.wv__it:hover video {
	transform: scale(1.03);
}

/* Знакът за възпроизвеждане изчезва, щом клипът тръгне. */
.wv__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin: -27px 0 0 -27px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.32);
	color: #fff;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: opacity 0.5s var(--ease), transform 0.5s var(--ease-out);
}

.wv__it.is-playing .wv__play {
	opacity: 0;
	transform: scale(0.7);
}

.wv__it::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	box-shadow: inset 0 0 0 0 var(--w-gold);
	transition: box-shadow 0.6s var(--ease);
}

.wv__it:hover::after {
	box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--w-gold) 65%, transparent);
}

.wv__it figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	overflow: hidden;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.82), transparent);
	color: #fff;
	font-family: var(--f-display);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
}

.wv__it figcaption span {
	display: block;
	padding: 2.2rem 1rem 0.9rem;
	transform: translateY(100%);
	transition: transform 0.6s var(--ease-out);
}

.wv__it:hover figcaption span {
	transform: none;
}

/* Формата сяда на хартията. */
body.is-svatbi .gl {
	background: var(--w-paper);
}

/* Спокоен режим ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.wh__petals,
	.wh__glow {
		display: none;
	}

	.wr__track,
	.wh__down span,
	.wh__kicker span {
		animation: none;
	}

	.wh__w > span {
		animation: none;
		transform: none;
	}

	.will-reveal,
	.will-split .w-word > span,
	.will-veil,
	.will-veil img {
		opacity: 1;
		transform: none;
		clip-path: none;
		transition: none;
	}

	.ww__card {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   16. Страниците на услугите

   Три оформления, водени от кадрите:

     „Нощта" (партита)          моментите от вечерта са цели снимки с
                                измерител върху тях; картите са кадри;
     „Протоколът" (фирмени)     всяка фаза носи своя снимка, отметките
                                лежат върху кадър;
     „Спецификацията" (техника) всяка група от комплекта е илюстрирана,
                                между групите и таблицата - широка снимка.

   Общи са само лентата с кадри, мозайката, широката лента, пътеката,
   въпросите и връзките към съседните услуги.
   -------------------------------------------------------------------------- */

/* Кадрите тук стоят почти на пълна сила и само се дооживяват при посочване. */
.nt,
.pr,
.sc,
.pstrip,
.pmos,
.pband {
	--svc-rest: grayscale(0.12) brightness(0.94) contrast(1.03);
	--svc-on: grayscale(0) brightness(1.06) saturate(1.14) contrast(1.02);
}

:root[data-theme="light"] .nt,
:root[data-theme="light"] .pr,
:root[data-theme="light"] .sc,
:root[data-theme="light"] .pstrip,
:root[data-theme="light"] .pmos,
:root[data-theme="light"] .pband {
	--svc-rest: grayscale(0.05) brightness(1.02) saturate(1.06);
	--svc-on: grayscale(0) brightness(1.06) saturate(1.2);
}

/*
 * Всичко, което лежи върху кадър, е тъмно със светъл текст във всяка тема.
 * Темата сменя хартията на сайта, но не и снимката - а върху снимка
 * тъмният текст на светлата тема се губеше.
 */
.nt__hero,
.mtr__it,
.po__hero,
.sc__hero,
.pband,
.al__quote,
.pr__checks,
.pc__band,
.mu__hero,
.pt__hero,
.hb__hero,
.hb__ch,
.dt,
.ct {
	--media-base: #07070a;
	--media-ink: #ffffff;
	--media-ink-2: rgba(255, 255, 255, 0.84);
	--media-ink-3: rgba(255, 255, 255, 0.66);

	/*
	 * И общите токени за текст. Тези секции стоят върху тъмна снимка във
	 * всяка тема, но вътре в тях има елементи, които четат --muted или --ink
	 * от темата (.eyebrow например). На светла тема това значи тъмен текст
	 * върху тъмна снимка. Заковаването тук важи за всичко отдолу и спестява
	 * изключение за всеки нов елемент.
	 */
	--ink: #ffffff;
	--ink-2: rgba(255, 255, 255, 0.82);
	--ink-3: rgba(255, 255, 255, 0.66);
	--muted: rgba(255, 255, 255, 0.66);
	--line: rgba(255, 255, 255, 0.12);
	--line-2: rgba(255, 255, 255, 0.2);
	--fill-1: rgba(255, 255, 255, 0.05);

	/*
	 * И акцентът. На светла тема --c-svatbi е #9c6405 - тъмно кехлибарено,
	 * направено за бяла хартия. Върху тази плоча то се губи, а върху бутона
	 * дава 3:1 с тъмния текст. Тук секцията е тъмна независимо от темата,
	 * затова взема златото за тъмно.
	 */
	--c-svatbi: #e7c27d;
}

/* Общи части --------------------------------------------------------------- */

.svc__head {
	max-width: 44rem;
	margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}

.svc__head--mid {
	margin-inline: auto;
	text-align: center;
}

.svc__tag {
	margin: 0 0 0.9rem;
	font-family: var(--f-display);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--c);
}

.svc__h {
	margin: 0;
	font-size: var(--t-3);
	line-height: 1.1;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

/* Пътеката ----------------------------------------------------------------- */

.crumbs {
	border-bottom: 1px solid var(--line);
	background: var(--bg);
}

.crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.9rem 0;
	list-style: none;
	font-size: var(--t--1);
	color: var(--ink-3);
}

.crumbs li + li::before {
	content: "/";
	margin-right: 0.5rem;
	color: var(--line-2);
}

.crumbs a {
	color: var(--ink-3);
	transition: color var(--fast) var(--ease);
}

.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink-2); }

/* Бягаща лента с кадри ----------------------------------------------------- */

.pstrip {
	overflow: hidden;
	border-block: 1px solid var(--line);
	background: var(--bg-2);
}

.pstrip__track {
	display: flex;
	width: max-content;
	animation: pstrip-run 46s linear infinite;
}

.pstrip:hover .pstrip__track {
	animation-play-state: paused;
}

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

.pstrip__track ul {
	display: flex;
	gap: 2px;
	margin: 0;
	padding: 0 1px;
	list-style: none;
}

.pstrip__track li {
	flex: none;
	width: clamp(13rem, 22vw, 20rem);
	height: clamp(9rem, 14vw, 13rem);
	overflow: hidden;
}

.pstrip img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: var(--svc-rest);
	transition: filter 0.8s var(--ease), transform 1.2s var(--ease-out);
}

.pstrip li:hover img {
	filter: var(--svc-on);
	transform: scale(1.06);
}

/* Мозайка ------------------------------------------------------------------ */

.pmos {
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
}

.pmos__grid {
	display: grid;
	gap: clamp(0.5rem, 1.2vw, 1rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: clamp(8rem, 12vw, 12rem);
}

/*
 * Местата са изрични. Автоматичното нареждане при плочка от две колони
 * оставя дупка в края на реда.
 */
@media (min-width: 900px) {
	.pmos__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.pmos__it:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
	.pmos__it:nth-child(2) { grid-area: 1 / 3 / 3 / 4; }
	.pmos__it:nth-child(3) { grid-area: 1 / 4 / 3 / 5; }
	.pmos__it:nth-child(4) { grid-area: 3 / 3 / 5 / 5; }
	.pmos__it:nth-child(5) { grid-area: 3 / 1 / 5 / 2; }
	.pmos__it:nth-child(6) { grid-area: 3 / 2 / 5 / 3; }

	/* Мозайка от три кадъра: широкият заема половината. */
	.pmos__grid:has(.pmos__it:nth-child(3):last-child) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.pmos__it:nth-child(1):has(~ .pmos__it:nth-child(3):last-child) { grid-area: 1 / 1 / 3 / 3; }
}

.pmos__it {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--bg-3);
}

.pmos__it img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: var(--svc-rest);
	transition: filter 0.9s var(--ease), transform 1.6s var(--ease-out);
}

.pmos__it:hover img {
	filter: var(--svc-on);
	transform: scale(1.07);
}

.pmos__it::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	box-shadow: inset 0 0 0 0 var(--c);
	transition: box-shadow 0.6s var(--ease);
}

.pmos__it:hover::after {
	box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--c) 70%, transparent);
}

.pmos__it figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.82), transparent);
	color: #fff;
	font-family: var(--f-display);
	font-size: var(--t--1);
	letter-spacing: 0.06em;
}

/* Отстъпът стои на span-а: overflow реже по padding box-а. */
.pmos__it figcaption span {
	display: block;
	padding: 2.5rem 1.1rem 1.1rem;
	transform: translateY(100%);
	transition: transform 0.7s var(--ease-out);
}

.pmos__it:hover figcaption span {
	transform: none;
}

/* Широка лента ------------------------------------------------------------- */

.pband {
	position: relative;
	display: grid;
	align-items: center;
	min-height: clamp(20rem, 40vw, 32rem);
	overflow: clip;
	isolation: isolate;
	text-align: center;
}

.pband > img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.8) saturate(1.05);
	transform: scale(1.04);
	animation: pband-drift 28s var(--ease) infinite alternate;
}

@keyframes pband-drift {
	to { transform: scale(1.12); }
}

.pband::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(60% 70% at 50% 50%, color-mix(in oklab, var(--c) 24%, transparent), transparent 72%),
		color-mix(in oklab, var(--media-base) 52%, transparent);
}

.pband__inner {
	position: relative;
	z-index: 2;
}

.pband p {
	max-width: 24ch;
	margin: 0 auto 1.8rem;
	font-size: var(--t-3);
	line-height: 1.16;
	letter-spacing: -0.03em;
	color: var(--media-ink);
	text-wrap: balance;
}

.pband__cta {
	--tx: 0px;
	--ty: 0px;

	position: relative;
	overflow: hidden;
	display: inline-flex;
	padding: 1.1em 2.4em;
	border: 1px solid var(--media-ink);
	border-radius: var(--pill);
	font-family: var(--f-display);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--media-ink);
	transform: translate3d(var(--tx), var(--ty), 0);
	transition: transform 0.45s var(--ease-out), color var(--mid) var(--ease);
}

.pband__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--media-ink);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.45s var(--ease-out);
}

.pband__cta:hover::before { transform: scaleY(1); }
.pband__cta:hover { color: var(--media-base); }
.pband__cta span { position: relative; z-index: 1; }

/* Съседните услуги --------------------------------------------------------- */

.sib {
	--c: var(--c-svatbi);

	padding-block: clamp(2.5rem, 6vw, 4rem);
	border-top: 1px solid var(--line);
}

.sib.ch--partita { --c: var(--c-partita); }
.sib.ch--firmeni { --c: var(--c-firmeni); }
.sib.ch--tehnika { --c: var(--c-tehnika); }

.sib__tag {
	margin: 0 0 1.25rem;
	font-family: var(--f-display);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--c);
}

.sib__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sib__list a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 1.2rem;
	border: 1px solid var(--line-2);
	border-radius: var(--pill);
	font-family: var(--f-display);
	font-size: var(--t--1);
	color: var(--ink-2);
	transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease),
		background-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.sib__list svg {
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity var(--fast) var(--ease), transform var(--mid) var(--ease);
}

.sib__list a:hover {
	color: var(--ink);
	border-color: var(--c);
	background: color-mix(in oklab, var(--c) 10%, transparent);
	transform: translateY(-2px);
}

.sib__list a:hover svg {
	opacity: 1;
	transform: none;
	color: var(--c);
}

/* Въпросите на услуга ------------------------------------------------------ */

.svcq {
	padding-block: clamp(3rem, 8vw, 6rem);
	border-top: 1px solid var(--line);
}

.svcq__inner {
	max-width: 54rem;
}


/* ==========================================================================
   „Нощта" - партита
   ========================================================================== */

.nt {
	--c: var(--c-partita);

	background: var(--bg);
}

.nt.ch--svatbi  { --c: var(--c-svatbi); }
.nt.ch--firmeni { --c: var(--c-firmeni); }
.nt.ch--tehnika { --c: var(--c-tehnika); }

.nt__hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: min(90svh, 50rem);
	padding-block: clamp(4rem, 10vw, 7rem);
	overflow: clip;
	isolation: isolate;
}

.nt__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.nt__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.72) saturate(1.05);
	transform: scale(1.05);
	animation: nt-drift 34s var(--ease) infinite alternate;
}

@keyframes nt-drift {
	to { transform: scale(1.14) translateX(-2%); }
}

.nt__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(70% 60% at 20% 80%, color-mix(in oklab, var(--c) 32%, transparent), transparent 70%),
		linear-gradient(to top, var(--media-base) 4%, color-mix(in oklab, var(--media-base) 52%, transparent) 55%, color-mix(in oklab, var(--media-base) 25%, transparent));
}

.nt__inner {
	position: relative;
	z-index: 1;
	color: var(--media-ink);
}

.nt__kicker {
	margin: 0 0 1.2rem;
	font-family: var(--f-display);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--c);
}

.nt__h {
	margin: 0;
	font-size: clamp(2.9rem, 1rem + 7.4vw, 8rem);
	font-weight: 700;
	line-height: 0.92;
	letter-spacing: -0.05em;
	text-transform: uppercase;
}

.nt__h span { display: block; }

.nt__h em {
	display: block;
	font-style: normal;
	color: var(--c);
	text-shadow: 0 0 70px color-mix(in oklab, var(--c) 55%, transparent);
}

.nt__lead {
	margin: 1.5rem 0 0;
	max-width: 42ch;
	font-size: var(--t-1);
	line-height: 1.7;
	color: var(--media-ink-2);
}

.nt__cta {
	--tx: 0px;
	--ty: 0px;

	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	margin-top: 2rem;
	padding: 1.15em 2.6em;
	border: 1px solid var(--c);
	border-radius: var(--pill);
	font-family: var(--f-display);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--media-ink);
	transform: translate3d(var(--tx), var(--ty), 0);
	transition: transform 0.45s var(--ease-out), color var(--mid) var(--ease);
}

.nt__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--c);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.45s var(--ease-out);
}

.nt__cta:hover::before,
.nt__cta:focus-visible::before { transform: scaleY(1); }
.nt__cta:hover,
.nt__cta:focus-visible { color: var(--bg); }
.nt__cta span { position: relative; z-index: 1; }

/* Моментите като цели кадри ------------------------------------------------ */

.nt__meters {
	padding-block: clamp(3.5rem, 9vw, 6rem) 0;
}

.mtr {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mtr__it {
	position: relative;
	display: grid;
	align-items: end;
	min-height: clamp(20rem, 42vw, 34rem);
	overflow: hidden;
	isolation: isolate;
}

.mtr__it > img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: var(--svc-rest);
	transform: scale(1.03);
	transition: filter 1s var(--ease), transform 2s var(--ease-out);
}

.mtr__it:hover > img {
	filter: var(--svc-on);
	transform: scale(1.08);
}

.mtr__it::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, var(--media-base) 2%, color-mix(in oklab, var(--media-base) 45%, transparent) 60%, transparent);
}

/* През един кадърът се чете отдясно - иначе четирите се сливат. */
.mtr__it:nth-child(even) .mtr__inner {
	margin-left: auto;
	text-align: right;
}

.mtr__inner {
	position: relative;
	z-index: 2;
	max-width: 34rem;
	padding-block: clamp(1.75rem, 4vw, 3rem);
	color: var(--media-ink);
}

.mtr__pct {
	display: block;
	font-family: var(--f-display);
	font-size: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.05em;
	color: var(--c);
	font-variant-numeric: tabular-nums;
}

.mtr__pct::after {
	content: "%";
	font-size: 0.45em;
	vertical-align: super;
	opacity: 0.7;
}

.mtr__inner h3 {
	margin: 0.5rem 0 0.4rem;
	font-size: var(--t-2);
	letter-spacing: -0.02em;
}

.mtr__inner p {
	margin: 0 0 1.25rem;
	color: var(--media-ink-2);
	max-width: 44ch;
}

.mtr__it:nth-child(even) .mtr__inner p {
	margin-left: auto;
}

.mtr__bar {
	display: block;
	height: 4px;
	border-radius: var(--pill);
	background: color-mix(in oklab, var(--media-ink) 22%, transparent);
	overflow: hidden;
}

.mtr__bar b {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--c);
	box-shadow: 0 0 16px var(--c);
	transform: scaleX(0);
	transform-origin: left;
}

.mtr__it:nth-child(even) .mtr__bar b {
	transform-origin: right;
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.mtr__bar b {
			animation: mtr-fill linear both;
			animation-timeline: view();
			animation-range: entry 25% cover 45%;
		}
	}
}

@keyframes mtr-fill {
	to { transform: scaleX(calc(var(--lvl) / 100%)); }
}

@supports not (animation-timeline: view()) {
	.mtr__bar b { transform: scaleX(calc(var(--lvl) / 100%)); }
}

/* Шестте карти - кадри, не картончета ------------------------------------- */

.nt__grid {
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
	background: var(--bg-2);
}

.ngr {
	display: grid;
	gap: clamp(0.5rem, 1.2vw, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) { .ngr { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ngr { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ngr li {
	position: relative;
	overflow: hidden;
	display: grid;
	align-content: end;
	min-height: clamp(17rem, 24vw, 21rem);
	padding: clamp(1.25rem, 2.4vw, 1.75rem);
	color: #fff;
}

.ngr img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.03);
	transition: transform 1.6s var(--ease-out);
}

.ngr li:hover img { transform: scale(1.1); }

.ngr li::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(8, 6, 10, 0.92) 10%, rgba(8, 6, 10, 0.4) 58%, rgba(8, 6, 10, 0.2));
	transition: background var(--slow) var(--ease);
}

.ngr li:hover::after {
	background: linear-gradient(to top, rgba(8, 6, 10, 0.95) 14%, color-mix(in oklab, var(--c) 26%, rgba(8, 6, 10, 0.45)) 62%, rgba(8, 6, 10, 0.25));
}

.ngr__ic {
	position: absolute;
	top: clamp(1.25rem, 2.4vw, 1.75rem);
	left: clamp(1.25rem, 2.4vw, 1.75rem);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	color: #fff;
	transition: background-color var(--mid) var(--ease), border-color var(--mid) var(--ease),
		transform var(--mid) var(--ease-out);
}

.ngr li:hover .ngr__ic {
	background: var(--c);
	border-color: var(--c);
	transform: rotate(-8deg) scale(1.06);
}

.ngr__txt {
	position: relative;
	z-index: 2;
}

.ngr h3 {
	margin: 0 0 0.4rem;
	font-size: var(--t-1);
	letter-spacing: -0.01em;
}

.ngr p {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.7s var(--ease-out), opacity 0.5s var(--ease);
}

.ngr li:hover p,
.ngr li:focus-within p {
	max-height: 10rem;
	opacity: 1;
}

@media (hover: none) {
	.ngr p { max-height: none; opacity: 1; }
}


/* ==========================================================================
   „Протоколът" - фирмени
   ========================================================================== */

.pr {
	--c: var(--c-firmeni);
}

.pr__hero {
	padding-block: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.pr__inner {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

@media (min-width: 940px) {
	.pr__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}

.pr__h {
	margin: 0.8rem 0 1.2rem;
	font-size: clamp(1.9rem, 1rem + 3vw, 3.4rem);
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -0.035em;
}

.pr__h em { font-style: normal; color: var(--c); }

.pr__lead {
	margin: 0 0 2rem;
	font-size: var(--t-1);
	line-height: 1.75;
	color: var(--ink-3);
	max-width: 46ch;
}

.pbtn,
.sbtn {
	--tx: 0px;
	--ty: 0px;

	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	padding: 1.1em 2.2em;
	border: 1px solid var(--c);
	border-radius: 3px;
	font-family: var(--f-display);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink);
	transform: translate3d(var(--tx), var(--ty), 0);
	transition: transform 0.45s var(--ease-out), color var(--mid) var(--ease);
}

.pbtn::before,
.sbtn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--c);
	transform: translateX(-101%);
	transition: transform 0.5s var(--ease-out);
}

.pbtn:hover::before,
.pbtn:focus-visible::before,
.sbtn:hover::before,
.sbtn:focus-visible::before { transform: none; }

.pbtn:hover, .pbtn:focus-visible,
.sbtn:hover, .sbtn:focus-visible { color: var(--bg); }

.pbtn span, .sbtn span { position: relative; z-index: 1; }

.pr__fig {
	margin: 0;
	overflow: hidden;
	border-radius: 3px;
}

.pr__fig img {
	display: block;
	width: 100%;
	height: clamp(20rem, 38vw, 32rem);
	object-fit: cover;
	transform: scale(1.02);
	transition: transform 1.8s var(--ease-out);
}

.pr__fig:hover img { transform: scale(1.06); }

.pr__stats {
	display: grid;
	gap: 1px;
	margin: clamp(2.5rem, 6vw, 4rem) 0 0;
	padding: 0;
	list-style: none;
	background: var(--line);
	border-block: 1px solid var(--line);
}

@media (min-width: 700px) {
	.pr__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pr__stats li {
	display: grid;
	gap: 0.3rem;
	padding: clamp(1.5rem, 3vw, 2.25rem) var(--gutter);
	background: var(--bg);
	transition: background-color var(--mid) var(--ease);
}

.pr__stats li:hover {
	background: color-mix(in oklab, var(--c) 8%, var(--bg));
}

.pr__num {
	font-family: var(--f-display);
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--c);
	font-variant-numeric: tabular-nums;
}

.pr__lab {
	font-size: var(--t--1);
	color: var(--ink-3);
}

/* Фазите ------------------------------------------------------------------- */

.pr__phases {
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
}

.phs {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 900px) {
	.phs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.phs__it {
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 3px;
	background: var(--bg-2);
	transition: border-color var(--mid) var(--ease), transform var(--mid) var(--ease-out),
		box-shadow var(--mid) var(--ease);
}

.phs__it:hover {
	border-color: color-mix(in oklab, var(--c) 45%, var(--line));
	transform: translateY(-4px);
	box-shadow: 0 26px 50px -34px rgba(0, 0, 0, 0.6);
}

.phs__it figure {
	position: relative;
	margin: 0;
	overflow: hidden;
}

.phs__it figure img {
	display: block;
	width: 100%;
	height: clamp(11rem, 17vw, 15rem);
	object-fit: cover;
	filter: var(--svc-rest);
	transition: filter 0.9s var(--ease), transform 1.6s var(--ease-out);
}

.phs__it:hover figure img {
	filter: var(--svc-on);
	transform: scale(1.06);
}

.phs__it figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: baseline;
	gap: 0.8rem;
	padding: 2.5rem 1.4rem 1rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

.phs__n {
	font-family: var(--f-display);
	font-size: var(--t-2);
	font-weight: 300;
	color: var(--c);
	font-variant-numeric: tabular-nums;
}

.phs__when {
	font-family: var(--f-display);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}

.phs__body {
	padding: clamp(1.35rem, 2.6vw, 1.9rem);
}

.phs__body h3 {
	margin: 0 0 0.6rem;
	font-size: var(--t-2);
	letter-spacing: -0.02em;
}

.phs__body > p {
	margin: 0 0 1.25rem;
	color: var(--ink-3);
}

.phs__body ul {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 1.1rem 0 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.phs__body li {
	position: relative;
	padding-left: 1.2rem;
	font-size: var(--t--1);
	color: var(--ink-2);
}

.phs__body li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--c);
}

/* Отметките върху кадър ---------------------------------------------------- */

.pr__checks {
	position: relative;
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
	overflow: clip;
	isolation: isolate;
}

.pr__cbg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.pr__cbg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.8) saturate(1.05);
}

.pr__cbg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 70% at 80% 30%, color-mix(in oklab, var(--c) 20%, transparent), transparent 70%),
		color-mix(in oklab, var(--media-base) 74%, transparent);
}

.pr__cinner {
	position: relative;
	z-index: 1;
	max-width: 58rem;
	color: var(--media-ink);
}

.pr__checks ul {
	display: grid;
	gap: 0;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 760px) {
	.pr__checks ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
}

.pr__checks li {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block: 1.1rem;
	border-bottom: 1px solid color-mix(in oklab, var(--media-ink) 18%, transparent);
	color: var(--media-ink-2);
}

/* Отметката е два ръба на завъртян правоъгълник. */
.pr__checks li span {
	flex: none;
	width: 9px;
	height: 16px;
	border: solid var(--c);
	border-width: 0 2px 2px 0;
	transform: rotate(42deg);
	margin-top: -4px;
}


/* ==========================================================================
   „Спецификацията" - техника
   ========================================================================== */

.sc {
	--c: var(--c-tehnika);
}

.sc__hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: min(76svh, 42rem);
	padding-block: clamp(3.5rem, 9vw, 6rem);
	overflow: clip;
	isolation: isolate;
}

.sc__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.sc__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.75) saturate(1.05);
}

/* Чертожна мрежа: страницата е лист с данни, не афиш. */
.sc__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(color-mix(in oklab, var(--c) 12%, transparent) 1px, transparent 1px) 0 0 / 100% 3rem,
		linear-gradient(90deg, color-mix(in oklab, var(--c) 12%, transparent) 1px, transparent 1px) 0 0 / 3rem 100%,
		linear-gradient(to right, var(--media-base) 8%, color-mix(in oklab, var(--media-base) 60%, transparent) 62%, color-mix(in oklab, var(--media-base) 32%, transparent));
}

.sc__inner {
	position: relative;
	z-index: 1;
	max-width: var(--wrap);
	color: var(--media-ink);
}

.sc__inner > * { max-width: 38rem; }

.sc__h {
	margin: 0.8rem 0 0;
	font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4rem);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -0.04em;
}

.sc__h em { display: block; font-style: normal; color: var(--c); }

.sc__lead {
	margin: 1.3rem 0 2rem;
	font-size: var(--t-1);
	line-height: 1.75;
	color: var(--media-ink-2);
}

/* Комплектът --------------------------------------------------------------- */

.sc__kit {
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
}

.kit {
	display: grid;
	gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

@media (min-width: 700px) { .kit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .kit { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.kit__it {
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--bg);
	transition: border-color var(--mid) var(--ease), transform var(--mid) var(--ease-out);
}

.kit__it:hover {
	border-color: color-mix(in oklab, var(--c) 50%, var(--line));
	transform: translateY(-4px);
}

.kit__it figure {
	position: relative;
	margin: 0;
	overflow: hidden;
}

.kit__it figure img {
	display: block;
	width: 100%;
	height: clamp(10rem, 15vw, 13rem);
	object-fit: cover;
	filter: var(--svc-rest);
	transition: filter 0.9s var(--ease), transform 1.6s var(--ease-out);
}

.kit__it:hover figure img {
	filter: var(--svc-on);
	transform: scale(1.07);
}

.kit__n {
	position: absolute;
	top: 0.9rem;
	right: 1.1rem;
	font-family: var(--f-display);
	font-size: var(--t-2);
	font-weight: 300;
	color: rgba(255, 255, 255, 0.65);
	font-variant-numeric: tabular-nums;
}

.kit__ic {
	position: absolute;
	left: 1.1rem;
	bottom: 1.1rem;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background-color var(--mid) var(--ease), border-color var(--mid) var(--ease),
		transform var(--mid) var(--ease-out);
}

.kit__it:hover .kit__ic {
	background: var(--c);
	border-color: var(--c);
	transform: rotate(-5deg);
}

.kit__body {
	padding: clamp(1.25rem, 2.4vw, 1.75rem);
}

.kit__body h3 {
	margin: 0 0 0.5rem;
	font-size: var(--t-1);
	letter-spacing: -0.01em;
}

.kit__body > p {
	margin: 0 0 1.25rem;
	font-size: var(--t--1);
	line-height: 1.7;
	color: var(--ink-3);
}

.kit__body ul {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 1.1rem 0 0;
	list-style: none;
	border-top: 1px dashed var(--line-2);
}

.kit__body li {
	position: relative;
	padding-left: 1.1rem;
	font-family: var(--f-display);
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	color: var(--ink-2);
}

.kit__body li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 1px;
	background: var(--c);
}

/* Условията ---------------------------------------------------------------- */

.sc__rows {
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
	border-top: 1px solid var(--line);
	background: var(--bg-2);
}

.sc__rinner { max-width: 52rem; }

.rws {
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	border-top: 1px solid var(--line);
}

.rws > div {
	display: grid;
	gap: 0.2rem 2rem;
	padding-block: 1.15rem;
	border-bottom: 1px solid var(--line);
	transition: padding-left var(--mid) var(--ease), background-color var(--mid) var(--ease);
}

@media (min-width: 600px) {
	.rws > div { grid-template-columns: 12rem minmax(0, 1fr); align-items: baseline; }
}

.rws > div:hover {
	padding-left: 0.9rem;
	background: color-mix(in oklab, var(--c) 6%, transparent);
}

.rws dt {
	font-family: var(--f-display);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c);
}

.rws dd {
	margin: 0;
	font-size: var(--t-0);
	color: var(--ink-2);
}

/* Влизане при скрол -------------------------------------------------------- */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.ngr li,
		.phs__it,
		.pr__stats li,
		.pr__checks li,
		.kit__it,
		.rws > div,
		.pmos__it {
			animation: svc-in linear both;
			animation-timeline: view();
			animation-range: entry 8% entry 58%;
			animation-delay: calc(var(--i, 0) * -0.05s);
		}
	}
}

@keyframes svc-in {
	from {
		opacity: 0;
		transform: translateY(1.5rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nt__bg img,
	.pstrip__track,
	.pband > img {
		animation: none;
	}
}


/* ==========================================================================
   „Албум" - семейните поводи
   ========================================================================== */

.al {
	--c: var(--c-svatbi);
}

.al.ch--partita { --c: var(--c-partita); }
.al.ch--firmeni { --c: var(--c-firmeni); }
.al.ch--tehnika { --c: var(--c-tehnika); }

.al__hero {
	padding-block: clamp(3rem, 7vw, 5rem) clamp(3rem, 7vw, 5rem);
	overflow: clip;
}

.al__inner {
	display: grid;
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}

@media (min-width: 900px) {
	.al__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}

.al__h {
	margin: 0.8rem 0 1.2rem;
	font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.035em;
}

.al__h em {
	display: block;
	font-style: normal;
	font-weight: 300;
	color: var(--c);
}

.al__lead {
	margin: 0 0 2rem;
	font-size: var(--t-1);
	line-height: 1.75;
	color: var(--ink-3);
	max-width: 44ch;
}

.abtn {
	--tx: 0px;
	--ty: 0px;

	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	padding: 1.1em 2.3em;
	border: 1px solid var(--c);
	border-radius: var(--pill);
	font-family: var(--f-display);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink);
	transform: translate3d(var(--tx), var(--ty), 0);
	transition: transform 0.45s var(--ease-out), color var(--mid) var(--ease);
}

.abtn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--c);
	transform: scale(0);
	border-radius: inherit;
	transition: transform 0.5s var(--ease-out);
}

.abtn:hover::before,
.abtn:focus-visible::before { transform: scale(1.1); }
.abtn:hover, .abtn:focus-visible { color: var(--bg); }
.abtn span { position: relative; z-index: 1; }

/*
 * Ветрилото: три кадъра един върху друг, леко завъртени, като снимки
 * на маса. При посочване се разтварят.
 */
.al__fan {
	position: relative;
	height: clamp(22rem, 44vw, 34rem);
}

.al__card {
	position: absolute;
	top: 50%;
	left: 50%;
	width: clamp(13rem, 24vw, 19rem);
	margin: 0;
	padding: 0.6rem 0.6rem 2.2rem;
	background: var(--bg-2);
	border: 1px solid var(--line);
	border-radius: 3px;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
	transform: translate(-50%, -50%) rotate(calc(var(--i) * 9deg - 9deg)) translateX(calc(var(--i) * 4rem - 4rem));
	transition: transform 0.9s var(--ease-out);
	will-change: transform;
}

.al__card:nth-child(1) { z-index: 3; }
.al__card:nth-child(2) { z-index: 2; }
.al__card:nth-child(3) { z-index: 1; }

.al__fan:hover .al__card {
	transform: translate(-50%, -50%) rotate(calc(var(--i) * 14deg - 14deg)) translateX(calc(var(--i) * 7rem - 7rem)) translateY(calc(var(--i) * -1rem));
}

.al__card img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Моментите като снимки в албум ------------------------------------------ */

.al__moments {
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
	border-top: 1px solid var(--line);
	background: var(--bg-2);
}

.alm {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) { .alm { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .alm { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.alm__it figure {
	margin: 0;
	padding: 0.7rem 0.7rem 1.4rem;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 3px;
	box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.6);
	transform: rotate(var(--r));
	transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease);
}

.alm__it:hover figure {
	transform: rotate(0) translateY(-6px) scale(1.02);
	box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.7);
}

.alm__it img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	filter: var(--svc-rest);
	transition: filter 0.8s var(--ease);
}

.alm__it:hover img { filter: var(--svc-on); }

.alm__it figcaption {
	padding-top: 1rem;
}

.alm__n {
	font-family: var(--f-display);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--c);
}

.alm__it h3 {
	margin: 0.3rem 0 0.35rem;
	font-size: var(--t-1);
	letter-spacing: -0.01em;
}

.alm__it p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.65;
	color: var(--ink-3);
}

/* Репликата върху кадър ---------------------------------------------------- */

.al__quote {
	position: relative;
	display: grid;
	align-items: center;
	min-height: clamp(18rem, 36vw, 28rem);
	overflow: clip;
	isolation: isolate;
	text-align: center;
}

.al__quote > img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.8) saturate(1.05);
	transform: scale(1.04);
	animation: pband-drift 28s var(--ease) infinite alternate;
}

.al__quote::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(60% 70% at 50% 50%, color-mix(in oklab, var(--c) 22%, transparent), transparent 72%),
		color-mix(in oklab, var(--media-base) 58%, transparent);
}

.al__qinner {
	position: relative;
	z-index: 2;
}

.al__quote p {
	max-width: 30ch;
	margin: 0 auto;
	font-size: var(--t-2);
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--media-ink);
	text-wrap: balance;
}

/* Какво идва с мен --------------------------------------------------------- */

.al__brings {
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
}

.alb {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 860px) { .alb { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.alb li {
	display: grid;
	grid-template-columns: 6rem minmax(0, 1fr);
	gap: 1.1rem;
	align-items: center;
	padding: 1rem;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--bg-2);
	transition: border-color var(--mid) var(--ease), transform var(--mid) var(--ease-out);
}

.alb li:hover {
	border-color: color-mix(in oklab, var(--c) 45%, var(--line));
	transform: translateY(-3px);
}

.alb img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 3px;
	filter: var(--svc-rest);
	transition: filter 0.8s var(--ease);
}

.alb li:hover img { filter: var(--svc-on); }

.alb__ic {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin-bottom: 0.5rem;
	border: 1px solid color-mix(in oklab, var(--c) 45%, var(--line));
	border-radius: 50%;
	color: var(--c);
}

.alb h3 {
	margin: 0 0 0.3rem;
	font-size: var(--t-0);
	font-weight: 600;
}

.alb p {
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.6;
	color: var(--ink-3);
}


/* ==========================================================================
   „Плакат" - обявяваните поводи
   ========================================================================== */

.po {
	--c: var(--c-partita);
}

.po.ch--svatbi  { --c: var(--c-svatbi); }
.po.ch--firmeni { --c: var(--c-firmeni); }
.po.ch--tehnika { --c: var(--c-tehnika); }

.po__hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: min(92svh, 52rem);
	/* Отгоре е повече, за да не се засича заглавието с диагоналната лента. */
	padding-block: clamp(7rem, 16vw, 11rem) clamp(4rem, 10vw, 7rem);
	overflow: clip;
	isolation: isolate;
	text-align: center;
}

.po__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.po__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.5) saturate(1.1);
	transform: scale(1.05);
	animation: nt-drift 30s var(--ease) infinite alternate;
}

.po__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(70% 60% at 50% 60%, color-mix(in oklab, var(--c) 28%, transparent), transparent 72%),
		radial-gradient(60% 50% at 50% 50%, rgba(7, 7, 10, 0.45), transparent 75%),
		linear-gradient(to top, var(--media-base) 3%, transparent 45%);
}

/* Диагоналната лента с печата. */
.po__diag {
	position: absolute;
	left: -10%;
	right: -10%;
	top: 4%;
	z-index: 1;
	overflow: hidden;
	transform: rotate(-6deg);
	border-block: 1px solid color-mix(in oklab, var(--c) 60%, transparent);
	background: color-mix(in oklab, var(--c) 82%, var(--media-base));
	pointer-events: none;
}

.po__diagtrack {
	display: flex;
	width: max-content;
	animation: nt-run 24s linear infinite;
}

.po__diagtrack span {
	padding: 0.55rem 2.4rem;
	font-family: var(--f-display);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--media-base);
	white-space: nowrap;
}

.po__inner {
	position: relative;
	z-index: 2;
	/* Лентата е завъртяна и долният ѝ ръб слиза наляво - отстъпът пази надписа. */
	padding-top: clamp(2.5rem, 7vw, 5rem);
	color: var(--media-ink);
}

.po__kicker {
	margin: 0 0 1rem;
	font-family: var(--f-display);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--c);
}

.po__h {
	margin: 0;
	font-size: clamp(2.8rem, 1rem + 7vw, 7.5rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.045em;
	text-transform: uppercase;
}

.po__h span { display: block; }

/* Контурен ред и плътен ред - езикът на афиша. */
.po__outline {
	color: transparent;
	-webkit-text-stroke: 2.5px var(--media-ink);
	paint-order: stroke fill;
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}

.po__solid {
	color: var(--c);
	text-shadow: 0 0 70px color-mix(in oklab, var(--c) 55%, transparent);
}

.po__lead {
	max-width: 46ch;
	margin: 1.6rem auto 0;
	font-size: var(--t-1);
	line-height: 1.7;
	color: var(--media-ink-2);
}

.po__cta {
	--tx: 0px;
	--ty: 0px;

	position: relative;
	overflow: hidden;
	display: inline-flex;
	margin-top: 2rem;
	padding: 1.15em 2.6em;
	border: 2px solid var(--c);
	border-radius: 2px;
	font-family: var(--f-display);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--media-ink);
	transform: translate3d(var(--tx), var(--ty), 0);
	transition: transform 0.45s var(--ease-out), color var(--mid) var(--ease);
}

.po__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--c);
	transform: skewX(-18deg) translateX(-120%);
	transition: transform 0.5s var(--ease-out);
}

.po__cta:hover::before,
.po__cta:focus-visible::before { transform: skewX(-18deg) translateX(0) scaleX(1.4); }
.po__cta:hover, .po__cta:focus-visible { color: var(--bg); }
.po__cta span { position: relative; z-index: 1; }

/* Програмата като списък на афиш ------------------------------------------ */

.po__lineup {
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
}

.po__linner { max-width: 60rem; }

.pol {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.pol__it {
	position: relative;
	display: grid;
	gap: 0.3rem 2rem;
	padding-block: clamp(1.4rem, 3vw, 2rem);
	border-bottom: 1px solid var(--line);
	transition: padding-left var(--mid) var(--ease);
}

@media (min-width: 720px) {
	.pol__it { grid-template-columns: 9rem minmax(0, 1fr); align-items: baseline; }
}

.pol__it:hover { padding-left: 0.8rem; }

.pol__when {
	font-family: var(--f-display);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--c);
}

.pol__t {
	margin: 0;
	font-size: clamp(1.5rem, 1rem + 1.6vw, 2.4rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	transition: color var(--mid) var(--ease);
}

.pol__it:hover .pol__t { color: var(--c); }

.pol__p {
	margin: 0;
	color: var(--ink-3);
	max-width: 52ch;
}

@media (min-width: 720px) {
	.pol__p { grid-column: 2; }
}

/* Кадър, който наднича при посочване. */
.pol__peek {
	position: absolute;
	right: 0;
	top: 50%;
	width: 12rem;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 3px;
	box-shadow: 0 30px 50px -24px rgba(0, 0, 0, 0.8);
	opacity: 0;
	transform: translateY(-50%) rotate(4deg) scale(0.9);
	transition: opacity 0.5s var(--ease), transform 0.7s var(--ease-out);
	pointer-events: none;
}

@media (min-width: 1000px) {
	.pol__it:hover .pol__peek {
		opacity: 1;
		transform: translateY(-50%) rotate(-2deg) scale(1);
	}
}

/* Колаж и три точки -------------------------------------------------------- */

.po__points {
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
	border-top: 1px solid var(--line);
	background: var(--bg-2);
	overflow: clip;
}

.po__pinner {
	display: grid;
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}

@media (min-width: 900px) {
	.po__pinner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.po__collage {
	position: relative;
	height: clamp(22rem, 42vw, 32rem);
}

.po__collage img {
	position: absolute;
	width: 58%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 3px;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
	transition: transform 0.9s var(--ease-out);
}

.po__collage img:nth-child(1) { left: 0; top: 8%; z-index: 1; transform: rotate(-4deg); }
.po__collage img:nth-child(2) { left: 32%; top: 0; z-index: 3; transform: rotate(2deg); }
.po__collage img:nth-child(3) { left: 44%; top: 22%; z-index: 2; transform: rotate(7deg); }

.po__collage:hover img:nth-child(1) { transform: rotate(-8deg) translateX(-1rem); }
.po__collage:hover img:nth-child(2) { transform: rotate(0) translateY(-1rem) scale(1.04); }
.po__collage:hover img:nth-child(3) { transform: rotate(11deg) translateX(1rem); }

.pop {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.pop li {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	gap: 0.2rem 1.5rem;
	padding-block: 1.4rem;
	border-bottom: 1px solid var(--line);
}

.pop b {
	grid-row: span 2;
	font-family: var(--f-display);
	font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--c);
	font-variant-numeric: tabular-nums;
}

.pop h3 {
	margin: 0;
	font-size: var(--t-1);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.pop p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.65;
	color: var(--ink-3);
}


/* ==========================================================================
   Услугите - сборната страница, водена от кадри
   ========================================================================== */

.hb__hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: min(70svh, 40rem);
	padding-block: clamp(3rem, 8vw, 5rem);
	overflow: clip;
	isolation: isolate;
}

.hb__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hb__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.66) saturate(1.05);
}

.hb__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--media-base) 4%, color-mix(in oklab, var(--media-base) 40%, transparent) 60%, transparent);
}

.hb__inner {
	position: relative;
	z-index: 1;
	color: var(--media-ink);
}

.hb__h {
	margin: 0.7rem 0 0.8rem;
	font-size: var(--t-4);
	line-height: 1.02;
	letter-spacing: -0.04em;
	max-width: 12ch;
}

.hb__lead {
	margin: 0;
	max-width: 46ch;
	font-size: var(--t-1);
	color: var(--media-ink-2);
}

/* Четирите канала - всеки е кадър на цялата ширина. */
.hb__ch {
	--c: var(--c-svatbi);

	position: relative;
	display: grid;
	align-items: center;
	min-height: clamp(26rem, 52vw, 40rem);
	overflow: clip;
	isolation: isolate;
	scroll-margin-top: calc(var(--hdr-h) + 1rem);
}

.hb__ch.ch--partita { --c: var(--c-partita); }
.hb__ch.ch--firmeni { --c: var(--c-firmeni); }
.hb__ch.ch--tehnika { --c: var(--c-tehnika); }

.hb__ch > img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.72) saturate(1.05);
	transform: scale(1.04);
	transition: transform 2s var(--ease-out), filter 1s var(--ease);
}

.hb__ch:hover > img {
	transform: scale(1.09);
	filter: brightness(0.8) saturate(1.15);
}

.hb__ch::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to right, color-mix(in oklab, var(--media-base) 88%, transparent) 0 30%, color-mix(in oklab, var(--media-base) 35%, transparent) 65%, transparent);
}

.hb__ch:nth-child(even)::after {
	background: linear-gradient(to left, color-mix(in oklab, var(--media-base) 88%, transparent) 0 30%, color-mix(in oklab, var(--media-base) 35%, transparent) 65%, transparent);
}

.hb__cinner {
	position: relative;
	z-index: 2;
	color: var(--media-ink);
}

.hb__ch:nth-child(even) .hb__cinner {
	margin-left: auto;
	text-align: right;
}

.hb__cinner > * { max-width: 34rem; }

.hb__ch:nth-child(even) .hb__cinner > * { margin-left: auto; }

.hb__num {
	margin: 0;
	font-family: var(--f-display);
	font-size: var(--t--1);
	font-weight: 700;
	letter-spacing: 0.3em;
	color: var(--c);
}

.hb__t {
	margin: 0.4rem 0 0.3rem;
	font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem);
	font-weight: 700;
	letter-spacing: -0.04em;
}

.hb__s {
	margin: 0 0 1.5rem;
	color: var(--media-ink-2);
}

.hb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hb__ch:nth-child(even) .hb__list { justify-content: flex-end; }

.hb__list a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.15rem;
	border: 1px solid color-mix(in oklab, var(--media-ink) 30%, transparent);
	border-radius: var(--pill);
	background: color-mix(in oklab, var(--media-base) 40%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-family: var(--f-display);
	font-size: var(--t--1);
	font-weight: 500;
	color: var(--media-ink);
	transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease),
		transform var(--fast) var(--ease), color var(--fast) var(--ease);
}

.hb__list a:hover {
	background: var(--c);
	border-color: var(--c);
	color: var(--bg);
	transform: translateY(-3px);
}

.hb__list svg {
	opacity: 0;
	width: 0;
	transition: opacity var(--fast) var(--ease), width var(--mid) var(--ease);
}

.hb__list a:hover svg { opacity: 1; width: 16px; }


/* ==========================================================================
   Свободни дати и контакти - с кадри
   ========================================================================== */

.dt {
	position: relative;
	overflow: clip;
	isolation: isolate;
}

.dt__bg,
.ct__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.dt__bg img,
.ct__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.6) saturate(1.05);
}

/*
 * Затъмнението избледняваше към цвета на темата. На светла тема това е почти
 * бяло - а текстът в секцията е закован на бял, защото стои върху снимка.
 * Резултатът беше бяло върху бяло в долната половина. Сега избледнява към
 * --media-base, който е тъмен и в трите теми.
 */
.dt__bg::after,
.ct__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(7, 7, 10, 0.5), var(--media-base) 94%);
}

.dt__inner,
.ct__inner {
	position: relative;
	z-index: 1;
}

.dt .dt__head,
.ct .ct__head { color: var(--media-ink); }

.dt__lead { color: var(--media-ink-2); }

.dt__steps { margin-top: clamp(2rem, 5vw, 3.5rem); }

.dt__step {
	position: relative;
	overflow: hidden;
	padding: 0;
	border-top: 0;
	border-radius: 4px;
	background: var(--bg-2);
	border: 1px solid var(--line);
	transition: transform var(--mid) var(--ease-out), border-color var(--mid) var(--ease);
}

.dt__step:hover {
	transform: translateY(-4px);
	border-color: var(--line-2);
}

.dt__step img {
	display: block;
	width: 100%;
	height: clamp(10rem, 16vw, 14rem);
	object-fit: cover;
	filter: brightness(0.9);
	transition: transform 1.4s var(--ease-out);
}

.dt__step:hover img { transform: scale(1.06); }

.dt__step .dt__n,
.dt__step .dt__st,
.dt__step .dt__sp { padding-inline: 1.4rem; }

.dt__step .dt__n { display: block; margin-top: 1.2rem; }
.dt__step .dt__sp { padding-bottom: 1.4rem; }

.ct {
	position: relative;
	overflow: clip;
	isolation: isolate;
	background: var(--media-base);
}

.ct__portrait {
	margin: 0;
	overflow: hidden;
	border-radius: 4px;
}

.ct__portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 20%;
	transition: transform 1.6s var(--ease-out);
}

.ct__portrait:hover img { transform: scale(1.04); }

@media (min-width: 820px) {
	.ct__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr); }
}

.ct__facts { color: var(--media-ink); }
.ct__facts dd { color: var(--media-ink-2); }
.ct__facts a { color: var(--media-ink); }


/* ==========================================================================
   Галерия, За мен, Цени, Музика
   ========================================================================== */

/* Галерия ------------------------------------------------------------------ */

.ga {
	padding-block: clamp(3rem, 8vw, 6rem);
}

.ga__head {
	max-width: 46rem;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.ga__h {
	margin: 0.7rem 0 0.8rem;
	font-size: var(--t-4);
	line-height: 1.02;
	letter-spacing: -0.04em;
}

.ga__lead {
	margin: 0;
	font-size: var(--t-1);
	color: var(--ink-3);
	max-width: 48ch;
}

.ga__grid {
	display: grid;
	gap: clamp(0.5rem, 1.2vw, 1rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 26.5vw;
	grid-auto-flow: dense;
}

@media (min-width: 900px) {
	.ga__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: clamp(6rem, 11.6vw, 10.5rem);
	}
}

.ga__it {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 3px;
	background: var(--bg-3);
}

.ga__it--tall { grid-row: span 3; }

.ga__it--wide {
	grid-column: span 2;
	grid-row: span 2;
}

.ga__it video,
.ga__it img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.4s var(--ease-out);
}

.ga__it:hover video,
.ga__it:hover img { transform: scale(1.04); }

.ga__it::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	box-shadow: inset 0 0 0 0 var(--c-svatbi);
	transition: box-shadow 0.6s var(--ease);
}

.ga__it:hover::after {
	box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--c-svatbi) 70%, transparent);
}

.ga__it figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	overflow: hidden;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.82), transparent);
	color: #fff;
	font-family: var(--f-display);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
}

.ga__it figcaption span {
	display: block;
	padding: 2.2rem 1rem 0.9rem;
	transform: translateY(100%);
	transition: transform 0.6s var(--ease-out);
}

.ga__it:hover figcaption span { transform: none; }

.ga__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	margin: -25px 0 0 -25px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.32);
	color: #fff;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: opacity 0.5s var(--ease), transform 0.5s var(--ease-out);
}

.ga__it.is-playing .ga__play {
	opacity: 0;
	transform: scale(0.7);
}

.ga__tag {
	margin: clamp(3rem, 7vw, 5rem) 0 1.25rem;
	font-family: var(--f-display);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--c-svatbi);
}

/* За мен ------------------------------------------------------------------- */

.ab__hero {
	padding-block: clamp(3rem, 8vw, 6rem);
}

.ab__inner {
	display: grid;
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}

@media (min-width: 900px) {
	.ab__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

.ab__fig {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 4px;
}

.ab__fig img {
	display: block;
	width: 100%;
	height: clamp(24rem, 50vw, 38rem);
	object-fit: cover;
	object-position: 50% 15%;
	transition: transform 1.8s var(--ease-out);
}

.ab__fig:hover img { transform: scale(1.04); }

.ab__fig::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 90px 20px color-mix(in oklab, var(--c-svatbi) 16%, transparent);
	pointer-events: none;
}

.ab__h {
	margin: 0.7rem 0 1.2rem;
	font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4rem);
	line-height: 1.06;
	letter-spacing: -0.04em;
}

.ab__h em {
	font-style: normal;
	color: var(--c-svatbi);
}

.ab__txt p {
	margin: 0 0 1rem;
	font-size: var(--t-1);
	line-height: 1.75;
	color: var(--ink-2);
	max-width: 52ch;
}

.ab__facts {
	display: grid;
	gap: 1px;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	padding: 0;
	list-style: none;
	background: var(--line);
	border: 1px solid var(--line);
}

@media (min-width: 640px) { .ab__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ab__facts li {
	display: grid;
	gap: 0.25rem;
	padding: 1.25rem;
	background: var(--bg);
}

.ab__facts b {
	font-family: var(--f-display);
	font-size: var(--t-2);
	font-weight: 300;
	color: var(--c-svatbi);
}

.ab__facts span {
	font-size: var(--t--1);
	color: var(--ink-3);
}

.ab__shots {
	padding-block: 0 clamp(3rem, 8vw, 6rem);
}

.ab__shots ul {
	display: grid;
	gap: clamp(0.5rem, 1.2vw, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 760px) { .ab__shots ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ab__shots li {
	overflow: hidden;
	border-radius: 3px;
	aspect-ratio: 4 / 5;
}

.ab__shots img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 18%;
	transition: transform 1.4s var(--ease-out);
}

.ab__shots li:hover img { transform: scale(1.05); }

/* Цени --------------------------------------------------------------------- */

.pc {
	padding-block: clamp(3rem, 8vw, 6rem);
}

.pc__inner {
	display: grid;
	gap: clamp(2.5rem, 6vw, 5rem);
}

@media (min-width: 900px) {
	.pc__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

.pc__h {
	margin: 0.7rem 0 1rem;
	font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4rem);
	line-height: 1.06;
	letter-spacing: -0.04em;
}

.pc__h em { font-style: normal; color: var(--c-firmeni); }

.pc__lead {
	margin: 0;
	font-size: var(--t-1);
	line-height: 1.75;
	color: var(--ink-2);
	max-width: 48ch;
}

.pc__factors {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.pc__factors li {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	gap: 0.2rem 1.25rem;
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--line);
	transition: padding-left var(--mid) var(--ease);
}

.pc__factors li:hover { padding-left: 0.6rem; }

.pc__factors b {
	grid-row: span 2;
	font-family: var(--f-display);
	font-size: var(--t-2);
	font-weight: 300;
	color: var(--c-firmeni);
	font-variant-numeric: tabular-nums;
}

.pc__factors h2 {
	margin: 0;
	font-size: var(--t-1);
	font-weight: 600;
}

.pc__factors p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.65;
	color: var(--ink-3);
}

.pc__band {
	position: relative;
	display: grid;
	align-items: center;
	min-height: clamp(16rem, 32vw, 24rem);
	overflow: clip;
	isolation: isolate;
	text-align: center;
}

.pc__band > img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.7) saturate(1.05);
}

.pc__band::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: color-mix(in oklab, var(--media-base) 55%, transparent);
}

.pc__band p {
	position: relative;
	z-index: 2;
	max-width: 30ch;
	margin: 0 auto;
	font-size: var(--t-2);
	font-weight: 300;
	line-height: 1.3;
	color: var(--media-ink);
	text-wrap: balance;
}

/* Музика ------------------------------------------------------------------- */

.mu__hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: min(70svh, 40rem);
	padding-block: clamp(3rem, 8vw, 5rem);
	overflow: clip;
	isolation: isolate;
}

.mu__hero > img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.62) saturate(1.1);
}

.mu__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, var(--media-base) 4%, color-mix(in oklab, var(--media-base) 40%, transparent) 60%, transparent);
}

.mu__inner {
	position: relative;
	z-index: 2;
	color: var(--media-ink);
}

.mu__h {
	margin: 0.7rem 0 0.8rem;
	font-size: var(--t-4);
	line-height: 1.02;
	letter-spacing: -0.04em;
	max-width: 14ch;
}

.mu__lead {
	margin: 0;
	max-width: 46ch;
	font-size: var(--t-1);
	color: var(--media-ink-2);
}

.mu__rules {
	padding-block: clamp(3rem, 8vw, 6rem);
}

.mu__rules ol {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 860px) { .mu__rules ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mu__rules li {
	position: relative;
	overflow: hidden;
	display: grid;
	align-content: end;
	min-height: clamp(18rem, 26vw, 24rem);
	padding: clamp(1.4rem, 2.5vw, 1.9rem);
	border-radius: 4px;
	color: #fff;
}

.mu__rules img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.03);
	transition: transform 1.6s var(--ease-out);
}

.mu__rules li:hover img { transform: scale(1.1); }

.mu__rules li::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(8, 6, 10, 0.92) 12%, rgba(8, 6, 10, 0.35) 60%, rgba(8, 6, 10, 0.15));
}

.mu__rules b,
.mu__rules h2,
.mu__rules p { position: relative; z-index: 2; }

.mu__rules b {
	font-family: var(--f-display);
	font-size: var(--t-2);
	font-weight: 300;
	color: var(--c-tehnika);
}

.mu__rules h2 {
	margin: 0.3rem 0 0.4rem;
	font-size: var(--t-1);
}

.mu__rules p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.8);
}

/* Влизане при скрол за новото ---------------------------------------------- */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.alm__it,
		.alb li,
		.pol__it,
		.pop li,
		.hb__ch,
		.dt__step,
		.ga__it,
		.ab__facts li,
		.pc__factors li,
		.mu__rules li {
			animation: svc-in linear both;
			animation-timeline: view();
			animation-range: entry 8% entry 58%;
			animation-delay: calc(var(--i, 0) * -0.05s);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.po__bg img,
	.po__diagtrack,
	.al__quote > img {
		animation: none;
	}
}


/* ==========================================================================
   Разнообразието между страниците

   Пет оформления не стигат, за да изглеждат седемнайсет страници различно.
   Затова всяка услуга носи и свои „дялове": собствен акцентен цвят,
   вариант на героя, настроение на фона и стил на текстовите секции. Всичко
   това са класове върху корена на оформлението - самите секции не се
   променят.
   ========================================================================== */

/* Акцентът на страницата: --c идва от регистъра, не от канала. */
.svc-root[style*="--accent"] {
	--c: var(--accent);
}

/* Настроения на фона ------------------------------------------------------- */

.mood-warm {
	background:
		radial-gradient(70% 45% at 10% 20%, color-mix(in oklab, var(--c) 10%, transparent), transparent 62%),
		radial-gradient(60% 40% at 90% 80%, color-mix(in oklab, #ffb347 8%, transparent), transparent 64%);
}

.mood-cool {
	background:
		radial-gradient(70% 45% at 90% 15%, color-mix(in oklab, var(--c) 12%, transparent), transparent 62%),
		radial-gradient(60% 40% at 10% 85%, color-mix(in oklab, #3ad6e8 7%, transparent), transparent 64%);
}

.mood-grain {
	position: relative;
}

.mood-grain::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.35;
	background-image: radial-gradient(color-mix(in oklab, var(--ink) 9%, transparent) 0.5px, transparent 0.5px);
	background-size: 3px 3px;
}

.mood-grain > * {
	position: relative;
	z-index: 1;
}

.mood-lines {
	background-image: repeating-linear-gradient(
		0deg,
		transparent 0 7rem,
		color-mix(in oklab, var(--c) 7%, transparent) 7rem calc(7rem + 1px)
	);
}

/* Герои: варианти -----------------------------------------------------------
   Нощта: заглавието вляво долу (по подразбиране), в средата, или в дясно.
   Плакатът: контур+плътно (по подразбиране), плътно+контур, или само контур.
   Албумът: ветрило (по подразбиране), един голям кадър, или решетка 2×2.
   -------------------------------------------------------------------------- */

.nt--center .nt__inner { text-align: center; }
.nt--center .nt__lead { margin-inline: auto; }
.nt--center .nt__hero { align-items: center; }

.nt--right .nt__inner { text-align: right; }
.nt--right .nt__lead { margin-left: auto; }
.nt--right .nt__bg::after {
	background:
		radial-gradient(70% 60% at 80% 80%, color-mix(in oklab, var(--c) 32%, transparent), transparent 70%),
		linear-gradient(to top, var(--media-base) 4%, color-mix(in oklab, var(--media-base) 52%, transparent) 55%, color-mix(in oklab, var(--media-base) 25%, transparent));
}

.po--solid-first .po__h { display: flex; flex-direction: column-reverse; }

.po--outline-only .po__solid {
	color: transparent;
	-webkit-text-stroke: 2.5px var(--c);
	text-shadow: none;
}

.po--left .po__hero { text-align: left; }
.po--left .po__lead { margin-inline: 0; }
.po--left .po__inner > * { max-width: 44rem; }

.al--single .al__fan { height: auto; }
.al--single .al__card {
	position: static;
	width: 100%;
	transform: rotate(-1.5deg);
	padding-bottom: 0.6rem;
}
.al--single .al__card:not(:first-child) { display: none; }
.al--single .al__fan:hover .al__card { transform: rotate(0); }

.al--grid .al__fan {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.8rem;
	height: auto;
}
.al--grid .al__card {
	position: static;
	width: auto;
	padding: 0.5rem;
	transform: rotate(calc(var(--i) * 2deg - 2deg));
}
.al--grid .al__card:first-child { grid-column: span 2; }
.al--grid .al__card:first-child img { aspect-ratio: 16 / 9; }
.al--grid .al__fan:hover .al__card { transform: rotate(0); }

.pr--flip .pr__inner .pr__fig { order: -1; }
.sc--flip .sc__bg::after {
	background:
		linear-gradient(color-mix(in oklab, var(--c) 12%, transparent) 1px, transparent 1px) 0 0 / 100% 3rem,
		linear-gradient(90deg, color-mix(in oklab, var(--c) 12%, transparent) 1px, transparent 1px) 0 0 / 3rem 100%,
		linear-gradient(to left, var(--media-base) 8%, color-mix(in oklab, var(--media-base) 60%, transparent) 62%, color-mix(in oklab, var(--media-base) 32%, transparent));
}
.sc--flip .sc__inner { text-align: right; }
.sc--flip .sc__inner > * { margin-left: auto; }


/* ==========================================================================
   Разказът, включеното, причините
   ========================================================================== */

.st {
	position: relative;
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
	border-top: 1px solid var(--line);
	overflow: clip;
	isolation: isolate;
}

.st__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
}

.st__text {
	display: grid;
	gap: 1.25rem;
}

.st__p p {
	margin: 0;
	font-size: var(--t-0);
	line-height: 1.85;
	color: var(--ink-2);
}

.st__quote {
	margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
	padding-left: 1.25rem;
	border-left: 2px solid var(--c);
}

.st__quote p {
	margin: 0;
	font-family: var(--f-display);
	font-size: var(--t-2);
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--ink);
}

/* editorial: кадър отляво, две колони текст, първият абзац по-едър -------- */

@media (min-width: 900px) {
	.st--editorial .st__inner { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start; }
}

/* Втори такъв блок на същата страница обръща кадъра надясно. */
@media (min-width: 900px) {
	.st--editorial ~ .areas ~ .st--editorial .st__inner,
	.st--editorial + .areas + .st--editorial .st__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
	}

	.st--editorial + .areas + .st--editorial .st__side { order: 2; }

	/* Два текстови блока един под друг: вторият огледално. */
	.st--editorial + .st--editorial .st__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
	}

	.st--editorial + .st--editorial .st__side { order: 2; }
}

.st__side {
	margin: 0;
	overflow: hidden;
	border-radius: 3px;
}

/*
 * Кадърът се закача до текста само когато е в отделна колона. В една колона
 * (под 900px) закаченият кадър стоеше горе и текстът минаваше през него.
 */
@media (min-width: 900px) {
	.st--editorial .st__side {
		position: sticky;
		top: calc(var(--hdr-h) + 1.5rem);
	}
}

.st__side img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	filter: var(--svc-rest);
	transition: filter 0.9s var(--ease), transform 1.6s var(--ease-out);
}

.st__side:hover img { filter: var(--svc-on); transform: scale(1.04); }

@media (min-width: 760px) {
	.st--editorial .st__text { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
	.st--editorial .st__p:first-child { grid-column: 1 / -1; }
}

.st--editorial .st__p:first-child p {
	font-size: var(--t-1);
	line-height: 1.7;
	color: var(--ink);
}

/* magazine: широк кадър отгоре, тесен стълб с буквица ---------------------- */

.st__wide {
	margin: 0 0 clamp(2rem, 5vw, 3.5rem);
	overflow: hidden;
}

.st__wide img {
	display: block;
	width: 100%;
	height: clamp(16rem, 36vw, 30rem);
	object-fit: cover;
	filter: var(--svc-rest);
}

.st--magazine .st__inner { max-width: 48rem; }

.st--magazine .st__p:first-child p::first-letter {
	float: left;
	margin: 0.1em 0.2em 0 0;
	font-family: var(--f-display);
	font-size: 4.2em;
	font-weight: 700;
	line-height: 0.8;
	color: var(--c);
}

/* numbers: три номерирани блока един до друг ------------------------------- */

@media (min-width: 860px) {
	.st--numbers .st__text { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
}

.st--numbers .st__p {
	padding-top: 1.25rem;
	border-top: 1px solid var(--line-2);
}

.st--numbers .st__p b {
	display: block;
	margin-bottom: 0.8rem;
	font-family: var(--f-display);
	font-size: var(--t-3);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--c);
	font-variant-numeric: tabular-nums;
}

.st--numbers .svc__head { max-width: 40rem; margin-inline: auto; text-align: center; }

/* cards: абзаците на карти върху мек кадър --------------------------------- */

.st__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.st__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.55) saturate(1.05);
}

.st__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: color-mix(in oklab, var(--bg) 62%, transparent);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.st--cards .svc__head { max-width: 40rem; margin-inline: auto; text-align: center; }

@media (min-width: 860px) {
	.st--cards .st__text { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}

.st--cards .st__p {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border: 1px solid var(--line-2);
	border-radius: 4px;
	background: color-mix(in oklab, var(--bg-2) 80%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: transform var(--mid) var(--ease-out), border-color var(--mid) var(--ease);
}

.st--cards .st__p:hover {
	transform: translateY(-4px);
	border-color: color-mix(in oklab, var(--c) 50%, var(--line-2));
}

/* Включеното ---------------------------------------------------------------- */

.inc {
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
	border-top: 1px solid var(--line);
	background: var(--bg-2);
}

.inc__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* list: два стълба с отметка --------------------------------------------- */

@media (min-width: 760px) {
	.inc--editorial .inc__list,
	.inc--cards .inc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
}

.inc--editorial .inc__list li,
.inc--cards .inc__list li {
	position: relative;
	padding: 1.1rem 0 1.1rem 2.2rem;
	border-bottom: 1px solid var(--line);
}

.inc--editorial .inc__n,
.inc--cards .inc__n { display: none; }

.inc--editorial .inc__list li::before,
.inc--cards .inc__list li::before {
	content: "";
	position: absolute;
	left: 0.3rem;
	top: 1.45rem;
	width: 8px;
	height: 14px;
	border: solid var(--c);
	border-width: 0 2px 2px 0;
	transform: rotate(42deg);
}

/* tiles: шест плочки с индекс -------------------------------------------- */

.inc--magazine .inc__list { gap: 1px; background: var(--line); border: 1px solid var(--line); }

@media (min-width: 640px) { .inc--magazine .inc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .inc--magazine .inc__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.inc--magazine .inc__list li {
	padding: clamp(1.4rem, 2.5vw, 1.9rem);
	background: var(--bg);
	transition: background-color var(--mid) var(--ease);
}

.inc--magazine .inc__list li:hover { background: color-mix(in oklab, var(--c) 8%, var(--bg)); }

.inc--magazine .inc__n {
	display: block;
	margin-bottom: 0.7rem;
	font-family: var(--f-display);
	font-size: var(--t-2);
	font-weight: 300;
	color: var(--c);
	font-variant-numeric: tabular-nums;
}

/* ribbon: лента, която се плъзга настрани -------------------------------- */

.inc--numbers .inc__list {
	grid-auto-flow: column;
	grid-auto-columns: minmax(16rem, 1fr);
	gap: 1rem;
	overflow-x: auto;
	padding-bottom: 0.5rem;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.inc--numbers .inc__list li {
	scroll-snap-align: start;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border: 1px solid var(--line-2);
	border-radius: 4px;
	background: var(--bg);
}

.inc--numbers .inc__n {
	display: block;
	margin-bottom: 0.6rem;
	font-family: var(--f-display);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--c);
}

.inc__list h3 {
	margin: 0 0 0.35rem;
	font-size: var(--t-0);
	font-weight: 600;
}

.inc__list p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.65;
	color: var(--ink-3);
}

/* Подготовката --------------------------------------------------------------- */

.prep {
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
	border-top: 1px solid var(--line);
	background: var(--bg-2);
}

.prep__inner { max-width: 58rem; }

.prep__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

@media (min-width: 760px) {
	.prep__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
}

.prep__list li {
	display: grid;
	grid-template-columns: 2.4rem minmax(0, 1fr);
	gap: 1rem;
	padding-block: 1.2rem;
	border-bottom: 1px solid var(--line);
}

.prep__n {
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border: 1px solid var(--c);
	border-radius: 50%;
	font-family: var(--f-display);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--c);
}

.prep__list h3 {
	margin: 0 0 0.3rem;
	font-size: var(--t-0);
	font-weight: 600;
}

.prep__list p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.65;
	color: var(--ink-3);
}

/* Външната връзка в разказа - дискретна, но връзка. */
.st__p a {
	color: inherit;
	border-bottom: 1px solid color-mix(in oklab, var(--c) 60%, transparent);
	transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.st__p a:hover {
	color: var(--c);
	border-color: var(--c);
}

/* Водачът за избор ----------------------------------------------------------- */

.gd {
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
	border-top: 1px solid var(--line);
}

.gd__inner { max-width: 62rem; }

.gd__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

@media (min-width: 800px) {
	.gd--editorial .gd__list,
	.gd--magazine .gd__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
}

.gd__list li {
	position: relative;
	padding: 1.4rem 0 1.4rem 3.4rem;
	border-bottom: 1px solid var(--line);
}

.gd__n {
	position: absolute;
	left: 0;
	top: 1.5rem;
	font-family: var(--f-display);
	font-size: var(--t-1);
	font-weight: 300;
	letter-spacing: -0.03em;
	color: var(--c);
	font-variant-numeric: tabular-nums;
}

.gd__list h3 {
	margin: 0 0 0.4rem;
	font-size: var(--t-1);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.gd__list p {
	margin: 0;
	line-height: 1.75;
	color: var(--ink-3);
	max-width: 56ch;
}

/* Чести грешки ---------------------------------------------------------------- */

.mist {
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
	border-top: 1px solid var(--line);
	background: var(--bg-2);
}

.mist__inner { max-width: 58rem; }

.mist__list {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) {
	.mist__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.mist__list li {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--bg);
	transition: border-color var(--mid) var(--ease), transform var(--mid) var(--ease-out);
}

.mist__list li:hover {
	border-color: color-mix(in oklab, var(--c-partita) 45%, var(--line));
	transform: translateY(-3px);
}

/* Кръстче, нарисувано с два реда - знакът, че това е грешка. */
.mist__x {
	position: relative;
	display: block;
	width: 22px;
	height: 22px;
	margin-bottom: 0.9rem;
}

.mist__x::before,
.mist__x::after {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 22px;
	height: 2px;
	background: var(--c-partita);
}

.mist__x::before { transform: rotate(45deg); }
.mist__x::after  { transform: rotate(-45deg); }

.mist__list h3 {
	margin: 0 0 0.4rem;
	font-size: var(--t-0);
	font-weight: 600;
}

.mist__list p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--ink-3);
}

/* Покритие по градове --------------------------------------------------------- */

.areas {
	padding-block: clamp(3rem, 8vw, 5.5rem);
	border-top: 1px solid var(--line);
}

.areas__inner { max-width: 58rem; }

.areas__h {
	margin: 0 0 1rem;
	font-size: var(--t-2);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.areas__lead {
	margin: 0 0 1.75rem;
	line-height: 1.75;
	color: var(--ink-3);
	max-width: 60ch;
}

.areas__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.areas__list li {
	padding: 0.5rem 1rem;
	border: 1px solid var(--line-2);
	border-radius: var(--pill);
	font-family: var(--f-display);
	font-size: var(--t--1);
	color: var(--ink-2);
	transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease),
		transform var(--fast) var(--ease);
}

.areas__list li:hover {
	border-color: var(--c);
	color: var(--ink);
	transform: translateY(-2px);
}

.areas__note {
	margin: 0;
	font-size: var(--t--1);
	color: var(--ink-3);
}

/* Причините ----------------------------------------------------------------- */

.why {
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
	border-top: 1px solid var(--line);
}

.why__list {
	display: grid;
	gap: 1.5rem 3rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: why;
}

@media (min-width: 760px) {
	.why--editorial .why__list,
	.why--magazine .why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.why__list li {
	position: relative;
	padding-left: 3.4rem;
	counter-increment: why;
}

.why__list li::before {
	content: counter(why, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.1rem;
	font-family: var(--f-display);
	font-size: var(--t-2);
	font-weight: 300;
	letter-spacing: -0.04em;
	color: var(--c);
	font-variant-numeric: tabular-nums;
}

.why__list h3 {
	margin: 0 0 0.4rem;
	font-size: var(--t-1);
	font-weight: 600;
}

.why__list p {
	margin: 0;
	line-height: 1.7;
	color: var(--ink-3);
}

/* timeline: причините една под друга с нишка ------------------------------ */

.why--numbers .why__inner,
.why--cards .why__inner { max-width: 54rem; }

.why--numbers .why__list,
.why--cards .why__list {
	position: relative;
	gap: 0;
	padding-left: 0;
}

.why--numbers .why__list::before,
.why--cards .why__list::before {
	content: "";
	position: absolute;
	left: 1.05rem;
	top: 0.5rem;
	bottom: 0.5rem;
	width: 1px;
	background: linear-gradient(to bottom, var(--c), transparent);
}

.why--numbers .why__list li,
.why--cards .why__list li {
	padding: 0 0 2rem 3.6rem;
}

.why--numbers .why__list li::before,
.why--cards .why__list li::before {
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	top: -0.2rem;
	border: 1px solid var(--c);
	border-radius: 50%;
	background: var(--bg);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* Влизане при скрол -------------------------------------------------------- */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.st__p,
		.inc__list li,
		.why__list li,
		.gd__list li,
		.mist__list li,
		.areas__list li {
			animation: svc-in linear both;
			animation-timeline: view();
			animation-range: entry 8% entry 58%;
			animation-delay: calc(var(--i, 0) * -0.05s);
		}
	}
}

/* Страниците извън услугите: текстовият блок взема златото и цели кадри. */
.st:not(.svc-root .st) {
	--c: var(--c-svatbi);
	--svc-rest: grayscale(0.12) brightness(0.94) contrast(1.03);
	--svc-on: grayscale(0) brightness(1.06) saturate(1.14);
}

/* Текстовите секции на сватбената страница - на нейната хартия. */
body.is-svatbi {
	--c: var(--w-gold);
}

body.is-svatbi .st,
body.is-svatbi .inc,
body.is-svatbi .why,
body.is-svatbi .prep,
body.is-svatbi .gd,
body.is-svatbi .mist,
body.is-svatbi .areas {
	--svc-rest: none;
	--svc-on: none;
	--bg: var(--w-paper);
	--bg-2: var(--w-paper-2);
	--ink: var(--w-ink);
	--ink-2: var(--w-ink-2);
	--ink-3: var(--w-ink-3);
	--line: var(--w-rule);
	--line-2: var(--w-rule);
	--f-display: var(--f-serif);
}

/* В светлата тема акцентът пада на канала: каналните цветове са премерени
   за контраст върху светло, произволният акцент - не. */
:root[data-theme="light"] .svc-root.ch--svatbi  { --c: var(--c-svatbi); }
:root[data-theme="light"] .svc-root.ch--partita { --c: var(--c-partita); }
:root[data-theme="light"] .svc-root.ch--firmeni { --c: var(--c-firmeni); }
:root[data-theme="light"] .svc-root.ch--tehnika { --c: var(--c-tehnika); }


/* ==========================================================================
   Партньори
   ========================================================================== */

.pt__hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: min(56svh, 32rem);
	padding-block: clamp(3rem, 8vw, 5rem);
	overflow: clip;
	isolation: isolate;

	/* Върху кадър - светъл текст във всяка тема. */
	--media-base: #07070a;
	--media-ink: #ffffff;
	--media-ink-2: rgba(255, 255, 255, 0.84);
}

.pt__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.pt__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
	filter: brightness(0.55) saturate(1.05);
}

.pt__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--media-base) 4%, rgba(7, 7, 10, 0.68) 60%, rgba(7, 7, 10, 0.45));
}

.pt__inner {
	position: relative;
	z-index: 1;
	color: var(--media-ink);
}

.pt__h {
	margin: 0.7rem 0 0.8rem;
	font-size: var(--t-4);
	line-height: 1.02;
	letter-spacing: -0.04em;
}

.pt__lead {
	margin: 0;
	max-width: 52ch;
	font-size: var(--t-1);
	line-height: 1.7;
	color: var(--media-ink-2);
}

.pt {
	padding-block: clamp(3rem, 8vw, 6rem);
}

/* Картата на партньор ------------------------------------------------------- */

.ptc {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--bg-2);
	transition: border-color var(--mid) var(--ease);
}

.ptc + .ptc {
	margin-top: clamp(1rem, 2vw, 1.5rem);
}

.ptc:hover {
	border-color: var(--line-2);
}

@media (min-width: 860px) {
	.ptc { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); align-items: start; }
}

.ptc__side {
	display: grid;
	gap: 1.25rem;
	align-content: start;
}

/*
 * Логата на партньорите са направени за бял фон. На тъмна тема биха
 * изчезнали, затова всяко стои на своя светла плочка - така изглежда
 * еднакво и в трите теми.
 */
.ptc__logo {
	display: grid;
	place-items: center;
	padding: clamp(1.25rem, 3vw, 2rem);
	border-radius: 3px;
	background: #ffffff;
	transition: transform var(--mid) var(--ease-out), box-shadow var(--mid) var(--ease);
}

.ptc__logo:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.6);
}

.ptc__logo img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 15rem;
}

.ptc__meta {
	display: grid;
	gap: 0;
	margin: 0;
	border-top: 1px solid var(--line);
}

.ptc__meta > div {
	display: grid;
	gap: 0.15rem;
	padding-block: 0.8rem;
	border-bottom: 1px solid var(--line);
}

.ptc__meta dt {
	font-family: var(--f-display);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
}

.ptc__meta dd {
	margin: 0;
	font-size: var(--t--1);
	color: var(--ink-2);
}

.ptc__meta a {
	color: var(--ink-2);
	border-bottom: 1px solid var(--line-2);
	transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.ptc__meta a:hover {
	color: var(--c-svatbi);
	border-color: var(--c-svatbi);
}

.ptc__kind {
	margin: 0;
	font-family: var(--f-display);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--c-svatbi);
}

.ptc__name {
	margin: 0.5rem 0 0.6rem;
	font-size: var(--t-3);
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.ptc__claim {
	margin: 0 0 1.5rem;
	font-family: var(--f-display);
	font-size: var(--t-1);
	font-style: italic;
	font-weight: 300;
	color: var(--c-svatbi);
}

.ptc__p {
	margin: 0 0 1rem;
	line-height: 1.8;
	color: var(--ink-2);
	max-width: 62ch;
}

.ptc__sub {
	margin: 1.75rem 0 0.75rem;
	font-family: var(--f-display);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.ptc__offers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ptc__offers li {
	padding: 0.5rem 1rem;
	border: 1px solid var(--line-2);
	border-radius: var(--pill);
	font-size: var(--t--1);
	color: var(--ink-2);
	transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.ptc__offers li:hover {
	border-color: var(--c-svatbi);
	transform: translateY(-2px);
}

.ptc__cta {
	--tx: 0px;
	--ty: 0px;

	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1.75rem;
	padding: 1em 2em;
	border: 1px solid var(--c-svatbi);
	border-radius: var(--pill);
	font-family: var(--f-display);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
	transform: translate3d(var(--tx), var(--ty), 0);
	transition: transform 0.45s var(--ease-out), color var(--mid) var(--ease);
}

.ptc__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--c-svatbi);
	transform: translateX(-101%);
	transition: transform 0.5s var(--ease-out);
}

.ptc__cta:hover::before,
.ptc__cta:focus-visible::before { transform: none; }
.ptc__cta:hover, .ptc__cta:focus-visible { color: var(--bg); }
.ptc__cta > * { position: relative; z-index: 1; }

.ptc__cta svg { transition: transform var(--mid) var(--ease); }
.ptc__cta:hover svg { transform: translateX(4px); }

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.ptc,
		.ptc__offers li {
			animation: svc-in linear both;
			animation-timeline: view();
			animation-range: entry 8% entry 58%;
			animation-delay: calc(var(--i, 0) * -0.05s);
		}
	}
}

/* ==========================================================================
   Правните страници

   Съзнателно тиха типография: без снимки, без движение отвъд подчертаването
   на текущия дял. Мярка от 66 знака и списък с дяловете отляво, който стои
   на място при скрол.
   ========================================================================== */

.lg {
	padding-block: clamp(3rem, 8vw, 6rem) clamp(4rem, 10vw, 7rem);
}

.lg__head {
	max-width: 46rem;
	padding-bottom: clamp(2rem, 5vw, 3rem);
	border-bottom: 1px solid var(--line);
}

.lg__h {
	margin: 0.7rem 0 1rem;
	font-size: var(--t-4);
	line-height: 1.04;
	letter-spacing: -0.04em;
}

.lg__lead {
	margin: 0;
	font-size: var(--t-1);
	line-height: 1.75;
	color: var(--ink-2);
}

.lg__date {
	margin: 1.25rem 0 0;
	font-family: var(--f-display);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.lg__grid {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	margin-top: clamp(2.5rem, 6vw, 4rem);
}

@media (min-width: 960px) {
	.lg__grid { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); align-items: start; }
}

/* Списъкът с дяловете --------------------------------------------------- */

.lg__toc {
	align-self: start;
}

/* Същото като при текстовия блок: закача се само до текста, не над него. */
@media (min-width: 960px) {
	.lg__toc {
		position: sticky;
		top: calc(var(--hdr-h) + 1.5rem);
	}
}

.lg__tochead {
	margin: 0 0 1rem;
	font-family: var(--f-display);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.lg__toclist {
	display: grid;
	gap: 0.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.lg__toclist a {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	gap: 0.4rem;
	padding: 0.45rem 0.6rem 0.45rem 0;
	border-radius: 2px;
	font-size: var(--t--1);
	line-height: 1.45;
	color: var(--ink-2);
	transition: color var(--fast) var(--ease), padding-left var(--fast) var(--ease);
}

.lg__toclist a:hover,
.lg__toclist a:focus-visible {
	padding-left: 0.5rem;
	color: var(--c-svatbi);
}

.lg__tocn {
	font-family: var(--f-display);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--ink-3);
	transition: color var(--fast) var(--ease);
}

.lg__toclist a:hover .lg__tocn { color: var(--c-svatbi); }

/* Дяловете --------------------------------------------------------------- */

.lg__body {
	max-width: 42rem;
}

.lg__sec {
	padding-block: clamp(1.75rem, 4vw, 2.75rem);
	border-top: 1px solid var(--line);
	scroll-margin-top: calc(var(--hdr-h) + 2rem);
}

.lg__sec:first-child {
	border-top: 0;
	padding-top: 0;
}

.lg__n {
	margin: 0 0 0.35rem;
	font-family: var(--f-display);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	color: var(--c-svatbi);
}

.lg__sh {
	margin: 0 0 1.1rem;
	font-size: var(--t-2);
	line-height: 1.2;
	letter-spacing: -0.025em;
}

.lg__p {
	margin: 0 0 1rem;
	font-size: var(--t-0);
	line-height: 1.85;
	color: var(--ink-2);
}

.lg__p:last-child { margin-bottom: 0; }

.lg__list {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.6rem;
}

.lg__list li {
	position: relative;
	padding-left: 1.35rem;
	font-size: var(--t-0);
	line-height: 1.75;
	color: var(--ink-2);
}

.lg__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 0.5rem;
	height: 1px;
	background: var(--c-svatbi);
}

/* Картичката с контакта накрая ------------------------------------------ */

.lg__ask {
	margin-top: clamp(2rem, 5vw, 3rem);
	padding: clamp(1.5rem, 4vw, 2.25rem);
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--bg-2);
}

.lg__askh {
	margin: 0 0 0.4rem;
	font-size: var(--t-1);
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.lg__askp {
	margin: 0 0 1rem;
	font-size: var(--t--1);
	line-height: 1.7;
	color: var(--ink-2);
}

.lg__asklinks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	font-size: var(--t--1);
}

.lg__asklinks a {
	color: var(--ink);
	border-bottom: 1px solid var(--c-svatbi);
	transition: color var(--fast) var(--ease);
}

.lg__asklinks a:hover { color: var(--c-svatbi); }
.lg__asklinks span { color: var(--ink-3); }

/* Бележката под формата -------------------------------------------------- */

.djp-privacy {
	margin: 1.1rem 0 0;
	font-size: 0.76rem;
	line-height: 1.6;
	color: var(--media-ink-2, var(--ink-3));
}

.djp-privacy a {
	color: inherit;
	border-bottom: 1px solid currentColor;
	transition: opacity var(--fast) var(--ease);
}

.djp-privacy a:hover { opacity: 0.75; }

.ftr__legal {
	margin: 0;
}

.ftr__legal a {
	color: var(--muted);
	transition: color var(--fast) var(--ease);
}

.ftr__legal a:hover { color: var(--ink); }

/* Намереното при търсене ---------------------------------------------------- */

.srch__list {
	display: grid;
	gap: 0;
	margin: clamp(2rem, 5vw, 3rem) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
	text-align: left;
}

.srch__it {
	border-bottom: 1px solid var(--line);
}

.srch__it a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.35rem 1rem;
	padding: 1.1rem 0.25rem;
	transition: padding-left var(--mid) var(--ease), color var(--fast) var(--ease);
}

.srch__it a:hover,
.srch__it a:focus-visible {
	padding-left: 0.9rem;
	color: var(--c-svatbi);
}

.srch__t {
	font-family: var(--f-display);
	font-size: var(--t-1);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.25;
}

.srch__u {
	grid-column: 1;
	font-size: var(--t--1);
	color: var(--ink-3);
}

.srch__it svg {
	grid-row: 1 / span 2;
	grid-column: 2;
	opacity: 0.5;
	transition: transform var(--mid) var(--ease), opacity var(--fast) var(--ease);
}

.srch__it a:hover svg {
	opacity: 1;
	transform: translateX(4px);
}

/* Целите за пръст ---------------------------------------------------------- */

/*
 * Чиповете за повод стоят плътно един до друг и са към 37 px високи. На
 * мишка това е точност от само себе си; с палец сгрешеният чип значи погрешно
 * запитване. Само при груб посочващ уред - на мишка формата остава събрана.
 */
@media (pointer: coarse) {
	.gl__o,
	.tc__o {
		min-height: 44px;
	}

	.gl__o span,
	.tc__o span {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
}

/* ==========================================================================
   Грамотата
   ========================================================================== */

.aw {
	padding-block: clamp(3rem, 8vw, 5.5rem);
	border-top: 1px solid var(--line);
}

.aw__inner {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
}

@media (min-width: 900px) {
	.aw__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

.aw__shot {
	margin: 0;
	overflow: hidden;
	border-radius: 4px;
	border: 1px solid var(--line);
}

.aw__shot img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	filter: var(--svc-rest, none);
	transition: filter 0.8s var(--ease), transform 1.4s var(--ease-out);
}

.aw__shot:hover img { filter: none; transform: scale(1.03); }

.aw__tag {
	margin: 0 0 0.6rem;
	font-family: var(--f-display);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--c-svatbi);
}

.aw__h {
	margin: 0 0 1.1rem;
	font-size: var(--t-2);
	line-height: 1.15;
	letter-spacing: -0.03em;
}

.aw__p {
	margin: 0 0 1rem;
	line-height: 1.8;
	color: var(--ink-2);
	max-width: 54ch;
}

.aw__q {
	margin: 1.25rem 0;
	padding-left: 1.1rem;
	border-left: 2px solid var(--c-svatbi);
}

.aw__q p {
	margin: 0;
	font-family: var(--f-display);
	font-size: var(--t-1);
	font-style: italic;
	font-weight: 300;
	line-height: 1.45;
	color: var(--ink);
}

.aw__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 clamp(1.5rem, 4vw, 3rem);
	margin: 1.75rem 0 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--line);
}

.aw__meta dt {
	font-family: var(--f-display);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.aw__meta dd {
	margin: 0.2rem 0 0;
	font-size: var(--t--1);
	color: var(--ink-2);
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.aw__shot,
		.aw__body {
			animation: svc-in linear both;
			animation-timeline: view();
			animation-range: entry 8% entry 55%;
		}
	}
}

/* Надписи върху снимка ------------------------------------------------------

   Тези няколко елемента стоят направо върху кадър, чиято светлина не се знае
   предварително. Номерът на плочката се чете над тъмен ъгъл и изчезва над
   светъл. Лека сянка в цвета на фона ги прави четими навсякъде, без да им
   сменя вида. */

.kit__n,
.mtr__pct,
.nt__kicker {
	text-shadow:
		0 1px 2px rgba(7, 7, 10, 0.55),
		0 2px 12px rgba(7, 7, 10, 0.45);
}

/* ==========================================================================
   Сезонните партита

   Слайдерът в началото (.sh) и секцията на началната (.ss). Слайдерът е
   стъклена плоча до заглавието: взема цветовете на темата, защото сцената
   е светла на светла тема и тъмна на тъмна.
   ========================================================================== */

.sh {
	position: relative;
	max-width: 26rem;
	margin-top: clamp(1.5rem, 4vh, 2.5rem);
	padding: 1.15rem 1.35rem 1rem;
	border-radius: var(--r-lg);
	border: 1px solid var(--line-2);
	background: color-mix(in oklab, var(--bg) 66%, transparent);
	color: var(--ink);
	box-shadow: 0 30px 70px -44px rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(22px) saturate(1.4);
	-webkit-backdrop-filter: blur(22px) saturate(1.4);
}

.sh__tag {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.85rem;
	font-family: var(--f-display);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.sh__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--c-svatbi);
	box-shadow: 0 0 0 0 color-mix(in oklab, var(--c-svatbi) 55%, transparent);
	animation: sh-pulse 2.4s ease-out infinite;
}

@keyframes sh-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--c-svatbi) 55%, transparent); }
	70%  { box-shadow: 0 0 0 9px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/* Всички слайдове лежат в една и съща клетка: така плочата държи
   височината на най-високия и не подскача при смяна. */
.sh__track {
	display: grid;
}

.sh__slide {
	grid-area: 1 / 1;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.55s var(--ease), transform 0.55s var(--ease-out);
	pointer-events: none;
}

.sh__slide.is-on {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.sh__when {
	display: inline-block;
	margin-bottom: 0.55rem;
	padding: 0.28rem 0.65rem;
	border: 1px solid color-mix(in oklab, var(--sa) 55%, transparent);
	border-radius: var(--pill);
	font-family: var(--f-display);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sa);
}

.sh__h {
	margin: 0 0 0.35rem;
	font-size: var(--t-1);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.sh__h a {
	color: var(--ink);
	transition: color var(--fast) var(--ease);
}

.sh__h a:hover { color: var(--sa); }

.sh__p {
	margin: 0 0 0.7rem;
	font-size: var(--t--1);
	line-height: 1.6;
	color: var(--ink-2);
}

.sh__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--f-display);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sa);
	border-bottom: 1px solid color-mix(in oklab, var(--sa) 45%, transparent);
	padding-bottom: 2px;
	transition: border-color var(--fast) var(--ease);
}

.sh__link:hover { border-color: var(--sa); }
.sh__link svg { transition: transform var(--mid) var(--ease); }
.sh__link:hover svg { transform: translateX(3px); }

.sh__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 0.9rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--line);
}

.sh__btn {
	width: 30px;
	height: 30px;
	border: 1px solid var(--line-2);
	border-radius: 50%;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--ink-2);
	transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.sh__btn:hover { border-color: var(--ink); color: var(--ink); }

.sh__dots {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sh__dots button {
	width: 22px;
	height: 22px;
	padding: 0;
	position: relative;
}

.sh__dots button::before {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	width: 6px;
	height: 6px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--ink-3);
	transition: background-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.sh__dots button[aria-current="true"]::before {
	background: var(--c-svatbi);
	transform: translate(-50%, -50%) scale(1.5);
}

/* На широк екран плочата застава вдясно от заглавието, долу. */
@media (min-width: 1100px) {
	.stage__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
		column-gap: clamp(2rem, 4vw, 4rem);
		align-content: end;
	}

	.sh {
		grid-column: 2;
		grid-row: 1 / span 4;
		align-self: end;
		justify-self: end;
		margin-top: 0;
	}
}

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

/*
 * На светла тема плочата е светла, а сезонните акценти (оранжево, червено,
 * злато) са направени за тъмен фон и избледняват до 1.8:1. Затъмняват се с
 * черно, за да се четат; на тъмна и клубна тема остават както са.
 */
:root[data-theme="light"] .sh__when,
:root[data-theme="light"] .sh__link,
:root[data-theme="light"] .sh__h a:hover,
:root[data-theme="light"] .ss__when,
:root[data-theme="light"] .ss__link,
:root[data-theme="light"] .ss__t a:hover {
	color: color-mix(in oklab, var(--sa) 52%, #17140f);
}

:root[data-theme="light"] .sh__when,
:root[data-theme="light"] .ss__when {
	border-color: color-mix(in oklab, var(--sa) 60%, #17140f);
}

:root[data-theme="light"] .sh__link {
	border-bottom-color: color-mix(in oklab, var(--sa) 60%, #17140f);
}

:root[data-theme="light"] .sh__tag {
	color: var(--ink-2);
}

/* Секцията на началната ----------------------------------------------------- */

.ss {
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
	border-top: 1px solid var(--line);
}

.ss__head {
	max-width: 52rem;
	margin-bottom: clamp(2rem, 5vw, 3rem);
}

.ss__h {
	margin: 0.6rem 0 0.9rem;
	font-size: var(--t-3);
	line-height: 1.08;
	letter-spacing: -0.035em;
}

.ss__lead {
	margin: 0;
	font-size: var(--t-0);
	line-height: 1.75;
	color: var(--ink-2);
}

.ss__grid {
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

@media (min-width: 900px) {
	.ss__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ss__card {
	display: grid;
	grid-template-rows: auto 1fr;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--bg-2);
	transition: border-color var(--mid) var(--ease), transform var(--mid) var(--ease-out);
}

.ss__card:hover {
	border-color: color-mix(in oklab, var(--sa) 55%, var(--line));
	transform: translateY(-3px);
}

.ss__shot {
	display: block;
	overflow: hidden;
}

.ss__shot img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	filter: var(--svc-rest, none);
	transition: filter 0.8s var(--ease), transform 1.4s var(--ease-out);
}

.ss__card:hover .ss__shot img {
	filter: none;
	transform: scale(1.04);
}

.ss__body {
	display: grid;
	align-content: start;
	gap: 0.5rem;
	padding: clamp(1.1rem, 2.5vw, 1.5rem);
}

.ss__when {
	justify-self: start;
	padding: 0.25rem 0.6rem;
	border: 1px solid color-mix(in oklab, var(--sa) 55%, transparent);
	border-radius: var(--pill);
	font-family: var(--f-display);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sa);
}

.ss__t {
	margin: 0.2rem 0 0;
	font-size: var(--t-1);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.ss__t a {
	color: var(--ink);
	transition: color var(--fast) var(--ease);
}

.ss__t a:hover { color: var(--sa); }

.ss__p {
	margin: 0;
	font-size: var(--t--1);
	line-height: 1.7;
	color: var(--ink-2);
}

.ss__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.5rem;
	font-family: var(--f-display);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sa);
}

.ss__link svg { transition: transform var(--mid) var(--ease); }
.ss__link:hover svg { transform: translateX(3px); }

.ss__foot {
	margin: clamp(1.5rem, 4vw, 2.25rem) 0 0;
	font-size: var(--t--1);
	color: var(--ink-3);
}

.ss__foot a {
	margin-left: 0.4rem;
	color: var(--ink);
	border-bottom: 1px solid var(--c-svatbi);
	transition: color var(--fast) var(--ease);
}

.ss__foot a:hover { color: var(--c-svatbi); }

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.ss__card {
			animation: svc-in linear both;
			animation-timeline: view();
			animation-range: entry 8% entry 55%;
			animation-delay: calc(var(--i, 0) * -0.06s);
		}
	}
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */

.ftr {
	border-top: 1px solid var(--line);
	background: var(--bg-2);
	padding-block: clamp(3rem, 6vw, 5rem) 1.5rem;
	margin-top: clamp(4rem, 8vw, 7rem);
}

.ftr__grid {
	display: grid;
	gap: 2.25rem 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.ftr__grid > div:first-child {
	grid-column: 1 / -1;
	max-width: 34ch;
}

@media (min-width: 900px) {
	.ftr__grid {
		grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr));
	}

	.ftr__grid > div:first-child {
		grid-column: auto;
	}
}

.ftr__about {
	font-size: var(--t--1);
	color: var(--muted);
	margin-top: 0.9rem;
}

.ftr__head {
	font-family: var(--f-display);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 0.8rem;
}

.ftr__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.45rem;
}

.ftr__list a,
.ftr__list span {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: var(--t--1);
	color: var(--muted);
	transition: color var(--fast) var(--ease);
}

.ftr__list a:hover {
	color: var(--ink);
}

.ftr__list svg {
	flex: none;
	opacity: 0.55;
}

.ftr__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
	font-size: var(--t--1);
	color: var(--muted);
}

.ftr__bottom ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* --------------------------------------------------------------------------
   18. Движение и достъпност
   -------------------------------------------------------------------------- */

/*
 * Панелите влизат един след друг, отдолу нагоре - сцената се пали канал по
 * канал. Стъпката е 65 ms: достатъчно да се усети, твърде малко да се чака.
 */
.mega.is-open .ch {
	animation: ch-in 0.55s var(--ease-out) backwards;
	animation-delay: calc(var(--i) * 65ms);
}

@keyframes ch-in {
	from {
		opacity: 0;
		transform: translateY(26px);
		clip-path: inset(0 0 100% 0);
	}
	to {
		opacity: 1;
		transform: none;
		clip-path: inset(0 0 0 0);
	}
}

.mega.is-open .mega__bar {
	animation: bar-in 0.5s var(--ease-out) 0.3s backwards;
}

/*
 * Мобилният лист влиза по същия ритъм - редовете се палят един след друг,
 * отгоре надолу. Стъпката е малко по-голяма от десктопната (80 ms), защото
 * на телефон движението се вижда отблизо и бърз каскаден ефект дразни.
 */
.sheet.is-open .sheet__ch,
.sheet.is-open .sheet__list > li {
	animation: sheet-in 0.5s var(--ease-out) backwards;
	animation-delay: calc(var(--i, 4) * 80ms);
}

.sheet.is-open .sheet__list > li {
	animation-delay: calc(360ms + var(--i, 0) * 45ms);
}

.sheet.is-open .sheet__foot {
	animation: bar-in 0.45s var(--ease-out) 0.55s backwards;
}

@keyframes sheet-in {
	from {
		opacity: 0;
		transform: translateY(22px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes bar-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/* Бягащата лента и еквалайзерът нямат смисъл без движение - спират. */
	.strip__track,
	.strip::before,
	.ch__eq i {
		animation: none !important;
	}
}