:root {
   --green: #14532d;
   --green2: #087443;
   --bright: #18a765;
   --yellow: #facc15;
   --ink: #172c2a;
   --muted: #5c6b64;
   --pale: #f1f8ef;
   --line: #dce8dc;
   --white: #fff;
   --shadow: 0 10px 30px rgba(20, 83, 45, .09)
 }

 * {
   box-sizing: border-box
 }

 html {
   scroll-behavior: smooth;
   scroll-padding-top: 90px
 }

 body {
   margin: 0;
   font-family: "DM Sans", Arial, sans-serif;
   color: var(--ink);
   line-height: 1.6
 }

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

 a {
   color: inherit;
   text-decoration: none
 }

 .container {
   width: min(1160px, calc(100% - 40px));
   margin-inline: auto
 }

 .site-header {
   height: 78px;
   background: #fff;
   position: sticky;
   top: 0;
   z-index: 1000;
   box-shadow: 0 2px 15px #102e1710
 }

 .nav-wrap {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 25px
 }

 .brand {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-shrink: 0
 }

 .brand img {
   width: 47px;
   height: 47px
 }

 .brand span {
   display: flex;
   flex-direction: column;
   line-height: 1.3
 }

 .brand strong {
   font-size: 14px;
   letter-spacing: .2px;
   color: var(--green);
   font-weight: 800
 }

 .brand small {
   font-size: 11px;
   color: #3b5147
 }

 .main-nav {
   display: flex;
   align-items: center;
   gap: 24px;
   font-size: 12px;
   font-weight: 700
 }

 .main-nav>a:not(.nav-cta) {
   padding: 10px 0;
   position: relative
 }

 .main-nav>a.active:after,
 .main-nav>a:not(.nav-cta):hover:after {
   content: "";
   position: absolute;
   bottom: 2px;
   left: 0;
   right: 0;
   height: 2px;
   background: var(--bright)
 }

 .nav-cta {
   background: var(--green);
   color: white;
   border-radius: 25px;
   padding: 11px 22px;
   white-space: nowrap
 }

 .menu-toggle {
   display: none;
   background: var(--green);
   color: #fff;
   border: 0;
   border-radius: 8px;
   padding: 8px 12px;
   font-size: 22px
 }

