@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,500&family=Karla:wght@400;500;600;700&display=swap');

:root{
  --olive-deep:#5C7A2E;
  --olive-bright:#8FAE47;
  --olive-pale:#DCE3C4;
  --espresso:#2A1B0E;
  --espresso-2:#3B2712;
  --cream:#F2EEDD;
  --cream-2:#EAE4CC;
  --gold:#B98A2A;
  --ink:#241708;
  --paper:#FBFAF4;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Karla',sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.55;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Newsreader',serif;
  font-weight:500;
  line-height:1.14;
  color:var(--espresso);
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;height:auto;}
ul{list-style:none;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* ---------- NAV ---------- */
header.site-nav{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--cream-2);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 32px;
  max-width:1180px; margin:0 auto;
  position:relative;
}
.nav-brand{display:flex; align-items:center; gap:12px;}
.nav-brand img{height:50px; width:auto;}
.nav-brand span{
  font-family:'Newsreader',serif; font-size:1.4rem; color:var(--espresso); font-weight:600;
}
nav.nav-links{display:flex; align-items:center; gap:32px;}
nav.nav-links a{
  font-size:0.96rem; color:var(--espresso-2); font-weight:500;
  position:relative; padding:6px 0;
}
nav.nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
nav.nav-links a:hover::after,
nav.nav-links a.active::after{transform:scaleX(1);}
nav.nav-links a.active{color:var(--espresso);}
.nav-cta{
  background:var(--olive-deep); color:var(--paper);
  padding:10px 20px; border-radius:2px; font-weight:600; font-size:0.9rem;
  border:1px solid var(--olive-deep); white-space:nowrap;
}
.nav-cta:hover{background:var(--espresso); border-color:var(--espresso);}

