/* --- 1. GLOBAL & ROOT DEFINITIONS (Consolidated) --- */
        :root {
            --brand-green-dark: #1e4620;
            --brand-green-accent: #2a9d8f;
            --brand-green-mid: #81c784;
            --brand-green-light: #e8f5e9;
            --glow-color: rgba(129, 199, 132, 0.5);
            --text-primary: #1a3b1a;
            --text-secondary: #36533c;
            --bg-light: #fbfdfb;
        }

        html {
            width: 100vw;
            overflow-x: hidden;
        }

        body {
            font-family: 'Manrope', sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            line-height: 1.6;
            margin: 0;
            overflow-x: hidden; /* Applied once to the body */
        }

        main {
            display: block;
            padding-top: 0;
        }

        .font-playfair {
            font-family: 'Playfair Display', serif;
            letter-spacing: -0.02em;
        }

        /* --- Base Button Styles (Refactored) --- */
        .btn-primary {
            display: inline-block;
            padding: 1rem 2.25rem; /* Standardized padding */
            border-radius: 0;
            font-family: 'Manrope', sans-serif;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.3px;
            font-size: 1rem;
            color: #fff;
            background-image: linear-gradient(110deg, var(--brand-green-accent) 0%, var(--brand-green-mid) 100%);
            box-shadow: 0 10px 30px -5px rgba(42, 157, 143, 0.4), 0 0 15px var(--glow-color) inset;
            border: none;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
            background-size: 250% auto;
            outline: none; /* Add outline none here */
        }

        .btn-primary:hover,
        .btn-primary:focus {
            background-position: right center;
            transform: translateY(-4px) scale(1.05); /* Standardized hover transform */
            box-shadow: 0 18px 45px -8px rgba(42, 157, 143, 0.5), 0 0 20px var(--glow-color) inset; /* Standardized hover shadow */
        }

        /* Shimmer effect for buttons */
        .btn-shimmer {
            position: relative;
            overflow: hidden;
        }

        .btn-shimmer::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .btn-shimmer:hover::before {
            left: 100%;
        }

        /* --- 2. HERO VIDEO SECTION STYLES --- */
        #landaggregation-hero-video {
            position: relative;
            width: 100vw;
            height: 100vh; /* Kept height as is */
            overflow: hidden;
            margin: 0;
            padding: 0;
            left: 0;
            display: flex; /* Use flexbox to center content */
            align-items: center;
            justify-content: center;
        }

        #landaggregation-hero-video video {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%; /* Ensure video covers full width */
            height: 100%; /* Ensure video covers full height */
            object-fit: cover; /* This is crucial for maintaining aspect ratio and filling the space */
            z-index: 0;
            transform: translate(-50%, -50%);
            background-size: cover;
            /* Optional: Add a subtle blur or brightness adjustment to the video */
            filter: brightness(0.8);
        }

        #landaggregation-hero-video::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: linear-gradient(rgba(30, 70, 32, 0.7), rgba(30, 70, 32, 0.7));
            z-index: 1;
        }

        #landaggregation-hero-video .hero-content {
            position: relative; /* Changed from absolute to relative for z-index stacking */
            z-index: 3; /* Ensure content is above overlay */
            max-width: 900px;
            width: 100%;
            box-sizing: border-box;
            text-align: center;
            padding: 2rem 1.5rem;
            color: #fff; /* Ensure text is white */
            opacity: 0;
            transform: translateY(30px);
            animation: heroFadeInUp 1s ease-out 0.5s forwards; /* Apply animation directly */
        }

        .landaggregation-hero-title {
            color: #fff;
            font-weight: 700;
        }
        .landaggregation-hero-content {
            color: #fff;
            font-weight: 500;
        }
        .landaggregation-hero-btn-container {
            margin-top: 2rem; /* Adjusted margin for better spacing */
        }
        /* Removed .landaggregation-hero-btn specific styles - now uses .btn-primary and .btn-shimmer */

        @keyframes heroFadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @media (max-width: 768px) {
            .landaggregation-hero-title { font-size: 2.5rem !important; }
            .landaggregation-hero-content { font-size: 1.1rem !important; }
            .btn-primary { padding: 12px 24px; font-size: 0.9rem; } /* Apply responsive padding to base button */
        }
        @media (min-width: 1024px) {
            .landaggregation-hero-title { font-size: 3.5rem !important; line-height: 1.1; }
            .landaggregation-hero-content { font-size: 1.4rem !important; max-width: 800px; margin-left: auto; margin-right: auto; }
        }

        /* --- Section Divider (Consolidated) --- */
        .section-divider {
            width: 100%;
            height: 1px; /* Changed to 1px as requested */
            background: linear-gradient(90deg, var(--brand-green-accent) 0%, var(--brand-green-mid) 50%, var(--brand-green-accent) 100%);
            margin: 0 auto; /* Adjust vertical spacing as needed */
            box-shadow: 0 0 10px var(--glow-color);
            border-radius: 0; /* Keep sharp corners */
            /* Removed max-width to make it full width */
        }

        /* --- NEW SECTION: FULL-WIDTH OVERLAY STYLES (for Vision and Impact) --- */
        .full-width-overlay-section {
            position: relative;
            width: 100vw;
            height: 650px; /* Adjusted height as per suggestion */
            overflow: hidden;
            display: flex;
            align-items: center; /* Changed to center for mobile view */
            justify-content: center;
            padding: 0;
            margin: 0;
        }

        .full-width-overlay-section .section-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            z-index: 0;
        }

        /* Responsive background images for Vision and Impact sections */
            #vision-section .section-background {
            /* CORRECTED PATH BELOW */
            background-image: url('../../images/futuristic-urbanization.png'); 
            filter: brightness(1.1); 
        }
        @media (max-width: 768px) {
            #vision-section .section-background {
                /* IMPORTANT: Replace with a mobile-optimized version of your vision background image */
                background-image: url('../images/futuristic-urbanization.png'); /* Using mobile-optimized image */
                filter: brightness(1.3) contrast(1.1); /* Increase brightness and contrast for mobile */
                opacity: 1; /* Ensure image is visible */
                z-index: 0 !important; /* Ensure background is always at the very bottom layer */
                display: block !important; /* Force display */
            }
        }

          #impact-section .section-background {
                /* CORRECTED PATH BELOW */
                background-image: url('../../images/planned-greenhills.png');
            filter: brightness(1.1);
        }
        @media (max-width: 768px) {
            #impact-section .section-background {
                /* IMPORTANT: Replace with a mobile-optimized version of your impact background image */
                background-image: url('../images/planned-greenhills.png'); /* Using mobile-optimized image */
                filter: brightness(1.3) contrast(1.1); /* Increase brightness and contrast for mobile */
                opacity: 1; /* Ensure image is visible */
                z-index: 0 !important; /* Ensure background is always at the very bottom layer */
                display: block !important; /* Force display */
            }
        }

        .full-width-overlay-section .section-background::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Re-introduced a subtle dark overlay for better text contrast */
            background: rgba(30, 70, 32, 0.25); /* Reduced opacity for better image visibility */
            z-index: 1;
        }

        .overlay-content-box {
            position: absolute;
            background-color: #fff;
            padding: 3rem;
            box-shadow: 0 10px 30px -5px rgba(0,0,0,0.2);
            border-radius: 0;
            z-index: 2;
            max-width: 450px;
            width: 90%;
            box-sizing: border-box; /* Ensure padding is included in width */
            text-align: left;
            top: 50%;
            transform: translateY(-50%);
            right: 5%;
            left: auto; /* Ensure it's not affected by left positioning */
        }

        .overlay-content-box-left {
            left: 5%;
            right: auto;
        }

        .overlay-eyebrow {
            color: var(--brand-green-accent);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            font-size: 0.85rem;
            margin-bottom: 0.3rem;
        }

        .overlay-accent {
            width: 50px;
            height: 4px;
            background: linear-gradient(90deg, var(--brand-green-mid) 0%, var(--brand-green-accent) 100%);
            margin: 0.5rem 0 1.5rem 0;
            border-radius: 0;
            box-shadow: 0 0 15px var(--glow-color);
        }

        .overlay-title {
            font-family: 'Playfair Display', serif;
            font-size: 2rem;
            font-weight: 700;
            color: var(--brand-green-dark);
            margin-bottom: 1rem;
            line-height: 1.2;
        }

        .overlay-text {
            font-family: 'Manrope', sans-serif;
            font-size: 1rem;
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }

        /* Removed .overlay-button specific styles - now uses .btn-primary and .btn-shimmer */

        /* Media queries for responsiveness of overlay box */
        @media (max-width: 768px) {
            .full-width-overlay-section {
                height: 90vh; /* Increased height slightly to show more of the image */
                align-items: center; /* Center content vertically */
                justify-content: center; /* Center content horizontally */
                padding-bottom: 2rem; /* Add some bottom padding */
            }
            .full-width-overlay-section .section-background { /* Mobile-specific background adjustments */
                background-position: center center; /* Center the background image */
                display: block !important; /* Force display of background */
                z-index: 0 !important; /* Set background to the lowest z-index */
            }
            .full-width-overlay-section .section-background::before {
                background: rgba(30, 70, 32, 0.1); /* Further reduced opacity for better image visibility */
                z-index: 1 !important; /* Set overlay above background, but below content */
            }
            .overlay-content-box {
                position: absolute; /* Changed to absolute for precise centering */
                top: 50%; /* Center vertically */
                left: 50% !important; /* Center horizontally */
                right: auto !important; /* Override any right positioning */
                transform: translate(-50%, -50%); /* Perfect centering */
                width: 80%; /* Adjusted width to 80% */
                margin: 0; /* Remove margin since we're using transform for centering */
                padding: 2rem; /* Slightly increased padding */
                text-align: center; /* Centered content for mobile */
                max-width: 90%; /* Increased max-width for better readability */
                z-index: 2 !important; /* Ensure it's above the background and its overlay */
                background-color: rgba(255, 255, 255, 0.70); /* Adjusted opacity to 70% */
            }
            .overlay-eyebrow, .overlay-accent, .overlay-title, .overlay-text {
                margin-left: auto; /* Center these elements as well */
                margin-right: auto;
                text-align: center; /* Ensure text is centered */
            }
            .overlay-accent {
                margin: 0.5rem auto 1.5rem auto; /* Center the accent line */
            }
            .overlay-title { font-size: 1.8rem; }
            .overlay-text { font-size: 0.95rem; }
            /* .btn-primary { padding: 12px 24px; font-size: 0.9rem; } - Handled by .btn-primary in global media query */
        }

        @media (min-width: 769px) and (max-width: 1023px) {
            .overlay-content-box {
                max-width: 400px;
                padding: 2.5rem;
            }
            .overlay-title { font-size: 2.2rem; }
        }


        /* --- 7. "DATA DRIVEN RESULTS" SECTION STYLES --- */
        #snapshot-section {
            padding: 6rem 2rem; background-color: var(--bg-light);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23e8f5e9' fill-opacity='0.4'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }
        .snapshot-container {
            /* Removed max-width to make it full width */
            width: 100%; /* Ensure it takes full width */
            margin: 0 auto;
            display: grid;
            align-items: center;
            gap: 2rem;
        }
        @media (min-width: 1024px) {
            .snapshot-container {
                grid-template-columns: 1fr; /* Changed to a single column */
                gap: 3rem; /* Adjusted gap for vertical stacking */
            }
        }
        .snapshot-header {
            text-align: center; /* Aligned text to center */
            max-width: 750px; /* Keep max-width for readability */
            margin: 0 auto; /* Center the header content */
        }
        @media (min-width: 1024px) { /* Removed redundant media query for text alignment */
            /* .snapshot-header { text-align: center; } */
        }
        .snapshot-eyebrow {
            color: var(--brand-green-accent); font-weight: 700; text-transform: uppercase;
            letter-spacing: 1.2px; font-size: 0.85rem; margin-bottom: 0.3rem;
        }
        .snapshot-heading {
            color: var(--brand-green-dark); font-family: 'Playfair Display', serif; font-size: 2.75rem;
            font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 0.5rem;
        }
        .snapshot-accent {
            width: 50px; height: 4px;
            background: linear-gradient(90deg, var(--brand-green-mid) 0%, var(--brand-green-accent) 100%);
            margin: 0.5rem auto 1.5rem auto; /* Centered accent line */
            border-radius: 0;
            box-shadow: 0 0 15px var(--glow-color);
        }
        @media (min-width: 1024px) { /* Removed redundant media query for accent margin */
            /* .snapshot-accent { margin-left: auto; margin-right: auto; } */
        }
        .snapshot-hook {
            color: var(--text-secondary); font-size: 1.25rem; line-height: 1.75;
            margin: 0 auto 2rem auto; /* Centered hook text */
            max-width: 750px;
        }
        .snapshot-card {
            height: 350px; /* Adjusted height for smaller graph */
            padding: 2.5rem; width: 100%; margin: 0 auto; /* Centered card */
            background: rgba(255, 255, 255, 0.6);
            border-radius: 0;
            border: 1.5px solid rgba(255, 255, 255, 0.8);
            box-shadow: 0 10px 40px -10px #2a9d8f20; backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px); transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
            position: relative; overflow: hidden;
            max-width: 800px; /* Added max-width to keep graph from stretching too wide */
        }
        .snapshot-card:hover {
            transform: translateY(-16px) scale(1.05); box-shadow: 0 25px 50px -12px #2a9d8f40;
            border-color: var(--brand-green-mid);
        }
        .snapshot-card::before {
            content: ''; position: absolute; top: var(--y, 50%); left: var(--x, 50%);
            transform: translate(-50%, -50%) scale(0); width: 300px; height: 300px;
            background-image: radial-gradient(circle, var(--glow-color) 0%, transparent 70%);
            border-radius: 50%;
            opacity: 0; transition: transform 0.8s ease, opacity 0.8s ease;
            z-index: 0;
        }
        .snapshot-card:hover::before { transform: translate(-50%, -50%) scale(1); opacity: 1; }
        .snapshot-card canvas { position: relative; z-index: 1; }
        .chart-title {
            font-family: 'Playfair Display', serif; font-size: 1.4rem; margin: 0 0 1.25rem 0;
            color: var(--brand-green-dark); text-align: center; font-weight: 700;
            position: relative; z-index: 1;
        }
        .chart-footer {
            display: flex; justify-content: space-between; align-items: center; margin-top: 1.25rem;
            font-size: 0.85rem; color: var(--text-secondary); position: relative; z-index: 1;
        }
        /* Removed .snapshot-button specific styles - now uses .btn-primary */

        .snapshot-fade-in-up {
            opacity: 0; transform: translateY(40px);
            transition: opacity 1s cubic-bezier(.2, .8, .2, 1), transform 1s cubic-bezier(.2, .8, .2, 1);
        }
        .snapshot-fade-in-up.visible { opacity: 1; transform: translateY(0); }
        @media (max-width: 1023px) {
            #snapshot-section { padding: 4rem 2rem; }
            .snapshot-heading { font-size: 2.25rem; }
            .snapshot-header { text-align: center; }
            .snapshot-accent { margin-left: auto; margin-right: auto; }
            .snapshot-hook { margin-bottom: 2.5rem; }
            .snapshot-card { height: 280px; padding: 1.5rem; } /* Adjusted height for optimal mobile view */
            .snapshot-header .btn-primary { display: block; width: fit-content; margin: auto; } /* Adjusted to use .btn-primary */
            .chart-footer {
                justify-content: center; /* Center footer content on mobile */
                gap: 1rem; /* Add some space between footer items */
                flex-wrap: wrap; /* Allow items to wrap if screen is too small */
            }
        }

        /* --- Refined "OUR BLUEPRINT" SECTION STYLES (#process-section) --- */
        #process-section {
            /* Reverted to original section styling for a simpler, centered layout */
            padding: 6rem 2rem;
            background-color: var(--bg-light);
            overflow: hidden;
            /* Removed background-image to remove the subtle SVG pattern */
            background-image: none;
            display: block; /* No longer a flex container for its direct children */
            text-align: center; /* Center content within the section */
        }

        /* Removed section-background-process as it's no longer needed */
        /* #process-section .section-background-process { ... } */
        /* #process-section .section-background-process::before { ... } */

        .process-container {
            /* This class is removed from HTML, so no CSS needed for it */
        }

        .process-content {
            /* Reverted to simpler styling for a centered text block */
            text-align: center; /* Center text within this block */
            max-width: 750px; /* Limit width for readability */
            margin: 0 auto; /* Center the content block within the section */
            /* Removed background-color, padding, box-shadow, border-radius, position, z-index */
            /* These styles were for the "card" treatment, which is now removed */
        }

        .process-eyebrow {
            color: var(--brand-green-accent); font-weight: 700; text-transform: uppercase;
            letter-spacing: 1.2px; font-size: 0.85rem; margin-bottom: 0.3rem;
        }
        .process-heading {
            color: var(--brand-green-dark); font-family: 'Playfair Display', serif; font-size: 2.75rem;
            font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 0.5rem;
        }
        .process-accent {
            width: 50px; height: 4px;
            background: linear-gradient(90deg, var(--brand-green-mid) 0%, var(--brand-green-accent) 100%);
            margin: 0.5rem auto 1.5rem auto; /* Centered accent line */
            border-radius: 0;
            box-shadow: 0 0 15px var(--glow-color);
        }
        .process-hook {
            color: var(--text-secondary); font-size: 1.1rem; line-height: 1.7;
            margin: 0 auto 2rem auto; /* Centered hook text */
            max-width: 750px;
        }

        /* Removed process-image-wrapper and process-image styles as the image is removed */
        /* .process-image-wrapper { ... } */
        /* .process-image { ... } */
        /* .process-image-wrapper:hover .process-image { ... } */

        /* Mobile adjustments for process section - simplified */
        @media (max-width: 1023px) {
            #process-section {
                padding: 4rem 2rem; /* Mobile padding */
            }
            .process-heading { font-size: 2.25rem; }
            .process-content {
                /* These are already handled by the main .process-content block now */
                /* text-align: center; order: 1; */
            }
            /* Removed .process-image-wrapper { order: 0; } */
            /* Removed .process-accent { margin-left: auto; margin-right: auto; } */
            .process-hook { margin-bottom: 2.5rem; }
        }


        /* --- "OUR FUTURE" SECTION STYLES (from Code 2) --- */
        #future-section {
            background-color: var(--bg-light);
            overflow: hidden;
            display: grid; /* Make the section itself a grid container */
            align-items: center;
            gap: 2rem; /* Default gap for mobile */
            padding: 4rem 2rem; /* Default padding for mobile */
        }
        @media (min-width: 1024px) {
            #future-section {
                grid-template-columns: 1fr 1fr; /* 1:1 ratio on desktop */
                gap: 0; /* Keep gap at 0 to ensure image touches edge */
                padding: 0; /* Removed top/bottom padding from section to allow image to touch top */
                width: 100vw; /* Ensure it spans full viewport width */
                margin: 0; /* Remove any default margins */
            }
            .future-content { /* For desktop, text on right, image on left */
                order: 1; /* Puts content on the right column */
                padding: 6rem 2rem; /* Vertical padding and right padding for text */
                padding-left: 2rem; /* Re-introduced padding-left to create space from image */
                max-width: 500px; /* Re-introduced max-width for standard text column width */
                margin-left: auto; /* Center text within its grid column */
                margin-right: auto; /* This will create the right padding when combined with max-width */
            }
            .future-image-wrapper { /* For desktop, image on left */
                order: 0; /* Puts image on the left column */
                /* No padding needed here, as the image should fill its grid cell */
            }
        }
        .future-content {
            text-align: left;
        }
        .future-eyebrow {
            color: var(--brand-green-accent);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            font-size: 0.85rem;
            margin-bottom: 0.3rem;
        }
        .future-heading {
            color: var(--brand-green-dark);
            font-family: 'Playfair Display', serif;
            font-size: 2.75rem;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: -0.02em;
            margin-bottom: 0.5rem;
        }
        .future-accent {
            width: 50px;
            height: 4px;
            background: linear-gradient(90deg, var(--brand-green-mid) 0%, var(--brand-green-accent) 100%);
            margin: 0.5rem 0 1.5rem 0;
            border-radius: 0;
            box-shadow: 0 0 15px var(--glow-color);
        }
        .future-hook {
            color: var(--text-secondary);
            font-size: 1.25rem; /* Increased font size for better visibility */
            line-height: 1.6; /* Adjusted line height for better readability */
            margin: 0 0 2rem 0;
        }
        .future-image-wrapper {
            position: relative;
            padding: 0; /* Ensure no padding on the wrapper */
        }
        .future-image {
            border-radius: 0;
            box-shadow: 0 25px 50px -12px rgba(26, 59, 26, 0.25);
            width: 100%; /* Image fills its grid column */
            height: 650px; /* Set height for desktop */
            object-fit: cover;
            transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        }
        .future-image-wrapper:hover .future-image {
            transform: scale(1.05);
            box-shadow: 0 30px 60px -15px rgba(26, 59, 26, 0.3);
        }
        /* Removed .future-button specific styles - now uses .btn-primary */

        .future-fade-in-up {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 1s cubic-bezier(.2, .8, .2, 1), transform 1s cubic-bezier(.2, .8, .2, 1);
        }
        .future-fade-in-up.visible {
            opacity: 1;
            transform: translateY(0);
        }
        @media (max-width: 1023px) {
            #future-section {
                padding-top: 4rem; /* Keep top padding */
                padding-bottom: 4rem; /* Keep bottom padding */
                padding-left: 0; /* REMOVE horizontal padding from section */
                padding-right: 0; /* REMOVE horizontal padding from section */
                grid-template-columns: 1fr; /* Single column on mobile */
            }
            .future-heading { font-size: 2.25rem; }
            .future-content {
                text-align: center;
                order: 1;
                padding-left: 2rem;   /* ADD horizontal padding back to content */
                padding-right: 2rem;  /* ADD horizontal padding back to content */
                padding-top: 0;
                padding-bottom: 0;
            }
            .future-image-wrapper { order: 0; }
            .future-accent { margin-left: auto; margin-right: auto; }
            .future-hook { margin-bottom: 2.5rem; }
            /* Mobile specific height for image */
            .future-image {
                height: 350px; /* Set fixed height for mobile */
                object-fit: cover; /* Ensure image covers the area without distortion */
            }
        }

        /* --- "JOIN OUR TEAM" SECTION STYLES (from Code 2) --- */
        #team-section {
            background-color: var(--bg-light);
            overflow: hidden;
            display: flex; /* Use flexbox for centering content */
            flex-direction: column;
            align-items: center; /* Center horizontally */
            justify-content: center; /* Center vertically */
            padding: 4rem 2rem; /* Consistent padding */
            text-align: center; /* Center text within the section */
        }

        .team-content {
            text-align: center; /* Ensure content is centered */
            max-width: 700px; /* Limit width for readability */
            margin: 0 auto; /* Center the content block */
        }

        .team-eyebrow {
            color: var(--brand-green-accent);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            font-size: 0.85rem;
            margin-bottom: 0.3rem;
        }

        .team-heading {
            color: var(--brand-green-dark);
            font-family: 'Playfair Display', serif;
            font-size: 2.75rem; /* Match future-heading size */
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: -0.02em;
            margin-bottom: 0.5rem;
        }

        .team-accent {
            width: 50px;
            height: 4px;
            background: linear-gradient(90deg, var(--brand-green-mid) 0%, var(--brand-green-accent) 100%);
            margin: 0.5rem auto 1.5rem auto; /* Center the accent line */
            border-radius: 0;
            box-shadow: 0 0 15px var(--glow-color);
        }

        .team-links {
            display: flex;
            flex-direction: column; /* Stack links vertically on mobile */
            gap: 1.5rem; /* Space between links */
            margin-top: 2.5rem; /* Space from heading */
            align-items: center; /* Center links horizontally */
        }

        @media (min-width: 768px) {
            .team-links {
                flex-direction: row;
                gap: 3rem; /* Display links side-by-side on larger screens */
                justify-content: center; /* Center links when in a row */
            }
        }

        /* Removed .team-button specific styles - now uses .btn-primary */

        .team-text-link {
            color: var(--brand-green-accent); /* Use accent color for the link */
            font-weight: 700;
            text-decoration: none;
            font-size: 1rem;
            letter-spacing: 0.5px;
            transition: color 0.3s ease;
        }
        .team-text-link:hover, .team-text-link:focus {
            color: var(--brand-green-dark); /* Darken on hover */
            outline: none;
        }

        /* Reusing fade-in-up for the new section */
        .team-fade-in-up {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 1s cubic-bezier(.2, .8, .2, 1), transform 1s cubic-bezier(.2, .8, .2, 1);
        }
        .team-fade-in-up.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- "OUR STORY" SECTION STYLES (from Code 2) --- */
        #story-section {
            background-color: var(--bg-light);
            overflow: hidden;
            display: grid; /* Make the section itself a grid container */
            align-items: center; /* Keep this for mobile, but override for desktop */
            gap: 2rem; /* Default gap for mobile */
            padding: 4rem 2rem; /* Default padding for mobile */
        }
        @media (min-width: 1024px) {
            #story-section {
                grid-template-columns: 1fr 1fr; /* 1:1 ratio on desktop */
                gap: 0; /* Keep gap at 0 to ensure image touches edge */
                padding: 0; /* Removed top/bottom padding from section to allow image to touch top */
                width: 100vw; /* Ensure it spans full viewport width */
                margin: 0; /* Remove any default margins */
                align-items: center; /* Align items to the center for desktop */
            }
            .story-content { /* For desktop, text on right, image on left */
                order: 1; /* Puts content on the right column */
                padding: 6rem 2rem; /* Vertical padding and right padding for text */
                padding-left: 2rem; /* Re-introduced padding-left to create space from image */
                max-width: 500px; /* Re-introduced max-width for standard text column width */
                margin-left: auto; /* Center text within its grid column */
                margin-right: auto; /* This will create the right padding when combined with max-width */
            }
            .story-image-wrapper { /* For desktop, image on left */
                order: 0; /* Puts image on the left column */
                /* No padding needed here, as the image should fill its grid cell */
            }
        }
        .story-content {
            text-align: left;
        }
        .story-eyebrow {
            color: var(--brand-green-accent);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            font-size: 0.85rem;
            margin-bottom: 0.3rem;
        }
        .story-heading {
            color: var(--brand-green-dark);
            font-family: 'Playfair Display', serif;
            font-size: 2.75rem;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: -0.02em;
            margin-bottom: 0.5rem;
        }
        .story-accent {
            width: 50px;
            height: 4px;
            background: linear-gradient(90deg, var(--brand-green-mid) 0%, var(--brand-green-accent) 100%);
            margin: 0.5rem 0 1.5rem 0;
            border-radius: 0;
            box-shadow: 0 0 15px var(--glow-color);
        }
        .story-hook {
            color: var(--text-secondary);
            font-size: 1.25rem;
            line-height: 1.6;
            margin: 0 0 2rem 0;
        }
        .story-stats-container {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            margin-bottom: 2rem;
            align-items: flex-start; /* Align stats to the left */
        }
        @media (min-width: 768px) {
            .story-stats-container {
                flex-direction: row;
                gap: 3rem;
            }
        }
        .story-stat-item {
            text-align: left;
        }
        .story-stat-number {
            color: var(--brand-green-dark);
            font-family: 'Playfair Display', serif;
            font-size: 2.5rem;
            font-weight: 800;
            line-height: 1;
            margin-bottom: 0.2rem;
        }
        .story-stat-label {
            color: var(--text-secondary);
            font-size: 0.9rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .story-image-wrapper {
            position: relative;
            padding: 0;
        }
        .story-image {
            border-radius: 0;
            box-shadow: 0 25px 50px -12px rgba(26, 59, 26, 0.25);
            width: 100%;
            height: 800px; /* Set height for desktop */
            object-fit: cover;
            transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        }
        .story-image-wrapper:hover .story-image {
            transform: scale(1.05);
            box-shadow: 0 30px 60px -15px rgba(26, 59, 26, 0.3);
        }
        /* Removed .story-button specific styles - now uses .btn-primary */

        .story-fade-in-up {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 1s cubic-bezier(.2, .8, .2, 1), transform 1s cubic-bezier(.2, .8, .2, 1);
        }
        .story-fade-in-up.visible {
            opacity: 1;
            transform: translateY(0);
        }
        @media (max-width: 1023px) {
            #story-section {
                padding-top: 4rem; /* Keep top padding */
                padding-bottom: 4rem; /* Keep bottom padding */
                padding-left: 0; /* REMOVE horizontal padding from section */
                padding-right: 0; /* REMOVE horizontal padding from section */
                grid-template-columns: 1fr; /* Single column on mobile */
            }
            .story-heading { font-size: 2.25rem; }
            .story-content {
                text-align: center;
                order: 1;
                padding-left: 2rem;   /* ADD horizontal padding back to content */
                padding-right: 2rem;  /* ADD horizontal padding back to content */
                padding-top: 0;
                padding-bottom: 0;
            }
            .story-image-wrapper { order: 0; }
            .story-accent { margin-left: auto; margin-right: auto; }
            .story-hook { margin-bottom: 2.5rem; }
            /* Mobile specific height for image */
            .story-image {
                height: 350px; /* Set fixed height for mobile */
                object-fit: cover; /* Ensure image covers the area without distortion */
            }
            .story-stats-container {
                align-items: center; /* Center stats on mobile */
            }
            .story-stat-item {
                text-align: center; /* Center stat text on mobile */
            }
        }

        /* --- 10. END-OF-PAGE CTA BANNER STYLES --- */
        #contact-banner-section {
            background: linear-gradient(120deg, var(--brand-green-dark) 0%, #173a18 40%, var(--brand-green-accent) 100%), url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23FFFFFF' fill-opacity='0.08' fill-rule='evenodd'%3E%3Cpath d='M11 0h2v11h11v2H13v11H11V13H0v-2h11V0zm22 0h2v11h11v2H35v11h-2V13H22v-2h11V0zM55 0h2v11h11v2H57v11h-2V13H44v-2h11V0zM11 22h2v11h11v2H13v11H11V35H0v-2h11V22zm22 0h2v11h11v2H35v11h-2V35H22v-2h11V22zM55 22h2v11h11v2H57v11h-2V35H44v-2h11V22zM11 44h2v11h11v2H13v11H11V57H0v-2h11V44zm22 0h2v11h11v2H35v11h-2V57H22v-2h11V44zm22 0h2v11h11v2H57v11h-2V57H44v-2h11V44zM11 66h2v11h11v2H13v11H11V79H0v-2h11V66zm22 0h2v11h11v2H35v11h-2V79H22v-2h11V66zm22 0h2v11h11v2H57v11h-2V79H44v-2h11V66z'/%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
            background-blend-mode: overlay; color: #fff; display: flex;
            align-items: center; justify-content: center; text-align: center;
            position: relative; overflow: hidden; padding: 0; box-shadow: none;
        }
        .contact-banner-glass-blur {
            position: absolute; top: -80px; left: -100px; width: 350px; height: 350px;
            background: radial-gradient(circle, rgba(129, 199, 132, 0.2) 0%, #fff0 75%);
            filter: blur(32px); opacity: 0.5; z-index: 0;
            border-radius: 50%;
        }
        .contact-banner-glass-blur-right {
            position: absolute; right: -90px; bottom: -100px; width: 280px; height: 280px;
            background: radial-gradient(circle, rgba(42, 157, 143, 0.15) 0%, #fff0 80%);
            filter: blur(24px); opacity: 0.6; z-index: 0;
            border-radius: 50%;
        }
        .contact-banner-content {
            position: relative; z-index: 1; max-width: 850px;
            margin: 0 auto; padding: 5rem 2rem;
        }
        .contact-banner-heading {
            font-family: 'Playfair Display', serif; font-weight: 700; font-size: 2.75rem;
            letter-spacing: -0.02em; line-height: 1.2;
            text-shadow: 0 3px 20px rgba(10, 30, 10, 0.2);
            margin-bottom: 1.5rem; color: #fff;
        }
        @media (min-width: 768px) { .contact-banner-heading { font-size: 3.25rem; } }
        .contact-banner-subheading {
            color: var(--brand-green-light); font-size: 1.2rem; max-width: 600px;
            margin: 0 auto; font-weight: 500; line-height: 1.6;
            text-shadow: 0 1.5px 10px rgba(20, 40, 20, 0.1);
        }
        .contact-banner-link {
            color: var(--brand-green-mid); font-weight: 600; text-decoration: none;
            position: relative; transition: all 0.3s ease;
        }
        .contact-banner-link::after {
            content: ""; position: absolute; bottom: -4px; left: 0;
            width: 100%; height: 2px; background: var(--brand-green-accent);
            transform: scaleX(1); transform-origin: bottom left;
            transition: transform 0.3s ease;
        }
        .contact-banner-link:hover { color: #fff; }
        .contact-banner-link:hover::after { transform-origin: bottom right; transform: scaleX(0); }
        .contact-fade-in-up {
            opacity: 0; transform: translateY(40px);
            transition: opacity 1s cubic-bezier(.2, .8, .2, 1), transform 1s cubic-bezier(.2, .8, .2, 1);
        }
        .contact-fade-in-up.visible { opacity: 1; transform: translateY(0); }

        /* Accessibility: Reduce motion for users who prefer it */
        @media (prefers-reduced-motion: reduce) {
            .btn-primary,
            .btn-shimmer::before,
            .snapshot-card,
            .snapshot-card::before,
            .process-image-wrapper .process-image,
            .future-image-wrapper .future-image,
            .story-image-wrapper .story-image,
            .hero-content,
            .vision-fade-in-up,
            .impact-fade-in-up,
            .snapshot-fade-in-up,
            .process-fade-in-up,
            .contact-fade-in-up,
            .future-fade-in-up,
            .team-fade-in-up,
            .story-fade-in-up {
                transition: none !important;
                animation: none !important;
            }
        }