:root {
  --green-900: #0a3f22;
  --green-800: #0f5628;
  --green-700: #146c2e;
  --green-600: #1f8b3f;
  --lime: #74c900;
  --ink: #17211a;
  --muted: #667169;
  --line: #dfe7e1;
  --surface: #f4f8f4;
  --white: #ffffff;
  --shadow: 0 20px 50px rgba(13, 62, 33, 0.12);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Manrope", sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.container { width: min(1120px, calc(100% - 32px)); margin-inline: auto; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; z-index: 999; background: #fff; padding: 10px 14px; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(223,231,225,.8);
}
.nav-wrap { min-height: 98px; display: flex; align-items: center; justify-content: space-between; }
.brand img { width: 160px;  object-fit: contain; object-position: left center; }
.menu-toggle {
  width: 46px; height: 46px; border: 1px solid var(--line); background: #fff; border-radius: 12px;
  display: grid; place-content: center; gap: 5px; cursor: pointer;
}
.menu-toggle span { width: 22px; height: 2px; background: var(--green-800); transition: .25s; }
.primary-nav {
  position: fixed; inset: 78px 0 auto 0; background: #fff; padding: 20px 24px 28px;
  border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  transform: translateY(-130%); transition: transform .3s ease;
  display: flex; flex-direction: column; gap: 8px;
}
.primary-nav.open { transform: translateY(0); }
.primary-nav a { padding: 12px 14px; border-radius: 10px; font-weight: 700; color: #435047; }
.primary-nav a.active, .primary-nav a:hover { color: var(--green-700); background: var(--surface); }
.primary-nav .nav-cta { background: var(--green-700); color: #fff; text-align: center; }
.primary-nav .nav-cta:hover { background: var(--green-800); color: #fff; }

.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, #f5fbf4 0%, #ffffff 48%, #eef8ed 100%);
  padding: 72px 0 64px;
}
.hero-grid { display: grid; gap: 50px; align-items: center; }
.hero h1, .page-hero h1 {
  margin: 14px 0 18px; line-height: 1.08; letter-spacing: -0.045em;
  font-size: clamp(2.5rem, 8vw, 5.2rem);
}
.hero p, .page-hero p { color: var(--muted); font-size: 1.08rem; max-width: 700px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--green-700); text-transform: uppercase; letter-spacing: .14em;
  font-size: .78rem; font-weight: 800;
}
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--lime); }
.eyebrow-light { color: #dfffc8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn {
  display: inline-flex; justify-content: center; align-items: center;
  min-height: 50px; padding: 0 22px; border-radius: 12px; font-weight: 800;
  border: 1px solid transparent; transition: .2s; cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--green-700); color: #fff; }
