:root{
  --ivory:#FAF7F2;
  --ivory-dim:#F1EBE0;
  --olive:#556B2F;
  --olive-deep:#38471E;
  --olive-line:#7C8F58;
  --gold:#B8912E;
  --gold-soft:#E4C77E;
  --ink:#2B2A22;
  --ink-soft:#5C5A4C;
  --white:#FFFFFF;
  --shadow: 0 12px 30px rgba(56,71,30,0.10);
  --shadow-soft: 0 4px 16px rgba(56,71,30,0.08);
  --radius: 18px;
  --serif: 'Fraunces', serif;
  --script: 'Cormorant Garamond', serif;
  --sans: 'Work Sans', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:1240px; margin:0 auto; padding:0 32px;}
h1,h2,h3,h4{font-family:var(--serif); font-weight:500; color:var(--olive-deep); letter-spacing:-0.01em;}
.eyebrow{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:0.22em;
  font-size:0.72rem; font-weight:600; color:var(--gold);
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 30px; border-radius:999px; font-family:var(--sans);
  font-weight:600; font-size:0.92rem; letter-spacing:0.01em;
  cursor:pointer; border:1.5px solid transparent; transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-gold{ background:var(--gold); color:var(--white); box-shadow:0 10px 24px rgba(184,145,46,0.35);}
.btn-gold:hover{ box-shadow:0 14px 30px rgba(184,145,46,0.45);}
.btn-outline{ background:transparent; border-color:var(--olive); color:var(--olive-deep);}
.btn-outline:hover{ background:var(--olive); color:var(--white);}
.btn-line{ background:transparent; border-bottom:1.5px solid var(--gold); border-radius:0; padding:4px 2px; font-size:0.85rem;}

/* ===== HEADER ===== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,247,242,0.92); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(85,107,47,0.14);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 32px; max-width:1240px; margin:0 auto;}
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0;}
.brand-mark{ width:42px; height:42px; object-fit:contain; }
.brand-text{ display:block; font-family:var(--serif); font-size:1.15rem; letter-spacing:0.08em; color:var(--olive-deep); white-space:nowrap; line-height:1.1;}
.brand-sub{ display:block; font-family:var(--sans); font-size:0.58rem; letter-spacing:0.28em; color:var(--gold); text-transform:uppercase; white-space:nowrap;}
.nav-links{ display:flex; align-items:center; gap:26px;}
.nav-links a{ font-size:0.85rem; font-weight:500; color:var(--ink-soft); position:relative; padding:6px 0; white-space:nowrap;}
.nav-links a:hover{ color:var(--olive-deep);}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--gold);
  transition:width .3s ease;
}
.nav-links a:hover::after{ width:100%;}
.nav-cta{ display:flex; align-items:center; gap:18px; flex-shrink:0;}
.nav-cta .login{ font-size:0.85rem; font-weight:600; color:var(--olive-deep); white-space:nowrap;}
.nav-cta .btn{ white-space:nowrap;}
.burger{ display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none;}
.burger span{ width:24px; height:2px; background:var(--olive-deep); display:block;}
/* CTA shown inside the mobile dropdown only. */
.nav-links__cta{ display:none;}

/* ===== HERO ===== */
.hero{
  position:relative; overflow:hidden;
  padding:120px 32px 100px;
  background:
    radial-gradient(circle at 85% 12%, rgba(184,145,46,0.14), transparent 45%),
    radial-gradient(circle at 8% 90%, rgba(85,107,47,0.14), transparent 50%),
    var(--ivory);
}
.hero-inner{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center;}
/* Layered product-photo composition. */
.hero-media{ position:relative; width:100%; max-width:540px; margin:0 auto; }
/* Offset outline behind the main photo for depth. */
.hero-media__frame{
  position:absolute; top:-16px; right:-22px; width:74%; height:72%;
  border:1.5px solid rgba(184,145,46,0.42); border-radius:24px;
  background:linear-gradient(135deg, rgba(228,199,126,0.16), transparent 62%);
  z-index:1;
}
/* Main product photo, pushed right so the seal + inset can hug its left edge. */
.hero-media__main{
  position:relative; z-index:2; width:88%; margin:34px 0 0 auto;
  border-radius:20px; overflow:hidden; box-shadow:var(--shadow);
  border:1px solid rgba(85,107,47,0.12);
}
.hero-media__main img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
/* Smaller overlapping photo at the lower-left. */
.hero-media__inset{
  position:absolute; left:-8px; bottom:-30px; width:46%; z-index:3;
  border-radius:16px; overflow:hidden; border:6px solid var(--ivory);
  box-shadow:var(--shadow);
}
.hero-media__inset img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
/* Round brand seal at the upper-left. */
.hero-media__seal{
  position:absolute; top:14px; left:-16px; width:96px; height:96px; z-index:4;
  border-radius:50%; background:var(--white); border:1px solid rgba(184,145,46,0.4);
  box-shadow:var(--shadow-soft); display:flex; align-items:center; justify-content:center;
}
.hero-media__seal img{ width:64%; height:auto; }
.hero h1{ font-size:clamp(2.6rem, 4.2vw, 3.8rem); line-height:1.08; margin-bottom:26px;}
.hero h1 em{ font-family:var(--script); font-style:italic; color:var(--gold); font-weight:500;}
.hero p.lead{ font-size:1.08rem; color:var(--ink-soft); max-width:480px; margin-bottom:36px;}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:44px;}
.verse{ font-family:var(--script); font-style:italic; font-size:1.1rem; color:var(--olive-deep); border-left:2px solid var(--gold); padding-left:16px;}
.verse span{ display:block; font-family:var(--sans); font-style:normal; font-size:0.75rem; letter-spacing:0.1em; color:var(--ink-soft); margin-top:6px; text-transform:uppercase;}

