#hero {
  padding: 0;
  position: relative;
  min-height: 78svh;
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--rind);
}
#hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
#hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,54,31,.45), rgba(20,16,14,.78));
}
.hero-inner {
  position: relative; z-index: 2;
  text-align: center; color: var(--white);
  padding: var(--space-xl) var(--gutter);
  max-width: 54rem;
}
.hero-inner h1 { font-size: var(--step-3); }

}
.hero-inner h1 .script {
  color: var(--yellow);              /* 8.17:1 on rind */
  font-size: 1.12em;
  display: inline-block;
  transform: rotate(-2.5deg);
}
.hero-sub {
  margin-top: var(--space-m);
  font-size: var(--step-1);
  font-weight: 600;
}
.hero-inner .cta {
  display: inline-block; margin-top: var(--space-l);
  background: var(--red); color: var(--ink-on-red);
  padding: 1rem 2.4rem; border-radius: 999px;
  font-family: var(--font-display); font-size: var(--step-0);
  text-transform: uppercase; letter-spacing: 0.04em;
  text-decoration: none;
}
.hero-inner .cta:hover { background: #b81a20; }

.hero-facts {
  position: relative; z-index: 2;
  background: var(--rind); color: var(--ink-on-rind);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-s) var(--space-l);
  padding: var(--space-s) var(--gutter);
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.hero-facts li::before { content: '· '; color: var(--green); }

/* Reduced motion: no video at all, the poster carries the hero. */
@media (prefers-reduced-motion: reduce) {
  #hero-video { display: none; }
  #hero {
    background: var(--rind) url('/media/hero-poster.jpg') center / cover no-repeat;
  }
}

.hero-logo { display: block; margin: 0 auto var(--space-m); max-width: min(30rem, 78vw); }
.hero-logo img { width: 100%; height: auto; }

/* Small phones. Between the sticky header and the fixed action bar there is only
   about 340px of first screen, and the whole pitch — mark, headline, promise,
   Find Us — has to land inside it. Anything that spills is a visitor who never
   sees the button. This block is last in the file so it wins over the base
   .hero-logo rule above. */
@media (max-width: 460px) {
  #hero { min-height: 0; }
  .hero-inner { padding: var(--space-m) var(--gutter) var(--space-m); }
  .hero-logo { max-width: 52vw; margin: 0 auto 0.5rem; }
  .hero-inner h1 { font-size: clamp(1.5rem, 7vw, 2rem); line-height: 1.0; }
  .hero-inner h1 .script { font-size: 1.05em; }
  .hero-sub { margin-top: 0.5rem; font-size: var(--step-0); }
  .hero-inner .cta { margin-top: var(--space-m); padding: 0.8rem 1.8rem; }
}