/* Modern Design System for Zeco Green Homes */
:root {
    /* Color Palette */
    --primary: #10B981;
    /* Emerald 500 */
    --primary-dark: #059669;
    /* Emerald 600 */
    --primary-light: #D1FAE5;
    /* Emerald 100 */
    --secondary: #111827;
    /* Gray 900 */
    --accent: #34D399;
    /* Emerald 400 */

    --bg-body: #F9FAFB;
    --bg-surface: #FFFFFF;
    --bg-dark: #1F2937;

    --text-main: #1F2937;
    --text-muted: #6B7280;
    --text-light: #F3F4F6;

    /* Typography */
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
    --font-heading: 'Outfit', 'Inter', sans-serif;

    /* Spacing */
    --container-width: 1280px;
    --nav-height: 80px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-green: 0 10px 25px -5px rgba(16, 185, 129, 0.4);

    /* Transitions */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset & Base */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-body);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
    padding-top: var(--nav-height);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    line-height: 1.2;
    color: var(--secondary);
    font-weight: 700;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

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

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

.section {
    padding: 5rem 0;
}

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

.text-primary {
    color: var(--primary);
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.grid {
    display: grid;
}

.gap-1 {
    gap: 0.5rem;
}

.gap-2 {
    gap: 1rem;
}

.gap-4 {
    gap: 2rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 2rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.025em;
    transition: var(--transition);
    cursor: pointer;
    border: 2px solid transparent;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
    box-shadow: var(--shadow-green);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgba(16, 185, 129, 0.5);
}

.btn-secondary {
    background-color: transparent;
    color: var(--secondary);
    border-color: var(--secondary);
}

.btn-secondary:hover {
    background-color: var(--secondary);
    color: white;
    transform: translateY(-2px);
}

.btn-outline-white {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: white;
    border-color: white;
}

.btn-outline-white:hover {
    background-color: white;
    color: var(--primary);
}

/* Header & Nav */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    z-index: 1000;
    display: flex;
    align-items: center;
    transition: var(--transition);
}

.header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow-sm);
    height: 70px;
}

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


.logo img {
    height: 48px;
    transition: var(--transition);
}

.nav-items {
    display: flex;
    align-items: center;
    flex: 1;
    margin-left: 3rem;
}

.nav-menu {
    display: flex;
    gap: 2.5rem;
    align-items: center;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: white;
        flex-direction: column;
        justify-content: center;
        transition: 0.3s;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
        padding: 2rem;
        z-index: 1000;
        overflow-y: auto;
        /* Handle smaller height screens */
    }

    .mobile-menu-active .nav-menu {
        right: 0;
    }

    .nav-items {
        /* Reset margin on mobile to prevent layout issues */
        margin-left: 0;
    }
}

.nav-link {
    font-weight: 500;
    color: var(--text-main);
    position: relative;
    font-size: 0.95rem;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary);
    transition: var(--transition);
}

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

.nav-link:hover::after {
    width: 100%;
}

/* Dropdown */
.dropdown {
    position: relative;
    cursor: pointer;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: white;
    min-width: 240px;
    padding: 0.5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(10px);
}

.dropdown-item {
    display: block;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-weight: 500;
}

.dropdown-item:hover {
    background-color: var(--primary-light);
    color: var(--primary-dark);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .nav-actions {
        display: none;
        /* Hide desktop actions, maybe add inside menu if needed */
    }

    /* If we want to show them inside the menu, we'd need to restructure HTML or use JS to move them.
       For now, let's assume the menu links are enough or we can style .nav-actions to be inside .nav-menu if they were children. 
       Actually, in the HTML, .nav-actions is a sibling to .nav-menu inside .nav-items.
       So .nav-items is the wrapper. Let's target .nav-items instead.
    */
}

@media (max-width: 1024px) {
    .nav-items {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        /* Or like 80% */
        height: 100vh;
        background: white;
        flex-direction: column;
        justify-content: center;
        transition: 0.3s;
        z-index: 1000;
        padding-top: 80px;
        /* Space for close button/hamburger */
    }

    .mobile-menu-active .nav-items {
        right: 0;
    }

    .nav-menu {
        /* Override previous .nav-menu for mobile since we are moving .nav-items */
        position: static;
        width: auto;
        height: auto;
        box-shadow: none;
        padding: 0;
        right: auto;
        background: transparent;
        flex-direction: column;
    }

    .nav-actions {
        display: flex;
        flex-direction: column;
        margin-top: 2rem;
    }
}

.phone-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--secondary);
}

.phone-link svg {
    color: var(--primary);
}

/* Hamburger */
.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    z-index: 1001;
    /* Above mobile menu */
}

@media (max-width: 1024px) {
    .hamburger {
        display: flex;
    }
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--secondary);
    transition: var(--transition);
}

/* Hero Section (Home) */
.hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(31, 41, 55, 0.9), rgba(16, 185, 129, 0.8)), url('/static/images/hero_scheme_eco4.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: white;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 10;
    max-width: 800px;
    animation: fadeUp 1s ease-out;
}

