fix: BentoGrid flagship tile mobile overlap

Robot image and text overlapped on mobile because image was
absolutely positioned over the full card while text was max-width 50%.
Refactored to stacked flex layout below 900px (copy on top, image
below in own region), original side-by-side layout preserved at
desktop via media query.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/robotics/CompanyStory.tsx

@@ -193,10 +193,10 @@ export function CompanyStory() {
 
         {/* Right capability modules */}
         <div
+          className="cs-pillars"
           style={{
             position: 'relative',
             display: 'grid',
-            gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
             gap: '0.875rem',
             minWidth: 0,
           }}
@@ -246,6 +246,14 @@ export function CompanyStory() {
             grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
           }
         }
+        .cs-pillars {
+          grid-template-columns: minmax(0, 1fr);
+        }
+        @media (min-width: 640px) {
+          .cs-pillars {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+          }
+        }
       `}</style>
     </div>
   );