.contacts-page {
	margin-bottom: 60px;
	.section-heading {
		display: flex;
		align-items: end;
		justify-content: space-between;
		gap: 40px;
		h2 {
			font-size: 48px;
			line-height: 1;
		}
		> p {
			width: 448px;
			flex-shrink: 0;
			color: var(--textColor2);
			text-align: right;
			text-transform: uppercase;
		}
	}
	.hero {
		min-height: 649px;
		overflow: hidden;
		padding-bottom: 110px;
		.wrapper {
			position: relative;
			min-height: inherit;
			padding-top: 120px;
		}
		.breadcrumbs {
			position: relative;
			z-index: 2;
			display: flex;
			gap: 6px;
			font-size: 12px;
			text-transform: uppercase;
			margin-left: 30px;
			* {
				font-size: inherit;
				color: color-mix(in srgb, var(--textColor) 60%, transparent);
			}
		}
		.content {
			position: relative;
			z-index: 2;
			width: min(952px, 56vw);
			margin-top: 140px;
			h1 {
				font-size: clamp(54px, 3.55vw, 68px);
				line-height: 1;
				span {
					font: inherit;
					color: transparent;
					background: var(--gradient-1);
					background-clip: text;
					-webkit-background-clip: text;
				}
			}
			p {
				width: min(724px, 100%);
				margin-top: 6px;
				font-size: 20px;
				font-weight: 500;
				line-height: 1.2;
				letter-spacing: -.5px;
			}
			.btn {
				--pd-h: 0px;
				height: 70px;
				margin-top: 30px;
				padding-inline: 55px;
				border-radius: 16px;
				background: var(--gradient-1);
			}
		}
		.picture {
			position: absolute;
			top: -126px;
			left: 34.3%;
			width: 1605px;
			max-width: none;
			filter: blur(4px);
			pointer-events: none;
		}
	}
	.office,
	.requisites,
	.seo {
		margin-top: 120px;
	}
	.contacts {
		.cards {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 12px;
			margin-top: 40px;
			article {
				display: flex;
				min-width: 0;
				min-height: 212px;
				flex-direction: column;
				justify-content: space-between;
				padding: 40px;
				border-radius: 16px;
				background: color-mix(in srgb, var(--bg-1) 80%, transparent);
				box-shadow: 0 16px 34px color-mix(in srgb, var(--textColor) 6%, transparent);
				backdrop-filter: blur(8px);
				h3 {
					font-size: 18px;
					font-weight: 500;
					line-height: 1.2;
					color: var(--textColor2);
				}
			}
			.links {
				display: flex;
				flex-direction: column;
				gap: 10px;
				a {
					width: fit-content;
					font-size: 32px;
					font-weight: 700;
					line-height: 1.1;
					letter-spacing: -.3px;
					transition: opacity .3s linear;
				}
				.phone {
					text-transform: uppercase;
				}
				.email {
					color: transparent;
					background: var(--gradient-1);
					background-clip: text;
					-webkit-background-clip: text;
				}
			}
			.messengers nav {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
				gap: 12px;
				a {
					--col: 20px;
					--arr-move: 3px;
					display: flex;
					height: 68px;
					min-width: 0;
					align-items: center;
					justify-content: center;
					gap: 0;
					padding: 24px 10px;
					border-radius: 12px;
					font-size: 14px;
					font-weight: 500;
					line-height: 20px;
					color: var(--btn-color);
					background: var(--gradient-1);
					transition: box-shadow .3s linear;
					.arrow {
						flex-shrink: 0;
						width: 20px;
						height: 20px;
						&::before,
						&::after {
							font-size: 8px;
							line-height: 1;
							background: none;
							color: var(--btn-color);
						}
					}
				}
			}
		}
	}
	.office {
		display: grid;
		grid-template-columns: 597fr 1223fr;
		align-items: center;
		gap: 20px;
		.info {
			display: flex;
			flex-direction: column;
			gap: 40px;
		}
		.heading {
			display: flex;
			flex-direction: column;
			align-items: start;
			gap: 12px;
			> p {
				padding: 6px 10px;
				border: 1px solid color-mix(in srgb, var(--textColor) 10%, transparent);
				border-radius: 6px;
				font-weight: 900;
				color: color-mix(in srgb, var(--textColor) 60%, transparent);
				text-transform: uppercase;
			}
			h2 {
				font-size: 32px;
				line-height: 1.2;
			}
		}
		.card {
			display: flex;
			width: 100%;
			min-height: 367px;
			flex-direction: column;
			align-items: start;
			gap: 32px;
			overflow: hidden;
			padding: 40px;
			border-radius: 16px;
			background: color-mix(in srgb, var(--bg-1) 60%, transparent);
			box-shadow: 0 250px 100px color-mix(in srgb, var(--textColor) 1%, transparent), 0 141px 84px color-mix(in srgb, var(--textColor) 3%, transparent), 0 63px 63px color-mix(in srgb, var(--textColor) 5%, transparent), 0 16px 34px color-mix(in srgb, var(--textColor) 6%, transparent);
			backdrop-filter: blur(8px);
			> div {
				display: flex;
				flex-direction: column;
				align-items: start;
				gap: 16px;
				h3 {
					font-size: 16px;
					line-height: 1.3;
					color: color-mix(in srgb, var(--textColor) 60%, transparent);
				}
				.text {
					display: flex;
					flex-direction: column;
					gap: 8px;
					strong {
						font-size: 24px;
						font-weight: 900;
						line-height: 1.3;
					}
					p {
						font-size: 20px;
						line-height: 1.3;
						color: var(--textColor2);
					}
				}
			}
			> a {
				display: flex;
				align-items: center;
				gap: 12px;
				padding: 16px 24px;
				border-radius: 12px;
				font-weight: 900;
				color: var(--btn-color);
				text-transform: uppercase;
				background: var(--gradient-1);
				transition: box-shadow .3s linear;
				&::before {
					content: '\e907';
					font-family: 'icon';
					font-size: 20px;
					font-weight: 400;
				}
				/* img {
					width: 20px;
					height: 20px;
				} */
			}
		}
		.map {
			position: relative;
			height: 485px;
			overflow: hidden;
			border-radius: 16px;
			background: var(--gradient-1);
			box-shadow: 0 250px 100px color-mix(in srgb, var(--textColor) 1%, transparent), 0 141px 84px color-mix(in srgb, var(--textColor) 3%, transparent), 0 63px 63px color-mix(in srgb, var(--textColor) 5%, transparent), 0 16px 34px color-mix(in srgb, var(--textColor) 6%, transparent);
			backdrop-filter: blur(8px);
			.image {
				position: absolute;
				top: calc(50% + 104.5px);
				left: calc(50% + 28px);
				width: 1407px;
				height: 732px;
				max-width: none;
				object-fit: cover;
				mix-blend-mode: luminosity;
				transform: translate(-50%, -50%);
				pointer-events: none;
			}
			.marker {
				position: absolute;
				top: calc(50% - 56.5px);
				left: calc(50% - 127.5px);
				width: 255px;
				height: 442px;
				max-width: none;
				pointer-events: none;
			}
		}
	}
	.requisites {
		padding: 48px;
		border-radius: 24px;
		background: color-mix(in srgb, var(--bg-1) 60%, transparent);
		backdrop-filter: blur(8px);
		.heading {
			display: flex;
			flex-direction: column;
			align-items: start;
			gap: 12px;
			> p {
				padding: 6px 10px;
				border-radius: 6px;
				font-weight: 900;
				color: color-mix(in srgb, var(--textColor) 60%, transparent);
				text-transform: uppercase;
			}
			h2 {
				font-size: 32px;
				line-height: 1.2;
			}
		}
		.list {
			display: flex;
			flex-direction: column;
			gap: 20px;
			margin-top: 40px;
			> div {
				display: flex;
				min-height: 45px;
				align-items: center;
				justify-content: space-between;
				gap: 30px;
				padding: 12px 0;
				border-bottom: 1px solid color-mix(in srgb, var(--textColor) 5%, transparent);
				span {
					font-weight: 700;
					color: color-mix(in srgb, var(--textColor) 60%, transparent);
				}
				strong {
					font-weight: 900;
					text-align: right;
				}
			}
		}
	}
	.seo {
		width: 1112px;
		max-width: calc(100% - (var(--mr-i) * 2));
		margin-right: auto;
		margin-left: var(--mr-i);
		h2 {
			display: flex;
			align-items: center;
			gap: 20px;
			font-size: 20px;
			line-height: 1.2;
			color: var(--textColor2);
			white-space: nowrap;
			&::after {
				content: '\e903';
				font-family: 'icon';
				font-size: 24px;
				transform: rotate(90deg);
			}
		}
		.text {
			display: flex;
			flex-direction: column;
			gap: 4px;
			margin-top: 10px;
			opacity: .6;
			p,
			li {
				font-size: 20px;
				line-height: 1.2;
				color: var(--textColor2);
			}
			ul {
				padding-left: 30px;
			}
		}
	}
}
@media (max-width: 1280px) {
	.contacts-page {
		.section-heading h2 {
			font-size: 42px;
		}
		.hero {
			.content {
				width: 64vw;
			}
			.picture {
				left: 45%;
				opacity: .3;
			}
		}
		.office {
			grid-template-columns: 2fr 3fr;
		}
	}
}
@media (max-width: 1024px) {
	.contacts-page {
		.section-heading {
			align-items: start;
			> p {
				width: auto;
			}
		}
		.hero {
			min-height: 650px;
			.content {
				width: 76vw;
				margin-top: 120px;
			}
			.picture {
				left: 30%;
				opacity: .12;
			}
		}
		.contacts .cards,
		.office {
			grid-template-columns: 1fr;
		}
		.office .map {
			height: 400px;
		}
		.seo {
			width: auto;
			h2 {
				align-items: start;
				white-space: normal;
			}
			.text {
				p,
				li {
					font-size: 16px;
				}
			}
		}
	}
}
@media (max-width: 767px) {
	.contacts-page {
		.section-heading {
			flex-direction: column;
			gap: 14px;
			h2 {
				font-size: 32px;
			}
			> p {
				order: -1;
				text-align: left;
			}
		}
		.hero {
			min-height: 650px;
			.wrapper {
				padding-top: 100px;
			}
			.content {
				width: 100%;
				margin-top: 90px;
				h1 {
					font-size: clamp(38px, 12vw, 54px);
				}
				p {
					font-size: 18px;
				}
				.btn {
					width: 100%;
					height: 60px;
					padding-inline: 20px;
					font-size: 16px;
				}
			}
			.picture {
				top: 120px;
				left: -40%;
				width: 1150px;
				opacity: .08;
			}
		}
		.contacts,
		.office,
		.requisites,
		.seo {
			margin-top: 80px;
		}
		.contacts .cards {
			article {
				min-height: auto;
				gap: 30px;
				padding: 20px;
			}
			.links a {
				font-size: 24px;
			}
			.messengers nav {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}
		}
		.office {
			.info {
				gap: 24px;
			}
			.heading h2 {
				font-size: 28px;
			}
			.card {
				min-height: auto;
				padding: 24px;
				> div .text {
					strong {
						font-size: 20px;
					}
					p {
						font-size: 17px;
					}
				}
				> a {
					width: 100%;
					justify-content: center;
					padding-inline: 14px;
				}
			}
			.map {
				height: 280px;
				.marker {
					top: calc(50% - 42px);
					left: calc(50% - 95px);
					width: 190px;
					height: auto;
				}
			}
		}
		.requisites {
			padding: 24px;
			border-radius: 16px;
			.heading h2 {
				font-size: 28px;
			}
			.list > div {
				align-items: start;
				flex-direction: column;
				gap: 8px;
				strong {
					max-width: 100%;
					text-align: left;
					overflow-wrap: anywhere;
				}
			}
		}
	}
}
@media (hover: hover) {
	.contacts-page {
		.office .card > a:hover,
		.contacts .messengers a:hover {
			box-shadow: 0 16px 34px color-mix(in srgb, var(--bg-2) 14%, transparent);
		}
		.contacts .links a:hover {
			opacity: .7;
		}
	}
}