:root {
    --color-green-dark: #2F4F4F;
    /* Dark slate green */
    --color-green-light: #D4E157;
    /* Lime/Yellow green */
    --color-green-mid: #8BC34A;
    --color-cream: #F9F9F9;
    /* Off-white background */
    --color-text-main: #1a1a1a;
    --color-white: #ffffff;

    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;

    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;

    --container-width: 1200px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    color: var(--color-text-main);
    background-color: var(--color-white);
    line-height: 1.5;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
    text-wrap: balance;
    /* Improve heading wrapping */
    word-wrap: break-word;
    /* Ensure long words break */
    hyphens: auto;
    /* Enable hyphenation */
}

h1 {
    font-size: 2.25rem;
    word-break: break-word;
}

@media (min-width: 768px) {
    h1 {
        font-size: 3rem;
    }
}

h2 {
    font-size: 2rem;
    /* Reduced base size for mobile */
}

@media (min-width: 400px) {
    h2 {
        font-size: 2.5rem;
        /* Restoration for larger mobile/desktop */
    }
}

h3 {
    font-size: 1.5rem;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

.container {
    width: 100%;
    /* Full width for better centering control */
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    /* Symmetric padding */
}

.section-label {
    display: block;
    font-size: 1rem;
    /* Slightly larger for Playfair */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-md);
    color: var(--color-green-dark);
    font-family: var(--font-heading);
    /* Playfair Display */
}

.team-description {
    max-width: 800px;
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
    color: #555;
}

.placeholder-image {
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-weight: 600;
    width: 100%;
    object-fit: cover;
}

/* Buttons */
.btn-primary {
    display: inline-block;
    background-color: var(--color-green-light);
    color: var(--color-green-dark);
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    /* Pill shape */
    font-weight: 600;
    transition: transform 0.2s;
}

.btn-primary:hover {
    transform: scale(1.05);
}

.btn-outline {
    display: inline-block;
    border: 1px solid var(--color-green-dark);
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    font-size: 0.9rem;
    margin-top: var(--spacing-sm);
}

.btn-pill {
    background-color: var(--color-green-light);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
    margin-top: var(--spacing-sm);
}

/* Header */
.site-header {
    padding: 20px 0;
    position: sticky;
    top: 0;
    background: var(--color-white);
    z-index: 100;
    transition: background 0.3s ease;
}

.site-header.header-transparent {
    position: absolute;
    background: transparent;
    border-bottom: none;
    width: 100%;
    left: 0;
}

.site-header.header-transparent .logo-img {
    filter: none;
}

.site-header.header-transparent .mobile-menu-toggle {
    color: var(--color-white);
}


.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    /* Force right alignment */
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    /* Context for absolute menu */
}

.logo-img {
    height: 32px;
    /* Adjusted for better visibility */
    width: auto;
    /* Maintain aspect ratio */
    display: block;
    filter: brightness(0);
    /* Make white logo black for default header */
}

@media (min-width: 768px) {
    .logo-img {
        height: auto;
        width: 150px;
        max-width: none;
        /* Remove width constraint */
    }
}

.main-nav ul {
    display: none;
    /* Mobile hidden */
}

.mobile-menu-toggle {
    background: none;
    border: none;
    font-size: 2rem;
    /* Matched to logo height approx 32px */
    cursor: pointer;
    z-index: 101;
    /* Ensure above menu */
    position: relative;
    color: #000;
    padding: 0;
    line-height: 1;
    display: flex;
    /* Fix alignment */
    align-items: center;
    transform: translateY(-8px);
    /* Move up to align with logo */
}

.lang-switch {
    display: none;
}

/* Mobile Menu Styles */
.main-nav {
    position: static;
    /* Allow ul to position relative to header-inner */
}

.main-nav ul {
    display: none;
    /* Mobile hidden by default */
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: var(--spacing-sm);
    /* Align to right edge of container */
    background-color: var(--color-white);
    width: 200px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: var(--spacing-sm);
    border-radius: 8px;
    z-index: 100;
}

