/* ====================================
   SPACING OPTIMIZATION - BALANCED LAYOUT
   ==================================== */

/* Override excessive spacing throughout the site */

/* 1. Lifestyle Banner - Reduce margin */
.lifestyle-banner {
    margin: 60px 0 !important;
    /* Was 80px - reduced for tighter flow */
}

/* 2. Split Image Section (Control Everywhere) - Tighter spacing */
.split-image-section {
    padding: 80px 0 !important;
    /* Was 100px - more compact */
    margin-bottom: 0 !important;
}

/* 3. Feature Rows - Consistent spacing between services */
.feature-row {
    margin-bottom: 80px !important;
    /* Consistent spacing between each service */
}

.feature-row:last-of-type {
    margin-bottom: 0 !important;
    /* Remove bottom margin from last one */
}

/* 4. Blog Section - Reduce excessive top padding */
#blog.section {
    padding-top: 80px !important;
    /* Was 100px from .section */
}

/* 5. Testimonials Section - Balanced spacing */
#testimonials.section {
    padding: 80px 0 !important;
}

/* 6. Contact Section - Reduce top padding */
#contact.section {
    padding-top: 80px !important;
}

/* 7. Section Headers - Reduce bottom margin */
.section-header {
    margin-bottom: 50px !important;
    /* Was likely larger - creates better flow */
}

/* 8. Stats Grid (Vision Section) - Reduce top margin */
.stats-grid {
    margin-top: 50px !important;
    /* Was 60px - tighter connection to quote */
}

/* 9. Footer - Balanced top margin */
.footer {
    margin-top: 80px !important;
    /* Was 60px - better separation from content */
    padding: 60px 0 !important;
}

/* Mobile Adjustments - Even tighter on small screens */
@media (max-width: 768px) {
    .section {
        padding: 60px 0 50px !important;
        /* Reduce all section padding on mobile */
    }

    .vision-section {
        padding: 60px 0 40px !important;
    }

    .lifestyle-banner {
        margin: 40px 0 !important;
        /* Even less on mobile */
    }

    .split-image-section {
        padding: 60px 0 !important;
    }

    .feature-row {
        margin-bottom: 50px !important;
        /* Tighter on mobile */
    }

    .section-header {
        margin-bottom: 35px !important;
    }

    .stats-grid {
        margin-top: 35px !important;
    }
}

/* Tablet Adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .section {
        padding: 80px 0 70px !important;
    }

    .lifestyle-banner {
        margin: 50px 0 !important;
    }
}

/* ====================================
   VISUAL RHYTHM GUIDELINES
   ==================================== */
/*
   Spacing Philosophy:
   - Section padding: 100px top, 80px bottom (desktop)
   - Vision section: 80px top, 60px bottom (lighter)
   - Lifestyle banners: 60px vertical margin
   - Feature rows: 80px bottom margin each
   - Mobile: Reduce all by ~30-40%
   
   Result: Professional, balanced spacing without:
   - Excessive gaps (boring/wasteful)
   - Overcrowding (claustrophobic)
*/