/* ============================================================
   Infuzed cinematic hero — "From Botanical to Bottle"
   ============================================================ */

.chero {
  position: relative;
  height: 86vh;
  height: 86svh;
  min-height: 560px;
  max-height: 1000px;
  overflow: hidden;
  background: #F7F3EE;
  display: flex;
  align-items: center;
}
.chero-media { position: absolute; inset: 0; }
.chero-poster img,
.chero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
.chero-video { opacity: 0; transition: opacity 1.1s ease; }
.chero-video.playing { opacity: 1; }
/* ivory gradient guaranteeing copy contrast over every video chapter */
.chero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(247,243,238,.97) 0%, rgba(247,243,238,.92) 24%,
    rgba(247,243,238,.72) 42%, rgba(247,243,238,.25) 58%, rgba(247,243,238,0) 70%);
}
.chero-inner { position: relative; z-index: 2; width: min(1180px, 92%); }
.chero-copy { max-width: 520px; }
.chero-eyebrow {
  font-size: .72rem; letter-spacing: .38em; text-transform: uppercase;
  color: #B7836D; margin-bottom: 14px; position: relative; padding-bottom: 12px;
}
.chero-eyebrow::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 54px; height: 1px; background: #B7836D;
}
.chero-title {
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-weight: 500; color: #173F2B;
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  line-height: 1.08; margin: 0 0 16px;
}
.chero-title em { font-style: italic; color: #2e5c43; }
.chero-sub { color: #5c5f58; font-size: 1.02rem; max-width: 40ch; margin-bottom: 30px; }
.chero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* entrance reveal (respects reduced motion via media query below) */
.chero-eyebrow, .chero-title, .chero-sub, .chero-actions {
  opacity: 0; transform: translateY(18px);
  animation: cheroIn .8s cubic-bezier(.2,.65,.25,1) forwards;
}
.chero-title   { animation-delay: .12s; }
.chero-sub     { animation-delay: .24s; }
.chero-actions { animation-delay: .36s; }
@keyframes cheroIn { to { opacity: 1; transform: none; } }

/* chapter indicator */
.chero-stages {
  position: absolute; left: 0; bottom: -18vh;
  list-style: none; display: flex; gap: 26px; margin: 0; padding: 0;
}
.chero { padding-bottom: 0; }
.chero-inner { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.chero-stages { position: static; margin-top: 46px; }
.chero-stages li {
  font-size: .66rem; letter-spacing: .26em; text-transform: uppercase;
  color: #8b8d84; transition: color .5s;
  border-top: 1px solid rgba(23,63,43,.18); padding-top: 8px; min-width: 96px;
}
.chero-stages li span { color: #B7836D; margin-right: 6px; }
.chero-stages li.on { color: #173F2B; border-top-color: #B7836D; }

/* pause/play control */
.chero-playpause {
  position: absolute; right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 3;
  width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid rgba(23,63,43,.25);
  background: rgba(255,252,248,.8); color: #173F2B; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.chero-playpause svg { width: 17px; height: 17px; }
.chero-playpause:focus-visible { outline: 2px solid #B7836D; outline-offset: 2px; }

/* ---------------- mobile ---------------- */
@media (max-width: 768px) {
  .chero { height: 88vh; height: 88svh; min-height: 620px; align-items: flex-start; }
  .chero-poster img, .chero-video { object-position: 50% 72%; }
  .chero-scrim {
    background: linear-gradient(180deg,
      rgba(247,243,238,.97) 0%, rgba(247,243,238,.9) 24%,
      rgba(247,243,238,.62) 40%, rgba(247,243,238,0) 56%),
      linear-gradient(0deg, rgba(247,243,238,.85) 0%, rgba(247,243,238,0) 22%);
  }
  .chero-inner { justify-content: flex-start; padding-top: calc(26px + env(safe-area-inset-top, 0px)); height: 100%; }
  .chero-copy { max-width: 100%; }
  .chero-title { font-size: clamp(2.1rem, 9vw, 2.9rem); }
  .chero-sub { font-size: .95rem; margin-bottom: 20px; }
  .chero-actions { position: absolute; left: 4%; right: 4%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); flex-direction: column; }
  .chero-actions .btn-gold { width: 100%; text-align: center; }
  .chero-cta2 { background: none; border: none; color: #173F2B; text-decoration: underline; text-underline-offset: 4px; padding: .6em; }
  .chero-stages { margin-top: 18px; gap: 14px; }
  .chero-stages li { min-width: 0; font-size: .6rem; letter-spacing: .18em; }
  .chero-playpause { bottom: auto; top: calc(16px + env(safe-area-inset-top, 0px)); right: 14px; width: 38px; height: 38px; }
}
@media (max-width: 340px) {
  .chero-stages { display: none; }
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  .chero-eyebrow, .chero-title, .chero-sub, .chero-actions { animation: none; opacity: 1; transform: none; }
  .chero-video { display: none !important; }
  .chero-playpause { display: none !important; }
}