/* ===== IMPACT COUNTER ===== */
.impact-band{ background:var(--olive-deep); padding:52px 32px; position:relative; overflow:hidden;}
.impact-band::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(228,199,126,0.14), transparent 60%);
}
.impact-grid{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative;}
.impact-stat{ text-align:center; padding:12px; border-right:1px solid rgba(255,255,255,0.12);}
.impact-stat:last-child{ border-right:none;}
.impact-stat .num{ font-family:var(--serif); font-size:clamp(1.6rem,2.6vw,2.3rem); color:var(--gold-soft); font-weight:500;}
.impact-stat .lbl{ font-size:0.78rem; color:rgba(250,247,242,0.75); margin-top:6px; letter-spacing:0.02em;}

/* ===== SECTION SHELL ===== */
section{ padding:100px 32px;}
.section-head{ max-width:640px; margin:0 auto 56px; text-align:center;}
.section-head h2{ font-size:clamp(2rem,3vw,2.6rem); margin-top:14px;}
.section-head p{ color:var(--ink-soft); margin-top:16px; font-size:1rem;}
.section-head.left{ margin-left:0; text-align:left;}
.head-row{ display:flex; justify-content:space-between; align-items:flex-end; max-width:1240px; margin:0 auto 48px; gap:24px; flex-wrap:wrap;}

/* ===== GLOBAL NETWORK MAP ===== */
.network{ background:var(--ivory-dim);}
.map-shell{
  max-width:1240px; margin:0 auto; background:var(--olive-deep); border-radius:28px;
  padding:60px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
  box-shadow:var(--shadow);
}
.map-shell svg{ width:100%; height:auto;}
.map-shell .map-img{ width:100%; height:auto; border-radius:16px; display:block;}
.map-dot{ fill:var(--gold-soft); animation:pulse-dot 2.6s ease-in-out infinite;}
@keyframes pulse-dot{ 0%,100%{ opacity:0.5; r:3.2;} 50%{ opacity:1; r:5;} }
.country-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px 32px;}
.country-list li{
  color:rgba(250,247,242,0.85); font-size:0.92rem; padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.12);
  display:flex; align-items:center; gap:10px;
}
.country-list li span{ color:var(--gold-soft); font-family:var(--serif); font-size:0.85rem;}
/* Fixed name column so the link dots and supplier counts line up in a tidy column,
   with the number sitting right next to the country instead of pushed to the edge. */
