/* Kangema Farm Life - change the look of the whole site by editing the colours below */

:root{
  --forest:#17402F;
  --moss:#3F7D4E;
  --leaf:#8DB255;
  --mist:#EEF3F0;
  --glacier:#DCE9EE;
  --slate:#33414A;
  --volcanic:#7B3F2A;
  --sun:#E0A32E;
  --ink:#1D2A27;
  --white:#fff;
  --head:'Bricolage Grotesque','Trebuchet MS',Arial,sans-serif;
  --body:'Public Sans','Segoe UI',Arial,sans-serif;
  --w:1160px;
  --r:10px
}

*{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth
}

body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:#fff;
  line-height:1.65;
  font-size:1.05rem
}

img,svg{
  max-width:100%;
  display:block
}

a{
  color:var(--moss)
}

a:hover{
  color:#0DF205
}

h1,h2,h3,h4{
  font-family:var(--head);
  line-height:1.15;
  color:var(--forest);
  margin:0 0 .6em
}

h1{
  font-size:clamp(2.2rem,5vw,3.8rem);
  letter-spacing:-.02em
}

h2{
  font-size:clamp(1.6rem,3vw,2.3rem)
}

h3{
  font-size:1.3rem
}

.wrap{
  max-width:var(--w);
  margin:0 auto;
  padding:0 1.25rem
}

.skip{
  position:absolute;
  left:-999px;
  top:0;
  background:var(--sun);
  color:#000;
  padding:.7rem 1rem;
  z-index:100
}

.skip:focus{
  left:0
}

:focus-visible{
  outline:3px solid var(--sun);
  outline-offset:3px
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid #dbe4de
}

.bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.4rem 1.25rem;
  max-width:var(--w);
  margin:0 auto
}

.logo{
  display:flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  font-family:var(--head);
  font-weight:800;
  font-size:1.25rem;
  color:var(--forest);
  height:70px
}

.logo svg{
  width:38px;
  height:38px
}

.logo img{
  height:70px;
  width:auto;
  display:block
}

.nav{
  margin-left:auto
}

.nav ul{
  display:flex;
  align-items:center;
  gap:.2rem;
  list-style:none;
  margin:0;
  padding:0
}

.nav li{
  margin:0;
  padding:0
}

.nav a{
  display:block;
  padding:.5rem .8rem;
  text-decoration:none;
  color:var(--ink);
  font-weight:600;
  border-radius:6px;
  font-size:.98rem;
  line-height:1
}

.nav a:hover,
.nav a[aria-current=page]{
  background:var(--mist);
  color:#0DF205
}

.nav a[aria-current=page]{
  box-shadow:inset 0 -3px 0 #7FBF1F
}

.menu-btn{
  display:none;
  background:var(--forest);
  color:#fff;
  border:0;
  border-radius:8px;
  padding:.55rem .8rem;
  font:inherit;
  font-weight:700;
  cursor:pointer
}

