:root { --green: #84b818; --grey: #6c6c6c; --dark: #33373a; --line: #e4e6df; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    display: flex; flex-direction: column; min-height: 100vh;
    font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif; color: var(--dark); background: #fff;
    line-height: 1.6;
}
header { padding: 2rem 1rem 1.5rem; text-align: center; border-bottom: 3px solid var(--green); }
header img { max-width: min(357px, 80vw); height: auto; }
main { flex: 1; width: 100%; max-width: 44rem; margin: 0 auto; padding: 3rem 1rem; text-align: center; }
main.text { text-align: left; }
h1 { margin: 0 0 1rem; font-size: 1.8rem; font-weight: 600; }
h1 span { color: var(--green); }
h2 { margin: 2rem 0 .5rem; font-size: 1.15rem; }
p { margin: 0 0 1rem; color: var(--grey); }
a { color: var(--green); }
.icon { width: 88px; height: 88px; margin-bottom: 1.5rem; }
.contact { margin-top: 2rem; padding: 1.25rem; background: #f6f7f4; border: 1px solid var(--line); }
.contact strong { color: var(--dark); }
footer { padding: 1rem; text-align: center; font-size: .875rem; color: #c9ccc4; background: var(--dark); }
footer a { color: #e1e3dd; text-decoration: none; margin: 0 .5rem; }
footer a:hover { color: #fff; text-decoration: underline; }