.country-list li .country-name{
  color:inherit; font-family:inherit; font-size:inherit;
  flex:0 0 88px; line-height:1.25;
}
.country-links{ display:inline-flex; gap:5px; flex:0 0 auto; min-width:63px;}
.country-count{ flex:0 0 auto;}
.country-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:17px; border-radius:50%;
  font-family:var(--sans); font-size:0.62rem; font-weight:600; line-height:1; text-decoration:none;
  color:var(--gold-soft); background:rgba(228,199,126,0.14);
  border:1px solid rgba(228,199,126,0.35);
  transition:background .2s ease, color .2s ease;
}
.country-link:hover, .country-link:focus{ background:var(--gold-soft); color:var(--olive-deep); outline:none;}
.map-shell h3{ color:var(--white); font-size:1.6rem;}
.map-shell .eyebrow{ color:var(--gold-soft);}
.map-shell p.desc{ color:rgba(250,247,242,0.75); margin:14px 0 24px; font-size:0.95rem;}

/* ===== MARKETPLACE ===== */
.cat-scroll{ display:flex; gap:14px; overflow-x:auto; max-width:1240px; margin:0 auto 56px; padding:4px 0 12px;}
.cat-pill{
  flex:0 0 auto; padding:10px 22px; border-radius:999px; border:1px solid var(--olive-line);
  font-size:0.85rem; font-weight:500; color:var(--olive-deep); background:var(--white); cursor:pointer;
  transition:all .25s ease; white-space:nowrap;
}
.cat-pill.active, .cat-pill:hover{ background:var(--olive); color:var(--white); border-color:var(--olive);}
.product-grid{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
.product-card{
  background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft);
  transition:transform .3s ease, box-shadow .3s ease;
}
.product-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow);}
.product-img{
  height:180px; background:linear-gradient(135deg, var(--ivory-dim), #E9E2D2);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.product-img .impact-badge{
  position:absolute; top:12px; right:12px; background:var(--olive); color:var(--white);
  font-size:0.65rem; padding:4px 10px; border-radius:999px; letter-spacing:0.03em;
}
.product-body{ padding:20px;}
.product-body .supplier{ font-size:0.72rem; color:var(--gold); text-transform:uppercase; letter-spacing:0.08em; font-weight:600;}
.product-body h4{ font-size:1.05rem; margin:8px 0 6px;}
.product-body .price-row{ display:flex; justify-content:space-between; align-items:center; margin-top:14px;}
.price{ font-family:var(--serif); font-size:1.2rem; color:var(--olive-deep);}
.rating{ font-size:0.78rem; color:var(--ink-soft);}
.buy-btn{
  margin-top:14px; width:100%; padding:11px; border-radius:10px; background:var(--ivory-dim);
  border:1px solid var(--olive-line); color:var(--olive-deep); font-weight:600; font-size:0.85rem;
  cursor:pointer; transition:all .25s ease;
}
.buy-btn:hover{ background:var(--olive); color:var(--white); border-color:var(--olive);}

/* ===== FEATURED SUPPLIERS ===== */
.suppliers{ background:var(--ivory-dim);}
.supplier-grid{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.supplier-card{
  background:var(--white); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow-soft);
  border-top:3px solid var(--gold);
}
.supplier-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px;}
.verified{ font-size:0.65rem; background:var(--olive); color:var(--white); padding:4px 9px; border-radius:999px; letter-spacing:0.03em;}
.supplier-card h4{ font-size:1.15rem; margin-bottom:4px;}
.supplier-card .loc{ font-size:0.8rem; color:var(--ink-soft); margin-bottom:14px;}
.supplier-card p{ font-size:0.88rem; color:var(--ink-soft); margin-bottom:18px;}
.supplier-meta{ display:flex; justify-content:space-between; font-size:0.78rem; color:var(--olive-deep); border-top:1px solid var(--ivory-dim); padding-top:14px;}

/* ===== CHURCH HUB ===== */
.church{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; max-width:1240px; margin:0 auto; align-items:center;}
.church-visual{
  aspect-ratio:4/5; border-radius:24px; background:linear-gradient(160deg, var(--olive), var(--olive-deep));
  position:relative; overflow:hidden; box-shadow:var(--shadow);
}
.church-visual img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.church-visual::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 30% 20%, rgba(228,199,126,0.35), transparent 55%);
}
.hub-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:32px;}
.hub-chip{
  display:flex; align-items:center; gap:12px; padding:16px 18px; background:var(--white);
  border-radius:14px; box-shadow:var(--shadow-soft); font-size:0.9rem; font-weight:500; color:var(--olive-deep);
}
.hub-chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--gold);}

