/* --- TABLE OF CONTENTS ---
1.  :root Variables (Vibrant & Friendly)
2.  Global Styles & Typography
3.  Header & Navigation
4.  Hero Section (100vh)
5.  Stats Bar Section (NEW)
6.  Services Section
7.  How It Works Section (NEW)
8.  Gallery ("Our Work") Section
    8b. Before & After Slider (NEW: clip-path)
9.  About Us Section (NEW)
10. Contact/Quote Section (REVISED)
11. Footer
12. Utility & Animation Classes
13. Responsive Design
--------------------------*/

/* --- 1. :root Variables (Per Brief) --- */
:root {
    /* Vibrant & Friendly Palette */
    --color-primary: #007BFF;       /* Trustworthy Blue */
    --color-primary-dark: #0056b3;  /* Blue for hovers */
    --color-secondary: #00C49A;     /* "Fresh" Green Accent */
    --color-background: #FFFFFF;   /* Clean White */
    --color-surface: #F8F9FA;       /* Light grey for alternate sections */
    --color-text-primary: #2D3748; /* Dark Charcoal */
    --color-text-secondary: #5A6A85; /* Lighter charcoal */
    --color-border: #DDE2E8;
    
    /* Typography */
    --font-heading: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    /* Spacing */
    --spacing-xs: 0.5rem;   /* 8px */
    --spacing-sm: 1rem;     /* 16px */
    --spacing-md: 2rem;     /* 32px */
    --spacing-lg: 4rem;     /* 64px */
    --spacing-xl: 6rem;     /* 96px */
    
    /* Misc */
    --border-radius: 8px;
    --shadow-light: 0 4px 12px rgba(0,0,0,0.05);
    --shadow-medium: 0 8px 30px rgba(0,0,0,0.1);
}

/* --- 2. Global Styles & Typography --- */
html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-background);
    color: var(--color-text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    
    /* Fade-in on load */
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

body.loaded {
    opacity: 1;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

h1 { font-size: 3.5rem; font-weight: 800; }
h2 { font-size: 2.5rem; margin-bottom: var(--spacing-md); }
h3 { font-size: 1.25rem; }

p {
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-secondary);
}
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: var(--color-primary-dark);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: var(--spacing-lg);
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: -1.5rem auto 2rem; /* Pulls up under the title */
}

/* --- Utility Classes for Buttons --- */
.cta-button-header, .cta-button-main, .cta-button-secondary {
    display: inline-block;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-family: var(--font-body);
    font-weight: 700;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.cta-button-header {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.8);
    color: var(--color-background);
}


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


/* Scrolled Header Button */
.main-header.scrolled .cta-button-header {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
/* Scrolled Header Button */
.main-header.scrolled .cta-button-header:hover {
    background-color: var(--color-primary);
    color: var(--color-background) !important; /* Forces the text to be white */
}

.cta-button-main {
    background-color: var(--color-primary);
    color: var(--color-background);
}
.cta-button-main:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-background); /* This is the fix */
    transform: translateY(-3px);
    box-shadow: 0 4px 20px rgba(0,123,255,0.3);
}

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


/* --- 3. Header & Navigation --- */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: var(--spacing-sm) 0;
    z-index: 1000;
    transition: all 0.4s ease;
}
.main-header.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
    backdrop-filter: blur(8px);
    padding: var(--spacing-xs) 0;
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* NEW: Text Logo Style */
.logo-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-background);
    transition: color 0.4s ease;
}
.main-header.scrolled .logo-text {
    color: var(--color-text-primary);
}
.logo-text:hover {
    color: var(--color-primary);
}


.main-nav {
    display: flex;
    align-items: center;
}
.main-nav a {
    margin: 0 var(--spacing-sm);
    color: var(--color-background);
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    transition: color 0.4s ease;
}
.main-header.scrolled .main-nav a {
    color: var(--color-text-primary);
}
.main-nav a:hover {
    color: var(--color-primary);
}

/* Hamburger Menu */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}
.hamburger-line {
    width: 30px;
    height: 3px;
    background-color: var(--color-background);
    border-radius: 10px;
    transition: all 0.3s linear;
}
.main-header.scrolled .hamburger-line {
    background-color: var(--color-text-primary);
}


