@import url(/css/reset.css);
@import url(/css/text.css);
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
html {
	height:100%
}
body {
	font: 1rem/1.5rem 'BigSans', Arial, sans-serif;
	color: #161D23;
	background: #EFECEA;
	height:100%;
}

h3 {font-size:1.5rem}

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

.animatein {visibility:hidden}

.pic {background:50% 50% no-repeat; background-size: cover;}
.icon {background:50% 50% no-repeat; background-size: contain;}

.point {height:25vh;width:100%;background:50% 50% no-repeat; background-size: contain;}
.point.greenpoint {background-image:url(/img/ui/pointdown-green.svg)}
.point.goldpoint {background-image:url(/img/ui/pointup-brown.svg)}

.whitebg {background:#fff}
.greenbg {background: #5F754D;}
.goldbg {background: #A37C2D;}

.whitetext {color:#fff}
.goldtext {color:#A37C2D}
.greentext {color: #5F754D;}

.bigp {font-size:1.5rem;line-height:2.2rem}
.bigp.caps {line-height:1.75rem}

.pageline {width:1px;height:100%;position: absolute;top:0;left:50%;}
.linesection {position:relative}
.rootedline {top:24vw;height:100vw;background:#fff;z-index:10}

/**** nav ****/
.navholder {position:fixed;top:0;left:0;width:100%;height:0;padding: 0;transition:height 0.5s;overflow: hidden;z-index:2000}
.menuopen .navholder {height:100vh}
.navinner {width:100%;height:100vh;display:flex;flex-direction: column;align-items:center;justify-content: center;background:#5F754D;text-align: center;position:relative}
.nav {list-style:none;margin:0;padding:0;display: flex;flex-direction:column;align-items:center;position:relative;z-index:100}
.nav li {margin:0.75rem 0;padding:0;font-size:clamp(24px,3.5vw,48px);line-height:1em;font-weight:700}
.nav li a {color:#fff;text-decoration: none;transition:color 0.2s}
.nav li a:hover {color:#A37C2D;text-decoration: none;}

.navlogo {height:clamp(40px,4vw,100px);position:absolute;bottom:2rem;left:0;width:100%;background:50% 50% no-repeat url(/img/content/wordlogo.svg);background-size:contain;}

.navbg {position: absolute;top:1rem;left:1rem;width:calc(100% - 2rem);height:calc(100% - 2rem);opacity:0.15;background:50% 50% no-repeat url(/img/content/logo.svg);background-size:contain;pointer-events: none;}

.navbutton {
	display: block;
	position: fixed;
	padding: 1rem;
	top: 0px;
	right: 0px;
	z-index: 10000;
	cursor: pointer;
	background: #5F754D;
  transition:background 0.2s;
}
.navbutton:hover {background:#A37C2D}

.navbutton .navicon {
	position: relative;
	width: 48px;
	height: 48px
}

.navbutton path {fill:#fff}

#close {transform:scale(0);transition:transform 0.5s;transform-origin: 50% 50%;}
.menuopen #close {transform:scale(1)}

#navtopleft, #navtopright, #navbtmleft, #navbtmright {
  transition:transform 0.5s
}

.menuopen #navtopleft {transform:translate(-150%, -150%)}
.menuopen #navtopright {transform:translate(150%, -150%)}
.menuopen #navbtmleft {transform:translate(-150%, 150%)}
.menuopen #navbtmright {transform:translate(150%, 150%)}




/* #Page Styles
================================================== */

.intro {height:100vh;width:100%}

.mobile {display:none}
.videocontainer {width:100%;height:100%;position:relative;}
.videocontent {position:absolute;width:100%;height:100%;display:flex;flex-direction: column;align-items:center;justify-content: center;color:#fff;text-align: center;padding:0 2rem;box-sizing: border-box;z-index:100;top:0;left:0}
.videocontainer h1 {position: relative;z-index:100;font-size: clamp(32px,4vw,64px);}
.videocontainer .intrologo {position:absolute;bottom:2rem;left:0;width:100%;height:3rem;background:url(/img/content/wordlogo.svg) 50% 50% no-repeat;background-size:contain}
.videocontainer video {position:absolute;top:0;left:0;
	width:100%;
	height:100%;object-fit:cover;object-position: 50% 50%;}

.ticker {
  width: 100%;
  overflow: hidden;
  background: #A37C2D;
  color: #fff;
  white-space: nowrap;
  height: 2rem;
  display: flex;
  align-items: center;
}

.ticker__wrap {
  display: flex;
  white-space: nowrap;
  will-change: transform;
  animation: ticker-scroll 20s linear infinite;
}

.tickeritem {
  display: inline-flex;
  align-items: center;
  font-size: 1.2rem;
}

.tickeritem img {
  height: 1em;
  vertical-align: middle;
  margin: 0 1rem;
}

@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


.introtext {display:flex;justify-content: center;padding:10vw;text-align: center;}
.introtext p {margin:0;max-width:35ch}
.amenitytext p {margin:0;max-width:50ch}

.horizontal-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.horizontal-wrapper {
  display: flex;
  height: 100%;
  width: max-content;
  will-change: transform;
}

.panel {
  min-width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: white;
  flex-shrink: 0;
}

.next-section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flowerpanel {width:100vh;height:100vh;background:url(/img/ui/flower-white.svg) 50% 50% no-repeat;background-size:contain;margin:0 -25vh;position: relative;z-index:100;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;}
.flowerpanel .icon {width:clamp(50px,8vw,260px);height:clamp(50px,8vw,260px);margin-bottom:2rem}
.flowerpanel span {width:20ch;margin-top:1rem}
.flowerpanel:last-child {margin-right:calc(50vw - 50vh);}

/* Portrait fallback — stack panels vertically */
@media (orientation: portrait) {
  .horizontal-section {
    height: auto;
  }
  .horizontal-wrapper {
    flex-direction: column;
    width: 100%;
  }
  .panel {
    min-width: 100%;
    height: 80vh;
  }
  .flowerpanel {width:100vw;height:100vw;margin:-25vw 0}
  .flowerpanel:last-child {margin-right:0;margin-bottom:0}
  
  .intro {height:auto;width:100%}
  .mobile {display:block}
  .desktop {display:none}
  .videocontainer {width:100%;height:100%;position:relative;}
  .videocontainer video {position:relative;top:0;left:0;
    width:100%;
    height:100%;object-fit:cover;object-position: 50% 50%;}
}

.thriving {text-align: center;padding:5vw 0 10vw 0;}
.neighbours {display:flex;flex-wrap: wrap;margin:2rem auto 0 auto;justify-content: center;padding:0 10vw}
.neighbour {flex:0 0 25vw;height:25vw;position:relative;display: flex;align-items:center;justify-content: center;}
.neighbourbg {position:absolute;top:0;left:0;width:100%;height:100%;background:50% 50% no-repeat url(/img/ui/flower-white.svg);background-size:contain;opacity:0.4}
.neighbourlogo {flex-basis:clamp(70px,8vw,260px);height:clamp(70px,8vw,260px);position:relative}

.image-carousel {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 2rem 0;
}

.carousel {
  width: 100%;
}

/* Each slide as a background div */
.carousel .slide {
  width: 90vw;
  height: calc(100vh - 3rem);
  background-size: cover;
  background-position: center;
  border-radius: 50px;
  margin: 0 1rem; /* half of the 2rem gap (slick duplicates edges) */
  overflow: hidden;
  margin-bottom:2rem;
}

/* Slick-specific adjustments */
.carousel .slick-slide {
  transition: transform 0.5s ease;
}

.carousel .slick-center {
  transform: scale(1);
}

/* Arrows & Dots (optional styling) */
.slick-dots {
  position:relative;
  bottom: 1rem;
  display:flex;
  justify-content: center;
  list-style-type: none;
  margin:0;padding:0;cursor: pointer;
}
.slick-dots li {flex:0 0 1rem;height:1rem;margin:0 0.5rem;}
.slick-dots li button {width:1rem;height:1rem;background:#fff;border:none;overflow: hidden;text-indent: -9999px;transition:background 0.2s}
.slick-dots li.slick-active button {background:#A37C2D}

.slick-prev, .slick-next {
  z-index: 2;
}

.slick-arrow {position:absolute;z-index:1000;border:0;width:4rem;height:4rem;text-indent: -9999px;overflow: hidden;top:calc(50% - 2rem);cursor: pointer;transition: background 0.2s;background: #EFECEA no-repeat;background-size:auto 50%;}
.slick-prev {left:0;border-radius:0 50% 50% 0;background-image: url(/img/ui/leftarrow.svg);background-position:35% 50%}
.slick-next {right:0;border-radius:50% 0 0 50%;background-image: url(/img/ui/rightarrow.svg);background-position:65% 50%}

.slick-arrow:hover {background-color:#A37C2D}
.slick-prev:before,
.slick-next:before {
  color: #333;
  font-size: 2rem;
}

.connectionsintro {padding:10vw;text-align: center;}
.connectionsintro p {margin:0 auto;max-width:50ch;}
.connectionspic {padding:0 10vw 10vw 10vw;text-align: center;}

.bubblepic {background: 50% 50% no-repeat url(/img/content/home/circlespic.jpg);background-size: cover;width:90vw;height: 44.1vw;margin:5vw auto;display:flex;align-items:center;justify-content: center;position: relative;}
.bubblepic .bubbles {width:100%;height:100%;background:url(/img/ui/bubbleframe.svg) 50% 50% no-repeat;background-size:cover;position:absolute;top:0;left:0;pointer-events:none;}
.bubblepic b {position: relative;}

.culturesection {position:relative;display:flex;flex-wrap:wrap;padding:2.5vw}
.cultureblock {flex: 0 0;flex-basis:calc(50% - 5vw);height:26vw;margin:2.5vw;text-align: center;box-sizing: border-box;display:flex; align-items: center;justify-content: center;}
.cultureblock:nth-child(1) {border-radius: 0 0 50px 0;}
.cultureblock:nth-child(3) {border-radius: 0 50px 0 0;}
.cultureblock:nth-child(4) {border-radius: 50px 0 0 0;}
.cultureblock.text {padding:0 10vw;}
.cultureblock b {text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);}
.cultureflower {position: absolute;top:calc(50% - 10vw);left:calc(50% - 10vw);width:20vw;height:20vw;background:url(/img/ui/flowerpointy-white.svg) 50% 50% no-repeat;background-size:contain;z-index:100;display:flex;align-items: center;justify-content: center;}

/**** mapbox ****/
.mapsection {display:flex;width:100%;align-items:stretch;margin-bottom:5vw;position:relative;z-index:20}
#map, #map_canvas {min-height:80vh;flex:0 0 75%;border-radius:0 50px 50px 0}


/* Style the custom marker image */
  .sg-marker {
    background-image: url('/img/ui/mapmarker.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 67px;
    height: 68px;
  }
  
  #list {
    flex:0 0 25%;
    box-sizing: border-box;
    min-height:80vh;
    padding:2vw;
     color:#fff;
     display: flex;
     flex-direction: column;
     justify-content: center;
     height:100%;
     border-radius:50px 0 0 50px
  }

  #list h2 {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight:400;
  }

  #list ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .mapsection li {
    padding: 0.2rem 0px;
    cursor: pointer;
    transition: background 0.2s;
    margin-left:0;
    display:flex;
  }

  .mapsection li:hover {
    text-decoration: underline;
  }

  .mapsection li.active {
    text-decoration: underline;
  }
  
  #list .number {background:#fff;color:#A37C2D;flex:0 0 1.5rem;height:1.5rem;display:flex;align-items:center;justify-content: center;border-radius:50%;margin-right:1rem;font-size:0.8rem;}


  /* Marker styling */
  .custom-marker {
    width: 30px;
    height: 30px;
    background-color: #A37C2D;
    border-radius: 50%;
    color: white;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s;
  }

  .custom-marker:hover {
    transform: scale(1.15);
  }

  .custom-marker.active {
    background-color: #5F754D;
    transform: scale(1.25);
  }
  
  .amenitiessection {padding:10vw 0 0vw 0;text-align: center;}
  
  .shaped-carousel {
  width: 100%;
  overflow: hidden;
  padding: 4rem 0;
}

.carousel2 {
  width: 100%;
}

/* Individual slides */
.carousel2 .slide {
  width: 24vw !important;
  margin: 0 0.5rem; /* total 1rem between slides (slick duplicates edge) */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  background: #fff;
  overflow: hidden;
}

.slideinner {display:flex;flex-direction:column;width:100%;height:100%}
.imgbottom .slideinner {flex-direction: column-reverse;}

/* Wrapper to control top/bottom positioning */
.img-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}



/* Masked image */
.masked-img {
  width: 100%;
  aspect-ratio: 1 / 1; /* preserves SVG shape proportion */
  background-size: cover;
  background-position: center;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="860" height="860" viewBox="0 0 860 860"><path d="M646.6,430.1c118-.9,213.4-96.8,213.4-215S763.7,0,645,0s-214.1,95.4-215,213.4h0C429.1,95.4,333.2,0,215,0S0,96.3,0,215s95.4,214.1,213.4,215C95.4,430.9,0,526.8,0,645s96.3,215,215,215,214.1-95.4,215-213.4h0c.8,118,96.8,213.4,215,213.4s215-96.2,215-215-95.4-214.1-213.4-215" fill="white"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="860" height="860" viewBox="0 0 860 860"><path d="M646.6,430.1c118-.9,213.4-96.8,213.4-215S763.7,0,645,0s-214.1,95.4-215,213.4h0C429.1,95.4,333.2,0,215,0S0,96.3,0,215s95.4,214.1,213.4,215C95.4,430.9,0,526.8,0,645s96.3,215,215,215,214.1-95.4,215-213.4h0c.8,118,96.8,213.4,215,213.4s215-96.2,215-215-95.4-214.1-213.4-215" fill="white"/></svg>') center / contain no-repeat;
}

.imgtop .img-wrapper {
  margin-bottom:-6vw;
}

.imgbottom .img-wrapper {
  margin-top:-6vw;
}

.slidetext {width:100%;padding:2rem;box-sizing: border-box;}
.slidetext p {margin:0}
.imgtop .slidetext {padding-top:9vw}
.imgbottom .slidetext {padding-bottom:9vw}
.carousel2 h3 {margin-bottom:0.5rem}

.revealpicsection {padding-bottom:5vw;position:relative}
.revealline {background: #5F754D;top:25vw;height:24vw;z-index:20}
.revealpic {position:relative;width:90vw;height:44vw;margin:0 auto;overflow: hidden;display: flex;align-items: center;justify-content: center;}
.maskside {position:absolute;top:0;width:90vw;background:no-repeat;background-size:auto 100%;height:100%}
.maskleft {background-image:url(/img/ui/circlesleft.svg);background-position:right center;right:78vw}
.maskright {background-image:url(/img/ui/circlesright.svg);background-position:left center;left:78vw}
.revealpic img {width:10vw;opacity: 0.9;}

.footerpic {width:100%;height:100vh;background-image: url(/img/content/home/footer.jpg);display:flex;align-items:flex-end;background-position:50% 60%}
.footerpicbase {height:5vw;flex:0 0 100%;background:top center no-repeat url(/img/ui/pointdown-inv-green.svg);background-size:auto 100%;margin-bottom:-1px}

.footericons {width:100%;display:flex;position:relative;margin-bottom:2rem}
.footericon {flex:0 0 50%;box-sizing: border-box;display:flex;align-items: center;justify-content: center;padding:7.5vw 0}
.footericon img {height:clamp(40px,10vw,100px);width:auto}

.contact {text-align:center}
.agent {padding:5vw 0 10vw 0}
.agent img {margin-bottom:2rem}
.footer a {color:#fff}
.footerpattern {width:100%;height:18.75vw;background:url(/img/ui/flower-green.svg) top left repeat;background-size:12.5% auto;mix-blend-mode: multiply;opacity:0.5}

/****************************************************
* Misc
****************************/
/*hide social stuff and headings on prettyphoto*/
.ppt {display:none !important}
.pp_social {display:none !important}
.pp_description {display:none !important}

.smallText { font-size: 11px; }
.smallprint {
	font-size: 11px;
	color: #BBBDC0;
}
.smallprint a { color: #BBBDC0; }
.padTop { margin-top: 30px; }
.largeText { font-size: 13px; }

.superscript {vertical-align: baseline;
	font-size: 0.8em;
	position: relative;
	top: -0.4em;}
.subscript {vertical-align: baseline;
	font-size: 0.8em;
	position: relative;
	top: 0.4em;}
	
.vmiddle {position: relative;top: 50%;  -webkit-transform: translateY(-50%);  -ms-transform: translateY(-50%);  transform: translateY(-50%);}

.caps {text-transform:uppercase;letter-spacing:0.1em}
.num {text-align:right}




/* #Media Queries
================================================== */
	
	/* biggest desktop */
	@media only screen and (max-width: 1230px) {}
	
	/* bigger desktop */
	@media only screen and (max-width: 1229px) {}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width:1099px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
    .carousel .slide {
      margin:0 0.5rem;
      height: 60vh;
    }
    .slick-dots {bottom:-1rem}
    .connectionspic {padding:0 10vw 10vw 10vw}
    
    .culturesection {flex-direction:column}
    .cultureblock {flex:50vw;position:relative}
    .cultureblock.text {order:0;flex:1 1;padding:10vw}
    .cultureblock.groundedblock {order:1}
    .cultureblock.aliveblock {order:3}
    .cultureblock.notextblock {display:none}
    .cultureflower {position: relative;order:2;width:30vw;height:30vw;left:auto;margin:-10vw auto}
    .rootedline {display:none}
    .cultureline {background:#fff;top:30vw;height:55vw;z-index:10}
    
    .mapsection {flex-direction:column;height:auto;margin-bottom:0}
    #map {border-radius:0;flex:0 0 70vh}
    .restaurant-list {display:flex}
    #list {flex:1 1;border-radius: 0;}
    #list ul {display:flex;flex-wrap:wrap}
    #list ul li {flex:0 0 100%;box-sizing: border-box;padding-right:20px;}
    
    .carousel2 .slide {width: 40vw !important;}
    .imgbottom .slidetext {
      padding-bottom: 13vw;
    }
    .imgtop .slidetext {
      padding-top: 13vw;
    }
    .imgbottom .img-wrapper {
      margin-top: -10vw;
    }
    .imgtop .img-wrapper {
      margin-bottom: -10vw;
    }
    
    .point {height:20vw}
      
    .footerpic {height:75vh}
    .footerpicbase {height:10vw}
  }

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
    html {font-size:13px}
    /*.footericons {flex-direction:column}
    .footericons .pageline {display:none}*/
    .bigp {font-size:1.5rem}
    .bigp.caps {line-height:1.3rem}
    
    .navbutton {padding:8px}
    .navbutton .navicon {width:40px;height:40px;}
    
    .carousel .slide {
      margin:0 0.5rem;
      height: 35vh;
    }
    
    .neighbour {flex:0 0 40vw;height:40vw}
    
    .connectionspic {padding:0 5vw 10vw 5vw}
    
    
    .carousel2 .slide {width: 80vw !important;}
    .imgbottom .slidetext {
      padding-bottom: 25vw;
    }
    .imgtop .slidetext {
      padding-top: 25vw;
    }
    .imgbottom .img-wrapper {
      margin-top: -20vw;
    }
    .imgtop .img-wrapper {
      margin-bottom: -20vw;
    }
    
    .bubblepic .greentext {text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);color:#fff}
    
    .footerpic {height:60vh}
    
    .agent img {width:100px;height:auto}
  }

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

	@font-face {
	    font-family: 'BigSans';
	    src: url('/fonts/BigSans-Regular.woff') format('woff'),
	         url('/fonts/BigSans-Regular.woff2') format('woff2');
	    font-weight: normal;
	    font-style: normal; }
		
	@font-face {
	    font-family: 'BigSans';
	    src: url('/fonts/BigSans-Bold.woff') format('woff'),
	         url('/fonts/BigSans-Bold.woff2') format('woff2');
	    font-weight: 700;
	    font-style: 700; }