@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap');

/* =======================================================================
   Root Variables
   ======================================================================= */
:root{
  --orange:#F38D32;
  --green:#6EBE44;
  --text:#1B1B1B;
  --muted:#5B677A;
  --bg:#FFFFFF;
  --tint:#F5F5F5;
  --border:#E9EEF3;
  --darkbrown:#000000;
  --glass-bg: rgba(255, 255, 255, 0.14);
  --glass-brd: rgba(255,255,255,0.28);
  --glass-shadow: 0 6px 18px rgba(255,255,255,.10);
}

/* =======================================================================
   Base & Typography
   ======================================================================= */
*{ box-sizing: border-box; }
body{
  margin: 0;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}
a{ color: var(--orange); text-decoration: none; }
a:hover{ opacity: .9; }

/* =======================================================================
   Global Layout & Utilities
   ======================================================================= */
.container{ max-width:1180px; margin:0 auto; padding:0 20px; }
.wrap{ max-width:1100px; margin:0 auto; padding:0 20px; }
.section{ padding:48px 0; }
.section.tint{ background: var(--tint); }
.h2{ color: var(--darkbrown); text-align:center; margin:0 0 18px; font-size:28px; font-weight:700; }
.intro{ text-align:center; max-width:1200px; margin:0 auto 14px; color:#1F2A37; }
.eyebrow{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); margin:0 0 8px; }
.subhead{ color:var(--muted); max-width:760px; margin-left:auto; margin-right:auto; }

/* =======================================================================
   Header & Navigation
   ======================================================================= */
.site-header{
  position: sticky; top: 0; z-index: 10;
  background: #fff;
  height: 80px;
  display: flex; align-items: center;
}
.header-wrap{
  display: flex; align-items: center; height: 100%; gap: 16px;
}

/* Logo block pinned to left (kept for current HTML structure) */
.header-wrap a.brand{
  margin-left: -80px;
  background: var(--bg);
  height: 100%;
  display: flex; align-items: flex-end;
  padding-left: 16px; padding-right: 0px;
}
.logo{ height:auto; max-height:80px; width:auto; margin-bottom:0; }
.logo.small{ height:36px; }

.nav ul{
  display:flex; gap:16px; list-style:none; margin:0; padding:0; align-items:center;
}

/* Link “glass” interaction */
.nav a{
  position: relative; display:inline-block; padding:6px 12px; border-radius:10px; 
  color:var(--bg); /* Keep White Text */
  transition: color .25s ease, transform .25s ease, background-color .25s ease; outline: none;
  background-color: var(--orange); /* KEEP ORANGE BACKGROUND */
}
.nav a::before{
  /* The glass effect will be used as a subtle shadow/border on hover, 
     but the primary background color remains on the main element. 
     We'll hide it by default and re-purpose it for a subtle border/shadow effect. */
  content: ""; position: absolute; inset: -2px; border-radius: inherit; 
  background: transparent; /* Changed to transparent, will use a border */
  border:1px solid rgba(255, 255, 255, 0); /* Invisible border by default */
  box-shadow: none; /* No shadow by default */
  opacity:0; 
  transform: scale(0.95);
  transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease, border .25s ease; 
  z-index:-1;
}

/* --- REVISED HOVER EFFECT (Retaining Orange Background) --- */
.nav a:hover, .nav a:focus-visible{ 
  color: var(--bg); /* Keep white text */
  background-color: #E27923; /* Darker orange on hover */
  transform: translateY(-1px); /* Subtle lift */
  box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* Added subtle shadow to the button itself */
}
.nav a:hover::before, .nav a:focus-visible::before{ 
  /* The before element is not needed for this simpler effect, 
     but keeping the styles minimal if the user's base CSS expects them */
  opacity: 0; 
  transform: scale(1);
}
/* ----------------------------------------------------------------- */

/* Active Link Styles */
.nav a.active{ 
  color:var(--bg); 
  font-weight:600; 
  background-color: var(--orange); /* Ensure the orange background is present */
  border-bottom:2px solid var(--bg); /* Use white for the active indicator for contrast */
  padding-bottom:6px; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.15); /* Subtle shadow for active state */
}
.nav a.active::before{ 
  opacity:0; /* Hide 'glass' effect on active */
}
/* Crucial addition: Prevent hover/focus effects from overriding the active state */
.nav a.active:hover, 
.nav a.active:focus-visible {
  color:var(--bg); 
  background-color: var(--orange); /* KEEP the base orange for active:hover */
  transform: none; /* Prevent the lift effect */
  box-shadow: 0 2px 5px rgba(0,0,0,0.15); /* Keep active shadow */
}
.nav a.active:hover::before, 
.nav a.active:focus-visible::before {
  opacity:0; 
  transform: scale(1); 
}


