:root{
     --brand:#256540;
     --brand-2:#A8BFB2;
     --bg:#FCFCFA;
     --bg-pastel:#E7F1EB;
     --accent-2:#2BA6A6;
     --muted:#5B6B63;
     --ink:#0f1f15;
     --radius:16px;
     --shadow:0 8px 24px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.06);
     --header-h:96px;
     --footer-h:60px;
}
 *{
     box-sizing:border-box;
}
 html, body{
     height:100%;
}
 body{
     margin:0;
     background:var(--bg);
     color:var(--ink);
     font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
     -webkit-font-smoothing:antialiased;
}
 img{
     max-width:100%;
     height:auto;
}
 a{
     color:var(--accent-2);
     text-decoration:none;
}
 a:hover{
     color:var(--brand-2);
}

 .header{
     position:fixed;
     inset:0 0 auto 0;
     z-index:20;
     background:#fff;
}
 .header__inner{
     max-width:1200px;
     margin-inline:auto;
     display:flex;
     align-items:center;
     justify-content:space-between;
     gap:16px;
     padding:14px 24px;
}
 .brand{
     display:flex;
     align-items:center;
}
 .brand img{
     width:140px;
     display:block;
}
 .nav{
     display:flex;
     align-items:center;
     gap:14px;
}
 .nav a{
     position:relative;
     padding:6px 10px;
     border-radius:8px;
     font-weight:700;
     color:#1C5933;
     transition:background .2s, color .2s;
}
 .nav a:hover{
     background:var(--brand-2);
     color:var(--ink);
}
 .nav a[aria-current="true"]{
     background:var(--brand);
     color:#fff;
}
 .nav a:focus-visible{
     outline:2px solid var(--accent-2);
     outline-offset:2px;
     background:var(--brand-2);
}

 .nav-toggle{
     display:none;
}

 @media (max-width:640px){
     .nav-toggle{
         display:inline-flex;
         align-items:center;
         justify-content:center;
         width:40px;
         height:40px;
         border:0;
         border-radius:10px;
         background:#fff;
         box-shadow: var(--shadow);
         font-size:18px;
         font-weight:700;
         color:#1C5933;
         cursor:pointer;
    }
     .nav{
         position:fixed;
         top:var(--header-h);
         left:0;
         right:0;
         background:#fff;
         padding:12px 16px;
         display:flex;
         gap:10px;
         flex-direction:column;
         transform:translateY(-8px);
         opacity:0;
         pointer-events:none;
         transition:opacity .18s ease, transform .18s ease;
         box-shadow:0 12px 28px rgba(0,0,0,.08);
    }
     .nav a{
         padding:10px 12px;
         border-radius:8px;
    }

     .header.is-open .nav{
         transform:translateY(0);
         opacity:1;
         pointer-events:auto;
    }
}

 main{
     position:fixed;
     top:var(--header-h);
     bottom:var(--footer-h);
     left:0;
     right:0;
     overflow:hidden;
}

 section.slide{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--bg);
  scrollbar-gutter:stable both-edges;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(12px);

  transition: opacity .3s ease-out, visibility 0s linear .3s;
  z-index:0;
}

 section.slide.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition: opacity .3s ease-out;
  z-index:1;
}

 .container{
     max-width:1120px;
     margin-inline:auto;
}
 .title{
     font-family:'Plus Jakarta Sans',Inter,sans-serif;
     font-weight:800;
     font-size:clamp(2rem,7vw,4rem);
     line-height:1.05;
     margin:0 0 10px;
     letter-spacing:-0.3px;
     white-space:normal;
     word-break:break-word;
     hyphens:auto;
}
 .lead{
     color:var(--muted);
     font-size:1.12rem;
     max-width:62ch;
}
 .cta{
     display:flex;
     gap:12px;
     flex-wrap:wrap;
     margin-top:24px;
}
 .btn{
     appearance:none;
     display:inline-flex;
     align-items:center;
     justify-content:center;
     gap:8px;
     border:none;
     border-radius:12px;
     padding:12px 18px;
     font-weight:700;
     cursor:pointer;
     box-shadow:var(--shadow);
}
 .btn-primary{
     background:var(--brand);
     color:#fff;
}
 .btn-primary:hover{
     color:var(--brand-2);
}
 .btn-ghost{
     background:#fff;
     color:var(--brand);
     border:1px solid #dfe6e2;
}
 .btn-ghost:hover{
     background:#f6fbf0;
}
 .section-title{
     font-family:'Plus Jakarta Sans',Inter,sans-serif;
     font-size:2rem;
     margin:0 0 12px;
}
 .two-col{
     display:grid;
     gap:18px;
}
 @media (min-width:900px){
     .two-col{
         grid-template-columns:1fr 1fr;
    }
}
 .card{
     background:var(--bg-pastel);
     border:1px solid #d9ebe1;
     border-radius:var(--radius);
     padding:18px;
}
 .list{
     display:grid;
     gap:8px;
     margin:0;
     padding:0;
     list-style:none;
}

 .footer{
     position:fixed;
     bottom:0;
     left:0;
     width:100%;
     background:var(--brand);
     color:#fff;
     z-index:10;
}
 .footer__inner{
     max-width:1200px;
     margin-inline:auto;
     padding:10px 20px;
     text-align:center;
     font-size:.95rem;
}

 .contact-card{
     text-align:left;
     padding:2rem;
     max-width:720px;
     margin:auto;
}
 .contact-head{
     margin:0 0 1rem;
}
 .actions{
     display:flex;
     gap:12px;
     flex-wrap:wrap;
     align-items:center;
     justify-content:flex-start;
}
 .btn .icon{
     display:inline-block;
     line-height:0;
     margin-right:6px;
}

 @media (max-width:900px){
     section.slide{
         place-items:start;
    }
}
 @media (max-width:640px){
     .header__inner{
         padding:12px 16px 16px;
    }
     .brand img{
         width:128px;
    }
     .nav{
         gap:8px;
         overflow:auto;
    }

     .container{
         padding-inline:8px;
    }
     .title{
         font-size:min(8.2vw,32px);
         line-height:1.1;
    }
}

#about svg {
  width: 18px;
  height: 18px;
  vertical-align: text-bottom;
  color: var(--brand);
  opacity: 0.9;
}

.list li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.3;
}

.card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0px;
}

#about .container {
  display: grid;
  gap: 16px;
}

@media (max-width: 640px) {

  #about .two-col svg {
    width: 20px;
    height: 20px;
    margin-top: 2px;      
  }

  #about .two-col .list li {
    flex-wrap: wrap;
    gap: 8px;
    line-height: 1.5;
  }

  #about .two-col .list li strong {
    display: inline-block;
    margin-right: 4px;
  }
}