@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/dist/fonts/plusjakartasans-light-webfont.woff2') format('woff2');
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/dist/fonts/plusjakartasans-regular-webfont.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/dist/fonts/plusjakartasans-medium-webfont.woff2') format('woff2');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/dist/fonts/plusjakartasans-semibold-webfont.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
	
@font-face {
    font-family: 'Inter';
    src: url('/dist/fonts/Inter-Medium.woff2') format('woff2');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
} 
@font-face {
    font-family: 'Inter';
    src: url('/dist/fonts/Inter-Regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/dist/fonts/Inter-Light.woff2') format('woff2');
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/dist/fonts/Inter-SemiBold.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

html {
font-family: 'Inter', sans-serif;
font-size: 16px;
scroll-behavior:smooth;}

body {
margin: 0;
font-family: 'Inter', sans-serif;
font-weight: 400;
line-height: 1.65;
	letter-spacing: .05rem;
background: #fff;
color: #505050;}
	
:target{scroll-margin-top: 90px;}

@media (max-width: 1199.98px) {html {font-size: 14px;}}
	
h1,h2,h3,h4,h5,h6 {font-family: 'Plus Jakarta Sans', sans-serif;}	
h1, h2, h3 {color: #333;text-transform:uppercase !important;}
h1 {
    font-weight: 500;
    font-size: clamp(3rem, 6vw, 5.5rem);
    line-height: 1.02;
    letter-spacing: 0.15em;}
h2 {
    font-weight: 300;
    line-height: 1.8;
    letter-spacing: 0.1em;}	
.h3,.h4 {
    font-weight: 300;
	line-height: 1.5;
	letter-spacing:0.18em;}
p, li {
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	font-size: 1.5rem;
	color:#505050;}
p a,li a {color:#222;text-decoration:none;}
p a:hover, li a:hover {color:#222;text-decoration:underline;}	
.text-muted,.small-text {color: #666666;}
strong {font-weight: 400;}	
ul {margin-bottom:0;}
li{margin-bottom:0.5rem;}

/* NAVIGATION ========================================================= */
#navbar {
  width:100%;
  position: fixed;
  top: 0;
  display: block;
  z-index:1000;
  transition: top 0.3s;
}	
@media (max-width: 1199px) {.navbar-collapse {max-height: 85vh;overflow-y:scroll;}}

.navbar{background-color:#ffffff;}
.nav-link {font-size: 1rem;}
ul.navbar-nav li{margin-left:0}
@media (min-width:768px) and (max-width: 991px){ul.navbar-nav li{margin-left:20rem}}	

/* HERO ========================================================= */

.hero-villa-kaizen {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background-color: #222;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;}
.hero-villa-kaizen.loaded { opacity: 1;}

.hero-overlay,
.hero-overlay a,
.hero-overlay h1,
.hero-overlay h2 { color: #f5f5f5;}
.hero-overlay { width: 90%; bottom: 5em;}

.villa-title {
    padding-top: 0;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 1.2s ease 0.8s, transform 1.2s ease 0.8s;
}
.hero-villa-kaizen.loaded .villa-title {
    opacity: 1;
    transform: translateY(0);
}
.hero-meta {
    position: absolute;
    right: 1.5rem;
    bottom: 1.25rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.65);
    pointer-events: none;
}

/* ========================================================= */
	
.villa-sub {text-shadow: 0 2px 3px rgba(0,0,0,1);}
.villa-subtitle {text-shadow: 0 2px 10px rgba(0,0,0,0.45);}
.villa-micro{
    line-height: 1.2;
	font-size: 1.25rem;
	letter-spacing:0.08em;
	text-shadow: 0 2px 3px rgba(0,0,0,1);
	}
	
.page-links {display:none}
@media (min-width:1200px){
.page-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    min-height: var(--page-nav-height);
}
.page-links, .page-links a {
    color: #505050;
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap;
}
.page-links a:hover {text-decoration: underline;}
	}
	
@media (min-width:992px){.overview{
  background-image: url('/images/body/light-bg-sun.png');
  background-size: contain;
  background-position: left top;
  background-repeat: no-repeat;
  padding-left:1.5rem;
}}
.keyfacts p, .keyfacts li {font-size:1.25rem;}
.keyfacts {border-left:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;padding-left:1.5rem;}
	
.mosaic-row {
    display: flex;
    margin: 0 0 5px 0;
    height: 90px;
}
	
.mosaic-row-360 {
    height: 90px;
}
	
.mosaic-row > a {
    height: 100%;
    padding: 0 3px;
}

@media (min-width:992px){
.mosaic-row {
    margin: 0 0 16px 0;
    height: 400px;}
.mosaic-row-360 {
    height: 360px;}
.mosaic-row > a {
    padding: 0 8px;}
}
	
.mosaic-row > a:first-child {
    padding-left: 0;
}
.mosaic-row > a:last-child {
    padding-right: 0;
}
.mosaic-row img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
	
.carousel-item img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 16px;
    background: #e6e6e6;
    box-sizing: border-box;
}

.img-container {
    position: relative;
    display: inline-block;
	overflow:hidden;
	padding: 1rem !important;
	background-color: #e6e6e6;
}	
.img-container .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.overlay span{position:absolute;color:#fff;text-align:center;}
.vid{background-color:#e6e6e6;cursor:pointer}
@media (min-width: 767px){.vid{padding:1rem;}}	
footer{background-color:#e6e6e6;}
footer p,footer li{font-size: 1rem}
#videoModal .modal-content {background-color:rgba(255,255,255,.2);border:none;border-radius:0;}
.ratio-9x16 {--bs-aspect-ratio: 177.7778%;}
figcaption {
    padding-top: .75rem;
    font-size: .85rem;
}
.map:before{
  display: inline-block;
  content: ' ';
  background-image: url('/images/body/ico/marker.svg');
  background-size:1rem 1rem;
  background-repeat: no-repeat;
  height:1rem;
  width:1rem;
  margin-right:.25rem
}
/* --------------------------------
   Scroll animations
-------------------------------- */

.animate-image,
.animate-title,
.animate-text,
.animate-right {
    opacity: 0;
}

/* Images + headings */
.in-view.animate-image,
.in-view.animate-title {
    animation: fadeIn 1.2s ease forwards;
    animation-delay: var(--delay, 0s);
}

/* Paragraphs, lists, etc. */
.in-view.animate-text {
    animation: fadeUp 1s ease forwards;
    animation-delay: var(--delay, 0s);
}
/* from left */
.in-view.animate-right {
    animation: fadeInRight 1s ease forwards;
    animation-delay: var(--delay, 0s);
}
	
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}	
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}