:root{
  --plaster:#E9E3D4;        /* limewash base */
  --plaster-deep:#DCD2BF;   /* alt band */
  --ink:#23201B;            /* warm near-black text */
  --muted:#6C6455;          /* secondary text on plaster */
  --forest:#21332A;         /* deep botanical green */
  --forest-2:#2E4A3A;       /* green gradient stop */
  --cream:#EDE7D8;          /* text on green */
  --cream-muted:#B9BCAC;    /* secondary text on green */
  --brass:#A6803F;          /* metallic accent */
  --brass-soft:#C7A461;     /* brass on dark */
  --line:rgba(35,32,27,.14);
  --line-dark:rgba(237,231,216,.16);
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--plaster);
  color:var(--ink);
  font-family:"Mulish",system-ui,sans-serif;
  font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,64px)}
.eyebrow{
  font-family:"Mulish";font-weight:600;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.3em;color:var(--brass);
  display:inline-flex;align-items:center;gap:.9em;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--brass);display:inline-block;opacity:.8}
h1,h2,h3{font-family:"Fraunces",serif;font-weight:300;line-height:1.06;letter-spacing:-.012em}
p{max-width:60ch}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- nav ---------- */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(22px,5vw,64px);
  transition:background .5s var(--ease),padding .5s var(--ease),box-shadow .5s var(--ease);
}
header.nav.scrolled{
  background:rgba(233,227,212,.92);
  backdrop-filter:blur(10px);
  padding:14px clamp(22px,5vw,64px);
  box-shadow:0 1px 0 var(--line);
}
.brand{font-family:"Fraunces",serif;font-weight:400;font-size:1.32rem;letter-spacing:.02em;color:var(--cream);transition:color .5s var(--ease)}
.brand b{font-weight:400;font-style:italic}
header.nav.scrolled .brand{color:var(--ink)}
nav.links{display:flex;align-items:center;gap:34px}
nav.links a{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;font-weight:600;
  color:var(--cream);opacity:.9;transition:color .5s var(--ease),opacity .3s
}
header.nav.scrolled nav.links a{color:var(--ink)}
nav.links a:not(.btn):hover{opacity:.6}
.btn{
  border:1px solid var(--cream);border-radius:2px;padding:11px 20px;color:var(--cream);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .5s
}
.btn:hover{background:var(--cream);color:var(--forest)}
header.nav.scrolled .btn{border-color:var(--ink)}
header.nav.scrolled .btn:hover{background:var(--ink);color:var(--plaster)}
.menu-toggle{display:none;background:none;border:0;color:var(--cream);cursor:pointer}
header.nav.scrolled .menu-toggle{color:var(--ink)}

/* ---------- hero (video placeholder) ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  color:var(--cream);overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(46,74,58,.85), transparent 60%),
    linear-gradient(160deg,#1c2c24 0%,#233a2e 46%,#1a2820 100%);
}
.hero .grain{position:absolute;inset:0;opacity:.06;mix-blend-mode:overlay;pointer-events:none}
.hero .video-note{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:14px;opacity:.5;
  text-align:center;
}
.hero .video-note .ring{
  width:78px;height:78px;border:1px solid var(--brass-soft);border-radius:50%;
  display:grid;place-items:center;
}
.hero .video-note .ring::after{content:"";border-left:15px solid var(--brass-soft);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:5px}
.hero .video-note span{font-size:.66rem;text-transform:uppercase;letter-spacing:.28em;color:var(--brass-soft)}
.hero-inner{position:relative;z-index:2;padding-bottom:clamp(52px,9vh,110px);width:100%}
.hero .kicker{margin-bottom:26px}
.hero h1{
  font-size:clamp(2.9rem,8vw,6.6rem);font-weight:300;max-width:16ch;
  text-shadow:0 2px 40px rgba(0,0,0,.25)
}
.hero h1 em{font-style:italic;color:var(--brass-soft)}
.hero .scroll{position:absolute;right:clamp(22px,5vw,64px);bottom:36px;z-index:2;
  font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--cream);opacity:.75;
  display:flex;align-items:center;gap:12px}
.hero .scroll .bar{width:1px;height:44px;background:linear-gradient(var(--brass-soft),transparent);display:block}

/* ---------- section base ---------- */
section{padding:clamp(84px,12vh,150px) 0}
.section-head{max-width:70ch}
.section-head .eyebrow{margin-bottom:26px}

