/* The video sits under the existing warm paper brush edge and foreground forest. */
.hero-video-scene > .hero-video-poster,
.hero-video-scene > .hero-welcome-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 57% center;
}
.hero-video-scene > .hero-welcome-video { opacity: 0; }
.hero-welcome-video::cue { font: 600 17px/1.4 'Barlow', Arial, sans-serif; color: #fff; background: #101c20ed; }
.hero-video-scene[data-video-state="playing"] > .hero-welcome-video,
.hero-video-scene[data-video-state="paused"] > .hero-welcome-video { opacity: 1; }
.hero-video-controls {
  position: absolute;
  right: 31px;
  top: 145px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 9px;
}
.hero-video-toggle,
.hero-video-sound {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid #fff9;
  border-radius: 999px;
  background: #101c20eb;
  color: #fff;
  box-shadow: 0 3px 12px #101c202e;
  font: 600 13px/1.25 var(--body);
  cursor: pointer;
}
.hero-video-toggle[hidden], .hero-video-sound[hidden] { display: none; }
.hero-video-toggle:hover, .hero-video-sound:hover { background: var(--ink); }
.hero-video-toggle:focus-visible, .hero-video-sound:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.hero-video-toggle svg { fill: currentColor; flex: none; }
.hero-video-sound { border-color: #b9f3f6; box-shadow: 0 3px 12px #101c2040; }
.hero-video-sound svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hero-video-sound[aria-pressed="true"] { background: #b7131e; border-color: #fff; }
.hero-video-sound[aria-pressed="true"]:hover { background: #95121b; }
.hero-video-sound-on { display: none; }
.hero-video-sound[aria-pressed="true"] .hero-video-sound-on { display: block; }
.hero-video-sound[aria-pressed="true"] .hero-video-sound-off { display: none; }
.hero-video-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hero-video-sound.is-inviting-sound { animation: hero-sound-invitation .8s ease-out 1; }
@keyframes hero-sound-invitation {
  0%, 100% { transform: rotate(0); }
  18% { transform: rotate(-4deg); }
  36% { transform: rotate(4deg); }
  54% { transform: rotate(-3deg); }
  72% { transform: rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video-sound.is-inviting-sound { animation: none; }
}
.hero-video-pause-icon { display: none; }
.hero-video-scene[data-video-state="playing"] .hero-video-pause-icon { display: block; }
.hero-video-scene[data-video-state="playing"] .hero-video-play-icon { display: none; }
@media (max-width: 900px) {
  .hero-video-scene > .hero-video-poster,
  .hero-video-scene > .hero-welcome-video { object-position: 57% center; }
  .hero-video-controls { right: 24px; top: 124px; }
}
@media (max-width: 640px) {
  .hero-welcome-video::cue { font-size: 15px; }
  /* Small white lettering needs a stable backdrop throughout the moving film. */
  .hero-video-scene .photo-note {
    top: 16px; right: 20px; font-size: 21px;
    padding: 7px 10px; border-radius: 2px;
    background: #101c20d9; text-shadow: none;
  }
  .hero-video-controls { top: auto; right: auto; bottom: 27px; left: 20px; max-width: calc(100% - 188px); flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero-video-toggle, .hero-video-sound { padding: 9px 12px; font-size: 12px; max-width: 100%; }
}