/***************************************************************
# Variables
***************************************************************/

:root {
	/* --primary: #213145; */
	/* --secondary: #39809f; */
	/* --tertiary: #a58541; */

	--brand-charcoal: #22211e;
	--brand-gold: #b69b6a;
	--brand-white: #f3efe6;
	--brand-orchid: #533a50;

}


/***************************************************************
# Tags
***************************************************************/

html,
body {
	background: var(--brand-charcoal);
	color: var(--brand-white);
	font-family: trust-1a, sans-serif;
	line-height: 1.2;
}

h1,
h2,
h3,
h4,
h5 {
	font-family: parastoo, sans-serif;
	line-height: 0.9;
}

h2 {
	font-size: clamp(2rem, 6vw, 4rem);
}

p {
	font-size: 1rem;
}

/***************************************************************
# Buttons
***************************************************************/

.button,
a.button {
	background: var(--brand-orchid);
	color: var(--brand-white);
	transition: all .4s ease;
	font-size: 1rem;
	padding: 0.65em 1.7em;
	font-family: parastoo, sans-serif;
	max-width: 75vw;
}

.button--outline,
a.button--outline {
	background: none;
	border: 1px solid var(--brand-white);
}

.button--outline.button--gold,
a.button--outline.button--gold {
	color: var(--brand-gold);
	border-color: currentColor;
}

.button:hover,
a.button:hover {
	background: var(--brand-gold);
	color: var(--brand-charcoal);
}

.button svg,
a.button svg {
	fill: currentColor;
	vertical-align: center;
}





/***************************************************************
# Common
***************************************************************/

.background-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -10;
}

.button-container {
	display: flex;
	flex-flow: wrap;
	gap: 1em;
}

.heading {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	position: relative;
}

.heading--deco::before,
.heading--deco::after {
	display: none;
	content: "";
	width: 3rem;
	height: 0.15rem;
	background: currentColor;
	vertical-align: center;
	margin: 0 0.4em;
}

.heading--deco::before {
	right: 100%;
}

.heading--deco::after {
	left: 100%;
}

@media( min-width: 48rem ) {

.heading--deco::before,
.heading--deco::after {
	display: inline-block;
}

}

.subheading {
	font-family: parastoo, sans-serif;
	color: var(--brand-gold);
	text-transform: uppercase;
	font-size: clamp(1rem, 5vw, 1.5rem);
	letter-spacing: 0.1em;
	margin: 0 0 .5em;
}

.image--border {}

.image--border {
	position: relative;
	line-height: 0;
}

.image--border::before,
.image--border::after {
	display: block;
	content: "";
	width: 6em;
	height: 3em;
	border: 1px solid var(--brand-gold);
	position: absolute;
}

.image--border::before {
	top: 1em;
	left: 1em;
	border-width: 2px 0px 0px 2px;
}

.image--border::after {
	right: 1em;
	bottom: 1em;
	border-width: 0px 2px 2px 0px;
}









/***************************************************************
# Swiper
***************************************************************/

.swiper-pagination {
	position: static;
	text-align: left;
	margin-top: 1em;
}

.swiper-pagination-bullet {
	background: var(--brand-gold);
	width: 0.875rem;
	height: 0.875rem;
}

.swiper-pagination-bullet-active {}




/***************************************************************
# Sections
***************************************************************/

.section--padding {
	position: relative;
	z-index: 1;
}

/* gold */

.section--gold {
	background: var(--brand-gold);
	color: var(--brand-charcoal);
}

.section--gold .heading {
	color: var(--brand-white);
}

.section--gold .subheading {
	color: inherit;
}



/* white */

.section--white {
	background: var(--brand-white);
	color: var(--brand-charcoal);
}




/***************************************************************
# Header
***************************************************************/

#header {
	border-top: .5rem solid var(--brand-gold);
	background: none;
	padding: 1rem 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
}

#header::after {
	display: block;
	content: "";
	background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	opacity: .5;
	transition: all .4s ease;
}

#header:hover::after {
	opacity: 1;
	height: 200%;
}


#header .row {
	display: flex;
	flex-flow: row;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

