/* ===== Cadaques Villas — design tokens (standalone brand) =====
   Palette: dune tan, olive taupe, warm off-white, dark olive charcoal —
   an earthy, natural set that reads closer to the Bukit Peninsula
   setting than the original teal. Terracotta stays as the one pop
   accent for prices/badges/hover states; everything else derives from
   the four sampled tones. */
:root{
  --paper:#E9E6DC; --ink:#3C3B29; --sea:#8B8570; --terracotta:#C1683F;
  --line:rgba(60,59,41,0.15); --card:#FAF8F2; --muted:#726F5C; --sand:#CBB99C;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#23221A; --ink:#EDEAE0; --sea:#A8A386; --terracotta:#E0915F; --line:rgba(237,234,224,0.14); --card:#2C2B21; --muted:#A39E86; --sand:#32301F; }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink); font-family:'Source Serif 4', Georgia, serif; font-size:16px; line-height:1.6}
h1,h2,h3,.display{font-family:'Fraunces', Georgia, serif; font-weight:600; letter-spacing:-.01em; margin:0 0 .4em}
.mono{font-family:'IBM Plex Mono', monospace; letter-spacing:.05em; text-transform:uppercase; font-size:.72rem}
a{color:inherit}
img{max-width:100%; display:block}
.wrap{max-width:1160px; margin:0 auto; padding:0 24px}
section{padding:88px 0}

header.site{position:fixed; top:0; left:0; right:0; z-index:50; background:color-mix(in srgb, var(--paper) 85%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; padding:16px 24px}
.logo{display:flex; flex-direction:row; align-items:center; gap:8px}
.logo-mark{width:22px; height:22px; flex-shrink:0}
.logo-word{font-family:'Fraunces',serif; font-weight:600; font-size:1.1rem}
.logo-word span{color:var(--terracotta)}
nav.primary{display:flex; gap:26px}
nav.primary a{font-family:'IBM Plex Mono',monospace; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; text-decoration:none; opacity:.8; white-space:nowrap}
nav.primary a:hover{opacity:1; color:var(--terracotta)}
@media (max-width:600px){
  header.site .wrap{padding:14px 16px}
  .logo-mark{width:20px; height:20px}
  .logo-word{font-size:.92rem}
  nav.primary{gap:14px}
  nav.primary a{font-size:.62rem}
}
.btn{display:inline-block; padding:12px 22px; border-radius:2px; font-family:'IBM Plex Mono',monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; text-decoration:none; cursor:pointer; border:1px solid var(--ink); background:transparent; color:var(--ink); transition:all .2s}
.btn.solid{background:var(--sea); color:#fff; border-color:var(--sea)}
.btn.solid:hover{background:var(--terracotta); border-color:var(--terracotta)}
.btn.wa{background:#25D366; border-color:#25D366; color:#08331b}
.btn.wa:hover{background:#1DA851; border-color:#1DA851}
.btn:hover{background:var(--ink); color:var(--paper)}

.hero{position:relative; min-height:78vh; display:flex; align-items:center; padding-top:110px; overflow:hidden}
.hero::before{content:""; position:absolute; top:-12%; left:0; right:0; bottom:-12%; background-image:url('assets/hero.jpg'); background-size:cover; background-position:center 38%; opacity:.55; z-index:0; transform:translateY(var(--parallax-y, 0px)); will-change:transform}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, color-mix(in srgb, var(--paper) 30%, transparent) 0%, color-mix(in srgb, var(--paper) 65%, transparent) 45%, var(--paper) 82%); z-index:1}
.hero .wrap{position:relative; z-index:2}
.hero h1{font-size:clamp(2.2rem,5.2vw,3.6rem); max-width:16ch}
.hero p.lede{max-width:56ch; font-size:1.1rem; color:var(--muted); margin-top:18px}
.hero .ctas{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap}
.hero-note{margin-top:28px; font-size:.85rem; color:var(--muted); border-left:2px solid var(--sea); padding-left:14px; max-width:52ch}
@media (max-width:860px){
  .hero::before{opacity:.4}
  .hero::after{background:linear-gradient(180deg, color-mix(in srgb, var(--paper) 45%, transparent) 0%, var(--paper) 75%)}
}

.hero-gallery{padding:0 0 12px}
.gallery-scroller{position:relative}
.gallery-track{display:flex; flex-wrap:nowrap; gap:12px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x proximity}
.gallery-img{height:210px; width:auto; flex:0 0 auto; border-radius:4px; object-fit:cover; cursor:pointer; scroll-snap-align:start; transition:opacity .2s}
.gallery-img:hover{opacity:.85}
@media (max-width:600px){.gallery-img{height:150px}}
.gallery-arrow{position:absolute; top:calc(50% - 4px); transform:translateY(-50%); z-index:3; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(4px); color:var(--ink); font-size:1.4rem; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:opacity .2s, background .2s, color .2s; box-shadow:0 2px 8px rgba(0,0,0,.12)}
.gallery-arrow:hover{background:var(--terracotta); border-color:var(--terracotta); color:#fff}
.gallery-arrow:disabled{opacity:0; pointer-events:none}
.gallery-arrow-prev{left:6px}
.gallery-arrow-next{right:6px}
@media (max-width:600px){.gallery-arrow{width:32px; height:32px; font-size:1.2rem}}

.spec-strip{display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; z-index:2; background:var(--paper)}
.spec-item{flex:1; min-width:150px; padding:24px 20px; border-right:1px solid var(--line); text-align:center}
.spec-item:last-child{border-right:none}
.spec-icon{width:22px; height:22px; color:var(--terracotta); margin-bottom:10px}
.spec-item .v{font-family:'Fraunces',serif; font-size:1.1rem}
.spec-item .k{color:var(--muted); margin-top:4px}

.section-head{max-width:640px; margin:0 auto 48px; text-align:center}
.section-head .mono{color:var(--terracotta)}

.villa-card{background:var(--card); border:1px solid var(--line); border-radius:4px; overflow:hidden}
.villa-gallery{padding:10px 10px 0}
.villa-body{padding:28px}
.villa-tag{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:.68rem; text-transform:uppercase; padding:4px 10px; border:1px solid var(--sea); color:var(--sea); border-radius:20px; margin-bottom:12px}
.villa-diff{color:var(--muted); margin-bottom:18px}
.villa-facts{list-style:none; padding:0; margin:0 0 20px; font-size:.9rem}
.villa-facts li{display:flex; justify-content:space-between; padding:8px 0; border-top:1px solid var(--line)}
.villa-facts li .k{color:var(--muted)}

.stay-summary{margin-bottom:20px}
.stay-summary-row{display:flex; justify-content:space-between; padding:6px 0; border-top:1px solid var(--line); font-size:.85rem}
.stay-summary-row:first-child{border-top:none}
.stay-summary-row .k{color:var(--muted)}
.stay-summary .villa-price{margin-top:14px}
.currency-toggle{display:inline-flex; margin-top:12px; border:1px solid var(--line); border-radius:20px; padding:2px; gap:2px}
.currency-toggle button{border:none; background:transparent; padding:5px 12px; border-radius:16px; font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.05em; color:var(--muted); cursor:pointer; transition:background .2s, color .2s}
.currency-toggle button.active{background:var(--terracotta); color:#fff}
.villa-price{font-family:'Fraunces',serif; font-size:1.7rem; margin-bottom:2px}
.villa-price-sub{font-size:.78rem; color:var(--muted); margin-bottom:6px}
.villa-price-note{font-size:.72rem; color:var(--muted); margin-bottom:20px}
.villa-ctas{display:flex; gap:10px; flex-wrap:wrap}

/* availability calendar */
.cal-wrap{max-width:520px; margin:20px auto 0}
@media (min-width:860px){
  .cal-wrap{max-width:880px}
  .cal-grid{font-size:.85rem}
  .cal-day{font-size:1rem}
}

.map-wrap{max-width:720px; margin:20px auto 0; text-align:center}
.poi-row{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; margin-bottom:16px; min-height:38px}
.poi-row-home{margin-bottom:14px}
.poi-tabs{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line)}
.poi-tab{padding:7px 16px; border:1px solid var(--line); border-radius:20px; background:transparent; font-family:'IBM Plex Mono',monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); cursor:pointer; transition:all .2s}
.poi-tab:hover{color:var(--ink)}
.poi-tab.active{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.poi-chip{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border:1px solid var(--line); border-radius:20px; background:var(--card); font-family:'IBM Plex Mono',monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ink); cursor:pointer; transition:background .2s, border-color .2s, color .2s}
.poi-chip[hidden]{display:none}
.poi-chip:hover{border-color:var(--terracotta)}
.poi-chip.active{background:var(--terracotta); border-color:var(--terracotta); color:#fff}
.poi-icon{width:13px; height:13px; flex-shrink:0}
.poi-time{color:var(--muted); font-weight:600}
.poi-chip.active .poi-time{color:rgba(255,255,255,.85)}
.map-card{border:1px solid var(--line); border-radius:4px; overflow:hidden; height:460px}
.map-card iframe{width:100%; height:100%; border:0; display:block; filter:saturate(.7)}
@media (prefers-color-scheme: dark){.map-card iframe{filter:saturate(.6) invert(.92) hue-rotate(180deg)}}
.map-directions{display:inline-block; margin-top:16px}
@media (min-width:860px){.map-wrap{max-width:920px} .map-card{height:600px}}
.cal-card{background:var(--card); border:1px solid var(--line); border-radius:4px; padding:22px}
.cal-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px}
.cal-nav{display:flex; gap:6px}
.cal-nav button{width:28px; height:28px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; border-radius:2px}
.cal-nav button:disabled{opacity:.3; cursor:not-allowed}
.lightbox{position:fixed; inset:0; background:rgba(10,9,7,.92); z-index:200; display:none; align-items:center; justify-content:center; padding:40px}
.lightbox.open{display:flex}
.lightbox img{max-width:90vw; max-height:85vh; object-fit:contain}
.lightbox-close{position:absolute; top:24px; right:32px; color:#EAE7DE; font-size:2rem; cursor:pointer; font-family:'IBM Plex Mono',monospace}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; font-size:.78rem}
.cal-dow{color:var(--muted); text-align:center; font-family:'IBM Plex Mono',monospace; font-size:.62rem; padding-bottom:4px}
.cal-day{aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:2px; color:var(--muted); cursor:pointer; border:1px solid transparent}
.cal-day.open{background:color-mix(in srgb, var(--sea) 12%, transparent); color:var(--ink)}
.cal-day.booked{background:color-mix(in srgb, var(--terracotta) 35%, transparent); color:var(--muted); text-decoration:line-through; cursor:default}
.cal-day.past{background:transparent; color:var(--muted); opacity:.4; text-decoration:line-through; cursor:default}
.cal-day.empty{visibility:hidden; cursor:default}
.cal-day.range-start, .cal-day.range-end{background:var(--sea); color:#fff; font-weight:600}
.cal-day.range-mid{background:color-mix(in srgb, var(--sea) 30%, transparent); color:var(--ink)}
.cal-legend{display:flex; gap:16px; margin-top:14px; font-size:.72rem; color:var(--muted); flex-wrap:wrap}
.legend-dot{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px}
.villa-season-note{display:block; font-family:'IBM Plex Mono',monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--terracotta); margin:-4px 0 14px}
.cal-hint{font-size:.8rem; color:var(--muted); margin:14px 0 0; min-height:1.2em}
.cal-result{margin-top:14px; padding-top:16px; border-top:1px solid var(--line)}
.cal-result-date{font-family:'Fraunces',serif; font-size:1.05rem; margin:0 0 10px}
.cal-result-empty{color:var(--muted); font-size:.85rem; margin:0 0 12px}

.inquiry-band{background:var(--sea); color:#fff; border-radius:4px; padding:48px; text-align:center}
.inquiry-band h2{color:#fff}
.inquiry-band p{color:rgba(255,255,255,.82); max-width:52ch; margin:0 auto 28px}

/* amenities */
.amenity-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden}
.amenity-item{background:var(--card); padding:22px 16px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; font-size:.85rem}
.amenity-icon{width:22px; height:22px; color:var(--terracotta)}
@media (max-width:700px){.amenity-grid{grid-template-columns:repeat(2,1fr)}}

/* reviews */
.google-review-card{display:flex; align-items:center; gap:14px; max-width:520px; margin:0 auto 32px; padding:16px 20px; background:var(--card); border:1px solid var(--line); border-radius:6px; text-decoration:none; color:var(--ink); transition:border-color .2s}
.google-review-card[hidden]{display:none}
.google-review-card:hover{border-color:var(--terracotta)}
.google-g{width:26px; height:26px; flex-shrink:0}
.google-review-text{display:flex; flex-direction:column; flex:1; gap:2px}
.google-review-title{font-weight:600; font-size:.95rem}
.google-review-meta{font-size:.78rem; color:var(--muted)}
.google-review-arrow{color:var(--terracotta); font-size:1.1rem}
.reviews-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px}
.review-card{background:var(--card); border:1px solid var(--line); border-radius:6px; padding:22px}
.review-stars{color:var(--terracotta); letter-spacing:2px; font-size:.85rem; margin-bottom:10px}
.review-quote{font-family:'Fraunces',serif; font-size:1.02rem; margin:0 0 12px; line-height:1.5}
.review-meta{font-size:.78rem; color:var(--muted); font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.03em}
.reviews-empty{text-align:center; color:var(--muted); max-width:48ch; margin:0 auto; font-size:.92rem}

/* faq */
.faq-toggle{display:flex; align-items:center; justify-content:center; gap:10px; margin:0 auto; padding:14px 28px; background:var(--card); border:1px solid var(--line); border-radius:30px; font-family:'IBM Plex Mono',monospace; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink); cursor:pointer; transition:border-color .2s}
.faq-toggle:hover{border-color:var(--terracotta)}
.faq-toggle-icon{color:var(--terracotta); font-size:1.1rem; transition:transform .2s}
.faq-toggle[aria-expanded="true"] .faq-toggle-icon{transform:rotate(45deg)}
.faq-list{max-width:680px; margin:24px auto 0; display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden}
.faq-list[hidden]{display:none}
.faq-item{background:var(--card); padding:0}
.faq-item summary{list-style:none; cursor:pointer; padding:18px 22px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-weight:600; font-size:.95rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-icon{font-family:'IBM Plex Mono',monospace; color:var(--terracotta); font-size:1.1rem; flex-shrink:0; transition:transform .2s}
.faq-item[open] .faq-icon{transform:rotate(45deg)}
.faq-item p{margin:0; padding:0 22px 20px; color:var(--muted); font-size:.9rem; max-width:60ch}

footer.site{border-top:1px solid var(--line); padding:48px 0; margin-top:40px}
footer.site .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; align-items:center; font-size:.85rem; color:var(--muted)}
.footer-links{display:flex; gap:6px; font-size:.85rem}
.footer-links a{color:var(--muted); text-decoration:underline; text-decoration-color:var(--line)}
.footer-links a:hover{color:var(--terracotta)}

.reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform:none}