:root {
  --green-950: #06190f;
  --green-900: #0a2415;
  --green-800: #123826;
  --green-700: #1a4a33;
  --green-500: #2f7a52;
  --green-300: #8fbf8a;
  --cream: #f4ecdc;
  --cream-2: #e9dfc8;
  --gold: #8fc22f;
  --gold-2: #b5e04f;
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Manrope', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--green-950); }
body {
  font-family: var(--sans);
  color: var(--cream);
  background: var(--green-950);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

/* film grain */
.grain {
  position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* nav */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(20px, 4vw, 56px);
}
.logo { font-family: var(--serif); font-weight: 600; font-size: 26px; letter-spacing: .02em; color: var(--cream); }
.logo i { font-style: normal; color: var(--gold); }
.call {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px; border-radius: 999px;
  border: 1px solid rgba(143, 194, 47, .55);
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  background: rgba(12, 42, 31, .35); backdrop-filter: blur(10px);
  transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.call:hover { background: var(--gold); color: var(--green-950); transform: translateY(-1px); }
.call .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 0 0 rgba(181, 224, 79, .6); animation: ping 2.4s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(181, 224, 79, 0); } 100% { box-shadow: 0 0 0 0 rgba(181, 224, 79, 0); } }
@media (max-width: 520px) { .call .num { display: none; } }

/* temporary contact strip under each hero */
.contact {
  position: relative; z-index: 2;
  padding: clamp(64px, 10vw, 120px) clamp(20px, 6vw, 96px);
  background: var(--green-900);
  border-top: 1px solid rgba(143, 194, 47, .25);
  display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: end;
}
.contact h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 5vw, 56px); line-height: 1.05; }
.contact p { color: var(--cream-2); opacity: .85; line-height: 1.6; font-size: 15px; }
.contact .btns { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  padding: 14px 24px; border-radius: 999px; font-weight: 600; font-size: 14px; letter-spacing: .04em;
  border: 1px solid var(--gold); transition: all .4s var(--ease);
}
.btn.solid { background: var(--gold); color: var(--green-950); }
.btn:hover { transform: translateY(-2px); background: var(--gold-2); color: var(--green-950); }

/* floating gold dust */
.dust { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.dust span {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold-2); opacity: 0; animation: drift linear infinite;
}
@keyframes drift {
  0% { transform: translateY(20px); opacity: 0; }
  15% { opacity: .7; }
  100% { transform: translateY(-120px) translateX(30px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dust span, .call .dot { animation: none; }
}