polish: tighten spacing + visual refinements across all sections

- Reduced py-24 → py-20 on Services, Configurator, Process, Works, Philosophy
- TrustBar: py-16 → py-12, gradient bridge adjusted
- Services: pillar divider opacity increased (outline/20), header gap tightened
- Configurator: added subtle dividers between service cards
- SelectedWorks: darkened coming-soon text and border opacity
- Philosophy: confirmed 2px primary border on pillars

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/configurator/StepServices.tsx

@@ -262,7 +262,7 @@ export default function StepServices({ formData, setFormData, onNext }: StepProp
       </div>
 
       {/* Service cards */}
-      <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-0 divide-y divide-outline-variant/10">
         {SERVICES.map((option) => (
           <ServiceCard
             key={option.id}

src/components/sections/Configurator.tsx

@@ -36,7 +36,7 @@ export default function Configurator() {
   ];
 
   return (
-    <section id="configure" className="bg-surface-low py-24">
+    <section id="configure" className="bg-surface-low py-20">
       <div className="container mx-auto px-6">
         <div className="grid grid-cols-1 gap-12 lg:grid-cols-12">
 

src/components/sections/Philosophy.tsx

@@ -315,7 +315,7 @@ export default function Philosophy() {
   const t = useTranslations();
 
   return (
-    <section id="about" className="bg-surface py-24">
+    <section id="about" className="bg-surface py-20">
       <div className="container mx-auto px-6">
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-start">
 

src/components/sections/Process.tsx

@@ -105,7 +105,7 @@ export default function Process() {
   const t = useTranslations();
 
   return (
-    <section id="process" className="bg-surface-low py-24">
+    <section id="process" className="bg-surface-low py-20">
       <div className="container mx-auto px-6">
 
         {/*

src/components/sections/SelectedWorks.tsx

@@ -514,7 +514,7 @@ function ComingSoonCard({ item }: { item: ComingSoonItem }) {
       className={cn(
         'relative flex flex-col items-center justify-center gap-4',
         'rounded-xl p-8 min-h-[160px]',
-        'border border-dashed border-outline-variant/30',
+        'border border-dashed border-outline-variant/50',
         'coming-soon-card',
         'overflow-hidden',
       )}
@@ -528,14 +528,14 @@ function ComingSoonCard({ item }: { item: ComingSoonItem }) {
       <div className="relative z-10 flex flex-col items-center gap-3 text-center">
         <Icon
           size={20}
-          className="text-outline/40"
+          className="text-outline/60"
           strokeWidth={1.5}
         />
         <div>
-          <p className="font-serif text-base font-medium text-on-surface/40 leading-snug">
+          <p className="font-serif text-base font-medium text-on-surface/60 leading-snug">
             {item.title}
           </p>
-          <p className="label-md text-outline/50 mt-1">{item.subtitle}</p>
+          <p className="label-md text-outline/70 mt-1">{item.subtitle}</p>
         </div>
       </div>
     </motion.div>
@@ -551,7 +551,7 @@ export default function SelectedWorks() {
   const secondaryProjects = PROJECTS.filter((p) => !p.featured);
 
   return (
-    <section id="work" className="bg-surface-low py-24">
+    <section id="work" className="bg-surface-low py-20">
       <style>{`
         @keyframes dashed-drift {
           0%   { background-position: 0 0, 100% 0, 100% 100%, 0 100%; }

src/components/sections/ServicesOverview.tsx

@@ -46,7 +46,7 @@ export default function ServicesOverview() {
   return (
     <section
       id="services"
-      className="relative bg-surface py-24"
+      className="relative bg-surface py-20"
       style={{
         backgroundImage: [
           'repeating-linear-gradient(0deg, rgba(25,28,29,0.02) 0px, rgba(25,28,29,0.02) 1px, transparent 1px, transparent 48px)',
@@ -57,7 +57,7 @@ export default function ServicesOverview() {
       <div className="container mx-auto px-6">
 
         {/* Section header */}
-        <div className="mb-16">
+        <div className="mb-12">
           <SectionHeader
             eyebrow={t('services.eyebrow')}
             title={t('services.title')}
@@ -66,7 +66,7 @@ export default function ServicesOverview() {
         </div>
 
         {/* Three-pillar grid with gap-px separator trick */}
-        <div className="bg-outline/10 rounded-xl overflow-hidden shadow-subtle">
+        <div className="bg-outline/20 rounded-xl overflow-hidden shadow-subtle">
           <motion.div
             variants={staggerContainerWide}
             initial="hidden"

src/components/sections/TrustBar.tsx

@@ -111,11 +111,11 @@ export default function TrustBar() {
   return (
     <section
       aria-label="Trust indicators"
-      className="relative bg-surface-low py-16"
+      className="relative bg-surface-low py-12"
     >
       {/* Gradient bridge — blends hero surface-high into this section */}
       <div
-        className="absolute top-0 left-0 right-0 h-8 pointer-events-none"
+        className="absolute top-0 left-0 right-0 h-16 pointer-events-none"
         style={{
           background: 'linear-gradient(to bottom, #ffffff, transparent)',
         }}