Give each service its own page

A service now has its address, like a project: icon, tagline, what the
collective does and how, the projects it was delivered on, what the
people it was for said, and the technologies behind it. The landing's
service cards link to it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

landing/src/app/ui/routed-page.ts

@@ -9,6 +9,7 @@ import { copyFor, type Copy } from '../core/copy';
 import { listingAlternates, listingPath } from '../core/routes';
 import type { Locale } from '../core/api';
 import { RadarPage } from './radar-page';
+import { ServiceDetail } from './service-detail';
 import { CallDetail } from './call-detail';
 import type { RoutedPageData, RoutedRecord } from '../core/routed-page';
 import { ContentPage } from './content-page';
@@ -30,6 +31,7 @@ import { ProjectDetail } from './project-detail';
     PageShell,
     ProjectDetail,
     RadarPage,
+    ServiceDetail,
   ],
   template: `
     <app-page-shell [data]="data()" [seo]="seo()">
@@ -57,6 +59,13 @@ import { ProjectDetail } from './project-detail';
               [locale]="data().locale"
             />
           }
+          @case ('service') {
+            <app-service-detail
+              [service]="found.record"
+              [copy]="copy()"
+              [locale]="data().locale"
+            />
+          }
           @case ('radar') {
             <app-radar-page [technologies]="found.record" [copy]="copy()" />
           }
@@ -126,6 +135,17 @@ export function seoFor(
         type: 'profile',
       };
     }
+    case 'service': {
+      const service = found.record;
+
+      return {
+        title: service.meta_title || `Pireon — ${service.title}`,
+        description: service.meta_description || service.tagline || '',
+        path: service.path,
+        alternates: service.alternates ?? {},
+        type: 'article',
+      };
+    }
     case 'radar':
       return {
         title: `Pireon — ${copy.sections.radar.title}`,