/* Общие стили */
*{box-sizing:border-box /* включать padding и border в ширину/высоту элемента */}

:root{
	/* fluid spacing: min, preferred (vw), max */
	--page-max-width:1100px; /* ограничение ширины контента */
	--header-vertical-padding: clamp(12px, 1.2vw, 36px); /* вертикальные отступы шапки */
	--header-horizontal-padding: clamp(12px, 2.2vw, 64px); /* горизонтальные отступы шапки */
	--panel-gap-side: clamp(8px, 1.2vw, 24px); /* отступ панели от краёв */
	--panel-height: clamp(64px, 6.4vw, 120px); /* высота панели */
	--logo-height: clamp(40px, 4.5vw, 90px); /* высота логотипа */
	--nav-gap: clamp(12px, 3vw, 64px); /* расстояние между пунктами навигации */
}

/* Подключение локального шрифта */
@font-face{
	font-family: 'MultiroundPro'; /* имя локального шрифта */
	src: url('/media/fonts/MultiroundPro.otf') format('opentype'); /* путь к файлу */
	font-weight: 400 700; /* поддерживаемые веса */
	font-style: normal; /* стиль шрифта */
	font-display: swap; /* поведение загрузки шрифта */
}

body{font-family:'MultiroundPro', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; /* семейство шрифтов */ 
	margin:0 /* убрать отступы браузера */; 
	background:#fff /* фон страницы */}
body{font-family:'MultiroundPro', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; /* повторное объявление для совместимости */ 
	margin:0; 
	background:#fff; 
	min-height:100vh /* минимум высоты окна */;
	/* reserve space for fixed header to avoid overlap; add logo height to be safe */
	padding-top: calc(var(--panel-height) + var(--logo-height) + 12px);
}
/* Шапка */
/* Фон шапки теперь растягивается на всю ширину страницы */
.site-header{
	background:#de582f /* фон шапки */;
	padding:var(--header-vertical-padding) var(--header-horizontal-padding) /* вертик./гориз. отступы */;
	border-radius:0 /* скругление */; 
	/* фиксируем шапку сверху, чтобы она не накрывалась и не позволяла контенту подлезать */
	position:fixed;
	top:0;
	left:0;
	right:0;
	width:100%;
	box-shadow:0 1px 0 rgba(0,0,0,0.06);
}
.header-inner{
	max-width:var(--page-max-width) /* ограничение ширины */;
	margin:0 auto /* центрирование */; 
	display:flex /* флекс-контейнер */; 
	align-items:center /* вертикальное выравнивание */; 
	justify-content:flex-start /* выравнивание слева */; 
	position:relative /* относительное позиционирование */}

.logo{display:flex /* логотип как флекс */; align-items:center /* выравнивание */}
.logo-img{
	height:clamp(36px,3.2vw,56px) /* адаптивная высота логотипа */;
	width:auto /* сохранять пропорции */; 
	display:block /* блочный элемент */; 
	max-width:160px /* ограничение по ширине */}
.logo{margin-right: clamp(12px,2.2vw,48px) /* отступ справа */}

.main-nav{
	flex:1 /* навигация занимает оставшееся пространство */;
	display:flex /* флекс-контейнер */; 
	justify-content:flex-start /* выравнивание элементов слева */}
.main-nav ul{
	list-style:none /* убрать маркеры списка */; 
	margin:0 /* убрать внешние отступы */; 
	padding:0 /* убрать внутренние отступы */; 
	display:flex /* горизонтальный список */; 
	gap:8px /* промежуток между пунктами */; 
	align-items:center /* вертикальное выравнивание */}
.main-nav a{
	color:#fff /* цвет ссылок */; 
	text-decoration:none /* убрать подчеркивание */; 
	font-weight:700 /* полужирный */; 
	font-size:clamp(14px,1.2vw,20px) /* адаптивный размер текста */; 
	text-transform:uppercase /* верхний регистр */; 
	display:block /* блочный элемент */; 
	text-align:left /* выравнивание */}

/* Ограничение ширины навигации: при очень широких экранах не растягивать пункты слишком широко */
.main-nav ul{max-width:calc(var(--page-max-width) - 220px) /* ограничение ширины */}

/* Чтобы логотип выглядел как на скриншоте — белый текст внутри оранжевого блока (контраст с фоном) */
.logo{background:transparent /* прозрачный фон логотипа */}
.header-inner{
	position:relative /* относительное позиционирование */; 
	z-index:auto /* не создавать дополнительный контекст */}

/* Перекрытие навигации на фоне */
.main-nav{display:flex /* флекс-контейнер */; align-items:center /* центрирование по вертикали */}
.main-nav a{color:#fff /* явный цвет ссылок */}

/* Адаптив */
@media (max-width:900px){
  :root{ --panel-height: clamp(64px,6vw,100px) /* уменьшение высоты панели на узких экранах */; }
}


/* Очень маленькие экраны (до 320px) — вертикальное меню в шапке */
@media (max-width:320px) {
	.header-inner { 
	padding-left: 6px /* левый padding */; 
	padding-right: 8px /* правый padding */; 
	display:flex /* флекс для стека */; 
	flex-direction:column /* столбец */; 
	gap:12px /* промежуток */; 
	align-items:center /* центрирование */ }
	.logo-img { height: 40px /* высота логотипа на малых экранах */ }
	.main-nav ul { 
		display:flex /* вертикальный список */; 
		flex-direction:column /* столбец */;
		gap:10px /* промежуток */; 
		align-items:center /* центрирование */; 
		justify-content:center /* центрирование */; 
		width:100% /* растянуть */ }
	.main-nav a { 
		font-size: 20px /* крупный шрифт */;
		font-weight:800 /* очень жирный */; 
		text-align:center /* центрирование */; 
		display:block /* блочный элемент */; 
		padding:6px 0 /* вертикальные отступы */ }
}
@media (min-width:1000px){
	.logo{margin-left:-30px /* сдвиг логотипа влево на больших экранах */}
	.header-inner{padding-left:30px /* добавить отступ слева */}
}

@media (max-width:600px){
	.header-inner{
		flex-direction:column /* стекание */; 
		gap:12px /* промежуток */; 
		align-items:center /* центрирование */}
	.site-header::before{
		left:var(--panel-gap-side) /* позиция pseudo-элемента */;
		right:var(--panel-gap-side) /* позиция */;
		height:calc(var(--panel-height) + 20px) /* высота pseudo-элемента */}
	.main-nav ul{
		flex-wrap:wrap /* перенос пунктов */; 
		justify-content:center /* центрирование */;
		gap:12px /* промежуток */}
}

.site-footer {
			background: #000 /* фон футера */;
			color: #fff /* цвет текста футера */;
			padding: 40px var(--header-horizontal-padding) /* паддинги футера */;
			margin-top: auto /* при flex разметке отодвинуть футер вниз */;
	}

	.footer-inner {
			max-width: var(--page-max-width) /* ограничение ширины футера */;
			margin: 0 auto /* центрирование */;
			display: flex /* флекс-контейнер */;
			flex-direction: column /* столбец */;
			align-items: center /* центрирование */;
			gap: 24px /* промежуток */;
			text-align: center /* выравнивание текста */;
	}

	.footer-logo-img {
			height: 32px /* высота логотипа футера */;
			width: auto /* автоширина */;
	}

	.footer-copyright {
			font-size: 18px /* размер текста */;
			font-weight: 700 /* полужирный */;
	}

	.footer-contacts {
			display: flex /* флекс-контейнер */;
			flex-direction: column /* столбец */;
			gap: 16px /* промежуток */;
			align-items: center /* центрирование */;
	}

	.contact-item {
			display: flex /* строка с иконкой и текстом */;
			align-items: center /* выравнивание */;
			gap: 12px /* промежуток */;
	}

	.contact-icon {
			width: 24px /* ширина иконки */;
			height: 24px /* высота иконки */;
			object-fit: contain /* сохранять пропорции */;
	}

	.contact-item a {
			color: #fff /* цвет ссылок */;
			text-decoration: none /* убрать подчеркивание */;
			font-weight: 700 /* полужирный */;
			font-size: 16px /* размер текста */;
	}

	.footer-note {
			font-size: 14px /* размер заметки */;
			opacity: 0.8 /* прозрачность */;
	}

	@media (max-width: 600px) {
			.site-footer {
				padding: 32px 16px /* уменьшить паддинги */;
			}

			.footer-copyright {
				font-size: 16px /* уменьшить размер */;
			}

			.contact-item a {
				font-size: 14px /* уменьшить размер ссылок */;
			}

			.footer-note {
				font-size: 12px /* уменьшить размер заметки */;
			}
	}

/* Слайдер кейсов (CSS-only, радио-кнопки) */
.case-main{
	max-width:var(--page-max-width) /* ограничение ширины */; 
	margin:0 auto 40px /* только нижний отступ */; 
	padding:0 20px /* горизонтальные паддинги */}
.page-title{
	font-size:clamp(34px,6vw,64px) /* адаптивный размер заголовка */;
	text-align:center /* центрирование заголовка */; 
	margin:0 0 18px /* минимальные отступы */; 
	font-weight:800 /* очень жирный */}

/* Сделать заголовок приоритетным (не перекрываться слайдом на узких экранах) */
.page-title{position:relative; z-index:0}

.slideshow{
	position:relative /* позиционирование контейнера */; 
	display:block /* блочный элемент */}
.slideshow{z-index:0 /* слайдшоу ниже шапки по умолчанию */}
.slideshow input[type="radio"]{display:none /* скрываем радио-кнопки */}

.slides{
	position:relative /* контейнер с абсолютными слайдами */;
	 min-height:360px /* минимальная высота */;
	z-index:0 }

/* Добавим явный отступ между заголовком и слайдером — помогает избежать наложения на средних ширинах */
.page-title + .slideshow{ margin-top:14px }

@media (max-width:768px){
    .page-title + .slideshow{ margin-top:22px }
}
@media (max-width:425px){
    .page-title + .slideshow{ margin-top:18px }
}

/* Убираем transform (он сдвигает заголовок визуально, не меняя поток и вызывает перекрытия).
   Вместо этого используем margin-bottom у заголовка и margin-top у слайдшоу.
   Это корректно влияет на поток документа и не создаёт наложений. */
@media (min-width:426px) and (max-width:768px){
	.page-title{ transform:none; margin-bottom:22px }
	.page-title + .slideshow{ margin-top:12px }
}
@media (min-width:769px){
	.page-title{ transform:none; margin-bottom:28px }
	.page-title + .slideshow{ margin-top:16px }
}

/* Сделаем точки-индикаторы явно поверх футера/карточки */
.dots{ position:relative; z-index:60; margin-top:22px }
.slide{
	position:absolute /* абсолютное позиционирование для переходов */;
	inset:0 /* занять весь контейнер */;
	display:flex /* флекс центрирования */;
	align-items:center /* по вертикали */; 
	justify-content:center /* по горизонтали */; 
	opacity:0 /* скрыт по умолчанию */; 
	transform:translateX(30px) scale(.98) /* смещён и чуть уменьшен */; 
	transition:all .6s ease /* плавный переход */; 
	pointer-events:none /* запретить события */}
.slide{z-index:1}
.slide .card{
	background:#e1e1e1 /* фон карточки */;
	border-radius:24px /* скругление */; 
	padding:40px /* паддинги */; 
	/* не позволяем картинкам вылезать за карточку */
	overflow:hidden;
	max-width:720px /* макс ширина (уменьшено для лучшей вёрстки) */; 
	width:100% /* ширина 100% */; 
	box-shadow:0 2px 0 rgba(0,0,0,0.03) /* тонкая тень */}
.slide .slide-img{
	display:block /* блочный элемент */; 
 	margin:0 auto 18px auto /* центрирование и снизу отступ */; 
  	max-width:520px /* макс ширина изображения (уменьшено) */; 
 	width:60% /* относительная ширина */; 
 	height:auto /* авто высота */; 
 	border-radius:4px /* легкое скругление */;
 	/* ограничим высоту картинок чтобы они не вылезали за шапку */
 	max-height:56vh;
 	object-fit:cover;
}
.slide .card-body{padding:6px 18px 0 /* паддинги внутри карточки */}
.slide-title{font-size:clamp(28px,4vw,44px) /* адаптивный размер */; 
	margin:6px 0 8px /* отступы */; 
	font-weight:900 /* очень жирный */}
.slide-sub{font-size:14px /* размер подзаголовка */; 
	color:#6b6b6b /* цвет */; 
	letter-spacing:.06em /* интервал */}

/* Видимый слайд */
#s1:checked ~ .slides .s1,
#s2:checked ~ .slides .s2,
#s3:checked ~ .slides .s3{opacity:1 /* видимость */; 
	transform:translateX(0) scale(1) /* нормальное положение и масштаб */; 
	pointer-events:auto /* включить события */}

/* Кнопки управления (prev/next) — показываем соответствующие кнопки для каждой страницы */
.controls{
	position:absolute /* абсолютное позиционирование */;
	inset:0 /* занять весь контейнер */;
	height:100% /* высота 100% */;
	pointer-events:none /* по умолчанию не взаимодействуем */;
	z-index:6 /* слой над слайдами */;
}
.controls label{
	display:none /* скрывать по умолчанию */; 
 	position:absolute /* абсолютное позиционирование кнопок */; 
 	top:50% /* вертикальное центрирование */; 
 	transform:translateY(-50%) /* корректировка */; 
 	background:rgba(0,0,0,0.6) /* полупрозрачный фон */; 
 	color:#fff /* цвет иконки */; 
 	width:48px /* размер кнопки */; 
 	height:48px /* размер кнопки */; 
 	display:flex /* флекс для центрирования контента */; 
 	align-items:center /* центрирование */; 
 	justify-content:center /* центрирование */; 
 	border-radius:50% /* круглая кнопка */; 
 	font-size:28px /* размер иконки */; 
 	cursor:pointer /* указатель */; 
 	pointer-events:none;
 	opacity:0; /* скрыты по умолчанию, показываем через активное состояние */
 	visibility:hidden;
 	/* поверх карточки, чтобы было видно над содержимым */
 	z-index:120}
.controls .prev{left:12px /* позиция слева */}
.controls .next{right:12px /* позиция справа */}

#s1:checked ~ .controls .prev-1,
#s1:checked ~ .controls .next-1,
#s2:checked ~ .controls .prev-2,
#s2:checked ~ .controls .next-2,
#s3:checked ~ .controls .prev-3,
#s3:checked ~ .controls .next-3{
	display:flex /* показать кнопку */; 
	pointer-events:auto /* включить клики */;
	opacity:1; visibility:visible; /* анимационно показать */
	z-index:2147483648 !important; /* гарантированно поверх шапки, если нужно */
}