/* ===== GIVE BACK ===== */
.giveback{ background:var(--olive-deep); color:var(--ivory); position:relative; overflow:hidden;}
.giveback::before{ content:''; position:absolute; top:-120px; right:-120px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle, rgba(228,199,126,0.18), transparent 70%);}
.giveback .section-head h2, .giveback .section-head .eyebrow{ color:var(--ivory);}
.giveback .section-head p{ color:rgba(250,247,242,0.72);}
.cause-grid{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative;}
.cause-card{
  background:rgba(250,247,242,0.06); border:1px solid rgba(250,247,242,0.14); border-radius:16px;
  padding:26px 20px; text-align:center; transition:background .25s ease;
}
.cause-card:hover{ background:rgba(250,247,242,0.12);}
.cause-card .icon{ width:40px; height:40px; margin:0 auto 14px; border-radius:50%; background:var(--gold-soft); opacity:0.9;}
.cause-card h4{ color:var(--ivory); font-size:0.98rem; margin-bottom:12px;}
.bar{ height:5px; border-radius:999px; background:rgba(250,247,242,0.18); overflow:hidden;}
.bar-fill{ height:100%; background:var(--gold-soft); border-radius:999px;}
.cause-pct{ font-size:0.75rem; color:var(--gold-soft); margin-top:8px;}

/* ===== DASHBOARD ===== */
.dashboard{ max-width:1240px; margin:0 auto; background:var(--white); border-radius:28px; box-shadow:var(--shadow); overflow:hidden; display:grid; grid-template-columns:1fr 1.4fr;}
.dash-side{ background:linear-gradient(165deg, var(--gold-soft), var(--gold)); padding:48px; display:flex; flex-direction:column; justify-content:center;}
.dash-side .eyebrow{ color:var(--olive-deep);}
.dash-side h3{ color:var(--olive-deep); font-size:1.7rem; margin-top:12px;}
.dash-side p{ color:var(--olive-deep); opacity:0.85; margin-top:12px; font-size:0.9rem;}
.dash-main{ padding:48px;}
.dash-stats{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:28px;}
.dash-stat{ background:var(--ivory-dim); border-radius:14px; padding:20px;}
.dash-stat .num{ font-family:var(--serif); font-size:1.6rem; color:var(--olive-deep);}
.dash-stat .lbl{ font-size:0.78rem; color:var(--ink-soft); margin-top:4px;}
.donut-row{ display:flex; align-items:center; gap:32px; flex-wrap:wrap;}
.donut-legend li{ display:flex; align-items:center; gap:10px; font-size:0.85rem; padding:6px 0; color:var(--ink-soft);}
.donut-legend .sw{ width:10px; height:10px; border-radius:2px;}

/* ===== INDIGENOUS MARKETPLACE ===== */
.indigenous{ background:var(--ivory-dim);}
.indig-grid{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:center;}
.indig-tags{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;}
.indig-tags span{ padding:10px 18px; border-radius:999px; background:var(--white); border:1px solid var(--olive-line); font-size:0.85rem; color:var(--olive-deep);}
.indig-visual{
  aspect-ratio:1/1; position:relative;
}
.indig-visual img{ width:100%; height:100%; object-fit:contain; display:block;}
.powered-by{ margin-top:18px; font-size:0.8rem; color:var(--ink-soft); font-style:italic;}

/* ===== COMMUNITY FEED ===== */
.feed-grid{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.feed-card{ background:var(--white); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-soft);}
.feed-top{ display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.avatar{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, var(--olive), var(--gold));}
.feed-name{ font-weight:600; font-size:0.9rem; color:var(--olive-deep);}
.feed-tag{ font-size:0.72rem; color:var(--gold); text-transform:uppercase; letter-spacing:0.04em;}
.feed-card p{ font-size:0.9rem; color:var(--ink-soft);}

