/*
Theme Name: Vila Montreal
Author: D-Lab
Author URI: https://dlab.com.br
Description: 
Version: 1.0
Text Domain: montreal
Update URI: false

*/


:root{
	--purple: #2B0D2E;
	--yellow: #E9C46A;
	--salmon: #E5D9D1;
	--orange: #D66853;
	--green: #B4D3C4;
	--white: #FFFFFF;

	--title-1: 1.625rem;
	--title-2: 1.625rem;
	--title-3: 1rem;
	--text-large: 1.125rem;
	--text: 1rem;

	--header-height: 0px;
	--section-padding: 60px;
	--gutter: 48px;
}

@media (min-width: 992px){
	:root{
		--title-1: 3.3125rem;
		--title-2: 2.625rem;
		--title-3: 1.625rem;
		--text-large: 1.625rem;
		--text: 1.25rem;

		--header-height: 100px;
		--section-padding: 100px;
		--gutter: 52px;
	}

	.page-template-template_home{
		--header-height: 100px;
	}
}



/* SETUP */
html{
	scroll-padding: var(--header-height);
}

body{
	font-family: "Open Sans", sans-serif;
	background-color: var(--salmon);
	color: var(--purple);
	padding-top: var(--header-height);
	font-size: var(--text);
}

*:is(:focus,:focus-visible){
	outline: 1px dotted var(--orange);
}

a{
	transition: color 0.3s ease;
	color: var(--orange);
	text-decoration: underline;
}

a:is(:hover, :focus, :active){
	color: var(--purple);
}

h1,
h2,
h3,
h4,
h5{
	font-weight: 700;
	line-height: 1.5;
}

h1{
	font-size: var(--title-1);
}

h2{
	font-size: var(--title-2);
}

h3,
h4,
h5,
h6{
	font-size: var(--title-3);
}



/* UTILITY */
.container{
	width: min(calc(100% - var(--gutter)), 1432px);
	margin-inline: auto;
}

.wide-container{
	width: min(calc(100% - var(--gutter)), 1704px);
	margin-inline: auto;
}

.narrow-container{
	width: min(calc(100% - var(--gutter)), 1222px);
	margin-inline: auto;
}

@media (max-width: 767px){
	.edge-container{
		width: 100%;
		margin-inline: auto;
	}
}

.sr-only{
	position: absolute;
	top: 0;
	left: 0;
	width: 0px;
	height: 0px;
	overflow: hidden;
}

.sr-only:is(a, button):focus{
	position: fixed;
	top: 50%;
	padding: 16px;
	background-color: var(--purple);
	color: var(--white);
	transform: translateY(-50%);
	width: auto;
	height: auto;
}

.btn{
	display: inline-block;
	appearance: none;
	border: none;
	border-radius: 0 80px 80px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 700;
	padding: 20px 30px;
	background-color: var(--orange);
	color: var(--white);
	cursor: pointer;
	transition: 0.3s ease;
	transition-property: color, background-color;
	min-width: 200px;
}

.btn:is(:hover, :focus, :active){
	outline: none;
	background-color: var(--yellow);
	color: var(--purple);
	text-decoration: none;
}

.btn-yellow{
	background-color: var(--yellow);
	color: var(--purple);
}

.btn-yellow:is(:hover, :focus, :active){
	background-color: var(--white);
	color: var(--purple);
}

.btn-white{
	background-color: var(--white);
	color: var(--orange);
}



/* HEADER */
.header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: var(--purple);
	color: var(--white);
	padding-top: 14px;
	padding-bottom: 14px;
	z-index: 100;
	font-size: 1rem;
}

.header-inner{
	display: flex;
	align-items: center;
	column-gap: 48px;
}

.header a{
	color: var(--white);
}

.header .logo{
	display: block;
	line-height: 1;
}

.header .logo svg{
	max-height: 48px;
	width: auto;
}

.header a.logo:is(:hover, :focus, :active){
	text-decoration: none;
}

.header-menu nav ul{
	display: flex;
	column-gap: 32px;
	padding: 0;
	margin: 0;
}

