/* =========================================================
   Annapurna Residency — Assagao, North Goa
   Design & build: Skylance Tek
   ========================================================= */

:root{
  --ink:#16204A;
  --ink-2:rgba(22,32,74,.74);
  --ink-3:rgba(22,32,74,.55);
  --ink-4:rgba(22,32,74,.30);
  --ink-5:rgba(22,32,74,.14);
  --paper:#FBF8F3;
  --wash:#F4EDE2;
  --sand:#EADFCD;
  --terra:#C8622F;
  --gold:#B08D3F;
  --palm:#6F8F5B;
  --night:#0B1330;
  --white:#fff;

  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --script:'Parisienne',cursive;

  --ease:cubic-bezier(.22,1,.36,1);
  --gut:clamp(20px,4.4vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p,figure,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--ink);color:var(--paper)}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;padding:12px 18px}
.skip:focus{left:8px;top:8px}

/* ---------- shared type ---------- */
.kicker{
  margin:0;font-family:var(--sans);font-size:10px;font-weight:400;
  letter-spacing:.20em;line-height:1.35;text-transform:uppercase;color:var(--ink-3);
}
.kicker--light{color:rgba(255,255,255,.66)}
.script{
  display:block;font-family:var(--script);font-weight:400;text-transform:none;
  color:var(--terra);transform:rotate(-2.2deg);line-height:.9;
}

.sechead{max-width:640px;margin:0 auto;padding:0 var(--gut);text-align:center}
.sechead--left{margin:0;padding:0;text-align:left}
.sechead__title{
  margin:14px 0 0;font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,4.6vw,58px);line-height:.98;letter-spacing:.005em;text-transform:uppercase;
}
.sechead__title .script{
  font-size:clamp(30px,4.2vw,50px);text-transform:none;margin-top:.06em;
}
.sechead--left .script{transform:rotate(-2deg) translateX(4px)}
.sechead__copy{
  max-width:52ch;margin:20px auto 0;font-size:14.5px;line-height:1.62;color:var(--ink-2);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:999px;font-size:11.5px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;transition:.4s var(--ease);
  border:1px solid transparent;cursor:pointer;
}
.btn svg{width:17px;height:17px;flex:none}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:#0d1638}
.btn--ghost{border-color:currentColor;color:inherit}
.btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--wa{background:#1F9C55;color:#fff}
.btn--wa:hover{background:#17803F}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed;inset:0 0 auto;z-index:120;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:22px var(--gut);color:#fff;
  transition:padding .5s var(--ease),background .5s var(--ease),color .5s var(--ease);
}
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,14,34,.42),rgba(8,14,34,0));
  opacity:1;transition:opacity .5s var(--ease);
}
.nav.is-solid{
  background:rgba(251,248,243,.94);backdrop-filter:blur(14px);
  color:var(--ink);padding-top:14px;padding-bottom:14px;
  box-shadow:0 1px 0 var(--ink-5);
}
.nav.is-solid::before{opacity:0}
.nav.is-hidden{transform:translateY(-101%)}
.nav{transition:transform .5s var(--ease),padding .5s var(--ease),background .5s var(--ease),color .5s var(--ease)}

.nav__side{display:flex;align-items:center;gap:26px;min-width:0}
.nav__side--right{justify-content:flex-end}
.nav__link,.nav__book{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  position:relative;padding-bottom:3px;white-space:nowrap;
}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav__link:hover::after{transform:scaleX(1);transform-origin:left}
.nav__link--wide{display:none}
@media(min-width:1080px){.nav__link--wide{display:inline-block}}

