/* OLAM by Plasseril — parallax build. Palette sampled from the real logo. */
:root{
  --gold-dark:#9E7D45; --gold:#BCA36D; --gold-light:#DAC28A;
  --teak:#6A4B25; --teak-deep:#4C2E1A;
  --cream:#F3EEE4; --sand:#B5A188; --sage:#A29369;
  --green-deep:#454736; --ink:#1A1712;
  --measure:34rem;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
[id]{scroll-margin-top:5rem}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--body);font-weight:300;font-size:clamp(1rem,.94rem + .3vw,1.125rem);
  line-height:1.65;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--teak-deep)}
:focus-visible{outline:2px solid var(--teak-deep);outline-offset:3px;border-radius:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--ink);color:var(--cream);padding:.7rem 1rem}
.skip:focus{left:.5rem;top:.5rem}

.display{font-family:var(--display);font-weight:300;line-height:1.05;letter-spacing:-.01em;
  font-size:clamp(2.1rem,1.2rem + 3.6vw,4.4rem);margin:0 0 1rem}
.display.xl{font-size:clamp(3rem,1.4rem + 7vw,8rem)}
.eyebrow{font-size:.75rem;letter-spacing:.28em;text-transform:uppercase;color:var(--teak);
  margin:0 0 1.1rem;font-weight:400}
.sub{font-family:var(--display);font-size:2rem;font-weight:300;margin:3.5rem 0 1rem}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:80;background:var(--cream);display:grid;place-items:center;
  transition:opacity .7s ease,visibility .7s}
.loader.done{opacity:0;visibility:hidden}
.loader-mark{width:clamp(74px,11vw,120px);height:auto;grid-area:1/1;
  animation:breathe 2.6s ease-in-out infinite}
.ripple{grid-area:1/1;width:min(62vw,420px);height:auto;fill:none;stroke:var(--gold);stroke-width:.7}
.ripple circle{transform-origin:50% 50%;animation:ring 2.8s ease-out infinite;opacity:0}
.ripple circle:nth-child(2){animation-delay:.35s}
.ripple circle:nth-child(3){animation-delay:.7s}
.ripple circle:nth-child(4){animation-delay:1.05s}
@keyframes ring{0%{transform:scale(.35);opacity:0}25%{opacity:.85}100%{transform:scale(1.25);opacity:0}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:1.5rem;
  padding:1rem clamp(1rem,4vw,3rem);transition:background .4s ease,padding .4s ease,box-shadow .4s}
.nav.stuck{background:rgba(243,238,228,.92);backdrop-filter:blur(10px);padding-block:.6rem;
  box-shadow:0 1px 0 rgba(26,23,18,.08)}
.nav-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--cream);
  font-family:var(--display);font-size:1.4rem;letter-spacing:.22em;text-transform:uppercase}
.nav-brand img{width:30px;height:30px;object-fit:contain}
.nav.stuck .nav-brand,.nav.stuck .nav-links a{color:var(--ink)}
.nav-links{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--cream);text-decoration:none;font-size:.86rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.3rem 0;border-bottom:1px solid transparent}
.nav-links a:hover{border-bottom-color:currentColor}
.btn{display:inline-block;font:inherit;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.7rem 1.3rem;border-radius:999px;text-decoration:none;border:1px solid currentColor;
  cursor:pointer;transition:background .25s,color .25s,transform .25s}
.btn-wa{color:var(--cream);margin-left:auto}
.nav.stuck .btn-wa{color:var(--teak-deep)}
.btn-wa:hover{background:var(--cream);color:var(--ink)}
.nav.stuck .btn-wa:hover{background:var(--teak-deep);color:var(--cream)}
.btn-solid{background:var(--teak-deep);color:var(--cream);border-color:var(--teak-deep)}
.btn-solid:hover{background:var(--ink);transform:translateY(-2px)}
.nav-progress{position:absolute;left:0;bottom:0;height:2px;width:100%;background:transparent}
.nav-progress span{display:block;height:100%;width:0;background:var(--gold)}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;display:grid;place-items:center;
  background:var(--green-deep)}
.hero-media{position:absolute;inset:-12% 0 -12%;will-change:transform}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.hero-scrim{position:absolute;inset:0;
  background:
    radial-gradient(58% 46% at 50% 44%,rgba(26,23,18,.66) 0%,rgba(26,23,18,.18) 70%,transparent 100%),
    linear-gradient(180deg,rgba(26,23,18,.66) 0%,rgba(26,23,18,.34) 40%,rgba(26,23,18,.76) 100%)}