@media(max-width:900px){

  .menu-btn{
    display:block
  }

  .nav{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    background:#fff;
    border-bottom:1px solid #dbe4de;
    padding:.5rem 1rem 1rem
  }

  .nav.open{
    display:block
  }

  .nav ul{
    flex-direction:column
  }

  .nav a{
    padding:.8rem
  }
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn{
  display:inline-block;
  padding:.85rem 1.4rem;
  border-radius:8px;
  font-weight:700;
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
  font:inherit;
  font-weight:700
}

.btn-sun{
  background:var(--sun);
  color:#1b1b1b
}

.btn-sun:hover{
  background:#f0b640;
  color:#000
}

.btn-line{
  border-color:#fff;
  color:#fff
}

.btn-line:hover{
  background:#fff;
  color:var(--forest)
}

.btn-green{
  background:var(--forest);
  color:#fff
}

.btn-green:hover{
  background:var(--moss);
  color:#fff
}

.btn-wa{
  background:#1f8f4d;
  color:#fff
}

.btn-wa:hover{
  background:#17703c;
  color:#fff
}

.row{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
  position:relative;
  background:var(--forest) url(../images/hero-ridges.jpeg) center bottom/cover no-repeat;
  color:#fff;
  padding:6rem 0 11rem;
  overflow:hidden
}

.hero h1{
  color:#fff;
  max-width:14ch
}

.hero p{
  max-width:52ch;
  font-size:1.2rem;
  color:#e6f0ea
}

.hero .row{
  margin-top:1.6rem
}

.page-hero{
  background:var(--forest) url(../images/hero-ridges.svg) center bottom/cover;
  color:#fff;
  padding:3.5rem 0 5.5rem
}

.page-hero h1{
  color:#fff;
  font-size:clamp(2rem,4vw,3rem);
  margin-bottom:.3em
}

.page-hero p{
  max-width:60ch;
  color:#e0ece5;
  margin:0
}

.crumbs{
  font-size:.9rem;
  margin-bottom:1rem;
  color:#cfe0d6
}

.crumbs a{
  color:#fff
}


/* =========================================================
   SECTIONS
   ========================================================= */

section{
  padding:4.5rem 0
}

.tint{
  background:var(--mist)
}

.dark{
  background:var(--slate);
  color:#e8eef0
}

.dark h2,
.dark h3{
  color:#fff
}

.lead{
  font-size:1.15rem;
  max-width:62ch
}

.center{
  text-align:center
}

.center .lead{
  margin-inline:auto
}

.grid{
  display:grid;
  gap:1.5rem
}

.g2{
  grid-template-columns:repeat(2,1fr)
}

.g3{
  grid-template-columns:repeat(3,1fr)
}

.g4{
  grid-template-columns:repeat(4,1fr)
}

@media(max-width:900px){

  .g3,
  .g4{
    grid-template-columns:repeat(2,1fr)
  }
}

@media(max-width:620px){

  .g2,
  .g3,
  .g4{
    grid-template-columns:1fr
  }
}


/* =========================================================
   CROP TILES
   ========================================================= */

.tile{
  position:relative;
  display:block;
  border-radius:var(--r);
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  min-height:340px
}

.tile img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s
}

.tile:hover img{
  transform:scale(1.05)
}

.tile span{
  position:absolute;
  inset:auto 0 0 0;
  padding:3rem 1.1rem 1.1rem;
  background:linear-gradient(transparent,rgba(10,30,22,.9));
  font-size:.95rem
}

.tile strong{
  display:block;
  font-family:var(--head);
  font-size:1.5rem
}


/* =========================================================
   WHY LIST
   ========================================================= */

.why{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:1.2rem;
  grid-template-columns:repeat(2,1fr)
}

.why li{
  border-left:5px solid var(--leaf);
  padding:.2rem 0 .2rem 1.1rem
}

.why strong{
  display:block;
  font-family:var(--head);
  font-size:1.15rem;
  color:var(--forest)
}

@media(max-width:700px){

  .why{
    grid-template-columns:1fr
  }
}


/* =========================================================
   METHODS TIMELINE
   ========================================================= */

.steps{
  list-style:none;
  counter-reset:s;
  padding:0;
  margin:2rem 0 0;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1rem
}

.steps li{
  counter-increment:s;
  position:relative;
  padding-top:3.2rem;
  font-size:.95rem
}

.steps li::before{
  content:counter(s);
  position:absolute;
  top:0;
  left:0;
  width:2.4rem;
  height:2.4rem;
  border-radius:50%;
  background:var(--forest);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:800
}

.steps li::after{
  content:"";
  position:absolute;
  top:1.2rem;
  left:2.8rem;
  right:-.6rem;
  border-top:2px dashed var(--leaf)
}

.steps li:last-child::after{
  display:none
}

.steps b{
  display:block;
  font-family:var(--head);
  font-size:1.1rem;
  color:var(--forest)
}

@media(max-width:800px){

  .steps{
    grid-template-columns:1fr
  }

  .steps li::after{
    display:none
  }
}


/* =========================================================
   STATS
   ========================================================= */

.stats{
  background:var(--moss);
  color:#fff;
  padding:3rem 0
}

.stat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
  text-align:center
}

.stat b{
  display:block;
  font-family:var(--head);
  font-size:2.6rem;
  line-height:1
}

.stat small{
  display:block;
  margin-top:.4rem;
  color:#e0f0e4
}

.note-ph{
  font-size:.85rem;
  color:#e0f0e4;
  text-align:center;
  margin:1.2rem 0 0
}