/* logo */

#header .logo svg {
	fill: var(--brand-gold);
	width: clamp(2rem, 15vw, 6rem);
}

/* menu */

#header .col--menu {
	display: none;
}

#header .menu {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: flex;
	flex-flow: row;
	gap: 2rem;
	font-size: 1.125rem;
	font-family: parastoo, sans-serif;
}

#header .menu a:hover {
	color: var(--brand-gold);
}

/* ctas */

#header .col--ctas {
	display: none;
	margin-left: auto;
	flex-flow: row;
	gap: 2rem;
}

/* button */

#header .col--button {
	display: block;
	line-height: 0;
	margin-left: auto;
}

/* admin bar */

.admin-bar #header {
	top: 46px;
}

@media(min-width: 783px) {

	.admin-bar #header {
		top: 32px;
	}

}

/* sticky */

#header.header--sticky {
	position: fixed;
	top: 0;
	transition: transform .4s ease;
}

#header.header--hidden {
	transform: translateY(-100%);
}

#header.header--show {
	transform: translateY(0%);
}



/* responsive */

@media(min-width: 40rem) {

	#header .col--ctas {
		display: flex;
	}

	#header .col--button {
		margin: 0;
	}

}

@media(min-width: 64rem) {

	#header .col--menu {
		display: block;
	}

	#header .col--button {
		display: none;
	}

}




/***************************************************************
# Footer
***************************************************************/

#footer {
	background: var(--brand-charcoal);
	background: linear-gradient(65deg,rgba(45, 46, 44, 1) 0%, rgba(26, 27, 26, 1) 100%);
	color: var(--brand-gold);
	padding: 4rem 0;
	position: relative;
	z-index: 5;
	overflow: hidden;
	border-bottom: .5rem solid var(--brand-orchid);
}

#footer .logo {
	width: 6rem;
	margin: 0 auto;
}

#footer .block-socials {
	justify-content: center;
}

#footer .row {
	display: flex;
	flex-flow: column;
	gap: 2rem;
}

#footer .col {
	display: flex;
	flex-flow: column;
	gap: 2rem;
}

#footer .contact {
	max-width: 14em;
	display: flex;
	flex-flow: column;
	gap: 0.875em;
	margin: 0 auto;
	text-align: left;
	justify-content: center;
}

#footer .contact .item {
	display: flex;
	flex-flow: row;
	gap: 0.5em;
	align-items: start;
}

#footer .contact .item span {
	flex: 1;
}

#footer .contact svg {
	fill: var(--brand-white);
	vertical-align: middle;
}

#footer .socials {
	text-transform: uppercase;
	font-size: 0.875rem;
}

#footer .socials a {
	background: var(--brand-white);
}

#footer .socials svg {
	fill: var(--brand-charcoal);
}

#footer .legal {
	text-transform: uppercase;
	font-size: 0.875rem;
}

#footer .icon {
	fill: var(--brand-white);
	opacity: 0.02;
	position: absolute;
	top: 50%;
	left: 70%;
	transform: translate(-50%, -50%);
	width: 100%;
	max-width: 128rem;
	z-index: -1;
}

@media(min-width: 48rem) {

	#footer {
		text-align: initial;
	}

	#footer .row {
		flex-flow: row;
		justify-content: space-between;
	}

	#footer .col:nth-child(2) {
		text-align: right;
	}

	#footer .logo {
		margin: 0;
	}

	#footer .block-socials {
		justify-content: end;
	}

	#footer .legal {
		margin-top: auto;
	}

}





/***************************************************************
# Mobile Menu
***************************************************************/

#mobile-menu {
	background: var(--brand-charcoal);
	background: linear-gradient(65deg,rgba(45, 46, 44, 1) 0%, rgba(26, 27, 26, 1) 100%);
	border-top: .5rem solid var(--brand-orchid);
}

#mobile-menu .logo {
	max-width: 4rem;
}

#mobile-menu .menu {
	font-size: 2rem;
	font-family: parastoo, sans-serif;
}


#mobile-menu .contact {
	display: flex;
	flex-flow: column;
	gap: 0.875em;
	text-align: left;
	justify-content: center;
}

