@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Inter:wght@400;500;600&display=swap');

:root{
  --charcoal:#17150F;
  --charcoal-2:#1F1C14;
  --gold:#B08D57;
  --gold-soft:#C9AD7D;
  --cream:#EDE6D6;
  --cream-dim:#C7C0AE;
  --olive:#3A3F35;
  --wine:#5C1F2E;
  --line: rgba(176,141,87,0.35);
  --radius: 2px;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--charcoal);
  color:var(--cream);
  font-family:'Inter', sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.serif{
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--cream);
}

a{color:inherit; text-decoration:none;}

img{max-width:100%; display:block;}

.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

.label{
  font-family:'Inter', sans-serif;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold-soft);
  font-weight:600;
}

/* dimension line — signature motif: architect's measurement line with tick marks */
.dim-line{
  position:relative;
  height:9px;
  margin:18px 0 34px;
}
.dim-line::before{
  content:"";
  position:absolute; left:0; right:0; top:4px;
  height:1px;
  background:var(--line);
}
.dim-line::after{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:1px;
  background:var(--line);
  box-shadow: 40px 0 0 var(--line), 80px 0 0 var(--line), 120px 0 0 var(--line),
              160px 0 0 var(--line), 200px 0 0 var(--line);
}
.dim-line.short::after{ box-shadow: 24px 0 0 var(--line), 48px 0 0 var(--line); }
.dim-line.right{ }
.dim-line.right::after{ left:auto; right:0; }

/* header */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(23,21,15,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0;
}
.brand{
  font-family:'Fraunces', serif;
  font-size:22px;
  letter-spacing:0.02em;
  font-weight:500;
}
.brand .dot{color:var(--gold);}
.navlinks{display:flex; gap:34px; align-items:center;}
.navlinks a{
  font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--cream-dim);
  transition:color .2s;
}
.navlinks a:hover, .navlinks a.active{color:var(--gold);}
.nav-cta{
  border:1px solid var(--gold);
  padding:9px 18px;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gold);
  transition:.2s;
}
.nav-cta:hover{background:var(--gold); color:var(--charcoal);}
.burger{display:none; background:none; border:none; color:var(--cream); font-size:24px; cursor:pointer;}

@media(max-width:860px){
  .navlinks{
    position:fixed; top:65px; left:0; right:0; bottom:0;
    background:var(--charcoal);
    flex-direction:column; align-items:flex-start;
    padding:34px 28px; gap:24px;
    transform:translateX(100%);
    transition:transform .3s ease;
  }
  .navlinks.open{transform:translateX(0);}
  .burger{display:block;}
}

/* hero */
.hero{
  padding:100px 0 80px;
  border-bottom:1px solid var(--line);
}
.hero .eyebrow{margin-bottom:20px;}
.hero h1{
  font-size:clamp(38px,6vw,68px);
  line-height:1.04;
  max-width:820px;
}
.hero h1 em{font-style:italic; color:var(--gold-soft);}
.hero p.lede{
  max-width:520px;
  margin-top:22px;
  color:var(--cream-dim);
  font-size:17px;
}
.hero-actions{display:flex; gap:16px; margin-top:34px; flex-wrap:wrap;}

