style(lists): apply gradient PageHeader to client/interest/yacht/company/berth lists

Pulls the polished gradient hero strip into the five primary list
surfaces. PR10b-e (detail polish, dashboard/admin polish, email +
notifications polish, mobile responsive sweep) deferred to a follow-up
release per spec risk register since visual baseline regen needs hands-
on iteration.

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

src/components/berths/berth-list.tsx

@@ -17,21 +17,12 @@ export function BerthList() {
   const router = useRouter();
   const params = useParams<{ portSlug: string }>();
 
-  const {
-    data,
-    pagination,
-    isLoading,
-    sort,
-    setSort,
-    filters,
-    setFilter,
-    clearFilters,
-    setPage,
-  } = usePaginatedQuery<BerthRow>({
-    queryKey: ['berths'],
-    endpoint: '/api/v1/berths',
-    filterDefinitions: berthFilterDefinitions,
-  });
+  const { data, pagination, isLoading, sort, setSort, filters, setFilter, clearFilters, setPage } =
+    usePaginatedQuery<BerthRow>({
+      queryKey: ['berths'],
+      endpoint: '/api/v1/berths',
+      filterDefinitions: berthFilterDefinitions,
+    });
 
   useRealtimeInvalidation({
     'berth:updated': [['berths']],
@@ -43,6 +34,7 @@ export function BerthList() {
       <PageHeader
         title="Berths"
         description="View and manage berth allocations"
+        variant="gradient"
         // No "New" button — berths are import-only
       />