/* Точки-индикаторы */
.dots{display:flex /* контейнер точек */;
	gap:12px /* промежуток между точками */; 
	justify-content:center /* центрирование */; 
	margin-top:18px /* отступ сверху */}
.dot{width:12px /* размер точки */; 
	height:12px /* размер точки */; 
	border-radius:50% /* круг */; 
	background:#d0d0d0 /* цвет по умолчанию */; 
	cursor:pointer /* курсор */; 
	display:inline-block /* инлайн-блок */}
#s1:checked ~ .dots .dot:nth-of-type(1),
#s2:checked ~ .dots .dot:nth-of-type(2),
#s3:checked ~ .dots .dot:nth-of-type(3){background:#333 /* активная точка */}

/* Адаптив */
@media (max-width:900px){
	.slide .card{padding:24px /* уменьшенный паддинг */}
	.slide .slide-img{width:70% /* ширина изображения */}
}

@media (max-width:600px){
	.page-title{font-size:36px /* размер заголовка на мобил */}
	.slide .card{padding:18px /* padding карточки на мобил */}
	.slide .slide-img{width:100% /* изображение на всю ширину */}
	.slide .card{border-radius:16px /* меньшее скругление */}
	.controls label{
		width:40px/* ширина кнопки */;
		height:40px/* высота кнопки */;
		font-size:22px/* размер иконки */}
}

