/*
 * Service detail uplift: align the shared service page with the homepage
 * language (brand gradient CTA, calm typography, wider reading column).
 * Loaded last on service-detail.html only.
 */

/* Primary CTA: brand gradient instead of the legacy neon-green block. */
body.detail-page .service-detail-cta-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 64px !important;
  height: auto !important;
  padding: 18px 28px !important;
  border: 1px solid transparent !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #ff9b4a 0%, #ff6a3a 35%, #a642ff 100%) !important;
  color: #120b07 !important;
  font-family: var(--font-body) !important;
  font-size: clamp(15px, 1.2vw, 17px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  box-shadow: 0 18px 44px rgba(255, 120, 60, 0.26) !important;
  animation: none !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease !important;
}

body.detail-page .service-detail-cta-btn:hover,
body.detail-page .service-detail-cta-btn:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 22px 54px rgba(255, 120, 60, 0.34) !important;
}

/* Title strip under the CTA: one display line, calm body copy. */
body.detail-page .service-detail-cta-text .cta-text-left .cta-text-line {
  font-size: clamp(17px, 1.7vw, 24px) !important;
  line-height: 1.3 !important;
  letter-spacing: 0.02em !important;
}

body.detail-page .service-detail-cta-text .cta-text-right .cta-text-line {
  font-family: var(--font-body) !important;
  font-size: clamp(15px, 1.2vw, 17px) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: rgba(245, 242, 235, 0.78) !important;
}

/* "Back to home" scrolls with the page instead of floating over headings. */
body.detail-page .detail-home-link {
  position: absolute !important;
}

/* Reading column: wider on desktop, same surfaces as the homepage panels. */
@media (min-width: 901px) {
  body.detail-page #service-detail-card {
    max-width: 1040px !important;
    padding: clamp(40px, 4.5vw, 64px) clamp(36px, 5vw, 72px) !important;
    border-radius: 24px !important;
  }
}

body.detail-page #service-detail-card {
  border-color: rgba(255, 255, 255, 0.11) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(51, 245, 200, 0.06), transparent 45%),
    rgba(255, 255, 255, 0.03) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}