/*
 * Both frames are rendered at their exact Figma pixel size and then scaled to
 * the viewport, so every coordinate in the data files stays literal.
 */

.cle-fp-page {
	margin: 0 !important;
	padding: 0;
	background: #070707;
	color: #faf9f6;
}

.cle-fp-page #wpadminbar,
.cle-fp-page .skip-link {
	display: none !important;
}

.fp-wrap {
	width: 100%;
	overflow: hidden;
	background: #070707;
}

.fp {
	position: relative;
	margin: 0 auto;
	background: #070707;
	color: #faf9f6;
	transform-origin: top center;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: geometricPrecision;
}

.fp * {
	box-sizing: border-box;
}

.fx {
	position: absolute;
	margin: 0;
	padding: 0;
}

.fxt {
	display: block;
	overflow: visible;
}

.fp a:not(.elementor-button) {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.fp a.elementor-button {
	text-decoration: none;
	cursor: pointer;
}

/* Scale() on .fp breaks last-btn mask-composite and turns the metal frame green. */
.fp .last-btn .elementor-button::after {
	-webkit-mask: none;
	mask: none;
	background: none;
	padding: 0;
	box-shadow:
		inset 0 0 0 1.5px #d4a84a,
		inset 0 0 2px rgba(255, 255, 255, 0.55),
		inset 0 0 6px rgba(0, 0, 0, 0.22);
}

.fp .elementor-20 .elementor-element-e549c2f,
.fp .elementor-20 .elementor-element-a4aea0a {
	margin: 0 !important;
}

.fp-d .last-btn .elementor-button {
	width: 214px !important;
	height: 51px !important;
	min-height: 51px !important;
	padding: 0 20px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-family: "Playfair Display", serif !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 26.66px !important;
	letter-spacing: -0.8px !important;
}

.fp-d .last-btn .elementor-button-text {
	white-space: nowrap !important;
}

@media (min-width: 1200px) {
	body.cle-fp-page footer .elementor-element-da59d55 > .elementor-widget-image {
		transform: translateX(12px);
	}

	body.cle-fp-page footer .elementor-element-bbfbf88 {
		width: 1025px !important;
		max-width: calc(100vw - 415px);
		transform: translateX(-10px);
	}

	body.cle-fp-page footer .elementor-nav-menu--layout-horizontal,
	body.cle-fp-page footer .elementor-nav-menu--layout-horizontal > ul {
		width: 100% !important;
	}

	body.cle-fp-page footer .elementor-nav-menu--layout-horizontal > ul {
		justify-content: space-between !important;
		flex-wrap: nowrap !important;
	}

	body.cle-fp-page footer .elementor-nav-menu--layout-horizontal > ul::after {
		content: none !important;
		display: none !important;
	}

	body.cle-fp-page footer .elementor-nav-menu--layout-horizontal .elementor-item {
		padding-left: 0 !important;
		padding-right: 0 !important;
		white-space: nowrap;
	}
}

.fp a.fxt:hover {
	color: #b98f64;
}

body.cle-fp-cities .fp a.fx-map-city,
body.cle-fp-cities .fp a.fx-city-name {
	color: #faf9f6;
	z-index: 2;
}

body.cle-fp-cities .fp a.fx-map-city:hover,
body.cle-fp-cities .fp a.fx-city-name:hover,
body.cle-fp-cities .fp a.fx-city-btn:hover + a.fx-city-name,
body.cle-fp-cities .fp a.fx-city-name.is-city-hover,
body.cle-fp-cities .fp a.fx-map-city.is-city-hover {
	color: #B98F64 !important;
}

body.cle-fp-cities .fp a.fx-city-btn {
	z-index: 1;
	cursor: pointer;
}

/* The row-wide link paints at z-index 1, so the arrow needs to sit above it. */
body.cle-fp-cities .fp .fx-city-line {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent url("img/city-list-arrow.svg") center / 100% 8px no-repeat !important;
	height: 8px !important;
	transform: translateY(-4px) !important;
	z-index: 3 !important;
}

body.cle-fp-cities .fp .fx-city-line::before,
body.cle-fp-cities .fp .fx-city-line::after {
	content: none !important;
	display: none !important;
}

body.cle-fp-cities .fp a.fx-map-dot {
	z-index: 2;
}

.fp img {
	max-width: none;
	display: block;
	border: 0;
}

.fxi {
	width: 100%;
	height: 100%;
	object-fit: fill;
}

.fp-d .fx[style*="height:319px"] .fxi,
.fp-d .fx[style*="height:264.56px"] .fxi {
	object-fit: cover;
	object-position: center center;
}

.cle-fp-method .fp .fxi {
	object-fit: cover;
	object-position: center center;
}

.cle-fp-method .fp .fx-logo .fxi,
.cle-fp-method .fp .fx-hq-logo .fxi,
.cle-fp-method .fp .fx-key .fxi {
	object-fit: contain;
}

.fxv {
	object-fit: contain;
}

/*
 * Contact form. The box, radius and type styling all come from the Figma
 * frame, so these rules only strip native chrome and keep the control filling
 * the box it was measured at.
 */
.fxf {
	appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
	outline: none;
	color: #faf9f6;
}

.fxf::placeholder {
	color: inherit;
	opacity: 1;
}

.fxta {
	resize: none;
	padding-top: 20px;
	padding-bottom: 20px;
	line-height: inherit;
}

.fxsel {
	cursor: pointer;
}

.fxsel option {
	background: #161212;
	color: #faf9f6;
}

.fxf:focus,
.fxf:focus-visible {
	border: 1px solid #b98f64 !important;
	outline: none;
}

.fxbtn {
	border: 0;
	padding: 0;
	cursor: pointer;
}

.fp .fx-hero img,
.fp .fx-hero .fxi {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.fp .fx-hq-logo {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	overflow: visible !important;
	box-shadow: none !important;
	mix-blend-mode: lighten;
}

.fp .fx-hq-logo img,
.fp .fx-hq-logo .fxi {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center;
	background: transparent !important;
	mix-blend-mode: lighten;
}

.fp .fx-hq-logo.fx-hero-mark img,
.fp .fx-hq-logo.fx-hero-mark .fxi {
	object-position: center center;
}

.fp .fx-key {
	overflow: hidden;
	background: transparent !important;
}

.fp .fx-key .fxi {
	object-fit: contain !important;
	object-position: center center !important;
}

body.cle-fp-page .fp-wrap {
	width: 100%;
}

.fxnotice {
	width: 640px;
	max-width: 90%;
	font-family: "Nunito Sans", sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

.fxnotice-ok {
	color: #b98f64;
}

.fxnotice-err {
	color: #e0736a;
}

.fxnotice[hidden] {
	display: none !important;
}

.fp-m {
	display: none;
}

@media (max-width: 1023px) {
	.fp-d {
		display: none;
	}

	.fp-m {
		display: block;
	}

	body.cle-fp-cities .fp-m a.fx-map-dot {
		display: none !important;
	}

	body.cle-fp-cities .fp-m a.fx-map-city {
		white-space: nowrap !important;
		z-index: 3;
	}

	/* Overlay is dark; Elementor default item color #070707 is invisible. */
	body.cle-fp-page header.elementor-location-header .elementor-nav-menu--dropdown a,
	body.cle-fp-page header.elementor-location-header .elementor-nav-menu--dropdown a.elementor-item,
	body.cle-fp-page header.elementor-location-header .elementor-nav-menu--dropdown .elementor-sub-item {
		color: #faf9f6 !important;
	}

	body.cle-fp-page header.elementor-location-header .elementor-nav-menu--dropdown a.elementor-item-active {
		color: #b98f64 !important;
		background-color: #fff !important;
	}

	body.cle-fp-page header.elementor-location-header .elementor-nav-menu--dropdown a:hover,
	body.cle-fp-page header.elementor-location-header .elementor-nav-menu--dropdown a:focus {
		color: #b98f64 !important;
	}

	/* Desktop section CTAs stay on desktop; they are not part of the mobile stack. */
	body[class*="cle-fp-city-"] .fp-m .last-btn,
	body[class*="cle-fp-city-"] .fp-m a.elementor-button {
		display: none !important;
	}
}
