/* Mcube-inspired service hero — background video + reveals */
.svc-hero {
  --svc-hero-ink: #f4fff8;
  --svc-hero-accent: #3bd88f;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image: none !important;
}

/* Slightly shorter hero banners on all service pages */
.svc-hero.banner--bg-img,
.banner.banner--bg.banner--bg-img.svc-hero {
  min-height: clamp(380px, 62vh, 640px) !important;
  padding-top: calc(var(--spacing-medium, 60px) + var(--header-height, 100px)) !important;
  padding-bottom: calc(var(--spacing-medium, 60px) + var(--border-radius-3, 30px)) !important;
}

@media (max-width: 670px) {
  .svc-hero.banner--bg-img,
  .banner.banner--bg.banner--bg-img.svc-hero {
    min-height: clamp(340px, 58vh, 520px) !important;
    padding-top: calc(var(--spacing-medium, 60px) + var(--header-height, 100px)) !important;
  }
}

/* Dark navy overlay above video (replaces theme ::before photo wash) */
.svc-hero.banner--bg-img::before,
.svc-hero::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(8, 18, 48, 0.78);
  z-index: 2;
  pointer-events: none;
  opacity: 1 !important;
}

/* Film grain (also kills theme ::after photo) */
.svc-hero.banner--bg-img::after,
.svc-hero::after {
  content: "" !important;
  display: block !important;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.2;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  background-size: 180px 180px !important;
  mix-blend-mode: soft-light;
}

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

.svc-hero .banner__inner {
  /* Align with header logo edge (theme uses 92% + max 1438px → huge left gutter) */
  --svc-edge: calc(clamp(14px, 2.5vw, 24px) + clamp(20px, 3vw, 36px));
  position: relative;
  z-index: 3;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--svc-edge);
  padding-right: var(--svc-edge);
  box-sizing: border-box;
}

.svc-hero .banner__content {
  width: 75%;
  max-width: 75%;
}

@media (max-width: 900px) {
  .svc-hero .banner__content {
    width: 100%;
    max-width: 100%;
  }
}

.svc-hero .banner__title {
  font-size: clamp(2.75rem, 6.5vw, 5.5rem) !important;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.svc-hero .banner__txt {
  max-width: 100%;
}

.svc-hero__orbs {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.18;
}

.svc-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.55;
  will-change: transform;
  animation: svc-orb-float 12s ease-in-out infinite;
}

.svc-hero__orb--1 {
  width: min(42vw, 420px);
  height: min(42vw, 420px);
  left: -8%;
  top: 10%;
  background: radial-gradient(circle at 35% 35%, rgba(59, 216, 143, 0.45), rgba(59, 216, 143, 0.05) 70%);
  animation-duration: 14s;
}

.svc-hero__orb--2 {
  width: min(28vw, 280px);
  height: min(28vw, 280px);
  right: 8%;
  top: 18%;
  background: radial-gradient(circle at 40% 40%, rgba(231, 222, 255, 0.3), rgba(231, 222, 255, 0) 70%);
  animation-duration: 11s;
  animation-delay: -3s;
}

.svc-hero__orb--3 {
  width: min(36vw, 340px);
  height: min(36vw, 340px);
  right: -6%;
  bottom: -10%;
  background: radial-gradient(circle at 50% 40%, rgba(59, 216, 143, 0.28), transparent 70%);
  animation-duration: 16s;
  animation-delay: -6s;
}

@keyframes svc-orb-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(18px, -22px, 0) scale(1.06);
  }
}

.svc-hero__label {
  display: none !important;
}

.svc-hero__label-num {
  color: var(--svc-hero-accent);
}

.svc-hero .banner__title {
  overflow: hidden;
}

.svc-hero .banner__title .svc-hero__word {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
  will-change: transform, opacity;
}

.svc-hero .banner__txt,
.svc-hero .banner__btn {
  opacity: 0;
  transform: translateY(24px);
}

