footer {
    --pad-top:229;
    position:relative;
    margin-top:calc(var(--pad-top) / var(--maxWidth) * var(--maxWidthPX));
    background-color: var(--dark-green);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap:var(--col-gap);
    padding: var(--block-padding-y) var(--s10-16) var(--block-padding-y) var(--s10-16);
}
footer .logo-container {
    position:absolute;
    left:50%;
    top:0;
    transform: translateX(-50%);
    width: calc(100vw + 2px);
    margin-top:calc(((var(--pad-top) / var(--maxWidth) * var(--maxWidthPX)) * -1) + 2px);
}
footer .logo-container svg {
    position: absolute;
    width: 100%;
    top:0;
    left:50%;
    transform: translateX(-50%);
    height: auto;
    max-width: var(--maxWidthPX);
}
footer .footer-bg {
    background: var(--dark-green);
    position: absolute;
    top:0;
    left:0;
    width:100vw;
    height: 100%;
    display: none;
}
a.footer-logo {
    --footer-logo-maxWidth: 394;
    --footer-logo-minWidthPX: 200;
    --offset-left:272;
    --offset-top:69;
    position: absolute;
    top:calc(var(--offset-top) / var(--maxWidth) * var(--maxWidthPX));
    left:50%;
    margin-left: calc(((var(--maxWidthPX) / 2) * -1) + calc(var(--offset-left) / var(--maxWidth) * var(--maxWidthPX)));
    z-index: 1;
    max-width: calc(var(--footer-logo-maxWidth) * 1px);
    width:clamp(calc(var(--footer-logo-minWidthPX) * 1px), 
        calc(var(--footer-logo-maxWidth) / var(--maxWidth) * var(--maxWidthPX)), 
        100%);
}

.footer-content-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--col-gap);
    max-width: var(--medWidthPX);
    align-items: flex-start;
    padding: 0 var(--col-gap);
    width: 100%;
    flex-wrap: wrap;
}
.footer-nav, 
.footer-form-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-shrink: 1;
    gap: var(--col-gap);
    align-items: flex-start;
}

.footer-form-container {
    --form-container-min-width: 280;
    --form-container-max-width: 400;
    gap: var(--list-gap);
    flex-direction: column;
    width:clamp(calc(var(--form-container-min-width) * 1px), 
        calc(var(--form-container-max-width) / var(--maxWidth) * 100vw), 
        calc(var(--form-container-max-width) * 1px));
        flex:1 1 auto;
}
.footer-content-container .left,
.footer-content-container .right {
    display: flex;
    flex-direction: row; 
    gap:var(--list-gap-wide);
    flex-wrap: wrap;
    justify-content: center;
}
footer .legals-row {
    border-top:1px solid var(--light-green);
    padding:var(--col-gap) 0 0 0;
}

footer,
footer h4,
.footer-nav a,
footer .legal-links a,
footer .social-nav a {
    font-size: var(--s10-14);
}
footer h4 {
    margin-bottom: var(--list-gap);
    white-space: nowrap;
}
.footer-nav a, 
.footer-nav .nav-col,
.footer-nav .nav-col nav, 
footer .legal-links,
footer .legal-links a,
footer .social-nav,
footer .social-nav a  {
    display: flex;
    flex-direction: column;
    gap: var(--list-gap);
    text-decoration: none;
}
.footer-nav {
    flex: 1 1 auto;
}
.footer-nav .nav-col {
    flex: 1 1 33%;
}
footer .legal-links, footer .social-nav {
    flex-direction: row;
    gap:var(--list-gap-wide);
    flex-wrap: wrap;
    justify-content: center;
}
footer .legal-links a {
    white-space: nowrap;
}
footer .social-nav {
    gap:var(--list-gap);
}
footer .social-nav a svg path {
    color: var(--light-green);
}
footer a:hover {
    text-decoration: underline;
}
footer .social-nav a,
footer .social-nav svg,
footer .social-nav path {
    transform: scale(1);
    filter:drop-shadow(0);
    will-change: transform, color, filter;
    transition: 
        transform var(--anim-duration) var(--anim-easing),
        color var(--anim-duration) var(--anim-easing),
        filter var(--anim-duration) var(--anim-easing);
}
footer .social-nav a:hover {
    transform: scale(1.4);
    filter:drop-shadow(var(--engagement-shadow));
}
footer .social-nav a:hover path {
    color:var(--white);
}