.hero-rings{position:absolute;width:min(120vw,1000px);opacity:.28;will-change:transform}
.hero-rings svg{width:100%;height:auto;fill:none;stroke:var(--gold-light);stroke-width:.6}
.hero-copy{position:relative;text-align:center;padding:0 1.2rem;will-change:transform}
.hero-word{width:min(70vw,540px);margin:0 auto 1.6rem}
.hero-tag{font-family:var(--display);font-size:clamp(1.3rem,.9rem + 1.6vw,2.3rem);line-height:1.35;
  color:#FBF7EF;margin:0 auto;max-width:22ch;font-style:italic;font-weight:300}
.hero-sub{color:var(--gold-light);letter-spacing:.2em;text-transform:uppercase;font-size:.78rem;
  margin-top:1.5rem}
.hero-cue{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);color:#EDE5D6;
  font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;display:grid;justify-items:center;gap:.6rem}
.hero-cue span{width:1px;height:44px;background:linear-gradient(var(--gold-light),transparent);
  animation:drop 2.2s ease-in-out infinite}
@keyframes drop{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ---------- welcome ---------- */
.welcome{max-width:74rem;margin:0 auto;padding:clamp(5rem,12vh,10rem) clamp(1.2rem,5vw,3rem)}
.welcome-cols{display:grid;gap:1.6rem 3rem;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  margin-top:2rem;max-width:62rem}
.welcome-cols p{margin:0;font-size:1.12em}
.aside{margin-top:3rem;color:var(--teak);font-family:var(--display);font-size:1.35rem;font-style:italic}

/* ---------- scenes: sticky window frames ---------- */
.scene{position:relative;min-height:200vh}
.scene-sticky{position:sticky;top:0;height:100svh;display:grid;align-items:center;gap:clamp(1.5rem,5vw,5rem);
  grid-template-columns:1fr 1fr;padding:0 clamp(1.2rem,5vw,5rem);max-width:96rem;margin:0 auto}
.scene-sticky.reverse .frame{order:2}
.scene-dark{background:var(--green-deep);color:var(--cream)}
.scene-dark .eyebrow{color:var(--gold-light)}
.frame{margin:0;overflow:hidden;border-radius:2px;box-shadow:0 30px 60px -30px rgba(26,23,18,.45);
  position:relative;background:var(--sand)}
.frame::after{content:"";position:absolute;inset:0;border:1px solid rgba(188,163,109,.4);pointer-events:none}
.frame-tall{aspect-ratio:4/5}
.frame-portrait{aspect-ratio:3/4}
.frame img{width:100%;height:128%;object-fit:cover;position:absolute;top:-14%;left:0;will-change:transform}
.scene-text{max-width:var(--measure)}
.scene-text p{margin:0 0 1rem}

/* ---------- rooms rail ---------- */
.rooms{position:relative;height:320vh;background:var(--cream)}
.rail-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(1.2rem,3vh,2.4rem);overflow:hidden;padding-top:4.5rem}
.rail-head{padding:0 clamp(1.2rem,5vw,5rem);max-width:46rem}
.rail-head .display{margin:0;font-size:clamp(1.9rem,1.1rem + 2.4vw,3.2rem)}
.rail{display:flex;gap:clamp(1rem,2.4vw,2rem);padding-inline:clamp(1.2rem,5vw,5rem);will-change:transform}
.card{margin:0;flex:0 0 clamp(17rem,42vw,33rem)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;
  height:min(52vh,26rem)}
.card figcaption{margin-top:.8rem;font-size:.86rem;color:var(--teak);letter-spacing:.02em}
.rail-hint{padding-inline:clamp(1.2rem,5vw,5rem);margin:0;font-size:.7rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--teak)}

/* ---------- depth mosaic ---------- */
.depth{position:relative;max-width:90rem;margin:0 auto;padding:clamp(5rem,14vh,11rem) clamp(1.2rem,5vw,4rem);
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,5vw,4rem) 1.5rem;align-items:start}
.depth figure{margin:0}
.depth .clip{display:block;position:relative;overflow:hidden;border-radius:2px;background:var(--sand)}
.depth .clip img{position:absolute;inset:0;width:100%;height:126%;top:-13%;object-fit:cover;will-change:transform}
.d1 .clip,.d2 .clip,.d5 .clip{aspect-ratio:4/3}
.d3 .clip{aspect-ratio:16/10}
.d4 .clip{aspect-ratio:3/4}
.depth figcaption{margin-top:.7rem;font-size:.82rem;color:var(--teak)}
.d1{grid-column:1/7}
.d2{grid-column:8/13;margin-top:7rem}
.d3{grid-column:1/8}
.d4{grid-column:9/13;margin-top:-4rem}
.d5{grid-column:6/12;margin-top:2rem}

/* ---------- island ---------- */
.island{position:relative;background:var(--ink);color:var(--cream);overflow:hidden;
  padding:clamp(6rem,16vh,12rem) clamp(1.2rem,5vw,5rem);text-align:center}
.island .eyebrow{color:var(--gold)}
.island-rings{position:absolute;top:50%;left:50%;translate:-50% -50%;width:min(140vw,1200px);opacity:.22;
  will-change:transform}
