/* =========================================================
   SEMBARITA FOUNDATION — shared stylesheet
   ========================================================= */

:root{
  --olive:#999d19;
  --olive-deep:#7c7f14;
  --olive-tint:#eef0d6;
  --indigo:#9889cd;
  --indigo-tint:#eeebf8;
  --blush:#df999a;
  --blush-tint:#f9e9e9;
  --cream:#f8f0e3;
  --ink:#493c1d;
  --ink-70:rgba(73,60,29,.7);
  --ink-50:rgba(73,60,29,.5);
  --white:#ffffff;

  --font-display:'Fraunces', serif;
  --font-body:'Outfit', sans-serif;

  --container:1200px;
  --gutter:clamp(20px, 5vw, 48px);
  --radius:6px;
  --radius-lg:18px;
  --shadow-soft:0 20px 50px -20px rgba(73,60,29,.25);
  --shadow-card:0 10px 30px -12px rgba(73,60,29,.22);
  --header-h:84px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:var(--header-h);}
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:300;
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit; font-size:1rem;}
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:300;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--ink);
}
p{margin:0 0 1em;}
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- utility ---------- */
.eyebrow{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.75rem;
  font-weight:500;
  color:var(--olive-deep);
  margin-bottom:.9em;
  display:inline-block;
}
.text-center{text-align:center;}
.section-head{max-width:760px; margin:0 0 3rem;}
.section-head.center{margin-inline:auto; text-align:center;}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem); font-weight:250;}
.section-head h2.caps{text-transform:uppercase; letter-spacing:.03em; font-weight:400;}
.section-head p{font-size:1.08rem; color:var(--ink-70);}

section.band{padding:clamp(56px,9vw,110px) 0;}
.band-white{background:var(--white);}
.band-cream{background:var(--cream);}
.band-olive{background:var(--olive); color:var(--white);}
.band-olive h2,.band-olive h3,.band-olive .eyebrow{color:var(--white);}
.band-ink{background:var(--ink); color:var(--cream);}
.band-ink h2,.band-ink h3{color:var(--cream);}
.band-indigo-tint{background:var(--indigo-tint);}
.band-blush-tint{background:var(--blush-tint);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.85em 1.6em;
  border-radius:999px;
  font-weight:500;
  font-size:.98rem;
  border:1.5px solid transparent;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--olive); color:var(--white);}
.btn-primary:hover{background:var(--olive-deep);}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:var(--cream);}
.btn-on-olive{background:var(--white); color:var(--olive-deep);}
.btn-on-olive:hover{background:var(--ink); color:var(--cream);}
.btn-on-ink{background:var(--cream); color:var(--ink);}
.btn-on-ink:hover{background:var(--olive); color:var(--white);}
.btn-link{
  display:inline-flex; align-items:center; gap:.4em;
  font-weight:500; color:var(--olive-deep);
  border-bottom:1.5px solid currentColor;
  padding-bottom:2px;
}
.btn-link:hover{color:var(--ink);}
.btn-link.on-light{color:var(--white); }
.btn-sm{padding:.6em 1.2em; font-size:.88rem;}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:900;
  border-bottom:1px solid rgba(73,60,29,.08);
  transition:box-shadow .25s ease;
}
.site-header::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:rgba(248,240,227,.92);
  backdrop-filter:blur(10px);
}
.site-header.is-scrolled{box-shadow:0 8px 24px -12px rgba(73,60,29,.25);}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-h);
  gap:1.5rem;
}
.logo-link{flex-shrink:0; display:flex; align-items:center;}
.logo-img{height:38px; width:auto;}

.main-nav{display:flex; align-items:center; flex:1; justify-content:center;}
.nav-list{display:flex; align-items:center; gap:2.1rem;}
.nav-list > li{position:relative;}
.nav-link{
  background:none; border:none; padding:.5em 0;
  font-size:.96rem; font-weight:500; color:var(--ink);
  display:flex; align-items:center; gap:.35em;
}
a.nav-link:hover, .nav-link:hover{color:var(--olive-deep);}
.nav-caret{width:9px; height:9px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); margin-top:-4px; transition:transform .2s ease;}
.has-dropdown.is-open .nav-caret{transform:rotate(-135deg); margin-top:2px;}

