/* CSS Custom Properties */
:root {
    /* Brand Colors */
    --color-blue: #0076CE;
    --color-blue-dark: #0064AF;
    --color-navy: #004B87;
    --color-white: #FFFFFF;
    --color-green: #7AC142;
    --color-charcoal: #333333;
    --border-blue: #CFE8FF;

    /* Semantic Colors */
    --text-body: var(--color-charcoal);
    --text-on-dark: var(--color-white);

    --cta-primary-bg: var(--color-blue);
    --cta-primary-text: var(--color-white);
    --cta-secondary-bg: var(--color-white);
    --cta-secondary-text: var(--color-blue);
    --cta-secondary-border: var(--color-blue);

    /* Typography */
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Roboto', sans-serif;

    /* Spacing */
    --section-padding: 80px 0;
    --container-padding: 20px;
    --container-max-width: 1200px;

    /* Shadows */
    --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --transition: all 0.3s ease;

    /* Legacy variable mapping */
    --primary-green: var(--color-blue);
    --sage-green: var(--color-green);
    --dark-green: var(--color-blue-dark);
    --dark-gray: var(--color-charcoal);
    --white: var(--color-white);
    --light-gray: #F8F9FA;
    --medium-gray: #6C757D;
    --border-gray: #E9ECEF;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-body);
    background-color: var(--color-white);
}

/* Container */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-navy);
    margin-bottom: 16px;
    font-weight: 700;
}
h1 {
    font-size: 36px;
    line-height: 1.2;
}

h2 {
    font-size: 30px;
    line-height: 1.3;
}

h3 {
    font-size: 24px;
    line-height: 1.3;
}

h4 {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.4;
}

h5 {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
}

h6 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

p {
    margin-bottom: 16px;
    line-height: 1.6;
}

a {
    color: var(--color-blue);
    text-decoration: none;
    font-weight: 400;
}

a:hover,
a:active {
    text-decoration: underline;
}

a:focus {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
}

.section-title {
    margin-bottom: 32px;
}

.section-title.center {
    text-align: center;
}

.section-title.left {
    text-align: left;
}

.center {
    text-align: center;
}

/* Buttons */
.cta-button {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    border-radius: 8px;
    transition: var(--transition);
    cursor: pointer;
    border: 2px solid var(--cta-secondary-border);
    font-size: 16px;
    padding: 12px 22px;
    line-height: 1.4;
    /* Bug prevention for longer text "Book My Free Consultation" */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
}

.cta-button.large {
    font-size: 18px;
    padding: 14px 24px;
}

.cta-button.full-width {
    width: 100%;
}

.cta-button.primary {
    background-color: var(--cta-primary-bg);
    color: var(--cta-primary-text);
    border-color: var(--cta-primary-bg);
}

.cta-button.primary:hover {
    background-color: var(--color-blue-dark);
    border-color: var(--color-blue-dark);
}

.cta-button.primary:focus-visible {
    outline: 2px solid var(--color-white);
    box-shadow: 0 0 0 4px var(--color-blue);
}

.cta-button.secondary {
    background-color: var(--cta-secondary-bg);
    color: var(--cta-secondary-text);
}

.cta-button.secondary:hover {
    background-color: #F7FAFF;
}

.cta-button.secondary:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
}

.cta-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Generic button utilities */
.btn-primary {
    background-color: var(--cta-primary-bg);
    color: var(--cta-primary-text);
    border: 2px solid var(--cta-primary-bg);
    font-weight: 700;
    padding: 12px 16px;
    border-radius: 8px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-primary:hover {
    background-color: var(--color-blue-dark);
    border-color: var(--color-blue-dark);
}

.btn-primary:focus-visible {
    outline: 2px solid var(--color-white);
    box-shadow: 0 0 0 4px var(--color-blue);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary {
    background-color: var(--cta-secondary-bg);
    color: var(--cta-secondary-text);
    border: 2px solid var(--cta-secondary-border);
    font-weight: 700;
    padding: 12px 16px;
    border-radius: 8px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-secondary:hover {
    background-color: #F7FAFF;
}

.btn-secondary:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
}

.btn-secondary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Header */
.header {
    background-color: var(--color-blue);
    box-shadow: var(--shadow-light);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    gap: 32px;
}

.header-phone {
    display: none;
}

.phone-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--color-white);
    font-weight: 600;
    transition: var(--transition);
}

.phone-link:hover {
    text-decoration: underline;
}

.phone-link svg {
    width: 18px;
    height: 18px;
}

.logo h1 {
    font-size: 24px;
    font-weight: 500;
    color: var(--color-white);
    margin: 0;
    white-space: nowrap;
    /* Ensure single line display */
}

.nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 24px;
    margin: 0;
}

.nav-links a {
    text-decoration: none;
    color: var(--color-white);
    font-weight: 500;
    transition: var(--transition);
}

.nav-links a:hover {
    text-decoration: underline;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--color-white);
    cursor: pointer;
}

.mobile-menu {
    display: none;
    background-color: var(--color-blue);
    border-top: 1px solid var(--border-gray);
    padding: 20px 0;
}

.mobile-nav-links {
    list-style: none;
    text-align: center;
}

.mobile-nav-links li {
    margin-bottom: 16px;
}

.mobile-nav-links a {
    text-decoration: none;
    color: var(--color-white);
    font-weight: 500;
    font-size: 18px;
    transition: var(--transition);
}

.mobile-nav-links a:hover {
    text-decoration: underline;
}



/* Hero Section */
.hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    overflow: hidden;
    isolation: isolate;
    /* Create new stacking context for reliable z-index behavior */
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    transform: translateZ(0);
    /* Force hardware acceleration for better rendering */
    /* Enhanced fallback - using natural landscape colors that match hero images */
    background: linear-gradient(135deg, #2c5530 0%, #1a3d1f 100%);
    /* Professional landscaping colors that blend seamlessly during loading */
}

/* Fix picture element sizing for complete mobile coverage */
.hero-background picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* Ensures picture element fills entire hero container */
}

.hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    /* Enhanced mobile fallback and performance */
    background: linear-gradient(135deg, #2c5530 0%, #1a3d1f 100%);
    /* Fallback shown if image fails to load */
    
    /* Smooth loading transition - eliminate flash effect */
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    /* Start invisible, fade in when loaded */
}

.hero-background img.loaded {
    opacity: 1;
    /* Fade in smoothly when image loads */
}

.hero-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 800px;
    padding: 0 20px;
}

.hero-headline {
    font-size: 52px;
    margin-bottom: 24px;
    color: var(--white);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-subheadline {
    font-size: 20px;
    margin-bottom: 16px;
    color: var(--white);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-location {
    font-size: 18px;
    margin-bottom: 32px;
    color: var(--white);
    font-style: italic;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 32px;
}

.hero-trust {
    margin-top: 24px;
}

.trust-badges {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--white);
    font-size: 14px;
    opacity: 0.9;
}

.trust-badge svg {
    width: 16px;
    height: 16px;
}

/* Problem-Solution Combined Section */
.problem-solution {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    /* Bug prevention: Ensure proper container */
    box-sizing: border-box;
}

.problem-solution::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(0, 118, 206, 0.03) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
    /* Bug prevention: Keep behind content */
    pointer-events: none;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
    /* Bug prevention: Ensure proper stacking */
    padding: 0 20px;
    /* Bug prevention: Ensure mobile padding */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
}

.section-header .section-title {
    font-size: 42px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 24px 0;
    line-height: 1.1;
    /* WCAG AA Compliant: 12.6:1 contrast ratio against light background */
    /* Bug prevention: Explicit typography control */
    font-family: var(--font-heading), 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.02em;
    text-rendering: optimizeLegibility;
    /* Bug prevention: Cross-browser typography consistency */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Bug prevention: Ensure readability on gradient background */
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}

.section-subheader {
    font-size: 20px;
    font-weight: 400;
    color: #475569;
    opacity: 1;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.4;
    /* WCAG AA Compliant: 7.1:1 contrast ratio (darker for better readability) */
    /* Bug prevention: Better spacing and typography */
    font-family: var(--font-body), 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    /* Bug prevention: Subtle text shadow for readability */
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}

/* Enhanced typography hierarchy with accent */
.section-header .section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-blue) 0%, var(--color-blue-dark) 100%);
    border-radius: 2px;
    margin: 16px auto 0;
    /* Visual accent for emphasis */
    /* Bug prevention: Proper positioning and shadow for visibility */
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 118, 206, 0.3);
}

.problem-solution-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 2;
    /* Bug prevention: Ensure proper grid behavior */
    min-height: 0;
    overflow: visible;
}

.problem-solution-row:last-child {
    margin-bottom: 0;
    /* Bug prevention: Remove extra spacing on last row */
}

.solution-row {
    /* Reverse order for alternating layout */
    grid-template-columns: 1fr 1fr;
    /* Bug prevention: Maintain consistent columns */
}

.content-image {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* Bug prevention: Proper flex container */
    min-width: 0;
}

.content-image img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    /* Bug prevention: Smooth transitions only */
    object-fit: cover;
    /* Bug prevention: Ensure proper image scaling */
}

.content-image img:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    /* Subtle hover effect instead of 3D rotation */
}

.content-text {
    padding: 20px;
    /* Bug prevention: Consistent padding */
    min-width: 0;
    /* Bug prevention: Allow text wrapping */
}

.content-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--color-charcoal);
    margin-bottom: 32px;
    line-height: 1.2;
    /* Bug prevention: Consistent typography */
}

.content-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* Bug prevention: Consistent spacing */
}

.content-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    /* Bug prevention: Proper flex alignment */
}

.content-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    /* Bug prevention: Fixed icon size and smooth transitions */
}

.problem-icon {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #dc2626;
    border: 2px solid #fca5a5;
}

.solution-icon {
    background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-blue-dark) 100%);
    color: white;
    border: 2px solid var(--color-blue-dark);
}

.content-icon i {
    width: 20px;
    height: 20px;
    /* Bug prevention: Consistent icon sizing */
}

.content-details {
    flex: 1;
    min-width: 0;
    /* Bug prevention: Allow text wrapping */
}

.content-details h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-charcoal);
    margin-bottom: 8px;
    line-height: 1.3;
    /* Bug prevention: Consistent typography */
}

.content-details p {
    font-size: 16px;
    color: var(--color-charcoal);
    opacity: 0.8;
    line-height: 1.5;
    margin: 0;
    /* Bug prevention: Remove default margins */
}

.content-cta {
    margin-top: 40px;
    /* CTA button spacing */
}

.image-placeholder {
    width: 100%;
    max-width: 500px;
    height: 350px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    /* Bug prevention: Proper placeholder styling */
    box-sizing: border-box;
}

.image-placeholder:hover {
    border-color: var(--color-blue);
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

.placeholder-content {
    text-align: center;
    color: #64748b;
    /* Bug prevention: Centered placeholder content */
}

.placeholder-content i {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    opacity: 0.6;
}

.placeholder-content p {
    font-size: 16px;
    margin: 0;
    line-height: 1.4;
}

.placeholder-content small {
    font-size: 14px;
    opacity: 0.7;
}

/* Problem-Solution Combined Section - Mobile Responsive */
@media (max-width: 768px) {
    .problem-solution {
        padding: 60px 0;
        /* Reduced mobile padding */
    }
    
    .section-header {
        margin-bottom: 40px;
        padding: 0 16px;
        /* Mobile header optimization */
        max-width: calc(100vw - 32px);
        /* Bug prevention: Prevent overflow on small screens */
    }
    
    .section-header .section-title {
        font-size: 32px;
        line-height: 1.1;
        margin-bottom: 20px;
        /* Mobile typography optimization */
        /* Bug prevention: Prevent text overflow */
        word-wrap: break-word;
        overflow-wrap: break-word;
        /* Enhanced mobile readability */
        text-shadow: 0 1px 4px rgba(255, 255, 255, 0.9);
    }
    
    .section-subheader {
        font-size: 18px;
        line-height: 1.4;
        /* Mobile subheader optimization */
        /* Bug prevention: Enhanced mobile contrast */
        text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
    }
    
    .problem-solution-row {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-bottom: 60px;
        text-align: center;
        /* Stack vertically on mobile */
    }
    
    .solution-row {
        /* Maintain same order on mobile */
        grid-template-columns: 1fr;
    }
    
    .content-image {
        order: -1;
        /* Images first on mobile */
    }
    
    .content-image img {
        max-width: 100%;
        /* Full width on mobile */
    }
    
    .content-title {
        font-size: 24px;
        margin-bottom: 24px;
        /* Smaller mobile titles */
    }
    
    .content-item {
        text-align: left;
        /* Left-align content items */
    }
    
    .image-placeholder {
        max-width: 100%;
        height: 300px;
        /* Adjusted mobile height */
    }
}

/* Additional Mobile Responsive Adjustments */
@media (max-width: 480px) {
    .problem-solution {
        padding: 40px 0;
        /* Further reduced padding for small screens */
    }
    
    .section-header {
        padding: 0 12px;
        /* Extra tight mobile padding */
        max-width: calc(100vw - 24px);
        /* Bug prevention: Ensure content fits on tiny screens */
    }
    
    .section-header .section-title {
        font-size: 28px;
        line-height: 1.1;
        margin-bottom: 16px;
        /* Smaller titles on tiny screens */
        /* Bug prevention: Maintain readability */
        letter-spacing: -0.01em;
        /* Strong text shadow for tiny screen readability */
        text-shadow: 0 1px 5px rgba(255, 255, 255, 0.95);
    }
    
    .section-subheader {
        font-size: 16px;
        line-height: 1.3;
        /* Bug prevention: Ensure text doesn't break */
        /* Enhanced tiny screen contrast */
        text-shadow: 0 1px 4px rgba(255, 255, 255, 0.9);
    }
    
    .section-header .section-title::after {
        width: 60px;
        height: 3px;
        margin-top: 12px;
        /* Smaller accent on mobile */
        /* Bug prevention: Enhanced shadow for visibility */
        box-shadow: 0 1px 4px rgba(0, 118, 206, 0.4);
    }
    
    .content-title {
        font-size: 22px;
        margin-bottom: 20px;
    }
    
    .content-icon {
        width: 40px;
        height: 40px;
        /* Smaller icons on tiny screens */
    }
    
    .content-details h4 {
        font-size: 16px;
    }
    
    .content-details p {
        font-size: 14px;
    }
    
    .image-placeholder {
        height: 250px;
        /* Smaller placeholder on tiny screens */
    }
    
    .placeholder-content p {
        font-size: 14px;
    }
    
    /* Bug prevention: Ensure content doesn't overflow */
    .content-text {
        padding: 0;
    }
    
    .content-list {
        gap: 16px;
        /* Reduced gap for compactness */
    }
}


.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--color-blue) 0%, var(--color-blue-dark) 50%, var(--color-navy) 100%);
    transform: translateX(-50%);
    border-radius: 1px;
    z-index: 1;
    /* Thinner timeline line with blue progression */
}

.timeline-item {
    position: relative;
    margin: 25px 0;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    /* Reduced spacing for better density */
}

.timeline-left {
    justify-content: flex-end;
    padding-right: 95px;
}

.timeline-right {
    justify-content: flex-start;
    padding-left: 95px;
}

.timeline-content {
    max-width: 320px;
    padding: 24px 26px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 118, 206, 0.1);
    position: relative;
    transition: all 0.3s ease;
    /* Larger, more prominent content cards */
    /* Bug prevention: Ensure proper box-sizing */
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: break-word;
}

.timeline-left .timeline-content {
    text-align: right;
}

.timeline-right .timeline-content {
    text-align: left;
}

.timeline-content h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-navy);
    margin: 0 0 6px 0;
    font-family: var(--font-heading);
    /* Slightly smaller for better proportion */
}

.timeline-content p {
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-body);
    margin: 0;
    font-weight: 400;
    /* Tighter text for better card proportions */
}

/* Remove animation delays to match Services section clean approach */

.timeline-dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 48px;
    background: var(--color-white);
    border: 4px solid var(--color-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 118, 206, 0.2);
    /* Timeline dots with icons */
}

.timeline-item:nth-child(2) .timeline-dot {
    border-color: var(--color-blue-dark);
    background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-blue-dark) 100%);
    color: white;
}

.timeline-item:nth-child(3) .timeline-dot {
    border-color: var(--color-blue-dark);
    background: linear-gradient(135deg, var(--color-blue-dark) 0%, var(--color-navy) 100%);
    color: white;
}

