/* ==========================================================================
   MREMBO NATURALS — MOBILE NAVIGATION DRAWER
   --------------------------------------------------------------------------
   The desktop navigation is styled in index.html alongside the rest of the
   header. This file covers the drawer that replaces it below 980px, where the
   dropdowns are not available.

   The drawer's job is the same as the desktop nav's: make the Shop / For
   Business fork obvious before the visitor reads anything else. The two
   audience sections carry a colour edge and a one-line description; the rest
   of the menu is deliberately plainer so those two stand out.
   ========================================================================== */

#m-drawer{
  position:fixed; inset:0; z-index:150; display:none;
  background:rgba(97,64,2,0.55); backdrop-filter:blur(4px);
}
#m-drawer.open{ display:block; }

#m-drawer .md-sheet{
  position:absolute; top:0; right:0; bottom:0; width:min(360px, 90vw);
  background:var(--cream); 
  padding:1.3rem 1.1rem 1.6rem; overflow-y:auto;
  display:flex; flex-direction:column;
  box-shadow:-24px 0 60px -30px rgba(97,64,2,0.7);
  animation:mdIn .26s cubic-bezier(.22,.9,.28,1);
  -webkit-overflow-scrolling:touch;
}
@keyframes mdIn{ from{ transform:translateX(100%) } to{ transform:none } }
@media (prefers-reduced-motion:reduce){ #m-drawer .md-sheet{ animation:none; } }

#m-drawer .md-top{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:0.9rem; flex:none;
}
#m-drawer .md-close{
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  background:var(--cream-2); border:0; color:var(--ink);
  font-size:1.3rem; line-height:1; flex:none;
}
#m-drawer .md-close:hover{ background:var(--mango); color:var(--ink); border-color:var(--mango); }

#m-drawer .md-body{ flex:1; }

/* ---------- plain top-level links (Home, Careers, Contact) ---------- */
#m-drawer .md-link{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.97rem;
  padding:0.85rem 0.7rem; border-radius:10px; color:var(--ink); cursor:pointer;
  display:block; border-bottom:1px solid rgba(245,227,192,0.7);
}
#m-drawer .md-link:hover, #m-drawer .md-link:focus-visible{ background:var(--cream-2); outline:none; }

/* ---------- expandable sections ---------- */
#m-drawer .md-sec{ border-bottom:1px solid rgba(245,227,192,0.7); }

#m-drawer .md-toggle{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between;
  gap:0.8rem; text-align:left; cursor:pointer;
  background:none; border:0; padding:0.85rem 0.7rem; font-family:inherit;
  border-radius:10px;
}
#m-drawer .md-toggle:hover, #m-drawer .md-toggle:focus-visible{ background:var(--cream-2); outline:none; }
#m-drawer .md-t{ display:flex; flex-direction:column; gap:0.15rem; min-width:0; }
#m-drawer .md-label{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.97rem; color:var(--ink);
}
#m-drawer .md-who{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.6rem;
  letter-spacing:0.14em; text-transform:uppercase;
}
#m-drawer .md-what{ font-size:0.76rem; line-height:1.45; color:var(--neutral); }

/* The chevron is the affordance that says "this opens". */
#m-drawer .md-chev{
  flex:none; width:9px; height:9px; margin-top:0.5rem;
  border-right:2px solid var(--neutral); border-bottom:2px solid var(--neutral);
  transform:rotate(45deg); transition:transform .22s ease;
}
#m-drawer .md-toggle[aria-expanded="true"] .md-chev{ transform:rotate(-135deg); margin-top:0.75rem; }

#m-drawer .md-panel{
  display:none; padding:0 0 0.7rem 0.7rem;
}
#m-drawer .md-toggle[aria-expanded="true"] + .md-panel{ display:block; }
#m-drawer .md-panel a{
  display:block; cursor:pointer;
  font-family:'Quicksand',sans-serif; font-weight:600; font-size:0.87rem;
  color:var(--neutral); padding:0.6rem 0.7rem; border-radius:8px;
  border-left:2px solid var(--line); margin-left:0.1rem;
}
#m-drawer .md-panel a:hover, #m-drawer .md-panel a:focus-visible{
  background:var(--cream-2); color:var(--ink); outline:none;
}
/* "Go to Shop" / "Go to For Business" — the section's own page, which the
   heading itself cannot link to because it is the accordion toggle. */
