.hero {
  padding-block: clamp(3rem, 5vw, 6rem) var(--space-xl);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 46%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--color-gold) 0%, transparent 70%);
  opacity: 0.18;
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-lg);
  align-items: end;
}
.hero h1 { margin: var(--space-sm) 0 var(--space-md); }
.hero .lede { max-width: 42ch; margin-bottom: var(--space-md); }
.hero-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

.hero-panel {
  background: var(--color-navy-deep);
  color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: grid;
  gap: var(--space-sm);
}
.hero-panel .stat {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid oklch(100% 0 0 / 0.12);
}
.hero-panel .stat:last-child { border-bottom: none; }
.hero-panel .stat strong {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-gold);
}
.hero-panel .stat span {
  font-size: var(--text-xs);
  color: color-mix(in oklch, var(--color-surface) 75%, transparent);
}

/* Service teaser grid */
.service-teaser-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
.service-teaser .index {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-gold-deep);
  display: block;
  margin-bottom: var(--space-xs);
}
.service-teaser h3 { margin: 0 0 0.6rem; }
.service-teaser p { color: var(--color-ink-soft); }
.service-teaser .link {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-navy-deep);
  border-bottom: 1px solid var(--color-gold);
}

/* Approach / process strip */
.process-strip {
  background: var(--color-surface-alt);
}
.process-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}
.process-list li {
  counter-increment: step;
  padding-top: var(--space-sm);
  border-top: 2px solid var(--color-line);
  position: relative;
}
.process-list li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-gold-deep);
  display: block;
  margin-bottom: 0.5rem;
}
.process-list h3 { font-size: var(--text-base); margin: 0 0 0.4rem; font-family: var(--font-body); font-weight: 600; }
.process-list p { font-size: var(--text-xs); color: var(--color-ink-soft); }

/* CTA band */
.cta-band {
  background: var(--color-navy-deep);
  color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.cta-band h2 { color: var(--color-surface); margin: 0; max-width: 28ch; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .service-teaser-grid { grid-template-columns: 1fr; }
  .process-list { grid-template-columns: repeat(2, 1fr); }
}