/* Landing page — cinematic video hero (dark) leading into the light site. */
body.landing { margin: 0; background: #0f0d0a; }

.hero-shell {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.hero-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #0f0d0a; /* shows while the video loads / if it can't play */
}

.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(15,13,10,0.55) 0%, rgba(15,13,10,0.25) 35%, rgba(15,13,10,0.55) 75%, rgba(15,13,10,0.85) 100%),
    radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(15,13,10,0.5) 100%);
}

.hero-inner {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  padding: clamp(20px, 4vw, 44px);
  color: #f6f4ef;
  padding-top: calc(clamp(20px, 4vw, 44px) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(clamp(20px, 4vw, 44px) + env(safe-area-inset-bottom, 0px));
}

.hero-top .brand {
  font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 0.01em; color: #f6f4ef;
}
.hero-top .brand span { color: var(--gold); }

.hero-center {
  flex: 1;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  max-width: 46rem;
}
.hero-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.1rem, 5.2vw, 3.8rem); line-height: 1.08; letter-spacing: -0.015em;
  color: #fbfaf7; margin: 0; max-width: 24ch;
  text-shadow: 0 2px 30px rgba(0,0,0,0.35);
  animation: heroRise 0.8s 0.05s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-sub {
  margin: 20px 0 30px; font-size: 1.08rem; color: rgba(246,244,239,0.86); max-width: 34ch;
  animation: heroRise 0.8s 0.16s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-btn {
  font-size: 1.02rem; padding: 14px 30px;
  animation: heroRise 0.8s 0.24s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  box-shadow: 0 14px 40px -16px rgba(198,161,91,0.7);
}
.hero-btn:hover { text-decoration: none; }

@keyframes heroRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero-title, .hero-sub, .hero-btn { animation: none; }
}