@media(max-width:700px){

  .stat-grid{
    grid-template-columns:repeat(2,1fr)
  }
}


/* =========================================================
   CARDS, PRODUCTS, POSTS
   ========================================================= */

.card{
  background:#fff;
  border:1px solid #d6e0da;
  border-radius:var(--r);
  overflow:hidden;
  display:flex;
  flex-direction:column
}

.card img{
  aspect-ratio:4/3;
  object-fit:cover;
  width:100%
}

.card .pad{
  padding:1.1rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  flex:1
}

.card h3{
  margin:0
}

.meta{
  font-size:.9rem;
  color:#4a5b55;
  margin:0
}

.price{
  font-weight:800;
  color:var(--volcanic)
}

.card .btn{
  margin-top:auto;
  text-align:center
}

.badge{
  display:inline-block;
  background:var(--glacier);
  color:var(--slate);
  border-radius:99px;
  padding:.15rem .7rem;
  font-size:.82rem;
  font-weight:700;
  align-self:flex-start
}

.post-row{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:1rem;
  padding:1.1rem 0;
  border-top:1px solid #cfdad3;
  text-decoration:none;
  color:inherit
}

.post-row time{
  font-weight:700;
  color:var(--volcanic)
}

.post-row h3{
  margin:0 0 .2rem
}

.post-row:hover h3{
  color:var(--moss)
}

@media(max-width:600px){

  .post-row{
    grid-template-columns:1fr
  }
}


/* =========================================================
   GALLERY
   ========================================================= */

.filters{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:2.5rem
}

.filters button{
  border:2px solid var(--forest);
  background:#fff;
  color:var(--forest);
  padding:.4rem 1rem;
  border-radius:99px;
  font:inherit;
  font-weight:700;
  cursor:pointer
}

.filters button[aria-pressed=true]{
  background:var(--forest);
  color:#fff
}

/*
   Important:
   The gallery is no longer a small mosaic grid.
   Each gallery item occupies the full content width.
*/

.mosaic{
  display:block;
  width:100%
}

.gallery-item{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:3rem;
  align-items:center;
  width:100%;
  margin-bottom:4rem
}

.gallery-image{
  width:100%
}

.gallery-image figure{
  margin:0;
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:var(--r);
  cursor:zoom-in;
  background:var(--glacier)
}

.gallery-image img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover
}

.gallery-image figcaption{
  padding:.75rem 1rem;
  background:var(--mist);
  color:var(--forest);
  font-size:.95rem;
  font-weight:700
}

.gallery-info{
  width:100%;
  padding:1rem 0
}

.gallery-info h2{
  margin:0 0 1rem;
  color:var(--forest);
  font-size:1.7rem
}

.gallery-info p{
  margin:0 0 1rem;
  line-height:1.7
}

.gallery-info ul{
  margin:0;
  padding-left:1.3rem
}

.gallery-info li{
  margin-bottom:.55rem;
  line-height:1.5
}

@media(max-width:800px){

  .gallery-item{
    grid-template-columns:1fr;
    gap:1.25rem;
    margin-bottom:3rem
  }

  .gallery-info{
    padding:0
  }

  .gallery-info h2{
    font-size:1.4rem
  }
}


/* =========================================================
   LIGHTBOX
   ========================================================= */

dialog{
  border:0;
  border-radius:var(--r);
  padding:0;
  max-width:min(92vw,900px)
}

dialog::backdrop{
  background:rgba(0,0,0,.75)
}

dialog img{
  width:100%
}

dialog p{
  margin:0;
  padding:.8rem 1rem
}

dialog button{
  position:absolute;
  right:.6rem;
  top:.6rem
}


/* =========================================================
   CROP & ARTICLE LAYOUT
   ========================================================= */

.layout{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:3rem;
  align-items:start
}

.toc{
  position:sticky;
  top:5rem;
  font-size:.95rem;
  background:var(--mist);
  border-radius:var(--r);
  padding:1rem 1.2rem
}

.toc h2{
  font-size:1.05rem
}

.toc ol{
  margin:0;
  padding-left:1.2rem
}

.toc a{
  text-decoration:none
}

@media(max-width:900px){

  .layout{
    grid-template-columns:1fr
  }

  .toc{
    position:static
  }
}