.btn{
  display:inline-block;
  padding:14px 26px;
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  border:1px solid var(--gold);
  transition:.2s;
}
.btn-solid{background:var(--gold); color:var(--charcoal);}
.btn-solid:hover{background:var(--gold-soft);}
.btn-outline{color:var(--gold);}
.btn-outline:hover{background:rgba(176,141,87,0.1);}
.btn-wine{border-color:var(--wine); background:var(--wine); color:var(--cream);}
.btn-wine:hover{background:#722538;}

/* sections */
section{padding:80px 0;}
.section-head{margin-bottom:46px;}
.section-head h2{font-size:clamp(28px,3.4vw,40px);}
.section-head .label{margin-bottom:14px; display:block;}

/* grid cards */
.grid{display:grid; gap:26px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:860px){ .grid-3,.grid-2{grid-template-columns:1fr;} }

.card{
  background:var(--charcoal-2);
  border:1px solid var(--line);
}
.card-img{
  aspect-ratio:4/3;
  background:linear-gradient(135deg,#26231A,#100F0B);
  position:relative;
  overflow:hidden;
}
.card-img .tag{
  position:absolute; top:14px; left:14px;
  background:var(--gold); color:var(--charcoal);
  font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  padding:5px 10px; font-weight:600;
}
.card-body{padding:22px;}
.card-body h3{font-size:20px; margin-bottom:6px;}
.card-body .loc{color:var(--cream-dim); font-size:13px; margin-bottom:14px;}
.card-meta{
  display:flex; justify-content:space-between;
  border-top:1px solid var(--line);
  margin-top:16px; padding-top:14px;
  font-size:13px; color:var(--cream-dim);
}
.card-meta strong{color:var(--gold-soft); font-weight:500;}

/* stats strip */
.stats{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:44px 0;
}
.stats .grid{grid-template-columns:repeat(4,1fr); text-align:center;}
.stat h3{font-size:36px; color:var(--gold-soft);}
.stat .label{margin-top:8px; justify-content:center;}
@media(max-width:860px){ .stats .grid{grid-template-columns:repeat(2,1fr); row-gap:30px;} }

/* footer */
footer{
  border-top:1px solid var(--line);
  padding:60px 0 30px;
  margin-top:40px;
}
.foot-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px;
  margin-bottom:44px;
}
@media(max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr; row-gap:30px;} }
footer h4{font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:16px;}
footer ul{list-style:none;}
footer li{margin-bottom:10px; color:var(--cream-dim); font-size:14px;}
footer li a:hover{color:var(--gold);}
.foot-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  padding-top:24px; border-top:1px solid var(--line);
  font-size:12px; color:var(--cream-dim);
}

/* whatsapp float */
.wa-float{
  position:fixed; bottom:26px; right:26px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  background:var(--wine);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,0.4);
  border:1px solid var(--gold);
}
.wa-float svg{width:26px; height:26px; fill:var(--cream);}

/* page header (interior pages) */
.page-header{
  padding:64px 0 40px;
  border-bottom:1px solid var(--line);
}
.page-header .label{margin-bottom:14px;}
.page-header h1{font-size:clamp(32px,4.4vw,52px);}
.breadcrumb{color:var(--cream-dim); font-size:13px; margin-top:14px;}
.breadcrumb .gold{color:var(--gold-soft);}

/* forms */
form{display:flex; flex-direction:column; gap:18px; max-width:520px;}
label{font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--cream-dim); margin-bottom:6px; display:block;}
input,textarea,select{
  width:100%;
  background:var(--charcoal-2);
  border:1px solid var(--line);
  color:var(--cream);
  padding:13px 14px;
  font-family:'Inter',sans-serif;
  font-size:14px;
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--gold); outline-offset:1px;}
textarea{resize:vertical; min-height:120px;}

/* blog */
.post-card .card-body p{color:var(--cream-dim); font-size:14px; margin-top:6px;}
.post-meta{font-size:12px; color:var(--gold-soft); letter-spacing:0.04em; margin-bottom:8px;}

/* about */
.split{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
@media(max-width:860px){ .split{grid-template-columns:1fr; gap:34px;} }
.pillar{padding:24px 0; border-top:1px solid var(--line);}
.pillar:last-child{border-bottom:1px solid var(--line);}
.pillar h3{font-size:19px; margin-bottom:8px;}
.pillar p{color:var(--cream-dim); font-size:14px; max-width:520px;}

/* filter bar (listings) */
.filters{
  display:flex; gap:14px; flex-wrap:wrap;
  padding:20px 0 44px;
  border-bottom:1px solid var(--line);
  margin-bottom:44px;
}
.filters select{width:auto; min-width:150px;}

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