.hero-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    color: white;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
        /* Smaller font on mobile */
    }

    .hero-modern-title {
        font-size: 2rem;
    }

    .section {
        padding: 3rem 0;
        /* Reduced padding */
    }
}

.hero-text {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2.5rem;
    max-width: 600px;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .hero-buttons .btn {
        width: 100%;
    }
}

/* Redesigned Modern Hero */
/* Redesigned Modern Hero "Split Card" */
.hero-modern {
    padding: 3rem 0;
    background: var(--bg-body);
    position: relative;
    /* overflow: hidden; Removed to let shadow breathe */
}

/* Background blob only behind the card, optional */
.hero-modern::before {
    content: '';
    position: absolute;
    top: 10%;
    /* right: 0; */
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.hero-modern-container {
    background: #1F2937;
    /* Dark Navy/Grey Card Background */
    border-radius: 2rem;
    overflow: hidden;
    display: flex;
    /* Flex row for side-by-side */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 1;
    /* No gap, they touch. */
}

.hero-modern-content {
    flex: 1;
    padding: 4rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: rgba(16, 185, 129, 0.2);
    color: #6EE7B7;
    /* Light Green */
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    align-self: flex-start;
}

.hero-modern-title {
    font-size: clamp(2.5rem, 4.5vw, 3.5rem);
    color: white;
    /* White text on dark card */
    margin-bottom: 1.5rem;
    line-height: 1.1;
    font-weight: 800;
}

.hero-modern-text {
    font-size: 1.15rem;
    color: #9CA3AF;
    /* Light grey text */
    margin-bottom: 2.5rem;
    line-height: 1.6;
    max-width: 95%;
}

.hero-modern-image-wrapper {
    flex: 1;
    height: auto;
    min-height: 100%;
    /* Stretch to full height of card */
    position: relative;
    /* Remove the card styles from wrapper since the container is the card */
    border-radius: 0;
    box-shadow: none;
    transform: none;
    aspect-ratio: auto;
}

.hero-modern-image-wrapper:hover {
    transform: none;
}

.hero-modern-image-wrapper img {
    width: 100%;
    height: 100%;
    /* Ensure it fills the flex item */
    object-fit: cover;
    display: block;
}

/* Mobile Responsiveness for Split Card */
@media (max-width: 900px) {
    .hero-modern-container {
        flex-direction: column-reverse;
        /* Image Top (First visually in column reverse? No, column-reverse puts last item first) -> Last item is Image. So Image on Top. perfect. */
    }

    .hero-modern-content {
        padding: 2.5rem 1.5rem;
        text-align: center;
        align-items: center;
        /* Center flex items (badge, buttons) */
    }

    .hero-badge {
        align-self: center;
    }

    .hero-modern-image-wrapper {
        width: 100%;
        height: 250px;
        min-height: auto;
    }

    .hero-modern-title {
        font-size: 2rem;
    }
}


/* Components: Cards */
.card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-light);
}

/* Grant Cards specific */
.grant-img-wrapper {
    height: 220px;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 1.5rem;
    position: relative;
}

.grant-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.card:hover .grant-img-wrapper img {
    transform: scale(1.1);
}

.card-title {
    font-size: 1.5rem;
    color: var(--secondary);
    margin-bottom: 0.75rem;
}

.card-text {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.benefit-list li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.75rem;
    color: var(--text-main);
    font-size: 0.95rem;
}

.benefit-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: bold;
}

.card-link {
    margin-top: auto;
    color: var(--primary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.card-link:hover {
    gap: 0.75rem;
    color: var(--primary-dark);
}

/* ECO4 Section */
.eco-section {
    background-color: white;
    overflow: hidden;
}

.eco-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.eco-image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.eco-image img {
    width: 100%;
    display: block;
}

.eco-badges {
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.eco-badge {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--primary-light);
    border-left: 4px solid var(--primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--primary-dark);
    font-weight: 600;
}

.step-number {
    background: var(--primary);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* Timeline/Steps */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 4rem;
    position: relative;
}

.step-card {
    text-align: center;
    position: relative;
}

.step-icon {
    width: 64px;
    height: 64px;
    background: var(--bg-body);
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary);
    border: 2px solid var(--primary);
    position: relative;
    z-index: 2;
    transition: var(--transition);
}

.step-card:hover .step-icon {
    background: var(--primary);
    color: white;
    transform: scale(1.1);
}

.steps-grid::before {
    content: '';
    position: absolute;
    top: 32px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--primary-light);
    z-index: 1;
}

/* Features Section (Why Choose Us) */
.features-section {
    background-color: var(--bg-dark);
    color: white;
    position: relative;
    overflow: hidden;
}

.features-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.1), transparent 70%);
}

.features-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem;
}

.features-intro h2 {
    color: white;
    margin-bottom: 1rem;
}

.features-intro p {
    color: #9CA3AF;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.feature-box {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
}

.feature-box:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
    border-color: var(--primary);
}

.feature-icon-wrapper {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    display: inline-block;
}

