:root{
    --color-primary:#dde5d0;
    --color-secondary:#ad7a52; 
    --color-tertiary:#ccd2c5; 
    --color-quaternary: #c8cbd2;
}
*, *::before, *::after { box-sizing: border-box;  font-style: normal; font-weight:500; margin: 0; }
html{ font-size: 16px;scroll-behavior: smooth; }
body{ margin:0; font-family: "Inter", sans-serif;}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {font-family: "Marcellus", sans-serif;margin-bottom:1rem;}
h2, .h2 {font-size:2.2rem;}
h3, .h3 {font-size:1.8rem;}
p {margin-bottom:0.5rem;line-height:1.6;}
ul {line-height:1.6;}
strong {font-family: "Lora", serif;font-weight:700;}

.logo {text-transform: uppercase;font-family:'Marcellus',sans-serif;font-size:3rem;}
.comorant {font-family:'Comorant',serif;font-style: italic;}
.big-text {text-transform: uppercase;font-family:'Marcellus',sans-serif;}
.container {width:100%;max-width:1700px;margin-left:auto;margin-right:auto;}

@media(max-width:767px){
	.big-text {text-align:center;}
}

.img-fluid {max-width:100%;height:auto;}

.btn { padding: 0.5rem 1rem; background-color: #fff; border: 2px solid #fff; color: #000; text-decoration: 0; font-size: 1.8rem;border-radius:15px;transition:background-color 300ms, border-color 300ms, color 300ms;}
.btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-secondary); }
.btn-primary:hover,.btn-primary:focus { background-color: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-primary); }
.btn-secondary { background-color: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-tertiary); }
.btn-secondary:hover,.btn-secondary:focus { background-color: var(--color-tertiary); border-color: var(--color-tertiary); color: var(--color-secondary); }
.btn-tertiary { background-color: var(--color-tertiary); border-color: var(--color-tertiary); color: var(--color-secondary); }
.btn-tertiary:hover,.btn-tertiary:focus { background-color: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-tertiary); }