#m-drawer .md-panel .md-all{
  font-weight:700; color:var(--ink);
}

/* ---------- the two audience sections ---------- */
#m-drawer .md-shop .md-who{ color:var(--mango); }
#m-drawer .md-biz  .md-who{ color:var(--green-2); }
#m-drawer .md-shop .md-toggle{ border-left:3px solid var(--mango); }
#m-drawer .md-biz  .md-toggle{ border-left:3px solid var(--green); }
#m-drawer .md-shop .md-panel a{ border-left-color:var(--mango-soft, #F5E3C0); }
#m-drawer .md-biz  .md-panel a{ border-left-color:var(--green-soft); }

/* ---------- footer CTAs ---------- */
#m-drawer .md-cta{
  display:flex; flex-direction:column; gap:0.6rem;
  margin-top:1.4rem; padding-top:1.2rem;
  flex:none;
}
#m-drawer .md-cta .btn{ justify-content:center; }

/* ==========================================================================
   HOMEPAGE — AUDIENCE FORK AND TRUST SECTION
   --------------------------------------------------------------------------
   These belong to the homepage rather than the navigation, but they do the
   same job: routing a visitor to the path that is actually theirs. Kept here
   so all the wayfinding styling sits in one file.
   ========================================================================== */

/* ---------- the two pathways ---------- */
.path-card{  }
.path-card.path-b2c{ --p:var(--turmeric); }
.path-card.path-b2b{ --p:var(--mango); }
.path-body{ padding:2rem; display:flex; flex-direction:column; flex:1; }

.path-list{
  list-style:none; margin:1.1rem 0 0; padding:0;
  display:flex; flex-direction:column; gap:0.5rem; flex:1;
}
.path-list li{
  display:flex; gap:0.6rem; align-items:flex-start;
  font-size:0.87rem; line-height:1.55; color:var(--neutral);
}
.path-list li::before{
  content:""; flex:0 0 6px; width:6px; height:6px; border-radius:50%;
  background:var(--p); margin-top:0.52rem;
}
.path-cta{ display:flex; gap:0.7rem; align-items:center; flex-wrap:wrap; margin-top:1.4rem; }
@media (max-width:420px){ .path-cta{ flex-direction:column; align-items:stretch; } .path-cta .btn{ justify-content:center; } }

/* ---------- why mrembo ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media (max-width:960px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .why-grid{ grid-template-columns:1fr; } }

.why-card{
  background:var(--white); border:0; box-shadow:0 1px 2px rgba(97,64,2,0.06); border-radius:20px;
  padding:1.6rem 1.5rem 1.4rem; 
  display:flex; flex-direction:column; gap:0.5rem;
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.why-card:hover{ transform:translateY(-4px); box-shadow:0 26px 44px -26px rgba(97,64,2,0.3); }
.why-fig{
  font-family:'Quicksand', sans-serif; font-weight:500; line-height:1;
  font-size:1.9rem; color:var(--w, var(--green)); letter-spacing:-0.015em;
}
.why-card h3{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.92rem; color:var(--ink); }
.why-card p{ font-size:0.86rem; line-height:1.6; color:var(--neutral); flex:1; }
.why-link{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.78rem;
  color:var(--w, var(--green)); cursor:pointer; margin-top:0.3rem;
  align-self:flex-start; border-radius:6px;
}
.why-link:hover{ text-decoration:underline; }
.why-link:focus-visible{ outline:2px solid var(--turmeric); outline-offset:2px; }

.why-note{
  font-size:0.83rem; line-height:1.6; color:var(--neutral);
  margin-top:1.6rem; border-left:2px solid var(--line); padding-left:0.9rem;
}
.why-inline{ color:var(--terracotta); font-weight:600; cursor:pointer; }
.why-inline:hover{ text-decoration:underline; }

/* ==========================================================================
   TEAM
   --------------------------------------------------------------------------
   Founder featured above the rest of the team, matching the structure used
   on mrembonaturals.com. Members without a photograph yet get a monogram
   rather than a grey box or a stock portrait — js/site-nav.js swaps in the
   real image the moment the file appears in assets/.
   ========================================================================== */