.nav__book{
  border:1px solid currentColor;border-radius:999px;padding:9px 18px;
  transition:.4s var(--ease);
}
.nav__book:hover{background:currentColor}
.nav.is-solid .nav__book:hover{color:var(--paper)}
.nav:not(.is-solid) .nav__book:hover{color:#0d1638}

.nav__logo{display:grid;justify-items:center;line-height:1;text-align:center}
.nav__logo-main{
  font-family:var(--serif);font-size:clamp(16px,2vw,23px);font-weight:400;
  letter-spacing:.22em;text-indent:.22em;
}
.nav__logo-script{
  font-family:var(--script);font-size:clamp(13px,1.5vw,17px);
  margin-top:1px;opacity:.9;
}
.nav.is-solid .nav__logo-script{color:var(--terra)}

.nav__burger{width:26px;height:16px;position:relative;display:none}
.nav__burger span{
  position:absolute;left:0;width:100%;height:1px;background:currentColor;
  transition:.45s var(--ease);
}
.nav__burger span:nth-child(1){top:4px}
.nav__burger span:nth-child(2){top:11px}
body.menu-open .nav__side--left,
body.menu-open .nav__book{opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
body.menu-open .nav{color:var(--paper);background:none;box-shadow:none;backdrop-filter:none}
body.menu-open .nav::before{opacity:0}
body.menu-open .nav__burger span:nth-child(1){top:8px;transform:rotate(45deg)}
body.menu-open .nav__burger span:nth-child(2){top:8px;transform:rotate(-45deg)}
@media(max-width:900px){
  .nav__burger{display:block}
  .nav__link{display:none}
  .nav__book{display:none}
}

/* ---------- menu overlay ---------- */
.menu{
  position:fixed;inset:0;z-index:115;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;padding:96px var(--gut) 40px;
  opacity:0;visibility:hidden;transition:.6s var(--ease);
}
body.menu-open .menu{opacity:1;visibility:visible}
.menu__inner{width:min(560px,100%);text-align:center}
.menu__kicker{
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(251,248,243,.5);margin-bottom:26px;
}
.menu__list li{overflow:hidden}
.menu__list a{
  display:grid;grid-template-columns:34px auto;align-items:baseline;gap:16px;
  text-align:left;
  font-family:var(--serif);font-size:clamp(28px,6vw,54px);line-height:1.24;
  text-transform:uppercase;transform:translateY(105%);transition:transform .7s var(--ease),color .35s;
}
.menu__list span{font-family:var(--sans);font-size:11px;letter-spacing:.2em;opacity:.45}
.menu__list a:hover{color:var(--gold)}
body.menu-open .menu__list a{transform:translateY(0)}
.menu__list li:nth-child(1) a{transition-delay:.06s}
.menu__list li:nth-child(2) a{transition-delay:.11s}
.menu__list li:nth-child(3) a{transition-delay:.16s}
.menu__list li:nth-child(4) a{transition-delay:.21s}
.menu__list li:nth-child(5) a{transition-delay:.26s}
.menu__list li:nth-child(6) a{transition-delay:.31s}
.menu__list li:nth-child(7) a{transition-delay:.36s}
.menu__foot{
  margin-top:38px;display:flex;gap:26px;justify-content:center;flex-wrap:wrap;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(251,248,243,.7);
}
.menu__foot a:hover{color:var(--gold)}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  height:100svh;min-height:600px;
  --plate-h:min(46svh,92vw,430px);
}
.hero__bg{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  transform:translate3d(0,var(--hero-y,0px),0) scale(1.09);will-change:transform;
}
.hero__veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(10,16,38,.34) 0%,rgba(10,16,38,.10) 34%,rgba(10,16,38,.22) 100%),
    radial-gradient(120% 80% at 50% 12%,rgba(255,255,255,.10),transparent 60%);
}
.hero__arc{
  position:absolute;left:50%;top:40%;z-index:2;
  width:min(97vw,1200px);height:clamp(210px,30vw,400px);
  transform:translate(-50%,-50%);overflow:visible;
  color:#fff;filter:drop-shadow(0 8px 22px rgba(6,12,30,.38));
}
.hero__arc text{
  /* NB: this is in viewBox units, so it already scales with the SVG width */
  fill:currentColor;font-family:var(--serif);font-weight:400;
  font-size:86px;letter-spacing:.02em;text-transform:uppercase;
}
.hero__mhead{display:none}
@media(max-width:760px){
  /* the arc gets illegibly small on a phone — stack it instead */
  .hero__arc{display:none}
  .hero__mhead{
    position:absolute;left:50%;top:38%;z-index:2;transform:translate(-50%,-50%);
    display:grid;gap:.02em;width:100%;text-align:center;color:#fff;
    font-family:var(--serif);font-weight:400;font-size:clamp(38px,13.2vw,60px);
    line-height:.96;letter-spacing:.03em;text-transform:uppercase;
    text-shadow:0 6px 22px rgba(6,12,30,.42);
  }
  .hero__sub{top:calc(38% + clamp(96px,26vw,132px))}
}
.hero__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.hero__sub{
  position:absolute;left:50%;top:calc(40% + clamp(74px,9vw,132px));z-index:3;
  transform:translateX(-50%);display:flex;align-items:center;gap:14px;
  color:rgba(255,255,255,.86);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  white-space:nowrap;text-shadow:0 2px 12px rgba(6,12,30,.5);
}
.hero__sub i{width:20px;height:1px;background:currentColor;opacity:.5;display:block}

.hero__plate{
  position:absolute;left:50%;bottom:-10%;z-index:2;
  width:auto;height:var(--plate-h);max-width:none;
  transform:translate3d(-50%,var(--plate-exit,0px),0) rotate(var(--plate-rot,0deg));
  transform-origin:50% 50%;will-change:transform;pointer-events:none;
  filter:drop-shadow(0 -14px 40px rgba(6,12,30,.30));
}
.hero__shore{position:absolute;left:0;right:0;bottom:-1px;z-index:3;pointer-events:none}
.hero__shore svg{width:100%;height:clamp(58px,8vw,120px);display:block}
.hero__shore path{fill:var(--paper)}

