/* #######################################################################
 * 🐢 TPL — Home CSS
 * Version: v6.0.3
 * Change: Keep Turtle hero + Stories, restore Products accordion styles
 ####################################################################### */
.u-green{color:var(--t-green)}
.lead{color:var(--t-muted);max-width:62ch}

/* Masthead (About hero) */
.masthead{
  max-width:1200px;margin:36px auto 8px;padding:0 20px;
  display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center
}
.masthead h1{font-size:clamp(28px,4.2vw,48px);line-height:1.15;margin:0 0 18px}
.masthead .copy{display:flex;flex-direction:column;gap:18px}

/* Hero card (Turtle green gradient) */
.hero-card{
  height:360px;border-radius:18px;overflow:hidden;
  background:linear-gradient(135deg,#e9f7ec 0%, #f3fcf6 45%, #e3f6ea 100%);
  box-shadow:0 10px 30px rgba(0,0,0,.06)
}
@media (max-width:960px){ .masthead{grid-template-columns:1fr;gap:22px} .hero-card{height:300px} }

/* Stories section */
.stories{max-width:1200px;margin:48px auto;padding:0 20px}
.stories h2{font-size:clamp(20px,2.6vw,28px);margin:0 0 16px;color:var(--t-green)}
.story-grid{
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px
}
.story-grid a{
  display:flex;flex-direction:column;gap:8px;padding:12px;
  border:1px solid #d6eedd;border-radius:12px;
  background:linear-gradient(135deg,#f8fcf9 0%,#ecf9f0 100%);
  box-shadow:0 4px 12px rgba(26,143,61,.06);
  transition:box-shadow .25s ease, transform .25s ease
}
.story-grid a:hover{box-shadow:0 8px 18px rgba(26,143,61,.1);transform:translateY(-2px);text-decoration:none}
.story-grid .thumb{height:120px;background:#e9f7ec;border-radius:8px}
.story-grid .title{font-weight:600;color:var(--t-fg)}
.story-grid .read{color:var(--t-green);font-weight:600}
@media (max-width:960px){ .story-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .story-grid{grid-template-columns:1fr} }

/* Products page (RESTORED) */
.products-hero{max-width:1100px;margin:24px auto 8px;padding:0 20px}
.products-hero h1{font-size:44px;margin:6px 0 12px}
.products-accordion{max-width:1100px;margin:0 auto 36px;padding:0 20px}
.fold{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:14px;border:1px solid #dadce0;background:#fff;border-radius:10px;
  margin:12px 0;cursor:pointer
}
.fold .caret{
  width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:8px solid var(--t-fg);transition:transform .18s
}
.fold.open .caret{transform:rotate(180deg)}
.product-list{
  list-style:none;margin:0 0 12px 0;padding:0;display:none;
  grid-template-columns:repeat(3,1fr);gap:12px
}
.product-list.show{display:grid}
.product-list a{display:block;padding:12px;border:1px solid #dadce0;border-radius:10px;background:#fff}