/* --- 4. Hero Section --- */
.hero-section {
    height: 100vh;
    min-height: 750px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; /* <-- FIX 1: This line centers the text */
    overflow: hidden;
    text-align: center;
}
.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
/* Dark overlay */
.hero-video-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.3));
    z-index: 2;
}
.hero-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-content-container {
    position: relative;
    z-index: 3;
    padding: var(--spacing-md);
}
.hero-text {
    max-width: 800px;
}
.hero-text h1 {
    color: var(--color-background);
    text-shadow: 0 3px 15px rgba(0,0,0,0.5);
}
.hero-text p {
    font-size: 1.5rem;
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
}
.hero-sub-text {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    display: block;
    margin-bottom: var(--spacing-md);
}
.hero-cta-group {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

/* --- 5. Stats Bar Section (NEW) --- */
.stats-bar-section {
    background-color: var(--color-surface);
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--color-border);
}
.stats-bar-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}
.stat-item {
    text-align: center;
    padding: var(--spacing-sm);
}
.stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
}
.stat-label {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}


/* --- 6. Services Section --- */
.services-section {
    padding: var(--spacing-lg) 0;
    background-color: var(--color-background);
    margin-top: -1rem; /* reduces excess gap under hero */
    margin-bottom: 3rem; /* reduces excess gap under hero */
}
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}
.service-card {
    background-color: var(--color-background);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    text-align: center;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--color-border);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-medium);
    border-color: var(--color-primary);
}
.service-card h3 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}
.service-card p {
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* --- 7. How It Works Section (NEW) --- */
.how-it-works-section {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-surface);
}
.process-steps-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    position: relative;
    text-align: center;
}
.process-step {
    position: relative;
    padding: 0 var(--spacing-sm);
}
.step-number {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-background);
    font-size: 1.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
    box-shadow: 0 4px 20px rgba(0,123,255,0.3);
}
.process-step h3 {
    margin-bottom: var(--spacing-xs);
    font-size: 1.25rem;
}

/* --- 8. Gallery ("Our Work") Section (NEW: Asymmetrical) --- */
.gallery-section {
    padding: var(--spacing-xl) 0;
}
.work-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 250px; /* Define a base row height */
    gap: var(--spacing-md);
    grid-template-areas:
        "slider slider item-tall"
        "slider slider item-tall"
        "item-3 item-4 item-wide"
        "item-6 item-6 item-wide";
}

.gallery-item {
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-medium);
    position: relative;
    /* Apply transition to all items (for box-shadow) */
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

/* This rule applies the hover zoom ONLY to non-slider items */
.gallery-item:not(.item-slider):hover {
    transform: scale(1.02); 
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    z-index: 2;
}

/* This rule ensures the slider gets the shadow hover, but NOT the zoom */
.gallery-item.item-slider:hover {
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    z-index: 2;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Apply the img transition ONLY to non-slider items */
    transition: transform 0.4s ease;
}

/* This rule applies the image zoom ONLY to non-slider items */
.gallery-item:not(.item-slider):hover img {
    transform: scale(1.1);
}

/* Assigning grid areas */
.item-slider { grid-area: slider; }
.item-tall { grid-area: item-tall; }
/* ... (the rest of the grid rules remain the same) ... */
.item-wide { grid-area: item-wide; }
.work-gallery-grid > *:nth-child(1) { grid-area: slider; }
.work-gallery-grid > *:nth-child(2) { grid-area: item-tall; }
.work-gallery-grid > *:nth-child(3) { grid-area: item-3; }
.work-gallery-grid > *:nth-child(4) { grid-area: item-4; }
.work-gallery-grid > *:nth-child(5) { grid-area: item-wide; }
.work-gallery-grid > *:nth-child(6) { grid-area: item-6; }


/* --- 8b. Before & After Slider (NEW: clip-path version) --- */
.comparison-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: col-resize; /* Changes cursor to indicate sliding */
    user-select: none;
}
.comparison-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
#top-image {
    /* This is the key: the image is clipped, not resized */
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}
#slider-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%; /* Starts in the middle */
    transform: translateX(-50%);
    width: 4px;
    background-color: white;
    pointer-events: none;
    z-index: 10;
}
#slider-handle {
    position: absolute;
    top: 50%;
    left: 50%; /* Centered on the line */
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-dark);
    font-size: 1.5rem;
    line-height: 1;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    pointer-events: none;
    z-index: 10;
}

/* --- 9. About Us Section (NEW) --- */
.about-section {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-surface);
}
.about-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--spacing-lg);
    align-items: center;
}
.about-image img {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
}
.about-content .section-title {
    text-align: left;
}
.about-content p {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-md);
}


/* --- 10. Contact/Quote Section (REVISED) --- */
.contact-section {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-background);
}
.contact-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    background-color: var(--color-background);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
}
.contact-container h2 {
    font-size: 2.5rem;
}
.contact-container .section-subtitle {
    margin-bottom: var(--spacing-lg);
}

.contact-container form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    text-align: left;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
}
.form-group {
    grid-column: span 1;
}
.form-group-full {
    grid-column: span 1;
}
.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 1rem;
    background-color: var(--color-background);
    color: var(--color-text-primary);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}