.hero__cue{
  position:absolute;left:50%;bottom:clamp(78px,10vw,132px);z-index:4;
  transform:translateX(-50%);width:22px;height:36px;border:1px solid rgba(255,255,255,.55);
  border-radius:999px;display:grid;place-items:start center;padding-top:7px;
}
.hero__cue span{
  width:2px;height:6px;border-radius:2px;background:#fff;display:block;
  animation:cue 1.9s var(--ease) infinite;
}
@keyframes cue{0%{transform:translateY(0);opacity:0}30%{opacity:1}70%{transform:translateY(13px);opacity:0}100%{opacity:0}}

/* =========================================================
   BOOKING
   ========================================================= */
.booking{
  position:relative;z-index:5;background:var(--paper);
  padding:clamp(30px,5vw,64px) var(--gut) clamp(44px,6vw,80px);
  text-align:center;
}
.booking__head{margin-bottom:26px}
.booking__title{
  margin-top:10px;font-family:var(--serif);font-weight:400;
  font-size:clamp(27px,3.6vw,46px);line-height:1;text-transform:uppercase;
}
.booking__title .script{font-size:clamp(27px,3.4vw,42px);text-transform:none}

.bookbar{
  display:grid;gap:0;align-items:stretch;
  grid-template-columns:1.35fr 1fr 1fr .72fr auto;
  width:min(1140px,100%);margin:0 auto;text-align:left;
  background:var(--white);border:1px solid var(--ink-5);
  border-radius:4px;box-shadow:0 24px 60px -34px rgba(22,32,74,.44);
  overflow:hidden;
}
.bookbar__field{padding:16px 22px;border-right:1px solid var(--ink-5);min-width:0}
.bookbar__field:last-of-type{border-right:0}
.bookbar__field label{
  display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:6px;
}
.bookbar__control{position:relative}
.bookbar__control select,
.bookbar__control input{
  width:100%;border:0;background:none;padding:0;outline:none;
  font-family:var(--serif);font-size:19px;font-weight:400;color:var(--ink);
  cursor:pointer;appearance:none;-webkit-appearance:none;
}
.bookbar__control input::-webkit-calendar-picker-indicator{opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer}
.bookbar__control select{padding-right:20px}
.bookbar__field:has(select) .bookbar__control::after{
  content:"";position:absolute;right:2px;top:50%;width:7px;height:7px;
  border-right:1px solid var(--ink-4);border-bottom:1px solid var(--ink-4);
  transform:translateY(-70%) rotate(45deg);pointer-events:none;
}
.bookbar__go{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:0 clamp(26px,3vw,44px);background:var(--ink);color:var(--paper);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  transition:background .4s var(--ease);
}
.bookbar__go svg{width:19px;height:19px;transition:transform .4s var(--ease)}
.bookbar__go:hover{background:var(--terra)}
.bookbar__go:hover svg{transform:translateX(4px)}

.bookbar__note{
  width:min(1140px,100%);margin:14px auto 0;text-align:left;
  font-size:12.5px;color:var(--terra);min-height:19px;letter-spacing:.02em;
}
.bookbar__note.is-ok{color:var(--palm)}

.rates{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;
  margin-top:26px;
}
.rates li{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--ink-5);border-radius:999px;padding:7px 15px;background:var(--white);
}
.rates li em{font-style:normal;color:var(--ink);letter-spacing:.2em}
.rates li:first-child{border:0;background:none;padding-left:0}

@media(max-width:980px){
  .bookbar{grid-template-columns:1fr 1fr}
  .bookbar__field{border-bottom:1px solid var(--ink-5)}
  .bookbar__field:nth-child(2n){border-right:0}
  .bookbar__go{grid-column:1/-1;padding:17px}
}
@media(max-width:520px){
  .bookbar{grid-template-columns:1fr}
  .bookbar__field{border-right:0}
}

/* =========================================================
   THE HOUSE — editorial
   ========================================================= */
.house{
  position:relative;background:var(--paper);
  padding:clamp(70px,11vw,150px) var(--gut) clamp(40px,7vw,90px);
}
.house__stage{width:min(760px,100%);margin:0 auto;text-align:center}
.house__title{
  margin:16px 0 0;font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,5.2vw,68px);line-height:.96;text-transform:uppercase;
}
.house__line{display:block}
.house__script{
  font-size:clamp(32px,4.6vw,56px);margin-top:.1em;
}
.house__copy{
  max-width:56ch;margin:30px auto 0;font-size:15px;line-height:1.72;color:var(--ink-2);
  display:grid;gap:15px;
}
.house__copy em{font-family:var(--serif);font-style:italic;font-size:1.08em;color:var(--ink)}
.house__sig{
  margin-top:30px;font-family:var(--script);font-size:26px;color:var(--ink-3);
}

