/* ============================================================
   NGO / Personal Journey / Vision Craft pages — shared sections
   (ported from the client handoff; .eco__* lives in sections/
   ecosystem.css already and is NOT duplicated here)
   ============================================================ */

/* ---------- section background utilities ---------- */
.bg-olive{ background:var(--c-olive); }
.bg-terracotta{ background:var(--c-terracotta); }
.bg-grey{ background:var(--c-grey); }
.bg-ecosystem{ background:var(--c-ecosystem); }
.bg-white{ background:#fff; }

/* ---------- hero ---------- */
.ngo-hero{
  position:relative; min-height:min(92vh, 860px); overflow:hidden;
  background:var(--c-hero-bg); color:var(--c-hero-body);
  display:flex; align-items:center;
}
.ngo-hero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  /* object-position:72% 40%; */
}
.ngo-hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(95deg, rgba(21,26,32,.9) 0%, rgba(21,26,32,.7) 38%, rgba(21,26,32,.25) 72%, rgba(21,26,32,.1) 100%);
}
.ngo-hero .wrap{ position:relative; z-index:2; }
.ngo-hero__copy{ max-width:680px; padding:170px 0 90px; }
.ngo-hero__kicker{
  font-family:var(--f-mont); font-weight:500; font-size:13px;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--c-gold-lt); margin-bottom:26px;
}
.ngo-hero__copy h1{
  font-family:var(--f-serif); font-weight:500;
  font-size:clamp(32px,5vw,54px); line-height:1.14;
  letter-spacing:-.015em; color:var(--c-hero-head);
}
.ngo-hero__copy h1 em{ font-style:italic; color:var(--c-gold-lt); }
.ngo-hero__rule{ width:74px; height:1px; background:var(--c-gold); border:0; margin:32px 0; }
.ngo-hero__actions{ display:flex; gap:18px; flex-wrap:wrap; }
/* desktop: copy hugs the left edge of the viewport instead of the centred wrap */
@media (min-width:1024px){
  .ngo-hero .wrap{ width:calc(100% - 2 * var(--wrap-pad)); max-width:none; }
}
@media (max-width:600px){
  .ngo-hero{ min-height:0; display:block; }
  .ngo-hero__bg{ position:static; height:300px; object-position:60% 30%; }
  .ngo-hero__overlay{ background:linear-gradient(180deg, rgba(21,26,32,0) 0%, rgba(21,26,32,0) 30%, var(--c-hero-bg) 46%); }
  .ngo-hero__copy{ padding:20px 0 56px; }
}

/* ---------- personal-journey hero variant + roles line ---------- */
/* .ngo-hero--pj .ngo-hero__bg{ object-position:72% 34%; } */
.ngo-hero--pj .ngo-hero__overlay{
  background:linear-gradient(95deg, rgba(28,20,17,.9) 0%, rgba(28,20,17,.72) 40%, rgba(28,20,17,.32) 68%, rgba(28,20,17,.12) 100%);
}
@media (max-width:600px){
  .ngo-hero--pj .ngo-hero__bg{ height:340px; object-position:64% 26%; }
}
.ngo-hero__roles{
  font-family:var(--f-inter); font-size:clamp(15px,1.8vw,18px); line-height:1.6;
  color:var(--c-hero-body); max-width:560px; margin-top:26px;
}