.dropdown{
  position:absolute; top:100%; left:50%; transform:translate(-50%,8px);
  min-width:250px; background:var(--white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  padding:.6rem;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:20;
}
.has-dropdown.is-open .dropdown{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,4px);
}
.dropdown li a{
  display:block; padding:.65em .9em; border-radius:10px;
  font-size:.92rem; color:var(--ink);
}
.dropdown li a:hover{background:var(--olive-tint); color:var(--olive-deep);}

.header-cta{display:flex; align-items:center; gap:1rem; flex-shrink:0;}
.lang-toggle{display:flex; align-items:center; border:1.5px solid var(--olive); border-radius:999px; overflow:hidden; flex-shrink:0;}
.lang-toggle button{
  border:none; background:transparent; color:var(--olive-deep);
  font-size:.78rem; font-weight:700; letter-spacing:.03em;
  padding:.4em .8em; cursor:pointer; transition:background .2s ease, color .2s ease;
}
.lang-toggle button.is-active{background:var(--olive); color:var(--white);}

/* Suppress Google Translate's default intrusive UI so the layout stays intact */
body{top:0 !important;}
.goog-te-banner-frame, .goog-te-gadget-icon, #goog-gt-tt, .goog-te-balloon-frame{display:none !important;}
.goog-text-highlight{background:none !important; box-shadow:none !important;}
.skiptranslate iframe{display:none !important;}
.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; background:none; border:none; padding:0;
}
.hamburger span{display:block; height:2px; width:100%; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .25s ease;}
.nav-open .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-open .hamburger span:nth-child(2){opacity:0;}
.nav-open .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:980px){
  .main-nav{
    position:fixed; inset:var(--header-h) 0 0 0;
    background:var(--cream);
    flex-direction:column; justify-content:flex-start;
    padding:1.5rem var(--gutter) 2.5rem;
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .3s ease;
  }
  .nav-open .main-nav{transform:translateX(0);}
  .nav-list{flex-direction:column; align-items:stretch; width:100%; gap:0;}
  .nav-list > li{border-bottom:1px solid rgba(73,60,29,.1);}
  .nav-link{width:100%; justify-content:space-between; padding:1em 0; font-size:1.05rem;}
  .dropdown{
    position:static; transform:none; box-shadow:none; opacity:1; visibility:visible; pointer-events:auto;
    max-height:0; overflow:hidden; padding:0; background:transparent;
    transition:max-height .3s ease, padding .3s ease;
  }
  .has-dropdown.is-open .dropdown{max-height:600px; padding:0 0 .8em; transform:none;}
  .header-cta{gap:.6rem;}
  .header-cta .btn-primary{padding:.7em 1.2em; font-size:.9rem;}
  .lang-toggle button{padding:.35em .65em; font-size:.72rem;}
  .hamburger{display:flex;}
}

/* =========================================================
   HERO (home)
   ========================================================= */
.hero{
  position:relative;
  overflow:hidden; color:var(--white);
  background:linear-gradient(160deg,#7c7f14 0%,var(--olive) 45%,#c7c96b 100%);
}
.hero-media{position:absolute; inset:0; z-index:0;}
.hero-media video, .hero-media img{
  width:100%; height:100%; object-fit:cover;
  object-position:center top;
}
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.52) 45%, rgba(0,0,0,.62) 75%, rgba(0,0,0,.88) 100%);
}
.hero-inner{
  position:relative; z-index:1;
  min-height:88vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding-block:clamp(110px,17vh,190px) clamp(20px,4vh,50px);
  width:100%;
  text-align:center;
}
.hero > .evidence{position:relative; z-index:1;}

