.site {
  margin: 0;
  min-height: 100vh;
  color: #f4ece0;
  background:
    radial-gradient(900px 480px at 12% -10%, rgba(196, 163, 106, 0.18), transparent 55%),
    radial-gradient(700px 400px at 100% 20%, rgba(31, 111, 99, 0.35), transparent 50%),
    #0c1816;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
}
.site a { color: inherit; text-decoration: none; }
.site-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px clamp(20px, 5vw, 56px);
  flex-wrap: wrap;
}
.site-logo { display: flex; align-items: center; gap: 12px; }
.site-logo strong { display: block; font-family: "Fraunces", Georgia, serif; font-size: 22px; font-weight: 500; }
.site-logo small { display: block; letter-spacing: 0.16em; text-transform: uppercase; font-size: 10px; color: #c4a36a; }
.site-nav nav { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: #c9c0b4; }
.site-nav nav a:hover { color: #fff; }

.site-hero { padding: 28px clamp(20px, 5vw, 56px) 12px; max-width: 920px; }
.eyebrow { letter-spacing: 0.18em; text-transform: uppercase; font-size: 11px; color: #c4a36a; margin: 0 0 16px; }
.site-hero h1 {
  font-family: "Fraunces", Georgia, serif; font-weight: 500;
  font-size: clamp(36px, 7vw, 64px); line-height: 1.08; margin: 0 0 18px; letter-spacing: -0.03em;
}
.lead { font-size: 18px; line-height: 1.65; color: #d5ccc0; max-width: 640px; margin: 0; }

.site-gates {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; padding: 48px clamp(20px, 5vw, 56px) 24px;
}
.gate {
  display: flex; flex-direction: column; min-height: 280px;
  padding: 28px 28px 24px; border-radius: 24px;
  border: 1px solid rgba(244, 236, 224, 0.12);
  background: rgba(255, 252, 248, 0.04);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.gate:hover { transform: translateY(-4px); border-color: rgba(196, 163, 106, 0.55); background: rgba(196, 163, 106, 0.08); }
.gate-alt { background: rgba(31, 111, 99, 0.16); }
.gate-kicker { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #c4a36a; }
.gate h2 { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 32px; margin: 10px 0 12px; }
.gate p { color: #d5ccc0; line-height: 1.55; margin: 0 0 auto; }
.gate-cta { display: inline-block; margin-top: 22px; font-weight: 600; font-size: 14px; color: #f4ece0; }

.site-strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px; padding: 12px clamp(20px, 5vw, 56px) 64px;
}
.site-strip article { padding: 8px 4px; }
.site-strip h3 { font-size: 15px; margin: 0 0 8px; }
.site-strip p { margin: 0; color: #b7aea2; font-size: 14px; line-height: 1.5; }

.site-foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 24px clamp(20px, 5vw, 56px) 40px;
  border-top: 1px solid rgba(244, 236, 224, 0.08);
  color: #9aa39e; font-size: 13px;
}
.site-foot a { color: #c4a36a; }
.site-links { display: flex; gap: 18px; }

@media (max-width: 860px) {
  .site-gates, .site-strip { grid-template-columns: 1fr; }
  .gate { min-height: 0; }
}