/* Hero testimonial video card (views/partials/hx-hero-video.ejs; Krish review Oct 20, O20-064). /solutions and /start.
   An ink 16:9 poster: the person's own photo on the right, the video's question, name and role on the left, and one gold
   "Watch <name>'s video" pill that reads as the obvious control. The whole card opens the shared lightbox (shell.js).
   Brand only: ink #110A33, gold #FFC61E, lavender #DDD6FF, white. Text 12px or more. Motion: transform only, 160 to 240 ms. */
.hhv { margin: 0; width: 100%; container-type: inline-size; container-name: hhv; }
.hhv-card { position: relative; display: grid; grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; isolation: isolate;
  background: #110A33; color: #fff; text-decoration: none; box-shadow: 0 32px 64px -24px rgba(17,10,51,.35);
  -webkit-tap-highlight-color: transparent; }
/* a soft brand light behind the words: violet into ink, never a gradient on text */
.hhv-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 0% 100%, rgba(52,29,153,.85) 0%, rgba(52,29,153,0) 60%), radial-gradient(60% 60% at 100% 0%, rgba(255,198,30,.14) 0%, rgba(255,198,30,0) 70%); }
/* AK Oct 20 (T1): no dark fade on the photo's left edge. The photo is a clean solid panel with a straight edge (lavender behind it, so
   a contain-fitted cut-out never shows ink); the words keep their contrast on the ink panel beside it, so nothing overlaps the face. */
.hhv-ph { grid-column: 2; grid-row: 1; position: relative; min-height: 0; overflow: hidden; background: #DDD6FF; }
.hhv-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block;
  transition: transform .5s cubic-bezier(.23,1,.32,1); }
/* the cut-out sits on the same solid lavender panel as every other photo (T1: no soft halo that melts into the ink side) */
.hhv--cut .hhv-ph { background: #DDD6FF; }
.hhv--cut .hhv-ph img { object-fit: cover; object-position: 50% 100%; }
.hhv-txt { grid-column: 1; grid-row: 1; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; min-width: 0; padding: 28px 8px 28px 32px; }
.hhv-q { font: 700 clamp(20px, 6.2cqi, 28px)/1.15 "Cabinet Grotesk", Cabinetgrotesk, Manrope, Arial, sans-serif; letter-spacing: -.02em; text-wrap: balance; }
.hhv-who { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font: 500 14px/1.35 Manrope, Arial, sans-serif; color: rgba(255,255,255,.78); }
.hhv-who b { flex-basis: 100%; font: 800 16px/1.3 Manrope, Arial, sans-serif; color: #fff; }
.hhv-logo { display: block; width: auto; height: 14px; filter: brightness(0) invert(1); opacity: .9; }
.hhv-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px 0 6px; border-radius: 999px; background: #FFC61E; color: #110A33;
  font: 800 15px/1 Manrope, Arial, sans-serif; white-space: nowrap; box-shadow: 0 12px 32px -12px rgba(255,198,30,.55); transition: transform .2s cubic-bezier(.23,1,.32,1); }
.hhv-btn i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #110A33; color: #FFC61E; }
.hhv-btn svg { width: 16px; height: 16px; margin-left: 2px; }
@media (hover: hover) and (pointer: fine) {
  .hhv-card:hover .hhv-btn { transform: translateY(-2px); }
  .hhv-card:hover .hhv-ph img { transform: scale(1.03); }
}
.hhv-card:active .hhv-btn { transform: scale(.97); }
.hhv-card:focus-visible { outline: 3px solid #FFC61E; outline-offset: 3px; }

/* narrow cards (phones, and the stacked hero on tablets under 520px wide): the poster grows taller so nothing is squeezed */
@container hhv (max-width: 520px) {
  .hhv-card { aspect-ratio: auto; min-height: 236px; grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); }
  .hhv-txt { gap: 12px; padding: 22px 4px 22px 20px; }
  .hhv-q { font-size: 19px; }
  .hhv-who { font-size: 13px; }
  .hhv-who b { font-size: 15px; }
  .hhv-btn { min-height: 44px; padding-right: 16px; font-size: 14px; gap: 8px; }
  .hhv-btn i { width: 32px; height: 32px; }
}
@container hhv (max-width: 330px) {
  .hhv-txt { padding-left: 16px; }
  .hhv-q { font-size: 18px; }
  .hhv-btn { padding-right: 14px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .hhv-btn, .hhv-ph img { transition: none; } }