v4.0.0.2

src/lib/components/ServicesSection.svelte

@@ -67,22 +67,22 @@
     .map(({ service }) => service);
 </script>
 
-<section id="services" use:reveal={{ delay: 20 }} class="reveal-block">
+<section id="services" use:reveal={{ delay: 20, distance: 0 }} class="reveal-block">
   <div class="services-inner">
-    <div class="section-header">
+    <div class="section-header fade-up">
       <h2 class="section-heading">{heading}</h2>
       <p class="section-intro services-intro">{intro}</p>
     </div>
 
-  
 
-    <div class="services-grid">
+
+    <div class="services-grid stagger-children">
       {#each orderedServices as service}
         {@const meta = serviceMeta[service.title]}
         <a
           href={service.href}
           class:service-card-featured={meta?.featured}
-          class="service-card"
+          class="service-card fade-up"
           aria-label={`${service.title} — view service page`}
         >
           <div class="service-card-media">
@@ -452,4 +452,15 @@
     opacity: 1;
     transform: translate3d(0, 0, 0);
   }
+
+  /* Tier choreography — header settles, then the three cards cascade. */
+  @media (prefers-reduced-motion: no-preference) {
+    :global(.reveal-visible) .section-header {
+      transition-delay: 40ms;
+    }
+
+    :global(.reveal-visible) .services-grid > :nth-child(1) { transition-delay: 180ms; }
+    :global(.reveal-visible) .services-grid > :nth-child(2) { transition-delay: 260ms; }
+    :global(.reveal-visible) .services-grid > :nth-child(3) { transition-delay: 340ms; }
+  }
 </style>