Feedback iteration: DialogShell, page consistency, popup standardisation

- Add DialogShell atom — shared dialog container (header, scrollable body, footer)
- Refactor FilterPanel to use DialogShell (Popover → centered Dialog)
- Refactor ArrangementDialog to use DialogShell
- Remove PreviewStep + AuthGateStep pages (consolidated into ArrangementDialog, D-E)
- IntroStep: static subheading, top-left aligned toggle button content
- ProvidersStep: h4 heading "Find a funeral director", location search with pin icon,
  filter moved below search right-aligned, map fill fix, hover scrollbar
- VenueStep: same consistency fixes (h4 heading, filter layout, location icon, map fix)
- PackagesStep: grouped packages ("Matching your preferences" / "Other packages from
  [Provider]"), removed budget filter + Most Popular badge, clickable provider card,
  onArrange replaces onContinue, h4 heading
- WizardLayout: list-map left panel gets thin scrollbar visible on hover

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

src/components/pages/ProvidersStep/ProvidersStep.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined';
 import type { SxProps, Theme } from '@mui/material/styles';
 import { WizardLayout } from '../../templates/WizardLayout';
 import { ProviderCard } from '../../molecules/ProviderCard';
-import { SearchBar } from '../../molecules/SearchBar';
 import { FilterPanel } from '../../molecules/FilterPanel';
 import { Chip } from '../../atoms/Chip';
 import { Typography } from '../../atoms/Typography';
@@ -122,7 +124,7 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
           <Box
             sx={{
               bgcolor: 'var(--fa-color-surface-cool)',
-              height: '100%',
+              flex: 1,
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
@@ -150,25 +152,40 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
           px: { xs: 2, md: 3 },
         }}
       >
-        <Typography variant="display3" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
-          Choose a funeral provider
+        <Typography variant="h4" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
+          Find a funeral director
         </Typography>
         <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
           {subheading}
         </Typography>
 
-        {/* Search bar + filter button */}
-        <Box sx={{ display: 'flex', gap: 1, mb: 2, alignItems: 'flex-start' }}>
-          <Box sx={{ flex: 1 }}>
-            <SearchBar
-              value={searchQuery}
-              onChange={onSearchChange}
-              onSearch={onSearch}
-              placeholder="Search providers..."
-              size="small"
-            />
-          </Box>
-          {filters && filters.length > 0 && (
+        {/* Location search */}
+        <TextField
+          placeholder="Search a town or suburb..."
+          aria-label="Search providers by town or suburb"
+          value={searchQuery}
+          onChange={(e) => onSearchChange(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && onSearch) {
+              e.preventDefault();
+              onSearch(searchQuery);
+            }
+          }}
+          fullWidth
+          size="small"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <LocationOnOutlinedIcon sx={{ color: 'text.secondary', fontSize: 20 }} />
+              </InputAdornment>
+            ),
+          }}
+          sx={{ mb: 1.5 }}
+        />
+
+        {/* Filters — right-aligned below search */}
+        {filters && filters.length > 0 && (
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
             <FilterPanel
               activeCount={filters.filter((f) => f.active).length}
               onClear={onFilterClear}
@@ -186,8 +203,8 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
                 ))}
               </Box>
             </FilterPanel>
-          )}
-        </Box>
+          </Box>
+        )}
 
         {/* Results count */}
         <Typography