/* Decorative botanical corner-frame elements, sprinkled around the site */
.corner-frame{
  position:absolute; width:clamp(130px,19vw,280px); height:auto;
  pointer-events:none; z-index:1; opacity:1;
}
.corner-frame--tl{top:0; left:0;}
.corner-frame--tr{top:0; right:0; transform:scaleX(-1);}
.corner-frame--br{bottom:0; right:0; transform:scaleY(-1);}
.corner-frame--bl{bottom:0; left:0; transform:scale(-1,-1);}
.corner-frame--sm{width:clamp(52px,7.5vw,96px);}
.corner-frame--md{width:clamp(86px,12.5vw,170px);}
.section-anchor{position:relative; overflow:hidden;}
@media (max-width:640px){
  .corner-frame{width:clamp(90px,24vw,150px); opacity:.75;}
  .corner-frame--sm{width:clamp(38px,12vw,56px); opacity:.85;}
  .corner-frame--md{width:clamp(64px,18vw,104px); opacity:.8;}
}
.hero-bridge{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(30px,7vh,80px) var(--gutter);
  text-align:center;
}
.hero-bridge-text{
  font-family:var(--font-display); font-weight:200;
  font-size:clamp(2rem,5vw,3.6rem);
  line-height:1.15;
  color:var(--olive);
  max-width:16ch; margin:0 auto;
}
.reveal-on-scroll{
  opacity:0; transform:translateY(36px);
  transition:opacity 1.6s ease, transform 1.6s ease;
}
.reveal-on-scroll.is-revealed{opacity:1; transform:translateY(0);}
.hero-headline{
  position:relative; min-height:9.5em;
}
.hero-line{
  font-family:var(--font-display); font-weight:200;
  font-size:clamp(2.4rem,6.5vw,5.1rem);
  line-height:1.1;
  max-width:17ch;
  margin-inline:auto;
  color:var(--olive);
  position:absolute; inset:0;
  opacity:0; transform:translateY(14px);
  transition:opacity 1.1s ease, transform 1.1s ease;
}
.hero-line.is-visible{opacity:1; transform:translateY(0); position:relative;}
.hero-line:not(.is-visible){pointer-events:none;}
.hero-profile{
  max-width:580px; margin:1.6em auto 0;
  font-size:.9rem; color:rgba(255,255,255,.85);
}
.hero-actions{margin-top:2em; display:flex; gap:1rem; flex-wrap:wrap; justify-content:center;}

/* page header (non-home hero band) */
.page-hero{
  position:relative; overflow:hidden;
  background:var(--olive); color:var(--white);
  padding:clamp(70px,14vw,130px) 0 clamp(50px,8vw,80px);
  text-align:center;
}
.page-hero .eyebrow{color:rgba(255,255,255,.85);}
.page-hero h1{font-size:clamp(2.4rem,5.5vw,4rem); font-weight:250; max-width:16ch; margin-inline:auto;}
.page-hero p{max-width:640px; margin:1rem auto 0; color:rgba(255,255,255,.92); font-size:1.08rem;}
.page-hero-crumb{font-size:.85rem; letter-spacing:.05em; opacity:.85; margin-bottom:1em;}

/* section quick-nav pills (used on About/Our Work/People) */
.subnav{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
  padding:1.2rem 0; background:var(--white);
  position:sticky; top:var(--header-h); z-index:50;
  border-bottom:1px solid rgba(73,60,29,.08);
}
.subnav a{
  padding:.5em 1.1em; border-radius:999px; font-size:.85rem; font-weight:500;
  background:var(--cream); color:var(--ink-70);
  border:1px solid transparent;
}
.subnav a:hover, .subnav a.is-active{background:var(--olive-tint); color:var(--olive-deep); border-color:var(--olive);}

/* =========================================================
   EVIDENCE CAROUSEL — looping catalog, active always centered
   ========================================================= */
.evidence{position:relative;}
.evidence-carousel{display:flex; align-items:center; gap:1rem;}
.evidence-row{
  display:flex; gap:1.5rem; flex:1; min-width:0;
  align-items:center; justify-content:center;
}