/* ---------- about ---------- */
.about{background:var(--plaster)}
.about .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,6vw,84px);align-items:start;margin-top:8px}
.about h2{font-size:clamp(2.2rem,5vw,4.2rem);max-width:14ch}
.about h2 em{font-style:italic}
.about .body p+p{margin-top:1.3em}
.about .body p{color:#463f34;max-width:52ch}
.about .lede{font-family:"Fraunces";font-weight:300;font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.5;color:var(--ink);max-width:30ch}

/* pull quote band */
.quote{
  margin-top:clamp(70px,10vh,130px);
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(46,74,58,.9), transparent 55%),
    linear-gradient(155deg,#21332a,#1a2820);
  color:var(--cream);border-radius:3px;overflow:hidden;position:relative;
  padding:clamp(56px,9vw,110px) clamp(30px,6vw,90px);
}
.quote .mark{font-family:"Fraunces";font-size:9rem;line-height:.5;color:var(--brass-soft);opacity:.35;position:absolute;top:38px;left:34px}
.quote blockquote{
  font-family:"Fraunces";font-weight:300;font-style:italic;
  font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.16;max-width:20ch;position:relative;z-index:2
}
.quote blockquote b{font-weight:400;font-style:normal;color:var(--brass-soft)}

/* ---------- collections (index of worlds) ---------- */
.collections{background:var(--plaster-deep)}
.collections .section-head{margin-bottom:clamp(40px,6vw,74px)}
.collections h2{font-size:clamp(2.2rem,5vw,4.2rem);max-width:16ch}
.villa{
  display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(26px,5vw,72px);align-items:center;
  padding:clamp(34px,5vw,58px) 0;border-top:1px solid var(--line)
}
.villa:last-child{border-bottom:1px solid var(--line)}
.villa.rev .media{order:2}
.villa .media{
  position:relative;aspect-ratio:4/3;border-radius:2px;overflow:hidden;
  background:linear-gradient(150deg,#e4dcc9,#d3c8b2);
  display:grid;place-items:center;
}
.villa .media svg{width:64%;height:64%;opacity:.5;transition:opacity .6s var(--ease),transform 1.1s var(--ease)}
.villa:hover .media svg{opacity:.72;transform:scale(1.04)}
.villa .media .tag{position:absolute;bottom:14px;left:16px;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);opacity:.7}
.villa .num{font-family:"Fraunces";font-weight:300;font-size:clamp(1rem,1.4vw,1.15rem);color:var(--brass);letter-spacing:.1em}
.villa .loc{font-size:.68rem;text-transform:uppercase;letter-spacing:.24em;color:var(--muted);margin:16px 0 12px}
.villa h3{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:300}
.villa .tagline{font-family:"Fraunces";font-style:italic;font-weight:300;font-size:clamp(1.05rem,1.7vw,1.35rem);color:#4a4236;margin-top:12px;max-width:34ch}
.villa .desc{margin-top:16px;color:#514939;max-width:44ch;font-size:.98rem}
.villa .more{
  display:inline-flex;align-items:center;gap:11px;margin-top:26px;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;font-weight:600;color:var(--ink)
}
.villa .more .ln{width:30px;height:1px;background:var(--brass);transition:width .4s var(--ease)}
.villa:hover .more .ln{width:52px}

/* ---------- guest stories ---------- */
.stories{background:var(--plaster)}
.stories .section-head{margin-bottom:clamp(40px,6vw,66px)}
.stories h2{font-size:clamp(2.2rem,5vw,4.2rem)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px)}
.card{
  background:var(--plaster-deep);border:1px solid var(--line);border-radius:3px;
  padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;gap:20px;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)
}
.card:hover{transform:translateY(-5px);box-shadow:0 24px 50px -30px rgba(35,32,27,.35)}
.card .stars{color:var(--brass);letter-spacing:.22em;font-size:.85rem}
.card q{font-family:"Fraunces";font-style:italic;font-weight:300;font-size:1.22rem;line-height:1.5;color:var(--ink);quotes:none}
.card .by{margin-top:auto;font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.card .by b{color:var(--ink);font-weight:600}
.sample-note{margin-top:26px;font-size:.72rem;letter-spacing:.04em;color:var(--muted);opacity:.8}

/* ---------- recognition ---------- */
.recognition{
  background:
    radial-gradient(120% 120% at 85% 0%, rgba(46,74,58,.85), transparent 55%),
    linear-gradient(155deg,#1f312a,#182620);
  color:var(--cream)
}
.recognition .eyebrow{color:var(--brass-soft)}
.recognition .eyebrow::before{background:var(--brass-soft)}
.recognition h2{font-size:clamp(2.2rem,5vw,4rem);color:var(--cream);max-width:16ch}
.recognition .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:center;margin-top:10px}
.recognition p{color:var(--cream-muted);max-width:48ch}
.stats{display:flex;gap:clamp(30px,5vw,64px);margin-top:44px;flex-wrap:wrap}
.stat .n{font-family:"Fraunces";font-weight:300;font-size:clamp(2.4rem,4vw,3.4rem);color:var(--brass-soft)}
.stat .l{font-size:.66rem;text-transform:uppercase;letter-spacing:.2em;color:var(--cream-muted);margin-top:6px}
.logos{display:flex;flex-direction:column;gap:22px}
.logo-row{display:flex;flex-wrap:wrap;gap:16px}
.logo{
  border:1px solid var(--line-dark);border-radius:2px;padding:16px 22px;flex:1 1 130px;min-width:120px;
  text-align:center;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-muted);
  display:flex;align-items:center;justify-content:center;min-height:64px
}

/* ---------- footer ---------- */
footer.site{
  background:linear-gradient(180deg,#182620,#12190f);color:var(--cream-muted);
  padding:clamp(66px,9vw,110px) 0 40px
}
footer .top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(30px,5vw,70px);padding-bottom:clamp(46px,6vw,72px);border-bottom:1px solid var(--line-dark)}
footer .brand-f{font-family:"Fraunces";font-size:1.7rem;color:var(--cream);font-weight:400}
footer .brand-f i{color:var(--brass-soft)}
footer .tagline-f{margin-top:18px;max-width:34ch;font-size:.95rem;line-height:1.7}
footer h4{font-family:"Mulish";font-weight:600;font-size:.68rem;text-transform:uppercase;letter-spacing:.24em;color:var(--brass-soft);margin-bottom:20px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:12px}
footer ul a{font-size:.92rem;color:var(--cream-muted);transition:color .3s}
footer ul a:hover{color:var(--cream)}
footer .bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:30px;font-size:.74rem;letter-spacing:.06em}
footer .bottom .socials{display:flex;gap:22px}
footer .book-cta{
  display:inline-flex;align-items:center;gap:12px;margin-top:26px;
  border:1px solid var(--brass-soft);border-radius:2px;padding:13px 24px;
  color:var(--cream);font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;font-weight:600;
  transition:background .35s var(--ease),color .35s var(--ease)
}
footer .book-cta:hover{background:var(--brass-soft);color:var(--forest)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  nav.links a:not(.btn){display:none}
  .menu-toggle{display:block}
  .about .grid,.recognition .grid,.villa{grid-template-columns:1fr;gap:30px}
  .villa.rev .media{order:0}
  .cards{grid-template-columns:1fr}
  footer .top{grid-template-columns:1fr;gap:40px}
}
@media(max-width:560px){
  body{font-size:16px}
  .stats{gap:26px}
  footer .bottom{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   BOOKING BAR (Alaric widget) — brand overrides
   Alaric ships its own CSS from static.alaric.id; these rules
   sit after it and win. Scoped to .bookbar so nothing leaks.
   ============================================================ */
.bookbar{
  background:var(--plaster-deep);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:26px 0;
  position:relative;
  z-index:5;
}
.bookbar .wrap{max-width:var(--maxw)}

.bookbar #hbook .section{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0}
.bookbar #hbook .col{flex:1 1 160px;min-width:0;margin:0;width:auto}
.bookbar #hbook .col.span_1_of_8{flex:0 1 150px}

.bookbar #hbook select,
.bookbar #hbook input[type="text"]{
  width:100%;
  height:52px;
  padding:0 16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:0;
  color:var(--ink);
  font-family:"Mulish",system-ui,sans-serif !important;
  font-size:.82rem;
  font-weight:400 !important;
  letter-spacing:.04em;
  text-transform:uppercase;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
}
.bookbar #hbook input::placeholder{color:var(--muted);opacity:1}

/* the property dropdown is the signature field — Fraunces italic */
.bookbar #hbook select#hotelH{
  font-family:"Fraunces",serif !important;
  font-style:italic;
  font-weight:300 !important;
  font-size:.95rem;
  letter-spacing:.02em;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23A6803F' stroke-width='1.4'><path d='M1 1.5 6 6.5 11 1.5'/></svg>");
  background-repeat:no-repeat;
  background-position:right 16px center;
  padding-right:40px;
}

