/* Room to read and tap on phones. Desktop layouts keep their existing design. */
@media (max-width: 800px) {
  .section-heading { gap: 28px; }
  .outcome-grid { gap: 22px; }
  .outcome-card { padding: 28px; }
  .outcome-card h3 { margin-bottom: 18px; }
  .outcome-card p { font-size: 13px; line-height: 1.85; }
  .outcome-card small { margin: 24px 0; line-height: 1.9; }
  .quote-prompt { gap: 24px; padding: 26px; }
  .service-detail-links { gap: 12px 24px; }
  .service-detail-links > a { display: flex; align-items: center; min-height: 44px; line-height: 1.6; }
  .service-hero-actions { flex-wrap: wrap; gap: 24px; }
  .service-hero-actions .text-link { min-height: 44px; align-items: center; }
  .service-method .outcome-grid { gap: 24px; }
  .service-method .outcome-card { padding: 28px 0; }
  .contact-bottom { gap: 32px; }
  .contact-bottom > div { min-width: 0; }
  .contact-bottom a { min-height: 44px; align-items: center; }
  dialog { padding: 28px; }
  dialog form { gap: 22px; }
  dialog label { gap: 10px; }
  dialog .form-pair { gap: 22px; }
  dialog .quote-optional summary { min-height: 48px; align-items: center; }
  .quote-email-fallback { line-height: 1.8; overflow-wrap: anywhere; }
}

@media (max-width: 600px) {
  .service-list .service-row,
  .service-list .service-row:hover {
    grid-template-columns: minmax(0, 1fr) 42px;
    grid-template-areas: 'number arrow' 'copy copy' 'tags tags';
    gap: 20px 18px;
    padding: 28px 4px 32px;
  }
  .service-list .service-number { grid-area: number; align-self: center; margin: 0; font-size: 11px; }
  .service-list .service-row > div:not(.service-tags) { grid-area: copy; }
  .service-list .service-row h3 { font-size: clamp(21px, 5vw, 25px); line-height: 1.35; letter-spacing: -.7px; }
  .service-list .service-row p { margin-top: 14px; font-size: 13px; line-height: 1.85; }
  .service-list .service-tags { grid-area: tags; padding: 0; justify-content: flex-start; gap: 9px; }
  .service-list .service-tags > span { padding: 7px 11px; font-size: 9px; line-height: 1.5; }
  .service-list .service-row .row-arrow { grid-area: arrow; width: 42px; height: 42px; align-self: center; }
  .process-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .process-grid .step-line { padding-bottom: 18px; margin-bottom: 22px; }
  .process-grid article h3 { font-size: 22px; margin-bottom: 16px; }
  .process-grid p { font-size: 13px; line-height: 1.85; max-width: none; }
  .process-grid .step-label { margin-top: 22px; font-size: 8px; line-height: 1.7; }
  .demo-controls button { gap: 18px; padding: 26px 0; }
  .demo-controls button > span { flex: 0 0 22px; line-height: 1.5; }
  .demo-controls button > div { min-width: 0; }
  .demo-controls button strong { font-size: 18px; line-height: 1.4; }
  .demo-controls button small { font-size: 12px; line-height: 1.8; margin-top: 12px; }
  .demo-controls button b { flex: 0 0 22px; text-align: right; }
  .demo-layout { gap: 36px; }
  .about { gap: 36px; }
  .about-copy > p { font-size: 13px; line-height: 1.85; margin-top: 20px; }
  .about-copy > .text-link { gap: 20px; line-height: 1.8; margin-top: 28px; }
  .about-principles { gap: 16px; line-height: 1.7; }
  .partner-capabilities li { padding: 22px 0; gap: 17px; }
  .partner-capabilities strong { margin-bottom: 10px; line-height: 1.6; }
  .partner-capabilities p { font-size: 12px; }
  .partner-summary { gap: 28px; }
  .partner-summary .partner-button { width: 100%; justify-content: space-between; line-height: 1.7; padding: 18px 20px; }
  .contact-section .contact-main { gap: 32px; padding: 40px 0; }
  .contact-bottom { flex-direction: column; align-items: stretch; gap: 28px; }
  .contact-bottom > div { width: 100%; gap: 12px; }
  .contact-bottom p { font-size: 12px; line-height: 1.85; }
  .contact-bottom a { font-size: 13px; gap: 16px; }
  .contact-bottom a span { flex-shrink: 0; }
  footer.wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 36px; padding-bottom: 100px; }
  footer > span { font-size: 10px; line-height: 1.8; }
  footer .footer-partner { margin-top: 14px; font-size: 11px; line-height: 1.8; }
  footer > a:last-child { margin-left: 0; justify-self: start; min-height: 44px; display: flex; align-items: center; font-size: 11px; }
  .service-page footer.wrap { padding-bottom: 100px; }
  .service-hero-actions { flex-direction: column; align-items: stretch; gap: 18px; }
  .service-hero-actions .button { justify-content: space-between; }
  .service-hero-actions .text-link { align-self: flex-start; gap: 20px; }
  .use-case-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .use-case-grid article { padding-top: 28px; }
  .use-case-grid p { font-size: 13px; }
  .form-pair { grid-template-columns: minmax(0, 1fr); }
  dialog { width: calc(100vw - 28px); max-height: calc(100dvh - 28px); padding: 24px; }
  dialog input, dialog select, dialog textarea { font-size: 16px; min-height: 48px; }
  dialog .button { width: 100%; justify-content: space-between; gap: 18px; line-height: 1.6; }
  .quote-dock { max-width: calc(100vw - 32px); bottom: max(16px, env(safe-area-inset-bottom)); right: 16px; }
}