Rebuild the site to the Claude Design drafts

Carries the 11 page drafts plus the shared SiteNav and SiteFooter onto the
project's own design system: tier-2 tokens, the published type roles, logical
properties throughout, and both locales.

Surfaces
- The page stands on #0B0B0A with #1D1D1B bands lifted off it, as the drafts
  do; the body previously painted the band colour, so every band was a step
  too light.
- A card is drawn one step off whatever it stands on (#1D1D1B on the ground,
  #141413 inside a band). Components paint --surface-card and a band re-points
  it for its subtree, so a card can never come out the same colour as its band.

Shell
- Nav: translucent ground with a blur, chevrons on group triggers, an accent
  rule under the current section, the drafts' compact dropdown card, and an
  EN | AR toggle in place of the globe menu.
- Footer: the drafts' four-column grid, one-line brand text, Facebook as a
  bordered button, the EU lockup, the implemented-by row and the funding
  disclaimer.

Pages
- Home: hero with counting figures, launch band, three areas of change,
  newsroom, FAQ accordion and the consortium band.
- The nine interior pages rebuilt and then audited section by section against
  their drafts.
- Applications: the three-step application form now posts real submissions to
  the Strapi `application` type, validated server-side and working without
  JavaScript.

Motion
- Every animation in the drafts, as classes in _page-kit/motion.css: staggered
  entrances, scroll-driven reveals, the drifting washes (each page carries its
  own geometry), the sheen, the counting figures and the accordion. The
  drafts' coloured hover glow is deliberately not shipped.

CMS
- New `faq` collection type behind the home page's accordion.
- `role` added to the consortium member component so an editor can supply the
  chip and the deliverable separately.

Content
- No invented figure, date, name or commitment ships: the five-working-day
  reply, the placeholder email and Facebook handle, the sample news, events,
  publications and FAQs, the invented application rules and the TBD counters
  are all withheld pending real content. Figures that survived (3 consortium
  partners, 4 areas of work, 16 human security sub-projects, Dec 2025 - Dec
  2027) are verified against docs/ and the bundled draft copy.

Verified: pnpm typecheck (web + CMS) and pnpm --filter web build pass; all 20
page/locale URLs render 200 through the built SSR handler, including with the
CMS unreachable; no raw hex or physical-direction utility in components or
routes.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

apps/web/app/routes/_events-opportunities/forms.ts

@@ -54,6 +54,10 @@ const LIMITS = {
   email: 254,
   phone: 40,
   message: 4000,
+  /** Free text - "Tripoli", "Sabha and the south". Not a taxonomy. */
+  region: 160,
+  /** Free text on purpose: "4", "under a year", "since 2016" are all answers. */
+  years: 40,
 } as const;
 
 function field(form: FormData, name: string, limit: number): string {
@@ -150,3 +154,103 @@ export function validateApplication(
 
   return { values, errors, valid: Object.keys(errors).length === 0 };
 }
+
+/* ---------------------------------------------------------------------------
+   GET INVOLVED - the application form on the section's own page
+   ----------------------------------------------------------------------------
+   The redesign draft puts a single application form under the three pathway
+   cards, with five fields and a proposal summary. It is the same contract as
+   the per-call form above, plus the two answers the draft asks for (region of
+   operation, years of operating history) and the pathway being applied under.
+
+   WHAT IS REQUIRED, AND WHY EXACTLY THOSE THREE
+   `application.applicantName` and `application.email` are `required: true` in
+   the CMS, so a submission without them is a 400 that costs the applicant
+   everything they typed - they are validated here first. The summary is
+   required because an application with no case in it cannot be reviewed.
+
+   Everything else is optional BY DESIGN, not by omission: the page invites
+   "a civil society organisation or an individual", so an organisation name, a
+   region and a number of years of operating history cannot be demanded
+   without shutting the individuals out of the form that invites them.
+
+   `yearsOperating` is a STRING, deliberately. "4", "under a year" and "since
+   2016" are all true answers to the draft's question, and a number input would
+   reject two of them; it reaches the CMS inside `answers`, where a reviewer
+   reads it, and nothing computes on it.
+   ------------------------------------------------------------------------ */
+
+/**
+ * The three ways in, as the draft names them. The value is carried in the
+ * query string (`?route=`) so a pathway card can open the form already set to
+ * its own route, and it is submitted as a real `<select>` so the reader can
+ * correct it - and so the choice still travels with scripting off.
+ */
+export type ApplicationRoute = "calls" | "network" | "sessions";
+
+export const APPLICATION_ROUTES = [
+  "calls",
+  "network",
+  "sessions",
+] as const satisfies readonly ApplicationRoute[];
+
+export function isApplicationRoute(value: unknown): value is ApplicationRoute {
+  return (
+    typeof value === "string" &&
+    (APPLICATION_ROUTES as readonly string[]).includes(value)
+  );
+}
+
+export interface PathwayApplicationValues {
+  readonly route: ApplicationRoute;
+  readonly organisation: string;
+  readonly fullName: string;
+  readonly email: string;
+  readonly region: string;
+  readonly yearsOperating: string;
+  readonly summary: string;
+}
+
+/** The field name of the pathway select, shared by the form and the parser. */
+export const ROUTE_FIELD = "route";
+
+export function validatePathwayApplication(
+  form: FormData,
+  fallbackRoute: ApplicationRoute = "calls",
+): Validated<PathwayApplicationValues> {
+  const submittedRoute = form.get(ROUTE_FIELD);
+
+  const values: PathwayApplicationValues = {
+    // An unknown value is not an error the reader can act on - it cannot be
+    // produced by the select - so it falls back rather than blocking a submit.
+    route: isApplicationRoute(submittedRoute) ? submittedRoute : fallbackRoute,
+    organisation: field(form, "organisation", LIMITS.organisation),
+    fullName: field(form, "fullName", LIMITS.name),
+    email: field(form, "email", LIMITS.email),
+    region: field(form, "region", LIMITS.region),
+    yearsOperating: field(form, "yearsOperating", LIMITS.years),
+    summary: field(form, "summary", LIMITS.message),
+  };
+
+  const errors: Record<string, FieldErrorCode> = {};
+
+  if (!values.fullName) errors.fullName = "required";
+  if (!values.email) errors.email = "required";
+  else if (!EMAIL.test(values.email)) errors.email = "email";
+  if (!values.summary) errors.summary = "required";
+
+  return { values, errors, valid: Object.keys(errors).length === 0 };
+}
+
+/** The form's fields in reading order - the error summary lists them in it. */
+export const PATHWAY_APPLICATION_FIELDS = [
+  "organisation",
+  "fullName",
+  "email",
+  "region",
+  "yearsOperating",
+  "summary",
+] as const;
+
+export type PathwayApplicationField =
+  (typeof PATHWAY_APPLICATION_FIELDS)[number];