:root {
  --ink: #15221c;
  --muted: #637068;
  --green: #33a852;
  --green-dark: #18743a;
  --lime: #b8e34b;
  --paper: #f4f5ef;
  --line: #d7ddd4;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }

.site-header {
  height: 92px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between;
  position: absolute; inset: 0 0 auto; z-index: 10; border-bottom: 1px solid rgba(21,34,28,.13);
}
.brand { display:flex; align-items:center; }
.brand img { display:block; width:270px; height:auto; }
nav { display: flex; align-items: center; gap: 34px; font-size: 14px; font-weight: 700; }
nav a:not(.nav-cta):hover { color: var(--green-dark); }
.nav-cta { background: var(--ink); color: white; padding: 13px 19px; border-radius: 2px; }

.hero { min-height: 760px; display: grid; grid-template-columns: 1.08fr .92fr; padding-top: 92px; overflow: hidden; }
.hero-copy { padding: 11vw 6vw 8vw 7vw; display: flex; flex-direction: column; justify-content: center; }
.eyebrow, .section-kicker { text-transform: uppercase; letter-spacing: .19em; font-size: 12px; font-weight: 800; color: var(--green-dark); }
.eyebrow { display: flex; align-items: center; gap: 12px; }
.eyebrow span { width: 31px; height: 2px; background: var(--green); }
h1 { max-width: 800px; font-size: clamp(52px, 6.4vw, 96px); line-height: .94; letter-spacing: -.065em; margin: 28px 0; font-weight: 750; }
.hero-lead { max-width: 650px; color: var(--muted); font-size: 20px; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 34px; flex-wrap: wrap; }
.button { display: inline-block; padding: 17px 23px; font-size: 14px; font-weight: 800; letter-spacing: .01em; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--green-dark); color: white; }
.text-link { font-weight: 800; font-size: 14px; border-bottom: 1px solid var(--ink); padding: 8px 0; }
.text-link span { color: var(--green); margin-left: 8px; }
.hero-visual { position: relative; background: var(--green); min-height: 668px; overflow: hidden; }
.hero-visual:before { content:""; position:absolute; inset:0; background: linear-gradient(140deg, transparent 20%, rgba(0,0,0,.12)); }
.loop { position: absolute; border: 46px solid rgba(255,255,255,.16); border-radius: 50%; width: 480px; height: 480px; }
.loop-one { left: -100px; top: 80px; }
.loop-two { right: -210px; bottom: -145px; border-color: rgba(16,76,39,.23); }
.material-card { position: absolute; left: 12%; right: 12%; bottom: 13%; padding: 34px; background: rgba(244,245,239,.95); box-shadow: 0 30px 70px rgba(10,50,28,.26); }
.material-card span { display:block; text-transform:uppercase; letter-spacing:.18em; font-size:10px; color:var(--green-dark); font-weight:800; }
.material-card strong { display:block; font-size:27px; margin-top:11px; letter-spacing:-.03em; }
.material-bars { display:flex; gap:7px; height:34px; align-items:flex-end; margin-top:28px; }
.material-bars i { display:block; width:25%; background:var(--green); }
.material-bars i:nth-child(1){height:38%}.material-bars i:nth-child(2){height:66%}.material-bars i:nth-child(3){height:90%}.material-bars i:nth-child(4){height:100%;background:var(--green-dark)}
.vertical-label { position:absolute; right:23px; top:120px; writing-mode:vertical-rl; font-size:10px; letter-spacing:.24em; font-weight:800; color:rgba(255,255,255,.75); }

