@font-face {
  font-family:Canela;
  src:url('assets/canela.woff2') format('woff2');
  font-weight:100;
  font-display:swap
}
@font-face {
  font-family:Mono;
  src:url('assets/mono.woff2') format('woff2');
  font-weight:300;
  font-display:swap
}
 :root {
  --sand:#ffffff;
  --ink:#263440;
  --line:#26344035;
  --white:#ffffff
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:80px
}
body {
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font:12px/1.5 Mono,monospace
}
body.locked {
  overflow:hidden
}
button,input,a {
  -webkit-tap-highlight-color:transparent
}
button,a {
  color:inherit
}
button {
  font:inherit;
  cursor:pointer;
  border:0;
  background:none;
  padding:0
}
a {
  text-decoration:none
}
button:focus-visible,a:focus-visible,input:focus-visible {
  outline:2px solid currentColor;
  outline-offset:6px
}
img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-family:Canela,Georgia,serif;
  font-weight:100;
  line-height:1.02
}
em {
  font-style:normal;
  color:#526b80
}
h2 {
  font-size:clamp(40px,5.2vw,84px)
}
h3 {
  font-size:32px
}
.eyebrow {
  font-size:11px;
  letter-spacing:.015em;
  line-height:1.5
}
.pad {
  padding:110px 5%
}
.round {
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid currentColor;
  border-radius:50%;
  width:54px;
  height:54px;
  font-size:23px;
  transition:background .3s,color .3s,transform .3s
}
.round:hover {
  background:var(--ink);
  color:var(--sand);
  transform:rotate(-10deg)
}
.text-link {
  border-bottom:1px solid currentColor;
  padding:10px 0;
  display:inline-flex;
  justify-content:space-between;
  gap:45px;
  align-items:center
}
.text-link:hover {
  opacity:.65
}
.indent {
  margin-left:14%
}
header {
  position:absolute;
  z-index:20;
  top:0;
  left:0;
  width:100%;
  padding:25px 3%;
  height:105px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--white)
}
header button,header a {
  font-size:11px
}
.header-right {
  display:flex;
  align-items:center;
  gap:35px
}
.floor-trigger {
  cursor:pointer
}
.header-right .floor-trigger {
  padding-bottom:5px;
  border-bottom:1px solid #ffffff70
}
#menu-toggle {
  display:flex;
  align-items:center;
  gap:16px;
  min-width:180px
}
.menu-lines {
  width:30px;
  height:20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px
}
.menu-lines i {
  height:1px;
  width:30px;
  background:currentColor;
  transition:transform .3s
}
.menu-lines i:last-child {
  width:20px
}
.logo {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  font-family:Canela,serif;
  font-size:37px;
  letter-spacing:3px;
  line-height:1;
  text-align:center
}
.logo small,.footer-logo small {
  display:block;
  font:8px/1 Mono,monospace;
  letter-spacing:4px;
  margin-top:9px
}
#menu {
  position:fixed;
  inset:0;
  background:var(--sand);
  z-index:19;
  padding:100px 8% 40px;
  overflow:auto
}
body.menu-open header {
  position:fixed;
  color:var(--ink)
}
body.menu-open .menu-lines i:first-child {
  transform:translateY(3.5px) rotate(45deg)
}
body.menu-open .menu-lines i:last-child {
  width:30px;
  transform:translateY(-3.5px) rotate(-45deg)
}
.menu-content {
  max-width:1000px;
  margin:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px
}
.menu-content>a {
  font:100 clamp(28px,5vh,60px)/1.1 Canela,serif
}
.menu-content>a:hover {
  color:#526b80
}
.menu-content sup {
  font:10px Mono;
  vertical-align:middle
}
.menu-content>.eyebrow {
  margin:15px 0
}
.hero {
  height:100svh;
  min-height:650px;
  position:relative;
  overflow:hidden;
  color:var(--white)
}
.hero-img {
  position:absolute;
  inset:0;
  object-position:center 55%;
  animation:hero-in 2s ease-out both;
  transition:opacity .6s
}
.hero-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#26344042 0%,#26344006 42%,#2634405e 100%)
}
.hero-coordinate {
  position:absolute;
  right:3%;
  top:135px
}
.hero-title {
  position:absolute;
  top:44%;
  left:50%;
  transform:translate(-50%,-15%);
  text-align:center;
  width:85%;
  text-shadow:0 2px 30px #26344044
}
.hero-title>span {
  font:100 clamp(44px,6.8vw,108px)/1 Canela,serif
}
.hero-title h1 {
  font-size:clamp(52px,8.8vw,140px);
  white-space:nowrap
}
.hero-title h1 small {
  font-size:.34em;
  vertical-align:14%;
  margin-right:.12em
}
.scroll-link {
  display:inline-flex;
  margin-top:28px;
  flex-direction:column;
  align-items:center;
  gap:8px
}
.scroll-link b {
  font-weight:300;
  font-size:20px
}
.orbit {
  position:absolute;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  gap:15px;
  align-items:center;
  justify-content:center;
  transition:background .4s,transform .8s;
  border:1px solid #ffffff70
}
.orbit:hover {
  transform:scale(1.05);
  background:#ffffff33
}
.orbit-res {
  width:21vw;
  height:21vw;
  max-width:310px;
  max-height:310px;
  top:18%;
  left:8%
}
.orbit-villa {
  width:13vw;
  height:13vw;
  max-width:185px;
  max-height:185px;
  bottom:15%;
  right:10%;
  background:var(--sand);
  color:var(--ink);
  outline:1px solid #ffffff99;
  outline-offset:5px
}
.orbit-arrow {
  font-size:24px;
  position:absolute;
  bottom:20%
}
.hero-bottom {
  position:absolute;
  left:3%;
  right:3%;
  bottom:25px;
  display:flex;
  justify-content:space-between;
  align-items:end
}
.segmented {
  display:flex;
  border:1px solid #ffffff5c;
  padding:4px;
  border-radius:3px
}
.segmented button {
  font-size:10px;
  padding:9px 14px;
  transition:background .3s
}
.segmented button.active {
  background:#ffffff22
}
.hero-place {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  bottom:0;
  font-size:9px
}
.contact-round {
  background:var(--white);
  color:var(--ink);
  border:4px solid #26344090;
  outline:1px solid #ffffffaa;
  outline-offset:4px;
  width:50px;
  height:50px
}
.concept {
  padding-top:145px;
  padding-bottom:70px
}
.section-label {
  display:block;
  margin-bottom:45px
}
.concept-title {
  font-size:clamp(35px,4.6vw,72px);
  line-height:1.17;
  letter-spacing:-.025em
}
.inline-label {
  display:inline-block;
  float:left;
  width:28%;
  font:10px/1.6 Mono,monospace;
  padding-top:14px;
  letter-spacing:0
}
.concept-bottom {
  display:flex;
  align-items:center;
  margin-top:65px;
  justify-content:space-between;
  gap:20px
}
.concept-bottom p {
  font-size:10px;
  margin-right:auto
}
.small-mark {
  font:100 60px Canela;
  margin-right:15%;
  position:relative
}
.small-mark span {
  position:absolute;
  font-size:45px;
  left:5px;
  top:10px
}
.gallery {
  padding:45px 3% 0
}
.gallery-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 0
}
.category-links {
  display:flex;
  gap:12px;
  align-items:center
}
.category-links button {
  opacity:.45
}
.category-links button.active {
  opacity:1
}
.gallery-frame {
  height:78vh;
  min-height:450px;
  position:relative;
  overflow:hidden
}
.gallery-frame img {
  transition:opacity .25s;
  object-position:center
}
.gallery-caption {
  position:absolute;
  bottom:35px;
  left:30px;
  color:white;
  text-shadow:0 1px 10px #000
}
.gallery-controls {
  position:absolute;
  right:30px;
  bottom:25px;
  display:flex;
  gap:12px;
  color:white
}
.gallery-controls .round {
  background:#26344025
}
.location-head {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:35px;
  margin-bottom:60px
}
.location-head>h2 {
  grid-column:2
}
.location-head>p {
  grid-column:2;
  max-width:400px;
  font-size:10px;
  margin-left:14%
}
.location-map {
  height:500px;
  position:relative;
  overflow:hidden
}
.location-map>svg {
  width:100%;
  height:100%;
  object-fit:cover
}
.map-pin {
  position:absolute;
  top:30%;
  left:65%;
  width:60px;
  height:60px;
  border-radius:50%;
  background:var(--ink);
  color:var(--sand);
  font:100 37px Canela;
  box-shadow:0 0 0 10px #26344020
}
.map-pin>span {
  position:absolute;
  font:9px Mono;
  width:180px;
  left:50%;
  transform:translateX(-50%);
  top:80px;
  color:var(--ink)
}
.map-link {
  position:absolute;
  bottom:25px;
  right:25px;
  font-size:10px
}
.map-note {
  position:absolute;
  left:20px;
  bottom:20px;
  font-size:8px
}
.places {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px
}
.places button {
  padding:30px 0;
  text-align:left;
  border-bottom:1px solid var(--line);
  position:relative
}
.places h3 {
  margin-top:20px;
  font-size:28px
}
.places button>span:last-child {
  position:absolute;
  right:0;
  bottom:32px;
  font-size:22px
}
.architecture-image {
  height:90vh;
  min-height:550px;
  position:relative;
  color:var(--white)
}
.architecture-image:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(#26344022,transparent,#26344066)
}
.architecture-image>.eyebrow {
  position:absolute;
  left:5%;
  top:40px;
  z-index:1
}
.architecture-image>h2 {
  position:absolute;
  left:5%;
  bottom:65px;
  z-index:1;
  font-size:clamp(50px,6.5vw,100px)
}
.architecture-copy {
  display:grid;
  grid-template-columns:1fr 2.1fr;
  gap:35px
}
.architecture-copy>h2 {
  font-size:clamp(34px,3.8vw,60px);
  line-height:1.13
}
.architecture-copy>p {
  grid-column:2;
  font-size:10px;
  max-width:420px;
  margin-left:auto;
  line-height:1.8;
  margin-top:25px
}
.panorama {
  position:relative;
  height:65vh;
  min-height:420px;
  color:var(--white);
  overflow:hidden
}
.panorama:after {
  content:'';
  position:absolute;
  inset:0;
  background:#26344027
}
.panorama h2 {
  position:absolute;
  left:0;
  right:0;
  top:50%;
  transform:translateY(-50%);
  text-align:center;
  font-size:clamp(45px,8vw,130px);
  z-index:1
}
.panorama h2 small {
  font-size:.28em
}
.panorama>.eyebrow {
  position:absolute;
  bottom:35px;
  left:50%;
  transform:translateX(-50%);
  z-index:1
}
.interiors {
  padding-top:70px;
  padding-bottom:40px
}
.interior-tabs {
  display:flex;
  justify-content:center;
  gap:45px;
  margin-bottom:30px
}
.interior-tabs button {
  font-size:11px;
  opacity:.45;
  padding-bottom:8px;
  border-bottom:1px solid transparent
}
.interior-tabs [aria-selected=true] {
  opacity:1;
  border-bottom-color:var(--ink)
}
.interior-frame {
  height:75vh;
  min-height:430px;
  position:relative
}
.interior-frame img {
  transition:opacity .25s
}
.interior-frame>span {
  position:absolute;
  bottom:25px;
  left:25px;
  color:white;
  text-shadow:0 1px 10px #000
}
.lifestyle {
  overflow:hidden
}
.lifestyle-heading {
  display:grid;
  grid-template-columns:1fr 2fr;
  position:relative;
  gap:30px
}
.amenity-arrows {
  position:absolute;
  bottom:0;
  right:0;
  display:flex;
  gap:10px
}
.lifestyle-heading h2 {
  font-size:clamp(40px,5.2vw,80px)
}
.amenities {
  display:flex;
  gap:28px;
  overflow:auto;
  margin-top:65px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding-bottom:5px
}
.amenities::-webkit-scrollbar {
  display:none
}
.amenity {
  flex:0 0 37%;
  text-align:left;
  scroll-snap-align:start
}
.amenity img {
  height:340px;
  object-fit:cover;
  margin-bottom:22px;
  transition:filter .4s
}
.amenity:hover img {
  filter:brightness(.85)
}
.amenity h3 {
  display:flex;
  justify-content:space-between;
  margin-top:12px
}
.amenity h3 b {
  font:20px Mono;
  font-weight:300
}
.selection {
  height:90vh;
  min-height:600px;
  position:relative;
  color:var(--white)
}
.selection:after {
  content:'';
  position:absolute;
  inset:0;
  background:#26344050
}
.selection-overlay {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content:center;
  text-align:center;
  z-index:1
}
.selection h2 {
  font-size:clamp(65px,8vw,125px);
  margin:25px 0 35px
}
.large {
  height:130px;
  width:130px;
  font-size:11px;
  background:var(--sand);
  color:var(--ink);
  outline:1px solid #ffffff;
  outline-offset:6px
}
.selection-note {
  position:absolute;
  bottom:25px;
  left:3%;
  z-index:1;
  font-size:9px
}
.journal-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:50px
}
.journal-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px
}
.journal-grid>button {
  text-align:left
}
.journal-grid img,.journal-art {
  height:260px;
  margin-bottom:22px
}
.journal-art {
  background:#e3e8ec;
  color:#526b80;
  display:flex;
  align-items:center;
  justify-content:center
}
.journal-art svg {
  width:70%;
  height:80%
}
.journal-grid h3 {
  font-size:37px;
  margin-top:15px;
  position:relative
}
.journal-grid h3 span {
  position:absolute;
  right:0;
  bottom:5px;
  font:24px Mono
}
.contact {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:730px
}
.contact>img {
  height:100%;
  max-height:850px
}
.contact-form {
  padding:70px 10%;
  background:#e3e8ec
}
.contact-form h2 {
  font-size:clamp(45px,4.8vw,75px);
  margin:35px 0 55px
}
.contact-form form label {
  font-size:0;
  display:block
}
.contact-form input {
  background:none;
  border:0;
  border-bottom:1px solid var(--line);
  width:100%;
  padding:20px 0;
  font:11px Mono;
  color:var(--ink);
  border-radius:0
}
.contact-form input::placeholder {
  color:var(--ink)
}
.form-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:25px;
  gap:10px
}
.form-bottom p,.plan-note {
  font-size:8px;
  line-height:1.6
}
#form-status {
  font-size:11px;
  margin-top:20px
}
.footer-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px
}
.footer-logo {
  font:100 64px/1 Canela;
  letter-spacing:3px;
  text-align:center
}
.footer-top>p {
  font-size:11px
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-top:70px;
  font-size:8px
}
.footer-bottom button {
  font-size:8px
}
.cookie {
  position:fixed;
  bottom:20px;
  left:20px;
  max-width:410px;
  background:var(--sand);
  color:var(--ink);
  border:1px solid var(--line);
  padding:18px;
  z-index:30;
  font-size:9px;
  box-shadow:0 5px 30px #0001
}
.cookie button {
  display:block;
  margin-top:12px;
  border-bottom:1px solid var(--ink);
  padding-bottom:4px;
  font-size:10px
}
dialog {
  border:0;
  background:var(--sand);
  color:var(--ink);
  padding:60px;
  max-width:1000px;
  width:90%;
  max-height:90svh;
  overflow:auto
}
dialog::backdrop {
  background:#263440b5;
  backdrop-filter:blur(8px)
}
.dialog-close {
  position:absolute;
  right:15px;
  top:15px;
  z-index:2;
  width:35px;
  height:35px;
  font-size:25px;
  background:var(--sand)
}
#detail-content>img {
  height:350px;
  margin-bottom:30px
}
#detail-content h2 {
  font-size:48px;
  margin:20px 0
}
#detail-content>p {
  max-width:650px;
  line-height:1.9;
  font-size:12px
}
dialog h2 {
  margin:20px 0 30px
}
dialog .text-link {
  margin-top:25px
}
.floor-tabs {
  display:flex;
  gap:25px;
  border-bottom:1px solid var(--line);
  margin-bottom:35px
}
.floor-tabs button {
  padding:15px 0;
  opacity:.5;
  border-bottom:1px solid transparent
}
.floor-tabs button.active {
  opacity:1;
  border-bottom-color:var(--ink)
}
.floor-content {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:40px;
  align-items:center
}
.floor-content h3 {
  font-size:35px;
  margin:15px 0
}
.floor-content p {
  line-height:1.7
}
#plan-specs {
  display:flex;
  gap:25px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:25px 0;
  padding:20px 0
}
#plan-specs b {
  font:100 30px Canela;
  display:block
}
#plan-specs span {
  font-size:9px
}
.plan-note {
  margin-top:20px
}
.plan-svg {
  width:100%;
  max-height:360px
}
.reveal {
  transition:opacity .8s,transform .8s
}
.reveal.pending {
  opacity:0;
  transform:translateY(30px)
}
@keyframes hero-in {
  from {
    transform:scale(1.06);
    filter:brightness(.8)
  }
  to {
    transform:scale(1);
    filter:brightness(1)
  }
  
}
 @media(min-width:1600px) {
  .pad {
    padding-left:max(5%,calc((100vw - 1550px)/2));
    padding-right:max(5%,calc((100vw - 1550px)/2))
  }
  
}
@media(max-width:900px) {
  .header-right>a {
    display:none
  }
  .pad {
    padding:80px 5%
  }
  .inline-label {
    width:25%
  }
  .hero-title h1 {
    font-size:10vw
  }
  .orbit-res {
    width:25vw;
    height:25vw;
    left:6%
  }
  .orbit-villa {
    width:17vw;
    height:17vw;
    right:7%
  }
  .location-map {
    height:400px
  }
  .amenity {
    flex-basis:48%
  }
  .lifestyle-heading {
    grid-template-columns:1fr 3fr
  }
  .amenity-arrows {
    position:static;
    grid-column:2
  }
  .journal-grid {
    gap:18px
  }
  .journal-grid h3 {
    font-size:29px
  }
  .journal-grid img,.journal-art {
    height:200px
  }
  .contact {
    min-height:650px
  }
  .contact-form {
    padding:55px 8%
  }
  .contact-form h2 {
    font-size:48px
  }
  .footer-logo {
    font-size:45px
  }
  .hero-coordinate {
    display:none
  }
  
}
 @media(max-width:600px) {
  .desktop {
    display:none!important
  }
  .pad {
    padding:70px 5%
  }
  header {
    height:75px;
    padding:18px 5%
  }
  .logo {
    font-size:26px;
    letter-spacing:1px
  }
  .logo small {
    font-size:6px;
    letter-spacing:2px;
    margin-top:6px
  }
  .header-right {
    gap:0
  }
  .header-right button {
    font-size:9px;
    border-bottom:0
  }
  .menu-lines {
    width:25px
  }
  .menu-lines i {
    width:25px
  }
  #menu-toggle {
    min-width:25px
  }
  .hero {
    min-height:570px;
    max-height:1000px
  }
  .hero-img {
    object-position:45% center
  }
  .hero-title {
    top:44%;
    transform:translate(-50%,-10%);
    width:95%
  }
  .hero-title>span {
    font-size:36px
  }
  .hero-title h1 {
    font-size:11.5vw
  }
  .hero-title h1 small {
    font-size:.36em
  }
  .scroll-link {
    margin-top:18px;
    font-size:9px
  }
  .orbit-res {
    width:42vw;
    height:42vw;
    left:4%;
    top:16%
  }
  .orbit-villa {
    width:24vw;
    height:24vw;
    right:14%;
    bottom:19%
  }
  .orbit span {
    font-size:10px
  }
  .orbit-arrow {
    display:none
  }
  .hero-bottom {
    left:5%;
    right:5%;
    bottom:23px
  }
  .hero-place {
    display:none
  }
  .contact-round {
    width:43px;
    height:43px;
    font-size:20px
  }
  .segmented button {
    padding:7px 9px;
    font-size:9px
  }
  .concept .section-label {
    margin-bottom:35px
  }
  .concept-title {
    font-size:31px;
    line-height:1.2
  }
  .inline-label {
    float:none;
    display:block;
    width:100%;
    font-size:9px;
    margin-bottom:30px;
    padding:0
  }
  .concept-bottom {
    margin-top:40px;
    flex-wrap:wrap
  }
  .small-mark {
    margin-right:20px;
    font-size:45px
  }
  .small-mark span {
    font-size:34px
  }
  .concept-bottom p {
    font-size:8px
  }
  .concept-bottom .text-link {
    margin-top:10px;
    font-size:9px;
    margin-left:auto
  }
  .gallery {
    padding:0 4%
  }
  .gallery-top {
    font-size:9px
  }
  .gallery-top>.eyebrow {
    font-size:9px
  }
  .category-links {
    gap:7px
  }
  .gallery-frame {
    height:65svh;
    min-height:360px
  }
  .gallery-frame img {
    object-position:50%
  }
  .gallery-caption {
    left:15px;
    bottom:23px;
    font-size:8px;
    max-width:130px
  }
  .gallery-controls {
    right:15px;
    bottom:15px;
    gap:8px
  }
  .gallery-controls .round {
    width:38px;
    height:38px;
    font-size:18px
  }
  .location-head {
    display:block;
    margin-bottom:30px
  }
  .location-head h2 {
    font-size:43px;
    margin:35px 0 25px
  }
  .location-head>p {
    margin-left:14%;
    font-size:9px
  }
  .location-map {
    height:360px;
    margin:0 -5.5%
  }
  .location-map>svg {
    width:180%;
    max-width:none;
    transform:translateX(-28%)
  }
  .map-pin {
    left:62%;
    top:23%;
    width:50px;
    height:50px;
    font-size:30px
  }
  .map-pin>span {
    top:65px;
    font-size:8px
  }
  .map-link {
    right:15px;
    bottom:35px;
    font-size:9px
  }
  .map-note {
    left:15px;
    bottom:10px;
    font-size:7px
  }
  .places {
    grid-template-columns:1fr;
    gap:0
  }
  .places button {
    padding:20px 0
  }
  .places h3 {
    font-size:27px;
    margin-top:10px
  }
  .places .eyebrow {
    font-size:9px
  }
  .places button>span:last-child {
    bottom:25px
  }
  .architecture-image {
    height:80svh;
    min-height:450px
  }
  .architecture-image img {
    object-position:55%
  }
  .architecture-image>h2 {
    font-size:43px;
    bottom:40px
  }
  .architecture-copy {
    display:block
  }
  .architecture-copy h2 {
    font-size:32px;
    margin:35px 0
  }
  .architecture-copy>p {
    font-size:9px;
    max-width:260px
  }
  .panorama {
    height:65svh;
    min-height:400px
  }
  .panorama h2 {
    font-size:53px;
    line-height:1.3;
    padding:0 15px
  }
  .panorama h2 small {
    display:block;
    font-size:18px
  }
  .panorama img {
    object-position:65%
  }
  .panorama>.eyebrow {
    font-size:9px;
    white-space:nowrap
  }
  .interiors {
    padding-top:40px;
    padding-bottom:0
  }
  .interior-tabs {
    justify-content:space-between;
    gap:10px;
    margin-bottom:20px
  }
  .interior-tabs button {
    font-size:9px
  }
  .interior-frame {
    height:60svh;
    min-height:360px
  }
  .interior-frame>span {
    font-size:8px;
    left:15px;
    bottom:20px
  }
  .lifestyle-heading {
    display:block
  }
  .lifestyle-heading h2 {
    font-size:39px;
    margin:30px 0
  }
  .amenity-arrows {
    justify-content:end
  }
  .amenity-arrows .round {
    width:42px;
    height:42px;
    font-size:18px
  }
  .amenities {
    margin-top:30px;
    gap:18px;
    margin-right:-5.5%
  }
  .amenity {
    flex-basis:83%
  }
  .amenity img {
    height:310px
  }
  .amenity h3 {
    font-size:29px
  }
  .amenity .eyebrow {
    font-size:9px
  }
  .selection {
    height:80svh;
    min-height:530px
  }
  .selection h2 {
    font-size:64px;
    margin-bottom:40px
  }
  .selection img {
    object-position:45%
  }
  .selection-note {
    left:5%;
    font-size:8px
  }
  .journal-head {
    display:block;
    margin-bottom:30px
  }
  .journal-head h2 {
    font-size:44px;
    margin-bottom:15px
  }
  .journal-grid {
    grid-template-columns:1fr;
    gap:40px
  }
  .journal-grid img,.journal-art {
    height:270px;
    margin-bottom:18px
  }
  .journal-grid h3 {
    font-size:36px
  }
  .journal-grid .eyebrow {
    font-size:9px
  }
  .contact {
    display:flex;
    flex-direction:column
  }
  .contact>img {
    height:340px
  }
  .contact-form {
    padding:50px 7%
  }
  .contact-form h2 {
    font-size:51px;
    margin-bottom:35px
  }
  .footer-top {
    flex-wrap:wrap;
    align-items:start;
    gap:30px
  }
  .footer-logo {
    font-size:42px
  }
  .footer-top>p {
    font-size:9px
  }
  .footer-top>.text-link {
    font-size:9px;
    width:100%
  }
  .footer-bottom {
    padding-top:40px;
    flex-wrap:wrap;
    font-size:7px
  }
  .footer-bottom span:nth-child(2) {
    width:100%;
    order:3
  }
  .cookie {
    bottom:12px;
    left:12px;
    right:12px;
    max-width:none;
    padding:15px;
    font-size:8px
  }
  .cookie button {
    font-size:9px
  }
  dialog {
    padding:55px 22px 30px;
    width:94%;
    max-height:90svh
  }
  dialog h2 {
    font-size:35px
  }
  #detail-content>img {
    height:240px
  }
  #detail-content h2 {
    font-size:36px
  }
  #detail-content>p {
    font-size:11px
  }
  .floor-tabs {
    gap:16px;
    font-size:9px
  }
  .floor-content {
    grid-template-columns:1fr;
    gap:25px
  }
  .plan-svg {
    height:260px
  }
  .floor-content h3 {
    font-size:33px
  }
  .floor-content p {
    font-size:11px
  }
  .floor-content .plan-note {
    font-size:8px
  }
  #menu {
    padding:90px 7% 30px
  }
  .menu-content {
    gap:22px
  }
  .menu-content>a {
    font-size:35px
  }
  .menu-content>.eyebrow {
    font-size:9px
  }
  
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .reveal.pending {
    opacity:1;
    transform:none
  }
  
}
 /* Interactive village and spatial navigation */ .masterplan-section {
  padding-top:70px
}
.masterplan-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5% 45px;
  gap:25px
}
.masterplan-heading h2 {
  font-size:52px
}
.masterplan {
  height:min(70vw,850px);
  min-height:550px;
  position:relative;
  overflow:hidden;
  background:#e3e8ec;
  touch-action:none;
  isolation:isolate;
  cursor:grab
}
.masterplan.dragging {
  cursor:grabbing
}
.plan-scene {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:auto;
  aspect-ratio:1672/941;
  min-width:1050px;
  transform-origin:0 0;
  will-change:transform
}
.plan-scene>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}
#lot-layer {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible
}
.lot {
  cursor:pointer;
  outline:none
}
.lot polygon {
  fill:#ffffff12;
  stroke:#ffffffaa;
  stroke-width:1.4;
  transition:fill .3s,stroke .3s,stroke-width .3s
}
.lot:hover polygon,.lot:focus polygon,.lot.selected polygon {
  fill:#ffffff88;
  stroke:#fff;
  stroke-width:3
}
.lot circle {
  fill:#ffffff;
  stroke:#26344080;
  stroke-width:1;
  transition:fill .3s
}
.lot:hover circle,.lot.selected circle {
  fill:var(--ink);
  stroke:var(--sand)
}
.lot text {
  fill:var(--ink);
  font:13px Mono,monospace;
  pointer-events:none
}
.lot:hover text,.lot.selected text {
  fill:var(--sand)
}
.lot .lot-ring {
  fill:none;
  stroke:#ffffff;
  stroke-width:1;
  animation:map-pulse 3s ease-in-out infinite;
  transform-box:fill-box;
  transform-origin:center
}
.map-instruction {
  position:absolute;
  top:25px;
  left:25px;
  color:white;
  text-shadow:0 1px 12px #000;
  font-size:10px;
  pointer-events:none
}
.map-instruction span {
  font-size:8px;
  opacity:.7
}
.zoom-controls {
  position:absolute;
  left:25px;
  top:85px;
  display:flex;
  flex-direction:column;
  background:var(--sand);
  border:1px solid #26344044
}
.zoom-controls button {
  width:42px;
  height:42px;
  border-bottom:1px solid var(--line);
  font-size:23px
}
.zoom-controls button:last-child {
  border:0
}
.zoom-controls button:hover {
  background:var(--ink);
  color:var(--sand)
}
.masterplan-legend {
  position:absolute;
  bottom:20px;
  left:25px;
  right:25px;
  display:flex;
  align-items:center;
  gap:10px;
  color:white;
  pointer-events:none;
  text-shadow:0 1px 10px #000
}
.masterplan-legend>span {
  margin-left:auto;
  font-size:8px
}
.masterplan-legend>i {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--sand);
  box-shadow:0 0 0 5px #ffffff44
}
.home-card {
  position:absolute;
  right:25px;
  top:25px;
  width:300px;
  padding:25px;
  background:var(--sand);
  box-shadow:0 15px 70px #0003;
  animation:card-in .4s ease;
  cursor:default
}
.home-card>button:first-child {
  position:absolute;
  right:12px;
  top:5px;
  font-size:25px
}
.home-card>h3 {
  font-size:32px;
  margin:15px 0 10px
}
.home-card>p {
  font-size:10px;
  margin-bottom:20px
}
.home-card>img {
  height:160px;
  margin-bottom:12px
}
.home-card>.text-link {
  width:100%;
  font-size:10px
}
.location-map:after {
  content:'';
  pointer-events:none;
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 60px #ffffff30
}
.area-point {
  position:absolute;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--ink);
  color:var(--sand);
  border:4px solid #ffffff;
  box-shadow:0 0 0 1px var(--ink);
  font-size:10px;
  transition:transform .3s
}
.area-point:hover,.area-point.active {
  transform:scale(1.3);
  z-index:3
}
.area-point>span {
  position:absolute;
  top:30px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  font-size:8px;
  color:var(--ink)
}
.route-info {
  position:absolute;
  left:25px;
  top:25px;
  max-width:220px;
  background:#ffffffee;
  padding:18px;
  animation:card-in .35s ease
}
.route-info h3 {
  font-size:27px;
  margin:10px 0
}
.route-info p {
  font-size:9px
}
.route-info button {
  font-size:9px;
  margin-top:10px;
  border-bottom:1px solid var(--ink)
}
.route-path {
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  animation:draw-route 2s ease forwards
}
.panorama {
  cursor:ew-resize
}
.panorama>img {
  transition:object-position 1s ease;
  transform:scale(1.08)
}
.panorama:hover>img {
  object-position:60%
}
.panorama>span {
  border-bottom:1px solid #fff8;
  padding-bottom:8px
}
.tour-view {
  height:65svh;
  overflow:hidden;
  cursor:ew-resize;
  touch-action:none;
  position:relative
}
.tour-view img {
  width:auto;
  min-width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  position:absolute;
  left:0;
  top:0;
  will-change:transform;
  user-select:none;
  pointer-events:none
}
#detail.tour-dialog {
  max-width:95vw;
  width:95vw;
  padding:0
}
.tour-caption {
  position:absolute;
  bottom:25px;
  left:30px;
  color:white;
  font-size:11px;
  pointer-events:none
}
#detail.tour-dialog .dialog-close {
  background:#ffffffbb
}
.hero-title {
  animation:card-in 1.3s .15s both
}
.orbit-res {
  animation:float-orbit 9s ease-in-out infinite
}
.orbit-villa {
  animation:float-orbit 7s -3s ease-in-out infinite
}
.gallery-frame>img,.interior-frame>img {
  transition:opacity .35s,transform 1.1s
}
.gallery-frame:hover>img,.interior-frame:hover>img {
  transform:scale(1.025)
}
.amenity>img {
  transition:transform .7s,filter .4s
}
.amenity {
  overflow:hidden
}
.amenity:hover>img {
  transform:scale(1.025)
}
@keyframes float-orbit {
  0%,100% {
    translate:0 0
  }
  50% {
    translate:0 -12px
  }
  
}
@keyframes card-in {
  from {
    opacity:0;
    translate:0 20px
  }
  to {
    opacity:1;
    translate:0 0
  }
  
}
@keyframes map-pulse {
  0%,100% {
    opacity:.3;
    scale:1
  }
  50% {
    opacity:.8;
    scale:1.15
  }
  
}
@keyframes draw-route {
  to {
    stroke-dashoffset:0
  }
  
}
 @media(max-width:600px) {
  .masterplan-section {
    padding-top:0
  }
  .masterplan-heading {
    display:block;
    padding:0 5% 35px
  }
  .masterplan-heading h2 {
    font-size:42px;
    margin:25px 0
  }
  .masterplan-heading .category-links {
    font-size:10px
  }
  .masterplan {
    min-height:580px;
    height:78svh
  }
  .map-instruction {
    left:15px;
    top:15px;
    font-size:9px
  }
  .zoom-controls {
    left:15px;
    top:70px
  }
  .zoom-controls button {
    width:36px;
    height:36px;
    font-size:20px
  }
  .home-card {
    right:12px;
    top:auto;
    bottom:45px;
    width:245px;
    padding:18px
  }
  .home-card h3 {
    font-size:28px;
    margin:10px 0
  }
  .home-card p {
    font-size:9px;
    margin-bottom:12px
  }
  .home-card img {
    height:110px;
    margin-bottom:5px
  }
  .home-card .eyebrow {
    font-size:9px
  }
  .home-card .text-link {
    font-size:9px
  }
  .masterplan-legend {
    left:15px;
    right:15px;
    font-size:8px;
    bottom:15px
  }
  .masterplan-legend>span {
    font-size:6px;
    max-width:100px;
    text-align:right
  }
  .area-point>span {
    font-size:7px
  }
  .route-info {
    top:15px;
    left:15px;
    max-width:160px;
    padding:13px
  }
  .route-info h3 {
    font-size:23px
  }
  .route-info p {
    font-size:8px
  }
  .tour-view {
    height:75svh
  }
  .tour-caption {
    font-size:9px;
    left:20px;
    max-width:250px
  }
  
}
 @media(prefers-reduced-motion:reduce) {
  .orbit-res,.orbit-villa,.lot .lot-ring {
    animation:none
  }
  .route-path {
    animation:none;
    stroke-dashoffset:0
  }
  
}
 .motion-item {
  opacity:0;
  translate:0 35px;
  transition:opacity .9s var(--delay,0ms),translate .9s var(--delay,0ms)
}
.motion-item.is-visible {
  opacity:1;
  translate:0 0
}
.hero-title {
  transition:translate 1.5s ease-out
}
.architecture-image,.panorama {
  overflow:hidden
}
.map-pin:before {
  content:'';
  position:absolute;
  inset:-10px;
  border:1px solid #26344055;
  border-radius:50%;
  animation:map-pulse 3s infinite
}
@media(prefers-reduced-motion:reduce) {
  .motion-item {
    opacity:1;
    translate:none
  }
  .map-pin:before {
    animation:none
  }
  
}
 /* Aelia: the arrival, architectural drawings and narrated tour. */ :root {
  --sand:#ffffff;
  --ink:#263440;
  --white:#ffffff
}
.logo {
  font-size:43px;
  letter-spacing:7px
}
.logo small {
  letter-spacing:4px
}
.hero-title h1 {
  font-size:clamp(65px,10.8vw,170px);
  letter-spacing:.01em
}
.hero-category-caption {
  position:absolute;
  top:34%;
  left:50%;
  transform:translateX(-50%);
  font-size:9px;
  letter-spacing:.2em;
  white-space:nowrap
}
.hero-select-again {
  position:absolute;
  left:3%;
  bottom:95px;
  font-size:9px;
  border-bottom:1px solid #fff5;
  padding-bottom:6px
}
.orbit:before {
  content:'';
  position:absolute;
  inset:10px;
  border-radius:50%;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity .7s;
  z-index:0
}
.orbit-res:before {
  background-image:linear-gradient(#26344044,#26344044),url('assets/residences.webp')
}
.orbit-villa:before {
  background-image:linear-gradient(#26344044,#26344044),url('assets/villa.webp')
}
.orbit:hover:before {
  opacity:.8
}
.orbit>span {
  position:relative;
  z-index:1
}
.orbit:hover {
  color:var(--white)
}
.hero.switching .hero-title {
  animation:category-title 1s both
}
.hero.switching .hero-category-caption {
  animation:category-title 1s both
}
.hero[data-collection=villas] .orbit-villa {
  background:#ffffff15;
  color:var(--white)
}
.hero[data-collection=villas] .orbit-res {
  background:var(--sand);
  color:var(--ink)
}
#collection-choice {
  max-width:none;
  width:100vw;
  height:100svh;
  max-height:none;
  padding:0;
  background:var(--sand);
  overflow:hidden
}
#collection-choice[open] {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px
}
.choice-panel {
  position:relative;
  height:100%;
  overflow:hidden;
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:30px
}
.choice-panel:after {
  content:'';
  position:absolute;
  inset:0;
  background:#26344025;
  transition:background .8s
}
.choice-panel img {
  position:absolute;
  inset:0;
  transition:transform 1.5s,filter 1.5s;
  filter:saturate(.75)
}
.choice-panel:hover img {
  transform:scale(1.04);
  filter:saturate(.95)
}
.choice-panel:hover:after {
  background:#26344008
}
.choice-panel>span {
  z-index:1;
  position:relative;
  font:100 clamp(50px,6vw,110px) Canela
}
.choice-panel>b {
  z-index:1;
  position:relative;
  font:10px Mono;
  display:flex;
  align-items:center;
  justify-content:center;
  width:90px;
  height:90px;
  border-radius:50%;
  border:1px solid #fff9;
  font-weight:300
}
.choice-logo {
  position:absolute;
  top:35px;
  left:50%;
  transform:translateX(-50%);
  font:100 40px Canela;
  letter-spacing:6px;
  color:white;
  z-index:2;
  white-space:nowrap;
  text-align:center
}
.choice-logo small {
  font:7px Mono;
  letter-spacing:2px;
  display:block;
  margin-top:7px
}
.choice-foot {
  position:absolute;
  bottom:25px;
  left:0;
  right:0;
  text-align:center;
  color:white;
  z-index:2;
  font-size:8px
}
.choice-close {
  position:absolute;
  right:25px;
  top:25px;
  z-index:3;
  color:white;
  font-size:30px;
  border:1px solid #fff8;
  border-radius:50%;
  width:40px;
  height:40px;
  background:transparent
}
.narration-player {
  display:flex;
  align-items:center;
  gap:18px;
  border-top:1px solid var(--line);
  padding:24px 0;
  margin-top:30px;
  grid-column:2
}
.narration-player>.round {
  width:54px;
  height:54px;
  flex:0 0 54px;
  font-size:17px
}
.narration-player>div {
  flex:1;
  min-width:0
}
.narration-player input[type=range] {
  display:block;
  width:100%;
  height:1px;
  margin:16px 0 12px;
  accent-color:var(--ink);
  cursor:pointer
}
.narration-label {
  font-size:9px
}
.narration-language {
  font-size:9px;
  white-space:nowrap;
  padding:7px 0;
  border-bottom:1px solid var(--line)
}
.narration-time,.narration-caption {
  font-size:9px
}
.narration-caption {
  opacity:.6;
  margin-left:15px
}
.narration-player.is-playing>.round {
  background:var(--ink);
  color:var(--sand);
  box-shadow:0 0 0 6px #26344012
}
.narration-player.is-playing>.round:after {
  content:'';
  position:absolute;
  width:66px;
  height:66px;
  border-radius:50%;
  border:1px solid #26344040;
  animation:map-pulse 2s infinite
}
.narration-transcript {
  grid-column:2;
  font-size:10px;
  line-height:1.8;
  margin-top:10px
}
.narration-transcript summary {
  cursor:pointer;
  opacity:.65;
  letter-spacing:.04em
}
.narration-transcript p {
  margin-top:20px
}
.architecture-sketch {
  grid-column:2;
  width:100%;
  margin-top:20px
}
.architecture-sketch svg {
  width:100%;
  height:auto
}
.architecture-sketch path,.architecture-sketch line,.architecture-sketch polyline {
  stroke-dasharray:1500;
  stroke-dashoffset:1500
}
.architecture-sketch.is-visible path,.architecture-sketch.is-visible line,.architecture-sketch.is-visible polyline {
  animation:draw-architecture 3.5s ease forwards
}
.architecture-sketch.narrating path {
  animation:draw-architecture 15s ease forwards
}
.floor-narration {
  margin-top:-10px;
  padding:15px 0 25px
}
.floor-narration+.floor-content {
  padding-top:10px
}
.floor-content .plan-svg {
  max-height:460px
}
.plan-svg .sketch-lines {
  stroke-linecap:round;
  stroke-linejoin:round
}
.plan-svg .draw-path {
  stroke-dasharray:2000;
  stroke-dashoffset:2000;
  animation:draw-architecture 2.6s ease forwards
}
.plan-svg.narrating .draw-path {
  animation:draw-architecture 8s ease forwards
}
.home-extra {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  padding:12px 0 5px
}
.home-extra button {
  border-bottom:1px solid var(--line);
  padding:3px 0
}
.plan-mode {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:25px;
  display:flex;
  background:#ffffffeb;
  z-index:3;
  border:1px solid #26344033;
  padding:3px;
  border-radius:3px;
  gap:3px;
  white-space:nowrap
}
.plan-mode button {
  padding:10px 12px;
  font-size:9px
}
.plan-mode button.active {
  background:var(--ink);
  color:var(--sand)
}
#village-sketch {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity 1s;
  pointer-events:none
}
.masterplan.sketch-view #village-sketch {
  opacity:1
}
.masterplan.sketch-view .map-instruction,.masterplan.sketch-view .masterplan-legend {
  color:var(--ink);
  text-shadow:none
}
.masterplan.sketch-view .lot polygon {
  fill:#ffffff44;
  stroke:#26344077
}
.masterplan.sketch-view .lot:hover polygon,.masterplan.sketch-view .lot.selected polygon {
  fill:#526b8066;
  stroke:var(--ink)
}
.masterplan.sketch-view #village-sketch .sketch-stroke {
  stroke-dasharray:3000;
  stroke-dashoffset:3000;
  animation:draw-architecture 3s ease forwards
}
.tour-toolbar {
  position:absolute;
  bottom:25px;
  left:25px;
  right:25px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  z-index:2;
  color:white;
  text-shadow:0 1px 15px #0008
}
.tour-toolbar h3 {
  font-size:35px
}
.tour-toolbar p {
  font-size:9px;
  margin-top:10px
}
.tour-pan-controls {
  display:flex;
  gap:8px
}
.tour-pan-controls button {
  background:#ffffffcc;
  color:var(--ink);
  text-shadow:none;
  width:40px;
  height:40px;
  border-radius:50%;
  font-size:18px
}
.tour-view img {
  transition:opacity .5s
}
.tour-hotspot {
  position:absolute;
  top:45%;
  left:67%;
  border:1px solid white;
  background:#ffffff22;
  border-radius:50%;
  width:52px;
  height:52px;
  color:white;
  font-size:20px
}
.tour-hotspot:before {
  content:'';
  position:absolute;
  inset:-8px;
  border:1px solid #fff5;
  border-radius:50%;
  animation:map-pulse 3s infinite
}
.tour-location-caption {
  position:absolute;
  top:22px;
  left:25px;
  font-size:9px;
  color:white;
  text-shadow:0 1px 10px #0008
}
.sea-compass {
  display:block;
  font-size:9px;
  letter-spacing:4px;
  position:absolute;
  top:22px;
  right:70px;
  color:white
}
.route-sea-button {
  display:block;
  margin-top:15px;
  font-size:9px;
  border-bottom:1px solid var(--line);
  padding-bottom:5px
}
.plan-room {
  cursor:pointer;
  transition:fill .3s
}
.plan-room:hover,.plan-room:focus {
  fill:#526b8077
}
.room-tooltip {
  font-size:9px;
  margin-top:15px;
  min-height:20px;
  opacity:.7
}
.floor-content [data-room-name]:focus {
  outline:none;
  stroke-width:3;
  stroke:#263440
}
.architecture-copy>p {
  margin-top:0
}
.hero-title h1 small {
  font-size:.28em
}
.footer-logo {
  letter-spacing:7px
}
.footer-top:after {
  content:'ΑΕΛΙΑ';
  font-size:9px;
  letter-spacing:3px;
  opacity:.65
}
@keyframes draw-architecture {
  to {
    stroke-dashoffset:0
  }
  
}
@keyframes category-title {
  0% {
    opacity:1;
    translate:0 0
  }
  35% {
    opacity:0;
    translate:0 15px
  }
  70%,100% {
    opacity:1;
    translate:0 0
  }
  
}
 @media(max-width:600px) {
  .logo {
    font-size:30px;
    letter-spacing:5px
  }
  .logo small {
    letter-spacing:2px
  }
  .hero-title h1 {
    font-size:18.5vw
  }
  .hero-category-caption {
    top:37%;
    font-size:7px;
    letter-spacing:.14em
  }
  .hero-select-again {
    left:5%;
    bottom:80px;
    font-size:7px
  }
  .choice-logo {
    top:20px;
    font-size:30px
  }
  .choice-logo small {
    font-size:6px
  }
  .choice-panel>span {
    font-size:42px
  }
  .choice-panel>b {
    height:65px;
    width:65px;
    font-size:8px
  }
  .choice-close {
    right:15px;
    top:15px;
    width:32px;
    height:32px;
    font-size:25px
  }
  .choice-foot {
    bottom:20px;
    font-size:7px;
    padding:0 20px
  }
  .choice-panel img {
    object-position:55% center
  }
  .narration-player {
    gap:12px;
    margin-top:25px;
    padding:22px 0
  }
  .narration-player>.round {
    width:44px;
    height:44px;
    flex-basis:44px;
    font-size:14px
  }
  .narration-player.is-playing>.round:after {
    width:56px;
    height:56px
  }
  .narration-label {
    font-size:7px
  }
  .narration-language {
    font-size:8px
  }
  .narration-caption {
    display:block;
    margin-left:0;
    margin-top:5px;
    font-size:8px
  }
  .narration-time {
    font-size:8px
  }
  .narration-transcript {
    font-size:9px
  }
  .architecture-sketch {
    margin:35px -10px 0;
    width:calc(100% + 20px)
  }
  .plan-mode {
    top:15px;
    left:auto;
    right:12px;
    transform:none;
    flex-direction:column;
    align-items:stretch;
    gap:0
  }
  .plan-mode button {
    font-size:7px;
    padding:7px 8px
  }
  .map-instruction {
    max-width:180px
  }
  .floor-narration {
    margin-top:0
  }
  .floor-narration+.floor-content {
    padding-top:0
  }
  .floor-content .plan-svg {
    height:290px
  }
  .home-extra {
    font-size:8px
  }
  .tour-toolbar {
    left:18px;
    right:18px;
    bottom:20px
  }
  .tour-toolbar h3 {
    font-size:28px;
    max-width:230px
  }
  .tour-toolbar p {
    font-size:7px;
    max-width:230px
  }
  .tour-pan-controls button {
    width:34px;
    height:34px
  }
  .tour-location-caption {
    font-size:7px;
    left:18px
  }
  .sea-compass {
    font-size:7px;
    right:65px;
    letter-spacing:1px
  }
  .tour-hotspot {
    width:40px;
    height:40px;
    font-size:17px
  }
  .footer-top:after {
    display:none
  }
  
}
@media(prefers-reduced-motion:reduce) {
  .architecture-sketch path,.architecture-sketch line,.architecture-sketch polyline,.plan-svg .draw-path,#village-sketch .sketch-stroke {
    stroke-dashoffset:0!important;
    animation:none!important
  }
  
}
 .map-to-sea {
  position:absolute;
  z-index:7;
  right:25px;
  top:25px;
  background:#ffffffed;
  border:1px solid #26344033;
  padding:12px 16px;
  font:9px Mono;
  color:var(--ink)
}
.map-to-sea:hover {
  background:var(--ink);
  color:var(--sand)
}
.selected-room>rect {
  fill:#526b8066!important
}
.floor-transcript {
  font-size:9px;
  line-height:1.8;
  margin-top:15px
}
.floor-transcript summary {
  cursor:pointer;
  opacity:.7
}
.floor-transcript p {
  margin-top:12px
}
#village-sketch {
  z-index:1
}
#lot-layer {
  z-index:2
}
.masterplan.sketch-view #village-sketch~#lot-layer .lot-ring {
  stroke:#26344055
}
.floor-content .plan-svg .draw-path {
  animation-duration:3s
}
.hero .hero-title {
  z-index:2
}
.orbit-res,.orbit-villa {
  z-index:3
}
@media(max-width:600px) {
  .map-to-sea {
    right:12px;
    top:12px;
    font-size:7px;
    padding:9px 10px
  }
  .architecture-copy .narration-caption {
    max-width:200px
  }
  .floor-narration .narration-label {
    font-size:7px
  }
  .floor-tabs {
    margin-bottom:20px
  }
  .choice-panel>span {
    font-size:36px
  }
  #collection-choice[open] {
    grid-template-columns:1fr 1fr
  }
  .choice-panel {
    gap:22px
  }
  
}
 .architecture-copy {
  grid-template-columns:minmax(0,1fr) minmax(0,2.1fr)
}
.architecture-copy>* {
  min-width:0
}
.floor-content {
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)
}
.voice-options {
  grid-column:2;
  font-size:9px;
  line-height:1.7;
  margin-top:8px;
  max-width:100%
}
.voice-options summary {
  cursor:pointer;
  opacity:.6
}
.voice-options label {
  display:block;
  margin-top:15px
}
.voice-options select {
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  font:10px Mono;
  width:100%;
  max-width:100%;
  padding:10px 0
}
.voice-options p {
  font-size:8px;
  margin-top:12px;
  opacity:.6
}
.narration-player {
  min-width:0;
  max-width:100%
}
.narration-progress {
  min-width:0
}
@media(max-width:600px) {
  .architecture-copy {
    display:block
  }
  .floor-content {
    grid-template-columns:minmax(0,1fr)
  }
  .voice-options select {
    font-size:9px
  }
  
}
 #detail.tour-dialog {
  width:94%;
  max-width:1400px;
  margin:auto;
  overflow:hidden
}
#detail.tour-dialog #detail-content {
  width:100%;
  min-width:0
}
.tour-view {
  width:100%;
  min-width:0
}
.tour-dialog .dialog-close {
  right:16px;
  top:16px;
  z-index:5
}
.tour-pan-controls {
  flex:0 0 auto
}
.architecture-copy {
  overflow:hidden
}
  /* Fictional setting, drawn as a fully interactive landscape. */ html {
  scrollbar-gutter:stable
}
body:has(dialog[open]) {
  overflow:hidden
}
 .location-map>svg {
  width:100%;
  height:100%;
  transform:none
}
.map-reset {
  cursor:pointer
}
 .map-link {
  background:transparent;
  border:0
}
.area-point {
  min-width:36px;
  min-height:36px
}
 .dialog-toolbar {
  position:sticky;
  top:-45px;
  height:0;
  z-index:20;
  pointer-events:none
}
.dialog-toolbar .dialog-close {
  pointer-events:auto;
  top:0;
  right:-42px;
  min-width:44px;
  min-height:44px;
  background:#ffffff;
  color:#263440
}
 .tour-dialog .dialog-toolbar {
  position:absolute;
  top:15px;
  right:15px;
  left:0
}
.tour-dialog .dialog-close {
  right:0
}
 button:focus-visible,a:focus-visible,[tabindex]:focus-visible {
  outline:2px solid #526b80;
  outline-offset:5px
}
 @media(max-width:1100px) {
  .header-right>a.desktop {
    display:none
  }
  
}
 @media(max-width:600px) {
  .dialog-toolbar {
    top:-42px
  }
  .dialog-toolbar .dialog-close {
    right:-10px
  }
  .tour-dialog .dialog-toolbar {
    top:10px;
    right:10px
  }
  .tour-dialog .dialog-close {
    right:0
  }
  .round,.gallery-controls button,.tour-pan-controls button,.zoom-controls button {
    min-width:44px;
    min-height:44px
  }
  .interior-tabs button,.floor-tabs button,.plan-mode button {
    min-height:44px
  }
  .location-map {
    height:540px
  }
  .location-map>svg {
    width:100%;
    transform:none
  }
  .area-point span {
    font-size:8px
  }
  .route-info {
    left:12px;
    top:70px;
    max-width:190px;
    padding:16px
  }
  .map-to-sea {
    top:15px;
    right:12px
  }
  .map-note {
    font-size:7px;
    bottom:18px;
    left:12px
  }
  .map-link {
    right:12px;
    bottom:42px;
    font-size:8px
  }
  .tour-location-caption {
    max-width:55%;
    font-size:8px
  }
  .sea-compass {
    top:66px;
    font-size:8px
  }
  .tour-toolbar {
    gap:15px;
    align-items:flex-end
  }
  .tour-toolbar h3 {
    font-size:25px
  }
  .tour-toolbar p {
    font-size:7px;
    max-width:190px
  }
  .masterplan .map-instruction {
    font-size:8px;
    max-width:175px
  }
  .masterplan-legend {
    font-size:7px
  }
  .masterplan-legend span {
    max-width:105px;
    text-align:right
  }
  .home-card {
    max-height:calc(100% - 160px);
    overflow:auto
  }
  .zoom-controls {
    top:115px
  }
  .plan-mode {
    top:15px
  }
  .location-head h2 {
    font-size:48px
  }
  
}
 .location-map .map-note {
  left:16px;
  right:auto;
  bottom:14px;
  background:transparent;
  padding:0;
  font-size:7px
}
.location-map .map-link {
  bottom:18px;
  right:18px;
  padding:8px 0;
  background:transparent
}
.location-map .area-point {
  transform:translate(-50%,-50%);
  min-width:44px;
  min-height:44px
}
.location-map .area-point:hover,.location-map .area-point.active {
  transform:translate(-50%,-50%) scale(1.15)
}
.location-map .map-pin {
  left:84%;
  top:14%;
  width:48px;
  height:48px;
  font-size:30px
}
.map-pin>span {
  top:64px;
  font-size:8px
}
.home-picker {
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 5% 24px;
  font-size:9px
}
.home-picker select {
  font:11px Mono;
  background:transparent;
  color:var(--ink);
  padding:12px;
  border:1px solid var(--line);
  min-width:200px;
  border-radius:0
}
.route-info {
  max-width:220px
}
.location-map .map-to-sea {
  left:18px;
  right:auto;
  top:18px
}
.location-map .route-info {
  top:85px
}
.contact-form input {
  font-size:16px
}
.panorama h2 {
  overflow-wrap:anywhere
}
 @media(max-width:600px) {
  .location-map .map-note {
    bottom:12px;
    left:12px;
    font-size:6px
  }
  .location-map .map-link {
    bottom:35px;
    right:12px;
    font-size:8px
  }
  .location-map .map-pin {
    left:84%;
    top:18%;
    width:40px;
    height:40px
  }
  .location-map .map-pin>span {
    width:100px;
    top:57px;
    font-size:7px
  }
  .location-map .route-info {
    max-width:175px;
    top:75px;
    left:12px
  }
  .home-picker {
    display:block
  }
  .home-picker select {
    display:block;
    width:100%;
    margin-top:10px
  }
  .panorama h2 {
    font-size:clamp(36px,11vw,53px)
  }
  .narration-language,.home-extra button,#close-home {
    min-height:44px;
    min-width:44px
  }
  
}
  .location-map .area-point>span {
  top:46px;
  line-height:1.5
}
.location-map .map-pin>span {
  top:60px
}
  .location-map .map-pin {
  transform:translate(-50%,-50%);
  top:14%
}
  /* White / Ink / Cobalt — editorial coastal architecture. */ :root {
  --sand:#fff;
  --white:#fff;
  --ink:#263440;
  --line:#26344026;
  --accent:#526b80;
  --mist:#e3e8ec
}
body {
  background:#fff
}
em {
  color:var(--accent)
}
.category-links button.active,.interior-tabs [aria-selected=true] {
  color:var(--accent)
}
.category-links button,.interior-tabs button {
  min-height:44px
}
.segmented button.active {
  background:#ffffff33
}
.contact-form {
  background:var(--mist)
}
.map-pin,.area-point {
  background:var(--ink)
}
.map-pin:hover,.area-point.active {
  background:var(--accent)
}
.route-path {
  stroke:var(--accent)
}
.location-map:after {
  box-shadow:inset 0 0 50px #26344008
}
.route-info {
  background:#ffffffed;
  border:1px solid var(--line);
  backdrop-filter:blur(8px);
  width:220px
}
.route-info>img {
  height:90px;
  object-fit:cover;
  margin-bottom:14px
}
.route-info h3 {
  font-size:25px
}
.location-map {
  border:1px solid var(--line);
  background:#fff
}
.location-map .map-link {
  background:#fff;
  padding:8px
}
.places {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px 28px;
  margin-top:28px
}
.places button {
  padding:0 0 22px
}
.places button>img {
  height:190px;
  margin-bottom:20px;
  transition:transform .5s
}
.places button:hover>img {
  filter:brightness(.94)
}
.places h3 {
  font-size:30px;
  margin-top:12px
}
.places button>span:last-child {
  bottom:24px
}
.journal-head {
  gap:30px
}
.journal-switch {
  display:flex;
  gap:24px;
  font-size:10px
}
.journal-switch button {
  min-height:44px;
  border-bottom:1px solid transparent;
  opacity:.5
}
.journal-switch button.active {
  opacity:1;
  color:var(--accent);
  border-color:var(--accent)
}
.journal-intro {
  font-size:11px;
  max-width:530px;
  margin:-20px 0 42px;
  line-height:1.8
}
.journal-grid[hidden] {
  display:none
}
.journal-read {
  display:inline-block;
  margin-top:24px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
  font-size:9px
}
.journal-grid img {
  height:330px
}
.journal-grid h3 {
  font-size:40px;
  line-height:1.08
}
.interior-tabs {
  gap:26px;
  flex-wrap:wrap
}
.interior-expand {
  position:absolute;
  right:22px;
  top:22px;
  z-index:2;
  color:#263440;
  background:#fffffff2;
  padding:14px 18px;
  font-size:9px;
  min-height:44px
}
.floor-tabs button.active {
  color:var(--accent)
}
.plan-room.selected-room>rect {
  fill:#526b8018
}
.lot.selected polygon {
  fill:#526b8055;
  stroke:#526b80
}
.sketch-view .lot.selected circle {
  fill:#526b80;
  stroke:white
}
.narration-play:hover {
  background:var(--accent);
  border-color:var(--accent)
}
.footer-bottom {
  color:#526b80
}
.architecture-sketch {
  background:#f5f6f7
}
.voice-options select {
  background:white;
  color:var(--ink)
}
 @media(max-width:900px) {
  .journal-grid img {
    height:240px
  }
  .journal-grid h3 {
    font-size:31px
  }
  .journal-head {
    align-items:flex-start
  }
  .journal-switch {
    gap:14px
  }
  
}
 @media(max-width:600px) {
  .places {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 14px
  }
  .places button>img {
    height:145px;
    margin-bottom:15px
  }
  .places h3 {
    font-size:25px;
    padding-right:16px;
    overflow-wrap:normal
  }
  .places button>span:last-child {
    right:0;
    font-size:17px
  }
  .places .eyebrow {
    font-size:8px
  }
  .location-map {
    height:440px
  }
  .location-map .route-info {
    top:75px;
    max-width:154px;
    padding:12px
  }
  .route-info>img {
    height:70px;
    margin-bottom:9px
  }
  .route-info h3 {
    font-size:22px
  }
  .route-info .eyebrow {
    font-size:7px
  }
  .location-map .area-point {
    min-width:36px;
    min-height:36px
  }
  .location-map .area-point>span {
    font-size:6px;
    top:36px
  }
  .location-map .map-pin {
    width:36px;
    height:36px;
    font-size:24px
  }
  .location-map .map-pin>span {
    font-size:6px;
    top:48px
  }
  .journal-head {
    display:block
  }
  .journal-switch {
    margin-top:22px;
    justify-content:space-between;
    font-size:9px
  }
  .journal-intro {
    margin:0 0 30px
  }
  .journal-grid img {
    height:300px
  }
  .journal-grid h3 {
    font-size:40px
  }
  .interior-tabs {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px 10px
  }
  .interior-tabs button {
    font-size:8px;
    white-space:nowrap
  }
  .interior-expand {
    right:12px;
    top:12px;
    padding:12px;
    font-size:8px
  }
  
}
  /* Almost-white paper, natural olive accents, readable text stories. */ :root {
  --sand:#f5f6f7;
  --white:#fff;
  --ink:#263440;
  --line:#2634402b;
  --accent:#526b80;
  --mist:#e3e8ec
}
body {
  background:var(--sand)
}
.location-map,.location-map .map-link,.route-info,.dialog-toolbar .dialog-close,dialog {
  background:var(--sand)
}
.architecture-sketch {
  background:#e3e8ec
}
.contact-form {
  background:var(--mist)
}
em {
  color:#526b80
}
.story-reader {
  grid-column:2;
  margin-top:26px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:18px 0;
  min-width:0;
  max-width:100%
}
.story-actions {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}
.story-toggle,.story-language {
  font-size:10px;
  min-height:44px;
  text-align:left
}
.story-toggle {
  color:var(--ink)
}
.story-language {
  color:#526b80;
  white-space:nowrap
}
.story-text {
  font-size:12px;
  line-height:1.9;
  max-width:650px;
  margin:10px 0 18px
}
.story-text[hidden] {
  display:none
}
.floor-story {
  margin:0 0 28px
}
.floor-story .story-text {
  max-width:none
}
.story-toggle:hover,.story-language:hover {
  color:#41596e
}
.story-toggle:focus-visible,.story-language:focus-visible {
  outline:2px solid #526b80;
  outline-offset:4px
}
.floor-content .plan-svg .draw-path {
  animation:draw-architecture 2.6s ease forwards
}
 @media(max-width:600px) {
  .story-reader {
    margin-top:22px;
    padding:10px 0
  }
  .story-toggle,.story-language {
    font-size:9px
  }
  .story-text {
    font-size:11px
  }
  .floor-story {
    margin-bottom:25px
  }
  .home-extra {
    gap:12px
  }
  
}