/* =====================================================
   CASA LEMBAYUNG — Design Tokens
   Palette drawn from the foil-stamped logo:
   warm paper ivory, aged copper, deep espresso ink,
   with a private-pool teal reserved for booking moments.
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Public+Sans:wght@300;400;500;600;700&display=swap');

:root{
  /* color */
  --ink:        #33281D;
  --ink-soft:   #6B5A46;
  --paper:      #F6F1E6;
  --paper-alt:  #EEE5D2;
  --paper-deep: #E4D8BE;
  --copper:     #A8763E;
  --copper-deep:#7C4E24;
  --copper-lt:  #D8B989;
  --pool:       #2F4A44;
  --pool-lt:    #4F6E63;
  --line:       rgba(51,40,29,0.14);

  /* type */
  --display: 'Fraunces', serif;
  --body:    'Public Sans', sans-serif;

  /* scale */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.7rem + 2vw, 3.2rem);
  --step-4:  clamp(2.8rem, 2.1rem + 3.4vw, 4.6rem);

  --radius: 6px;
  --arch-w: 420px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--step-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

.container{
  max-width:1180px;
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 4vw, 3rem);
}

.eyebrow{
  font-family:var(--body);
  font-size:var(--step--1);
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--copper-deep);
  font-weight:600;
}

h1,h2,h3{
  font-family:var(--display);
  font-weight:500;
  color:var(--ink);
  letter-spacing:-0.01em;
}

.section-title{
  font-size:var(--step-2);
  margin-bottom:0.5rem;
}

.section-lede{
  color:var(--ink-soft);
  max-width:46ch;
  font-size:var(--step-0);
}

.section-head{
  margin-bottom:2.75rem;
}
.section-head.center{ text-align:center; margin-inline:auto; }

section{ padding-block:clamp(4rem, 8vw, 7rem); }
.alt{ background:var(--paper-alt); }

/* ---------- arch divider (signature motif) ---------- */
.arch-divider{
  width:100%;
  height:56px;
  display:block;
  color:var(--paper-alt);
}
.arch-divider path{ fill:currentColor; }
.alt + section .arch-divider,
section + .alt{ position:relative; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.9rem 1.7rem;
  border-radius:999px;
  font-family:var(--body);
  font-size:var(--step--1);
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:600;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-primary{
  background:linear-gradient(135deg, var(--copper-lt), var(--copper) 55%, var(--copper-deep));
  color:#fff;
  box-shadow:0 6px 20px -6px rgba(124,78,36,0.55);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px -6px rgba(124,78,36,0.6); }

.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--line);
}
.btn-ghost:hover{ border-color:var(--copper); color:var(--copper-deep); }

.btn-pool{
  background:var(--pool);
  color:var(--paper);
  box-shadow:0 6px 20px -6px rgba(47,74,68,0.5);
}
.btn-pool:hover{ transform:translateY(-2px); background:var(--pool-lt); }

/* ================= NAV ================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(246,241,230,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:0.85rem;
}
.nav-brand{ display:flex; align-items:center; gap:0.6rem; }
.nav-brand img{ height:38px; width:auto; }
.nav-brand span{
  font-family:var(--display); font-size:1.15rem; letter-spacing:0.02em; color:var(--ink);
}
.nav-links{ display:flex; align-items:center; gap:2rem; }
.nav-links a{
  font-size:var(--step--1);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:600;
  transition:color .2s ease;
}
.nav-links a:hover{ color:var(--copper-deep); }
.nav-toggle{ display:none; background:none; border:0; font-size:1.5rem; color:var(--ink); cursor:pointer; }

@media (max-width:860px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper); flex-direction:column; align-items:flex-start;
    padding:1.5rem clamp(1.25rem,4vw,3rem); gap:1.1rem;
    border-bottom:1px solid var(--line);
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-toggle{ display:block; }
}

/* ================= HERO ================= */
.hero{
  position:relative;
  padding-top:clamp(3rem,7vw,5rem);
  padding-bottom:clamp(3rem,7vw,5rem);
  overflow:hidden;
}
.hero .container{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:3rem;
  align-items:center;
}
.hero-copy .eyebrow{ margin-bottom:1.1rem; display:block; }
.hero-copy h1{
  font-size:var(--step-4);
  line-height:1.04;
  margin-bottom:1.25rem;
}
.hero-copy h1 em{
  font-style:italic;
  color:var(--copper-deep);
}
.hero-copy p{
  color:var(--ink-soft);
  max-width:42ch;
  margin-bottom:2rem;
}
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }

