/* =========================================================
   MACAO HOMES — design tokens
   Grounded in the place: limestone & stone of Haute-Savoie,
   walnut/wood of the Loft, blue-grey stone of the Suite.
   ========================================================= */
:root{
  --bg: #ECE7DA;
  --paper: #F7F4EC;
  --ink: #21261D;
  --ink-soft: #4B5245;
  --line: rgba(33,38,29,0.14);

  --loft: #7A5C3E;
  --loft-deep: #422b1c;
  --loft-soft: #f9f1e8;

  --suite: #4C5F68;
  --suite-deep: #37474E;
  --suite-soft: #DCE4E4;

  --radius: 2px;
  --max: 1180px;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 28px; }

h1,h2,h3{
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 .4em;
}
h1{ font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.02; font-weight: 500; }
h2{ font-size: clamp(1.6rem, 3vw, 2.4rem); }
p{ margin: 0 0 1em; color: var(--ink-soft); max-width: 62ch; }

.eyebrow{
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display:flex; align-items:center; gap:.6em;
  margin-bottom: 1em;
}
.eyebrow::before{
  content:"";
  width: 22px; height: 1px;
  background: currentColor;
  display:inline-block;
}

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(236,231,218,.86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
}
.brand{
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .01em;
  display:flex; align-items:center; gap:.55em;
  text-decoration:none;
}
.brand .mark{
  width: 20px; height: 20px;
  position:relative; flex:none;
}
.brand .mark span{
  position:absolute; top:0; bottom:0; width: 48%;
  border-radius: 1px;
}
.brand .mark span:first-child{ left:0; background: var(--loft); }
.brand .mark span:last-child{ right:0; background: var(--suite); }

nav.primary{ display:flex; align-items:center; gap: 2rem; }
nav.primary a{
  text-decoration:none; font-size:.92rem; color: var(--ink);
  position:relative; padding: 4px 0;
}
nav.primary a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
nav.primary a:hover::after{ transform: scaleX(1); }
.lang-switch{
  font-family: var(--mono); font-size: .78rem; letter-spacing:.05em;
  display:flex; gap:.4em; align-items:center;
}
.lang-switch a{ text-decoration:none; opacity:.5; }
.lang-switch a.active{ opacity:1; text-decoration:underline; text-underline-offset:3px; }
.nav-toggle{ display:none; }

@media (max-width: 760px){
  nav.primary{
    position:fixed; inset: 76px 0 0 0; background: var(--bg);
    flex-direction:column; justify-content:flex-start; align-items:flex-start;
    padding: 2rem 28px; gap: 1.4rem;
    transform: translateX(100%); transition: transform .3s ease;
  }
  nav.primary.open{ transform: translateX(0); }
  nav.primary a{ font-size: 1.1rem; }
  .nav-toggle{
    display:flex; width: 40px; height: 40px; border:none; background:none;
    align-items:center; justify-content:center; cursor:pointer;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    content:""; display:block; width: 22px; height:1.5px; background: var(--ink);
    position:relative; transition: transform .2s ease, opacity .2s ease;
  }
  .nav-toggle span::before{ position:absolute; top:-7px; width:22px; }
  .nav-toggle span::after{ position:absolute; top:7px; width:22px; }
}

