From 9e4afd215b4455642153b84e8eac3514e8fac132 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Wed, 25 Mar 2026 21:55:23 +0100
Subject: [PATCH] polish: tighten spacing + visual refinements across all
 sections
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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 |  2 +-
 src/components/sections/Configurator.tsx     |  2 +-
 src/components/sections/Philosophy.tsx       |  2 +-
 src/components/sections/Process.tsx          |  2 +-
 src/components/sections/SelectedWorks.tsx    | 10 +++++-----
 src/components/sections/ServicesOverview.tsx |  6 +++---
 src/components/sections/TrustBar.tsx         |  4 ++--
 7 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/configurator/StepServices.tsx b/src/components/configurator/StepServices.tsx
index 8fc49ad..f741913 100644
--- a/src/components/configurator/StepServices.tsx
+++ b/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}
diff --git a/src/components/sections/Configurator.tsx b/src/components/sections/Configurator.tsx
index 06b8e63..2d157bb 100644
--- a/src/components/sections/Configurator.tsx
+++ b/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">
 
diff --git a/src/components/sections/Philosophy.tsx b/src/components/sections/Philosophy.tsx
index 72a669c..d300ea6 100644
--- a/src/components/sections/Philosophy.tsx
+++ b/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">
 
diff --git a/src/components/sections/Process.tsx b/src/components/sections/Process.tsx
index b832339..c149e6e 100644
--- a/src/components/sections/Process.tsx
+++ b/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">
 
         {/*
diff --git a/src/components/sections/SelectedWorks.tsx b/src/components/sections/SelectedWorks.tsx
index 0af7258..061d841 100644
--- a/src/components/sections/SelectedWorks.tsx
+++ b/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%; }
diff --git a/src/components/sections/ServicesOverview.tsx b/src/components/sections/ServicesOverview.tsx
index cdcc9d9..3c312b3 100644
--- a/src/components/sections/ServicesOverview.tsx
+++ b/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"
diff --git a/src/components/sections/TrustBar.tsx b/src/components/sections/TrustBar.tsx
index 8ea5d9f..4ca7832 100644
--- a/src/components/sections/TrustBar.tsx
+++ b/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)',
         }}