.impact-strip { display:grid; grid-template-columns:repeat(3,1fr); background:var(--ink); color:white; padding:34px 7vw; gap:30px; }
.impact-strip div { display:grid; grid-template-columns:auto 1fr; column-gap:15px; align-items:center; border-right:1px solid rgba(255,255,255,.18); }
.impact-strip div:last-child { border:0; }
.impact-strip span { grid-row:1/3; color:var(--lime); font-size:12px; font-weight:800; }
.impact-strip strong { font-size:17px; }.impact-strip p { margin:4px 0 0; color:#9ca9a1; font-size:13px; }

.section { padding: 120px 7vw; }
.intro { display:grid; grid-template-columns: .6fr 1.4fr; gap:8vw; }
.intro h2, .section-heading h2, .materials h2, .closing h2 { font-size:clamp(40px,5vw,72px); line-height:1.02; letter-spacing:-.055em; margin:0; }
.intro>div>p { max-width:730px; color:var(--muted); line-height:1.8; font-size:18px; margin-top:30px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:60px; margin-bottom:58px; }
.section-heading>p { max-width:460px; color:var(--muted); line-height:1.7; }
.service-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); }
.service-grid article { padding:42px 8% 48px 0; border-bottom:1px solid var(--line); position:relative; }
.service-grid article:nth-child(odd) { border-right:1px solid var(--line); }
.service-grid article:nth-child(even) { padding-left:8%; }
.service-grid span { font-size:11px; color:var(--green-dark); font-weight:800; }
.service-grid h3 { font-size:27px; letter-spacing:-.03em; margin:23px 0 13px; }
.service-grid p { color:var(--muted); line-height:1.7; max-width:520px; }

.materials { background:var(--ink); color:white; display:grid; grid-template-columns:1fr 1fr; gap:9vw; }
.section-kicker.light { color:var(--lime); }
.materials-copy>p:not(.section-kicker) { color:#aeb8b2; line-height:1.8; font-size:17px; max-width:600px; margin:30px 0; }
.button-light { background:var(--lime); color:var(--ink); }
.material-list { border-top:1px solid rgba(255,255,255,.18); }
.material-list div { display:flex; align-items:center; padding:20px 0; border-bottom:1px solid rgba(255,255,255,.18); }
.material-list span { width:58px; color:var(--lime); font-size:11px; }
.material-list strong { font-size:18px; }

.process-line { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
.process-line article { background:var(--paper); padding:42px; min-height:270px; }
.process-line b { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--green); color:white; }
.process-line h3 { font-size:26px; margin:34px 0 12px; }.process-line p { color:var(--muted); line-height:1.7; }
.closing { text-align:center; background:var(--green); color:white; }
.closing h2 { max-width:850px; margin:15px auto 25px; }
.closing>p:not(.section-kicker) { max-width:650px; margin:0 auto 35px; line-height:1.7; color:rgba(255,255,255,.82); }
.closing .button-light { background:white; }

footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:30px; padding:36px 7vw; background:#101813; color:#a9b1ac; font-size:12px; }
.footer-brand { display:inline-flex; align-items:center; background:white; padding:7px 10px; width:max-content; }.footer-brand img{display:block;width:210px;height:auto} footer p:last-child{text-align:right}

@media (max-width: 900px) {
  .site-header { position:relative; height:auto; padding:22px 6vw; }
  nav a:not(.nav-cta) { display:none; }
  .brand img { width:220px; }
  .hero { grid-template-columns:1fr; padding-top:0; }
  .hero-copy { padding:90px 7vw; }
  .hero-visual { min-height:450px; }
  .impact-strip, .process-line { grid-template-columns:1fr; }
  .impact-strip div { border-right:0; border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:22px; }
  .intro, .materials { grid-template-columns:1fr; }
  .section-heading { display:block; }.section-heading>p{margin-top:22px}
  footer { grid-template-columns:1fr; text-align:center; } footer img{margin:auto} footer p:last-child{text-align:center}
}

@media (max-width: 620px) {
  .section { padding:80px 6vw; }
  .nav-cta { font-size:12px; padding:11px 13px; }
  .hero-copy { padding:70px 6vw; }
  .hero-lead { font-size:17px; }
  .impact-strip { grid-template-columns:1fr; }
  .service-grid { grid-template-columns:1fr; }
  .service-grid article, .service-grid article:nth-child(even) { padding:34px 0; border-right:0; }
  .materials { gap:60px; }
  .material-card { left:7%; right:7%; }
}