.bookbar #hbook input[type="submit"]{
  width:100%;
  height:52px;
  border:0;
  cursor:pointer;
  background:var(--brass);
  color:var(--plaster);
  font-family:"Mulish",system-ui,sans-serif !important;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  transition:background .35s var(--ease);
}
.bookbar #hbook input[type="submit"]:hover{background:var(--ink)}

/* datepicker popup */
.ui-datepicker{
  font-family:"Mulish",system-ui,sans-serif;
  background:var(--plaster);
  border:1px solid var(--line);
  padding:10px;
  z-index:9999 !important;
}
.ui-datepicker .ui-datepicker-title{font-family:"Fraunces",serif;font-weight:400}
.ui-datepicker td a{color:var(--ink)}
.ui-datepicker .ui-state-active{background:var(--brass);color:var(--plaster)}

@media (max-width:860px){
  .bookbar{padding:20px 0}
  .bookbar #hbook .col,
  .bookbar #hbook .col.span_1_of_8{flex:1 1 100%}
}
/* ============================================================
   DATEPICKER — brand skin
   Dibidik lewat #ui-datepicker-div (ID) supaya menang
   melawan selektor bawaan jQuery UI yang pakai class ganda.
   ============================================================ */
#ui-datepicker-div.ui-datepicker{
  background:var(--plaster) !important;
  border:1px solid var(--line) !important;
  border-radius:0 !important;
  padding:16px !important;
  font-family:"Mulish",system-ui,sans-serif !important;
  box-shadow:0 18px 50px rgba(35,32,27,.16);
  z-index:9999 !important;
}
#ui-datepicker-div .ui-datepicker-group{padding:0 10px}

