@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Outfit:wght@300;400;500;600&display=swap');

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

:root{
  --bg:#faf8f5;
  --bg2:#f3f0ea;
  --bg3:#ede9e1;
  --ink:#1a1814;
  --ink-soft:#5c5a54;
  --ink-mute:#9c9a94;
  --accent:#2a5c45;
  --accent2:#c9953a;
  --accent-soft:rgba(42,92,69,0.08);
  --accent-line:rgba(42,92,69,0.2);
  --border:rgba(26,24,20,0.08);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Outfit',system-ui,sans-serif;
  --shadow:0 2px 20px rgba(26,24,20,0.06);
  --shadow-hover:0 8px 40px rgba(26,24,20,0.12);
}

html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}

/* NAV */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.25rem 3rem;
  background:rgba(250,248,245,0.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-logo{
  font-family:var(--serif);font-size:1.1rem;
  color:var(--ink);text-decoration:none;
  display:flex;align-items:center;gap:0.5rem;
}
.nav-logo .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);display:inline-block;
}
.nav-links{display:flex;gap:0.25rem;list-style:none}
.nav-links a{
  font-size:0.8rem;font-weight:400;
  letter-spacing:0.06em;
  color:var(--ink-soft);text-decoration:none;
  padding:0.45rem 0.9rem;
  border-radius:999px;
  transition:all 0.2s;
}
.nav-links a:hover{color:var(--ink);background:var(--bg2)}
.nav-links a.active{color:var(--accent);background:var(--accent-soft);font-weight:500}
.nav-cta{
  font-size:0.8rem;font-weight:500;
  background:var(--accent);color:#fff;
  text-decoration:none;
  padding:0.5rem 1.25rem;
  border-radius:999px;
  transition:all 0.2s;
  letter-spacing:0.03em;
}
.nav-cta:hover{background:#1e4433;transform:translateY(-1px)}

/* BUTTONS */
.btn-p{
  display:inline-flex;align-items:center;gap:0.5rem;
  background:var(--accent);color:#fff;
  text-decoration:none;padding:0.85rem 1.75rem;
  font-size:0.875rem;font-weight:500;
  border-radius:999px;transition:all 0.2s;
  letter-spacing:0.02em;
}
.btn-p:hover{background:#1e4433;transform:translateY(-2px);box-shadow:0 4px 16px rgba(42,92,69,0.25)}
.btn-s{
  display:inline-flex;align-items:center;gap:0.5rem;
  border:1.5px solid var(--border);color:var(--ink-soft);
  text-decoration:none;padding:0.85rem 1.75rem;
  font-size:0.875rem;font-weight:400;
  border-radius:999px;transition:all 0.2s;
}
.btn-s:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* SECTION */
section{padding:6rem 3rem}
.s-label{
  font-size:0.68rem;font-weight:600;
  letter-spacing:0.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:0.75rem;
}
h2{
  font-family:var(--serif);
  font-size:clamp(1.9rem,3.5vw,2.8rem);
  line-height:1.15;letter-spacing:-0.02em;
  color:var(--ink);margin-bottom:2rem;
}

/* FOOTER */
footer{
  padding:2rem 3rem;
  border-top:1px solid var(--border);
  display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:1rem;
  background:var(--bg2);
}
footer p{font-size:0.75rem;color:var(--ink-mute)}
.foot-links{display:flex;gap:1.5rem}
.foot-links a{
  font-size:0.75rem;color:var(--ink-mute);
  text-decoration:none;transition:color 0.2s;
}
.foot-links a:hover{color:var(--accent)}
.avail{
  display:flex;align-items:center;gap:0.5rem;
  font-size:0.75rem;color:var(--ink-mute);
}
.avail-dot{
  width:7px;height:7px;border-radius:50%;
  background:#22c55e;display:inline-block;
  animation:blink 2s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.4}}

/* CARDS */
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:2rem;
  box-shadow:var(--shadow);
  transition:all 0.25s;
}
.card:hover{
  box-shadow:var(--shadow-hover);
  transform:translateY(-3px);
  border-color:var(--accent-line);
}

/* TAGS */
.tag{
  display:inline-block;
  font-size:0.72rem;font-weight:500;
  padding:0.3rem 0.85rem;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent);
  letter-spacing:0.04em;
}
.tag-outline{
  display:inline-block;
  font-size:0.72rem;
  padding:0.3rem 0.85rem;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--ink-mute);
  letter-spacing:0.04em;
}

@media(max-width:768px){
  nav{padding:1rem 1.25rem}
  .nav-links{display:none}
  section{padding:4rem 1.25rem}
  footer{padding:1.5rem 1.25rem}
}