/* ---------- split hero (home) ---------- */
.split-hero{
  display:grid; grid-template-columns: 1fr 1fr;
  min-height: 78vh;
}
.split-hero .door{
  position:relative; display:flex; align-items:flex-end;
  padding: 3rem 2.4rem; overflow:hidden;
  text-decoration:none; color: var(--paper);
}
.split-hero .door.loft{ background: linear-gradient(155deg, var(--loft) 0%, var(--loft-deep) 100%); }
.split-hero .door.suite{ background: linear-gradient(155deg, var(--suite) 0%, var(--suite-deep) 100%); }
.split-hero .door::before{
  content:""; position:absolute; inset:0; opacity:.16;
  background-image: repeating-linear-gradient(115deg, #fff 0 2px, transparent 2px 26px);
}
.split-hero .door-content{ position:relative; z-index:1; }
.split-hero .door-content .eyebrow{ color: rgba(247,244,236,.75); }
.split-hero .door-content .eyebrow::before{ background: rgba(247,244,236,.75); }
.split-hero h2{ color: var(--paper); margin-bottom:.25em; }
.split-hero .door-content p{ color: rgba(247,244,236,.85); }
.split-hero .go{
  font-family: var(--mono); font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; display:inline-flex; align-items:center; gap:.5em;
  margin-top:1.2em; color: var(--paper);
}
.split-hero .go .arrow{ transition: transform .25s ease; }
.split-hero .door:hover .go .arrow{ transform: translateX(4px); }
.split-seam{
  position:absolute; left:50%; top:0; bottom:0; width:1px;
  background: rgba(247,244,236,.35); z-index:2; pointer-events:none;
}
@media (max-width: 760px){
  .split-hero{ grid-template-columns: 1fr; min-height: auto; }
  .split-hero .door{ min-height: 62vh; }
  .split-seam{ display:none; }
}

/* ---------- intro strip ---------- */
.intro{ padding: 5rem 0 3rem; }
.intro .lede{ font-family: var(--serif); font-size: clamp(1.2rem,2.2vw,1.6rem); color: var(--ink); max-width: 46ch; }

/* ---------- reasons row ---------- */
.reasons{
  padding: 2rem 0 5rem;
  border-top: 1px solid var(--line);
}
.reasons-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 2.2rem; }
.reasons .reason .eyebrow{ margin-bottom:.6em; }
.reasons h3{ font-size:1.15rem; margin-bottom:.35em; }
.reasons p{ font-size:.94rem; }
@media (max-width: 760px){ .reasons-grid{ grid-template-columns: 1fr; gap: 2.4rem; } }

/* ---------- unit hero ---------- */
.unit-hero{ padding: 4.4rem 0 2.6rem; border-bottom: 1px solid var(--line); }
.unit-hero .tag{
  display:inline-block; font-family: var(--mono); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase;
  padding: .35em .8em; border-radius: var(--radius);
  margin-bottom: 1.2em;
}
.unit-hero.loft .tag{ background: var(--loft-soft); color: var(--loft-deep); }
.unit-hero.suite .tag{ background: var(--suite-soft); color: var(--suite-deep); }
.unit-hero .facts{ display:flex; gap: 2.4rem; margin-top: 1.6rem; flex-wrap:wrap; }
.unit-hero .facts div{ font-family: var(--mono); font-size:.8rem; color: var(--ink-soft); }
.unit-hero .facts strong{ display:block; font-family: var(--sans); font-size:1.3rem; color: var(--ink); font-weight:600; }