/* side peeks: bare photo, 3:4 portrait, no card chrome */
.evidence-item{
  cursor:pointer; transition:opacity .45s ease, transform .45s ease, flex-basis .45s ease;
  flex:0 0 auto; width:clamp(64px,9vw,120px); aspect-ratio:3/4;
  border-radius:var(--radius-lg); overflow:hidden;
  opacity:.55; transform:scale(.95);
  position:relative;
}
.evidence-item:hover{opacity:.85;}
.evidence-item-media{width:100%; height:100%;}
.evidence-item-media img{width:100%; height:100%; object-fit:cover; display:block;}
.evidence-item-media::after{content:none;}
.evidence-item-peek{display:none;}
.evidence-item-body{display:none;}

/* active/focused item: full card, image + text side by side, never squeezed */
.evidence-item.is-active{
  cursor:default; opacity:1; transform:scale(1);
  flex:1 1 auto; width:auto; aspect-ratio:auto; max-width:820px;
  background:var(--white); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-card);
  display:grid; grid-template-columns:1fr 1.15fr; align-items:stretch;
}
.evidence-item.is-active .evidence-item-media{aspect-ratio:auto; height:100%; min-height:280px;}
.evidence-item.is-active .evidence-item-body{
  display:flex; flex-direction:column; justify-content:center;
  padding:2rem 2.2rem;
}
.evidence-quote{font-family:var(--font-display); font-size:clamp(1.15rem,2vw,1.5rem); font-weight:300; line-height:1.4; color:var(--ink);}
.evidence-cite{margin-top:1.1em; font-family:var(--font-body); font-size:.9rem; color:var(--ink-70); font-weight:500;}
.evidence-body-text{font-size:.98rem; color:var(--ink-70);}
.evidence-arrow{
  flex-shrink:0; width:46px; height:46px; border-radius:50%;
  background:var(--white); border:1.5px solid rgba(73,60,29,.15); box-shadow:var(--shadow-card);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:var(--ink);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.evidence-arrow:hover{background:var(--olive); color:var(--white); transform:scale(1.06);}
.evidence-dots{display:flex; gap:.5rem; margin-top:2rem; justify-content:center;}
.evidence-dots button{
  width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.4); border:none; padding:0;
}
.evidence-dots button.is-active{background:var(--white);}
@media (max-width:760px){
  .evidence-row{gap:.5rem;}
  .evidence-item:not(.is-active){width:44px;}
  .evidence-item.is-active{grid-template-columns:1fr; max-width:100%;}
  .evidence-item.is-active .evidence-item-media{min-height:200px;}
  .evidence-item.is-active .evidence-item-body{padding:1.4rem 1.5rem 1.7rem;}
  .evidence-arrow{width:38px; height:38px;}
}

/* =========================================================
   CARD GRIDS
   ========================================================= */
.grid{display:grid; gap:clamp(20px,3vw,32px);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}

.card{
  background:var(--white); border-radius:var(--radius-lg);
  padding:2rem; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; height:100%;
}
.card h3{font-size:1.3rem; margin-bottom:.6rem;}
.card p{color:var(--ink-70); font-size:.98rem; flex-grow:1;}
.card .btn-link{margin-top:1rem;}
.card-icon{
  width:52px; height:52px; border-radius:50%;
  background:var(--olive-tint); color:var(--olive-deep);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.2rem; font-family:var(--font-display); font-size:1.3rem;
}

.scroller{
  display:flex; gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:.5rem; margin:0 calc(var(--gutter) * -1); padding-inline:var(--gutter);
}
.scroller::-webkit-scrollbar{height:6px;}
.scroller::-webkit-scrollbar-thumb{background:rgba(73,60,29,.2); border-radius:4px;}
.scroller > *{scroll-snap-align:start; flex:0 0 min(320px,84vw);}
@media (min-width:900px){
  .scroller{display:grid; grid-template-columns:repeat(3,1fr); overflow:visible; margin:0; padding-inline:0;}
  .scroller > *{flex:none;}
}