.island-rings svg{width:100%;height:auto;fill:none;stroke:var(--gold);stroke-width:.5}
.island .display{position:relative}
.island-grid{position:relative;display:grid;gap:1.6rem 3rem;text-align:left;max-width:70rem;
  margin:3rem auto 0;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.island-grid p{margin:0;color:#EFE8DA}
.island-grid .note{font-family:var(--display);font-style:italic;font-size:1.3rem;color:var(--gold-light);
  grid-column:1/-1;max-width:40rem}

/* ---------- facilities ---------- */
.stay{max-width:74rem;margin:0 auto;padding:clamp(5rem,13vh,10rem) clamp(1.2rem,5vw,3rem)}
.facilities{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.facilities li{padding:.95rem .2rem;border-top:1px solid rgba(106,75,37,.22);font-size:.98em}
.facilities li::before{content:"◦";color:var(--gold-dark);margin-right:.7rem}
.facilities li:last-child{grid-column:1/-1}
.dist{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.95em}
.dist th,.dist td{text-align:left;padding:.85rem .6rem;border-bottom:1px solid rgba(106,75,37,.22);
  vertical-align:top;font-weight:300}
.dist thead th{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teak)}
.dist tbody th{font-weight:400}

/* ---------- enquiry ---------- */
.enquire{background:var(--green-deep);color:var(--cream);padding:clamp(5rem,13vh,10rem) clamp(1.2rem,5vw,3rem)}
.enquire .eyebrow{color:var(--gold-light)}
.enq-inner{max-width:74rem;margin:0 auto;display:grid;gap:clamp(2rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.calls{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:2rem}
.calls a{color:var(--gold-light);font-family:var(--display);font-size:1.5rem;text-decoration:none;
  border-bottom:1px solid rgba(218,194,138,.45)}
.enq-form{display:grid;gap:1rem}
.enq-form .row{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
.enq-form label{display:grid;gap:.4rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:#E6DECC}
.enq-form input,.enq-form textarea{font:inherit;font-size:1rem;padding:.7rem .8rem;border-radius:2px;
  border:1px solid rgba(243,238,228,.4);background:rgba(243,238,228,.06);color:var(--cream);width:100%}
.enq-form input::placeholder,.enq-form textarea::placeholder{color:rgba(243,238,228,.55)}
.enq-form .btn-solid{justify-self:start;background:var(--cream);color:var(--ink);border-color:var(--cream)}
.enq-form .btn-solid:hover{background:var(--gold-light)}
.form-note{margin:0;font-size:.85rem;color:var(--gold-light);min-height:1.2em}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#EFE8DA;text-align:center;padding:clamp(4rem,10vh,7rem) 1.5rem 3rem}
.foot-mark{width:min(48vw,190px);margin:0 auto 2rem}
.foot address{font-style:normal;line-height:1.9;color:#DCD3C1}
.foot-links{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:1.6rem;
  padding:0;margin:2rem 0 0}
.foot-links a{color:var(--gold-light);text-decoration:none;font-size:.82rem;letter-spacing:.16em;
  text-transform:uppercase;border-bottom:1px solid transparent}
.foot-links a:hover{border-bottom-color:currentColor}
.badges{display:flex;justify-content:center;gap:.7rem;flex-wrap:wrap;margin:2rem 0 0}
.badge{border:1px solid rgba(188,163,109,.5);border-radius:999px;padding:.35rem .9rem;font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light)}
.signoff{font-family:var(--display);font-style:italic;font-size:1.4rem;color:var(--gold-light);margin:2.4rem 0 0}

/* ---------- reveal animations ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
.word{display:inline-block;opacity:0;transform:translateY(.5em) rotate(1.5deg);
  transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.word.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav-links{display:none}
  .scene{min-height:auto}
  .scene-sticky{position:static;height:auto;grid-template-columns:1fr;padding-block:clamp(4rem,10vh,7rem)}
  .scene-sticky.reverse .frame{order:0}
  .frame img{height:112%;top:-6%}
  .rooms{height:auto}
  .rail-sticky{position:static;height:auto;padding-block:clamp(4rem,10vh,7rem)}
  .rail{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding-bottom:1rem;transform:none!important}
  .card{flex-basis:80vw;scroll-snap-align:center}
  .depth{grid-template-columns:1fr;gap:2.5rem}
  .d1,.d2,.d3,.d4,.d5{grid-column:1/-1;margin-top:0}
  .depth .clip img{height:112%;top:-6%}
  .card img{height:auto}
  .enq-form .row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  [data-reveal],.word{opacity:1!important;transform:none!important}
  .hero-media,.hero-copy,.hero-rings,.island-rings,.depth .clip img,.frame img,.rail{transform:none!important}
  .depth .clip img{height:100%;top:0}
  .hero-media{inset:0}
  .frame img{height:100%;top:0}
  .rail{overflow-x:auto}
  /* nothing is pinned when motion is off, so don't reserve scroll distance for it */
  .scene,.rooms{min-height:auto;height:auto}
  .scene-sticky,.rail-sticky{position:static;height:auto;padding-block:clamp(4rem,10vh,7rem)}
}