:root{ --se:#009639; --se-dark:#007a2e; --text:#0b1320; --muted:#4b5563; --bg:#ffffff; --section:#f6f7f9; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Noto Sans",sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--se);text-decoration:none} a:hover{color:var(--se-dark)}
.header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.brand{display:flex;gap:14px;align-items:center}
.brand img{height:120px;width:auto}
.brand .name{font-size:22px;font-weight:800}
.brand .tag{font-size:12px;color:#25603a;background:#e6f5ec;border:1px solid #bfe9d0;padding:4px 8px;border-radius:999px}
.nav a{margin-left:18px;color:#111827}
.nav .cta{background:var(--se);color:#fff;padding:10px 14px;border-radius:10px}
.nav .cta:hover{background:var(--se-dark)}
.hero{position:relative;height:45vh;min-height:300px;overflow:hidden;display:grid}
.slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .6s ease}
.slide.active{opacity:1}
.slide img{width:100%;height:100%;object-fit:contain;background:#000;border-radius:0}
.caption{position:absolute;left:4%;bottom:16px;background:rgba(0,0,0,.48);color:#fff;padding:8px 12px;border-radius:10px;font-weight:600}
.section{max-width:1100px;margin:36px auto;padding:0 20px}
.gray{background:var(--section);border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;padding:36px 0}
.kicker{color:var(--se);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:12px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:16px}
.card h4{margin:8px 0 6px}
.footer{border-top:1px solid #e5e7eb;padding:22px;text-align:center;color:#6b7280}
.small{font-size:14px;color:#6b7280}
.projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.projects .card img{width:100%;height:auto;border-radius:10px;margin-top:8px}
.contact{display:grid;grid-template-columns:1.2fr 1fr;gap:18px}
@media (max-width:900px){ .contact{grid-template-columns:1fr} .hero{height:40vh;min-height:280px} }