/* ---------- her bookshelf (personal-journey page) ---------- */
.shelf__row{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(24px, 3vw, 44px);
}
.shelf__book{
  width:190px; text-align:center;
}
.shelf__book:nth-child(odd) .shelf__cover{ transform:rotate(-2.2deg); }
.shelf__book:nth-child(even) .shelf__cover{ transform:rotate(1.6deg); }
.shelf__cover{
  aspect-ratio:2/3; border-radius:4px 10px 10px 4px;
  background:linear-gradient(105deg, color-mix(in srgb, var(--book-c) 82%, #000) 0%, var(--book-c) 14%, var(--book-c) 100%);
  border-left:6px solid color-mix(in srgb, var(--book-c) 70%, #000);
  box-shadow:0 18px 40px -18px rgba(38,37,31,.5);
  display:flex; flex-direction:column; justify-content:center; gap:14px;
  padding:20px 16px;
  overflow:hidden;
  transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.shelf__cover > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.shelf__cover{ position:relative; }
.shelf__book:hover .shelf__cover{
  transform:rotate(0) translateY(-8px);
  box-shadow:0 30px 50px -20px rgba(38,37,31,.55);
}
.shelf__cover-title{
  font-family:var(--f-accent); font-size:17px; line-height:1.35;
  color:var(--c-cream-lt); text-wrap:balance;
}
.shelf__cover-author{
  font-family:var(--f-mont); font-weight:500; font-size:9.5px;
  letter-spacing:.22em; text-transform:uppercase;
  color:color-mix(in srgb, var(--c-cream) 75%, transparent);
}
.shelf__tag{
  font-family:var(--f-mont); font-weight:600; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-maroon); margin-top:18px;
}
.shelf__desc{ font-size:12.8px; line-height:1.6; color:var(--c-muted); margin-top:7px; }
@media (max-width:600px){
  .shelf__row{ gap:22px 16px; }
  .shelf__book{ width:calc(50% - 8px); max-width:190px; }
  .shelf__cover-title{ font-size:15px; }
}

/* ---------- about us (terracotta band, vertical label) ---------- */
.about__grid{
  width:min(100% - 2 * var(--wrap-pad), var(--wrap-max));
  margin-inline:auto;
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(40px, 6vw, 96px); align-items:center;
}
.about__label{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--f-accent); font-weight:400;
  font-size:clamp(56px, 7vw, 92px); line-height:1;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--c-cream-lt); white-space:nowrap;
  justify-self:start; align-self:center;
}
.about__body{
  max-width:820px; margin-inline:auto; text-align:center;
  display:flex; flex-direction:column; gap:22px;
}
.about__lead{
  font-family:var(--f-accent);
  font-size:clamp(19px, 2.4vw, 26px); line-height:1.5;
  color:var(--c-peach);
}
.about__body p{ font-size:15.5px; line-height:1.85; color:var(--c-cream); }
.about__body p.about__lead{ font-size:clamp(19px, 2.4vw, 26px); color:var(--c-peach); }
.about__body strong{ color:var(--c-cream-lt); font-weight:600; }
.about__close{
  font-family:var(--f-accent);
  font-size:clamp(18px, 2.2vw, 24px) !important; line-height:1.6 !important;
  color:var(--c-cream-lt) !important;
  margin-top:clamp(10px, 2vw, 22px);
}
.about__close span{ color:var(--c-peach); }
@media (max-width:900px){
  .about__grid{ grid-template-columns:1fr; gap:34px; }
  .about__label{
    writing-mode:horizontal-tb; transform:none;
    font-size:clamp(38px, 9vw, 56px); justify-self:center; text-align:center;
  }
}
@media (max-width:600px){
  .about__body{ text-align:left; }
  .about__lead, .about__close{ text-align:center; }
}

/* ---------- changing the world (terracotta poster, clipped numerals) ---------- */
.cw__head{ max-width:940px; margin-bottom:30px; }
.cw__headline{
  font-family:var(--f-serif); font-weight:500;
  font-size:clamp(36px, 5.4vw, 68px); line-height:1.06;
  letter-spacing:-.015em; color:var(--c-cream-lt);
  margin-top:20px; text-wrap:balance;
}
.cw__headline em{ font-style:italic; color:var(--c-peach); }
.cw__copy{
  max-width:760px; margin:0 auto clamp(56px, 7vw, 88px);
  text-align:center; font-size:16px; line-height:1.9;
  color:var(--c-cream); opacity:.92;
}
.cw__stats{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  max-width:1100px; margin-inline:auto;
}
.cw__stats--two{
  grid-template-columns:repeat(2, minmax(0,1fr));
  max-width:760px;
}
.cw__stat{
  min-width:0; text-align:center;
  padding:8px clamp(14px, 2vw, 24px) 0;
  border-left:1px solid rgba(237,231,214,.28);
}
.cw__stat:first-child{ border-left:0; }
.cw__index{
  font-family:var(--f-accent); font-size:13px;
  color:var(--c-peach); opacity:.75; margin-bottom:14px;
}
.cw__numwrap{
  font-size:clamp(64px, 8vw, 94px);
  height:.78em; overflow:hidden;
}
.cw__num{
  display:block; font-family:var(--f-accent); font-weight:400;
  font-size:1em; line-height:1; margin-top:-.16em;
  letter-spacing:-.03em; white-space:nowrap;
  color:var(--c-cream-lt); font-variant-numeric:tabular-nums;
}
.cw__stat:nth-child(2) .cw__num{ color:var(--c-peach); }
.cw__label{
  font-family:var(--f-mont); font-weight:500; font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.6;
  color:var(--c-cream); opacity:.85;
  max-width:24ch; margin:18px auto 0;
}
@media (max-width:760px){
  .cw__stats{ grid-template-columns:1fr; }
  .cw__stat{
    border-left:0; border-top:1px solid rgba(237,231,214,.28);
    padding:clamp(28px, 5vw, 40px) 0 6px;
  }
  .cw__stat:first-child{ border-top:0; padding-top:0; }
  .cw__numwrap{ font-size:clamp(76px, 18vw, 96px); }
}
@media (max-width:560px){
  .cw__stats--two{ grid-template-columns:1fr; }
}

/* ---------- get involved (photo + feature split) ---------- */
.cta-split{
  display:grid; grid-template-columns:1.15fr 1fr;
}
.cta-split__media{
  position:relative; min-height:500px; overflow:hidden;
}
.cta-split__media > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:80% 42%;
}
.cta-split__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(28,20,17,.66) 0%, rgba(28,20,17,.42) 55%, rgba(28,20,17,.24) 100%);
}
.cta-split__actions{
  position:relative; z-index:1; height:100%;
  /* buttons sit bottom-centre of the photo at every screen size */
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  gap:24px; padding:clamp(36px, 5vw, 84px);
}
.cta-split__actions .btn-outline{
  min-width:min(280px, 100%); justify-content:center;
  background:rgba(28,20,17,.25); backdrop-filter:blur(2px);
}
.cta-split__actions .btn-outline:hover{ background:rgba(197,154,108,.28); }
.cta-split__panel{
  background:var(--c-grey);
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(28px, 3.6vw, 44px);
  padding:clamp(56px, 6vw, 84px) clamp(28px, 5vw, 96px);
  text-align:center;
}
.cta-feature h3{
  font-family:var(--f-sans); font-weight:700;
  font-size:clamp(19px, 2vw, 23px); line-height:1.3;
  color:var(--c-ink); margin-bottom:10px;
}
.cta-feature p{
  font-size:15px; line-height:1.75; color:var(--c-muted);
  max-width:46ch; margin-inline:auto;
}
@media (max-width:1024px){
  .cta-split{ grid-template-columns:1fr; }
  .cta-split__media{ min-height:0; aspect-ratio:679/452; }
  .cta-split__actions{ align-items:center; }
}
@media (max-width:600px){
  /* keep a real photo on phones; the button stays pinned bottom-centre */
  .cta-split__actions{ padding:32px 24px; width:100%; }
  .cta-split__actions .btn-outline{ width:100%; max-width:320px; }
}