/* =========================================================
   PLATE JOURNEY — signature scroll
   ========================================================= */
.journey{
  position:relative;isolation:isolate;
  height:var(--journey-h,760vh);min-height:5000px;
  background:var(--paper);color:var(--ink);
  --side:clamp(20px,4vw,58px);
}
.journey__pin{
  position:sticky;top:0;height:100svh;min-height:min(620px,100svh);
  display:grid;place-items:center;overflow:clip;clip-path:inset(0);
}
.journey__pin::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(90% 70% at 50% 45%,#fff 0%,var(--paper) 55%,var(--wash) 100%);
}
.journey__corner{
  position:absolute;z-index:6;margin:0;color:var(--ink-3);
  font-size:10px;line-height:1.4;pointer-events:none;
}
.journey__corner--kicker{
  top:var(--side);left:var(--side);letter-spacing:.2em;text-transform:uppercase;
}
.journey__corner--foot{
  left:var(--side);bottom:clamp(14px,1.8vw,26px);max-width:min(310px,72vw);
}
.journey__corner--foot::before{
  content:"";display:block;width:clamp(56px,7vw,104px);height:1px;
  margin-bottom:11px;background:currentColor;opacity:.5;
}

.journey__drift{position:absolute;inset:0;z-index:1;pointer-events:none}
.driftimg{
  position:absolute;margin:0;overflow:hidden;background:var(--wash);
  border:6px solid rgba(255,255,255,.94);border-radius:3px;
  box-shadow:0 20px 46px rgba(22,32,74,.17);
  opacity:0;transform-origin:50% 50%;will-change:transform,opacity;
}
.driftimg img{width:100%;height:100%;object-fit:cover}
.driftimg--left      {left:clamp(-18px,5vw,84px); bottom:12%;width:clamp(190px,22vw,320px);aspect-ratio:.82/1}
.driftimg--top       {left:clamp(46px,11vw,178px);bottom:28%;width:clamp(170px,19vw,272px);aspect-ratio:1.08/.78}
.driftimg--right     {right:clamp(-18px,5vw,84px);bottom:10%;width:clamp(206px,24vw,350px);aspect-ratio:1.18/.88}
.driftimg--right-high{right:clamp(50px,12vw,186px);bottom:31%;width:clamp(170px,19vw,274px);aspect-ratio:.86/1}
.driftimg--left-low  {left:clamp(22px,8vw,130px); bottom:-2%;width:clamp(182px,20vw,294px);aspect-ratio:1.16/.82}
.driftimg--center-low{left:clamp(206px,27vw,414px);bottom:7%;width:clamp(170px,19vw,276px);aspect-ratio:1/1.18}

.drifticon{
  position:absolute;z-index:1;width:clamp(84px,8.6vw,146px);aspect-ratio:1;
  opacity:0;transform-origin:50% 50%;will-change:transform,opacity;
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;
}
.drifticon--leaf  {--icon:url("../img/i-leaf.svg");  left:clamp(6px,3vw,54px);  top:10%;background:var(--palm)}
.drifticon--shell {--icon:url("../img/i-shell.svg"); right:clamp(8px,3.4vw,60px);top:11%;background:var(--ink)}
.drifticon--fish  {--icon:url("../img/i-fish.svg");  right:clamp(4px,2.4vw,42px);top:48%;width:clamp(96px,9.6vw,158px);background:var(--ink)}
.drifticon--cup   {--icon:url("../img/i-cup.svg");   left:clamp(16px,4vw,72px); top:34%;width:clamp(74px,7.6vw,124px);background:var(--terra)}
.drifticon--flower{--icon:url("../img/i-flower.svg");left:clamp(2px,1.5vw,26px);top:78%;width:clamp(76px,7.8vw,130px);background:var(--gold)}
.drifticon--lamp  {--icon:url("../img/i-lamp.svg");  right:clamp(10px,3vw,56px);top:70%;width:clamp(84px,8.6vw,146px);background:var(--terra)}

