diff --git a/src/components/CustomPageTitle.astro b/src/components/CustomPageTitle.astro
index fc93fe15..d6902c10 100644
--- a/src/components/CustomPageTitle.astro
+++ b/src/components/CustomPageTitle.astro
@@ -13,8 +13,39 @@ const title = Astro.locals.starlightRoute.entry.data.title;
 // an empty paragraph.
 const description = Astro.locals.starlightRoute.entry.data.description;
 const body = Astro.locals.starlightRoute.entry.body ?? '';
+
+// Eyebrow: a 2-level breadcrumb (e.g. "Agents > Third-Party CLI Agents")
+// shown above the H1 to orient readers who land directly from search.
+// Level 1 = the current sidebar topic (from starlightSidebarTopics).
+// Level 2 = the immediate parent group of the current page in the sidebar
+// tree (from starlightRoute.sidebar). Truncated to 2 levels max.
+const topics = Astro.locals.starlightSidebarTopics?.topics;
+const currentTopic = topics?.find((t: { isCurrent: boolean }) => t.isCurrent);
+const topicLabel = currentTopic?.label;
+
+// Walk the sidebar tree to find the parent group of the current page.
+type SidebarEntry = { type: string; label: string; isCurrent?: boolean; entries?: SidebarEntry[] };
+function findParentGroup(entries: SidebarEntry[], parentLabel?: string): string | undefined {
+  for (const entry of entries) {
+    if (entry.type === 'link' && entry.isCurrent) return parentLabel;
+    if (entry.type === 'group' && entry.entries) {
+      const found = findParentGroup(entry.entries, entry.label);
+      if (found) return found;
+    }
+  }
+  return undefined;
+}
+const sidebar = Astro.locals.starlightRoute?.sidebar as SidebarEntry[] | undefined;
+const parentGroup = sidebar ? findParentGroup(sidebar) : undefined;
+
+// Build the eyebrow: "Topic > Parent Group" or just "Topic" if the page
+// is at the top level of its topic (no parent group, or parent matches topic).
+const eyebrow = topicLabel && parentGroup && parentGroup !== topicLabel
+  ? `${topicLabel} > ${parentGroup}`
+  : topicLabel;
 ---
 
+{eyebrow && <p class="page-eyebrow">{eyebrow}</p>}
 <div class="page-title-row">
   <h1 id="_top">{title}</h1>
   <CopyPageButton body={body} title={title} />
@@ -29,10 +60,20 @@ const body = Astro.locals.starlightRoute.entry.body ?? '';
     gap: 1rem;
   }
 
+  .page-eyebrow {
+    margin-top: 1rem;
+    margin-bottom: 0.25rem;
+    font-size: var(--sl-text-xs);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--sl-color-text-accent);
+  }
+
   .page-title-row h1 {
     flex: 1;
     min-width: 0;
-    margin-top: 1rem;
+    margin-top: 0;
     font-size: var(--sl-text-h1);
     line-height: var(--sl-line-height-headings);
     font-weight: 700;