.callout { text-align: center;background-color:#fff;color:#46292A; border-bottom:5px solid #33332D; width: 100%; cursor: pointer; padding: 1rem; font-size: 2.2rem; transition: background-color ease-in-out 350ms, color ease-in-out 350ms; }
.callout .logo {margin-bottom:0;}
.callout a {color: inherit; font-size: 2.2rem; text-decoration: none;}
.callout .btn {background-color:#46292A;border-color:#46292A;color:#fff;font-size:1.2rem;padding:0.5rem 3rem;max-width:300px;justify-self: end;}
.callout .btn:focus, .callout .btn:hover {background-color:transparent;color:#46292A;}

@media(min-width:768px){
	.callout {display:grid;grid-template-columns:1fr 0.5fr;align-items:center;padding:1rem 2rem;}
	.callout .logo {text-align:left;}
}

/*.popup-trigger, .callout { border: none; background-color: var(--color-secondary); color: var(--color-tertiary); width: 100%; cursor: pointer; padding: 1rem; font-size: 2.2rem; transition: background-color ease-in-out 350ms, color ease-in-out 350ms; }
.popup-trigger:hover, .popup-trigger:focus, .callout:hover, .callout:focus { background-color:var(--color-tertiary); color:var(--color-secondary); }*/

header { background-color:#fff; background-position: center; background-size: cover; background-image:url(../images/rendering.png); }
header .banner { display: flex; justify-content: center; align-items: center; flex-direction: column; gap:1rem; height: clamp(40rem,75vh,100rem); }
header .logo { width:clamp(20rem,40vw,80rem); height:auto; }
header .banner-title {color:var(--color-secondary); font-size:3rem;margin:0; }
header .banner-message { color:var(--color-secondary); font-size:2rem; text-transform: uppercase; }
header .banner .buttons {display:flex;flex-flow:row wrap;gap:1rem;}
header .sub-banner { color:var(--color-secondary); background-color:var(--color-tertiary); text-align: center; padding:1.5rem; }
header .sub-banner .title { font-size: 1.5rem;-webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media(min-width:768px){
	header .banner-title {color:var(--color-secondary); font-size:5rem;margin:0; }
}

header.interior .banner { height: clamp(20rem,50vh,80rem);justify-content: space-between; align-items: flex-start;padding:3rem; }
header.interior .logo { width:200px; max-width:100%; height:auto; }
header.interior .banner-message { width:100%; text-align:center;font-size:3rem; }

header.hero {display:grid;align-items:center;position:relative;overflow:hidden;}
header.hero .banner,
header.hero .hero__video,
header.hero .overlay {grid-area:1 / 1 / -1 / -1;}
header.hero .overlay {width:100%;height:100%;position:relative;z-index: 1;background-color:rgba(0,0,0,0.6);}
header.hero .banner {position:relative;z-index: 2;}
html {
	--video-height: 100vh;
	--video-width: 100vw;
}
@media (min-aspect-ratio: 16/9) {
	html {
		--video-height: 56.25vw
	}
}
@media (max-aspect-ratio: 16/9) {
	html {
		--video-width: 177.78vh
	}
}  
/* Video */
.hero__video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	overflow: hidden;
	opacity: 0;
	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
	transition: 
		clip-path 1s cubic-bezier(0.785, 0.135, 0.15, 0.86), 
		opacity .75s cubic-bezier(0.785, 0.135, 0.15, 0.86); 
}
.hero__video iframe {
	position: absolute; 
	top: 50%; 
	left: 50%;
	pointer-events:none;
	width: var(--video-width);
	height: var(--video-height);
	transform: translate(-50%, -50%) scale(1.05);
	transition: transform 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.hero--video-playing .hero__video { 
	opacity: 1; 
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.hero--video-playing .hero__video iframe {
	transform: translate(-50%, -50%) scale(1);
}

section.intro {padding:;background-color:#ECEFF1;position: relative;overflow:hidden;z-index:1;color:#636363;font-size:0.3vw;}
section.intro .container {/*max-width:1600px;margin-left:auto;margin-right: auto;*/}
section.intro .content {padding:2rem;}
section.intro h1 {color:#33332D;font-size:46px;}
section.intro .comorant {color:#A3B1BA;}
section.intro .content p {font-size:22px;}
section.intro .content p:last-of-type {color:#33332D;}
section.intro .big-text {}
section.intro .big-text p {font-size:58em;line-height:0.9em;margin-top:-0.1em;margin-bottom:;color:#C8CACA;}
@media(min-width:992px){
	section.intro {}
	section.intro .content {width:187em;position: absolute;right: 30px;top: 50%;transform: translateY(-50%);padding:5em;}
	section.intro h1 {font-size:clamp(36px, 7em, 50px);}
	section.intro .content p {font-size:16px;}
	section.intro .big-text p /*{font-size:65em;line-height:1.7em;margin-top:-0.4em;margin-bottom:-0.4em;margin-left:-0.1em;}*/ {font-size:clamp(72px, 45em, 310px);line-height:1em;margin-top:-0.15em;margin-bottom:-0.15em;opacity:0.4;}
}
@media(min-width:1200px){
	section.intro .big-text p {/*line-height:1.3em;margin-top:-0.3em;margin-bottom:-0.3em;*/}
}
@media(min-width:1400px){
	section.intro .big-text p {/*line-height:1.1em;margin-top:-0.3em;margin-bottom:-0.3em;*/opacity:1;}
}
@media(min-width:1700px){
	section.intro .content {max-width:960px;}
}
@media(min-width:2000px){
	section.intro .content {left:50vw;}
}

section.location {padding:2rem;max-width:1600px;margin-left:auto;margin-right: auto;overflow:hidden;}
section.location h2 {font-size:3.2rem;;color:#33332D;margin-block-start:0;margin-bottom:2rem;}
section.location h2 .comorant {display:block;color:#A3B1BA;}
section.location strong {font-size:1.6rem;}
section.location img {margin-top:1rem;margin-bottom:0.5rem;}
section.location .map-key {display:grid;gap:1rem;font-family: "JetBrains Mono", monospace;}
section.location .map-key p {display:flex;gap:1rem;align-items:center;justify-content:flex-start;text-align: left;font-size:1.3rem;font-family: "JetBrains Mono", monospace!important;color:#33332D;}
section.location .map-key p span, section.location .map-key p span small {font-family: "JetBrains Mono", monospace;}
section.location .map-key p .label {font-family:'Marcellus',sans-serif;background-color:#A3B1BA;color:#fff;border-radius:50%;--circle-size:2.5rem;min-width:var(--circle-size);height:var(--circle-size);display:flex;justify-content:center;align-items:center;font-size:1.5rem;}
@media(min-width:992px){
	section.location {display: flex; justify-content: center; align-items: center;padding:;}
	section.location .row {display:grid;grid-template-columns:1fr 1.5fr;align-items:end;gap:2rem;}
	section.location .content {justify-self:end;}
	section.location .map-key {padding-bottom:30px;gap:1.5rem;}
}

section.amenities {background-color:#ECEFF1;color:#fff;padding:5rem;text-align:center;position:relative;}
section.amenities .container {height:100%;position: relative;}
section.amenities .row {display:flex;flex-wrap: wrap;justify-content: center;align-items: center;height:100%;}
section.amenities h2 {text-transform:uppercase;color:#33332D;font-size:3rem;line-height:1;margin-top:-1rem;}
section.amenities img {border:15px solid #F2E3C4;display:;margin-bottom:;}
section.amenities .img-2 {}

/* curved text */
.curved-text-container {width: 100%;max-width:380px;margin: 0 auto;}
.curved-text-container svg text {text-transform:lowercase;color:#A3B1BA;font-family:"Marcellus", sans-serif!important;fill:#A3B1BA;font-size:2.4rem;}

@media(max-width:767px){
	section.amenities .row {display:flex;flex-wrap:wrap;gap:2rem;}
	section.amenities .row > div {order:3;}
	section.amenities .img-1 {order:2;}
	section.amenities .img-2 {order:1;}
	section.amenities .img-3 {order:5;}
	section.amenities .img-4 {order:6;}
}
@media(min-width:768px){
	section.amenities {display:flex;height:750px;align-items:center;justify-content:center;padding:0;}
	section.amenities h2 {font-size:3rem;margin-top:-2rem;}
	section.amenities img {position:absolute;display:block;width:42%;}
	section.amenities .img-1 {top:-30px;right:30px;}
	section.amenities .img-2 {right:0;bottom:50px;border-right:0;width:30%;}
	section.amenities .img-3 {left:36px;bottom:-15px;z-index:1;}
	section.amenities .img-4 {left:-95px;top:25px;width:35%;}
}
@media(min-width:992px){
	section.amenities {height:990px;}
	section.amenities h2 {font-size:5rem;}
	section.amenities .img-2 {width:26%;}
	section.amenities .img-3 {bottom:-175px;}
}
@media(min-width:1300px){
	section.amenities {height:1120px;}
	.curved-text-container svg text {font-size:3.4rem;}
	section.amenities h2 {font-size:6rem;}
	section.amenities img {width:auto;}
	section.amenities .img-3 {bottom:-15px;}
}
@media(min-width:1699px){
	section.amenities .img-1 {width:auto;right:190px;}
	section.amenities .img-2 {width:auto;border:15px solid #f2ebdb;bottom:140px;}
	section.amenities .img-3 {width:auto;left:180px;}
	section.amenities .img-4 {width:auto;left:0;}
}

section.form {background-color:#F8F1E1;font-size:0.3vw;border-bottom:5px solid #33332D;}
section.form .container {}
section.form .big-text {position: relative;z-index:2;}
section.form .big-text p {color:#D5CABD;font-size: 58em;line-height: 0.9em;margin-top: -0.1em;margin-left:-0.07em;margin-bottom:0;}
section.form .form-container {padding:2rem;}
@media(min-width:992px){
	section.form {position: relative;overflow:hidden;}
	section.form .form-container {position: absolute;width:135em;max-width:765px;top:50%;right:30px;transform:translateY(-50%);padding:0;padding-right:2rem;z-index:3;}
	section.form .big-text p {transform:translateY(-0.09em);margin-top:0;margin-bottom:-0.18em;}
}
@media(min-width:1400px){
	section.form .big-text p {font-size:clamp(160px, 48em, 250px);}
}

section.tours {  background-color:var(--color-secondary); background-image:url(../images/pattern-bg.svg);display:flex; align-items:center; justify-content:center; gap:2rem; padding: 2rem;flex-wrap:wrap;}
section.tours .iframe-wrapper {width:100%;}
section.tours .iframe-wrapper h2 {text-align:center;color:#000;font-weight:bold;font-size:2.5rem;background-color:var(--color-quaternary);padding:0.5rem 0.5rem;}
section.tours .iframe-fluid {position: relative; padding-top: 56.25%; width:100%;}
section.tours .iframe-fluid iframe { position: absolute; left: 0; top: 0; margin: auto; width: 100%; height: 100%; }

section.gallery { display: grid; grid-template-columns:1fr; }
section.gallery img { width: 100%; }

section.fw-banner img {width:100%;height:100%;object-fit:cover;}


footer {color:#515151;padding:2rem;text-align:center;}
footer .footer-inner {max-width:1600px;margin-left: auto;margin-right:auto;}
footer .socials {display: flex;gap:1rem;justify-content: center;}
footer .sns-link svg { --square: 2rem; fill:#515151; width: var(--square); height: var(--square); transition: fill 300ms; }
footer .sns-link:hover svg, footer .sns-link:focus svg { fill:var(--color-quaternary); }
footer .logo {color:#33332D;margin:1.5rem 0 1rem 0;line-height:1.1;}
footer .address a {color:#515151;text-decoration:none;}
footer .disclaimer {font-size:13px;}
footer .copy-jump {width:100%;display: flex; justify-content: center;max-width:1600px;align-items: center;gap:;flex-wrap: wrap;flex-direction:column;margin-top:2rem;}
footer .jumpem {font-size: 1.2rem; display: flex; justify-content: center; align-items: center;}
footer .jumpem svg {height: 1.2rem;}
.copyright {width:100%;display: flex;flex-wrap:wrap;justify-content: center;padding:0.75rem 2rem;gap:0.25rem;background-color:#1d1a18;color:#fff;font-size:0.7rem;}
.copyright p {margin:0;}

@media(min-width:768px){
	footer {text-align:unset;}
	footer .left {text-align: left;}
	footer .footer-inner {display:flex;justify-content:space-between;align-items:end;}
	footer .socials {justify-content:start;}
	footer .right {text-align:right;}
	footer .copy-jump {margin-top:0;}
	footer .jumpem {width:100%;justify-content:end;}
	.copyright {justify-content:space-between;}
}

@media(min-width:400px){
    section.gallery { grid-template-columns:repeat(2, 1fr); }
}

@media(min-width:768px){
    header .banner-message { font-size:3rem; }
    header.interior .banner-message { font-size:4rem; }
    header .sub-banner .title { font-size: 1.7rem; }

    section.form .form-wrapper {}

	footer .footer-title {color: var(--color-secondary);font-size: 5rem;}
    footer .info-wrapper { grid-template-areas: "top-left top-right" "bot-left bot-right"; gap:2rem 0; }
}

@media(min-width:992px){
    section.gallery { grid-template-columns:repeat(4, 1fr); }
    section.tours {padding:4rem;}
    section.tours .iframe-wrapper { width:calc(50% - 1rem); }
}

#popup {display:none;position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.3); height: 100vh; width: 100%; justify-content: center; align-items: flex-end;padding:3rem; flex-direction:column; z-index: 10000000;}
#popup.active {display:flex;animation:fadeIn .3s;}
#popup.closing {animation:fadeOut .3s;}
#popup.closed {animation:fadeOut .3s;}
#popup .close {background-color: var(--color-secondary);font-size:2rem;padding:0 1rem;cursor:pointer;border:none;}
body.popup--shown {overflow:hidden;}
#popup .video { position: relative; width: 100%; height: 100%; z-index: 0; overflow: hidden; opacity: 0; clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); transition: clip-path 1s cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity .75s cubic-bezier(0.785, 0.135, 0.15, 0.86); }
#popup .video iframe { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; max-width: 1200px; transform: translate(-50%, -50%) scale(1.05); transition: transform 1s cubic-bezier(0.785, 0.135, 0.15, 0.86); }
#popup.hero--video-playing .video { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
#popup.hero--video-playing .video iframe { transform: translate(-50%, -50%) scale(1); }

@keyframes fadeIn {
    0% { opacity: 0;display:none; }
    100% { opacity: 1; display:flex;}
}
@keyframes fadeOut {
    0% { opacity: 1;display:flex; }
    100% { opacity: 0;display:none; }
}

.marquee .title {display:inline;}
.marquee {
--speed: calc( 8.5s * var(--count ) );
--buff: 0;
--gap: 0px;
--width:1029px;
display: grid;
grid-template-columns: repeat(var(--count, auto), var(--width));
overflow: hidden;
margin: 0 auto;
} 
.marquee-item {
--duration: calc(var(--speed) * 3);
--delay: calc( (var(--duration) / var(--count)) * (var(--index, 0) - var(--count) ));
animation: marquee var(--duration) var(--delay) infinite linear;
}
.marquee-item h1 {margin:0;}
.marquee-content-wrapper {display:flex;justify-content:space-around;}
@media(min-width:768px){
	.marquee {--width:1429px;--speed: calc( 11.5s * var(--count ) );}
}
@keyframes marquee {
0% {
	translate: calc( (var(--count) - var(--index) ) * 100%) 0%;
} 
100% {
	translate: calc( (var(--index) * -100%) - ( var(--count) * var(--gap) ) ) 0%;
}
}