#mobile-menu .contact .item {
	display: flex;
	flex-flow: row;
	gap: 0.5em;
	align-items: start;
}

#mobile-menu .contact .item span {
	flex: 1;
}

#mobile-menu .contact svg {
	fill: var(--brand-gold);
	vertical-align: middle;
}




/***************************************************************
# Block > Socials
***************************************************************/

.block-socials {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: flex;
	gap: 0.875rem;
}

.block-socials a {
	display: block;
	width: 3rem;
	height: 3rem;
	background: var(--brand-orchid);
	border-radius: 50%;
	position: relative;
	transition: all .4s ease;
}

.block-socials a:hover {
	background: var(--brand-gold);
}

.block-socials svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	fill: var(--brand-white);
	width: 50%;
	height: 50%;
}




/***************************************************************
# Block > Hero
***************************************************************/

#hero {
	padding-top: clamp(8rem, 20vw, 16rem);
	padding-bottom: clamp(6rem, 16vw, 12rem);
	position: relative;
	z-index: 5;
}

#hero .heading {
	font-size: clamp(3rem, 8vw, 6rem);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

#hero p {
	max-width: 28em;
}

#hero .block-socials {
	margin-top: clamp(2rem, 5vw, 4rem);
}




/***************************************************************
# Block > Text / Image
***************************************************************/

.block-text-image {
	overflow-x: clip;
}

.block-text-image .container {
	position: relative;
	z-index: 1;
}

.block-text-image .row {
	display: flex;
	flex-flow: column;
	gap: 2rem;
}

.block-text-image .col--image {
	position: relative;
	line-height: 0;
}

.block-text-image .col--image::before,
.block-text-image .col--image::after {
	display: block;
	content: "";
	width: 6em;
	height: 3em;
	border: 1px solid var(--brand-gold);
	position: absolute;
}

.block-text-image .col--image::before {
	top: 1em;
	left: 1em;
	border-width: 2px 0px 0px 2px;
}

.block-text-image .col--image::after {
	right: 1em;
	bottom: 1em;
	border-width: 0px 2px 2px 0px;
}

.block-text-image .col--image img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
}

.block-text-image .stamp {
	position: absolute;
	fill: var(--brand-white);
	z-index: -1;
	width: 80%;
	opacity: .02;
}

.block-text-image .stamp--1 {
	left: 0;
	top: 0;
	transform: translate(-40%, -50%);
}

.block-text-image .stamp--2 {
	right: 0;
	top: 100%;
	transform: translate(40%, -50%);
}

@media(min-width: 48rem) {

	.block-text-image .row {
		flex-flow: row;
		align-items: center;
		justify-content: space-between;
	}

	.block-text-image .col--text {
		max-width: 26rem;
	}

	.block-text-image .col--image {
		width: 50%;
	}

}



/***************************************************************
# Block > Navigation
***************************************************************/

.block-navigation {
	text-align: center;
	position: relative;
	z-index: 5;
}

.block-navigation .header {
	position: relative;
}

.block-navigation .item-container {
	display: flex;
	flex-flow: wrap;
	gap: 1.5rem;
	margin-top: 2rem;
	justify-content: center;
}

.block-navigation .item {
	color: var(--brand-white);
	text-decoration: none;
	text-align: left;
	display: block;
	position: relative;
	padding: 1rem;
	width: calc(50% - 0.75rem);
	max-width: 16rem;
	aspect-ratio: 2/3;
	display: flex;
	flex-flow: column;
	justify-content: end;
	overflow: hidden;
}

.block-navigation .item .background-image {
	transition: all .4s ease;
}

.block-navigation .item::before {
	position: absolute;
	content: "";
	bottom: 0;
	left: 0;
	width: 100%;
	height: 30%;
	background: linear-gradient(0deg, rgba(82, 58, 81, 1) 0%, rgba(82, 58, 81, 0) 100%);
	z-index: -1;
	opacity: 0;
	transition: all .4s ease;
}