.timeline-item:nth-child(4) .timeline-dot {
    border-color: var(--color-navy);
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-charcoal) 100%);
    color: white;
}

.timeline-dot svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
    transition: all 0.3s ease;
}

.timeline-item:first-child .timeline-dot svg {
    color: var(--color-blue);
}

.timeline-item:nth-child(2) .timeline-dot svg,
.timeline-item:nth-child(3) .timeline-dot svg,
.timeline-item:nth-child(4) .timeline-dot svg {
    color: white;
}

/* Clean up - timeline styles now handle all content styling */

/* Extended speech bubble arrows for increased gap */
.timeline-left .timeline-content::after {
    content: '';
    position: absolute;
    right: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border: 14px solid transparent;
    border-left-color: rgba(255, 255, 255, 0.95);
    border-right: none;
    z-index: 3;
    /* Bug prevention: Ensure proper rendering */
    will-change: auto;
}

.timeline-right .timeline-content::after {
    content: '';
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border: 14px solid transparent;
    border-right-color: rgba(255, 255, 255, 0.95);
    border-left: none;
    z-index: 3;
    /* Bug prevention: Ensure proper rendering */
    will-change: auto;
}

.problem-icon-item:hover p {
    color: var(--text-body);
}

/* Unified hover effects to match Services section */
/* Timeline hover effects */
.timeline-item:hover .timeline-content {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 1);
    border-color: var(--color-blue);
}

.timeline-item:hover .timeline-dot {
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 118, 206, 0.3);
}

.timeline-item:hover .timeline-dot svg {
    transform: scale(1.1);
}

.timeline-item:hover .timeline-content h4 {
    color: var(--color-blue-dark);
}

.timeline-item:hover .timeline-content p {
    color: var(--color-navy);
    font-weight: 500;
}

/* Hover effects now handled above in the main section */

/* Section title - no animation */

/* Scroll animations disabled - content always visible */

/* Keyframe animations for enhanced UX */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* Removed breathing animation keyframes to match Services minimal design */

/* Respect user's motion preferences - unified with Services section */
@media (prefers-reduced-motion: reduce) {
    .problem-icon-item,
    .problem-icon {
        animation: none;
        transition: none;
    }
    
    .problem-icon-item:hover {
        transform: none;
        filter: none;
    }
    
    .problem-icon-item:hover .problem-icon {
        transform: none;
        background-color: var(--color-blue-dark);
        box-shadow: 0 4px 12px rgba(0, 118, 206, 0.3);
    }
    
    .problem-icon-item:hover .problem-icon svg {
        transform: none;
    }
    
    .problem-icon-item:hover p {
        color: var(--primary-green);
    }
}

/* Mobile styles for problem grid - matching Services section layout */
@media (max-width: 768px) {
    .problem-icons-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-bottom: 24px;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    
    .problem-timeline {
        padding: 15px 0;
        /* Bug prevention: Extra mobile padding for larger cards */
    }
    
    .timeline-line {
        left: 35px;
        width: 2px;
        /* Bug prevention: Keep consistent with dot positioning */
    }
    
    .timeline-item {
        margin: 30px 0;
        justify-content: flex-start;
        padding-left: 70px;
        padding-right: 0;
        /* Bug prevention: Consistent with updated mobile padding */
    }
    
    .timeline-left,
    .timeline-right {
        justify-content: flex-start;
        padding-left: 70px;
        padding-right: 0;
        /* Increased mobile padding for larger cards */
    }
    
    .timeline-content {
        max-width: calc(100vw - 140px);
        text-align: left;
        padding: 20px 22px;
        /* Mobile optimization for larger cards */
        /* Bug prevention: Ensure mobile doesn't break */
        min-width: 0;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    
    .timeline-left .timeline-content,
    .timeline-right .timeline-content {
        text-align: left;
    }
    
    .problem-icon-item h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }
    
    .timeline-dot {
        left: 35px;
        width: 40px;
        height: 40px;
        border-width: 3px;
        /* Adjusted for increased mobile padding */
    }
    
    .timeline-dot svg {
        width: 18px;
        height: 18px;
        stroke-width: 2.5;
    }
    
    .timeline-content h4 {
        font-size: 16px;
        margin-bottom: 6px;
    }
    
    .timeline-content p {
        font-size: 14px;
        line-height: 1.4;
    }
    
    /* Mobile speech bubbles - adjusted for larger cards */
    .timeline-left .timeline-content::after,
    .timeline-right .timeline-content::after {
        left: -10px;
        border-right-color: rgba(255, 255, 255, 0.95);
        border-left: none;
        border-width: 10px;
        /* Bug prevention: Ensure arrows reach properly */
    }
    
    .problem-icon-item p {
        font-size: 15px;
        line-height: 1.5;
        max-width: 100%;
        word-break: break-word;
        overflow-wrap: break-word;
    }
    
    .problem-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .problem-header-full {
        margin-bottom: 24px;
        text-align: center;
        /* Center full-width header on mobile */
    }
    
    .problem-header-full .section-title {
        font-size: 28px;
        line-height: 1.1;
        margin-bottom: 12px;
        text-align: center;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        /* Allow normal wrapping on mobile */
    }
    
    .problem-subheader {
        font-size: 17px;
        text-align: center;
        line-height: 1.5;
        -webkit-line-clamp: unset;
        display: block;
        /* Remove line clamping on mobile */
    }
    
    /* Timeline mobile spacing optimizations */
    
    .problem-text {
        order: 2;
        padding: 0;
    }
    
    /* Unified mobile hover effects matching Services section */
    .problem-icon-item:hover {
        transform: translateY(-2px) translateZ(0);
        filter: drop-shadow(0 2px 8px rgba(0, 118, 206, 0.15));
    }
    
    .problem-icon-item:hover .problem-icon {
        background-color: var(--color-blue-dark);
        transform: scale(1.05) translateZ(0);
        box-shadow: 0 2px 8px rgba(0, 118, 206, 0.25);
    }
    
    .problem-icon-item:hover .problem-icon svg {
        transform: scale(1.02) translateZ(0);
    }
    
    .problem-icon-item:hover h3 {
        color: var(--primary-green);
    }
    
    .problem-icon-item:hover p {
        color: var(--text-body);
    }
}

/* Desktop: Enhanced single line control */
@media (min-width: 1024px) {
    .problem-header-full .section-title {
        font-size: 40px;
        /* Enhanced single line on larger screens */
    }
    
    .problem-subheader {
        font-size: 19px;
        max-width: 90%;
        /* Better two-line control on desktop */
    }
}

@media (max-width: 480px) {
    .problem-header-full .section-title {
        font-size: 26px;
        line-height: 1.05;
        /* Medium screen header sizing */
    }
    
    .problem-subheader {
        font-size: 15px;
        line-height: 1.35;
        /* Medium screen subheader sizing */
    }
    
    .timeline-content {
        max-width: calc(100vw - 100px);
        padding: 18px 20px;
        /* Extra small screen optimization */
    }
    
    .timeline-content h4 {
        font-size: 15px;
    }
    
    .timeline-content p {
        font-size: 13px;
        line-height: 1.3;
    }
    
    /* Bug prevention: Ensure content doesn't overflow on tiny screens */
    .timeline-item {
        padding-left: 65px;
    }
    
    .timeline-dot {
        left: 30px;
    }
    
    .timeline-line {
        left: 30px;
    }
}

/* Extra small screen protection - maintain Service section consistency */
@media (max-width: 320px) {
    .problem-header-full .section-title {
        font-size: 24px;
        line-height: 1.0;
        /* Compact header for very small screens */
    }
    
    .problem-subheader {
        font-size: 15px;
        line-height: 1.3;
        /* Compact subheader for very small screens */
    }
    
    .problem-header-full {
        margin-bottom: 20px;
        /* Tighter spacing on smallest screens */
    }
    
    .problem-icons-grid {
        gap: 24px;
        padding: 0 8px;
    }
    
    .problem-icon-item {
        padding: 20px 12px;
        text-align: center;
    }
    
    .problem-icon-item h3 {
        font-size: 15px;
        margin-bottom: 6px;
    }
    
    .problem-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        margin: 0 auto 10px;
    }
    
    .problem-icon svg {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
    }
    
    .problem-icon-item p {
        font-size: 14px;
    }
}



.problem-consequence {
    background-color: var(--light-gray);
    padding: 24px;
    border-radius: 8px;
    border-left: 4px solid var(--primary-green);
}


/* Full Width Image Section - REMOVED */

/* Testimonials Section */
.testimonials {
    padding: 60px 0;
    background-image: url('../attached_assets/pexels-pixabay-46974_1756081644065.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    position: relative;
    /* Optimized padding: 60px vs var(--section-padding) ~80px (25% reduction) */
    /* Beautiful blue flower background for brand alignment */
    /* Bug prevention: scroll attachment for mobile compatibility */
    
    /* Netlify compatibility and bug prevention */
    will-change: auto;
    backface-visibility: hidden;
    transform: translateZ(0);
    contain: layout style;
    
    /* PageSpeed optimization */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    
    /* Bug prevention: Ensure proper sizing */
    box-sizing: border-box;
    overflow: hidden;
    
    /* Fallback for missing background image */
    background-color: var(--color-blue);
    min-height: 350px;
    /* Reduced min-height for better proportions */
}

.testimonials::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
    pointer-events: none;
    /* Enhanced overlay for flower background - ensures WCAG AA compliance */
    /* Bug prevention: pointer-events none to avoid interaction issues */
    /* Slightly darker overlay to ensure text readability on colorful flower background */
}

.testimonials .container {
    position: relative;
    z-index: 2;
    /* Ensure content appears above overlay */
}

.testimonials .section-title {
    color: var(--white);
    margin-bottom: 12px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    font-size: 42px;
    /* Optimized sizing: 42px vs 48px and tighter spacing */
    /* High contrast white text with shadow for WCAG compliance */
    /* Bug prevention: Consistent line height */
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.google-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    margin-bottom: 24px;
    /* Tighter spacing: 6px gap, 24px margin vs 8px/32px */
    /* Bug prevention: Ensure proper centering */
    justify-content: center;
    width: 100%;
}

.rating-text {
    font-weight: 600;
    color: var(--white);
    font-size: 18px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    /* High contrast white text for background image */
}

.review-count {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    /* Semi-transparent white with shadow for subtle contrast */
}

.stars {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.stars svg {
    width: 16px;
    height: 16px;
    fill: #ffc107;
    color: #ffc107;
}

.stars.large {
    gap: 6px;
}

.stars.large svg {
    width: 24px;
    height: 24px;
}

/* Testimonials Slider */
.testimonials-slider {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

.slider-container {
    overflow: hidden;
    border-radius: 12px;
}

.slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

.slider-slide {
    width: 100%;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 0 8px;
    /* Reduced gap: 24px vs 32px for better density */
    /* Bug prevention: Ensure proper grid behavior */
    box-sizing: border-box;
    min-height: 250px;
}

.testimonial-card {
    background-color: var(--white);
    padding: 24px 28px;
    border-radius: 12px;
    box-shadow: var(--shadow-light);
    transition: var(--transition);
    min-height: 220px;
    display: flex;
    flex-direction: column;
    /* Optimized padding: 24px vs 32px and min-height: 220px vs 280px */
    /* Bug prevention: Ensure proper card behavior */
    box-sizing: border-box;
    max-height: 280px;
    overflow: hidden;
}

.testimonial-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.testimonial-quote {
    font-size: 15px;
    font-style: italic;
    margin-bottom: auto;
    line-height: 1.5;
    color: var(--dark-gray);
    /* Slightly reduced font size: 15px vs 16px and line-height: 1.5 vs 1.6 */
    /* Bug prevention: Prevent text overflow */
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}

.author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--primary-green);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    flex-shrink: 0;
}

.author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.author-name {
    font-weight: 600;
    color: var(--dark-gray);
    font-size: 16px;
}

.author-title {
    color: var(--medium-gray);
    font-size: 14px;
}

/* Slider Controls */
.slider-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
}

.slider-pagination {
    display: flex;
    gap: 8px;
}

.pagination-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    /* Enhanced visibility against background image */
}

.pagination-dot.active {
    background-color: var(--white);
    border-color: var(--white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.pagination-dot:hover {
    background-color: var(--primary-green);
    opacity: 0.8;
}

.slider-arrows {
    display: flex;
    gap: 8px;
}

.slider-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--dark-gray);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    /* Enhanced visibility against background image */
}

.slider-arrow:hover {
    border-color: var(--primary-green);
    color: var(--primary-green);
    background-color: var(--light-gray);
}

.slider-arrow svg {
    width: 20px;
    height: 20px;
}

/* How It Works Section - Updated Alternating Layout */
.how-it-works {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 60px 0;
    /* Reduced from 80px for 25% size optimization */
    position: relative;
    overflow: hidden;
    /* Bug prevention: Ensure proper container */
    box-sizing: border-box;
    /* Brand-consistent background matching problem-solution section */
    /* Bug prevention: Ensure proper section height calculation */
    min-height: auto;
    contain: layout style;
}

.how-it-works-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: stretch;
    margin-bottom: 48px;
    /* Bug prevention */
    min-height: 300px;
    overflow: hidden;
}

.steps-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 24px;
}

.step-card {
    text-align: center;
    padding: 20px 16px;
    transition: all 0.3s ease;
    cursor: pointer;
    /* Bug prevention */
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.step-card:hover {
    transform: translateY(-3px) translateZ(0);
    /* Subtle shadow for depth */
    filter: drop-shadow(0 4px 12px rgba(0, 118, 206, 0.15));
}

.step-number {
    width: 50px;
    height: 50px;
    background-color: var(--primary-green);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-heading);
    margin: 0 auto 16px;
    transition: all 0.3s ease;
    /* Bug prevention */
    will-change: transform, background-color;
    backface-visibility: hidden;
}

.step-card:hover .step-number {
    transform: scale(1.1);
    background-color: var(--color-blue-dark);
    box-shadow: 0 4px 12px rgba(0, 118, 206, 0.3);
}

.step-card h3 {
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--dark-gray);
    line-height: 1.3;
    transition: color 0.3s ease;
}

.step-card:hover h3 {
    color: var(--primary-green);
}

.step-card p {
    color: var(--medium-gray);
    line-height: 1.5;
    font-size: 14px;
    margin: 0;
    transition: color 0.3s ease;
}

.step-card:hover p {
    color: var(--text-body);
}

.how-it-works-image {
    display: flex;
    align-self: stretch;
    align-items: stretch;
}

.how-it-works-image img {
    width: 100%;
    height: 100%;
    min-height: 300px;
    max-height: 500px;
    object-fit: cover;
    object-position: center;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    aspect-ratio: 4/3;
    /* Performance optimizations for Google PageSpeed */
    image-rendering: optimizeQuality;
    will-change: auto;
    contain: layout style paint;
}

/* Mobile responsive design - Netlify compatible */
@media (max-width: 768px) {
    .how-it-works-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .how-it-works-image {
        order: -1;
    }
    
    .steps-grid-2x2 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 20px;
    }
    
    .step-card {
        padding: 16px 12px;
    }
    
    /* Reduced hover effects for mobile performance */
    .step-card:hover {
        transform: translateY(-1px) translateZ(0);
    }
    
    .step-card:hover .step-number {
        transform: scale(1.05);
    }
    
    .step-card h3 {
        font-size: 15px;
    }
    
    .step-card p {
        font-size: 13px;
    }
    
    .step-number {
        width: 45px;
        height: 45px;
        font-size: 18px;
        margin-bottom: 14px;
    }
    
    .how-it-works-image {
        align-self: auto;
    }
    
    .how-it-works-image img {
        height: auto;
        min-height: 200px;
        max-height: 300px;
        aspect-ratio: 3/2;
        border-radius: 12px;
    }
}

/* Extra small screens - Netlify compatible */
@media (max-width: 480px) {
    .how-it-works {
        padding: 40px 0;
    }
    
    .how-it-works-content {
        gap: 24px;
    }
    
    .steps-grid-2x2 {
        gap: 20px;
    }
    
    .step-card {
        padding: 16px 8px;
    }
    
    /* Minimal hover effects for small screens */
    .step-card:hover {
        transform: none;
        filter: none;
    }
    
    .step-card:hover .step-number {
        transform: scale(1.02);
    }
    
    .step-card h3 {
        font-size: 14px;
        margin-bottom: 8px;
    }
    
    .step-card p {
        font-size: 12px;
    }
    
    .step-number {
        width: 40px;
        height: 40px;
        font-size: 16px;
        margin-bottom: 12px;
    }
    
    .how-it-works-image img {
        height: auto;
        min-height: 180px;
        max-height: 250px;
        aspect-ratio: 16/9;
        border-radius: 8px;
        /* Mobile performance optimization */
        image-rendering: auto;
    }
}