/* ---------- gallery placeholder ---------- */
.gallery{
  display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 140px; gap: 10px;
  margin: 2.6rem 0;
}
.gallery .ph{
  border-radius: var(--radius);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--mono); font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; text-align:center; padding: .6em;
}
.loft-page .gallery .ph{ background: repeating-linear-gradient(135deg, var(--loft-soft), var(--loft-soft) 10px, #f2e9d8 10px, #f2e9d8 20px); color: var(--loft-deep); }
.suite-page .gallery .ph{ background: repeating-linear-gradient(135deg, var(--suite-soft), var(--suite-soft) 10px, #eef2f2 10px, #eef2f2 20px); color: var(--suite-deep); }
.gallery .g1{ grid-column: span 2; grid-row: span 2; }
.gallery .g2{ grid-column: span 2; }
@media (max-width: 760px){
  .gallery{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 110px; }
  .gallery .g1{ grid-column: span 2; grid-row: span 1; }
}

/* ---------- two-col content ---------- */
.two-col{ display:grid; grid-template-columns: 1.3fr 1fr; gap: 3.5rem; padding: 3rem 0; }
.two-col p{ max-width: none; }
.two-col .card{
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.8rem;
}
.amenities{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: 1fr 1fr; gap: .6em 1.2em; }
.amenities li{ font-size:.94rem; padding-left: 1.1em; position:relative; }
.amenities li::before{ content:"—"; position:absolute; left:0; color: var(--ink-soft); }
@media (max-width: 760px){ .two-col{ grid-template-columns: 1fr; } .amenities{ grid-template-columns: 1fr; } }

/* ---------- CTA box ---------- */
.cta-box{
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem;
}
.cta-box .price{ font-family: var(--serif); font-size: 2rem; margin-bottom:.1em; }
.cta-box .price small{ font-family: var(--sans); font-size:.9rem; color: var(--ink-soft); font-weight:400; }
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--mono); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  padding: .85em 1.4em; border-radius: var(--radius); text-decoration:none;
  border: 1px solid var(--ink); color: var(--ink);
  transition: background .2s ease, color .2s ease;
}
.btn.solid{ background: var(--ink); color: var(--paper); }
.btn.solid:hover{ background: var(--ink-soft); }
.btn:not(.solid):hover{ background: var(--ink); color: var(--paper); }
.fineprint{ font-size:.82rem; color: var(--ink-soft); margin-top: 1em; }

/* ---------- quote strip ---------- */
.quotes{ border-top:1px solid var(--line); padding: 3.5rem 0; }
.quote{ font-family: var(--serif); font-size: clamp(1.1rem,2vw,1.5rem); max-width: 60ch; margin: 0 0 .4em; color: var(--ink); }
.quote-src{ font-family: var(--mono); font-size:.78rem; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.08em; }

/* ---------- practical info ---------- */
.practical{ padding: 1rem 0 4rem; }
.practical dl{ display:grid; grid-template-columns: 200px 1fr; gap: .8em 1.5em; }
.practical dt{ font-family: var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-soft); }
.practical dd{ margin:0; }
@media (max-width: 760px){ .practical dl{ grid-template-columns: 1fr; } .practical dt{ margin-top:.6em; } }

/* ---------- footer ---------- */
footer.site-footer{ border-top: 1px solid var(--line); padding: 3rem 0 2.4rem; margin-top: 2rem; }
footer.site-footer .cols{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
footer.site-footer h4{ font-family: var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color: var(--ink-soft); margin: 0 0 .8em; }
footer.site-footer ul{ list-style:none; margin:0; padding:0; }
footer.site-footer li{ margin-bottom:.5em; font-size:.92rem; }
footer.site-footer a{ text-decoration:none; }
footer.site-footer a:hover{ text-decoration:underline; }
.legal-row{
  border-top:1px solid var(--line); margin-top:2.4rem; padding-top:1.4rem;
  font-size:.8rem; color: var(--ink-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6em;
}
@media (max-width: 760px){ footer.site-footer .cols{ grid-template-columns: 1fr; gap: 1.6rem; } }

/* ---------- availability note ---------- */
.avail-note{
  display:flex; align-items:center; gap:.7em; font-size:.88rem; color: var(--ink-soft);
  margin-bottom: 1.4em;
}
.avail-dot{ width:8px; height:8px; border-radius:50%; background:#6E8B5C; flex:none; }

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- villa banner (home) ---------- */
.villa-banner{
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.villa-banner .wrap{
  display:flex; align-items:center; justify-content:space-between; gap: 1.6rem;
  padding: 1.6rem 28px; flex-wrap: wrap;
}
.villa-banner p{ margin:0; color: var(--ink); font-size:.98rem; }
.villa-banner .btn{ flex: none; }

/* ---------- guide box ---------- */
.guide-box{
  display:flex; align-items:center; justify-content:space-between; gap:1.4rem;
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.6rem; margin: 2.2rem 0; flex-wrap: wrap;
  background: var(--paper);
}
.guide-box .label{ font-family: var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft); display:block; margin-bottom:.3em; }
.guide-box p{ margin:0; font-size:.92rem; }

/* ---------- unit sub-nav (loft / suite / villa) ---------- */
.unit-tabs{ display:flex; gap: 1.6rem; margin-top: 1.6rem; }
.unit-tabs a{ font-family: var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; opacity:.55; }
.unit-tabs a.current{ opacity:1; text-decoration:underline; text-underline-offset:4px; }

/* ---------- villa hero (three-way) ---------- */
.unit-hero.villa .tag{ background:#E3DCC9; color:#5B4A2E; }

/* ---------- Loft page palette override ---------- */
body.loft-page{ background: #f9f1e8; color: #422b1c; }
body.loft-page p{ color: #6b5240; }
body.loft-page .site-header{ background: rgba(249,241,232,.86); }
body.loft-page .eyebrow{ color: #6b5240; }
body.loft-page .card, body.loft-page .cta-box, body.loft-page .guide-box{ background: #fffdf9; }

/* ---------- gallery v3 (balanced 4x2 grid + lightbox nav) ---------- */
.gallery{
  display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 10px;
  margin: 2.6rem 0;
}
.gallery .ph{ cursor: zoom-in; }
@media (max-width: 760px){
  .gallery{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 130px; }
}
.lightbox{
  position: fixed; inset: 0; background: rgba(20,18,14,.92); z-index: 100;
  display:flex; align-items:center; justify-content:center; padding: 5vh 5vw;
  opacity:0; pointer-events:none; transition: opacity .2s ease;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox-inner{
  max-width: 100%; max-height: 100%; background: var(--paper); border-radius: var(--radius);
  display:flex; align-items:center; justify-content:center; font-family: var(--mono);
  font-size:.85rem; color: var(--ink-soft); padding: 3rem; text-align:center;
  min-width: min(600px, 80vw); min-height: min(400px, 60vh);
}
.lightbox-close{
  position:absolute; top: 24px; right: 32px; color: var(--paper); font-family: var(--mono);
  font-size: .8rem; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; background:none; border:none;
}
.lightbox-nav{
  position:absolute; top:50%; transform: translateY(-50%);
  background:none; border:none; color: var(--paper); font-size: 2rem; cursor:pointer;
  padding: .5rem 1rem; opacity:.8; transition: opacity .15s ease;
}
.lightbox-nav:hover{ opacity:1; }
.lightbox-prev{ left: 12px; }
.lightbox-next{ right: 12px; }
@media (max-width:760px){ .lightbox-nav{ font-size:1.5rem; padding:.4rem .7rem; } }

/* ---------- reviews strip ---------- */
.reviews{ padding: 1rem 0 4.5rem; border-top: 1px solid var(--line); }
.reviews-track{
  display:flex; gap: 1.2rem; overflow-x: auto; padding-bottom: .6rem;
  scroll-snap-type: x proximity;
}
.review-card{
  flex: 0 0 auto; width: min(340px, 82vw); scroll-snap-align: start;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem;
}
.review-card .stars{ font-family: var(--mono); font-size:.8rem; letter-spacing:.1em; color: var(--loft-deep); margin-bottom:.6em; }
.review-card p{ font-size:.94rem; margin-bottom: .8em; }
.review-card .who{ font-family: var(--mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; color: var(--ink-soft); }

/* ---------- story section ---------- */
.story{ padding: 4.5rem 0; border-top: 1px solid var(--line); background: var(--paper); }
.story .wrap{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items:center; }
.story .initials{
  font-family: var(--serif); font-size: clamp(3rem,7vw,5.5rem); line-height:1;
  color: var(--loft-deep); letter-spacing: .02em;
}
.story .initials small{ display:block; font-family: var(--mono); font-size: .7rem; letter-spacing:.1em; color: var(--ink-soft); margin-top:.8em; text-transform: uppercase; }
@media (max-width: 760px){ .story .wrap{ grid-template-columns: 1fr; gap: 1.6rem; } }

/* ---------- legal pages ---------- */
.legal-content{ padding: 3.5rem 0 5rem; max-width: 74ch; }
.legal-content h2{ font-size: 1.3rem; margin-top: 1.8em; }
.legal-content p, .legal-content li{ font-size: .96rem; }
.legal-content ul{ padding-left: 1.2em; }

/* ---------- availability calendar ---------- */
.avail-calendar{ margin-top: 1.4rem; }
.avail-calendar .cal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom: .8em; }
.avail-calendar .cal-title{ font-family: var(--mono); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-soft); }
.avail-calendar .cal-nav{ background:none; border:1px solid var(--line); border-radius: var(--radius); width:28px; height:28px; cursor:pointer; font-family: var(--mono); color: var(--ink); }
.avail-calendar .cal-nav:hover{ background: var(--ink); color: var(--paper); }
.cal-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.cal-grid .cal-dow{ font-family: var(--mono); font-size:.62rem; text-transform:uppercase; color: var(--ink-soft); text-align:center; padding-bottom:.3em; }
.cal-grid .cal-day{ aspect-ratio: 1; display:flex; align-items:center; justify-content:center; font-size:.78rem; border-radius: var(--radius); }
.cal-grid .cal-day.free{ background: var(--paper); color: var(--ink); }
.cal-grid .cal-day.busy{ background: #E7DCD4; color: #B0A69C; text-decoration: line-through; }
.cal-grid .cal-day.empty{ visibility: hidden; }
.cal-legend{ display:flex; gap: 1.2rem; margin-top:.9em; font-size:.78rem; color: var(--ink-soft); }
.cal-legend .dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:.4em; vertical-align:middle; }
.cal-legend .dot.free{ background: var(--paper); border:1px solid var(--line); }
.cal-legend .dot.busy{ background:#E7DCD4; }
.cal-fallback{ font-size:.85rem; color: var(--ink-soft); }