/* Foundations */
:root{
  --green:#193c34;
  --green-deep:#132e29;
  --sand:#f5f2e9;
  --paper:#fcfaf5;
  --ink:#223e35;
  --muted:#5c6b61;
  --terracotta:#a34d32;
  --line:#d7dbcf;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans',Arial,sans-serif;
  --radius:3px
}
*,*::before,*::after{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.75
}
body.modal-open{
  overflow:hidden
}
button,input{
  font:inherit
}
button,a,input{
  -webkit-tap-highlight-color:transparent
}
button{
  cursor:pointer
}
a{
  color:inherit;
  text-decoration:none
}
img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}
figure,p,h1,h2,h3{
  margin:0
}
p+p{
  margin-top:18px
}
h1,h2,h3{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.03;
  letter-spacing:-.035em
}
h2{
  font-size:clamp(44px,5.3vw,76px)
}
h3{
  font-size:34px
}
em{
  font-weight:400
}
svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
.svg-library{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.container{
  width:min(1240px,calc(100% - 112px));
  margin-inline:auto
}
.section{
  padding-block:110px
}
.eyebrow{
  display:block;
  font-family:var(--sans);
  font-size:10px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.19em;
  text-transform:uppercase
}
.eyebrow.dark{
  color:#526a58
}
h2 .eyebrow{
  margin-bottom:20px
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  min-height:54px;
  padding:16px 24px;
  font-family:var(--sans);
  font-size:12px;
  font-weight:550;
  line-height:1.4;
  border:1px solid transparent;
  border-radius:var(--radius);
  transition:background .25s,color .25s,transform .25s
}
.button svg{
  width:19px;
  height:19px
}
.button:hover{
  transform:translateY(-2px)
}
.button-sand{
  background:var(--sand);
  color:var(--green)
}
.button-sand:hover{
  background:#e6e1cf
}
.button-green{
  background:var(--green);
  color:white
}
.button-green:hover{
  background:#295447
}
.button-outline{
  border-color:#829a8e;
  color:var(--sand);
  background:transparent
}
.button-outline:hover{
  background:#2b5145
}
.button-small{
  padding:13px 17px;
  min-height:44px;
  font-size:11px
}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:24px;
  font-size:12px;
  font-weight:600;
  border-bottom:1px solid var(--ink);
  padding:0 0 9px;
  line-height:1.5
}
.text-link svg{
  width:18px;
  height:18px;
  transition:transform .25s
}
.text-link:hover svg{
  transform:translateX(4px)
}
:focus-visible{
  outline:3px solid #c67a45;
  outline-offset:5px
}
.skip-link{
  position:fixed;
  z-index:100;
  top:8px;
  left:8px;
  background:var(--paper);
  color:var(--green);
  padding:12px 20px;
  transform:translateY(-160%)
}
.skip-link:focus{
  transform:translateY(0)
}
.section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:60px;
  margin-bottom:45px
}
.section-heading .eyebrow{
  margin-bottom:19px
}
.section-heading>p{
  max-width:340px;
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
  padding-bottom:5px
}
.number{
  font-size:11px;
  color:var(--terracotta);
  letter-spacing:.1em
}
.reveal{
  opacity:1
}
.motion-ready .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s,transform .7s
}
.motion-ready .reveal.visible{
  opacity:1;
  transform:none
}
/* Header and landscape */
.site-header{
  height:100px;
  position:absolute;
  z-index:30;
  top:0;
  left:0;
  width:100%;
  padding:0 4%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--paper);
  border-bottom:1px solid #ffffff30;
  transition:background .3s,height .3s
}
.js-ready .site-header{
  position:fixed
}
.site-header.scrolled,.site-header.menu-open{
  height:80px;
  background:var(--sand);
  color:var(--green);
  border-bottom-color:var(--line)
}
.wordmark{
  display:flex;
  gap:12px;
  align-items:center;
  line-height:1;
  font-family:var(--serif);
  font-size:29px;
  letter-spacing:-.035em;
  white-space:nowrap
}
.wordmark small{
  display:block;
  text-align:center;
  margin-top:9px;
  font-family:var(--sans);
  font-size:8px;
  font-weight:500;
  letter-spacing:.27em
}
.brand-mark svg{
  width:46px;
  height:38px;
  stroke-width:1.15
}
.main-nav{
  display:flex;
  gap:29px;
  align-items:center;
  font-size:11px
}
.main-nav>a:not(.button){
  padding-block:12px;
  border-bottom:1px solid transparent
}
.main-nav>a:not(.button):hover{
  border-color:currentColor
}
.nav-cta{
  border-color:#ffffff7a;
  margin-left:7px
}
.scrolled .nav-cta,.menu-open .nav-cta{
  background:var(--green);
  color:var(--sand);
  border-color:var(--green)
}
.menu-toggle{
  display:none
}
.hero{
  position:relative;
  isolation:isolate;
  color:var(--paper);
  height:100svh;
  min-height:720px;
  max-height:1150px;
  display:flex;
  align-items:center;
  background:#243e36
}
.hero-image,.hero-shade{
  position:absolute;
  inset:0;
  z-index:-2
}
.hero-image{
  object-position:center 20%
}
.hero-shade{
  z-index:-1;
  background:linear-gradient(90deg,rgba(11,31,25,.65),rgba(12,32,27,.18) 75%),linear-gradient(0deg,rgba(9,28,23,.6),transparent 26%,transparent 74%,rgba(9,28,23,.38))
}
.hero-content{
  padding-top:90px;
  padding-bottom:100px
}
.hero .eyebrow{
  font-size:10px;
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:27px;
  color:#f1f0df
}
.hero .eyebrow>span{
  width:25px;
  height:1px;
  background:#d8d1ab
}
.hero h1{
  font-size:clamp(68px,7.7vw,116px);
  line-height:.99;
  letter-spacing:-.035em;
  max-width:850px;
  text-shadow:0 2px 24px #15282030
}
.hero h1 em{
  color:#e4dab6
}
.hero-content>p:not(.eyebrow){
  font-size:14px;
  font-weight:400;
  margin-top:27px;
  color:#f1f1e9
}
.hero .button{
  margin-top:32px;
  min-width:241px
}
.hero-bottom{
  position:absolute;
  bottom:36px;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:.16em
}
.scroll-cue{
  display:flex;
  align-items:center;
  gap:14px
}
.scroll-line{
  height:38px;
  width:1px;
  background:#f2efdc80
}
.hero-note{
  font-family:var(--serif);
  font-size:19px;
  font-style:italic;
  letter-spacing:0
}
.hero-index{
  font-size:9px
}
.place-strip{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:44px;
  min-height:84px;
  border-bottom:1px solid var(--line);
  font-family:var(--serif);
  font-size:22px
}
.place-strip i{
  width:4px;
  height:4px;
  border-radius:50%;
  background:#aa7957
}
/* A place to stay */
.about{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:110px;
  padding-block:130px
}
.about-copy .eyebrow{
  margin-bottom:22px
}
.about-copy>p:not(.eyebrow){
  max-width:430px;
  color:var(--muted);
  font-size:14px;
  margin-top:28px
}
.about-copy>p+p:not(.eyebrow){
  margin-top:14px
}
.qualities{
  display:flex;
  gap:24px;
  margin-top:37px;
  border-top:1px solid var(--line);
  padding-top:28px
}
.qualities span{
  font-size:9px;
  line-height:1.5;
  display:flex;
  flex-direction:column;
  gap:11px;
  white-space:nowrap
}
.qualities svg{
  height:25px;
  width:25px;
  color:#718568
}
.about-image{
  position:relative;
  min-width:0
}
.about-image>img{
  aspect-ratio:4/4.7;
  height:auto;
  object-position:center;
  border-radius:var(--radius)
}
.about-image figcaption{
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-top:15px;
  color:var(--muted);
  font-size:9px
}
.about-image figcaption span:first-child{
  letter-spacing:.12em;
  font-size:8px
}
.photo-label{
  position:absolute;
  left:-45px;
  bottom:45px;
  width:145px;
  height:145px;
  background:var(--green);
  color:var(--sand);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  font-family:var(--serif);
  font-size:29px;
  line-height:.95;
  transform:rotate(-9deg)
}
.photo-label em{
  font-size:30px
}
.stays{
  background:#ebece2
}
.stay-card{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  background:var(--paper);
  border-radius:var(--radius);
  overflow:hidden
}
.stay-photo{
  position:relative;
  min-height:470px
}
.stay-photo img{
  object-position:center
}
.image-tag{
  position:absolute;
  top:23px;
  left:23px;
  background:var(--sand);
  padding:7px 12px;
  font-size:8px;
  letter-spacing:.12em
}
.stay-content{
  padding:55px 50px;
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  justify-content:center
}
.stay-content .eyebrow{
  font-size:9px;
  margin-bottom:18px
}
.stay-content h3{
  font-size:42px
}
.stay-content>p{
  color:var(--muted);
  font-size:13px;
  margin-top:18px
}
.stay-details{
  margin:23px 0 27px;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
  width:100%
}
.stay-details li{
  font-size:11px;
  padding:11px 0;
  border-bottom:1px solid var(--line)
}
.stay-details li::before{
  content:'+';
  color:#718568;
  margin-right:12px
}
.stay-content small{
  font-size:9px;
  line-height:1.7;
  color:var(--muted);
  margin-top:20px;
  max-width:290px
}
/* Structure and restaurant */
.bento{
  display:grid;
  grid-template-columns:1fr .6fr 1fr;
  grid-template-rows:280px 260px;
  gap:18px
}
.image-panel{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:var(--paper);
  border-radius:var(--radius)
}
.image-panel>img{
  position:absolute;
  inset:0;
  z-index:-2;
  transition:transform .6s
}
.image-panel::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#0a241fd9,transparent 80%);
  z-index:-1
}
.image-panel:hover>img{
  transform:scale(1.025)
}
.image-panel>div{
  position:absolute;
  inset:auto 30px 30px
}
.bento-pool{
  grid-column:1/3;
  grid-row:1/3
}
.bento-pool h3{
  font-size:52px;
  margin-top:15px
}
.bento-pool p{
  font-size:12px;
  color:#e2e8dc;
  margin-top:15px
}
.bento-breakfast{
  background:#e9e6d8;
  padding:0;
  border-radius:var(--radius);
  overflow:hidden;
  display:grid;
  grid-template-rows:110px 1fr
}
.bento-breakfast>img{
  min-height:0;
  object-position:center 35%
}
.breakfast-copy{
  padding:17px 24px
}
.feature-icon{
  width:28px;
  height:28px;
  color:#57705c;
  margin-bottom:15px
}
.bento-breakfast .eyebrow{
  font-size:8px;
  margin-bottom:9px
}
.bento-breakfast h3{
  font-size:30px
}
.bento-breakfast p{
  font-size:12px;
  margin-top:11px;
  line-height:1.7
}
.detail-note{
  display:block;
  font-size:9px;
  color:var(--muted);
  margin-top:15px
}
.bento-restaurant{
  grid-column:3;
  grid-row:2
}
.bento-restaurant h3{
  font-size:29px;
  margin-top:10px
}
.bento-restaurant a{
  display:flex;
  gap:15px;
  align-items:center;
  font-size:10px;
  margin-top:15px
}
.bento-restaurant a svg{
  width:17px
}
.bento-info{
  grid-column:1/4;
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:30px;
  padding:22px 30px
}
.bento-info .feature-icon{
  margin:0
}
.bento-info h3{
  font-size:26px;
  max-width:180px
}
.bento-info p{
  font-size:12px;
  color:var(--muted);
  max-width:430px
}
.bento-info .text-link{
  margin-left:auto;
  white-space:nowrap;
  font-size:11px
}
.structure{
  padding-bottom:160px
}
.visits{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--green);
  color:var(--sand);
  min-height:660px
}
.visits-photo img{
  min-height:660px;
  max-height:780px
}
.visits-copy{
  padding:80px clamp(35px,6.5vw,100px);
  align-self:center
}
.visits-copy .eyebrow{
  color:#c2cdb6;
  margin-bottom:23px
}
.visits-copy h2{
  font-size:clamp(50px,5.1vw,74px)
}
.visits-copy>p:not(.eyebrow){
  font-size:13px;
  color:#d8e1d5;
  max-width:370px;
  margin-top:27px
}
.visits-copy>p+p:not(.eyebrow){
  margin-top:15px
}
.visits-copy .button{
  margin-top:30px;
  font-size:11px
}
/* Around Puruba and gallery */
.experience-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px
}
.experience-feature>img{
  aspect-ratio:1.7;
  height:auto;
  border-radius:var(--radius)
}
.experience-feature>div{
  display:grid;
  grid-template-columns:24px 1fr;
  gap:13px 18px;
  margin-top:24px
}
.experience-feature h3{
  font-size:34px
}
.experience-feature p{
  grid-column:2;
  color:var(--muted);
  font-size:13px;
  max-width:410px
}
.experience-list article{
  display:flex;
  gap:20px;
  padding:32px 0;
  border-top:1px solid var(--line)
}
.experience-list article:last-child{
  border-bottom:1px solid var(--line)
}
.experience-list .number{
  margin-top:6px
}
.experience-list h3{
  font-size:32px
}
.experience-list p{
  font-size:13px;
  color:var(--muted);
  margin-top:15px
}
.experience-list small{
  display:block;
  color:var(--muted);
  font-size:10px;
  line-height:1.8;
  margin-top:14px
}
.experience-list>article>svg{
  width:28px;
  height:28px;
  margin-left:auto;
  color:#75876b
}
.gallery{
  background:#e9ece2
}
.gallery .section-heading{
  align-items:center
}
.gallery-hint{
  display:flex;
  align-items:center;
  gap:15px;
  font-size:8px;
  letter-spacing:.12em
}
.gallery-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:15px;
  grid-auto-rows:290px
}
.gallery-item{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius)
}
.gallery-item img{
  transition:transform .6s
}
.gallery-item:hover img{
  transform:scale(1.035)
}
.gallery-item>span{
  position:absolute;
  inset:auto 0 0;
  padding:40px 20px 15px;
  display:flex;
  justify-content:space-between;
  color:white;
  font-size:11px;
  background:linear-gradient(transparent,#142e29aa)
}
.gallery-item b{
  font-weight:400
}
.gallery-item:last-child{
  grid-column:2/4
}
.photo-source{
  font-size:9px;
  color:var(--muted);
  margin-top:19px
}
.location{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:90px;
  align-items:center
}
.location .eyebrow{
  margin-bottom:22px
}
.location-copy>p:not(.eyebrow){
  font-size:13px;
  color:var(--muted);
  margin-top:25px;
  max-width:350px
}
.location-address{
  display:flex;
  gap:12px;
  align-items:center;
  color:var(--green)!important
}
.location-address svg{
  width:18px;
  height:18px
}
.access-note{
  border-left:2px solid #809174;
  padding-left:20px;
  margin:28px 0;
  font-size:12px;
  max-width:365px
}
.access-note p{
  font-size:11px;
  line-height:1.8;
  color:var(--muted);
  margin-top:8px
}
.map-wrap{
  height:490px;
  background:#dfe5d8;
  border-radius:var(--radius);
  overflow:hidden
}
.map-wrap iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
  filter:saturate(.65)
}
/* Inquiry and footer */
.inquiry{
  background:var(--green);
  color:var(--sand);
  position:relative;
  overflow:hidden
}
.inquiry::before{
  content:'';
  position:absolute;
  left:-100px;
  bottom:-340px;
  width:800px;
  height:800px;
  border:1px solid #89a28d1c;
  border-radius:50%;
  pointer-events:none
}
.inquiry-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:120px;
  align-items:center
}
.inquiry-copy .eyebrow{
  color:#c2cdb6;
  margin-bottom:27px
}
.inquiry h2{
  font-size:clamp(60px,6.8vw,94px)
}
.inquiry h2 em{
  color:#d5d2ad
}
.inquiry-copy>p:not(.eyebrow){
  color:#d1dcce;
  font-size:13px;
  max-width:320px;
  margin-top:28px
}
.contact-phone{
  display:inline-flex;
  align-items:center;
  gap:13px;
  font-size:16px;
  margin-top:29px
}
.contact-phone svg{
  width:24px;
  height:24px
}
.inquiry-form{
  background:var(--paper);
  color:var(--green);
  padding:42px;
  border-radius:var(--radius)
}
.inquiry-form h3{
  font-size:33px
}
.inquiry-form>p{
  font-size:11px;
  color:var(--muted);
  margin-top:8px;
  margin-bottom:25px
}
.inquiry-form label{
  display:block;
  font-size:10px;
  font-weight:550;
  line-height:1.5;
  margin-bottom:19px
}
.inquiry-form input{
  width:100%;
  height:47px;
  border:1px solid #ccd3c4;
  background:transparent;
  color:var(--ink);
  padding:10px 12px;
  font-size:12px;
  border-radius:2px;
  margin-top:7px;
  min-width:0
}
.inquiry-form input::placeholder{
  color:#6c766d
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px
}
.inquiry-form .button{
  width:100%;
  margin-top:3px
}
.inquiry-form small{
  display:block;
  color:var(--muted);
  font-size:9px;
  line-height:1.9;
  margin-top:18px
}
.inquiry-form .form-feedback{
  color:#9c3b24;
  margin:0 0 12px;
  font-size:11px
}
.inquiry-form .form-feedback:empty{
  display:none
}
.site-footer{
  background:var(--green-deep);
  color:var(--sand);
  padding:60px 0 22px
}
.footer-top{
  display:grid;
  grid-template-columns:1.1fr .8fr 1.1fr;
  gap:30px;
  align-items:start;
  padding-bottom:50px
}
.footer-top .wordmark{
  font-size:29px
}
.footer-top>p{
  font-family:var(--serif);
  font-size:24px;
  line-height:1.2;
  color:#c5cdb6
}
.footer-contact{
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:11px;
  align-items:flex-start
}
.footer-contact a:hover{
  text-decoration:underline
}
.footer-contact span{
  margin-left:6px
}
.footer-bottom{
  border-top:1px solid #ffffff20;
  padding-top:23px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#c0cbbf;
  font-size:8px
}
.footer-bottom a{
  white-space:nowrap
}
.floating-wa{
  display:none
}
/* Without JS, offer the direct WhatsApp link instead of an incomplete form. */
html:not(.js-ready) .inquiry-form> :not(noscript):not(h3){
  display:none
}
html:not(.js-ready) .inquiry-form noscript a{
  text-decoration:underline
}
/* Photo dialog */
.lightbox{
  padding:50px 65px;
  border:0;
  background:transparent;
  color:var(--sand);
  width:min(1200px,96vw);
  max-width:96vw;
  max-height:96svh;
  overflow:visible
}
.lightbox::backdrop{
  background:#071d19f2
}
.lightbox figure img{
  height:75svh;
  max-height:800px;
  object-fit:contain
}
.lightbox figcaption{
  font-size:12px;
  text-align:center;
  margin-top:14px
}
.lightbox button{
  position:absolute;
  color:var(--sand);
  background:var(--green);
  border:1px solid #a8baaa70;
  border-radius:50%;
  width:42px;
  height:42px;
  font-size:22px;
  line-height:1
}
.lightbox-close{
  right:12px;
  top:0
}
.lightbox-prev{
  left:4px;
  top:45%
}
.lightbox-next{
  right:4px;
  top:45%
}
@media(min-width:1600px){
  .hero-content{
    padding-top:65px
  }
  .site-header{
    padding-inline:max(4%,calc((100vw - 1380px)/2))
  }
}
@media(max-width:1180px){
  .container{
    width:calc(100% - 80px)
  }
  .main-nav{
    gap:17px;
    font-size:10px
  }
  .brand-mark{
    display:none
  }
  .wordmark{
    font-size:26px
  }
  .site-header{
    padding-inline:35px
  }
  .about{
    gap:65px
  }
  .stay-content{
    padding:40px 35px
  }
  .inquiry-grid{
    gap:65px
  }
  .bento-info{
    gap:20px
  }
  .bento-info p{
    max-width:340px
  }
  .location{
    gap:50px
  }
  .qualities{
    gap:17px
  }
  .footer-top .wordmark{
    font-size:25px
  }
}
@media(max-width:960px){
  .main-nav{
    gap:14px
  }
  .main-nav>a:not(.button){
    font-size:10px
  }
  .nav-cta{
    gap:15px;
    font-size:9px;
    padding:12px
  }
  .site-header{
    padding-inline:25px
  }
  .wordmark{
    font-size:24px
  }
  .hero h1{
    font-size:88px
  }
  .section{
    padding-block:85px
  }
  .about{
    gap:55px
  }
  .about-copy h2{
    font-size:54px
  }
  .qualities{
    flex-wrap:wrap
  }
  .photo-label{
    width:120px;
    height:120px;
    left:-28px;
    font-size:25px
  }
  .section-heading>p{
    max-width:280px
  }
  .bento{
    grid-template-columns:1fr 1fr;
    grid-template-rows:330px 260px
  }
  .bento-pool{
    grid-column:1;
    grid-row:1/3
  }
  .bento-breakfast{
    grid-column:2
  }
  .bento-restaurant{
    grid-column:2
  }
  .bento-info{
    grid-column:1/3;
    flex-wrap:wrap
  }
  .bento-info h3{
    max-width:none
  }
  .bento-info p{
    max-width:100%;
    flex:1 0 50%
  }
  .structure{
    padding-bottom:180px
  }
  .visits-copy{
    padding:60px 40px
  }
  .visits{
    min-height:610px
  }
  .visits-photo img{
    min-height:610px
  }
  .experience-grid{
    gap:40px
  }
  .gallery-grid{
    grid-auto-rows:230px
  }
  .inquiry-grid{
    gap:45px
  }
  .inquiry-form{
    padding:30px
  }
  .footer-top{
    grid-template-columns:1fr 1fr
  }
  .footer-top>p{
    display:none
  }
  .footer-contact{
    justify-self:end
  }
}
@media(max-width:760px){
  html{
    scroll-padding-top:82px
  }
  .container{
    width:calc(100% - 44px)
  }
  .section{
    padding-block:70px
  }
  .site-header,.site-header.scrolled{
    height:76px;
    padding-inline:22px
  }
  .brand-mark{
    display:block
  }
  .brand-mark svg{
    width:35px;
    height:30px
  }
  .wordmark{
    font-size:24px;
    gap:8px
  }
  .wordmark small{
    font-size:6px;
    margin-top:7px
  }
  .menu-toggle{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    width:42px;
    height:42px;
    background:transparent;
    border:1px solid #ffffff60;
    border-radius:2px;
    color:inherit;
    padding:10px
  }
  .menu-toggle span{
    display:block;
    width:20px;
    height:1px;
    background:currentColor;
    transition:transform .2s
  }
  .scrolled .menu-toggle,.menu-open .menu-toggle{
    border-color:var(--line)
  }
  .menu-open .menu-toggle span:first-child{
    transform:translateY(3.5px) rotate(45deg)
  }
  .menu-open .menu-toggle span:last-child{
    transform:translateY(-3.5px) rotate(-45deg)
  }
  .main-nav{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    position:absolute;
    top:76px;
    left:0;
    width:100%;
    background:var(--sand);
    color:var(--green);
    padding:24px;
    gap:4px;
    border-bottom:1px solid var(--line)
  }
  .js-ready .main-nav{
    display:none
  }
  .js-ready .menu-open .main-nav{
    display:flex
  }
  .main-nav>a:not(.button){
    font-size:14px;
    padding:12px
  }
  .nav-cta{
    margin:10px 0 0;
    font-size:12px;
    background:var(--green);
    color:var(--sand);
    justify-content:space-between;
    padding:16px
  }
  .hero{
    min-height:720px;
    max-height:950px
  }
  .hero-content{
    padding-top:140px;
    padding-bottom:100px
  }
  .hero h1{
    font-size:clamp(64px,10.8vw,88px);
    line-height:1.03
  }
  .hero .eyebrow{
    font-size:8px;
    letter-spacing:.16em;
    margin-bottom:25px
  }
  .hero .eyebrow>span{
    width:18px
  }
  .hero-content>p:not(.eyebrow){
    font-size:13px;
    max-width:270px;
    margin-top:25px
  }
  .hero-image{
    object-position:55% 25%
  }
  .hero-shade{
    background:linear-gradient(90deg,#122c26ae,#122c2645),linear-gradient(0deg,#10291fb3,transparent 40%,#10291f30)
  }
  .hero-bottom{
    bottom:26px
  }
  .hero-note{
    display:none
  }
  .hero-index{
    font-size:8px
  }
  .scroll-cue{
    font-size:8px;
    gap:10px
  }
  .place-strip{
    gap:20px;
    font-size:17px;
    min-height:70px
  }
  .place-strip span:last-child,.place-strip i:last-of-type{
    display:none
  }
  .about{
    grid-template-columns:1fr;
    gap:45px;
    padding-block:75px
  }
  .about-copy h2{
    font-size:57px
  }
  .about-copy>p:not(.eyebrow){
    font-size:14px;
    max-width:520px
  }
  .qualities{
    justify-content:space-between;
    max-width:430px
  }
  .qualities span{
    font-size:10px
  }
  .about-image{
    margin-left:25px
  }
  .about-image>img{
    aspect-ratio:1.1;
    max-height:500px
  }
  .photo-label{
    width:120px;
    height:120px;
    left:-25px;
    bottom:45px
  }
  .section-heading{
    display:block;
    margin-bottom:33px
  }
  .section-heading h2{
    font-size:54px
  }
  .section-heading>p{
    max-width:470px;
    margin-top:24px;
    padding:0;
    font-size:13px
  }
  .stay-card{
    grid-template-columns:1fr
  }
  .stay-photo{
    min-height:0;
    aspect-ratio:1.25
  }
  .stay-content{
    padding:35px 28px
  }
  .stay-content h3{
    font-size:39px
  }
  .stay-content small{
    max-width:100%
  }
  .stay-details li{
    font-size:11px
  }
  .bento{
    grid-template-columns:1fr 1fr;
    grid-template-rows:370px auto auto;
    gap:12px
  }
  .bento-pool{
    grid-column:1/3;
    grid-row:1
  }
  .image-panel>div{
    left:24px;
    bottom:24px;
    right:24px
  }
  .bento-pool h3{
    font-size:45px
  }
  .bento-breakfast{
    grid-column:1;
    grid-row:2;
    padding:0;
    grid-template-rows:120px 1fr
  }
  .breakfast-copy{
    padding:18px
  }
  .bento-breakfast .eyebrow{
    font-size:7px
  }
  .bento-breakfast h3{
    font-size:28px
  }
  .bento-breakfast p{
    font-size:11px
  }
  .bento-restaurant{
    grid-column:2;
    grid-row:2;
    min-height:290px
  }
  .bento-restaurant>div{
    left:18px;
    right:15px;
    bottom:23px
  }
  .bento-restaurant h3{
    font-size:29px
  }
  .bento-restaurant .eyebrow{
    font-size:7px
  }
  .bento-restaurant a{
    font-size:10px;
    line-height:1.8;
    gap:7px
  }
  .bento-info{
    grid-column:1/3;
    grid-row:3;
    padding:23px;
    gap:18px
  }
  .bento-info h3{
    font-size:25px
  }
  .bento-info p{
    flex:1 0 100%;
    font-size:12px
  }
  .bento-info .text-link{
    margin:0
  }
  .structure{
    padding-bottom:70px
  }
  .visits{
    grid-template-columns:1fr;
    min-height:0
  }
  .visits-photo{
    height:370px
  }
  .visits-photo img{
    min-height:0;
    max-height:none
  }
  .visits-copy{
    padding:60px 28px 65px
  }
  .visits-copy h2{
    font-size:61px
  }
  .visits-copy>p:not(.eyebrow){
    max-width:500px
  }
  .visits-copy h2 br:nth-child(2){
    display:none
  }
  .experience-grid{
    grid-template-columns:1fr;
    gap:37px
  }
  .experience-list article{
    padding-block:27px
  }
  .experience-list h3{
    font-size:30px
  }
  .gallery .section-heading h2{
    font-size:49px
  }
  .gallery-hint{
    margin-top:22px;
    font-size:8px
  }
  .gallery-grid{
    grid-template-columns:1fr 1fr;
    grid-auto-rows:230px;
    gap:12px
  }
  .gallery-item:first-child{
    grid-column:1/3
  }
  .gallery-item:last-child{
    grid-column:1/3
  }
  .gallery-item:nth-child(4){
    display:none
  }
  .gallery-item span{
    font-size:10px;
    padding-inline:15px
  }
  .location{
    grid-template-columns:1fr;
    gap:35px
  }
  .location h2{
    font-size:55px
  }
  .map-wrap{
    height:360px
  }
  .location-copy>p:not(.eyebrow),.access-note{
    max-width:100%
  }
  .inquiry-grid{
    grid-template-columns:1fr;
    gap:40px
  }
  .inquiry-copy h2{
    font-size:74px
  }
  .inquiry-copy>p:not(.eyebrow){
    max-width:420px
  }
  .inquiry h2 br:nth-child(2){
    display:none
  }
  .inquiry-form{
    padding:30px 24px
  }
  .inquiry-form h3{
    font-size:31px
  }
  .inquiry-form input{
    font-size:16px;
    height:49px;
    padding:10px
  }
  .inquiry-form label{
    font-size:11px
  }
  .inquiry-form small{
    font-size:10px
  }
  .form-row{
    gap:12px
  }
  .site-footer{
    padding-top:48px;
    padding-bottom:85px
  }
  .footer-top{
    grid-template-columns:1fr;
    gap:30px;
    padding-bottom:30px
  }
  .footer-contact{
    justify-self:start;
    font-size:11px;
    max-width:100%;
    overflow-wrap:anywhere
  }
  .footer-top .wordmark{
    font-size:30px
  }
  .footer-bottom{
    flex-wrap:wrap;
    gap:15px;
    font-size:9px
  }
  .footer-bottom span:nth-child(2){
    order:3;
    width:100%
  }
  .floating-wa{
    display:flex;
    align-items:center;
    justify-content:center;
    position:fixed;
    z-index:25;
    right:18px;
    bottom:18px;
    width:52px;
    height:52px;
    background:var(--green);
    color:white;
    border-radius:50%;
    border:1px solid #c9d2bd;
    box-shadow:0 4px 15px #122c2622
  }
  .floating-wa svg{
    width:27px;
    height:27px
  }
  .lightbox{
    width:100%;
    max-width:100%;
    padding:50px 30px
  }
  .lightbox figure img{
    height:65svh
  }
  .lightbox button{
    width:34px;
    height:34px
  }
  .lightbox-prev{
    left:2px
  }
  .lightbox-next{
    right:2px
  }
  .lightbox-close{
    right:12px;
    top:0
  }
}
@media(max-width:380px){
  .wordmark{
    font-size:21px
  }
  .hero h1{
    font-size:63px
  }
  .hero .eyebrow{
    font-size:7px
  }
  .hero-index{
    display:none
  }
  .qualities{
    gap:13px
  }
  .qualities span{
    font-size:9px
  }
  .bento-breakfast{
    padding:0
  }
  .breakfast-copy{
    padding-inline:16px
  }
  .bento-info h3{
    font-size:23px
  }
  .bento-info .feature-icon{
    width:23px
  }
  .inquiry-form{
    padding:28px 18px
  }
  .inquiry-form h3{
    font-size:29px
  }
  .form-row{
    gap:8px
  }
  .form-row input{
    font-size:14px
  }
  .button{
    gap:18px
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *,*::before,*::after{
    animation:none!important;
    transition:none!important
  }
  .motion-ready .reveal{
    opacity:1;
    transform:none
  }
}