/* Mobile-only final overrides. Desktop is intentionally untouched. */
@media (max-width: 850px) {
  /* Hero philosophy: remove desktop's forced break and preserve normal word spacing. */
  .hero-philosophy br { display: none !important; }
  .hero-philosophy .philosophy-second-line {
    display: inline !important;
    margin: 0 !important;
  }

  /* Experience at scale: mirror the mobile Diagnose → Align pathway vertically. */
  .proof-card .metric {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 34px !important;
    gap: 10px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-align: center !important;
    font-size: clamp(64px, 19vw, 88px) !important;
    line-height: .92 !important;
    letter-spacing: -.035em !important;
  }
  .proof-card .metric-value {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
    text-align: center !important;
  }
  .proof-card .metric-arrow {
    display: block !important;
    width: auto !important;
    color: var(--gold) !important;
    font-size: 38px !important;
    line-height: 1 !important;
    transform: rotate(90deg) scaleX(1.18) !important;
    transform-origin: center !important;
    margin: 2px 0 4px !important;
  }

  /* Keep the proof section contained within the phone viewport. */
  .proof-card { min-width: 0 !important; overflow: hidden !important; }
  .proof-card h2, .proof-card p { max-width: 100% !important; }
}

/* Mobile viewport lock: prevent any residual horizontal page drift. */
@media (max-width: 850px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
  }

  *, *::before, *::after {
    box-sizing: border-box;
  }

  img, svg, video, canvas {
    max-width: 100%;
  }

  main, section, header, footer, .page, .site-shell, .container, .wrap {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .proof-card,
  .proof-card .metric,
  .proof-card .metric-value,
  .hero-philosophy {
    max-width: 100% !important;
    min-width: 0 !important;
  }
}