Hero layout: text top-aligned, FuneralFinder overlaps into hero image

- Hero text: alignItems center → flex-start, pt 8 (top of image)
- FuneralFinder: mt -10 → -22 (sits on the hero image, not white bg)
- Heading + subheading + finder all visible above the fold

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

src/components/pages/HomePage/HomePage.tsx

@@ -215,7 +215,7 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
                 position: 'relative',
                 minHeight: { xs: 480, md: 640 },
                 display: 'flex',
-                alignItems: 'center',
+                alignItems: 'flex-start',
                 justifyContent: 'center',
                 backgroundImage: `url(${heroImageUrl})`,
                 backgroundSize: 'cover',
@@ -231,7 +231,13 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
             >
               <Container
                 maxWidth="md"
-                sx={{ position: 'relative', zIndex: 1, textAlign: 'center', py: 6 }}
+                sx={{
+                  position: 'relative',
+                  zIndex: 1,
+                  textAlign: 'center',
+                  pt: { xs: 6, md: 8 },
+                  pb: 4,
+                }}
               >
                 <Typography
                   variant="display3"
@@ -322,7 +328,7 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
             sx={{
               position: 'relative',
               zIndex: 1,
-              mt: { xs: -6, md: -10 },
+              mt: { xs: -14, md: -22 },
               px: 2,
             }}
           >