/*================================================================
	ARTHAUS HOME PAGE — CSS SCAFFOLD
	Designer Specs: POINTS (pt × 1.333 = px, px ÷ 10 = rem)
	Base: html { font-size: 62.5% } → 1rem = 10px
	Fonts: Playfair Display (headings), Source Sans Pro (body/UI)
	Clamp range: 1365px → 1920px viewport
	Author: Brian Mishico for Splat, Inc.
	Author URI: https://splatworld.tv/
================================================================*/





/*//// FONTS ////*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Source+Sans+Pro:wght@600&display=swap');





/*//// CSS FOR FRONT PAGE - front-page.php ////*/
#front-page {}





/*//// BOX SIZING ////*/
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }





/*//// GLOBAL DOCUMENT SET UP ////*/
html {
    width: 100%; 
    width: 100vw; 
    height: 100%;	
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 62.5%; /* = 10px BASE FONT-SIZE FOR EM */
    line-height: 1.33; /* = 133% BASE LINE HEIGHT */
    font-weight: normal;
    font-style: normal;
    color: #686868;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body {
    width: 100%; 
    width: 100vw; 
    height: 100%;	
    overflow-x: hidden;
    background-color: var(--var-body-color);
}




/*///// OVER-RIDE APPLE DATA DETECTORS /////*/
*[x-apple-data-detectors] {
    cursor: default !important;
    color: inherit !important;
    text-decoration: none !important;
}





/*///// SHARED PAGE ELEMENTS /////*/
/*// HEADER //*/
header.header {
    background-color: transparent;
    transition: background-color 0.3s ease;
}
header.header.scrolled {
	background-color: rgba(0, 0, 0, 0.2);
	background-color: rgba(0, 0, 0, 0.33);
	background-color: rgba(0, 0, 0, 0.4);
}
.primaryNav__container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
}
.primaryNav > li {
	margin-left: 3rem;
}
.primaryNav > li,
.primaryNav > li > a {
    color: #ffffff;
    font-size: 1.6rem;
}




/*//// SKIP TO CONTENT ////*/
a.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 1rem;
    background: #000;
    color: #fff;
}
a.skip-to-content:focus {
    left: 0;
}





/*//// WRAPS ALL - MAIN, SECTIONS AND FOOTER ////*/
div.page-container {
    position: relative;
    min-height: 100%;
    background-color: #ffffff;
    opacity: 1;
    transition: opacity .25s ease;
}
div.page-container.fade-in {
	opacity: 1;
}





/*//// MAIN HOLDS SECTIONS EXCEPT FOOTER ////*/
main {
    position: relative;
    width: 100%;
    max-width: 100%; 
    height: auto;
    min-height: calc( 100vh - ( 100vh * var(--var-sticky-footer-height) ) );
    margin: 0 auto;
    background-color: #ffffff;
}





/*//// SECTIONS HOLD PAGE/DESIGN ELEMENTS ////*/
section { 
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
}





/*//// SUB-SECTION CONTAINERS ////*/
div.container-content-width {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0;
    background-color: inherit;
}





/*////// SHARED COMPONENTS //////*/
/*// HOME BUTTON //*/
.splat-btn,
.haus-btn {
	display: inline-block;
	padding: 2rem 3.5rem;
	margin: 0 0;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 2.4rem; /* 24px (18pt) */
	font-size: clamp(16px, 2.4rem, 24px);
	line-height: 1;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	text-decoration: none;
	color: #0d3846;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
	background-color: rgba(131, 238, 212, .75);
}
.splat-btn:hover,
.haus-btn:hover {
	color: #000000;
	background-color: rgba(131, 238, 212, 1);
}

/*// HOME EYEBROW //*/
.splat-eyebrow,
.haus-eyebrow {
	margin-bottom: 2.2rem;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 2.93rem; /* 29.3px (22pt) */
	font-size: clamp(18px, 2.93rem, 29.3px);
	line-height: 1.184;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: #08c1a7;
	color: #1ab4a2;
}

/*// VERT ALIGN CONTENT CONTAINER //*/
div.content-container {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: auto;
	padding: 0 0;
	margin: 0 0;
}





