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

:root{
  --gold: #C9A227;
  --green: #1F3D2B;
  --olive: #132819;
  --cream: #FFFCF6;
  --charcoal: #333333;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --max: 1100px;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--cream); color: var(--charcoal); }
body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; line-height:1.6; font-size:16px; }
img { max-width:100%; display:block; }

.container { width:100%; max-width: var(--max); margin:0 auto; padding: 0 22px; }

.header-wrap { transition: background .2s ease, box-shadow .2s ease;
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--cream) 86%, white);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

nav { display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px; }
.brand img { width:40px; height:40px; border-radius:8px; box-shadow: var(--shadow); }
.brand .name { font-family: 'Playfair Display', serif; font-weight:700; color: var(--olive); }

.nav-links a {
  margin-left: 20px; text-decoration:none; color:var(--charcoal); font-weight:600; position:relative;
}
.nav-links a::after {
  content:''; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--gold); transition:width .22s ease;
}
.nav-links a:hover::after { width:100%; }

.hero {
  position:relative; overflow:hidden; color: white;
  background:
    radial-gradient(1200px 600px at -10% -10%, var(--gold) 0%, transparent 60%),
    radial-gradient(1200px 600px at 110% 0%, var(--green) 0%, transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--olive) 80%, white 20%), color-mix(in srgb, var(--green) 80%, white 20%));
}
.hero::after {
  content:''; position:absolute; inset:0;
  background: radial-gradient(1200px 400px at 50% 100%, rgba(255,255,255,.08), transparent 60%);
  pointer-events:none;
}
.hero-inner { min-height: 64vh; display:grid; grid-template-columns: 1.1fr .9fr; gap: 42px; align-items:center; }
.hero-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius); padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.12);
  backdrop-filter: blur(4px);
}
.kicker { color: var(--gold); text-transform:uppercase; font-weight:700; letter-spacing:.08em; font-size:.8rem; }
.h1 { font-family:'Playfair Display', serif; font-weight:700; font-size: clamp(2.2rem, 3.5vw, 3.3rem); line-height:1.15; margin:10px 0 14px; }
.lead { font-size:1.1rem; opacity:.95; }
.cta-row { display:flex; align-items:center; gap:14px; margin-top:18px; flex-wrap:wrap; }
.btn {
  display:inline-block; padding:10px 16px; border-radius:999px; text-decoration:none; font-weight:600;
  border:1px solid var(--gold); color:white; background: transparent;
}
.btn:hover { background: var(--gold); color: var(--charcoal); }

.badges { display:flex; gap:10px; flex-wrap:wrap; }
.badge { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:6px 12px; font-size:.85rem; }

.slice {
  position:relative; margin-top:-48px; padding-top:64px; background: var(--cream);
  clip-path: polygon(0 4%, 100% 0, 100% 100%, 0% 100%);
}
.section { padding: 74px 0; }
.section .title { font-family:'Playfair Display', serif; font-weight:700; font-size:2rem; color: var(--olive); margin:6px 0 12px; }

.ribbon {
  display:grid; grid-template-columns: repeat(12, 1fr); gap:18px;
}
.card {
  grid-column: span 4;
  background:white; border:1px solid rgba(0,0,0,.06); border-radius:var(--radius); padding:22px; box-shadow: var(--shadow);
}
.card h3 { margin:0 0 6px; font-size:1.1rem; color: var(--olive); }
.card p { margin:0; color:#4a4a4a; }

.strip {
  background: linear-gradient(90deg, color-mix(in srgb, var(--cream) 90%, white 10%), #fff);
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.values { display:flex; gap:14px; flex-wrap:wrap; padding:6px 0 2px; justify-content:center; }
.values .pill { border:1px solid var(--gold); color: var(--olive); padding:8px 14px; border-radius:999px; font-weight:600; background: #fff; }

.alt { background: #fff; }
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:26px; }
.stack { display:flex; flex-direction:column; gap:12px; }

footer { margin-top: 74px; padding: 28px 0; border-top:1px solid rgba(0,0,0,.12); background: linear-gradient(180deg, #fff, var(--cream)); }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.footer-inner small { color:#666; }

a.link { color: var(--olive); border-bottom:1px solid rgba(19,40,25,.25); text-decoration:none; }
a.link:hover { border-bottom-color: var(--gold); }

hr { border:0; border-top:1px solid rgba(0,0,0,.08); margin:18px 0; }

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 24px; min-height: 60vh; }
  .ribbon .card { grid-column: span 12; }
  .grid-2 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
  .btn { transition: all .18s ease; }
  .nav-links a::after { transition: width .22s ease; }
}


/* fade-in */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.h1, .hero-card, .card, .title, .pill {
  animation: fadeInUp .6s ease forwards;
  opacity: 0;
}

@media (max-width: 520px){
  .h1 { font-size: 1.9rem; line-height: 1.22; margin: 10px 0 10px; }
}

.header-wrap.scrolled {
  background: #ffffff;
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.12);
}