.nav-toggle{
  display:none;
  width:38px; height:34px;
  background:none; border:none; cursor:pointer;
  flex-direction:column; justify-content:center; gap:6px;
  padding:0;
}
.nav-toggle span{
  display:block; height:2px; width:100%; background:var(--espresso);
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block; padding:14px 28px; font-weight:600; font-size:0.96rem;
  border-radius:2px; border:1px solid transparent; cursor:pointer;
}
.btn-gold{background:var(--gold); color:var(--espresso);}
.btn-gold:hover{background:#A57C22;}
.btn-outline{border-color:#8A7550; color:var(--paper);}
.btn-outline:hover{border-color:var(--paper); background:rgba(255,255,255,0.06);}
.btn-olive{background:var(--olive-deep); color:var(--paper);}
.btn-olive:hover{background:var(--espresso);}
.btn-outline-dark{border-color:#8a7550; color:var(--espresso);}
.btn-outline-dark:hover{background:var(--espresso); color:var(--paper);}
.btn-sm{padding:10px 18px; font-size:0.85rem;}

/* ---------- PAGE HERO (interior pages) ---------- */
.page-hero{
  background:var(--espresso); color:var(--paper);
  padding:70px 0 56px;
}
.page-hero .kicker{color:var(--olive-bright); font-family:'Newsreader',serif; font-style:italic; font-size:1.1rem; margin-bottom:14px;}
.page-hero h1{color:var(--paper); font-size:2.6rem; max-width:640px;}
.page-hero p{color:#E7E1CE; max-width:560px; margin-top:16px; font-size:1.05rem;}

/* ---------- HOME HERO ---------- */
.hero{
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--espresso);
  min-height:600px;
}
.hero-copy{
  color:var(--paper);
  display:flex; flex-direction:column; justify-content:center;
  padding:64px 64px 64px 32px;
  max-width:560px; margin-left:auto;
}
.hero-copy .kicker{
  color:var(--olive-bright); font-family:'Newsreader',serif; font-style:normal;
  font-size:1.15rem; margin-bottom:18px;
}
.hero-copy h1{font-size:3.1rem; color:var(--paper); margin-bottom:22px;}
.hero-copy p{color:#E7E1CE; font-size:1.08rem; max-width:440px; margin-bottom:34px;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap;}
.hero-media{position:relative; background:#1c1108;}
.hero-media img{width:100%; height:100%; object-fit:cover;}
.hero-media .tag{
  position:absolute; bottom:28px; left:28px;
  background:var(--paper); color:var(--espresso);
  padding:12px 18px; font-family:'Newsreader',serif; font-size:1rem;
  border-left:4px solid var(--gold);
}

/* ---------- TRUST STRIP ---------- */
.trust{background:var(--paper); border-bottom:1px solid var(--cream-2);}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr);}
.trust-item{padding:38px 30px; border-left:1px solid var(--cream-2);}
.trust-item:first-child{border-left:none;}
.trust-item svg{width:30px; height:30px; stroke:var(--olive-deep); margin-bottom:14px;}
.trust-item h4{font-size:1.06rem; margin-bottom:6px;}
.trust-item p{font-size:0.9rem; color:#5a4d38;}

/* ---------- SECTION HEADS ---------- */
.section{padding:88px 0;}
.section-head{max-width:640px; margin-bottom:52px;}
.section-head h2{font-size:2.3rem; margin-bottom:14px;}
.section-head p{color:#5a4d38; font-size:1.05rem;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-foot{margin-top:48px;}

/* ---------- PRODUCTS (home teaser + shop grid) ---------- */
.products{background:var(--cream);}
.product-grid{
  display:grid; grid-template-columns:1.15fr 1fr 1fr;
  grid-template-rows:auto auto; gap:26px;
}
.product-grid.catalog{
  grid-template-columns:repeat(3,1fr); grid-template-rows:none;
}
.p-card{
  background:var(--paper); border:1px solid var(--cream-2);
  display:flex; flex-direction:column; overflow:hidden;
}
.p-card.featured{grid-row:span 2;}
.p-card .p-img{position:relative; overflow:hidden; aspect-ratio:4/3;}
.p-card.featured .p-img{aspect-ratio:4/5;}
.p-card .p-img img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.p-card:hover .p-img img{transform:scale(1.04);}
.p-img.fit-contain{background:#E6E6EA; box-sizing:border-box; padding:56px 8px 8px;}
.p-img.fit-contain img{object-fit:contain;}
.p-card:hover .p-img.fit-contain img{transform:none;}
.p-price{
  position:absolute; top:14px; right:14px;
  background:var(--espresso); color:var(--paper);
  font-family:'Newsreader',serif; font-size:0.92rem; padding:6px 12px;
}
.p-body{padding:20px 22px 24px; display:flex; flex-direction:column; flex:1;}
.p-body h3{font-size:1.28rem; margin-bottom:6px;}
.p-card.featured .p-body h3{font-size:1.55rem;}
.p-body p{font-size:0.92rem; color:#5a4d38; flex:1;}
.p-body .p-order{
  margin-top:16px; font-size:0.85rem; font-weight:600; color:var(--olive-deep);
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
}
.p-body .p-order:hover{color:var(--espresso);}

.store-badge{
  display:flex; align-items:center; gap:8px;
  background:#FBEAEA; color:#B3261E;
  padding:9px 12px; font-size:0.8rem; font-weight:700;
  margin-bottom:14px; border-radius:2px; line-height:1.3;
  border:1px solid #EFC7C4;
}
.store-badge svg{width:16px; height:16px; stroke:#B3261E; flex:0 0 16px;}

.pack-toggle{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
.pack-btn{
  font-family:'Karla',sans-serif; font-size:0.82rem; font-weight:600;
  padding:7px 14px; border:1px solid var(--olive-deep); background:transparent;
  color:var(--olive-deep); cursor:pointer; border-radius:2px;
  transition:background .2s ease, color .2s ease;
}
.pack-btn.active, .pack-btn:hover{background:var(--olive-deep); color:var(--paper);}
.pack-note{font-size:0.78rem; color:#8a7550; margin:-8px 0 14px; font-style:italic;}

/* ---------- BENEFITS (dark) ---------- */
.benefits{background:var(--espresso); color:var(--paper);}
.benefits .section-head h2{color:var(--paper);}
.benefits .section-head p{color:#C8BFA5;}
.benefit-cols{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
.benefit-col h3{
  color:var(--olive-bright); font-size:1.4rem; margin-bottom:20px;
  padding-bottom:14px; border-bottom:1px solid #4A3620;
}
.benefit-col li{
  display:flex; gap:12px; padding:10px 0; font-size:0.98rem; color:#E7E1CE;
  border-bottom:1px solid #3C2A16;
}
.benefit-col li:last-child{border-bottom:none;}
.benefit-col li svg{flex:0 0 18px; width:18px; height:18px; margin-top:3px; stroke:var(--gold);}

/* ---------- VALUE GRID (about) ---------- */
.value-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.value-card{background:var(--paper); border:1px solid var(--cream-2); padding:30px 26px;}
.value-card svg{width:28px; height:28px; stroke:var(--olive-deep); margin-bottom:16px;}
.value-card h4{font-size:1.05rem; margin-bottom:8px;}
.value-card p{font-size:0.9rem; color:#5a4d38;}

/* ---------- STORY (about) ---------- */
.story{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.story-copy p{color:#5a4d38; margin-bottom:16px; max-width:480px;}
.story-media img{width:100%; border:1px solid var(--cream-2);}

/* ---------- COMMUNITY ---------- */
.community{display:grid; grid-template-columns:0.85fr 1.15fr; background:var(--paper);}
.community-media img{width:100%; height:100%; object-fit:cover; min-height:460px;}
.community-copy{padding:70px 60px; display:flex; flex-direction:column; justify-content:center;}
.community-copy h2{font-size:2.1rem; margin-bottom:20px;}
.community-copy p{color:#5a4d38; margin-bottom:16px; max-width:480px;}

/* ---------- GALLERY STRIP ---------- */
.gallery{background:var(--cream);}
.gallery-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.gallery-grid figure{background:var(--paper); border:1px solid var(--cream-2);}
.gallery-grid img{width:100%; height:340px; object-fit:cover;}
.gallery-grid figcaption{
  padding:14px 18px; font-size:0.9rem; color:#5a4d38; font-style:italic;
  font-family:'Newsreader',serif;
}

/* ---------- PROCESS (contact) ---------- */
.process-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.process-step{position:relative; padding-top:8px;}
.process-step .num{
  font-family:'Newsreader',serif; font-style:italic; color:var(--gold);
  font-size:1.6rem; display:block; margin-bottom:10px;
}
.process-step h4{font-size:1.05rem; margin-bottom:8px;}
.process-step p{font-size:0.9rem; color:#5a4d38;}

/* ---------- FAQ ---------- */
.faq{max-width:760px;}
.faq-item{border-top:1px solid var(--cream-2); padding:22px 0;}
.faq-item:last-child{border-bottom:1px solid var(--cream-2);}
.faq-item h4{font-size:1.08rem; margin-bottom:8px;}
.faq-item p{font-size:0.95rem; color:#5a4d38;}

/* ---------- CONTACT ---------- */
.contact{background:var(--olive-pale);}
.contact-inner{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.contact h2{font-size:2.2rem; margin-bottom:16px;}
.contact p{color:#40501f; margin-bottom:28px; max-width:420px;}
.contact-list li{
  display:flex; gap:14px; padding:12px 0; border-top:1px solid #C7D2A0; align-items:center;
}
.contact-list li:first-child{border-top:none;}
.contact-list svg{width:20px; height:20px; stroke:var(--olive-deep); flex:0 0 20px;}
.contact-list a, .contact-list span{font-size:1rem; color:var(--espresso-2); font-weight:600;}
.contact-card{background:var(--espresso); color:var(--paper); padding:48px 42px;}
.contact-card h3{color:var(--paper); font-size:1.5rem; margin-bottom:14px;}
.contact-card p{color:#D9D2BB; font-size:0.95rem; margin-bottom:26px;}

/* ---------- CTA BANNER ---------- */
.cta-banner{
  background:var(--gold); color:var(--espresso);
  padding:56px 0; text-align:center;
}
.cta-banner h2{color:var(--espresso); font-size:2rem; margin-bottom:10px;}
.cta-banner p{margin-bottom:26px; font-size:1.05rem;}
.cta-banner .btn-outline-dark{border-color:var(--espresso);}

/* ---------- FOOTER ---------- */
footer{background:var(--espresso); color:#C8BFA5; padding:56px 0 26px;}
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding-bottom:36px; border-bottom:1px solid #4A3620; margin-bottom:22px;
  flex-wrap:wrap; gap:30px;
}
.footer-brand{display:flex; align-items:center; gap:12px;}
.footer-brand img{height:46px;}
.footer-brand span{font-family:'Newsreader',serif; color:var(--paper); font-size:1.3rem;}
.footer-links{display:flex; gap:40px; flex-wrap:wrap;}
.footer-links a{font-size:0.92rem; color:#C8BFA5;}
.footer-links a:hover{color:var(--paper);}
.footer-bottom{
  display:flex; justify-content:space-between; font-size:0.82rem; color:#8A7960;
  flex-wrap:wrap; gap:10px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  nav.nav-links{
    display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--paper); border-bottom:1px solid var(--cream-2);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  nav.nav-links.open{max-height:400px;}
  nav.nav-links a{padding:14px 32px; width:100%; border-top:1px solid var(--cream-2);}
  nav.nav-links a::after{display:none;}
  .nav-toggle{display:flex;}
  .nav-cta{display:none;}

  .hero{grid-template-columns:1fr;}
  .hero-copy{max-width:100%; margin-left:0; padding:56px 24px;}
  .hero-copy h1{font-size:2.3rem;}
  .hero-media{min-height:340px;}
  .page-hero h1{font-size:2rem;}

  .trust-grid{grid-template-columns:repeat(2,1fr);}
  .trust-item{border-left:none; border-top:1px solid var(--cream-2);}

  .product-grid{grid-template-columns:1fr 1fr;}
  .product-grid.catalog{grid-template-columns:1fr 1fr;}
  .p-card.featured{grid-row:span 1;}
  .p-card.featured .p-img{aspect-ratio:4/3;}

  .benefit-cols{grid-template-columns:1fr; gap:36px;}
  .value-grid{grid-template-columns:1fr 1fr;}
  .story{grid-template-columns:1fr; gap:32px;}
  .process-grid{grid-template-columns:1fr 1fr; gap:32px;}

  .community{grid-template-columns:1fr;}
  .community-media img{min-height:280px;}
  .community-copy{padding:48px 24px;}
  .gallery-grid{grid-template-columns:1fr;}
  .contact-inner{grid-template-columns:1fr;}
  .footer-top{flex-direction:column;}
  .wrap{padding:0 20px;}
  .section{padding:60px 0;}
}
@media (max-width:560px){
  .product-grid{grid-template-columns:1fr;}
  .product-grid.catalog{grid-template-columns:1fr;}
  .value-grid{grid-template-columns:1fr;}
  .process-grid{grid-template-columns:1fr;}
  .hero-copy h1{font-size:1.95rem;}
  .nav-inner{padding:12px 16px;}
  .nav-brand img{height:38px;}
  .nav-brand span{font-size:1.15rem;}
}