/* Точные контрольные точки для слайдшоу: 320, 425, 768, 1024, 1440 */
@media (max-width:320px){
	.case-main{padding:0 10px /* уменьшенные паддинги */}
	.page-title{
		font-size:28px /* уменьшенный заголовок */; 
		margin-bottom:18px /* отступ снизу */}
	.slides{min-height:300px /* уменьшенная высота */}
	.slide .card{padding:12px /* маленький padding */; 
		border-radius:12px /* уменьшенное скругление */; 
		max-width:300px /* ограничение ширины */}
	.slide .slide-img{
		width:100% /* полноразмерное изображение */; 
		margin-bottom:12px /* отступ снизу */}
	.slide-title{font-size:20px /* уменьшенный размер заголовка */}
	.slide-sub{font-size:12px /* уменьшенный подзаголовок */}
	.controls label{width:36px; height:36px; font-size:20px}
	.dots{gap:8px /* уменьшенный gap */}
}

@media (min-width:321px) and (max-width:425px){
	.case-main{padding:0 12px /* паддинги */}
	.page-title{font-size:32px /* размер заголовка */; margin-bottom:20px /* отступ */}
	.slides{min-height:340px /* высота */}
	.slide .card{padding:16px /* padding */; border-radius:14px /* скругление */; max-width:380px /* макс ширина */}
	.slide .slide-img{width:100% /* ширина картинки */; margin-bottom:14px /* отступ */}
	.slide-title{font-size:22px /* размер */}
	.slide-sub{font-size:13px /* размер */}
	.controls label{width:38px; height:38px; font-size:20px}
}