.journey__scene{
  position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;
  /* width is capped as well as height — sized off height alone the plate runs
     wider than a phone viewport and the circle gets cut off at both edges */
  width:min(96vw,80svh,745px);height:auto;aspect-ratio:1;
  transform:translate(-50%,-50%);will-change:transform;pointer-events:none;
}
.journey__plate{
  position:relative;z-index:1;width:100%;height:auto;max-width:none;
  object-fit:contain;transform-origin:50% 50%;will-change:transform;
  filter:drop-shadow(0 26px 54px rgba(22,32,74,.20));
}
.journey__content{
  position:relative;z-index:4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  width:min(360px,62vw);min-height:330px;opacity:0;pointer-events:none;
}
.journey__title{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(25px,3.1vw,40px);line-height:.94;text-transform:uppercase;
}
.journey__script{
  margin-top:-.02em;font-size:clamp(30px,3.3vw,44px);line-height:.9;
  transform:rotate(-3deg);
}
.journey__copy{
  max-width:300px;margin:18px auto 0;font-size:12.5px;line-height:1.48;color:var(--ink-2);
}
.journey__pagination{display:grid;gap:9px;width:min(206px,54vw);margin-top:22px}
.journey__count{
  display:flex;justify-content:space-between;color:var(--ink-3);
  font-size:10px;letter-spacing:.2em;line-height:1;text-transform:uppercase;
}
.journey__progress{width:100%;height:1px;overflow:hidden;background:var(--ink-5)}
.journey__progress-bar{
  width:100%;height:100%;background:var(--ink);
  transform-origin:left center;transform:scaleX(.2);
}

@media(max-width:900px){
  .journey{height:var(--journey-h,720vh);min-height:4600px;--side:22px}
  .journey__scene{width:min(96vw,68svh,560px)}
  /* the well shrinks with the plate, so the copy has to come in with it */
  .journey__content{width:min(225px,60vw);min-height:265px}
  .journey__title{font-size:clamp(19px,6.2vw,27px)}
  .journey__script{font-size:clamp(24px,7.4vw,31px)}
  .journey__copy{max-width:200px;margin-top:13px;font-size:11px;line-height:1.42}
  .journey__pagination{width:min(180px,48vw);margin-top:17px}
  .journey__corner--foot{display:none}
  .driftimg{border-width:4px}
  .driftimg--left      {left:-8px;bottom:17%;width:min(44vw,186px)}
  .driftimg--top       {left:10%; bottom:34%;width:min(46vw,196px)}
  .driftimg--right     {right:-12px;bottom:18%;width:min(50vw,224px)}
  .driftimg--right-high{right:10%;bottom:37%;width:min(44vw,186px)}
  .driftimg--left-low  {left:6%;  bottom:2%; width:min(48vw,204px)}
  .driftimg--center-low{left:32%; bottom:7%; width:min(44vw,186px)}
  .drifticon{width:clamp(62px,19vw,94px)}
  .drifticon--fish{width:clamp(70px,20vw,96px)}
  .drifticon--cup,.drifticon--flower{width:clamp(58px,17vw,80px)}
}

@media(max-width:380px){
  /* the well is a fixed fraction of the plate, and the plate is now capped by
     viewport width — so on the narrowest phones the copy has to come in again */
  .journey__content{width:min(190px,58vw);min-height:238px}
  .journey__title{font-size:clamp(17px,5.6vw,22px)}
  .journey__script{font-size:clamp(21px,6.6vw,26px)}
  .journey__copy{max-width:172px;margin-top:11px;font-size:10.5px;line-height:1.4}
  .journey__pagination{width:min(148px,44vw);margin-top:14px}
}

/* =========================================================
   ROOMS
   ========================================================= */
.rooms{padding:clamp(74px,10vw,140px) 0 clamp(60px,8vw,110px);background:var(--wash)}
.roomgrid{
  display:grid;gap:clamp(18px,2.2vw,30px);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  padding:clamp(36px,5vw,64px) var(--gut) 0;
  max-width:1560px;margin:0 auto;
}
.roomcard{
  position:relative;display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--ink-5);border-radius:4px;overflow:hidden;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.roomcard:hover{transform:translateY(-6px);box-shadow:0 34px 64px -34px rgba(22,32,74,.4)}
.roomcard__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.roomcard__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease);
  filter:saturate(.94) contrast(1.02) brightness(1.01);
}
.roomcard:hover .roomcard__media img{transform:scale(1.055)}
.roomcard__tags{
  position:absolute;left:12px;top:12px;display:flex;gap:6px;
}
.roomcard__tags span{
  background:rgba(255,255,255,.92);color:var(--ink);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;backdrop-filter:blur(6px);
}
.roomcard__from{
  position:absolute;right:12px;bottom:12px;text-align:right;
  background:rgba(22,32,74,.86);color:var(--paper);border-radius:3px;
  padding:8px 12px;backdrop-filter:blur(6px);
}
.roomcard__from small{display:block;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.7}
.roomcard__from b{font-family:var(--serif);font-size:22px;font-weight:500;line-height:1.1}

