*{box-sizing:border-box}body{margin:0;background:#f4f7f3;color:#1f2a24;font:18px/1.75 'Nunito Sans',system-ui,sans-serif}
h1,h2,h3,.brand,nav a{font-family:'Lexend',system-ui,sans-serif}
header{background:#0f3d2e;padding:20px;text-align:center;border-bottom:4px solid #c9a227}header .brand{font-size:28px;font-weight:600;color:#e3c35a;text-decoration:none;letter-spacing:.5px}
nav{margin-top:10px}nav a{color:#e8f0ea;text-decoration:none;margin:0 12px;font-size:15px;font-weight:500}nav a.on,nav a:hover{color:#e3c35a;border-bottom:2px solid #e3c35a}
main{max-width:780px;margin:0 auto;padding:36px 20px 64px}h1{font-size:38px;line-height:1.2;color:#0f3d2e;margin:.2em 0 .5em;font-weight:600}h2{font-size:26px;color:#135c43;margin-top:1.6em;font-weight:600}h3{font-size:20px;color:#0f3d2e;font-weight:500}
.hero{text-align:center}.hero .lead{max-width:640px;margin:0 auto}
.lead{font-size:20px;color:#4a5a52}figure{margin:28px 0}figure img{width:100%;height:auto;max-height:560px;object-fit:contain;background:#e4ece6;border-radius:10px;display:block;border:1px solid #d6c27a}figcaption{font-size:13px;line-height:1.5;color:#6b7a72;margin-top:8px;text-align:center}
main a{color:#0d6b4b;text-decoration:underline;text-decoration-color:#c9a227;text-decoration-thickness:2px;text-underline-offset:3px;font-weight:700}main a.kw{color:#0b5e40;background:#fbf3d6;padding:0 3px;border-radius:3px}
.card{display:flex;gap:18px;background:#fff;border-radius:10px;padding:16px;margin:22px 0;border-left:5px solid #c9a227;box-shadow:0 2px 10px rgba(15,61,46,.08)}.card img{flex:0 0 160px;width:160px;height:160px;object-fit:cover;border-radius:8px}.card h2{font-size:21px;margin:0 0 6px}.card p{margin:0 0 8px;font-size:16px}
form label{display:block;font-size:15px;margin:14px 0 4px;font-weight:600}form input,form textarea{width:100%;padding:11px;border:1px solid #9fb8aa;border-radius:6px;font:16px 'Nunito Sans',sans-serif;background:#fff}form button{margin-top:16px;background:#0f3d2e;color:#e3c35a;border:0;padding:12px 30px;border-radius:6px;font:600 16px 'Lexend',sans-serif;cursor:pointer}
footer{background:#0b2e22;color:#b9cbbf;text-align:center;padding:24px;font-size:14px;border-top:3px solid #c9a227}@media(max-width:600px){h1{font-size:29px}h2{font-size:23px}.card{flex-direction:column}.card img{width:100%;height:200px;flex-basis:auto}nav a{margin:0 6px;font-size:13px}}
header .brand{display:inline-flex;align-items:center;gap:12px}
header .brand .logo-mark{transition:transform .6s ease}
header .brand:hover .logo-mark{transform:rotate(-8deg) scale(1.05)}
nav a{position:relative;padding-bottom:3px;border-bottom:2px solid transparent;transition:color .3s ease,border-color .3s ease}
.card,form button{transition:transform .3s ease,box-shadow .3s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(15,61,46,.18)}
form button:hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(15,61,46,.3)}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.js h1{animation:heroIn .9s ease-out both}
.js header .brand{animation:heroIn .7s ease-out both}
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.js h1,.js header .brand{animation:none}.js .reveal{opacity:1;transform:none;transition:none}.card,form button,header .brand .logo-mark,nav a{transition:none}.card:hover,form button:hover{transform:none}}