:root {
    --green: #59b83d;
    --green-dark: #277943;
    --green-deep: #164f35;
    --lime: #79c957;
    --ink: #17241e;
    --muted: #66746d;
    --line: #e4ebe6;
    --soft: #f6f9f6;
    --shadow: 0 18px 50px rgba(31, 79, 53, .09)
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000
}

.icon-row {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 16px;
    align-items: center
}

.contact-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid #dbe8de;
    border-radius: 50%;
    background: #f1f8f1;
    color: var(--green-dark);
    font-size: 20px;
    line-height: 1
}

.advantage-grid .adv-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid #bcd6c2;
    border-radius: 50%;
    background: rgba(255, 255, 255, .6);
    color: var(--green-dark);
    font-size: 18px
}

.contact-form .btn span {
    font-size: 17px;
    margin-right: 7px
}

.main-nav a,
.btn,
.nav-toggle {
    transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out
}

@media(prefers-reduced-motion:no-preference) {

    .btn:active,
    .nav-toggle:active {
        transform: scale(.96);
        transition: transform 150ms ease-out
    }
}

.utility {
    background: #eff7ef;
    color: #456152;
    border-bottom: 1px solid #e1ece3
}

.utility a {
    color: #277943
}

.site-header {
    box-shadow: 0 4px 24px rgba(22, 79, 53, .04)
}

.nav-wrap {
    height: 82px
}

.brand {
    gap: 10px
}

.brand-logo {
    width: 48px;
    height: 48px;
    object-fit: contain
}

.brand strong {
    font-size: 18px
}

.brand small {
    color: #87928b;
    letter-spacing: .14em
}

.hero-v2 {
    min-height: 620px;
    color: var(--ink);
    background: #f3f7f2 url('/static/images/hero-identity-v2.webp') center/cover no-repeat
}

.hero-v2:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(249, 251, 248, .98) 0%, rgba(249, 251, 248, .93) 33%, rgba(249, 251, 248, .5) 56%, rgba(249, 251, 248, .04) 76%)
}

.hero-v2 .hero-inner {
    display: block;
    min-height: 620px
}

.hero-v2 .hero-copy {
    max-width: 630px;
    padding: 105px 0 80px
}

.hero-v2 .eyebrow {
    color: var(--green-dark)
}

.hero-v2 h1 {
    font-size: 58px;
    color: var(--ink);
    letter-spacing: -.04em
}

.hero-v2 h1 em {
    color: var(--green)
}

.hero-v2 .hero-copy>p {
    max-width: 590px;
    color: #15201a;
    font-size: 17px
}

.hero-v2 .btn-ghost {
    border-color: #9ab7a4;
    color: var(--green-deep);
    background: rgba(255, 255, 255, .55)
}

.hero-v2 .btn-ghost:hover {
    background: #fff
}

.hero-v2 .hero-badges {
    color: #51645a
}

.hero-v2 .hero-badges span:before {
    color: var(--green)
}

.trust-strip {
    box-shadow: none
}

.trust-grid strong {
    color: var(--green-dark)
}

.section {
    padding: 90px 0
}

.section-head {
    margin-bottom: 40px
}

.section-head h2,
.about-grid h2,
.contact-grid h2 {
    letter-spacing: -.025em
}

.product-grid {
    gap: 26px
}

.product-card {
    border-color: #e6ece8
}

.product-card:hover {
    transform: translateY(-4px)
}

.product-art.image-art {
    height: 225px;
    background: #f7faf7
}

.product-art.image-art:after {
    display: none
}

.product-art.image-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.product-art.image-art>span {
    z-index: 2;
    background: rgba(255, 255, 255, .88);
    padding: 5px 9px;
    color: #356746
}

.card-body {
    padding: 25px
}

.section-dark {
    background: #edf6ee;
    color: var(--ink)
}