/* Programme accordion cards ("What we do") */
.programme-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem;}
@media (max-width:640px){.programme-grid{grid-template-columns:1fr;}}
.programme-card{
  --accent:var(--olive-deep);
  background:var(--white); border:1.5px solid rgba(73,60,29,.12);
  border-radius:var(--radius-lg); padding:1.1rem 1.4rem;
  cursor:pointer; box-shadow:var(--shadow-card);
  transition:box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.programme-card:hover{transform:translateY(-3px); box-shadow:0 16px 34px -14px rgba(73,60,29,.32);}
.programme-card.c-olive{background:rgba(153,157,25,.14); border-color:var(--olive); --accent:var(--olive-deep);}
.programme-card.c-indigo{background:rgba(152,137,205,.16); border-color:var(--indigo); --accent:#5d5197;}
.programme-card.c-blush{background:rgba(223,153,154,.18); border-color:var(--blush); --accent:#b5585a;}
.programme-card .num{font-family:var(--font-display); font-size:.9rem; color:var(--accent);}
.programme-card h3{
  font-family:var(--font-body); font-size:1.02rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; line-height:1.3;
  margin:0;
}
.programme-detail{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .35s ease, opacity .35s ease, margin .35s ease;
}
.programme-card.is-open .programme-detail{max-height:220px; opacity:1; margin-top:.9rem;}
.programme-detail p{color:var(--ink-70); font-size:.92rem; margin-bottom:.7em;}
.programme-card .btn-link{color:var(--accent); border-color:var(--accent);}
.programme-card .toggle-row{display:flex; align-items:center; justify-content:space-between;}
.programme-card .plus{
  width:26px; height:26px; border-radius:50%; border:1.5px solid var(--accent);
  position:relative; flex-shrink:0;
}
.programme-card .plus::before{
  content:''; position:absolute; width:8px; height:8px;
  top:45%; left:50%;
  border-right:1.6px solid var(--accent); border-bottom:1.6px solid var(--accent);
  transform:translate(-50%,-50%) rotate(45deg);
  transition:transform .3s ease, top .3s ease;
}
.programme-card.is-open .plus::before{
  top:52%; transform:translate(-50%,-50%) rotate(225deg);
}

/* "What We Do" section — photo background */
.whatwedo-band{
  position:relative; isolation:isolate; color:var(--cream);
}
.whatwedo-band::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background:url('images/09-home-whatwedo-background.jpg') center/cover no-repeat;
}
.whatwedo-band::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(160deg, rgba(73,60,29,.93), rgba(73,60,29,.8));
}
.whatwedo-band .section-head h2{color:var(--cream);}
.whatwedo-band .section-head p{color:rgba(248,240,227,.85);}
.whatwedo-band .eyebrow{color:var(--blush);}
.whatwedo-band .programme-card h3{color:var(--cream);}
.whatwedo-band .programme-detail p{color:rgba(248,240,227,.8);}
.whatwedo-band .programme-card .num{color:var(--cream);}
.whatwedo-band .programme-card.c-olive{--accent:#d7db8a;}
.whatwedo-band .programme-card.c-indigo{--accent:#c7bdec;}
.whatwedo-band .programme-card.c-blush{--accent:#f0c3c4;}

/* "Life with Sembarita" section — photo background */
.life-band{position:relative; isolation:isolate; color:var(--cream);}
.life-band::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background:url('images/80-people-life-bg.jpeg') center 22%/cover no-repeat;
}
.life-band::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(160deg, rgba(73,60,29,.92), rgba(73,60,29,.74));
}
.life-band .section-head h2{color:var(--cream);}
.life-band .section-head p{color:rgba(248,240,227,.85);}
.life-band .eyebrow{color:var(--blush);}
.life-band .testi-slide p{color:var(--cream);}
.life-band .testi-cite{color:rgba(248,240,227,.85);}

/* Card with a bleed image on top (donate card, etc.) */
.card-media{
  margin:-2rem -2rem 1.2rem; aspect-ratio:16/10; border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  overflow:hidden;
}
.card-media img{width:100%; height:100%; object-fit:cover;}
.logo-slot img{max-width:100%; max-height:100%; object-fit:contain;}

/* Stats band */
.stats-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:1.5rem; text-align:center;}
@media (max-width:900px){.stats-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
.stat-num{font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.6rem); font-weight:300;}
.stat-label{font-size:.85rem; opacity:.9; margin-top:.3em;}

.logo-row{display:flex; flex-wrap:wrap; gap:2.5rem; justify-content:center; align-items:center; margin-top:2.5rem;}
.logo-slot{
  width:130px; height:60px;
  display:flex; align-items:center; justify-content:center;
}
.logo-slot-text{font-size:.85rem; text-align:center; color:rgba(255,255,255,.85); font-weight:500;}
.band-white .logo-slot-text,.band-cream .logo-slot-text{color:var(--ink-50);}

/* Placeholder media block (used where no photo asset supplied) */
.placeholder-media{
  aspect-ratio:4/3; border-radius:var(--radius-lg);
  background:linear-gradient(150deg,var(--olive-tint),var(--indigo-tint));
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--ink-70); font-size:.85rem; padding:1.5rem; position:relative; overflow:hidden;
}
.placeholder-media::before{
  content:''; position:absolute; inset:0; opacity:.5;
  background:radial-gradient(circle at 30% 20%, rgba(153,157,25,.25), transparent 55%),
             radial-gradient(circle at 80% 80%, rgba(152,137,205,.25), transparent 55%);
}
.placeholder-media span{position:relative; z-index:1;}