.header-menu nav ul li{
	display: block;
	list-style: none;
}

.header-menu nav ul li a{
	text-decoration: none;
	padding: 24px 0;
	display: block;
}

.header-menu nav ul li a:is(:hover, :focus, :active){
	color: var(--yellow);
}

@media (max-width: 991px){
	.header{
		display: none;
	}

	.header-menu{
		position: fixed;
		top: 0;
		right: 0;
		height: 100vh;
		width: min(294px, 80%);
		display: none;
		background-color: var(--purple);
	}

	.header-menu.open{
		display: flex;
	}

	.header-menu-inner{
		display: flex;
		flex-direction: column;
		padding: 24px;
		overflow: auto;
		overscroll-behavior: contain;
		width: 100%;
		height: 100%;
		row-gap: 50px;
	}

	.header-menu-bg{
		display: block;
		position: absolute;
        right: 100%;
        width: 100vw;
        height: 100%;
		background-color: rgba(8,8,8,.5);
	}

	button.header-menu-toggle{
		appearance: none!important;
		padding: 0;
		border: none;
		border-radius: 0;
        background: transparent;
        cursor: pointer;
		color: var(--white);
	}

	.header-menu-toggle:is(:hover, :focus, :active){
		color: var(--yellow);
		outline: none;
	}

	.header-menu-open{
		margin-left: auto;
	}

	.header-menu-open svg{
		width: 40px;
		height: auto;
	}

	.header-menu-close{
		margin-left: auto;
	}

	.header-menu-close svg{
		width: 32px;
		height: auto;
	}

	.header-menu nav{
		margin-top: auto;
		margin-bottom: auto;
	}

	.header-menu nav ul{
		flex-direction: column;
		text-align: center;
	}

	.header-menu .logo{
		max-width: 100%;
		margin: 0 auto 80px;
	}
}

@media (min-width: 992px){
	.header-menu-open,
	.header-menu-close,
	.header-menu .logo,
	.header-menu-bg{
		display: none;
	}
	
	.header-menu{
		margin-left: auto;
	}

	.page-template-template_home .header .logo{
		display: none;
	}
}

@media (min-width: 1200px){
	.header-menu nav ul{
		column-gap: 50px;
	}
}



/* DEFAULT STYLE */
.default-style{
	margin: 48px 0;
}

.default-style article h1:first-child{
	font-weight: 700;
	margin-bottom: 48px;
}



/* 404 */
.page-not-found{
	text-align: center;
	margin: 120px 0;
}



/* HOME - HERO */
.home-hero{
	padding: var(--section-padding) 0;
	position: relative;
	background-color: var(--purple);
	color: var(--white);
}

.home-hero::before{
	content: '';
	display: block;
	position: absolute;
	bottom: 100%;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: var(--purple);
}

.home-hero-graphic-mobile,
.home-hero-graphic-desktop{
	pointer-events: none;
}

.home-hero-graphic-desktop{
	display: none;
}

:is(.home-hero-graphic-mobile, .home-hero-graphic-desktop) svg{
	width: 100%;
	height: auto;
}

.home-hero-graphic-1{
	position: absolute;
	top: calc(var(--header-height) * -1);
	left: 0;
	max-width: min(50%, 186px);
}

.home-hero-graphic-2{
	position: absolute;
	bottom: 0;
	right: 0;
	transform: translateY(50%);
	max-width: min(50%, 206px);
	z-index: 2;
}

.home-hero-inner{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 50px;
}

.home-hero-logo{
	max-width: 200px;
	margin: 0 auto;
	position: relative;
	z-index: 3;
}

.home-hero-logo svg{
	width: 100%;
	height: auto;
}

.home-hero-image{
	position: relative;
}

.home-hero-highlight{
	background: var(--salmon);
	color: var(--purple);
	padding: 12px 24px;
	border-radius: 20px 20px 0 20px;
	position: absolute;
	top: 0;
	right: 0;
	font-size: var(--text-large);
}

