/* Service hero unification: legacy service heroes restyled to match the
   service-landing hero used on /services/custom-software-development.
   Visual only — no markup or copy changes. */

:root {
  --shu-ink: #0a1020;
  --shu-ink-2: #111c33;
  --shu-red: #ed2b22;
  --shu-red-2: #f4673a;
  --shu-text: rgba(255, 255, 255, .82);
}

/* ---------- shared shell for legacy heroes ---------- */
#services-single-hero,
[id$="-hero"]:not(.service-landing-hero) {
  position: relative;
  overflow: hidden;
  background-color: var(--shu-ink) !important;
  background-image:
    radial-gradient(900px 420px at 88% 0%, rgba(237, 43, 34, .22), rgba(237, 43, 34, 0) 62%),
    radial-gradient(760px 420px at 6% 12%, rgba(56, 102, 180, .34), rgba(56, 102, 180, 0) 68%),
    linear-gradient(140deg, #0a1020 0%, #101c33 52%, #0a1020 100%) !important;
  background-size: auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  padding: clamp(96px, 9vw, 132px) 0 clamp(56px, 6vw, 84px) !important;
}

/* faint grid texture */
#services-single-hero::after,
[id$="-hero"]:not(.service-landing-hero)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 20% 0%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 20% 0%, #000 25%, transparent 78%);
}

/* drop the old dark overlay + inline box */
#services-single-hero .bg-overlay { display: none !important; }

#services-single-hero .container,
[id$="-hero"]:not(.service-landing-hero) .container {
  position: relative;
  z-index: 2;
  padding-left: 24px !important;
  padding-right: 24px !important;
  padding-bottom: 0 !important;
}

#services-single-hero .inner-contents {
  max-width: 780px !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

[id$="-hero"]:not(.service-landing-hero) .it-hero-inner {
  max-width: 800px;
  position: relative;
  z-index: 2;
}

/* ---------- type ---------- */
#services-single-hero h1,
[id$="-hero"]:not(.service-landing-hero) h1 {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: clamp(32px, 4.2vw, 56px) !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
  color: #fff !important;
  margin: 0 0 20px !important;
  max-width: 20ch;
  text-transform: none !important;
}

#services-single-hero h1 span,
#services-single-hero h1 .t-red,
[id$="-hero"]:not(.service-landing-hero) h1 span,
[id$="-hero"]:not(.service-landing-hero) h1 .t-red {
  color: #ff5f45 !important;
}

#services-single-hero p,
[id$="-hero"]:not(.service-landing-hero) p {
  font-family: 'Rubik', sans-serif !important;
  font-size: clamp(16px, 1.25vw, 18px) !important;
  line-height: 1.7 !important;
  color: var(--shu-text) !important;
  max-width: 640px;
  margin: 0 0 28px !important;
}

/* ---------- CTA ---------- */
#services-single-hero .service-cta,
[id$="-hero"]:not(.service-landing-hero) .service-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--shu-red) 0%, var(--shu-red-2) 100%) !important;
  color: #fff !important;
  padding: 16px 30px !important;
  border-radius: 10px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  text-transform: none !important;
  box-shadow: 0 16px 34px rgba(237, 43, 34, .28);
  transition: transform .2s ease, box-shadow .2s ease;
  margin: 0 !important;
}

#services-single-hero .service-cta:hover,
[id$="-hero"]:not(.service-landing-hero) .service-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(237, 43, 34, .36);
  color: #fff !important;
}

#services-single-hero .career_hero_cta,
[id$="-hero"]:not(.service-landing-hero) .career_hero_cta {
  margin-top: 4px;
}

#services-single-hero .career_hero_cta .slider-button2,
[id$="-hero"]:not(.service-landing-hero) .career_hero_cta .slider-button2 {
  padding: 0 !important;
}

/* remove leftover button pseudo backgrounds from old slider styles */
#services-single-hero .slider-button2 a::before,
[id$="-hero"]:not(.service-landing-hero) .slider-button2 a::before {
  display: none !important;
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  #services-single-hero,
  [id$="-hero"]:not(.service-landing-hero) {
    padding: 96px 0 48px !important;
  }

  #services-single-hero h1,
  [id$="-hero"]:not(.service-landing-hero) h1 {
    font-size: clamp(28px, 8vw, 38px) !important;
    max-width: none;
  }

  #services-single-hero p,
  [id$="-hero"]:not(.service-landing-hero) p {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  #services-single-hero .service-cta,
  [id$="-hero"]:not(.service-landing-hero) .service-cta {
    width: 100%;
    justify-content: center;
    padding: 15px 20px !important;
  }
}