/*/////////// CONTENT SECTIONS //////////*/
/*////// HERO SECTION //////*/
section.hero-section {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	overflow: hidden;
}
section.hero-section div.hero-container {
	z-index: 1;
	height: 110rem;
	padding: 0 18rem;
}

/*//// FLEX ////*/
div.hero-container div.splat-flex-container.hero-flex-container {
	height: 100%;
}
div.hero-flex-container div.hero-flex-item {
	text-align: center;
}

/*// ELEMENTS //*/
#content-container-1 {
	top: 64.5%;
}
div.hero-flex-item h1 {
	padding: 0 0;
	margin: 0 0 5rem 0;
	font-family: 'Playfair Display', serif;
	font-size: 7.8rem; /* 80px (60pt) */
	line-height: 1.134;
	font-weight: 700;
	color: #ffffff;
	text-align: center;
}
/*//// VIDEO ////*/
.hero-bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
    z-index: 0;
}




/*////// DIFFERENCE SECTION //////*/
section.difference-section {
	margin-top: 4rem;
	background-color: #ffffff;
}
section.difference-section div.difference-container {
	height: 104rem;
	height: 97.1rem;
	padding: 0 14.5rem;
	overflow: hidden;
}

/*//// FLEX ////*/
div.difference-container div.splat-flex-container.difference-flex-container {}
div.difference-flex-container div.difference-flex-item {}

/*// ELEMENTS //*/
#content-container-2 {
	top: 50%;
	width: 85%;
}
div.difference-flex-item h2 {
	margin-bottom: 3.4rem;
	font-family: 'Playfair Display', serif;
	font-size: 6.67rem; /* 66.7px (50pt) */
	font-size: 6.3rem;
	line-height: 1.12; /* 74.7px (56pt) */
	font-weight: 400;
}
div.difference-flex-item div {
	width: 96%;
	margin-bottom: 4rem;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 2.4rem; /* 24px (18pt) */
	font-size: clamp(18px, 2.4rem, 24px );
	line-height: 1.446;
}
div.difference-flex-item img.difference-image {
    float: right;
    width: 105.5rem;
    height: auto;
    margin-right: -14.5rem;	
    margin-top: -10.1rem;
}





/*////// MODELS SECTION //////*/
section.models-section {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
section.models-section div.models-container {
	min-height: 30rem;
	padding: 5rem 0 6rem 0;
}

/*//// FLEX ////*/
div.models-container div.splat-flex-container.models-flex-container {}
div.models-flex-container div.models-flex-item {
	text-align: center;
}

/*// ELEMENTS //*/
div.models-flex-item h2 {
	margin-bottom: 3.4rem;
	font-family: 'Playfair Display', serif;
	font-size: 5.33rem; /* 53.3px (40pt) */
	line-height: 1.15; /* 61.3px (46pt) */
	font-weight: 400;
	color: #ffffff;
	text-align: center;
}
div.models-flex-item p.models-phone,
div.models-flex-item p.models-phone a {
	margin-bottom: 3.4rem;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 2.93rem; /* 29.3px (22pt) */
	font-size: clamp(18px, 2.93rem, 29.3px );
	line-height: 1.184; /* 34.7px (26pt) */
	color: #08c1a7;
	text-align: center;
}





/*////// RESIDENCES SECTION //////*/
section.residences-section {
	background-color: #f1f1f1;
}
section.residences-section div.residences-container {
	padding: 8rem 8rem;
}
section.residences-section div.residences-container:after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 14.5rem;
	height: 1rem;
	background-color: #a9c68b;
}

/*//// FLEX ////*/
div.residences-container div.splat-flex-container.residences-flex-container {}
div.residences-flex-container div.residences-flex-item {
	text-align: center;
}