.home-hero-highlight *{
	margin: 0;
}

.home-hero-content{
	font-size: var(--text-large);
	font-weight: 300;
	position: relative;
	z-index: 3;
}

.home-hero-content p{
	margin-bottom: 32px;
}

@media (min-width: 992px){
	.home-hero-graphic-desktop{
		display: block;
	}

	.home-hero-graphic-mobile{
		display: none;
	}

	.home-hero-graphic-1{
		max-width: min(30%, 515px);
	}

	.home-hero-graphic-2{
		max-width: min(30%, 527px);
	}

	.home-hero-inner{
		grid-template-columns: 474px minmax(0, auto);
		grid-template-rows: auto 1fr;
	}

	.home-hero-logo{
		margin: 0;
	}

	.home-hero-image{
		grid-column: 2;
		grid-row: 1 / span 2;
		padding-left: 20px;
	}

	.home-hero-content{
		grid-row: 2;
		align-self: end;
	}
}

@media (min-width: 1200px){
	.home-hero-logo{
		max-width: 380px;
	}

	.home-hero-image{
		padding-left: 190px;
	}

	.home-hero-highlight{
		padding: 24px 32px;
		top: 25%;
		left: 20px;
		right: auto;
		border-radius: 40px 40px 0 40px;
	}
}


/* HOME - ABOUT */
.home-about{
	padding: var(--section-padding) 0;
}

.home-about-inner{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 36px;
	column-gap: 100px;
	align-items: center;
	position: relative;
	z-index: 2;
}

.home-about-image{
	margin: 0 auto;
	max-width: 80%;
}

.home-about-image img{
	border-radius: 70px 70px 0 70px;
	aspect-ratio: 1.1;
	object-fit: cover;
}

.home-about-content h2{
	color: var(--orange);
	margin-bottom: 0.5em;
}

.home-about-content > *:last-child strong{
	color: var(--orange);
}

@media (min-width: 768px){
	.home-about-inner{
		grid-template-columns: minmax(0, 4.5fr) minmax(0, 5.5fr);
	}

	.home-about-image{
		max-width: 100%;
	}
}


/* HOME - LOCATION */
.home-location{
	position: relative;
}

.home-location-graphic-mobile,
.home-location-graphic-desktop{
	pointer-events: none;
}

.home-location-graphic-desktop{
	display: none;
}

:is(.home-location-graphic-mobile, .home-location-graphic-desktop) svg{
	width: 100%;
	height: auto;
}

.home-location-graphic-desktop{
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translateY(45%);
	max-width: min(25%, 480px);
}

.home-location-graphic-mobile{
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translateY(25%);
	max-width: min(50%, 198px);
	z-index: 2;
}

.home-location-inner{
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 38px;
	column-gap: 70px;
	align-items: center;
	color: var(--white);
}

.home-location-inner::before{
	content: '';
	display: block;
	position: absolute;
	width: 100vw;
	height: 100%;
	background-color: var(--orange);
	z-index: -1;
}

.home-location-photo{
	border-radius: 0 50px 50px 50px;
	overflow: hidden;
}

.home-location-photo .swiper-slide{
	height: auto;
}

.home-location-item{
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	min-height: 100%;
}

.home-location-item img{
	height: 100%!important;
	min-width: 100%;
	min-height: min(100%, 300px);
	object-fit: cover;
	grid-column: 1;
	grid-row: 1;
}

.home-location-item figcaption{
	grid-column: 1;
	grid-row: 1;
	padding: 24px 50px;
	color: var(--white);
	text-shadow: 0 0 10px rgba(0,0,0,0.5);
	align-self: end;
}


.home-location-content-swiper .swiper-controls{
	display: flex;
	gap: 80px;
	margin-top: 45px;
	margin-bottom: 2px;
}

.home-location-content-swiper .swiper-controls button{
	appearance: none;
	border: none;
	padding: 0;
	background-color: transparent;
	color: var(--white);
	transition: all 0.3s ease;
	cursor: pointer;
}

