@charset 'utf-8';

:root {

	--gap-between: 80px;
	--gap-side: 10px;
	--max-width: 1800px;

	--color-red: #9C0001;
	--color-light: #fff;
	--color-dark: #000;

	--font-title: 'Manrope', serif;
	--font-text: 'Manrope', sans-serif;

}

[data-theme="light"] {
  color-scheme: light;
  --color-bg: var(--color-light);
  --color-bg-invert: var(--color-dark);
	--color-text: var(--color-dark);
	--color-text-invert: var(--color-light);
	--color-accent: var(--color-red);
	--color-gray: rgb(0 0 0 / .5);
}

[data-theme="dark"] {
	color-scheme: dark;
	--color-bg: #1D1D1D;
	--color-bg-invert: var(--color-light);
	--color-text: var(--color-light);
	--color-text-invert: var(--color-dark);
	--color-accent: var(--color-light);
	--color-gray: rgb(255 255 255 / .5);
}

@media (min-width: 414px) {
	:root {
		--gap-side: 15px;
	}
}

@media (min-width: 1200px) {
	:root {
		--gap-between: 150px;
		--gap-side: 20px;
	}
}

@media (min-width: 1400px) {
	:root {
		--gap-side: 30px;
	}
}

@media (min-width: 1900px) {
	:root {
		--gap-between: 200px;
		--gap-side: 60px;
	}
}

@layer reset {

	* {
		margin: 0;
		padding: 0;
		outline: none;
		-webkit-tap-highlight-color: transparent; /* Убирает выделение элемента при тапе */
	}
	*, ::before, ::after {
		box-sizing: border-box;
		background-repeat: no-repeat;
	}
	html {
	  scrollbar-gutter: stable; /* Резервирует место под скроллбар */
		text-size-adjust: none; /* Запретить автоматическое увеличение шрифта */
		-webkit-text-size-adjust: none;
		-webkit-overflow-scrolling: touch; /* Инерция скрола для iOS */
		-webkit-font-smoothing: antialiased; /* Делает шрифт более чистым */
		-moz-osx-font-smoothing: grayscale; /* аналог -webkit-font-smoothing для Firefox на macOS */
		scroll-behavior: smooth;
	}
	img, svg, picture, video, iframe {
		display: block;
		max-inline-size: 100%;
		max-block-size: 100%;
		width: auto;
	}
	table {
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;
	}
	code, pre {
		font-family: monospace, serif;
	}
	button {
		background: none;
		border: none;
		color: inherit;
	}
	button, input, select, textarea {
		font: inherit;
	}
	label {
		display: block;
	}
	label, button, input[type="file"] {
		cursor: pointer;
	}
	input[type="number"]::-webkit-outer-spin-button,
	input[type="number"]::-webkit-inner-spin-button {
		-webkit-appearance: none;
	}
	input[type="number"],
	input[type="number"]:hover,
	input[type="number"]:focus {
		appearance: none;
		-moz-appearance: textfield;
	}
	[disabled], :disabled {
		cursor: not-allowed;
	}
	a {
		color: inherit;
		text-decoration: none;
	}
	a:hover {
		color: currentColor;
	}

	@media (prefers-reduced-motion: reduce) {
		body * {
			animation: none !important;
			transition-duration: unset !important;
		}
	}

}