/* ===== CTA BAND ===== */
.cta-band{ background:var(--gold); padding:70px 32px; text-align:center;}
.cta-band h2{ color:var(--white); font-size:clamp(1.8rem,3vw,2.4rem);}
.cta-band p{ color:rgba(255,255,255,0.88); margin:14px auto 32px; max-width:480px;}
.cta-band .btn-outline{ border-color:var(--white); color:var(--white);}
.cta-band .btn-outline:hover{ background:var(--white); color:var(--gold);}

/* ===== FOOTER ===== */
.site-footer{ background:var(--olive-deep); color:rgba(250,247,242,0.8); padding:70px 32px 30px;}
.footer-grid{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(250,247,242,0.12);}
.footer-brand .brand-text{ color:var(--ivory);}
.footer-grid p.tag{ margin-top:14px; font-size:0.85rem; color:rgba(250,247,242,0.6); max-width:220px;}
.footer-col h5{ font-size:0.75rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--gold-soft); margin-bottom:16px;}
.footer-col li{ font-size:0.85rem; margin-bottom:10px; color:rgba(250,247,242,0.72);}
.footer-col li:hover{ color:var(--gold-soft); cursor:pointer;}
.footer-bottom{ max-width:1240px; margin:24px auto 0; display:flex; justify-content:space-between; font-size:0.78rem; color:rgba(250,247,242,0.5); flex-wrap:wrap; gap:12px;}

/* ===== RESPONSIVE ===== */
@media (max-width:1080px){
  .nav-links{ display:none; }
  .burger{ display:flex; }
  /* Keep the top bar to brand + burger so nothing gets cropped. */
  .nav-cta{ display:none; }
  /* Surface the CTA inside the opened dropdown instead. */
  .nav-links__cta{ display:flex; flex-direction:column; gap:14px; margin-top:8px; padding-top:16px; border-top:1px solid rgba(85,107,47,0.14); }
  .nav-links__cta .btn{ justify-content:center; }
  .nav-links__cta .login{ font-weight:600; color:var(--olive-deep); }
}
@media (max-width:980px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-media{ order:-1; max-width:460px; margin-bottom:46px; }
  .impact-grid{ grid-template-columns:repeat(2,1fr); row-gap:28px;}
  .impact-stat:nth-child(2){ border-right:none;}
  .map-shell{ grid-template-columns:1fr; padding:36px;}
  .product-grid{ grid-template-columns:repeat(2,1fr);}
  .supplier-grid{ grid-template-columns:1fr;}
  .church{ grid-template-columns:1fr;}
  .cause-grid{ grid-template-columns:repeat(2,1fr);}
  .dashboard{ grid-template-columns:1fr;}
  .indig-grid{ grid-template-columns:1fr;}
  .feed-grid{ grid-template-columns:1fr;}
  .footer-grid{ grid-template-columns:repeat(2,1fr); row-gap:32px;}
}
@media (max-width:600px){
  section{ padding:70px 20px;}
  .wrap, .hero-inner, .head-row{ padding-left:20px; padding-right:20px;}
  .product-grid{ grid-template-columns:1fr;}
  .cause-grid{ grid-template-columns:1fr;}
  .footer-grid{ grid-template-columns:1fr;}
  /* Stack the impact stats so the big numbers/labels stop getting cropped. */
  .impact-band{ padding:44px 20px;}
  .impact-grid{ grid-template-columns:1fr; gap:0;}
  .impact-stat{ border-right:none; border-bottom:1px solid rgba(255,255,255,0.12); padding:22px 12px;}
  .impact-stat:last-child{ border-bottom:none;}
  /* Stack the country list into a single column so counts stay inside the box. */
  .country-list{ grid-template-columns:1fr; gap:2px;}
  .country-list li .country-name{ flex:0 0 96px;}
  .map-shell{ padding:28px 22px;}
  .network-banner{ min-height:140px;}
  /* Keep the hero photo composition tidy on phones. */
  .hero-media{ max-width:380px; margin-bottom:40px; }
  .hero-media__seal{ width:72px; height:72px; top:8px; left:-8px; }
  .hero-media__frame{ top:-12px; right:-12px; }
}

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* Accessibility: skip link */
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--olive-deep); color:var(--ivory); padding:10px 16px; z-index:1000; border-radius:0 0 8px 0;}
.skip-link:focus{ left:0; }
.screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }