:root {
  --font-body: "Manrope", Arial, sans-serif;
  --font-display: "Playfair Display", Georgia, serif;
  --line: rgba(61, 57, 52, .13);
  --radius: 18px;
  --shadow: 0 24px 70px rgba(53, 72, 60, .12);
}

body { letter-spacing: -.01em; }
h1, h2, h3 { font-weight: 500; line-height: 1.08; }
h1 { font-size: clamp(3rem, 13vw, 4.8rem); letter-spacing: -.045em; }
h2 { font-size: clamp(2.35rem, 9vw, 3.9rem); letter-spacing: -.035em; }
h3 { font-size: 1.45rem; }
.brand-name { font-size: 1.45rem; font-weight: 600; letter-spacing: -.035em; }
.brand-descriptor { font-size: .5rem; font-weight: 600; letter-spacing: .32em; }
.eyebrow { color: var(--sage); font-size: .61rem; letter-spacing: .22em; }
.hero-lead { font-size: 1rem; line-height: 1.8; }

.button {
  padding-inline: 1.4rem;
  border-radius: 999px;
  font-size: .66rem;
  letter-spacing: .11em;
  box-shadow: 0 8px 25px rgba(53, 72, 60, .12);
}
.button:hover { box-shadow: none; }
.text-link { font-size: .76rem; }

.hero-visual {
  background: linear-gradient(155deg, #d9c39e 0%, #e7d8bd 54%, #93a18f 54%, #667b6c 100%);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-visual p { color: var(--cream); font-size: 1.75rem; line-height: 1.18; }
.sun-mark {
  width: 10rem; height: 10rem; right: 2rem;
  background: rgba(247, 243, 235, .62);
  box-shadow: 0 0 0 1rem rgba(247, 243, 235, .08);
}
.horizon { background: rgba(53, 72, 60, .22); }

.service-grid { gap: 1rem; border: 0; }
.service-card {
  padding: 1.6rem;
  background: rgba(247, 243, 235, .75);
  border: 1px solid rgba(61, 57, 52, .07);
  border-radius: var(--radius);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); background: var(--cream); }
.card-number { color: var(--sage); letter-spacing: .12em; margin-bottom: 3.5rem; }

.guardian-visual {
  background: linear-gradient(145deg, #92a08d, #607566);
  border-radius: var(--radius);
  box-shadow: 0 28px 80px rgba(21, 31, 25, .25);
}
.large-copy { font-size: 1.4rem; line-height: 1.4; }
.check-list li { line-height: 1.6; }

.process-grid { gap: 1rem; border: 0; }
.process-grid li {
  padding: 1.6rem;
  background: #f0eadf;
  border: 1px solid rgba(61, 57, 52, .07);
  border-radius: var(--radius);
}
.value-grid > div { padding: 1.5rem; }
.area-map {
  background: linear-gradient(145deg, #ebe5d9, #ddd3c1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.lake-shape { border-radius: 45% 55% 48% 52%; }

@media (min-width: 42rem) {
  .service-card, .process-grid li { border-right: 1px solid rgba(61, 57, 52, .07); }
}

@media (min-width: 60rem) {
  .hero-grid { gap: 7rem; }
  .hero-copy { padding-left: 1rem; }
  .service-card { padding: 2rem; }
}