/* Hero video background — scoped to sections opted in with .hero-with-video.
   Applied across the homepage, services, industries, and every industry / per-service detail page.
   Nothing here leaks to other sections that share class names (e.g. #contact also uses .heading-29). */

.hero-with-video {
  background-color: #1A1A2E;  /* fallback before the video paints (or if it never loads) */
  overflow: hidden;
  position: relative;         /* belt-and-suspenders; .section already sets position:relative */
}

.hero-with-video .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.hero-with-video .hero-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
  pointer-events: none;
}

.hero-with-video .container-main {
  position: relative;
  z-index: 2;
}

/* Heading variants: homepage uses .hero-heading-h1, every other page uses .heading-29 */
.hero-with-video .hero-heading-h1,
.hero-with-video .heading-29 { color: #ffffff; }

/* Accent / italic spans inside the heading should also flip white so they don't disappear on dark */
.hero-with-video .hero-heading-h1 .italic-span,
.hero-with-video .hero-heading-h1 .typing-text,
.hero-with-video .heading-29 .text-span-18,
.hero-with-video .heading-29 .span-italic-txt { color: #ffffff; }

/* Body paragraph: 78% white reads as soft secondary text on dark, matches the homepage already */
.hero-with-video .para-txt { color: rgba(255, 255, 255, 0.78); }

/* Breadcrumb chips that appear on per-service detail pages (Home › Gutters › AI Agents …) */
.hero-with-video .chips .link-block-2,
.hero-with-video .chips .link-block-2 > div {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}
.hero-with-video .chips .link-block-2 {
  background-color: rgba(255, 255, 255, 0.08);
}