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

:root{
  --cream:#F7F3EA;
  --cream2:#F1EBDC;
  --paper:#FFFDF8;
  --forest:#16302A;
  --forest2:#1F3F35;
  --gold:#B8923F;
  --gold-light:#D9B86A;
  --ink:#20261F;
  --muted:#5B6259;
  --line:rgba(22,48,42,.14);
  --max:1120px;
  --shadow: 0 18px 50px rgba(22,48,42,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:'Playfair Display',Georgia,serif; font-weight:600; letter-spacing:.1px}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
p{line-height:1.75; color:var(--muted); margin:0 0 16px}

.wrap{max-width:var(--max); margin:0 auto; padding:0 28px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(247,243,234,.90);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  max-width:var(--max); margin:0 auto; padding:18px 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:36px; height:36px; border-radius:50%}
.brand .word{font-family:'Playfair Display',serif; font-size:20px; font-weight:600; color:var(--forest)}
.brand .word sup{font-size:10px; font-weight:400}
.nav-links{display:flex; gap:30px; align-items:center}
.nav-links a{font-size:14px; color:var(--forest2); font-weight:500; letter-spacing:.2px}
.nav-links a:hover{color:var(--gold)}
.nav-links .cta{
  border:1px solid var(--forest); padding:8px 18px; border-radius:999px;
  color:var(--forest); font-size:13px;
}
.nav-links .cta:hover{background:var(--forest); color:var(--paper)}
.nav-toggle{display:none}

@media (max-width:820px){
  .nav-links{position:fixed; inset:64px 0 0 0; background:var(--cream); flex-direction:column; padding:36px 28px; gap:22px; transform:translateY(-8px); opacity:0; pointer-events:none; transition:.2s}
  .nav-links.open{opacity:1; transform:none; pointer-events:auto}
  .nav-toggle{display:block; background:none; border:none; font-size:22px; color:var(--forest); cursor:pointer}
}

/* Hero */
.hero{position:relative; overflow:hidden}
.hero img{width:100%; height:auto; display:block}
.hero-cap{
  max-width:var(--max); margin:0 auto; padding:20px 28px 0;
  display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap;
}
.eyebrow{
  text-transform:uppercase; letter-spacing:2.4px; font-size:11.5px; color:var(--gold); font-weight:600;
}

/* Sections */
section{padding:64px 0}
.section-tight{padding:36px 0}
.lede{font-family:'Playfair Display',serif; font-size:28px; line-height:1.5; color:var(--forest); font-weight:500; max-width:760px}
.lede em{color:var(--gold); font-style:italic}
.rule{border:none; border-top:1px solid var(--line); margin:0}
.kicker{color:var(--gold); font-weight:600; letter-spacing:1.6px; text-transform:uppercase; font-size:12px}
h2.h{font-size:32px; color:var(--forest); margin:10px 0 18px}
h3.h{font-size:20px; color:var(--forest); margin:0 0 8px}

/* 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:820px){ .grid-3,.grid-2{grid-template-columns:1fr} }

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:30px;
  box-shadow:var(--shadow);
}
.card .tag{color:var(--gold); font-size:12px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase}
.card h3{margin:10px 0 10px}
.card p{margin-bottom:14px}
.card .link{color:var(--forest); font-weight:600; font-size:14px; border-bottom:1px solid var(--gold); padding-bottom:2px}
.card .link:hover{color:var(--gold)}

/* Buttons */
.btn{
  display:inline-block; padding:13px 26px; border-radius:999px; font-size:14.5px; font-weight:600;
  border:1px solid var(--forest); color:var(--forest);
}
.btn:hover{background:var(--forest); color:var(--paper)}
.btn-solid{background:var(--forest); color:var(--paper); border-color:var(--forest)}
.btn-solid:hover{background:var(--forest2)}
.btn-gold{background:var(--gold); color:var(--paper); border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-light)}

/* Band */
.band{background:var(--forest); color:var(--cream)}
.band p{color:rgba(247,243,234,.78)}
.band h2,.band h3{color:var(--cream)}
.band .kicker{color:var(--gold-light)}

/* Footer */
footer{border-top:1px solid var(--line); padding:48px 0 60px}
.foot-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px}
.foot-links{display:flex; gap:26px; flex-wrap:wrap}
.foot-links a{font-size:13.5px; color:var(--muted)}
.foot-links a:hover{color:var(--forest)}
small.copy{color:var(--muted); font-size:12.5px}

.pillars{display:flex; gap:6px; align-items:center; font-size:12.5px; color:var(--muted); letter-spacing:1.5px; text-transform:uppercase}
.pillars span:not(:last-child)::after{content:"/"; margin:0 8px; color:var(--gold)}