/* ---------- mission statement ---------- */
.mission-lede{
  font-family:var(--f-accent);
  font-size:clamp(19px,2.4vw,26px); line-height:1.6;
  color:var(--c-muted); max-width:880px; margin:0 auto; text-align:center;
}
.mission-lede strong{ color:var(--c-maroon); font-weight:400; }

/* ---------- journey timeline ---------- */
.timeline{ max-width:820px; margin:0 auto; position:relative; }
.timeline::before{
  content:""; position:absolute; left:9px; top:8px; bottom:8px; width:1px;
}
.on-light .timeline::before{ background:rgba(38,37,31,.25); }
.on-dark  .timeline::before{ background:rgba(237,231,214,.25); }
.tl-item{ position:relative; padding:0 0 clamp(36px,4.5vw,52px) clamp(44px,5vw,64px); }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{
  content:""; position:absolute; left:3px; top:9px;
  width:13px; height:13px; border-radius:50%; border:1.6px solid var(--c-maroon);
}
.on-light .tl-item::before{ background:var(--c-grey); }
.bg-ecosystem .tl-item::before{ background:var(--c-ecosystem); }
.on-dark .tl-item::before{ border-color:var(--c-gold-lt); }
.bg-olive .tl-item::before{ background:var(--c-olive); }
.bg-terracotta .tl-item::before{ background:var(--c-terracotta); }
.tl-marker{
  font-family:var(--f-accent);
  font-size:clamp(17px,2vw,21px); line-height:1.2;
  margin-bottom:12px;
}
.on-light .tl-marker{ color:var(--c-maroon); }
.on-dark .tl-marker{ color:var(--c-peach); }
.tl-item p{ font-size:15.5px; line-height:1.85; }
.on-light .tl-item p{ color:var(--c-muted); }
.on-dark .tl-item p{ color:var(--c-cream); opacity:.92; }

