/* ==============================================
   SECTION RHYTHM & VISUAL SEPARATION
   ============================================== */

/* Base Section Styling - Standardized Padding */
section {
    padding-top: 88px;
    padding-bottom: 88px;
    border-top: 1px solid #E2DDD6;
}

/* Section Inner Container - Consistent Max-Width */
section .container {
    max-width: 1100px;
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
}

/* Remove border from first section (hero) */
section:first-of-type {
    border-top: none;
}

/* Alternating Section Backgrounds - CREAM Sections */
.hero,
.journey,
.case-studies,
.education {
    background: var(--color-cream);
}

/* Alternating Section Backgrounds - BEIGE Sections */
.marketing-philosophy,
.abacus-section,
.capabilities,
.recognition,
.contact {
    background: var(--color-beige);
}

/* Footer - Keep Navy Background */
.footer {
    background: var(--color-navy);
}

/* Tablet Responsive (max-width: 968px) */
@media (max-width: 968px) {
    section {
        padding-top: 72px;
        padding-bottom: 72px;
    }
}

/* Mobile Responsive (max-width: 768px) */
@media (max-width: 768px) {
    section {
        padding-top: 56px;
        padding-bottom: 56px;
    }
    
    section .container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Mobile Override (max-width: 480px) - Matches mobile-optimization.css */
@media (max-width: 480px) {
    section {
        padding-top: 48px;
        padding-bottom: 48px;
    }
    
    section .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Ensure smooth transitions between sections */
section {
    position: relative;
}

/* Add subtle shadow at section boundaries for extra depth */
section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, 
        transparent 0%, 
        rgba(226, 221, 214, 0.3) 50%, 
        transparent 100%);
    pointer-events: none;
}

/* Remove shadow from last section before footer */
section:last-of-type::after {
    display: none;
}