﻿.container {
    width: min(var(--max-width), calc(100% - 40px));
    margin-inline: auto;
}
.split {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 42px;
    align-items: center;
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.card {
    background: var(--white);
    border: 1px solid rgba(4, 58, 13, 0.08);
    box-shadow: 0 10px 24px rgba(4, 58, 13, 0.06);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

    .card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px rgba(4, 58, 13, 0.12);
        border-color: rgba(4, 58, 13, 0.16);
    }

    .card h3,
    .card h4 {
        margin-bottom: 10px;
        font-size: 1.35rem;
    }

    .card p {
        margin-bottom: 16px;
        color: var(--muted);
    }

    .card a {
        color: var(--brand-green);
        font-weight: 800;
    }

        .card a:hover {
            color: var(--brand-orange);
            text-decoration: underline;
        }

    .card:hover .card-image img {
        transform: scale(1.03);
    }

.card-image {
    margin: -32px -32px 24px;
    overflow: hidden;
    border-radius: 24px 24px 0 0;
}

    .card-image img {
        width: 100%;
        height: 240px;
        object-fit: cover;
        transition: transform var(--transition-slow), filter var(--transition-slow);
    }

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-xl);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
}

.align-right {
    text-align: right;
}



.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo-image {
    height: 52px;
    width: auto;
    display: block;
}

.header-inner {
    gap: 2rem;
}

@media (max-width: 900px) {
    .logo-image {
        height: 44px;
    }
}