
:root{--ink:#1b271f;--cream:#f5f1e8;--leaf:#315b3d;--leaf2:#264a32;--paper:#fff;--muted:#667269;--line:#d2d9d1;--shadow:0 18px 55px rgba(17,28,20,.14)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--cream);color:var(--ink);line-height:1.62}body.no-scroll{overflow:hidden}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.wrap{width:min(1180px,92%);margin:auto}.site-header{position:absolute;z-index:30;left:0;right:0;top:0;color:#fff;padding:24px 0}.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font-family:Georgia,serif;font-size:1.3rem;letter-spacing:.055em}.navlinks{display:flex;gap:24px;align-items:center}.navlinks>a:not(.btn){font-size:.92rem}.menu-btn{display:none;background:transparent;border:1px solid rgba(255,255,255,.65);color:#fff;border-radius:999px;padding:9px 14px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border:1px solid currentColor;border-radius:999px;font-weight:700;cursor:pointer}.btn.solid{background:var(--leaf);border-color:var(--leaf);color:#fff}.btn.solid:hover{background:var(--leaf2)}.btn.ghost{color:#fff}.hero{min-height:92vh;display:grid;align-items:end;color:#fff;background:linear-gradient(90deg,rgba(0,0,0,.57),rgba(0,0,0,.14)),url('/assets/images/pool.webp') center/cover}.hero-content{padding:180px 0 92px;max-width:780px}.eyebrow{text-transform:uppercase;letter-spacing:.17em;font-size:.75rem;font-weight:700}.hero h1,.section h2,.villa-hero h1,.guide-hero h1{font-family:Georgia,serif;font-weight:400;line-height:1.02;margin:.22em 0}.hero h1{font-size:clamp(3.4rem,8vw,7rem)}.hero p{font-size:1.18rem;max-width:650px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:27px}.section{padding:92px 0}.intro{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:end}.section h2{font-size:clamp(2.6rem,5vw,4.9rem)}.section h3{font-family:Georgia,serif;font-size:1.8rem;font-weight:400}.muted{color:var(--muted)}.booking-bar{background:#fff;color:var(--ink);margin-top:-38px;position:relative;z-index:5;box-shadow:var(--shadow)}.booking-inner{display:grid;grid-template-columns:1.2fr repeat(3,1fr) auto;align-items:stretch}.booking-title,.field,.booking-submit{padding:22px;border-right:1px solid #dfe3dd}.booking-title{display:flex;flex-direction:column;justify-content:center}.field label{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}.field input,.field select{width:100%;border:0;background:transparent;font:inherit;color:var(--ink);outline:none}.booking-submit{border:0;background:var(--leaf);color:#fff;font-weight:700;cursor:pointer}.booking-message{padding:0 22px 18px;font-size:.9rem}.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:40px}.stat{padding:22px 0;border-right:1px solid var(--line)}.stat:last-child{border:0}.stat strong{display:block;font:400 2rem Georgia,serif}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:44px}.card{background:#fff;overflow:hidden}.card img{width:100%;aspect-ratio:16/10;object-fit:cover}.card-body{padding:26px}.card h3{font-size:2rem;margin:.2rem 0}.meta{font-size:.78rem;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}.card-actions{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-top:22px;font-weight:700}.feature{background:var(--ink);color:#fff}.feature-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:64px;align-items:center}.feature-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.feature-pair img{height:590px;width:100%;object-fit:cover}.feature-list{list-style:none;padding:0;margin:18px 0}.feature-list li{padding:13px 0;border-bottom:1px solid rgba(120,130,122,.35)}.ubud-image{margin-top:55px;width:100%;max-height:580px;object-fit:cover}.quote{font:400 clamp(1.8rem,4vw,3.5rem)/1.25 Georgia,serif;max-width:1050px}.gallery-head{display:flex;justify-content:space-between;align-items:end;gap:30px}.gallery-grid{columns:4 250px;column-gap:12px;margin-top:36px}.gallery-item{break-inside:avoid;margin:0 0 12px;position:relative;cursor:zoom-in;overflow:hidden;background:#ddd}.gallery-item img{width:100%;height:auto;transition:transform .3s}.gallery-item:hover img{transform:scale(1.02)}.gallery-no{position:absolute;bottom:8px;right:9px;background:rgba(0,0,0,.6);color:#fff;font-size:.7rem;padding:4px 7px}.contact{background:#dce5db}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}.contact-links{display:grid;gap:10px}.contact-links a{background:#fff;padding:17px 20px;font-weight:700}.social-links{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}.social-links a{background:rgba(255,255,255,.62);padding:9px 12px}.lightbox{position:fixed;inset:0;z-index:100;background:rgba(3,7,4,.96);display:none;align-items:center;justify-content:center;padding:32px}.lightbox.open{display:flex}.lightbox img{max-width:94vw;max-height:90vh;object-fit:contain}.lb-btn{position:absolute;border:0;background:rgba(255,255,255,.13);color:#fff;font-size:2rem;width:54px;height:54px;cursor:pointer}.lb-close{top:18px;right:18px}.lb-prev{left:18px}.lb-next{right:18px}footer{background:#111a14;color:#fff;padding:54px 0 28px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.2fr;gap:40px}.footer-grid p{color:#d8ded9}.social{display:flex;gap:14px}.footer-bottom{border-top:1px solid rgba(255,255,255,.17);margin-top:35px;padding-top:20px;display:flex;justify-content:space-between}.villa-hero{min-height:78vh;color:#fff;display:grid;align-items:end;background-position:center;background-size:cover;position:relative}.villa-hero:before,.guide-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.68),rgba(0,0,0,.09))}.villa-hero .wrap,.guide-hero .wrap{position:relative;padding-bottom:70px}.villa-hero h1{font-size:clamp(3.8rem,9vw,7.2rem)}.detail-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:76px}.sidebox{background:#fff;padding:30px;position:sticky;top:24px;align-self:start}.sidebox .price{font:400 2.8rem Georgia,serif}.back{display:inline-block;margin-bottom:28px;font-weight:700}.guide-hero{min-height:65vh;color:#fff;display:grid;align-items:end;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.1)),url('/assets/images/hero-ricefields.webp') center/cover;position:relative}.guide-hero h1{font-size:clamp(4rem,9vw,7.6rem)}.guide-list{margin-top:45px}.guide-row{display:grid;grid-template-columns:90px 1fr 1fr;gap:38px;padding:45px 0;border-top:1px solid var(--line)}.guide-row .number{font:400 2rem Georgia,serif}.guide-row h2{font-size:clamp(2rem,4vw,3.2rem);margin:0}.privacy{max-width:820px}.notfound{min-height:72vh;display:grid;place-items:center;text-align:center;padding-top:100px}.notfound h1{font:400 clamp(4rem,10vw,8rem) Georgia,serif;margin:0}.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:200;background:#fff;color:#000;padding:10px}
@media(max-width:820px){.site-header{padding:18px 0}.menu-btn{display:block}.navlinks{display:none;position:absolute;top:66px;left:4%;right:4%;background:#17231b;padding:18px;flex-direction:column;align-items:stretch}.navlinks.open{display:flex}.navlinks .btn{text-align:center}.booking-inner{grid-template-columns:1fr}.booking-title,.field,.booking-submit{border-right:0;border-bottom:1px solid #dfe3dd}.intro,.grid,.feature-grid,.contact-grid,.footer-grid,.detail-grid{grid-template-columns:1fr}.feature-pair{grid-template-columns:1fr 1fr}.feature-pair img{height:360px}.stats{grid-template-columns:1fr}.stat{border-right:0;border-bottom:1px solid var(--line)}.gallery-grid{columns:2 150px}.guide-row{grid-template-columns:52px 1fr}.guide-row p{grid-column:2}.sidebox{position:static}.section{padding:66px 0}.hero{min-height:84vh}.hero-content{padding-bottom:72px}.card-actions{align-items:flex-start;flex-direction:column}}
@media(max-width:460px){.feature-pair{grid-template-columns:1fr}.gallery-grid{columns:1}.footer-bottom{flex-direction:column;gap:12px}.brand{font-size:1.05rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.gallery-item img{transition:none}}


/* ---- Visual fidelity pass v3: match published Sites treatment more closely ---- */
body{background:#f4f0e7}
.wrap{width:min(1220px,92%)}
.site-header{padding:27px 0;text-shadow:0 1px 10px rgba(0,0,0,.22)}
.brand{letter-spacing:.075em}
.navlinks{gap:27px}

/* Preserve the vivid source photograph; darken only enough for white hero copy. */
.hero{
  min-height:94vh;
  background:
    linear-gradient(90deg,rgba(7,14,9,.34) 0%,rgba(7,14,9,.15) 46%,rgba(7,14,9,.035) 78%),
    url('/assets/images/pool.jpg') center 52%/cover no-repeat;
}
.hero-content{padding:190px 0 104px;max-width:815px}
.hero h1{font-size:clamp(3.8rem,8.2vw,7.3rem);letter-spacing:-.025em}
.hero p{font-size:1.2rem;max-width:615px;text-shadow:0 1px 9px rgba(0,0,0,.24)}
.hero-caption{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:#69746c;padding-top:13px;padding-bottom:6px}

/* Booking panel is slimmer and more architectural, like the published page. */
.booking-bar{margin-top:18px;box-shadow:0 16px 42px rgba(17,28,20,.10)}
.booking-title,.field,.booking-submit{padding:20px 23px}
.booking-submit{min-width:174px}

/* More whitespace and stronger editorial rhythm. */
.section{padding:104px 0}
.intro{gap:88px}
.section h2{letter-spacing:-.025em}
.stats{margin-top:48px}
.stat{padding:27px 0}
.stat strong{font-size:2.25rem}

/* Villa cards: explicit 01–05 hierarchy from the live page. */
.grid{gap:34px;margin-top:51px}
.card{position:relative;background:#fff;box-shadow:0 1px 0 rgba(15,28,18,.04)}
.card-number{
  position:absolute;z-index:2;top:18px;left:18px;
  width:42px;height:42px;display:grid;place-items:center;
  background:rgba(18,32,22,.83);color:#fff;
  font:400 1rem Georgia,serif;letter-spacing:.06em
}
.card img{
  aspect-ratio:16/10;
  object-fit:cover;
  filter:none !important;
  image-rendering:auto;
}
.card-body{padding:29px 30px 30px}
.card h3{font-size:2.15rem}

/* Published page uses pool + breakfast as an editorial image pair, not two identical panels. */
.feature-grid{grid-template-columns:1.12fr .88fr;gap:78px}
.feature-pair{
  display:grid;
  grid-template-columns:1.42fr .78fr;
  grid-template-rows:88px 445px 88px;
  gap:14px;
  align-items:stretch;
}
.feature-pair .feature-pool{
  grid-column:1;
  grid-row:1/3;
  height:533px;
  width:100%;
  object-fit:cover;
  object-position:center;
  filter:none !important;
}
.feature-pair .feature-breakfast{
  grid-column:2;
  grid-row:2/4;
  height:533px;
  width:100%;
  object-fit:cover;
  object-position:center;
  filter:none !important;
}
.feature .eyebrow{color:#d5ded7}

/* Near-Ubud image returns as a distinct full-width landscape moment. */
#ubud .intro{align-items:start}
.ubud-image{
  margin-top:62px;
  width:100%;
  height:min(53vw,600px);
  max-height:none;
  object-fit:cover;
  object-position:center;
  filter:none !important;
}

/* Gallery source files should display without CSS desaturation/contrast filters. */
.gallery-item img{filter:none !important}
.gallery-grid{column-gap:14px}
.gallery-item{margin-bottom:14px}

/* Quote and contact spacing closer to the editorial source. */
.quote{max-width:1090px;letter-spacing:-.02em}
.contact-grid{gap:82px}

/* Hero images on villa pages: use vivid originals with a lighter lower-third overlay. */
.villa-hero:before{
  background:linear-gradient(0deg,rgba(7,12,8,.57) 0%,rgba(7,12,8,.12) 52%,rgba(7,12,8,.025) 100%)
}
.villa-hero{background-position:center}
.villa-hero .wrap{padding-bottom:78px}

/* Guide hero keeps image detail instead of flattening it. */
.guide-hero{
  background:
    linear-gradient(90deg,rgba(7,14,9,.30),rgba(7,14,9,.045)),
    url('/assets/images/hero-ricefields.jpg') center/cover no-repeat
}
.guide-hero:before{background:linear-gradient(0deg,rgba(0,0,0,.28),rgba(0,0,0,0))}

@media(max-width:820px){
  .section{padding:72px 0}
  .hero{min-height:86vh;background-position:center}
  .hero-content{padding:154px 0 79px}
  .intro{gap:35px}
  .feature-grid{gap:45px}
  .feature-pair{
    grid-template-columns:1.2fr .8fr;
    grid-template-rows:45px 295px 45px
  }
  .feature-pair .feature-pool,.feature-pair .feature-breakfast{height:340px}
  .ubud-image{height:60vw;min-height:330px}
}
@media(max-width:540px){
  .hero{background-position:58% center}
  .hero-caption{display:none}
  .feature-pair{display:grid;grid-template-columns:1fr;grid-template-rows:auto;gap:12px}
  .feature-pair .feature-pool,.feature-pair .feature-breakfast{
    grid-column:auto;grid-row:auto;height:auto;aspect-ratio:4/3
  }
  .card-number{top:12px;left:12px}
}


/* ---- Production review fixes v4 ---- */

/* Availability now produces a clear, visible result panel. */
.availability-results{border-top:1px solid var(--line);padding:28px 30px 32px;background:#faf9f5}
.availability-results[hidden]{display:none}
.availability-results-head{max-width:720px;margin-bottom:20px}
.availability-results-head h3{margin:.2rem 0 .4rem;font:400 2rem Georgia,serif}
.availability-results-head p{margin:0;color:var(--muted)}
.availability-villas{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.availability-villa{background:#fff;border:1px solid var(--line);padding:17px;display:flex;min-height:138px;flex-direction:column;gap:5px;transition:transform .15s,box-shadow .15s}
.availability-villa:hover{transform:translateY(-2px);box-shadow:0 12px 25px rgba(17,28,20,.09)}
.availability-villa strong{font:400 1.35rem Georgia,serif}
.availability-villa span{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.availability-villa b{margin-top:auto;font-size:.88rem;color:var(--leaf)}

/* Gallery is categorized instead of being an undifferentiated wall. */
.gallery-filters{display:flex;flex-wrap:wrap;gap:9px;margin:28px 0 12px}
.gallery-filter{border:1px solid #aeb8b0;background:transparent;color:var(--ink);border-radius:999px;padding:9px 15px;font:600 .86rem Arial,sans-serif;cursor:pointer}
.gallery-filter.active,.gallery-filter:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.gallery-item.gallery-hidden{display:none!important}
.gallery-no{display:none!important}

/* Contact area: three primary actions, then compact grouped links. */
.contact-hub{display:grid;gap:22px}
.contact-primary{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.contact-card{background:#fff;padding:20px;min-height:132px;display:flex;flex-direction:column;border:1px solid rgba(27,39,31,.08)}
.contact-card span{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.contact-card strong{font:400 1.65rem Georgia,serif;margin:7px 0}
.contact-card b{font-size:.86rem;margin-top:auto;color:var(--leaf)}
.email-fallback{font-size:.85rem;color:var(--muted);margin:-5px 0 0}
.copy-email{border:0;background:transparent;text-decoration:underline;color:var(--leaf);cursor:pointer;font-weight:700;padding:3px 7px}
.contact-link-groups{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding-top:7px}
.link-group h3{font-size:1.25rem!important;margin:0 0 10px!important}
.compact-links{display:flex;flex-wrap:wrap;gap:7px 16px}
.compact-links a{background:transparent!important;padding:0!important;font-weight:600!important;font-size:.9rem;border-bottom:1px solid rgba(27,39,31,.22)}
.footer-links{display:grid;gap:7px;margin-top:12px}
.footer-links a{color:#d8ded9;width:max-content}
.footer-links a:hover{color:#fff;text-decoration:underline}

/* Keep editorial panels aligned and less boxy. */
#experience .feature-grid{align-items:center}
#ubud .intro{align-items:center}
.contact-grid{align-items:start}

@media(max-width:980px){
  .availability-villas{grid-template-columns:repeat(2,1fr)}
  .contact-primary{grid-template-columns:1fr}
}
@media(max-width:820px){
  .contact-link-groups{grid-template-columns:1fr}
}
@media(max-width:520px){
  .availability-villas{grid-template-columns:1fr}
}


/* ---- Booking + image fidelity pass v5 ---- */

/* Gentle lift only: no recompression, no aggressive Instagram-style filtering. */
.hero,
.villa-hero,
.guide-hero{filter:saturate(1.06) contrast(1.025)}
.card img,
.feature-pool,
.feature-breakfast,
.ubud-image,
.gallery-item img{
  filter:saturate(1.07) contrast(1.03) brightness(1.015) !important;
}
.lightbox img{filter:saturate(1.04) contrast(1.02)}

/* Two equal booking routes per villa. */
.dual-booking-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.availability-villa-card{
  background:#fff;border:1px solid var(--line);padding:22px;
  display:grid;gap:7px;align-content:start
}
.availability-villa-card h4{font:400 1.65rem Georgia,serif;margin:0}
.availability-villa-card p{margin:0 0 13px;color:var(--muted);font-size:.84rem;text-transform:uppercase;letter-spacing:.06em}
.dual-booking-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:auto}
.dual-booking-actions .btn{padding:11px 13px;text-align:center;font-size:.86rem}
.whatsapp-inquiry{background:var(--leaf)!important;color:#fff!important}
.book-airbnb{background:#fff;color:var(--ink)!important}

@media(max-width:800px){
  .dual-booking-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .dual-booking-actions{grid-template-columns:1fr}
}


/* ---- v5 FINAL design refinement ---- */
.section{padding:88px 0}
.hero-content{padding-bottom:92px}
.intro{gap:70px}
.grid{display:block;margin-top:46px}

.story-strip{padding-top:18px;padding-bottom:68px}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.story-grid h2{font:400 clamp(2.4rem,5vw,4.6rem)/1.03 Georgia,serif;margin:.2em 0}
.story-grid p{font-size:1.03rem;color:var(--muted);line-height:1.68}

/* Five-villa composition: 3 top, 2 centered below */
.villa-grid-row{display:grid;gap:30px}
.villa-grid-top{grid-template-columns:repeat(3,minmax(0,1fr))}
.villa-grid-bottom{
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:min(66.666%,820px);
  margin:30px auto 0;
}
.card{height:100%}
.card-body{height:100%;display:flex;flex-direction:column}
.card-actions{margin-top:auto}
.featured-villa{box-shadow:0 18px 45px rgba(22,40,27,.10);transform:translateY(-4px)}
.featured-villa img{aspect-ratio:16/9}
.featured-badge{
  font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--leaf);font-weight:700;margin-bottom:7px
}

/* Typography and spacing */
.section h2{font-size:clamp(2.65rem,5vw,4.9rem);line-height:1.01}
.card h3{font-size:2.05rem}
.card-body p,.intro p,.feature p,.contact p{line-height:1.62}
.feature-grid{gap:64px}
#ubud .intro{gap:64px}
.ubud-image{margin-top:50px}
.footer-grid{gap:56px}
footer{padding-top:60px;padding-bottom:44px}

/* Consistent action language / treatment */
.btn{min-height:44px}
.card-actions a:first-child{color:var(--leaf)}
.card-actions a:last-child{white-space:nowrap}

/* Final restrained photo lift without re-encoding */
.hero,.villa-hero,.guide-hero{filter:saturate(1.075) contrast(1.03)}
.card img,.feature-pool,.feature-breakfast,.ubud-image,.gallery-item img{
  filter:saturate(1.085) contrast(1.035) brightness(1.02)!important;
}
.lightbox img{filter:saturate(1.05) contrast(1.02)}

@media(max-width:900px){
  .section{padding:70px 0}
  .story-grid{grid-template-columns:1fr;gap:28px}
  .villa-grid-top{grid-template-columns:1fr 1fr}
  .villa-grid-bottom{grid-template-columns:1fr 1fr;width:100%;margin-top:22px}
  .villa-grid-top .card:last-child{
    grid-column:1/3;width:calc(50% - 15px);justify-self:center
  }
  .featured-villa{transform:none}
}
@media(max-width:620px){
  .villa-grid-top,.villa-grid-bottom{grid-template-columns:1fr;width:100%;margin-top:18px}
  .villa-grid-top .card:last-child{grid-column:auto;width:100%}
  .story-strip{padding-bottom:48px}
  .section{padding:58px 0}
  .hero h1{font-size:clamp(3.2rem,16vw,5.1rem)}
  .card img,.featured-villa img{aspect-ratio:4/3}
}


/* ---- v5.2 Beds24 live calendar availability ---- */
.villa-availability-status{
  min-height:1.25em;
  margin:2px 0 10px;
  font-size:.82rem;
  font-weight:700;
  color:var(--leaf);
}
.availability-villa-card.is-available{
  border-color:rgba(49,91,61,.38);
  box-shadow:0 10px 26px rgba(22,40,27,.07);
}
.availability-results.is-loading{opacity:.78}


/* =========================================================
   v5.4 HERO IMAGE ROTATION
   Three original Bali Harmony photographs, slow crossfade.
   ========================================================= */

.hero{
  position:relative!important;
  isolation:isolate;
  overflow:hidden;
  background:#172019!important; /* fallback while images load */
}

/* New image layer sits behind overlay and copy */
.hero-rotator{
  position:absolute;
  inset:0;
  z-index:-2;
  overflow:hidden;
}

.hero-slide{
  position:absolute;
  inset:-2%;
  opacity:0;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  transform:scale(1.025);
  transition:opacity 1.8s ease-in-out, transform 8s ease-out;
  will-change:opacity,transform;
  filter:saturate(1.08) contrast(1.035) brightness(1.015);
}

.hero-slide.is-active{
  opacity:1;
  transform:scale(1);
}

/* First image composition: keep villa/pool visual balance. */
.hero-slide:nth-child(1){background-position:center 52%}

/* Infinity-pool/rice-field frame. */
.hero-slide:nth-child(2){background-position:center 50%}

/* Lush garden/pool frame. */
.hero-slide:nth-child(3){background-position:center 50%}

/* Respect reduced-motion accessibility preference */
@media(prefers-reduced-motion:reduce){
  .hero-slide{transition:none!important;transform:none!important}
}


/* =========================================================
   v5.5 GO-LIVE POLISH
   ========================================================= */

/* First hero: shift composition right and use the existing slow scale to minimize the left post. */
.hero-slide:nth-child(1){
  background-position: 61% 52% !important;
  transform: scale(1.055);
}
.hero-slide:nth-child(1).is-active{
  transform: scale(1.025);
}

/* Slightly richer presentation without changing source color aggressively. */
.hero-slide{
  filter:saturate(1.10) contrast(1.045) brightness(1.015);
}

/* Stronger conversion hierarchy. */
.hero-actions .btn.solid{
  padding-inline:24px;
  min-width:176px;
}
.hero-actions .btn:not(.solid){
  border-color:rgba(255,255,255,.72);
}

/* Compact trust strip immediately after hero. */
.trust-strip{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 0;
  padding:18px 0 12px;
  border-bottom:1px solid var(--line);
  color:#536159;
  font-size:.77rem;
  font-weight:700;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.trust-strip span{
  display:flex;
  align-items:center;
}
.trust-strip span:not(:last-child)::after{
  content:"•";
  margin:0 14px;
  color:#a5aea8;
}

/* Full-width lifestyle story panel. */
.lifestyle-banner{
  position:relative;
  min-height:620px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:#172019;
}
.lifestyle-image{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(5,12,7,.58) 0%,rgba(5,12,7,.20) 44%,rgba(5,12,7,.02) 78%),
    url('/assets/images/lifestyle-open-air.jpg') center 52%/cover no-repeat;
  filter:saturate(1.04) contrast(1.025);
}
.lifestyle-copy{
  position:relative;
  z-index:1;
  padding-bottom:72px;
  color:#fff;
  max-width:1220px;
}
.lifestyle-copy .eyebrow{
  color:#fff;
  font-weight:800;
  text-shadow:0 2px 6px rgba(0,0,0,.45);
}
.lifestyle-copy h2{
  max-width:760px;
  margin:.15em 0 .28em;
  font:600 clamp(3rem,6vw,6rem)/.98 Georgia,"Times New Roman",serif;
  letter-spacing:-.03em;
  text-shadow:0 3px 13px rgba(0,0,0,.55);
}
.lifestyle-copy p{
  max-width:590px;
  margin:0;
  font-size:1.05rem;
  font-weight:500;
  text-shadow:0 2px 8px rgba(0,0,0,.48);
}

@media(max-width:700px){
  .trust-strip{
    justify-content:flex-start;
    padding:14px 4%;
    gap:7px 0;
  }
  .trust-strip span:not(:last-child)::after{
    margin:0 10px;
  }
  .lifestyle-banner{min-height:520px}
  .lifestyle-image{
    background-position:64% center;
    background-image:
      linear-gradient(90deg,rgba(5,12,7,.65) 0%,rgba(5,12,7,.34) 62%,rgba(5,12,7,.08) 100%),
      url('/assets/images/lifestyle-open-air.jpg');
  }
  .lifestyle-copy{padding-bottom:48px}
}


/* =========================================================
   v5.6 FINAL LAUNCH POLISH
   ========================================================= */
.villa-compare{background:#f7f4ec}
.villa-compare h2{max-width:850px}
.villa-compare-table{
  margin-top:34px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.villa-compare-row{
  display:grid;
  grid-template-columns:1.3fr .6fr .7fr 1.2fr;
  gap:18px;
  padding:16px 0;
  border-top:1px solid var(--line);
  align-items:center;
}
.villa-compare-row:first-child{border-top:0}
.villa-compare-head{
  font-size:.72rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--muted);
}
.villa-compare-row a{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.18rem;
}
.villa-compare .actions{margin-top:24px}
.footer-booking-note{
  max-width:760px;
  margin:0 0 28px;
  color:#d8ded9;
  line-height:1.55;
}
@media(max-width:680px){
  .villa-compare-row{
    grid-template-columns:1.1fr .55fr .65fr 1fr;
    gap:10px;
    font-size:.88rem;
  }
  .villa-compare-head{font-size:.64rem}
}
@media(max-width:520px){
  .villa-compare-row{
    grid-template-columns:1fr 1fr;
    gap:6px 14px;
    padding:15px 0;
  }
  .villa-compare-head{display:none}
  .villa-compare-row div:nth-child(2)::before{content:"Sleeps ";font-weight:700}
  .villa-compare-row div:nth-child(3)::before{content:"Bedrooms ";font-weight:700}
  .villa-compare-row div:nth-child(4){grid-column:1/3}
  .villa-compare-row div:nth-child(4)::before{content:"Ideal for: ";font-weight:700}
}

/* =========================================================
   v5.9.1 CORRECTED AUTHORITATIVE HERO SYSTEM
   Clean HTML structure; explicit left positioning.
   ========================================================= */

.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:94vh;
  display:flex;
  align-items:flex-end;
  color:#fff;
  background:#172019;
}

.hero-rotator{
  position:absolute;
  inset:0;
  z-index:-2;
  overflow:hidden;
}

.hero-slide{
  position:absolute;
  inset:-2%;
  opacity:0;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  transition:opacity 1.8s ease-in-out, transform 8s ease-out;
  transform:scale(1.025);
  filter:saturate(1.08) contrast(1.035) brightness(1.01);
}

.hero-slide.is-active{
  opacity:1;
  transform:scale(1);
}

.hero-slide:nth-child(1){background-position:57% 52%;}
.hero-slide:nth-child(2){background-position:61% 52%;}
.hero-slide:nth-child(3){background-position:center 50%;}
.hero-slide:nth-child(4){background-position:center 50%;}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(5,12,7,.48) 0%,
    rgba(5,12,7,.31) 38%,
    rgba(5,12,7,.14) 63%,
    rgba(5,12,7,.02) 88%
  );
}

/* This is now independent of .wrap, so it cannot be auto-centered. */
.hero-content{
  position:relative;
  z-index:2;
  box-sizing:border-box;
  width:min(650px,calc(100vw - 120px));
  max-width:650px;
  margin:0 0 0 clamp(56px,6vw,96px);
  padding:190px 0 92px 0;
  text-align:left;
}

.hero .eyebrow{
  margin:0 0 18px;
  max-width:600px;
  font-size:.70rem;
  line-height:1.35;
  letter-spacing:.17em;
  text-transform:uppercase;
  font-weight:700;
  color:#e2aa86;
  text-shadow:0 1px 5px rgba(0,0,0,.40);
}

.hero-title{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:100%;
  max-width:650px;
  margin:0 0 24px;
  font-family:Georgia,"Times New Roman",serif;
  color:#fff;
  text-align:left;
  text-shadow:
    0 2px 9px rgba(0,0,0,.44),
    0 1px 2px rgba(0,0,0,.26);
}

.hero-title-small{
  display:block;
  margin:0;
  font-size:clamp(2.45rem,4vw,4.2rem);
  font-weight:400;
  line-height:.99;
  letter-spacing:-.022em;
}

.hero-title-large{
  display:block;
  margin:0;
  font-size:clamp(3.75rem,6.35vw,6.35rem);
  font-weight:400;
  line-height:.94;
  letter-spacing:-.032em;
}

.hero p{
  max-width:555px;
  margin:0;
  font-size:1.03rem;
  line-height:1.52;
  font-weight:400;
  color:#fff;
  text-align:left;
  text-shadow:0 2px 7px rgba(0,0,0,.42);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:12px;
  margin-top:27px;
}

/* Tablet */
@media(max-width:900px){
  .hero{min-height:88vh}
  .hero-content{
    width:min(610px,calc(100vw - 72px));
    max-width:610px;
    margin-left:36px;
    padding:160px 0 78px;
  }
  .hero-title-small{font-size:clamp(2.35rem,6vw,3.7rem);}
  .hero-title-large{font-size:clamp(3.4rem,8.8vw,5.25rem);}
  .hero p{max-width:530px;font-size:1rem;}
}

/* Mobile */
@media(max-width:620px){
  .hero{min-height:84vh}

  .hero-slide{
    inset:0;
    transform:none;
  }
  .hero-slide.is-active{transform:none}
  .hero-slide:nth-child(1){background-position:61% center}
  .hero-slide:nth-child(2){background-position:62% center}
  .hero-slide:nth-child(3){background-position:55% center}
  .hero-slide:nth-child(4){background-position:55% center}

  .hero::after{
    background:linear-gradient(
      90deg,
      rgba(5,12,7,.53) 0%,
      rgba(5,12,7,.37) 65%,
      rgba(5,12,7,.09) 100%
    );
  }

  .hero-content{
    width:calc(100vw - 36px);
    max-width:none;
    margin-left:18px;
    padding:138px 0 64px;
  }

  .hero-title-small{font-size:clamp(2.15rem,10.2vw,3.1rem);}
  .hero-title-large{
    font-size:clamp(2.95rem,13.8vw,4.3rem);
    line-height:.96;
  }
  .hero p{max-width:94%;font-size:.97rem;}
  .hero .eyebrow{
    max-width:95%;
    font-size:.67rem;
    letter-spacing:.15em;
  }
  .hero-actions{gap:10px;}
  .hero-actions .btn{
    min-width:0;
    padding:10px 16px;
    font-size:.9rem;
  }
}

/* Very narrow phones */
@media(max-width:420px){
  .hero-content{
    width:calc(100vw - 28px);
    margin-left:14px;
  }
  .hero-title-small{font-size:clamp(2rem,10vw,2.7rem);}
  .hero-title-large{font-size:clamp(2.7rem,13.5vw,3.8rem);}
  .hero p{max-width:100%;font-size:.94rem;}
}

@media(prefers-reduced-motion:reduce){
  .hero-slide{
    transition:none;
    transform:none;
  }
}

/* =========================================================
   v5.9.2 COLLAPSED GALLERY — CHATGPT SITES TREATMENT
   ========================================================= */

#gallery{
  position:relative;
}

.gallery-preview-grid{
  position:relative;
}

/* Initial state: short visual preview only. */
#gallery.gallery-collapsed .gallery-item:nth-of-type(n+9){
  display:none !important;
}

/* Category controls are useful only once the full collection is opened. */
#gallery.gallery-collapsed .gallery-filters{
  display:none;
}

/* Soft fade over the lower edge of the preview, matching the Sites treatment. */
.gallery-preview-fade{
  position:relative;
  height:105px;
  margin-top:-105px;
  pointer-events:none;
  z-index:4;
  background:linear-gradient(
    to bottom,
    rgba(244,240,231,0) 0%,
    rgba(244,240,231,.72) 52%,
    rgba(244,240,231,1) 100%
  );
}

#gallery:not(.gallery-collapsed) .gallery-preview-fade{
  display:none;
}

.gallery-toggle-wrap{
  position:relative;
  z-index:5;
  display:flex;
  justify-content:center;
  padding:22px 0 4px;
}

.gallery-toggle{
  display:inline-flex;
  align-items:center;
  gap:28px;
  border:0;
  border-bottom:1px solid #c9906d;
  background:transparent;
  color:var(--ink);
  padding:9px 0 10px;
  font:600 1rem Arial,Helvetica,sans-serif;
  cursor:pointer;
}

.gallery-toggle:hover{
  color:var(--leaf);
}

.gallery-toggle-arrow{
  font-size:1.2rem;
  font-weight:400;
}

#gallery:not(.gallery-collapsed) .gallery-toggle-wrap{
  padding-top:34px;
}

/* Smooth reveal without forcing animation on users who prefer reduced motion. */
#gallery:not(.gallery-collapsed) .gallery-item{
  animation:galleryReveal .32s ease both;
}

@keyframes galleryReveal{
  from{opacity:.35}
  to{opacity:1}
}

@media(max-width:820px){
  .gallery-preview-fade{
    height:88px;
    margin-top:-88px;
  }
  .gallery-toggle{
    font-size:.95rem;
    gap:20px;
  }
}

@media(max-width:520px){
  /* A shorter initial preview on phones keeps the page compact. */
  #gallery.gallery-collapsed .gallery-item:nth-of-type(n+5){
    display:none !important;
  }
  .gallery-preview-fade{
    height:75px;
    margin-top:-75px;
  }
  .gallery-toggle-wrap{
    padding-top:18px;
  }
}

@media(prefers-reduced-motion:reduce){
  #gallery:not(.gallery-collapsed) .gallery-item{
    animation:none;
  }
}
