feat: complete agency site build (Phases 1-7)

Full Next.js 16 + Payload CMS 3.x agency site with:
- Homepage: Hero, TrustBar, Services, Configurator wizard, Process,
  Selected Works, Philosophy, CTA Banner
- Sub-pages: /services (3 pillars + AI Layer), /work/[slug] (case
  studies), /about (philosophy + story)
- Configurator: 3-step wizard with AI brief generation API
- i18n: Full EN/FR bilingual with next-intl
- Design system: Cormorant Garamond + Inter, celestial blue palette,
  glassmorphism nav, Framer Motion animations
- Payload CMS collections: Projects, Services, Submissions, Media

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

src/components/sections/services/ServicesHero.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { staggerContainer, revealVariants, viewportOnce } from '@/lib/animations';
+
+// ─── Animation variants ────────────────────────────────────────────────────────
+
+const ease = [0.16, 1, 0.3, 1] as const;
+
+const eyebrowVariants = {
+  hidden: { opacity: 0, y: 16 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.5, ease },
+  },
+};
+
+const headlineVariants = {
+  hidden: { opacity: 0, y: 24 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.65, ease, delay: 0.1 },
+  },
+};
+
+const subtitleVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.6, ease, delay: 0.2 },
+  },
+};
+
+const ruleVariants = {
+  hidden: { scaleX: 0 },
+  visible: {
+    scaleX: 1,
+    transition: { duration: 0.7, ease, delay: 0.35 },
+  },
+};
+
+// ─── Component ─────────────────────────────────────────────────────────────────
+
+export default function ServicesHero() {
+  return (
+    <section
+      className="bg-surface pt-32 pb-20"
+      aria-label="Services hero"
+    >
+      <div className="container mx-auto px-6">
+        <motion.div
+          variants={staggerContainer}
+          initial="hidden"
+          animate="visible"
+          className="flex flex-col items-center text-center"
+        >
+          {/* Eyebrow */}
+          <motion.span
+            variants={eyebrowVariants}
+            className="label-md text-primary mb-5"
+          >
+            Our Capabilities
+          </motion.span>
+
+          {/* Headline */}
+          <motion.h1
+            variants={headlineVariants}
+            className="font-serif font-semibold tracking-headline text-on-surface text-5xl md:text-6xl lg:text-7xl max-w-4xl leading-[1.05]"
+          >
+            Three Pillars of{' '}
+            <span className="text-gradient">Digital Excellence</span>
+          </motion.h1>
+
+          {/* Subtitle */}
+          <motion.p
+            variants={subtitleVariants}
+            className="mt-6 text-lg text-outline leading-relaxed max-w-2xl"
+          >
+            We design, build, and operate complete digital ecosystems — from the
+            first pixel to the server rack. Every discipline under one roof,
+            every deliverable built to a standard most agencies never attempt.
+          </motion.p>
+
+          {/* Decorative rule */}
+          <motion.div
+            variants={ruleVariants}
+            className="mt-10 origin-left w-16 h-px bg-gradient-cta"
+            aria-hidden="true"
+          />
+        </motion.div>
+      </div>
+    </section>
+  );
+}