.block-navigation .item::after {
	position: absolute;
	content: "";
	bottom: 0;
	left: 0;
	width: 100%;
	height: 30%;
	background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
	z-index: -2;
	transition: all .4s ease;
}

.block-navigation .item:hover::before {
	background: linear-gradient(0deg, rgba(82, 58, 81, 1) 0%, rgba(82, 58, 81, 0) 100%);
	height: 70%;
	opacity: .8;
}

.block-navigation .item:hover .background-image {
	transform: scale(1.05);
}

.block-navigation .item-title {
	text-transform: uppercase;
	color: var(--brand-white);
	font-size: clamp(1rem, 2vw, 1.375rem);
}

.block-navigation .item-subheading {
	text-transform: uppercase;
	color: var(--brand-gold);
	margin-top: .5em;
	font-size: 0.865rem;
}

.block-navigation>.background-image {
	mix-blend-mode: darken;
	opacity: .2;
}

@media(min-width: 48rem) {

	.block-navigation .item-container {
		flex-flow: row;
	}

}

@media(min-width: 72rem) {

	.block-navigation .header .button {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

}





/***************************************************************
# Block > Widget
***************************************************************/

.block-widget {
	margin: 1rem;
}

.block-widget iframe {
	display: block;
	width: 100%;
	min-height: 20rem;
	border: 2px dashed var(--brand-gold);
	border-radius: 3rem;
	margin-top: 2rem;
	aspect-ratio: 4/3;
}

.block-widget .image {
	width: 100%;
	height: 100%;
	display: none;
}

.block-widget .col--text {
	padding: clamp(2rem, 5vw, 6rem);
}

@media(min-width: 48rem) {

	.block-widget .row {
		display: flex;
		flex-flow: row;
	}

	.block-widget .col--image {
		width: 50%;
		position: relative;
		z-index: 1;
	}

	.block-widget .col--text {
		max-width: 64rem;
		width: 50%;
	}

	.block-widget .image {
		display: block;
	}

}


/***************************************************************
# Block > Review
***************************************************************/

.block-reviews {
	background: var(--brand-charcoal);
}

.block-reviews .heading {
	margin-bottom: 1rem;
}

.block-reviews>.background-image {
	mix-blend-mode: multiply;
}

.block-reviews .row {
	display: flex;
	flex-flow: column;
	gap: clamp(2rem, 6vw, 10rem);
}


.block-reviews .item-text {
	color: var(--brand-gold);
	font-size: 1.125rem;
	margin-bottom: .5em;
}

.block-reviews .item-name {
	text-transform: uppercase;
	font-size: 0.875rem;
}

.block-reviews .swiper {}

.block-reviews .wrapper {
	position: relative;
	padding: 5%;
}

.block-reviews .wrapper::before,
.block-reviews .wrapper::after {
	display: block;
	content: "";
	width: 6em;
	height: 3em;
	border: 1px solid var(--brand-gold);
	position: absolute;
}

.block-reviews .wrapper::before {
	top: 0em;
	left: 0em;
	border-width: 2px 0px 0px 2px;
}

.block-reviews .wrapper::after {
	right: 0em;
	bottom: 0em;
	border-width: 0px 2px 2px 0px;
}

.block-reviews .stars {
	display: flex;
	flex-flow: row;
	margin-bottom: 1rem;
}

.block-reviews .stars svg {
	fill: var(--brand-gold);
}

@media(min-width: 64rem) {

	.block-reviews .row {
		flex-flow: row-reverse;
		align-items: center;
		justify-content: space-between;
	}

	.block-reviews .col--reviews {
		flex: 1;
		width: 50%;
	}

	.block-reviews .col--text {
		max-width: 23rem;
	}

}

/***************************************************************
# Block > Gallery
***************************************************************/

.block-gallery {
	padding: 0.875rem;
}

.block-gallery .item-container {
	display: flex;
	flex-flow: row;
	gap: 0.875rem;
}

.block-gallery .item-container img {
	width: 100%;
	aspect-ratio: 3/4;
	flex: 1;
	object-fit: cover;
}





/***************************************************************
# Page > Home
***************************************************************/

.home .page-title {
	display: none;
}