/* Accessibility: Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .step-card,
    .step-number,
    .step-card h3,
    .step-card p {
        transition: none;
        will-change: auto;
    }
    
    .step-card:hover {
        transform: none;
        filter: none;
    }
    
    .step-card:hover .step-number {
        transform: none;
        box-shadow: none;
    }
}

/* All legacy interactive CSS removed */

/* Extra small mobile devices */
@media (max-width: 480px) {
    .interactive-steps {
        gap: 24px !important;
    }
    
    .step-details {
        padding: 26px 22px !important;
        min-height: 240px !important;
        height: auto !important;
        border-radius: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 16px 0 !important;
    }
    
    .step-detail {
        top: 26px !important;
        left: 22px !important;
        right: 22px !important;
        bottom: 26px !important;
    }
    
    .detail-title {
        font-size: 19px !important;
        margin-bottom: 13px !important;
        line-height: 1.2 !important;
    }
    
    .detail-description {
        gap: 9px !important;
        min-height: 0 !important;
    }
    
    .detail-description p {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    
    .detail-description p:first-child {
        font-size: 14px !important;
    }
    
    .detail-timeline {
        font-size: 12px !important;
        margin: 12px 0 0 0 !important;
        padding-top: 10px !important;
        flex-shrink: 0 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    .step-item {
        padding: 12px;
        gap: 12px;
    }
    
    .step-item.active {
        background-color: var(--sage-green) !important;
        border-color: var(--sage-green) !important;
        color: var(--white) !important;
    }
    
    .step-item.active .step-number {
        background-color: var(--white) !important;
        color: var(--sage-green) !important;
        border: 1px solid var(--white) !important;
    }
    
    .step-item.active .step-title h3 {
        color: var(--white) !important;
    }
    
    .step-item.active .step-arrow svg {
        color: var(--white) !important;
    }
}

/* Ensure smooth transitions on all devices */
@media (prefers-reduced-motion: reduce) {
    .step-detail,
    .step-item {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .step-details {
        border: 2px solid var(--dark-gray);
    }
    
    .detail-timeline {
        border-top: 2px solid var(--primary-green);
    }
}

.step-number {
    width: 60px;
    height: 60px;
    background-color: var(--primary-green);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    font-family: var(--font-heading);
    margin: 0 auto 24px;
    transition: var(--transition);
}

/* Step number animation on hover - desktop only */
@media (hover: hover) and (pointer: fine) {
    .step:hover .step-number {
        background-color: var(--dark-green);
        transform: scale(1.05);
    }
}

/* Optimize step number for smooth scaling */
.step-number {
    will-change: transform, background-color;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.step h3 {
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--dark-gray);
}

.step p {
    color: var(--medium-gray);
    line-height: 1.5;
    margin-bottom: 12px;
    min-height: 48px;
}

/* Interactive Steps Layout - Compact Design */
.interactive-steps {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 32px;
    margin-bottom: 32px;
    min-height: auto;
    align-items: flex-start;
    padding: 16px 0;
}

.steps-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.step-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition);
    border: 2px solid transparent;
}

.step-item:hover {
    background-color: rgba(104, 159, 99, 0.08);
    border-color: var(--primary-green);
}

.step-item:hover .step-arrow {
    transform: translateX(4px);
}

.step-arrow {
    transition: transform 0.3s ease;
}

.step-item.active {
    background-color: var(--sage-green);
    border-color: var(--sage-green);
    color: var(--white);
}

.step-item .step-number {
    width: 40px;
    height: 40px;
    background-color: var(--primary-green);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-heading);
    flex-shrink: 0;
    transition: var(--transition);
    margin: 0;
}

.step-item:hover .step-number {
    background-color: var(--dark-green);
    transform: scale(1.1);
}

.step-item.active .step-number {
    background-color: var(--white);
    color: var(--sage-green);
    transform: scale(1.1);
    border: 2px solid var(--white);
}

.step-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.step-title h3 {
    margin: 0;
    font-size: 16px;
    color: var(--dark-gray);
    transition: color 0.3s ease;
}

.step-item.active .step-title h3 {
    color: var(--white);
}

.step-arrow {
    opacity: 0.5;
    transition: var(--transition);
}

.step-item:hover .step-arrow,
.step-item.active .step-arrow {
    opacity: 1;
    transform: translateX(4px);
}

.step-arrow svg {
    width: 20px;
    height: 20px;
    color: var(--primary-green);
    transition: color 0.3s ease;
}

.step-item.active .step-arrow svg {
    color: var(--white);
}

/* Step Details Panel - Compact Auto-Height Design */
.step-details {
    position: relative;
    background-color: var(--white);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-gray);
    height: auto;
    min-height: 180px;
    width: 100%;
    max-width: 440px;
    margin: 0;
    overflow: hidden;
    contain: layout style;
}

.step-detail {
    position: absolute;
    top: 24px;
    left: 24px;
    right: 24px;
    bottom: 24px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: hidden;
    will-change: transform;
}

.step-detail.active {
    opacity: 1;
    visibility: visible;
}

.detail-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    justify-content: flex-start;
    text-align: left;
    padding: 0;
}

.detail-title {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--dark-gray);
    margin: 0 0 12px 0;
    line-height: 1.2;
    word-wrap: break-word;
    hyphens: auto;
}

.detail-description {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: auto;
    max-height: none;
    overflow: hidden;
}

.detail-description p {
    font-size: 15px;
    line-height: 1.5;
    color: var(--medium-gray);
    margin: 0;
    font-weight: 400;
    word-wrap: break-word;
    hyphens: auto;
}

.detail-description p:first-child {
    font-size: 16px;
    color: var(--dark-gray);
    line-height: 1.4;
    font-weight: 400;
}

/* Original timeline styling - fallback for non-enhanced sections */
.detail-timeline {
    color: var(--primary-green);
    font-weight: 600;
    font-size: 14px;
    margin: 12px 0 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border-gray);
    line-height: 1.4;
    flex-shrink: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Override original styles when inside enhanced timeline container */
.step-timeline .detail-timeline {
    margin: 0;
    padding: 0;
    border-top: none;
}

/* Enhanced Step Detail Visual Elements - Desktop Only */
@media (min-width: 769px) {
    .step-detail-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--border-gray);
    }

    .step-detail-icon {
        width: 48px;
        height: 48px;
        background-color: var(--primary-green);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.3s ease;
    }

    .step-detail-icon svg {
        width: 24px;
        height: 24px;
        color: var(--white);
    }

    .step-detail-content {
        flex: 1;
    }

    /* Enhanced Timeline Styling with Icons - Fixed Positioning */
    .step-timeline {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-top: 20px;
        padding: 14px 16px;
        background-color: rgba(104, 159, 99, 0.1);
        border-radius: 8px;
        border-left: 3px solid var(--primary-green);
        border-top: none;
        min-height: 44px;
        width: 100%;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
    }

    .step-timeline svg {
        width: 16px;
        height: 16px;
        color: var(--primary-green);
        flex-shrink: 0;
        margin-top: 2px;
        position: relative;
        z-index: 1;
    }

    .step-timeline .detail-timeline {
        color: var(--primary-green);
        font-weight: 600;
        font-size: 14px;
        margin: 0;
        padding: 0;
        border: none;
        line-height: 1.4;
        flex: 1;
        position: relative;
        z-index: 1;
        align-self: flex-start;
        margin-top: 1px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Icon Animation on Step Change */
    .step-detail.active .step-detail-icon {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(104, 159, 99, 0.3);
    }
}

/* Mobile: Complete Layout Restructure for Optimal UX */
@media (max-width: 768px) {
    /* Fix broken grid layout */
    .interactive-steps {
        display: block;
        grid-template-columns: none;
        gap: 20px;
        min-height: auto;
        padding: 12px 0;
    }
    
    /* Mobile step list - vertical pill navigation */
    .steps-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 24px;
        padding: 0 20px;
        contain: layout;
    }
    
    /* Mobile step pill styling - numbers with titles */
    .step-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: clamp(24px, 6vw, 36px);
        padding: 12px 16px;
        background: rgba(104, 159, 99, 0.08);
        border: 2px solid transparent;
        border-radius: 10px;
        min-height: 50px;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        position: relative;
        transition: all 0.3s ease;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(104, 159, 99, 0.2);
        overflow: hidden;
    }
    
    .step-item:active {
        transform: scale(0.98);
        background: rgba(104, 159, 99, 0.15);
    }
    
    .step-item.active {
        background: rgba(104, 159, 99, 0.15);
        border-color: var(--primary-green);
        box-shadow: 0 4px 12px rgba(104, 159, 99, 0.3);
        transform: scale(1.02);
    }
    
    /* Mobile step number styling - no scaling transforms */
    .step-item .step-number {
        width: 28px;
        height: 28px;
        font-size: 14px;
        font-weight: 700;
        margin: 0;
        flex-shrink: 0;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
        background: var(--primary-green);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transform: none;
    }
    
    .step-item.active .step-number {
        background: var(--sage-green);
        box-shadow: 0 2px 6px rgba(104, 159, 99, 0.4);
        transform: none !important;
    }
    
    /* Prevent any hover scaling on mobile */
    .step-item:hover .step-number,
    .step-item:active .step-number,
    .step-item:focus .step-number {
        transform: none !important;
    }
    
    /* Extra small screen safeguard - reduce gap if needed */
    @media (max-width: 320px) {
        .step-item {
            gap: clamp(28px, 7vw, 36px) !important;
            padding: 12px 16px;
        }
    }
    
    /* Mobile step pills - no text, clean numbered circles only */
    .step-item::after {
        content: "";
        display: none;
    }
    
    /* Mobile step title styling - Enhanced with overflow protection */
    .step-item .step-title {
        display: flex !important;
        align-items: center;
        flex: 1;
        visibility: visible !important;
        opacity: 1 !important;
        min-width: 0;
        max-width: calc(100% - 80px);
        word-wrap: break-word;
        overflow-wrap: break-word;
        overflow: hidden;
    }
    
    .step-item .step-title h3 {
        font-size: clamp(14px, 4vw, 16px) !important;
        font-weight: 600;
        color: var(--dark-gray) !important;
        margin: 0;
        line-height: 1.4;
        display: block !important;
        visibility: visible !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        max-width: 100%;
    }
    
    /* Hide step arrow on mobile */
    .step-item .step-arrow {
        display: none !important;
    }
    
    /* Mobile step details panel styling */
    .step-details {
        margin-top: 24px;
        padding: 0 20px;
    }
    
    .step-detail {
        display: none;
        padding: 20px;
        background: var(--white);
        border-radius: 12px;
        border: 1px solid var(--border-gray);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    
    .step-detail.active {
        display: block;
    }
    
    .step-detail h3 {
        font-size: 20px;
        font-weight: 600;
        color: var(--dark-gray);
        margin-bottom: 16px;
    }
    
    .step-detail p {
        font-size: 15px;
        line-height: 1.6;
        color: var(--medium-gray);
        margin-bottom: 16px;
    }
    
    /* Hide desktop-only elements on mobile */
    .step-detail-header {
        display: none;
    }
    
    .step-timeline {
        display: none;
    }
    
    /* Mobile CTA optimization */
    .how-it-works-cta {
        padding: 24px 0;
        text-align: center;
    }
    
    .how-it-works-cta .cta-text {
        font-size: 16px;
        margin-bottom: 20px;
    }
    
    .how-it-works-cta .cta-button {
        font-size: 16px;
        padding: 14px 28px;
    }
}

/* Icon Fallback Styles - Hide if Feather Icons fail to load */
.step-detail-icon svg[data-feather]:not([class*="feather-"]) {
    display: none;
}

.step-timeline svg[data-feather]:not([class*="feather-"]) {
    display: none;
}

/* Graceful degradation for missing icons */
@supports not (display: flex) {
    .step-detail-header {
        display: block;
    }
    
    .step-detail-icon {
        display: inline-block;
        vertical-align: middle;
        margin-right: 16px;
    }
    
    .step-timeline {
        display: block;
    }
}

/* Bug Prevention: Ensure timeline text never breaks layout */
.step-timeline .detail-timeline {
    max-width: calc(100% - 26px); /* Account for icon width + gap */
    min-width: 0; /* Allow text to shrink if needed */
}

/* Fix for potential text overlapping issues */
@media (min-width: 769px) {
    .step-timeline {
        contain: layout style;
    }
}

/* Mobile-specific bug prevention for vertical pill navigation */
@media (max-width: 768px) {
    /* Prevent layout collapse and ensure consistent sizing */
    .step-item {
        min-height: 60px;
        max-height: 80px;
        width: 100%;
        box-sizing: border-box;
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        position: relative;
        z-index: 1;
    }
    
    /* Mobile step titles now visible - removed hiding rules */
    
    /* Ensure step numbers maintain exact sizing */
    .step-item .step-number {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        flex-grow: 0;
        min-width: 32px;
        min-height: 32px;
    }
    
    /* No text content on mobile - remove text overflow rules */
    
    /* Prevent layout shifts during state changes */
    .steps-list {
        contain: layout style;
        will-change: auto;
        transform: translateZ(0);
    }
    
    /* Optimize touch interactions */
    .step-item {
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
    
    /* Prevent content overflow and scroll issues */
    .interactive-steps {
        overflow-x: hidden;
        overflow-y: visible;
    }
    
    /* Accessibility improvements */
    .step-item:focus {
        outline: 2px solid var(--color-blue);
        outline-offset: 2px;
    }
    
    /* Performance optimization for animations */
    .step-item,
    .step-item .step-number {
        transform: translateZ(0);
        will-change: transform, background-color;
    }
}

.how-it-works-cta {
    text-align: center;
}

.cta-text {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 24px;
    color: var(--dark-gray);
}

/* Services Section */
.services {
    padding: 48px 0;
    /* Reduced from 60px for size optimization */
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    /* Matching light gray gradient from other sections */
    position: relative;
    overflow: hidden;
    /* Bug prevention: Ensure proper container */
    box-sizing: border-box;
    /* Netlify compatibility: Ensure proper section behavior */
    min-height: auto;
    contain: layout style;
}

/* Remove services-content styling - no longer needed */
.services-content {
    display: none;
    /* Legacy styling removed */
}

.services-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 36px;
    /* Reduced from 48px for compactness */
    max-width: 1000px;
    margin: 0 auto;
    /* Center the grid */
    /* Bug prevention: Ensure proper grid behavior */
    box-sizing: border-box;
    contain: layout style;
    /* Mobile optimization: Prevent overflow */
    width: 100%;
    overflow: hidden;
}

.services-header {
    text-align: center;
    /* Center align for clean 2x2 layout */
    margin-bottom: 48px;
    /* Bug prevention: Consistent spacing */
    max-width: 100%;
    overflow-wrap: break-word;
}

/* Desktop: Make title fit on one line */
@media (min-width: 769px) {
    .services-header .section-title {
        font-size: 32px;
        line-height: 1.2;
    }
}

.services-subtitle {
    font-size: 18px;
    color: var(--medium-gray);
    margin-bottom: 32px;
    line-height: 1.6;
}

.services-credentials-centered {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 48px;
}

.credential-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--white);
    padding: 12px 20px;
    border-radius: 25px;
    box-shadow: var(--shadow-light);
    color: var(--dark-gray);
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--border-gray);
    transition: var(--transition);
}

.credential-badge:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.credential-badge i {
    width: 16px;
    height: 16px;
    color: var(--primary-green);
    flex-shrink: 0;
}

/* Legacy .services-text removed */

.services-sidebar {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-self: start;
}

.services-image {
    width: 100%;
    margin-bottom: 32px;
}

.services-image img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    display: block;
}

/* Legacy .services-grid replaced with .services-grid-2x2 */

.service-card {
    text-align: center;
    padding: 24px 16px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    /* Bug prevention */
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.service-card:hover {
    transform: translateY(-3px) translateZ(0);
    /* Subtle shadow for depth */
    filter: drop-shadow(0 4px 12px rgba(0, 118, 206, 0.15));
}

.service-card.featured {
    /* Remove scaling and border for visual consistency */
}

.service-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-green);
    color: var(--white);
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 118, 206, 0.3);
    z-index: 10;
}