.main-nav.active ul {
    display: flex;
}

.main-nav ul li {
    margin-bottom: 0.5rem;
}

.main-nav ul li:last-child {
    margin-bottom: 0;
}

/* Hero */
/* Hero */
/* Hero */
/* Hero */
.hero {
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
    /* Full screen hero */
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('assets/headerfoto.jpg');
    background-size: cover;
    background-position: center;
    color: var(--color-white);
}

.hero-content {
    text-align: center;
    margin-bottom: var(--spacing-md);
    max-width: 800px;
    z-index: 2;
    padding-top: 60px;
    /* Space for the absolute header */
}

.hero h1 {
    color: var(--color-white);
    font-size: 2.5rem;
    /* Ensure readable on mobile */
    margin-bottom: 1rem;
}

.hero p {
    color: var(--color-white);
    font-size: 1.25rem;
    font-weight: 300;
}

@media (min-width: 768px) {
    .hero h1 {
        font-size: 3.5rem;
    }
}

/* Removed separate hero-img as it is now background */

/* Organic Dividers */
/* Simulating the jagged edge with a clip-path or pseudo-element would be ideal. 
   Here I'll use a clip-path on the section itself or a separator div. */
.organic-divider-bottom {
    height: 50px;
    background-color: var(--color-green-light);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
    /* Simple slope for now, complex jagged needs SVG */
    margin-top: -50px;
    position: relative;
    z-index: 10;
}

/* Mission Section */
.mission {
    background-color: var(--color-green-light);
    padding: var(--spacing-xl) 0;
    text-align: center;
    position: relative;
    /* Create jagged edges */
    clip-path: polygon(0% 5%, 5% 0%, 10% 5%, 15% 0%, 20% 5%, 25% 0%, 30% 5%, 35% 0%, 40% 5%, 45% 0%, 50% 5%, 55% 0%, 60% 5%, 65% 0%, 70% 5%, 75% 0%, 80% 5%, 85% 0%, 90% 5%, 95% 0%, 100% 5%,
            100% 95%, 95% 100%, 90% 95%, 85% 100%, 80% 95%, 75% 100%, 70% 95%, 65% 100%, 60% 95%, 55% 100%, 50% 95%, 45% 100%, 40% 95%, 35% 100%, 30% 95%, 25% 100%, 20% 95%, 15% 100%, 10% 95%, 5% 100%, 0% 95%);
    margin: var(--spacing-lg) 0;
}

.mission h2 {
    max-width: 800px;
    margin: 0 auto var(--spacing-md);
}

.mission p {
    max-width: 600px;
    margin: 0 auto;
}

/* Pillars */
.pillars {
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.pillars-grid {
    display: grid;
    gap: var(--spacing-md);
}

.pillar-card {
    background: var(--color-cream);
    padding: var(--spacing-md);
    border-radius: 8px;
    text-align: center;
}

.pillar-icon {
    height: 100px;
    width: auto;
    object-fit: contain;
    margin-bottom: var(--spacing-sm);
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Farmers */
.farmers {
    margin-bottom: var(--spacing-xl);
}

.farmers-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--spacing-md);
}

.farmers-grid {
    display: flex;
    overflow-x: auto;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    /* Space for scrollbar */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
}

.farmers-grid::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari/Webkit */
}

.farmer-card {
    flex: 0 0 260px;
    /* Fixed width for mobile cards */
    scroll-snap-align: start;
}

.farmer-card h4 {
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
    word-wrap: break-word;
}

.farmer-card p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.3;
}

.farmer-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: var(--spacing-sm);
}

/* Research */
.research-text .btn-primary {
    margin-top: 1.5rem;
}

.research-text p {
    margin-bottom: 1.5rem;
}

.research {
    margin-bottom: var(--spacing-xl);
}

.research-content {
    display: grid;
    gap: var(--spacing-md);
}