/* News / story cards */
.news-card{background:var(--white); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); display:flex; flex-direction:column; height:100%;}
.news-card .news-media{aspect-ratio:16/10; position:relative; min-height:0; overflow:hidden;}
.news-card .news-media img{width:100%; height:100%; object-fit:cover;}
.news-card-body{padding:1.5rem; display:flex; flex-direction:column; flex-grow:1;}
.news-meta{display:flex; gap:.7rem; align-items:center; font-size:.78rem; color:var(--ink-70); margin-bottom:.7rem;}
.news-tag{background:var(--olive-tint); color:var(--olive-deep); padding:.25em .8em; border-radius:999px; font-weight:500;}
.news-card h3{font-size:1.2rem; margin-bottom:.5rem;}
.news-card p{color:var(--ink-70); font-size:.95rem; flex-grow:1;}

/* Video preview — the photo slot itself becomes the YouTube link */
.video-slot{position:relative;}
.video-slot-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.video-slot .video-link{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem;
  background:linear-gradient(180deg, rgba(73,60,29,.25), rgba(73,60,29,.8));
  color:var(--white); text-align:center; padding:1.2rem; text-wrap:balance;
}
.video-slot .play-icon{
  width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:transform .2s ease;
}
.video-slot .play-icon::before{
  content:''; width:0; height:0; margin-left:4px;
  border-style:solid; border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent var(--olive-deep);
}
.video-slot .video-link:hover .play-icon{transform:scale(1.08);}
.video-slot .video-caption{font-size:.85rem; font-weight:500; line-height:1.35; max-width:24ch;}
.video-slot.multi{display:flex; flex-direction:column; align-items:stretch;}
.video-slot.multi .video-link{position:relative; z-index:1; flex:1; background:rgba(73,60,29,.6); padding:.9rem;}
.video-slot.multi .video-link:hover{background:rgba(73,60,29,.78);}
.video-slot.multi .video-link + .video-link{border-top:1px solid rgba(255,255,255,.25);}
.video-slot.multi .play-icon{width:38px; height:38px;}
.video-slot.multi .play-icon::before{border-width:7px 0 7px 11px;}
.video-slot.multi .video-caption{font-size:.82rem;}

/* Product / shop cards */
.product-card{background:var(--white); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card);}
.product-media{aspect-ratio:1/1;}
.product-body{padding:1.5rem;}
.product-price{font-family:var(--font-display); color:var(--olive-deep); font-size:1.1rem; margin-top:.3rem;}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{position:relative; overflow:hidden; background:var(--ink); color:rgba(248,240,227,.85); padding:clamp(50px,8vw,80px) 0 0;}
.footer-grid{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(248,240,227,.15);}
@media (max-width:980px){.footer-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer-logo{height:34px; margin-bottom:1rem;}
.footer-brand p{font-size:.92rem; color:rgba(248,240,227,.7);}
.footer-col h4{color:var(--cream); font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; font-weight:500; margin-bottom:1rem;}
.footer-col ul li{margin-bottom:.65rem;}
.footer-col a{font-size:.92rem; color:rgba(248,240,227,.75);}
.footer-col a:hover{color:var(--white);}
.social-links{display:flex; gap:.8rem; margin-top:1.3rem;}
.social-links a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(248,240,227,.35);
  display:flex; align-items:center; justify-content:center;
}
.social-links a:hover{background:var(--olive); border-color:var(--olive);}
.social-links svg{width:16px; height:16px; fill:currentColor;}
.footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8rem; padding:1.6rem 0; font-size:.82rem; color:rgba(248,240,227,.6);}