.home-location-content-swiper .swiper-controls button svg{
	width: 25px;
	height: auto;
}

.home-location-content-swiper .swiper-controls button:hover{
	color: var(--purple);
}

.home-location-content-swiper .swiper-controls button:focus{
	outline: none;
}

.home-location-content-swiper .swiper-controls button:focus-visible{
	outline: 1px dotted var(--purple);
}

@media (max-width: 767px){
	.home-location{
		overflow: hidden;
	}

	.home-location-inner{
		padding-bottom: var(--section-padding);
	}

	.home-location-inner::before{
		top: 42px;
		right: calc(var(--gutter) / -2);
		height: calc(100% - 42px);
	}

	.home-location-photo{
		position: relative;
		z-index: 1;
	}

	.home-location-content{
		position: relative;
		z-index: 3;
	}
}

@media (min-width: 768px){
	.home-location-graphic-desktop{
		display: block;
	}

	.home-location-graphic-mobile{
		display: none;
	}

	.home-location-inner{
		grid-template-columns: minmax(0, 0.33fr) minmax(0, 0.66fr);
		padding: 40px 0;
	}

	.home-location-inner::before{
		top: 0;
		right: 20%;
	}

	.home-location-photo{
		grid-row: 1;
		grid-column: 2;
	}

	.home-location-content{
		grid-row: 1;
		grid-column: 1;
	}

	.home-location-photo{
		border-radius: 0 70px 70px 70px;
	}

	.home-location-item figcaption{
		padding: 32px 70px;
	}
}


/* HOME - VIEW */
.home-view{
	position: relative;
	padding: var(--section-padding) 0;
}

.home-view:has(+.home-differentiators){
	padding-bottom: 0;
}

