From 27441afa196fadee589f5fa7ed0dd7d7fa2f4d6a Mon Sep 17 00:00:00 2001
From: harshita375 <harshita@procedure.tech>
Date: Tue, 20 Jan 2026 10:27:06 +0530
Subject: [PATCH 1/6] feat: add FAQ about tasks suited for AI agents

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 content/services/ai-agents.mdx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/content/services/ai-agents.mdx b/content/services/ai-agents.mdx
index 5510768..0aed5ad 100644
--- a/content/services/ai-agents.mdx
+++ b/content/services/ai-agents.mdx
@@ -38,7 +38,7 @@ relatedExpertise:
   - backend-development
   - ai-security
 faqs:
-  - question: "What's the difference between an AI agent and a chatbot?"
+  - question: "What is the difference between an AI agent and a chatbot?"
     answer: "Chatbots respond to queries. Agents take action. An AI agent can research information, update databases, send emails, schedule meetings, and execute multi-step workflows autonomously—not just suggest what you should do."
   - question: "How do you ensure AI agents are safe in production?"
     answer: "We implement multiple safety layers: action constraints that limit what agents can do, sandboxed execution environments, approval workflows for sensitive actions, comprehensive logging, and rollback capabilities when things go wrong."
@@ -46,6 +46,8 @@ faqs:
     answer: "Yes. Our engineers specialize in building integration layers that connect modern AI capabilities with existing enterprise systems—even those without modern APIs."
   - question: "How long until we have a working agent?"
     answer: "Most clients see a working prototype within the first week. Production deployment typically takes 2-4 weeks, depending on the complexity of your workflows and integration requirements."
+  - question: "What kind of tasks are best suited for AI agents?"
+    answer: "AI agents excel at tasks that are repetitive but require judgment—research and data gathering, document processing, customer inquiry routing, lead qualification, and multi-system workflows. If a task involves multiple steps, uses several tools, and currently requires human decision-making at each stage, it's a strong candidate for an AI agent."
 cta:
   title: "Ready to Deploy AI Agents?"
   description: "Talk to our team about automating your complex workflows with AI agents. We'll show you what's possible—and what's production-ready today."

From d83c40abde4eedf9e7d26c43ecff12167d305466 Mon Sep 17 00:00:00 2001
From: harshita375 <harshita@procedure.tech>
Date: Wed, 21 Jan 2026 10:45:25 +0530
Subject: [PATCH 2/6] refactor: improve AI Engineering services page content

- Change headline from duplicate "AI Engineering Services" to "Enterprise AI Engineering"
- Reword AI Application Development capability to avoid overlap with use cases
- Add useCasesSubtitle field support for customizable section subtitles
- Rewrite use case descriptions with specific, value-driven copy
- Update FAQ answers with varied openings and technical depth (RAG, fine-tuning, guardrails)
- Rewrite markdown CTA section to address prototype-to-production gap

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/services/[slug]/ExpertisePageClient.tsx |  2 +-
 content/services/ai-engineering.mdx         | 33 ++++++++++-----------
 lib/content-types.ts                        |  1 +
 lib/content.ts                              |  2 ++
 4 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/app/services/[slug]/ExpertisePageClient.tsx b/app/services/[slug]/ExpertisePageClient.tsx