.research-img {
    width: 100%;
    height: 350px;
    /* Larger height */
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: var(--spacing-sm);
}

/* Stories */
.stories {
    margin-bottom: var(--spacing-xl);
}

.stories-grid {
    display: grid;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.story-img {
    width: 100%;
    height: 250px;
    /* Fixed height for uniformity */
    object-fit: cover;
    /* Crop to fill */
    border-radius: 12px;
    margin-bottom: var(--spacing-sm);
}

/* Support Banner */
.support-banner {
    background-color: var(--color-green-light);
    padding: var(--spacing-xl) 0;
    text-align: center;
    clip-path: polygon(0% 10%, 10% 0%, 20% 10%, 30% 0%, 40% 10%, 50% 0%, 60% 10%, 70% 0%, 80% 10%, 90% 0%, 100% 10%,
            100% 90%, 90% 100%, 80% 90%, 70% 100%, 60% 90%, 50% 100%, 40% 90%, 30% 100%, 20% 90%, 10% 100%, 0% 90%);
    margin-bottom: var(--spacing-xl);
}

.support-banner h2 {
    font-size: 2.5rem;
    color: var(--color-green-dark);
}

.support-banner .container {
    position: relative;
    z-index: 20;
    /* Ensure text is above dividers */
}

/* CTA Section */
.cta-section {
    margin-bottom: var(--spacing-xl);
    background-color: var(--color-cream);
    padding: var(--spacing-lg);
    border-radius: 20px;
}

.cta-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 12px;
    margin-top: var(--spacing-md);
}

/* Footer */
.site-footer {
    background-color: var(--color-green-dark);
    color: var(--color-white);
    padding: 40px 0;
    /* Increased padding as requested */
}

.site-footer .logo-img {
    filter: brightness(0) invert(1);
    /* Make logo white */
    margin-left: 0;
    /* Ensure left alignment */
}

.footer-links-grid {
    display: grid;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.footer-col h4 {
    font-size: 1rem;
    margin-bottom: var(--spacing-sm);
    color: var(--color-green-light);
}

.footer-col a {
    color: #ccc;
    font-size: 0.9rem;
}

.footer-col a:hover {
    color: var(--color-white);
}

/* Desktop Media Queries */
@media (min-width: 768px) {
    /* .main-nav ul and .mobile-menu-toggle styles removed to keep hamburger menu on desktop */

    .pillars-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .site-header.header-transparent .main-nav ul li a {
        color: var(--color-text-main);
        font-weight: 500;
    }

    .site-header.header-transparent .main-nav ul li a:hover {
        opacity: 0.8;
    }

    .farmers-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-sm);
        /* Tighter gap */
        overflow-x: visible;
        /* Disable scroll on desktop */
    }

    .farmer-card {
        flex: unset;
        /* Reset flex behavior */
        width: auto;
    }

    .stories-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .research-content {
        grid-template-columns: 0.8fr 1.2fr;
        /* Wider column for images */
    }

    .cta-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: var(--spacing-lg);
    }

    .cta-content p {
        margin-bottom: var(--spacing-md);
        /* Add spacing between paragraphs */
    }

    .cta-img {
        margin-top: 0;
        height: 100%;
    }

    .footer-links-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* FAQ Section */
.faq-section {
    margin-bottom: var(--spacing-xl);
}

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

details {
    background-color: #fcfdf5;
    /* Light cream */
    border-radius: 50px;
    margin-bottom: 1rem;
    padding: 1.5rem 2rem;
    border: none;
    transition: all 0.3s ease;
}

details[open] {
    border-radius: 30px;
    /* Slightly less rounded when open to accommodate content? Or keep 50px */
    /* Let's keep 30px or 40px for better look with text block, or just 50px if it fits. 
       The image shows the closed state is very round (pill). 
       The open state image shows rounded corners but maybe less extreme? 
       Actually, looking at the open image, it looks like a card with rounded corners. 
       Let's stick to a consistent radius or slightly adjust. 
       Let's try 30px for open to give more space for text corners. */
    border-radius: 30px;
}

summary {
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    /* Match design */
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.4;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text-main);
    padding-right: 0.5rem;
    /* Space for icon */
}

summary::-webkit-details-marker {
    display: none;
}

summary .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #dcefa0;
    /* Lime green */
    flex-shrink: 0;
    margin-left: 1rem;
    font-size: 0;
    /* Hide text content */
    transition: background-color 0.3s ease;
}

summary .icon::after {
    content: "+";
    font-size: 1.5rem;
    color: #1a4a3b;
    /* Dark green text for contrast? Or black. Image shows dark. */
    font-weight: 400;
    line-height: 1;
}

details[open] summary .icon {
    background-color: #1a4a3b;
    /* Dark green */
    transform: none;
    /* No rotation needed as we swap content */
}

details[open] summary .icon::after {
    content: "-";
    color: #fff;
    /* White text */
    position: relative;
    top: -2px;
    /* Visual adjustment */
}

.faq-content {
    padding-top: 1rem;
    color: #555;
    line-height: 1.6;
    font-size: 1rem;
    max-width: 95%;
}

/* Contact Form */
.contact-section {
    margin-bottom: var(--spacing-xl);
    /* Inherit container styles for alignment */
}

.contact-header,
.contact-form {
    max-width: 800px;
    /* Limit width of content but keep left aligned in container */
}

.contact-header {
    margin-bottom: var(--spacing-lg);
}

.contact-header h2 {
    font-size: 2.5rem;
    color: var(--color-green-dark);
    margin-bottom: 0.5rem;
}

.contact-header p {
    font-weight: 600;
    font-size: 1.1rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    color: var(--color-text-main);
}

.form-group input,
.form-group textarea {
    border: none;
    border-bottom: 1px solid #333;
    padding: 0.5rem 0;
    font-family: var(--font-body);
    font-size: 1rem;
    background: transparent;
    outline: none;
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
    border-bottom: 2px solid var(--color-green-dark);
}

.btn-outline-dark {
    align-self: flex-start;
    background: transparent;
    border: 1px solid #333;
    color: #333;
    padding: 0.8rem 2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: var(--spacing-sm);
    font-size: 0.9rem;
}

.btn-outline-dark:hover {
    background: #333;
    color: #fff;
}

/* Reasons Page */
.reasons-hero {
    text-align: center;
    padding: var(--spacing-lg) 0;
    max-width: 800px;
}

.reasons-hero h1 {
    font-size: 3rem;
    color: var(--color-green-dark);
    margin-bottom: var(--spacing-md);
}

.reasons-hero .intro-text {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #555;
}

.reasons-grid {
    display: grid;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    max-width: 800px;
    /* Keep it readable width */
}

.reason-card {
    background: var(--color-white);
    padding: var(--spacing-md);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
}

.reason-card h3 {
    color: var(--color-green-dark);
    margin-bottom: var(--spacing-sm);
    font-size: 1.5rem;
}

.reason-card p {
    margin-bottom: 1rem;
    color: #444;
    line-height: 1.6;
}

.reason-card p:last-child {
    margin-bottom: 0;
}

.reason-card.highlight {
    background-color: var(--color-green-light);
    /* Light lime/yellow green */
    border: none;
}

.reason-card.highlight h3 {
    color: var(--color-green-dark);
}


@media (max-width: 768px) {
    .cta-section {
        padding: 15px;
        /* Reduced padding for mobile */
    }

    .cta-content p {
        margin-bottom: 1.5rem;
    }

    .cta-hidden-content {
        display: none;
    }

    .read-more-trigger {
        display: inline-block;
        text-decoration: underline;
        cursor: pointer;
        color: var(--color-text-main);
        font-weight: 600;
        margin-top: 0.5rem;
        margin-bottom: 2rem;
    }
}

@media (min-width: 769px) {
    .read-more-trigger {
        display: none;
    }
}