@layer text {

	body {
		font-size: 16px;
		font-family: var(--font-text);
		font-style: normal;
		font-weight: 400;
		color: var(--color-text);
		letter-spacing: -0.01em;
		background: var(--color-bg);
	}

	p a,
	.link {
		transition: all 300ms linear;
		text-decoration: underline;
		text-decoration-style: solid;
		text-underline-offset: 2px;
		text-decoration-thickness: 1px;
		text-decoration-color: oklch(from currentColor l c h / .5);
	}
	p a:hover,
	.link:hover {
		text-decoration-color: transparent;
	}
	ol, ul {
		padding-left: 30px;
	}
	li {
		margin: 0;
	}
	ol.none,
	ul.none {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	p, li {
		line-height: 1.4;
	}
	:where(p, ul, li):not(:first-child) {
		margin-top: 10px;
	}

	@media (min-width: 1400px) {
		body {
			font-size: 18px;
		}
	}

}

@layer h {

	:where(h1, h2, h3, .title) {
		font-weight: 500;
		font-family: var(--font-title);
		font-optical-sizing: auto;
		font-style: normal;
		line-height: normal;
	}
	:where(h1, h2, h3, .title) .accent {
		color: var(--color-accent);
	}
	:where(h1, h2, .title) {
		font-size: 30px;
	}
	h1.smaller {
		font-size: 25px;
	}
	.sideTitle {
		margin-bottom: 15px;
		font-size: 16px;
		font-weight: 400;
	}

	@media (max-width: 1023px) {
		.sideTitle br {
			display: none;
		}
	}

	@media (min-width: 1400px) {
		:where(h1, h2) {
			font-size: 35px;
		}
		.h1.smaller, h1.smaller {
			font-size: 30px;
		}
	}

	@media (min-width: 1600px) {
		.h1.smaller, h1.smaller {
			font-size: 35px;
		}
	}

}

@layer other {

	:has( > .inner) {
		padding-inline: var(--gap-side);
	}
	.inner {
		max-width: var(--max-width);
		margin-inline: auto;
	}

	.noscroll {
		overflow: hidden;
	}

	.visually-hidden {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
		clip: rect(0 0 0 0);
		overflow: hidden;
	}

	.fit {
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		object-fit: cover;
		object-position: center;
	}

	.hover {
		display: inline-block;
		position: relative;
	}
	.hover::before {
		content: '';
		display: block;
		width: 0;
		height: 1px;
		position: absolute;
		left: 0;
		bottom: 0;
		background: currentColor;
		transition: all 300ms ease-in-out;
	}
	.hover:hover::before {
		width: 100%;
	}

	.linkMore {
		position: relative;
		display: inline-block;
		margin-top: 10px;
		padding-left: 13px;
		font-size: 14px;
	}
	.linkMore::before {
		content: '';
		display: block;
		width: 8px;
		aspect-ratio: 1;
		position: absolute;
		top: 6px;
		left: 0;
		background: var(--color-text);
	}

	[hidden] {
		display: none !important;
	}

	picture:not([data-fancybox]):not(.swiper-slide) {
		pointer-events: none;
	}

	main:not(:first-child) {
		--from-top: 125px;
		display: grid;
		gap: var(--gap-between);
		margin-top: calc(var(--from-top) - var(--header-height));
	}

	main:has(.fullPromo:first-child),
	main:has(h1:first-child + .fullPromo) {
		margin-top: 0;
	}

	@media (min-width: 1200px) {
		main:not(:first-child) {
			--from-top: 200px;
		}
	}

}

@layer form {

	input,
	textarea,
	select {
		width: 100%;
		height: 50px;
		padding: 0 15px;
		background: #fff;
		border: 1px solid #8F8F8F;
	}
	textarea {
		overflow: auto;
		line-height: 1.1;
		min-height: 5.5em;
		resize: vertical;
		vertical-align: top;
	}

	[placeholder]::-webkit-input-placeholder { color: rgb(0 0 0 / .3); }
	[placeholder]:-ms-input-placeholder      { color: rgb(0 0 0 / .3); }
	[placeholder]::-moz-placeholder          { color: rgb(0 0 0 / .3); }
	[placeholder]:not(:empty)::-webkit-input-placeholder { opacity: 0; }
	[placeholder]:not(:empty):-ms-input-placeholder      { opacity: 0; }
	[placeholder]:not(:empty)::-moz-placeholder          { opacity: 0; }

	input.ui[type="radio"],
	input.ui[type="checkbox"] {
	  display: none;
	}
	input.ui[type="radio"] + span,
	input.ui[type="checkbox"] + span {
	  position: relative;
	  display: block;
	  padding: 0 0 0 26px;
	  font-size: smaller;
	  line-height: 16px;
	  color: var(--color-gray);
	}
	input.ui[type="radio"] + span::before,
	input.ui[type="radio"] + span::after,
	input.ui[type="checkbox"] + span::before,
	input.ui[type="checkbox"] + span::after {
	  content: '';
	  display: block;
	  position: absolute;
	  box-sizing: border-box;
	}
	input.ui[type="radio"] + span::before,
	input.ui[type="radio"] + span::after {
		border-radius: 50%;
	}
	input.ui[type="radio"] + span::before,
	input.ui[type="checkbox"] + span::before {
	  top: 0;
	  left: 0;
	  width: 16px;
	  height: 16px;
	  border: 1px solid var(--color-text);
	}
	input.ui[type="radio"] + span::after,
	input.ui[type="checkbox"] + span::after {
	  opacity: 0;
	  top: 3px;
	  left: 3px;
	  width: 10px;
	  height: 10px;
	  background: var(--color-text);
	  transition: all 200ms linear;
	}
	input.ui[type="radio"]:checked + span::after,
	input.ui[type="checkbox"]:checked + span::after {
	  opacity: 1;
	}

	label:has(input[type="file"]) {
		cursor: pointer;
		position: relative;
		display: flex;
		align-items: center;
		gap: 10px;
		height: 24px;
		overflow: hidden;
	}
	input[type="file"] {
		cursor: pointer;
		opacity: 0;
		position: absolute;
		inset: 0;
		height: 100%;
	}
	input[type="file"] + span {
		order: 2;
		font-weight: 500;
	}
	input[type="file"] + span + svg {
		order: 1;
	}
	input[type="file"] + span + svg path {
		stroke: var(--color-text);
		transition: all 300ms linear;
	}
	input::file-selector-button {
		cursor: pointer;
	}

	.wrong input,
	.wrong textarea,
	.wrong .jq-selectcontent.__select,
	.wrong input.ui[type="radio"] + span::before,
	.wrong input.ui[type="checkbox"] + span::before {
		border-color: #f3c0c0;
		background: #ffeaea !important;
	}
	.error {
		padding: 5px 0;
		font-size: 14px;
		color: #c34343;
		transition: all 200ms linear;
		transform: translateY(-50%);
		opacity: 0;
	}
	.error.shown {
		opacity: 1;
		transform: translateY(0);
	}

	.ajax_loader {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 60px;
		height: 60px;
		transform: translate(-50%, -50%);
		z-index: 1;
	}
	.ajax_loader_svg {
		width: 100%;
		height: 100%;
	}
	.ajax_loader_circle {
		stroke: #00A499;
		transition: 300ms stroke-dashoffset;
	  transform: rotate(-90deg);
	  transform-origin: 50% 50%;
	}
	.ajax_loader_digit {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		font-weight: 400;
		font-size: 14px;
		line-height: 100%;
		text-align: center;
	}

}

@layer modals {

	.fancybox__backdrop {
		background-color: var(--color-bg);
		opacity: .2;
	}
	.fancybox__infobar {
		padding-left: 10px;
	}
	[data-fancybox] {
		cursor: pointer;
	}
	.fancybox__slide {
		padding-inline: 15px;
	}
	.modal {
		width: 100%;
		max-width: 1260px;
		display: none;
		padding: 100px 20px;
		color: var(--color-text);
		background: var(--color-bg);
	}
	.modal form {
		display: grid;
		justify-items: start;
		gap: 20px;
		max-width: 540px;
		margin-inline: auto;
	}
	.modal form button {
		font-weight: 500;
	}
	.modal .captcha {
		/*margin-top: -10px;*/
	}
	.modal [data-fancybox-close] {
		position: absolute;
		top: 25px;
		right: 25px;
		width: 25px;
		height: 25px;
	}
	.modal [data-fancybox-close] path {
		transition: all 300ms linear;
		stroke: var(--color-text);
	}
	.modal#success {
		text-align: center;
	}

	@media (min-width: 1200px) {
		.modal {
			padding-block: 132px;
		}
		.modal [data-fancybox-close] {
			top: 70px;
			right: 70px;
		}
	}

}

@layer popups {

	.popup {
		position: absolute;
		transition: all 300ms linear;
		opacity: 0;
		visibility: hidden;
	}

	.popup.shown {
		opacity: 1;
		visibility: visible;
	}

}

@layer map {

	.map_stage {}
	.map_points {
		display: none;
	}
	.map_marker {
		width: 48px;
		height: 48px;
		transform: translate(-50%, -50%);
	}

	/* Ч/Б карта */
	.ymaps3--main-engine-container {
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
		-webkit-filter: grayscale(100%);
	}

}

/*
*******************************************************************************/

@layer head {

	body {
		--logo-height: 36px;
		--header-height: calc(var(--logo-height) + 40px);
	}
	a[name] {
		scroll-margin-top: calc(var(--header-height) + 20px);
	}

	.head {
		position: sticky;
		top: 0;
		z-index: 10;
		background: var(--color-bg);
	}
	.head_row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: var(--header-height);
	}
	.head_logo {
		height: var(--logo-height);
	}
	.head_logo path[fill="black"] {
		fill: light-dark(#000, #fff);
	}
	.head_menu ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	body:has(.fullPromo) .head:not(.sticky) {
		position: relative;
		background: none;
	}
	.head.sticky {
		transform: translateY(-100%);
	}
	.head.sticky.shown {
		transition: all 300ms ease-in-out;
		transform: translateY(0);
	}

	@media (max-width: 1023px) {
		.head::before {
			content: '';
			display: block;
			position: fixed;
			inset: 0;
			background: var(--color-bg);
			z-index: -1;
			transition: all 300ms linear;
			opacity: 0;
			visibility: hidden;
		}
		.head:has(.head_menu.shown)::before {
			opacity: 1;
			visibility: visible;
		}
		.head_menu {
			position: fixed;
			inset: var(--header-height) 0 0;
			padding-block: 59px;
			padding-inline: var(--gap-side);
			transition: all 300ms linear;
			opacity: 0;
			visibility: hidden;
		}
		.head_menu.shown {
			opacity: 1;
			visibility: visible;
		}
		.head_menu ul {
			display: grid;
			gap: 30px;
		}
		.head_burger {
			position: relative;
			display: block;
			width: 24px;
			height: 24px;
			padding: 0;
			overflow: hidden;
			font-size: 0;
			text-indent: -9999px;
			border: none;
			background: none;
		}
		.head_burger::before {
			content: '';
			display: block;
			position: absolute;
			inset: -10px;
		}
		.head_burger div,
		.head_burger div::before,
		.head_burger div::after {
			position: absolute;
			left: 0;
			right: 0;
			width: 100%;
			height: 2px;
			background: var(--color-text);
			transition: all 300ms linear;
		}
		.head_burger div {
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
		.head_burger div::before,
		.head_burger div::after {
			content: '';
			display: block;
		}
		.head_burger div::before {
			top: -8px;
		}
		.head_burger div::after {
			bottom: -8px;
		}
		.head_burger[aria-expanded="true"] div {
			background: none;
			width: 16px;
		}
		.head_burger[aria-expanded="true"] div::before {
			top: 0;
			transform: rotate(45deg);
		}
		.head_burger[aria-expanded="true"] div::after {
			bottom: 0;
			transform: rotate(-45deg);
		}
	}

	@media (min-width: 1024px) {
		body {
			--logo-height: 56px;
		}
		.head_row {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			gap: 20px;
		}
		.head_menu {
			grid-column: 3 / 6;
			font-size: 14px;
		}
		.head_menu > ul {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: unset;
		}
		.head_menu li {
			margin: 0;
		}
		.head_burger {
			display: none;
		}
	}

	@media (min-width: 1200px) {
		.head_menu {
			grid-column: 4 / 6;
		}
	}

}

@layer foot {

	.foot {
		margin-top: var(--gap-between);
		padding-block: 25px;
		font-size: 14px;
	}
	.foot_row {
		display: grid;
		align-items: start;
	}
	.foot_logo path[fill="black"] {
		fill: light-dark(#000, #fff);
	}
	.foot_contacts {
		display: grid;
		gap: 14px;
		color: var(--color-accent);
	}
	.foot_menu_title {
		margin-bottom: 30px;
		color: var(--color-gray);
	}
	.foot_menu ul {
		display: grid;
		gap: 15px;
	}
	.foot_made,
	.foot_policy {
		color: var(--color-gray);
		font-size: 12px;
	}

	@media (max-width: 1023px) {
		.foot_row {
			grid-template-columns: 1fr 1fr;
			gap: 0 10px;
		}
		.foot_logo {
			margin-bottom: 43px;
		}
		.foot_menu:nth-child(5) {
			margin-block: 43px 57px;
		}
		.foot_made {
			grid-column: 1 / 2;
		}
		.foot_policy {
			grid-column: 2 / 3;
		}
	}

	@media (min-width: 768px) and (max-width: 1023px) {
		.foot_row {
			grid-template-columns: 1fr 1fr 1fr;
		}
		.foot_contacts {
			grid-column: 3 / 4;
		}
		.foot_menu:nth-child(5) {
			margin-block: 0;
		}
		.foot_made,
		.foot_policy {
			margin-top: 40px;
		}
	}

	@media (min-width: 1024px) {
		.foot_row {
			grid-template-columns: repeat(5, auto);
		}
		.foot_logo,
		.foot_contacts,
		.foot_menu,
		.foot_made,
		.foot_policy {
			grid-column: span 1;
		}
		.foot_menu {
			grid-row: span 2;
		}
		.foot_made,
		.foot_policy {
			align-self: end;
		}
	}

	@media (min-width: 1200px) {
		.foot_row {
			grid-template-columns: repeat(5, 1fr);
		}
	}

}

@layer crumbs {

	.crumbs {}
	.crumbs ol {
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		padding: 0;
		margin: 0;
	}
	.crumbs li {
		padding: 0;
	}
	.crumbs li::before {
		display: none;
	}
	.crumbs li:not(:has(a)) {
		color: #ddd;
	}
	.crumbs a {
		margin-right: 4px;
		color: #000;
	}

	@media (min-width: 1024px) {
		.crumbs {}
	}

}

@layer pagi {

	.pagi {}
	.pagi ul {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  flex-wrap: wrap;
	  gap: 10px;
	  padding: 0;
	  margin: 0;
	}
	.pagi li {
		padding: 0;
		list-style: none;
	}
	.pagi li::before {
		display: none;
	}
	.pagi_num,
	.pagi_dots {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  gap: 8px;
	}
	.pagi_num._current {}
	.pagi_prev,
	.pagi_next {}

}

@layer tagFilters {

	.tagFilters {
		display: flex;
		max-width: 100vw;
		margin-inline: calc(var(--gap-side) * -1);
		padding-inline: var(--gap-side);
		overflow-x: scroll;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	.tagFilters::-webkit-scrollbar {
		display: none;
	}
	h1 + .tagFilters {
		margin-top: 25px;
	}
	.tagFilters input {
		display: none;
	}
	.tagFilters input + span {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40px;
		min-width: 50px;
		padding-inline: 10px;
		white-space: nowrap;
		font-size: 14px;
		transition: all 300ms linear;
	}
	.tagFilters input:checked + span {
		color: var(--color-text-invert);
		background: var(--color-bg-invert);
	}

}

/*
*******************************************************************************/

@layer fullPromo {

	.fullPromo {
		position: relative;
		margin-top: calc(var(--header-height) * -1);
		color: #fff;
	}
	.fullPromo picture {
		position: absolute;
		inset: 0;
	}
	.fullPromo_row {
		display: grid;
		align-content: end;
		position: relative;
		height: 100vh;
		padding-block: 100px;
		z-index: 2;
	}
	.fullPromo::before {
		content: '';
		display: block;
		height: 320px;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		background: #000;
		background: linear-gradient(to bottom, transparent 0%, #000 100%);
		opacity: .4;
		z-index: 1;
	}
	.fullPromo_subTitle {
		color: oklch(from currentColor l c h / .5);
		font-size: 14px;
	}
	.fullPromo_title {
		margin-block: 10px 25px;
	}

	@media (max-width: 1023px) {
		.fullPromo_logo {
			display: none;
		}
	}

	@media (min-width: 1024px) {
		.fullPromo {}
		.fullPromo_row {
			grid-template-columns: repeat(5, 1fr);
			padding-block: 110px;
		}
		.fullPromo_side {}
		.fullPromo_logo {
			height: 36px;
			margin-top: 55px;
		}
		.fullPromo_logo path {
			fill: #fff;
		}
		.fullPromo_main {
			grid-column: 2 / 4;
		}
		.fullPromo_subTitle {}
		.fullPromo_title {}
		.fullPromo_act {}
	}

}

@layer homeIntro {

	.homeIntro_main h2 {
		margin-block: 15px 27px;
	}
	.homeIntro_row > picture {
		width: 259px;
		margin-top: 50px;
	}

	@media (min-width: 1024px) {
		.homeIntro_row {
			display: grid;
			grid-template-columns: repeat(10, 1fr);
			gap: 0 20px;
		}
		.homeIntro_row > p {
			grid-column: 1 / 3;
		}
		.homeIntro .sideTitle {
			grid-column: span 2;
		}
		.homeIntro_main {
			grid-column: 3 / 7;
		}
		.homeIntro_main h2 {
			margin-block: 0 20px;
		}
		.homeIntro_row > picture {
			grid-column: 3 / 5;
			width: auto;
		}
	}

}

@layer homeProjects {

	.homeProjects_intro_main h2 {
		margin-block: 15px 20px;
	}
	.homeProjects_row {
		display: flex;
		align-items: flex-start;
		gap: 15px;
		width: 100vw;
		margin-block: 20px 50px;
		margin-inline: calc(var(--gap-side) * -1);
		padding-inline: var(--gap-side);
		overflow-x: scroll;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	.homeProjects_row::-webkit-scrollbar {
		display: none;
	}
	.homeProjects_item {
		position: relative;
		flex: 0 0 260px;
		padding-top: 20px;
	}
	.homeProjects_item::before {
		content: '';
		display: block;
		height: 1px;
		position: absolute;
		top: 0;
		left: -15px;
		right: 0;
		background: #D9D9D9;
	}
	.homeProjects_item:first-child::before {
		left: 0;
	}
	.homeProjects_item h3 {
		height: 70px;
		margin-bottom: 5px;
		font-size: 14px;
	}
	.homeProjects_item:nth-child(odd) picture {
		aspect-ratio: 260 / 181;
	}
	.homeProjects_item:nth-child(even) picture {
		aspect-ratio: 260 / 317;
	}
	.homeProjects_item a::before {
		content: '';
		display: block;
		position: absolute;
		inset: 0;
	}
	.homeProjects_item .linkMore {
		transition: all 300ms ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	@media (min-width: 1024px) {
		.homeProjects_intro {
			display: grid;
			grid-template-columns: repeat(10, 1fr);
			gap: 20px;
			margin-bottom: 50px;
		}
		.homeProjects_intro > p {
			grid-column: 1 / 3;
		}
		.homeProjects_intro .sideTitle {
			grid-column: span 2;
		}
		.homeProjects_intro_main {
			grid-column: 3 / 8;
		}
		.homeProjects_intro_main h2 {
			margin-block: 0 10px;
		}
		.homeProjects_row {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			gap: 20px;
		}
		.homeProjects_item:not(:first-child)::before {
			left: -20px;
		}
		.homeProjects_more {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			gap: 20px;
		}
		.homeProjects_more a {
			grid-column: 2 / 4;
			justify-self: start;
		}
	}

	@media (hover: none) {
		.homeProjects_item .linkMore {
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	@media (hover: hover) {
		.homeProjects_item:hover .linkMore {
			opacity: 1;
			visibility: visible;
		}
	}

}

@layer partners {

	.partners_row {
		display: flex;
		align-items: center;
		gap: 40px;
		width: 100vw;
		margin-top: 15px;
		margin-inline: calc(var(--gap-side) * -1);
		padding-inline: var(--gap-side);
		overflow-x: scroll;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	.partners_row::-webkit-scrollbar {
		display: none;
	}

	@media (min-width: 1024px) {
		.partners_grid {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			gap: 20px;
		}
		.partners_grid h2 {
			grid-column: 2 / 4;
		}
		.partners_row {
			grid-column: 1 / -1;
			justify-content: space-between;
			gap: unset;
			margin-top: 30px;
		}
	}

}

@layer projects {

	.projects_row {
		display: grid;
		align-items: start;
		gap: 20px;
		margin-top: 25px;
	}
	.projects_item {
		position: relative;
		display: grid;
	}
	.projects_item h2 {
		height: 58px;
		font-size: 14px;
		font-weight: 400;
		-webkit-line-clamp: 3;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.projects_item a::before {
		content: '';
		display: block;
		position: absolute;
		inset: 0;
	}

	@media (max-width: 1023px) {
		.projects_item h2 {
			order: 2;
			margin-top: 10px;
		}
		.projects_item picture {
			order: 1;
			aspect-ratio: 384 / 181;
		}
		.projects_item picture img {
			width: 100%;
			height: 100%;
			max-width: none;
			max-height: none;
			object-fit: cover;
			object-position: center;
		}
	}

	@media (min-width: 768px) {
		.projects_row {
			grid-template-columns: 1fr 1fr;
		}
	}

	@media (min-width: 1024px) {
		.projects {}
		.projects_row {
			grid-template-columns: repeat(5, 1fr);
			gap: 100px 20px;
		}
		.projects_item {
			align-content: start;
			min-width: 0;
			padding-top: 20px;
		}
		.projects_item:nth-child(5n+1)::before {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: min(calc(var(--jsw) - (var(--gap-side) * 2)), var(--max-width));
			height: 1px;
			background: light-dark(#D9D9D9, #4E4E4E);
		}
		.projects_item picture {
			aspect-ratio: auto;
			margin-top: 17px;
		}
	}

	@media (hover: none) {
		.projects_item .linkMore {
			display: none;
		}
	}

	@media (hover: hover) {
		.projects_item .linkMore {
			transition: all 300ms linear;
			margin: 0;
			opacity: 0;
			visibility: hidden;
		}
		.projects_item:hover .linkMore {
			opacity: 1;
			visibility: visible;
		}
	}

}

@layer mediaList {

	.mediaList_row {
		display: grid;
		align-items: start;
		gap: 20px;
		margin-top: 25px;
	}
	.mediaList_item {
		position: relative;
		display: grid;
	}
	.mediaList_item h2 {
		height: 58px;
		font-size: 14px;
		font-weight: 400;
		-webkit-line-clamp: 3;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.mediaList_item a::before {
		content: '';
		display: block;
		position: absolute;
		inset: 0;
	}

	@media (max-width: 1023px) {
		.mediaList_item h2 {
			order: 2;
			margin-top: 5px;
		}
		.mediaList_item picture {
			order: 1;
			aspect-ratio: 384 / 250;
		}
		.mediaList_item picture img {
			width: 100%;
			height: 100%;
			max-width: none;
			max-height: none;
			object-fit: cover;
			object-position: center;
		}
	}

	@media (min-width: 768px) {
		.mediaList_row {
			grid-template-columns: 1fr 1fr;
		}
	}

	@media (min-width: 1024px) {
		.mediaList {}
		.mediaList_row {
			grid-template-columns: repeat(5, 1fr);
			gap: 100px 20px;
		}
		.mediaList_item {
			align-content: start;
			min-width: 0;
			padding-top: 20px;
		}
		.mediaList_item:nth-child(5n+1)::before {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: min(calc(var(--jsw) - (var(--gap-side) * 2)), var(--max-width));
			height: 1px;
			background: light-dark(#D9D9D9, #4E4E4E);
		}
		.mediaList_item picture {
			aspect-ratio: auto;
			margin-top: 17px;
		}
	}

	@media (hover: none) {
		.mediaList_item .linkMore {
			display: none;
		}
	}

	@media (hover: hover) {
		.mediaList_item .linkMore {
			transition: all 300ms linear;
			margin: 10px 0 0;
			opacity: 0;
			visibility: hidden;
		}
		.mediaList_item:hover .linkMore {
			opacity: 1;
			visibility: visible;
		}
	}

}

@layer contacts {

	.contacts_row {
		display: grid;
		align-content: start;
		grid-template-rows: auto 1fr;
		gap: 20px;
		min-height: calc(100vh - var(--from-top));
		padding-bottom: 20px;
	}
	.contacts_text {
		display: grid;
		align-content: start;
		font-size: 20px;
	}
	.contacts_text h1 {
		margin-bottom: 25px;
	}
	.contacts_links {
		display: grid;
		gap: 15px;
		color: #9C0001;
	}
	.contacts_address {
		margin-top: 15px;
	}
	.contacts .map,
	.map_stage {
		height: 100%;
	}

	@media (min-width: 1024px) {
		.contacts_row {
			grid-template-columns: repeat(5, 1fr);
			gap: 25px 20px;
		}
		.contacts_text {
			grid-column: 1 / -1;
			grid-template-columns: repeat(5, 1fr);
			gap: 20px;
		}
		.contacts_text h1 {
			margin-top: -16px;
			margin-bottom: 24px;
		}
		.contacts_text_1 {
			grid-column: 1 / 3;
		}
		.contacts_links {
			grid-column: 3 / 4;
		}
		.contacts_text > p {
			grid-column: span 2;
			margin: 0;
		}
		.map {
			grid-column: 1 / -1;
		}
		.map_stage {
			height: 100%;
		}
	}

}

@layer entry {

	.entry_title {
		margin-bottom: 25px;
		font-size: 25px;
	}
	.entry dl {
		display: grid;
		gap: 20px;
		font-size: 14px;
	}
	.entry dl div {
		display: grid;
		gap: 10px;
	}
	.entry dt {
		opacity: .5;
	}
	.entry_promo {
		margin-top: 10px;
	}
	.entry > picture {
		margin-inline: calc(var(--gap-side) * -1);
		max-inline-size: var(--jsw);
	}
	.entry_main h2 {
		margin-block: 30px 20px;
		font-size: 25px;
	}
	.entry_2imgs,
	.entry_main picture {
		margin-block: 30px;
	}
	.entry_2imgs {
		display: grid;
		gap: 10px;
	}
	.entry_2imgs picture {
		margin: 0;
	}
	.entry_foot {
		display: grid;
		gap: 30px;
		margin-top: 30px;
	}
	.entry_foot dl div {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	.entry_full {
		margin-top: 30px;
	}

	@media (max-width: 1023px) {
		.entry_side {
			margin-top: 20px;
		}
		.entry_side dl._2 {
			grid-template-columns: 1fr 1fr;
		}
		.entry_main {
			margin-top: 30px;
		}
		.entry_main picture.h {
			aspect-ratio: 384 / 216;
		}
	}

	@media (min-width: 768px) {
		.entry_2imgs {
			grid-template-columns: 1fr 1fr;
			gap: 20px;
		}
	}

	@media (min-width: 1024px) {
		.entry_promo {
			aspect-ratio: 1440 / 810;
			margin-bottom: 100px;
		}
		.entry_title,
		.entry_row {
			position: relative;
			display: grid;
			grid-template-columns: repeat(10, 1fr);
			gap: 20px;
		}
		.entry_side {
			position: absolute;
			top: 0;
			left: 0;
		}
		.entry_title h1,
		.entry_main {
			grid-column: 4 / 8;
		}
		.entry_2imgs,
		.entry_main picture.h {
			--m-cols: 2;
			--width: min(var(--max-width), calc(var(--jsw) - (var(--gap-side) * 2)));
			--column: calc((var(--width) + 20px) / 10);
			--margin: calc((var(--column) * var(--m-cols)) * -1);
			margin-inline: var(--margin);
			max-width: none;
			aspect-ratio: 1100 / 616;
		}
		.entry_main picture.v {
			aspect-ratio: 540 / 680;
		}
		.entry_foot {
			grid-template-columns: repeat(10, 1fr);
			gap: 50px 20px;
		}
		.entry_foot dl {
			grid-column: 4 / 8;
		}
		.entry_foot dl div {
			gap: 20px;
		}
	}

	@media (min-width: 1400px) {
		.entry_intro {
			margin-bottom: 100px;
		}
		.entry_main picture {
			margin-block: 100px;
		}
		.entry_full,
		.entry_foot {
			margin-top: 100px;
		}
	}

	@media (min-width: 1600px) {
		.entry_promo {
			aspect-ratio: auto;
			height: 900px;
		}
		.entry_main picture.h {
			--m-cols: 1;
		}
	}

}

@layer e404 {

	.e404 {
		position: fixed;
		inset: 0;
		display: grid;
		grid-template-rows: auto 1fr;
		gap: 28px;
		padding: 20px 15px;
		color: var(--color-light);
		background: var(--color-red);
	}
	.e404_main h1 {
		opacity: .5;
		font-weight: 400;
	}
	.e404_main p {
		margin-top: 15px;
		font-size: 18px;
	}
	.e404_main .link {
		display: inline-block;
		margin-top: 40px;
		font-size: 15px;
	}
	.e404_logo {
		display: block;
		height: 60px;
		opacity: .2;
		margin-bottom: 70px;
	}
	.e404_logo path {
		fill: #fff;
	}

	@media (min-width: 1024px) {
		.e404 {
			padding: 30px;
			grid-template-rows: 1fr;
			grid-template-columns: 3fr 2fr;
			gap: 20px;
		}
		.e404 picture {
			order: 1;
		}
		.e404_main {
			order: 2;
			display: flex;
			flex-direction: column;
			justify-content: center;
			position: relative;
		}
		.e404_logo {
			position: absolute;
			left: 0;
			bottom: 0;
			margin: 0;
			height: auto;
			width: 79px;
		}
	}

	@media (min-width: 1600px) {
		.e404 {
			padding: 30px 60px;
			grid-template-columns: 1fr 1fr;
		}
	}

}

@layer aboutIntro {

	.aboutIntro h2 {
		margin-bottom: 20px;
	}
	.aboutIntro_bg {
		margin-top: 20px;
	}

	@media (min-width: 1024px) {
		main:has(.aboutIntro) {
	    --from-top: 142px;
	  }
		.aboutIntro_grid {
			position: relative;
			display: grid;
			grid-template-columns: repeat(10, 1fr);
			gap: 20px;
		}
		.aboutIntro_side {
			grid-column: span 2;
		}
		.aboutIntro_main {
			grid-column: 3 / 8;
		}
		.aboutIntro_bg {
			margin-top: -97px;
		}
	}

}

@layer aboutAdv {

	.aboutAdv_main h2 {
		margin-bottom: 20px;
		font-size: 20px;
	}
	.aboutAdv_row {
		border-top: 1px solid var(--color-accent);
	}
	.aboutAdv_item {
		padding: 40px 20px;
		border-bottom: 1px solid var(--color-accent);
	}
	.aboutAdv_item h3 {
		margin-bottom: 25px;
		font-size: 20px;
	}
	.aboutAdv_item p {
		opacity: 0.6;
	}

	@media (min-width: 1024px) {
		.aboutAdv_grid {
			display: grid;
			grid-template-columns: repeat(10, 1fr);
			gap: 20px;
		}
		.aboutAdv_main {
			grid-column: 3 / 9;
		}
		.aboutAdv_item h3 + p {
			margin-top: 0;
		}
	}

	@media (min-width: 1200px) {
		.aboutAdv_row {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20px;
			border-top: 0;
		}
		.aboutAdv_item {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			border-top: 1px solid var(--color-accent);
		}
	}

}

@layer aboutTeam {

	.aboutTeam_row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 40px 10px;
	}
	.aboutTeam_item_post {
		margin-top: 10px;
	}
	.aboutTeam_item_name {
		margin-top: 5px;
		opacity: 0.6;
	}

	@media (max-width: 1023px) {
		.aboutTeam .sideTitle {
			margin-bottom: 20px;
			font-weight: 500;
		}
	}

	@media (min-width: 1024px) {
		.aboutTeam_grid {
			display: grid;
			grid-template-columns: repeat(10, 1fr);
			gap: 20px;
		}
		.aboutTeam_side {
			grid-column: 1 / 3;
		}
		.aboutTeam_main {
			grid-column: 3 / 11;
		}
		.aboutTeam_row {
			grid-template-columns: repeat(4, 1fr);
			gap: 40px 20px;
		}
	}

}

@layer aboutVals {

	.aboutVals_item {
		padding-block: 30px;
	}
	.aboutVals_item picture {
		width: 110px;
	}
	.aboutVals_item h3 {
		margin-block: 25px 15px;
		font-size: 20px;
	}
	.aboutVals_item p {
		opacity: .6;
	}

	@media (min-width: 1024px) {
		.aboutVals_grid {
			display: grid;
			grid-template-columns: repeat(10, 1fr);
			gap: 20px;
		}
		.aboutVals_side {
			grid-column: 1 / 3;
		}
		.aboutVals_main {
			grid-column: 3 / 8;
		}
		.aboutVals_item {
			position: relative;
			padding-left: 140px;
			padding-block: 40px;
		}
		.aboutVals_item picture {
			position: absolute;
			top: 40px;
			left: 0;
			width: 120px;
		}
		.aboutVals_item h3 {
			margin-top: 0;
		}
	}

	@media (min-width: 1200px) {
		.aboutVals_main {
			grid-column: 3 / 7;
		}
	}

}

@layer job {

	main:has(.job) {
		margin-top: 0;
	}

	.job .title {
		margin-bottom: 20px;
	}
	.job_pic {
		margin-bottom: 20px;
		aspect-ratio: 384 / 215;
	}
	.job_main picture {
		margin-top: 30px;
		aspect-ratio: 384 / 520;
	}
	.job_intro {
		font-weight: 500;
	}
	.job_list {
		margin-top: 20px;
		border-top: 1px solid var(--color-accent);
	}
	.job_item {
		border-bottom: 1px solid var(--color-accent);
	}
	.job_item_trig {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-block: 40px;
		width: 100%;
		font-size: 20px;
		font-weight: 500;
		transition: all 300ms linear;
	}
	.job_item_trig path {
		transition: all 300ms linear;
		stroke: var(--color-text);
	}
	.job_item_trig[aria-expanded="true"] {
		padding-bottom: 25px;
	}
	.job_item_trig[aria-expanded="true"] path:first-child {
		opacity: 0;
	}
	.job_item_main {
		display: none;
		padding-bottom: 40px;
	}
	.job_item_main > *:not(button) {
		opacity: .6;
	}
	.job_item_main button {
		margin-top: 25px;
		font-weight: 500;
	}
	.job .modalOpen {
		margin-top: 15px;
	}

	@media (min-width: 1024px) {
		.job_pic {
			aspect-ratio: 1380 / 545;
		}
		.job_grid {
			display: grid;
			grid-template-columns: repeat(10, 1fr);
			gap: 20px;
		}
		.job_side {
			grid-column: 1 / 3;
		}
		.job_main {
			grid-column: 3 / 7;
		}
	}

	@media (min-width: 1600px) {
		.job_main picture {
			aspect-ratio: 1;
		}
	}

}

/*
*******************************************************************************/

@layer preloader {

	body:has(.preloader) {
		overflow: hidden;
	}

	.preloader {
		position: fixed;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 50px;
		background: var(--color-red);
		z-index: 10000;
		transition: all 400ms linear;
	}
	.preloader.hide {
		opacity: 0;
		visibility: hidden;
	}
	.preloader_grid {
		width: 260px;
		margin-inline: auto;
	}
	.preloader_progress {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 17px;
		color: #fff;
		font-size: 12px;
		line-height: 16px;
	}
	.preloader_gallery {
		position: relative;
		aspect-ratio: 260 / 161;
		overflow: hidden;
	}
	.preloader_gallery picture {
		position: absolute;
		top: 100%;
		height: 100%;
		transition-property: top;
		transition-timing-function: ease-in-out;
		z-index: -1;
	}
	.preloader_gallery picture.shown {
		top: 0;
		z-index: 1;
	}
	.preloader_logo {
		position: absolute;
		left: 50%;
		margin-left: -40px;
		bottom: 50px;
		width: 80px;
	}
	.preloader_logo path {
		fill: rgb(255 255 255 / .2);
	}

	@media (min-width: 1200px) {
		.preloader_grid {
			width: 344px;
		}
	}

}