/* form */
.footer-form-container .wpcf7-form input {color:var(--white); background: transparent;}
.footer-form-container .wpcf7-form input:not([type=submit]):not([type=checkbox]):not([type=radio]), .wpcf7-form select, .wpcf7-form textarea { padding:var(--s10-16); border: 1px solid var(--light-green); box-sizing: border-box; font-size: var(--s10-16); border-radius: var(--s1-5); }
.footer-form-container .wpcf7-form :is(input, textarea, select, [type='date'])::placeholder,
.footer-form-container .wpcf7-form :is(select, [type='date']) { color: var(--white); opacity: 0.5; }
.footer-form-container .wpcf7-form label .label {
    position: absolute;
    transform: translateY(calc((100% + 5px) * -1));
    top:0;
    left:0;
    display:none;
}
.footer-form-container .kw-form-wrapper {
    padding-top:var(--list-gap);
}
.footer-form-container form .res-content {
    position: relative;
    border: 0.5px solid var(--light-green);
    border-radius: var(--s5-8);
    padding: var(--s10-16);
    gap: var(--list-gap);
}
/* /form */

/* animations */
[observe-on-scroll] .logo-container {
    transform: translateY(-50%) translateX(-50%);
    will-change: opacity, margin, filter;
    transition: 
        opacity var(--anim-duration) var(--anim-easing),
        filter var(--anim-duration) var(--anim-easing);
    opacity: 1;
    filter: blur(0);
}
[observe-on-scroll] .logo-container a.footer-logo {
    opacity: 0;
    transform: translateY(var(--anim-distance));
    filter: blur(10px);
    will-change: opacity, transform, filter;
    transition: 
        opacity var(--anim-duration) var(--anim-easing),
        transform var(--anim-duration) var(--anim-easing),
        filter var(--anim-duration) var(--anim-easing);
}
.is-visible .logo-container a.footer-logo   {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}
/* /animations */


@media(max-width:1440px){
    footer {
        margin-top:calc(var(--pad-top) / var(--maxWidth) * 100vw);
    }
    footer .logo-container {
        margin-top:calc(((var(--pad-top) / var(--maxWidth) * 100vw) * -1) + 2px);
        transform: translateX(-50vw);
    }
    [observe-on-scroll] .logo-container {
        transform: translateY(var(--anim-distance)) translateX(-50%);
        will-change: transform;
        transition: 
            transform var(--anim-duration) var(--anim-easing);
    }
    footer.is-visible .logo-container {
        transform: translateY(0) translateX(-50%);
    }
    a.footer-logo{
        top:calc(var(--offset-top) / var(--maxWidth) * 100vw);
        width:clamp(calc(var(--footer-logo-minWidthPX) * 1px), 
            calc(var(--footer-logo-maxWidth) / var(--maxWidth) * 100vw), 
            100%);
        margin-left: calc(((100% / 2) * -1) + calc(var(--offset-left) / var(--maxWidth) * 100%));
    }
}
@media(max-width:768px){
    :root {
        --footer-mid-point-offet: 461.13;
        --footer-percentage-current: calc((var(--footer-mid-point-offet) / var(--maxWidth)) * 100);
        --footer-scale: calc((50 / var(--footer-percentage-current)) * 100%);
    }
    footer {
        padding-top:calc(var(--block-padding-y) + 3rem);
    }
    footer .logo-container {
        width: var(--footer-scale);
        left: calc(var(--footer-scale) * 0.5);
    }
    a.footer-logo {
        left:50vw;
        margin-left: 0;
        top:calc(((var(--offset-top) / var(--maxWidth)) * 100vw) * 2);
    }
    [observe-on-scroll] .logo-container a.footer-logo {
        transform: translateY(var(--anim-distance)) translateX(-50%);
    }
    .is-visible .logo-container a.footer-logo   {
        transform: translateY(0) translateX(-50%);
    }
    .footer-content-container{
        justify-content: center;
        padding:0 var(--fluid-0-col-gap-max768);
    }
}
@media(max-width:480px){
    footer {
        padding-top:calc(var(--block-padding-y) + 4rem);
    }
}

@media(max-width:360px){
    .footer-form-container {
        max-width: 100%;
    }
    footer .form-row {
        flex-direction: column;
    }
    footer .wpcf7-form label {
        width: 100%;
    }
}

@media(max-width:320px){
    footer {
        padding-top:calc(var(--block-padding-y) + 5rem);
    }
    
    .footer-nav{
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    .footer-nav .nav-col {
        min-width: 50%;
        align-items: center;
        text-align: center;
    }

}