/* Case Study — Hero Variant 1 */
.cs-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  height: 100vh;
  box-sizing: border-box;
  padding: 80px 24px;
  overflow: hidden;
  background: #080b10;
  color: #fff;
}
.cs-hero__media, .cs-hero__media::after, .cs-hero__image, .cs-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.cs-hero__media { z-index: -1; pointer-events: none; }
.cs-hero__media::after { content: ''; background: linear-gradient(180deg, #0008, transparent 40%, #0004), rgb(0 0 0 / var(--cs-hero-overlay, .35)); }
.cs-hero__image, .cs-hero__video { object-fit: cover; object-position: center; }
.cs-hero__video { opacity: 0; }
.cs-hero.is-video-playing .cs-hero__video { opacity: 1; }
.cs-hero__content { width: 100%; max-width: 1120px; margin: 0 auto; text-align: center; }
.cs-hero__title { margin: 0; color: #fff; font-size: clamp(30px, 3.3vw, 56px); line-height: 1.28; font-weight: 800; letter-spacing: -.025em; white-space: pre-line; overflow-wrap: anywhere; text-wrap: balance; }
.cs-hero__cta { display: inline-block; margin-top: clamp(24px, 3vw, 40px); padding: 8px 0; color: #fff; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.5; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; transition: color 180ms ease; }
.cs-hero__cta:hover { color: #c8e5ff; }
.cs-hero__cta:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
@media (max-width: 600px) {
  .cs-hero { padding: 80px 20px; }
  .cs-hero__title { font-size: clamp(28px, 7.5vw, 38px); line-height: 1.3; }
}
@media (prefers-reduced-motion: reduce) { .cs-hero__cta { transition: none; } }