.article section{
  padding:0 0 2.2rem;
  margin:0
}

.article h2{
  font-size:1.6rem;
  border-bottom:3px solid var(--leaf);
  display:inline-block;
  padding-bottom:.15rem
}

.article ul,
.article ol{
  padding-left:1.3rem
}

.article{
  max-width:74ch
}

.verify{
  background:#fff6e0;
  border-left:5px solid var(--sun);
  padding:.7rem 1rem;
  border-radius:6px;
  font-size:.93rem;
  margin:.8rem 0
}

.faq details{
  border:1px solid #d3ddd7;
  border-radius:8px;
  padding:.7rem 1rem;
  margin-bottom:.6rem
}

.faq summary{
  font-weight:700;
  cursor:pointer;
  color:var(--forest)
}

.pstable{
  width:100%;
  border-collapse:collapse;
  font-size:.97rem
}

.pstable th,
.pstable td{
  border:1px solid #d3ddd7;
  padding:.6rem;
  text-align:left;
  vertical-align:top
}

.pstable th{
  background:var(--mist)
}

.cta{
  background:var(--forest);
  color:#fff;
  text-align:center
}

.cta h2{
  color:#fff
}


/* =========================================================
   FORMS
   ========================================================= */

form label{
  display:block;
  font-weight:700;
  margin:.9rem 0 .3rem
}

form input,
form textarea,
form select{
  width:100%;
  padding:.75rem;
  border:2px solid #b9c8bf;
  border-radius:8px;
  font:inherit
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:3rem
}

@media(max-width:850px){

  .contact-grid{
    grid-template-columns:1fr
  }
}

.map{
  border:0;
  width:100%;
  height:340px;
  border-radius:var(--r)
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{
  background:#10291f;
  color:#cfe0d6;
  padding:3.5rem 0 5rem;
  font-size:.97rem
}

.site-footer h3{
  color:#fff;
  font-size:1.1rem
}

.site-footer a{
  color:#cfe0d6
}

.site-footer li{
  margin:.35rem 0
}

/* Contact details only */
.site-footer ul:not(.explore-links):not([data-social]){
  list-style:none;
  padding:0;
  margin:0
}

.site-footer [data-site]{
  display:flex;
  align-items:center;
  gap:.55rem
}

.site-footer [data-site] i{
  width:1rem;
  text-align:center;
  flex-shrink:0
}

.site-footer [data-tel],
.site-footer [data-mail]{
  text-decoration:none
}


/* Explore links */

.site-footer .explore-links{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0
}

.site-footer .explore-links li{
  display:flex;
  align-items:center;
  margin:0
}

.site-footer .explore-links a{
  display:inline-block;
  color:#cfe0d6;
  text-decoration:none;
  font-weight:600;
  padding:.2rem 0;
  border-radius:5px;
  transition:
    color .25s ease,
    transform .25s ease,
    text-shadow .25s ease,
    background-color .25s ease
}

.site-footer .explore-links a:hover,
.site-footer .explore-links a:focus-visible{
  color:#0DF205;
  transform:translateY(-2px);
  text-decoration:none;
  text-shadow:0 0 10px rgba(13,242,5,.65);
  background:rgba(13,242,5,.06)
}

.site-footer .explore-links .explore-separator{
  padding:0 .65rem;
  opacity:.65;
  user-select:none
}

.copy{
  border-top:1px solid #2c4a3d;
  margin-top:2rem;
  padding-top:1rem;
  font-size:.88rem
}


/* =========================================================
   WHATSAPP
   ========================================================= */

.wa-float{
  position:fixed;
  right:1rem;
  bottom:1rem;
  z-index:60;
  background:#1f8f4d;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  padding:.8rem 1.2rem;
  border-radius:99px;
  box-shadow:0 6px 18px rgba(0,0,0,.3)
}

.wa-float:hover{
  background:#17703c;
  color:#fff
}


/* =========================================================
   PLACEHOLDER NOTE
   ========================================================= */

.ph-note{
  background:var(--glacier);
  padding:.8rem 1rem;
  border-radius:8px;
  font-size:.92rem
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  *{
    transition:none!important;
    scroll-behavior:auto!important
  }
}