@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600&display=swap');

:root{
  --white:#FFFFFF;
  --sand:#F5F1E7;
  --ink:#171F1A;
  --green:#0B6E4F;
  --green-dark:#0A5A41;
  --red:#B9282F;
  --line:#E4DFD1;
  --gray:#5B5F5A;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{
  scroll-behavior:smooth;
}
body{
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  width:100%;
  overflow-x: clip;
}
img{max-width:100%; display:block; height:auto;}
a{color:inherit; text-decoration:none;}

.eyebrow{
  font-family:'Google Sans', sans-serif; font-weight:bold;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--green-dark);
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
}
.eyebrow.red{color:var(--red);}
.eyebrow.on-dark{color:#8FD6B4;}
.eyebrow::before{
  content:"";
  width:18px; height:2px;
  background:currentColor;
  display:inline-block;
}

h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:600;
  line-height:1.08;
  letter-spacing:-0.01em;
}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}

/* ---------- weave motif (signature element) ---------- */
.weave{
  height:14px;
  width:100%;
  background-image:
    repeating-linear-gradient(45deg, var(--green) 0 6px, transparent 6px 14px),
    repeating-linear-gradient(-45deg, var(--red) 0 3px, transparent 3px 14px);
  background-size:100% 14px;
  opacity:0.9;
}
.weave.thin{height:6px;}

/* ---------- header ---------- */
header{
  position:-webkit-sticky;
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.7);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex; align-items:center;
  gap:12px;
  padding:16px 32px;
  max-width:1180px; margin:0 auto;
}
.nav-row > nav {
  margin-right:auto;
  margin-left:10px;
}
.gtranslate_wrapper {
  flex-shrink: 0;
  min-width: 100px;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{height:40px; width:40px; border-radius:50%; object-fit:cover;}
.brand-text{font-family:'Fraunces', serif; font-weight:600; font-size:1.05rem; line-height:1.1;}
.brand-text span{display:block; font-family:'Google Sans', sans-serif; font-weight:bold; font-size:0.6rem; letter-spacing:0.1em; color:var(--gray); margin-top:2px;}

nav ul{list-style:none; display:flex; gap:16px; align-items:center;}
nav a{font-size:0.85rem; font-weight:500; color:var(--ink); position:relative; padding-bottom:4px; white-space:nowrap;}
nav a:hover{color:var(--green-dark);}
nav a.current{color:var(--green-dark); border-bottom:2px solid var(--green);}
nav a.cta{
  background:var(--green); color:var(--white);
  padding:9px 18px; border-radius:30px;
  font-family:'Google Sans', sans-serif; font-weight:bold; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase;
}
nav a.cta:hover{background:var(--green-dark); color:var(--white);}

.socials{display:flex; gap:14px;}
.nav-row .socials{display:none;}
.socials img{width:16px; height:16px; opacity:0.55; filter:grayscale(1) invert(1);}
.socials a:hover img{opacity:1; filter:none;}

.menu-toggle{display:none; background:none; border:none; cursor:pointer;}
.menu-toggle span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0;}

/* ---------- hero (home) ---------- */
.btn{display:inline-block; padding:12px 22px; font-family:'Google Sans', sans-serif; font-weight:bold; font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase; border-radius:30px; text-decoration:none;}
.btn.primary{background:var(--ink); color:var(--white);}
.btn.primary:hover{background:var(--green-dark);}
.btn.outline{border:1px solid var(--ink); color:var(--ink);}
.btn.outline:hover{border-color:var(--red); color:var(--red);}

