/* REWRITE */
html,
body {
	margin: 0;
}

/* REWRITE */

/* HEADER */
.right-link {
	margin-right: 32px;
}

/* HEADER */
/* CITY CHANGER */
.city-changer {
	--link-color: #fff;
	--menu-link-color: #242424;
	--bg-color: #fff;
	--menu-link-hover: #64A67E;
	width: fit-content;
	position: relative;
	margin-left: 16px;
}

.city-changer__link {
	display: flex;
	align-items: center;
	gap: 3px;
	color: var(--link-color);
}

.city-changer__link.active {
	opacity: 1;
}

.city-changer a {
	text-decoration: none;
	/* opacity: 0.6; */
}

.city-changer a:hover {
	opacity: 1;
}

.city-changer__menu {
	display: none;
	position: absolute;
	top: calc(100% + 2ch);
	left: -2ch;
}

.city-changer__menu.active {
	display: block;
}

.city-changer__menu a {
	color: var(--menu-link-color);
	padding-block: 2px;
}

.city-changer__menu a:hover {
	color: var(--menu-link-hover);
}

.cities {
	border: 1px solid #00000022;
	border-radius: 8px;
	padding: 16px 20px;
	width: fit-content;
	background-color: var(--bg-color);
	box-shadow: 0 0 16px #00000033;
	z-index: 100;
}

.cities__list {
	padding: 0;
	margin: 0;
	white-space: nowrap;
	line-height: 1.3;
	/* columns: 3; */
	/* column-gap: 20px; */
	display: grid;
	gap: 4px;
}

.cities__list-item {
	margin-left: 20px;
	line-height: 1.5;
	/* margin-bottom: 6px; */
}

.cities__list-item::marker {
	color: #00000066;
}

.cities__list-item.accent::marker {
	color: #000000aa;
}

.cities__list-item:hover::marker {
	color: var(--menu-link-hover);
}

.cities__list-item:hover {
	color: var(--menu-link-hover);
}

.cities__list-item.accent {
	font-weight: 700;
}

.cities__list-item.accent:has(+ :not(.accent)) {
	margin-bottom: calc(1lh + 12px);
}

/* CITY CHANGER */

/* FIRST LOCATION ASK */
.modal_location.show {
	display: flex;
	position: fixed;
	background-color: #00000033;
	inset: 0;
	align-items: center;
	justify-content: center;
	z-index: 21;
}

.modal_location {
	display: none;
}

.modal__content {
	display: flex;
	gap: 24px;
}

.modal__body {
	padding: 32px 32px;
	border: 1px solid #00000033;
	border-radius: 8px;
	background-color: #fff;
	position: relative;
	opacity: 0.95;

}

.modal__title {
	font-size: 24px;
	margin-bottom: 20px;
}

.modal__city a {
	line-height: 1.5;
	color: inherit;
	font-size: 18px;

	&:hover {
		color: #64A67E;
	}
}

.modal__close {
	width: 32px;
	height: 32px;
	display: flex;
	position: absolute;
	top: 4px;
	right: 4px;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-size: 30px;
	background-color: transparent;
	border: none;
	cursor: pointer;
	color: #353535;
	transition: 150ms;

	&:hover {
		color: red;
	}
}

.modal__desc {
	font-size: 14px;
	color: #00000099;
}

/* FIRST LOCATION ASK */

/* CALCULATOR */
.calc__warn {
	margin-top: 32px;
	color: #747474;
	line-height: 1.4;
}

/* CALCULATOR */

/* MEDIA */
@media (width <=1400px) {
	.logo span {
		display: none;
	}
}

@media (width <=1220px) {
	.right-link {
		margin-right: 40px;
	}

	.tel a {
		font-size: 18px;
	}

	.zv {
		width: 160px;
	}
}

@media (width <=1024px) {
	.right {
		display: flex;

		.right-link,
		.tel,
		.zv {
			display: none;
		}

		.right-link-city {
			display: flex;
		}
	}
}

@media (width <=560px) {
	.logo img {
		width: 140px;
	}

	.mobile-head {
		gap: 0 16px;
	}

	.city-changer__link {
		line-height: 1;
	}
}

@media (width <=500px) {
	.modal_location {
		padding: 16px;
	}

	.modal__close {
		top: 0px;
		right: 0px;
	}

	.modal__body {
		padding: 24px;
	}

	.modal__title {
		margin-bottom: 12px;
	}

	.modal__content {
		display: flex;
		gap: 4px;
		flex-direction: column;
	}
}