.service-price {
    color: var(--primary-green);
    font-weight: 600;
    font-size: 14px;
    margin-top: 8px;
    margin-bottom: 4px;
}

.service-context {
    color: var(--medium-gray);
    font-size: 12px;
    font-style: italic;
    margin-top: 4px;
}

.service-card h3 {
    font-size: 18px;
    margin-bottom: 12px;
    color: var(--dark-gray);
    font-weight: 600;
    transition: color 0.3s ease;
}

.service-card:hover h3 {
    color: var(--primary-green);
}

.service-card p {
    font-size: 14px;
    margin: 0;
    color: var(--medium-gray);
    line-height: 1.5;
    min-height: auto;
    transition: color 0.3s ease;
}

.service-card:hover p {
    color: var(--text-body);
}

.service-icon {
    width: 50px;
    height: 50px;
    background-color: var(--primary-green);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    transition: all 0.3s ease;
    /* Bug prevention */
    will-change: transform, background-color;
    backface-visibility: hidden;
}

.service-icon svg {
    width: 24px;
    height: 24px;
    color: var(--white);
    transition: all 0.3s ease;
}

.service-card:hover .service-icon {
    transform: scale(1.1);
    background-color: var(--color-blue-dark);
    box-shadow: 0 4px 12px rgba(0, 118, 206, 0.3);
}





.services-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    object-fit: cover;
    aspect-ratio: 4/3;
    background-color: var(--light-gray);
}

/* Tablet responsive design for Services - Netlify compatible */
@media (max-width: 768px) {
    .services-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .services-image {
        order: -1;
    }
    
    .services-grid-2x2 {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .service-card {
        padding: 20px 16px;
    }
    
    /* Reduced hover effects for tablet */
    .service-card:hover {
        transform: translateY(-2px) translateZ(0);
        filter: drop-shadow(0 3px 8px rgba(0, 118, 206, 0.12));
    }
    
    .service-card:hover .service-icon {
        transform: scale(1.08);
    }
    
    .service-card h3 {
        font-size: 17px;
    }
    
    .service-card p {
        font-size: 14px;
    }
    
    .service-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 15px;
    }
    
    .service-icon svg {
        width: 23px;
        height: 23px;
    }
    
    .services-image img {
        aspect-ratio: 3/2;
        border-radius: 10px;
    }
    

}

/* Additional mobile breakpoint for extra small screens - Netlify compatible */
@media (max-width: 480px) {
    .services {
        padding: 40px 0;
    }
    
    .services-content {
        gap: 24px;
    }
    
    .services-grid-2x2 {
        gap: 20px;
    }
    
    .services-image img {
        aspect-ratio: 3/2;
        border-radius: 8px;
    }
    

    
    .service-card {
        padding: 18px 14px;
    }
    
    /* Reduced hover effects for small screens */
    .service-card:hover {
        transform: translateY(-1px) translateZ(0);
        filter: drop-shadow(0 2px 6px rgba(0, 118, 206, 0.1));
    }
    
    .service-card:hover .service-icon {
        transform: scale(1.05);
    }
    
    .service-card h3 {
        font-size: 16px;
    }
    
    .service-card p {
        font-size: 13px;
    }
    
    .service-icon {
        width: 45px;
        height: 45px;
        margin-bottom: 14px;
    }
    
    .service-icon svg {
        width: 22px;
        height: 22px;
    }
}

/* Accessibility: Disable Services animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .service-card,
    .service-icon,
    .service-card h3,
    .service-card p {
        transition: none;
        will-change: auto;
    }
    
    .service-card:hover {
        transform: none;
        filter: none;
    }
    
    .service-card:hover .service-icon {
        transform: none;
        box-shadow: none;
    }
}

/* Portfolio Preview */
.portfolio-preview {
    padding: var(--section-padding);
    background-color: #f8f9fa !important;
}



.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
    margin-bottom: 48px;
}

.portfolio-item {
    background-color: rgba(104, 159, 99, 0.08);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: var(--transition);
}

.portfolio-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
}

.portfolio-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
    /* Optimization for PageSpeed */
    image-rendering: optimizeQuality;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.portfolio-item:hover .portfolio-image img {
    transform: scale(1.05);
}

.portfolio-content {
    padding: 20px;
}

.portfolio-content h3 {
    margin-bottom: 8px;
    font-size: 18px;
}

.portfolio-content p {
    margin-bottom: 12px;
    color: var(--medium-gray);
    font-size: 14px;
}

.portfolio-details {
    display: flex;
    justify-content: flex-start;
    gap: 16px;
    font-size: 12px;
}

.timeline {
    color: var(--medium-gray);
}

.investment {
    color: var(--primary-green);
    font-weight: 600;
}

.portfolio-cta {
    text-align: center;
}

/* Contact Section */
.contact {
    padding: var(--section-padding);
    background: linear-gradient(135deg, #f0f4f1 0%, #e8f2ea 100%);
    position: relative;
    overflow: hidden;
    /* Subtle gradient background for visual depth */
}

.contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(0, 118, 206, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 118, 206, 0.02) 0%, transparent 50%);
    pointer-events: none;
    /* Subtle pattern overlay for visual interest */
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    /* Ensure content appears above background pattern */
}

.contact-left h2 {
    margin-bottom: 24px;
    font-size: 42px;
    line-height: 1.1;
    color: var(--dark-gray);
    font-weight: 700;
    /* Enhanced typography hierarchy for better visual impact */
}

.contact-left p {
    font-size: 18px;
    line-height: 1.6;
    color: var(--medium-gray);
    margin-bottom: 32px;
    font-weight: 400;
    /* Improved description text prominence */
}