.roomcard__body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.roomcard__name{
  margin:0;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.05;
  text-transform:uppercase;
}
.roomcard__copy{margin:9px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.roomcard__price{display:flex;align-items:baseline;gap:9px;margin-top:14px}
.roomcard__price s{color:var(--ink-4);font-size:13px}
.roomcard__price em{
  font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--terra);border:1px solid currentColor;border-radius:999px;padding:3px 8px;
}
.roomcard__feats{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.roomcard__feats li{
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--ink-5);border-radius:999px;padding:5px 10px;
}
.roomcard__actions{display:flex;gap:9px;margin-top:auto;padding-top:18px}
.roomcard__actions .btn{flex:1;padding:12px 14px;font-size:10px;letter-spacing:.14em}

.rooms__note{
  margin:clamp(28px,4vw,48px) auto 0;padding:0 var(--gut);max-width:640px;text-align:center;
  font-size:12px;letter-spacing:.04em;color:var(--ink-3);
}

/* =========================================================
   AMENITIES
   ========================================================= */
.amen{
  display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:clamp(30px,5vw,80px);
  padding:clamp(74px,10vw,140px) var(--gut);background:var(--paper);
}
.amen__inner{max-width:640px}
.amen__list{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:34px;
  border-top:1px solid var(--ink-5);
}
.amen__list li{
  display:flex;align-items:center;gap:11px;padding:14px 4px;
  border-bottom:1px solid var(--ink-5);
  font-size:12.5px;letter-spacing:.05em;color:var(--ink-2);
}
.amen__list li::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--terra);flex:none;
}
.amen__media{position:relative}
.amen__media img{
  width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:3px;
  box-shadow:0 40px 80px -46px rgba(22,32,74,.55);
}
.amen__cap{
  position:absolute;left:0;bottom:-28px;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
}
@media(max-width:900px){
  .amen{grid-template-columns:1fr}
  .amen__media{order:-1}
  .amen__media img{aspect-ratio:4/3}
  .amen__cap{position:static;display:block;margin-top:10px}
  .amen__list{grid-template-columns:1fr}
}

/* =========================================================
   DAY / NIGHT
   ========================================================= */
.hours{position:relative;background:var(--night)}
.hours__scroll{height:var(--hours-h,230vh);min-height:1500px}
.hours__pin{
  position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;
  display:grid;place-items:center;
}
.hours__img{position:absolute;inset:0;margin:0;z-index:0}
.hours__img img{width:100%;height:100%;object-fit:cover}
.hours__img--day img{
  opacity:var(--day-o,1);transform:scale(var(--day-s,1.06)) translateY(var(--day-y,0));
  will-change:transform,opacity;
}
.hours__img--night{z-index:1}
.hours__img--night img{
  opacity:var(--night-o,0);transform:scale(var(--night-s,1.1)) translateY(var(--night-y,0));
  will-change:transform,opacity;
}
.hours__shade{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,11,28,.26),rgba(6,11,28,.08) 40%,rgba(6,11,28,.70));
  opacity:var(--shade,.34);
}
/* keeps the bottom-left copy legible whatever the photograph is doing */
.hours__pin::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(102deg,rgba(6,11,28,.76) 0%,rgba(6,11,28,.46) 28%,rgba(6,11,28,.08) 58%,transparent 76%);
}
.hours__copy{
  position:absolute;z-index:3;left:var(--gut);bottom:clamp(80px,12vw,150px);
  width:min(430px,72vw);color:#fff;
}
.hours__copy h2{
  margin:12px 0 0;font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,4.6vw,58px);line-height:.98;text-transform:uppercase;
}
.hours__copy h2 .script{color:var(--gold);font-size:clamp(30px,4.2vw,50px);text-transform:none}
.hours__text{margin-top:14px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.8)}
.hours__copy--day{
  opacity:var(--day-t,1);transform:translateY(var(--day-ty,0));
  clip-path:inset(var(--day-clip,0%) 0 0 0);
}
.hours__copy--night{
  opacity:var(--night-t,0);transform:translateY(var(--night-ty,20px));
  clip-path:inset(var(--night-clip,100%) 0 0 0);
}
.hours__bar{
  position:absolute;z-index:4;left:var(--gut);right:var(--gut);bottom:clamp(40px,6vw,64px);
  height:1px;background:rgba(255,255,255,.22);
}
.hours__bar i{display:block;height:100%;width:var(--hours-p,0%);background:#fff}

/* =========================================================
   THE TABLE
   ========================================================= */
.table{padding:clamp(74px,10vw,140px) 0;background:var(--wash)}
.tablegrid{
  display:grid;gap:clamp(12px,1.6vw,20px);
  grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(190px,20vw,260px);
  padding:clamp(38px,5vw,66px) var(--gut) 0;max-width:1560px;margin:0 auto;
}
.tablecard{position:relative;overflow:hidden;border-radius:3px;background:var(--sand)}
.tablecard--tall{grid-row:span 2}
.tablecard--wide{grid-column:span 2}
.tablecard img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease);filter:saturate(.96)
}
.tablecard:hover img{transform:scale(1.06)}
.tablecard figcaption{
  position:absolute;inset:auto 0 0;padding:20px;color:#fff;display:grid;gap:4px;
  background:linear-gradient(0deg,rgba(8,14,32,.78),rgba(8,14,32,0));
}
.tablecard__name{font-family:var(--serif);font-size:22px;line-height:1.1;text-transform:uppercase}
.tablecard__meta{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.72}
@media(max-width:820px){
  .tablegrid{grid-template-columns:repeat(2,1fr)}
  .tablecard--wide{grid-column:span 2}
}

/* =========================================================
   STRIP marquee
   ========================================================= */
.strip{overflow:hidden;background:var(--paper);padding:clamp(50px,7vw,90px) 0}
.strip__track{display:flex;gap:14px;width:max-content;will-change:transform}
.strip__track figure{margin:0;flex:none;width:clamp(190px,20vw,300px)}
.strip__track img{
  width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:3px;filter:saturate(.95)
}
.strip__track figcaption{
  margin-top:9px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)
}

/* =========================================================
   OFFER + POLICIES
   ========================================================= */
.offer{
  display:grid;grid-template-columns:1fr 1.05fr;align-items:stretch;
  max-width:1560px;margin:0 auto;padding:0 var(--gut) clamp(74px,10vw,130px);
  gap:clamp(16px,2vw,28px);
}
.offer__panel{
  background:var(--white);border:1px solid var(--ink-5);border-radius:4px;
  padding:clamp(30px,4vw,54px);
}
.policy{margin-top:22px;display:grid}
.policy li{
  padding:13px 0;border-bottom:1px solid var(--ink-5);
  font-size:13.5px;line-height:1.5;color:var(--ink-2);
}
.policy li:last-child{border-bottom:0}
.policy span{color:var(--ink);letter-spacing:.1em;font-size:10px;text-transform:uppercase}
.policy__note{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--ink-5);
  font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.5;color:var(--ink-3);
}
.offer__panel{display:flex;flex-direction:column}
.offer__panel .policy{margin-top:22px}
.offer__panel .policy__note{margin-top:auto}

.offer__panel--cta{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.offer__title{
  margin:14px 0 0;font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,4vw,50px);line-height:1;text-transform:uppercase;
}
.offer__title .script{color:var(--gold);font-size:clamp(28px,3.4vw,42px);text-transform:none}
.offer__copy{margin-top:16px;font-size:14px;line-height:1.62;color:rgba(251,248,243,.74);max-width:44ch}
.offer__prices{margin-top:24px;display:grid;gap:0}
.offer__prices li{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:12px 0;border-bottom:1px solid rgba(251,248,243,.16);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(251,248,243,.78);
}
.offer__prices em{font-style:normal;font-family:var(--serif);font-size:22px;letter-spacing:0;color:#fff}
.offer__actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:28px}
.offer__panel--cta .btn--ghost{color:var(--paper)}
.offer__panel--cta .btn--ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
@media(max-width:900px){.offer{grid-template-columns:1fr}}

/* =========================================================
   FIND US
   ========================================================= */
