:root {
  --background: 30 25% 96%;
  --foreground: 215 30% 18%;
  --card: 30 30% 98%;
  --card-foreground: 215 30% 18%;
  --primary: 215 35% 28%;
  --primary-foreground: 30 30% 97%;
  --secondary: 25 30% 88%;
  --secondary-foreground: 215 35% 22%;
  --muted: 215 15% 90%;
  --muted-foreground: 215 15% 42%;
  --accent: 14 55% 52%;
  --accent-foreground: 30 30% 98%;
  --border: 215 20% 86%;
  --input: 215 20% 86%;
  --surface: 215 25% 92%;
  --surface-deep: 215 30% 22%;
  --clay: 14 55% 52%;
  --clay-soft: 18 60% 80%;
  --sand: 30 35% 90%;
}

* { border-color: hsl(var(--border)); }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-feature-settings: "ss01","cv11";
  margin: 0;
}
h1, h2, h3, h4, .font-display {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.text-balance { text-wrap: balance; }

.bg-gradient-hero {
  background: linear-gradient(135deg, hsl(215 30% 22%) 0%, hsl(215 25% 35%) 60%, hsl(14 45% 45%) 100%);
}
.shadow-soft { box-shadow: 0 20px 60px -30px hsl(215 35% 25% / 0.25); }
.shadow-card { box-shadow: 0 1px 0 hsl(215 20% 86%), 0 30px 60px -40px hsl(215 35% 25% / 0.15); }

.grain { position: relative; }
.grain::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(hsl(215 30% 18% / 0.06) 1px, transparent 1px);
  background-size: 3px 3px;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Service cards */
.service-card { transition: background-color .5s, color .5s; }
.service-card .service-icon { color: hsl(var(--clay)); transition: color .5s; }
.service-card:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.service-card:hover .service-icon { color: hsl(var(--primary-foreground)); }

/* CTA */
.cta-btn:hover { background: hsl(var(--primary)) !important; }
.cta-btn:hover .cta-arrow { transform: rotate(45deg); }
.cta-arrow { transition: transform .3s; }

.submit-btn:hover { background: hsl(var(--primary-foreground)) !important; color: hsl(var(--primary)); }

.contact-link span { transition: color .3s; }
.contact-link:hover span { color: hsl(var(--clay-soft)); }

/* Form inputs */
.form-input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid hsl(var(--primary-foreground) / 0.3);
  padding: 1rem 0;
  color: hsl(var(--primary-foreground));
  font-family: inherit;
  font-size: 1rem;
  outline: none;
  transition: border-color .3s;
}
.form-input::placeholder { color: hsl(var(--primary-foreground) / 0.5); }
.form-input:focus { border-color: hsl(var(--clay-soft)); }

/* FAQ */
.faq { background: transparent; border: 0; cursor: pointer; font-family: inherit; }
.faq:hover { text-decoration: underline; text-underline-offset: 4px; }
.faq.open .faq-chevron { transform: rotate(180deg); }
.faq.open .faq-body { grid-template-rows: 1fr; margin-top: .75rem; }

/* Header on dark hero */
header { color: hsl(var(--primary-foreground)); }