/*
 * Valnova touchscreen kiosk styles
 *
 * Editing model:
 * - WordPress blocks/patterns own content, links, images, and rough structure.
 * - This file owns Figma-precise placement, fixed-stage sizing, overlays, and
 *   interaction states that are awkward or brittle in the block sidebar.
 * - Keep new page work in the matching section below instead of adding styles
 *   at the bottom of the file.
 *
 * Table of contents:
 * 01. Design tokens
 * 02. WordPress and kiosk shell
 * 03. Shared components
 * 04. Landing / welcome page
 * 05. Begin your journey page
 * 06. Inner page shell and sidebar
 * 07. Lifestyle map page
 * 08. Neighborhoods map page
 * 09. Homes and builders pages
 * 10. Living here / nearby page
 * 11. About us page
 *
 * Within each page section, look for a named subsection before adding a new
 * rule. Keep a selector beside the page it renders on; use section 03 only
 * when the same component is genuinely shared across pages.
 */

/* 01. Design tokens and global typography
   Change these first when adjusting shared colors, typography, stage size, or
   landing page proportions. Page-specific one-off coordinates live with their
   page section. */
:root {
	--valnova-font-min: 32px;
	--valnova-font-xs: 36px;
	--valnova-font-sm: 40px;
	--valnova-font-md: 44px;
	--valnova-font-lg: 48px;
	--valnova-font-xl: 52px;
	--valnova-font-2xl: 56px;
	--valnova-font-display-md: 60px;
	--valnova-font-display-lg: 64px;
	--valnova-font-display-xl: 72px;
	--valnova-font-display-2xl: 80px;
	--theme-palette-color-1: #1a2f5c;
	--theme-palette-color-2: #29364f;
	--theme-palette-color-3: #1a2f5c;
	--theme-palette-color-4: #29364f;
	--theme-palette-color-5: #5f6d84;
	--theme-palette-color-6: #d9e0eb;
	--theme-palette-color-7: #f5f7fb;
	--theme-palette-color-8: #ffffff;
	--theme-text-color: #1a2f5c;
	--theme-headings-color: #1a2f5c;
	--theme-link-initial-color: #1a2f5c;
	--theme-link-hover-color: #29364f;
	--theme-button-background-initial-color: #1a2f5c;
	--theme-button-background-hover-color: #29364f;
	--theme-button-text-initial-color: #ffffff;
	--theme-button-text-hover-color: #ffffff;
	--theme-font-size: var(--valnova-font-min) !important;
	--theme-button-font-size: var(--valnova-font-min) !important;
	--theme-border-color: rgba(26, 47, 92, 0.18);
	--theme-content-spacing: 0;
	--theme-block-max-width: 3840px;
	--theme-block-wide-max-width: 3840px;
	--valnova-kiosk-width: 3840px;
	--valnova-kiosk-height: 2160px;
	--valnova-kiosk-scale: 1;
	--valnova-navy: #1a2f5c;
	--valnova-white: #ffffff;
	--valnova-page-bg: #f7f7f7;
	--valnova-green: #41b653;
	--valnova-card-shadow: 0 7px 22px rgba(0, 0, 0, 0.15);
	--valnova-touch-shadow: 0 7px 4px rgba(0, 0, 0, 0.25);
	--valnova-radius-sm: 15px;
	--valnova-radius-lg: 30px;
	--valnova-pill: 999px;
	/* Figma's 12px map annotations at the kiosk's 3x stage scale. */
	--valnova-nearby-map-label-font: var(--valnova-font-min);
	--valnova-nearby-map-road-label-font: var(--valnova-font-min);
	--valnova-nearby-map-future-road-font: var(--valnova-font-min);
}

body,
p,
li,
a,
button,
input,
textarea,
select,
label,
figcaption,
pre,
code,
samp,
kbd,
.ct-header,
.ct-footer,
.ct-menu-link,
.entry-meta,
.site-title,
.widget-title,
.page-title,
.entry-title {
	--theme-font-size: var(--valnova-font-min) !important;
	font-size: max(var(--valnova-font-min), 1em);
}

body :where(*) {
	--theme-font-size: var(--valnova-font-min) !important;
	--theme-button-font-size: var(--valnova-font-min) !important;
}

h1 {
	--theme-font-size: var(--valnova-font-xl) !important;
	font-size: var(--valnova-font-xl);
}

h2 {
	--theme-font-size: var(--valnova-font-lg) !important;
	font-size: var(--valnova-font-lg);
}

h3 {
	--theme-font-size: var(--valnova-font-md) !important;
	font-size: var(--valnova-font-md);
}

h4 {
	--theme-font-size: var(--valnova-font-sm) !important;
	font-size: var(--valnova-font-sm);
}

h5,
h6,
figcaption,
pre,
code,
samp,
kbd,
.ct-breadcrumbs,
.entry-meta {
	--theme-font-size: var(--valnova-font-min) !important;
	font-size: var(--valnova-font-min);
}

/* 02. WordPress and kiosk shell
   The fixed 3840 x 2160 stage and the optional inspection mode live here. */
html,
body {
	margin: 0;
	min-height: 100%;
	background: #000;
	font-family: Montserrat, Arial, sans-serif;
}

body.valnova-kiosk-template {
	overflow: hidden;
}

/* This is an appliance-style touch kiosk, not a keyboard or text-entry UI.
   Suppress browser selection, focus rings, and tap flashes without changing
   the persistent active states that show the current page, tab, or slide. */
body.valnova-kiosk-template,
body.valnova-kiosk-template * {
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	user-select: none;
}

body.valnova-kiosk-template :focus,
body.valnova-kiosk-template :focus-visible,
body.valnova-kiosk-template :focus-within {
	outline: none !important;
}

body.valnova-kiosk-template.valnova-kiosk-inspect {
	overflow: auto;
}

html:has(body.valnova-kiosk-template) {
	margin-top: 0 !important;
}

body.valnova-kiosk-template #wpadminbar {
	display: none;
}

.valnova-kiosk-page {
	align-items: center;
	display: flex;
	justify-content: center;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	background: #000;
	width: 100vw;
	width: 100dvw;
}

body.valnova-kiosk-inspect .valnova-kiosk-page {
	align-items: flex-start;
	box-sizing: content-box;
	height: calc((var(--valnova-kiosk-height) * var(--valnova-kiosk-scale)) + 64px);
	justify-content: flex-start;
	min-height: 100vh;
	min-width: 100vw;
	overflow: visible;
	padding: 32px;
	width: calc((var(--valnova-kiosk-width) * var(--valnova-kiosk-scale)) + 64px);
}

.valnova-kiosk {
	position: relative;
	width: var(--valnova-kiosk-width);
	height: var(--valnova-kiosk-height);
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--valnova-navy);
	color: var(--valnova-white);
	flex: 0 0 auto;
	transform: scale(var(--valnova-kiosk-scale));
}

/* Template-rendered shared dialogs need the same scaled kiosk stage as saved page dialogs. */
.valnova-kiosk--shared-modal {
	background: transparent;
	pointer-events: none;
	position: absolute;
}

.valnova-kiosk--shared-modal .valnova-modal {
	pointer-events: auto;
}

body.valnova-kiosk-inspect .valnova-kiosk {
	transform-origin: left top;
}

.valnova-kiosk :where(.wp-block-group, .wp-block-cover, .wp-block-image, figure, p) {
	margin: 0;
}

.valnova-kiosk a {
	text-decoration: none;
}

body .valnova-screen .v-nav .v-nav-item,
body .valnova-screen .au-card p,
body .valnova-screen .lh-label,
body .valnova-screen .lh-label em,
body .valnova-screen .lh-label small,
body .valnova-screen .n-label small,
body .valnova-screen .n-tip p,
body .hbb-screen .hbb-builder-hint,
body .hbb-screen .hbb-map-label,
body .hbb-screen .hbb-map-label small,
body .hbb-screen .hbb-map-note,
body .hbb-screen .hbb-nav .hbb-nav-item,
body .hbb-screen .hbb-tab small,
body .hbb-screen .hbb-tab span,
body .stk-block-text .stk-block-text__text {
	font-size: var(--valnova-font-min) !important;
}

/* 03. Shared components
   Use this section only for controls that appear on more than one kiosk page. */
.valnova-kiosk .wp-block-button__link {
	align-items: center;
	background: var(--valnova-navy);
	border-radius: var(--valnova-pill);
	box-shadow: 0 8px 4px rgba(0, 0, 0, 0.25);
	color: var(--valnova-white);
	display: inline-flex;
	font-size: var(--valnova-font-lg);
	font-weight: 400;
	gap: 16px;
	letter-spacing: -0.46px;
	line-height: 1;
	padding: 32px 48px;
	text-transform: uppercase;
}

.valnova-button-arrow {
	background: url("../img/arrow-right.svg") center / contain no-repeat;
	display: inline-block;
	height: 80px;
	width: 80px;
}

/* 04. Landing / welcome page
   Editable in WordPress: background image, logo image, tagline text, button
   label, and button link. Edit values above in :root for common placement and
   sizing tweaks; edit this section only for structural changes. */
.valnova-welcome {
	height: var(--valnova-kiosk-height);
	isolation: isolate;
	width: var(--valnova-kiosk-width);
}

.valnova-welcome__background,
.valnova-welcome__background figure {
	height: 100%;
	inset: 0;
	position: absolute;
	width: 100%;
}

.valnova-welcome__background {
	inset: 0;
	position: absolute;
}

.valnova-welcome__background figure {
	margin: 0;
}

.valnova-welcome__background img {
	display: block;
	height: 100%;
	inset: 0;
	max-width: none;
	object-fit: cover;
	object-position: center 22%;
	position: absolute;
	width: 100%;
}

.valnova-welcome__background::after {
	background: rgba(26, 47, 92, 0.35);
	content: "";
	inset: 0;
	position: absolute;
}

.valnova-welcome__content {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 100px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 2512px;
	z-index: 1;
}

.valnova-welcome__logo {
	height: 650px;
	width: 2512px;
	transform: translateY(-150px);
}

.valnova-welcome__logo img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.valnova-welcome__tagline {
	color: var(--valnova-white);
	font-size: var(--valnova-font-display-2xl);
	font-weight: 300;
	letter-spacing: 1.13px;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	top: 524px;
	width: 1168px;
	transform: translateY(-150px);
}

/* 05. Begin your journey page
   Includes the back button, introductory copy, and journey cards. */
.valnova-journey {
	background: var(--valnova-page-bg);
	color: var(--valnova-navy);
	height: var(--valnova-kiosk-height);
	width: var(--valnova-kiosk-width);
}

