/* The promo videos in a slim phone frame (public/pages/promo.js plays it).
   Used on /movers, /demenageurs, /tools/movers and the /movers/video pages,
   on /junk-removal, /ramassage-rebuts, /tools/junk and their /video pages, and on
   /mobile-detailing, /esthetique-auto-mobile, /tools/detailing and their /video pages.
   Zero em dashes. */
.pv { padding: clamp(40px, 6vw, 72px) 0; }
.pv__in { display: grid; gap: 28px; align-items: center; justify-items: center; text-align: center; }
.pv__h { margin: 0 0 10px; font-size: clamp(28px, 4.4vw, 40px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 600; }
.pv__sub { margin: 0 auto; max-width: 34ch; font-size: 17px; line-height: 1.45; opacity: 0.72; }
.pv__phone { position: relative; margin: 0; width: min(280px, 74vw); padding: 9px; border-radius: 46px; background: #0C0D10;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 30px 60px -20px rgba(12, 13, 16, 0.45), 0 0 0 1px rgba(12, 13, 16, 0.12); }
.pv__v { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 37px; background: #eef1f6; object-fit: cover; }
.pv__play { position: absolute; inset: 9px; display: grid; place-items: center; border: 0; border-radius: 37px; background: transparent; cursor: pointer; }
.pv__play span { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: rgba(12, 13, 16, 0.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease; }
.pv__play:hover span { transform: scale(1.06); }
.pv__play:focus-visible { outline: 2px solid #C29C4B; outline-offset: 3px; }
.pv__play svg { width: 26px; height: 26px; margin-left: 4px; fill: #fff; }
.pv__play[hidden] { display: none; }
.pv__len { margin: 12px 0 0; font-size: 13px; opacity: 0.6; }
@media (min-width: 860px) {
  .pv__in { grid-template-columns: minmax(0, 440px) auto; justify-content: center; text-align: left; justify-items: start; gap: 72px; }
  .pv__sub { margin: 0; }
}

/* The /movers/video and /junk-removal/video pages: the video alone, full height, two buttons under it. */
.pvp { margin: 0; min-height: 100vh; min-height: 100dvh; background: #0C0D10; color: #F5F3EE;
  font-family: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: max(12px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); box-sizing: border-box; }
.pvp .pv__phone { width: auto; height: calc(100dvh - 190px); max-height: 1280px; aspect-ratio: 9 / 16; max-width: 100%; padding: 0; border-radius: 22px; box-shadow: none; }
.pvp .pv__v { height: 100%; width: 100%; border-radius: 22px; }
.pvp .pv__play { inset: 0; border-radius: 22px; }
.pvp__acts { display: flex; gap: 10px; width: min(480px, 100%); }
.pvp__btn { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 8px 18px; box-sizing: border-box; border-radius: 999px; font-weight: 600; font-size: 16px; line-height: 1.15; text-align: center; text-decoration: none; }
.pvp__btn--ghost { color: #F5F3EE; border: 1px solid rgba(245, 243, 238, 0.28); }
.pvp__btn--fill { color: #fff; background: #0A6FE8; }
.pvp__price { margin: 0; font-size: 13px; color: rgba(245, 243, 238, 0.6); text-align: center; }

/* A second video under the first (/mobile-detailing/video: the text-back reel). */
.pvp__more { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; margin-top: 36px; padding-top: 32px; border-top: 1px solid rgba(245, 243, 238, 0.14); }
.pvp__h { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; text-align: center; }
.pvp__sub { margin: 0 0 6px; max-width: 34ch; font-size: 15px; line-height: 1.4; color: rgba(245, 243, 238, 0.7); text-align: center; }