.contact-details {
    margin-top: 32px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.contact-item svg {
    width: 20px;
    height: 20px;
    color: var(--primary-green);
}

.contact-link {
    color: var(--dark-gray);
    text-decoration: none;
    transition: var(--transition);
}

.contact-link:hover {
    color: var(--primary-green);
}

/* Restore form styling after nuclear reset */
.contact-form {
    padding: 0 !important;
}

.contact-form h3 {
    margin-bottom: 32px !important;
    text-align: left !important;
    color: var(--dark-gray) !important;
    font-size: 28px !important;
    font-weight: 600 !important;
}

.contact .form-group {
    margin-bottom: 20px !important;
}

.contact .form-group input,
.contact .form-group textarea {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 1px solid rgba(104, 159, 99, 0.2) !important;
    border-radius: 8px !important;
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    transition: var(--transition) !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.contact-form h3 {
    margin-bottom: 32px;
    text-align: left;
    color: var(--dark-gray);
    font-size: 28px;
    font-weight: 600;
}

.form-group {
    margin-bottom: 20px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid #e2e8e5;
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 16px;
    transition: all 0.3s ease;
    background-color: #fafbfa;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    
    /* Enhanced form styling with subtle depth */
    /* Bug prevention: explicit box-sizing */
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-green);
    background-color: var(--white);
    box-shadow: 
        0 0 0 4px rgba(0, 118, 206, 0.12),
        0 4px 16px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    transform: translateY(-1px);
    /* Enhanced focus state with subtle lift effect */
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

/* Footer */
.footer {
    background-color: var(--dark-gray);
    color: var(--white);
    padding: 48px 0 24px;
}

.footer-credentials {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    margin: 32px 0;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-credentials .credential-badge {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
}

.footer-credentials .credential-badge:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.footer-credentials .credential-badge i {
    color: var(--sage-green);
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 32px;
}

.footer h3,
.footer h4 {
    color: var(--white);
    margin-bottom: 16px;
}

.footer p {
    margin-bottom: 12px;
    line-height: 1.6;
}

.license {
    font-size: 14px;
    color: var(--medium-gray);
    margin-top: 16px;
}

.footer-service-areas {
    margin-top: 16px;
}

.footer-service-areas h5 {
    color: var(--white);
    margin-bottom: 8px;
    font-size: 14px;
}

.footer-service-areas p {
    font-size: 14px;
    color: var(--medium-gray);
    line-height: 1.5;
}

.footer-bottom {
    border-top: 1px solid #444;
    padding-top: 24px;
    text-align: center;
    color: var(--medium-gray);
}

/* Responsive Design */
@media (max-width: 768px) {
    :root {
        --section-padding: 60px 0;
        --container-padding: 16px;
    }
    
    /* Typography adjustments for mobile */
    h1 {
        font-size: 36px;
    }
    
    h2 {
        font-size: 28px;
    }
    
    h3 {
        font-size: 24px;
    }
    
    .hero-headline {
        font-size: 42px;
    }
    
    /* Header mobile */
    .nav {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .mobile-menu.active {
        display: block;
    }
    
    /* Hero mobile - Optimized for landscape image aspect ratios */
    .hero {
        min-height: 50vh;
        padding: 0;
        /* Enhanced fallback gradient background for better loading experience */
        background: linear-gradient(135deg, #0076CE 0%, #004B87 100%);
    }
    
    /* Mobile-optimized image positioning with page-specific adjustments */
    .hero-background img {
        object-position: center 20%;
        /* Prioritize showing the key landscape elements on mobile */
        min-height: 100%;
        /* Ensure full coverage */
    }
    
    .hero-headline {
        font-size: 36px;
    }
    
    .hero-subheadline {
        font-size: 18px;
    }
    
    .hero-ctas {
        flex-direction: column;
        align-items: center;
    }
    
    /* Problem mobile */
    .problem-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    /* Removed mobile before/after label styles - now using single professional image */
    
    /* Mobile responsive problem grid */
    .problem-grid {
        grid-template-columns: 1fr; /* Stack vertically on mobile */
        gap: 16px;
    }
    
    .problem-item {
        padding: 20px; /* Slightly smaller padding on mobile */
    }
    
    .problem-item p {
        font-size: 15px; /* Slightly smaller font on mobile */
    }
    
    .problem-image {
        order: 0;
    }
    
    .problem-text {
        order: 1;
        padding: 0;
    }
    
    .problem-grid {
        grid-template-columns: 1fr;
    }
    
    /* Solution mobile */
    .solution-stats {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    /* Full width image section removed */
    
    /* Testimonials mobile optimization for flower background */
    .testimonials {
        background-attachment: scroll;
        background-position: center center;
        /* Optimized positioning for blue flowers on mobile */
        background-size: cover;
        padding: 40px 0;
        /* Further reduced mobile padding for better proportions */
        /* Bug prevention: Ensure flowers display properly on all mobile devices */
    }
    
    .testimonials::before {
        background-color: rgba(0, 0, 0, 0.65);
        /* Enhanced mobile overlay for flower background readability */
        /* Bug prevention: Ensures text remains readable on colorful background */
    }
    
    .testimonials .section-title {
        font-size: 32px;
        line-height: 1.1;
        text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.9);
        margin-bottom: 8px;
        /* Further optimized mobile sizing: 32px vs 36px */
        /* Enhanced shadow for mobile screens */
    }
    
    /* Testimonials mobile */
    .slider-slide {
        grid-template-columns: 1fr;
        gap: 20px;
        min-height: 200px;
        /* Tighter mobile spacing and reduced height */
        /* Bug prevention: Ensure mobile cards don't break layout */
    }
    
    .testimonial-card {
        min-height: auto;
        padding: 20px;
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(2px);
        /* Compact mobile padding: 20px vs 24px */
        /* Enhanced card visibility against background */
        /* Bug prevention: Ensure mobile readability */
        max-height: 250px;
        overflow: hidden;
    }
    
    .slider-controls {
        flex-direction: column-reverse;
        gap: 24px;
        align-items: center;
    }
    
    /* Services mobile */
    .services-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .services-grid-2x2 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 24px;
        order: 2;
    }
    
    .services-sidebar {
        order: 1;
        gap: 24px;
    }
    
    .services-image {
        margin-bottom: 24px;
    }
    
    .services-image img {
        height: 250px;
        aspect-ratio: 4/3;
        border-radius: 12px;
    }
    
    .problem-image {
        height: 250px;
        /* Match Services section mobile container height */
    }
    
    .problem-image img {
        height: 250px;
        aspect-ratio: 4/3;
        border-radius: 12px;
        object-position: center;
        /* Match Services section mobile styling */
    }
    
    .services-header {
        margin-bottom: 32px;
        padding: 0 16px;
    }
    
    .services-subtitle {
        font-size: 16px;
        margin-bottom: 24px;
    }
    
    .services-credentials-centered {
        gap: 16px;
        margin-bottom: 32px;
    }
    
    .credential-badge {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .credential-badge i {
        width: 14px;
        height: 14px;
    }
    
    .service-card {
        padding: 20px 16px;
    }
    
    .service-card p {
        min-height: auto;
        margin-bottom: 0;
    }
    
    .service-card.featured {
        transform: none;
        border: 1px solid rgba(104, 159, 99, 0.15) !important;
    }
    
    .services-cta {
        padding: 24px 20px;
        text-align: center;
    }
    
    .services-cta-text {
        font-size: 18px;
        margin-bottom: 20px;
    }
    
    /* Removed service-context styling as pricing elements are no longer used */
    
    /* Contact mobile */
    .contact-content {
        grid-template-columns: 1fr;
        gap: 32px;
        max-width: 100%;
    }
    
    /* Nuclear mobile overrides for contact section */
    .contact,
    .contact *,
    .contact .container,
    .contact .contact-content,
    .contact .contact-info,
    .contact .contact-form {
        background-color: transparent !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
    }
    
    .contact {
        padding: var(--section-padding) !important;
        background-color: rgba(104, 159, 99, 0.08) !important;
    }
    
    .contact .contact-content {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        max-width: 100% !important;
        padding: 16px !important;
    }
    
    .contact-left h2 {
        font-size: 32px !important;
        text-align: center !important;
        margin-bottom: 16px !important;
        /* Enhanced mobile typography */
    }
    
    .contact-left p {
        font-size: 16px !important;
        text-align: center !important;
        margin-bottom: 24px !important;
        /* Mobile description styling */
    }
    
    .contact-form h3 {
        font-size: 24px !important;
        text-align: center !important;
        margin-bottom: 24px !important;
        /* Mobile form title */
    }
    
    .contact-content {
        gap: 24px;
        padding: 0 16px;
    }
    
    /* Footer mobile */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
    }
    
    .footer-credentials {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    
    .footer-credentials .credential-badge {
        min-width: 200px;
        justify-content: center;
    }
    
    /* Mobile Google Rating */
    .google-rating {
        margin: 0 16px 32px 16px;
    }
    
    .rating-text {
        font-size: 16px;
    }
    
    .review-count {
        font-size: 13px;
    }
    
    /* Grid adjustments */
    .problem-grid,
    .testimonials-grid,
    .services-grid-2x2 {
        grid-template-columns: 1fr;
    }
    
    /* Enhanced mobile service cards with consistent sage green accents */
    .service-card {
        border: 1px solid rgba(104, 159, 99, 0.15) !important;
        padding: 20px 16px !important;
    }
    
    .service-card:hover {
        border-color: rgba(104, 159, 99, 0.4) !important;
    }
    
    /* Responsive service icon sizing for mobile */
    .service-icon {
        width: 45px !important;
        height: 45px !important;
    }
    
    .service-icon svg {
        width: 22px !important;
        height: 22px !important;
    }
    
    /* Interactive Steps Mobile Layout */
    .interactive-steps {
        grid-template-columns: 1fr;
        gap: 24px;
        min-height: auto;
        padding: 16px 0;
    }
    
    .steps-list {
        order: 2;
    }
    
    .step-details {
        order: 1;
        min-height: 280px;
        height: auto;
        margin-bottom: 24px;
        padding: 32px 24px;
        max-width: 100%;
        margin: 24px 0;
        border-radius: 16px;
        width: 100%;
    }
    
    .step-item {
        padding: 16px;
        gap: 16px;
    }
    
    .step-item.active {
        background-color: var(--sage-green) !important;
        border-color: var(--sage-green) !important;
        color: var(--white) !important;
    }
    
    .step-item.active .step-number {
        background-color: var(--white) !important;
        color: var(--sage-green) !important;
        border: 2px solid var(--white) !important;
    }
    
    .step-item.active .step-title h3 {
        color: var(--white) !important;
    }
    
    .step-item.active .step-arrow svg {
        color: var(--white) !important;
    }
    
    .step-item .step-number {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
    
    .step-title h3 {
        font-size: 16px;
    }
    
    .step-arrow {
        display: none;
    }
    
    .step-detail {
        top: 32px;
        left: 24px;
        right: 24px;
        bottom: 32px;
    }
    
    .detail-content {
        gap: 0;
        text-align: left;
        justify-content: flex-start;
    }
    
    .detail-title {
        font-size: 22px;
        margin-bottom: 16px;
        line-height: 1.3;
    }
    
    .detail-description {
        gap: 12px;
        min-height: 0;
    }
    
    .detail-description p {
        font-size: 15px;
        line-height: 1.5;
    }
    
    .detail-description p:first-child {
        font-size: 16px;
    }
    
    .detail-timeline {
        font-size: 13px;
        padding-top: 12px;
        margin: 16px 0 0 0;
        flex-shrink: 0;
    }
    
    .detail-icon {
        width: 50px;
        height: 50px;
    }
    
    .detail-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .detail-text p {
        font-size: 16px;
    }
    
    .detail-timeline {
        font-size: 12px;
    }
    
    .detail-badge {
        font-size: 11px;
        padding: 4px 8px;
    }
    

    
    .portfolio-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media (max-width: 480px) {
    /* Extra small mobile hero optimization */
    .hero {
        min-height: clamp(350px, 45vh, 450px);
        /* Optimized for landscape images - reduced height prevents empty space */
    }
    
    .hero-background img {
        object-position: center 15%;
        /* Fine-tune positioning for very small screens - show more of the landscape */
        object-fit: cover;
        /* Ensure proper coverage */
    }
    
    .hero-headline {
        font-size: 32px;
    }
    
    .hero-ctas {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-button {
        width: 100%;
        text-align: center;
        /* Enhanced mobile handling for longer text "Book My Free Consultation" */
        white-space: normal;
        padding: 14px 16px;
        line-height: 1.3;
        word-wrap: break-word;
        hyphens: auto;
        /* Ensure button remains usable on very small screens */
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .solution-ctas {
        flex-direction: column;
    }
    
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
    
    .portfolio-image img {
        height: 180px;
    }
    
    .services-credentials-centered {
        flex-direction: column;
        align-items: center;
    }
    
    .credential-badge {
        min-width: 200px;
        justify-content: center;
    }
    
    .services-sidebar {
        gap: 20px;
    }
    
    .services-cta {
        padding: 20px 16px;
    }
    
    .services-cta-text {
        font-size: 15px;
    }
    
    /* Mobile image optimization */
    .services-image img {
        height: 180px;
        object-fit: cover;
        aspect-ratio: 4/3;
        border-radius: 8px;
    }
    
    .contact-content {
        gap: 20px;
        padding: 0 12px;
    }
    
    /* Complete nuclear override for smallest screens */
    .contact,
    .contact *:not(input):not(textarea):not(button) {
        background-color: transparent !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
    }
    
    .contact {
        background-color: rgba(104, 159, 99, 0.08) !important;
    }
    
    .contact .contact-content {
        gap: 20px !important;
        padding: 12px !important;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus styles for keyboard navigation */
.cta-button:focus,
.nav-links a:focus,
.mobile-nav-links a:focus,
.form-group input:focus,
.form-group textarea:focus {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
}

/* FAQ Accordion */
.faq-list {
    max-width: 768px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-card {
    background: var(--color-white);
    border: 1.5px solid var(--border-blue);
    border-radius: 12px;
    padding: 18px 22px;
}

.faq-card.open {
    border-color: var(--color-blue);
}

.faq-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    font-weight: 600;
    color: var(--color-navy);
    font-size: 18px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.faq-trigger:focus {
    outline: 2px solid var(--color-blue);
    outline-offset: 3px;
}

.faq-icon {
    width: 20px;
    height: 20px;
    position: relative;
    flex-shrink: 0;
}

.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 2px;
    background: var(--color-blue);
    transform: translate(-50%, -50%) rotate(0deg);
    transition: transform 0.24s ease;
}

.faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-icon.open::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.faq-icon.open::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.faq-panel {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.24s ease, opacity 0.2s ease;
    will-change: max-height;
}

.faq-panel.open {
    max-height: 600px;
    opacity: 1;
}

.faq-answer {
    color: var(--color-charcoal);
    font-size: 16px;
    margin-top: 10px;
}

/* Print styles */
@media print {
    .header,
    .mobile-menu,
    .hero-ctas,
    .solution-ctas,
    .testimonials-cta,
    .how-it-works-cta,
    .services-cta,
    .contact-form {
        display: none;
    }
}

/* How It Works - New Alternating Layout Styles */

/* Row structure matching problem-solution pattern */
.how-it-works-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    /* Reduced from 60px for tighter spacing */
    align-items: center;
    margin-bottom: 60px;
    /* Reduced from 80px for 25% optimization */
    position: relative;
    z-index: 2;
    /* Bug prevention: Ensure proper grid behavior */
    min-height: 0;
    overflow: visible;
    /* Matches problem-solution-row styling */
    /* Bug prevention: Smooth transitions between rows */
    scroll-margin-top: 60px;
    /* Adjusted for new padding */
    /* For anchor links */
    /* Bug prevention: Prevent layout shifts */
    grid-auto-rows: minmax(auto, max-content);
}

.how-it-works-row:last-child {
    margin-bottom: 0;
    /* Bug prevention: Remove extra spacing on last row */
}

.how-it-works-row.solution-row {
    /* Reverse order for alternating layout */
    grid-template-columns: 1fr 1fr;
    /* Bug prevention: Maintain consistent columns */
}

/* Step icon styling for unified design */
.step-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #7AC142 0%, #5a9532 100%);
    border: 2px solid var(--color-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Bug prevention: Consistent icon sizing */
    box-sizing: border-box;
    position: relative;
    margin-right: 16px;
    /* Enhanced with blue border for brand consistency */
    box-shadow: 0 2px 8px rgba(0, 118, 206, 0.15);
}

.step-icon i {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
    /* Bug prevention: Consistent icon weight */
}

.step-icon:hover {
    transform: scale(1.1) translateZ(0);
    box-shadow: 0 8px 24px rgba(0, 118, 206, 0.3), 0 4px 12px rgba(122, 193, 66, 0.2);
    border-color: var(--color-blue-dark);
    /* Enhanced hover effect with blue emphasis */
    /* Bug prevention: Hardware acceleration */
    will-change: transform, box-shadow, border-color;
}

/* Content styling to match problem-solution pattern */
.how-it-works .content-title {
    color: var(--color-blue);
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 32px;
    position: relative;
    /* Bug prevention: Consistent title styling */
    line-height: 1.2;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Step number styling */
.step-number-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-blue);
    color: white;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    /* Bug prevention: Consistent number styling */
    flex-shrink: 0;
    box-sizing: border-box;
}

.how-it-works .content-details h4 {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-charcoal);
    margin-bottom: 8px;
    /* Bug prevention: Consistent heading styling */
    line-height: 1.3;
}

.how-it-works .content-details p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--dark-gray);
    margin: 0;
    /* Bug prevention: Prevent text overflow */
    overflow-wrap: break-word;
    word-break: break-word;
}

.how-it-works .content-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0;
    /* Single item per step */
    /* Bug prevention: Proper flex behavior */
    gap: 16px;
    width: 100%;
}

/* Mobile responsive design - Netlify compatible */
@media (max-width: 768px) {
    .how-it-works {
        padding: 60px 0;
        /* Reduced mobile padding */
        /* Bug prevention: Ensure background works on mobile */
        background-attachment: scroll;
    }
    
    .how-it-works-row {
        grid-template-columns: 1fr;
        gap: 32px;
        /* Reduced mobile gap for compactness */
        margin-bottom: 48px;
        /* Reduced mobile margin */
        text-align: center;
        /* Stack vertically on mobile */
        /* Bug prevention: Proper mobile stacking */
        align-items: center;
        /* Bug prevention: Prevent mobile overflow */
        max-width: 100%;
        overflow: hidden;
    }
    
    .how-it-works-row.solution-row {
        /* Maintain same order on mobile */
        grid-template-columns: 1fr;
    }
    
    .how-it-works .content-image {
        order: -1;
        /* Images first on mobile */
        /* Bug prevention: Proper mobile image handling */
        max-width: 100%;
        overflow: hidden;
        /* Mobile optimization: Ensure proper display */
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 200px;
    }
    
    .how-it-works .content-title {
        font-size: 24px;
        margin-bottom: 24px;
        /* Mobile title optimization */
        justify-content: center;
        /* Bug prevention: Center on mobile */
    }
    
    .step-number-text {
        width: 28px;
        height: 28px;
        font-size: 14px;
        /* Mobile step number sizing */
    }
    
    .how-it-works .content-details h4 {
        font-size: 18px;
        /* Mobile heading optimization */
    }
    
    .step-icon {
        width: 44px;
        height: 44px;
        /* Slightly smaller on mobile */
        border-width: 2px;
        /* Maintain border visibility */
    }
    
    .step-icon i {
        width: 18px;
        height: 18px;
        /* Mobile icon size */
    }
    
    /* Bug prevention: Reduced animations on mobile for performance */
    .step-icon:hover {
        transform: scale(1.05) translateZ(0);
    }
}

/* Extra small screens - Netlify compatible */
@media (max-width: 480px) {
    .how-it-works {
        padding: 40px 0;
        /* Further reduced padding for small screens */
        /* Bug prevention: Ensure proper spacing on tiny screens */
        min-height: auto;
    }
    
    .how-it-works-row {
        gap: 20px;
        /* Further reduced for small screens */
        margin-bottom: 32px;
        /* Optimized small screen spacing */
        /* Compact mobile spacing */
        /* Bug prevention: Prevent layout breaks */
        min-height: auto;
        overflow: visible;
        /* Bug prevention: Ensure content fits */
        padding: 0 8px;
    }
    
    .how-it-works .content-title {
        font-size: 20px;
        margin-bottom: 20px;
        /* Smaller titles on tiny screens */
        flex-direction: column;
        gap: 8px;
        /* Stack number and title on very small screens */
    }
    
    .step-number-text {
        width: 24px;
        height: 24px;
        font-size: 12px;
        /* Very small step numbers */
    }
    
    .how-it-works .content-details h4 {
        font-size: 16px;
        /* Smaller headings on tiny screens */
        /* Bug prevention: Prevent text overflow */
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .how-it-works .content-details p {
        font-size: 15px;
        line-height: 1.5;
        /* Compact text on small screens */
    }
    
    .step-icon {
        width: 40px;
        height: 40px;
        /* Smaller icons for tiny screens */
        margin-right: 12px;
    }
    
    .step-icon i {
        width: 16px;
        height: 16px;
        /* Tiny screen icon size */
    }
    
    /* Bug prevention: Disable complex hover effects on tiny screens */
    .step-icon:hover {
        transform: translateZ(0);
        /* No scaling on tiny screens for better touch experience */
    }
}

/* Netlify compatibility: Progressive enhancement */
@supports (display: grid) {
    .how-it-works-row {
        display: grid;
    }
}

@supports not (display: grid) {
    .how-it-works-row {
        display: flex;
        flex-direction: column;
        /* Fallback for older browsers */
    }
    
    .how-it-works .content-text,
    .how-it-works .content-image {
        width: 100%;
        margin-bottom: 20px;
    }
}

/* Performance optimization and accessibility - Netlify compatible */
.how-it-works * {
    /* Bug prevention: Smooth animations */
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: auto;
}

/* Bug prevention: Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .step-icon,
    .step-number-text {
        transition: none;
        transform: none !important;
        animation: none !important;
    }
    
    .step-icon:hover {
        transform: none !important;
    }
}

/* Bug prevention: High contrast mode support */
@media (prefers-contrast: high) {
    .step-icon {
        border-width: 3px;
        border-color: currentColor;
    }
    
    .step-number-text {
        border: 2px solid currentColor;
    }
}

/* Bug prevention: Respect user's color scheme preference while maintaining brand consistency */
@media (prefers-color-scheme: dark) {
    .how-it-works {
        /* Maintain brand-consistent light background even in dark mode */
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
        /* Ensure content remains readable */
        color: var(--color-charcoal);
    }
    
    .how-it-works .content-title,
    .how-it-works .content-details h4 {
        /* Enhanced contrast for dark mode users */
        color: var(--color-blue) !important;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
    }
}

/* Netlify edge case: Ensure images load properly */
.how-it-works .content-image img {
    /* Bug prevention: Consistent image behavior */
    object-fit: cover;
    object-position: center;
    background-color: #f0f0f0;
    /* Fallback while loading */
    border-radius: 12px;
    /* Consistent with site design */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease, transform 0.3s ease;
    /* Bug prevention: Ensure images display properly */
    display: block;
    width: 100%;
    height: auto;
    /* Optimized sizing for compactness */
    min-height: 160px;
    /* Reduced from 200px */
    max-height: 280px;
    /* Reduced from 400px */
    /* Netlify compatibility: Force image visibility */
    opacity: 1 !important;
    visibility: visible !important;
}

/* Bug prevention: Enhanced image loading with fallbacks */
.how-it-works .content-image img[loading="lazy"] {
    /* Remove initial opacity hide to prevent missing images */
    opacity: 1;
    transition: opacity 0.3s ease;
    /* Bug prevention: Ensure lazy images still display */
    min-height: 250px;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
    background-size: cover;
}

.how-it-works .content-image img.loaded {
    opacity: 1;
    transform: scale(1);
}

/* Bug prevention: Image error handling */
.how-it-works .content-image img:not([src]),
.how-it-works .content-image img[src=""] {
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
    position: relative;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.how-it-works .content-image img:not([src])::before,
.how-it-works .content-image img[src=""]::before {
    content: "Image Loading...";
    color: #666;
    font-size: 14px;
}


/* Additional Bug Prevention and Mobile Optimization for How It Works */

/* Netlify compatibility: Ensure proper container behavior */
.how-it-works .content-image {
    /* Bug prevention: Proper flex container */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-width: 0;
    /* Prevent flex shrinking issues */
    flex-shrink: 0;
    /* Optimized aspect ratio for size reduction */
    aspect-ratio: 3/2;
    /* Changed from 4/3 to 3/2 for compactness */
    overflow: hidden;
    border-radius: 12px;
    /* Bug prevention: Maximum height constraint */
    max-height: 280px;
    /* Prevents oversized images */
}

/* Bug prevention: Ensure grid stability */
.how-it-works-row {
    /* Force layout stability */
    contain: layout style;
    /* Bug prevention: Prevent content jumping */
    min-height: 200px;
}

/* Performance optimization for mobile */
@media (max-width: 768px) {
    .how-it-works .content-image {
        /* Mobile-specific image container optimization */
        aspect-ratio: 3/2;
        min-height: 140px;
        /* Reduced for mobile compactness */
        max-height: 240px;
        /* Reduced for mobile optimization */
        /* Bug prevention: Prevent mobile layout breaks */
        width: 100%;
        margin: 0 auto;
    }
    
    .how-it-works .content-image img {
        /* Mobile image optimization */
        max-width: 100%;
        height: auto;
        object-fit: cover;
        /* Bug prevention: Prevent image overflow on mobile */
        border-radius: 8px;
    }
}

/* Bug prevention: Force image display on slow connections */
.how-it-works .content-image img[src*="generated_images"] {
    /* Ensure generated images display properly */
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    /* Bug prevention: Fallback sizing */
    min-height: 200px;
    background-color: #f5f5f5;
}

/* Accessibility and performance optimization */
@media (prefers-reduced-motion: reduce) {
    .how-it-works .content-image img {
        transition: none;
        transform: none !important;
    }
}

/* Bug prevention: High DPI display optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    .how-it-works .content-image img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}


/* Final Size Optimization and Bug Prevention */

/* Content spacing optimization */
.how-it-works .content-title {
    margin-bottom: 20px;
    /* Reduced from default 24px */
    /* Bug prevention: Ensure proper heading spacing */
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.how-it-works .content-details {
    /* Optimize content density */
    line-height: 1.5;
    margin-bottom: 12px;
    /* Reduced spacing */
}

.how-it-works .content-details h4 {
    margin-bottom: 8px;
    /* Tighter subheading spacing */
    font-size: 18px;
    /* Good size for hierarchy */
    line-height: 1.4;
    font-weight: 600;
    /* Enhanced subheading weight for better hierarchy */
}

.how-it-works .content-details p {
    margin-bottom: 0;
    /* Remove paragraph bottom margin */
    line-height: 1.6;
    font-size: 16px;
    /* Improved readability - increased from 15px */
}

/* Content list optimization */
.how-it-works .content-list {
    gap: 14px;
    /* Final gap optimization */
    margin-top: 16px;
    /* Reduced from 20px */
}

/* Bug prevention: Ensure proper mobile stacking */
@media (max-width: 768px) {
    .how-it-works .content-title {
        font-size: 22px;
        /* Optimized mobile title size */
        margin-bottom: 16px;
        /* Reduced mobile margin */
        line-height: 1.25;
    }
    
    .how-it-works .content-details h4 {
        font-size: 16px;
        /* Smaller mobile subheading */
        margin-bottom: 6px;
    }
    
    .how-it-works .content-details p {
        font-size: 15px;
        /* Improved mobile readability - increased from 14px */
        line-height: 1.55;
    }
    
    .how-it-works .content-list {
        gap: 12px;
        /* Compact mobile gap */
        margin-top: 12px;
    }
}

/* Bug prevention: Ultra-small screen optimization */
@media (max-width: 480px) {
    .how-it-works {
        padding: 40px 0;
        /* Further reduced for small screens */
    }
    
    .how-it-works .content-image {
        min-height: 120px;
        /* Minimum viable mobile image height */
        max-height: 200px;
        /* Constrain mobile image size */
        aspect-ratio: 5/3;
        /* Slightly wider for small screens */
    }
    
    .how-it-works .content-title {
        font-size: 20px;
        margin-bottom: 12px;
        /* Maximum mobile compactness */
    }
    
    .how-it-works .content-list {
        gap: 10px;
        /* Ultra-compact spacing */
        margin-top: 10px;
    }
}

/* Bug prevention: Ensure section doesn't become too small */
.how-it-works {
    min-height: 600px;
    /* Prevent over-compression */
}

@media (max-width: 768px) {
    .how-it-works {
        min-height: 500px;
        /* Mobile minimum height */
    }
}

@media (max-width: 480px) {
    .how-it-works {
        min-height: 400px;
        /* Small screen minimum */
    }
}

/* Performance optimization: Reduce paint complexity */
.how-it-works * {
    will-change: auto;
    /* Prevent unnecessary GPU layers */
}

/* Netlify optimization: Ensure proper loading sequence */
.how-it-works .content-image img {
    /* Force proper loading behavior */
    loading: lazy;
    decoding: async;
    /* Bug prevention: Ensure images don't block rendering */
    content-visibility: auto;
    contain-intrinsic-size: 280px 200px;
}


/* Additional font optimization for better readability */

/* Ensure ultra-small screens maintain readability */
@media (max-width: 480px) {
    .how-it-works .content-details p {
        font-size: 15px;
        /* Maintain 15px minimum for readability */
        line-height: 1.6;
        /* Slightly increased line-height for small screens */
    }
    
    .how-it-works .content-details h4 {
        font-size: 16px;
        /* Maintain good hierarchy on small screens */
        font-weight: 600;
        line-height: 1.35;
    }
}

/* Bug prevention: Ensure font rendering consistency */
.how-it-works .content-details p,
.how-it-works .content-details h4 {
    /* Improved font rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Bug prevention: Prevent text scaling issues */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Enhanced mobile text contrast for better readability */
@media (max-width: 768px) {
    .how-it-works .content-details p {
        /* Slightly darker text for mobile readability */
        color: #2c3e50;
        /* Enhanced contrast while maintaining brand harmony */
    }
}


/* Clean Services Section - No Card Styling */

.service-item {
    text-align: center;
    padding: 0;
    /* Clean layout - no padding needed */
    position: relative;
    /* Bug prevention: Ensure proper positioning */
    box-sizing: border-box;
    /* Netlify compatibility: Ensure consistent spacing */
    max-width: 100%;
    overflow-wrap: break-word;
}

.service-item h3 {
    font-size: 22px;
    margin: 0 0 14px 0;
    /* Slightly reduced margin for compactness */
    color: var(--color-charcoal);
    /* Neutral color for clean typography */
    font-weight: 600;
    line-height: 1.3;
    /* Enhanced typography for clean layout */
    letter-spacing: -0.01em;
    padding-top: 10px;
    /* Reduced space below accent line */
    position: relative;
    /* For accent line positioning */
}

.service-item p {
    font-size: 16px;
    /* Matching optimized readability */
    color: var(--color-charcoal);
    line-height: 1.55;
    /* Slightly tighter for compactness */
    margin: 0;
    text-align: center;
    /* Clean paragraph styling */
    max-width: 300px;
    /* Slightly wider for 2-line content */
    margin: 0 auto;
    /* Center paragraphs for better readability */
}

/* Thin Colored Accent Lines Above Titles */
.service-item.blue-service h3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    /* Accent line width */
    height: 3px;
    background-color: var(--color-blue);
    border-radius: 2px;
    /* Subtle rounded edges */
    /* Bug prevention: Ensure proper positioning */
    z-index: 1;
}

.service-item.green-service h3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    /* Accent line width */
    height: 3px;
    background-color: var(--sage-green);
    border-radius: 2px;
    /* Subtle rounded edges */
    /* Bug prevention: Ensure proper positioning */
    z-index: 1;
}

/* Most Popular Badge - Clean Styling */
.service-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--sage-green);
    color: var(--white);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* Bug prevention: Ensure proper z-index */
    z-index: 2;
    box-shadow: 0 2px 8px rgba(104, 159, 99, 0.3);
}

/* Enhanced Hover Effects for Typography-Only Layout */
.service-item:hover h3 {
    color: var(--color-blue-dark);
    transition: color 0.3s ease;
}

.service-item.blue-service:hover h3::before {
    width: 80px;
    /* Expand accent line on hover */
    background-color: var(--color-blue-dark);
    transition: all 0.3s ease;
}

.service-item.green-service:hover h3::before {
    width: 80px;
    /* Expand accent line on hover */
    background-color: #689f63;
    /* Darker green on hover */
    transition: all 0.3s ease;
}

.service-item:hover p {
    color: var(--color-charcoal);
    /* Slightly darker text on hover */
    transition: color 0.3s ease;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .services {
        padding: 40px 0;
        /* Reduced mobile padding */
    }
    
    .services-grid-2x2 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 32px;
        /* Compact mobile spacing */
        padding: 0 16px;
        /* Mobile edge spacing */
    }
    
    .service-item h3 {
        font-size: 20px;
        margin: 14px 0 10px 0;
    }
    
    .service-item p {
        font-size: 15px;
        /* Mobile optimized readability */
        line-height: 1.55;
        max-width: 100%;
        /* Full width on mobile */
    }
    
    .service-item h3::before {
        width: 50px;
        /* Slightly smaller accent lines on mobile */
        height: 2px;
        /* Thinner lines for mobile */
    }
    
    .service-item:hover h3::before {
        width: 65px;
        /* Smaller hover expansion on mobile */
    }
}

@media (max-width: 480px) {
    .services {
        padding: 32px 0;
        /* Ultra-compact small screen padding */
    }
    
    .services-grid-2x2 {
        gap: 28px;
        padding: 0 12px;
    }
    
    .service-item h3 {
        font-size: 18px;
    }
    
    .service-item p {
        font-size: 14px;
        line-height: 1.6;
    }
    
    .service-item h3::before {
        width: 45px;
        /* Even smaller accent lines for small screens */
        height: 2px;
    }
    
    .service-item:hover h3::before {
        width: 60px;
        /* Proportional hover expansion */
    }
    
    .service-badge {
        font-size: 11px;
        padding: 4px 12px;
    }
}

/* Bug prevention: Disable animations for reduced motion users */
@media (prefers-reduced-motion: reduce) {
    .service-item,
    .service-icon {
        transition: none;
    }
    
    .service-item:hover .service-icon {
        transform: none;
        box-shadow: none;
    }
}

/* Performance optimization */
.service-item {
    will-change: auto;
    /* Prevent unnecessary GPU layers */
}

/* Netlify compatibility: Ensure proper font loading */
.service-item h3,
.service-item p {
    font-display: swap;
    /* Improve font loading performance */
}


/* Override legacy service-card styles to prevent conflicts */
/* Disable legacy service-card styling completely */
.service-card,
.service-card:hover,
.service-card.featured,
.service-card:hover .service-icon {
    /* Disable all legacy service card styling */
    all: unset;
    display: none !important;
}

/* Service Areas Section Styling */
.service-areas {
    padding: 48px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    position: relative;
}

/* Services grid layouts */
.services-grid-1x3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
    /* Bug prevention: Consistent browser support */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Services subheader styling */
.section-subheader.left-aligned {
    text-align: left;
    max-width: 1200px;
    margin: 16px auto 0 auto;
    padding: 0 20px;
}

/* Service content styling */
.service-intro {
    font-size: 16px;
    color: var(--color-charcoal);
    margin-bottom: 16px;
    font-weight: 500;
}

.service-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-features li {
    padding: 6px 0;
    font-size: 15px;
    color: var(--color-charcoal);
    padding-left: 12px;
    line-height: 1.4;
}

/* Services CTA section */
.services-cta {
    margin-top: 48px;
    display: flex;
    justify-content: center;
    text-align: center;
}

.services-cta .cta-button {
    /* Use brand colors - matches header CTA */
    background-color: var(--color-blue);
    color: var(--color-white);
    border-color: var(--color-blue);
    min-width: 200px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 700;
}

/* Ensure service-item styling takes precedence */
.service-item,
.service-item * {
    /* Prevent any legacy interference */
    box-sizing: border-box;
}

/* Final bug prevention: Ensure clean section behavior */
.services .container {
    /* Proper container behavior */
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    position: relative;
    z-index: 1;
}

/* Ensure proper grid layout without sidebar conflicts */
.services-sidebar {
    display: none !important;
    /* Remove sidebar completely for clean 2x2 layout */
}


/* Remove all icon-related styling and ensure clean typography layout */

/* Remove any remaining icon references */
.service-icon,
.blue-icon,
.green-icon,
.service-icon svg {
    display: none !important;
    /* Completely hide any icon elements */
}

/* Mobile optimization for service plans section */
@media (max-width: 768px) {
    .service-areas {
        padding: 36px 0;
    }
    
    .services-grid-1x3 {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .service-intro {
        font-size: 15px;
        margin-bottom: 14px;
    }
    
    .service-features li {
        font-size: 14px;
        padding: 5px 0;
        padding-left: 10px;
    }
    
    .services-cta {
        margin-top: 36px;
    }
    
    .services-cta .cta-button {
        min-width: 200px;
        font-size: 15px;
        padding: 12px 24px;
    }
}

@media (max-width: 480px) {
    .services-grid-1x3 {
        gap: 20px;
    }
    
    .service-intro {
        font-size: 14px;
        margin-bottom: 12px;
    }
    
    .service-features li {
        font-size: 13px;
        padding: 4px 0;
        padding-left: 8px;
    }
    
    .services-cta {
        margin-top: 32px;
    }
    
    .services-cta .cta-button {
        min-width: 180px;
        font-size: 14px;
        padding: 12px 20px;
    }
}

/* Enhanced mobile accent line behavior */
@media (max-width: 768px) {
    .service-item h3 {
        font-size: 20px;
        padding-top: 10px;
        /* Adjusted for mobile spacing */
        margin-bottom: 14px;
    }
    
    .service-item.blue-service h3::before,
    .service-item.green-service h3::before {
        /* Ensure mobile accent lines display properly */
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 480px) {
    .service-item h3 {
        font-size: 18px;
        padding-top: 8px;
        margin-bottom: 12px;
    }
    
    .service-item.blue-service h3::before,
    .service-item.green-service h3::before {
        /* Ultra-small screen optimization */
        width: 40px !important;
        height: 2px;
    }
    
    .service-item:hover h3::before {
        width: 55px !important;
        /* Compact hover effect */
    }
}

/* Netlify compatibility: Ensure proper CSS loading */
.service-item h3::before {
    /* Ensure accent lines render properly across browsers */
    content: '';
    display: block;
    will-change: transform, width;
    /* Optimize animation performance */
}

/* Bug prevention: Ensure no icon fallbacks */
[data-feather] {
    display: none !important;
    /* Hide any remaining feather icons in services */
}

/* Performance optimization for accent lines */
.service-item h3::before {
    /* Prevent unnecessary repaints */
    backface-visibility: hidden;
    transform: translateX(-50%) translateZ(0);
}

/* Accessibility: Disable accent line animations for reduced motion users */
@media (prefers-reduced-motion: reduce) {
    .service-item h3::before,
    .service-item:hover h3::before {
        transition: none;
        width: 60px !important;
        /* Static width for reduced motion */
    }
    
    .service-item:hover h3,
    .service-item:hover p {
        transition: none;
    }
}


/* Remove Most Popular Badge Styling */
.service-badge,
.featured .service-badge {
    display: none !important;
    /* Completely hide badge for clean uniform appearance */
}

.service-item.featured {
    /* Remove any special featured styling */
    background: transparent;
    border: none;
    transform: none;
    /* Ensure uniform appearance across all services */
}


/* Enhanced Mobile Optimization for Compact Services Section */

@media (max-width: 768px) {
    .services {
        padding: 36px 0;
        /* Further reduced mobile padding */
    }
    
    .services-grid-2x2 {
        gap: 28px;
        /* Tighter mobile spacing */
        padding: 0 16px;
        /* Proper mobile edge spacing */
    }
    
    .service-item h3 {
        font-size: 20px;
        padding-top: 8px;
        margin-bottom: 12px;
        /* Optimized mobile spacing */
    }
    
    .service-item p {
        font-size: 15px;
        line-height: 1.5;
        max-width: 100%;
        /* Full width utilization on mobile */
    }
    
    .service-item h3::before {
        width: 45px;
        /* Smaller mobile accent lines */
        height: 2px;
    }
    
    .service-item:hover h3::before {
        width: 60px;
        /* Proportional mobile hover */
    }
}

@media (max-width: 480px) {
    .services {
        padding: 28px 0;
        /* Maximum mobile compactness */
    }
    
    .services-grid-2x2 {
        gap: 24px;
        /* Ultra-compact small screen spacing */
        padding: 0 12px;
    }
    
    .service-item h3 {
        font-size: 18px;
        padding-top: 6px;
        margin-bottom: 10px;
        /* Tight small screen spacing */
    }
    
    .service-item p {
        font-size: 14px;
        line-height: 1.5;
    }
    
    .service-item h3::before {
        width: 40px !important;
        height: 2px;
    }
    
    .service-item:hover h3::before {
        width: 55px !important;
    }
}

/* Netlify Performance Optimization */
.services-grid-2x2 {
    /* Optimize grid rendering performance */
    will-change: auto;
    transform: translateZ(0);
    /* Force hardware acceleration only when needed */
}

.service-item {
    /* Prevent layout thrashing */
    contain: layout style paint;
    /* Optimize individual service rendering */
    will-change: auto;
}

/* Bug prevention: Ensure proper content fitting */
.service-item p {
    /* Prevent text overflow on compact layout */
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    /* Better text wrapping for 2-line content */
}

/* Enhanced accessibility for compact layout */
@media (prefers-reduced-motion: reduce) {
    .services-grid-2x2,
    .service-item {
        /* Remove animations for reduced motion users */
        transition: none;
        transform: none;
    }
}


.portfolio-preview {
    padding: 48px 0;
    /* Match services section padding */
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    /* Subtle difference from services for visual distinction */
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    /* Netlify compatibility: Ensure proper section behavior */
    min-height: auto;
    contain: layout style;
}

.projects-grid-clean {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 36px;
    /* Match services spacing */
    max-width: 1200px;
    /* Slightly wider for 3-column layout */
    margin: 0 auto;
    box-sizing: border-box;
    contain: layout style;
    /* Mobile optimization: Prevent overflow */
    width: 100%;
    overflow: hidden;
}

.project-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    /* Increased gap for larger thumbnails */
    text-align: left;
    /* Left-aligned for better text scanning */
    position: relative;
    padding: 24px;
    /* Increased padding for better proportion */
    box-sizing: border-box;
    /* Bug prevention: Proper sizing */
    contain: layout style paint;
    transition: transform 0.2s ease;
    /* Subtle hover interaction */
    border-radius: 12px;
    /* Subtle background rounding */
    background: rgba(255, 255, 255, 0.6);
    /* Very subtle background for definition */
}

.project-item:hover {
    transform: translateY(-3px);
    /* Slightly more lift for larger elements */
    background: rgba(255, 255, 255, 0.9);
    /* Enhanced background on hover */
}

.project-item:hover .project-thumbnail {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    /* Enhanced shadow on hover */
}

.project-thumbnail {
    flex-shrink: 0;
    /* Prevent thumbnail from shrinking */
    width: 130px;
    height: 130px;
    /* Increased from 80px for meaningful visual impact */
    border-radius: 12px;
    /* Slightly larger radius for proportion */
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    /* Enhanced shadow for larger images */
    background: #f1f5f9;
    /* Fallback background */
    transition: box-shadow 0.2s ease;
    /* Smooth shadow transition */
}

.project-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensure proper image cropping */
    display: block;
    transition: transform 0.2s ease;
}

.project-item:hover .project-thumbnail img {
    transform: scale(1.05);
    /* Subtle zoom on hover */
}

.project-content {
    flex: 1;
    /* Take remaining space */
    min-width: 0;
    /* Prevent content overflow */
}

.project-item h3 {
    font-size: 21px;
    /* Slightly larger for better proportion */
    margin: 0 0 10px 0;
    /* Increased margin for better spacing */
    color: var(--color-charcoal);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    position: relative;
    /* For accent line */
}

.project-location {
    font-size: 14px !important;
    color: #64748b;
    /* Secondary text color */
    margin: 0 0 12px 0 !important;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.project-description {
    font-size: 15px;
    color: var(--color-charcoal);
    line-height: 1.55;
    margin: 0;
    /* 2-line description matching services */
    max-width: 100%;
    /* Ensure proper text wrapping */
}

/* Accent Lines - Blue/Green Pattern */
.project-item.blue-project h3::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--color-blue);
    /* Bright blue accent */
    border-radius: 2px;
    transition: width 0.3s ease;
}

.project-item.green-project h3::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--color-green);
    /* Green accent */
    border-radius: 2px;
    transition: width 0.3s ease;
}

.project-item:hover h3::after {
    width: 70px;
    /* Expand on hover */
}

/* Portfolio CTA Styling */
.portfolio-cta {
    text-align: center;
    margin-top: 48px;
    /* Consistent spacing */
}

.cta-text {
    font-size: 18px;
    color: var(--color-charcoal);
    margin-bottom: 20px;
    font-weight: 500;
}

/* Enhanced Mobile Optimization */

@media (max-width: 768px) {
    .portfolio-preview {
        padding: 36px 0;
        /* Reduced mobile padding */
    }
    
    .projects-grid-clean {
        grid-template-columns: 1fr;
        /* Single column on mobile */
        gap: 28px;
        padding: 0 16px;
        /* Proper mobile edge spacing */
    }
    
    .project-item {
        padding: 16px;
        gap: 14px;
        /* Tighter mobile spacing */
    }
    
    .project-thumbnail {
        width: 70px;
        height: 70px;
        /* Smaller mobile thumbnails */
    }
    
    .project-item h3 {
        font-size: 18px;
        margin-bottom: 6px;
    }
    
    .project-location {
        font-size: 13px !important;
        margin-bottom: 10px !important;
    }
    
    .project-description {
        font-size: 14px;
        line-height: 1.5;
    }
    
    .project-item h3::after {
        width: 40px;
        bottom: -6px;
    }
    
    .project-item:hover h3::after {
        width: 55px;
    }
    
    .portfolio-cta {
        margin-top: 36px;
    }
}

@media (max-width: 480px) {
    .portfolio-preview {
        padding: 28px 0;
        /* Maximum mobile compactness */
    }
    
    .projects-grid-clean {
        gap: 24px;
        padding: 0 12px;
    }
    
    .project-item {
        padding: 12px;
        gap: 12px;
    }
    
    .project-thumbnail {
        width: 60px;
        height: 60px;
        /* Ultra-compact thumbnails */
    }
    
    .project-item h3 {
        font-size: 17px;
    }
    
    .project-description {
        font-size: 13px;
    }
    
    .project-item h3::after {
        width: 35px !important;
    }
    
    .project-item:hover h3::after {
        width: 50px !important;
    }
}

/* Tablet Optimization */
@media (min-width: 769px) and (max-width: 1024px) {
    .projects-grid-clean {
        grid-template-columns: 1fr 1fr;
        /* 2-column on tablet */
        gap: 32px;
        max-width: 800px;
    }
    
    .project-item {
        padding: 18px;
    }
}

/* Netlify Performance Optimization */
.projects-grid-clean {
    /* Optimize grid rendering performance */
    will-change: auto;
    transform: translateZ(0);
    /* Force hardware acceleration only when needed */
}

.project-item {
    /* Prevent layout thrashing */
    contain: layout style paint;
    will-change: auto;
}

/* Bug prevention: Ensure proper content fitting */
.project-description {
    /* Prevent text overflow on compact layout */
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Enhanced accessibility for compact layout */
@media (prefers-reduced-motion: reduce) {
    .projects-grid-clean,
    .project-item,
    .project-thumbnail img {
        /* Remove animations for reduced motion users */
        transition: none;
        transform: none;
    }
}

/* Focus states for accessibility */
.project-item:focus-within {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
    border-radius: 8px;
}


/* Enhanced Mobile Optimization for Larger Thumbnails */

@media (max-width: 768px) {
    .project-item {
        padding: 20px 16px;
        gap: 16px;
        /* Adjusted mobile spacing */
        flex-direction: column;
        /* Stack on mobile for better layout */
        text-align: center;
        /* Center alignment on mobile */
        background: rgba(255, 255, 255, 0.8);
        /* Slightly more opaque on mobile */
    }
    
    .project-thumbnail {
        width: 110px;
        height: 110px;
        /* Smaller but still meaningful on mobile */
        align-self: center;
        /* Center thumbnail on mobile */
        margin-bottom: 4px;
    }
    
    .project-content {
        width: 100%;
        /* Full width on mobile */
    }
    
    .project-item h3 {
        font-size: 19px;
        margin-bottom: 8px;
        /* Tighter mobile spacing */
    }
    
    .project-location {
        font-size: 13px !important;
        margin-bottom: 10px !important;
    }
    
    .project-description {
        font-size: 14px;
        line-height: 1.5;
        max-width: 100%;
    }
    
    .project-item h3::after {
        left: 50%;
        transform: translateX(-50%);
        /* Center accent line on mobile */
        width: 45px;
        bottom: -6px;
    }
    
    .project-item:hover h3::after {
        width: 60px;
    }
}

@media (max-width: 480px) {
    .portfolio-preview {
        padding: 28px 0;
    }
    
    .projects-grid-clean {
        gap: 20px;
        padding: 0 12px;
    }
    
    .project-item {
        padding: 16px 12px;
        gap: 14px;
    }
    
    .project-thumbnail {
        width: 100px;
        height: 100px;
        /* Compact but still visible on small screens */
    }
    
    .project-item h3 {
        font-size: 18px;
    }
    
    .project-description {
        font-size: 13px;
    }
    
    .project-item h3::after {
        width: 40px !important;
    }
    
    .project-item:hover h3::after {
        width: 55px !important;
    }
}

/* Tablet Optimization - Maintain Better Layout */
@media (min-width: 769px) and (max-width: 1024px) {
    .project-item {
        padding: 22px;
        gap: 18px;
    }
    
    .project-thumbnail {
        width: 120px;
        height: 120px;
        /* Slightly smaller on tablet */
    }
    
    .project-item h3 {
        font-size: 20px;
    }
}

/* Large Screen Optimization */
@media (min-width: 1200px) {
    .projects-grid-clean {
        max-width: 1300px;
        /* Slightly wider for better spacing */
    }
    
    .project-item {
        padding: 26px;
        gap: 22px;
        /* More generous spacing on large screens */
    }
    
    .project-thumbnail {
        width: 140px;
        height: 140px;
        /* Larger thumbnails on big screens */
    }
    
    .project-item h3 {
        font-size: 22px;
    }
    
    .project-description {
        font-size: 16px;
        /* Larger text on large screens */
    }
}

/* Enhanced Netlify Performance Optimizations */
.project-thumbnail img {
    /* Optimize image loading and rendering */
    will-change: transform;
    backface-visibility: hidden;
    /* Prevent flickering on transforms */
    image-rendering: optimizeQuality;
    /* Better image quality on scaling */
}

/* Enhanced accessibility for larger elements */
.project-item:focus-within {
    outline: 3px solid var(--color-blue);
    outline-offset: 3px;
    border-radius: 12px;
    /* Larger focus indicators for accessibility */
}

/* Loading state optimization */
.project-thumbnail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    /* Loading skeleton effect */
    z-index: 1;
}

.project-thumbnail img {
    position: relative;
    z-index: 2;
    /* Ensure image appears above loading skeleton */
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Remove loading effect when image loads */
.project-thumbnail img[src]:not([src=""]) + ::before,
.project-thumbnail img[src]:not([src=""]) ~ ::before {
    display: none;
}


/* Complete Projects Section Rebuild - Vertical Card Layout */

.portfolio-preview {
    padding: 48px 0;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    min-height: auto;
    contain: layout style;
}

.projects-grid-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    contain: layout style;
    width: 100%;
}

/* Vertical Card Structure - Matching Wireframe */
.project-card {
    display: flex;
    flex-direction: column;
    /* CRITICAL: Vertical layout - image above content */
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    contain: layout style paint;
    /* Bug prevention: Isolate card rendering */
    min-height: 0;
    /* Prevent flex overflow issues */
}

.project-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 1);
}

