/* Olam by Plasseril — Vanta WAVES hero.
   One WebGL surface, behind the hero only. Everything below it is flat CSS. */

:root{
  --gold:#C09A5B;
  --gold-deep:#A67C3D;
  --gold-ink:#7E5C25;      /* brand gold, darkened for text on light grounds */
  --ink:#1A1712;
  --teak:#6A4B25;
  --teak-deep:#4C2E1A;
  --paper:#FBF8F3;
  --cream:#F3EEE4;
  --sand:#B5A188;
  --rule:rgba(76,46,26,.15);

  --display:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  --gutter:clamp(20px,5vw,80px);
  --max:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--teak-deep);
  font-family:var(--sans);font-weight:300;
  font-size:clamp(15px,1.05vw,17px);line-height:1.7;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

.skip{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--teak-deep);color:var(--paper);padding:.8em 1.4em}
.skip:focus{left:12px;top:12px}
:where(a,button):focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}

/* ---- nav ---- */
.nav{
  position:absolute;inset:0 0 auto 0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(16px,2.4vw,30px) var(--gutter);
}
.nav__mark img{width:clamp(96px,9vw,140px);height:auto}
.nav__cta{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream);text-decoration:none;
  border:1px solid rgba(243,238,228,.45);border-radius:999px;padding:.7em 1.4em;
  transition:border-color .35s,color .35s;
}
.nav__cta:hover{border-color:var(--gold);color:var(--gold)}

/* ---- hero: Vanta canvas is injected into this element ---- */
.hero{
  position:relative;min-height:100svh;
  display:grid;place-items:center;
  /* Fallback ground. If WebGL is unavailable or the CDN never lands, this deep
     green is what the reader sees — never a bare white box. */
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(69,71,54,.55),transparent 60%),
    linear-gradient(180deg,#2C3128 0%,#1F241C 55%,#171A14 100%);
  isolation:isolate;
  overflow:hidden;
}
/* Vanta injects a <canvas> as the first child; keep it behind the copy. */
.hero > canvas{position:absolute!important;inset:0;z-index:0}
.hero__inner{
  position:relative;z-index:2;
  max-width:min(860px,100%);padding:0 var(--gutter);text-align:center;
}
.hero__eyebrow{
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--cream);margin:0 0 1.6rem;
}
.hero__title{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.6rem,8vw,6.4rem);line-height:1.0;
  letter-spacing:-.015em;color:var(--paper);margin:0 0 1.3rem;
  text-shadow:0 2px 30px rgba(15,18,12,.55);
}
.hero__title em{font-style:italic;color:var(--gold)}
.hero__sub{
  color:var(--cream);margin:0 0 2.4rem;
  font-size:clamp(1rem,1.5vw,1.2rem);letter-spacing:.05em;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hero__cue{
  position:absolute;left:50%;bottom:28px;translate:-50% 0;z-index:2;
  width:1px;height:48px;background:linear-gradient(var(--gold),transparent);
}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;
  padding:.95em 1.7em;border-radius:999px;text-decoration:none;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(243,238,228,.45);color:var(--cream);
  transition:background .35s,color .35s,border-color .35s;
}
.btn:hover{border-color:var(--gold);color:var(--gold)}
.btn--solid{background:var(--gold);border-color:var(--gold);color:#231C11;font-weight:500}
.btn--solid:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#231C11}

/* ---- shared ---- */
.label{
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-ink);margin:0 0 1.4em;font-weight:500;
}
.label--light{color:var(--gold)}
.h2{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.9rem,4vw,3.3rem);line-height:1.1;
  color:var(--teak-deep);margin:0 0 1.4rem;
}

/* ---- concept ---- */
.concept{
  max-width:var(--max);margin:0 auto;
  padding:clamp(80px,14vh,170px) var(--gutter) clamp(50px,8vh,100px);
}
.concept__lead{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.5rem,3.4vw,2.9rem);line-height:1.25;
  color:var(--teak-deep);margin:0 0 2rem;max-width:24ch;
}
.concept__sub{max-width:52ch;margin:0;color:#4A3A29;font-size:clamp(1rem,1.3vw,1.14rem)}

/* ---- show ---- */
.show{max-width:var(--max);margin:0 auto;padding:clamp(30px,6vh,70px) var(--gutter)}
.show__fig{margin:0 0 clamp(14px,2vw,26px)}
.show__fig img{width:100%;height:auto;border-radius:2px}
/* --sand is a dark-ground colour; on paper it lands at 2.35:1. Captions use
   the teak tone instead, which stays quiet but readable. */
.show__fig figcaption{
  margin-top:12px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--teak);
}
.show__pair{display:grid;gap:clamp(14px,2vw,26px);grid-template-columns:1fr}
@media (min-width:900px){.show__pair{grid-template-columns:1fr 1fr}}

/* ---- spaces ---- */
.spaces{max-width:var(--max);margin:0 auto;padding:clamp(70px,12vh,150px) var(--gutter)}
.spaces__list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px;
}
.spaces__list li{
  border:1px solid var(--rule);border-radius:999px;
  padding:.6em 1.3em;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teak-deep);background:var(--cream);
}

/* ---- rooms ---- */
.rooms{max-width:var(--max);margin:0 auto;padding:0 var(--gutter) clamp(70px,12vh,150px)}
.rooms__grid{display:grid;gap:clamp(12px,1.8vw,24px);grid-template-columns:1fr}
@media (min-width:800px){.rooms__grid{grid-template-columns:1fr 1fr}}
.rooms__item{margin:0;overflow:hidden;border-radius:2px}
.rooms__item img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

/* ---- facilities ---- */
.facilities{max-width:var(--max);margin:0 auto;padding:0 var(--gutter) clamp(80px,13vh,160px)}
.facilities__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;border-top:1px solid var(--rule);
}
@media (min-width:700px){.facilities__list{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.facilities__list{grid-template-columns:1fr 1fr 1fr}}
.facilities__list li{
  padding:1.05em .2em;border-bottom:1px solid var(--rule);
  font-size:clamp(.95rem,1.2vw,1.05rem);color:#4A3A29;
}
.facilities__list .wide{grid-column:1/-1}

/* ---- enquire ---- */
.enquire{padding:0 var(--gutter) clamp(70px,12vh,140px)}
.enquire__box{
  max-width:var(--max);margin:0 auto;
  background:var(--ink);color:var(--cream);border-radius:4px;
  padding:clamp(36px,6vw,90px);
}
.enquire__title{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.08;
  color:var(--paper);margin:0 0 1rem;
}
.enquire__text{max-width:48ch;color:#DED6C8;margin:0 0 2.2rem}
.enquire__actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 2.4rem}
.enquire__addr{font-style:normal;color:var(--sand);margin:0 0 1.4rem;line-height:1.9}
.enquire__links{display:flex;gap:26px;flex-wrap:wrap;margin:0}
.enquire__links a{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  text-decoration:none;border-bottom:1px solid rgba(192,154,91,.35);padding-bottom:4px;
}
.enquire__links a:hover{border-bottom-color:var(--gold)}

/* ---- footer ---- */
.foot{
  border-top:1px solid var(--rule);
  padding:clamp(50px,9vh,110px) var(--gutter);
  display:grid;justify-items:center;gap:20px;text-align:center;
}
.foot__mark{width:clamp(88px,10vw,126px);height:auto}
.foot__signoff{
  font-family:var(--display);font-size:clamp(1.4rem,3vw,2.2rem);
  color:var(--gold-ink);margin:0;
}

/* ---- reduced motion: Vanta is torn down in JS; the gradient stays ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}