:root{
  --accent: #327105;
  --accent-dark: #275a04;
  --accent-soft: #82a669;
  --dark: #16210a;
  --dark-2: #1f2e10;
  --light: #faf6ef;
  --tint: #f0ece1;
  --tint-2: #e7e0cf;
  --border: #d8cfb8;
  --ink: #1c1a14;
  --muted: #5c5648;
  --nav-h: 66px;
  --banner: 42px;
  --maxw: 1180px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}
body{
  font-family:"Arvo",Georgia,serif;
  font-weight:400;
  color:var(--ink);
  background:var(--light);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%}

h1,h2,h3,h4{font-weight:700;line-height:1.12;letter-spacing:-.005em;color:var(--ink)}
h1{font-size:clamp(2.1rem,5.5vw,3.7rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
h3{font-size:1.25rem}
h4{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
p{color:inherit}

.eyebrow{
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:700;
  margin-bottom:14px;
}
.eyebrow-light{color:var(--accent-soft)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:inherit;
  font-weight:700;
  font-size:1rem;
  text-decoration:none;
  padding:15px 26px;
  border:2px solid transparent;
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .15s ease;
  min-height:44px;
}
.btn-filled{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-filled:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn-outline{background:transparent;color:var(--light);border-color:rgba(250,246,239,.65)}
.btn-outline:hover{background:rgba(250,246,239,.08);border-color:var(--light)}
.btn-outline-light{background:transparent;color:var(--light);border-color:rgba(250,246,239,.5)}
.btn-outline-light:hover{background:rgba(250,246,239,.08)}
.btn:active{transform:translateY(1px)}

/* ---------- Nav ---------- */
.site-nav{
  position:sticky;
  top:42px;
  z-index:100;
  background:var(--light);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:24px;
  padding:12px 24px;
  min-height:var(--nav-h);
}
.wordmark{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--ink);
  font-weight:700;
  font-size:1.15rem;
}
.wordmark-mark{color:var(--accent);display:inline-flex}
.wordmark-text{letter-spacing:-.01em}

.nav-links{display:flex;gap:28px;margin-left:auto}
.nav-links a{
  text-decoration:none;
  color:var(--ink);
  font-size:.95rem;
  font-weight:400;
  position:relative;
  padding:6px 0;
  transition:color .2s ease;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s ease;
}
.nav-links a:hover{color:var(--accent)}
.nav-links a:hover::after{transform:scaleX(1)}

.nav-cta{
  display:inline-flex;
  align-items:center;
  gap:.45em;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:.92rem;
  padding:12px 20px;
  border:2px solid var(--accent);
  transition:background .2s ease,border-color .2s ease;
  white-space:nowrap;
}
.nav-cta:hover{background:var(--accent-dark);border-color:var(--accent-dark)}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  background:none;
  border:none;
  cursor:pointer;
  margin-left:auto;
}
.nav-toggle span{
  display:block;
  width:24px;
  height:2px;
  background:var(--ink);
  transition:transform .25s ease,opacity .2s ease;
}

.mobile-nav{
  position:sticky;
  top:calc(42px + var(--nav-h));
  z-index:99;
  background:var(--light);
  border-bottom:1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding:8px 24px 18px;
}
.mobile-nav a{
  text-decoration:none;
  color:var(--ink);
  font-size:1.05rem;
  padding:14px 0;
  border-bottom:1px solid var(--tint-2);
  min-height:44px;
  display:flex;
  align-items:center;
}
.mobile-cta{
  background:var(--accent);
  color:#fff !important;
  border:2px solid var(--accent);
  margin-top:14px;
  justify-content:center;
  border-bottom:none;
}
.mobile-cta:hover{background:var(--accent-dark)}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:calc(100vh - var(--nav-h) - var(--banner));
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--dark);
}
.hero-media{position:absolute;inset:0}
.hero-media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
}
.hero-scrim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top,rgba(16,24,8,.92) 0%,rgba(16,24,8,.55) 45%,rgba(16,24,8,.28) 100%);
}
.hero-content{
  position:relative;
  z-index:2;
  padding:0 24px 88px;
  max-width:760px;
  width:100%;
  margin:0 auto;
}
.hero-content h1{color:#fff;margin-bottom:18px}
.hero-sub{
  color:rgba(250,246,239,.92);
  font-size:clamp(1rem,2vw,1.18rem);
  max-width:46ch;
  margin-bottom:30px;
}
.hero-content .eyebrow{color:var(--accent-soft)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- About / Trust ---------- */
.about{padding:96px 0;background:var(--light)}
.about-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:64px;
  align-items:start;
}
.about-text h2{margin-bottom:20px}
.about-text p{margin-bottom:16px;color:var(--muted)}
.about-text p:first-of-type{color:var(--ink)}

.checklist{
  background:var(--tint);
  border:1px solid var(--border);
  border-left:4px solid var(--accent);
  padding:32px 28px;
}
.checklist-title{
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:20px;
}
.checklist ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.checklist li{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:1rem;
  color:var(--ink);
}
.checklist svg{color:var(--accent);flex-shrink:0}

/* ---------- Products ---------- */
.products{padding:96px 0;background:var(--tint)}
.section-head{text-align:center;max-width:620px;margin:0 auto 48px}
.section-head h2{margin-top:4px}

.products-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  grid-template-rows:auto auto;
  gap:24px;
}
.product-feature{
  grid-row:1 / span 2;
  background:var(--light);
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.product-img{overflow:hidden;background:var(--dark)}
.product-img img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .5s ease}
.product-feature .product-img img{aspect-ratio:4/5}
.product-feature:hover .product-img img,
.product-compact:hover .product-img img{transform:scale(1.03)}