/* Image Container - Top of Card */
.project-image {
    width: 100%;
    height: 200px;
    /* Fixed height for consistency */
    overflow: hidden;
    position: relative;
    background: #f1f5f9;
    /* Fallback background */
    flex-shrink: 0;
    /* Prevent image area from shrinking */
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensure proper image cropping */
    display: block;
    transition: transform 0.3s ease;
    /* Smooth zoom on hover */
    image-rendering: optimizeQuality;
}

.project-card:hover .project-image img {
    transform: scale(1.05);
    /* Subtle zoom effect */
}

/* Content Area - Below Image */
.project-content {
    padding: 24px;
    flex: 1;
    /* Take remaining space */
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    /* For accent line positioning */
    min-height: 0;
    /* Prevent content overflow */
}

.project-card h3 {
    font-size: 20px;
    margin: 0;
    color: var(--color-charcoal);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    position: relative;
    /* For accent line */
}

.project-location {
    font-size: 14px !important;
    color: #64748b;
    margin: 0 !important;
    font-weight: 500;
    letter-spacing: 0.02em;
    order: 1;
    /* Ensure proper ordering */
}

.project-description {
    font-size: 15px;
    color: var(--color-charcoal);
    line-height: 1.55;
    margin: 0;
    flex: 1;
    /* Take remaining space */
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    order: 2;
    /* Ensure proper ordering */
}