/* =========================================================
   DONATE MODAL
   ========================================================= */
.modal-overlay{
  position:fixed; inset:0; background:rgba(73,60,29,.55);
  display:flex; align-items:center; justify-content:center; padding:1.2rem;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s; z-index:2000;
}
.modal-overlay.is-open{opacity:1; visibility:visible;}
.modal{
  background:var(--cream); border-radius:var(--radius-lg); max-width:520px; width:100%;
  max-height:88vh; overflow-y:auto; padding:2.4rem;
  transform:translateY(16px); transition:transform .25s ease; box-shadow:var(--shadow-soft);
  position:relative;
}
.modal-overlay.is-open .modal{transform:translateY(0);}
.modal-close{
  position:absolute; top:1.2rem; right:1.2rem; width:36px; height:36px; border-radius:50%;
  background:var(--white); border:none; font-size:1.1rem; color:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.modal h3{font-size:1.5rem;}
.modal-amounts{display:flex; gap:.7rem; flex-wrap:wrap; margin:1.4rem 0;}
.modal-amounts button{
  padding:.7em 1.3em; border-radius:999px; border:1.5px solid var(--olive); background:transparent;
  color:var(--olive-deep); font-weight:500;
}
.modal-amounts button.is-active,.modal-amounts button:hover{background:var(--olive); color:var(--white);}
.modal-impact{font-size:.92rem; color:var(--ink-70); min-height:2.4em;}
.bank-box{background:var(--white); border-radius:12px; padding:1.2rem; margin-top:1.5rem; font-size:.92rem;}
.bank-box .row{display:flex; justify-content:space-between; padding:.4em 0; border-bottom:1px dashed rgba(73,60,29,.15);}
.bank-box .row:last-child{border-bottom:none;}
.copy-btn{background:none; border:none; color:var(--olive-deep); font-weight:500; font-size:.85rem; text-decoration:underline;}
.modal-foot{margin-top:1.6rem; font-size:.88rem; color:var(--ink-70);}

/* =========================================================
   TIMELINE (About — Our History)
   ========================================================= */
.timeline{position:relative; margin-top:2rem; padding-left:2rem; border-left:2px solid var(--olive-tint);}
.timeline-item{position:relative; padding-bottom:2.6rem;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{
  content:''; position:absolute; left:-2.45rem; top:.2rem; width:14px; height:14px; border-radius:50%;
  background:var(--olive); border:3px solid var(--white); box-shadow:0 0 0 2px var(--olive);
}
.timeline-year{font-family:var(--font-display); color:var(--olive-deep); font-size:1.3rem;}
.timeline-item h4{margin:.2rem 0 .4rem; font-size:1.15rem;}
.timeline-item p{color:var(--ink-70); font-size:.95rem;}

/* =========================================================
   FAQ ACCORDION
   ========================================================= */
.faq-item{border-bottom:1px solid rgba(73,60,29,.14);}
.faq-q{
  width:100%; text-align:left; background:none; border:none; padding:1.3rem 0;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-family:var(--font-display); font-size:1.1rem; color:var(--ink);
}
.faq-item .plus{width:26px; height:26px; border-radius:50%; border:1.5px solid var(--olive); position:relative; flex-shrink:0;}
.faq-item .plus::before,.faq-item .plus::after{content:''; position:absolute; background:var(--olive-deep); top:50%; left:50%; transform:translate(-50%,-50%);}
.faq-item .plus::before{width:11px; height:1.6px;}
.faq-item .plus::after{width:1.6px; height:11px; transition:transform .25s ease, opacity .25s ease;}
.faq-item.is-open .plus::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0;}
.faq-a{max-height:0; overflow:hidden; opacity:0; transition:max-height .35s ease, opacity .35s ease;}
.faq-item.is-open .faq-a{max-height:300px; opacity:1; padding-bottom:1.3rem;}
.faq-a p{color:var(--ink-70); font-size:.96rem;}

/* =========================================================
   CALCULATOR (Support Us)
   ========================================================= */
.calculator{background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:clamp(1.8rem,4vw,3rem); text-align:center;}
.calc-amount{font-family:var(--font-display); font-size:clamp(2.4rem,6vw,3.4rem); color:var(--olive-deep);}
.calc-desc{max-width:520px; margin:.8rem auto 2rem; color:var(--ink-70); font-size:1.02rem; min-height:3em;}
input[type="range"]{
  width:100%; height:6px; border-radius:999px; background:var(--olive-tint);
  appearance:none; -webkit-appearance:none;
}
input[type="range"]::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none; width:24px; height:24px; border-radius:50%;
  background:var(--olive); border:4px solid var(--white); box-shadow:0 2px 8px rgba(73,60,29,.35); cursor:pointer;
}
input[type="range"]::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%; background:var(--olive); border:4px solid var(--white); cursor:pointer;
}
.calc-scale{display:flex; justify-content:space-between; font-size:.8rem; color:var(--ink-50); margin-top:.6rem;}