.feature-title {
    color: white;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.feature-desc {
    color: #D1D5DB;
    font-size: 0.95rem;
}


/* --- ABOUT PAGE STYLES --- */
.about-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/static/images/uk_energy_blog.jpg') center/cover fixed;
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-hero h1 {
    color: white;
    font-size: 3.5rem;
    text-align: center;
}

.about-subtitle {
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    font-size: 1.5rem;
    max-width: 800px;
    margin: 1rem auto 0;
}

.ceo-section {
    background: white;
}

.ceo-content {
    display: flex;
    gap: 4rem;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.ceo-image {
    flex: 1;
    max-width: 400px;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.ceo-text {
    flex: 1;
}

.ceo-quote {
    font-size: 1.25rem;
    font-style: italic;
    color: var(--text-muted);
    margin: 1.5rem 0;
    line-height: 1.8;
    border-left: 4px solid var(--primary);
    padding-left: 1.5rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    text-align: center;
}

.stat-card {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

/* --- CONTACT PAGE STYLES --- */
.contact-hero {
    background-color: var(--primary);
    padding: 6rem 1rem 4rem;
    text-align: center;
    color: white;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.contact-form-container {
    background: white;
    padding: 3rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-width: 800px;
    margin: -3rem auto 0;
    position: relative;
    z-index: 10;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--secondary);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    border: 2px solid #E5E7EB;
    border-radius: var(--radius-sm);
    font-family: inherit;
    transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-light);
}

.office-card {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    height: 100%;
}


/* Footer */
.footer {
    background-color: #154D31;
    /* Deep Green */
    color: #fff;
    padding: 5rem 0 2rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

.footer-brand-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    /* Let pills handle their own margin-bottom, or set a gap here */
}

.footer-col h3 {
    color: white;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.025em;
}

.footer-pill {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
    background-color: #10B981;
    /* Brand Primary Green */
    color: white;
    padding: 0.875rem 1.5rem;
    border-radius: 9999px;
    margin-bottom: 1rem;
    font-weight: 600;
    width: fit-content;
    transition: var(--transition);
    text-decoration: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.footer-pill:hover {
    background-color: #059669;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    color: white;
}

.footer-pill svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.social-links {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    /* Align right as per plan */
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    color: white;
}

.social-link:hover {
    background: var(--primary);
    transform: translateY(-3px);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-links ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.9);
    transition: var(--transition);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-links a:hover {
    color: white;
    padding-left: 5px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Animations */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-up {
    animation: fadeUp 0.8s ease-out forwards;
    opacity: 0;
    /* JS will trigger this, or we rely on animation-fill-mode */
}

/* --- LEGAL PAGE STYLES --- */
.legal-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/static/images/checklist.jpg') center/cover fixed;
    position: relative;
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.legal-hero h1 {
    color: white;
    font-size: 3rem;
    text-align: center;
    font-weight: 700;
}

/* Media Queries for Responsiveness */
@media (max-width: 1024px) {
    :root {
        --container-width: 90%;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .hero-modern-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-modern-content {
        text-align: center;
        margin-bottom: 3rem;
    }

    .hero-modern-text {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    /* On mobile, usually show text then image, or image then text.
       Text first is better for SEO and context. */

    .hero-modern-image-wrapper {
        aspect-ratio: 16/9;
        /* Wider on mobile */
    }
}

@media (max-width: 1024px) {
    .hamburger {
        display: flex;
    }

    /* Redefine nav-items as the mobile menu drawer */
    .nav-items {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        background: white;
        padding: 2rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        transform: translateY(-150%);
        transition: transform 0.3s ease-in-out;
        z-index: 999;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        box-shadow: var(--shadow-lg);
        max-height: calc(100vh - var(--nav-height));
        overflow-y: auto;
    }

    /* When body has class mobile-menu-active (toggled by JS), show the drawer */
    body.mobile-menu-active .nav-items {
        transform: translateY(0%);
    }

    /* Ensure children are visible and stacked */
    .nav-menu {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        /* Align left */
        gap: 1.5rem;
        width: 100%;
    }

    .nav-actions {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 1rem;
        align-items: flex-start;
    }

    .nav-actions .btn {
        width: 100%;
    }

    .nav-item {
        width: 100%;
    }

    /* Mobile Dropdown styles */
    .dropdown-menu,
    .dropdown:hover .dropdown-menu {
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        padding-left: 1rem;
        display: none;
        transition: none;
        opacity: 1;
        visibility: visible;
        background: #f9fafb;
        width: 100%;
        min-width: 0;
    }

    /* We need a class to show dropdown on click in mobile, usually toggled by JS */
    .dropdown.active .dropdown-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Make arrows clearer */
    .dropdown-toggle::after {
        display: none;
        /* Hide hover underline on toggle if desired, or keep it */
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .eco-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .eco-image {
        order: -1;
    }

    .ceo-content {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-bottom {
        flex-direction: column-reverse;
        gap: 1.5rem;
        text-align: center;
    }

    .social-links {
        justify-content: center;
    }
}