.hero-arch-wrap{
  position:relative;
  display:flex; justify-content:center;
}
.hero-arch{
  width:min(100%, var(--arch-w));
  aspect-ratio:4/5;
  position:relative;
  border-radius:220px 220px 12px 12px;
  overflow:hidden;
  border:3px solid var(--copper);
  box-shadow:0 30px 60px -25px rgba(51,40,29,0.35);
}
.hero-arch .scene{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.25), transparent 55%),
    linear-gradient(180deg, #EFE3C6 0%, #E3CFA0 38%, #2F4A44 38%, #24382F 100%);
}
.hero-arch .palm{
  position:absolute; left:50%; bottom:38%; transform:translateX(-50%);
  width:56%;
}
.hero-arch .caption{
  position:absolute; bottom:14px; left:0; right:0;
  text-align:center;
  font-size:var(--step--1);
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#fff;
  opacity:0.85;
}
.hero-badge{
  position:absolute;
  bottom:-18px; left:-18px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:999px;
  padding:0.7rem 1.2rem;
  font-size:var(--step--1);
  letter-spacing:0.05em;
  box-shadow:0 12px 26px -12px rgba(51,40,29,0.3);
}
.hero-badge b{ color:var(--copper-deep); }

@media (max-width:900px){
  .hero .container{ grid-template-columns:1fr; }
  .hero-copy{ order:2; }
  .hero-arch-wrap{ order:1; }
}

/* ================= ABOUT ================= */
.about-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:3.5rem;
  align-items:center;
}
.about-figure{
  border-radius:16px;
  overflow:hidden;
  aspect-ratio:1/1.05;
  position:relative;
  background:linear-gradient(160deg,#EFE3C6, #D8C39C 55%, var(--pool) 100%);
  border:1px solid var(--line);
}
.about-figure::after{
  content:"villa photo";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.7);
  font-size:var(--step--1); letter-spacing:0.15em; text-transform:uppercase;
}
.about-copy p{ color:var(--ink-soft); margin-bottom:1.1rem; }
.about-stats{
  display:flex; gap:2.2rem; margin-top:1.8rem;
  flex-wrap:wrap;
}
.about-stats div{ border-left:2px solid var(--copper); padding-left:0.9rem; }
.about-stats b{ display:block; font-family:var(--display); font-size:var(--step-1); color:var(--ink); }
.about-stats span{ font-size:var(--step--1); color:var(--ink-soft); }

@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; } }

/* ================= AMENITIES ================= */
.amenities-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:1.5rem;
}
.amenity{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:1.8rem 1.6rem;
  transition:transform .2s ease, box-shadow .2s ease;
}
.amenity:hover{ transform:translateY(-4px); box-shadow:0 14px 30px -18px rgba(51,40,29,0.35); }
.amenity svg{ width:30px; height:30px; color:var(--copper); margin-bottom:1rem; }
.amenity h3{ font-size:var(--step-0); font-family:var(--body); font-weight:600; margin-bottom:0.35rem; }
.amenity p{ color:var(--ink-soft); font-size:var(--step--1); }

