/* ============================================================
   LIVACRES — Private Luxury Real Estate Advisory
   Design system: "The Lutyens Palette"
   Bone white · Hedge green · Brass nameplate
   Display: Marcellus  ·  Body: Figtree
   ============================================================ */

:root{
  --green:      #143823;
  --green-2:    #1B4530;
  --green-line: #2C5A41;
  --bone:       #FFFFFF;
  --bone-2:     #F1F6F1;
  --bone-line:  #D8E2D8;
  --brass:      #1F7A45;
  --brass-soft: #7FC79B;
  --ink:        #14231A;
  --muted:      #5C6B60;
  --muted-dark: #9DB8A6;
  --max: 1180px;
  --pad: clamp(20px, 5vw, 56px);
  --radius: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Figtree', system-ui, sans-serif;
  background:var(--bone);
  color:var(--ink);
  line-height:1.65;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--brass); color:#fff; }

h1,h2,h3,.display{ font-family:'Marcellus', serif; font-weight:400; line-height:1.12; letter-spacing:.01em; }

.wrap{ max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

/* ---------- Nameplate (signature element) ---------- */
.plate{
  display:inline-flex; align-items:center; gap:12px;
  border:1px solid var(--bone-line);
  box-shadow:inset 0 0 0 3px var(--bone), inset 0 0 0 4px var(--bone-line);
  padding:9px 22px;
  font-size:11.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); background:var(--bone);
}
.plate::before{ content:""; width:22px; height:1px; background:var(--brass); }
.on-dark .plate,
.plate.dark{
  border-color:var(--green-line); background:var(--green);
  box-shadow:inset 0 0 0 3px var(--green), inset 0 0 0 4px var(--green-line);
  color:var(--muted-dark);
}

/* ---------- Header ---------- */
.topbar{
  background:var(--green); color:var(--bone);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
.topbar .wrap{ display:flex; justify-content:space-between; padding-top:9px; padding-bottom:9px; }
.topbar a{ color:var(--brass-soft); }
.topbar .tb-right{ display:flex; gap:26px; }
@media (max-width:720px){ .topbar .tb-left{ display:none; } .topbar .wrap{ justify-content:center; } }

header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(241,237,226,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--bone-line);
}
header.site .wrap{ display:flex; align-items:center; justify-content:space-between; height:78px; }
.brand{ font-family:'Marcellus', serif; font-size:26px; letter-spacing:.14em; text-transform:uppercase; }
.brand small{ display:block; font-family:'Figtree'; font-size:9.5px; letter-spacing:.42em; color:var(--brass); margin-top:1px; }
nav.main{ display:flex; gap:34px; align-items:center; }
nav.main a{
  font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  padding:6px 0; border-bottom:1px solid transparent; transition:all .25s var(--ease);
}
nav.main a:hover, nav.main a.active{ color:var(--ink); border-bottom-color:var(--brass); }
.btn{
  display:inline-block; background:var(--green); color:var(--bone);
  font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  padding:15px 32px; border:1px solid var(--green);
  transition:all .3s var(--ease); cursor:pointer; font-family:'Figtree';
}
.btn:hover{ background:transparent; color:var(--green); }
.btn.brass{ background:var(--brass); border-color:var(--brass); color:#fff; }
.btn.brass:hover{ background:transparent; color:var(--brass); }
.btn.ghost{ background:transparent; color:var(--bone); border-color:rgba(241,237,226,.4); }
.btn.ghost:hover{ border-color:var(--brass); color:var(--brass-soft); }
.nav-toggle{ display:none; background:none; border:1px solid var(--bone-line); padding:10px 14px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; cursor:pointer; color:var(--ink); }
@media (max-width:920px){
  nav.main{ position:fixed; inset:0; top:0; background:var(--bone); flex-direction:column; justify-content:center; gap:28px; transform:translateY(-102%); transition:transform .45s var(--ease); z-index:60; }
  nav.main.open{ transform:none; }
  nav.main a{ font-size:17px; }
  .nav-toggle{ display:block; position:relative; z-index:70; }
  header.site .btn{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:88vh; display:flex; align-items:flex-end;
  background:var(--green); color:var(--bone); overflow:hidden;
}
.hero .bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:.5; filter:saturate(.75) contrast(1.02);
  animation:heroIn 2.4s var(--ease) both;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,39,31,.25) 0%, rgba(28,39,31,.72) 78%, var(--green) 100%);
}
@keyframes heroIn{ from{ transform:scale(1.06); opacity:0;} to{ transform:none; opacity:.5;} }
.hero .wrap{ position:relative; z-index:2; padding-top:120px; padding-bottom:96px; width:100%; }
.hero h1{ font-size:clamp(40px, 6.2vw, 84px); max-width:13ch; margin:26px 0 22px; }
.hero p.lede{ max-width:52ch; color:var(--muted-dark); font-size:18px; }
.hero .cta-row{ display:flex; gap:18px; margin-top:40px; flex-wrap:wrap; }
.hero .markets{
  margin-top:64px; padding-top:26px; border-top:1px solid var(--green-line);
  display:flex; gap:clamp(24px,5vw,64px); flex-wrap:wrap;
  font-size:12.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted-dark);
}
.hero .markets span b{ color:var(--brass-soft); font-weight:600; margin-right:8px; }