/* Accent Lines - Blue/Green Pattern at Bottom */
.project-card.blue-project .project-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 24px;
    right: 24px;
    height: 3px;
    background: var(--color-blue);
    border-radius: 2px 2px 0 0;
    transition: all 0.3s ease;
}

.project-card.green-project .project-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 24px;
    right: 24px;
    height: 3px;
    background: var(--color-green);
    border-radius: 2px 2px 0 0;
    transition: all 0.3s ease;
}

.project-card:hover .project-content::after {
    height: 4px;
    /* Slightly thicker on hover */
}

/* Portfolio CTA Styling */
.portfolio-cta {
    text-align: center;
    margin-top: 48px;
}

.cta-text {
    font-size: 18px;
    color: var(--color-charcoal);
    margin-bottom: 20px;
    font-weight: 500;
}

/* Comprehensive Mobile Optimization */

@media (max-width: 768px) {
    .portfolio-preview {
        padding: 36px 0;
    }
    
    .projects-grid-cards {
        grid-template-columns: 1fr;
        /* Single column on mobile */
        gap: 28px;
        padding: 0 16px;
        max-width: 100%;
    }
    
    .project-card {
        border-radius: 12px;
        /* Smaller radius on mobile */
    }
    
    .project-image {
        height: 180px;
        /* Slightly shorter on mobile */
    }
    
    .project-content {
        padding: 20px;
        gap: 10px;
    }
    
    .project-card h3 {
        font-size: 18px;
    }
    
    .project-location {
        font-size: 13px !important;
    }
    
    .project-description {
        font-size: 14px;
        line-height: 1.5;
    }
    
    .project-card.blue-project .project-content::after,
    .project-card.green-project .project-content::after {
        left: 20px;
        right: 20px;
        /* Adjust for mobile padding */
    }
    
    .portfolio-cta {
        margin-top: 36px;
    }
}

@media (max-width: 480px) {
    .portfolio-preview {
        padding: 28px 0;
    }
    
    .projects-grid-cards {
        gap: 24px;
        padding: 0 12px;
    }
    
    .project-image {
        height: 160px;
        /* Compact height for small screens */
    }
    
    .project-content {
        padding: 16px;
        gap: 8px;
    }
    
    .project-card h3 {
        font-size: 17px;
    }
    
    .project-description {
        font-size: 13px;
    }
    
    .project-card.blue-project .project-content::after,
    .project-card.green-project .project-content::after {
        left: 16px;
        right: 16px;
    }
}

/* Tablet Optimization */
@media (min-width: 769px) and (max-width: 1024px) {
    .projects-grid-cards {
        grid-template-columns: repeat(2, 1fr);
        /* 2-column on tablet */
        gap: 32px;
        max-width: 800px;
    }
    
    .project-image {
        height: 180px;
    }
    
    .project-content {
        padding: 22px;
    }
}

/* Large Screen Optimization */
@media (min-width: 1200px) {
    .projects-grid-cards {
        max-width: 1300px;
        gap: 40px;
    }
    
    .project-image {
        height: 220px;
        /* Taller images on large screens */
    }
    
    .project-content {
        padding: 28px;
    }
    
    .project-card h3 {
        font-size: 21px;
    }
    
    .project-description {
        font-size: 16px;
    }
}

/* Enhanced Netlify Performance Optimizations */
.project-card {
    will-change: transform, box-shadow;
    backface-visibility: hidden;
    /* Prevent flickering on transforms */
}

.project-image img {
    will-change: transform;
    backface-visibility: hidden;
}

/* Loading State for Images */
.project-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    z-index: 1;
}

