.hero-band {
  background: linear-gradient(180deg, var(--color-surface), var(--color-bg) 92%);
  border-bottom: 1px solid var(--color-accent-300);
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--leading) clamp(24px, 5vw, 72px);
  align-items: center;
  padding: calc(3.5 * var(--leading)) 0 calc(3 * var(--leading));
}
.pills { display: flex; gap: 24px; flex-wrap: wrap; margin: calc(0.9 * var(--leading)) 0 0; }
.pill { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: color-mix(in srgb, var(--color-text) 88%, transparent); }
.pill svg { flex-shrink: 0; color: var(--color-accent-700); }
.display {
  font-family: var(--font-heading);
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
}
.display .line { display: block; }
.display em { font-style: italic; color: var(--color-accent-700); }
.hero .sub { font-size: 18px; line-height: var(--leading); max-width: var(--measure); margin: calc(0.6 * var(--leading)) 0 0; color: color-mix(in srgb, var(--color-text) 94%, transparent); }
.hero .row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: calc(0.8 * var(--leading)); }
.hero-figure { margin: 0; width: 100%; max-width: 380px; justify-self: end; }
.hero-figure img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }

.approach-title { font-family: var(--font-heading); font-size: 38px; line-height: 1.3; margin: 0; max-width: 20ch; }
.approach-copy {
  font-size: 16px;
  line-height: var(--leading);
  max-width: var(--measure);
  margin: calc(var(--leading) - 1cap) 0 0;
  color: color-mix(in srgb, var(--color-text) 94%, transparent);
  text-align: left;
}
.approach-copy + .approach-copy { margin-top: calc(var(--half) + 2px); }
.approach-row {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--leading) clamp(24px, 5vw, 64px);
  align-items: center;
}
.cols { display: flex; flex-wrap: wrap; gap: calc(1.2 * var(--leading)); margin-top: calc(var(--leading) - var(--half)); }
.areas-cta { margin-top: var(--leading); }
.col { flex: 1 1 260px; border: 1px solid var(--color-divider); border-radius: var(--radius-sm); padding: calc(1.3 * var(--leading)) calc(1.1 * var(--leading)); transition: border-color .15s; }
.col:hover { border-color: var(--color-accent-300); }
.col .col-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin-bottom: calc(var(--half) + 2px); }
.col .col-icon img { width: 100%; height: 100%; mix-blend-mode: multiply; }
.col h3 { font-family: var(--font-heading); font-weight: 700; font-size: 22px; line-height: var(--leading); margin: 0; }
.col p { font-size: 15px; line-height: var(--leading); margin: calc(var(--half)) 0 0; color: color-mix(in srgb, var(--color-text) 94%, transparent); }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: calc(var(--leading) - var(--half)); align-items: stretch; }
.blog-cta { margin-top: calc(1.5 * var(--leading)); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-figure { justify-self: start; max-width: 320px; }
  .approach-row { grid-template-columns: 1fr; }
  .cols { flex-direction: column; }
  .blog-grid { grid-template-columns: 1fr; }
}