/*
 * library/modules/hero/v1/hero-v1.css
 * Phase 9D row 13 Wave 1.
 * Foundation tokens only; no external deps.
 */
.m-hero-v1 {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #000;
  color: var(--accent-fg);
}
.m-hero-v1__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.m-hero-v1__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.0) 100%);
  z-index: 1;
}
.m-hero-v1__content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: var(--space-9) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.m-hero-v1__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-fg);
  opacity: 0.85;
  margin: 0;
}
.m-hero-v1__heading {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  margin: 0;
  font-weight: 700;
  text-wrap: balance;
}
.m-hero-v1__sub {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  margin: 0;
  max-width: 56ch;
  opacity: 0.92;
}
.m-hero-v1__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.m-hero-v1__cta {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-default), background var(--dur-base) var(--ease-default);
}
.m-hero-v1__cta--primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.m-hero-v1__cta--primary:hover { background: var(--accent-light); transform: translateY(-1px); }
.m-hero-v1__cta--secondary {
  background: transparent;
  color: var(--accent-fg);
  border-color: rgba(255, 255, 255, 0.6);
}
.m-hero-v1__cta--secondary:hover { background: rgba(255, 255, 255, 0.1); }

@media (max-width: 768px) {
  .m-hero-v1__content { padding: var(--space-7) var(--space-5); }
}