/* ================= RATES ================= */
.rates-wrap{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:3rem;
}
.rate-card{
  background:var(--ink);
  color:var(--paper);
  border-radius:20px;
  padding:2.6rem;
  position:relative;
  overflow:hidden;
}
.rate-card::before{
  content:"";
  position:absolute; right:-40px; top:-40px;
  width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle, rgba(216,185,137,0.35), transparent 70%);
}
.rate-price{ font-family:var(--display); font-size:var(--step-4); margin:0.4rem 0 0.2rem; }
.rate-price span{ font-size:var(--step-0); font-family:var(--body); color:var(--copper-lt); }
.rate-card ul{ margin-top:1.6rem; display:flex; flex-direction:column; gap:0.7rem; }
.rate-card li{ font-size:var(--step--1); color:#E7DFCB; display:flex; gap:0.6rem; }
.rate-card li::before{ content:"✓"; color:var(--copper-lt); }

.policy-list{ display:flex; flex-direction:column; gap:1.4rem; }
.policy-item{ display:flex; gap:1rem; }
.policy-item .arch-mark{ flex:none; width:34px; height:38px; color:var(--copper); }
.policy-item h3{ font-size:var(--step-0); font-family:var(--body); font-weight:600; margin-bottom:0.2rem; }
.policy-item p{ color:var(--ink-soft); font-size:var(--step--1); }

@media (max-width:900px){ .rates-wrap{ grid-template-columns:1fr; } }

/* ================= BOOKING ================= */
.booking{ background:var(--pool); color:var(--paper); }
.booking .eyebrow{ color:var(--copper-lt); }
.booking .section-title{ color:var(--paper); }
.booking .section-lede{ color:#CBD8D3; }

.booking-grid{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:2.5rem;
  margin-top:2.5rem;
  align-items:stretch;
}
.calendar-frame{
  background:var(--paper);
  border-radius:16px;
  overflow:hidden;
  min-height:460px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,0.4);
}
.calendar-frame iframe{ width:100%; height:100%; min-height:460px; border:0; display:block; }

.booking-steps{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:16px;
  padding:2rem;
  display:flex; flex-direction:column; gap:1.3rem;
}
.step{ display:flex; gap:0.9rem; }
.step .num{
  flex:none; width:28px; height:28px; border-radius:50%;
  background:var(--copper-lt); color:var(--pool);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:600; font-size:0.85rem;
}
.step h3{ font-size:var(--step--1); font-family:var(--body); font-weight:600; letter-spacing:0.03em; text-transform:uppercase; color:var(--paper); margin-bottom:0.15rem; }
.step p{ font-size:var(--step--1); color:#CBD8D3; }
.booking-steps .btn{ margin-top:0.4rem; align-self:flex-start; }

@media (max-width:900px){ .booking-grid{ grid-template-columns:1fr; } .calendar-frame{ min-height:340px; } .calendar-frame iframe{ min-height:340px; } }

/* ================= LOCATION ================= */
.location-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center;
}
.map-frame{ border-radius:16px; overflow:hidden; aspect-ratio:4/3; border:1px solid var(--line); }
.map-frame iframe{ width:100%; height:100%; border:0; }
.location-list{ display:flex; flex-direction:column; gap:1rem; margin-top:1.5rem; }
.location-list li{ display:flex; justify-content:space-between; border-bottom:1px dashed var(--line); padding-bottom:0.6rem; font-size:var(--step--1); color:var(--ink-soft); }
.location-list b{ color:var(--ink); font-weight:600; }
@media (max-width:860px){ .location-grid{ grid-template-columns:1fr; } }

/* ================= FAQ ================= */
.faq-list{ max-width:820px; margin-inline:auto; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; gap:1rem;
  padding:1.4rem 0; font-family:var(--body); font-size:var(--step-0); font-weight:600; color:var(--ink);
}
.faq-q .arch-mark{ flex:none; width:20px; height:22px; color:var(--copper); }
.faq-q .plus{ margin-left:auto; font-size:1.3rem; color:var(--copper); transition:transform .25s ease; }
.faq-item.open .faq-q .plus{ transform:rotate(45deg); }
.faq-a{
  max-height:0; overflow:hidden; transition:max-height .3s ease;
  color:var(--ink-soft); font-size:var(--step--1);
}
.faq-a-inner{ padding-bottom:1.4rem; padding-left:2.9rem; max-width:60ch; }

/* ================= CONTACT / FOOTER ================= */
.contact{ text-align:center; }
.contact-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1.8rem; }

.site-footer{
  background:var(--ink);
  color:#D9CFBE;
  padding-block:3rem;
}
.footer-grid{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem;
}
.footer-brand{ display:flex; align-items:center; gap:0.7rem; }
.footer-brand img{ height:32px; filter:brightness(0) invert(1); opacity:0.9; }
.footer-brand span{ font-family:var(--display); font-size:1.05rem; color:#F1E9D8; }
.footer-links{ display:flex; gap:1.6rem; }
.footer-links a{ font-size:var(--step--1); color:#C6BBA6; }
.footer-links a:hover{ color:var(--copper-lt); }
.footer-note{ font-size:0.78rem; color:#8B8070; margin-top:1.6rem; text-align:center; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn-primary:hover, .btn-pool:hover, .amenity:hover{ transform:none; }
}

:focus-visible{ outline:2px solid var(--copper-deep); outline-offset:3px; }