@media (min-width:426px) and (max-width:768px){
	.case-main{padding:0 18px /* паддинги */; margin-top:8px}
	.page-title{font-size:38px /* размер заголовка */; margin-bottom:14px}
	.slides{min-height:340px /* высота */}
	.slide .card{padding:20px /* padding */; max-width:600px /* макс ширина */; border-radius:18px}
	.slide .slide-img{width:65% /* ширина изображения */; margin-bottom:12px /* отступ */; max-height:40vh; object-fit:cover}
	.slide-title{font-size:26px /* размер */}
	.slide-sub{font-size:13px /* размер */}
	.controls label{width:44px; height:44px; font-size:24px}
	.controls .prev{ left:18px }
	.controls .next{ right:18px }
}

@media (min-width:769px) and (max-width:1024px){
	.case-main{padding:0 24px /* паддинги */; margin-top:12px}
	.page-title{font-size:44px /* размер заголовка */; margin-bottom:16px}
	.slides{min-height:380px /* высота */}
	.slide .card{padding:28px /* padding */; max-width:680px /* макс ширина */; border-radius:18px}
	.slide .slide-img{width:60% /* ширина изображения */; margin-bottom:10px; max-width:500px /* макс ширина */; max-height:45vh; object-fit:cover}
	.slide-title{font-size:32px /* размер */}
	.slide-sub{font-size:14px /* размер */}
	.controls label{width:48px; height:48px; font-size:26px}
}