/* ---------- Sections ---------- */
section{ padding:clamp(72px, 9vw, 128px) 0; }
section.dark{ background:var(--green); color:var(--bone); }
section.tint{ background:var(--bone-2); }
.sec-head{ max-width:720px; margin-bottom:clamp(40px,5vw,64px); }
.sec-head h2{ font-size:clamp(30px,3.6vw,48px); margin-top:24px; }
.sec-head p{ color:var(--muted); margin-top:16px; max-width:56ch; }
section.dark .sec-head p{ color:var(--muted-dark); }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.sec-head.center p{ margin-left:auto; margin-right:auto; }

/* ---------- Location cards ---------- */
.loc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--green-line); border:1px solid var(--green-line); }
.loc{ position:relative; aspect-ratio:3/4.1; overflow:hidden; background:var(--green-2); display:flex; align-items:flex-end; }
.loc .img{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.62; transition:all .8s var(--ease); filter:saturate(.7); }
.loc:hover .img{ transform:scale(1.06); opacity:.85; filter:saturate(.95); }
.loc::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(20,28,22,.85)); }
.loc .meta{ position:relative; z-index:2; padding:26px; color:var(--bone); width:100%; }
.loc .meta h3{ font-size:26px; letter-spacing:.06em; }
.loc .meta em{ display:block; font-style:normal; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--brass-soft); margin-bottom:8px; }
.loc .meta span{ display:block; font-size:13px; color:var(--muted-dark); margin-top:6px; }
@media (max-width:960px){ .loc-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .loc-grid{ grid-template-columns:1fr; } .loc{ aspect-ratio:16/10; } }

/* ---------- Portfolio cards ---------- */
.port-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,36px); }
.card{
  background:var(--bone); border:1px solid var(--bone-line);
  box-shadow:inset 0 0 0 4px var(--bone), inset 0 0 0 5px var(--bone-line);
  padding:5px; transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover{ transform:translateY(-6px); }
.card .ph{ aspect-ratio:4/3; background:var(--green-2); background-size:cover; background-position:center; filter:saturate(.85); }
.card .body{ padding:24px 20px 26px; }
.card .body em{ font-style:normal; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--brass); }
.card .body h3{ font-size:24px; margin:10px 0 8px; }
.card .body p{ font-size:14.5px; color:var(--muted); }
.card .price{
  display:flex; justify-content:space-between; align-items:baseline;
  border-top:1px solid var(--bone-line); margin-top:18px; padding-top:16px;
}
.card .price b{ font-family:'Marcellus'; font-weight:400; font-size:20px; }
.card .price span{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.card .link{ font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); }
.card .link:hover{ color:var(--ink); }
@media (max-width:920px){ .port-grid{ grid-template-columns:1fr; max-width:560px; margin:0 auto; } }

