/* Dedicated scroll stage for the hero product film. */
@media (min-width: 801px) {
  .hero { min-height: 165vh; }
  .hero-copy { align-self: start; position: sticky; top: 18vh; height: max-content; }
  .hero-film { position: sticky; top: 0; height: 100vh; }
  .hero-details { top: calc(100vh - 40px); bottom: auto; }
}

@media (max-width: 800px) {
  .hero { min-height: 140vh; }
}

.hero-film canvas { width: 100%; height: 100%; display: block; position: relative; z-index: 1; }
.hero-film { background: #000; align-self: start; }
.film-arch { display: none; }
.film-fallback.frame-loader { display: grid; background: #000; }

/* Unified black atelier theme. */
body,
.hero,
.intro,
.designs,
.process,
.reasons,
.booking,
.services,
.testimonials,
.heritage,
footer { background: #070606; }

.site-header { color: #f4eadc; border-color: rgba(241, 215, 163, .2); }
.site-header .brand span { border-color: #d9b66d; }
.nav a:hover { color: #d9b66d; }
.header-cta { color: #f4eadc; }

h1,
.display,
.hero-intro,
.intro-text,
.intro-text .text-link,
.design-heading > p:last-child,
.process-top > p,
.heritage-copy > p:not(.eyebrow),
.reason-grid h3,
.reason-grid p,
.contact-lines a,
.contact-lines p,
.booking-intro > p:not(.eyebrow),
footer,
footer p,
footer small { color: #f4eadc; }

.eyebrow,
.intro-stat strong,
.text-link,
.contact-lines span,
.booking-form label,
.form-message { color: #d9b66d; }
.intro-stat,
.reason-grid > div,
.contact-lines,
.steps,
.booking-form input,
.booking-form select,
.booking-form textarea { border-color: rgba(241, 215, 163, .25); }

.intro-photo img,
.heritage-image img { filter: saturate(.75) contrast(1.05) brightness(.82); }
.heritage-copy { background: #070606; }
.occasion-list span { color: #f4eadc; border-color: rgba(241, 215, 163, .35); }
.steps h3 { color: #f4eadc; }
.steps p { color: #c9b7a7; }
.booking-form input,
.booking-form select,
.booking-form textarea { color: #f4eadc; }
.booking-form select option { background: #070606; }
.upload { border-color: rgba(241, 215, 163, .35); }
.button-solid { background: #7b2230; }
.button-solid:hover { box-shadow: 0 12px 24px rgba(217, 182, 109, .15); }
footer { border-top: 1px solid rgba(241, 215, 163, .2); }

/* Edge-to-edge product hero. */
.hero { display: block; min-height: 175vh; padding: 0; overflow: visible; background: #000; }
.hero-film { position: sticky; inset: 0 auto auto 0; width: 100%; height: 100vh; min-height: 0; }
.hero-film canvas { width: 100%; height: 100%; }
.hero-copy { position: absolute; z-index: 3; top: 0; left: 6vw; width: min(43vw, 620px); height: 100vh; margin: 0; padding: 26vh 0 0; pointer-events: none; }
.hero-copy .hero-actions { pointer-events: auto; }
.hero-copy h1 { text-shadow: 0 2px 28px rgba(0, 0, 0, .72); }
.hero-copy .hero-intro { color: #e9ddce; text-shadow: 0 2px 14px #000; }
.hero-details { z-index: 4; top: calc(100vh - 42px); bottom: auto; color: #f4eadc; text-shadow: 0 1px 10px #000; }
.film-caption { bottom: 27px; }

@media (max-width: 800px) {
  .hero { display: block; min-height: 155vh; padding: 0; }
  .hero-film { position: sticky; top: 0; height: 100svh; width: 100%; }
  .hero-copy { left: 6vw; width: 88vw; height: 100svh; padding-top: 15vh; }
  .hero-copy .hero-intro { max-width: 300px; }
  .hero-details { left: 6vw; right: 6vw; top: auto; bottom: 18px; }
}