/* Gravewood Solutions — dark, high-end, spooky */
:root{
  --bg:#0b0f0e;
  --bg-deep:#070a09;
  --forest:#0e2a21;
  --gold:#C5A46D; /* muted antique gold */
  --pewter:#c8c9cc;
  --ash:#e7e4dc;
  --ink:#0b0d0c;
  --soft: clamp(16px, 1.6vw, 20px);
}

*{ box-sizing: border-box; }
html,body{
  height:100%;
  margin:0;
  background: radial-gradient(1000px 600px at 50% -10%, rgba(14,42,33,0.25), transparent),
              radial-gradient(900px 500px at 20% 0%, rgba(0,0,0,0.6), transparent),
              var(--bg);
  color:#ddd;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}

/* subtle film grain */
.noise{
  position:fixed; inset:0;
  pointer-events:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"140\" height=\"140\"><filter id=\"n\"><feTurbulence type=\"fractalNoise\" baseFrequency=\"0.8\" numOctaves=\"2\"/></filter><rect width=\"100%\" height=\"100%\" filter=\"url(%23n)\" opacity=\"0.05\"/></svg>');
  mix-blend-mode: soft-light;
  z-index:1;
}

/* fog layers */
.fog{
  position:fixed; inset:-10% -10% auto -10%;
  height:60vh;
  background: radial-gradient(60% 45% at 50% 50%, rgba(255,255,255,0.06), transparent 70%);
  filter: blur(24px);
  z-index:0;
  animation: drift 30s linear infinite;
}
.fog-1{ top:0; opacity:.5; }
.fog-2{ top:20vh; opacity:.3; animation-duration:44s; animation-direction: reverse; }

@keyframes drift{
  0%{ transform: translateX(-10%) translateY(0); }
  50%{ transform: translateX(10%) translateY(-3%); }
  100%{ transform: translateX(-10%) translateY(0); }
}

.site-header{
  position:relative;
  z-index:2;
  max-width: 1100px;
  margin: clamp(16px, 4vw, 48px) auto 0;
  padding: 24px clamp(16px, 5vw, 40px);
  display:flex;
  align-items:flex-end;
  gap: clamp(16px, 4vw, 40px);
  border-bottom: 1px solid rgba(197,164,109,.25);
}

.logo{
  width: clamp(96px, 18vw, 180px);
  height:auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.55));
  margin-top: 6px;
}

.brand h1{
  margin:0;
  font-family: Cinzel, serif;
  font-weight:600;
  letter-spacing:.06em;
  color: var(--ash);
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
  font-size: clamp(28px, 5vw, 56px);
}
.brand h1 span{
  color: var(--gold);
  font-weight:700;
}
.tagline{
  margin:.4rem 0 0 0;
  color: var(--gold);
  letter-spacing:.08em;
  text-transform: uppercase;
  font-size: clamp(12px, 1.6vw, 14px);
  opacity:.85;
}

.content{
  position:relative;
  z-index:2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px clamp(16px, 5vw, 40px) 80px;
}

.intro{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
  padding: 28px 0 8px;
}
.lede{
  max-width: 720px;
  font-size: clamp(16px, 1.7vw, 20px);
  color:#e7e4dc;
  opacity:.9;
}
.btn{
  display:inline-block;
  border:1px solid var(--gold);
  color: var(--gold);
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration:none;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.btn:hover{ background: var(--gold); color:#0b0d0c; transform: translateY(-1px); }

.panel{
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(197,164,109,.18);
}
.panel h2{
  font-family: Cinzel, serif;
  color: var(--ash);
  letter-spacing:.05em;
  font-size: clamp(22px, 3vw, 32px);
  margin: 0 0 12px;
}

.bullets{
  margin: 0;
  padding-left: 18px;
}
.bullets li{ margin: 6px 0; color:#d8d6cf; }

.cards{
  display:grid;
  grid-template-columns: repeat( auto-fit, minmax(220px, 1fr) );
  gap: 16px;
  margin-top: 12px;
}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border:1px solid rgba(197,164,109,.18);
  border-radius: 14px;
  padding: 18px;
  min-height: 140px;
  backdrop-filter: blur(2px);
  transition: transform .2s ease, border-color .2s ease;
}
.card:hover{ transform: translateY(-2px); border-color: rgba(197,164,109,.4); }
.card h3{
  margin:0 0 6px; color: var(--gold); font-size: 18px; font-weight:600; letter-spacing:.04em;
}
.card p{ margin:0; color:#d9d6cd; font-size: 14.5px; }

.contact{
  text-align:center;
  padding-bottom: 24px;
}
.email{
  display:inline-block;
  margin-top:10px;
  color: var(--ash);
  text-decoration:none;
  border-bottom: 1px solid rgba(197,164,109,.35);
  padding-bottom:2px;
}
.email:hover{ color: var(--gold); }

.site-footer{
  position:relative;
  z-index:2;
  border-top: 1px solid rgba(197,164,109,.2);
  padding: 18px clamp(16px, 5vw, 40px);
  text-align:center;
  color:#cfcac0;
  font-size: 12.5px;
  background: linear-gradient(0deg, rgba(0,0,0,.3), transparent);
}