.team-lead{ margin-bottom:1.6rem; }

.team-card{ margin:0; }
.team-photo{
  position:relative; overflow:hidden; border-radius:18px;
  background:var(--cream-2); border:0; box-shadow:0 1px 2px rgba(97,64,2,0.06);
  aspect-ratio:1/1;
}
.team-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.team-card:hover .team-photo img{ transform:scale(1.04); }

/* Monogram placeholder. Deliberately branded rather than a grey silhouette,
   so a missing photo still looks intentional. */
.team-photo[data-monogram]:not(.has-photo)::before{
  content:attr(data-monogram);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Quicksand', sans-serif; font-size:2.8rem; font-weight:500;
  color:var(--t, var(--green)); opacity:0.65; letter-spacing:0.04em;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.75), transparent 60%),
    color-mix(in srgb, var(--t, var(--green)) 12%, var(--cream-2));
}
/* color-mix is widely supported, but fall back cleanly where it is not. */
@supports not (background: color-mix(in srgb, red 10%, blue)) {
  .team-photo[data-monogram]:not(.has-photo)::before{ background:var(--cream-2); }
}

.team-card figcaption{ padding-top:0.9rem; }
.team-role{
  font-family:'Quicksand',sans-serif; font-weight:600; font-size:0.68rem;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--terracotta);
}
.team-name{
  font-family:'Quicksand', sans-serif; font-weight:500; font-size:1.15rem;
  margin-top:0.25rem; color:var(--ink);
}
.team-bio{ font-size:0.9rem; line-height:1.62; color:var(--neutral); margin-top:0.7rem; max-width:46ch; }

/* Founder: photo beside the text rather than above it. */
.team-founder{
  display:grid; grid-template-columns:260px 1fr; gap:2rem; align-items:center;
  background:var(--white); border:0; box-shadow:0 1px 2px rgba(97,64,2,0.06); border-radius:22px;
  padding:1.6rem;
}
.team-founder figcaption{ padding-top:0; }
.team-founder .team-name{ font-size:1.6rem; }
.team-founder .why-link{ margin-top:0.9rem; display:inline-block; }
@media (max-width:760px){
  .team-founder{ grid-template-columns:1fr; gap:1.2rem; padding:1.2rem; }
  .team-founder .team-photo{ max-width:220px; }
}

.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media (max-width:820px){ .team-grid{ grid-template-columns:repeat(3,1fr); gap:1rem; } }
@media (max-width:560px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:380px){ .team-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   SHOP REASSURANCE STRIP
   --------------------------------------------------------------------------
   The practical questions a first-time buyer has before they commit. Adapted
   from the strip on mrembonaturals.com. Every claim here already appears on
   Mrembo's own site or in the site footer — do not add one that does not.
   ========================================================================== */

.assure{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem;
}
@media (max-width:900px){ .assure{ grid-template-columns:repeat(2,1fr); gap:1.4rem; } }
@media (max-width:520px){ .assure{ grid-template-columns:1fr; gap:1.1rem; } }

.assure-item{ display:flex; gap:0.9rem; align-items:flex-start; }
.assure-ico{
  flex:none; width:42px; height:42px; border-radius:50%;
  background:var(--a-soft, var(--turmeric-soft));
  border:0;
  display:flex; align-items:center; justify-content:center;
}
.assure-ico svg{
  width:18px; height:18px; stroke:var(--a, var(--terracotta));
  fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.assure-item h3{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.72rem;
  letter-spacing:0.11em; text-transform:uppercase; color:var(--ink);
}
.assure-item p{ font-size:0.85rem; line-height:1.55; color:var(--neutral); margin-top:0.3rem; }