:root {
  --brand:#0a7d45;
  --brand-2:#18a06a;
  --ink:#0e1b13;
  --muted:#5e6b66;
  --border:#e7eeeb;
  --bg:#ffffff;
  --panel:#f7fbf9;
}

*{ box-sizing:border-box }
html,body{ height:100%; margin:0 }

body{
  font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);

  /* Background image + soft overlay in ONE declaration (no pseudo-element issues) */
  /* If your file is JPEG with .jpeg extension, change bg-solar.jpg to bg-solar.jpeg */
  background:
    linear-gradient(rgba(255,255,255,0.65), rgba(255,255,255,0.65)),
    url("assets/bg-solar.jpg") center center / cover no-repeat fixed;
}

/* Links & images */
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }

.container{ width:min(1180px,92%); margin-inline:auto }

.topbar{ background:#f2f8f5; border-bottom:1px solid var(--border); color:#245c42 }
.topbar .row{ display:flex; justify-content:space-between; align-items:center; padding:.5rem 0; font-size:.92rem; gap:.8rem; flex-wrap:wrap }

header.nav{ position:sticky; top:0; z-index:40; background:rgba(255,255,255,0.85); backdrop-filter:blur(8px); border-bottom:1px solid var(--border) }
.nav .row{ display:flex; align-items:center; justify-content:space-between; padding:.8rem 0 }

.brand{ display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.2px }
.brand img{ height:80px } /* bigger logo */

nav ul{ list-style:none; display:flex; gap:1.2rem; margin:0; padding:0; align-items:center }
nav a{ color:#41695a; font-weight:600 }
nav a.active, nav a:hover{ color:#0a7d45 }

.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.05rem; border-radius:999px; border:1px solid var(--border); background:#ffffff; color:#0a7d45; font-weight:700; cursor:pointer }
.btn.primary{ background:linear-gradient(180deg,var(--brand-2),var(--brand)); border-color:transparent; color:#fff }
.btn.ghost{ background:transparent }

.hero{ background:linear-gradient(180deg,#f7fbf9 0%, #ffffff 80%); min-height:48vh; display:grid; align-items:center; border-bottom:1px solid var(--border) }
.hero .wrap{ padding:clamp(2.2rem,5vw,4rem) 0 }

.h1{ font-size:clamp(2rem,4.6vw,3.2rem); line-height:1.08; margin:.2rem 0 1rem; font-weight:800; color:#103d2b }
.lead{ color:#496b5f; font-size:1.06rem; line-height:1.7; max-width:62ch }

.badges{ display:flex; gap:.6rem; margin-top:1rem; flex-wrap:wrap }
.badge{ display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .6rem; border-radius:.6rem; background:#e9f7f1; border:1px solid #cfe8de; color:#0a7d45; font-weight:700; font-size:.8rem }

.section{ padding:clamp(2.2rem,6vw,4rem) 0 }
.section h2{ font-size:clamp(1.4rem,2.6vw,2rem); margin:0 0 .75rem; color:#123f2b }
.muted{ color:var(--muted) }

.cards{ display:grid; grid-template-columns:repeat(12,1fr); gap:1.1rem }
.card{ grid-column:span 4; background:rgba(255,255,255,0.85); border:1px solid var(--border); border-radius:1rem; padding:1.2rem; display:flex; flex-direction:column; gap:.4rem; backdrop-filter:blur(6px) }
.card h3{ margin:.2rem 0 .2rem } .card .pill{ margin-top:auto; color:#2e6b54 }

.panel{ background:rgba(255,255,255,0.85); border:1px solid var(--border); border-radius:1rem; padding:1.2rem; backdrop-filter:blur(6px) }

.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem }
.gallery .item{ background:rgba(255,255,255,0.85); border:1px solid var(--border); border-radius:.8rem; overflow:hidden; display:flex; flex-direction:column; backdrop-filter:blur(6px) }
.gallery .item img{ aspect-ratio:16/10; object-fit:cover }
.gallery .item .info{ padding:0.9rem }
.gallery .item .client{ font-weight:800; color:#103d2b }
.gallery .item .desc{ color:#516a61; margin-top:.2rem }

.contact{ display:grid; grid-template-columns:1.1fr .9fr; gap:1.6rem }
form{ display:grid; gap:.8rem }
input,textarea,select{ width:100%; padding:.9rem 1rem; border-radius:.8rem; border:1px solid var(--border); background:#fff; color:#10251b }
input::placeholder,textarea::placeholder{ color:#8ca39a }

footer{ border-top:1px solid var(--border); padding:2rem 0; color:#58756a; background:rgba(255,255,255,0.85); backdrop-filter:blur(6px) }
.inner-hero{ min-height:28vh; border-bottom:1px solid var(--border) }

@media (max-width:1024px){ .cards .card{ grid-column:span 6 } }
@media (max-width:640px){ .cards .card{ grid-column:span 12 } .contact{ grid-template-columns:1fr } .gallery{ grid-template-columns:1fr } }

/* Stop submit button from filling the whole row */
form button[type="submit"] {
  width: auto !important;          /* shrink to fit text */
  display: inline-block !important;
  padding: 0.6rem 1.2rem !important;
  min-width: unset !important;
  grid-column: auto !important;    /* don't span all columns */
  justify-self: start !important;  /* stick to left, not stretch */
}