:root {
  --ink: #14201c;
  --muted: #69736e;
  --paper: #f5f5f0;
  --card: #eceee8;
  --accent: #b8d83b;
  --line: #d5d9d1;
  --white: #fbfcf8;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
.site-header {
  height: 82px; max-width: var(--max); margin: auto; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: baseline; gap: 9px; font-weight: 800; letter-spacing: -.04em; }
.brand-mark { font-size: 27px; }
.brand-name { font-size: 12px; letter-spacing: .17em; opacity: .65; }
nav { display: flex; gap: 34px; font-size: 13px; font-weight: 650; }
nav a { opacity: .65; transition: opacity .2s; }
nav a:hover { opacity: 1; }

.hero {
  min-height: 690px; max-width: var(--max); margin: auto; padding: 70px 28px 90px;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 50px;
}
.eyebrow { margin: 0 0 22px; font-size: 11px; letter-spacing: .2em; font-weight: 800; color: var(--muted); }
h1 { margin: 0; font-size: clamp(62px, 8vw, 112px); line-height: .88; letter-spacing: -.075em; font-weight: 750; }
h1 em, .approach h2 em { font-style: normal; color: #78852b; }
.lead { max-width: 540px; margin: 34px 0 0; font-size: 18px; color: var(--muted); }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 36px; }
.button {
  display: inline-flex; align-items: center; gap: 22px; padding: 15px 20px;
  border-radius: 100px; font-size: 13px; font-weight: 750;
}
.button-dark { background: var(--ink); color: var(--white); }
.button span { font-size: 19px; }
.text-link { font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }

.energy-visual {
  position: relative; aspect-ratio: 1; max-width: 510px; margin-left: auto;
  border-radius: 50%; background: #e8ebe2; overflow: hidden;
}
.sun {
  position: absolute; width: 32%; aspect-ratio: 1; border-radius: 50%;
  background: var(--accent); top: 34%; left: 34%;
  box-shadow: 0 0 80px rgba(184,216,59,.45);
}
.orbit { position: absolute; border: 1px solid #b9c0b4; border-radius: 50%; transform: rotate(-18deg); }
.orbit-1 { width: 72%; height: 39%; top: 30%; left: 14%; }
.orbit-2 { width: 88%; height: 53%; top: 23%; left: 6%; transform: rotate(35deg); }
.node { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--ink); }
.node-1 { top: 28%; left: 19%; } .node-2 { top: 20%; right: 27%; }
.node-3 { bottom: 25%; right: 18%; } .node-4 { bottom: 18%; left: 33%; }
.visual-label { position: absolute; left: 12%; bottom: 14%; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.visual-label span { font-weight: 500; opacity: .6; font-size: 8px; }

.intro { max-width: 850px; padding: 150px 28px 110px; margin: auto; }
.intro h2, .approach h2, .contact h2 {
  margin: 0; font-size: clamp(42px, 5.5vw, 72px); line-height: .98; letter-spacing: -.06em;
}
.intro h2 span { color: #78852b; }
.intro > p:last-child { max-width: 580px; margin: 35px 0 0; color: var(--muted); font-size: 17px; }

.services { max-width: var(--max); margin: auto; padding: 0 28px 140px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.service-card { min-height: 330px; background: var(--card); padding: 32px; position: relative; transition: transform .2s, background .2s; }
.service-card:hover { transform: translateY(-5px); background: #e4e8dd; }
.service-card.featured { background: #dce6b8; }
.number { font-size: 11px; letter-spacing: .12em; font-weight: 800; color: var(--muted); }
.service-card h3 { margin: 85px 0 15px; font-size: 26px; letter-spacing: -.04em; }
.service-card p { max-width: 390px; margin: 0; color: var(--muted); font-size: 14px; }
.arrow { position: absolute; right: 30px; bottom: 25px; font-size: 22px; }

.approach { background: var(--ink); color: var(--white); padding: 130px max(28px, calc((100vw - 1124px) / 2)); display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }
.approach .eyebrow { color: #9da69f; }
.steps { border-top: 1px solid #39433e; }
.step { display: grid; grid-template-columns: 55px 1fr; gap: 20px; padding: 25px 0; border-bottom: 1px solid #39433e; }
.step > span { color: #9da69f; font-size: 11px; letter-spacing: .1em; }
.step h3 { margin: 0 0 5px; font-size: 21px; }
.step p { margin: 0; color: #aab2ad; font-size: 13px; }

.quote { max-width: var(--max); margin: auto; padding: 150px 28px; position: relative; }
.quote-mark { font-size: 120px; line-height: .5; color: var(--accent); font-family: Georgia, serif; }
blockquote { margin: 35px 0 0; font-size: clamp(38px, 5vw, 68px); line-height: 1; letter-spacing: -.055em; }
blockquote strong { color: #78852b; font-weight: 700; }

.contact {
  background: var(--accent); padding: 100px max(28px, calc((100vw - 1124px) / 2));
  display: flex; justify-content: space-between; align-items: end; gap: 40px;
}
.contact .eyebrow { color: #56622a; }
.contact h2 { font-size: clamp(42px, 5vw, 65px); }
.contact p:not(.eyebrow) { color: #4d5928; margin-bottom: 0; }
.contact-link { font-size: clamp(18px, 2.5vw, 30px); font-weight: 750; letter-spacing: -.03em; white-space: nowrap; }
.contact-link span { margin-left: 12px; }

footer {
  max-width: var(--max); margin: auto; padding: 32px 28px 42px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  color: var(--muted); font-size: 11px;
}
.footer-brand { color: var(--ink); }

@media (max-width: 760px) {
  .site-header { height: 72px; }
  nav { display: none; }
  .hero { min-height: auto; padding-top: 60px; grid-template-columns: 1fr; }
  .energy-visual { width: 82vw; margin: 25px auto 0; }
  .intro { padding-top: 100px; }
  .services { grid-template-columns: 1fr; }
  .service-card { min-height: 280px; }
  .service-card h3 { margin-top: 65px; }
  .approach { grid-template-columns: 1fr; gap: 60px; padding-top: 95px; padding-bottom: 95px; }
  .quote { padding: 100px 28px; }
  .contact { display: block; }
  .contact-link { display: inline-block; margin-top: 45px; }
  footer { flex-wrap: wrap; }
}