/* Narrow screens use natural document flow, regardless of operating system. */
@media (max-width: 850px) {
  html { scroll-padding-top: 88px; }
  .container { width: min(720px, calc(100% - 40px)); }
  .header .nav-wrap { min-height: 72px; }
  .header .brand { padding: 12px 0; }
  .header .brand-logo { width: 156px; }
  .menu-toggle { min-height: 44px; min-width: 80px; font-size: 15px; }
  .header nav { flex-direction: column; align-items: stretch; gap: 4px; }
  .header nav > a:not(.button) { display: flex; align-items: center; min-height: 44px; font-size: 16px; }
  .header .header-contact { justify-self: stretch; min-height: 44px; }
  .hero-grid { padding-block: 36px 28px; gap: 36px; }
  .hero-copy { max-width: 100%; }
  h1 { font-size: clamp(36px, 7.5vw, 56px); letter-spacing: -.045em; }
  .hero .eyebrow, .section .eyebrow { font-size: 10px; line-height: 1.6; letter-spacing: 1.2px; margin-bottom: 18px; }
  .hero-description, .section-intro, .contact-layout > div > p:not(.eyebrow) { font-size: 16px; line-height: 1.65; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 12px; }
  .hero-actions .button { padding: 15px; gap: 12px; font-size: 14px; }
  .text-link { min-height: 44px; font-size: 14px; }
  /* Replace the miniature orbital diagram with a readable two-column system. */
  .hero-visual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; height: auto; margin: 0 auto; padding-block: 12px; }
  .hero-visual .visual-top { position: static; grid-column: 1 / -1; font-size: 10px; line-height: 1.5; }
  .hero-visual .orbit, .hero-visual .connections { display: none; }
  .hero-visual .core { position: relative; top: auto; left: auto; grid-column: 1 / -1; justify-self: center; width: 80px; height: 80px; padding: 16px; margin: 12px 0 20px; transform: rotate(-6deg); border-radius: 18px; }
  .hero-visual .tech-node { position: static; width: auto; max-width: none; min-height: 92px; padding: 12px; gap: 9px; transform: none; animation: none; font-size: 13px; align-items: flex-start; }
  .hero-visual .node-icon { font-size: 22px; flex-shrink: 0; }
  .hero-visual .tech-node small { font-size: 11px; line-height: 1.45; margin-top: 6px; }
  .hero-visual .visual-bottom { position: static; grid-column: 1 / -1; margin-top: 8px; padding-top: 12px; }
  .perspective-controls { flex-wrap: wrap; gap: 4px; }
  .perspective-controls button { min-height: 44px; padding: 8px; font-size: 12px; }
  .perspective-controls .perspective-pause { min-width: 44px; min-height: 44px; }
  .capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; font-size: 13px; line-height: 1.5; }
  .capabilities > span:first-child { grid-column: 1 / -1; font-size: 10px; }
  .section { padding-block: 52px; }
  .section h2 { font-size: clamp(30px, 5.5vw, 40px); }
  .section-heading { margin-bottom: 28px; }
  .service-grid { grid-template-columns: 1fr; gap: 16px; }
  .service-card { padding: 24px; }
  .service-card h3 { font-size: 24px; }
  .service-card p { font-size: 16px; line-height: 1.65; margin-bottom: 20px; }
  .tags { margin-bottom: 18px; }
  .tags span { font-size: 12px; }
  .service-card > a { min-height: 48px; font-size: 14px; }
  .solution-layout, .about-layout, .contact-layout { gap: 28px; }
  .solution-choice { min-height: 56px; font-size: 16px; }
  .solution-panel { max-width: none; padding: 24px; }
  .solution-panel h3 { font-size: 28px; }
  .solution-panel > p:not(.eyebrow):not(.example-note), .solution-panel ul { font-size: 15px; line-height: 1.65; }
  .solution-panel li { margin-bottom: 10px; }
  .example-note { font-size: 12px !important; }
  .flow-illustration { gap: 8px; height: 120px; }
  .flow-illustration > span { font-size: 11px; padding: 8px 6px; }
  .flow-hub { width: 56px; height: 56px; padding: 11px; }
  .organization { gap: 40px; }
  .about-lead { font-size: 18px; line-height: 1.65; margin-bottom: 0; }
  .steps { grid-template-columns: 1fr; gap: 24px; }
  .steps li { padding-top: 20px; }
  .steps h3 { font-size: 23px; margin-bottom: 10px; }
  .organization .steps p { font-size: 16px; line-height: 1.65; margin-bottom: 0; }
  .organization .step-output { font-size: 14px; margin-top: 12px; }
  .contact form { max-width: none; min-width: 0; padding: 24px; }
  .contact form h3 { font-size: 24px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact label { font-size: 14px; line-height: 1.5; }
  .contact input, .contact select, .contact textarea { font-size: 16px; min-height: 48px; padding: 12px; }
  .contact textarea { min-height: 140px; }
  .contact .form-note, .contact .form-status { font-size: 13px; line-height: 1.6; }
  .closing-footer { font-size: 13px; gap: 12px 20px; }
  .closing-footer > a:not(.brand) { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (min-width: 600px) and (max-width: 850px) {
  .service-grid, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .container { width: calc(100% - 32px); }
  .hero-visual .tech-node { flex-direction: column; min-height: 112px; }
  .contact form, .solution-panel, .service-card { padding: 20px; }
}