.contact-container button {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
    margin-top: var(--spacing-sm);
}

.contact-info-bottom {
    margin-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-lg);
}
.contact-info-bottom p {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-sm);
}


/* --- 11. Footer (NEW: Exact Astra Style) --- */
.main-footer {
    /* EXACT dark navy-blue from Astra screenshot */
    background-color: #0B1A3D; 
    
    /* Subtle dot grid pattern */
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 15px 15px;
    
    color: #A0AEC0; /* Light grey text */
    padding: var(--spacing-lg) 0 0; /* Remove bottom padding */
    position: relative; /* For divider lines */
}

.footer-container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr; /* 4-column layout */
    gap: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    position: relative;
}

/* Faint vertical divider lines (like Astra) */
.footer-column:not(:first-child) {
    position: relative;
    padding-left: var(--spacing-lg);
}
.footer-column:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.05);
}

.footer-column h3 {
    font-size: 1.1rem;
    color: var(--color-background);
    margin-bottom: var(--spacing-md);
    font-weight: 600;
    letter-spacing: 0.5px;
}
.footer-logo-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-background);
    margin-bottom: var(--spacing-sm);
}
.footer-column p,
.footer-column a {
    color: #A0AEC0;
    font-size: 0.9rem;
    margin-bottom: var(--spacing-sm);
    text-decoration: none;
    transition: color 0.3s ease;
}
.footer-column a:hover {
    color: var(--color-background);
}

/* Social Icons (Astra Style) */
.social-icons {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}
.social-icons a {
    color: #A0AEC0;
    border: 1px solid #4A5568;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}
.social-icons a:hover {
    color: var(--color-background);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.social-icons svg {
    width: 20px;
    height: 20px;
}

/* Capterra Reviews Block */
/* Google Reviews Block */
            .footer-reviews {
                margin-top: var(--spacing-lg);
            }
            .footer-reviews p {
                font-size: 0.9rem;
                color: #A0AEC0;
            }
            .google-review-link {
                display: inline-flex;
                align-items: center;
                gap: 0.5rem; /* Space between logo and text */
                background-color: #08142B; /* Darker inner color */
                padding: 0.5rem 1rem;
                border-radius: 4px;
                border: 1px solid #4A5568;
                transition: all 0.3s ease;
                margin-top: var(--spacing-xs);
            }
            .google-review-link:hover {
                background-color: #4A5568;
                border-color: #A0AEC0;
            }
            .google-logo {
                width: 24px;
                height: 24px;
            }
            .google-review-link span {
                font-size: 0.9rem;
                font-weight: 600;
                color: #FFFFFF;
                line-height: 1;
            }

/* Footer Links */
.footer-links a {
    display: block;
}

/* NEW: Footer Chevron */


/* Footer Bottom Bar (Two-tone) */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: var(--spacing-md) 0;
    font-size: 0.85rem;
    /* This creates the two-tone effect */
    background-color: #08142B; 
    
    /* This applies it edge-to-edge */
    margin: 0 calc(-1 * var(--spacing-md));
    padding: var(--spacing-md) var(--spacing-md);
}
.footer-bottom p {
    margin: 0;
    color: #A0AEC0;
}
.footer-bottom-links a {
    color: #A0AEC0;
    margin-left: var(--spacing-md);
    text-decoration: none;
}
.footer-bottom-links a:hover {
    color: var(--color-background);
}


/* --- 12. Mobile Nav & Animations --- */
@media (max-width: 992px) {
    .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 70%;
        max-width: 300px;
        background-color: var(--color-background);
        box-shadow: -5px 0 25px rgba(0,0,0,0.1);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }
    .main-nav a {
        color: var(--color-text-primary);
        font-size: 1.5rem;
    }
    .cta-button-header {
        display: none;
    }
    .hamburger-menu {
        display: flex;
    }
    body.mobile-nav-open .main-nav {
        transform: translateX(0);
    }
    body.mobile-nav-open .hamburger-line {
        background-color: var(--color-text-primary);
    }
    body.mobile-nav-open .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(7px, 7px);
    }
    body.mobile-nav-open .hamburger-line:nth-child(2) {
        opacity: 0;
    }
    body.mobile-nav-open .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }
    body.mobile-nav-open .main-header.scrolled .hamburger-line {
        background-color: var(--color-text-primary);
    }
}