.valnova-journey__back {
	align-items: center;
	background: #ffffff;
	border: 2px solid #1c2f5c;
	border-radius: var(--valnova-pill);
	color: var(--valnova-navy);
	display: inline-flex;
	font-size: var(--valnova-font-lg);
	font-weight: 600;
	gap: 15px;
	height: 89px;
	justify-content: center;
	left: 161px;
	letter-spacing: -0.46px;
	line-height: 1;
	padding: 0 30px;
	position: absolute;
	top: 58px;
	z-index: 4;
}

.valnova-journey__back::before {
	background: url("../img/arrow-left-navy.svg") center / contain no-repeat;
	content: "";
	display: block;
	height: 45px;
	transform: rotate(180deg);
	width: 45px;
}

.valnova-journey__intro {
	align-items: center;
	display: flex;
	flex-direction: column;
	left: 50%;
	position: absolute;
	top: 164px;
	transform: translateX(-50%);
	width: 1542px;
	z-index: 2;
	gap: 32px;
}

.valnova-journey__logo-mark {
	height: 361px;
	margin: 0 0 30px;
	width: 627px;
}

.valnova-journey__logo-mark img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.valnova-journey__brand {
	color: var(--valnova-navy);
	font-size: 120px;
	font-weight: 400;
	letter-spacing: 22px;
	line-height: 0.8;
	margin: 0;
	text-align: center;
}

.valnova-journey__subtitle {
	color: var(--valnova-navy);
	font-size: var(--valnova-font-2xl);
	font-weight: 400;
	letter-spacing: -0.43px;
	line-height: 1;
	margin: 14px 0 0;
	text-align: center;
}

.valnova-journey__cards {
	display: grid !important;
	gap: 45px;
	grid-template-columns: repeat(5, 1fr);
	height: 1316px;
	left: 172px;
	margin: 0 !important;
	max-width: none !important;
	position: absolute;
	top: 716px;
	width: 3497px !important;
	z-index: 1;
}