.home-view-inner{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.home-view img{
	object-fit: cover;
	min-height: 366px;
	grid-column: 1;
	grid-row: 1;
}

.home-view-description{
	grid-column: 1;
	grid-row: 1;
	align-self: end;
	justify-self: center;
	max-width: calc(100% - var(--gutter));
	margin: 0 auto var(--gutter);
	color: var(--white);
	text-shadow: 0 4px 4px rgba(0,0,0,0.1);
	display: flex;
	align-items: center;
	column-gap: 10px;
}

.home-view-description svg{
	width: 34px;
	height: auto;
}

@media (max-width: 767px){
	.home-location + .home-view{
		padding-top: 0;
	}
}

@media (min-width: 768px){
	.home-view img{
		border-radius: 70px 0 70px 70px;
		min-height: 595px;
	}

	.home-view-description svg{
		width: 62px;
	}
}


/* HOME - DIFFERENTIATORS */
.home-differentiators{
	padding: var(--section-padding) 0;
	position: relative;
}

.home-differentiators-graphic{
	pointer-events: none;
	position: absolute;
	bottom: 0;
	right: 0;
	max-width: min(50%, 206px);
	z-index: -1;
}

.home-differentiators-graphic svg{
	width: 100%;
	height: auto;
}

.home-differentiators-inner{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 35px;
	column-gap: 130px;
	grid-auto-flow: dense;
}

.home-differentiators-content{
	align-self: center;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 35px;
}

.home-differentiators-content h2{
	color: var(--orange);
}

.home-differentiators-image{
	text-align: center;
}

.home-differentiators-image img{
	border-radius: 0 70px 70px 70px;
	object-fit: cover;
	aspect-ratio: 1.1;
	max-width: min(80%, 500px);
}

@media (min-width: 992px) {
	.home-differentiators-graphic{
		display: none;
	}
	
	.home-differentiators-inner{
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}

	.home-differentiators-image{
		grid-column: 1;
	}

	.home-differentiators-image img{
		aspect-ratio: 0.8;
		max-width: 100%;
	}

	.home-differentiators-content{
		grid-column: 2;
		grid-template-columns: repeat(2, minmax(0, auto));
	}

	.home-differentiators-content > :is(h2, .home-differentiators-button){
		grid-column: span 2;
		margin-right: auto;
	}
}


/* HOME - AMENITIES */
.home-amenities{
	padding: var(--section-padding) 0;
	background-color: var(--yellow);
	position: relative;
}

.home-amenities-graphic-mobile,
.home-amenities-graphic-desktop{
	pointer-events: none;
}

.home-amenities-graphic-desktop{
	display: none;
}

:is(.home-amenities-graphic-mobile, .home-amenities-graphic-desktop) svg{
	width: 100%;
	height: auto;
}

.home-amenities-graphic-desktop{
	position: absolute;
	bottom: 0;
	right: 0;
	transform: translateY(55%);
	max-width: min(20%, 440px);
}

.home-amenities-graphic-mobile{
	position: absolute;
	top: 100%;
	right: 0;
	transform: translateY(calc(var(--section-padding) * -1));
	max-width: min(100%, 398px);
}

.home-amenities-inner{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 36px;
	column-gap: 32px;
	position: relative;
}

.home-amenities h2{
	margin-bottom: 0;
}

.home-amenities-image-1 img{
	object-fit: cover;
	border-radius: 50px 0 50px 50px;
	aspect-ratio: 1.25;
}

.home-amenities-content{
	background-color: var(--orange);
	color: var(--white);
	padding: 36px;
	border-radius: 0 50px 50px 50px;
	align-self: center;
    justify-self: start;
	font-size: var(--text-large);
	position: relative;
}

.home-amenities-content > *:last-child{
	margin-bottom: 0;
}

.home-amenities-image-2 img{
	object-fit: cover;
	border-radius: 50px 0 50px 50px;
	aspect-ratio: 1.55;
}

.home-amenities-list{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 40px;
	row-gap: 20px;
	padding: 0;
	margin: 0;
}

.home-amenities-list li{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.home-amenities-list li :is(svg, img){
	width: 84px;
	height: auto;
	flex-shrink: 0;
}

.home-amenities-list li span{
	display: block;
	text-align: center;
}

@media (max-width: 767px){
	.home-amenities-content{
		margin-top: -60px;
	}
}

@media (min-width: 768px) {
	.home-amenities-graphic-desktop{
		display: block;
	}

	.home-amenities-graphic-mobile{
		display: none;
	}

	.home-amenities-inner{
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}

	.home-amenities-image-group{
		display: contents;
	}

	.home-amenities h2{
		grid-column: 1;
		grid-row: 1;
	}

	.home-amenities-image-1{
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.home-amenities-image-1 img{
		aspect-ratio: 1.73;
		border-radius: 70px 0 70px 70px;
	}

	.home-amenities-content{
		padding: 54px;
		grid-column: 1;
		grid-row: 2 / span 2;
		border-radius: 70px 0 70px 70px;
	}

	.home-amenities-image-2{
		grid-column: 1;
		grid-row: 4;
		aspect-ratio: 1.3;
	}

	.home-amenities-list{
		grid-column: 2;
		grid-row: 3 / span 2;
		justify-self: center;
	}

	.home-amenities-list li{
		flex-direction: row;
	}

	.home-amenities-list li span{
		text-align: left;
	}
}

@media (min-width: 1200px){
	.home-amenities h2,
	.home-amenities-image-2{
		padding-left: 52px;
	}
}


/* HOME - BLUEPRINTS */
.home-blueprints{
	padding: var(--section-padding) 0;
	position: relative;
}

.home-blueprints-list{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 30px;
}

.home-blueprints-item{
	appearance: none;
	background-color: var(--white);
	border: none;
	border-radius: 50px;
	padding: 32px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
}

.home-blueprints-item:focus{
	outline: none;
}

.home-blueprints-item:focus-visible{
	outline: 1px dotted var(--orange);
}

.home-blueprints-item h2{
	font-size: var(--title-3);
	color: var(--orange);
	margin-bottom: 0.25em;
}

.home-blueprints-item p{
	margin-bottom: 0.5em;
}

.home-blueprints-item img{
	margin: auto 0;
}

.home-blueprints-disclaimer{
	margin: 48px 0 0;
	font-weight: 300;
	text-align: center;
	font-size: 1rem;
}

.home-blueprints-modal{
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	border: none;
	background-color: rgba(18,18,18,0.9);
	color: var(--white);
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.home-blueprints-modal[open]{
	display: flex;
}

.home-blueprints-modal::backdrop{
	background-color: transparent;
}

.home-blueprints-modal-close{
	appearance: none;
	background-color: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	position: absolute;
	top: calc(var(--gutter) / 2);
	right: calc(var(--gutter) / 2);
	color: var(--orange);
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 10;
}

.home-blueprints-modal-close:hover{
	color: var(--yellow);
}

.home-blueprints-modal-close:focus{
	outline: none;
}

.home-blueprints-modal-close:focus-visible{
	outline: 1px dotted var(--orange);	
}

.home-blueprints-modal-close svg{
	width: 60px;
}

.home-blueprints-swiper-item{
	align-self: center;
	padding: 0 30px;
}

.home-blueprints-swiper-item h2{
	font-size: var(--title-3);
	color: var(--orange);
	margin-bottom: 0.25em;
}

.home-blueprints-swiper-item p{
	margin-bottom: 0.5em;
}

.home-blueprints-swiper-item img{
	margin: auto;
	max-height: 70vh;
	object-fit: contain;
}

.home-blueprints-swiper .swiper-controls{
	display: flex;
	justify-content: space-between;
	gap: 80px;
	width: 100%;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 2;
}

.home-blueprints-swiper .swiper-controls button{
	appearance: none;
	border: none;
	padding: 0;
	background-color: transparent;
	color: var(--orange);
	transition: all 0.3s ease;
	cursor: pointer;
	pointer-events: all;
}

.home-blueprints-swiper .swiper-controls button svg{
	width: 25px;
	height: auto;
}

.home-blueprints-swiper .swiper-controls button:hover{
	color: var(--yellow);
}

.home-blueprints-swiper .swiper-controls button:focus{
	outline: none;
}

.home-blueprints-swiper .swiper-controls button:focus-visible{
	outline: 1px dotted var(--orange);
}

@media (min-width: 768px){

	.home-blueprints-list{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}


/* HOME - GALLERY */
.home-gallery{
	position: relative;
}

.home-gallery-item{
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
}

.home-gallery-item-btn {
	all: unset;
	cursor: pointer;
	display: block;
	width: 100%;
}

.home-gallery-item img{
	min-height: 300px;
	object-fit: cover;
	grid-column: 1;
	grid-row: 1;
}

.home-gallery-item figcaption{
	grid-column: 1;
	grid-row: 1;
	padding: 16px;
	color: var(--white);
	text-shadow: 0 0 10px rgba(0,0,0,0.5);
	align-self: end;
}

.home-gallery-swiper .swiper-controls{
	display: flex;
	justify-content: center;
	gap: 80px;
	margin-top: 45px;
	margin-bottom: 2px;
}

.home-gallery-swiper .swiper-controls button{
	appearance: none;
	border: none;
	padding: 0;
	background-color: transparent;
	color: var(--purple);
	transition: all 0.3s ease;
	cursor: pointer;
}

.home-gallery-swiper .swiper-controls button svg{
	width: 25px;
	height: auto;
}

.home-gallery-swiper .swiper-controls button:hover{
	color: var(--orange);
}

.home-gallery-swiper .swiper-controls button:focus{
	outline: none;
}

.home-gallery-swiper .swiper-controls button:focus-visible{
	outline: 1px dotted var(--orange);
}

.home-gallery-graphic{
	pointer-events: none;
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translateY(30%);
	max-width: min(40%, 607px);
	z-index: -1;
}

.home-gallery-graphic svg{
	width: 100%;
	height: auto;
}

.home-gallery-modal{
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	border: none;
	background-color: rgba(18,18,18,0.9);
	color: var(--white);
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.home-gallery-modal[open]{
	display: flex;
}

.home-gallery-modal::backdrop{
	background-color: transparent;
}

.home-gallery-modal-close{
	appearance: none;
	background-color: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	position: absolute;
	top: calc(var(--gutter) / 2);
	right: calc(var(--gutter) / 2);
	color: var(--orange);
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 10;
}

.home-gallery-modal-close:hover{
	color: var(--yellow);
}

.home-gallery-modal-close:focus{
	outline: none;
}

.home-gallery-modal-close:focus-visible{
	outline: 1px dotted var(--orange);	
}

.home-gallery-modal-close svg{
	width: 60px;
}

.home-gallery-modal-swiper-item{
	align-self: center;
	padding: 0 30px;
}

.home-gallery-modal-swiper-item figcaption{
	text-align: center;
	margin-top: 10px;
}

.home-gallery-modal-swiper-item h2{
	font-size: var(--title-3);
	color: var(--orange);
	margin-bottom: 0.25em;
}

.home-gallery-modal-swiper-item p{
	margin-bottom: 0.5em;
}

.home-gallery-modal-swiper-item img{
	margin: auto;
	max-height: 70vh;
	object-fit: contain;
}

.home-gallery-modal-swiper .swiper-controls{
	display: flex;
	justify-content: space-between;
	gap: 80px;
	width: 100%;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 2;
}

.home-gallery-modal-swiper .swiper-controls button{
	appearance: none;
	border: none;
	padding: 0;
	background-color: transparent;
	color: var(--orange);
	transition: all 0.3s ease;
	cursor: pointer;
	pointer-events: all;
}

.home-gallery-modal-swiper .swiper-controls button svg{
	width: 25px;
	height: auto;
}

.home-gallery-modal-swiper .swiper-controls button:hover{
	color: var(--yellow);
}

.home-gallery-modal-swiper .swiper-controls button:focus{
	outline: none;
}

.home-gallery-modal-swiper .swiper-controls button:focus-visible{
	outline: 1px dotted var(--orange);
}

@media (max-width: 767px) {
	.home-gallery-graphic{
		display: none;
	}

	.home-gallery-modal-inner {
		padding: 24px 0;
		max-width: 98vw;
	}
	
	.home-gallery-modal-close {
		top: 12px;
		right: 12px;
		width: 40px;
		height: 40px;
	}
	
	.home-gallery-modal-swiper-item img {
		max-height: 45vh;
		border-radius: 12px;
	}
}


/* HOME - CONTACT */
.home-contact{
	padding: var(--section-padding) 0;
}

.home-contact a{
	text-decoration: none;
}

.home-contact :is(h3, h4){
	margin-bottom: 0;
}

.home-contact-content-list{
	padding: 0;
	margin: 0;
}

.home-contact-content-list li{
	display: block;
	list-style: none;
}

.home-contact-content-list li a{
	display: flex;
	column-gap: 8px;
}

.home-contact-content-list li a :is(svg, img){
	width: 22px;
	height: auto;
	flex-shrink: 0;
}

.form-row{
	margin-bottom: 16px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 32px;
	row-gap: 16px;
}

:is(.form-row, .form-submit) p{
	margin-bottom: 0;
}

:is(.form-row, .form-submit) p br{
	display: none;
}

.form-row :is(input:not([type="checkbox"], [type="radio"], [type="button"]), textarea){
	appearance: none;
	border-radius: 0;
	background: transparent;
	width: 100%;
	border: 1px solid var(--white);
	border-radius: 50px;
	min-height: 47px;
	transition: border 0.3s ease;
	color: var(--white);
	padding: 10px 24px;
}

.form-row :is(input:not([type="checkbox"], [type="radio"], [type="button"]), textarea)::placeholder{
	color: var(--white);
}

.form-row :is(input:not([type="checkbox"], [type="radio"], [type="button"]), textarea):focus{
	outline: none;
	border-color: var(--yellow);
}

.form-row :is(input:not([type="checkbox"], [type="radio"], [type="button"]), textarea).wpcf7-not-valid{
	border-color: var(--white);
}

.form-row .wpcf7-not-valid-tip{
	color: var(--white);
	padding-left: 24px;
}

.form-submit{
	margin-top: 32px;
}

.form-submit,
.form-submit p{
	display: flex;
	align-items: center;
}

.wpcf7 form .wpcf7-response-output{
	padding: 0;
	margin: 32px 0 0;
	border: none;
}

.wpcf7-not-valid-tip{
	font-size: 0.875rem;
	font-weight: normal;
}

@media (max-width: 767px){
	.home-contact-form{
		position: relative;
		color: var(--white);
		padding: 64px 0;
	}

	.home-contact-form::before{
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: calc(var(--gutter) / -2);
		width: calc(100% + var(--gutter));
		height: 100%;
		background-color: var(--orange);
		border-radius: 50px 50px 50px 0;
		z-index: -1;
	}

	.home-contact-content:not(:first-child){
		padding-top: var(--section-padding);
	}

	.home-contact h2{
		font-size: var(--title-3);
		margin-bottom: 20px;
	}

	.home-contact h3{
		font-size: 1.375rem;
	}

	.home-contact h4{
		font-size: var(--text-large);
	}

	.home-contact-content a{
		color: var(--purple);
	}

	.home-contact-content a:is(:hover, :focus, :active){
		color: var(--orange);
	}
}

@media (min-width: 768px){
	.home-contact-inner{
		position: relative;
		color: var(--white);
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
		column-gap: var(--gutter);
		padding: var(--gutter);
	}

	.home-contact-inner::before{
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: var(--orange);
		border-radius: 70px 70px 70px 0;
		z-index: -1;
	}

	.home-contact h2{
		font-size: 1.875rem;
		margin-bottom: 40px;
	}

	.home-contact h4{
		font-size: var(--text);
		margin-top: 28px;
	}

	.home-contact a{
		color: var(--white)
	}

	.home-contact a:is(:hover, :focus, :active){
		color: var(--purple);
	}
}

@media (min-width: 1200px){
	.home-contact-inner{
		column-gap: calc(var(--gutter) * 2);
	}

	.home-contact-form{
		padding-left: var(--gutter);
	}
}


/* HOME - MAP */
.home-map{
	position: relative;
}

.home-map::before{
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 50%;
	background-color: var(--purple);
}

.home-map-wrapper{
	overflow: hidden;
	filter: grayscale(1);
	height: 470px;
}

.home-map-wrapper iframe{
	width: 100%;
	height: calc(100% + 600px);
	margin-top: -300px;
	border: none;
}

@media (min-width: 768px){
	.home-map-wrapper{
		border-radius: 70px;
	}

	.form-row-2{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* FOOTER */
.footer{
	background-color: var(--purple);
	padding: var(--section-padding) 0;
	font-size: 1rem;
}

.footer-inner{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: 70px;
}

.footer .logo{
	display: block;
	max-width: min(430px, 65%);
}

.footer-contacts{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	column-gap: 30px;
	row-gap: 14px;
	padding: 0;
	margin: 0;
}

.footer-contacts li{
	display: block;
	list-style: none;
}

.footer-contacts li a{
	display: flex;
	align-items: center;
	column-gap: 12px;
	color: var(--white);
	text-decoration: none;
}

.footer-contacts li a :is(svg, img){
	color: var(--orange);
	width: 40px;
	height: auto;
	transition: all 0.3s ease;
}

.footer-contacts li a:is(:hover, :focus, :active) svg{
	color: var(--yellow);
}

.footer-contacts li a span{
	transition: all 0.3s ease;
}

.footer-contacts li a:is(:hover, :focus, :active) span{
	text-decoration: underline;
	color: var(--yellow);
}

.footer .whatsapp-button{
	position: fixed;
	bottom: 32px;
	right: 32px;
	z-index: 90;
	border-radius: 50%;
	overflow: hidden;
}

.footer .whatsapp-button svg{
	width: 62px;
	height: auto;
}

@media (min-width: 768px){
	.footer-contacts{
		flex-direction: row;
	}

	.footer-inner{
		flex-direction: column-reverse;
	}
}