.section-dark:before {
    border-color: rgba(39, 121, 67, .08);
    box-shadow: 0 0 0 80px rgba(39, 121, 67, .02), 0 0 0 160px rgba(39, 121, 67, .02)
}

.section-head.light p {
    color: var(--muted)
}

.advantage-grid {
    border-color: #cedfd2
}

.advantage-grid article {
    min-height: 240px;
    border-color: #cedfd2;
    background: rgba(255, 255, 255, .35)
}

.advantage-grid article>span {
    color: var(--green-dark)
}

.advantage-grid h3 {
    margin-top: 38px
}

.advantage-grid p {
    color: var(--muted)
}

.cases-section {
    background: #fff
}

.case-grid {
    gap: 24px
}

.case-card {
    grid-template-columns: 210px 1fr;
    padding: 0;
    overflow: hidden;
    border-color: #e4ebe6;
    align-items: stretch
}

.case-thumb {
    height: 100%;
    min-height: 210px;
    overflow: hidden;
    background: #eef4ee
}

.case-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .4s
}

.case-card:hover .case-thumb img {
    transform: scale(1.035)
}

.case-card>div:last-child {
    padding: 28px 28px 26px
}

.case-card h3 {
    font-size: 20px
}

.cta {
    background: #5bb63d
}

.cta-inner {
    min-height: 260px
}

.site-footer {
    background: #123d2a
}

.page-hero {
    padding: 82px 0;
    background: #eff6ef;
    color: var(--ink)
}

.page-hero:after {
    border-color: rgba(39, 121, 67, .09);
    box-shadow: 0 0 0 70px rgba(39, 121, 67, .025), 0 0 0 140px rgba(39, 121, 67, .025)
}

.page-hero p {
    color: var(--muted)
}

.filter-bar a.active,
.filter-bar a:hover {
    background: var(--green-dark)
}

.detail-hero {
    background: #f3f7f3
}

.detail-art.image-detail {
    background: #eef4ee
}

.detail-art.image-detail:before {
    display: none
}

.detail-art.image-detail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.detail-art.image-detail>span {
    z-index: 2;
    background: rgba(255, 255, 255, .9);
    color: var(--green-dark);
    padding: 6px 10px;
    top: 24px;
    left: 24px
}

.project-panel.case-project {
    min-height: 430px;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.project-panel.case-project .panel-line {
    margin: 20px 0
}

.brand-light .brand-logo {
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, .2))
}

@media(max-width:900px) {
    .hero-v2 {
        background-position: 62% center
    }

    .hero-v2:before {
        background: linear-gradient(90deg, rgba(249, 251, 248, .97) 0%, rgba(249, 251, 248, .9) 60%, rgba(249, 251, 248, .25) 100%)
    }

    .hero-v2 .hero-inner {
        min-height: 590px
    }

    .hero-v2 .hero-copy {
        padding-top: 90px
    }

    .case-card {
        grid-template-columns: 190px 1fr
    }
}

@media(max-width:560px) {
    .nav-wrap {
        height: 70px
    }

    .brand-logo {
        width: 42px;
        height: 42px
    }

    .hero-v2 {
        min-height: 620px;
        background-position: 66% center
    }

    .hero-v2:before {
        background: linear-gradient(90deg, rgba(249, 251, 248, .98), rgba(249, 251, 248, .85))
    }

    .hero-v2 .hero-inner {
        min-height: 620px
    }

    .hero-v2 .hero-copy {
        padding: 72px 0 55px
    }

    .hero-v2 h1 {
        font-size: 38px
    }

    .hero-v2 .hero-copy>p {
        font-size: 15px
    }

    .hero-v2 .hero-badges {
        margin-top: 28px
    }

    .case-card {
        grid-template-columns: 1fr
    }

    .case-thumb {
        height: 200px;
        min-height: 0
    }

    .case-card>div:last-child {
        padding: 22px
    }

    .section {
        padding: 64px 0
    }
}