.btn-primary:hover { background: var(--green-800); }
.btn-secondary { background: #fff; border-color: var(--line); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-light { background: #fff; color: var(--green-800); }
.hero-stats { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hero-stats div { border-top: 1px solid var(--line); padding-top: 14px; }
.hero-stats strong { display: block; color: var(--green-800); font-size: 1.15rem; }
.hero-stats span { display: block; color: var(--muted); font-size: .76rem; }

.hero-visual {
  position: relative; min-height: 390px; border-radius: 32px;
  background: linear-gradient(160deg, var(--green-900), var(--green-700));
  box-shadow: var(--shadow); overflow: hidden;
}
.grid-illustration { position: absolute; inset: 90px 24px 0; }
.building { position: absolute; bottom: 0; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.18); }
.b1 { width: 70px; height: 165px; left: 15%; }
.b2 { width: 88px; height: 230px; left: 38%; }
.b3 { width: 64px; height: 135px; right: 12%; }
.power-line { position: absolute; left: 0; right: 0; bottom: 52px; height: 2px; background: var(--lime); box-shadow: 0 0 20px var(--lime); }
.energy-card {
  position: absolute; z-index: 3; background: rgba(255,255,255,.94); border-radius: 16px;
  padding: 16px; box-shadow: 0 15px 35px rgba(0,0,0,.16);
}
.energy-card-main { top: 24px; left: 20px; right: 20px; }
.energy-card-main span { color: var(--muted); font-size: .8rem; }
.energy-card-main strong { display: block; font-size: 1.18rem; margin-top: 3px; }
.status-dot { display: inline-block; width: 8px; height: 8px; background: var(--lime); border-radius: 50%; margin-right: 5px; }
.meter { margin-top: 12px; height: 8px; background: #e5eee6; border-radius: 99px; overflow: hidden; }
.meter span { display: block; width: 83%; height: 100%; background: linear-gradient(90deg,var(--green-700),var(--lime)); }
.energy-card-small { bottom: 24px; width: 145px; }
.energy-card-small span { display:block; color: var(--muted); font-size: .72rem; }
.energy-card-small strong { color: var(--green-700); }
.card-solar { left: 20px; }
.card-utility { right: 20px; }
.hero-orb { position:absolute; border-radius:50%; filter: blur(4px); opacity:.45; }
.hero-orb-one { width:180px; height:180px; background:#d9ffbb; top:-60px; right:-40px; }
.hero-orb-two { width:120px; height:120px; background:#bbefc8; left:-40px; bottom:0; }

.section { padding: 72px 0; }
.section-muted { background: var(--surface); }
.split-grid { display: grid; gap: 28px; }
.split-grid h2, .section-heading h2, .feature-copy h2, .cta-box h2,
.mission-grid h2, .jobs-panel h2, .contact-info h2 {
  margin: 12px 0 0; line-height: 1.2; letter-spacing: -.03em;
  font-size: clamp(2rem, 5vw, 3.2rem);
}
.split-grid p { color: var(--muted); }
.text-link { color: var(--green-700); font-weight: 800; }
.section-heading { max-width: 760px; margin-bottom: 30px; }
.card-grid { display: grid; gap: 18px; }
.service-card, .value-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; transition: .25s;
}
.service-card:hover, .value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.service-card h3, .value-card h3 { margin: 16px 0 8px; }
.service-card p, .value-card p { margin: 0; color: var(--muted); }
.icon-box {
  width: 52px; height: 52px; display:grid; place-items:center;
  border-radius: 14px; background: #eaf7e6; color: var(--green-700); font-size: 1.45rem;
}
.value-card > span { color: var(--green-600); font-size: .82rem; font-weight: 800; }
.section-action { margin-top: 30px; }

.feature-panel {
  background: linear-gradient(145deg, var(--green-900), var(--green-700));
  color: #fff; border-radius: 28px; padding: 34px;
  display: grid; gap: 34px; overflow: hidden;
}
.feature-copy p { color: #d9eadc; }
.feature-list { display: grid; gap: 12px; }
.feature-list div { display:flex; gap: 14px; align-items:center; padding: 15px 0; border-bottom:1px solid rgba(255,255,255,.16); }
.feature-list span { min-width: 38px; height:38px; display:grid; place-items:center; background:rgba(255,255,255,.12); border-radius:50%; color:#dfffc8; font-weight:800; }
.feature-list p { margin: 0; }
.cta-box {
  display: flex; flex-direction: column; gap: 24px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 30px;
}
.page-hero {
  padding: 76px 0 62px; background:
  radial-gradient(circle at 90% 10%, rgba(116,201,0,.18), transparent 26%),
  linear-gradient(145deg,#f4faf2,#fff);
}
.page-hero h1 { max-width: 900px; }
.mission-grid { display: grid; gap: 18px; }
.mission-grid article { border-radius: var(--radius); padding: 30px; border: 1px solid var(--line); }
.mission-grid article:first-child { background: var(--green-900); color: #fff; }
.compact { padding-block: 32px; }
.service-list { display: grid; gap: 0; }
.service-detail {
  display:grid; grid-template-columns: 50px 1fr; gap: 18px;
  padding: 28px 0; border-bottom:1px solid var(--line);
}
.service-number { color: var(--green-600); font-weight:800; }
.service-detail h2 { margin:0 0 8px; font-size: clamp(1.35rem,4vw,2rem); }
.service-detail p { margin:0; color:var(--muted); max-width:850px; }
.jobs-panel {
  border:1px solid var(--line); border-radius:var(--radius); padding:30px;
  display:grid; gap:25px; align-items:center;
}
.contact-grid { display:grid; gap:36px; }
.contact-list { margin-top:28px; display:grid; gap:18px; }
.contact-list div { border-bottom:1px solid var(--line); padding-bottom:14px; }
.contact-list span { display:block; color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; font-weight:800; }
.contact-list p { margin:0; }
.contact-form {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px;
}
.field-row { display:grid; gap:16px; }
.contact-form label { display:grid; gap:7px; margin-bottom:16px; font-weight:700; font-size:.9rem; }
.contact-form input, .contact-form select, .contact-form textarea {
  width:100%; border:1px solid #ccd8cf; background:#fff; border-radius:10px; padding:13px 14px; color:var(--ink);
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline:3px solid rgba(31,139,63,.14); border-color:var(--green-600);
}
.form-note { color:var(--muted); font-size:.8rem; }

.site-footer { background:#0d1b12; color:#d9e4dc; padding:54px 0 24px; }
.footer-grid { display:grid; gap:32px; }
.footer-logo { width:190px; background:#fff; border-radius:10px; padding:6px; margin-bottom:16px; }
.footer-grid h3 { color:#fff; font-size:.95rem; }
.footer-grid a, .footer-grid span { display:block; color:#b7c6bb; margin:8px 0; }
.footer-bottom { margin-top:36px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-direction:column; gap:8px; font-size:.78rem; color:#96a79b; }

@media (min-width: 700px) {
  .container { width:min(1120px, calc(100% - 56px)); }
  .hero { padding:96px 0 82px; }
  .hero-grid { grid-template-columns:1.05fr .95fr; gap:54px; }
  .split-grid { grid-template-columns:1fr 1fr; gap:60px; }
  .card-grid { grid-template-columns:repeat(2,1fr); }
  .three-col { grid-template-columns:repeat(3,1fr); }
  .feature-panel { grid-template-columns:1.08fr .92fr; padding:52px; }
  .cta-box { flex-direction:row; justify-content:space-between; align-items:center; }
  .mission-grid { grid-template-columns:1fr 1fr; }
  .jobs-panel { grid-template-columns:1fr auto; padding:42px; }
  .contact-grid { grid-template-columns:.8fr 1.2fr; }
  .field-row { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1.4fr .7fr 1fr; }
  .footer-bottom { flex-direction:row; justify-content:space-between; }
}

@media (min-width: 960px) {
  .menu-toggle { display:none; }
  .primary-nav {
    position:static; transform:none; box-shadow:none; border:0; padding:0; background:transparent;
    flex-direction:row; align-items:center; gap:4px;
  }
  .primary-nav a { padding:10px 13px; }
  .primary-nav .nav-cta { margin-left:8px; padding-inline:18px; }
  .card-grid { grid-template-columns:repeat(4,1fr); }
  .three-col { grid-template-columns:repeat(3,1fr); }
  .section { padding:92px 0; }
}

.hero-image {
    position: relative;
    min-height: 680px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-image: url("../images/green-grid-hero-banner.png");
    background-size: cover;
    background-position: 68% center;
    background-repeat: no-repeat;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(5, 20, 12, 0.94) 0%, rgba(5, 20, 12, 0.82) 38%, rgba(5, 20, 12, 0.34) 70%, rgba(5, 20, 12, 0.12) 100% );
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: 85px;
    padding-bottom: 85px;
}

.hero-copy {
    max-width: 680px;
    color: #ffffff;
}

    .hero-copy h1 {
        margin: 16px 0 22px;
        color: #ffffff;
        font-size: clamp(3rem, 7vw, 5.7rem);
        line-height: 1.02;
        letter-spacing: -0.055em;
    }

    .hero-copy p {
        max-width: 620px;
        margin: 0;
        color: rgba(255, 255, 255, 0.84);
        font-size: 1.1rem;
        line-height: 1.75;
    }

.eyebrow-light {
    color: #dfffc8;
}

    .eyebrow-light::before {
        background: #74c900;
    }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.btn-outline-light {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
}

    .btn-outline-light:hover {
        color: #0a3f22;
        background: #ffffff;
        border-color: #ffffff;
    }

.hero-highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    max-width: 620px;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

    .hero-highlights strong {
        display: block;
        color: #9bea46;
        font-size: 1.25rem;
    }

    .hero-highlights span {
        display: block;
        margin-top: 3px;
        color: rgba(255, 255, 255, 0.75);
        font-size: 0.82rem;
    }


@media (max-width: 699px) {
    .hero-image {
        min-height: 650px;
        align-items: flex-end;
        background-position: 63% center;
    }

    .hero-overlay {
        background: linear-gradient( 180deg, rgba(5, 20, 12, 0.2) 0%, rgba(5, 20, 12, 0.62) 38%, rgba(5, 20, 12, 0.96) 76%, rgba(5, 20, 12, 1) 100% );
    }

    .hero-content {
        padding-top: 150px;
        padding-bottom: 48px;
    }

    .hero-copy h1 {
        font-size: clamp(2.7rem, 13vw, 4rem);
    }

    .hero-copy p {
        font-size: 1rem;
    }

    .hero-actions {
        flex-direction: column;
    }

        .hero-actions .btn {
            width: 100%;
        }

    .hero-highlights {
        gap: 10px;
        margin-top: 36px;
    }

        .hero-highlights strong {
            font-size: 1rem;
        }

        .hero-highlights span {
            font-size: 0.68rem;
        }
}