.hero.cinematic{padding:0; position:relative; min-height:85vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden;}
.hero-bg-carousel{position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;}
.hero-carousel-img{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.5s ease-in-out;}
.hero-carousel-img.active{opacity:1;}
.hero-overlay{position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,10,5,0.65); z-index:2;}
.hero-content{position:relative; z-index:3; max-width:840px; padding:0 24px; display:flex; flex-direction:column; align-items:center;}
.hero.cinematic h1{color:#FFFFFF; font-size:clamp(2.4rem, 4vw, 3.8rem); line-height:1.15; margin:18px 0 24px; text-shadow:0 2px 10px rgba(0,0,0,0.3);}
.hero.cinematic p.lede{color:#e6f3eb; font-size:1.1rem; max-width:60ch; text-shadow:0 2px 8px rgba(0,0,0,0.3); margin-bottom:32px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}
.btn.outline.white{border:1px solid #FFFFFF; color:#FFFFFF;}
.btn.outline.white:hover{background:rgba(255,255,255,0.1);}

/* ---------- page header (sub-pages) ---------- */
.page-header{background:var(--ink); color:var(--white); padding:56px 0;}
.page-header h1{color:var(--white); font-size:clamp(1.8rem, 3vw, 2.5rem); margin-top:14px;}
.page-header p{color:#C9D0CB; max-width:56ch; margin-top:14px; font-size:0.98rem;}
.breadcrumb{font-family:'Google Sans', sans-serif; font-weight:bold; font-size:0.7rem; color:#8FD6B4; letter-spacing:0.04em; margin-bottom:6px;}
.breadcrumb a:hover{color:var(--white);}

section{padding:76px 0;}
section.tight{padding:56px 0;}
.section-head{max-width:640px; margin-bottom:40px;}
.section-head h2{font-size:clamp(1.6rem, 2.4vw, 2.1rem); margin-top:14px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* ---------- articles / cards ---------- */
.articles-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;}
.article-card{border:1px solid var(--line); border-radius:6px; overflow:hidden; display:flex; flex-direction:column; transform:translateY(0); box-shadow:0 0 0 rgba(0,0,0,0); transition:transform 0.2s ease-out, box-shadow 0.2s ease-out; background:var(--white);}
.article-card:hover{transform:translateY(-4px); box-shadow:0 12px 24px -10px rgba(0,0,0,0.2);}
.article-media{height:170px; overflow:hidden; background:var(--sand);}
.article-media img{width:100%; height:100%; object-fit:cover; transform:scale(1); transition:transform 0.2s ease-out;}
.article-card:hover .article-media img{transform:scale(1.05);}
.article-body{padding:20px; display:flex; flex-direction:column; gap:10px; flex:1;}
.article-date{font-family:'Google Sans', sans-serif; font-weight:bold; font-size:0.68rem; color:var(--gray); letter-spacing:0.05em; text-transform:uppercase;}
.article-card h3{font-size:1.05rem; font-weight:600;}
.article-card p{font-size:0.88rem; color:var(--gray); flex:1;}
.read-more{font-family:'Google Sans', sans-serif; font-weight:bold; font-size:0.7rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--green-dark); margin-top:auto;}
.article-card:hover .read-more{color:var(--red);}
.article-card.no-image .article-body{padding-top:24px;}

/* ---------- mission / dark band ---------- */
.mission{background:var(--ink); color:var(--white);}
.mission-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center;}
.mission img{border-radius:4px; height:400px; width:100%; object-fit:cover;}
.mission h2{color:var(--white); font-size:clamp(1.6rem,2.6vw,2.2rem); margin:16px 0 18px;}
.mission p{color:#C9D0CB; font-size:0.98rem;}
.mission-list{margin-top:24px; display:grid; gap:10px;}
.mission-list div{display:flex; gap:10px; font-size:0.9rem; color:#DCE2DD;}
.mission-list div::before{content:"—"; color:var(--red);}

/* ---------- video ---------- */
.video-frame{position:relative; border-radius:6px; overflow:hidden; aspect-ratio:16/9; width:100%; max-height: 560px; background:#000;}
.video-frame iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:none;}


/* ---------- impact / testimonial ---------- */
.impact{background:var(--sand);}
.impact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.impact-copy p{color:var(--gray); font-size:1rem; margin-top:16px;}
.impact-media{position:relative;}
.impact-media img.wide{width:100%; height:450px; object-fit:cover; object-position:center 30%; border-radius:4px;}
.impact-media img.portrait{position:absolute; right:-20px; bottom:-40px; width:38%; height:230px; object-fit:cover; border-radius:4px; border:5px solid var(--white); box-shadow:0 18px 40px -18px rgba(0,0,0,0.35);}

.quote-block{margin-top:60px; background:var(--white); border-left:4px solid var(--green); border-radius:4px; padding:32px 36px; display:grid; grid-template-columns:auto 1fr; gap:24px;}
.quote-mark{font-family:'Fraunces', serif; font-size:3.2rem; color:var(--red); line-height:1;}
#quote-carousel{display:flex; flex-direction:column; gap:16px;}
.quote-items-window{overflow:hidden;}
.quote-items-track{display:flex; transition:transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); width:100%;}
.quote-item{flex:0 0 100%; width:100%; padding-right:16px;}
.quote-block p.quote-text{font-family:'Fraunces', serif; font-size:1.2rem; font-style:italic; font-weight:500; margin-bottom:10px;}
.quote-attr{font-family:'Google Sans', sans-serif; font-weight:bold; font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--gray);}

.carousel-controls{display:flex; align-items:center; gap:12px; margin-top:8px;}
.carousel-btn{background:var(--sand); border:1px solid var(--line); border-radius:50%; width:28px; height:28px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s ease;}
.carousel-btn svg{width:16px; height:16px; fill:var(--gray); transition:fill 0.2s ease;}
.carousel-btn:hover{border-color:var(--green); background:var(--white); transform:scale(1.05);}
.carousel-btn:hover svg{fill:var(--green-dark);}

[data-theme="dark"] .carousel-btn{background:#2A302B; border-color:var(--line);}
[data-theme="dark"] .carousel-btn:hover{border-color:var(--green); background:#111613;}

.quote-dots{display:flex; gap:6px;}
.quote-dots span{width:6px; height:6px; border-radius:50%; background:var(--line); cursor:pointer; transition:background 0.2s ease;}
.quote-dots span.active{background:var(--green);}

/* ---------- stats ---------- */
.stats-head{text-align:center; max-width:560px; margin:0 auto 44px;}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line);}
.stat{border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:32px 24px; text-align:center;}
.stat .num{font-family:'Fraunces', serif; font-size:2.4rem; font-weight:600; color:var(--green-dark);}
.stat .num .plus{color:var(--red);}
.stat .label{font-size:0.82rem; color:var(--gray); margin-top:8px;}

/* ---------- about cta ---------- */
.about-cta{background:var(--green); color:var(--white);}
.about-cta-grid{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.about-cta h2{color:var(--white); font-size:clamp(1.5rem,2.4vw,2rem);}
.about-cta p{color:#DCEFE4; margin-top:8px; max-width:46ch;}
.about-cta .btn.primary{background:var(--white); color:var(--ink);}
.about-cta .btn.primary:hover{background:var(--ink); color:var(--white);}

/* ---------- generic content blocks (about / projects / articles) ---------- */
.prose{max-width:70ch;}
.prose h2{font-size:1.8rem; margin:40px 0 16px; color:var(--ink);}
.prose h3{font-size:1.4rem; margin:32px 0 12px; color:var(--ink);}
.prose p{color:var(--gray); font-size:0.98rem; margin-bottom:16px;}
.prose p.pull{font-family:'Fraunces', serif; font-style:italic; font-size:1.2rem; color:var(--ink); border-left:3px solid var(--green); padding-left:18px; margin:28px 0;}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:flex-start;}
.two-col img{border-radius:4px; width:100%; height:340px; object-fit:cover;}

.values-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.value-card{position:relative; border-radius:8px; overflow:hidden;}
.value-card img{width:100%; height:150px; object-fit:cover; display:block;}
.value-card span{position:absolute; bottom:0; left:0; right:0; padding:40px 16px 16px; font-family:'Google Sans', sans-serif; font-weight:600; font-size:1.1rem; color:#ffffff; background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%); text-shadow:0 2px 4px rgba(0,0,0,0.5);}

.info-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:36px 0;}
.info-card{border:1px solid var(--line); border-radius:6px; padding:22px;}
.info-card .eyebrow{margin-bottom:10px;}
.info-card p{color:var(--gray); font-size:0.9rem;}

.project-card{display:grid; grid-template-columns:1fr 1.4fr; gap:28px; border:1px solid var(--line); border-radius:6px; overflow:hidden; margin-bottom:24px; transform:translateY(0); box-shadow:0 0 0 rgba(0,0,0,0); transition:transform 0.2s ease-out, box-shadow 0.2s ease-out; background:var(--white);}
.project-card:hover{transform:translateY(-4px); box-shadow:0 12px 24px -10px rgba(0,0,0,0.2);}
.project-card img{width:100%; height:100%; min-height:200px; object-fit:cover;}
.project-card .project-body{padding:24px; display:flex; flex-direction:column; gap:10px;}
.project-card h3{font-size:1.15rem;}
.project-card p{color:var(--gray); font-size:0.9rem;}
.project-card .read-more{color:var(--green-dark); font-family:'Google Sans', sans-serif; font-weight:bold; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em;}
.project-card:hover .read-more{color:var(--red);}

.heritage-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.heritage-card{border:1px solid var(--line); border-radius:6px; padding:24px; position:relative; transform:translateY(0); box-shadow:0 0 0 rgba(0,0,0,0); transition:transform 0.2s ease-out, box-shadow 0.2s ease-out; background:var(--white);}
.heritage-card:hover{transform:translateY(-4px); box-shadow:0 12px 24px -10px rgba(0,0,0,0.2);}
.heritage-card .eyebrow{margin-bottom:10px;}
.heritage-card h3{font-size:1.15rem; margin-bottom:6px;}
.heritage-card .meta{font-family:'Google Sans', sans-serif; font-weight:bold; font-size:0.72rem; color:var(--gray); margin-bottom:12px;}
.heritage-card .read-more{color:var(--green-dark); font-family:'Google Sans', sans-serif; font-weight:bold; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em;}
.heritage-card:hover .read-more{color:var(--red);}
.heritage-card::before{content:""; position:absolute; left:0; top:24px; bottom:24px; width:3px; background:var(--green);}

.gallery-filter-bar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px;}
.gallery-filter-bar button{font-family:'Google Sans', sans-serif; font-weight:bold; font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase; padding:8px 16px; border-radius:20px; border:1px solid var(--line); background:transparent; color:var(--gray); cursor:pointer; transition:all 0.2s ease;}
.gallery-filter-bar button:hover{border-color:var(--green-dark); color:var(--green-dark);}
.gallery-filter-bar button.active{background:var(--ink); color:var(--white); border-color:var(--ink);}

.gallery-grid{display:flex; flex-direction:column; gap:24px;}
.gallery-album{position:relative;}
.gallery-album.hidden{display:none;}
.album-header{display:flex; align-items:center; gap:16px; padding:12px; background:var(--sand); border:1px solid var(--line); border-radius:8px; cursor:pointer; transition:all 0.2s ease;}
.album-header:hover{background:var(--white); border-color:var(--green);}
.album-cover{width:64px; height:64px; border-radius:4px; overflow:hidden; flex-shrink:0;}
.album-cover img{width:100%; height:100%; object-fit:cover;}
.album-info h3{margin:0 0 4px 0; font-size:1.1rem; color:var(--ink);}
.album-info .photo-count{font-family:'Google Sans', sans-serif; font-weight:bold; font-size:0.75rem; color:var(--gray);}
.album-header::after{content:"↓"; margin-left:auto; padding-right:12px; font-size:1.4rem; color:var(--gray); transition:transform 0.3s ease;}
.album-header.expanded::after{transform:rotate(180deg);}

.album-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding-top:16px;}

.load-more-container{display:flex; justify-content:center; padding:24px 0;}
.load-more-btn{font-family:'Google Sans', sans-serif; font-weight:bold; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; padding:12px 24px; background:var(--green); color:var(--white); border:none; border-radius:30px; cursor:pointer; transition:all 0.2s ease;}
.load-more-btn:hover{background:var(--green-dark); transform:translateY(-2px);}

.gallery-item{position:relative; border-radius:6px; overflow:hidden; aspect-ratio:1/1; cursor:pointer; transition:opacity 0.2s ease, transform 0.2s ease;}
.gallery-item.hidden{display:none;}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform 0.2s ease;}
.gallery-item:hover img{transform:scale(1.05);}
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.team-card{text-align:center;}
.team-card img{width:100%; height:320px; object-fit:cover; object-position:center 15%; border-radius:6px; margin-bottom:14px;}
.team-card h3{font-size:1.02rem;}
.team-card .role{font-family:'Google Sans', sans-serif; font-weight:bold; font-size:0.7rem; color:var(--green-dark); letter-spacing:0.04em; text-transform:uppercase; margin-top:4px;}

.source-note{margin-top:32px; padding:18px 22px; background:var(--sand); border-radius:6px; font-size:0.85rem; color:var(--gray);}
.source-note a{color:var(--green-dark); font-weight:600;}
.source-note a:hover{color:var(--red);}

.related-callout{margin-top:24px; padding:20px 22px; background:var(--white); border:1px solid var(--line); border-left:4px solid var(--green); border-radius:6px; display:flex; flex-direction:column; gap:8px;}
.related-callout a{font-family:'Fraunces', serif; font-size:1.05rem; font-weight:600; color:var(--ink);}
.related-callout a:hover{color:var(--green-dark);}
.related-callout a::after{content:" →"; }

/* ---------- footer ---------- */
footer{background:var(--ink); color:#9AA39D; padding:40px 0;}
.footer-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;}
.footer-brand{display:flex; align-items:center; gap:12px;}
.footer-brand img{height:32px; width:32px; border-radius:50%;}
.footer-brand span{font-family:'Fraunces', serif; color:var(--white); font-size:0.95rem;}
footer .socials img{filter:grayscale(1); opacity:0.6;}
footer .socials a:hover img{opacity:1;}
footer p{font-size:0.78rem;}

/* ---------- responsive styles ---------- */
@media (max-width: 1200px){
  nav ul{display:none;}
  nav ul.nav-open{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:64px;
    left:16px;
    right:16px;
    background:var(--white);
    padding:20px;
    border:1px solid var(--line);
    border-radius:6px;
    box-shadow:0 12px 30px -10px rgba(0,0,0,0.25);
    z-index:60;
  }
  .menu-toggle{display:block; z-index:65;}
  .menu-toggle span { transition: transform 0.3s ease, opacity 0.3s ease; }
  .menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle.open span:nth-child(2) { opacity: 0; }
  .menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  
  .hero-grid, .mission-grid, .impact-grid, .about-cta-grid, .two-col, .project-card{grid-template-columns:1fr;}
  .hero-img-wrap{height:380px;}
  .hero-tag{left:12px; bottom:-16px;}
  .articles-grid, .info-grid, .heritage-grid, .gallery-grid, .team-grid{grid-template-columns:repeat(2,1fr);}
  .values-grid{grid-template-columns:repeat(2,1fr);}
  .album-grid{grid-template-columns:repeat(3,1fr);}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  
  .impact-media img.portrait{position:static; width:100%; height:220px; margin-top:16px; border:none;}
  .quote-block{grid-template-columns:1fr;}
  .project-card img{height:220px; min-height:auto;}
  .mission img{height:260px;}
  .two-col img{height:240px;}
}

@media (max-width: 560px){
  .wrap, .nav-row { padding-left:16px; padding-right:16px; }
  .nav-row .socials { display: none; }
  .articles-grid, .info-grid, .heritage-grid, .gallery-grid, .team-grid{grid-template-columns:1fr;}
  .values-grid{grid-template-columns:repeat(2,1fr);}
  .album-grid{grid-template-columns:repeat(2,1fr);}
  .stats-grid{grid-template-columns:1fr;}
  .footer-row { flex-direction:column; text-align:center; justify-content:center; }
  
  section { padding:48px 0; }
  section.tight { padding:36px 0; }
  .quote-block { padding:20px 18px; margin-top:40px; }
  .impact-media img.wide { height:200px; }
  .stat { padding:24px 16px; }
}

/* ---------- dark mode ---------- */
[data-theme="dark"]{
  --white:#1A1F1C;
  --sand:#222822;
  --ink:#E8EDE9;
  --green:#3DBE8B;
  --green-dark:#5AD4A4;
  --red:#E05B5B;
  --line:#333B35;
  --gray:#A0A8A2;
}

/* header */
[data-theme="dark"] header{
  background:rgba(26,31,28,0.7);
  border-bottom-color:var(--line);
}

/* mobile nav dropdown */
[data-theme="dark"] nav ul.nav-open{
  background:var(--white);
  border-color:var(--line);
}

/* hero */
[data-theme="dark"] .hero{background:var(--white);}

/* article cards */
[data-theme="dark"] .article-card{
  background:var(--white);
  border-color:var(--line);
}
[data-theme="dark"] .article-card:hover{box-shadow:0 30px 60px -15px rgba(0,0,0,0.8);}
[data-theme="dark"] .article-media{background:#2A302B;}

/* mission band */
[data-theme="dark"] .mission{background:#111613;}
[data-theme="dark"] .mission h2{color:#E8EDE9;}
[data-theme="dark"] .mission p{color:#A0A8A2;}
[data-theme="dark"] .mission-list div{color:#B0BAB3;}


/* impact / testimonial */
[data-theme="dark"] .impact{background:var(--sand);}
[data-theme="dark"] .quote-block{
  background:#252B26;
  border-left-color:var(--green);
}
[data-theme="dark"] .quote-block p.quote-text{color:var(--ink);}
[data-theme="dark"] .impact-media img.portrait{border-color:var(--sand);}

/* stats */
[data-theme="dark"] .stats-grid,
[data-theme="dark"] .stat{
  border-color:var(--line);
}

/* about cta */
[data-theme="dark"] .about-cta{background:#0A5A41;}
[data-theme="dark"] .about-cta .btn.primary{background:var(--white); color:var(--ink);}
[data-theme="dark"] .about-cta .btn.primary:hover{background:var(--ink); color:var(--white);}

/* page header (sub-pages) */
[data-theme="dark"] .page-header{background:#111613;}

/* generic content */
[data-theme="dark"] .source-note{background:var(--sand);}
[data-theme="dark"] .related-callout{
  background:var(--white);
  border-color:var(--line);
  border-left-color:var(--green);
}
[data-theme="dark"] .info-card{border-color:var(--line);}
[data-theme="dark"] .project-card{border-color:var(--line); background:var(--white);}
[data-theme="dark"] .heritage-card{border-color:var(--line); background:var(--white);}
[data-theme="dark"] .project-card:hover,
[data-theme="dark"] .heritage-card:hover{box-shadow:0 30px 60px -15px rgba(0,0,0,0.8);}
[data-theme="dark"] .value-card{border-color:var(--line);}

/* footer */
[data-theme="dark"] footer{background:#111613;}

/* fix text visibility for elements using var(--white) in light mode */
[data-theme="dark"] .about-cta h2,
[data-theme="dark"] .footer-brand span,
[data-theme="dark"] .gallery-item span,
[data-theme="dark"] .page-header h1,
[data-theme="dark"] nav a.cta {
  color: #FFFFFF;
}
[data-theme="dark"] .hero-tag span {
  color: #5B5F5A;
}

/* menu-toggle bars */
[data-theme="dark"] .menu-toggle span{background:var(--ink);}

/* ---------- dark mode toggle button ---------- */
.theme-toggle{
  background:none;
  border:2px solid var(--line);
  border-radius:50px;
  width:42px;
  height:42px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .25s ease, background .25s ease, transform .15s ease;
  position:relative;
  flex-shrink:0;
}
.theme-toggle:hover{
  border-color:var(--green);
  background:rgba(11,110,79,0.08);
  transform:scale(1.08);
}
.theme-toggle svg{
  width:18px;
  height:18px;
  fill:var(--ink);
  transition:fill .25s ease, transform .3s ease;
}
.theme-toggle:hover svg{fill:var(--green);}

/* sun shown by default, moon hidden */
.theme-toggle .icon-sun{display:block;}
.theme-toggle .icon-moon{display:none;}
[data-theme="dark"] .theme-toggle .icon-sun{display:none;}
[data-theme="dark"] .theme-toggle .icon-moon{display:block;}

[data-theme="dark"] .theme-toggle{
  border-color:var(--line);
}
[data-theme="dark"] .theme-toggle:hover{
  border-color:var(--green);
  background:rgba(61,190,139,0.12);
}
[data-theme="dark"] .theme-toggle svg{fill:var(--ink);}
[data-theme="dark"] .theme-toggle:hover svg{fill:var(--green);}

/* smooth theme transition */
body,
header,
.article-card,
.quote-block,
.impact,
.stats-grid,
.stat,
.info-card,
.project-card,
.heritage-card,
.value-card,
.source-note,
.related-callout,
footer{
  transition:background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* header social icons in dark mode */
[data-theme="dark"] header .socials img{
  filter:grayscale(1);
  opacity:0.6;
}
  .hero-grid, .mission-grid, .impact-grid, .about-cta-grid, .two-col, .project-card{grid-template-columns:1fr;}
  .hero-img-wrap{height:380px;}
  .hero-tag{left:12px; bottom:-16px;}
  .articles-grid, .info-grid, .heritage-grid, .gallery-grid, .team-grid{grid-template-columns:repeat(2,1fr);}
  .values-grid{grid-template-columns:repeat(2,1fr);}
  .album-grid{grid-template-columns:repeat(3,1fr);}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  
  .impact-media img.portrait{position:static; width:100%; height:220px; margin-top:16px; border:none;}
  .quote-block{grid-template-columns:1fr;}
  .project-card img{height:220px; min-height:auto;}
  .mission img{height:260px;}
  .two-col img{height:240px;}
}

@media (max-width: 560px){
  .wrap, .nav-row { padding-left:16px; padding-right:16px; }
  .nav-row .socials { display: none; }
  .articles-grid, .info-grid, .heritage-grid, .gallery-grid, .team-grid{grid-template-columns:1fr;}
  .values-grid{grid-template-columns:repeat(2,1fr);}
  .album-grid{grid-template-columns:repeat(2,1fr);}
  .stats-grid{grid-template-columns:1fr;}
  .footer-row { flex-direction:column; text-align:center; justify-content:center; }
  
  section { padding:48px 0; }
  section.tight { padding:36px 0; }
  .quote-block { padding:20px 18px; margin-top:40px; }
  .impact-media img.wide { height:200px; }
  .stat { padding:24px 16px; }
}

/* ---------- dark mode ---------- */
[data-theme="dark"]{
  --white:#1A1F1C;
  --sand:#222822;
  --ink:#E8EDE9;
  --green:#3DBE8B;
  --green-dark:#5AD4A4;
  --red:#E05B5B;
  --line:#333B35;
  --gray:#A0A8A2;
}

/* header */
[data-theme="dark"] header{
  background:rgba(26,31,28,0.7);
  border-bottom-color:var(--line);
}

/* mobile nav dropdown */
[data-theme="dark"] nav ul.nav-open{
  background:var(--white);
  border-color:var(--line);
}

/* hero */
[data-theme="dark"] .hero{background:var(--white);}

/* article cards */
[data-theme="dark"] .article-card{
  background:var(--white);
  border-color:var(--line);
}
[data-theme="dark"] .article-card:hover{box-shadow:0 30px 60px -15px rgba(0,0,0,0.8);}
[data-theme="dark"] .article-media{background:#2A302B;}

/* mission band */
[data-theme="dark"] .mission{background:#111613;}
[data-theme="dark"] .mission h2{color:#E8EDE9;}
[data-theme="dark"] .mission p{color:#A0A8A2;}
[data-theme="dark"] .mission-list div{color:#B0BAB3;}


/* impact / testimonial */
[data-theme="dark"] .impact{background:var(--sand);}
[data-theme="dark"] .quote-block{
  background:#252B26;
  border-left-color:var(--green);
}
[data-theme="dark"] .quote-block p.quote-text{color:var(--ink);}
[data-theme="dark"] .impact-media img.portrait{border-color:var(--sand);}

/* stats */
[data-theme="dark"] .stats-grid,
[data-theme="dark"] .stat{
  border-color:var(--line);
}

/* about cta */
[data-theme="dark"] .about-cta{background:#0A5A41;}
[data-theme="dark"] .about-cta .btn.primary{background:var(--white); color:var(--ink);}
[data-theme="dark"] .about-cta .btn.primary:hover{background:var(--ink); color:var(--white);}

/* page header (sub-pages) */
[data-theme="dark"] .page-header{background:#111613;}

/* generic content */
[data-theme="dark"] .source-note{background:var(--sand);}
[data-theme="dark"] .related-callout{
  background:var(--white);
  border-color:var(--line);
  border-left-color:var(--green);
}
[data-theme="dark"] .info-card{border-color:var(--line);}
[data-theme="dark"] .project-card{border-color:var(--line); background:var(--white);}
[data-theme="dark"] .heritage-card{border-color:var(--line); background:var(--white);}
[data-theme="dark"] .project-card:hover,
[data-theme="dark"] .heritage-card:hover{box-shadow:0 30px 60px -15px rgba(0,0,0,0.8);}
[data-theme="dark"] .value-card{border-color:var(--line);}

/* footer */
[data-theme="dark"] footer{background:#111613;}

/* fix text visibility for elements using var(--white) in light mode */
[data-theme="dark"] .about-cta h2,
[data-theme="dark"] .footer-brand span,
[data-theme="dark"] .gallery-item span,
[data-theme="dark"] .page-header h1,
[data-theme="dark"] nav a.cta {
  color: #FFFFFF;
}
[data-theme="dark"] .hero-tag span {
  color: #5B5F5A;
}

/* menu-toggle bars */
[data-theme="dark"] .menu-toggle span{background:var(--ink);}

/* ---------- dark mode toggle button ---------- */
.theme-toggle{
  background:none;
  border:2px solid var(--line);
  border-radius:50px;
  width:42px;
  height:42px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .25s ease, background .25s ease, transform .15s ease;
  position:relative;
  flex-shrink:0;
}
.theme-toggle:hover{
  border-color:var(--green);
  background:rgba(11,110,79,0.08);
  transform:scale(1.08);
}
.theme-toggle svg{
  width:18px;
  height:18px;
  fill:var(--ink);
  transition:fill .25s ease, transform .3s ease;
}
.theme-toggle:hover svg{fill:var(--green);}

/* sun shown by default, moon hidden */
.theme-toggle .icon-sun{display:block;}
.theme-toggle .icon-moon{display:none;}
[data-theme="dark"] .theme-toggle .icon-sun{display:none;}
[data-theme="dark"] .theme-toggle .icon-moon{display:block;}

[data-theme="dark"] .theme-toggle{
  border-color:var(--line);
}
[data-theme="dark"] .theme-toggle:hover{
  border-color:var(--green);
  background:rgba(61,190,139,0.12);
}
[data-theme="dark"] .theme-toggle svg{fill:var(--ink);}
[data-theme="dark"] .theme-toggle:hover svg{fill:var(--green);}

/* smooth theme transition */
body,
header,
.article-card,
.quote-block,
.impact,
.stats-grid,
.stat,
.info-card,
.project-card,
.heritage-card,
.value-card,
.source-note,
.related-callout,
footer{
  transition:background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* header social icons in dark mode */
[data-theme="dark"] header .socials img{
  filter:grayscale(1);
  opacity:0.6;
}
[data-theme="dark"] header .socials a:hover img{
  opacity:1;
  filter:none;
}