diff --git a/src/app/contact/contact-form.tsx b/src/app/contact/contact-form.tsx
index 3abfea8..859f612 100644
--- a/src/app/contact/contact-form.tsx
+++ b/src/app/contact/contact-form.tsx
@@ -15,8 +15,13 @@ const fieldClasses =
  * looks like it worked and silently loses the enquiry. Replacing this with a
  * route handler or a form service is tracked in issue #2 — when that lands,
  * the mailto fallback should stay for anyone with JavaScript disabled.
+ *
+ * `about` is the practitioner a directory enquiry concerns. Enquiries route
+ * through Bluehex rather than to the practitioner directly — no address is
+ * ever published on a profile — so this only has to say who was meant, and the
+ * mail still comes here.
  */
-export function ContactForm({ email }: { email: string }) {
+export function ContactForm({ email, about }: { email: string; about?: string }) {
   const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
@@ -27,20 +32,39 @@ export function ContactForm({ email }: { email: string }) {
       `Name: ${value("name")}`,
       `Email: ${value("email")}`,
       `Phone: ${value("phone")}`,
+      ...(about ? [`About: ${about}`] : []),
       "",
       value("message"),
     ].join("\n");
 
     const query = new URLSearchParams({
-      subject: `Enquiry from ${value("name") || "the website"}`,
+      subject: about
+        ? `Enquiry about ${about}, from ${value("name") || "the website"}`
+        : `Enquiry from ${value("name") || "the website"}`,
       body,
     });
 
-    window.location.href = `mailto:${email}?${query}`;
+    /* `URLSearchParams.toString()` serialises as `application/x-www-form-
+       urlencoded`, which writes a space as `+`. A mailto query is not form
+       encoded — RFC 6068 wants percent-encoding, where `+` is a literal plus —
+       so clients split on it and the strict ones open a compose window reading
+       "Enquiry+about+Mara+Ellison". A literal plus in a field is already
+       `%2B` by this point, so replacing every remaining `+` is safe.
+
+       `URLSearchParams` is still what builds the query: it percent-encodes `&`,
+       `?`, CR and LF, so no field value can inject a second mailto header. */
+    window.location.href = `mailto:${email}?${query.toString().replace(/\+/g, "%20")}`;
   };
 
   return (
     <form onSubmit={onSubmit} className="mt-14 grid gap-x-8 gap-y-10 sm:grid-cols-2">
+      {about ? (
+        <p className="rounded-tight bg-surface px-5 py-4 text-sm text-t-muted sm:col-span-2">
+          Enquiring about <strong className="font-medium text-t-bright">{about}</strong>.
+          Bluehex passes it on — practitioners are not contacted directly.
+        </p>
+      ) : null}
+
       <label className="block">
         <span className="sr-only">Your name</span>
         <input
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 97ac01d..78cbfee 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { ContactForm } from "./contact-form";
 import { ArrowRight, ArrowUpRight } from "@/components/icons";
 import { Button, SectionLabel } from "@/components/ui";
+import { practitioners } from "@/lib/practitioners";
 import { site } from "@/lib/site";
 
 export const metadata: Metadata = {
@@ -12,7 +13,28 @@ export const metadata: Metadata = {
 const BOOKING_URL =
   "https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ2fXA9Mpyae3jbldYGLyeNFKUM4f--cA-W-w5v1WUV0BtWG6eq1paYGH4Q6gNtE_iyUPynhSCXF";
 
-export default function ContactPage() {
+export default async function ContactPage({ searchParams }: PageProps<"/contact">) {
+  /* The directory's Enquire button carries who the enquiry is about. Read here
+     rather than with `useSearchParams` in the form, which would need a Suspense
+     boundary and push the whole page to client rendering for one string.
+
+     It carries the profile **id**, not the display name, and the name shown is
+     looked up from it. Two reasons, and the second is the serious one:
+
+     1. Names are not identifiers. Two practitioners can share one, and the
+        enquiry would not say which — the same argument that rules the display
+        name out of a profile URL.
+     2. The previous version echoed the query string straight into the page, the
+        mailto subject and the mail body. That is unvalidated, attacker-supplied
+        text rendered as if Bluehex wrote it, so `?about=<anything>` produced a
+        page that appeared to endorse it. Resolving against the known set means
+        anything that does not match simply shows no banner. */
+  const requested = (await searchParams).about;
+  const about =
+    typeof requested === "string"
+      ? practitioners.find((person) => person.id === requested)?.name
+      : undefined;
+
   return (
     <>
       <section className="container-x pt-32 pb-20 md:pt-44 md:pb-28">
@@ -35,7 +57,7 @@ export default function ContactPage() {
               anytime.
             </p>
 
-            <ContactForm email={site.email} />
+            <ContactForm email={site.email} about={about} />
           </div>
         </div>
       </section>
diff --git a/src/app/p/[handle]/page.tsx b/src/app/p/[handle]/page.tsx
new file mode 100644
index 0000000..c298095
--- /dev/null
+++ b/src/app/p/[handle]/page.tsx
@@ -0,0 +1,57 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound, redirect } from "next/navigation";
+import { profilePath } from "@/lib/practitioners";
+import { findByHandle } from "../_lib/handles";
+import { ProfileDetail } from "../_lib/profile-detail";
+
+/**
+ * A profile at its real URL.
+ *
+ * It sits at `/p/` rather than under `/prototype/` because the directory links
+ * here from production code (`profilePath` in `@/lib/practitioners`), and the
+ * whole point of a profile having a URL is that the URL is real and shareable.
+ *
+ * Only the trailing short id resolves; the slug is decoration. A request whose
+ * slug no longer matches is redirected to the canonical path rather than served
+ * in both places, which is what keeps a link alive across a rename without
+ * splitting the profile across two URLs.
+ *
+ * Every arrival renders this — clicked from the directory, pasted from a CV, or
+ * found in search. An earlier version intercepted the click into a drawer over
+ * the directory so the visitor kept their search context; that was cut, because
+ * interception applies to soft navigation only and a link pasted from anywhere
+ * else is a cold arrival at this page regardless.
+ */
+
+export async function generateMetadata({
+  params,
+}: PageProps<"/p/[handle]">): Promise<Metadata> {
+  const person = findByHandle((await params).handle);
+
+  return {
+    title: person ? `${person.name} — Bluehex` : "Profile",
+  };
+}
+
+export default async function ProfilePage({ params }: PageProps<"/p/[handle]">) {
+  const handle = (await params).handle;
+  const person = findByHandle(handle);
+  if (!person) notFound();
+
+  const canonical = profilePath(person);
+  if (`/p/${handle}` !== canonical) redirect(canonical);
+
+  return (
+    <div className="container-x pt-32 pb-24 md:pt-40">
+      <p className="mx-auto mb-10 max-w-3xl text-sm text-t-muted">
+        <Link href="/" className="underline underline-offset-4">
+          Directory
+        </Link>{" "}
+        / {person.name}
+      </p>
+
+      <ProfileDetail person={person} />
+    </div>
+  );
+}
diff --git a/src/app/p/_lib/handles.ts b/src/app/p/_lib/handles.ts
new file mode 100644
index 0000000..ec8bd22
--- /dev/null
+++ b/src/app/p/_lib/handles.ts
@@ -0,0 +1,29 @@
+/**
+ * Resolving a profile handle back to a profile.
+ *
+ * The *generating* half of this lives in `@/lib/practitioners` as `profilePath`,
+ * because the directory needs it to render links. Only the lookup is here.
+ *
+ * There must be exactly one scheme. An earlier version of this file had its own
+ * `profileHandle` that hashed the *name* into a short id, which disagreed with
+ * production's "first six characters of the uuid" the moment both existed: the
+ * directory linked one way and the page resolved another. It is deleted rather
+ * than reconciled.
+ *
+ * The lookup reads only the trailing short id and ignores the slug, which is
+ * what makes a URL survive a rename — `/p/mara-ellison-9f3c1a` and
+ * `/p/her-new-name-9f3c1a` are the same profile. The route redirects a
+ * non-canonical slug to the canonical one rather than serving both.
+ *
+ * It resolves against `practitioners`, which is empty and stays empty until real
+ * people are in it — so every handle 404s today. That is the same emptiness the
+ * directory renders its invitation card for, not a missing case.
+ */
+
+import { practitioners } from "@/lib/practitioners";
+
+export function findByHandle(handle: string) {
+  const id = handle.split("-").at(-1);
+  if (!id) return null;
+  return practitioners.find((person) => person.id.slice(0, 6) === id) ?? null;
+}
diff --git a/src/app/p/_lib/profile-detail.tsx b/src/app/p/_lib/profile-detail.tsx
new file mode 100644
index 0000000..e6779bc
--- /dev/null
+++ b/src/app/p/_lib/profile-detail.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+/**
+ * One profile.
+ *
+ * It rendered in two containers for a while — a drawer over the directory on a
+ * click, a page on a cold arrival, one component behind both. The drawer was cut
+ * along with the route interception that produced it. What is left is the page,
+ * which was always the half that had to work.
+ *
+ * What is here and not on the roster row: the bio, the earned dates, and the
+ * credential sources. Three fields. The page is not justified by that depth —
+ * it is justified by having a URL, which is a different argument and the one
+ * that actually held.
+ */
+
+import { useState } from "react";
+import { CredentialMark, earnedLabel } from "@/components/credential-mark";
+import { Badge } from "@/components/ui";
+import { hasVerifiedBadge, profilePath, type Practitioner } from "@/lib/practitioners";
+import { site } from "@/lib/site";
+
+export function ProfileDetail({ person }: { person: Practitioner }) {
+  const badged = hasVerifiedBadge(person.credentials);
+  const [copied, setCopied] = useState(false);
+
+  /* Absolute, because the point of the button is what a practitioner pastes
+     into an application. The origin lives in `site.ts` with the rest of the
+     site-wide facts rather than being spelled out here. */
+  const shareUrl = `${site.origin}${profilePath(person)}`;
+
+  /* Confirm after the fact, not before it. `navigator.clipboard` is undefined
+     on any non-secure origin — a dev server reached over a LAN address rather
+     than localhost — and where it does exist `writeText` rejects on a denied
+     permission or an unfocused document. Optional chaining and a discarded
+     promise both used to reach `setCopied(true)` regardless, so the button
+     claimed a copy that had not happened. Pasting a profile link into an
+     application is the reason this route exists, which makes that the one lie
+     it cannot afford. */
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(shareUrl);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1600);
+    } catch {
+      /* Leave the label alone — nothing was copied, and the URL is in the
+         address bar for anyone who needs it. */
+    }
+  };
+
+  return (
+    /* A white card, because `bg-page` is a warm off-white and body copy at
+       `text-t-muted` on it reads as grey on grey. */
+    <article className="mx-auto max-w-3xl rounded-card bg-surface p-8 md:p-12">
+      <div className="flex flex-wrap items-center gap-3">
+        {badged ? (
+          <p className="inline-flex items-center gap-2 rounded-full bg-ink px-4 py-1.5 text-sm font-medium text-t-invert">
+            ✓ Verified by Bluehex
+          </p>
+        ) : (
+          <p className="inline-flex items-center rounded-full border border-stroke px-4 py-1.5 text-sm font-medium text-t-muted">
+            Self-listed
+          </p>
+        )}
+
+        <button
+          type="button"
+          onClick={copy}
+          className="text-xs text-t-faint underline underline-offset-4 hover:text-t-bright"
+        >
+          {copied ? "Link copied" : "Copy link"}
+        </button>
+      </div>
+
+      <h1 className="display-2 mt-6 break-words">{person.name}</h1>
+      {person.headline ? (
+        <p className="mt-3 text-xl text-t-muted">{person.headline}</p>
+      ) : null}
+      {person.location ? <p className="mt-1.5 text-sm text-t-faint">{person.location}</p> : null}
+
+      {person.bio ? (
+        <p className="mt-8 max-w-2xl leading-relaxed text-t-muted">{person.bio}</p>
+      ) : null}
+
+      <div className="mt-9 border-t border-stroke pt-7">
+        <div className="flex flex-wrap items-baseline justify-between gap-3">
+          <h2 className="text-xs font-medium tracking-wide text-t-faint uppercase">
+            Credentials
+          </h2>
+          <p className="text-xs text-t-faint">
+            {badged
+              ? "Opened and read by a human at Bluehex"
+              : "Not all of these have been checked"}
+          </p>
+        </div>
+
+        <ul className="mt-6 flex flex-col gap-5">
+          {person.credentials.map((credential) => (
+            <li key={`${credential.source}:${credential.label}`} className="flex items-start gap-3">
+              <CredentialMark credential={credential} />
+              <div className="min-w-0">
+                <p className="break-words">{credential.label}</p>
+                <p className="mt-0.5 text-sm text-t-faint">
+                  {credential.source} · {earnedLabel(credential)}
+                </p>
+                {credential.evidenceUrl ? (
+                  <a
+                    href={credential.evidenceUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="mt-1.5 inline-block text-sm underline underline-offset-4"
+                  >
+                    See the certificate
+                  </a>
+                ) : (
+                  <p className="mt-1.5 text-sm text-t-faint italic">
+                    {credential.earnedAt ? "Certificate not published." : "Nothing to show yet."}
+                  </p>
+                )}
+              </div>
+            </li>
+          ))}
+          {person.credentials.length === 0 ? (
+            <li className="text-sm text-t-faint">
+              No credentials listed — here to be findable, not to be certified.
+            </li>
+          ) : null}
+        </ul>
+      </div>
+
+      {person.focus.length > 0 ? (
+        <div className="mt-8 flex flex-wrap gap-2 border-t border-stroke pt-7">
+          {person.focus.map((item) => (
+            <Badge key={item}>{item}</Badge>
+          ))}
+        </div>
+      ) : null}
+
+      {/* The id, not the name — see the comment in `contact/page.tsx`, which
+          resolves it back to a name against the same roster this page was
+          resolved from. */}
+      <a
+        href={`/contact?about=${encodeURIComponent(person.id)}`}
+        className="mt-9 inline-flex h-13 items-center justify-center rounded-full bg-ink px-7 font-medium text-t-invert transition-colors hover:bg-ink-tint"
+      >
+        Enquire about {person.name.split(" ")[0]}
+      </a>
+    </article>
+  );
+}
diff --git a/src/components/credential-mark.tsx b/src/components/credential-mark.tsx
new file mode 100644
index 0000000..826c09b
--- /dev/null
+++ b/src/components/credential-mark.tsx
@@ -0,0 +1,82 @@
+/**
+ * How a credential's state is drawn, wherever it is drawn.
+ *
+ * Two surfaces render credentials — the roster row and the profile page — and
+ * the three-state distinction they carry is the product itself, so it is stated
+ * once here rather than once per surface. It lived in both for a commit and had
+ * already disagreed with itself about the date format; the states are what
+ * cannot be allowed to drift, and the only way to guarantee that is one copy.
+ *
+ * In `src/components/` rather than beside either surface because the dependency
+ * must not point from production code into a route's `_lib`.
+ */
+
+import type { Credential } from "@/lib/practitioners";
+
+/** `earnedAt` is a date, not a timestamp — read and formatted as one. */
+export function earnedLabel(credential: Credential) {
+  if (!credential.earnedAt) return "Working towards";
+  const date = new Date(`${credential.earnedAt}T00:00:00Z`);
+  return `Earned ${date.toLocaleDateString("en-AU", {
+    month: "short",
+    year: "numeric",
+    timeZone: "UTC",
+  })}`;
+}
+
+/**
+ * The per-credential state, which is where all the nuance lives — the profile
+ * badge stays binary and everything else is said here. Three states, and they
+ * have to be distinguishable at a glance down a column:
+ *
+ *   verified  — a human at Bluehex read the evidence
+ *   earned    — claimed, not yet checked
+ *   towards   — no `earnedAt`; unverifiable, and outside the badge rollup
+ *
+ * Distinguished by shape rather than by colour alone, and each carries its own
+ * screen-reader text — the difference between the second and third is the
+ * entire product.
+ */
+export function CredentialMark({ credential }: { credential: Credential }) {
+  if (!credential.earnedAt) {
+    return (
+      <span className="mt-1 grid size-4 shrink-0 place-items-center rounded-full border border-dashed border-stroke">
+        <span className="sr-only">Working towards.</span>
+      </span>
+    );
+  }
+
+  if (!credential.verified) {
+    return (
+      <span className="mt-1 grid size-4 shrink-0 place-items-center rounded-full border border-stroke">
+        <span className="size-1 rounded-full bg-t-faint" />
+        <span className="sr-only">Earned, not yet checked by Bluehex.</span>
+      </span>
+    );
+  }
+
+  return (
+    <span className="mt-1 grid size-4 shrink-0 place-items-center rounded-full bg-ink text-t-invert">
+      <Tick className="size-2.5" />
+      <span className="sr-only">Verified by Bluehex.</span>
+    </span>
+  );
+}
+
+/* Exported because the roster's profile-level badge draws the same tick, and a
+   second copy of the path data is how the marks drifted the first time. On a
+   10-unit grid rather than the 24 the rest of `icons.tsx` uses, because it is
+   only ever drawn at 10px inside a 16px dot. */
+export function Tick({ className = "" }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 10 10" className={className} fill="none" aria-hidden="true">
+      <path
+        d="M2 5.2 4 7.2 8 3"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/practitioner-directory.tsx b/src/components/practitioner-directory.tsx
index adcc39c..708dba7 100644
--- a/src/components/practitioner-directory.tsx
+++ b/src/components/practitioner-directory.tsx
@@ -1,27 +1,57 @@
 "use client";
 
-import { useMemo, useRef, useState } from "react";
+import Link from "next/link";
+import { useId, useMemo, useRef, useState } from "react";
+import { CredentialMark, Tick, earnedLabel } from "@/components/credential-mark";
 import { Close, Search, Sparkle } from "@/components/icons";
 import { Badge, Card } from "@/components/ui";
-import type { Practitioner } from "@/lib/practitioners";
+import { countryName, hasVerifiedBadge, profilePath, type Practitioner } from "@/lib/practitioners";
 
 /**
- * The practitioner directory: a search box, a row of filters and the grid of
- * profiles underneath.
+ * The practitioner directory: a search box, filters, and a roster of profiles
+ * underneath.
+ *
+ * A roster of rows rather than a grid of cards, because the job someone does
+ * here is *comparing* practitioners, and a grid is a poor shape for that — each
+ * card is read on its own and nothing lines up between them. In rows the
+ * credentials sit in a column, so "who has actually been checked" is a
+ * vertical scan rather than eight separate readings.
  *
  * Everything matches client-side against the practitioner list, which ships
  * with the page — the directory is small enough that a round trip per keystroke
  * would only add latency. If the list outgrows that, this is the seam to move
  * behind a route handler; the props stay the same.
+ *
+ * Two things here are load-bearing rather than stylistic:
+ *
+ *   - **The badge sits with the credentials, never beside the name.** It
+ *     attests to evidence a human read — the credentials, and the name they
+ *     are attached to — and never to `bio`, `headline`, `focus` or `location`.
+ *     Placed beside the name it reads as a whole-profile endorsement, which is
+ *     a claim Bluehex has no method for. No schema rule can fix that reading,
+ *     so the placement is the mitigation. See the spec.
+ *   - **The badge is derived, not read.** There is no profile-level `verified`
+ *     column. `hasVerifiedBadge` computes it from the credential rows, and the
+ *     "Verified only" filter computes it too.
  */
 
-/** Every field a query is matched against, flattened once per practitioner. */
+/**
+ * Every field a query is matched against, flattened once per practitioner.
+ *
+ * The country goes in as its *name*, because that is the word a visitor types
+ * and the same word the Location chips are labelled with. Leaving it out let
+ * the search box and the filter disagree about one fact: "Australia" matched
+ * nobody while the chip built from the same `countryCode` selected them. The
+ * raw code is deliberately not indexed — two-letter queries would hit far more
+ * than they were aimed at.
+ */
 function searchIndex(person: Practitioner) {
   return [
     person.name,
-    person.role,
-    person.location,
-    person.bio,
+    person.headline ?? "",
+    person.location ?? "",
+    person.countryCode ? countryName(person.countryCode) : "",
+    person.bio ?? "",
     ...person.focus,
     ...person.credentials.flatMap((credential) => [credential.label, credential.source]),
   ]
@@ -43,6 +73,7 @@ function matchesQuery(person: Practitioner, query: string) {
 export function PractitionerDirectory({ practitioners }: { practitioners: Practitioner[] }) {
   const [query, setQuery] = useState("");
   const [verifiedOnly, setVerifiedOnly] = useState(false);
+  const [countryFilters, setCountryFilters] = useState<string[]>([]);
   const [focusFilters, setFocusFilters] = useState<string[]>([]);
   const searchBox = useRef<HTMLInputElement>(null);
 
@@ -53,28 +84,46 @@ export function PractitionerDirectory({ practitioners }: { practitioners: Practi
     [practitioners],
   );
 
+  /* Location filtering groups on `countryCode`, not on `location`. `location`
+     is free text at whatever granularity the practitioner chose — "Sydney"
+     next to "Bengaluru, Karnataka, India (remote)" — so it will never collapse
+     into a usable set of chips. The country code exists for exactly this. */
+  const countries = useMemo(
+    () =>
+      /* flatMap over `?? []` drops the nulls and narrows the type in one step. */
+      [...new Set(practitioners.flatMap((person) => person.countryCode ?? []))]
+        .map((code) => ({ code, name: countryName(code) }))
+        .sort((a, b) => a.name.localeCompare(b.name)),
+    [practitioners],
+  );
+
   const results = useMemo(
     () =>
       practitioners.filter((person) => {
-        if (verifiedOnly && !person.verified) return false;
+        if (verifiedOnly && !hasVerifiedBadge(person.credentials)) return false;
+        if (countryFilters.length) {
+          if (!person.countryCode || !countryFilters.includes(person.countryCode)) return false;
+        }
         if (focusFilters.length && !focusFilters.some((item) => person.focus.includes(item))) {
           return false;
         }
         return matchesQuery(person, query);
       }),
-    [practitioners, query, verifiedOnly, focusFilters],
+    [practitioners, query, verifiedOnly, countryFilters, focusFilters],
   );
 
-  const filtering = query.trim() !== "" || verifiedOnly || focusFilters.length > 0;
+  const filtering =
+    query.trim() !== "" || verifiedOnly || countryFilters.length > 0 || focusFilters.length > 0;
 
-  const toggleFocus = (area: string) =>
-    setFocusFilters((current) =>
-      current.includes(area) ? current.filter((item) => item !== area) : [...current, area],
+  const toggle = (setter: typeof setFocusFilters) => (value: string) =>
+    setter((current) =>
+      current.includes(value) ? current.filter((item) => item !== value) : [...current, value],
     );
 
   const clearAll = () => {
     setQuery("");
     setVerifiedOnly(false);
+    setCountryFilters([]);
     setFocusFilters([]);
   };
 
@@ -83,8 +132,9 @@ export function PractitionerDirectory({ practitioners }: { practitioners: Practi
       <h2 className="display-2 max-w-3xl">Find a Claude practitioner.</h2>
 
       <p className="mt-6 max-w-2xl text-t-muted">
-        Anyone in the community can publish a profile. <strong className="font-medium text-t-bright">Verified</strong>{" "}
-        means Bluehex has checked the credentials on it against the certificates that issued them.
+        Anyone in the community can publish a profile.{" "}
+        <strong className="font-medium text-t-bright">Verified</strong> means Bluehex has
+        checked that credential against the certificate that issued it.
       </p>
 
       {/* Search ------------------------------------------------------- */}
@@ -127,26 +177,50 @@ export function PractitionerDirectory({ practitioners }: { practitioners: Practi
       </div>
 
       {/* Filters ------------------------------------------------------ */}
-      <div className="mt-6 flex flex-wrap items-center gap-2">
-        <FilterChip pressed={verifiedOnly} onClick={() => setVerifiedOnly(!verifiedOnly)}>
-          Verified only
-        </FilterChip>
-
-        {focusAreas.map((area) => (
-          <FilterChip
-            key={area}
-            pressed={focusFilters.includes(area)}
-            onClick={() => toggleFocus(area)}
-          >
-            {area}
+      {/* Grouped rather than one flat row of chips: "Verified", a country and a
+          focus area are three different kinds of claim, and mixing them makes
+          the row read as one undifferentiated pile. Groups whose source data is
+          empty render nothing at all. */}
+      <div className="mt-8 flex flex-col gap-4">
+        <FilterGroup label="Verification">
+          <FilterChip pressed={verifiedOnly} onClick={() => setVerifiedOnly(!verifiedOnly)}>
+            Verified only
           </FilterChip>
-        ))}
+        </FilterGroup>
+
+        {countries.length > 0 ? (
+          <FilterGroup label="Location">
+            {countries.map((country) => (
+              <FilterChip
+                key={country.code}
+                pressed={countryFilters.includes(country.code)}
+                onClick={() => toggle(setCountryFilters)(country.code)}
+              >
+                {country.name}
+              </FilterChip>
+            ))}
+          </FilterGroup>
+        ) : null}
+
+        {focusAreas.length > 0 ? (
+          <FilterGroup label="Focus">
+            {focusAreas.map((area) => (
+              <FilterChip
+                key={area}
+                pressed={focusFilters.includes(area)}
+                onClick={() => toggle(setFocusFilters)(area)}
+              >
+                {area}
+              </FilterChip>
+            ))}
+          </FilterGroup>
+        ) : null}
 
         {filtering ? (
           <button
             type="button"
             onClick={clearAll}
-            className="ml-1 text-sm text-t-muted underline-offset-4 transition-colors hover:text-t-bright hover:underline"
+            className="w-fit text-sm text-t-muted underline-offset-4 transition-colors hover:text-t-bright hover:underline"
           >
             Clear all
           </button>
@@ -168,32 +242,69 @@ export function PractitionerDirectory({ practitioners }: { practitioners: Practi
           </p>
         </Card>
       ) : (
-        <ul className="mt-6 grid auto-rows-fr gap-5 sm:grid-cols-2 lg:grid-cols-3">
-          {results.map((person) => (
-            <li key={person.name}>
-              <PractitionerCard person={person} />
-            </li>
-          ))}
+        <div className="mt-6 overflow-hidden rounded-card bg-surface">
+          {results.length > 0 ? (
+            <>
+              {/* Column headings. Suppressed below lg, where a row stacks and
+                  headings would label nothing. */}
+              <div
+                aria-hidden="true"
+                className="hidden border-b border-stroke px-6 py-3 text-xs font-medium tracking-wide text-t-faint uppercase lg:grid lg:grid-cols-[minmax(0,1.1fr)_minmax(0,1.4fr)_minmax(0,0.8fr)_auto] lg:gap-8 lg:px-8"
+              >
+                <span>Practitioner</span>
+                <span>Credentials</span>
+                <span>Focus</span>
+                <span />
+              </div>
+
+              <ul>
+                {results.map((person) => (
+                  <li
+                    key={person.id}
+                    className="grid gap-5 border-b border-stroke px-6 py-6 last:border-b-0 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,1.4fr)_minmax(0,0.8fr)_auto] lg:items-start lg:gap-8 lg:px-8"
+                  >
+                    <PractitionerRow person={person} />
+                  </li>
+                ))}
+              </ul>
+            </>
+          ) : null}
 
           {/* The invitation only belongs on an unfiltered view — under an active
               search it would read as a result. */}
           {!filtering ? (
-            <li>
-              <div className="flex h-full min-h-64 flex-col items-start justify-end gap-3 rounded-card border border-dashed border-stroke p-8 md:p-10">
-                <Sparkle className="size-6 text-t-faint" />
-                <p className="text-xl font-medium">Your profile here</p>
-                <p className="text-sm leading-relaxed text-t-muted">
-                  Certified, or working towards it. Both belong in the directory.
-                </p>
-              </div>
-            </li>
+            <div className="flex flex-col items-start gap-3 border-t border-dashed border-stroke p-8 first:border-t-0 md:p-10">
+              <Sparkle className="size-6 text-t-faint" />
+              <p className="text-xl font-medium">Your profile here</p>
+              <p className="max-w-md text-sm leading-relaxed text-t-muted">
+                Certified, or working towards it. Both belong in the directory.
+              </p>
+            </div>
           ) : null}
-        </ul>
+        </div>
       )}
     </section>
   );
 }
 
+function FilterGroup({ label, children }: { label: string; children: React.ReactNode }) {
+  const labelId = useId();
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <span
+        id={labelId}
+        className="w-20 shrink-0 text-xs font-medium tracking-wide text-t-faint uppercase"
+      >
+        {label}
+      </span>
+      <div role="group" aria-labelledby={labelId} className="flex flex-wrap items-center gap-2">
+        {children}
+      </div>
+    </div>
+  );
+}
+
 function FilterChip({
   pressed,
   onClick,
@@ -219,46 +330,97 @@ function FilterChip({
   );
 }
 
-function PractitionerCard({ person }: { person: Practitioner }) {
+function PractitionerRow({ person }: { person: Practitioner }) {
   return (
-    <Card className="flex h-full flex-col gap-5">
-      {/* min-w-0 so a long name or role wraps instead of shoving the badge off
-          the card — profile text is user-supplied and unbounded. */}
-      <div className="flex items-start justify-between gap-4">
-        <div className="min-w-0">
-          <h3 className="text-xl font-medium">{person.name}</h3>
-          <p className="mt-1 text-sm text-t-muted">{person.role}</p>
-          <p className="text-sm text-t-faint">{person.location}</p>
-        </div>
-        {/* The badge is only ever about the Bluehex check. Where someone is up
-            to with certification shows per credential in the list below. */}
-        <Badge tone={person.verified ? "strong" : "quiet"} className="shrink-0">
-          {person.verified ? "Verified" : "Self-listed"}
-        </Badge>
+    <>
+      {/* Practitioner. No badge in this column, deliberately — see the note at
+          the top of the file. `countryCode` drives the location filter and is
+          what a flag would be drawn from; the flag asset itself is its own
+          ticket, so nothing renders it here yet. */}
+      <div className="min-w-0">
+        <h3 className="font-medium break-words">{person.name}</h3>
+        {person.headline ? (
+          <p className="mt-0.5 text-sm break-words text-t-muted">{person.headline}</p>
+        ) : null}
+        {person.location ? (
+          <p className="mt-1.5 text-xs break-words text-t-faint">{person.location}</p>
+        ) : null}
       </div>
 
-      <p className="text-sm leading-relaxed text-t-muted">{person.bio}</p>
+      {/* Credentials, and the badge that belongs to them. */}
+      <div className="min-w-0">
+        {hasVerifiedBadge(person.credentials) ? (
+          <p className="mb-2.5 inline-flex items-center gap-1.5 rounded-full bg-ink px-2.5 py-1 text-[11px] font-medium text-t-invert">
+            <Tick className="size-2.5" />
+            Verified by Bluehex
+          </p>
+        ) : null}
 
-      <ul className="flex flex-col gap-2">
-        {person.credentials.map((credential) => (
-          <li key={credential.label} className="flex items-start gap-2.5 text-sm text-t-medium">
-            <Sparkle className="mt-1 size-3.5 shrink-0 text-t-faint" />
-            <span>
-              {credential.label}
-              <span className="block text-xs text-t-faint">
-                {credential.earned ?? "In progress"}
-                {credential.source === credential.label ? "" : ` · ${credential.source}`}
-              </span>
-            </span>
-          </li>
-        ))}
-      </ul>
+        {person.credentials.length === 0 ? (
+          <p className="text-sm text-t-faint">No credentials listed.</p>
+        ) : (
+          <ul className="flex flex-col gap-2">
+            {person.credentials.map((credential) => (
+              <li
+                key={`${credential.source}:${credential.label}`}
+                className="flex items-start gap-2 text-sm"
+              >
+                <CredentialMark credential={credential} />
+                <span className="min-w-0">
+                  <span
+                    className={`break-words ${
+                      credential.earnedAt ? "text-t-medium" : "text-t-faint italic"
+                    }`}
+                  >
+                    {credential.label}
+                  </span>
+                  <span className="ml-2 text-xs whitespace-nowrap text-t-faint">
+                    {earnedLabel(credential)}
+                  </span>
+                  {credential.evidenceUrl ? (
+                    <a
+                      href={credential.evidenceUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="ml-2 text-xs text-t-muted underline decoration-stroke underline-offset-4 transition-colors hover:text-t-bright hover:decoration-current"
+                    >
+                      Certificate
+                      <span className="sr-only"> for {credential.label}, opens in a new tab</span>
+                    </a>
+                  ) : null}
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
 
-      <div className="mt-auto flex flex-wrap gap-2 pt-2">
+      {/* Focus. Self-described and never vetted — which is how every directory
+          works, and the reason the badge's placement above is load-bearing. */}
+      <div className="flex flex-wrap gap-1.5">
         {person.focus.map((item) => (
           <Badge key={item}>{item}</Badge>
         ))}
       </div>
-    </Card>
+
+      {/* One call to action per surface: the directory's job is to get you to a
+          profile, the profile's job is to get you to enquire. Enquiring from the
+          row would ask someone to commit before they have read anything, and it
+          is why the profile page ends in "Enquire about {first name}" instead.
+
+          A `Link` rather than an `<a>`, so the navigation is soft and the route
+          is prefetched. Worth knowing if an overlay is ever attempted here
+          again: route interception applies to soft navigation *only*, so an
+          anchor silently disables it and full-page-loads every profile, and the
+          symptom looks exactly like a misconfigured interceptor. One was built
+          and cut for that reason among others. */}
+      <Link
+        href={profilePath(person)}
+        className="inline-flex h-9 w-fit shrink-0 items-center rounded-full border border-stroke-strong px-4 text-sm font-medium transition-colors hover:bg-ink hover:text-t-invert"
+      >
+        View profile
+        <span className="sr-only"> for {person.name}</span>
+      </Link>
+    </>
   );
 }
diff --git a/src/lib/practitioners.ts b/src/lib/practitioners.ts
index 9371e06..8f4c7b6 100644
--- a/src/lib/practitioners.ts
+++ b/src/lib/practitioners.ts
@@ -9,7 +9,22 @@
  *
  * REAL PEOPLE ONLY. Nothing here is placeholder copy — a profile goes in when
  * the person has agreed to be published and the credentials have been checked.
- * The home page renders open slots for the rest rather than inventing entries.
+ * The home page renders an invitation for the empty directory rather than
+ * inventing entries.
+ *
+ * These types are the *public* view of a profile, and they deliberately mirror
+ * the columns `anon` is granted in `docs/spec/profile-and-credentials.md` —
+ * nothing more. The directory is an anonymous read, so a field absent from that
+ * grant list is one the page can never render, and putting it here would only
+ * invite a component to reach for it. Notably absent: `status`, `user_id`, and
+ * the raw `evidence_url` (only the practitioner's published one survives).
+ *
+ * Fields are camelCase here and snake_case in Postgres; the mapping happens
+ * where the query does, which is #53.
+ *
+ * CONTEXT.md notes that naming this type `Practitioner` conflates the human
+ * with the record — strictly it is a Profile. Left alone for now because the
+ * rename reaches the component, its file and its props; it belongs with #53.
  */
 
 export type CredentialSource = "Claude Certification" | "Anthropic Academy";
@@ -17,26 +32,123 @@ export type CredentialSource = "Claude Certification" | "Anthropic Academy";
 export type Credential = {
   source: CredentialSource;
   label: string;
-  /** Left off until the credential is earned — drives the "in progress" state. */
-  earned?: string;
+  /**
+   * The day it was earned, `YYYY-MM-DD`. Null means working towards — and a
+   * working-towards credential is inherently unverifiable, so it sits outside
+   * the badge rollup entirely rather than counting against it.
+   */
+  earnedAt: string | null;
+  /**
+   * Bluehex checked the evidence behind *this credential*. Verification is per
+   * credential and never per profile: Bluehex checks certificates one at a
+   * time, and "three credentials, two checked" is a real state that a
+   * profile-level boolean cannot hold. Only Bluehex sets this.
+   */
+  verified: boolean;
+  /**
+   * The certificate URL, but only when the practitioner chose to publish it —
+   * this is the generated `evidence_url_public` column, which is null unless
+   * `evidence_public` is true. A verified credential with no link here is
+   * normal, not missing data: publishing a Skilljar page exposes the holder's
+   * full legal name, so it is their call.
+   */
+  evidenceUrl: string | null;
 };
 
 export type Practitioner = {
+  id: string;
   name: string;
-  role: string;
-  location: string;
-  /** Holds a Claude Certification. Comes from Anthropic, claimed by the person. */
-  certified: boolean;
+  /** What they do, in a line. Called `headline` in the schema, not `role`. */
+  headline: string | null;
+  /** Free text, at whatever granularity the practitioner chose. Not filterable. */
+  location: string | null;
   /**
-   * Bluehex has checked the credentials on this profile. Independent of
-   * `certified`: anyone can publish a profile before it has been checked, and a
-   * practitioner still working towards certification can have the Academy
-   * certificates they do hold verified. Only Bluehex sets this.
+   * ISO 3166-1 alpha-2. Separate from `location` because a machine cannot
+   * reliably derive one from the other — this is what the location filter
+   * groups on, and what a flag would be drawn from.
    */
-  verified: boolean;
-  bio: string;
-  credentials: Credential[];
+  countryCode: string | null;
+  bio: string | null;
   focus: string[];
+  credentials: Credential[];
 };
 
+/**
+ * Whether the profile shows the Verified badge.
+ *
+ * Derived, never stored — consistent with `certified`, which is not stored
+ * either and is simply "has an earned Claude Certification credential".
+ *
+ * The rule: at least one earned credential, and every earned credential
+ * verified. In-progress credentials are excluded rather than counted as
+ * unverified, because counting them would permanently deny the badge to anyone
+ * working towards a certification — a group this directory exists to include.
+ *
+ * Cheap because the directory fetches every profile and filters in the browser.
+ * Materialise it into a column when that stops being true.
+ */
+export function hasVerifiedBadge(credentials: Credential[]) {
+  const earned = credentials.filter((credential) => credential.earnedAt);
+  return earned.length > 0 && earned.every((credential) => credential.verified);
+}
+
+/**
+ * Where a profile lives.
+ *
+ * `mara-ellison-9f3c1a`: the short id is what resolves and the slug is
+ * decoration, so a rename changes the URL without breaking the old one — the
+ * route reads only the trailing id and serves a canonical redirect when the
+ * slug no longer matches. Readable enough to paste into a job application,
+ * which is the reason a profile has a URL at all.
+ *
+ * The id is the first six characters of the row's uuid. It must never be
+ * derived from the name: hashing the name would move the id whenever the name
+ * changed, which is the exact failure this scheme exists to prevent.
+ *
+ * Nothing yet guarantees those six characters are unique, and `findByHandle`
+ * returns the first row that matches them \u2014 so a collision serves the wrong
+ * profile rather than a 404. The enforcement has to be in the schema, and is
+ * open on the review of #63.
+ *
+ * The slug is dropped rather than left empty when a name has no ASCII residue
+ * \u2014 every character of "\u674e\u96f7" is stripped by the transliteration \u2014 because
+ * `/p/-9f3c1a` leads with a bare hyphen where the readable half is meant to be.
+ * `/p/9f3c1a` resolves identically and does not look broken.
+ */
+export function profilePath(person: Pick<Practitioner, "id" | "name">) {
+  const slug = person.name
+    .toLowerCase()
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/gu, "")
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-|-$/g, "");
+
+  return `/p/${slug ? `${slug}-` : ""}${person.id.slice(0, 6)}`;
+}
+
+/* `Intl` already ships every country name, so a lookup table here would be a
+   few kilobytes of data to maintain for no gain. Built once, not per render. */
+const regionNames = new Intl.DisplayNames(["en"], { type: "region" });
+
+/**
+ * "AU" → "Australia", and "au" → "Australia" too.
+ *
+ * The uppercasing is not tidiness. `Intl.DisplayNames` is case-sensitive on the
+ * region code and fails *silently* rather than throwing: `of("au")` returns
+ * `"au"` straight back, so the `catch` never fires and a lowercase code renders
+ * as a filter chip labelled `au`. Only a structurally invalid code such as
+ * `"usa"` throws, which is the narrow case the `catch` actually covers.
+ *
+ * A `check (country_code ~ '^[A-Z]{2}$')` on the column when #53 writes the
+ * table is worth pairing with this, so normalising here is not the only thing
+ * between the database and a chip labelled `au`.
+ */
+export function countryName(code: string) {
+  try {
+    return regionNames.of(code.toUpperCase()) ?? code;
+  } catch {
+    return code;
+  }
+}
+
 export const practitioners: Practitioner[] = [];
diff --git a/src/lib/site.ts b/src/lib/site.ts
index 8434e83..1205019 100644
--- a/src/lib/site.ts
+++ b/src/lib/site.ts
@@ -7,6 +7,10 @@
 export const site = {
   name: "Bluehex",
   caption: "A Code.Sydney company",
+  /* Canonical origin, for the places that need an absolute URL rather than a
+     path — the share button on a profile today, metadata and sitemaps later.
+     No trailing slash; every path this is joined with starts with one. */
+  origin: "https://bluehex.au",
   tagline:
     "Claude practitioners from the Code.Sydney community. Find one, hire one.",
   /* Contact details carried over from the Code.Sydney site — Code.Sydney Pty