blocks-dusted 0.1.11 → 0.1.12

package/templates/blocks/DDHG-ProcessSec/Component.tsx

@@ -121,8 +121,8 @@ const defaultSteps: ProcessStep[] = [
     substeps: [
       { label: 'Site analysis' },
       { label: 'User research' },
-      { label: 'Brief definition' }
-    ]
+      { label: 'Brief definition' },
+    ],
   },
   {
     num: '02',
@@ -132,8 +132,8 @@ const defaultSteps: ProcessStep[] = [
     substeps: [
       { label: 'Spatial planning' },
       { label: 'Material selection' },
-      { label: 'Mood boards' }
-    ]
+      { label: 'Mood boards' },
+    ],
   },
   {
     num: '03',
@@ -143,8 +143,8 @@ const defaultSteps: ProcessStep[] = [
     substeps: [
       { label: 'Technical drawings' },
       { label: '3D visualization' },
-      { label: 'Specification' }
-    ]
+      { label: 'Specification' },
+    ],
   },
   {
     num: '04',
@@ -154,9 +154,9 @@ const defaultSteps: ProcessStep[] = [
     substeps: [
       { label: 'Construction oversight' },
       { label: 'Quality assurance' },
-      { label: 'Final handover' }
-    ]
-  }
+      { label: 'Final handover' },
+    ],
+  },
 ]
 
 let globalInstanceCounter = 0
