/* Общие стили */
*{box-sizing:border-box /* include padding/border in element size */}

: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 /* минимум высоты окна */; 
	display:flex /* flex layout */; 
	flex-direction:column /* колоночный порядок */}


/* Шапка */
/* Фон шапки теперь растягивается на всю ширину страницы */
.site-header{
	background:#de582f /* фон шапки */;
	padding:var(--header-vertical-padding) var(--header-horizontal-padding) /* вертик./гориз. отступы */;
	border-radius:0 /* без скругления */; 
	position:relative /* относительное позиционирование */; 
	z-index:3 /* слой над контентом */}
.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:1 /* слой внутреннего контейнера */}

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

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



@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 layout */;
	}

	.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 /* уменьшить размер заметки */;
			}
	}

/* Основной контент страницы контактов */
.contacts-main {
	flex: 1 /* растянуть контент */;
	padding: clamp(32px, 5vw, 80px) var(--header-horizontal-padding) /* адаптивные паддинги */;
}

.container {
	max-width: var(--page-max-width) /* ограничение ширины контейнера */;
	margin: 0 auto /* центрирование */;
}

.page-title {
	font-size: clamp(32px, 5vw, 64px) /* адаптивный размер заголовка */;
	font-weight: 700 /* полужирный */;
	text-align: center /* центрирование */;
	margin: 0 0 clamp(32px, 5vw, 64px) 0 /* отступы */;
	text-transform: uppercase /* верхний регистр */;
	color: #000 /* цвет текста */;
}

/* Интро секция */
.intro-section {
	background: #f5f5f5 /* фон интро */;
	padding: clamp(24px, 4vw, 48px) /* адаптивные паддинги */;
	border-radius: 16px /* скругление */;
	margin-bottom: clamp(32px, 5vw, 64px) /* отступ снизу */;
}

.intro-text {
	font-size: clamp(16px, 2vw, 24px) /* адаптивный размер */;
	line-height: 1.6 /* высота строки */;
	text-align: center /* центрирование */;
	margin: 0 /* убрать внешние отступы */;
	font-weight: 600 /* вес шрифта */;
	text-transform: uppercase /* верхний регистр */;
}

.intro-text:not(:last-child) {
	margin-bottom: clamp(16px, 2vw, 24px) /* отступ между параграфами */;
}

.email-highlight {
	color: #de582f /* акцентный цвет для email */;
	font-weight: 700 /* полужирный */;
}

/* Секция руководства */
.management-section {
	margin-bottom: clamp(32px, 5vw, 64px) /* отступ снизу */;
}

.section-title {
	font-size: clamp(24px, 3.5vw, 48px) /* адаптивный размер */;
	font-weight: 700 /* полужирный */;
	text-align: center /* центрирование */;
	margin: 0 0 clamp(40px, 5vw, 64px) 0 /* отступы */;
	text-transform: uppercase /* верхний регистр */;
	color: #000 /* цвет текста */;
}

.accent-text {
	color: #de582f /* акцентный цвет */;
}

/* Сетка контактов */
.contacts-grid {
	display: flex /* использовать flex для списка карточек */;
	;
	flex-direction: column /* столбец */;
	gap: clamp(24px, 4vw, 48px) /* адаптивный gap */;
}

.contact-card {
	background: #f0f0f0 /* фон карточки */;
	border-radius: 24px /* скругление */;
	padding: clamp(24px, 4vw, 40px) /* адаптивные паддинги */;
	display: flex /* флекс-контейнер */;
	;
	flex-direction: row /* строка */;
	align-items: stretch /* растягивать по высоте */;
	gap: clamp(24px, 4vw, 48px) /* расстояние между блоками */;
	text-align: left /* левое выравнивание текста */;
}

/* Блок для фотографии */
.contact-photo {
	flex: 0 0 clamp(180px, 25vw, 280px) /* фиксированная ширина-флекс */;
	aspect-ratio: 1 /* квадратное соотношение */;
	border-radius: 16px /* скругление */;
	overflow: hidden /* обрезать содержимое */;
	display: flex /* флекс для центрирования изображения */;
	align-items: center /* центрирование по вертикали */;
	justify-content: center /* центрирование по горизонтали */;
}

.contact-photo img {
	width: 100% /* заполнить контейнер */;
	height: 100% /* заполнить контейнер */;
	object-fit: cover /* покрытие с обрезкой */;
	object-position: center /* центр изображения */;
}

/* Информация о контакте */
.contact-info {
	flex: 1 /* растянуть информацию */;
	display: flex /* флекс-контейнер */;
	;
	flex-direction: column /* столбец */;
	justify-content: center /* центрирование по вертикали */;
}

.contact-name {
	font-size: clamp(18px, 2.5vw, 28px) /* адаптивный размер имени */;
	font-weight: 700 /* полужирный */;
	margin: 0 0 clamp(12px, 1.5vw, 16px) 0 /* отступ снизу */;
	text-transform: uppercase /* верхний регистр */;
	color: #000 /* цвет */;
}

