:root{
  --green:#0b3a2f;
  --cream:#f7f5ee;
  --ink:#2f3936;
  --line:rgba(11,58,47,.16);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  background:var(--cream);
  color:var(--ink);
  font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

body{
  display:flex;
  flex-direction:column;
}

.page{flex:1}

.hero{
  min-height:58vh;
  display:grid;
  grid-template-columns:minmax(0, 52%) minmax(0, 48%);
  background:
    radial-gradient(circle at 76% 34%, rgba(255,236,181,.65), transparent 26%),
    linear-gradient(100deg,#fbfaf5 0%,#f8f4ea 52%,#f4ecd9 100%);
  overflow:hidden;
}

.hero-copy{
  padding:clamp(28px,4vw,64px) 5vw clamp(38px,4vw,58px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:clamp(34px,4vw,56px);
  position:relative;
  z-index:2;
  min-width:0;
}

.logo{
  width:min(390px,74%);
  height:auto;
  display:block;
}

.hero-text{
  max-width:760px;
}

.hero-text h1{
  color:var(--green);
  font-size:clamp(46px,5.1vw,78px);
  line-height:.98;
  letter-spacing:-.042em;
  margin:0 0 20px;
  font-weight:750;
  text-wrap:balance;
}

.hero-text p{
  font-size:clamp(20px,2.05vw,32px);
  line-height:1.22;
  max-width:690px;
  margin:0;
  color:#41504b;
  font-weight:400;
  text-wrap:balance;
}

.hero-image{
  min-height:100%;
  background:
    linear-gradient(90deg,rgba(247,245,238,.82) 0%,rgba(247,245,238,.10) 22%,rgba(247,245,238,0) 42%),
    url("sugarcane-hero.jpg") center center / cover no-repeat;
}

.services{
  background:#fbfaf6;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  padding:38px 5vw 28px;
}

.services article{
  text-align:center;
  padding:8px clamp(22px,3.2vw,56px) 12px;
  min-width:0;
}

.services article + article{
  border-left:1px solid var(--line);
}

.icon{
  width:46px;
  height:46px;
  margin:0 auto 12px;
  color:var(--green);
}

.icon svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.services h2{
  color:var(--green);
  font-size:clamp(22px,1.9vw,30px);
  margin:0 0 10px;
  letter-spacing:-.02em;
}

.services p{
  margin:0 auto;
  max-width:420px;
  font-size:clamp(16px,1.2vw,20px);
  line-height:1.45;
  color:#5a6260;
}

footer{
  background:#fbfaf6;
  padding:10px 20px 26px;
  text-align:center;
  font-size:14px;
  color:#78807d;
}

@media (max-width: 1180px){
  .hero{
    grid-template-columns:50% 50%;
  }

  .hero-copy{
    padding-left:4.5vw;
    padding-right:4vw;
  }

  .hero-text h1{
    font-size:clamp(44px,5.5vw,68px);
  }

  .hero-text p{
    font-size:clamp(20px,2.25vw,28px);
  }
}

@media (max-width: 900px){
  .hero{
    min-height:auto;
    grid-template-columns:1fr;
  }

  .hero-copy{
    min-height:56vh;
    padding:30px 7vw 46px;
    gap:56px;
    background:
      linear-gradient(180deg,rgba(251,250,245,.97),rgba(251,250,245,.88)),
      url("sugarcane-hero.jpg") center / cover no-repeat;
  }

  .logo{
    width:min(350px,84%);
  }

  .hero-text h1{
    font-size:clamp(44px,10vw,64px);
  }

  .hero-text p{
    font-size:clamp(20px,4.8vw,28px);
    max-width:600px;
  }

  .hero-image{
    display:none;
  }

  .services{
    grid-template-columns:1fr;
    padding:20px 8vw 18px;
  }

  .services article{
    padding:26px 4px;
  }

  .services article + article{
    border-left:0;
    border-top:1px solid var(--line);
  }
}

@media (max-height: 760px) and (min-width: 901px){
  .hero{
    min-height:54vh;
  }

  .hero-copy{
    padding-top:24px;
    padding-bottom:34px;
    gap:30px;
  }

  .logo{
    width:min(340px,70%);
  }

  .hero-text h1{
    font-size:clamp(40px,4.6vw,64px);
  }

  .hero-text p{
    font-size:clamp(18px,1.9vw,28px);
  }

  .services{
    padding-top:28px;
    padding-bottom:22px;
  }
}