.product-body{padding:26px}
.product-tag{
  display:inline-block;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:700;
  margin-bottom:10px;
}
.product-feature .product-body{padding:34px}
.product-feature h3{font-size:1.6rem;margin-bottom:12px}
.product-feature p{color:var(--muted);font-size:1.02rem}

.product-compact{
  background:var(--light);
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.product-compact .product-img img{aspect-ratio:5/4}
.product-compact .product-body{padding:22px}
.product-compact h3{font-size:1.15rem;margin-bottom:8px}
.product-compact p{color:var(--muted);font-size:.95rem}

.category-strip{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:40px;
}
.category-strip li{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
  background:var(--light);
  border:1px solid var(--border);
  transition:border-color .2s ease;
}
.category-strip li:hover{border-color:var(--accent-soft)}
.cat-img{overflow:hidden}
.cat-img img{width:100%;aspect-ratio:1/1;object-fit:cover}
.cat-name{
  font-weight:700;
  font-size:1rem;
  color:var(--ink);
  text-align:center;
  letter-spacing:.02em;
}

/* ---------- Proof ---------- */
.proof{padding:96px 0;background:var(--light)}
.proof-inner{
  max-width:820px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}
.quote-mark{color:var(--accent-soft)}
.proof blockquote{position:relative}
.proof blockquote p{
  font-size:clamp(1.25rem,2.8vw,1.7rem);
  line-height:1.4;
  font-weight:700;
  color:var(--dark);
  font-style:italic;
}
.proof blockquote footer{
  margin-top:22px;
  font-size:1rem;
  color:var(--muted);
  font-style:normal;
}
.proof blockquote cite{font-weight:700;color:var(--ink);font-style:normal}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;
  background:var(--dark);
  padding:96px 0;
  overflow:hidden;
}
.cta-pattern{
  position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(130,166,105,.16) 1.5px,transparent 1.6px);
  background-size:22px 22px;
  opacity:.6;
}
.cta-inner{position:relative;z-index:2;max-width:680px;text-align:center;margin:0 auto}
.cta-inner h2{color:#fff;margin-bottom:16px}
.cta-inner p{color:rgba(250,246,239,.82);margin-bottom:30px;font-size:1.05rem}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ---------- Footer ---------- */
.site-footer{background:var(--dark-2);color:rgba(250,246,239,.85)}
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:40px;
  padding:64px 24px;
  max-width:var(--maxw);
  margin:0 auto;
}
.footer-brand{display:flex;gap:14px;align-items:flex-start}
.footer-mark{color:var(--accent-soft);flex-shrink:0;margin-top:2px}
.footer-brand strong{display:block;color:#fff;font-size:1.05rem;margin-bottom:6px}
.footer-brand p{font-size:.92rem;color:rgba(250,246,239,.7);line-height:1.5}

.footer-col h4{color:var(--accent-soft);margin-bottom:16px}
.footer-col a{
  display:block;
  text-decoration:none;
  color:rgba(250,246,239,.85);
  font-size:.95rem;
  padding:5px 0;
  transition:color .2s ease;
}
.footer-col a:hover{color:#fff}
.footer-note{
  font-size:.85rem;
  color:rgba(250,246,239,.6);
  margin-top:12px;
  line-height:1.5;
}

.social-row{display:flex;gap:14px;margin-bottom:0}
.social-row a{
  width:40px;height:40px;
  display:inline-flex;
  align-items:center;justify-content:center;
  border:1px solid rgba(250,246,239,.25);
  color:rgba(250,246,239,.85);
  padding:0;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.social-row a:hover{
  border-color:var(--accent-soft);
  color:#fff;
  background:rgba(130,166,105,.1);
}

.footer-bottom{border-top:1px solid rgba(250,246,239,.12);padding:20px 0}
.footer-bottom p{
  font-size:.85rem;
  color:rgba(250,246,239,.55);
  text-align:center;
}

/* ---------- Scroll reveal (applied by JS) ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width: 880px){
  .about-grid{grid-template-columns:1fr;gap:36px}
  .products-grid{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .product-feature{grid-row:auto}
  .product-feature .product-img img{aspect-ratio:16/10}
  .category-strip{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer-brand{grid-column:1 / -1}
}

@media (max-width: 700px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .nav-toggle{display:flex}

  .hero{min-height:78vh}
  .hero-content{padding-bottom:56px}

  .about,.products,.proof,.cta-band{padding:64px 0}
  .products-grid{gap:18px}
  .product-feature .product-body{padding:24px}
  .cta-actions{flex-direction:column;align-items:stretch}
  .cta-actions .btn{justify-content:center;width:100%}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
}

@media (max-width: 480px){
  .category-strip{grid-template-columns:1fr 1fr;gap:14px}
  .footer-grid{grid-template-columns:1fr}
  .footer-brand{grid-column:auto}
  .hero-content{padding:0 20px 48px}
  .container{padding:0 20px}
  .site-nav{padding:10px 20px}
}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .reveal{opacity:1 !important;transform:none !important}
  html{scroll-behavior:auto}
}