:root{
  --bg:#f7f3ee;
  --bg-elev:#fffdf9;
  --ink:#1f1a17;
  --muted:#6b625a;
  --line:#e6ddd3;
  --accent:#2a9d8f;
  --accent-ink:#0f3d38;
  --accent-soft:#d8f0ec;
  --warm:#c47a4a;
  --shadow:0 10px 30px rgba(31,26,23,.08);
  --radius:18px;
  --font: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --display: "Fraunces", Georgia, serif;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--accent-ink); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--accent)}
.wrap{width:min(100% - 2rem, var(--max)); margin-inline:auto}
.site-header{
  position:sticky; top:0; z-index:50; background:rgba(247,243,238,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 0}
.brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--ink)}
.brand img{height:36px; width:auto}
.brand span{font-family:var(--display); font-weight:600; font-size:1.25rem; letter-spacing:.01em}
.nav{display:flex; flex-wrap:wrap; gap:.35rem .9rem; align-items:center}
.nav a{text-decoration:none; color:var(--muted); font-weight:500; font-size:.95rem}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  border-radius:999px; padding:.7rem 1.15rem; font-weight:600; border:0;
  cursor:pointer; text-decoration:none; font-size:.95rem; line-height:1.2;
}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:#238a7e; color:#fff}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink); color:var(--ink)}
.btn-warm{background:var(--warm); color:#fff}
.btn-warm:hover{filter:brightness(.95); color:#fff}
.btn-lg{padding:.9rem 1.35rem; font-size:1.05rem}
.hero{
  position:relative; padding:3.5rem 0 3rem; overflow:hidden;
  background:
    linear-gradient(120deg, rgba(31,26,23,.72), rgba(42,157,143,.45)),
    url('/assets/brand/cover.jpg') center/cover no-repeat;
  color:#fff; min-height:420px; display:flex; align-items:flex-end;
}
.hero .wrap{padding-bottom:.5rem}
.hero h1{
  font-family:var(--display); font-weight:600; font-size:clamp(2rem, 5vw, 3.2rem);
  line-height:1.12; margin:0 0 .75rem; max-width:16ch; text-wrap:balance;
}
.hero p{max-width:38rem; font-size:1.1rem; opacity:.95; margin:0 0 1.4rem}
.hero-actions{display:flex; flex-wrap:wrap; gap:.7rem}
.eyebrow{
  display:inline-block; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  font-weight:600; color:var(--accent); margin-bottom:.5rem;
}
.hero .eyebrow{color:#dff7f2}
.section{padding:3.25rem 0}
.section-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:1.5rem}
.section-head h2{font-family:var(--display); font-size:clamp(1.6rem, 3vw, 2.1rem); margin:0; line-height:1.2}
.section-head p{margin:0; color:var(--muted); max-width:36rem}
.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chip{
  display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .85rem;
  border-radius:999px; background:var(--bg-elev); border:1px solid var(--line);
  text-decoration:none; color:var(--ink); font-weight:500; font-size:.9rem;
}
.chip:hover,.chip.is-active{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink)}
.grid{display:grid; gap:1.15rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(31,26,23,.12)}
.card-media{aspect-ratio:4/3; background:#ddd; overflow:hidden}
.card-media img{width:100%; height:100%; object-fit:cover}
.card-body{padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.45rem; flex:1}
.card-body h3{margin:0; font-size:1.05rem; line-height:1.3; font-family:var(--display); font-weight:600}
.card-body h3 a{text-decoration:none; color:inherit}
.meta{display:flex; flex-wrap:wrap; gap:.35rem .7rem; color:var(--muted); font-size:.88rem}
.tag{
  display:inline-block; background:var(--accent-soft); color:var(--accent-ink);
  border-radius:999px; padding:.15rem .55rem; font-size:.75rem; font-weight:600;
}
.card-cta{margin-top:auto; padding-top:.55rem; display:flex; gap:.5rem; flex-wrap:wrap}
.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.value{
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.25rem 1.2rem;
}
.value h3{margin:.2rem 0 .4rem; font-family:var(--display); font-size:1.15rem}
.value p{margin:0; color:var(--muted); font-size:.95rem}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; counter-reset:step}
.step{
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.25rem; position:relative;
}
.step::before{
  counter-increment:step; content:counter(step); width:2rem; height:2rem;
  display:grid; place-items:center; border-radius:50%; background:var(--accent); color:#fff;
  font-weight:700; margin-bottom:.75rem; font-size:.9rem;
}
.step h3{margin:0 0 .35rem; font-family:var(--display)}
.step p{margin:0; color:var(--muted)}
.map-teaser{
  display:grid; grid-template-columns:1.1fr .9fr; gap:1.25rem; align-items:center;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:calc(var(--radius) + 4px);
  overflow:hidden; box-shadow:var(--shadow);
}
.map-teaser-copy{padding:1.75rem}
.map-teaser-copy h2{font-family:var(--display); margin:0 0 .5rem}
.map-teaser-visual{
  min-height:260px; background:
    linear-gradient(160deg, var(--accent-soft), #f0e6da),
    radial-gradient(circle at 30% 40%, var(--accent), transparent 45%);
  position:relative;
}
.map-teaser-visual .pin{
  position:absolute; width:12px; height:12px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 6px rgba(42,157,143,.25);
}
.filters{
  display:flex; flex-wrap:wrap; gap:.75rem; align-items:end; margin-bottom:1.25rem;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem;
}
.filters label{display:flex; flex-direction:column; gap:.3rem; font-size:.8rem; font-weight:600; color:var(--muted)}
.filters select,.filters input{
  min-width:9rem; padding:.55rem .7rem; border-radius:10px; border:1px solid var(--line);
  background:#fff; font:inherit; color:var(--ink);
}
.property-hero{display:grid; grid-template-columns:1.3fr .7fr; gap:1.25rem; align-items:start}
.gallery{display:grid; gap:.5rem}
.gallery-main{border-radius:var(--radius); overflow:hidden; aspect-ratio:16/11; background:#ddd}
.gallery-main img{width:100%; height:100%; object-fit:cover}
.gallery-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem}
.gallery-thumbs img{aspect-ratio:1; object-fit:cover; border-radius:12px; width:100%; height:100%}
.book-panel{
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.25rem; box-shadow:var(--shadow); position:sticky; top:5rem;
}
.book-panel h1{font-family:var(--display); font-size:1.55rem; margin:0 0 .5rem; line-height:1.2}
.facts{display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; margin:1rem 0}
.fact{background:var(--bg); border-radius:12px; padding:.7rem .8rem}
.fact strong{display:block; font-size:.75rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em}
.note{font-size:.85rem; color:var(--muted)}
.poi-list{list-style:none; padding:0; margin:0; display:grid; gap:.55rem}
.poi-list li{padding:.7rem .85rem; background:var(--bg-elev); border:1px solid var(--line); border-radius:12px}
#map{height:min(70vh, 640px); width:100%; border-radius:var(--radius); border:1px solid var(--line); z-index:1}
.map-layout{display:grid; grid-template-columns:280px 1fr; gap:1rem}
.map-side{
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem; max-height:min(70vh,640px); overflow:auto;
}
.map-card{border:1px solid var(--line); border-radius:12px; padding:.75rem; margin-top:.65rem; background:#fff}
.site-footer{
  margin-top:3rem; background:#1f1a17; color:#f3ebe3; padding:2.5rem 0 1.5rem;
}
.site-footer a{color:#dff7f2}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:1.5rem}
.footer-grid h3{font-family:var(--display); margin:0 0 .7rem; font-size:1.1rem}
.footer-grid ul{list-style:none; padding:0; margin:0; display:grid; gap:.35rem}
.footer-grid a{text-decoration:none}
.footer-bottom{margin-top:1.75rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.12); color:#b8aea4; font-size:.9rem}
.menu-toggle{display:none; background:none; border:1px solid var(--line); border-radius:10px; padding:.4rem .6rem}
.empty{padding:2rem; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:var(--radius)}
.page-hero{padding:2.5rem 0 1rem}
.page-hero h1{font-family:var(--display); font-size:clamp(1.8rem, 4vw, 2.6rem); margin:0 0 .5rem}
.page-hero p{margin:0; color:var(--muted); max-width:40rem}
.approx{font-size:.8rem; color:var(--muted); font-style:italic}
@media (max-width:900px){
  .grid-3,.value-grid,.steps,.property-hero,.map-teaser,.map-layout,.footer-grid,.grid-2{grid-template-columns:1fr}
  .nav{display:none}
  .nav.is-open{display:flex; position:absolute; right:1rem; top:64px; background:var(--bg-elev); border:1px solid var(--line); border-radius:14px; padding:1rem; flex-direction:column; box-shadow:var(--shadow)}
  .menu-toggle{display:inline-flex}
  .map-side{max-height:none}
}