@media (width <=460px) {
	.logo img {
		width: 120px;
	}

	.right-link {
		margin-right: 0x;
	}

	.city-changer {
		margin-left: 16px;
	}

	.city-changer__link {
		letter-spacing: -0.02em;
		font-size: 15px;
	}
}

@media (width <=375px) {
	.modal__city a {
		font-size: 16px;
	}
}

/* MEDIA */



.one-title span {
	font-size: 70%;
}

/* LANDING STYLES */
.top-banner {
	position: relative;
	z-index: 0;
	min-height: calc(100vh - 180px);
	align-content: center;
}

.top-banner__image {
	position: absolute;
	inset: 0;
	z-index: -1;

	img,
	video {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	&::before {
		content: '';
		position: absolute;
		inset: 0;
		background-color: #0e1825;
		opacity: 0.2;
		z-index: 0;
		background-image: url(/images/landing/video-overlay.svg);
		background-repeat: repeat;
		background-size: 3px;
	}

	video::-webkit-media-controls {
		display: none !important;
	}

	video {
		background-color: transparent;
		border-bottom: 1px solid transparent;

		/* хак для предотвращения мелькания при загрузке на некоторых версиях ios */
		&::-webkit-media-controls-panel {
			display: none !important;
			-webkit-appearance: none;
			opacity: 0;
			visibility: hidden;
		}

		&::-webkit-media-controls-play-button {
			display: none !important;
			-webkit-appearance: none;
			opacity: 0;
			visibility: hidden;
		}

		&::-webkit-media-controls-start-playback-button {
			display: none !important;
			-webkit-appearance: none;
			opacity: 0;
			visibility: hidden;
		}
	}
}

.top-banner__title {
	color: #fff;
	text-align: center;
	font-size: 60px;
	line-height: 1.2;
	margin: 0;
	margin-bottom: 32px;
	text-shadow: 0 0 8px #00000033;
}

.top-banner__description {
	color: #fff;
	text-align: center;
	font-size: 30px;
	margin: 0;
	line-height: 1.4;
	margin-bottom: 64px;
	text-shadow: 0 0 8px #00000033;
}

.top-banner__cta {
	display: block;
	width: fit-content;
	margin-inline: auto;
	cursor: pointer;
	background: #64A67E;
	font-size: 18px;
	font-weight: 500;
	text-align: center;
	color: #fff;
	border: none;
	border-radius: 5px;
	padding: 0.8em 1.6em;
	box-shadow: 0 0 24px #0a221455;

	position: fixed;
	bottom: 64px;
	left: 50%;
	translate: -50% 0;
	z-index: 100;

	&:hover {
		background-color: #7aba93;
	}
}

.more {
	padding-top: 100px;
	padding-bottom: 50px;
}

[class*="__title"]:not(.top-banner__title, .plan__title),
.calc .titled {
	color: #64A67E;
	text-transform: uppercase;
	text-align: center;
	font-size: 40px;
	margin-bottom: 60px;
}

.more__title {}

.more__grid {
	display: grid;
	grid-template-columns: 480px 1fr;
	gap: 60px;
	align-items: center;
}

.more__image {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 30px;
	aspect-ratio: 5 / 4;
}

.more__content {
	font-size: 30px;
	line-height: 1.4;
}

.houses {
	padding-top: 50px;
	padding-bottom: 50px;
	overflow: clip;

	.slick-slide img,
	.slick-slide video {
		max-width: unset;
		border-radius: 30px;
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.slick-list {
		overflow: visible;
	}

	.slick-center {
		opacity: 1;
	}

	.slick-active {
		opacity: 1;
	}

	.prev-arrow {
		left: 0;
	}

	.next-arrow {
		right: 0;
	}
}

.houses__title {}

.houses__slide {
	padding-inline: 25px;
	opacity: 0.4;
	transition: 150ms;
	aspect-ratio: 2 / 1;

	img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.detail {
	padding-top: 50px;
	padding-bottom: 50px;
}

.detail__top-grid {
	display: grid;
	grid-template-columns: 480px 1fr;
	gap: 60px;
	align-items: center;
	margin-bottom: 64px;
}

.detail__top-grid-image {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
	border-radius: 15px;
	aspect-ratio: 5 / 3;
}

.detail__top-grid-chars {}

.chars {
	display: flex;
	flex-direction: column;
	gap: 44px;
}

.chars__row {
	position: relative;
	z-index: 0;
	display: flex;
	align-items: center;
	width: fit-content;
	gap: 40px;

	&::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		width: 100%;
		height: 40%;
		bottom: 0;
		background-color: #D9D9D9;
		z-index: -1;
	}
}

.chars__big {
	font-size: 56px;
	font-weight: 500;
	line-height: 1;
	color: #64A67E;
	text-transform: uppercase;
}

.chars__small {
	font-size: 16px;
}

.detail__main-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: auto auto auto auto;
	gap: 30px;
	align-items: stretch;
}

.detail__main-grid-image {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
	border-radius: 15px;
}

.image_1 {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
}

.image_2 {
	grid-column: 3 / 4;
	grid-row: 1 / 3;
}

.image_3 {
	grid-column: 3 / 4;
	grid-row: 3 / 4;
}

.detail__main-grid-description {
	font-size: 26px;
	line-height: 1.4;
}

.description_1 {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}

.description_2 {
	grid-column: 1 / 3;
	grid-row: 2 / 4;
}


.plan {
	padding-top: 80px;
	padding-bottom: 80px;
	background-color: #64A67E;
	color: #fff;

	p {
		font-size: 26px;
		line-height: 1.4;
	}
}

.plan__title {
	text-align: left;
	text-transform: uppercase;
	font-size: 40px;
	margin: 0;
	margin-bottom: 30px;
}

.plan__images {
	display: flex;
	align-items: center;
	gap: 60px;
	margin-top: 60px;

	background-image: url(/images/landing/logo-bg.webp);
	background-size: 100px;
	background-position: right 100px center;
	background-repeat: no-repeat;
}

.plan__images-item {
	max-width: 395px;
	height: auto;

	img {
		border-radius: 15px;
		display: block;
		width: 100%;
		height: auto;
	}
}

.properties {
	padding-top: 80px;
	padding-bottom: 80px;
}

.properties__title {}

.properties__grid {}

.properties__grid-top {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 60px;
	align-items: center;
	margin-bottom: 64px;
}

.properties__image {
	width: 100%;
	height: auto;
	border-radius: 30px;
	aspect-ratio: 1;
}

.properties__text {}

.properties__item {
	&:not(:last-child) {
		border-bottom: 1px solid #CDCDCD;
	}

	h3 {
		font-size: 30px;
		color: #64A67E;
		text-transform: uppercase;
		margin: 0;
		margin-top: 30px;
		margin-bottom: 16px;
		line-height: 1.2;
	}

	p {
		font-size: 20px;
		line-height: 1.4;
		margin-bottom: 30px;
	}
}

.properties__grid-bottom {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 60px;
	font-size: 26px;
	line-height: 1.4;
}

.calc {
	.titled {
		margin-bottom: 20px;
		line-height: 1;
	}

	.subtitled {
		font-size: 30px;
		margin-bottom: 44px;
	}

}

@media (width <=1024px) {
	.top-banner {
		min-height: calc(100vh - 86px);
	}

	.top-banner__title {
		font-size: 44px;
	}

	.top-banner__description {
		font-size: 24px;
	}

	[class*="__title"]:not(.top-banner__title, .plan__title),
	.calc .titled,
	.plan__title {
		font-size: 32px;
		margin-bottom: 44px;
	}

	.more {
		padding-top: 50px;
		padding-bottom: 30px;
	}

	.more__content {
		font-size: 24px;
	}

	.more__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 44px;
	}

	.houses__slide {
		padding-inline: 15px;
	}

	.detail__top-grid {
		gap: 44px;
	}

	.chars__big {
		font-size: 40px;
	}

	.detail__top-grid {
		grid-template-columns: repeat(2, 1fr);
		align-items: center;
	}

	.detail__main-grid-description {
		font-size: 20px;
	}

	.plan {
		padding-top: 50px;
		padding-bottom: 50px;

		p {
			font-size: 20px;
		}
	}

	.plan__title {
		margin-bottom: 32px;
	}

	.plan__images {
		justify-content: center;
		flex-wrap: wrap;
		background-image: none;
	}

	.properties {
		padding-top: 50px;
		padding-bottom: 50px;

	}

	.properties__item {
		h3 {
			font-size: 24px;
			margin-bottom: 8px;
		}

		p {
			font-size: 18px;
			margin-top: 8px;
			margin-bottom: 24px;
		}

	}

	.properties__grid-top {
		gap: 44px;
	}

	.properties__grid-bottom {
		gap: 44px;
		font-size: 20px;
	}
}

