Add Footer + ServiceSelector organisms

Footer:
- Dark espresso (brand.950) bg, inverse white text
- Logo, tagline, contact (phone/email), link group columns, legal bar
- Semantic HTML: <footer>, <nav> per group, <ul> for lists
- Critique 38/40, P2 fixes applied (legal link size, nav landmarks)

ServiceSelector:
- Single-select panel for arrangement flow
- Composes ServiceOption × n + Typography + Button (radiogroup)
- Auto-disables continue when nothing selected
- 7 stories incl. InArrangementFlow with StepIndicator

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

src/components/organisms/ServiceSelector/ServiceSelector.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import type { SxProps, Theme } from '@mui/material/styles';
+import { Typography } from '../../atoms/Typography';
+import { Button } from '../../atoms/Button';
+import { ServiceOption } from '../../molecules/ServiceOption';
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+/** A service option within the selector */
+export interface ServiceItem {
+  /** Unique identifier */
+  id: string;
+  /** Option name */
+  name: string;
+  /** Price in dollars */
+  price?: number;
+  /** Description text */
+  description?: string;
+  /** Whether this option is unavailable */
+  disabled?: boolean;
+}
+
+/** Props for the FA ServiceSelector organism */
+export interface ServiceSelectorProps {
+  /** Section heading (e.g. "Choose a service type") */
+  heading: string;
+  /** Optional subheading providing context */
+  subheading?: string;
+  /** Available options */
+  items: ServiceItem[];
+  /** Currently selected item ID */
+  selectedId?: string;
+  /** Called when the user selects an option */
+  onSelect?: (id: string) => void;
+  /** Label for the continue/next button — omit to hide */
+  continueLabel?: string;
+  /** Called when the user clicks continue */
+  onContinue?: () => void;
+  /** Whether continue is disabled (e.g. nothing selected) — defaults to requiring selection */
+  continueDisabled?: boolean;
+  /** Max visible description lines before "View more" toggle */
+  maxDescriptionLines?: number;
+  /** MUI sx prop for the root element */
+  sx?: SxProps<Theme>;
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+/**
+ * Service selection panel for the FA arrangement flow.
+ *
+ * Presents a heading, subheading, and a list of ServiceOption cards
+ * for single-select (radio) behaviour. An optional continue button
+ * advances to the next step.
+ *
+ * Composes Typography + ServiceOption + Button.
+ *
+ * Usage:
+ * ```tsx
+ * <ServiceSelector
+ *   heading="Choose a service type"
+ *   subheading="Select the type of service you'd like to arrange."
+ *   items={[
+ *     { id: 'burial', name: 'Traditional Burial', price: 4200, description: '...' },
+ *     { id: 'cremation', name: 'Cremation', price: 2800, description: '...' },
+ *   ]}
+ *   selectedId={selected}
+ *   onSelect={setSelected}
+ *   continueLabel="Continue"
+ *   onContinue={() => nextStep()}
+ * />
+ * ```
+ */
+export const ServiceSelector = React.forwardRef<HTMLDivElement, ServiceSelectorProps>(
+  (
+    {
+      heading,
+      subheading,
+      items,
+      selectedId,
+      onSelect,
+      continueLabel,
+      onContinue,
+      continueDisabled,
+      maxDescriptionLines,
+      sx,
+    },
+    ref,
+  ) => {
+    const nothingSelected = !selectedId;
+    const isContinueDisabled = continueDisabled ?? nothingSelected;
+
+    return (
+      <Box
+        ref={ref}
+        sx={[
+          { width: '100%' },
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+      >
+        {/* Header */}
+        <Box sx={{ mb: 3 }}>
+          <Typography variant="h4" component="h2" sx={{ mb: subheading ? 1 : 0 }}>
+            {heading}
+          </Typography>
+          {subheading && (
+            <Typography variant="body2" color="text.secondary">
+              {subheading}
+            </Typography>
+          )}
+        </Box>
+
+        {/* Options list */}
+        <Box
+          role="radiogroup"
+          aria-label={heading}
+          sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}
+        >
+          {items.map((item) => (
+            <ServiceOption
+              key={item.id}
+              name={item.name}
+              price={item.price}
+              description={item.description}
+              selected={selectedId === item.id}
+              disabled={item.disabled}
+              onClick={() => onSelect?.(item.id)}
+              maxDescriptionLines={maxDescriptionLines}
+            />
+          ))}
+        </Box>
+
+        {/* Continue button */}
+        {continueLabel && (
+          <Box sx={{ mt: 4 }}>
+            <Button
+              variant="contained"
+              size="large"
+              fullWidth
+              disabled={isContinueDisabled}
+              onClick={onContinue}
+            >
+              {continueLabel}
+            </Button>
+          </Box>
+        )}
+      </Box>
+    );
+  },
+);
+
+ServiceSelector.displayName = 'ServiceSelector';
+export default ServiceSelector;