.project-image img {
    position: relative;
    z-index: 2;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Hide loading effect when image loads */
.project-image img[src]:not([src=""]) {
    /* Image loaded successfully */
}

.project-image img[src]:not([src=""]) + ::before {
    display: none;
}

/* Enhanced Accessibility */
.project-card:focus-within {
    outline: 3px solid var(--color-blue);
    outline-offset: 3px;
    border-radius: 16px;
}

/* Bug Prevention and Error Handling */
.project-card {
    /* Prevent layout thrashing */
    contain: layout style paint;
    /* Ensure minimum dimensions */
    min-width: 0;
    min-height: 300px;
    /* Fallback minimum height */
}

.project-content {
    /* Prevent content overflow */
    overflow: hidden;
    word-break: break-word;
}

.project-image {
    /* Prevent image overflow */
    contain: layout style;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .project-card,
    .project-image img,
    .project-content::after {
        transition: none;
        transform: none;
        animation: none;
    }
    
    .project-card:hover {
        transform: none;
    }
    
    .project-card:hover .project-image img {
        transform: none;
    }
}

/* Print Styles */
@media print {
    .project-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .project-image {
        height: 150px;
    }
}


/* Enhanced Image Performance Optimizations */

/* WebP Support with Fallbacks */
.hero-image picture {
    display: block;
    width: 100%;
    height: 100%;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensure image decoding optimization */
    image-rendering: optimizeQuality;
    decoding: async;
}

/* Track Record Section with Flower Background */
.testimonials {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('attached_assets/track-record-bg.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 60px 0;
    text-align: center;
}

/* Stats Grid for Track Record Section - 3 Item Layout */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin: 40px 0;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.stat-item {
    text-align: center;
    padding: 28px 20px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: transform 0.3s ease, background 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.2);
}

.stat-number {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--leaf-green);
    margin-bottom: 10px;
    line-height: 1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.stat-label {
    font-size: 1.3rem;
    font-weight: 600;
    color: white;
    margin-bottom: 14px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

.stat-description {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.5;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

.testimonial-cta {
    margin-top: 40px;
    padding: 0 20px;
}

.testimonial-cta .cta-text {
    font-size: 1.3rem;
    margin-bottom: 20px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    color: white;
    font-weight: 500;
}

/* Enhanced Mobile responsiveness for stats */
@media (max-width: 768px) {
    .testimonials {
        padding: 50px 0;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        margin: 30px 0;
        padding: 0 16px;
    }
    
    .stat-item {
        padding: 24px 20px;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .stat-number {
        font-size: 2.8rem;
    }
    
    .stat-label {
        font-size: 1.2rem;
        margin-bottom: 12px;
    }
    
    .stat-description {
        font-size: 1rem;
        line-height: 1.5;
    }
    
    .testimonial-cta .cta-text {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .testimonials {
        padding: 40px 0;
    }
    
    .stats-grid {
        gap: 20px;
        margin: 24px 0;
        padding: 0 12px;
    }
    
    .stat-item {
        padding: 20px 16px;
    }
    
    .stat-number {
        font-size: 2.4rem;
    }
    
    .stat-label {
        font-size: 1.1rem;
    }
    
    .stat-description {
        font-size: 0.95rem;
    }
    
    .testimonial-cta .cta-text {
        font-size: 1.1rem;
    }
}

/* Track Record Background Override - Use Flower Image */
.testimonials {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('attached_assets/track-record-bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Inline SVG Icon System - 100% Reliable & Mobile Optimized */
/* Bug Prevention: Standard SVG template for all icons */
.icon-svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    display: inline-block;
    vertical-align: middle;
}

/* Content icon specific sizing */
.content-icon .icon-svg {
    width: 24px;
    height: 24px;
    display: block;
    margin: 0 auto;
}

/* Header icon sizing */
.header-phone .icon-svg {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

.mobile-menu-toggle .icon-svg {
    width: 24px;
    height: 24px;
    stroke: white;
}

/* Footer badge icons */
.credential-badge .icon-svg {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

/* Mobile responsive icon sizing */
@media (max-width: 768px) {
    .header-phone .icon-svg {
        width: 16px;
        height: 16px;
        margin-right: 6px;
    }
    
    .mobile-menu-toggle .icon-svg {
        width: 22px;
        height: 22px;
    }
    
    .content-icon .icon-svg {
        width: 20px;
        height: 20px;
    }
    
    .credential-badge .icon-svg {
        width: 18px;
        height: 18px;
        margin-right: 6px;
    }
}

@media (max-width: 480px) {
    .content-icon .icon-svg {
        width: 18px;
        height: 18px;
    }
    
    .credential-badge .icon-svg {
        width: 16px;
        height: 16px;
        margin-right: 4px;
    }
}

/* Image Loading Performance Enhancements */
img {
    /* Optimize image decoding */
    decoding: async;
    /* Prevent layout shifts */
    height: auto;
    /* Enable browser optimizations */
    image-rendering: optimizeQuality;
}

picture {
    /* Ensure picture elements don't cause layout issues */
    display: block;
    overflow: hidden;
}

/* Project Images Performance */
.project-image picture {
    width: 100%;
    height: 100%;
    display: block;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Enhanced loading optimization */
    decoding: async;
    image-rendering: optimizeQuality;
}

/* Preload Critical Images (will be added via link tags) */
/* This is handled in the HTML head section */

/* Loading State Improvements */
.project-image::before {
    /* Remove loading animation since images load much faster now */
    animation-duration: 0.8s;
    /* Faster loading skeleton */
}

/* Performance: Reduce unnecessary transforms when not needed */
@media (prefers-reduced-motion: reduce) {
    .project-image::before {
        animation: none;
        background: #f1f5f9;
        /* Static background instead of animation */
    }
}

/* Netlify Specific Optimizations */
/* Ensure images are properly cached */
img[src*=".jpg"],
img[src*=".webp"] {
    /* Enable browser caching optimizations */
    will-change: auto;
}

/* Fix for potential WebP loading issues */
picture source[type="image/webp"] {
    /* Ensure WebP sources are properly handled */
    display: none;
}

/* Critical Resource Hints - Add via HTML head */
/* <link rel="preload" as="image" href="attached_assets/optimized/hero/hero-1200.webp" media="(min-width: 1024px)"> */
/* <link rel="preload" as="image" href="attached_assets/optimized/hero/hero-800.webp" media="(min-width: 768px)"> */
/* <link rel="preload" as="image" href="attached_assets/optimized/hero/hero-600.webp" media="(max-width: 767px)"> */


/* Enhanced Header & CTA Design System */

/* Header Visual Enhancement */
.header {
    background: linear-gradient(135deg, #0076CE 0%, #004B87 100%);
    /* Enhanced gradient for depth and visual appeal */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    /* Professional drop shadow for separation */
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0.8rem 0;
    /* Slightly increased padding for presence */
    transition: all 0.3s ease;
    /* Smooth transitions */
}

/* Enhanced Logo/Brand Styling */
.header .logo h1,
.header .logo p {
    font-size: 1.5rem !important;
    /* Clean, professional sizing */
    font-weight: 500 !important;
    /* Medium weight for sophistication */
    color: var(--color-white) !important;
    white-space: nowrap !important;
    /* Ensure single line display */
    /* Brand green for strong visual identity */
    margin: 0 !important;
    letter-spacing: -0.01em;
    /* Optimal letter spacing for readability */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 1) !important;
    /* Enhanced shadow for WCAG compliance against blue gradient */
    font-family: 'Poppins', sans-serif !important;
    /* Consistent with headline font */
    text-transform: none !important;
    /* Natural casing */
    line-height: 1.1 !important;
    /* Tight line height for better fit */
}

/* Enhanced Navigation Styling */
.header nav ul li {
    margin: 0 1.2rem;
    /* Improved spacing between items */
}

.header nav ul li a {
    font-weight: 500 !important;
    /* Medium weight for navigation */
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    /* Smooth hover transitions */
    position: relative;
}

.header nav ul li a:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
    /* Subtle hover background */
    transform: translateY(-1px);
    /* Micro-interaction lift */
}

/* Enhanced CTA Button System */

/* Primary CTA - Green Prominent */
.cta-button.primary {
    background: var(--color-green) !important;
    /* Use brand green for primary actions */
    color: white !important;
    border: 2px solid var(--color-green) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    padding: 0.75rem 1.5rem !important;
    /* More generous padding */
    border-radius: 8px !important;
    /* Slightly more rounded */
    box-shadow: 0 4px 12px rgba(122, 193, 66, 0.3) !important;
    /* Green shadow for depth */
    transition: all 0.3s ease !important;
    text-transform: none !important;
    /* Keep natural casing for "FREE" */
    letter-spacing: 0.02em !important;
    /* Slight letter spacing */
    position: relative !important;
    overflow: hidden !important;
}

.cta-button.primary:hover {
    background: #6ba83a !important;
    /* Darker green on hover */
    border-color: #6ba83a !important;
    transform: translateY(-2px) !important;
    /* Lift effect */
    box-shadow: 0 6px 20px rgba(122, 193, 66, 0.4) !important;
    /* Enhanced shadow on hover */
}

/* Large Primary CTA for Hero */
.cta-button.primary.large {
    font-size: 1.15rem !important;
    /* 20% larger than normal */
    padding: 1rem 2rem !important;
    /* More substantial padding */
    min-width: 220px !important;
    /* Minimum width for prominence */
}

/* Secondary CTA - Outline Style */
.cta-button.secondary {
    background: transparent !important;
    color: white !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    /* Slightly smaller than primary */
    padding: 0.7rem 1.3rem !important;
    /* Slightly less padding */
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(10px) !important;
    /* Modern glass effect */
}

.cta-button.secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: white !important;
    color: white !important;
    transform: translateY(-1px) !important;
    /* Subtle lift */
    backdrop-filter: blur(15px) !important;
}

.cta-button.secondary.large {
    font-size: 1rem !important;
    padding: 0.85rem 1.5rem !important;
    min-width: 180px !important;
    /* Smaller than primary for hierarchy */
}

/* Header CTA Button Specific */
.header .cta-button.primary {
    padding: 0.6rem 1.2rem !important;
    /* Compact for header */
    font-size: 0.9rem !important;
    /* Slightly smaller in header */
    min-width: auto !important;
}

/* Hero CTA Container */
.hero-ctas {
    display: flex;
    gap: 1rem;
    /* Space between buttons */
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    /* Wrap on mobile */
    margin-top: 2rem;
}

/* CTA Subtext Support */
.cta-subtext {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    margin-top: 0.5rem;
    text-align: center;
    font-weight: 300;
    letter-spacing: 0.02em;
}

/* Trust Signals Near CTAs */
.hero-trust-signals {
    margin-top: 2rem;
    /* Closer to CTAs */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 500;
}

.trust-badge i {
    width: 18px;
    height: 18px;
    color: var(--color-green);
    /* Green icons for trust */
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .header {
        padding: 0.6rem 0;
    }
    
    .header .logo h1,
    .header .logo p {
        font-size: 1.3rem !important;
        /* Responsive sizing for mobile */
        font-weight: 500 !important;
        /* Consistent weight across devices */
        color: var(--color-white) !important;
        white-space: nowrap !important;
        /* Brand green maintained on mobile */
        margin: 0 !important;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 1px rgba(0, 0, 0, 1) !important;
        /* Strong shadow for mobile WCAG compliance */
    }
    
    .header nav ul li {
        margin: 0 0.8rem;
        /* Tighter mobile spacing */
    }
    
    .hero-ctas {
        flex-direction: column;
        /* Stack CTAs on mobile */
        gap: 0.8rem;
        margin-top: 1.5rem;
    }
    
    .cta-button.primary.large,
    .cta-button.secondary.large {
        width: 100%;
        max-width: 280px;
        /* Full width on mobile with max limit */
        text-align: center;
        padding: 1rem 1.5rem !important;
        font-size: 1.05rem !important;
    }
    
    .trust-badge {
        font-size: 0.8rem;
        gap: 0.4rem;
    }
    
    .trust-badge i {
        width: 16px;
        height: 16px;
    }
    
    .hero-trust-signals {
        gap: 1.5rem;
        margin-top: 1.5rem;
    }
}

@media (max-width: 480px) {
    .header .logo h1,
    .header .logo p {
        font-size: 1.2rem !important;
        /* Optimized for small screens */
        font-weight: 500 !important;
        /* Clean, readable weight */
        color: var(--color-white) !important;
        white-space: nowrap !important;
        /* Brand green maintained on small screens */
        margin: 0 !important;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 1px rgba(0, 0, 0, 1) !important;
        /* Maximum shadow for small screen WCAG compliance */
    }
    
    .cta-button.primary.large,
    .cta-button.secondary.large {
        font-size: 1rem !important;
        padding: 0.9rem 1.3rem !important;
    }
    
    .hero-trust-signals {
        flex-direction: column;
        gap: 1rem;
    }
}

/* About page specific mobile optimizations */
@media (max-width: 768px) {
    /* Enhanced mobile hero background coverage for landscape images */
    .hero-background::after {
        background: rgba(0, 0, 0, 0.5);
        /* Slightly lighter overlay to better show landscape details */
    }
}

/* Enhanced Mobile Menu */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 6px;
        padding: 0.5rem;
        transition: all 0.3s ease;
    }
    
    .mobile-menu-toggle:hover {
        background: rgba(255, 255, 255, 0.2);
    }
}

/* Performance & Netlify Optimizations */
.cta-button {
    /* Hardware acceleration for smooth animations */
    will-change: transform, box-shadow;
    backface-visibility: hidden;
    /* Prevent flickering */
}

/* Loading States */
.cta-button:active {
    transform: scale(0.98) !important;
    /* Button press feedback */
    transition: transform 0.1s ease !important;
}

/* High Contrast Support */
@media (prefers-contrast: high) {
    .cta-button.primary {
        border-width: 3px !important;
    }
    
    .cta-button.secondary {
        border-width: 3px !important;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .cta-button,
    .header nav ul li a,
    .header {
        transition: none !important;
        transform: none !important;
    }
    
    .cta-button:hover {
        transform: none !important;
    }
}

/* Focus States for Accessibility */
.cta-button:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
    /* Clear focus indicators */
}

.header nav ul li a:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

/* FAQ Search Container */
.faq-search-container {
    margin: 40px 0 0 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 20px;
    width: 20px;
    height: 20px;
    stroke: var(--medium-gray);
    fill: none;
    stroke-width: 2;
    z-index: 2;
}

#faq-search {
    width: 100%;
    padding: 16px 20px 16px 55px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    font-size: 16px;
    color: var(--dark-gray);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

#faq-search:focus {
    outline: none;
    border-color: var(--sage-green);
    box-shadow: 0 4px 20px rgba(122, 193, 66, 0.3);
}

#faq-search::placeholder {
    color: var(--medium-gray);
}

.trust-indicator {
    text-align: center;
    margin-top: 30px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 400;
}

/* FAQ Filters */
.faq-filters {
    background: var(--light-gray);
    padding: 30px 0;
    border-bottom: 1px solid var(--border-gray);
}

.filter-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-tab {
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: 25px;
    background: white;
    color: var(--medium-gray);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.filter-tab:hover {
    border-color: var(--primary-green);
    color: var(--primary-green);
}

.filter-tab.active {
    background: var(--primary-green);
    color: white;
    border-color: var(--primary-green);
}

/* FAQ Accordion */
.faq-accordion {
    padding: 60px 0;
    background: white;
}

.faq-list {
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    background: white;
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: var(--shadow-light);
    border-color: var(--primary-green);
}

.faq-question {
    width: 100%;
    padding: 24px 32px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    transition: all 0.3s ease;
}

.faq-question:hover {
    background: var(--light-gray);
}

.question-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--dark-gray);
    flex: 1;
}

.category-tag {
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.category-tag.timeline {
    background: rgba(0, 118, 206, 0.1);
    color: var(--primary-green);
}

.category-tag.pricing {
    background: rgba(122, 193, 66, 0.1);
    color: var(--sage-green);
}

.category-tag.process {
    background: rgba(0, 75, 135, 0.1);
    color: var(--dark-green);
}

.category-tag.support {
    background: rgba(51, 51, 51, 0.1);
    color: var(--dark-gray);
}

.faq-icon {
    width: 24px;
    height: 24px;
    stroke: var(--medium-gray);
    fill: none;
    stroke-width: 2;
    transition: transform 0.3s ease;
}

.faq-question[aria-expanded="true"] .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-question[aria-expanded="true"] + .faq-answer {
    max-height: 1000px;
    padding: 0 32px 32px;
}

.answer-content {
    color: var(--medium-gray);
    line-height: 1.7;
}

.answer-content p {
    margin-bottom: 16px;
}

.answer-content ul, .answer-content ol {
    margin: 16px 0;
    padding-left: 24px;
}

.answer-content li {
    margin-bottom: 8px;
}

.answer-content strong {
    color: var(--dark-gray);
    font-weight: 600;
}

/* FAQ CTA Section */
.faq-cta {
    background: var(--light-gray);
    padding: 80px 0;
    text-align: center;
}

.cta-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--dark-gray);
    margin-bottom: 16px;
}

.cta-content p {
    font-size: 1.2rem;
    color: var(--medium-gray);
    margin-bottom: 40px;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.cta-subtext {
    font-size: 14px;
    color: var(--medium-gray);
    margin-bottom: 0;
}

.cta-subtext a {
    color: var(--primary-green);
    text-decoration: none;
}

.cta-subtext a:hover {
    text-decoration: underline;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .faq-search-container {
        margin: 30px 20px 0;
    }
    
    #faq-search {
        font-size: 14px;
        padding: 14px 18px 14px 50px;
    }
    
    .search-icon {
        left: 16px;
        width: 18px;
        height: 18px;
    }
    
    .filter-tabs {
        padding: 0 20px;
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
    }
    
    .filter-tab {
        padding: 10px 20px;
        font-size: 13px;
        flex-shrink: 0;
    }
    
    .faq-question {
        padding: 20px 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .question-text {
        font-size: 16px;
        order: 1;
    }
    
    .category-tag {
        order: 2;
        align-self: flex-start;
    }
    
    .faq-icon {
        position: absolute;
        right: 24px;
        top: 20px;
        order: 3;
    }
    
    .faq-question[aria-expanded="true"] + .faq-answer {
        padding: 0 24px 24px;
    }
    
    .cta-content h2 {
        font-size: 2rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}

/* Hidden state for filtered items */
.faq-item.hidden {
    display: none;
}