.contact-title {
	font-size: clamp(12px, 1.5vw, 16px) /* адаптивный размер должности */;
	font-weight: 600 /* вес текста */;
	margin: 0 0 clamp(12px, 1.5vw, 20px) 0 /* отступ снизу */;
	text-transform: uppercase /* верхний регистр */;
	color: #555 /* цвет */;
	line-height: 1.4 /* высота строки */;
}

.contact-email {
	font-size: clamp(13px, 1.2vw, 16px) /* адаптивный размер email */;
	font-weight: 700 /* полужирный */;
	margin: 0 0 clamp(8px, 1vw, 12px) 0 /* отступ снизу */;
	color: #de582f /* акцентный цвет */;
	word-break: break-all /* перенос длинных email */;
}

.contact-email a {
	color: #de582f /* цвет ссылки */;
	text-decoration: none /* убрать подчеркивание */;
	transition: opacity 0.2s ease /* плавный переход для opacity */;
}

.contact-email a:hover {
	opacity: 0.8 /* уменьшить непрозрачность при ховере */;
	text-decoration: underline /* подчеркнуть при ховере */;
}

.contact-social {
	font-size: clamp(13px, 1.2vw, 16px) /* размер соц-ссылок */;
	font-weight: 600 /* вес */;
	margin: 0 /* убрать отступы */;
	color: #000 /* цвет текста */;
}

.contact-social a {
	color: #000 /* цвет ссылки */;
	text-decoration: none /* убрать подчеркивание */;
	transition: opacity 0.2s ease /* плавный переход */;
}

.contact-social a:hover {
	opacity: 0.7 /* эффект при ховере */;
	text-decoration: underline /* подчеркнуть ссылку */;
}

/* Адаптив для мобильных 320px */
@media (max-width: 320px) {
	.contacts-main {
		padding: 16px 12px /* уменьшенные паддинги */;
	}

	.page-title {
		font-size: 22px /* размер заголовка на узких экранах */;
		margin-bottom: 16px /* отступ снизу */;
	}

	.intro-section {
		padding: 18px 14px /* паддинги интро */;
		margin-bottom: 24px /* отступ снизу */;
		border-radius: 14px /* скругление */;
	}

	.intro-text {
		font-size: 13px /* размер текста интро */;
		line-height: 1.5 /* высота строки */;
	}

	.intro-text:not(:last-child) {
		margin-bottom: 12px /* отступ между параграфами */;
	}

	.section-title {
		font-size: 20px /* размер заголовка секции */;
		margin-bottom: 20px /* отступ снизу */;
	}

	.contacts-grid {
		gap: 18px /* gap между карточками */;
	}

	.contact-card {
		flex-direction: column /* столбец на узких экранах */;
		padding: 18px 14px /* паддинги карточки */;
		gap: 14px /* промежуток между элементами */;
		text-align: center /* центрирование текста */;
		align-items: center /* центрирование элементов */;
		border-radius: 18px /* скругление */;
	}

	.contact-photo {
		flex: 0 0 120px /* фиксированная ширина */;
		width: 120px /* ширина */;
		height: 120px /* высота */;
		border-radius: 14px /* скругление */;
	}

	.contact-info {
		align-items: center /* центрирование информации */;
	}

	.contact-name {
		font-size: 17px /* размер имени */;
		margin-bottom: 8px /* отступ снизу */;
	}

	.contact-title {
		font-size: 12px /* размер должности */;
		margin-bottom: 8px /* отступ */;
	}

	.contact-email {
		font-size: 13px /* размер email */;
		margin-bottom: 6px /* отступ */;
	}

	.contact-social {
		font-size: 13px /* размер соц-ссылок */;
	}

	.main-nav a {
		font-size: 13px /* размер пунктов меню */;
	}

	.main-nav ul {
		gap: 12px /* gap в навигации */;
	}
}

/* Адаптив для планшетов 768px */
@media (min-width: 426px) and (max-width: 768px) {
	.contacts-main {
		padding: 32px 24px /* паддинги для планшетов */;
	}

	.page-title {
		font-size: 36px /* размер заголовка */;
		margin-bottom: 32px /* отступ */;
	}

	.intro-section {
		padding: 28px 24px /* паддинги */;
		margin-bottom: 40px /* отступ */;
		border-radius: 18px /* скругление */;
	}

	.intro-text {
		font-size: 16px /* размер текста */;
		line-height: 1.6 /* высота строки */;
	}

	.intro-text:not(:last-child) {
		margin-bottom: 16px /* промежуток между параграфами */;
	}

	.section-title {
		font-size: 28px /* размер заголовка секции */;
		margin-bottom: 32px /* отступ */;
	}

	.contacts-grid {
		gap: 32px /* больший gap */;
	}

	.contact-card {
		flex-direction: row /* строка на планшетах */;
		padding: 28px 24px /* паддинги */;
		gap: 20px /* промежуток */;
		text-align: left /* выравнивание */;
		align-items: stretch /* растянуть по высоте */;
		border-radius: 20px /* скругление */;
	}

	.contact-photo {
		flex: 0 0 180px /* фиксированная ширина */;
		width: 180px /* ширина */;
		height: 180px /* высота */;
		border-radius: 16px /* скругление */;
	}

	.contact-info {
		align-items: flex-start /* выравнивание информации слева */;
	}

	.contact-name {
		font-size: 20px /* размер имени */;
		margin-bottom: 12px /* отступ */;
	}

	.contact-title {
		font-size: 14px /* размер должности */;
		margin-bottom: 12px /* отступ */;
	}

	.contact-email {
		font-size: 14px /* размер email */;
		margin-bottom: 8px /* отступ */;
	}

	.contact-social {
		font-size: 14px /* размер соц-ссылок */;
	}

	.main-nav a {
		font-size: 15px /* размер меню */;
	}

	.main-nav ul {
		gap: 20px /* gap */;
	}
}

