feat(content): deepen Bain differentiation across product, solution and service pages

- Replace decorative numbering and side-stripe borders with structured copy
- Add scenario positioning, capability metrics and verifiable dimensions
- Refine service timelines, deliverables and case-study narratives
- Update content constants to support CMS seeding

src/components/sections/service-card.tsx

@@ -8,7 +8,7 @@ import { ArrowRight } from 'lucide-react';
 export type ServiceColor = 'brand' | 'blue' | 'teal' | 'amber' | 'purple';
 
 interface ServiceCardProps {
-  number: string;
+  number?: string;
   title: string;
   description: string;
   color?: ServiceColor;
@@ -17,62 +17,26 @@ interface ServiceCardProps {
   delay?: number;
 }
 
-const colorMap: Record<ServiceColor, string> = {
-  brand: 'var(--color-brand)',
-  blue: 'var(--color-accent-blue)',
-  teal: 'var(--color-accent-teal)',
-  amber: 'var(--color-accent-amber)',
-  purple: 'var(--color-accent-purple)',
-};
-
 export function ServiceCard({
-  number,
+  number: _number,
   title,
   description,
-  color = 'brand',
+  color: _color = 'brand',
   href,
   className = '',
   delay = 0,
 }: ServiceCardProps) {
   const shouldReduceMotion = useReducedMotion();
-  const accentColor = colorMap[color];
 
   return (
     <motion.div
-      className={`group relative bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] rounded-[var(--radius-lg)] overflow-hidden transition-all duration-[var(--transition-normal)] ease-[var(--ease-ink)] hover:-translate-y-1 hover:shadow-[var(--shadow-lg)] hover:border-[var(--color-brand)]/30 ${className}`}
+      className={`group relative bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] rounded-[var(--radius-lg)] overflow-hidden transition-all duration-[var(--transition-normal)] ease-[var(--ease-ink)] hover:-translate-y-1 hover:shadow-[var(--shadow-lg)] hover:border-[var(--color-brand)]/20 ${className}`}
       initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
       whileInView={{ opacity: 1, y: 0 }}
       viewport={{ once: true, margin: '-40px' }}
       transition={{ duration: 0.6, delay, ease: [0.22, 1, 0.36, 1] }}
     >
-      {/* Left accent bar — grows from bottom on entry */}
-      <motion.div
-        className="absolute left-0 top-0 bottom-0 w-[3px] origin-bottom transition-all duration-[var(--transition-normal)] group-hover:w-1.5"
-        style={{ backgroundColor: accentColor }}
-        initial={shouldReduceMotion ? {} : { scaleY: 0 }}
-        whileInView={{ scaleY: 1 }}
-        viewport={{ once: true, margin: '-40px' }}
-        transition={{ duration: 0.4, delay: delay - 0.1 > 0 ? delay - 0.1 : 0, ease: [0.22, 1, 0.36, 1] }}
-      />
-
-      <div className="p-6 md:p-8 pl-6 md:pl-8">
-        {/* Large background number */}
-        <div
-          className="absolute top-4 right-6 text-[5rem] font-black leading-none select-none pointer-events-none transition-opacity duration-[var(--transition-normal)] group-hover:opacity-10"
-          style={{ color: 'var(--color-border-light)', opacity: 0.06 }}
-          aria-hidden="true"
-        >
-          {number}
-        </div>
-
-        {/* Number label */}
-        <div
-          className="text-xs font-bold tracking-[0.18em] uppercase mb-4"
-          style={{ color: accentColor }}
-        >
-          Service {number}
-        </div>
-
+      <div className="p-6 md:p-8">
         {/* Title */}
         <h3 className="text-xl md:text-2xl font-bold mb-3 leading-tight text-[var(--color-text-primary)]">
           {title}