feat(layout): add reusable page hero and services page shells

- replace bespoke page and library banners with PageHero.astro
- add ServicesPage.astro for the live-style English services landing page
- restyle shared hero/container measurements for the new layout shell
- add self-hosted services card images

www/src/layouts/PageLayout.astro

@@ -3,6 +3,8 @@ import BaseLayout from './BaseLayout.astro';
 import FormShell from '../components/FormShell.astro';
 import TeamPage from '../components/TeamPage.astro';
 import AboutPage from '../components/AboutPage.astro';
+import ServicesPage from '../components/ServicesPage.astro';
+import PageHero from '../components/PageHero.astro';
 import { pageHeroImages } from '../data/page-visuals';
 const { entry } = Astro.props;
 const showForm = ['client-consultation', 'contact', 'schedule-consultation', 'referrals'].includes(entry.data.slug);
@@ -49,13 +51,13 @@ const isService = Boolean(serviceTitles[entry.data.lang]?.[entry.data.slug]);
 const heroImage = pageHeroImages[entry.data.slug];
 ---
 <BaseLayout title={entry.data.title} description={entry.data.description} canonical={entry.data.canonical} image={entry.data.featuredImage || heroImage} lang={entry.data.lang}>
-  <header class:list={['source-page-banner', { 'has-source-image': heroImage, 'service-banner': isService }]} style={heroImage ? `background-image: url("${heroImage}")` : undefined}>
-    <div class="container"><h1>{bannerTitle}</h1></div>
-  </header>
+  <PageHero title={bannerTitle} image={heroImage} constrain />
   {entry.data.slug === 'team' && entry.data.lang === 'en'
     ? <TeamPage />
     : entry.data.slug === 'about' && entry.data.lang === 'en'
     ? <AboutPage />
+    : entry.data.slug === 'services' && entry.data.lang === 'en'
+    ? <ServicesPage />
     : <article class:list={['prose', 'source-page', 'container', { 'service-page': isService }]}><slot /></article>}
   {showForm && <FormShell title={bannerTitle} showBackground={entry.data.slug === 'client-consultation'} />}
 </BaseLayout>