/*// ELEMENTS //*/
#residences-flex-item-2 {
	padding-top: 4rem;
}
div.residences-flex-item img.residences-image {
    width: 100%;
    margin: 0 auto;
    cursor: pointer;
}
div.residences-flex-item h2 {
	margin-bottom: 3.4rem;
	font-family: 'Playfair Display', serif;
	font-size: 6.67rem; /* 66.7px (50pt) */
	font-size: 6.3rem;
	line-height: 1.12; /* 74.7px (56pt) */
	font-weight: 400;
	text-align: center;
}
div.residences-flex-item div {
	margin-bottom: 4rem;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 2.4rem; /* 24px (18pt) */
	font-size: clamp(18px, 2.4rem, 24px );
	line-height: 1.446; /* 34.7px (26pt) */
	text-align: center;
}
div.residences-flex-item div p {
	width: 90%;
	margin: 0 auto;
}

/*//// VIDEO - MEDIA WRAPPER ////*/
.residences-media-wrapper {
    position: relative;
    overflow: hidden;
}
.residences-video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.2s ease;
    z-index: 2;
}
.residences-video.is-active {
    opacity: 1;
    pointer-events: auto;
}
.residences-video.is-fading-out {
    opacity: 0;
}
/*// PLAY BUTTON //*/
.residences-play-btn {
	display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    transition: opacity 0.5s ease;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.residences-play-btn.is-hidden {
    opacity: 0;
    pointer-events: none;
}





/*////// NEIGHBORHOOD SECTION //////*/
section.neighborhood-section {}
section.neighborhood-section div.neighborhood-container {
	height: 113.5rem;
	padding: 8rem 20rem 4rem 20rem;
}

/*//// FLEX ////*/
div.neighborhood-container div.splat-flex-container.neighborhood-flex-container {}
div.neighborhood-flex-container div.neighborhood-flex-item {
	text-align: center;
}

/*// ELEMENTS //*/
div.neighborhood-flex-item h2 {
	margin-bottom: 3.4rem;
	font-family: 'Playfair Display', serif;
	font-size: 6.67rem; /* 66.7px (50pt) */
	font-size: 6.3rem;
	line-height: 1.12; /* 74.7px (56pt) */
	font-weight: 400;
}
div.neighborhood-flex-item img.neighborhood-image {}

/*// PANOIMAGE //*/
#neighborhood-flex-item-2 .panoImage {
	margin: 0 auto;
    max-height: 63.5rem;
    max-width: 150rem;
    margin-bottom: 4rem;
}





/*////// AMENITIES SECTION //////*/
section.amenities-section {}
section.amenities-section div.amenities-container {
	padding: 0 9.5rem 8rem 14rem;
}

/*//// FLEX ////*/
div.amenities-container div.splat-flex-container.amenities-flex-container {}
div.amenities-flex-container div.amenities-flex-item {
	text-align: center;
}

/*// ELEMENTS //*/
#content-container-3 {
	width: 73%;
	text-align: left;
}
div.amenities-flex-item h2 {
	width: 100%;
	margin-bottom: 3.4rem;
	font-family: 'Playfair Display', serif;
	font-size: 6.67rem; /* 66.7px (50pt) */
	font-size: 6.3rem;
	line-height: 1.12; /* 74.7px (56pt) */
	font-weight: 400;
}
div.amenities-flex-item div {
	margin-bottom: 4rem;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 2.4rem; /* 24px (18pt) */
	font-size: clamp(18px, 2.4rem, 24px );
	line-height: 1.446; /* 34.7px (26pt) */
}
div.amenities-flex-item img.amenities-image {
    float: right;
    width: 97.5rem;
    height: auto;
    margin-right: -2.5rem;
    margin-top: -8rem;
}





/*//// HIDE RECAPTCHA BADGE ////*/
div.grecaptcha-badge { display: none !important; }





/*///////// RESPONSIVE / BREAKPOINTS ////////*/
@media only screen and (max-width: 1920px) {
		html { font-size: 0.523vw; } /* < 1920 DESIGN WIDTH */
}
@media only screen and (max-width: 1440px) { }

