/* Hero clinic-intro video — click-to-play facade (replaces hero form) */
.hero-video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  background: #2E5E3F;
  box-shadow: 0 18px 40px -12px rgba(46, 94, 63, 0.55);
  transition: transform .25s ease, box-shadow .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.hero-video:hover,
.hero-video:focus-visible {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 26px 54px -12px rgba(46, 94, 63, 0.6);
  outline: none;
}
/* Portrait (9:16) Reel-style card, centered and height-capped in the hero */
.hero-video--portrait {
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 320px;
  max-height: 560px;
  margin-left: auto;
  margin-right: auto;
}

.hero-video__poster,
.hero-video__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #2E5E3F;
  transition: transform .5s ease, filter .3s ease;
}
.hero-video:hover .hero-video__poster,
.hero-video:not(.is-playing):hover .hero-video__media {
  transform: scale(1.04);
  filter: saturate(1.06);
}
/* Once playing, drop the hover zoom and let native controls show */
.hero-video.is-playing .hero-video__media { transform: none; filter: none; }
.hero-video.is-playing .hero-video__overlay,
.hero-video.is-playing .hero-video__play,
.hero-video.is-playing .hero-video__badge { opacity: 0; pointer-events: none; }
.hero-video.is-playing { cursor: default; }
.hero-video__overlay,
.hero-video__play,
.hero-video__badge { transition: opacity .25s ease; }

.hero-video__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(45,59,45,0) 40%, rgba(45,59,45,.55) 100%),
              radial-gradient(circle at center, rgba(46,94,63,.10) 0%, rgba(46,94,63,.30) 100%);
}

/* Poppy pulsing play button */
.hero-video__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(70px, 22%, 104px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #F4C662 0%, #D4A853 100%);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  transition: transform .25s ease, background .25s ease;
  z-index: 2;
}
.hero-video__play::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 3px solid rgba(244, 198, 98, .7);
  animation: heroVideoPulse 2.2s ease-out infinite;
}
.hero-video__play svg { width: 42%; height: 42%; margin-left: 8%; fill: #2E5E3F; }
.hero-video:hover .hero-video__play {
  transform: translate(-50%, -50%) scale(1.12);
  background: linear-gradient(135deg, #FFD57A 0%, #E4B85E 100%);
}
@keyframes heroVideoPulse {
  0%   { transform: scale(1);   opacity: .8; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Badge ribbon */
.hero-video__badge {
  position: absolute;
  left: 16px; bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: #2E5E3F;
  font-family: "Overpass", system-ui, sans-serif;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .01em;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.hero-video__wave {
  display: inline-block;
  font-size: 1.05em;
  transform-origin: 70% 80%;
  animation: heroVideoWave 2.4s ease-in-out infinite;
}
@keyframes heroVideoWave {
  0%, 60%, 100% { transform: rotate(0deg); }
  65% { transform: rotate(14deg); }
  70% { transform: rotate(-8deg); }
  75% { transform: rotate(14deg); }
  80% { transform: rotate(-4deg); }
  85% { transform: rotate(10deg); }
  90% { transform: rotate(0deg); }
}

/* Live iframe after click */
.hero-video__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero-video__play::before,
  .hero-video__wave { animation: none; }
  .hero-video, .hero-video__poster, .hero-video__play { transition: none; }
}

@media screen and (max-width: 767px) {
  .hero-video { border-radius: 14px; }
  .hero-video__badge { font-size: .8rem; padding: 7px 13px; left: 12px; bottom: 12px; }
}