this is how the result page should look like

src/components/cost-estimator/cost-estimator-form.tsx

@@ -107,8 +107,7 @@ export function CostEstimatorForm() {
     setCurrentStep(1);
   }
 
-  const estimatedHours = useMemo(() => calculateTotalHours(formData), [formData]);
-
+  const { customHours, readyMadeHours } = useMemo(() => calculateTotalHours(formData), [formData]);
 
   const renderStep = () => {
     switch (currentStep) {
@@ -203,9 +202,9 @@ export function CostEstimatorForm() {
       case 11:
         return (
             <Step11Results
-                formData={formData}
                 onReset={handleReset}
-                estimatedHours={estimatedHours}
+                customHours={customHours}
+                readyMadeHours={readyMadeHours}
             />
         )
       default:
@@ -218,9 +217,11 @@ export function CostEstimatorForm() {
     }
   };
 
+  const isResultsStep = currentStep === 11;
+
   return (
-    <Card className="mt-8 w-full max-w-4xl shadow-2xl overflow-hidden">
-      <CardContent className="p-4 sm:p-8">
+    <Card className={`mt-8 w-full max-w-4xl shadow-2xl overflow-hidden ${isResultsStep ? 'bg-transparent border-none' : ''}`}>
+      <CardContent className={`p-4 sm:p-8 ${isResultsStep ? 'p-0 sm:p-0' : ''}`}>
         <AnimatePresence mode="wait">
             <motion.div
                 key={currentStep}