/* ============================================================
   HERO — water-reveal
   A short (~78vh) hero. The background image is grayscale by
   default; moving the mouse reveals color through it (same
   destination-out canvas technique as the loader's ink-bleed).
   Falls back to a static full-color image on touch devices —
   there's no cursor to drive the reveal there, and the fallback
   check is capability-based (hover + fine pointer), not a width
   breakpoint, so it also covers a mouse-less touch laptop.
   ============================================================ */

.hero-reveal {
  position: relative;
  height: 78vh;
  min-height: 520px;
  overflow: hidden;
  background: var(--paper, #1a1715);
}

.hero-reveal canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}

/* touch / no-hover fallback: plain color image, no canvas needed */
.hero-reveal .hero-fallback-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none;
}
.hero-reveal.no-hover canvas { display: none; }
.hero-reveal.no-hover .hero-fallback-img { display: block; }

.hero-reveal .scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(26,23,21,.12) 0%, rgba(26,23,21,.5) 58%, rgba(26,23,21,.86) 100%);
}

.hero-reveal .hero-content {
  position: absolute; left: 0; right: 0; bottom: 8vh; z-index: 2; padding: 0 6vw;
}
.hero-reveal .hero-kicker {
  font: 700 12px 'Instrument Sans', sans-serif; letter-spacing: .3em; color: var(--accent-2, #f4a261);
  margin-bottom: 14px;
}
.hero-reveal h1 {
  font-family: var(--font-display, 'Unbounded', sans-serif); font-weight: 700; font-style: normal;
  font-size: clamp(32px, 5vw, 62px); line-height: 1.08; letter-spacing: -0.01em; color: var(--cream, #fbf6ec);
  margin: 0 0 20px; max-width: 15ch;
}
.hero-reveal .hero-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent-2, #f4a261); color: var(--paper, #1a1715);
  font: 700 13px 'Instrument Sans', sans-serif; letter-spacing: .04em;
  padding: 14px 24px; border-radius: 30px; text-decoration: none;
  transition: transform .25s var(--ease-out, ease);
}
.hero-reveal .hero-cta:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .hero-reveal canvas { display: none; }
  .hero-reveal .hero-fallback-img { display: block; }
}