/* Logo supplied by COOPERAR. Geometric companion typeface, hosted locally. */
@font-face {
    font-family: Montserrat;
    src: url("fonts/Montserrat-Variable.ef2306ad45ba.ttf") format('truetype');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap
}

:root {
    --ink: #2c391f;
    --green: #587123;
    --dark: #35451d;
    --deep: #35451d;
    --lime: #d8eaac;
    --brand-lime: #93c127;
    --brand-olive: #617a29;
    --muted: #58634c;
    --pale: #f2f5e9;
    --paper: #f7f8f1;
    --line: #dfe5d1
}

body {
    font-family: Montserrat, "Century Gothic", system-ui, sans-serif;
    background: #fff;
    color: var(--ink)
}

.brand {
    display: block;
    line-height: 0;
    flex-shrink: 0
}

.brand img {
    display: block;
    width: 330px;
    height: auto;
    max-width: 100%
}

.site-header {
    padding-block: 0
}

.brand small,
.brand-mark {
    display: none
}

.hero h1 {
    font-weight: 750;
    letter-spacing: -.065em
}

.hero h1 em {
    font-family: inherit;
    font-weight: 750;
    font-style: normal;
    color: var(--brand-olive)
}

.hero-art {
    background: #e9efda
}

.orbit {
    border-color: #a3b877
}

.orbit:after {
    border-color: #d1dfa9
}

.art-word {
    font-family: Montserrat, system-ui, sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -.07em;
    font-size: 5.5rem;
    transform: rotate(-8deg)
}

.art-card.two {
    background: var(--dark)
}

.renewal {
    background: #f1f5e6
}

.payment-card {
    background: #f2f6e8;
    border-color: #b7c894
}

.button {
    font-weight: 650
}

.button.light {
    background: var(--brand-lime);
    border-color: var(--brand-lime);
    color: #243210
}

.button.light:hover {
    background: #b5d567
}

.button.outline:hover {
    background: var(--pale)
}

.floating-help {
    background: var(--dark)
}

.desktop-nav a {
    font-size: .77rem
}

.utility {
    background: var(--dark)
}

.hero-art .art-caption {
    color: var(--dark) !important
}

.art-footer {
    color: var(--dark) !important
}

.site-footer .footer-logo {
    width: 300px;
    max-width: 100%;
    height: auto;
    margin: -20px 0 0 -22px
}

.sidebar .brand {
    background: white;
    border-radius: 8px;
    padding: 0
}

.sidebar .brand img {
    width: 100%
}

.guest-header .brand img {
    width: 310px
}

.seal {
    background: var(--pale);
    color: var(--green)
}

@media(max-width:1050px) {
    .art-word {
        font-size: 4.5rem
    }
}

@media(max-width:650px) {
    .brand img {
        width: 216px
    }

    .site-header {
        width: calc(100% - 24px);
        gap: 0
    }

    .site-header .button.small {
        font-size: .66rem;
        padding: 9px 8px
    }

    .hero h1 {
        font-size: 4.45rem
    }

    .hero-art {
        min-height: 380px
    }

    .art-word {
        font-size: 3.8rem;
        top: 164px
    }

    .art-card.one {
        top: 54px
    }

    .art-card.two {
        bottom: 30px
    }

    .guest-header .brand img {
        width: 260px
    }

    .site-footer .footer-logo {
        width: 275px
    }

    .utility {
        font-size: .6rem
    }

    .hero .actions .button {
        font-size: .82rem;
        padding: 14px 15px
    }
}

@media(max-width:650px) {
    .site-header {
        flex-wrap: wrap
    }

    .site-header .brand img {
        width: clamp(160px, 55vw, 216px)
    }
}