/* Адаптив для планшетов 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
	.contacts-main {
		padding: 40px 28px /* паддинги */;
	}

	.page-title {
		font-size: 44px /* размер заголовка */;
		margin-bottom: 40px /* отступ */;
	}

	.intro-section {
		padding: 32px 28px /* паддинги */;
		margin-bottom: 48px /* отступ */;
		border-radius: 20px /* скругление */;
	}

	.intro-text {
		font-size: 18px /* размер текста */;
		line-height: 1.6 /* высота строки */;
	}

	.intro-text:not(:last-child) {
		margin-bottom: 20px /* промежуток */;
	}

	.section-title {
		font-size: 36px /* размер секции */;
		margin-bottom: 40px /* отступ */;
	}

	.contacts-grid {
		gap: 40px /* увеличенный gap */;
	}

	.contact-card {
		flex-direction: row /* строка */;
		padding: 32px 28px /* паддинги */;
		gap: 24px /* промежуток */;
		text-align: left /* выравнивание */;
		align-items: stretch /* растянуть по высоте */;
		border-radius: 22px /* скругление */;
	}

	.contact-photo {
		flex: 0 0 220px /* фиксированная ширина */;
		width: 220px /* ширина */;
		height: 220px /* высота */;
		border-radius: 18px /* скругление */;
	}

	.contact-info {
		align-items: flex-start /* выравнивание */;
	}

	.contact-name {
		font-size: 22px /* размер имени */;
		margin-bottom: 14px /* отступ */;
	}

	.contact-title {
		font-size: 15px /* размер должности */;
		margin-bottom: 14px /* отступ */;
	}

	.contact-email {
		font-size: 15px /* размер email */;
		margin-bottom: 10px /* отступ */;
	}

	.contact-social {
		font-size: 15px /* размер соц */;
	}

	.main-nav a {
		font-size: 16px /* размер меню */;
	}

	.main-nav ul {
		gap: 28px /* gap */;
	}
}

/* Адаптив для десктопов 1440px */
@media (min-width: 1025px) {
	.contacts-main {
		padding: 48px 32px /* паддинги */;
	}

	.page-title {
		font-size: 52px /* размер заголовка */;
		margin-bottom: 48px /* отступ */;
	}

	.intro-section {
		padding: 40px 36px /* паддинги */;
		margin-bottom: 56px /* отступ */;
		border-radius: 24px /* скругление */;
	}

	.intro-text {
		font-size: 20px /* размер текста */;
		line-height: 1.7 /* высота строки */;
	}

	.intro-text:not(:last-child) {
		margin-bottom: 24px /* промежуток */;
	}

	.section-title {
		font-size: 44px /* размер секции */;
		margin-bottom: 48px /* отступ */;
	}

	.contacts-grid {
		gap: 48px /* большой gap */;
	}

	.contact-card {
		flex-direction: row /* строка */;
		padding: 36px 32px /* паддинги */;
		gap: 32px /* промежуток */;
		text-align: left /* выравнивание */;
		align-items: stretch /* растянуть */;
		border-radius: 24px /* скругление */;
	}

	.contact-photo {
		flex: 0 0 280px /* фиксированная ширина */;
		width: 280px /* ширина */;
		height: 280px /* высота */;
		border-radius: 20px /* скругление */;
	}

	.contact-info {
		align-items: flex-start /* выравнивание */;
	}

	.contact-name {
		font-size: 26px /* размер имени */;
		margin-bottom: 16px /* отступ */;
	}

	.contact-title {
		font-size: 16px /* размер должности */;
		margin-bottom: 16px /* отступ */;
	}

	.contact-email {
		font-size: 16px /* размер email */;
		margin-bottom: 12px /* отступ */;
	}

	.contact-social {
		font-size: 16px /* размер соц */;
	}

	.main-nav a {
		font-size: 18px /* размер меню */;
	}

	.main-nav ul {
		gap: 40px /* gap */;
	}
}