/* big derived stats inside terracotta chapter */
.tl-stats{ display:flex; gap:clamp(30px,5vw,70px); margin:8px 0 22px; flex-wrap:wrap; }
.tl-stats .stat-num{ font:400 clamp(40px,4.6vw,56px)/1 var(--f-accent); color:var(--c-peach); }
.tl-stats .stat-label{
  font-family:var(--f-mont); font-weight:500; font-size:12px; line-height:1.4;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-cream); opacity:.8; display:block; margin-top:8px;
}

/* ---------- gallery / watch us in practice ---------- */
.gallery-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:230px; gap:18px;
}
.gallery-video{
  grid-column:span 2; grid-row:span 2;
  border-radius:var(--radius); overflow:hidden; position:relative;
  background:linear-gradient(160deg, #333126 0%, #201f18 100%);
  padding:0; color:var(--c-cream);
  display:grid; place-items:center; text-align:center;
}
.gallery-video:disabled{ cursor:default; }
.gallery-video .play-ring{
  width:84px; height:84px; border-radius:50%;
  border:1.6px solid var(--c-gold-lt); color:var(--c-gold-lt);
  display:grid; place-items:center; margin:0 auto 20px;
}
.gallery-video .play-ring svg{ width:26px; height:26px; fill:currentColor; margin-left:4px; }
.gallery-video h3{ font:400 clamp(20px,2.4vw,26px)/1.3 var(--f-accent); color:var(--c-cream-lt); }
.gallery-video p{ font-size:13.5px; opacity:.7; margin-top:10px; color:var(--c-cream); }
.gallery-item{
  border-radius:var(--radius); overflow:hidden; padding:0; position:relative;
  background:#3a382c; cursor:zoom-in;
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur-base) var(--ease);
}
.gallery-item:hover img{ transform:scale(1.05); }
.gallery-caption{
  position:absolute; inset:auto 0 0 0; padding:26px 16px 12px;
  background:linear-gradient(180deg, transparent, rgba(28,26,19,.85));
  font:400 12.5px/1.4 var(--f-accent); color:var(--c-cream); text-align:left;
}
.gallery-placeholder{
  border-radius:var(--radius); border:1.4px dashed rgba(38,37,31,.35);
  display:grid; place-items:center; padding:20px; text-align:center;
  font:400 13.5px/1.6 var(--f-accent); color:var(--c-muted);
}
@media (max-width:900px){
  .gallery-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:200px; }
  .gallery-video{ grid-column:span 2; }
}
@media (max-width:600px){
  .gallery-grid{ grid-template-columns:1fr; grid-auto-rows:190px; }
  .gallery-video{ grid-column:span 1; grid-row:span 2; }
}

/* lightbox */
.lightbox{
  border:0; padding:0; background:transparent;
  /* margin:auto restores the centring the global `* { margin:0 }` reset kills */
  margin:auto;
  max-width:min(92vw, 1100px); max-height:92vh;
  overflow:visible; /* the close button sits outside the figure */
}
.lightbox::backdrop{ background:rgba(20,18,13,.88); }
.lightbox figure{ margin:0; position:relative; }
.lightbox img{ width:100%; max-height:82vh; object-fit:contain; border-radius:8px; }
.lightbox figcaption{
  text-align:center; padding:14px 0 0;
  font:400 14px/1.4 var(--f-accent); color:var(--c-cream);
}
.lightbox-close{
  position:absolute; top:-16px; right:-16px; z-index:2;
  width:40px; height:40px; border-radius:50%;
  background:var(--c-cream-lt); color:var(--c-ink); font-size:22px; line-height:1;
}

/* ---------- recognition-style intro copy (dark sections) ---------- */
.recognition-copy{ max-width:860px; margin:0 auto; }
.recognition-copy p{ font-size:15.5px; line-height:1.85; color:var(--c-cream); opacity:.92; }

