:root{
  --bg: #F7F4EE;
  --bg-alt: #E8E2D6;
  --text: #2E2A25;
  --muted: #6B6258;
  --green: #5C7F4F;
  --brown: #6B4F3A;
  --max: 1100px;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: "Inter", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.container{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
}

.section{
  padding:110px 0;
}

.section.alt{
  background: var(--bg-alt);
}

h1{
  font-size: clamp(40px, 5vw, 64px);
  line-height:1.05;
  font-weight:600;
  margin:0 0 20px;
}

h2{
  font-size: clamp(26px, 3vw, 36px);
  margin:0 0 24px;
  font-weight:600;
}

p{
  font-size:18px;
  line-height:1.7;
  color: var(--muted);
  margin:0 0 16px;
}

.hero{
  padding:160px 0 120px;
  text-align:center;
  background:
    linear-gradient(rgba(247,244,238,0.7), rgba(247,244,238,0.9)),
    url('/hero.jpg') center/cover no-repeat;
}

.hero h1 span{
  display:block;
  font-size:22px;
  font-weight:400;
  color: var(--brown);
  margin-top:18px;
}

.btn{
  display:inline-block;
  margin-top:28px;
  padding:14px 22px;
  background: var(--green);
  color:white;
  border-radius:40px;
  text-decoration:none;
  font-weight:500;
  transition:0.2s;
}

.btn:hover{
  background:#4a693f;
}

.grid{
  display:grid;
  gap:40px;
}

@media(min-width:900px){
  .grid-2{
    grid-template-columns: 1fr 1fr;
  }
}

.image-block{
  height:420px;
  background-size:cover;
  background-position:center;
  border-radius:18px;
}

footer{
  padding:60px 0;
  text-align:center;
  font-size:14px;
  color: var(--muted);
}