/* ---------- Services ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--green-line); border:1px solid var(--green-line); }
.svc{ background:var(--green); padding:clamp(28px,3.4vw,46px); }
.svc h3{ font-size:22px; color:var(--bone); margin:18px 0 12px; }
.svc p{ font-size:14.5px; color:var(--muted-dark); }
.svc .glyph{ width:44px; height:44px; border:1px solid var(--green-line); display:grid; place-items:center; color:var(--brass-soft); font-family:'Marcellus'; font-size:19px; }
@media (max-width:880px){ .svc-grid{ grid-template-columns:1fr; } }

/* ---------- Ledger / stats ---------- */
.ledger{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--bone-line); border-bottom:1px solid var(--bone-line); }
.ledger div{ padding:34px 26px; border-left:1px solid var(--bone-line); }
.ledger div:first-child{ border-left:none; }
.ledger b{ font-family:'Marcellus'; font-weight:400; font-size:clamp(30px,3.4vw,44px); display:block; }
.ledger span{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
@media (max-width:820px){ .ledger{ grid-template-columns:1fr 1fr; } .ledger div:nth-child(3){ border-left:none; } .ledger div{ border-top:1px solid var(--bone-line);} .ledger div:nth-child(-n+2){ border-top:none; } }

/* ---------- FAQ (AEO) ---------- */
.faq{ max-width:820px; margin:0 auto; }
.faq details{ border-bottom:1px solid var(--bone-line); }
.faq details:first-of-type{ border-top:1px solid var(--bone-line); }
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;
  padding:24px 4px; font-family:'Marcellus'; font-size:19px; gap:20px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--brass); font-size:24px; transition:transform .3s var(--ease); flex-shrink:0; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .a{ padding:0 4px 26px; color:var(--muted); max-width:64ch; }
section.dark .faq details, section.dark .faq details:first-of-type{ border-color:var(--green-line); }
section.dark .faq .a{ color:var(--muted-dark); }

/* ---------- Split / editorial ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,84px); align-items:center; }
.split .img-frame{
  border:1px solid var(--bone-line); padding:5px;
  box-shadow:inset 0 0 0 4px var(--bone), inset 0 0 0 5px var(--bone-line);
}
.split .img-frame .img{ aspect-ratio:4/4.6; background-size:cover; background-position:center; filter:saturate(.8); }
.split h2{ font-size:clamp(28px,3.2vw,42px); margin:22px 0 18px; }
.split p{ color:var(--muted); margin-bottom:14px; }
.split ul{ list-style:none; margin-top:20px; }
.split li{ padding:12px 0 12px 30px; border-top:1px solid var(--bone-line); position:relative; font-size:15px; }
.split li::before{ content:""; position:absolute; left:2px; top:22px; width:14px; height:1px; background:var(--brass); }
@media (max-width:880px){ .split{ grid-template-columns:1fr; } }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--green); color:var(--bone); text-align:center; }
.cta-band h2{ font-size:clamp(30px,4vw,52px); max-width:20ch; margin:24px auto 18px; }
.cta-band p{ color:var(--muted-dark); max-width:52ch; margin:0 auto 36px; }

/* ---------- Forms ---------- */
form.enquiry{ display:grid; gap:16px; }
form.enquiry .row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
form.enquiry label{ font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:7px; }
form.enquiry input, form.enquiry select, form.enquiry textarea{
  width:100%; background:var(--bone); border:1px solid var(--bone-line);
  padding:14px 16px; font-family:'Figtree'; font-size:15px; color:var(--ink);
}
form.enquiry input:focus, form.enquiry select:focus, form.enquiry textarea:focus{ outline:2px solid var(--brass); outline-offset:0; border-color:var(--brass); }
form.enquiry .note{ font-size:12.5px; color:var(--muted); }
@media (max-width:640px){ form.enquiry .row{ grid-template-columns:1fr; } }