index 23ac2f2..5dff5d8 100644
--- a/app/services/[slug]/ExpertisePageClient.tsx
+++ b/app/services/[slug]/ExpertisePageClient.tsx
@@ -228,7 +228,7 @@ export default function ExpertisePageClient({
       {pageData.useCases && (
         <UseCasesGrid
           title={expertise.slug === "frontend-development" ? "Frontend Development Use Cases" : expertise.slug === "backend-development" ? "Backend Development Use Cases" : "Use Cases"}
-          subtitle={expertise.slug === "frontend-development" ? "Our frontend development services support" : expertise.slug === "backend-development" ? "Our backend development services support" : "Our services support"}
+          subtitle={pageData.useCasesSubtitle || (expertise.slug === "frontend-development" ? "Our frontend development services support" : expertise.slug === "backend-development" ? "Our backend development services support" : "Real-world applications we help teams build and scale")}
           useCases={pageData.useCases.map((uc) => ({
             ...uc,
             icon: Icons[uc.icon as keyof typeof Icons] || Icons.code,
diff --git a/content/services/ai-engineering.mdx b/content/services/ai-engineering.mdx
index bae6c9b..8eb4d1b 100644
--- a/content/services/ai-engineering.mdx
+++ b/content/services/ai-engineering.mdx
@@ -1,6 +1,6 @@
 ---
 title: "AI Engineering Services"
-headline: "AI Engineering Services"
+headline: "Enterprise AI Engineering"
 headlineAccent: "Production-Ready AI Systems"
 tagline: "Build, deploy, and scale reliable AI systems."
 description: |
@@ -19,7 +19,7 @@ capabilities:
     description: "Implement CI/CD for models, automated evaluation, versioning, monitoring, and rollback strategies."
     icon: "code"
   - title: "AI Application Development"
-    description: "Embed AI capabilities into web, mobile, and backend systems — search, recommendations, copilots, automation, and analytics."
+    description: "Embed AI into web, mobile, and backend systems — from semantic search to personalized recommendations and real-time decision engines."
     icon: "smartphone"
   - title: "AI System Monitoring & Optimization"
     description: "Track model accuracy, latency, cost, drift, and reliability in production environments."
@@ -62,25 +62,26 @@ process:
   - number: 4
     title: "Monitoring & Continuous Improvement"
     description: "Deploying with monitoring, evaluation, and optimization systems in place."
+useCasesSubtitle: "Real-world applications we help teams build and scale"
 useCases:
   - icon: "search"
     title: "Intelligent Search & Recommendations"
-    description: "AI-powered search and recommendation systems"
+    description: "Hybrid search combining keyword and vector retrieval, with ranking models that learn from user behavior"
   - icon: "brain"
     title: "AI Copilots & Productivity Tools"
-    description: "Internal AI assistants and workflow automation"
+    description: "Domain-specific assistants that accelerate workflows, answer questions from internal knowledge, and automate repetitive tasks"
   - icon: "chart"
     title: "Predictive Analytics & Forecasting"
-    description: "Data-driven predictions and business intelligence"
+    description: "Demand forecasting, churn prediction, and resource optimization models that inform business decisions"
   - icon: "document"
     title: "Document Processing & Extraction"
-    description: "Information extraction and document understanding"
+    description: "Automated extraction, classification, and summarization for contracts, invoices, and unstructured data"
   - icon: "shield"
     title: "Fraud Detection & Anomaly Detection"
-    description: "Real-time anomaly detection and risk assessment"
+    description: "Scoring models that identify suspicious patterns in transactions, logins, and user behavior"
   - icon: "users"
     title: "Conversational AI & Automation"
-    description: "Chatbots and conversational workflow automation"
+    description: "Customer-facing chatbots and voice agents with context retention and multi-turn dialogue capabilities"
 whyChoose:
   reasons:
     - "Strong focus on production AI, not prototypes"
@@ -131,13 +132,13 @@ faqs:
   - question: "What's the difference between AI engineering and AI consulting?"
     answer: "AI engineering focuses on building and operating AI systems in production, while consulting focuses on strategy and recommendations. We are engineering-focused."
   - question: "Do you work with existing AI systems?"
-    answer: "Yes. We help modernize, optimize, secure, and scale existing AI and ML systems, including legacy deployments."
+    answer: "Absolutely. We specialize in modernizing legacy ML infrastructure, optimizing model performance, and bringing security and observability to systems already in production."
   - question: "Can you support LLM-based applications?"
-    answer: "Yes. We build, integrate, deploy, and operate LLM-powered systems, including copilots, search, and automation tools."
+    answer: "LLM integration is a core strength. We build retrieval-augmented generation (RAG) systems, fine-tune models for domain-specific tasks, and deploy LLM-powered features with proper guardrails and cost controls."
   - question: "Do you provide post-deployment support?"
-    answer: "Yes. We offer ongoing monitoring, optimization, and operational support for AI systems in production."
+    answer: "Production is where our work truly begins. We provide ongoing monitoring, performance optimization, incident response, and continuous model improvement as your system evolves."
   - question: "Do you work with startups and enterprises?"
-    answer: "Yes. We support both startups building AI-first products and enterprises integrating AI into existing systems with compliance requirements."
+    answer: "Both. Startups benefit from our speed and pragmatic architecture decisions. Enterprises trust us to navigate compliance, security reviews, and integration with existing infrastructure."
 cta:
   title: "Talk to Our AI Engineering Team"
   description: "Discuss your AI system requirements, existing infrastructure, or production challenges with our engineering team. Let's build reliable AI systems together."
@@ -148,10 +149,8 @@ seo:
   description: "Premium AI engineering services for production AI systems. Model development, MLOps, data pipelines, and AI application development from experienced engineers."
 ---
 
-## Get Started With Procedure
+## Your AI System, Built for Production
 
-Whether you need AI system architecture, model development, MLOps, or AI application integration — we're here to help.
+Most AI projects fail between prototype and production. We bridge that gap with engineering discipline — reliable data pipelines, observable model serving, and infrastructure that scales with your business.
 
-**→ [Schedule a call with our AI engineering team](/contact-us)**
-
-This is AI engineering for production reliability, security, and business impact.
+**→ [Talk to an AI engineer](/contact-us)**
diff --git a/lib/content-types.ts b/lib/content-types.ts
index 5b61f8a..420e043 100644
--- a/lib/content-types.ts
+++ b/lib/content-types.ts
@@ -150,6 +150,7 @@ export interface ExpertiseFrontmatter extends BaseFrontmatter {
     description: string;
     icon?: string;
   }>;
+  useCasesSubtitle?: string;
   useCases?: Array<{
     icon: string;
     title: string;
diff --git a/lib/content.ts b/lib/content.ts
index 14851e7..a3c2dec 100644
--- a/lib/content.ts
+++ b/lib/content.ts
@@ -562,6 +562,7 @@ export interface ExpertisePageForListing {
     description: string;
     icon?: string;
   }>;
+  useCasesSubtitle?: string;
   useCases?: Array<{
     icon: string;
     title: string;
@@ -675,6 +676,7 @@ export function getExpertiseForListing(
     testimonials: frontmatter.testimonials || [],
     whoWeWorkWith: frontmatter.whoWeWorkWith,
     process: frontmatter.process,
+    useCasesSubtitle: frontmatter.useCasesSubtitle,
     useCases: frontmatter.useCases,
     whyChoose: frontmatter.whyChoose,
     qualityMatters: frontmatter.qualityMatters,

From b302ec989bdd4596d0cfc59115128b9ba2afba3f Mon Sep 17 00:00:00 2001
From: harshita375 <harshita@procedure.tech>
Date: Mon, 9 Feb 2026 10:38:20 +0530
Subject: [PATCH 3/6] feat: Add complete .NET Development Services page

- Add new .NET Development page with enterprise-focused content
- Create new components: ArchitectureSection, EngagementModels,
  ExpertiseCTAWithTestimonial, PhilosophySection, RiskReversal
- Update TechStack with grouped chips variant
- Update WhoWeWorkWith with tabs variant and 2-column bullet list
- Add split layout variant to RiskReversal component
- Update Stats component to accept custom stats props
- Add supporting content types for new page sections
- Include 7 SEO-optimized FAQs with mid-length answers

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/services/[slug]/ExpertisePageClient.tsx   | 128 +++++++--
 components/expertise/ArchitectureSection.tsx  | 184 +++++++++++++
 components/expertise/EngagementModels.tsx     | 123 +++++++++
 .../expertise/ExpertiseCTAWithTestimonial.tsx | 148 ++++++++++
 components/expertise/ExpertiseHero.tsx        |   6 +-
 components/expertise/PhilosophySection.tsx    |  65 +++++
 components/expertise/RiskReversal.tsx         | 255 ++++++++++++++++++
 components/expertise/TechStack.tsx            | 118 +++++---
 components/expertise/WhoWeWorkWith.tsx        | 229 ++++++++++++----
 components/expertise/WhyChooseProcedure.tsx   |   4 +-
 components/expertise/index.ts                 |   5 +
 components/sections/Stats.tsx                 |  19 +-
 components/ui/PageHero.tsx                    |  14 +-
 content/services/dotnet-development.mdx       | 167 ++++++++++++
 lib/content-types.ts                          |  46 +++-
 lib/content.ts                                |  70 ++++-
 16 files changed, 1463 insertions(+), 118 deletions(-)
 create mode 100644 components/expertise/ArchitectureSection.tsx
 create mode 100644 components/expertise/EngagementModels.tsx
 create mode 100644 components/expertise/ExpertiseCTAWithTestimonial.tsx
 create mode 100644 components/expertise/PhilosophySection.tsx
 create mode 100644 components/expertise/RiskReversal.tsx
 create mode 100644 content/services/dotnet-development.mdx

diff --git a/app/services/[slug]/ExpertisePageClient.tsx b/app/services/[slug]/ExpertisePageClient.tsx
index 5dff5d8..a5fbbc3 100644
--- a/app/services/[slug]/ExpertisePageClient.tsx
+++ b/app/services/[slug]/ExpertisePageClient.tsx
@@ -9,14 +9,20 @@ import {
   TechStack,
   FAQSection,
   ExpertiseCTA,
+  ExpertiseCTAWithTestimonial,
   RelatedExpertise,
   WhoWeWorkWith,
   ProcessTimeline,
   UseCasesGrid,
   WhyChooseProcedure,
   QualityMatters,
+  ArchitectureSection,
+  EngagementModels,
+  RiskReversal,
+  PhilosophySection,
 } from "@/components/expertise";
 import { Testimonials } from "@/components/sections/Testimonials";
+import { Stats } from "@/components/sections/Stats";
 
 interface RelatedPage {
   slug: string;
@@ -71,6 +77,8 @@ export default function ExpertisePageClient({
             ? ["Product Design", "UX Design", "UI Design", "Design Systems", "Product Strategy", "User Research"]
             : expertise.slug === "kubernetes"
             ? ["Kubernetes Consulting", "Container Orchestration", "Cloud Native Infrastructure", "Kubernetes Implementation", "Kubernetes Optimization"]
+            : expertise.slug === "dotnet-development"
+            ? [".NET Development Services", "ASP.NET Core Development", "C# Development", "Azure .NET Development", ".NET Migration Services", "Enterprise .NET Consulting"]
             : pageData.hero.badge,
         areaServed: [
           { "@type": "Country", name: "United States" },
@@ -105,6 +113,8 @@ export default function ExpertisePageClient({
             ? ["Backend Engineering", "Software Development", "API Development"]
             : expertise.slug === "frontend-development"
             ? ["Frontend Engineering", "Web Development", "UI/UX Development"]
+            : expertise.slug === "dotnet-development"
+            ? [".NET Development", "ASP.NET Core", "C# Development", "Azure Development", "Enterprise Software Development"]
             : [pageData.hero.badge, "Enterprise AI Engineering", "Software Development"],
       },
       // FAQ Schema (only if FAQs exist)
@@ -173,6 +183,8 @@ export default function ExpertisePageClient({
             ? { text: "Talk to a Frontend Specialist", href: "/contact-us" }
             : expertise.slug === "backend-development"
             ? { text: "Talk to a Backend Specialist", href: "/contact-us" }
+            : expertise.slug === "dotnet-development"
+            ? { text: "Talk to a .NET Expert", href: "/contact-us" }
             : undefined
         }
         secondaryCTA={
@@ -181,26 +193,50 @@ export default function ExpertisePageClient({
             "ai-agents",
             "ai-security",
             "ai-privacy",
+            "dotnet-development",
           ].includes(expertise.slug)
             ? undefined
             : { text: "View Case Studies", href: "/work" }
         }
       />
 
+      {expertise.slug === "dotnet-development" && (
+        <Stats
+          title="Proven Outcomes from Enterprise .NET Engineering"
+          stats={[
+            { value: "40+", label: ".NET systems running in production" },
+            { value: "6–8 weeks", label: "Typical time to production-ready release" },
+            { value: "95%+", label: "Client retention across long-term engagements" },
+            { value: "3+ years", label: "Average system lifecycle supported" },
+          ]}
+        />
+      )}
+
       <CapabilitiesGrid
-        title="Key Capabilities"
-        subtitle="Everything you need to build production-grade solutions"
+        title={expertise.slug === "dotnet-development" ? ".NET Development Capabilities for Production-Grade Systems" : "Key Capabilities"}
+        subtitle={expertise.slug === "dotnet-development" ? "Everything required to design, modernize, and operate production-grade .NET systems at scale." : "Everything you need to build production-grade solutions"}
         capabilities={capabilities}
       />
 
-      {["frontend-development", "backend-development"].includes(expertise.slug) && pageData.whoWeWorkWith && (
+      {["frontend-development", "backend-development", "dotnet-development"].includes(expertise.slug) && pageData.whoWeWorkWith && (
         <WhoWeWorkWith
-          title="Who We Work With"
+          title={pageData.whoWeWorkWith.title || "Who We Work With"}
           audiences={pageData.whoWeWorkWith.audiences.map((a) => ({
             ...a,
             icon: Icons[a.icon as keyof typeof Icons] || Icons.users,
           }))}
           closingStatement={pageData.whoWeWorkWith.closingStatement}
+          commonApplications={pageData.whoWeWorkWith.commonApplications}
+          variant={expertise.slug === "dotnet-development" ? "tabs" : "cards"}
+        />
+      )}
+
+      {/* For dotnet-development: Philosophy section comes early, before TechStack */}
+      {expertise.slug === "dotnet-development" && pageData.philosophy && (
+        <PhilosophySection
+          title={pageData.philosophy.title}
+          subtitle={pageData.philosophy.subtitle}
+          blocks={pageData.philosophy.blocks}
         />
       )}
 
@@ -219,11 +255,24 @@ export default function ExpertisePageClient({
         />
       )}
 
-      <TechStack
-        title="Technologies We Use"
-        subtitle="Production-tested tools and frameworks"
-        technologies={technologies}
-      />
+      {expertise.slug === "dotnet-development" ? (
+        <TechStack
+          title=".NET Technology Stack (Production-Proven)"
+          variant="grouped"
+          groups={[
+            { category: "Runtime & Frameworks", items: [".NET 8", "ASP.NET Core", "C#", "Entity Framework Core"] },
+            { category: "Cloud & Infrastructure", items: ["Azure", "Docker", "Kubernetes"] },
+            { category: "Data & Caching", items: ["SQL Server", "PostgreSQL", "Redis"] },
+            { category: "Observability & Messaging", items: ["Serilog", "MediatR"] },
+          ]}
+        />
+      ) : (
+        <TechStack
+          title="Technologies We Use"
+          subtitle="Production-tested tools and frameworks"
+          technologies={technologies}
+        />
+      )}
 
       {pageData.useCases && (
         <UseCasesGrid
@@ -237,12 +286,14 @@ export default function ExpertisePageClient({
         />
       )}
 
-      {pageData.whyChoose && (
+      {/* For non-dotnet pages: Philosophy section in original position */}
+      {expertise.slug !== "dotnet-development" && pageData.whyChoose && (
         <WhyChooseProcedure
-          title={expertise.slug === "frontend-development" ? "Why Choose Procedure for Frontend Development" : expertise.slug === "backend-development" ? "Why Choose Procedure for Backend Development" : `Why Choose Procedure for ${pageData.hero.badge}`}
-          subtitle="Companies choose Procedure because"
+          title={pageData.whyChoose.title || (expertise.slug === "frontend-development" ? "Why Choose Procedure for Frontend Development" : expertise.slug === "backend-development" ? "Why Choose Procedure for Backend Development" : `Why Choose Procedure for ${pageData.hero.badge}`)}
+          subtitle={pageData.whyChoose.subtitle}
+          reasonsTitle={pageData.whyChoose.reasonsTitle}
           reasons={pageData.whyChoose.reasons}
-          outcomesTitle={expertise.slug === "frontend-development" ? "Outcomes from recent frontend engagements" : expertise.slug === "backend-development" ? "Outcomes from recent backend engagements" : "Outcomes from recent engagements"}
+          outcomesTitle={pageData.whyChoose.outcomesTitle || (expertise.slug === "frontend-development" ? "Outcomes from recent frontend engagements" : expertise.slug === "backend-development" ? "Outcomes from recent backend engagements" : "Outcomes from recent engagements")}
           outcomes={pageData.whyChoose.outcomes}
         />
       )}
@@ -262,14 +313,55 @@ export default function ExpertisePageClient({
         />
       )}
 
+      {pageData.architecture && (
+        <ArchitectureSection
+          title={pageData.architecture.title}
+          subtitle={pageData.architecture.subtitle}
+          diagramSrc={pageData.architecture.diagramSrc}
+          layers={pageData.architecture.layers}
+        />
+      )}
+
+      {pageData.engagementModels && (
+        <EngagementModels
+          title={pageData.engagementModels.title}
+          subtitle={pageData.engagementModels.subtitle}
+          models={pageData.engagementModels.models}
+        />
+      )}
+
+      {pageData.riskReversal && (
+        <RiskReversal
+          title={pageData.riskReversal.title}
+          subtitle={pageData.riskReversal.subtitle}
+          items={pageData.riskReversal.items || []}
+          closingNote={pageData.riskReversal.closingNote}
+          variant={pageData.riskReversal.variant}
+          leftTriggers={pageData.riskReversal.leftTriggers}
+          rightBlocks={pageData.riskReversal.rightBlocks}
+        />
+      )}
+
+      {/* CTA with testimonial for pages that have it, regular CTA otherwise */}
+      {pageData.ctaTestimonial ? (
+        <ExpertiseCTAWithTestimonial
+          headline={pageData.cta.headline}
+          description={pageData.cta.description}
+          buttonText={pageData.cta.buttonText}
+          buttonLink={pageData.cta.buttonLink}
+          supportingNote={pageData.cta.supportingNote}
+          testimonial={pageData.ctaTestimonial}
+        />
+      ) : (
+        <ExpertiseCTA
+          headline={pageData.cta.headline}
+          description={pageData.cta.description}
+        />
+      )}
+
       {pageData.faqs.length > 0 && <FAQSection faqs={pageData.faqs} />}
 
       {relatedPages.length > 0 && <RelatedExpertise pages={relatedPages} />}
-
-      <ExpertiseCTA
-        headline={pageData.cta.headline}
-        description={pageData.cta.description}
-      />
     </main>
   );
 }
diff --git a/components/expertise/ArchitectureSection.tsx b/components/expertise/ArchitectureSection.tsx
new file mode 100644
index 0000000..862a063
--- /dev/null
+++ b/components/expertise/ArchitectureSection.tsx
@@ -0,0 +1,184 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+import Image from "next/image";
+
+interface ArchitectureLayer {
+  name: string;
+  description: string;
+}
+
+interface ArchitectureSectionProps {
+  title?: string;
+  subtitle?: string;
+  diagramSrc?: string;
+  diagramAlt?: string;
+  layers: ArchitectureLayer[];
+}
+
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1,
+      delayChildren: 0.2,
+    },
+  },
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, x: -16 },
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: { duration: 0.4, ease: [0.16, 1, 0.3, 1] as const },
+  },
+};
+
+export function ArchitectureSection({
+  title = "Our Technical Approach",
+  subtitle,
+  diagramSrc,
+  diagramAlt = "Architecture diagram",
+  layers,
+}: ArchitectureSectionProps) {
+  return (
+    <section className="py-16 sm:py-24 bg-base">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Section header */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5 }}
+          className="text-center mb-12 sm:mb-16"
+        >
+          <h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-text-primary mb-4">
+            {title}
+          </h2>
+          {subtitle && (
+            <p className="text-lg text-text-secondary max-w-3xl mx-auto">
+              {subtitle}
+            </p>
+          )}
+        </motion.div>
+
+        {/* Two-column layout */}
+        <div className="grid lg:grid-cols-2 gap-8 lg:gap-12 items-start">
+          {/* Left side - Diagram */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+            className={cn(
+              "relative rounded-2xl overflow-hidden",
+              "bg-surface-elevated border border-border",
+              "aspect-square lg:aspect-[4/3]"
+            )}
+          >
+            {diagramSrc ? (
+              <Image
+                src={diagramSrc}
+                alt={diagramAlt}
+                fill
+                className="object-contain p-6"
+              />
+            ) : (
+              /* Conceptual architecture diagram - 4 layers with inward dependencies */
+              <div className="absolute inset-0 flex flex-col items-center justify-center p-6">
+                <div className="relative w-full max-w-[300px] aspect-square">
+                  {/* Outermost layer - API */}
+                  <div className="absolute inset-0 rounded-full border border-border/60 flex items-center justify-center">
+                    <span className="absolute -top-2 left-1/2 -translate-x-1/2 text-[11px] text-text-muted bg-surface-elevated px-2">
+                      API
+                    </span>
+                    {/* Inward arrow - top */}
+                    <svg className="absolute top-[8%] left-1/2 -translate-x-1/2 w-3 h-3 text-text-muted/50" viewBox="0 0 12 12" fill="none">
+                      <path d="M6 2L6 10M6 10L3 7M6 10L9 7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                    </svg>
+                  </div>
+                  {/* Second layer - Infrastructure */}
+                  <div className="absolute inset-[12%] rounded-full border border-border/70 flex items-center justify-center">
+                    <span className="absolute -top-2 left-1/2 -translate-x-1/2 text-[11px] text-text-muted bg-surface-elevated px-2">
+                      Infrastructure
+                    </span>
+                    {/* Inward arrow - top */}
+                    <svg className="absolute top-[8%] left-1/2 -translate-x-1/2 w-3 h-3 text-text-muted/50" viewBox="0 0 12 12" fill="none">
+                      <path d="M6 2L6 10M6 10L3 7M6 10L9 7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                    </svg>
+                  </div>
+                  {/* Third layer - Application */}
+                  <div className="absolute inset-[24%] rounded-full border border-accent/30 flex items-center justify-center">
+                    <span className="absolute -top-2 left-1/2 -translate-x-1/2 text-[11px] text-text-muted bg-surface-elevated px-2">
+                      Application
+                    </span>
+                    {/* Inward arrow - top */}
+                    <svg className="absolute top-[8%] left-1/2 -translate-x-1/2 w-3 h-3 text-accent/40" viewBox="0 0 12 12" fill="none">
+                      <path d="M6 2L6 10M6 10L3 7M6 10L9 7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                    </svg>
+                  </div>
+                  {/* Innermost layer - Domain (protected core) */}
+                  <div className="absolute inset-[38%] rounded-full bg-accent/10 border border-accent/50 flex items-center justify-center">
+                    <span className="text-xs text-accent-light font-medium">
+                      Domain
+                    </span>
+                  </div>
+                </div>
+                <p className="mt-5 text-xs text-text-muted text-center max-w-[220px]">
+                  Dependencies point inward to protect core business logic.
+                </p>
+              </div>
+            )}
+          </motion.div>
+
+          {/* Right side - Layer descriptions */}
+          <motion.div
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true }}
+            variants={containerVariants}
+            className="space-y-4"
+          >
+            {layers.map((layer, index) => (
+              <motion.div
+                key={index}
+                variants={itemVariants}
+                className={cn(
+                  "p-5 rounded-xl",
+                  "bg-surface-elevated/80 backdrop-blur-sm",
+                  "border border-border",
+                  "hover:border-accent/30 transition-colors duration-300"
+                )}
+              >
+                <div className="flex items-start gap-4">
+                  <div
+                    className={cn(
+                      "flex-shrink-0 w-8 h-8 rounded-lg mt-0.5",
+                      "bg-accent/10 border border-accent/20",
+                      "flex items-center justify-center"
+                    )}
+                  >
+                    <span className="text-sm font-semibold text-accent-light">
+                      {index + 1}
+                    </span>
+                  </div>
+                  <div>
+                    <h3 className="text-base font-semibold text-text-primary mb-1">
+                      {layer.name}
+                    </h3>
+                    <p className="text-sm text-text-secondary leading-relaxed">
+                      {layer.description}
+                    </p>
+                  </div>
+                </div>
+              </motion.div>
+            ))}
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/expertise/EngagementModels.tsx b/components/expertise/EngagementModels.tsx
new file mode 100644
index 0000000..5c628df
--- /dev/null
+++ b/components/expertise/EngagementModels.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+
+interface EngagementModel {
+  title: string;
+  description: string;
+  bestFor: string;
+}
+
+interface EngagementModelsProps {
+  title?: string;
+  subtitle?: string;
+  models: EngagementModel[];
+}
+
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1,
+      delayChildren: 0.2,
+    },
+  },
+};
+
+const cardVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.4, ease: [0.16, 1, 0.3, 1] as const },
+  },
+};
+
+export function EngagementModels({
+  title = "How Clients Work With Us",
+  subtitle,
+  models,
+}: EngagementModelsProps) {
+  return (
+    <section className="py-16 sm:py-24 bg-surface">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Section header */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5 }}
+          className="text-center mb-12 sm:mb-16"
+        >
+          <h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-text-primary mb-4">
+            {title}
+          </h2>
+          {subtitle && (
+            <p className="text-lg text-text-secondary max-w-3xl mx-auto">
+              {subtitle}
+            </p>
+          )}
+        </motion.div>
+
+        {/* Models grid */}
+        <motion.div
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: "-100px" }}
+          variants={containerVariants}
+          className="grid grid-cols-1 md:grid-cols-2 gap-6"
+        >
+          {models.map((model, index) => (
+            <motion.div
+              key={index}
+              variants={cardVariants}
+              className={cn(
+                "group relative p-6 sm:p-8 rounded-2xl",
+                "bg-surface-elevated/80 backdrop-blur-sm",
+                "border border-border",
+                "hover:border-accent/30 transition-all duration-300",
+                "hover:shadow-lg hover:shadow-accent/5"
+              )}
+            >
+              {/* Subtle gradient on hover */}
+              <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-accent/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+
+              <div className="relative">
+                {/* Number badge */}
+                <div
+                  className={cn(
+                    "inline-flex items-center justify-center w-8 h-8 rounded-lg mb-4",
+                    "bg-accent/10 border border-accent/20",
+                    "text-sm font-semibold text-accent-light"
+                  )}
+                >
+                  {index + 1}
+                </div>
+
+                {/* Content */}
+                <h3 className="text-xl font-semibold text-text-primary mb-2">
+                  {model.title}
+                </h3>
+                <p className="text-text-secondary leading-relaxed mb-4">
+                  {model.description}
+                </p>
+
+                {/* Best for tag */}
+                <div className="flex items-center gap-2">
+                  <span className="text-xs font-medium text-text-muted uppercase tracking-wide">
+                    Best for:
+                  </span>
+                  <span className="text-sm text-accent-light font-medium">
+                    {model.bestFor}
+                  </span>
+                </div>
+              </div>
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/expertise/ExpertiseCTAWithTestimonial.tsx b/components/expertise/ExpertiseCTAWithTestimonial.tsx
new file mode 100644
index 0000000..ce72736
--- /dev/null
+++ b/components/expertise/ExpertiseCTAWithTestimonial.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Link from "next/link";
+import { Button } from "@/components/ui";
+import { cn } from "@/lib/utils";
+
+interface Testimonial {
+  name: string;
+  role: string;
+  company: string;
+  quote: string;
+}
+
+interface ExpertiseCTAWithTestimonialProps {
+  headline: string;
+  description: string;
+  buttonText?: string;
+  buttonLink?: string;
+  supportingNote?: string;
+  testimonial: Testimonial;
+}
+
+export function ExpertiseCTAWithTestimonial({
+  headline,
+  description,
+  buttonText = "Schedule a Call",
+  buttonLink = "/contact-us",
+  supportingNote,
+  testimonial,
+}: ExpertiseCTAWithTestimonialProps) {
+  return (
+    <section className="relative py-16 sm:py-24 bg-base">
+      {/* Top border */}
+      <div className="absolute top-0 left-0 right-0 h-px bg-border" />
+
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid lg:grid-cols-2 gap-8 lg:gap-12 items-center">
+          {/* Left side - CTA */}
+          <motion.div
+            initial={{ opacity: 0, x: -20 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+          >
+            <h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-text-primary mb-4">
+              {headline}
+            </h2>
+
+            <p className="text-lg text-text-secondary mb-8 leading-relaxed">
+              {description}
+            </p>
+
+            <Link href={buttonLink}>
+              <Button variant="primary" size="lg">
+                {buttonText}
+                <svg
+                  className="w-4 h-4 ml-2"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
+                  />
+                </svg>
+              </Button>
+            </Link>
+
+            {supportingNote && (
+              <p className="mt-4 text-sm text-text-muted">
+                {supportingNote}
+              </p>
+            )}
+          </motion.div>
+
+          {/* Right side - Testimonial */}
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.1 }}
+            className={cn(
+              "relative p-6 sm:p-8 rounded-2xl",
+              "bg-surface-elevated/80 backdrop-blur-sm",
+              "border border-border"
+            )}
+          >
+            {/* Quote mark */}
+            <div className="absolute -top-3 left-6">
+              <div
+                className={cn(
+                  "w-8 h-8 rounded-lg flex items-center justify-center",
+                  "bg-accent/20 border border-accent/30"
+                )}
+              >
+                <svg
+                  className="w-4 h-4 text-accent-light"
+                  fill="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
+                </svg>
+              </div>
+            </div>
+
+            <blockquote className="mt-4">
+              <p className="text-text-primary leading-relaxed mb-6 text-base sm:text-lg">
+                "{testimonial.quote}"
+              </p>
+
+              <footer className="flex items-center gap-3">
+                {/* Avatar placeholder */}
+                <div
+                  className={cn(
+                    "w-10 h-10 rounded-full flex items-center justify-center",
+                    "bg-accent/10 border border-accent/20"
+                  )}
+                >
+                  <span className="text-sm font-semibold text-accent-light">
+                    {testimonial.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </span>
+                </div>
+
+                <div>
+                  <cite className="not-italic">
+                    <span className="block text-sm font-semibold text-text-primary">
+                      {testimonial.name}
+                    </span>
+                    <span className="block text-xs text-text-muted">
+                      {testimonial.role}, {testimonial.company}
+                    </span>
+                  </cite>
+                </div>
+              </footer>
+            </blockquote>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/expertise/ExpertiseHero.tsx b/components/expertise/ExpertiseHero.tsx
index 962e816..621cdf8 100644
--- a/components/expertise/ExpertiseHero.tsx
+++ b/components/expertise/ExpertiseHero.tsx
@@ -5,8 +5,8 @@ import { PageHero } from "@/components/ui";
 interface ExpertiseHeroProps {
   badge: string;
   headline: string;
-  headlineAccent: string;
-  tagline: string;
+  headlineAccent?: string;
+  tagline?: string;
   description: string;
   primaryCTA?: {
     text: string;
@@ -25,7 +25,7 @@ export function ExpertiseHero({
   tagline,
   description,
   primaryCTA = { text: "Talk to the Team", href: "/contact-us" },
-  secondaryCTA = { text: "View Case Studies", href: "/work" },
+  secondaryCTA,
 }: ExpertiseHeroProps) {
   return (
     <PageHero
diff --git a/components/expertise/PhilosophySection.tsx b/components/expertise/PhilosophySection.tsx
new file mode 100644
index 0000000..e83cb69
--- /dev/null
+++ b/components/expertise/PhilosophySection.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+
+interface PhilosophyBlock {
+  title: string;
+  description: string;
+}
+
+interface PhilosophySectionProps {
+  title: string;
+  subtitle?: string;
+  blocks: PhilosophyBlock[];
+}
+
+export function PhilosophySection({
+  title,
+  subtitle,
+  blocks,
+}: PhilosophySectionProps) {
+  return (
+    <section className="py-16 sm:py-24 bg-base">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Section header */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5 }}
+          className="mb-12"
+        >
+          <h2 className="text-2xl sm:text-3xl font-semibold tracking-tight text-text-primary mb-4">
+            {title}
+          </h2>
+          {subtitle && (
+            <p className="text-text-secondary leading-relaxed">
+              {subtitle}
+            </p>
+          )}
+        </motion.div>
+
+        {/* Philosophy blocks */}
+        <div className="space-y-10">
+          {blocks.map((block, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, y: 16 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.4, delay: index * 0.1 }}
+            >
+              <h3 className="text-lg font-medium text-text-primary mb-2">
+                {block.title}
+              </h3>
+              <p className="text-text-secondary leading-relaxed">
+                {block.description}
+              </p>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/expertise/RiskReversal.tsx b/components/expertise/RiskReversal.tsx
new file mode 100644
index 0000000..dd4a071
--- /dev/null
+++ b/components/expertise/RiskReversal.tsx
@@ -0,0 +1,255 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+
+interface RiskReversalItem {
+  title: string;
+  description: string;
+}
+
+interface RiskReversalProps {
+  title?: string;
+  subtitle?: string;
+  items: RiskReversalItem[];
+  closingNote?: string;
+  variant?: "grid" | "split";
+  leftTriggers?: string[];
+  rightBlocks?: RiskReversalItem[];
+}
+
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1,
+      delayChildren: 0.2,
+    },
+  },
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.4, ease: [0.16, 1, 0.3, 1] as const },
+  },
+};
+
+export function RiskReversal({
+  title = "When Teams Bring Us In",
+  subtitle,
+  items,
+  closingNote,
+  variant = "grid",
+  leftTriggers,
+  rightBlocks,
+}: RiskReversalProps) {
+  // Split layout variant
+  if (variant === "split" && leftTriggers && rightBlocks) {
+    return (
+      <section className="py-16 sm:py-24 bg-surface">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+          {/* Section header */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+            className="text-center mb-12 sm:mb-16"
+          >
+            <h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-text-primary mb-4">
+              {title}
+            </h2>
+            {subtitle && (
+              <p className="text-lg text-text-secondary max-w-3xl mx-auto">
+                {subtitle}
+              </p>
+            )}
+          </motion.div>
+
+          {/* Split layout */}
+          <div className="grid lg:grid-cols-2 gap-12 lg:gap-16">
+            {/* Left side - Trigger statements (editorial) */}
+            <motion.div
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true }}
+              variants={containerVariants}
+              className="space-y-4"
+            >
+              <p className="text-xs font-medium text-text-muted uppercase tracking-wider mb-4">
+                When teams reach out
+              </p>
+              {leftTriggers.map((trigger, index) => (
+                <motion.div
+                  key={index}
+                  variants={itemVariants}
+                  className="flex items-start gap-3"
+                >
+                  <span className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-accent mt-2.5" />
+                  <p className="text-text-secondary leading-relaxed">
+                    {trigger}
+                  </p>
+                </motion.div>
+              ))}
+            </motion.div>
+
+            {/* Right side - Risk reduction blocks (compact) */}
+            <motion.div
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true }}
+              variants={containerVariants}
+              className="space-y-5"
+            >
+              <p className="text-xs font-medium text-text-muted uppercase tracking-wider mb-4">
+                How we reduce risk
+              </p>
+              {rightBlocks.map((block, index) => (
+                <motion.div
+                  key={index}
+                  variants={itemVariants}
+                  className="flex items-start gap-3"
+                >
+                  <span className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-accent mt-2" />
+                  <div>
+                    <span className="text-text-primary font-medium">
+                      {block.title}
+                    </span>
+                    <span className="text-text-muted"> — </span>
+                    <span className="text-text-secondary">
+                      {block.description}
+                    </span>
+                  </div>
+                </motion.div>
+              ))}
+            </motion.div>
+          </div>
+
+          {/* Closing note */}
+          {closingNote && (
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: 0.3 }}
+              className="mt-12 pt-8 border-t border-border"
+            >
+              <p className="text-text-secondary text-sm sm:text-base max-w-2xl">
+                {closingNote}
+              </p>
+            </motion.div>
+          )}
+        </div>
+      </section>
+    );
+  }
+
+  // Default grid layout
+  return (
+    <section className="py-16 sm:py-24 bg-base">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Section header */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5 }}
+          className="text-center mb-12 sm:mb-16"
+        >
+          <h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-text-primary mb-4">
+            {title}
+          </h2>
+          {subtitle && (
+            <p className="text-lg text-text-secondary max-w-3xl mx-auto">
+              {subtitle}
+            </p>
+          )}
+        </motion.div>
+
+        {/* Items grid */}
+        <motion.div
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: "-100px" }}
+          variants={containerVariants}
+          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+        >
+          {items.map((item, index) => (
+            <motion.div
+              key={index}
+              variants={itemVariants}
+              className={cn(
+                "group relative p-6 rounded-2xl",
+                "bg-surface-elevated/80 backdrop-blur-sm",
+                "border border-border",
+                "hover:border-accent/30 transition-all duration-300",
+                "hover:shadow-lg hover:shadow-accent/5"
+              )}
+            >
+              {/* Subtle gradient on hover */}
+              <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-accent/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+
+              <div className="relative">
+                {/* Checkmark icon */}
+                <div
+                  className={cn(
+                    "inline-flex items-center justify-center w-10 h-10 rounded-xl mb-4",
+                    "bg-accent/10 border border-accent/20"
+                  )}
+                >
+                  <svg
+                    className="w-5 h-5 text-accent-light"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                  </svg>
+                </div>
+
+                {/* Content */}
+                <h3 className="text-lg font-semibold text-text-primary mb-2">
+                  {item.title}
+                </h3>
+                <p className="text-text-secondary text-sm leading-relaxed">
+                  {item.description}
+                </p>
+              </div>
+            </motion.div>
+          ))}
+        </motion.div>
+
+        {/* Closing note */}
+        {closingNote && (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.3 }}
+            className="mt-12 text-center"
+          >
+            <div
+              className={cn(
+                "inline-block px-6 py-4 rounded-xl",
+                "bg-accent/5 border border-accent/20"
+              )}
+            >
+              <p className="text-text-secondary text-sm sm:text-base">
+                {closingNote}
+              </p>
+            </div>
+          </motion.div>
+        )}
+      </div>
+    </section>
+  );
+}
diff --git a/components/expertise/TechStack.tsx b/components/expertise/TechStack.tsx
index 4e83930..182efec 100644
--- a/components/expertise/TechStack.tsx
+++ b/components/expertise/TechStack.tsx
@@ -8,10 +8,17 @@ interface Technology {
   icon?: React.ReactNode;
 }
 
+interface TechGroup {
+  category: string;
+  items: string[];
+}
+
 interface TechStackProps {
   title?: string;
   subtitle?: string;
-  technologies: Technology[];
+  technologies?: Technology[];
+  groups?: TechGroup[];
+  variant?: "grid" | "grouped";
 }
 
 const containerVariants = {
@@ -38,7 +45,9 @@ const itemVariants = {
 export function TechStack({
   title = "Technologies We Use",
   subtitle,
-  technologies,
+  technologies = [],
+  groups,
+  variant = "grid",
 }: TechStackProps) {
   return (
     <section className="py-16 sm:py-24 bg-surface">
@@ -59,44 +68,77 @@ export function TechStack({
           )}
         </motion.div>
 
-        {/* Tech grid */}
-        <motion.div
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ once: true, margin: "-50px" }}
-          variants={containerVariants}
-          className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-3"
-        >
-          {technologies.map((tech, index) => (
-            <motion.div
-              key={index}
-              variants={itemVariants}
-              className="flex flex-col items-center gap-2 p-4 rounded-xl bg-surface-elevated border border-border hover:border-accent/30 transition-colors"
-            >
-              {/* Icon */}
-              {tech.icon ? (
-                <div className="h-10 w-10 flex items-center justify-center text-text-secondary">
-                  {tech.icon}
+        {/* Grouped chips variant */}
+        {variant === "grouped" && groups && (
+          <motion.div
+            initial={{ opacity: 0, y: 16 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.4 }}
+            className="max-w-4xl mx-auto"
+          >
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
+              {groups.map((group, index) => (
+                <div key={index}>
+                  <h3 className="text-xs font-medium text-text-muted uppercase tracking-wider mb-3">
+                    {group.category}
+                  </h3>
+                  <div className="flex flex-wrap gap-2">
+                    {group.items.map((item, itemIndex) => (
+                      <span
+                        key={itemIndex}
+                        className="px-3 py-1.5 text-sm text-text-secondary bg-surface-elevated border border-border rounded-lg"
+                      >
+                        {item}
+                      </span>
+                    ))}
+                  </div>
                 </div>
-              ) : hasTechIcon(tech.name) ? (
-                <div className="h-10 w-10 flex items-center justify-center text-text-secondary">
-                  <TechIcon name={tech.name} size={28} />
-                </div>
-              ) : (
-                <div className="h-10 w-10 rounded-lg bg-accent/10 flex items-center justify-center">
-                  <span className="text-lg font-semibold text-accent-light">
-                    {tech.name.charAt(0)}
-                  </span>
-                </div>
-              )}
+              ))}
+            </div>
+          </motion.div>
+        )}
 
-              {/* Tech name */}
-              <span className="text-xs text-center font-medium text-text-muted">
-                {tech.name}
-              </span>
-            </motion.div>
-          ))}
-        </motion.div>
+        {/* Tech grid (default) */}
+        {variant === "grid" && technologies && technologies.length > 0 && (
+          <motion.div
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, margin: "-50px" }}
+            variants={containerVariants}
+            className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-3"
+          >
+            {technologies.map((tech, index) => (
+              <motion.div
+                key={index}
+                variants={itemVariants}
+                className="flex flex-col items-center gap-2 p-4 rounded-xl bg-surface-elevated border border-border hover:border-accent/30 transition-colors"
+              >
+                {/* Icon */}
+                {tech.icon ? (
+                  <div className="h-10 w-10 flex items-center justify-center text-text-secondary">
+                    {tech.icon}
+                  </div>
+                ) : hasTechIcon(tech.name) ? (
+                  <div className="h-10 w-10 flex items-center justify-center text-text-secondary">
+                    <TechIcon name={tech.name} size={28} />
+                  </div>
+                ) : (
+                  <div className="h-10 w-10 rounded-lg bg-accent/10 flex items-center justify-center">
+                    <span className="text-lg font-semibold text-accent-light">
+                      {tech.name.charAt(0)}
+                    </span>
+                  </div>
+                )}
+
+                {/* Tech name */}
+                <span className="text-xs text-center font-medium text-text-muted">
+                  {tech.name}
+                </span>
+              </motion.div>
+            ))}
+          </motion.div>
+        )}
       </div>
     </section>
   );
diff --git a/components/expertise/WhoWeWorkWith.tsx b/components/expertise/WhoWeWorkWith.tsx
index ba32862..6ba70ab 100644
--- a/components/expertise/WhoWeWorkWith.tsx
+++ b/components/expertise/WhoWeWorkWith.tsx
@@ -1,20 +1,34 @@
 "use client";
 
-import { motion } from "framer-motion";
-import { ReactNode } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { ReactNode, useState } from "react";
 import { cn } from "@/lib/utils";
 
 interface TargetAudience {
   icon: ReactNode;
+  title: string;
+  subtitle?: string;
+  description?: string;
+  bullets?: string[];
+}
+
+interface CommonApplicationItem {
   title: string;
   description: string;
 }
 
+interface CommonApplications {
+  title: string;
+  items: (string | CommonApplicationItem)[];
+}
+
 interface WhoWeWorkWithProps {
   title?: string;
   subtitle?: string;
   audiences: TargetAudience[];
   closingStatement?: string;
+  commonApplications?: CommonApplications;
+  variant?: "cards" | "tabs";
 }
 
 const containerVariants = {
@@ -42,7 +56,11 @@ export function WhoWeWorkWith({
   subtitle,
   audiences,
   closingStatement,
+  commonApplications,
+  variant = "cards",
 }: WhoWeWorkWithProps) {
+  const [activeTab, setActiveTab] = useState(0);
+
   return (
     <section className="py-16 sm:py-24 bg-base">
       <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -64,61 +82,178 @@ export function WhoWeWorkWith({
           )}
         </motion.div>
 
-        {/* Audience cards */}
-        <motion.div
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ once: true, margin: "-100px" }}
-          variants={containerVariants}
-          className={cn(
-            "grid gap-6",
-            audiences.length === 3
-              ? "grid-cols-1 md:grid-cols-3"
-              : "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
-          )}
-        >
-          {audiences.map((audience, index) => (
-            <motion.div
-              key={index}
-              variants={cardVariants}
+        {/* Tabs variant */}
+        {variant === "tabs" && (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.1 }}
+          >
+            {/* Tab buttons */}
+            <div className="flex flex-wrap justify-center gap-2 sm:gap-3 mb-8">
+              {audiences.map((audience, index) => (
+                <button
+                  key={index}
+                  onClick={() => setActiveTab(index)}
+                  className={cn(
+                    "px-4 sm:px-6 py-2.5 sm:py-3 rounded-xl text-sm sm:text-base font-medium transition-all duration-200",
+                    activeTab === index
+                      ? "bg-accent/20 text-accent-light border border-accent/30"
+                      : "bg-surface-elevated/60 text-text-secondary border border-border hover:border-accent/20 hover:text-text-primary"
+                  )}
+                >
+                  {audience.title}
+                </button>
+              ))}
+            </div>
+
+            {/* Tab content */}
+            <div
               className={cn(
-                "group relative p-6 sm:p-8 rounded-2xl",
+                "max-w-3xl mx-auto p-6 sm:p-8 rounded-2xl",
                 "bg-surface-elevated/80 backdrop-blur-sm",
-                "border border-border",
-                "hover:border-accent/30 transition-all duration-300",
-                "hover:shadow-lg hover:shadow-accent/5"
+                "border border-border"
               )}
             >
-              {/* Subtle gradient glow on hover */}
-              <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-accent/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+              <AnimatePresence mode="wait">
+                <motion.div
+                  key={activeTab}
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -10 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  {audiences[activeTab].subtitle && (
+                    <p className="text-text-muted text-sm mb-5">
+                      {audiences[activeTab].subtitle}
+                    </p>
+                  )}
+                  {audiences[activeTab].bullets && (
+                    <ul className="space-y-4">
+                      {audiences[activeTab].bullets.map((bullet, i) => (
+                        <li
+                          key={i}
+                          className="flex items-start gap-3 text-text-secondary leading-relaxed"
+                        >
+                          <span className="text-accent mt-1.5 flex-shrink-0">•</span>
+                          <span>{bullet}</span>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </motion.div>
+              </AnimatePresence>
+            </div>
+          </motion.div>
+        )}
 
-              <div className="relative">
-                {/* Icon container */}
-                <div
-                  className={cn(
-                    "w-14 h-14 rounded-xl mb-5",
-                    "bg-accent/10 border border-accent/20",
-                    "flex items-center justify-center",
-                    "group-hover:border-accent/40 transition-colors duration-300"
+        {/* Cards variant (original) */}
+        {variant === "cards" && (
+          <motion.div
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, margin: "-100px" }}
+            variants={containerVariants}
+            className={cn(
+              "grid gap-6",
+              audiences.length === 3
+                ? "grid-cols-1 md:grid-cols-3"
+                : "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
+            )}
+          >
+            {audiences.map((audience, index) => (
+              <motion.div
+                key={index}
+                variants={cardVariants}
+                className={cn(
+                  "group relative p-6 sm:p-8 rounded-2xl",
+                  "bg-surface-elevated/80 backdrop-blur-sm",
+                  "border border-border",
+                  "hover:border-accent/30 transition-all duration-300",
+                  "hover:shadow-lg hover:shadow-accent/5"
+                )}
+              >
+                {/* Subtle gradient glow on hover */}
+                <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-accent/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+
+                <div className="relative">
+                  {/* Icon container */}
+                  <div
+                    className={cn(
+                      "w-14 h-14 rounded-xl mb-5",
+                      "bg-accent/10 border border-accent/20",
+                      "flex items-center justify-center",
+                      "group-hover:border-accent/40 transition-colors duration-300"
+                    )}
+                  >
+                    <div className="w-7 h-7 text-accent-light">{audience.icon}</div>
+                  </div>
+
+                  {/* Content */}
+                  <h3 className="text-xl font-semibold text-text-primary mb-2">
+                    {audience.title}
+                  </h3>
+                  {audience.subtitle && (
+                    <p className="text-sm text-text-muted mb-3">{audience.subtitle}</p>
                   )}
-                >
-                  <div className="w-7 h-7 text-accent-light">{audience.icon}</div>
+                  {audience.bullets ? (
+                    <ul className="space-y-2">
+                      {audience.bullets.map((bullet, i) => (
+                        <li key={i} className="flex items-start gap-2 text-text-secondary text-sm leading-relaxed">
+                          <span className="text-accent mt-1 flex-shrink-0">•</span>
+                          <span>{bullet}</span>
+                        </li>
+                      ))}
+                    </ul>
+                  ) : audience.description ? (
+                    <p className="text-text-secondary leading-relaxed">
+                      {audience.description}
+                    </p>
+                  ) : null}
                 </div>
+              </motion.div>
+            ))}
+          </motion.div>
+        )}
 
-                {/* Content */}
-                <h3 className="text-xl font-semibold text-text-primary mb-3">
-                  {audience.title}
-                </h3>
-                <p className="text-text-secondary leading-relaxed">
-                  {audience.description}
-                </p>
+        {/* Common Applications - 2-column bullet list */}
+        {commonApplications && (
+          <motion.div
+            initial={{ opacity: 0, y: 16 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.3 }}
+            className="mt-12 sm:mt-16"
+          >
+            <div className="max-w-3xl mx-auto">
+              <h3 className="text-lg font-semibold text-text-primary mb-6 text-center">
+                {commonApplications.title}
+              </h3>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-3">
+                {commonApplications.items.map((item, index) => {
+                  const isObject = typeof item === "object";
+                  const description = isObject ? item.title : item;
+
+                  return (
+                    <div
+                      key={index}
+                      className="flex items-start gap-3"
+                    >
+                      <span className="text-accent mt-1.5 flex-shrink-0 w-1.5 h-1.5 rounded-full bg-accent" />
+                      <span className="text-text-secondary text-sm leading-relaxed">
+                        {description}
+                      </span>
+                    </div>
+                  );
+                })}
               </div>
-            </motion.div>
-          ))}
-        </motion.div>
+            </div>
+          </motion.div>
+        )}
 
-        {/* Closing statement */}
-        {closingStatement && (
+        {/* Legacy closing statement (fallback) */}
+        {closingStatement && !commonApplications && (
           <motion.div
             initial={{ opacity: 0, y: 16 }}
             whileInView={{ opacity: 1, y: 0 }}
diff --git a/components/expertise/WhyChooseProcedure.tsx b/components/expertise/WhyChooseProcedure.tsx
index 4b42c06..9a5f3f6 100644
--- a/components/expertise/WhyChooseProcedure.tsx
+++ b/components/expertise/WhyChooseProcedure.tsx
@@ -11,6 +11,7 @@ interface Outcome {
 interface WhyChooseProcedureProps {
   title?: string;
   subtitle?: string;
+  reasonsTitle?: string;
   reasons: string[];
   outcomesTitle?: string;
   outcomes: Outcome[];
@@ -48,6 +49,7 @@ const outcomeVariants = {
 export function WhyChooseProcedure({
   title = "Why Choose Procedure",
   subtitle,
+  reasonsTitle = "Companies choose Procedure because:",
   reasons,
   outcomesTitle = "Outcomes from Recent Engagements",
   outcomes,
@@ -88,7 +90,7 @@ export function WhyChooseProcedure({
             )}
           >
             <h3 className="text-lg font-semibold text-text-primary mb-6">
-              Companies choose Procedure because:
+              {reasonsTitle}
             </h3>
             <ul className="space-y-4">
               {reasons.map((reason, index) => (
diff --git a/components/expertise/index.ts b/components/expertise/index.ts
index 4d1e9cc..c99df59 100644
--- a/components/expertise/index.ts
+++ b/components/expertise/index.ts
@@ -13,3 +13,8 @@ export { ProcessTimeline } from "./ProcessTimeline";
 export { UseCasesGrid } from "./UseCasesGrid";
 export { WhyChooseProcedure } from "./WhyChooseProcedure";
 export { QualityMatters } from "./QualityMatters";
+export { ArchitectureSection } from "./ArchitectureSection";
+export { EngagementModels } from "./EngagementModels";
+export { RiskReversal } from "./RiskReversal";
+export { ExpertiseCTAWithTestimonial } from "./ExpertiseCTAWithTestimonial";
+export { PhilosophySection } from "./PhilosophySection";
diff --git a/components/sections/Stats.tsx b/components/sections/Stats.tsx
index e92509d..a08ac45 100644
--- a/components/sections/Stats.tsx
+++ b/components/sections/Stats.tsx
@@ -2,14 +2,27 @@
 
 import { LazyMotion, m } from "@/components/ui/LazyMotion";
 
-const stats = [
+const defaultStats = [
   { value: "100+", label: "Products Shipped to Production" },
   { value: "5", label: "Days to First Deployment" },
   { value: "98%", label: "Client Retention Rate" },
   { value: "3+", label: "Years Average Partnership" },
 ];
 
-export function Stats() {
+interface Stat {
+  value: string;
+  label: string;
+}
+
+interface StatsProps {
+  title?: string;
+  stats?: Stat[];
+}
+
+export function Stats({
+  title = "Proven results from embedded engineering",
+  stats = defaultStats,
+}: StatsProps) {
   return (
     <LazyMotion>
       <section className="relative py-16 sm:py-24 overflow-hidden bg-surface">
@@ -29,7 +42,7 @@ export function Stats() {
           className="text-center mb-10 sm:mb-12"
         >
           <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-text-primary">
-            Proven results from embedded engineering
+            {title}
           </h2>
         </m.div>
 
diff --git a/components/ui/PageHero.tsx b/components/ui/PageHero.tsx
index 4ffd6da..df07953 100644
--- a/components/ui/PageHero.tsx
+++ b/components/ui/PageHero.tsx
@@ -43,7 +43,7 @@ export function PageHero({
   description,
   stats,
   primaryCTA = { text: "Talk to the Team", href: "/contact-us" },
-  secondaryCTA = { text: "View Case Studies", href: "/work" },
+  secondaryCTA,
   children,
 }: PageHeroProps) {
   // Use full class names so Tailwind can detect them (not in template literals)
@@ -177,11 +177,13 @@ export function PageHero({
                 </svg>
               </Button>
             </Link>
-            <Link href={secondaryCTA.href}>
-              <Button variant="outline" size="lg">
-                {secondaryCTA.text}
-              </Button>
-            </Link>
+            {secondaryCTA && (
+              <Link href={secondaryCTA.href}>
+                <Button variant="outline" size="lg">
+                  {secondaryCTA.text}
+                </Button>
+              </Link>
+            )}
           </motion.div>
 
           {/* Optional children content */}
diff --git a/content/services/dotnet-development.mdx b/content/services/dotnet-development.mdx
new file mode 100644
index 0000000..023adcf
--- /dev/null
+++ b/content/services/dotnet-development.mdx
@@ -0,0 +1,167 @@
+---
+title: ".NET Development Services"
+headline: "Enterprise .NET Development for Mission-Critical Systems"
+description: "We design and modernize production-grade .NET applications that scale under real-world load, integrate cleanly with enterprise ecosystems, and remain maintainable for years—not just initial release cycles."
+capabilities:
+  - title: "Custom .NET Application Development"
+    description: "Design and build enterprise-grade ASP.NET Core applications and APIs engineered for reliability, security, and sustained growth."
+    icon: "api"
+  - title: "Legacy .NET Modernization & Migration"
+    description: "Incremental modernization from .NET Framework to modern .NET runtimes using low-risk migration strategies without disrupting production."
+    icon: "workflow"
+  - title: ".NET Microservices & Distributed Systems"
+    description: "Architect distributed .NET systems with clear service boundaries, independent deployments, and resilience under sustained traffic."
+    icon: "layers"
+  - title: "Cloud-Native .NET Application Development"
+    description: "Build cloud-ready .NET systems optimized for managed environments with infrastructure, observability, and scalability built in."
+    icon: "cloud"
+  - title: ".NET Performance Engineering & Optimization"
+    description: "Identify and resolve performance bottlenecks at code and system levels to maintain responsiveness under high concurrency."
+    icon: "chart"
+  - title: ".NET Architecture & Technical Advisory"
+    description: "Provide architectural reviews, codebase assessments, and technical direction grounded in real production experience."
+    icon: "building"
+technologies:
+  - .NET 8
+  - ASP.NET Core
+  - C#
+  - Entity Framework Core
+  - Azure
+  - SQL Server
+  - PostgreSQL
+  - Redis
+  - Docker
+  - Kubernetes
+  - MediatR
+  - Serilog
+relatedExpertise:
+  - backend-development
+  - cloud
+  - kubernetes
+whoWeWorkWith:
+  title: "When .NET Development Services Are the Right Choice"
+  audiences:
+    - icon: "rocket"
+      title: "Founders & Business Leaders"
+      subtitle: ".NET development services are the right choice when:"
+      bullets:
+        - "Enterprise-grade reliability and security are required from day one"
+        - "APIs must scale predictably with user growth without architectural rewrites"
+        - "Long-term platform stability and Microsoft ecosystem support influence risk decisions"
+        - "Customers expect Microsoft-stack compliance and enterprise familiarity"
+    - icon: "code"
+      title: "CTOs & Engineering Leaders"
+      subtitle: ".NET development services are the right choice when:"
+      bullets:
+        - "Type-safe codebases are required for long-term maintainability at scale"
+        - "High-performance systems must operate reliably under sustained production load"
+        - "Azure-native integration is required for cloud-first .NET application development"
+        - "Architecture decisions must actively control technical debt over time"
+    - icon: "target"
+      title: "Product Leaders & Platform Owners"
+      subtitle: ".NET development services are the right choice when:"
+      bullets:
+        - "Faster iteration is enabled through compile-time safety and fewer runtime errors"
+        - "Applications must run consistently across Windows, Linux, and containerized environments"
+        - "Predictable release cycles are required with reduced production incidents"
+        - "Security and compliance requirements must be met without slowing product delivery"
+  commonApplications:
+    title: "Common Applications Where .NET Excels"
+    items:
+      - "Enterprise line-of-business systems with complex workflows"
+      - "High-volume API backends handling sustained traffic"
+      - "Legacy .NET platforms evolving toward modern runtimes"
+      - "Cloud-based SaaS platforms operating in managed environments"
+      - "Long-lived enterprise products requiring predictable evolution"
+philosophy:
+  title: "Our Philosophy on Building with .NET"
+  subtitle: "We approach .NET development as long-term system engineering, not short-term delivery. Every decision is made with production reality, system ownership, and future evolution in mind."
+  blocks:
+    - title: "Product Thinking Over Task Execution"
+      description: "We design .NET systems around business workflows, operational constraints, and real usage patterns—not feature lists or time-based delivery. The goal is systems that work in practice, not just on paper."
+    - title: "Ownership Is the Default"
+      description: "Every .NET system is built so internal teams can understand, operate, and extend it independently. Clear architecture decisions, documentation, and test coverage are treated as core deliverables—not optional extras."
+    - title: "A High, Non-Negotiable Quality Bar"
+      description: "Quality is not a phase. Code health, testability, and maintainability are enforced consistently so .NET systems remain reliable as they grow in complexity and usage."
+    - title: "Designed for Long-Term Evolution"
+      description: "We build .NET systems to evolve over years, not sprints. Architecture choices favor clarity, extensibility, and predictable change over short-term convenience."
+    - title: "Intentional Technical Debt Management"
+      description: "Trade-offs are made consciously, documented clearly, and revisited deliberately. Technical debt is managed as a strategic decision—not an accident that compounds over time."
+architecture:
+  title: "Architecture for Long-Lived .NET Systems"
+  subtitle: "Our .NET architectures are designed to withstand years of product evolution, framework upgrades, and infrastructure change—without forcing rewrites or destabilizing core business logic. The goal is predictable change, not fragile growth."
+  layers:
+    - name: "Domain Layer"
+      description: "Encapsulates core business rules and domain models in stable logic, isolated from frameworks and infrastructure."
+    - name: "Application Layer"
+      description: "Coordinates use cases and workflows through clear boundaries without embedding technical concerns."
+    - name: "Infrastructure Layer"
+      description: "Contains external dependencies such as databases, messaging, and integrations behind abstractions."
+    - name: "API Layer"
+      description: "Acts as a thin interface for external communication, keeping business logic independent of delivery mechanisms."
+engagementModels:
+  title: "Engagement Options"
+  subtitle: "Designed to align ownership, risk, and delivery responsibility with your product's needs."
+  models:
+    - title: "Dedicated .NET Product Team"
+      description: "A long-term engineering partnership with shared accountability and deep domain alignment."
+      bestFor: "Long-lived products and complex enterprise platforms"
+    - title: "Project-Based .NET Delivery"
+      description: "Clearly scoped engagements focused on delivering defined outcomes within agreed boundaries."
+      bestFor: "Modernization initiatives and well-defined milestones"
+    - title: ".NET Architecture & Technical Advisory"
+      description: "Targeted guidance to validate direction, assess risk, or unblock critical decisions."
+      bestFor: "Technical due diligence and architectural validation"
+    - title: "Ongoing Product Ownership"
+      description: "End-to-end responsibility for system evolution, maintenance, and operational stability."
+      bestFor: "Teams prioritizing business growth over internal engineering scale-up"
+riskReversal:
+  title: "Why Teams Choose Us for Critical .NET Systems"
+  subtitle: "When reliability, maintainability, and long-term ownership matter more than speed alone."
+  variant: "split"
+  leftTriggers:
+    - "A legacy .NET system is becoming a bottleneck"
+    - "Architectural decisions are compounding risk"
+    - "Previous vendors delivered features but left fragile systems"
+    - "Technical direction needs validation before major investment"
+    - "Delivery requires ownership, not just execution"
+  rightBlocks:
+    - title: "Discovery before commitment"
+      description: "Focused system assessment before scale"
+    - title: "Pilot before expansion"
+      description: "Contained delivery on real codebases"
+    - title: "Phased delivery with exit control"
+      description: "Progress without lock-in"
+    - title: "No vendor lock-in"
+      description: "Full code and documentation ownership"
+  closingNote: "No long-term contract required to begin. Discovery and pilot engagements available as starting points."
+ctaTestimonial:
+  name: "Engineering Leader"
+  role: "Director of Engineering"
+  company: "Fintech Platform"
+  quote: "Modernized our legacy .NET platform while feature delivery continued. The team handled risk thoughtfully and operated like senior engineers embedded in our organization."
+faqs:
+  - question: "Is .NET suitable for enterprise and mission-critical systems?"
+    answer: "Yes. .NET is widely adopted for enterprise applications due to its strong type system, high-throughput runtime, and long-term Microsoft support (LTS releases supported 3+ years). The ecosystem includes mature libraries for security, data access, and enterprise integration. Organizations like Stack Overflow and major financial institutions run core systems on .NET."
+  - question: "Can modern .NET applications scale with growing demand?"
+    answer: "Yes. Modern .NET is designed for both horizontal and vertical scaling. ASP.NET Core handles high request volumes with minimal overhead through async-first architecture. The platform supports microservices patterns, container orchestration, and distributed systems. Performance benchmarks place .NET among the fastest web frameworks available."
+  - question: "Do you work with existing or legacy .NET systems?"
+    answer: "Yes. Much of our work involves existing systems—modernizing .NET Framework applications, refactoring monoliths, or migrating to modern runtimes. We use incremental approaches like strangler fig patterns so teams continue shipping features while modernization happens in parallel, without large-scale rewrites."
+  - question: "How risky is migrating from .NET Framework to modern .NET?"
+    answer: "Risk depends on system complexity and architecture. Well-structured systems with clear boundaries migrate more smoothly. The key is incremental migration—extracting components one at a time and validating each in production. We assess codebases before proposing paths. Many migrations complete in 3-6 months while development continues."
+  - question: "Is .NET suitable for cloud-native and cross-platform applications?"
+    answer: "Yes. Modern .NET runs on Windows, Linux, and macOS, and is commonly deployed in Docker containers orchestrated through Kubernetes. Azure, AWS, and GCP all offer first-class .NET support. The runtime is optimized for containerized environments with fast startup and low memory footprint."
+  - question: "How do you ensure long-term maintainability of .NET systems?"
+    answer: "Through Clean Architecture principles that separate business logic from infrastructure, intentional dependency management with abstractions, and comprehensive test coverage. Documentation includes architecture decisions, deployment procedures, and runbooks. The goal is systems that internal teams can understand and extend independently."
+  - question: "When should teams seek external .NET expertise?"
+    answer: "When systems become business-critical and architectural decisions carry long-term consequences. When modernization is needed but internal teams lack bandwidth. When previous development left fragile code needing stabilization. Or when stakeholders need independent validation before committing resources."
+cta:
+  title: "Review Your .NET System With Senior Engineers"
+  description: "A focused conversation to evaluate your current .NET system, identify risks, and clarify next steps—before any long-term commitment.\n\nYou'll speak directly with engineers who design and modernize production .NET systems, not sales representatives."
+  buttonText: "Request a .NET Architecture Review"
+  buttonLink: "/contact-us"
+  supportingNote: "No obligation. No pressure. Clear technical direction."
+seo:
+  title: ".NET Development Services | Scalable .NET Applications | Procedure"
+  description: "Enterprise .NET development services from Procedure. Scalable .NET applications, legacy .NET modernization, .NET microservices architecture, Azure deployment. Production-grade systems for fintech and healthcare."
+---
diff --git a/lib/content-types.ts b/lib/content-types.ts
index 420e043..350f1c1 100644
--- a/lib/content-types.ts
+++ b/lib/content-types.ts
@@ -137,12 +137,19 @@ export interface ExpertiseFrontmatter extends BaseFrontmatter {
   cta?: CTABlock;
   // Optional frontend-specific sections
   whoWeWorkWith?: {
+    title?: string;
     audiences: Array<{
       icon: string;
       title: string;
-      description: string;
+      subtitle?: string;
+      description?: string;
+      bullets?: string[];
     }>;
     closingStatement?: string;
+    commonApplications?: {
+      title: string;
+      items: string[];
+    };
   };
   process?: Array<{
     number: number;
@@ -157,7 +164,11 @@ export interface ExpertiseFrontmatter extends BaseFrontmatter {
     description: string;
   }>;
   whyChoose?: {
+    title?: string;
+    subtitle?: string;
+    reasonsTitle?: string;
     reasons: string[];
+    outcomesTitle?: string;
     outcomes: Array<{
       value: string;
       label: string;
@@ -172,6 +183,39 @@ export interface ExpertiseFrontmatter extends BaseFrontmatter {
       title: string;
     }>;
   };
+  architecture?: {
+    title: string;
+    subtitle?: string;
+    diagramSrc?: string;
+    layers: Array<{
+      name: string;
+      description: string;
+    }>;
+  };
+  engagementModels?: {
+    title?: string;
+    subtitle?: string;
+    models: Array<{
+      title: string;
+      description: string;
+      bestFor: string;
+    }>;
+  };
+  riskReversal?: {
+    title?: string;
+    subtitle?: string;
+    items: Array<{
+      title: string;
+      description: string;
+    }>;
+    closingNote?: string;
+  };
+  ctaTestimonial?: {
+    name: string;
+    role: string;
+    company: string;
+    quote: string;
+  };
 }
 
 // =============================================================================
diff --git a/lib/content.ts b/lib/content.ts
index a3c2dec..4a021b8 100644
--- a/lib/content.ts
+++ b/lib/content.ts
@@ -537,6 +537,9 @@ export interface ExpertisePageForListing {
   cta: {
     headline: string;
     description: string;
+    buttonText?: string;
+    buttonLink?: string;
+    supportingNote?: string;
   };
   faqs: Array<{
     question: string;
@@ -549,12 +552,19 @@ export interface ExpertisePageForListing {
     quote: string;
   }>;
   whoWeWorkWith?: {
+    title?: string;
     audiences: Array<{
       icon: string;
       title: string;
-      description: string;
+      subtitle?: string;
+      description?: string;
+      bullets?: string[];
     }>;
     closingStatement?: string;
+    commonApplications?: {
+      title: string;
+      items: (string | { title: string; description: string })[];
+    };
   };
   process?: Array<{
     number: number;
@@ -569,12 +579,24 @@ export interface ExpertisePageForListing {
     description: string;
   }>;
   whyChoose?: {
+    title?: string;
+    subtitle?: string;
+    reasonsTitle?: string;
     reasons: string[];
+    outcomesTitle?: string;
     outcomes: Array<{
       value: string;
       label: string;
     }>;
   };
+  philosophy?: {
+    title: string;
+    subtitle?: string;
+    blocks: Array<{
+      title: string;
+      description: string;
+    }>;
+  };
   qualityMatters?: {
     costs: Array<{
       title: string;
@@ -584,6 +606,45 @@ export interface ExpertisePageForListing {
       title: string;
     }>;
   };
+  architecture?: {
+    title: string;
+    subtitle?: string;
+    diagramSrc?: string;
+    layers: Array<{
+      name: string;
+      description: string;
+    }>;
+  };
+  engagementModels?: {
+    title?: string;
+    subtitle?: string;
+    models: Array<{
+      title: string;
+      description: string;
+      bestFor: string;
+    }>;
+  };
+  riskReversal?: {
+    title?: string;
+    subtitle?: string;
+    items?: Array<{
+      title: string;
+      description: string;
+    }>;
+    closingNote?: string;
+    variant?: "grid" | "split";
+    leftTriggers?: string[];
+    rightBlocks?: Array<{
+      title: string;
+      description: string;
+    }>;
+  };
+  ctaTestimonial?: {
+    name: string;
+    role: string;
+    company: string;
+    quote: string;
+  };
   relatedExpertise: string[];
 }
 
@@ -671,6 +732,9 @@ export function getExpertiseForListing(
       description:
         frontmatter.cta?.description ||
         "Talk to our engineers about your project.",
+      buttonText: frontmatter.cta?.buttonText,
+      buttonLink: frontmatter.cta?.buttonLink,
+      supportingNote: frontmatter.cta?.supportingNote,
     },
     faqs: frontmatter.faqs || [],
     testimonials: frontmatter.testimonials || [],
@@ -680,6 +744,10 @@ export function getExpertiseForListing(
     useCases: frontmatter.useCases,
     whyChoose: frontmatter.whyChoose,
     qualityMatters: frontmatter.qualityMatters,
+    architecture: frontmatter.architecture,
+    engagementModels: frontmatter.engagementModels,
+    riskReversal: frontmatter.riskReversal,
+    ctaTestimonial: frontmatter.ctaTestimonial,
     relatedExpertise: frontmatter.relatedExpertise || [],
   };
 }

From fe9e0a3a80db135410df688c1bf346bb9279e4c3 Mon Sep 17 00:00:00 2001
From: vibemarketerpromax <chetan@procedure.tech>
Date: Mon, 9 Feb 2026 19:56:04 +0530
Subject: [PATCH 4/6] fix: Add supportingNote to CTABlock type

---
 lib/content-types.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/content-types.ts b/lib/content-types.ts
index 350f1c1..b6ab1f1 100644
--- a/lib/content-types.ts
+++ b/lib/content-types.ts
@@ -34,6 +34,7 @@ export interface CTABlock {
   description?: string;
   buttonText: string;
   buttonLink: string;
+  supportingNote?: string;
 }
 
 // =============================================================================

From b81ba473e48ab31cb3ad8c3624cd0f453dc39828 Mon Sep 17 00:00:00 2001
From: harshita375 <harshita@procedure.tech>
Date: Tue, 17 Feb 2026 15:26:31 +0530
Subject: [PATCH 5/6] feat: Refine .NET technology page with How It Works,
 interlinking, and content updates

- Add HowItWorks timeline component with 5-step engagement flow
- Add LinkedText utility for parsing markdown links in frontmatter strings
- Add internal links across capabilities, tech stack, and common applications
- Update H2 headings for better SEO and branding
- Fix hero to show single paragraph (tagline only) for dotnet page
- Add Stats subtitle with intro paragraph
- Update FAQ #1 with leading summary sentence
- Add team size detail to Dedicated .NET Team engagement model
- Update meta title for SEO
- Remove all em dashes from dotnet page content
- Add subtitle prop to Stats component

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/services/[slug]/ExpertisePageClient.tsx |  39 +++--
 components/expertise/CapabilitiesGrid.tsx   |   3 +-
 components/expertise/HowItWorks.tsx         | 134 +++++++++++++++
 components/expertise/TechStack.tsx          |   3 +-
 components/expertise/WhoWeWorkWith.tsx      |  12 +-
 components/expertise/index.ts               |   1 +
 components/sections/Stats.tsx               |   7 +
 components/ui/LinkedText.tsx                |  68 ++++++++
 content/services/dotnet-development.mdx     | 181 ++++++++++++--------
 lib/content.ts                              |  10 ++
 10 files changed, 370 insertions(+), 88 deletions(-)
 create mode 100644 components/expertise/HowItWorks.tsx
 create mode 100644 components/ui/LinkedText.tsx

diff --git a/app/services/[slug]/ExpertisePageClient.tsx b/app/services/[slug]/ExpertisePageClient.tsx
index dc835c1..0903d5a 100644
--- a/app/services/[slug]/ExpertisePageClient.tsx
+++ b/app/services/[slug]/ExpertisePageClient.tsx
@@ -18,6 +18,7 @@ import {
   EngagementModels,
   RiskReversal,
   PhilosophySection,
+  HowItWorks,
 } from "@/components/expertise";
 import { Testimonials } from "@/components/sections/Testimonials";
 import { Stats } from "@/components/sections/Stats";
@@ -200,8 +201,8 @@ export default function ExpertisePageClient({
         badge={pageData.hero.badge}
         headline={pageData.hero.headline}
         headlineAccent={pageData.hero.headlineAccent}
-        tagline={pageData.hero.tagline}
-        description={pageData.hero.description}
+        tagline={expertise.slug === "dotnet-development" ? undefined : pageData.hero.tagline}
+        description={expertise.slug === "dotnet-development" ? pageData.hero.tagline : pageData.hero.description}
         primaryCTA={
           expertise.slug === "frontend-development"
             ? { text: "Talk to a Frontend Specialist", href: "#book-call" }
@@ -227,11 +228,12 @@ export default function ExpertisePageClient({
       {expertise.slug === "dotnet-development" && (
         <Stats
           title="Proven Outcomes from Enterprise .NET Engineering"
+          subtitle="Procedure has been building production .NET systems for over a decade, from enterprise platforms to high-throughput APIs serving millions of requests."
           stats={[
-            { value: "40+", label: ".NET systems running in production" },
-            { value: "6–8 weeks", label: "Typical time to production-ready release" },
-            { value: "95%+", label: "Client retention across long-term engagements" },
-            { value: "3+ years", label: "Average system lifecycle supported" },
+            { value: "40+", label: "Production .NET Systems" },
+            { value: "6–8 Weeks", label: "Time to Production Release" },
+            { value: "95%+", label: "Client Retention Rate" },
+            { value: ".NET 8 + Azure", label: "Primary Stack" },
           ]}
         />
       )}
@@ -284,10 +286,12 @@ export default function ExpertisePageClient({
           title=".NET Technology Stack (Production-Proven)"
           variant="grouped"
           groups={[
-            { category: "Runtime & Frameworks", items: [".NET 8", "ASP.NET Core", "C#", "Entity Framework Core"] },
-            { category: "Cloud & Infrastructure", items: ["Azure", "Docker", "Kubernetes"] },
-            { category: "Data & Caching", items: ["SQL Server", "PostgreSQL", "Redis"] },
-            { category: "Observability & Messaging", items: ["Serilog", "MediatR"] },
+            { category: "Runtime & Frameworks", items: [".NET 8 / .NET 9", "ASP.NET Core", "Blazor", "Entity Framework Core", "Minimal APIs"] },
+            { category: "Cloud Platforms", items: ["Microsoft Azure", "AWS", "GCP"] },
+            { category: "Infrastructure & DevOps", items: ["Docker", "[Kubernetes](/services/kubernetes)", "Terraform", "GitHub Actions", "Azure DevOps"] },
+            { category: "Data & Caching", items: ["SQL Server", "PostgreSQL", "Redis", "Azure Cosmos DB"] },
+            { category: "Observability", items: ["Application Insights", "Serilog", "OpenTelemetry", "Seq"] },
+            { category: "Messaging & Patterns", items: ["RabbitMQ", "Azure Service Bus", "MediatR", "MassTransit"] },
           ]}
         />
       ) : (
@@ -354,6 +358,15 @@ export default function ExpertisePageClient({
         />
       )}
 
+      {pageData.howItWorks && (
+        <HowItWorks
+          title={pageData.howItWorks.title}
+          subtitle={pageData.howItWorks.subtitle}
+          steps={pageData.howItWorks.steps}
+          closingNote={pageData.howItWorks.closingNote}
+        />
+      )}
+
       {pageData.riskReversal && (
         <RiskReversal
           title={pageData.riskReversal.title}
@@ -379,7 +392,11 @@ export default function ExpertisePageClient({
             <h2 className="text-2xl sm:text-3xl md:text-5xl font-bold text-text-primary mb-6">
               Ready to Discuss Your
               <br />
-              <span className="text-highlight">{pageData.hero.badge} Project?</span>
+              <span className="text-highlight">
+                {expertise.slug === "dotnet-development"
+                  ? ".NET Project?"
+                  : `${pageData.hero.badge} Project?`}
+              </span>
             </h2>
             <p className="text-lg text-text-secondary max-w-2xl mx-auto">
               {bookingSubtext[expertise.slug] ||
diff --git a/components/expertise/CapabilitiesGrid.tsx b/components/expertise/CapabilitiesGrid.tsx
index 37fd01b..3136bb8 100644
--- a/components/expertise/CapabilitiesGrid.tsx
+++ b/components/expertise/CapabilitiesGrid.tsx
@@ -2,6 +2,7 @@
 
 import { motion } from "framer-motion";
 import { ReactNode } from "react";
+import { LinkedText } from "@/components/ui/LinkedText";
 
 interface Capability {
   icon: ReactNode;
@@ -87,7 +88,7 @@ export function CapabilitiesGrid({
                 {capability.title}
               </h3>
               <p className="text-text-secondary leading-relaxed">
-                {capability.description}
+                <LinkedText text={capability.description} />
               </p>
             </motion.div>
           ))}
diff --git a/components/expertise/HowItWorks.tsx b/components/expertise/HowItWorks.tsx
new file mode 100644
index 0000000..6e60a7a
--- /dev/null
+++ b/components/expertise/HowItWorks.tsx
@@ -0,0 +1,134 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+
+interface HowItWorksStep {
+  title: string;
+  description: string;
+}
+
+interface HowItWorksProps {
+  title?: string;
+  subtitle?: string;
+  steps: HowItWorksStep[];
+  closingNote?: string;
+}
+
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.12,
+      delayChildren: 0.2,
+    },
+  },
+};
+
+const stepVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] as const },
+  },
+};
+
+export function HowItWorks({
+  title = "How It Works",
+  subtitle,
+  steps,
+  closingNote,
+}: HowItWorksProps) {
+  return (
+    <section className="py-16 sm:py-24 bg-base">
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Section header */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5 }}
+          className="text-center mb-12 sm:mb-16"
+        >
+          <h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-text-primary mb-4">
+            {title}
+          </h2>
+          {subtitle && (
+            <p className="text-lg text-text-secondary max-w-3xl mx-auto">
+              {subtitle}
+            </p>
+          )}
+        </motion.div>
+
+        {/* Vertical timeline */}
+        <motion.div
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: "-80px" }}
+          variants={containerVariants}
+          className="relative"
+        >
+          {/* Timeline line */}
+          <div className="absolute left-[23px] sm:left-[27px] top-0 bottom-0 w-px bg-border" />
+
+          <div className="space-y-6">
+            {steps.map((step, index) => (
+              <motion.div
+                key={index}
+                variants={stepVariants}
+                className="relative flex gap-5 sm:gap-6"
+              >
+                {/* Step number circle */}
+                <div
+                  className={cn(
+                    "relative z-10 flex-shrink-0",
+                    "w-[48px] h-[48px] sm:w-[56px] sm:h-[56px]",
+                    "rounded-full flex items-center justify-center",
+                    "bg-surface-elevated border-2 border-accent/30",
+                    "group-hover:border-accent/60 transition-colors duration-300"
+                  )}
+                >
+                  <span className="text-base sm:text-lg font-bold text-accent-light">
+                    {index + 1}
+                  </span>
+                </div>
+
+                {/* Step content card */}
+                <div
+                  className={cn(
+                    "flex-1 p-5 sm:p-6 rounded-xl",
+                    "bg-surface-elevated/80 backdrop-blur-sm",
+                    "border border-border",
+                    "hover:border-accent/30 transition-colors duration-300"
+                  )}
+                >
+                  <h3 className="text-lg font-semibold text-text-primary mb-2">
+                    {step.title}
+                  </h3>
+                  <p className="text-sm sm:text-base text-text-secondary leading-relaxed">
+                    {step.description}
+                  </p>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+
+        {/* Closing note */}
+        {closingNote && (
+          <motion.p
+            initial={{ opacity: 0, y: 12 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.3 }}
+            className="text-center text-base sm:text-lg text-accent-light font-medium mt-10 sm:mt-12"
+          >
+            {closingNote}
+          </motion.p>
+        )}
+      </div>
+    </section>
+  );
+}
diff --git a/components/expertise/TechStack.tsx b/components/expertise/TechStack.tsx
index 182efec..3fcfd11 100644
--- a/components/expertise/TechStack.tsx
+++ b/components/expertise/TechStack.tsx
@@ -2,6 +2,7 @@
 
 import { motion } from "framer-motion";
 import { TechIcon, hasTechIcon } from "@/lib/tech-icons";
+import { LinkedText } from "@/components/ui/LinkedText";
 
 interface Technology {
   name: string;
@@ -89,7 +90,7 @@ export function TechStack({
                         key={itemIndex}
                         className="px-3 py-1.5 text-sm text-text-secondary bg-surface-elevated border border-border rounded-lg"
                       >
-                        {item}
+                        <LinkedText text={item} />
                       </span>
                     ))}
                   </div>
diff --git a/components/expertise/WhoWeWorkWith.tsx b/components/expertise/WhoWeWorkWith.tsx
index 6ba70ab..6902cca 100644
--- a/components/expertise/WhoWeWorkWith.tsx
+++ b/components/expertise/WhoWeWorkWith.tsx
@@ -3,6 +3,7 @@
 import { motion, AnimatePresence } from "framer-motion";
 import { ReactNode, useState } from "react";
 import { cn } from "@/lib/utils";
+import { LinkedText } from "@/components/ui/LinkedText";
 
 interface TargetAudience {
   icon: ReactNode;
@@ -233,7 +234,8 @@ export function WhoWeWorkWith({
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-3">
                 {commonApplications.items.map((item, index) => {
                   const isObject = typeof item === "object";
-                  const description = isObject ? item.title : item;
+                  const title = isObject ? item.title : item;
+                  const description = isObject ? item.description : undefined;
 
                   return (
                     <div
@@ -242,7 +244,13 @@ export function WhoWeWorkWith({
                     >
                       <span className="text-accent mt-1.5 flex-shrink-0 w-1.5 h-1.5 rounded-full bg-accent" />
                       <span className="text-text-secondary text-sm leading-relaxed">
-                        {description}
+                        <LinkedText text={title} />
+                        {description && (
+                          <>
+                            {": "}
+                            <LinkedText text={description} />
+                          </>
+                        )}
                       </span>
                     </div>
                   );
diff --git a/components/expertise/index.ts b/components/expertise/index.ts
index c99df59..cdb3eb4 100644
--- a/components/expertise/index.ts
+++ b/components/expertise/index.ts
@@ -18,3 +18,4 @@ export { EngagementModels } from "./EngagementModels";
 export { RiskReversal } from "./RiskReversal";
 export { ExpertiseCTAWithTestimonial } from "./ExpertiseCTAWithTestimonial";
 export { PhilosophySection } from "./PhilosophySection";
+export { HowItWorks } from "./HowItWorks";
diff --git a/components/sections/Stats.tsx b/components/sections/Stats.tsx
index a08ac45..83f50e2 100644
--- a/components/sections/Stats.tsx
+++ b/components/sections/Stats.tsx
@@ -16,11 +16,13 @@ interface Stat {
 
 interface StatsProps {
   title?: string;
+  subtitle?: string;
   stats?: Stat[];
 }
 
 export function Stats({
   title = "Proven results from embedded engineering",
+  subtitle,
   stats = defaultStats,
 }: StatsProps) {
   return (
@@ -44,6 +46,11 @@ export function Stats({
           <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-text-primary">
             {title}
           </h2>
+          {subtitle && (
+            <p className="text-lg text-text-secondary max-w-3xl mx-auto mt-4 leading-relaxed">
+              {subtitle}
+            </p>
+          )}
         </m.div>
 
         <div className="grid grid-cols-2 md:grid-cols-4 gap-6 sm:gap-8">
diff --git a/components/ui/LinkedText.tsx b/components/ui/LinkedText.tsx
new file mode 100644
index 0000000..4abfe1a
--- /dev/null
+++ b/components/ui/LinkedText.tsx
@@ -0,0 +1,68 @@
+import Link from "next/link";
+import { Fragment } from "react";
+
+/**
+ * Parses markdown-style links [text](url) in a string and renders them
+ * as Next.js Link components. Non-link text is rendered as plain text.
+ *
+ * Usage: <LinkedText text="Build [backend systems](/services/backend-development) at scale" />
+ */
+export function LinkedText({
+  text,
+  className,
+}: {
+  text: string;
+  className?: string;
+}) {
+  const parts = parseLinkedText(text);
+
+  if (parts.length === 1 && parts[0].type === "text") {
+    return <>{text}</>;
+  }
+
+  return (
+    <>
+      {parts.map((part, i) =>
+        part.type === "link" ? (
+          <Link
+            key={i}
+            href={part.href}
+            className={
+              className ??
+              "text-accent-light hover:text-accent underline underline-offset-2 decoration-accent/30 hover:decoration-accent/60 transition-colors"
+            }
+          >
+            {part.text}
+          </Link>
+        ) : (
+          <Fragment key={i}>{part.text}</Fragment>
+        ),
+      )}
+    </>
+  );
+}
+
+type TextPart =
+  | { type: "text"; text: string }
+  | { type: "link"; text: string; href: string };
+
+function parseLinkedText(input: string): TextPart[] {
+  const regex = /\[([^\]]+)\]\(([^)]+)\)/g;
+  const parts: TextPart[] = [];
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = regex.exec(input)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push({ type: "text", text: input.slice(lastIndex, match.index) });
+    }
+    parts.push({ type: "link", text: match[1], href: match[2] });
+    lastIndex = match.index + match[0].length;
+  }
+
+  if (lastIndex < input.length) {
+    parts.push({ type: "text", text: input.slice(lastIndex) });
+  }
+
+  return parts;
+}
diff --git a/content/services/dotnet-development.mdx b/content/services/dotnet-development.mdx
index 023adcf..83a7a18 100644
--- a/content/services/dotnet-development.mdx
+++ b/content/services/dotnet-development.mdx
@@ -1,25 +1,26 @@
 ---
 title: ".NET Development Services"
-headline: "Enterprise .NET Development for Mission-Critical Systems"
-description: "We design and modernize production-grade .NET applications that scale under real-world load, integrate cleanly with enterprise ecosystems, and remain maintainable for years—not just initial release cycles."
+headline: "Custom .NET Development Services for Mission-Critical Systems"
+tagline: "Production-grade .NET applications that scale, integrate cleanly, and stay maintainable for years. Certified engineers who work as your team, not a detached vendor."
+description: "We design and build production-grade .NET applications that scale under real-world load, integrate cleanly with enterprise ecosystems, and remain maintainable over years, not just initial release cycles."
 capabilities:
   - title: "Custom .NET Application Development"
-    description: "Design and build enterprise-grade ASP.NET Core applications and APIs engineered for reliability, security, and sustained growth."
+    description: "Enterprise-grade web applications, APIs, and [backend systems](/services/backend-development) using ASP.NET Core, C#, and Entity Framework. Architected for security and long-term maintainability."
     icon: "api"
-  - title: "Legacy .NET Modernization & Migration"
-    description: "Incremental modernization from .NET Framework to modern .NET runtimes using low-risk migration strategies without disrupting production."
+  - title: ".NET Modernization & Migration"
+    description: "Migrate from .NET Framework 4.x to .NET 8 without production downtime. Incremental strategies, including strangler fig and containerization, to reduce risk while unlocking modern performance."
     icon: "workflow"
-  - title: ".NET Microservices & Distributed Systems"
-    description: "Architect distributed .NET systems with clear service boundaries, independent deployments, and resilience under sustained traffic."
+  - title: ".NET Microservices Architecture"
+    description: "Distributed .NET systems with clear service boundaries, independent deployments, and built-in resilience. Monolith decomposition done right."
     icon: "layers"
-  - title: "Cloud-Native .NET Application Development"
-    description: "Build cloud-ready .NET systems optimized for managed environments with infrastructure, observability, and scalability built in."
+  - title: "Cloud-Native .NET Development"
+    description: "[Cloud-native .NET applications](/services/cloud) for Azure, AWS, or GCP. Infrastructure-as-code, CI/CD pipelines, and observability baked in from day one."
     icon: "cloud"
-  - title: ".NET Performance Engineering & Optimization"
-    description: "Identify and resolve performance bottlenecks at code and system levels to maintain responsiveness under high concurrency."
+  - title: ".NET Performance Optimization"
+    description: "Diagnose and fix performance bottlenecks in existing .NET applications. Memory profiling, query optimization, caching strategies, async tuning."
     icon: "chart"
-  - title: ".NET Architecture & Technical Advisory"
-    description: "Provide architectural reviews, codebase assessments, and technical direction grounded in real production experience."
+  - title: ".NET Consulting & Advisory"
+    description: "Architectural reviews, codebase assessments, and technical direction from engineers with production experience. Validate decisions before major investments."
     icon: "building"
 technologies:
   - .NET 8
@@ -39,57 +40,64 @@ relatedExpertise:
   - cloud
   - kubernetes
 whoWeWorkWith:
-  title: "When .NET Development Services Are the Right Choice"
+  title: "When to Choose a .NET Development Company"
   audiences:
     - icon: "rocket"
-      title: "Founders & Business Leaders"
-      subtitle: ".NET development services are the right choice when:"
+      title: "For Founders & Business Leaders"
+      subtitle: "Consider .NET when:"
       bullets:
-        - "Enterprise-grade reliability and security are required from day one"
-        - "APIs must scale predictably with user growth without architectural rewrites"
-        - "Long-term platform stability and Microsoft ecosystem support influence risk decisions"
-        - "Customers expect Microsoft-stack compliance and enterprise familiarity"
+        - "Enterprise customers will scrutinize your product for security and compliance"
+        - "You need predictable scaling without re-architecting every 18 months"
+        - "You want a stack with 20+ years of Microsoft backing and a large talent pool"
+        - "Your target customers already run on Microsoft ecosystems"
     - icon: "code"
-      title: "CTOs & Engineering Leaders"
-      subtitle: ".NET development services are the right choice when:"
+      title: "For CTOs & Engineering Leaders"
+      subtitle: ".NET makes sense when:"
       bullets:
-        - "Type-safe codebases are required for long-term maintainability at scale"
-        - "High-performance systems must operate reliably under sustained production load"
-        - "Azure-native integration is required for cloud-first .NET application development"
-        - "Architecture decisions must actively control technical debt over time"
+        - "Strong typing and compile-time safety matter for complex domain logic"
+        - "Performance requirements demand a runtime that competes with Go and Rust"
+        - "Your team values mature tooling: Visual Studio, Rider, robust debugging"
+        - "LTS releases align with your maintenance and upgrade cycles"
     - icon: "target"
-      title: "Product Leaders & Platform Owners"
-      subtitle: ".NET development services are the right choice when:"
+      title: "For Product Leaders & Platform Owners"
+      subtitle: ".NET is strategic when:"
       bullets:
-        - "Faster iteration is enabled through compile-time safety and fewer runtime errors"
-        - "Applications must run consistently across Windows, Linux, and containerized environments"
-        - "Predictable release cycles are required with reduced production incidents"
-        - "Security and compliance requirements must be met without slowing product delivery"
+        - "Building internal platforms that need to outlast individual team tenures"
+        - "Backward compatibility matters: .NET's migration path is predictable"
+        - "You need enterprise integrations (Active Directory, SQL Server, Dynamics)"
+        - "Multiple deployment targets: cloud, on-prem, hybrid, edge"
   commonApplications:
-    title: "Common Applications Where .NET Excels"
+    title: "What Teams Build With .NET"
     items:
-      - "Enterprise line-of-business systems with complex workflows"
-      - "High-volume API backends handling sustained traffic"
-      - "Legacy .NET platforms evolving toward modern runtimes"
-      - "Cloud-based SaaS platforms operating in managed environments"
-      - "Long-lived enterprise products requiring predictable evolution"
+      - title: "Enterprise Applications"
+        description: "ERP extensions, CRM integrations, workflow automation, internal tools"
+      - title: "API Backends"
+        description: "High-throughput REST APIs, gRPC services, event-driven systems"
+      - title: "[SaaS Platforms](/industries/saas)"
+        description: "Multi-tenant apps, subscription billing, customer portals"
+      - title: "Legacy Modernization"
+        description: ".NET Framework migrations, monolith decomposition"
+      - title: "Regulated Industries"
+        description: "[Financial services](/industries/financial-services), [healthcare](/industries/healthcare), compliance-heavy systems"
+      - title: "Real-Time & Background Processing"
+        description: "SignalR dashboards, scheduled jobs, queue-based workers, ETL pipelines"
 philosophy:
   title: "Our Philosophy on Building with .NET"
   subtitle: "We approach .NET development as long-term system engineering, not short-term delivery. Every decision is made with production reality, system ownership, and future evolution in mind."
   blocks:
     - title: "Product Thinking Over Task Execution"
-      description: "We design .NET systems around business workflows, operational constraints, and real usage patterns—not feature lists or time-based delivery. The goal is systems that work in practice, not just on paper."
+      description: "We design .NET systems around business workflows, operational constraints, and real usage patterns, not feature lists or time-based delivery. The goal is systems that work in practice, not just on paper."
     - title: "Ownership Is the Default"
-      description: "Every .NET system is built so internal teams can understand, operate, and extend it independently. Clear architecture decisions, documentation, and test coverage are treated as core deliverables—not optional extras."
+      description: "Every .NET system is built so internal teams can understand, operate, and extend it independently. Clear architecture decisions, documentation, and test coverage are treated as core deliverables, not optional extras."
     - title: "A High, Non-Negotiable Quality Bar"
       description: "Quality is not a phase. Code health, testability, and maintainability are enforced consistently so .NET systems remain reliable as they grow in complexity and usage."
     - title: "Designed for Long-Term Evolution"
       description: "We build .NET systems to evolve over years, not sprints. Architecture choices favor clarity, extensibility, and predictable change over short-term convenience."
     - title: "Intentional Technical Debt Management"
-      description: "Trade-offs are made consciously, documented clearly, and revisited deliberately. Technical debt is managed as a strategic decision—not an accident that compounds over time."
+      description: "Trade-offs are made consciously, documented clearly, and revisited deliberately. Technical debt is managed as a strategic decision, not an accident that compounds over time."
 architecture:
-  title: "Architecture for Long-Lived .NET Systems"
-  subtitle: "Our .NET architectures are designed to withstand years of product evolution, framework upgrades, and infrastructure change—without forcing rewrites or destabilizing core business logic. The goal is predictable change, not fragile growth."
+  title: "How We Architect .NET Applications"
+  subtitle: "Clean Architecture principles: business logic independent of frameworks, databases, and delivery mechanisms. When .NET 10 arrives or you swap databases, your core code doesn't change."
   layers:
     - name: "Domain Layer"
       description: "Encapsulates core business rules and domain models in stable logic, isolated from frameworks and infrastructure."
@@ -100,40 +108,57 @@ architecture:
     - name: "API Layer"
       description: "Acts as a thin interface for external communication, keeping business logic independent of delivery mechanisms."
 engagementModels:
-  title: "Engagement Options"
+  title: "Engagement Models"
   subtitle: "Designed to align ownership, risk, and delivery responsibility with your product's needs."
   models:
-    - title: "Dedicated .NET Product Team"
-      description: "A long-term engineering partnership with shared accountability and deep domain alignment."
-      bestFor: "Long-lived products and complex enterprise platforms"
+    - title: "Dedicated .NET Team"
+      description: "Full-time engineers as an extension of your organization. Shared accountability for outcomes. Teams typically range from 2–8 engineers based on project scope."
+      bestFor: "Long-lived products, complex platforms, scaling capacity"
     - title: "Project-Based .NET Delivery"
-      description: "Clearly scoped engagements focused on delivering defined outcomes within agreed boundaries."
-      bestFor: "Modernization initiatives and well-defined milestones"
-    - title: ".NET Architecture & Technical Advisory"
-      description: "Targeted guidance to validate direction, assess risk, or unblock critical decisions."
-      bestFor: "Technical due diligence and architectural validation"
-    - title: "Ongoing Product Ownership"
-      description: "End-to-end responsibility for system evolution, maintenance, and operational stability."
-      bestFor: "Teams prioritizing business growth over internal engineering scale-up"
+      description: "Fixed-scope engagement with clear deliverables, timeline, and budget."
+      bestFor: "Modernization, MVP development, defined feature builds"
+    - title: ".NET Consulting & Advisory"
+      description: "Targeted expertise: architecture reviews, migration planning, performance audits."
+      bestFor: "Technical due diligence, pre-investment validation"
+    - title: "Ongoing .NET Product Ownership"
+      description: "Full responsibility for your .NET product: development, maintenance, operations."
+      bestFor: "Non-technical founders, teams focused on business growth"
+howItWorks:
+  title: "How .NET Engagements Work at Procedure"
+  subtitle: "From first conversation to production code. Here's what to expect. No surprises, no long procurement cycles."
+  steps:
+    - title: "Discovery Call"
+      description: "A 30-minute conversation with a .NET engineer, not a sales rep. We'll understand your system, goals, and constraints. You'll get an honest assessment of whether we're the right fit. No obligation."
+    - title: "Technical Scoping"
+      description: "We define the engagement scope together: architecture review, team requirements, timeline, and deliverables. For larger projects, we conduct a paid discovery sprint (1–2 weeks) to validate assumptions before committing to a full build."
+    - title: "Pilot Engagement"
+      description: "Start small. A 2–4 week pilot on real code lets both sides evaluate fit: technical quality, communication rhythm, and working style. No long-term contract required at this stage."
+    - title: "Team Deployment & Delivery"
+      description: "Your dedicated .NET engineers are onboarded into your tools, workflows, and standups. Weekly syncs, transparent progress tracking, and direct access to your team. No layers of project managers in between."
+    - title: "Scale or Exit: Your Call"
+      description: "Every milestone leaves you with working, documented software. Scale the team up as confidence grows, or wrap up cleanly. You own 100% of the code, documentation, and infrastructure. Always."
+  closingNote: "Most teams go from first call to deployed engineers in under 3 weeks."
 riskReversal:
-  title: "Why Teams Choose Us for Critical .NET Systems"
-  subtitle: "When reliability, maintainability, and long-term ownership matter more than speed alone."
+  title: "Why Teams Choose Procedure for .NET Development"
+  subtitle: "We're not the cheapest option. We're the option when the system matters too much to get wrong."
   variant: "split"
   leftTriggers:
-    - "A legacy .NET system is becoming a bottleneck"
-    - "Architectural decisions are compounding risk"
-    - "Previous vendors delivered features but left fragile systems"
-    - "Technical direction needs validation before major investment"
-    - "Delivery requires ownership, not just execution"
+    - "Legacy .NET Framework system blocking cloud migration"
+    - "Previous vendor left code but no documentation"
+    - "Internal team stretched, need senior .NET expertise fast"
+    - "Architecture needs validation before major investment"
+    - "Need a partner who owns outcomes, not just tasks"
   rightBlocks:
-    - title: "Discovery before commitment"
-      description: "Focused system assessment before scale"
+    - title: "Discovery first"
+      description: "Honest assessment before you commit"
     - title: "Pilot before expansion"
-      description: "Contained delivery on real codebases"
-    - title: "Phased delivery with exit control"
-      description: "Progress without lock-in"
+      description: "Start contained, prove fit on real code"
     - title: "No vendor lock-in"
-      description: "Full code and documentation ownership"
+      description: "You own 100% of code, docs, and infra"
+    - title: "Transparent communication"
+      description: "Weekly syncs, full visibility"
+    - title: "Exit-ready always"
+      description: "Every milestone leaves working software"
   closingNote: "No long-term contract required to begin. Discovery and pilot engagements available as starting points."
 ctaTestimonial:
   name: "Engineering Leader"
@@ -141,14 +166,24 @@ ctaTestimonial:
   company: "Fintech Platform"
   quote: "Modernized our legacy .NET platform while feature delivery continued. The team handled risk thoughtfully and operated like senior engineers embedded in our organization."
 faqs:
+  - question: "What is the typical cost of .NET development services?"
+    answer: ".NET development services at Procedure.tech range from $5,000 for discovery engagements to $500,000+ for full enterprise applications, depending on scope and engagement model. Discovery engagements typically run $5,000–$15,000 over 1–2 weeks. MVPs range from $50,000–$150,000 over 6–12 weeks. Full enterprise applications range from $150,000–$500,000+ over 4–12 months. Dedicated teams run $25,000–$80,000/month. We provide detailed estimates after discovery with no hidden fees."
+  - question: "How long does .NET development take?"
+    answer: "Timelines depend on complexity. Simple APIs take 4–6 weeks. MVPs typically take 8–12 weeks. Full enterprise applications require 4–8 months for initial release. Legacy modernization projects span 3–12 months depending on system size. We work in sprints with continuous releases so you see progress early."
+  - question: "Do you offer .NET staff augmentation?"
+    answer: "Yes. Senior .NET engineers who integrate with your team: your repos, your processes, your standups. This works well when you have technical leadership but need capacity. For teams needing technical direction, a dedicated team model is usually a better fit."
+  - question: "What industries have you built .NET systems for?"
+    answer: "Financial services (payment processing, trading, regulatory reporting), healthcare (patient portals, claims, HIPAA-compliant systems), SaaS (multi-tenant platforms, subscription billing), and enterprise (internal tools, workflow automation, ERP integrations). Our engineers adapt quickly to new domains."
+  - question: "How do you compare to other .NET development companies?"
+    answer: "We're not the largest or cheapest. What's different: senior engineers only, no juniors learning on your project. Ownership mindset, outcomes, not just features. Transparent communication, you always know what's happening. No lock-in, you own everything, easy to leave. US + India presence, timezone coverage and cost efficiency."
   - question: "Is .NET suitable for enterprise and mission-critical systems?"
     answer: "Yes. .NET is widely adopted for enterprise applications due to its strong type system, high-throughput runtime, and long-term Microsoft support (LTS releases supported 3+ years). The ecosystem includes mature libraries for security, data access, and enterprise integration. Organizations like Stack Overflow and major financial institutions run core systems on .NET."
   - question: "Can modern .NET applications scale with growing demand?"
     answer: "Yes. Modern .NET is designed for both horizontal and vertical scaling. ASP.NET Core handles high request volumes with minimal overhead through async-first architecture. The platform supports microservices patterns, container orchestration, and distributed systems. Performance benchmarks place .NET among the fastest web frameworks available."
   - question: "Do you work with existing or legacy .NET systems?"
-    answer: "Yes. Much of our work involves existing systems—modernizing .NET Framework applications, refactoring monoliths, or migrating to modern runtimes. We use incremental approaches like strangler fig patterns so teams continue shipping features while modernization happens in parallel, without large-scale rewrites."
+    answer: "Yes. Much of our work involves existing systems: modernizing .NET Framework applications, refactoring monoliths, or migrating to modern runtimes. We use incremental approaches like strangler fig patterns so teams continue shipping features while modernization happens in parallel, without large-scale rewrites."
   - question: "How risky is migrating from .NET Framework to modern .NET?"
-    answer: "Risk depends on system complexity and architecture. Well-structured systems with clear boundaries migrate more smoothly. The key is incremental migration—extracting components one at a time and validating each in production. We assess codebases before proposing paths. Many migrations complete in 3-6 months while development continues."
+    answer: "What reduces risk: Microsoft's .NET Upgrade Assistant automates mechanical work. Incremental strategies (strangler fig) let you migrate piece by piece. Side-by-side deployment allows old and new to coexist. What increases risk: heavy Windows-specific APIs (WCF, legacy WinForms), tightly coupled architecture, and missing tests (we often write tests first). Most migrations complete in 3–6 months without production incidents."
   - question: "Is .NET suitable for cloud-native and cross-platform applications?"
     answer: "Yes. Modern .NET runs on Windows, Linux, and macOS, and is commonly deployed in Docker containers orchestrated through Kubernetes. Azure, AWS, and GCP all offer first-class .NET support. The runtime is optimized for containerized environments with fast startup and low memory footprint."
   - question: "How do you ensure long-term maintainability of .NET systems?"
@@ -156,12 +191,12 @@ faqs:
   - question: "When should teams seek external .NET expertise?"
     answer: "When systems become business-critical and architectural decisions carry long-term consequences. When modernization is needed but internal teams lack bandwidth. When previous development left fragile code needing stabilization. Or when stakeholders need independent validation before committing resources."
 cta:
-  title: "Review Your .NET System With Senior Engineers"
-  description: "A focused conversation to evaluate your current .NET system, identify risks, and clarify next steps—before any long-term commitment.\n\nYou'll speak directly with engineers who design and modernize production .NET systems, not sales representatives."
+  title: "Ready to Discuss Your .NET Project?"
+  description: "Talk directly with engineers, not sales. We'll assess fit and give honest next steps."
   buttonText: "Request a .NET Architecture Review"
   buttonLink: "/contact-us"
   supportingNote: "No obligation. No pressure. Clear technical direction."
 seo:
-  title: ".NET Development Services | Scalable .NET Applications | Procedure"
+  title: ".NET Development Services | C# & ASP.NET Core Experts | Procedure.tech"
   description: "Enterprise .NET development services from Procedure. Scalable .NET applications, legacy .NET modernization, .NET microservices architecture, Azure deployment. Production-grade systems for fintech and healthcare."
 ---
diff --git a/lib/content.ts b/lib/content.ts
index 256e984..7ce0b38 100644
--- a/lib/content.ts
+++ b/lib/content.ts
@@ -615,6 +615,15 @@ export interface ExpertisePageForListing {
       description: string;
     }>;
   };
+  howItWorks?: {
+    title?: string;
+    subtitle?: string;
+    steps: Array<{
+      title: string;
+      description: string;
+    }>;
+    closingNote?: string;
+  };
   engagementModels?: {
     title?: string;
     subtitle?: string;
@@ -752,6 +761,7 @@ export function getExpertiseForListing(
     whyChoose: frontmatter.whyChoose,
     qualityMatters: frontmatter.qualityMatters,
     architecture: frontmatter.architecture,
+    howItWorks: frontmatter.howItWorks,
     engagementModels: frontmatter.engagementModels,
     riskReversal: frontmatter.riskReversal,
     ctaTestimonial: frontmatter.ctaTestimonial,

From 2e96873beed2d7202a53ff12f4adc4ceb3aa399b Mon Sep 17 00:00:00 2001
From: harshita375 <harshita@procedure.tech>
Date: Tue, 17 Feb 2026 15:37:46 +0530
Subject: [PATCH 6/6] fix: Add missing types to ExpertiseFrontmatter for build
 compatibility

Add howItWorks, philosophy, and riskReversal split-variant fields to
ExpertiseFrontmatter in content-types.ts. Add philosophy mapping in
content.ts. Fixes Cloudflare Pages build failure.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 lib/content-types.ts | 25 ++++++++++++++++++++++++-
 lib/content.ts       |  1 +
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/lib/content-types.ts b/lib/content-types.ts
index b6ab1f1..cafb4c9 100644
--- a/lib/content-types.ts
+++ b/lib/content-types.ts
@@ -175,6 +175,14 @@ export interface ExpertiseFrontmatter extends BaseFrontmatter {
       label: string;
     }>;
   };
+  philosophy?: {
+    title: string;
+    subtitle?: string;
+    blocks: Array<{
+      title: string;
+      description: string;
+    }>;
+  };
   qualityMatters?: {
     costs: Array<{
       title: string;
@@ -193,6 +201,15 @@ export interface ExpertiseFrontmatter extends BaseFrontmatter {
       description: string;
     }>;
   };
+  howItWorks?: {
+    title?: string;
+    subtitle?: string;
+    steps: Array<{
+      title: string;
+      description: string;
+    }>;
+    closingNote?: string;
+  };
   engagementModels?: {
     title?: string;
     subtitle?: string;
@@ -205,11 +222,17 @@ export interface ExpertiseFrontmatter extends BaseFrontmatter {
   riskReversal?: {
     title?: string;
     subtitle?: string;
-    items: Array<{
+    items?: Array<{
       title: string;
       description: string;
     }>;
     closingNote?: string;
+    variant?: "grid" | "split";
+    leftTriggers?: string[];
+    rightBlocks?: Array<{
+      title: string;
+      description: string;
+    }>;
   };
   ctaTestimonial?: {
     name: string;
diff --git a/lib/content.ts b/lib/content.ts
index 7ce0b38..368ee5e 100644
--- a/lib/content.ts
+++ b/lib/content.ts
@@ -759,6 +759,7 @@ export function getExpertiseForListing(
     useCasesSubtitle: frontmatter.useCasesSubtitle,
     useCases: frontmatter.useCases,
     whyChoose: frontmatter.whyChoose,
+    philosophy: frontmatter.philosophy,
     qualityMatters: frontmatter.qualityMatters,
     architecture: frontmatter.architecture,
     howItWorks: frontmatter.howItWorks,