/* The original stylesheet remains intact for the earth-palette comparison. */
:root {
  --ink: #231f20;
  --muted: #5c5c5e;
  --paper: #f4f4f4;
  --moss: #d1d3d4;
  --forest: #231f20;
  --clay: #231f20;
  --gold: #f40000;
  --line: rgba(35, 31, 32, 0.14);
  --shadow: 0 24px 70px rgba(35, 31, 32, 0.1);
}

.site-header.scrolled,
.site-header.menu-open {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 32px rgba(35, 31, 32, 0.08);
}

.site-nav a:hover,
.site-nav a:focus-visible {
  background: rgba(209, 211, 212, 0.22);
}

.hero-frame::after {
  background:
    linear-gradient(90deg, rgba(24, 24, 24, 0.86) 0%, rgba(24, 24, 24, 0.64) 48%, rgba(24, 24, 24, 0.2) 100%),
    linear-gradient(0deg, rgba(24, 24, 24, 0.58), transparent 44%);
}

.hero-overlay {
  background: linear-gradient(0deg, rgba(24, 24, 24, 0.72), transparent 42%);
}

.eyebrow,
.section-kicker {
  color: var(--ink);
}

.hero .eyebrow {
  color: rgba(255, 255, 255, 0.9);
}

.button.primary {
  background: var(--ink);
  border-color: var(--lobo-red);
  color: var(--white);
  box-shadow: 0 14px 32px rgba(35, 31, 32, 0.14);
}

.button.primary:hover {
  background: #3b3839;
}

.button:focus-visible,
.bio-heading a:focus-visible {
  outline: 2px solid var(--lobo-red);
  outline-offset: 4px;
}

.hero-proof {
  background: rgba(244, 244, 244, 0.92);
}

.service-card {
  background: var(--white);
}

.map-panel {
  background: #181818;
}

.bio img {
  box-shadow: 0 20px 46px rgba(35, 31, 32, 0.13);
}

.contact-section {
  background: var(--paper);
}

@media (max-width: 680px) {
  .hero-frame::after {
    background:
      linear-gradient(90deg, rgba(24, 24, 24, 0.9) 0%, rgba(24, 24, 24, 0.72) 100%),
      linear-gradient(0deg, rgba(24, 24, 24, 0.48), transparent 44%);
  }
}