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/BentoGrid.tsx

@@ -22,16 +22,8 @@ export function BentoGrid() {
       }}
     >
       <Tile col="span 7" row="span 2" accent="#DEE0F0">
-        <div style={{ position: 'absolute', inset: 0 }}>
+        <div className="bento-flagship">
-          <Image
+          <div className="bento-flagship-copy">
-            src={FEATURED_ROBOTS[0].image}
-            alt="Premium robotics in Dubai"
-            fill
-            sizes="(max-width: 768px) 100vw, 60vw"
-            style={{ objectFit: 'contain', objectPosition: 'right center', padding: 'clamp(1.5rem, 4vw, 3rem)', opacity: 0.92 }}
-          />
-        </div>
-        <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: '0.75rem', maxWidth: '50%' }}>
             <span className="eyebrow">Flagship · Dubai</span>
             <h3 style={{ margin: 0, fontSize: 'clamp(1.4rem, 2.6vw, 2rem)', fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.1 }}>
               <span className="text-gradient">Unitree G1 humanoid live in our Dubai showroom.</span>
@@ -39,11 +31,21 @@ export function BentoGrid() {
             <p style={{ margin: 0, color: '#DEE0F0', fontSize: '0.92rem', lineHeight: 1.6 }}>
               Configure persona, attire, and accessories. Then book a live demo.
             </p>
-          <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', marginTop: '0.5rem' }}>
+            <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', marginTop: '0.4rem' }}>
               <Link href="/robots/unitree-g1/" className="btn btn-primary" style={{ padding: '0.65rem 1.1rem', fontSize: '0.75rem' }}>View G1</Link>
               <Link href="/configure/" className="btn btn-ghost" style={{ padding: '0.65rem 1.1rem', fontSize: '0.75rem' }}>Configure</Link>
             </div>
           </div>
+          <div className="bento-flagship-media">
+            <Image
+              src={FEATURED_ROBOTS[0].image}
+              alt="Premium robotics in Dubai"
+              fill
+              sizes="(max-width: 900px) 100vw, 60vw"
+              style={{ objectFit: 'contain', objectPosition: 'center center', padding: 'clamp(0.5rem, 2vw, 1.25rem)' }}
+            />
+          </div>
+        </div>
       </Tile>
 
       <Tile col="span 5" row="span 1" accent="#273F94" icon={SOC_PATHS.bolt}>
@@ -117,6 +119,40 @@ export function BentoGrid() {
         @media (max-width: 540px) {
           .bento-tile-4 { grid-column: span 12 !important; }
         }
+
+        .bento-flagship {
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+          width: 100%;
+          height: 100%;
+        }
+        .bento-flagship-copy {
+          position: relative;
+          z-index: 2;
+          display: flex;
+          flex-direction: column;
+          gap: 0.7rem;
+        }
+        .bento-flagship-media {
+          position: relative;
+          width: 100%;
+          min-height: 220px;
+          flex: 1;
+        }
+        @media (min-width: 900px) {
+          .bento-flagship { display: block; }
+          .bento-flagship-copy { max-width: 50%; }
+          .bento-flagship-media {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 50%;
+            min-height: 0;
+          }
+        }
       `}</style>
     </div>
   );

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>
   );