/* Sector pages (built by .site-build/solution_cases.py): a centred hero with
   an Explore button, and the sector's case studies at the end. The case cards
   themselves come from /case-cards.css; the few shared case-page rules they
   need are repeated here, scoped to .sol-cases. */

/* centred hero, no agent card */
.new-hero.nh-centered {
  grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center;
  min-height: 100vh; min-height: 100svh; padding-top: 150px; padding-bottom: 90px;
}
.nh-centered .nh-content { display: flex; flex-direction: column; align-items: center; max-width: 980px; }
.nh-centered .nh-eyebrow { justify-content: center; }
.nh-centered .nh-eyebrow::after { content: ''; width: 30px; height: 1px; background: currentColor; opacity: 0.6; }
.nh-centered .nh-title { text-align: center; }
.nh-centered .nh-desc { margin-left: auto; margin-right: auto; max-width: 640px; }
.nh-centered .nh-tags { justify-content: center; }
.nh-centered .nh-actions { justify-content: center; }
.nh-explore { display: inline-flex; align-items: center; gap: 10px; }
.nh-explore svg { width: 16px; height: 16px; transition: transform 0.45s cubic-bezier(0.16,1,0.3,1); }
.nh-explore:hover svg { transform: translateY(3px); }

/* the sector's case studies */
.sol-cases { position: relative; z-index: 5; padding: 110px 0 40px; }
.sol-wrap { max-width: 1400px; margin: 0 auto; padding: 0 5vw; }
.sol-cases .cs-eyebrow {
  display: inline-block; line-height: 1.7;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #8c8c94;
}
.sol-cases .cs-eyebrow::before { content: ''; display: inline-block; vertical-align: middle; width: 30px; height: 1px; margin: -2px 12px 0 0; background: currentColor; opacity: 0.6; }
.sol-cases .cs-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 100px;
  font: 600 13.5px/1 var(--font-main); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), background 0.3s ease, color 0.3s ease;
}
.sol-cases .cs-btn svg { width: 16px; height: 16px; transition: transform 0.45s cubic-bezier(0.16,1,0.3,1); }
.sol-cases .cs-btn:active { transform: translateY(0) scale(0.98); }
.sol-cases .cs-btn--solid { background: #fff; color: #000; }

@media (max-width: 900px) {
  .new-hero.nh-centered { padding-top: 130px; padding-bottom: 70px; }
  .sol-cases { padding: 80px 0 30px; }
}
@media (max-width: 600px) {
  .nh-centered .nh-title { font-size: clamp(36px, 10vw, 48px); }
  .cc-more-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}