Add Soul Portrait - Art Alchemy service and Cal.com booking links

- Add 4th service card: Soul Portrait (Art Alchemy) with signature
  methodology badge, using soul-agreement artwork
- Change services grid from 3-column to 2-column for 4 cards
- Update "Book a Session" buttons to link to book.xhivart.jeffemmett.com
  (Cal.com self-hosted booking platform)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/app/page.tsx

@@ -241,6 +241,15 @@ function ServicesSection() {
       color: 'rose',
       image: '/images/services/deep-integration.webp',
     },
+    {
+      title: 'Soul Portrait',
+      subtitle: 'Art Alchemy',
+      duration: 'Group Workshops · TRIBAL Experience',
+      description: 'A signature methodology weaving visionary art with therapeutic process. Through guided creative immersion in group workshop settings, participants access deeper layers of self-expression, emotional release and soul integration — art as medicine, as mirror, as transformation.',
+      color: 'pink',
+      image: '/images/art/soul-agreement.webp',
+      highlighted: true,
+    },
   ];
 
   return (
@@ -261,9 +270,9 @@ function ServicesSection() {
           </p>
         </div>
 
-        <div className="grid md:grid-cols-3 gap-8">
+        <div className="grid md:grid-cols-2 gap-8">
           {services.map((service, index) => (
-            <div key={index} className="group">
+            <div key={index} className={`group ${service.highlighted ? 'ring-2 ring-[var(--accent-gold)] rounded-xl' : ''}`}>
               <div className="relative aspect-[4/3] rounded-t-xl overflow-hidden">
                 <Image
                   src={service.image}
@@ -273,6 +282,11 @@ function ServicesSection() {
                 />
               </div>
               <div className={`service-card ${service.color} rounded-t-none`}>
+                {service.highlighted && (
+                  <p className="font-sans-alt text-[10px] tracking-[0.25em] text-[var(--accent-gold)] mb-3">
+                    SIGNATURE METHODOLOGY
+                  </p>
+                )}
                 <h3 className="text-2xl font-light mb-2">{service.title}</h3>
                 <p className="font-sans-alt text-xs tracking-widest text-[var(--text-muted)] mb-1">
                   {service.subtitle}
@@ -289,9 +303,9 @@ function ServicesSection() {
         </div>
 
         <div className="flex justify-center mt-20">
-          <Link href="#contact" className="btn-outline">
+          <a href="https://book.xhivart.jeffemmett.com" target="_blank" rel="noopener noreferrer" className="btn-outline">
             Book a Session
-          </Link>
+          </a>
         </div>
       </div>
     </section>
@@ -544,9 +558,9 @@ function WorkWithMeSection() {
           </p>
         </div>
         <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
-          <Link href="#contact" className="btn-outline btn-outline-light">
+          <a href="https://book.xhivart.jeffemmett.com" target="_blank" rel="noopener noreferrer" className="btn-outline btn-outline-light">
             Book a Session
-          </Link>
+          </a>
           <Link href="#contact" className="btn-filled" style={{ background: 'var(--accent-gold)', borderColor: 'var(--accent-gold)' }}>
             Contact Me
           </Link>