/* Synerra: reusable component styles. Utility classes (Tailwind) stay in index.html.
   Brand colors: forest #143324 | slate #2C3E50 | emerald #3C7A5A | mint #A8D5BA
                 alabaster #F7F9F8 | ice #EAF1ED | muted #6C7A89 | line #D5E0DA
   If you change a color in js/tailwind-config.js, update the matching hex here. */

.wrap{max-width:72rem;margin:0 auto;padding:0 1.5rem}
.sec{padding:5rem 0}
@media(min-width:768px){.sec{padding:7rem 0}}

.eyebrow{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:#3C7A5A;margin-bottom:1rem}
.h2{font-size:1.875rem;line-height:1.2;font-weight:600;letter-spacing:-.025em;color:#143324;max-width:24ch;margin-bottom:1.25rem}
@media(min-width:768px){.h2{font-size:2.25rem}}
.h3{font-size:1.125rem;font-weight:600;color:#143324;margin-bottom:.5rem}
.lead{font-size:1.125rem;max-width:62ch}

/* Buttons */
.btn{display:inline-block;padding:.875rem 1.5rem;border-radius:.25rem;font-weight:600;font-size:.875rem;color:#fff;background:#3C7A5A;border:1.5px solid #3C7A5A;transition:background-color .2s}
.btn:hover{background:#2f6247}
.btn:focus-visible{outline:3px solid #A8D5BA;outline-offset:2px}
.btn-ghost{background:transparent;border-color:#A8D5BA}
.btn-ghost:hover{background:rgba(168,213,186,.15);border-color:#A8D5BA}

/* Cards and icons */
.card{background:#fff;border:1px solid #D5E0DA;border-radius:.375rem;padding:2rem}
.ico{width:2.5rem;height:2.5rem;color:#3C7A5A;margin-bottom:1rem}
.svc li{margin-bottom:.375rem;font-size:.95rem}

/* Navigation */
.navlink{font-size:.875rem;font-weight:500;color:#DCE9E1;text-decoration:none}
.navlink:hover{color:#A8D5BA}

/* Form */
.inp{width:100%;padding:.75rem .875rem;margin-bottom:.25rem;border-radius:.25rem;border:1px solid #A8D5BA;background:#F7F9F8;color:#2C3E50}
.lbl{display:block;font-size:.875rem;font-weight:600;color:#fff;margin-bottom:.375rem}
.err{font-size:.875rem;color:#FFD9D0;min-height:1.5rem}

/* Scroll reveal (toggled by js/main.js) */
.reveal{opacity:0;transform:translateY(.75rem);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}