/* Unified visual-first order for service-detail heroes on small screens. */
@media (max-width: 760px) {
  body.audit-service-page .audit-hero__grid,
  body.implementation-page .sdp-hero__grid,
  body.sales-system-page .sdp-hero__grid,
  body.support-page .page-grid,
  body.training-page .training-hero__grid,
  body.custom-service-page .hero__grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 24px !important;
  }

  body.audit-service-page .audit-hero-visual,
  body.implementation-page .sdp-hero__visual,
  body.sales-system-page .sdp-hero__visual,
  body.support-page .support-hero-visual,
  body.training-page .training-hero__visual,
  body.custom-service-page .visual {
    order: 1 !important;
    width: 100% !important;
  }

  body.audit-service-page .audit-hero__text,
  body.implementation-page .sdp-hero__copy,
  body.sales-system-page .sdp-hero__copy,
  body.support-page .page-grid > :first-child,
  body.training-page .training-hero__copy,
  body.custom-service-page .hero__grid > :first-child {
    order: 2 !important;
    width: 100% !important;
  }

  body.implementation-page .sdp-hero__visual,
  body.sales-system-page .sdp-hero__visual {
    height: clamp(320px, 92vw, 380px) !important;
  }

  body.implementation-page .sdp-hero__copy,
  body.sales-system-page .sdp-hero__copy {
    padding-top: 4px !important;
  }

  body.audit-service-page .audit-hero-visual,
  body.support-page .support-hero-visual,
  body.training-page .training-hero__visual,
  body.custom-service-page .visual {
    margin-bottom: 2px !important;
  }
}