@@ -164,7 +164,7 @@ let globalInstanceCounter = 0
 function FadeUpOnInView({
   children,
   className = '',
-  delay = 0
+  delay = 0,
 }: {
   children: React.ReactNode
   className?: string
@@ -188,7 +188,7 @@ function FadeUpOnInView({
           node.style.transitionDelay = '0s'
         }
       },
-      { threshold: 0.25 }
+      { threshold: 0.25 },
     )
 
     observer.observe(node)
@@ -203,7 +203,7 @@ function FadeUpOnInView({
         display: 'inline-block',
         opacity: 0,
         transform: 'translateY(24px)',
-        transition: 'opacity 700ms ease, transform 700ms ease'
+        transition: 'opacity 700ms ease, transform 700ms ease',
       }}
     >
       {children}
@@ -214,7 +214,7 @@ function FadeUpOnInView({
 function RevealText({
   text,
   className = '',
-  instanceIndex
+  instanceIndex,
 }: {
   text: string[]
   className?: string
@@ -243,7 +243,7 @@ function RevealText({
           setIsVisible(false)
         }
       },
-      { threshold: 0.3 }
+      { threshold: 0.3 },
     )
 
     observer.observe(node)
@@ -271,7 +271,7 @@ function RevealText({
           ref={textRef}
           className={cn(
             'process-section-reveal-text reveal-text animation inline-block h-auto bg-transparent text-left font-bold uppercase leading-none tracking-[1px]',
-            className
+            className,
           )}
         >
           {words.map((word, wordIndex) => {
@@ -297,7 +297,7 @@ function RevealText({
                         animationDuration: '1s',
                         animationFillMode: 'forwards',
                         animationDelay: `${baseDelay + index * 0.05}s`,
-                        transitionTimingFunction: 'cubic-bezier(0.075, 0.82, 0.165, 1)'
+                        transitionTimingFunction: 'cubic-bezier(0.075, 0.82, 0.165, 1)',
                       }}
                     >
                       {char}
@@ -321,7 +321,7 @@ function StaggerFadeUp({
   className = '',
   delay = 0,
   as: Tag = 'div',
-  style
+  style,
 }: {
   children: React.ReactNode
   className?: string
@@ -344,7 +344,7 @@ function StaggerFadeUp({
         node.style.transitionDelay = `${delay}s`
         observer.unobserve(node)
       },
-      { threshold: 0.18 }
+      { threshold: 0.18 },
     )
 
     observer.observe(node)
@@ -361,7 +361,7 @@ function StaggerFadeUp({
         filter: 'blur(6px)',
         transition:
           'opacity 820ms ease, transform 820ms cubic-bezier(0.22, 1, 0.36, 1), filter 820ms ease',
-        ...style
+        ...style,
       }}
     >
       {children}
@@ -395,25 +395,24 @@ function ProcessDiagram({ label, content }: { label?: string | null; content?: a
       transition={{ duration: 0.9, delay: 0.3, ease: [0.22, 1, 0.36, 1] }}
     >
       <div className="ProcessSectionDiagram02 z-plane-0 p-5 md:p-8">
-        <p className="ProcessSectionDiagram03 mb-4 flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
+        <p className="ProcessSectionDiagram03 mb-4 flex items-center gap-2 font-mono text-xs uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
           <Workflow className="ProcessSectionDiagram04 h-3.5 w-3.5" strokeWidth={1.5} />
           {label || 'Process Flow Diagram'}
         </p>
 
         {hasRichTextContent(content) ? (
-          <div className="ProcessSectionDiagram05 relative min-h-[300px] w-full overflow-hidden">
+          <div className="ProcessSectionDiagram05 relative min-h-75 w-full overflow-hidden">
             <RichText
               data={content}
               enableGutter={false}
               enableProse={false}
-              className="ProcessSectionDiagram06 ProcessSectionRichTextVisual h-full min-h-[300px] w-full [&>*]:m-0 [&_.media-block]:m-0 [&_img]:m-0"
+              className="ProcessSectionDiagram06 ProcessSectionRichTextVisual h-full min-h-75 w-full bg-stone-100/50 p-4 dark:bg-stone-900/50 *:m-0 [&_.media-block]:m-0 [&_img]:m-0"
             />
           </div>
         ) : (
-          <div className="ProcessSectionDiagram07 flex min-h-[300px] w-full bg-gradient-to-br from-[#838383] to-[#8e887c] dark:from-[#838383] dark:to-[#8e887c] items-center justify-center">
-            <span className="ProcessSectionDiagram08 inline-flex items-center gap-2 text-[10px] uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
-              <InlineLogoIcon className="ProcessSectionDiagram09 h-auto w-[6rem] opacity-90" />
-              |{' '}
+          <div className="ProcessSectionDiagram07 flex min-h-75 w-full bg-linear-to-br from-[#838383] to-[#8e887c] dark:from-[#838383] dark:to-[#8e887c] items-center justify-center">
+            <span className="ProcessSectionDiagram08 inline-flex items-center gap-2 text-xs uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
+              <InlineLogoIcon className="ProcessSectionDiagram09 h-auto w-24 opacity-90" />|{' '}
             </span>
           </div>
         )}
@@ -435,7 +434,7 @@ export const DDHGProcessSec: React.FC<DDHGProcessSecProps> = ({
   diagramLabel = 'Process Flow Diagram',
   diagramContent,
   diagramVisualContent,
-  steps
+  steps,
 }) => {
   const processSteps = getSteps(steps)
   const visualContent = diagramContent || diagramVisualContent
@@ -461,7 +460,7 @@ export const DDHGProcessSec: React.FC<DDHGProcessSecProps> = ({
             <StaggerFadeUp
               as="p"
               delay={0.05}
-              className="ProcessSection04 eyebrowPrefix eyebrowEmphasis mb-2 origin-left !scale-80 text-xs uppercase tracking-[0.2em] text-stone-400 dark:text-stone-400"
+              className="ProcessSection04 eyebrowPrefix eyebrowEmphasis mb-2 origin-left text-xs uppercase tracking-[0.2em] text-stone-400 dark:text-stone-400"
             >
               {eyebrowPrefix && (
                 <span className="ProcessSection05 eyebrowPrefix font-light">{eyebrowPrefix} </span>
@@ -503,37 +502,37 @@ export const DDHGProcessSec: React.FC<DDHGProcessSecProps> = ({
                   transition={{ duration: 0.9, delay: i * 0.1, ease: [0.22, 1, 0.36, 1] }}
                 >
                   <div className="ProcessSection13 flex gap-6">
-                    <div className="ProcessSection14 flex flex-shrink-0 flex-col items-center">
-                      <div className="ProcessSection15 z-plane-1 flex h-14 w-14 items-center justify-center border border-[#D9D7D1]">
+                    <div className="ProcessSection14 flex shrink-0 flex-col items-center">
+                      <div className="ProcessSection15 bg-stone-200 dark:bg-zinc-900 z-plane-1 flex h-14 w-14 items-center justify-center rounded-md squircle border border-stone-100 dark:border-zinc-800">
                         <span className="ProcessSection16 text-lg font-semibold text-stone-700 dark:text-stone-200">
                           {step.num || String(i + 1).padStart(2, '0')}
                         </span>
                       </div>
                       {i < processSteps.length - 1 && (
                         <motion.div
-                          className="ProcessSection17 mb-2 mt-2 w-px flex-grow bg-stone-500"
+                          className="ProcessSection17 mb-2 mt-2 w-px grow bg-indigo-500"
                           initial={{ scaleY: 0, opacity: 0 }}
                           whileInView={{ scaleY: 1, opacity: 1 }}
                           viewport={{ once: true, amount: 0.2 }}
                           transition={{
                             duration: 0.8,
                             delay: i * 0.1 + 0.2,
-                            ease: [0.22, 1, 0.36, 1]
+                            ease: [0.22, 1, 0.36, 1],
                           }}
                           style={{ minHeight: 40, transformOrigin: 'top' }}
                         />
                       )}
                     </div>
 
-                    <div className="ProcessSection18 flex-grow pb-2">
-                      <div className="ProcessSection19 p-5 md:p-6 border-border border z-depth-hover hover:shadow-2xl hover:-translate-y-2">
+                    <div className="ProcessSection18 grow pb-2">
+                      <div className="ProcessSection19 bg-stone-200 dark:bg-zinc-900 rounded-md squircle border-border border p-5 transition-all duration-300 z-depth-hover hover:shadow-2xl hover:-translate-y-2 md:p-6">
                         {step.title && (
-                          <h3 className="ProcessSection20 mb-2 text-lg font-semibold text-purple-700 dark:text-purple-500">
+                          <h2 className="ProcessSection20 mb-2 text-2xl font-semibold text-indigo-700 dark:text-indigo-500 md:text-3xl">
                             {step.title}
-                          </h3>
+                          </h2>
                         )}
                         {getStepDescription(step) && (
-                          <p className="ProcessSection21 mb-4 text-[13px] font-light leading-relaxed text-stone-700 dark:text-stone-200">
+                          <p className="ProcessSection21 mb-4 text-base font-light leading-relaxed text-stone-700 dark:text-stone-200">
                             {getStepDescription(step)}
                           </p>
                         )}
@@ -545,8 +544,8 @@ export const DDHGProcessSec: React.FC<DDHGProcessSecProps> = ({
                                 <span
                                   key={substep.id || `${substep.label}-${subIndex}`}
                                   className={cn(
-                                    'ProcessSection23 arch-edge-sm border border-[#D9D7D1] px-2 py-1 text-[10px] text-stone-600 dark:text-stone-300',
-                                    `ProcessSectionSubstep${i + 1}-${subIndex + 1}`
+                                    'ProcessSection23 arch-edge-sm rounded-md squircle border border-stone-300 px-2 py-1 text-xs text-stone-600 dark:border-stone-700 dark:text-stone-300',
+                                    `ProcessSectionSubstep${i + 1}-${subIndex + 1}`,
                                   )}
                                 >
                                   {substep.label}

package/templates/blocks/DDHG-ServiceDetails/Component.tsx

@@ -6,7 +6,7 @@ import { cn } from '@/utilities/ui'
 import {
   ServiceDetailCard,
   type ServiceDetailItem,
-  type ServiceDetailLayout
+  type ServiceDetailLayout,
 } from './ServiceDetailCard'
 
 export type DDHGServiceDetailsProps = {
@@ -35,8 +35,8 @@ const defaultServices: ServiceDetailItem[] = [
       { label: 'Brief development' },
       { label: 'Space audit' },
       { label: 'Stakeholder alignment' },
-      { label: 'Design direction' }
-    ]
+      { label: 'Design direction' },
+    ],
   },
   {
     code: 'SVC-02',
@@ -49,8 +49,8 @@ const defaultServices: ServiceDetailItem[] = [
       { label: 'Concept strategy' },
       { label: 'Mood and material direction' },
       { label: 'Spatial planning' },
-      { label: 'Preliminary visualisation' }
-    ]
+      { label: 'Preliminary visualisation' },
+    ],
   },
   {
     code: 'SVC-03',
@@ -63,9 +63,9 @@ const defaultServices: ServiceDetailItem[] = [
       { label: 'Interior detailing' },
       { label: 'Material schedules' },
       { label: 'Furniture direction' },
-      { label: 'Lighting coordination' }
-    ]
-  }
+      { label: 'Lighting coordination' },
+    ],
+  },
 ]
 
 function getServices(services?: ServiceDetailItem[] | null) {
@@ -75,7 +75,7 @@ function getServices(services?: ServiceDetailItem[] | null) {
 function getLayout(
   service: ServiceDetailItem,
   index: number,
-  layoutMode?: 'cycle' | 'manual' | null
+  layoutMode?: 'cycle' | 'manual' | null,
 ): ServiceDetailLayout {
   if (layoutMode === 'manual' && service.layout && service.layout !== 'auto') return service.layout
   return layoutCycle[index % layoutCycle.length]
@@ -100,7 +100,7 @@ export const DDHGServiceDetails: React.FC<DDHGServiceDetailsProps> = ({
   eyebrowPrefix = 'detailed',
   eyebrowEmphasis = 'breakdown',
   layoutMode = 'cycle',
-  services
+  services,
 }) => {
   const serviceItems = useMemo(() => getServices(services), [services])
   const [expanded, setExpanded] = useState<number | null>(null)
@@ -123,7 +123,7 @@ export const DDHGServiceDetails: React.FC<DDHGServiceDetailsProps> = ({
           transition={{ duration: 0.9, ease: [0.22, 1, 0.36, 1] }}
         >
           {(eyebrowPrefix || eyebrowEmphasis) && (
-            <p className="ServiceDetails04 mb-2 text-[10px] uppercase tracking-[0.2em] text-stone-600 dark:text-stone-200">
+            <p className="ServiceDetails04 mb-2 text-xs uppercase tracking-[0.2em] text-stone-600 dark:text-stone-200">
               {eyebrowPrefix && <span className="font-light">{eyebrowPrefix} </span>}
               {eyebrowEmphasis && <span className="font-medium">{eyebrowEmphasis}</span>}
             </p>

package/templates/blocks/DDHG-ServiceDetails/ServiceDetailCard.tsx

@@ -183,18 +183,18 @@ function VisualContent({ service }: { service: ServiceDetailItem }) {
   const content = service.visualContent || service.mediaContent || null
   if (hasRichTextContent(content)) {
     return (
-      <div className="relative h-full min-h-[300px] w-full overflow-hidden bg-[#FAFAF8]">
+      <div className="relative h-full min-h-75 w-full overflow-hidden rounded-md squircle border border-stone-300/10 bg-stone-100/50 p-4 dark:border-stone-700/10 dark:bg-stone-900/50 hover:shadow-xl transition-all duration-300">
         <RichText
           data={content}
           enableGutter={false}
           enableProse={false}
-          className="h-full min-h-[300px] w-full [&>*]:m-0 [&_.media-block]:m-0 [&_img]:m-0"
+          className="h-full min-h-75 w-full *:m-0 [&_.media-block]:m-0 [&_img]:m-0"
         />
       </div>
     )
   }
   return (
-    <div className="min-h-[300px] w-full bg-gradient-to-br from-[#838383] to-[#8e887c] m-auto flex items-center justify-center">
+    <div className="min-h-75 w-full rounded-md squircle bg-linear-to-br from-[#838383] to-[#8e887c] m-auto flex items-center justify-center">
       <InlineLogoIcon />
     </div>
   )
@@ -206,7 +206,7 @@ function ToggleButton({ isExpanded, onToggle }: { isExpanded: boolean; onToggle:
     <button
       type="button"
       onClick={onToggle}
-      className="btn-outline bg-[var(--border)] inline-flex items-center gap-2 self-start px-4 py-2 text-[13px] transition-colors duration-300 hover:brightness-105"
+      className="btn-outline inline-flex items-center gap-2 self-start rounded-md squircle border border-stone-300 bg-stone-100/50 px-4 py-2 text-base transition-all duration-300 hover:brightness-105 dark:border-stone-700/10 dark:bg-stone-900/50"
     >
       {isExpanded ? 'Close Details' : 'View Details'}
       <Icon className="h-3.5 w-3.5" strokeWidth={1.8} />
@@ -225,7 +225,7 @@ function ExpandPanel({ isExpanded, children }: { isExpanded: boolean; children:
           variants={{
             hidden: {
               height: 0,
-              opacity: 0
+              opacity: 0,
             },
             visible: {
               height: 'auto',
@@ -234,8 +234,8 @@ function ExpandPanel({ isExpanded, children }: { isExpanded: boolean; children:
                 duration: 0.5,
                 ease: [0.22, 1, 0.36, 1],
                 staggerChildren: 0.08,
-                delayChildren: 0.1
-              }
+                delayChildren: 0.1,
+              },
             },
             exit: {
               height: 0,
@@ -243,9 +243,9 @@ function ExpandPanel({ isExpanded, children }: { isExpanded: boolean; children:
               transition: {
                 duration: 0.35,
                 staggerChildren: 0.05,
-                staggerDirection: -1
-              }
-            }
+                staggerDirection: -1,
+              },
+            },
           }}
           className="overflow-hidden"
         >
@@ -254,20 +254,20 @@ function ExpandPanel({ isExpanded, children }: { isExpanded: boolean; children:
               variants={{
                 hidden: {
                   opacity: 0,
-                  y: 10
+                  y: 10,
                 },
                 visible: {
                   opacity: 1,
                   y: 0,
                   transition: {
                     duration: 0.3,
-                    ease: [0.22, 1, 0.36, 1]
-                  }
+                    ease: [0.22, 1, 0.36, 1],
+                  },
                 },
                 exit: {
                   opacity: 0,
-                  y: 6
-                }
+                  y: 6,
+                },
               }}
             >
               {child}
@@ -283,13 +283,13 @@ function DetailContent({
   service,
   index,
   isExpanded,
-  onToggle
+  onToggle,
 }: Omit<ServiceDetailCardProps, 'layout'>) {
   const points = getPoints(service)
   return (
     <div className="flex h-full flex-col justify-center p-4 md:p-6">
       {service.code && (
-        <span className="mb-3 block font-mono text-[10px] tracking-[0.15em] text-stone-600 dark:text-stone-300">
+        <span className="mb-3 block font-mono text-xs tracking-[0.15em] text-stone-600 dark:text-stone-300">
           {service.code}
         </span>
       )}
@@ -316,12 +316,12 @@ function DetailContent({
       </div>
       <ToggleButton isExpanded={isExpanded} onToggle={onToggle} />
       <ExpandPanel isExpanded={isExpanded}>
-        <div className="mt-4 border-t border-[#D9D7D1] pt-4">
+        <div className="mt-4 border-t border-stone-300 dark:border-stone-700/10 pt-4">
           <div className="flex flex-wrap gap-2">
             {points.map((detail) => (
               <span
                 key={detail}
-                className="arch-edge-sm border border-[#D9D7D1] px-3 py-1.5 text-[10px] text-stone-700 dark:text-stone-200"
+                className="arch-edge-sm rounded-md squircle border border-stone-300 px-3 py-1.5 text-xs text-stone-700 dark:border-stone-700/10 dark:text-stone-200"
               >
                 {detail}
               </span>
@@ -337,7 +337,7 @@ export function ServiceDetailCard(props: ServiceDetailCardProps) {
   const { service, layout } = props
   if (layout === 'center') {
     return (
-      <div className="z-plane-2 chamfer-accent relative overflow-hidden">
+      <div className="z-plane-2 chamfer-accent relative overflow-hidden rounded-md squircle border border-stone-300 bg-stone-100/50 transition-all duration-300 dark:border-stone-700/10 dark:bg-stone-900/50">
         <div className="pointer-events-none absolute inset-0 opacity-30">
           <VisualContent service={service} />
         </div>
@@ -350,8 +350,8 @@ export function ServiceDetailCard(props: ServiceDetailCardProps) {
 
   if (layout === 'bleed') {
     return (
-      <div className="z-plane-2 chamfer-accent relative overflow-hidden">
-        <div className="pointer-events-none absolute right-0 top-0 hidden h-full min-h-[300px] w-1/2 opacity-30 lg:block">
+      <div className="z-plane-2 chamfer-accent relative overflow-hidden rounded-md squircle border border-stone-300 bg-stone-100/50 transition-all duration-300 dark:border-stone-700/10 dark:bg-stone-900/50">
+        <div className="pointer-events-none absolute right-0 top-0 hidden h-full min-h-75 w-1/2 opacity-30 lg:block">
           <VisualContent service={service} />
         </div>
         <div className="relative max-w-2xl">
@@ -370,9 +370,7 @@ export function ServiceDetailCard(props: ServiceDetailCardProps) {
     <div className="z-plane-2 chamfer-accent">
       <div className={cn('grid grid-cols-1 gap-0', gridClass)}>
         {visualFirst && (
-          <div
-            className={cn('flex min-h-[300px] items-center justify-center p-4 md:p-6', visualClass)}
-          >
+          <div className={cn('flex min-h-75 items-center justify-center p-4 md:p-6', visualClass)}>
             <VisualContent service={service} />
           </div>
         )}
@@ -380,9 +378,7 @@ export function ServiceDetailCard(props: ServiceDetailCardProps) {
           <DetailContent {...props} />
         </div>
         {!visualFirst && (
-          <div
-            className={cn('flex min-h-[300px] items-center justify-center p-4 md:p-6', visualClass)}
-          >
+          <div className={cn('flex min-h-75 items-center justify-center p-4 md:p-6', visualClass)}>
             <VisualContent service={service} />
           </div>
         )}

package/templates/blocks/DDHG-ServiceHero/Component.tsx

@@ -182,7 +182,7 @@ export const DDHGServiceHero: React.FC<DDHGServiceHeroProps> = ({
     >
       {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
       <motion.div
-        className="ServiceHeroCard relative z-10 mx-auto max-w-4xl overflow-clip"
+        className="ServiceHeroCard relative z-10 mx-auto max-w-4xl overflow-clip rounded-md squircle bg-stone-100/50 p-6 dark:bg-stone-900/50 md:p-8"
         initial={{ opacity: 0, y: 20 }}
         whileInView={{ opacity: 1, y: 0 }}
         viewport={{ once: true, amount: 0.35 }}

package/templates/blocks/DDHG-ServiceOverview/Component.tsx

@@ -33,7 +33,7 @@ const defaultServices: ServiceOverviewItem[] = [
     description:
       'We begin by understanding the brief, the existing space, operational needs, and the people who will use it every day.',
     timeline: '8-12 weeks',
-    engagement: 'Fixed Fee'
+    engagement: 'Fixed Fee',
   },
   {
     code: 'SVC-02',
@@ -41,7 +41,7 @@ const defaultServices: ServiceOverviewItem[] = [
     description:
       'We translate business goals into a clear spatial direction, balancing brand, movement, function, and atmosphere.',
     timeline: '12-16 weeks',
-    engagement: 'Project-based'
+    engagement: 'Project-based',
   },
   {
     code: 'SVC-03',
@@ -49,7 +49,7 @@ const defaultServices: ServiceOverviewItem[] = [
     description:
       'We develop the interior architecture, material language, lighting, furniture strategy, and practical user experience.',
     timeline: '16-24 weeks',
-    engagement: 'Fixed Fee'
+    engagement: 'Fixed Fee',
   },
   {
     code: 'SVC-04',
@@ -57,7 +57,7 @@ const defaultServices: ServiceOverviewItem[] = [
     description:
       'We prepare the technical drawings, schedules, and coordination notes required for approval, pricing, and buildability.',
     timeline: '8-12 weeks',
-    engagement: 'Project-based'
+    engagement: 'Project-based',
   },
   {
     code: 'SVC-05',
@@ -65,7 +65,7 @@ const defaultServices: ServiceOverviewItem[] = [
     description:
       'We support selection, specification, and sourcing so the design intent remains consistent through delivery.',
     timeline: '12-16 weeks',
-    engagement: 'Fixed Fee'
+    engagement: 'Fixed Fee',
   },
   {
     code: 'SVC-06',
@@ -73,8 +73,8 @@ const defaultServices: ServiceOverviewItem[] = [
     description:
       'We help close the project with practical review, refinements, and alignment between the completed space and the original intent.',
     timeline: '16-24 weeks',
-    engagement: 'Project-based'
-  }
+    engagement: 'Project-based',
+  },
 ]
 
 function getServices(services?: ServiceOverviewItem[] | null) {
@@ -116,7 +116,7 @@ export const DDHGServiceOverview: React.FC<DDHGServiceOverviewProps> = ({
   scrollSpeed,
   eyebrowPrefix = 'service',
   eyebrowEmphasis = 'catalog',
-  services
+  services,
 }) => {
   const serviceItems = useMemo(() => getServices(services), [services])
   const [activeIndex, setActiveIndex] = useState(0)
@@ -141,7 +141,7 @@ export const DDHGServiceOverview: React.FC<DDHGServiceOverviewProps> = ({
           transition={{ duration: 0.9, ease: [0.22, 1, 0.36, 1] }}
         >
           {(eyebrowPrefix || eyebrowEmphasis) && (
-            <p className="ServiceOverview03 mb-2 text-[10px] uppercase tracking-[0.2em] text-stone-600 dark:text-stone-300">
+            <p className="ServiceOverview03 mb-2 text-xs uppercase tracking-[0.2em] text-stone-600 dark:text-stone-300">
               {eyebrowPrefix && <span className="font-light">{eyebrowPrefix} </span>}
               {eyebrowEmphasis && <span className="font-medium">{eyebrowEmphasis}</span>}
             </p>
@@ -168,17 +168,17 @@ export const DDHGServiceOverview: React.FC<DDHGServiceOverviewProps> = ({
                   <div className="ServiceOverview08 flex flex-col items-center text-center">
                     <div
                       className={cn(
-                        'ServiceOverview09 mb-3 flex h-12 w-12 items-center justify-center border transition-all duration-500',
+                        'ServiceOverview09 mb-3 flex h-12 w-12 items-center justify-center rounded-md squircle border transition-all duration-500',
                         isActive
                           ? 'border-[#444444] bg-[#444444]'
-                          : 'border-[#444444] bg-[#e5e7eb] group-hover:border-[#A8A29E]'
+                          : 'border-[#444444] bg-[#e5e7eb] group-hover:border-[#A8A29E]',
                       )}
-                      style={{ borderRadius: '2px' }}
+                      style={{ borderRadius: '6px' }}
                     >
                       <span
                         className={cn(
                           'ServiceOverview10 text-xs font-semibold transition-colors duration-500',
-                          isActive ? 'text-[#F5F3EF]' : 'text-stone-600 dark:text-stone-300'
+                          isActive ? 'text-[#F5F3EF]' : 'text-stone-600 dark:text-stone-300',
                         )}
                       >
                         {String(i + 1).padStart(2, '0')}
@@ -186,16 +186,16 @@ export const DDHGServiceOverview: React.FC<DDHGServiceOverviewProps> = ({
                     </div>
                     <span
                       className={cn(
-                        'ServiceOverview11 text-[13px] font-medium uppercase tracking-[0.1em] transition-colors duration-500',
+                        'ServiceOverview11 text-base font-medium uppercase tracking-widest transition-colors duration-500',
                         isActive
                           ? 'text-stone-700 dark:text-stone-200'
-                          : 'text-stone-600 dark:text-stone-300 group-hover:text-stone-700'
+                          : 'text-stone-600 dark:text-stone-300 group-hover:text-stone-700',
                       )}
                     >
                       {service.title}
                     </span>
                     {service.code && (
-                      <span className="ServiceOverview12 mt-1 font-mono text-[10px] text-stone-600 dark:text-stone-300">
+                      <span className="ServiceOverview12 mt-1 font-mono text-xs text-stone-600 dark:text-stone-300">
                         {service.code}
                       </span>
                     )}
@@ -213,15 +213,15 @@ export const DDHGServiceOverview: React.FC<DDHGServiceOverviewProps> = ({
           transition={{ duration: 0.2, delay: 0.05, ease: [0.22, 1, 0.36, 1] }}
         >
           <motion.div
-            className="ServiceOverview14 z-plane-1 p-6 md:p-8"
+            className="ServiceOverview14 z-plane-1 rounded-md squircle border border-stone-300 bg-stone-100/50 p-6 transition-all duration-300 dark:border-stone-700/10 dark:bg-stone-900/50 md:p-8"
             initial={{ x: -40, filter: 'blur(20px)', opacity: 0 }}
             animate={{ x: 0, filter: 'blur(0px)', opacity: 1 }}
             transition={{ duration: 0.2, delay: 0.08, ease: [0.22, 1, 0.36, 1] }}
           >
             <div className="flex flex-col gap-6 md:flex-row md:gap-10">
-              <div className="flex-shrink-0">
+              <div className="shrink-0">
                 {activeService.code && (
-                  <span className="mb-2 block font-mono text-[10px] uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
+                  <span className="mb-2 block font-mono text-xs uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
                     {activeService.code}
                   </span>
                 )}
@@ -237,9 +237,9 @@ export const DDHGServiceOverview: React.FC<DDHGServiceOverviewProps> = ({
                   </p>
                 )}
               </div>
-              <div className="flex flex-grow flex-col gap-5 md:flex-row md:items-center md:gap-8">
+              <div className="flex grow flex-col gap-5 md:flex-row md:items-center md:gap-8">
                 <div className="text-center">
-                  <p className="mb-1 text-[10px] uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
+                  <p className="mb-1 text-xs uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
                     Typical Timeline
                   </p>
                   <p className="text-md font-semibold text-stone-700 dark:text-stone-200">
@@ -248,7 +248,7 @@ export const DDHGServiceOverview: React.FC<DDHGServiceOverviewProps> = ({
                 </div>
                 <div className="hidden h-10 w-px bg-stone-500 md:block" />
                 <div className="text-center">
-                  <p className="mb-1 text-[10px] uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
+                  <p className="mb-1 text-xs uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
                     Deliverables
                   </p>
                   <p className="inline-flex items-center gap-2 text-md font-semibold text-stone-700 dark:text-stone-200">
@@ -258,7 +258,7 @@ export const DDHGServiceOverview: React.FC<DDHGServiceOverviewProps> = ({
                 </div>
                 <div className="hidden h-10 w-px bg-stone-500 md:block" />
                 <div className="text-center">
-                  <p className="mb-1 text-[10px] uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
+                  <p className="mb-1 text-xs uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
                     Engagement
                   </p>
                   <p className="text-md font-semibold text-stone-700 dark:text-stone-200">