/* ============================================
   HERO LOCKUP (raptor + editorial) — replaces radar
   Loaded after main.css on index.html only.
   ============================================ */
.hero-lockup {
  text-align: left;
  min-height: 62vh;
  padding: var(--space-16) 0 var(--space-12);
}

.hero-lockup .container.hero-lockup-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--space-10);
  max-width: 1200px;
}

.hero-lockup .section-label { justify-content: flex-start; }
.hero-lockup-content { min-width: 0; }

.hero-lockup h1 {
  font-size: clamp(3rem, 1.4rem + 6vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 0 0 var(--space-2);
}

.hero-lockup .lead { margin-top: var(--space-4); max-width: 46ch; }
.hero-lockup .hero-cta { margin-top: var(--space-6); justify-content: flex-start; }

.hero-lockup-mark { display: flex; justify-content: flex-end; }
.hero-lockup-mark img {
  width: min(360px, 92%);
  height: auto;
  filter: drop-shadow(0 0 44px rgba(212, 197, 160, 0.07));
}

@media (max-width: 860px) {
  .hero-lockup { min-height: auto; }
  .hero-lockup .container.hero-lockup-inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .hero-lockup-mark { justify-content: center; margin-top: var(--space-4); }
  .hero-lockup-mark img { width: min(200px, 56%); }
}

/* Style 1 — staggered entrance on load, then settle */
@keyframes heroRise { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }
@keyframes heroTick { from { width: 0; } to { width: 32px; } }

.hero-lockup .section-label { animation: heroRise 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.05s both; }
.hero-lockup h1 { animation: heroRise 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.14s both; }
.hero-lockup .lead { animation: heroRise 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.24s both; }
.hero-lockup .hero-cta { animation: heroRise 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.32s both; }
.hero-lockup-mark { animation: heroRise 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both; }
.hero-lockup .section-label::before { animation: heroTick 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.12s both; }

@media (prefers-reduced-motion: reduce) {
  .hero-lockup .section-label,
  .hero-lockup h1,
  .hero-lockup .lead,
  .hero-lockup .hero-cta,
  .hero-lockup-mark,
  .hero-lockup .section-label::before { animation: none; }
}