.valnova-journey__cards > .wp-block-group {
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

.valnova-journey-card {
	border-radius: var(--valnova-radius-sm);
	box-sizing: border-box;
	box-shadow: var(--valnova-touch-shadow);
	color: #ffffff;
	min-width: 0;
	overflow: hidden;
	padding: 74px 30px;
	position: relative;
}

.valnova-journey-card::after {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

.valnova-journey-card__image {
	inset: 0;
	position: absolute;
	z-index: 0;
}

.valnova-journey-card__image img {
	display: block;
	height: 100%;
	max-width: none;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.valnova-journey-card--lifestyle .valnova-journey-card__image img {
	height: 151.03%;
	left: -18.19%;
	top: -25.44%;
	width: 136.38%;
}

.valnova-journey-card--neighborhoods .valnova-journey-card__image img {
	height: 109.01%;
	left: -214.04%;
	top: -6.12%;
	width: 319.89%;
}

.valnova-journey-card--homes .valnova-journey-card__image img {
	height: 100%;
	left: -77.73%;
	top: 0;
	width: 217.21%;
}

.valnova-journey-card--nearby .valnova-journey-card__image img {
	height: 100%;
	left: -206.59%;
	top: 0;
	width: 413.15%;
}

.valnova-journey-card--about .valnova-journey-card__image img {
	height: 100%;
	left: 0;
	top: 0;
	width: 100%;
}

.valnova-journey-card__text {
	position: relative;
	z-index: 2;
}

.valnova-journey-card__title {
	color: #ffffff;
	font-size: var(--valnova-font-2xl);
	font-weight: 700;
	letter-spacing: -0.43px;
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
}

.valnova-journey-card__caption {
	color: #ffffff;
	font-size: var(--valnova-font-lg);
	font-weight: 400;
	letter-spacing: -0.43px;
	line-height: 1;
	margin: 7px 0 0;
}

.valnova-journey-card__button {
	align-items: center;
	background: transparent;
	border-radius: var(--valnova-radius-sm);
	bottom: 40px;
	box-shadow: none;
	display: flex;
	height: auto;
	justify-content: center;
	inset: 0;
	left: 0;
	position: absolute;
	transform: none;
	width: auto;
	z-index: 3;
}

.valnova-journey-card__button::before {
	background-color: #ffffff;
	border-radius: var(--valnova-pill);
	bottom: 40px;
	box-shadow: var(--valnova-touch-shadow);
	content: "";
	display: block;
	height: 119px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 119px;
}

.valnova-journey-card__button::after {
	background: url("../img/arrow-right-navy.svg") center / contain no-repeat;
	bottom: 70px;
	content: "";
	display: block;
	height: 60px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 60px;
}

.wp-image-31 {
	transform: scale(1.1);
}

/* 06. Inner page shell and sidebar
   Used by the kiosk's interior pages: shared canvas, left navigation, brand,
   and tap instruction card. */
.valnova-inner {
	background: var(--valnova-page-bg);
	color: var(--valnova-navy);
	height: var(--valnova-kiosk-height);
	width: var(--valnova-kiosk-width);
}

.valnova-sidebar {
	align-items: center;
	background: var(--valnova-navy);
	display: flex;
	flex-direction: column;
	height: 2160px;
	left: 0;
	padding: 74px 0;
	position: absolute;
	top: 0;
	width: 373px;
	z-index: 5;
}

.valnova-sidebar__nav {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 60px;
	width: 100%;
}

.valnova-sidebar__item {
	align-items: center;
	color: #ffffff;
	display: flex;
	flex-direction: column;
	font-size: var(--valnova-font-min);
	font-weight: 700;
	gap: 30px;
	justify-content: center;
	letter-spacing: -0.45px;
	line-height: 1;
	min-height: 164px;
	padding: 30px 15px;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	width: 100%;
}

.valnova-sidebar__item:hover {
	color: var(--valnova-green) !important;
}

.valnova-sidebar__item:hover .valnova-sidebar__icon {
	color: var(--valnova-green);
}

.valnova-sidebar__item.is-active {
	background: rgba(255, 255, 255, 0.1);
}

.valnova-sidebar__item.is-active::before {
	background: var(--valnova-green);
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 15px;
}

.valnova-sidebar__icon {
	color: #ffffff;
	display: block;
	height: 74px;
	width: 74px;
}

.valnova-sidebar__item img {
	display: block;
	height: 74px !important;
	max-height: 74px;
	max-width: 74px;
	object-fit: contain;
	width: 74px !important;
}

.valnova-inner-brand {
	height: 190px;
	left: 3025px;
	position: absolute;
	top: 1725px;
	width: 716px;
	z-index: 4;
}

.valnova-inner-brand img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.valnova-tap-instruction {
	align-items: flex-start;
	background: #ffffff;
	border: 2px solid #a7a7a7;
	border-radius: var(--valnova-radius-sm);
	display: flex;
	gap: 15px;
	left: 3270px;
	padding: 22px;
	position: absolute;
	top: 1890px;
	z-index: 4;
}

.valnova-tap-instruction__icon {
	align-self: center;
	background: url("../img/icon-hand-pointing-green.svg") center / contain no-repeat;
	flex: 0 0 auto;
	height: 72px;
	width: 62px;
	margin-right: 10px;
}

.valnova-tap-instruction__label {
	color: var(--valnova-navy);
	font-size: var(--valnova-font-sm);
	font-weight: 600;
	letter-spacing: -0.43px;
	line-height: 1;
	margin: 0 0 7px;
	text-transform: uppercase;
	white-space: nowrap;
}

.valnova-tap-instruction__copy {
	color: var(--valnova-navy);
	font-size: var(--valnova-font-min);
	font-weight: 400;
	letter-spacing: -0.43px;
	line-height: 1.2;
	margin: 0;
	white-space: nowrap;
}

/* 07. Lifestyle map page
   Map artwork and marker coordinates. Keep marker positions with this page so
   map alignment changes stay isolated from the other map screens. */
.valnova-lifestyle__map {
	aspect-ratio: 1984 / 1653;
	height: auto;
	left: 8.7963%;
	position: absolute;
	top: -31.6379%;
	width: 91.8519%;
	z-index: 1;
}

.valnova-lifestyle__map img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.valnova-map-marker {
	align-items: center;
	appearance: none;
	background: transparent !important;
	border: 0;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font: inherit;
	gap: 4px;
	margin: 0;
	padding: 0;
	position: absolute;
	text-align: center;
	z-index: 3;
}

.valnova-map-marker__icon {
	align-items: center;
	border: 2px solid #ffffff;
	border-radius: var(--valnova-pill);
	display: flex;
	height: 120px;
	justify-content: center;
	width: 120px;
}

.valnova-map-marker__icon img {
	display: block;
	filter: brightness(0) invert(1);
	height: 80px;
	object-fit: contain;
	width: 80px;
}

.valnova-map-marker__label {
	border: 2px solid #ffffff;
	border-radius: var(--valnova-radius-sm);
	color: #ffffff;
	font-size: var(--valnova-font-sm);
	font-weight: 600;
	letter-spacing: -0.43px;
	line-height: 1;
	padding: 7px 15px;
	text-align: center;
	white-space: nowrap;
	max-width: 370px;
	overflow-wrap: break-word;
	white-space: normal;
}

.valnova-map-marker--swim .valnova-map-marker__icon,
.valnova-map-marker--swim .valnova-map-marker__label { background: rgba(26, 114, 162, 0.7); }
.valnova-map-marker--retail .valnova-map-marker__icon,
.valnova-map-marker--retail .valnova-map-marker__label { background: rgba(58, 162, 148, 0.7); }
.valnova-map-marker--golf .valnova-map-marker__icon,
.valnova-map-marker--golf .valnova-map-marker__label { background: rgba(13, 41, 99, 0.7); }
.valnova-map-marker--bike .valnova-map-marker__icon,
.valnova-map-marker--bike .valnova-map-marker__label { background: #753987B2; }
.valnova-map-marker--parks .valnova-map-marker__icon,
.valnova-map-marker--parks .valnova-map-marker__label { background: rgba(43, 90, 50, 0.7); }
.valnova-map-marker--trail .valnova-map-marker__icon,
.valnova-map-marker--trail .valnova-map-marker__label { background: #9B3737B2 }
.valnova-map-marker--town .valnova-map-marker__icon,
.valnova-map-marker--town .valnova-map-marker__label { background: rgba(177, 101, 47, 0.7); }
.valnova-map-marker--athletic .valnova-map-marker__icon,
.valnova-map-marker--athletic .valnova-map-marker__label { background: #3A3CA2B2; }

/* Shared modal layer
   All kiosk modal variants use this visibility and backdrop behavior. */
.valnova-modal[hidden] {
	display: none;
}

.valnova-kiosk [hidden] {
	display: none !important;
}

.valnova-modal {
	inset: 0;
	position: absolute;
	z-index: 20;
}

.valnova-modal__overlay {
	background: rgba(26, 47, 92, 0.5);
	inset: 0;
	position: absolute;
}

/* A brief backdrop fade and card lift make each dialog feel connected to its
   trigger without delaying the kiosk's content or controls. */
.valnova-modal.is-opening .valnova-modal__overlay {
	animation: valnova-modal-backdrop-in 240ms ease-out both;
}

.valnova-modal.is-opening .valnova-lifestyle-modal__card,
.valnova-modal.is-opening .valnova-neighborhood-modal__card,
.valnova-modal.is-opening .valnova-builder-modal__card,
.valnova-modal.is-opening .valnova-learn-more-modal__card {
	animation: valnova-modal-card-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
	transform-origin: center;
}

/* The Builder card is centered with its own translate transform, so its
   animation must preserve that positioning transform at every frame. */
.valnova-modal.is-opening .valnova-builder-modal__card {
	animation-name: valnova-builder-modal-card-in;
}

.valnova-modal.is-closing {
	pointer-events: none;
}

.valnova-modal.is-closing .valnova-modal__overlay {
	animation: valnova-modal-backdrop-out 200ms ease-in both;
}

.valnova-modal.is-closing .valnova-lifestyle-modal__card,
.valnova-modal.is-closing .valnova-neighborhood-modal__card,
.valnova-modal.is-closing .valnova-builder-modal__card,
.valnova-modal.is-closing .valnova-learn-more-modal__card {
	animation: valnova-modal-card-out 260ms ease-in both;
	transform-origin: center;
}

.valnova-modal.is-closing .valnova-builder-modal__card {
	animation-name: valnova-builder-modal-card-out;
}

@keyframes valnova-modal-backdrop-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes valnova-modal-card-in {
	from {
		opacity: 0;
		transform: translateY(36px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes valnova-builder-modal-card-in {
	from {
		opacity: 0;
		transform: translate(-50%, -50%) translateY(36px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: translate(-50%, -50%) translateY(0) scale(1);
	}
}

@keyframes valnova-modal-backdrop-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes valnova-modal-card-out {
	from {
		opacity: 1;
		transform: translateY(0) scale(1);
	}

	to {
		opacity: 0;
		transform: translateY(24px) scale(0.985);
	}
}

@keyframes valnova-builder-modal-card-out {
	from {
		opacity: 1;
		transform: translate(-50%, -50%) translateY(0) scale(1);
	}

	to {
		opacity: 0;
		transform: translate(-50%, -50%) translateY(24px) scale(0.985);
	}
}

/* All image carousels share the same direction-aware swipe. The incoming image
   starts just outside the frame while the outgoing image moves away. */
.valnova-home-gallery__image[data-valnova-carousel] img.is-active,
.valnova-lifestyle-modal__image[data-valnova-carousel] img.is-active,
.valnova-neighborhood-modal__image[data-valnova-carousel] img.is-active,
.valnova-builder-modal__image[data-valnova-carousel] img.is-active {
	z-index: 2;
}

.valnova-home-gallery__image[data-valnova-carousel] img.is-preparing,
.valnova-lifestyle-modal__image[data-valnova-carousel] img.is-preparing,
.valnova-neighborhood-modal__image[data-valnova-carousel] img.is-preparing,
.valnova-builder-modal__image[data-valnova-carousel] img.is-preparing {
	transition: none;
}

.valnova-home-gallery__image[data-valnova-carousel][data-valnova-carousel-direction="next"] img.is-preparing,
.valnova-lifestyle-modal__image[data-valnova-carousel][data-valnova-carousel-direction="next"] img.is-preparing,
.valnova-neighborhood-modal__image[data-valnova-carousel][data-valnova-carousel-direction="next"] img.is-preparing,
.valnova-builder-modal__image[data-valnova-carousel][data-valnova-carousel-direction="next"] img.is-preparing {
	opacity: 1;
	transform: translateX(100%);
	z-index: 2;
}

.valnova-home-gallery__image[data-valnova-carousel][data-valnova-carousel-direction="previous"] img.is-preparing,
.valnova-lifestyle-modal__image[data-valnova-carousel][data-valnova-carousel-direction="previous"] img.is-preparing,
.valnova-neighborhood-modal__image[data-valnova-carousel][data-valnova-carousel-direction="previous"] img.is-preparing,
.valnova-builder-modal__image[data-valnova-carousel][data-valnova-carousel-direction="previous"] img.is-preparing {
	opacity: 1;
	transform: translateX(-100%);
	z-index: 2;
}

.valnova-home-gallery__image[data-valnova-carousel][data-valnova-carousel-direction="next"] img.is-exiting,
.valnova-lifestyle-modal__image[data-valnova-carousel][data-valnova-carousel-direction="next"] img.is-exiting,
.valnova-neighborhood-modal__image[data-valnova-carousel][data-valnova-carousel-direction="next"] img.is-exiting,
.valnova-builder-modal__image[data-valnova-carousel][data-valnova-carousel-direction="next"] img.is-exiting {
	opacity: 0;
	transform: translateX(-25%);
	z-index: 1;
}

.valnova-home-gallery__image[data-valnova-carousel][data-valnova-carousel-direction="previous"] img.is-exiting,
.valnova-lifestyle-modal__image[data-valnova-carousel][data-valnova-carousel-direction="previous"] img.is-exiting,
.valnova-neighborhood-modal__image[data-valnova-carousel][data-valnova-carousel-direction="previous"] img.is-exiting,
.valnova-builder-modal__image[data-valnova-carousel][data-valnova-carousel-direction="previous"] img.is-exiting {
	opacity: 0;
	transform: translateX(25%);
	z-index: 1;
}

.valnova-lifestyle-modal {
	align-items: center;
	display: flex;
	justify-content: center;
}

/* Lifestyle amenity detail modal */
.valnova-lifestyle-modal__card {
	background: #ffffff;
	border-radius: 32px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	color: #000000;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	width: 1980px;
	z-index: 1;
}

.valnova-lifestyle-modal__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 48px 48px 40px;
	position: relative;
}

.valnova-lifestyle-modal__close {
	appearance: none;
	background: transparent url("../img/XCircle.svg") center / 80px 80px no-repeat !important;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
	height: 80px;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 24px;
	top: 24px;
	width: 80px;
	z-index: 2;
}

.valnova-lifestyle-modal__header {
	align-items: flex-start;
	display: flex;
	gap: 32px;
	padding-right: 104px;
}

.valnova-lifestyle-modal__badge {
	align-items: center;
	border-radius: var(--valnova-pill);
	display: flex;
	flex: 0 0 auto;
	height: 136px;
	justify-content: center;
	width: 136px;
}

.valnova-lifestyle-modal__badge img {
	display: block;
	filter: brightness(0) invert(1);
	height: 80px;
	object-fit: contain;
	width: 80px;
}

.valnova-lifestyle-modal__badge--swim { background: rgba(26, 114, 162); }
.valnova-lifestyle-modal__badge--retail { background: #3aa294; }
.valnova-lifestyle-modal__badge--golf { background: #0d2963; }
.valnova-lifestyle-modal__badge--bike { background: #753987; }
.valnova-lifestyle-modal__badge--parks { background: #2b5a32; }
.valnova-lifestyle-modal__badge--trail { background: #9b3737; }
.valnova-lifestyle-modal__badge--town { background: #b1652f; }
.valnova-lifestyle-modal__badge--athletic { background: #3A3CA2; }

.valnova-lifestyle-modal__heading {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.valnova-lifestyle-modal__heading h2 {
	color: var(--valnova-navy);
	font-size: var(--valnova-font-display-2xl);
	font-weight: 700;
	letter-spacing: -0.46px;
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
}

.valnova-lifestyle-modal__heading p {
	color: #000000;
	font-size: var(--valnova-font-lg);
	font-weight: 400;
	letter-spacing: -0.46px;
	line-height: 1;
	margin: 0;
}

.valnova-lifestyle-modal__gallery {
	border-radius: 32px;
	height: 1020px;
	overflow: visible;
	position: relative;
	width: 100%;
}

.valnova-lifestyle-modal__image {
	border: 3px solid #d3d3d3;
	border-radius: 32px;
	box-sizing: border-box;
	height: 100%;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.valnova-lifestyle-modal__image img {
	border-radius: 32px;
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	object-position: center 52%;
	opacity: 1;
	pointer-events: none;
	position: absolute;
	transform: translateX(0);
	transition: opacity 420ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
	width: 100%;
}

.valnova-lifestyle-modal__image[data-valnova-carousel] img {
	opacity: 0;
}

.valnova-lifestyle-modal__image img.is-active {
	opacity: 1;
	transform: translateX(0);
}

.valnova-lifestyle-modal__arrow {
	align-items: center;
	appearance: none;
	background: transparent !important;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
	display: flex;
	height: 104px;
	justify-content: center;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 104px;
	z-index: 2;
}

	.valnova-lifestyle-modal__arrow::before {
		background: url("../img/caret-circle.svg") center / contain no-repeat;
		content: "";
		height: 104px;
		transition: filter 160ms ease, transform 160ms ease;
		width: 104px;
	}

.valnova-lifestyle-modal__arrow--prev {
	left: 16px;
}

.valnova-lifestyle-modal__arrow--prev::before {
	transform: none;
}

.valnova-lifestyle-modal__arrow--next {
	right: 16px;
}

	.valnova-lifestyle-modal__arrow--next::before {
		transform: rotate(180deg);
	}

.valnova-lifestyle-modal__dots {
	align-items: center;
	background: #ffffff;
	border-radius: 48px 48px 0 0;
	bottom: -1px;
	display: flex;
	gap: 12px;
	left: 50%;
	min-height: 72px;
	padding: 24px 96px;
	position: absolute;
	transform: translateX(-50%);
	z-index: 2;
}

.valnova-lifestyle-modal__dots span {
	background: rgba(26, 47, 92, 0.5);
	border-radius: 50%;
	display: block;
	height: 24px;
	width: 24px;
}

.valnova-lifestyle-modal__dots span.is-active {
	background: var(--valnova-navy);
}

.valnova-lifestyle-modal__amenities {
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding: 24px 32px 0px 32px;
}

.valnova-lifestyle-modal__section-title {
	align-items: center;
	display: flex;
	gap: 32px;
}

.valnova-lifestyle-modal__section-title h3 {
	color: var(--valnova-navy);
	font-size: var(--valnova-font-display-lg);
	font-weight: 700;
	letter-spacing: -0.46px;
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
	white-space: nowrap;
}

.valnova-lifestyle-modal__section-title span {
	background: var(--valnova-navy);
	display: block;
	flex: 1 1 auto;
	height: 2px;
	opacity: 0.8;
}

.valnova-lifestyle-modal__amenity-list {
	align-items: flex-start;
	display: flex;
	justify-content: space-between;
}

.valnova-lifestyle-modal__amenity {
	align-items: center;
	display: flex;
	flex: 0 0 20%;
	flex-direction: column;
	gap: 16px;
	justify-content: center;
	text-align: center;
}

.valnova-lifestyle-modal__amenity span {
	align-items: center;
	background: #f7f7f7;
	border-radius: 50%;
	display: flex;
	height: 152px;
	justify-content: center;
	width: 152px;
}

.valnova-lifestyle-modal__amenity img {
	display: block;
	filter: brightness(0) saturate(100%) invert(62%) sepia(64%) saturate(549%) hue-rotate(77deg) brightness(88%) contrast(89%);
	height: 80px;
	object-fit: contain;
	width: 80px;
}

.valnova-lifestyle-modal__amenity p {
	color: #000000;
	font-size: var(--valnova-font-xl);
	font-weight: 400;
	letter-spacing: -0.46px;
	line-height: 1;
	margin: 0;
	min-height: 2em;
	max-width: 260px;
	overflow-wrap: normal;
	word-break: normal;
}

.valnova-lifestyle-modal__footer {
	align-items: center;
	background: #f7f7f7;
	border-top: 2px solid #d3d3d3;
	display: flex;
	gap: 32px;
	padding: 32px 48px;
}

.valnova-lifestyle-modal__footer p {
	color: var(--valnova-navy);
	flex: 1 1 auto;
	font-size: var(--valnova-font-xl);
	font-weight: 400;
	letter-spacing: -0.46px;
	line-height: 1;
	margin: 0;
	white-space: nowrap;
}

.valnova-lifestyle-modal__learn-more,
.valnova-neighborhood-modal__learn-more,
.valnova-builder-modal__learn-more,
.valnova-about-hero__learn-more {
	align-items: center;
	appearance: none;
	background: var(--valnova-navy);
	border: 0;
	border-radius: 80px;
	box-shadow: 0 8px 4px rgba(0, 0, 0, 0.25);
	color: #ffffff;
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: var(--valnova-font-lg);
	font-weight: 400;
	justify-content: center;
	letter-spacing: -0.46px;
	line-height: 1;
	margin: 0;
	padding: 32px 48px;
	white-space: nowrap;
}

.valnova-learn-more-modal {
	align-items: center;
	display: flex;
	justify-content: center;
}

/* Shared Learn More modal
   This QR-code and benefits panel is opened from every kiosk Learn More button. */
.valnova-learn-more-modal__card {
	background: #ffffff;
	border-radius: 32px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	color: #000000;
	display: flex;
	flex-direction: column;
	overflow: visible;
	position: relative;
	width: 1856px;
	z-index: 1;
}

.valnova-learn-more-modal__body {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding: 80px 48px 52px;
}

.valnova-learn-more-modal__close {
	appearance: none;
	background: transparent url("../img/XCircle.svg") center / 80px 80px no-repeat !important;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
	height: 80px;
	margin: 0;
	outline: none;
	padding: 0;
	position: absolute;
	right: 24px;
	top: 24px;
	width: 80px;
	z-index: 2;
}

.valnova-learn-more-modal__intro {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 24px;
	text-align: center;
	width: 100%;
}

.valnova-learn-more-modal__icon,
.valnova-learn-more-modal__benefit span,
.valnova-learn-more-modal__phone-icon {
	align-items: center;
	background: #f7f7f7;
	border-radius: 50%;
	display: flex;
	height: 152px;
	justify-content: center;
	width: 152px;
}

.valnova-learn-more-modal__icon img,
.valnova-learn-more-modal__benefit img,
.valnova-learn-more-modal__phone-icon img {
	display: block;
	filter: brightness(0) saturate(100%) invert(62%) sepia(64%) saturate(549%) hue-rotate(77deg) brightness(88%) contrast(89%);
	height: 80px;
	object-fit: contain;
	width: 80px;
}

.valnova-learn-more-modal__intro h2 {
	color: var(--valnova-navy);
	font-size: var(--valnova-font-display-2xl);
	font-weight: 700;
	letter-spacing: -0.46px;
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
}

.valnova-learn-more-modal__intro p {
	color: #000000;
	font-size: var(--valnova-font-lg);
	font-weight: 400;
	letter-spacing: -0.46px;
	line-height: 1.2;
	margin: 0;
}

.valnova-learn-more-modal__qr {
	height: 640px;
	margin: 0;
	width: 848px;
}

.valnova-learn-more-modal__qr img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
	padding: 32px;
}

.valnova-learn-more-modal__benefits {
	align-items: flex-start;
	display: flex;
	gap: 48px;
	justify-content: center;
	width: 100%;
}

.valnova-learn-more-modal__benefit {
	align-items: center;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 32px;
	justify-content: center;
	text-align: center;
	width: 360px;
}

.valnova-learn-more-modal__benefit h3 {
	color: var(--valnova-navy);
	font-size: var(--valnova-font-xl);
	font-weight: 700;
	letter-spacing: -0.46px;
	line-height: 1;
	margin: 0 0 -16px;
	text-transform: uppercase;
	white-space: nowrap;
}

.valnova-learn-more-modal__benefit p {
	color: #000000;
	font-size: var(--valnova-font-xl);
	font-weight: 400;
	letter-spacing: -0.46px;
	line-height: 1;
	margin: 0;
}

.valnova-learn-more-modal__divider {
	align-self: stretch;
	background: #a9b3c3;
	margin-top: 0;
	width: 2px;
}

.valnova-learn-more-modal__footer {
	align-items: center;
	background: #f7f7f7;
	border-top: 2px solid #d3d3d3;
	border-radius: 0 0 32px 32px;
	display: flex;
	gap: 32px;
	padding: 32px 48px;
}

.valnova-learn-more-modal__phone-icon {
	background: #ffffff;
	border: 2px solid #d3d3d3;
	flex: 0 0 auto;
}

.valnova-learn-more-modal__phone-icon img {
	filter: brightness(0) saturate(100%) invert(17%) sepia(72%) saturate(1002%) hue-rotate(191deg) brightness(88%) contrast(90%);
}

.valnova-learn-more-modal__footer div {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.valnova-learn-more-modal__footer p {
	color: var(--valnova-navy);
	font-size: var(--valnova-font-md);
	font-weight: 700;
	letter-spacing: -0.46px;
	line-height: 1;
	margin: 0;
	white-space: nowrap;
}

.valnova-learn-more-modal__footer strong {
	color: var(--valnova-navy);
	font-size: var(--valnova-font-md);
	font-weight: 400;
	letter-spacing: -0.46px;
	line-height: 1;
}

/* 08. Neighborhoods map page
   The bitmap, exported outlines, hotspots, labels, and modal all use the
   coordinate system documented below. */
/*
 * Figma frame: 1957 x 1160. The kiosk stage is 3840px wide, so every map,
 * outline, and label coordinate below uses the same 3840 / 1957 scale. Using
 * one width-derived scale preserves the artwork aspect ratio on the 16:9 stage.
 */
/* .valnova-neighborhoods__map,
.valnova-neighborhood-hotspots,
.valnova-neighborhood-outlines,
.valnova-neighborhood-label {
	transform: translate(40px, 100px);
} */

.valnova-neighborhoods__map {
	aspect-ratio: 2646.534 / 2205.001;
	height: auto;
	left: 74px;
	position: absolute;
	top: -1545px;
	width: 5192px;
	z-index: 1;
	transform: scale(0.99);
}

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

/* Map interaction layers
   Keep the bitmap, outlines, and hotspots aligned as one unit. */
.valnova-neighborhood-hotspots {
	aspect-ratio: 2646.534 / 2205.001;
	height: auto;
	left: 76.525px;
	pointer-events: none;
	position: absolute;
	top: -1552.09px;
	width: 5192.994px;
	z-index: 3;
}

.valnova-neighborhood-outlines {
	height: 2160px;
	left: 0;
	position: absolute;
	top: 0;
	width: 3840px;
	z-index: 2;
}

.valnova-neighborhood-outline {
	display: block;
	overflow: visible;
	pointer-events: none;
	position: absolute;
}

.valnova-neighborhood-outline > path {
	cursor: pointer;
	pointer-events: visiblePainted;
}

.valnova-neighborhood-outline--glenview {
	height: 673.787px;
	left: 1737.671px;
	top: 197.481px;
	width: 775.614px;
}

.valnova-neighborhood-outline--town {
	height: 651.15px;
	left: 2281.059px;
	top: 389.029px;
	width: 565.595px;
}

.valnova-neighborhood-outline--muirhaven {
	height: 147.009px;
	left: 2054.452px;
	top: 1005.206px;
	width: 133.683px;
}

.valnova-neighborhood-outline--lindale {
	height: 223.844px;
	left: 2071.678px;
	top: 1071.177px;
	width: 308.834px;
}

.valnova-neighborhood-outline--kirkhills {
	height: 412.73px;
	left: 1561.277px;
	top: 686.15px;
	width: 595.445px;
}

.valnova-neighborhood-outline--community {
	height: 957.321px;
	left: 1147.48px;
	top: 1047.071px;
	width: 958.826px;
}

.valnova-neighborhood-outline--holmbrook {
	height: 476.368px;
	left: 1299.099px;
	top: 1525.383px;
	width: 501.689px;
}

.valnova-neighborhood-hotspot {
	cursor: pointer;
	fill: transparent;
	fill-opacity: 0;
	stroke: transparent;
	stroke-opacity: 0;
}

.valnova-neighborhood-label {
	align-items: center;
	border-radius: var(--valnova-radius-sm);
	box-sizing: border-box;
	color: #ffffff;
	display: flex;
	font-size: 37px;
	font-weight: 600;
	letter-spacing: -0.43px;
	line-height: 1;
	justify-content: center;
	padding: 16px 64px;
	position: absolute;
	text-align: center;
	white-space: normal;
	z-index: 4;
}

.valnova-neighborhood-label small {
	display: block;
	font-size: var(--valnova-font-xs);
	font-weight: 400;
	line-height: 1;
}

.valnova-neighborhood-label--town {
	background: #1a72a2;
	left: 2597.117px;
	top: 651.793px;
}

.valnova-neighborhood-label--glenview {
	background: #b1652f;
	left: 1961.08px;
	top: 356.022px;
}

.valnova-neighborhood-label--lindale {
	background: #4c5042;
	left: 2254.232px;
	top: 1167.428px;
}

.valnova-neighborhood-label--muirhaven {
	background: #0d2963;
	left: 2036.985px;
	top: 952.798px;
}

.valnova-neighborhood-label--community {
	background: #753987;
	left: 1317.19px;
	top: 1340.179px;
}

.valnova-neighborhood-label--holmbrook {
	background: #3aa294;
	left: 1510.881px;
	top: 1881.988px;
}

.valnova-neighborhood-label--kirkhills {
	background: #9b3737;
	left: 1419.27px;
	top: 795.752px;
}

.valnova-neighborhood-modal {
	align-items: center;
	display: flex;
	justify-content: center;
}

/* Neighborhood detail modal */
.valnova-neighborhood-modal__card {
	background: #ffffff;
	border-radius: 32px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	color: #000000;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	width: 1980px;
	z-index: 1;
}

.valnova-neighborhood-modal__body {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 80px 48px 40px;
	position: relative;
}

.valnova-neighborhood-modal__close {
	appearance: none;
	background: transparent url("../img/XCircle.svg") center / 80px 80px no-repeat !important;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
	height: 80px;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 24px;
	top: 24px;
	width: 80px;
	z-index: 2;
}

.valnova-neighborhood-modal__header {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-right: 104px;
}

.valnova-neighborhood-modal__header h2 {
	color: var(--valnova-navy);
	font-size: var(--valnova-font-display-2xl);
	font-weight: 400;
	letter-spacing: -0.46px;
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
}

.valnova-neighborhood-modal__header h2 strong {
	font-weight: 700;
}

.valnova-neighborhood-modal__header h2 span {
	font-weight: 400;
}

.valnova-neighborhood-modal__header p {
	color: #000000;
	font-size: var(--valnova-font-lg);
	font-weight: 400;
	letter-spacing: -0.46px;
	line-height: 1;
	margin: 0;
}

.valnova-neighborhood-modal__gallery {
	border-radius: 32px;
	height: 800px;
	overflow: visible;
	position: relative;
	width: 100%;
}

.valnova-neighborhood-modal__image {
	border-radius: 32px;
	height: 100%;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.valnova-neighborhood-modal__image img {
	border-radius: 32px;
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	object-position: center 52%;
	opacity: 1;
	pointer-events: none;
	position: absolute;
	transform: translateX(0);
	transition: opacity 420ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
	width: 100%;
}

.valnova-neighborhood-modal__image[data-valnova-carousel] img {
	opacity: 0;
}

.valnova-neighborhood-modal__image img.is-active {
	opacity: 1;
	transform: translateX(0);
}

.valnova-neighborhood-modal__arrow {
	align-items: center;
	appearance: none;
	background: transparent !important;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
	display: flex;
	height: 104px;
	justify-content: center;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 104px;
	z-index: 2;
}

	.valnova-neighborhood-modal__arrow::before {
		background: url("../img/caret-circle.svg") center / contain no-repeat;
		content: "";
		height: 104px;
		transition: filter 160ms ease, transform 160ms ease;
		width: 104px;
	}

.valnova-neighborhood-modal__arrow--prev {
	left: 16px;
}

.valnova-neighborhood-modal__arrow--prev::before {
	transform: none;
}

.valnova-neighborhood-modal__arrow--next {
	right: 16px;
}

	.valnova-neighborhood-modal__arrow--next::before {
		transform: rotate(180deg);
	}

.valnova-neighborhood-modal__dots {
	align-items: center;
	background: #ffffff;
	border-radius: 48px 48px 0 0;
	bottom: -1px;
	display: flex;
	gap: 12px;
	left: 50%;
	min-height: 72px;
	padding: 24px 96px;
	position: absolute;
	transform: translateX(-50%);
	z-index: 2;
}

.valnova-neighborhood-modal__dots span {
	background: rgba(26, 47, 92, 0.5);
	border-radius: 50%;
	display: block;
	height: 24px;
	width: 24px;
}

.valnova-neighborhood-modal__dots span.is-active {
	background: var(--valnova-navy);
}

.valnova-neighborhood-modal__details,
.valnova-neighborhood-modal__builders {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 0 24px;
}

.valnova-neighborhood-modal__builders {
	position: relative;
}

.valnova-neighborhood-modal__section-title {
	align-items: center;
	display: flex;
	gap: 32px;
}

.valnova-neighborhood-modal__section-title h3 {
	color: var(--valnova-navy);
	font-size: var(--valnova-font-display-lg);
	font-weight: 700;
	letter-spacing: -0.46px;
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
	white-space: nowrap;
}

.valnova-neighborhood-modal__section-title span {
	background: var(--valnova-navy);
	display: block;
	flex: 1 1 auto;
	height: 2px;
	opacity: 0.8;
}

.valnova-neighborhood-modal__detail-list {
	display: flex;
	gap: 48px;
	padding-bottom: 80px;
}

.valnova-neighborhood-modal__detail {
	align-items: center;
	display: flex;
	flex: 1 1 0;
	gap: 32px;
	min-width: 0;
}

.valnova-neighborhood-modal__detail > span {
	align-items: center;
	background: #f7f7f7;
	border-radius: 50%;
	display: flex;
	flex: 0 0 auto;
	height: 152px;
	justify-content: center;
	width: 152px;
}

.valnova-neighborhood-modal__detail img {
	display: block;
	filter: brightness(0) saturate(100%) invert(62%) sepia(64%) saturate(549%) hue-rotate(77deg) brightness(88%) contrast(89%);
	height: 80px;
	object-fit: contain;
	width: 80px;
}

.valnova-neighborhood-modal__detail div {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.valnova-neighborhood-modal__detail h4 {
	color: var(--valnova-navy);
	font-size: var(--valnova-font-lg);
	font-weight: 700;
	letter-spacing: -0.46px;
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
	white-space: nowrap;
}

.valnova-neighborhood-modal__detail p {
	color: #000000;
	font-size: var(--valnova-font-xl);
	font-weight: 400;
	letter-spacing: -0.46px;
	line-height: 1;
	margin: 0;
}

.valnova-neighborhood-modal__detail strong {
	font-weight: 700;
}

.valnova-neighborhood-modal__builder-list {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: center;
}

.valnova-neighborhood-modal__builder-placeholder {
	color: var(--valnova-navy);
	font-size: var(--valnova-font-xl);
	font-weight: 500;
	line-height: 1.2;
	margin: 36px 0 24px;
	text-align: center;
	width: 100%;
}

.valnova-neighborhood-modal__builders--carousel .valnova-neighborhood-modal__builder-list {
	flex-wrap: nowrap;
	padding: 0 96px;
}

.valnova-neighborhood-modal__builder-arrow {
	align-items: center;
	appearance: none;
	background: transparent !important;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
	display: flex;
	height: 80px;
	justify-content: center;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 160px;
	width: 88px;
	z-index: 1;
}

.valnova-neighborhood-modal__builder-arrow[hidden] {
	display: none;
}

.valnova-neighborhood-modal__builder-arrow--prev {
	left: 24px;
}

.valnova-neighborhood-modal__builder-arrow--next {
	right: 24px;
}

.valnova-neighborhood-modal__builder-arrow::before {
	background: url("../img/caret-circle.svg") center / contain no-repeat;
	content: "";
	height: 88px;
	transition: filter 160ms ease, transform 160ms ease;
	width: 88px;
}


.valnova-neighborhood-modal__builder-arrow--next::before {
	transform: rotate(180deg);
}

.valnova-neighborhood-modal__builder {
	align-items: center;
	appearance: none;
	background: transparent !important;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
	display: flex;
	height: 220px;
	justify-content: center;
	margin: 0;
	padding: 0;
	width: 220px;
}

.valnova-neighborhood-modal__builder[hidden] {
	display: none;
}

.valnova-neighborhood-modal__builder img {
	display: block;
	max-height: 220px;
	max-width: 100%;
	object-fit: contain;
}

.valnova-neighborhood-modal__footer {
	align-items: center;
	background: #f7f7f7;
	border-top: 2px solid #d3d3d3;
	display: flex;
	gap: 32px;
	padding: 32px 48px;
}

.valnova-neighborhood-modal__footer p {
	color: var(--valnova-navy);
	flex: 1 1 auto;
	font-size: var(--valnova-font-xl);
	font-weight: 400;
	letter-spacing: -0.46px;
	line-height: 1;
	margin: 0;
	white-space: nowrap;
}

/* 09. Homes and builders pages
   Shared by the Homes & Builders overview and its home-type pages. */
.valnova-homes-content {
	display: flex;
	flex-direction: column;
	gap: 59px;
	height: 2160px;
	left: 373px;
	padding: 74px;
	position: absolute;
	top: 0;
	width: 3467px;
	z-index: 2;
}

.valnova-homes-title {
	color: var(--valnova-navy);
	font-size: var(--valnova-font-display-xl);
	font-weight: 700;
	letter-spacing: -0.43px;
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
}

.valnova-home-tabs {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	width: 100%;
}

/* Home-type tabs */
.valnova-home-tab {
	align-items: center;
	background: #ffffff;
	border: 2px solid var(--valnova-navy);
	border-radius: var(--valnova-radius-sm);
	box-shadow: var(--valnova-card-shadow);
	color: var(--valnova-navy);
	display: flex;
	font-size: var(--valnova-font-md);
	font-weight: 700;
	gap: 15px;
	justify-content: center;
	letter-spacing: -0.43px;
	line-height: 1;
	min-height: 67px;
	padding: 20px 15px;
	text-align: center;
	text-transform: uppercase;
}

.valnova-home-tab.is-active {
	background: var(--valnova-navy);
	border: 4px solid var(--valnova-green);
	color: #ffffff;
}

.valnova-home-tab img {
	display: block;
	object-fit: contain;
}

.valnova-home-tab .valnova-home-type-icon {
	flex: 0 0 48px;
	height: 80px;
	width: 80px;
}

.valnova-home-tab img {
	filter: brightness(0) saturate(100%) invert(16%) sepia(38%) saturate(1373%) hue-rotate(191deg) brightness(91%) contrast(96%);
}

.valnova-home-tab.is-active img {
	filter: brightness(0) invert(1);
}

.valnova-home-grid {
	display: grid;
	flex: 1;
	gap: 30px;
	grid-template-columns: 1fr 1073px;
	grid-template-rows: 1fr 520px;
	min-height: 0;
}

/* Gallery and location panels */
.valnova-home-panel {
	background: #ffffff;
	border-radius: var(--valnova-radius-lg);
	box-shadow: var(--valnova-card-shadow);
	box-sizing: border-box;
	padding: 45px;
	position: relative;
}

.valnova-home-panel h2 {
	color: var(--valnova-navy);
	font-size: var(--valnova-font-display-xl);
	font-weight: 700;
	letter-spacing: -0.43px;
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
}

.valnova-home-gallery {
	--valnova-home-arrow-size: 84px;
	display: flex;
	flex-direction: column;
	gap: 30px;
	min-width: 0;
}

.valnova-home-gallery__image {
	border-radius: var(--valnova-radius-lg);
	bottom: 45px;
	left: 45px;
	overflow: hidden;
	position: absolute;
	right: 45px;
	top: 131px;
}

.valnova-home-gallery__image img {
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	opacity: 1;
	position: absolute;
	transform: translateX(0);
	transition: opacity 420ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
	width: 100%;
}

.valnova-home-gallery__image[data-valnova-carousel] img {
	opacity: 0;
}

.valnova-home-gallery__image img.is-active {
	opacity: 1;
	transform: translateX(0);
}

.valnova-home-gallery__dots {
	align-items: center;
	background: #ffffff;
	border-radius: 48px 48px 0 0;
	bottom: 45px;
	display: flex;
	gap: 12px;
	left: 50%;
	min-height: 72px;
	padding: 24px 96px;
	position: absolute;
	transform: translateX(-50%);
}

.valnova-home-gallery__dots span {
	background: rgba(26, 47, 92, 0.5);
	border-radius: var(--valnova-pill);
	height: 24px;
	width: 24px;
}

.valnova-home-gallery__dots span.is-active {
	background: var(--valnova-navy);
}

.valnova-home-arrow {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--valnova-pill);
	cursor: pointer;
	display: flex;
	height: var(--valnova-home-arrow-size);
	justify-content: center;
	padding: 0;
	position: absolute;
	top: calc(131px + ((100% - 131px - 45px) / 2));
	transform: translateY(-50%);
	width: var(--valnova-home-arrow-size);
	z-index: 2;
}

.valnova-home-arrow::before {
	background: url("../img/caret-circle.svg") center / contain no-repeat;
	content: "";
	height: var(--valnova-home-arrow-size);
	width: var(--valnova-home-arrow-size);
}

.valnova-home-arrow--left {
	left: 73px;
}

.valnova-home-arrow--right::before {
	transform: rotate(180deg);
}

.valnova-home-arrow--right {
	right: 73px;
}

.valnova-home-location {
	display: flex;
	flex-direction: column;
	gap: 45px;
}

.valnova-home-location__map {
	align-items: center;
	background: var(--valnova-page-bg);
	border-radius: var(--valnova-radius-lg);
	display: flex;
	flex: 1;
	justify-content: center;
	margin: 0;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.valnova-home-location__map-graphic {
	aspect-ratio: 4096 / 3413;
	max-height: 100%;
	max-width: 100%;
	position: relative;
	transform: scale(2.5);
	width: 100%;
	left: 220px;
	top: -80px;
}

.valnova-home-location__map > img,
.valnova-home-location__map-graphic > img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.valnova-home-location__map-graphic > .valnova-home-location__outline {
	display: block;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.valnova-home-location__map-graphic > .valnova-home-location__outline[hidden] {
	display: none;
}

.valnova-home-location__map-graphic > .valnova-home-location__outline--glenview {
	height: 15.58%;
	left: 32.04%;
	top: 40.29%;
	width: 14.94%;
}

.valnova-home-location__map-graphic > .valnova-home-location__outline--town {
	height: 15.05%;
	left: 42.5%;
	top: 44.7%;
	width: 10.89%;
}

.valnova-home-location__map-graphic > .valnova-home-location__outline--muirhaven {
	height: 3.4%;
	left: 38.14%;
	top: 58.95%;
	width: 2.58%;
}

.valnova-home-location__map-graphic > .valnova-home-location__outline--lindale {
	height: 5.17%;
	left: 38.47%;
	top: 60.47%;
	width: 5.95%;
}

.valnova-home-location__map-graphic > .valnova-home-location__outline--kirkhills {
	height: 9.54%;
	left: 28.64%;
	top: 51.58%;
	width: 11.47%;
}

.valnova-home-location__map-graphic > .valnova-home-location__outline--community {
	height: 22.13%;
	left: 20.68%;
	top: 59.92%;
	width: 18.47%;
}

.valnova-home-location__map-graphic > .valnova-home-location__outline--holmbrook {
	height: 11.01%;
	left: 23.59%;
	top: 70.04%;
	width: 9.66%;
}

.valnova-home-location__label {
	border-radius: var(--valnova-radius-sm);
	color: #ffffff;
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	padding: 6px 9px;
	position: absolute;
	text-align: center;
	white-space: nowrap;
	z-index: 2;
}

.valnova-home-location__label small {
	display: block;
	font-size: 16px;
	font-weight: 400;
}

.valnova-home-location__label--glenview {
	background: #b1652f;
	left: 36.34%;
	top: 43.93%;
}

.valnova-home-location__label--lindale {
	background: #4c5042;
	left: 42%;
	top: 62.7%;
}

.valnova-home-location__label--muirhaven {
	background: #0d2963;
	left: 40.5%;
	top: 57.7%;
}

.valnova-home-location__label--kirkhills {
	background: #9b3737;
	left: 25.9%;
	top: 54.1%;
}

.valnova-home-location__label--town {
	background: #1a72a2;
	left: 48.59%;
	top: 50.78%;
}

.valnova-home-location__label--community {
	background: #753987;
	left: 23.94%;
	top: 66.7%;
}

.valnova-home-location__label--holmbrook {
	background: #3aa294;
	left: 27.7%;
	top: 79.3%;
}

.valnova-home-price {
	align-items: center;
	color: var(--valnova-navy);
	display: flex;
	font-size: var(--valnova-font-lg);
	font-weight: 700;
	gap: 30px;
	letter-spacing: -0.43px;
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
	width: 100%;
}

.valnova-home-price::after {
	background: rgba(26, 47, 92, 0.55);
	content: "";
	flex: 1;
	height: 2px;
}

/* Builder strip and carousel controls */
.valnova-builders {
	display: flex;
	flex-direction: column;
	grid-column: 1 / -1;
	justify-content: center;
}

.valnova-builder-strip {
	align-items: center;
	display: flex;
	gap: 48px;
	justify-content: center;
	margin-top: 30px;
	width: 100%;
}

.valnova-builder-strip--carousel {
	justify-content: space-between;
}

.valnova-builder-card {
	align-items: center;
	appearance: none;
	background: #ffffff;
	border: 0;
	border-radius: 26px;
	box-shadow: var(--valnova-card-shadow);
	cursor: pointer;
	display: flex;
	height: 260px;
	justify-content: center;
	margin: 0;
	padding: 30px;
	width: 310px;
}

.valnova-builder-card img,
.valnova-builder-card__logo {
	display: block;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.valnova-builder-arrow {
	align-items: center;
	appearance: none;
	background: transparent !important;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
	display: flex;
	flex: 0 0 104px;
	height: 80px;
	justify-content: center;
	padding: 0;
	position: relative;
	width: 80px;
}

.valnova-builder-arrow::before {
	background: url("../img/caret-circle.svg") center / contain no-repeat;
	content: "";
	height: 80px;
	transition: filter 160ms ease, transform 160ms ease;
	width: 80px;
}

.valnova-builder-arrow--left::before {
	transform: none;
}

.valnova-builder-arrow--left {
	order: -1;
}

.valnova-builder-arrow:not(.valnova-builder-arrow--left)::before {
	transform: rotate(180deg);
}

.valnova-builder-arrow:not(.valnova-builder-arrow--left) {
	order: 999;
}

.valnova-builder-hint {
	align-items: center;
	color: #3c3c3c;
	display: flex;
	font-size: var(--valnova-font-sm);
	font-weight: 400;
	gap: 4px;
	justify-content: center;
	letter-spacing: -0.43px;
	line-height: 1;
	padding: 45px 0 0;
	text-align: center;
}

.valnova-builder-hint::before {
	background: url("../img/icon-hand-small.svg") center / contain no-repeat;
	content: "";
	height: 30px;
	width: 30px;
}

.valnova-builder-modal {
	align-items: center;
	display: flex;
	justify-content: center;
}

/* Builder detail modal */
.valnova-builder-modal__card {
	background: #ffffff;
	border-radius: 32px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	color: #000000;
	display: flex;
	flex-direction: column;
	left: calc(50% + 211px);
	overflow: hidden;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 2048px;
	z-index: 1;
}

.valnova-builder-modal__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 24px 48px;
	position: relative;
}

.valnova-builder-modal__header {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 236px;
	position: relative;
	width: 100%;
}

.valnova-builder-modal__logo {
	display: block;
	max-height: 236px;
	max-width: 554px;
	object-fit: contain;
}

.valnova-builder-modal__logo[hidden],
.valnova-builder-modal__hero[hidden],
.valnova-builder-modal__qr img[hidden] {
	display: none;
}

.valnova-builder-modal__header h2 {
	height: 1px;
	margin: -1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.valnova-builder-modal__close {
	appearance: none;
	background: transparent url("../img/XCircle.svg") center / 80px 80px no-repeat;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
	height: 80px;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 80px;
}


/* These measurements are the Figma values at the kiosk's established 2x scale. */
.valnova-builder-modal__hero {
	border-radius: 32px;
	height: 500px;
	margin: 0;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.valnova-builder-modal__image {
	height: 100%;
	position: relative;
	width: 100%;
}

.valnova-builder-modal__image img {
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: translateX(0);
	transition: opacity 420ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
	width: 100%;
}

.valnova-builder-modal__image img.is-active,
.valnova-builder-modal__image img:first-child:last-child {
	display: block;
	height: 100%;
	object-fit: cover;
	opacity: 1;
	transform: translateX(0);
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.valnova-modal.is-opening .valnova-modal__overlay,
	.valnova-modal.is-opening .valnova-lifestyle-modal__card,
	.valnova-modal.is-opening .valnova-neighborhood-modal__card,
	.valnova-modal.is-opening .valnova-builder-modal__card,
	.valnova-modal.is-opening .valnova-learn-more-modal__card {
		animation: none;
	}

	.valnova-modal.is-closing .valnova-modal__overlay,
	.valnova-modal.is-closing .valnova-lifestyle-modal__card,
	.valnova-modal.is-closing .valnova-neighborhood-modal__card,
	.valnova-modal.is-closing .valnova-builder-modal__card,
	.valnova-modal.is-closing .valnova-learn-more-modal__card {
		animation: none;
	}

	.valnova-home-gallery__image img,
	.valnova-lifestyle-modal__image img,
	.valnova-neighborhood-modal__image img,
	.valnova-builder-modal__image img {
		transform: none;
		transition: none;
	}
}

.valnova-builder-modal__arrow {
	align-items: center;
	appearance: none;
	background: transparent !important;
	border: 0;
	box-shadow: none !important;
	display: flex;
	height: 112px;
	justify-content: center;
	padding: 0 !important;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 112px;
	z-index: 2;
}

.valnova-builder-modal__arrow::before {
	background: url("../img/caret-circle.svg") center / contain no-repeat;
	content: "";
	height: 104px;
	transition: filter 160ms ease, transform 160ms ease;
	width: 104px;
}

.valnova-builder-modal__arrow--prev {
	left: 16px;
}

.valnova-builder-modal__arrow--next {
	right: 16px;
}

.valnova-builder-modal__arrow--next::before {
	transform: rotate(180deg);
}

.valnova-builder-modal__dots {
	align-items: center;
	background: #ffffff;
	border-radius: 48px 48px 0 0;
	bottom: 0;
	display: flex;
	gap: 20px;
	justify-content: center;
	left: 50%;
	min-height: 70px;
	padding: 20px 32px 16px;
	position: absolute;
	transform: translateX(-50%);
	z-index: 2;
}

.valnova-builder-modal__dots span {
	background: rgba(26, 47, 92, 0.5);
	border-radius: var(--valnova-pill);
	height: 24px;
	width: 24px;
}

.valnova-builder-modal__dots span.is-active {
	background: var(--valnova-navy);
}

.valnova-builder-modal__section {
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding: 0 32px;
}

.valnova-builder-modal__section h3 {
	align-items: center;
	color: var(--valnova-navy);
	display: flex;
	font-size: var(--valnova-font-display-lg);
	font-weight: 700;
	gap: 32px;
	letter-spacing: -0.46px;
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
	white-space: nowrap;
}

.valnova-builder-modal__section h3::after {
	background: rgba(26, 47, 92, 0.7);
	content: "";
	flex: 1 1 auto;
	height: 2px;
}

.valnova-builder-modal__types {
	align-items: flex-start;
	display: flex;
	gap: 88px;
	justify-content: center;
}

.valnova-builder-modal__type {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content: center;
	text-align: center;
}

.valnova-builder-modal__type[hidden] {
	display: none;
}

.valnova-builder-modal__type span,
.valnova-builder-modal__detail-icon {
	align-items: center;
	aspect-ratio: 1;
	background: #f7f7f7;
	border-radius: var(--valnova-pill);
	display: flex;
	flex: 0 0 152px;
	height: 152px;
	justify-content: center;
	width: 152px;
}

.valnova-builder-modal__type img,
.valnova-builder-modal__detail-icon img {
	display: block;
	filter: brightness(0) saturate(100%) invert(61%) sepia(75%) saturate(475%) hue-rotate(75deg) brightness(88%) contrast(88%);
	height: 80px;
	object-fit: contain;
	width: 80px;
}

.valnova-builder-modal__type p {
	color: #000000;
	font-size: var(--valnova-font-xl);
	font-weight: 400;
	letter-spacing: -0.46px;
	line-height: 1;
	margin: 0;
	white-space: nowrap;
}

.valnova-builder-modal__details,
.valnova-builder-modal__contact {
	display: grid;
	gap: 48px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.valnova-builder-modal__detail {
	align-items: flex-start;
	display: flex;
	gap: 32px;
	min-width: 0;
}

.valnova-builder-modal__detail h4,
.valnova-builder-modal__qr h4 {
	color: var(--valnova-navy);
	font-size: var(--valnova-font-lg);
	font-weight: 700;
	letter-spacing: -0.46px;
	line-height: 1;
	margin: 0 0 32px;
	text-transform: uppercase;
}

.valnova-builder-modal__detail p,
.valnova-builder-modal__qr p,
.valnova-builder-modal__contact-list p {
	color: #000000;
	font-size: var(--valnova-font-xl);
	font-weight: 400;
	letter-spacing: -0.46px;
	line-height: 1;
	margin: 0;
}
.valnova-builder-modal__contact-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content: center;
	min-width: 0;
}

.valnova-builder-modal__contact-list p {
	align-items: center;
	display: flex;
	gap: 16px;
	min-width: 0;
}

.valnova-builder-modal__contact-list p span:last-child {
	display: block;
	line-height: 1.12;
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.valnova-builder-modal__contact-icon {
	background: var(--valnova-green);
	display: block;
	flex: 0 0 48px;
	height: 48px;
	width: 48px;
}

.valnova-builder-modal__contact-icon--phone {
	mask: url("../img/builder-contact-phone.svg") center / contain no-repeat;
	-webkit-mask: url("../img/builder-contact-phone.svg") center / contain no-repeat;
}

.valnova-builder-modal__contact-icon--website {
	mask: url("../img/builder-contact-globe.svg") center / contain no-repeat;
	-webkit-mask: url("../img/builder-contact-globe.svg") center / contain no-repeat;
}

.valnova-builder-modal__qr {
	align-items: center;
	display: flex;
	gap: 24px;
	justify-content: center;
	min-width: 0;
	padding: 16px 24px;
}

.valnova-builder-modal__qr > div {
	min-width: 0;
}

.valnova-builder-modal__qr img {
	display: block;
	height: 158px;
	object-fit: contain;
	width: 158px;
}

.valnova-builder-modal__qr h4 {
	font-size: var(--valnova-font-lg);
	margin-bottom: 8px;
	white-space: nowrap;
}

.valnova-builder-modal__qr p {
	font-size: var(--valnova-font-xl);
	max-width: none;
}

.valnova-builder-modal__footer {
	align-items: center;
	background: #edf1fa;
	border-top: 2px solid #d3d3d3;
	display: flex;
	gap: 32px;
	padding: 32px 48px;
}

.valnova-builder-modal__footer p {
	color: var(--valnova-navy);
	flex: 1 1 auto;
	font-size: var(--valnova-font-xl);
	font-weight: 400;
	letter-spacing: -0.46px;
	line-height: 1;
	margin: 0;
}

/* 10. Living here / nearby page
   The draggable map, its annotations, and the category side panel live here. */
.valnova-nearby-map {
	cursor: grab;
	height: 2160px;
	left: 373px;
	overflow: hidden;
	position: absolute;
	top: 0;
	touch-action: none;
	width: 3467px;
	z-index: 1;
}

.valnova-nearby-map__surface {
	height: 2349px;
	left: -346px;
	position: absolute;
	top: 0;
	transform-origin: 0 0;
	width: 4639px;
}

.valnova-nearby-map__image {
	height: 100%;
	margin: 0;
	width: 100%;
}

.valnova-nearby-map__image img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Map artwork and destination annotations */
.valnova-nearby-map__route,
.valnova-nearby-map__connector,
.valnova-nearby-map__logo,
.valnova-nearby-map__pin,
.valnova-nearby-map__destination,
.valnova-nearby-map__inset,
.valnova-nearby-map__road-label,
.valnova-nearby-map__future-road {
	position: absolute;
	z-index: 2;
}

.valnova-nearby-map__route {
	height: 433px;
	left: 779px;
	top: 275px;
	width: 516px;
}

.valnova-nearby-map__connector {
	height: 433px;
	left: 705px;
	top: 1181px;
	width: 43px;
}

.valnova-nearby-map__logo {
	align-items: center;
	border-radius: 16px;
	display: flex;
	justify-content: center;
	left: 900px;
	top: 390px;
	width: 355px;
}

.valnova-nearby-map__logo img {
	height: 80px;
}

.valnova-nearby-map__pin {
	align-items: center;
	background: var(--valnova-navy);
	border: 2px solid #ffffff;
	border-radius: var(--valnova-pill);
	display: flex;
	height: 100px;
	justify-content: center;
	left: 817px;
	top: 600px;
	width: 100px;
}

.valnova-nearby-map__pin img,
.valnova-nearby-map__pin svg {
	display: block;
	height: 55px;
	width: 55px;
}

.valnova-nearby-map__destination {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.valnova-nearby-map__destination span {
	background: var(--valnova-navy);
	border: 2px solid #ffffff;
	border-radius: var(--valnova-pill);
	display: block;
	height: 47px;
	position: relative;
	width: 47px;
}

.valnova-nearby-map__destination span::before {
	background: url("../img/nearby-map-arrow.svg") center / contain no-repeat;
	content: "";
	inset: 8px;
	position: absolute;
}

.valnova-nearby-map__destination strong {
	background: var(--valnova-navy);
	border-radius: 16px;
	color: #ffffff;
	display: block;
	font-size: var(--valnova-nearby-map-label-font);
	font-weight: 600;
	letter-spacing: -0.23px;
	line-height: 1;
	padding: 8px 40px 8px 8px;
	white-space: nowrap;
}

.valnova-nearby-map__destination--emmett {
	left: 589px;
	top: 20px;
}

.valnova-nearby-map__destination--mccall {
	left: 1803px;
	top: 16px;
}

.valnova-nearby-map__inset {
	height: 225px;
	left: 1050px;
	top: 24px;
	width: 600px;
}

.valnova-nearby-map__inset-image {
	border: 4px solid #ffffff;
	border-radius: var(--valnova-pill);
	box-sizing: border-box;
	height: 225px;
	overflow: hidden;
	position: relative;
	width: 225px;
	z-index: 10;
}

/* Keep the inset map zoomed inside its fixed circular viewport. */
.valnova-nearby-map__inset-image img {
	display: block;
	height: 100%;
	object-fit: cover;
	transform: translateX(20px) scale(1.8);
	transform-origin: center;
	width: 100%;
}

.valnova-nearby-map__inset p {
	background: #ffffff;
	border-radius: 0 16px 16px 0;
	box-sizing: border-box;
	color: var(--valnova-navy);
	font-size: var(--valnova-nearby-map-label-font);
	left: 200px;
	letter-spacing: -0.23px;
	line-height: 1;
	margin: 0;
	padding: 8px 8px 8px 47px;
	position: absolute;
	top: 51px;
	width: 400px;
}

.valnova-nearby-map__inset strong,
.valnova-nearby-map__inset small {
	display: block;
	font-size: var(--valnova-font-min);
	line-height: 1;
}

.valnova-nearby-map__inset strong {
	font-weight: 600;
}

.valnova-nearby-map__inset small {
	font-weight: 400;
}

.valnova-nearby-map__road-label {
	background: var(--valnova-navy);
	border-radius: 10px;
	color: #ffffff;
	font-size: var(--valnova-font-min);
	font-weight: 600;
	line-height: 1;
	padding: 8px;
	white-space: nowrap;
}

.valnova-nearby-map__road-label--hwy-16 { left: 688px; top: 326px; }
.valnova-nearby-map__road-label--hwy-26 { left: 583px; top: 1159px; }
.valnova-nearby-map__road-label--hwy-55 { left: 1688px; top: 499px; }
.valnova-nearby-map__road-label--i-84-a { left: 1306px; top: 1599px; }
.valnova-nearby-map__road-label--i-184 { left: 1777px; top: 1454px; }

.valnova-nearby-map__future-road {
	background: var(--valnova-navy);
	border: 2px solid #ffffff;
	border-radius: 16px;
	color: #ffffff;
	font-size: var(--valnova-nearby-map-future-road-font);
	font-weight: 600;
	left: 471px;
	letter-spacing: -0.23px;
	line-height: 1;
	padding: 7px;
	text-align: center;
	top: 1277px;
	width: 247px;
}

.valnova-nearby-poi {
	align-items: center;
	display: flex;
	gap: 8px;
	position: absolute;
	z-index: 3;
}

/* Points of interest */
.valnova-nearby-poi--label-left {
	flex-direction: row;
}

.valnova-nearby-poi--label-right {
	flex-direction: row-reverse;
}

.valnova-nearby-poi--stacked {
	flex-direction: column;
	gap: 8px;
}

.valnova-nearby-poi__icon {
	align-items: center;
	border: 2px solid #ffffff;
	border-radius: var(--valnova-pill);
	display: flex;
	height: 104px;
	justify-content: center;
	width: 104px;
}

.valnova-nearby-poi__icon img {
	display: block;
	height: 52px;
	object-fit: contain;
	width: 52px;
}

.valnova-nearby-poi__label {
	background: #ffffff;
	border-radius: var(--valnova-radius-sm);
	color: var(--valnova-navy);
	/* Figma map-card title: 14px at the 3x kiosk stage scale. */
	font-size: var(--valnova-font-min);
	font-weight: 600;
	letter-spacing: -0.23px;
	line-height: 1;
	padding: 15px;
	white-space: nowrap;
}

.valnova-nearby-poi__label small {
	display: block;
	font-size: var(--valnova-font-min);
	font-weight: 400;
	line-height: 1;
}

.valnova-nearby-poi__label .is-future {
	color: #d95e2d;
	font-size: var(--valnova-font-min);
	font-weight: 400;
}

/* Micron is the one Figma map callout whose future time remains 12px. */
.valnova-nearby-poi--micron .valnova-nearby-poi__label .is-future {
	font-size: var(--valnova-font-xs);
}

.valnova-nearby-poi--groceries .valnova-nearby-poi__icon { background: rgba(45, 170, 154, 0.8); }
.valnova-nearby-poi--recreation .valnova-nearby-poi__icon { background: rgba(43, 90, 50, 0.8); }
.valnova-nearby-poi--dining .valnova-nearby-poi__icon { background: rgba(26, 114, 162, 0.8); }
.valnova-nearby-poi--shopping .valnova-nearby-poi__icon { background: rgba(177, 101, 47, 0.8); }
.valnova-nearby-poi--education .valnova-nearby-poi__icon { background: rgba(117, 57, 135, 0.8); }
.valnova-nearby-poi--transport .valnova-nearby-poi__icon { background: rgba(26, 47, 92, 0.8); }
.valnova-nearby-poi--employers .valnova-nearby-poi__icon { background: rgba(183, 46, 46, 0.8); }

.valnova-nearby-poi--costco { left: 830px; top: 1200px; }
.valnova-nearby-poi--winco { left: 1110px; top: 1200px; }
.valnova-nearby-poi--bogus { left: 2430px; top: 550px; }
.valnova-nearby-poi--eagle { left: 1345px; top: 895px; }
.valnova-nearby-poi--boise { left: 2030px; top: 1415px; }
.valnova-nearby-poi--town-square { left: 1492px; top: 1500px; }
.valnova-nearby-poi--village { left: 1355px; top: 1390px; }
.valnova-nearby-poi--district { left: 830px; top: 1525px; }
.valnova-nearby-poi--micron { left: 2300px; top: 2008px; }
.valnova-nearby-poi--star-middle { left: 470px; top: 790px; }
.valnova-nearby-poi--bsu { left: 1990px; top: 1550px; }
.valnova-nearby-poi--eagle-high { left: 975px; top: 865px; }
.valnova-nearby-poi--airport { left: 1668px; top: 1825px; }
.valnova-nearby-poi--star-elementary { left: 395px; top: 905px; }
.valnova-nearby-poi--barber { left: 2330px; top: 1725px; }
.valnova-nearby-poi--lucky-peak { left: 2410px; top: 2140px; }

.valnova-nearby-panel {
	background: #ffffff;
	border-radius: var(--valnova-radius-lg);
	box-shadow: var(--valnova-card-shadow);
	box-sizing: border-box;
	min-height: 2088px;
	padding: 62px 48px 146px;
	position: absolute;
	right: 30px;
	top: 24px;
	width: 1050px;
	z-index: 5;
}

/* Nearby categories side panel */
.valnova-nearby-panel h1 {
	color: var(--valnova-navy);
	/* Figma side-panel heading: 24px at the 3x kiosk stage scale. */
	font-size: var(--valnova-font-display-lg);
	font-weight: 700;
	letter-spacing: -0.43px;
	line-height: 1;
	margin: 0 0 64px;
	text-transform: uppercase;
}

.valnova-nearby-list {
	display: flex;
	flex-direction: column;
	gap: 46px;
}

.valnova-nearby-category {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 24px;
}

.valnova-nearby-category__icon {
	align-items: center;
	border-radius: var(--valnova-pill);
	display: flex;
	height: 110px;
	justify-content: center;
	width: 110px;
}

.valnova-nearby-category__icon img {
	height: 56px;
	object-fit: contain;
	width: 56px;
}

.valnova-nearby-category h2 {
	color: var(--valnova-navy);
	/* Figma category heading: 18px at the 3x kiosk stage scale. */
	font-size: var(--valnova-font-md);
	font-weight: 700;
	letter-spacing: -0.23px;
	line-height: 1;
	margin: 0 0 22px;
	text-transform: uppercase;
}

.valnova-nearby-category dl {
	display: grid;
	gap: 16px 24px;
	grid-template-columns: 1fr auto;
	margin: 0;
}

.valnova-nearby-category dt,
.valnova-nearby-category dd {
	color: var(--valnova-navy);
	font-weight: 400;
	letter-spacing: -0.23px;
	line-height: 1;
	margin: 0;
}

.valnova-nearby-category dt {
	font-size: var(--valnova-font-md);
	font-weight: 500;
}

.valnova-nearby-category dd {
	/* Figma travel time: 16px at the 3x kiosk stage scale. */
	color: #000000;
	font-size: var(--valnova-font-md);
}

.valnova-nearby-panel__footer {
	align-items: center;
	background: var(--valnova-page-bg);
	border-radius: 0 0 var(--valnova-radius-lg) var(--valnova-radius-lg);
	bottom: 0;
	display: flex;
	height: 130px;
	justify-content: center;
	left: 0;
	position: absolute;
	right: 0;
}

.valnova-nearby-panel__footer img {
	height: 146px;
	object-fit: contain;
	width: 544px;
}

/* 11. About us page
   Hero, story cards, partner logos, and related-community cards. */
.valnova-about {
	background: var(--valnova-page-bg);
}

.valnova-about__main {
	height: 2160px;
	left: 373px;
	position: absolute;
	top: 0;
	width: 3467px;
}

/* Hero */
.valnova-about-hero {
	height: 700px;
	inset: 0 0 auto 0;
	overflow: hidden;
	position: absolute;
}

.valnova-about-hero::after {
	background: rgba(26, 47, 92, 0.45);
	content: "";
	inset: 0;
	position: absolute;
}

.valnova-about-hero__image {
	height: 100%;
	inset: 0;
	margin: 0;
	position: absolute;
	width: 100%;
}

.valnova-about-hero > img,
.valnova-about-hero__image img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center 43%;
	width: 100%;
}

.valnova-about-hero__content {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 56px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 1506px;
	z-index: 2;
}

.valnova-about-hero__logo {
	aspect-ratio: 753 / 106.536;
	display: block;
	height: 213.072px;
	margin: 0;
	object-fit: contain;
	width: 1506px;
}

.valnova-about-hero__logo img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.valnova-about-cards {
	display: grid;
	gap: 45px;
	grid-template-columns: repeat(3, 1fr);
	height: 748px;
	left: 45px;
	position: absolute;
	top: 742px;
	width: 3377px;
}

/* Story and partner cards */
.valnova-about-card,
.valnova-about-communities {
	background: #ffffff;
	border-radius: var(--valnova-radius-lg);
	box-shadow: var(--valnova-card-shadow);
	box-sizing: border-box;
	color: #000000;
}

.valnova-about-card {
	display: flex;
	flex-direction: column;
	gap: 43px;
	justify-content: flex-start;
	min-width: 0;
	padding: 45px;
}

.valnova-about-card h1,
.valnova-about-card h2,
.valnova-about-communities h2 {
	color: var(--valnova-navy);
	font-size: var(--valnova-font-xl);
	font-weight: 700;
	letter-spacing: -0.43px;
	line-height: 1.05;
	margin: 0;
	text-transform: uppercase;
}

.valnova-about-card p {
	color: #000000;
	font-size: var(--valnova-font-min);
	font-weight: 400;
	letter-spacing: -0.2px;
	line-height: 1.4;
	margin: 0;
}

.valnova-about-card--story {
	gap: 32px;
}

.valnova-about-card--logos {
	align-items: center;
	gap: 46px;
}

.valnova-about-card--logos h2 {
	align-self: stretch;
}

.valnova-about-card__clyde-capital {
	height: 283px;
	margin: 0;
	object-fit: contain;
	width: 360px;
}

.valnova-about-card__clyde-capital img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.valnova-about-card__clyde-companies {
	height: 125px;
	margin: 0;
	object-fit: contain;
	width: 538px;
}

.valnova-about-card__clyde-companies img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.valnova-about-partners {
	align-items: center;
	display: flex;
	gap: 75px;
	justify-content: center;
	padding-top: 64px;
	width: 100%;
}

.valnova-about-partners figure {
	margin: 0;
}

.valnova-about-partners img {
	display: block;
	height: 170px;
	object-fit: contain;
	width: 360px;
}

.valnova-about-communities {
	bottom: 45px;
	height: 580px;
	left: 45px;
	padding: 45px;
	position: absolute;
	width: 3377px;
}

/* Other Clyde communities */
.valnova-about-communities h2 {
	font-size: var(--valnova-font-xl);
	line-height: 1;
	margin-bottom: 32px;
}

.valnova-about-community-grid {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(4, 1fr);
}

.valnova-about-community {
	aspect-ratio: 405.75 / 214;
	border-radius: var(--valnova-radius-sm);
	overflow: hidden;
	position: relative;
}

.valnova-about-community__image {
	display: block;
	height: 100%;
	margin: 0;
	object-fit: cover;
	inset: 0;
	position: absolute;
	width: 100%;
}

.valnova-about-community__image img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.valnova-about-community__overlay {
	background: rgba(26, 47, 92, 0.45);
	inset: 0;
	position: absolute;
}

.valnova-about-community__logo {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 22px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

.valnova-about-community__logo--desert img:first-child {
	height: 76px;
	width: 128px;
}

.valnova-about-community__logo--desert img:last-child {
	height: 43px;
	width: 554px;
}

.valnova-about-community__logo--solente img:first-child {
	height: 117px;
	width: 126px;
}

.valnova-about-community__logo--solente img:last-child {
	height: 57px;
	width: 421px;
}

.valnova-about-community__logo--pinemar img {
	height: 52px;
	width: 375px;
}

.valnova-about-community__logo--alcantil img:first-child {
	height: 91px;
	width: 118px;
}

.valnova-about-community__logo--alcantil img:last-child {
	height: 52px;
	width: 375px;
}

.valnova-about-community__name {
	color: #ffffff;
	font-size: 56px;
	font-weight: 400;
	letter-spacing: 10px;
	left: 50%;
	line-height: 1;
	position: absolute;
	text-align: center;
	text-transform: uppercase;
	top: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	z-index: 2;
}

.valnova-interest__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
}