/*// MOBILE SCREEN //*/
@media only screen and (max-width: 1090px) { 

   		.header__outer { background-color: transparent; }
   		.hamburger-inner, 
   		.hamburger-inner::after, 
   		.hamburger-inner::before { background-color: #ffffff; }

}
@media only screen and (max-width: 851px) { 

		#content-container-1,
		#content-container-2,
		#content-container-3 { position: relative; width: 100%; ]

}
@media only screen and (max-width: 480px) {

		html { font-size: 2.083vw; }

		/*////// CONTAINER RESET //////*/
		div.container-content-width {}
		div.container-content-width br { display: none !important; }
		div.container-content-width div.content-container { position: relative; text-align: left; }


		/*////// SHARED - BUTTONS / EYEBROW //////*/
		.splat-btn, .haus-btn { padding: 1.8rem 3.4rem; font-size: 2rem; background-color: #84e7cb; }
		.splat-eyebrow, .haus-eyebrow { font-size: 2.1rem; }


		/*////// HERO SECTION //////*/
		section.hero-section {}
		section.hero-section div.hero-container { 
			width: 100%; height: 90svh; 
			min-width: initial; min-height: initial; 
			padding: 8rem 0; }
		div.hero-flex-item h1 { font-size: 5rem; }
		#content-container-1 { text-align: center; }


		/*////// DIFFERENCE SECTION //////*/
		section.difference-section {}
		section.difference-section div.difference-container {
			width: 100%; height: auto; 
			min-width: initial; min-height: initial; 
			padding: 1rem 3rem 3rem 3rem; 
		}
		div.difference-flex-item h2 { font-size: 4.33rem; }
		div.difference-flex-item div { font-size: 18px; line-height: 1.277; }
		div.difference-flex-item img.difference-image {
		    float: none;
		    width: 90%; height: auto;
		    margin-right: 0; margin-top: 0;
		    width: 108.8%; margin-left: -2rem;
		}
		#difference-flex-item-1 { order: 2; padding-top: 2rem; }
		#difference-flex-item-2 { order: 1; }


		/*////// MODELS SECTION //////*/
		section.models-section {}
		section.models-section div.models-container { 
			width: 100%; height: auto; 
			min-width: initial; min-height: initial; 
			padding: 4rem 0; 
		}
		div.models-flex-item h2 { font-size: 3.3rem; }
		div.models-flex-item p.models-phone, 
		div.models-flex-item p.models-phone a { font-size: 3.1rem; letter-spacing: .13em; }


		/*////// RESIDENCES SECTION //////*/
		section.residences-section {}
		section.residences-section div.residences-container { 
			width: 100%; height: auto; 
			min-width: initial; min-height: initial; 
			padding: 0 0 8rem 0; 
		}
		div.residences-flex-item h2 { font-size: 4.33rem; text-align: left; }
		div.residences-flex-item div,
		div.residences-flex-item div p { width: 100%; font-size: 18px; line-height: 1.277; text-align: left; }
		div.residences-flex-item img.residences-image {
		    position: relative;
		    left: 50%;
			transform: translateX(-50%);
		    width: 100%;
		}
		#residences-flex-item-2 { padding: 0 3rem; text-align: left; }


		/*////// NEIGHBORHOOD SECTION //////*/
		section.neighborhood-section {}
		section.neighborhood-section div.neighborhood-container { 
			width: 100%; height: auto; 
			min-width: initial; min-height: initial; 
			padding: 8rem 3rem 0 3rem; 
		}
		div.neighborhood-flex-item h2 { font-size: 4.33rem; }
		#neighborhood-flex-item-2 .panoImage { height: calc(100vh - 83px); margin: 4rem 0 0 0; }


		/*////// AMENITIES SECTION //////*/
		section.amenities-section {}
		section.amenities-section div.amenities-container { 
			width: 100%; height: auto; 
			min-width: initial; min-height: initial; 
			padding: 3rem 3rem 8rem 3rem; 
		}
		div.amenities-flex-item h2 { width: 100%; font-size: 4.33rem; }
		div.amenities-flex-item div,
		div.amenities-flex-item div p { font-size: 18px; line-height: 1.277; text-align: left; }
		div.amenities-flex-item img.amenities-image {
		    float: none;
		    width: 115%; height: auto;
		    margin-right: 0; margin-top: 0;
		    margin-left: -6.1rem;
		}

}
@media only screen and (max-width: 320px) { }
@media screen and (max-width: 851px) and (orientation: landscape) { }