/* ============================================================
   HERO VIDEO — same player frame on the homepage and career pages.
   Matches the Digital Marketing page. Plays muted automatically,
   loops, and shows YouTube's normal controls.
   ============================================================ */
.hv{
  position:relative; overflow:hidden; width:100%; max-width:520px; margin-inline:auto;
  border-radius:16px; border:1px solid rgba(170,180,200,.16); background:#030d17;
  box-shadow:0 0 0 1px rgba(var(--hv-rgb,8,120,249),.10), 0 25px 60px -15px rgba(0,0,0,.95);
}
.hv__viewport{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#000; }
.hv__viewport iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* The homepage hero has no side padding on phones, so add the same margin the other pages have */
@media (max-width:767px){
  .hv--home{ width:calc(100% - 32px); }
}

/* Laptops and monitors: the top of the video lines up with the top of the main heading.
   The margin is the height of the small label above the heading on each page. */
@media (min-width:1024px){
  .hv{ margin-right:0; }
  .hero-right,
  .hero__media,
  .lg\:col-span-5:has(.hv--it),
  .lg\:col-span-6:has(.hv--ecom),
  .lg\:col-span-5:has(.hv--creative){ align-self:start !important; }
  .hero-right{ margin-top:0 !important; }
  .lg\:col-span-5:has(.hv--it){ margin-top:50px !important; }
  .hero__media{ margin-top:37px !important; }
  .lg\:col-span-6:has(.hv--ecom){ margin-top:45px !important; }
  .lg\:col-span-5:has(.hv--creative){ margin-top:33px !important; }
}

/* Glow follows each page's accent colour */
.hv--home{ --hv-rgb:239,68,68; }
.hv--it{ --hv-rgb:59,130,246; }
.hv--ecom{ --hv-rgb:255,170,0; }
.hv--creative{ --hv-rgb:212,255,0; }