/* ---------- ecosystem loop strip ---------- */
.loop-strip{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  margin:0 auto clamp(36px,4vw,52px);
}
.loop-node{
  font-family:var(--f-mont); font-weight:500; font-size:12.5px; line-height:1.3;
  letter-spacing:.08em; text-transform:uppercase;
  padding:12px 20px; border-radius:999px; border:1.4px solid; text-align:center;
}
.loop-node-1{ color:var(--c-stage-1); border-color:var(--c-stage-1); }
.loop-node-2{ color:var(--c-stage-2); border-color:var(--c-stage-2); }
.loop-node-3{ color:var(--c-stage-3); border-color:var(--c-stage-3); }
.loop-node-4{ color:var(--c-stage-4); border-color:var(--c-stage-4); }
.loop-arrow{ color:var(--c-muted-lt); flex:none; }
.loop-arrow svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; }
.loop-copy{ max-width:860px; margin:0 auto; text-align:center; }
.loop-copy p{ font-size:15.5px; line-height:1.85; color:var(--c-muted); }
.loop-copy p + p{ margin-top:20px; }
@media (max-width:600px){
  .loop-strip{ flex-direction:column; gap:10px; }
  .loop-arrow svg{ transform:rotate(90deg); }
  .loop-copy{ text-align:left; }
}

/* ---- Watch Us In Practice: 9:16 video cards + multi-image gallery ---- */
/* reel-style cards, left to right; columns never stretch past a phone shape */
.wp-videos{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(200px, 100%), 240px));
  justify-content:center;
  gap:clamp(14px, 1.8vw, 22px);
  margin-bottom:clamp(20px, 3vw, 34px);
}
.wp-video{
  position:relative;
  aspect-ratio:9 / 16;
  border-radius:var(--radius);
  overflow:hidden;
  background:linear-gradient(160deg, #333126 0%, #201f18 100%);
  padding:0;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.wp-video__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wp-video__shade{
  position:absolute; inset:0;
  background:rgba(24, 20, 14, .38);
  transition:background var(--dur-fast) var(--ease);
}
.wp-video:hover .wp-video__shade{ background:rgba(24, 20, 14, .18); }
.wp-video .play-ring{
  position:relative; z-index:1;
  width:clamp(58px, 6vw, 78px); height:clamp(58px, 6vw, 78px);
  border-radius:50%;
  border:1.6px solid var(--c-gold-lt); color:var(--c-gold-lt);
  background:rgba(24, 20, 14, .35);
  display:grid; place-items:center;
  transition:transform var(--dur-fast) var(--ease);
}
.wp-video:hover .play-ring{ transform:scale(1.08); }
.wp-video .play-ring svg{ width:24px; height:24px; fill:currentColor; margin-left:3px; }

/* justified rows: each photo keeps its own aspect ratio (--ar, set per tile
   from the media library) and grows in proportion to it, so every tile in a
   row shares one height and nothing is cropped. Add or remove photos and the
   rows re-flow on their own. */
.wp-photos{
  --wp-row:clamp(200px, 19vw, 290px);   /* target row height */
  display:flex;
  flex-wrap:wrap;
  gap:clamp(10px, 1.2vw, 16px);
}
/* Soaks up the last row's leftover width so its tiles are not stretched to
   full width. The grow value is deliberately finite: full rows always end up
   taller than --wp-row (flex packs greedily), so a filler that took *all* the
   slack left a lone final photo visibly short next to a wide grey gap. At 10
   the last row creeps up to roughly the height of the rows above it.
   ponytail: tuned by measurement, not derived — recheck if --wp-row changes. */
.wp-photos::after{ content:""; flex:10 1 0; }

.wp-photo{
  --ar:1.4;
  flex:var(--ar) 1 calc(var(--ar) * var(--wp-row));
  aspect-ratio:var(--ar);
  min-width:0;
  padding:0;
  border-radius:var(--radius);
  overflow:hidden;
  background:#3a382c;
  cursor:zoom-in;
}
.wp-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s var(--ease);
}
.wp-photo:hover img{ transform:scale(1.045); }
@media (max-width:1024px){
  .wp-photos{ --wp-row:225px; }
}
@media (max-width:600px){
  /* two reels per row on phones instead of one oversized card */
  .wp-videos{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
  /* shorter rows so a landscape photo still fits two-up on a phone */
  .wp-photos{ --wp-row:clamp(150px, 44vw, 210px); }
  /* a phone row holds one photo, so the last one stretches to match the rest
     rather than sitting narrower than everything above it */
  .wp-photos::after{ display:none; }
}