/* ---------- Listing page ---------- */
.listing-hero{ position:relative; min-height:66vh; display:flex; align-items:flex-end; background:var(--green); color:var(--bone); }
.listing-hero .bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.55; filter:saturate(.8); }
.listing-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(28,39,31,.15), rgba(28,39,31,.9)); }
.listing-hero .wrap{ position:relative; z-index:2; padding-top:100px; padding-bottom:56px; width:100%; }
.listing-hero h1{ font-size:clamp(34px,5vw,64px); margin:20px 0 10px; }
.listing-hero .sub{ color:var(--muted-dark); font-size:17px; }
.factbar{ background:var(--green); color:var(--bone); border-top:1px solid var(--green-line); }
.factbar .wrap{ display:grid; grid-template-columns:repeat(4,1fr); }
.factbar div{ padding:24px 22px; border-left:1px solid var(--green-line); }
.factbar div:first-child{ border-left:none; padding-left:0; }
.factbar b{ font-family:'Marcellus'; font-weight:400; font-size:22px; display:block; }
.factbar span{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-dark); }
@media (max-width:820px){ .factbar .wrap{ grid-template-columns:1fr 1fr; } .factbar div:nth-child(3){ border-left:none; padding-left:0;} }
.listing-body{ display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(36px,5vw,72px); align-items:start; }
.listing-body .prose h2{ font-size:28px; margin:38px 0 14px; }
.listing-body .prose h2:first-child{ margin-top:0; }
.listing-body .prose p{ color:var(--muted); margin-bottom:14px; }
.amen{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--bone-line); border:1px solid var(--bone-line); margin-top:20px; }
.amen div{ background:var(--bone); padding:15px 18px; font-size:14px; }
.amen div::before{ content:"— "; color:var(--brass); }
aside.enq{
  position:sticky; top:110px; background:var(--bone-2); border:1px solid var(--bone-line);
  box-shadow:inset 0 0 0 4px var(--bone-2), inset 0 0 0 5px var(--bone-line); padding:30px 28px;
}
aside.enq h3{ font-size:23px; margin-bottom:6px; }
aside.enq .sub{ font-size:13.5px; color:var(--muted); margin-bottom:22px; }
aside.enq input, aside.enq select{ background:var(--bone); }
@media (max-width:920px){ .listing-body{ grid-template-columns:1fr; } aside.enq{ position:static; } }

.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; }
.gallery .g{ aspect-ratio:4/3; background-size:cover; background-position:center; border:1px solid var(--bone-line); filter:saturate(.85); }
@media (max-width:680px){ .gallery{ grid-template-columns:1fr 1fr; } }

/* ---------- Price table (location pages) ---------- */
table.bands{ width:100%; border-collapse:collapse; font-size:15px; }
table.bands th{ font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); text-align:left; padding:14px 16px; border-bottom:1px solid var(--ink); font-weight:600; }
table.bands td{ padding:16px; border-bottom:1px solid var(--bone-line); }
table.bands td b{ font-family:'Marcellus'; font-weight:400; font-size:17px; }
@media (max-width:640px){ table.bands{ font-size:13.5px; } table.bands td, table.bands th{ padding:12px 8px; } }

/* ---------- Footer ---------- */
footer{ background:var(--green); color:var(--muted-dark); font-size:14px; }
footer .top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,56px); padding:clamp(56px,7vw,88px) 0 48px; }
footer h4{ font-family:'Figtree'; font-size:11.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--brass-soft); margin-bottom:20px; font-weight:600; }
footer .fbrand{ font-family:'Marcellus'; font-size:24px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone); }
footer p{ margin-top:14px; max-width:34ch; }
footer ul{ list-style:none; }
footer li{ margin-bottom:11px; }
footer a:hover{ color:var(--bone); }
footer .base{ border-top:1px solid var(--green-line); padding:22px 0; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; letter-spacing:.06em; }
@media (max-width:880px){ footer .top{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ footer .top{ grid-template-columns:1fr; } }

/* ---------- Reveal on scroll ---------- */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .rv{ opacity:1; transform:none; }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{ background:var(--green); color:var(--bone); padding:clamp(80px,10vw,130px) 0 clamp(48px,6vw,72px); }
.page-hero h1{ font-size:clamp(36px,5vw,64px); margin-top:24px; max-width:16ch; }
.page-hero p{ color:var(--muted-dark); margin-top:18px; max-width:56ch; font-size:17px; }

.whatsapp-fab{
  position:fixed; right:22px; bottom:22px; z-index:80;
  width:54px; height:54px; border-radius:50%; background:var(--green); color:var(--bone);
  display:grid; place-items:center; border:1px solid var(--brass);
  font-family:'Marcellus'; font-size:20px; box-shadow:0 8px 24px rgba(20,28,22,.35);
  transition:transform .3s var(--ease);
}
.whatsapp-fab:hover{ transform:translateY(-4px); }