.find{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,86px);
  max-width:1560px;margin:0 auto;padding:0 var(--gut) clamp(80px,10vw,140px);
}
.find__list{margin-top:34px;display:grid;border-top:1px solid var(--ink-5)}
.find__list > div{
  display:grid;grid-template-columns:130px 1fr;gap:18px;
  padding:16px 0;border-bottom:1px solid var(--ink-5);
}
.find__list dt{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.find__list dd{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.find__list a:hover{color:var(--terra)}

.find__media{margin-top:30px;position:relative}
.find__media img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:3px}
.find__media figcaption{
  margin-top:10px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
.find__form{
  background:var(--white);border:1px solid var(--ink-5);border-radius:4px;
  padding:clamp(26px,3.4vw,44px);align-self:start;
}
.field{margin-top:18px}
.field label{
  display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:7px;
}
.field input,.field textarea{
  width:100%;border:0;border-bottom:1px solid var(--ink-5);background:none;
  padding:8px 0;outline:none;font-family:var(--serif);font-size:18px;
  transition:border-color .4s var(--ease);resize:vertical;
}
.field input:focus,.field textarea:focus{border-color:var(--terra)}
.find__form .btn{margin-top:26px;width:100%}
.find__formnote{margin-top:12px;font-size:12.5px;color:var(--palm);min-height:18px}
@media(max-width:900px){.find{grid-template-columns:1fr}
  .find__list > div{grid-template-columns:1fr;gap:5px}
}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{background:var(--ink);color:var(--paper);padding:clamp(46px,6vw,74px) var(--gut) clamp(58px,7vw,86px)}
.foot__top{
  display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap;
  padding-bottom:30px;border-bottom:1px solid rgba(251,248,243,.16);
}
.foot__logo{display:grid;line-height:1}
.foot__logo-main{font-family:var(--serif);font-size:clamp(22px,3vw,34px);letter-spacing:.22em;text-indent:.22em}
.foot__logo-script{font-family:var(--script);font-size:clamp(19px,2.2vw,26px);color:var(--gold);margin-top:3px}
.foot__nav{display:flex;gap:24px;flex-wrap:wrap;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}
.foot__nav a{color:rgba(251,248,243,.7)}
.foot__nav a:hover{color:var(--gold)}
.foot__bar{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-top:22px;font-size:11px;letter-spacing:.06em;color:rgba(251,248,243,.52);
}
.foot__credit a{color:var(--gold);letter-spacing:.1em}
.foot__credit a:hover{text-decoration:underline}

/* =========================================================
   FLOATING WHATSAPP
   ========================================================= */
.wafloat{
  position:fixed;right:clamp(14px,2.4vw,28px);bottom:clamp(14px,2.4vw,28px);z-index:110;
  display:flex;align-items:center;gap:9px;background:#1F9C55;color:#fff;
  padding:12px 18px 12px 14px;border-radius:999px;
  box-shadow:0 16px 34px -12px rgba(15,90,48,.6);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  transition:transform .45s var(--ease),background .35s;
}
.wafloat svg{width:21px;height:21px;flex:none}
.wafloat:hover{background:#17803F;transform:translateY(-3px)}
@media(max-width:600px){.wafloat span{display:none}.wafloat{padding:14px;border-radius:50%}}

/* =========================================================
   ROOM SHEET
   ========================================================= */
.sheet{position:fixed;inset:0;z-index:130;display:grid;place-items:center;
  opacity:0;visibility:hidden;transition:.45s var(--ease);padding:20px}
body.sheet-open .sheet{opacity:1;visibility:visible}
.sheet__scrim{position:absolute;inset:0;background:rgba(8,13,32,.62);backdrop-filter:blur(4px)}
.sheet__panel{
  position:relative;width:min(920px,100%);max-height:88svh;overflow:auto;
  background:var(--paper);border-radius:4px;display:grid;grid-template-columns:1fr 1fr;
  transform:translateY(18px) scale(.99);transition:.55s var(--ease);
}
body.sheet-open .sheet__panel{transform:none}
.sheet__img{width:100%;height:100%;min-height:280px;object-fit:cover}
.sheet__body{padding:clamp(26px,3vw,42px)}
.sheet__body h3{
  margin:12px 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,38px);
  line-height:1.02;text-transform:uppercase;
}
.sheet__copy{margin-top:14px;font-size:14px;line-height:1.62;color:var(--ink-2)}
.sheet__feats{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.sheet__feats li{
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--ink-5);border-radius:999px;padding:6px 11px;
}
.sheet__price{margin-top:22px;padding-top:18px;border-top:1px solid var(--ink-5)}
.sheet__price span{font-family:var(--serif);font-size:32px;line-height:1}
.sheet__price em{display:block;font-style:normal;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-top:5px}
.sheet__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.sheet__actions .btn{padding:14px 12px;font-size:10.5px;letter-spacing:.10em;white-space:nowrap}
@media(max-width:460px){.sheet__actions{grid-template-columns:1fr}}
.sheet__close{
  position:absolute;right:12px;top:10px;z-index:2;width:36px;height:36px;
  border-radius:50%;background:rgba(251,248,243,.9);font-size:24px;line-height:1;
  display:grid;place-items:center;color:var(--ink);
}
@media(max-width:760px){
  .sheet__panel{grid-template-columns:1fr}
  .sheet__img{min-height:200px;max-height:34svh}
}

/* =========================================================
   REVEAL
   ========================================================= */
[data-reveal]{
  opacity:0;transform:translateY(22px);
  transition:opacity 1s var(--ease) var(--rd,0ms),transform 1s var(--ease) var(--rd,0ms);
}
[data-reveal].is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
  .journey{height:auto;min-height:0}
  .journey__pin{position:relative;height:auto;padding:80px 0}
  .journey__content{opacity:1}
  .hours__scroll{height:auto;min-height:0}
  .hours__pin{position:relative;height:auto;min-height:80svh}
}