/* =========================================================
   FORMS
   ========================================================= */
.form-grid{display:grid; gap:1.3rem;}
.form-row{display:flex; flex-direction:column; gap:.4rem; text-align:left;}
.form-row label{font-size:.85rem; font-weight:500; color:var(--ink);}
.form-row input,.form-row select,.form-row textarea{
  padding:.85em 1em; border-radius:10px; border:1.5px solid rgba(73,60,29,.2);
  background:var(--white); color:var(--ink);
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:2px solid var(--olive); outline-offset:1px;}
.form-note{font-size:.85rem; color:var(--ink-70); margin-top:.8rem;}
.form-success{
  display:none; background:var(--olive-tint); color:var(--olive-deep); border-radius:10px;
  padding:1em 1.2em; margin-top:1rem; font-size:.92rem; font-weight:500;
}
.form-success.is-visible{display:block;}

/* Bank details on Support page */
.bank-details-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; margin-top:2rem;}
@media (max-width:700px){.bank-details-grid{grid-template-columns:1fr;}}

/* Testimonial carousel (People page) */
.testi-track{position:relative; min-height:260px;}
.testi-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease, visibility .5s; text-align:center; max-width:760px; margin-inline:auto;
}
.testi-slide.is-active{opacity:1; visibility:visible; transform:translateY(0); position:relative;}
.testi-slide p{font-family:var(--font-display); font-size:clamp(1.2rem,2.4vw,1.55rem); color:var(--ink);}
.testi-cite{margin-top:1rem; font-size:.9rem; color:var(--ink-70); font-weight:500;}

/* Team / partner cards */
.team-card{text-align:center;}
.team-photo{aspect-ratio:1/1; border-radius:50%; overflow:hidden; width:140px; margin:0 auto 1.2rem;}
.team-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.team-card h3{font-size:1.1rem; margin-bottom:.2rem;}
.team-title{font-size:.95rem; font-weight:600; color:var(--ink); margin-bottom:.15rem;}
.team-role{font-size:.85rem; color:var(--olive-deep); font-weight:500;}

.partner-card{background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:1.8rem; text-align:center;}

/* Anchor offset for sticky header */
section[id]{scroll-margin-top:calc(var(--header-h) + 60px);}

/* Misc */
hr.rule{border:none; border-top:1px solid rgba(73,60,29,.12); margin:3rem 0;}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,64px); align-items:center;}
@media (max-width:860px){.two-col{grid-template-columns:1fr;}}
.tag-row{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem;}
.tag-pill{background:var(--olive-tint); color:var(--olive-deep); font-size:.8rem; font-weight:500; padding:.4em 1em; border-radius:999px;}