/* Scroll Reveal Animations */
/* This rule is correct */
.stat-item, .service-card, .why-us-item, .process-step, .gallery-item, .about-container, .contact-container {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.visible {
    opacity: 1;
    transform: translateY(0);
}
/* Staggered delays */
.stat-item:nth-child(2) { transition-delay: 0.1s; }
.stat-item:nth-child(3) { transition-delay: 0.2s; }
.stat-item:nth-child(4) { transition-delay: 0.3s; }
.service-card:nth-child(2) { transition-delay: 0.1s; }
.service-card:nth-child(3) { transition-delay: 0.2s; }
.service-card:nth-child(4) { transition-delay: 0.3s; }
.process-step:nth-child(2) { transition-delay: 0.2s; }
.process-step:nth-child(3) { transition-delay: 0.4s; }


/* --- 13. Responsive Design --- */
@media (max-width: 992px) {
    h1, .hero-text h1 { font-size: 2.75rem; }
    h2, .section-title { font-size: 2rem; }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .process-steps-container {
        grid-template-columns: 1fr;
    }
    .process-step {
        margin-bottom: var(--spacing-lg);
    }
    .process-step:last-child {
        margin-bottom: 0;
    }
    
    .about-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .about-image {
        max-width: 300px;
        margin: 0 auto var(--spacing-md);
    }
    .about-content .section-title {
        text-align: center;
    }
    
/* Responsive Gallery */
    .work-gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 250px;
        /* NEW: This layout makes the first two images a matching pair */
        grid-template-areas:
            "slider slider"
            "slider slider"
            "item-2 item-3"  /* This is Conference Room (2) and Kitchen (3) */
            "item-2 item-3"  /* This makes them BOTH 2 rows tall */
            "item-4 item-5"  /* This is Restaurant (4) and Windows (5) */
            "item-6 item-5"; /* This is Team (6) and Windows (5) */
    }

    /* This resets any desktop-specific class names */
    .gallery-item,
    .item-slider,
    .item-tall,
    .item-wide {
        grid-area: auto !important;
    }

    /* This re-assigns all 6 items to their new tablet grid areas */
    .work-gallery-grid > *:nth-child(1) { grid-area: slider !important; }
    .work-gallery-grid > *:nth-child(2) { grid-area: item-2 !important; }
    .work-gallery-grid > *:nth-child(3) { grid-area: item-3 !important; }
    .work-gallery-grid > *:nth-child(4) { grid-area: item-4 !important; }
    .work-gallery-grid > *:nth-child(5) { grid-area: item-5 !important; }
    .work-gallery-grid > *:nth-child(6) { grid-area: item-6 !important; }

    /* Responsive Footer */
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
    .footer-column:not(:first-child) {
        padding-left: 0;
    }
    .footer-column:not(:first-child)::before {
        display: none;
    }
}

@media (max-width: 768px) {
    html { font-size: 15px; }

    .hero-section {
        height: 90vh;
        min-height: 600px; /* Adjust min height for mobile */
    }
    .hero-cta-group {
        flex-direction: column;
        align-items: center;
    }
    .hero-cta-group a {
        width: 100%;
        max-width: 300px;
    }

    .stats-bar-container {
        flex-direction: column;
    }
    .stat-item {
        padding: var(--spacing-xs);
    }

    .process-step {
        margin-bottom: var(--spacing-md); /* tighter spacing between steps */
    }
    .services-grid {
        grid-template-columns: 1fr;
    }
    .why-us-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .form-group {
        margin-bottom: var(--spacing-sm);
    }

    .services-section {
        margin-top: -1rem; /* pulls section closer to hero */
        padding-top: var(--spacing-md); /* less top padding */
    }
/* Full-width gallery on mobile */
    .work-gallery-grid {
        display: block; /* Turn off Grid, go back to simple stacking */
    }

    .gallery-item,
    .item-slider,
    .item-tall,
    .item-wide {
        /* Reset all grid properties that might interfere */
        grid-column: auto !important;
        grid-row: auto !important;
        grid-area: auto !important;
        
        /* Define a new, simple block layout */
        display: block;
        width: 100%;
        margin-bottom: var(--spacing-md); /* Add space between stacked items */
        aspect-ratio: 16 / 10; /* Keep a nice aspect ratio */
    }

    .item-slider {
        aspect-ratio: 16 / 9 !important; /* Keep slider landscape */
        min-height: 300px;
    }

    /* Responsive Footer */
    .footer-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        text-align: center;
    }
    .social-icons {
        justify-content: center;
    }
    .footer-reviews {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .capterra-logo {
        margin: 0 auto;
    }
    .footer-bottom {
        flex-direction: column;
        gap: var(--spacing-sm);
        /* Fix edge-to-edge padding on mobile */
        margin: 0 calc(-1 * var(--spacing-md));
        padding: var(--spacing-md) var(--spacing-md);
    }
}