Now, with services!

src/lib/components/EngagementsDl.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import type { EngagementItem } from '$lib/types/service-page';
+
+    const {
+        items,
+        sectionId = 'how-engagements-work',
+        headingId = 'engagements-heading',
+        heading = 'How engagements work',
+        intro,
+        outro,
+    }: {
+        items: EngagementItem[];
+        sectionId?: string;
+        headingId?: string;
+        heading?: string;
+        intro?: string;
+        outro?: string;
+    } = $props();
+</script>
+
+<section id={sectionId} class="section" aria-labelledby={headingId}>
+    <div class="container container--narrow">
+        <h2 id={headingId}>{heading}</h2>
+        {#if intro}
+            <p>{intro}</p>
+        {/if}
+        <dl class="engagements-list">
+            {#each items as item}
+                <dt>{item.term}</dt>
+                <dd>{item.definition}</dd>
+            {/each}
+        </dl>
+        {#if outro}
+            <p>{outro}</p>
+        {/if}
+    </div>
+</section>