@media (min-width:1025px) and (max-width:1440px){
	.case-main{padding:0 28px /* паддинги */}
	.page-title{font-size:56px /* размер заголовка */}
	.slides{min-height:480px /* высота */}
	.slide .card{padding:40px /* padding */; max-width:820px /* макс ширина (уменьшено) */}
	.slide .slide-img{width:56% /* ширина изображения */; max-width:560px /* макс ширина (уменьшено) */}
	.slide-title{font-size:40px /* размер */}
	.slide-sub{font-size:16px /* размер */}
	.controls label{width:54px; height:54px; font-size:28px}
}

@media (min-width:1441px){
	.case-main{padding:0 /* убрать паддинги на очень больших экранах */}
	.page-title{font-size:64px /* очень большой заголовок */}
	.slides{min-height:520px /* высота */}
	.slide .card{padding:48px /* padding */; max-width:900px /* макс ширина (уменьшено) */}
	.slide .slide-img{width:50% /* ширина изображения */; max-width:640px /* макс ширина (уменьшено) */}
}

/* Дополнительные правки: корректные отступы и позиции кнопок для промежуточных мобильных ширин */
@media (max-width:760px){
	/* Контент не перекрывается фиксированной шапкой */
	.case-main{ margin-top:8px }
	.slides{ margin-top:8px }

	/* Заголовок: четкие размеры + достаточный отступ */
	.page-title{ font-size:36px; margin-bottom:28px; font-weight:800 }

	/* Карточка: нормальные паддинги */
	.slide .card{ padding:20px; padding-bottom:50px; max-width:620px; border-radius:16px }
	.slide .slide-img{ width:75%; margin-bottom:8px; max-height:42vh; max-width:480px; object-fit:cover }

	/* Текст внутри карточки */
	.slide-title{ font-size:24px; font-weight:800; margin:8px 0 6px }
	.slide-sub{ font-size:12px; color:#666 }

	/* Контролы */
	.controls{ pointer-events:auto }
	.controls label{ z-index:900; width:42px; height:42px; font-size:22px }
	.controls .prev{ left:14px }
	.controls .next{ right:14px }

	/* Точки-индикаторы */
	.dots{ margin-top:12px; z-index:80; position:relative; gap:10px }
}

@media (max-width:425px){
	/* margin-top уже задан выше (8px или 12px) */
	.case-main{ margin-top:4px; padding:0 12px }
	.slides{ margin-top:4px }

	/* Заголовок: мобильный размер */
	.page-title{ font-size:32px; margin-bottom:12px; margin-top:2px }

	/* Карточка: компактнее */
	.slide .card{ padding:16px; padding-bottom:50px; border-radius:14px; max-width:360px }
	.slide .slide-img{ width:90%; max-height:38vh; margin-bottom:8px }

	/* Текст */
	.slide-title{ font-size:20px; margin:6px 0 4px }
	.slide-sub{ font-size:11px }

	/* Контролы */
	.controls label{ z-index:1000; width:40px; height:40px; font-size:20px }
	.controls .prev{ left:10px }
	.controls .next{ right:10px }

	/* Точки */
	.dots{ margin-top:10px; z-index:90; gap:8px }
}

/* На очень узких экранах шапка становится частью потока, чтобы её вертикальное меню
   не перекрывало контент. Убираем резервирование места у body и поднимаем z-index
   кнопок слайдера над шапкой при необходимости. */
@media (max-width:600px){
	.site-header{ position:relative; z-index:1000 !important; }
	body{ padding-top: 0; }
	/* Если кнопки всё ещё должны быть поверх (например, при абсолютном позиционировании внутри слайдера) */
	.controls label{ z-index:1100 !important; }
}