.hero {
    position: relative;
    min-height: 410px;
    display: flex;
    align-items: center;

    background-image:
        linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)),
        url("image/hero-farm.png");

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    color: #fff;
    isolation: isolate;
}
 .hero-shade {
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(4, 38, 21, .88) 0%, rgba(4, 38, 21, .72) 38%, rgba(4, 38, 21, .12) 75%, rgba(4, 38, 21, .05) 100%);
   z-index: -1
 }

 .hero-content {
   padding-block: 52px
 }

 .eyebrow {
   margin: 0 0 3px;
   color: var(--green2);
   font-size: 12px;
   letter-spacing: 1px;
   font-weight: 800
 }

 .eyebrow.light {
   color: #fff;
   font-size: 13px
 }

 .hero h1 {
   font-size: clamp(34px, 4.2vw, 56px);
   line-height: 1.08;
   letter-spacing: -1.4px;
   margin: 8px 0 13px;
   max-width: 690px;
   font-weight: 800
 }

 .hero h1 span {
   color: var(--yellow)
 }

 .hero-copy {
   max-width: 560px;
   font-size: 15px;
   margin: 0 0 22px
 }

 .hero-actions {
   display: flex;
   gap: 12px;
   flex-wrap: wrap
 }

 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   border-radius: 28px;
   padding: 12px 22px;
   font-size: 13px;
   font-weight: 800;
   border: 1px solid transparent;
   transition: transform .2s, background .2s
 }

 .btn:hover,
 .small-btn:hover {
   transform: translateY(-2px)
 }

 .btn-primary {
   background: var(--bright);
   color: #fff
 }

 .btn-outline {
   border-color: #fff;
   color: #fff;
   background: #ffffff0a
 }

 .btn-light {
   background: #eef8f0;
   color: var(--green)
 }

 .trust-pill {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin-top: 18px;
   border: 1px solid #ffffff65;
   border-radius: 24px;
   padding: 4px 12px 4px 4px;
   font-size: 11px;
   font-weight: 700
 }

 .trust-pill img {
   border-radius: 50%;
   background: #fff
 }

 .section {
   padding: 54px 0
 }

 .about-grid {
   display: grid;
   grid-template-columns: 1fr 1.1fr;
   gap: 44px;
   align-items: center
 }

 .image-frame {
   height: 280px;
   border-radius: 10px;
   overflow: hidden;
   box-shadow: var(--shadow)
 }

 .image-frame img {
   width: 100%;
   height: 100%;
   object-fit: cover
 }

 .about-copy h2,
 .section-heading h2,
 .gallery-title h2 {
   font-size: clamp(25px, 3vw, 34px);
   line-height: 1.2;
   margin: 3px 0 12px;
   letter-spacing: -.7px
 }

 .about-copy>p:not(.eyebrow) {
   font-size: 14px;
   color: #45544e;
   margin: 0
 }

 .about-facts {
   display: flex;
   gap: 18px;
   margin-top: 24px
 }

 .about-facts>div {
   display: flex;
   align-items: center;
   gap: 9px;
   flex: 1;
   font-size: 12px;
   line-height: 1.35
 }

 .fact-icon {
   width: 43px;
   height: 43px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: var(--green);
   color: var(--yellow);
   font-size: 23px;
   flex-shrink: 0
 }

 .products-section {
   background: linear-gradient(135deg, #f1f8ef, #f9fcf8)
 }

 .section-heading {
   text-align: center;
   margin-bottom: 28px
 }

 .section-heading>p:not(.eyebrow) {
   font-size: 13px;
   color: var(--muted);
   margin: 8px 0 0
 }

 .product-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px
 }

 .product-card {
   background: #fff;
   border: 1px solid #e2eae2;
   border-radius: 11px;
   overflow: hidden;
   box-shadow: 0 4px 14px #163d1c0b;
   transition: transform .2s, box-shadow .2s
 }

 .product-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow)
 }

 .product-card>img {
   width: 100%;
   height: 175px;
   object-fit: cover
 }

 .product-card>div {
   text-align: center;
   padding: 17px 16px 20px
 }

 .product-card h3 {
   font-size: 16px;
   margin: 0 0 6px
 }

 .product-card p {
   font-size: 13px;
   color: var(--muted);
   margin: 0 auto 13px;
   max-width: 260px
 }

 .small-btn {
   display: inline-flex;
   background: var(--green);
   color: white;
   padding: 9px 22px;
   border-radius: 25px;
   font-size: 12px;
   font-weight: 800;
   transition: transform .2s
 }

 .why-section {
   background: #eaf5e7
 }

 .benefit-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 15px
 }

 .benefit {
   display: flex;
   align-items: center;
   gap: 13px;
   border: 1px solid #d7e7d5;
   background: #ffffff75;
   border-radius: 10px;
   padding: 17px 15px
 }

 .benefit>span {
   display: grid;
   place-items: center;
   width: 48px;
   height: 48px;
   flex-shrink: 0;
   border-radius: 50%;
   background: #fff;
   color: var(--green2);
   font-size: 25px
 }

 .benefit h3 {
   font-size: 13px;
   margin: 0 0 3px
 }

 .benefit p {
   font-size: 11px;
   line-height: 1.45;
   margin: 0;
   color: var(--muted)
 }

 .gallery-section {
   padding-bottom: 42px
 }

 .gallery-title {
   margin-bottom: 16px
 }

 .gallery-title h2 {
   font-size: 25px;
   margin: 2px 0
 }

 .gallery-grid {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 13px
 }

 .gallery-grid img {
   width: 100%;
   height: 112px;
   object-fit: cover;
   border-radius: 9px;
   transition: transform .25s
 }

 .gallery-grid img:hover {
   transform: scale(1.03)
 }

 .contact-section {
   padding-top: 0
 }

 .left-heading {
   text-align: left;
   margin-bottom: 15px
 }

 .left-heading h2 {
   font-size: 26px;
   margin: 0
 }

 .contact-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 22px
 }

 .contact-card {
   border: 1px solid var(--line);
   border-radius: 12px;
   padding: 25px;
   box-shadow: 0 5px 18px #123b1a08
 }

 .contact-row {
   display: flex;
   align-items: flex-start;
   gap: 13px;
   margin-bottom: 15px;
   font-size: 13px
 }

 .contact-row>span {
   width: 28px;
   color: var(--green2);
   font-size: 21px;
   font-weight: 800;
   line-height: 1.2
 }

 .contact-row b {
   font-size: 12px
 }

 .muted {
   color: #758078;
   font-size: 11px
 }

 .contact-actions {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin-top: 22px
 }

 .contact-actions .btn {
   font-size: 12px;
   padding: 11px 16px
 }

 .map-frame {
   min-height: 300px;
   border-radius: 12px;
   overflow: hidden;
   border: 1px solid var(--line)
 }

 .map-frame iframe {
   width: 100%;
   height: 100%;
   min-height: 300px;
   border: 0
 }

 .site-footer {
   background: #073f2b;
   color: #fff;
   padding-top: 35px
 }

 .footer-grid {
   display: grid;
   grid-template-columns: 1.5fr .8fr .9fr 1.2fr .7fr;
   gap: 28px;
   padding-bottom: 30px
 }

 .footer-brand {
   align-self: start
 }

 .footer-brand strong {
   color: #fff;
   font-size: 12px
 }

 .footer-brand small {
   color: #d7e8dd
 }

 .footer-grid h3 {
   font-size: 12px;
   margin: 0 0 11px
 }

 .footer-grid>div:not(.footer-note)>a {
   display: block;
   font-size: 11px;
   color: #d4e4da;
   margin: 5px 0
 }

 .footer-grid p {
   font-size: 11px;
   color: #d4e4da;
   margin: 0 0 8px
 }

 .footer-note {
   color: #a5d76b;
   text-align: center;
   font-size: 27px
 }

 .footer-note p {
   line-height: 1.4
 }

 .footer-bottom {
   border-top: 1px solid #ffffff25;
   padding: 13px 0;
   color: #d3e2d8;
   font-size: 10px
 }

 .footer-bottom .container {
   display: flex;
   justify-content: space-between;
   gap: 15px
 }

 .footer-bottom span {
   color: #b7db88
 }

 @media(max-width:1000px) {
   .main-nav {
     gap: 14px
   }

   .main-nav {
     font-size: 11px
   }

   .brand strong {
     font-size: 12px
   }

   .nav-cta {
     padding: 10px 14px
   }

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

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

   .footer-note {
     display: none
   }
 }

 @media(max-width:760px) {
   .container {
     width: min(100% - 32px, 600px)
   }

   .site-header {
     height: 72px
   }

   .brand img {
     width: 42px;
     height: 42px
   }

   .brand strong {
     font-size: 11px
   }

   .brand small {
     font-size: 10px
   }

   .menu-toggle {
     display: block
   }

   .main-nav {
     display: none;
     position: absolute;
     top: 72px;
     left: 0;
     right: 0;
     background: #fff;
     padding: 15px 22px 22px;
     box-shadow: 0 12px 18px #123b1a18;
     align-items: stretch;
     gap: 3px;
     flex-direction: column
   }

   .main-nav.open {
     display: flex
   }

   .main-nav>a:not(.nav-cta) {
     padding: 11px 5px;
     font-size: 13px
   }

   .main-nav>a.active:after,
   .main-nav>a:not(.nav-cta):hover:after {
     display: none
   }

   .nav-cta {
     text-align: center;
     margin-top: 8px
   }

   .hero {
     min-height: 470px;
     background-position: 62% center
   }

   .hero-shade {
     background: linear-gradient(90deg, rgba(4, 38, 21, .86), rgba(4, 38, 21, .56) 70%, rgba(4, 38, 21, .24))
   }

   .hero-content {
     padding-block: 52px
   }

   .hero h1 {
     font-size: clamp(33px, 9vw, 47px)
   }

   .hero-copy {
     font-size: 14px;
     max-width: 480px
   }

   .section {
     padding: 42px 0
   }

   .about-grid {
     grid-template-columns: 1fr;
     gap: 24px
   }

   .image-frame {
     height: 240px
   }

   .about-copy h2 {
     font-size: 27px
   }

   .about-facts {
     gap: 9px
   }

   .about-facts>div {
     font-size: 10px;
     align-items: flex-start;
     flex-direction: column
   }

   .fact-icon {
     width: 38px;
     height: 38px
   }

   .product-grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 13px
   }

   .product-card>img {
     height: 140px
   }

   .product-card>div {
     padding: 14px 10px 16px
   }

   .product-card h3 {
     font-size: 14px
   }

   .product-card p {
     font-size: 12px
   }

   .section-heading h2 {
     font-size: 27px
   }

   .benefit-grid {
     gap: 10px
   }

   .benefit {
     padding: 13px 10px;
     gap: 9px
   }

   .benefit>span {
     width: 38px;
     height: 38px;
     font-size: 21px
   }

   .benefit h3 {
     font-size: 12px
   }

   .gallery-grid {
     grid-template-columns: repeat(3, 1fr);
     gap: 9px
   }

   .gallery-grid img {
     height: 95px
   }

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

   .map-frame,
   .map-frame iframe {
     min-height: 280px
   }

   .footer-grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 24px
   }

   .footer-brand {
     grid-column: 1/-1
   }

   .footer-bottom .container {
     flex-direction: column;
     gap: 5px
   }
 }

 @media(max-width:420px) {
   .container {
     width: calc(100% - 26px)
   }

   .hero-actions .btn {
     padding: 11px 15px;
     font-size: 12px
   }

   .product-grid {
     gap: 9px
   }

   .product-card>img {
     height: 115px
   }

   .product-card h3 {
     font-size: 12px
   }

   .product-card p {
     font-size: 11px
   }

   .small-btn {
     padding: 8px 14px;
     font-size: 11px
   }

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

   .benefit {
     align-items: center
   }

   .about-facts {
     flex-direction: column
   }

   .about-facts>div {
     flex-direction: row;
     align-items: center
   }

   .contact-card {
     padding: 18px
   }

   .contact-actions .btn {
     width: 100%
   }
 }

 @media(prefers-reduced-motion:reduce) {
   html {
     scroll-behavior: auto
   }

   *,
   *::before,
   *::after {
     transition: none !important;
     animation: none !important
   }
 }


 /* Footer bottom alignment and clickable attribution */
 .site-footer .footer-bottom .container.footer-bottom-inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 15px;
   width: min(1160px, calc(100% - 40px));
   margin-inline: auto;
 }

 .site-footer .footer-bottom .footer-copyright {
   margin: 0;
   text-align: left;
   color: #d3e2d8;
 }

 .site-footer .footer-bottom .footer-credit {
   display: inline-block;
   margin-left: auto;
   color: #b7db88;
   text-decoration: none;
   white-space: nowrap;
 }

 .site-footer .footer-bottom .footer-credit:hover,
 .site-footer .footer-bottom .footer-credit:focus-visible {
   text-decoration: underline;
 }

 @media (max-width: 600px) {
   .site-footer .footer-bottom .container.footer-bottom-inner {
     align-items: flex-start;
     flex-direction: column;
     gap: 7px;
   }

   .site-footer .footer-bottom .footer-credit {
     margin-left: 0;
   }
 }