.svc-hero.is-ready .svc-hero__label {
  animation: svc-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.svc-hero.is-ready .banner__title .svc-hero__word {
  animation: svc-word-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.svc-hero.is-ready .banner__txt {
  animation: svc-fade-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}

.svc-hero.is-ready .banner__btn {
  animation: svc-fade-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.75s forwards;
}

@keyframes svc-word-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes svc-fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.svc-hero .banner__btn .btn {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.svc-hero .banner__btn .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

.svc-hero__line {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--svc-hero-accent), transparent);
  z-index: 3;
}

.svc-hero.is-ready .svc-hero__line {
  animation: svc-line 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}

@keyframes svc-line {
  to {
    width: 42%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-hero__orb {
    animation: none;
  }

  .svc-hero .svc-hero__label,
  .svc-hero .banner__title .svc-hero__word,
  .svc-hero .banner__txt,
  .svc-hero .banner__btn,
  .svc-hero .svc-hero__line {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .svc-hero .svc-hero__line {
    width: 42%;
  }

  .svc-hero__video {
    display: none;
  }

  .svc-hero__fx {
    display: none;
  }
}

/* Per-service overlay from JSON config */
.svc-hero.banner--bg-img::before,
.svc-hero::before {
  background: var(--svc-hero-overlay, rgba(8, 18, 48, 0.78));
}

/* JSON-driven video FX layers */
.svc-hero__fx {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* 01 ClearThread — connected thread lines */
.svc-fx-line {
  position: absolute;
  height: 2px;
  width: 55%;
  left: -10%;
  background: linear-gradient(90deg, transparent, var(--svc-hero-accent), transparent);
  opacity: 0.55;
  animation: svc-thread-move 8s linear infinite;
}

.svc-fx-line:nth-child(1) { top: 28%; animation-duration: 9s; }
.svc-fx-line:nth-child(2) { top: 48%; width: 70%; animation-duration: 11s; animation-delay: -3s; }
.svc-fx-line:nth-child(3) { top: 68%; width: 45%; animation-duration: 7s; animation-delay: -5s; }

.svc-fx-node {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--svc-hero-accent);
  box-shadow: 0 0 18px var(--svc-hero-accent);
  opacity: 0.7;
  animation: svc-node-pulse 3.2s ease-in-out infinite;
}

.svc-fx-node:nth-child(4) { left: 18%; top: 27%; }
.svc-fx-node:nth-child(5) { left: 48%; top: 47%; animation-delay: -1s; }
.svc-fx-node:nth-child(6) { left: 72%; top: 67%; animation-delay: -2s; }

@keyframes svc-thread-move {
  from { transform: translateX(0); }
  to { transform: translateX(35%); }
}

@keyframes svc-node-pulse {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.45); opacity: 1; }
}

/* 02 Paid Media — pulse rings */
.svc-fx-ring {
  position: absolute;
  border: 1.5px solid var(--svc-hero-accent);
  border-radius: 50%;
  right: 12%;
  top: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  opacity: 0;
  animation: svc-ring-out 4.5s ease-out infinite;
}

.svc-fx-ring:nth-child(2) { animation-delay: 1.5s; }
.svc-fx-ring:nth-child(3) { animation-delay: 3s; }

@keyframes svc-ring-out {
  0% { transform: scale(0.4); opacity: 0.7; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* 03 SEO — scan + grid */
.svc-fx-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.35;
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}

.svc-fx-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 28%;
  background: linear-gradient(180deg, transparent, rgba(232, 196, 106, 0.18), transparent);
  animation: svc-scan-y 5.5s ease-in-out infinite;
}

@keyframes svc-scan-y {
  0%, 100% { top: -10%; }
  50% { top: 75%; }
}

/* 04 Content — drifting blobs */
.svc-fx-blob {
  position: absolute;
  border-radius: 40% 60% 55% 45%;
  background: radial-gradient(circle at 30% 30%, var(--svc-hero-accent), transparent 70%);
  opacity: 0.22;
  filter: blur(8px);
  animation: svc-drift 14s ease-in-out infinite;
}

.svc-fx-blob:nth-child(1) {
  width: min(40vw, 380px);
  height: min(40vw, 380px);
  left: 8%;
  top: 15%;
}

.svc-fx-blob:nth-child(2) {
  width: min(28vw, 260px);
  height: min(28vw, 260px);
  right: 10%;
  top: 35%;
  animation-duration: 18s;
  animation-delay: -4s;
}

.svc-fx-blob:nth-child(3) {
  width: min(34vw, 320px);
  height: min(34vw, 320px);
  left: 40%;
  bottom: -8%;
  animation-duration: 16s;
  animation-delay: -8s;
}

@keyframes svc-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(24px, -30px) rotate(12deg); }
}

.svc-hero--key-paid-media .svc-hero__orb--1,
.svc-hero--key-paid-media .svc-hero__orb--3 {
  background: radial-gradient(circle at 35% 35%, rgba(91, 140, 255, 0.45), rgba(91, 140, 255, 0.05) 70%);
}

.svc-hero--key-seo .svc-hero__orb--1,
.svc-hero--key-seo .svc-hero__orb--3 {
  background: radial-gradient(circle at 35% 35%, rgba(232, 196, 106, 0.4), rgba(232, 196, 106, 0.05) 70%);
}

.svc-hero--key-content .svc-hero__orb--1,
.svc-hero--key-content .svc-hero__orb--3 {
  background: radial-gradient(circle at 35% 35%, rgba(255, 122, 89, 0.42), rgba(255, 122, 89, 0.05) 70%);
}