/* Mobile menu */
.menu-toggle{ display:none; }
@media (max-width: 860px){
  .menu-toggle{
    display:inline-block; background:transparent; border:1px solid var(--border);
    padding:8px 10px; border-radius:10px;
  }
  .nav ul{
    display:none; position:absolute; right:20px; top:66px; background:#fff; border:1px solid var(--border);
    border-radius:12px; flex-direction:column; padding:10px; box-shadow:0 8px 30px rgba(0,0,0,.06); gap:8px;
  }
  .nav ul.open{ display:flex; }
  /* Ensure mobile links are visible - they are NOT buttons in mobile, just links */
  .nav a{ 
    display:block; width:100%; 
    color: var(--text); 
    background: transparent !important; 
    box-shadow: none !important;
  } 
  .nav a.active {
    color: var(--darkbrown); 
    background: var(--tint) !important;
  }
}

/* =======================================================================
   Home Hero
   ======================================================================= */
.hero{
  position:relative; min-height:62vh;
  display:flex; align-items:flex-end;
  padding-bottom:30px; overflow:hidden; background:#000;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:url('/assets/img/HeroSection.jpg') center/cover no-repeat; opacity:.85;
}
.hero .inner{
  position:relative; color:#fff; text-align:left; max-width:1200px; width:100%; padding-left:42ch;
}
.hero h1{ font-size:clamp(18px, 6vw, 48px); line-height:1.1; margin:0; font-weight:500; }
@media (max-width:640px){
  .hero{ padding-bottom:40px; }
  .hero h1{ font-size: clamp(36px, 10vw, 48px); }
}

