refactor(home): align contact CTA typography to the type scale

Use the eyebrow/.text-h2/body-lg tokens and caption/small labels so the
contact CTA matches the unified section styling. No structural change.

components/home/contact-cta-section.tsx

@@ -19,26 +19,26 @@ export function ContactCtaSection({
       <AppCard className="overflow-hidden">
         <div className="grid gap-6 rounded-nested border border-border/70 bg-background p-6 sm:p-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-end lg:p-10">
           <div className="space-y-4">
-            <p className="text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+            <p className="eyebrow text-caption font-medium text-brand-primary">
               {copy.eyebrow}
             </p>
-            <h2 className="max-w-3xl text-balance text-3xl font-semibold tracking-[-0.05em] text-foreground sm:text-4xl lg:text-5xl">
+            <h2 className="max-w-3xl text-balance text-h2 text-foreground">
               {copy.title}
             </h2>
-            <p className="max-w-2xl text-sm leading-7 text-muted-foreground sm:text-base">
+            <p className="max-w-2xl text-body-lg text-muted-foreground">
               {copy.description}
             </p>
 
-            <div className="flex flex-wrap gap-6 text-sm">
+            <div className="flex flex-wrap gap-8 pt-2">
               <div className="space-y-1">
-                <p className="font-semibold text-foreground">{copy.emailLabel}</p>
+                <p className="text-caption font-medium text-muted-foreground">{copy.emailLabel}</p>
-                <a href={`mailto:${copy.emailValue}`} className="text-muted-foreground hover:text-foreground">
+                <a href={`mailto:${copy.emailValue}`} className="text-small text-foreground transition-colors hover:text-brand-primary">
                   {copy.emailValue}
                 </a>
               </div>
               <div className="space-y-1">
-                <p className="font-semibold text-foreground">{copy.availabilityLabel}</p>
+                <p className="text-caption font-medium text-muted-foreground">{copy.availabilityLabel}</p>
-                <p className="text-muted-foreground">{copy.availabilityValue}</p>
+                <p className="text-small text-foreground">{copy.availabilityValue}</p>
               </div>
             </div>
           </div>