#ui-datepicker-div .ui-datepicker-header{
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--line) !important;
  border-radius:0 !important;
  padding:0 0 12px !important;
}
#ui-datepicker-div .ui-datepicker-title,
#ui-datepicker-div .ui-datepicker-title span{
  font-family:"Fraunces",serif !important;
  font-weight:400 !important;
  font-size:1rem !important;
  color:var(--ink) !important;
}

#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next{
  background:transparent !important;
  border:0 !important;
  cursor:pointer;
  top:0 !important;
}
#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span{
  background-image:none !important;
  position:static !important;
  text-indent:0 !important;
  overflow:visible !important;
  width:auto !important;height:auto !important;
  margin:0 !important;
  font-size:0;
  color:var(--brass) !important;
}
#ui-datepicker-div .ui-datepicker-prev span::before{content:"\2039";font-size:22px;line-height:1}
#ui-datepicker-div .ui-datepicker-next span::before{content:"\203A";font-size:22px;line-height:1}

#ui-datepicker-div th{
  font-family:"Mulish",system-ui,sans-serif !important;
  font-size:.62rem !important;
  font-weight:600 !important;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted) !important;
  border:0 !important;
  padding:12px 0 8px !important;
}
#ui-datepicker-div td{border:0 !important;padding:1px !important}

#ui-datepicker-div td a,
#ui-datepicker-div td span{
  background:transparent !important;
  border:0 !important;
  color:var(--ink) !important;
  font-family:"Mulish",system-ui,sans-serif !important;
  font-size:.82rem !important;
  font-weight:400 !important;
  text-align:center !important;
  padding:9px 0 !important;
  transition:background .2s,color .2s;
}
#ui-datepicker-div td a:hover{background:var(--plaster-deep) !important}

#ui-datepicker-div td.ui-datepicker-today a{
  background:transparent !important;
  color:var(--brass) !important;
  font-weight:700 !important;
}
#ui-datepicker-div td.ui-datepicker-current-day a,
#ui-datepicker-div td a.ui-state-active{
  background:var(--brass) !important;
  color:var(--plaster) !important;
  font-weight:600 !important;
}
#ui-datepicker-div .ui-state-disabled{opacity:.28 !important}
/* ---------- recognition logos (real assets) ---------- */
.logo{
  position:relative;
  overflow:hidden;
  padding:16px;
  height:clamp(118px,13vw,158px);
  min-height:0;
  background:rgba(233,227,212,.02);
  border:1px solid var(--line-dark);
  transition:background .45s var(--ease),
             border-color .45s ease,
             transform .45s var(--ease);
}

/* garis brass yang menyapu dari kiri saat hover */
.logo::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:1px;
  background:var(--brass-soft);
  transition:width .6s var(--ease);
}
.logo:hover{
  background:rgba(233,227,212,.05);
  border-color:rgba(233,227,212,.30);
  transform:translateY(-2px);
}
.logo:hover::after{width:100%}

.logo img{
  width:auto;
  height:auto;
  object-fit:contain;
  opacity:.80;
  transition:opacity .4s ease;
}
.logo:hover img{opacity:1}

/* rasio: logo memanjang vs logo mendekati kotak */
.logo img.is-wide{max-width:86%;max-height:54%}
.logo img.is-square{max-width:64%;max-height:84%}