/* Tagline band under hero */
.tagline-band{ background:var(--darkbrown); color:#fff; padding:35px 20px; }
.tagline-band .wrap{ max-width:900px; margin:0 auto; text-align:center; }
.tagline-band p{ font-family:'Poppins', sans-serif; font-size:clamp(20px,2vw,22px); line-height:1.5; margin:0; }
.tagline-band .dropcap{
  display:inline; font-size:3em; font-weight:700; color:var(--orange);
  vertical-align:baseline; margin-right:-0.1em;
}

/* Intro band (content paragraphs + decorative images) */
.intro-band{ max-width:1000px; margin:0 auto; padding:10px 10px; text-align:justify; position:relative; }
.intro-band p{ font-size:18px; color:#000; line-height:1.6; }
.intro-band .deco-left, .intro-band .deco-right{
  position:absolute; width:80px; height:auto; padding-top:20px; padding-bottom:20px;
}
.intro-band .deco-left{ top:-20px; left:-100px; }
.intro-band .deco-right{ bottom:-20px; right:-100px; }
@media (max-width:1100px){ .intro-band .deco-left, .intro-band .deco-right{ display:none; } }

/* Join band */
.join-band{ background:var(--darkbrown); color:#fff; padding:0 0; }
.join-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.join-title{ margin:0; line-height:1; }
.join-title span{ color:var(--orange); }
.join-subtext{ font-size:18px; line-height:1.5; margin:10px 0 20px; }
.join-img-container{ overflow:hidden; height:100%; }
.join-img{ display:block; width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){
  .join-grid{ grid-template-columns:1fr; }
  .join-content{ text-align:center; }
  .join-title span{ font-size:2.5em !important; }
}

/* =======================================================================
   Generic Section Hero (Unifies About / Researchers / Changemakers / Rise)
   - Keeps existing class names for backward compatibility.
   ======================================================================= */
.hero-section,
.about-hero,
.hero-researchers,
.hero-changemakers,
.hero-rise,
.hero-rp,
.hero-contact{
  background: var(--darkbrown);
  color:#fff;
  text-align:center;
  padding:50px 0;
}

.hero-section h1,
.about-hero h1,
.hero-researchers h1,
.hero-changemakers h1,
.hero-rise h1,
.hero-rp h1,
.hero-contact h1{
  font-weight:500;
  margin-top:10;
  font-size: clamp(32px, 3vw, 48px);
}
.about-hero h1{
  font-size: clamp(32px, 2vw, 48px);
}

/* About content paragraphs */
.about-content-body p{ line-height:1.7; margin:0 0 14px; text-align:justify; font-size:18px; }

/* =======================================================================
   Grids
   ======================================================================= */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

@media (max-width:900px){
  .grid-3{ grid-template-columns:1fr 1fr; }
  .grid-4{ grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width:760px){
  .grid-3{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .grid-2{ grid-template-columns:1fr; }
}

/* =======================================================================
   Cards / Buttons / Chips
   ======================================================================= */
.card{
  background:#fff; border:1px solid var(--border); border-radius:16px;
  padding:18px; box-shadow:0 6px 16px rgba(0,0,0,0.06);
}
.card h3{ margin:0 0 10px; color:var(--darkbrown); font-size:18px; }
.card p{ margin:0 0 14px; line-height:1.65; color:#1F2A37; }

.btn{
  display:inline-block; padding:12px 16px; border-radius:12px; background:var(--orange);
  color:#fff; font-weight:600; border:none;
}
.btn-outline{ background:transparent; border:1.5px solid var(--orange); color:var(--orange); }
.btn-disabled{ opacity:.6; cursor:not-allowed; }

/* Light outline button (for dark hero backgrounds) */
.btn-outline-light{
  display:inline-block; padding:10px 24px; background:none; border:1px solid #fff; color:#fff;
  border-radius:8px; font-weight:600; margin-left:10px; transition:all .2s;
}
.btn-outline-light:hover{ background: rgba(255,255,255,.1); }

.cta{ display:inline-block; background:var(--orange); color:#fff; border:none; border-radius:10px; padding:10px 14px; font-weight:600; text-decoration:none; }

/* Chip */
.chip{
  display:inline-flex; align-items:center; gap:10px;
  background:#F7FAFC; border:1px solid #E5E7EB; border-radius:12px; padding:10px 12px;
}
.chip img{ width:28px; height:28px; }

/* Frontiers chip grid (shared) */
.frontiers-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:24px; max-width:1000px; margin-left:auto; margin-right:auto;
}
@media (max-width:900px){ .frontiers-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:640px){ .frontiers-grid{ grid-template-columns:repeat(2, 1fr); } }

/* Elevated chip (icon over label) */
.chip.elevated,
.chip.cardlike{
  flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:16px 12px;
  box-shadow:0 4px 10px rgba(0,0,0,0.04); text-align:center; min-height:100px; transition:all .2s;
}
.chip.elevated:hover,
.chip.cardlike:hover{
  border-color:var(--orange); box-shadow:0 6px 16px rgba(0,0,0,0.1);
}
.chip.elevated img{ width:38px; height:38px; }
.chip.elevated span{ font-size:14px; font-weight:600; color:var(--darkbrown); }

/* Modern text link */
.text-link{
  display:inline-flex; align-items:center; gap:6px; color:var(--orange);
  font-weight:500; text-decoration:none; border-bottom:1px solid transparent; transition: all .2s ease;
}
.text-link::after{ content:"→"; font-size:1.1em; font-weight:700; transition: transform .2s ease; }
.text-link:hover{ color:var(--darkbrown); border-bottom:1px solid var(--orange); opacity:1; }
.text-link:hover::after{ transform: translateX(2px); }

/* =======================================================================
   Mission/Vision + Lists (Reusable)
   ======================================================================= */
.mv-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch;
  max-width:1000px; margin:0 auto; list-style:none; padding:0;
}
@media (max-width:768px){ .mv-grid{ grid-template-columns:1fr; } }

.mv-card,
.mv-grid li{
  background:var(--bg); border:1px solid var(--border); border-radius:16px;
  padding:30px; box-shadow:0 4px 12px rgba(0,0,0,0.05); text-align:left; line-height:1.6;
  color:var(--darkbrown); font-weight:400;
}
.mv-card h3{ margin:0 0 20px; font-size:24px; font-weight:700; color:var(--darkbrown); }
.mv-card h3 .mv-icon{ font-size:1.2em; margin-right:8px; color:var(--orange); }

.mv-card ul.mv-list{ list-style:none; padding-left:0; }
.mv-card ul.mv-list li{
  background:none; border:none; padding:0; box-shadow:none; position:relative;
  margin-bottom:12px; font-weight:400; color:#1F2A37;
}

/* Core beliefs & pillars (carded list items) */
.core-belief-list, .pillars-list{
  list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:16px;
}
.core-belief-list li, .pillars-list li{
  background:var(--bg); border:1px solid var(--border); border-radius:12px; box-shadow:0 1px 4px rgba(0,0,0,0.05);
  line-height:1.5; font-size:16px; color:var(--text); padding:20px; position:relative; font-weight:500;
}
/* Beliefs: circular icon badge */
.core-belief-list li{ padding-left:70px; min-height:60px; }
.core-belief-list li .belief-icon{
  display:flex; align-items:center; justify-content:center; position:absolute; left:20px; top:50%; transform: translateY(-50%);
  width:36px; height:36px; border-radius:50%; color:var(--bg); font-size:18px; font-weight:700; line-height:1;
}
/* Pillars: watermark numbering */
.pillars-list{ counter-reset: pillar-counter; }
.pillars-list li{ counter-increment: pillar-counter; padding-left:90px; }
.pillars-list li::before{
  content: counter(pillar-counter, decimal-leading-zero);
  position:absolute; left:10px; top:50%; transform: translateY(-50%); z-index:1;
  color:var(--orange); font-size:3.5em; font-weight:500; opacity:.55; line-height:1;
}

/* Ethos quote */
.ethos-quote{
  font-size:18px; font-weight:500; text-align:center;
  max-width:1200px; margin:10px auto; 
}
.ethos-quote .ethos-highlight{
  display:block; margin-top:25px; font-weight:500; color:var(--orange); font-size:18px;
}
@media (max-width:768px){
  .ethos-quote{ font-size:22px; }
  .ethos-quote .ethos-highlight{ font-size:28px; }
}

/* Strategy list (icon bullets) */
.strategy-list{
  list-style:none; padding:0; margin-top:24px;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:24px;
  max-width:900px; margin-left:auto; margin-right:auto;
}
@media (max-width:768px){ .strategy-list{ grid-template-columns:1fr; } }
.strategy-list li{
  background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:20px; box-shadow:0 4px 10px rgba(0,0,0,0.04);
}
.strategy-list li h3{
  margin:0 0 8px; font-size:18px; display:flex; align-items:center; color:var(--darkbrown);
}
.strategy-list li .strategy-icon{ font-size:1.5em; margin-right:12px; color:var(--orange); }
.strategy-list li p{ margin:0; font-size:15px; line-height:1.6; color:var(--muted); }

/* Criteria & Process (reused across pages) */
.core-pillar-card{
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:18px; margin-bottom:20px; box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.core-pillar-card h4{ color:var(--orange) !important; font-size:16px; font-weight:700; }

.criteria-list{
  list-style:none; padding:0; max-width:600px; margin:0 auto;
}
.criteria-list li{
  position:relative; padding-left:25px; margin-bottom:8px; font-size:16px; color:var(--darkbrown); text-align:left;
}
.criteria-list li::before{
  content:"•"; color:var(--orange); position:absolute; left:0; font-weight:bold; font-size:1.2em; line-height:1;
}

.process-list{ list-style:none; padding:0; margin-top:30px; }
.process-list li{
  position:relative; padding-left:50px; padding-bottom:20px; margin-bottom:20px; border-left:2px solid var(--border);
}
.process-list li:last-child{ border-left:none; }
.process-list li span{
  position:absolute; left:-15px; top:0; display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; background:var(--orange); color:var(--bg);
  font-weight:700; font-size:16px; z-index:2;
}
.process-list li h3{ margin:0 0 4px; font-size:18px; color:var(--darkbrown); }
.process-list li p{ margin:0; font-size:15px; color:var(--muted); }

/* FAQ (shared) */
.faq-list{ max-width:900px; margin:24px auto 0; text-align:left; }
.faq-item {
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  margin-bottom: 12px;
  overflow: hidden;
  background-color: transparent; /* FIXED: Explicitly set background to transparent */
}
.faq-item:last-child{ border-bottom:none; }
.faq-item .faq-q{ font-weight:600; color:var(--darkbrown); font-size:17px; }
.faq-item .faq-a{ padding-top:10px; line-height:1.7; color:var(--muted); }
.faq-item summary {
  padding: 20px 24px;
  display: block;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.125rem; /* 18px */
  color: #1F2A37;
  list-style: none;
}
/* Partner box / Transparency list / Forms (shared) */
.partner-box{
  padding:20px; border-left:3px solid var(--orange); background:var(--bg);
  border-radius:0 10px 10px 0;
}
.partner-box h4{ margin:0 0 6px; color:var(--darkbrown); font-size:20px; }

.transparency-list{
  list-style:none; padding-left:0; max-width:800px; margin:24px auto; text-align:left; 
}
.transparency-list li{
  display:flex; align-items:center; gap:0px; margin-bottom:12px; font-size:17px; color:var(--text);
}
.transparency-list li::before{
  color:var(--green); font-size:20px; font-weight:700;
}

.form-container{
  max-width:600px; margin:0 auto; padding:30px; background:var(--bg);
  border:1px solid var(--border); border-radius:14px; text-align:left;
}
.form-container input, .form-container textarea{
  width:100%; padding:10px; margin-bottom:15px; border:1px solid var(--border); border-radius:8px; box-sizing:border-box;
}
.form-container textarea{ height:100px; resize:vertical; }

/* =======================================================================
   Footer
   ======================================================================= */
.site-footer{ border-top:1px solid var(--border); margin-top:56px; }
.site-footer.dark{ background:var(--darkbrown); color:#fff; }
.site-footer.dark a{ color:var(--tint); }
.site-footer.dark .muted{ color:rgba(255,255,255,.8); }

.site-footer .footer-grid{
  display:grid; grid-template-columns:2fr 1.2fr 1.4fr; gap:24px; padding:28px 0;
}
@media (max-width:900px){ .site-footer .footer-grid{ grid-template-columns:1fr; } }

.site-footer .brandline{
  display:flex; align-items:flex-start; gap:0px; margin-bottom:-20px; color:var(--orange); font-size:20px;
}
.site-footer address{ font-style:normal; line-height:1.5; margin:6px 0 0; opacity:.95; }

.site-footer.dark .muted{
  color: rgba(255,255,255,.8);
  font-family: Poppins, sans-serif;
  background: transparent;
}

.f-group h5{ font-size:14px; text-transform:uppercase; letter-spacing:.08em; margin:0 0 8px; }
.f-links{ list-style:none; margin:0; padding:0; color:var(--bg); }
.f-links li{ margin:6px 0; color:var(--bg); font-size:13px; }

.subscribe-row{ display:flex; gap:8px; margin-top:10px; }
.subscribe-row input{
  flex:1; min-width:220px; border-radius:10px; border:1px solid rgba(255,255,255,.25);
  padding:10px 12px; background:rgba(0,0,0,.18); color:#fff;
}
.subscribe-row input::placeholder{ color:rgba(255,255,255,.7); }
.subscribe-row .btn{ background:#F38D32; color:#fff; border:none; padding:10px 14px; border-radius:10px; font-weight:600; }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.85); padding:12px 0;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}

/* Social icons */
.social .icon-link{
  width:36px; height:36px; border:1px solid rgba(255,255,255,.25); border-radius:10px; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.social .icon-link:hover{ background:#F38D32; border-color:#F38D32; }
.social .icon-link svg{ width:20px; height:20px; }
.social-list{ display:flex; gap:8px; list-style:none; padding:0; margin:0; }

/* Reusable boxed content */
.boxed-content{
  background:#fff; border:1px solid var(--border); border-radius:16px; padding:24px;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

/* --- Contact Page Specific Styles --- */


/* Specific styling for the Contact Details blocks in the left column */
.contact-detail-block {
    padding: 15px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.contact-detail-block:last-child {
    border-bottom: none;
}
.contact-detail-block h4 {
    color: var(--orange);
    font-size: 18px;
    margin: 0;
}
.contact-detail-block p {
    margin: 5px 0 0;
    font-size: 15px;
}

/* Ensure select dropdown in form matches input/textarea style */
.form-container select { 
    width: 100%; 
    padding: 10px; 
    margin-bottom: 15px; 
    border: 1px solid var(--border); 
    border-radius: 8px; 
    box-sizing: border-box; 
    appearance: none; /* Removes default OS styling for a cleaner look */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="%231b1b1b"><polygon points="0,3 10,3 5,9"/></svg>') no-repeat right 10px center;
    background-size: 10px;
}

.subscribe-message {
  font-size: 14px;
  margin-top: 10px;
  text-align: center;
  transition: opacity 0.3s ease;
}

.contact-status { font-size: 14px; transition: opacity .25s ease; }
.contact-form[aria-busy="true"] { opacity: .8; pointer-events: none; }