@media (width <=920px) {
	.more {
		padding-top: 40px;
	}

	[class*="__title"]:not(.top-banner__title, .plan__title),
	.calc .titled,
	.plan__title {
		margin-bottom: 24px;
	}

	.more__content {
		font-size: 20px;
	}

	.more__grid {
		gap: 32px;
	}

	.houses {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.houses__slide {
		padding-inline: 8px;
	}

	.detail__top-grid {
		gap: 32px;
	}

	.chars {
		gap: 24px;
	}

	.chars__row {
		gap: 24px;
	}

	.chars__big {
		font-size: 32px;
	}

	.detail {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.detail__main-grid-description {
		font-size: 18px;
	}

	.detail__main-grid {
		grid-template-columns: 1.5fr 1fr 1fr;
	}

	.plan {
		p {
			font-size: 18px;
		}
	}

	.properties__grid-top {
		gap: 32px;
		margin-bottom: 32px;
	}

	.properties__item {
		p {
			margin-bottom: 20px;
		}

		h3 {
			margin-top: 24px;
		}
	}

	.calc {
		.subtitled {
			font-size: 24px;
		}
	}

}

@media (width <=768px) {
	.top-banner__title {
		font-size: 32px;
		margin-bottom: 16px;
	}

	.top-banner__description {
		font-size: 20px;
		margin-bottom: 32px;
	}

	.top-banner {
		min-height: 500px;
	}

	[class*="__title"]:not(.top-banner__title, .plan__title),
	.calc .titled,
	.plan__title {
		font-size: 28px;
		margin-bottom: 20px;
	}

	.more__grid {
		grid-template-columns: 100%;
		gap: 16px;
		max-width: 520px;
		margin-inline: auto;
	}

	.houses {
		.slick-slide img {
			border-radius: 15px;
		}
	}

	.detail__top-grid {
		grid-template-columns: 100%;
		gap: 32px;
		max-width: 520px;
		margin-inline: auto;
		margin-bottom: 64px;
	}

	.detail__main-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		max-width: 520px;
		margin-inline: auto;
		gap: 16px;
	}

	.image_1 {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
	}

	.image_2 {
		grid-column: 2 / 3;
		grid-row: 1 / 3;
	}

	.image_3 {
		grid-column: 1 / 2;
		grid-row: 2 / 3;
	}

	.description_1 {
		margin: 0;
		grid-column: 1 / 3;
		grid-row: unset;
		margin-top: 16px;
	}

	.description_2 {
		grid-column: 1 / 3;
		grid-row: unset;

		p:first-of-type {
			margin-top: 0;
		}
	}

	.plan__title,
	.plan p,
	.properties__grid {
		max-width: 520px;
		margin-inline: auto;
	}

	.properties__grid-top {
		grid-template-columns: 100%;
	}

	.properties__grid-bottom {
		display: block;
	}

	.properties__item {
		border-bottom: 1px solid #CDCDCD;
	}

	.top-banner__cta {
		bottom: unset;
		top: 56vh;
		white-space: nowrap;
		transition: 500ms;
	}

	.top-banner__cta.scrolled {
		top: calc(100vh - 82px);
	}

}

@media (width <=580px) {
	.more {
		padding-bottom: 0px;
	}

	.houses__slide {
		aspect-ratio: 5 / 3;
	}

	.houses {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.calc {
		.subtitled {
			font-size: 18px;
		}
	}
}

@media (width <=480px) {
	.detail__main-grid {
		display: block;
	}

	.description_2 {
		p:first-of-type {
			margin-top: 1em;
		}
	}

	.detail__main-grid-image {
		margin-bottom: 16px;
	}
}

@media (width <=425px) {
	.top-banner {
		min-height: calc(100vh - 75px);

		.container {
			position: relative;
			top: -64px;
		}
	}

	.top-banner__cta {
		top: 70vh;
	}

	.top-banner__cta.scrolled {
		top: calc(100vh - 82px);
	}

	.top-banner__title {
		font-size: 28px;
		margin-bottom: 16px;
	}

}

/* LANDING STYLES */