/* Shared spacing rhythm for the homepage's full-width content sections. */
.page-index {
  --home-section-space: 144px;
  --home-heading-space: 48px;
}
.page-index #practice,
.page-index #cases.home-case-grid,
.page-index #cases + #column.home-columns { padding-block: var(--home-section-space); }
.page-index .hero { min-height: 320px; padding-block: 72px; }
.page-index .hero.hero--designed { display: block; min-height: 0; padding: 0; background: #271f22; scroll-margin-top: 100px; }
.page-index .hero.hero--designed::before { content: ''; z-index: 1; background: rgba(24,17,20, .08); pointer-events: none; }
.page-index .hero--designed .hero-banner-image { display: block; width: 100%; height: clamp(180px, 20vw, 400px); object-fit: cover; object-position: center; }
.page-index .hero-banner-copy { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 20px; text-align: center; }
.page-index .hero--designed .hero-banner-copy h2 { margin: 0; color: #fff; font-size: clamp(11px, 2vw, 42px); font-weight: 400; line-height: 1.5; letter-spacing: -.035em; white-space: nowrap; }
.page-index .hero-banner-copy strong { color: #ef4444; }
.page-index .home-practice-inner { row-gap: var(--home-heading-space); }
.page-index .home-cases-heading { margin-bottom: var(--home-heading-space); }
@media (min-width: 768px) and (max-width: 1024px) {
  .page-index { --home-section-space: 128px; }
}
@media (max-width: 767px) {
  .page-index { --home-section-space: 96px; --home-heading-space: 32px; }
  .page-index .hero { min-height: 180px; padding-block: 48px; }
  .page-index .hero.hero--designed { min-height: 0; padding: 0; }
  .page-index .hero--designed .hero-banner-copy h2 { font-size: clamp(18px, 5.128vw, 22px); line-height: 1.6; white-space: normal; }
  .page-index .hero-banner-line { display: block; white-space: nowrap; }
}