/* ================================================================
   UPLUS INTERNATIONAL — GLOBAL STYLESHEET v2.0
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root {
  --green-dark:  #145a32;
  --green-main:  #1e8449;
  --green-light: #27ae60;
  --green-pale:  #eafaf1;
  --amber:       #e67e22;
  --amber-light: #f39c12;
  --amber-pale:  #fef9f0;
  --navy:        #1a252f;
  --slate:       #2c3e50;
  --gray-dark:   #4a4a4a;
  --gray-mid:    #7f8c8d;
  --gray-light:  #ecf0f1;
  --white:       #ffffff;
  --off-white:   #f8faf9;
  --shadow-sm:   0 2px 8px rgba(0,0,0,.08);
  --shadow-md:   0 8px 30px rgba(0,0,0,.12);
  --shadow-lg:   0 20px 60px rgba(0,0,0,.15);
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 32px;
  --t: all .3s cubic-bezier(.4,0,.2,1);
  --font-h: 'Playfair Display', Georgia, serif;
  --font-b: 'DM Sans', sans-serif;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);color:var(--gray-dark);background:var(--white);line-height:1.65;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
h1,h2,h3,h4{font-family:var(--font-h);line-height:1.2;color:var(--navy)}
h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:900}
h2{font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:700}
h3{font-size:clamp(1.1rem,2vw,1.5rem);font-weight:700}
p{font-size:1rem;color:var(--gray-dark)}

.container{max-width:1160px;margin:0 auto;padding:0 24px}
.section-pad{padding:90px 0}
.text-center{text-align:center}
.bg-pale{background:var(--off-white)}
.bg-green{background:var(--green-dark)}

.section-label{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--green-main);background:var(--green-pale);padding:5px 14px;border-radius:50px;margin-bottom:14px}
.section-label.amber{color:var(--amber);background:var(--amber-pale)}
.section-label.white{color:rgba(255,255,255,.9);background:rgba(255,255,255,.15)}
.section-title{margin-bottom:12px}
.section-subtitle{color:var(--gray-mid);font-size:1.05rem;max-width:560px;margin:0 auto 48px}

.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:50px;font-family:var(--font-b);font-size:.95rem;font-weight:600;transition:var(--t);cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--green-main);color:var(--white);box-shadow:0 4px 20px rgba(30,132,73,.35)}
.btn-primary:hover{background:var(--green-dark);transform:translateY(-2px);box-shadow:0 8px 28px rgba(30,132,73,.45)}
.btn-secondary{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.7)}
.btn-secondary:hover{background:rgba(255,255,255,.15);border-color:var(--white)}
.btn-amber{background:var(--amber);color:var(--white);box-shadow:0 4px 20px rgba(230,126,34,.35)}
.btn-amber:hover{background:#d35400;transform:translateY(-2px)}
.btn-outline-green{background:transparent;color:var(--green-main);border:2px solid var(--green-main)}
.btn-outline-green:hover{background:var(--green-main);color:var(--white)}
.btn-lg{padding:17px 40px;font-size:1.05rem}
.btn-sm{padding:10px 22px;font-size:.88rem}
.btn-white{background:var(--white);color:var(--amber);font-weight:700;box-shadow:0 4px 20px rgba(0,0,0,.15)}
.btn-white:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.2)}

/* --- HEADER --- */
#main-header{position:fixed;top:0;left:0;right:0;z-index:1000;transition:var(--t)}
#main-header.scrolled{background:var(--white);box-shadow:var(--shadow-sm)}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:1160px;margin:0 auto}
.navbar-brand img{height:50px;width:auto}
.navbar-links{display:flex;align-items:center;gap:4px}
.nav-link{padding:8px 14px;font-size:.9rem;font-weight:500;color:var(--white);border-radius:var(--r-sm);transition:var(--t)}
#main-header.scrolled .nav-link{color:var(--navy)}
.nav-link:hover,.nav-link.active{color:var(--green-light)}
#main-header.scrolled .nav-link:hover,.nav-link.active{color:var(--green-main)}
.nav-item.dropdown{position:relative}
.dropdown-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--white);border-radius:var(--r-md);box-shadow:var(--shadow-md);padding:8px;min-width:180px;opacity:0;pointer-events:none;transition:var(--t);border:1px solid var(--gray-light)}
.nav-item.dropdown:hover .dropdown-menu{opacity:1;pointer-events:all}
.dropdown-item{display:block;padding:10px 16px;font-size:.88rem;color:var(--gray-dark);border-radius:var(--r-sm);transition:var(--t)}
.dropdown-item:hover,.dropdown-item.active{background:var(--green-pale);color:var(--green-main)}
.nav-cta{background:var(--amber) !important;color:var(--white) !important;padding:9px 22px !important;border-radius:50px;font-weight:600 !important}
.nav-cta:hover{background:#d35400 !important;transform:translateY(-1px)}
#floating-nav-toggle{display:none;position:fixed;bottom:24px;right:24px;width:52px;height:52px;background:var(--green-main);color:var(--white);border-radius:50%;font-size:1.2rem;box-shadow:var(--shadow-md);z-index:1100;align-items:center;justify-content:center;transition:var(--t)}
#floating-nav-toggle:hover{background:var(--green-dark)}
#mobile-nav{display:none;position:fixed;inset:0;background:var(--navy);z-index:1050;flex-direction:column;align-items:center;justify-content:center;gap:6px}
#mobile-nav.open{display:flex}
#mobile-nav .nav-link{font-size:1.4rem;color:var(--white);padding:12px 32px}
#mobile-nav .nav-link:hover{color:var(--green-light)}
#close-mobile-nav{position:absolute;top:20px;right:24px;color:var(--white);font-size:1.5rem}

/* --- HERO --- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:var(--navy)}
.hero-bg{position:absolute;inset:0;background-image:url('images/hero-bg.jpg');background-size:cover;background-position:center;opacity:.3}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(20,90,50,.92) 0%,rgba(26,37,47,.85) 60%,rgba(26,37,47,.7) 100%)}
.hero-content{position:relative;z-index:2;max-width:760px;padding-top:80px}
.hero-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);backdrop-filter:blur(6px);color:var(--white);padding:8px 18px;border-radius:50px;font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:28px;border:1px solid rgba(255,255,255,.2);animation:fadeInDown .8s ease both}
.hero-tag i{color:var(--amber-light)}
.hero h1{color:var(--white);font-size:clamp(2.6rem,6vw,4.5rem);line-height:1.1;margin-bottom:24px;animation:fadeInUp .9s .15s ease both}
.hero h1 span{color:var(--amber-light)}
.hero-sub{font-size:1.12rem;color:rgba(255,255,255,.85);max-width:560px;margin-bottom:40px;animation:fadeInUp .9s .3s ease both}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;animation:fadeInUp .9s .45s ease both}
.hero-scroll{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.5);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;animation:bounce 2s infinite;z-index:2}

/* Stats bar */
.hero-stats{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.3);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1);z-index:3}
.hero-stats-inner{display:grid;grid-template-columns:repeat(3,1fr);max-width:900px;margin:0 auto}
.hero-stat{padding:22px 20px;text-align:center;border-right:1px solid rgba(255,255,255,.1)}
.hero-stat:last-child{border-right:none}
.hero-stat .num{display:block;font-family:var(--font-h);font-size:2rem;font-weight:900;color:var(--amber-light);line-height:1;margin-bottom:4px}
.hero-stat .lbl{display:block;font-size:.8rem;color:rgba(255,255,255,.7);font-weight:500}

/* --- IMPACT STRIP --- */
.impact-strip{background:var(--green-dark);padding:13px 0;overflow:hidden}
.strip-track{display:flex;gap:48px;width:max-content;animation:marquee 28s linear infinite}
.strip-item{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.8);font-size:.86rem;font-weight:500;white-space:nowrap}
.strip-item i{color:var(--amber-light);font-size:.85rem}

/* --- WHAT WE DO --- */
.what-we-do{padding:100px 0}
.what-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:56px}
.what-card{background:var(--off-white);border-radius:var(--r-lg);padding:36px 28px;transition:var(--t);border:1px solid transparent;position:relative;overflow:hidden}
.what-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--green-main);transform:scaleX(0);transition:var(--t)}
.what-card:hover::before{transform:scaleX(1)}
.what-card:hover{border-color:var(--green-pale);box-shadow:var(--shadow-md);transform:translateY(-4px);background:var(--white)}
.what-icon{width:60px;height:60px;border-radius:var(--r-md);background:var(--green-pale);display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:var(--t)}
.what-card:hover .what-icon{background:var(--green-main)}
.what-icon i{font-size:1.4rem;color:var(--green-main);transition:var(--t)}
.what-card:hover .what-icon i{color:var(--white)}
.what-card h3{margin-bottom:10px;font-size:1.15rem}
.what-card p{color:var(--gray-mid);font-size:.93rem;line-height:1.7}

/* --- IMPACT NUMBERS --- */
.impact-numbers{padding:100px 0;background:var(--green-dark);position:relative;overflow:hidden}
.impact-numbers::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E");pointer-events:none}
.numbers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:0}
.number-card{text-align:center;padding:44px 20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);transition:var(--t)}
.number-card:hover{background:rgba(255,255,255,.1)}
.number-card .big-num{font-family:var(--font-h);font-size:clamp(2.5rem,4vw,3.5rem);font-weight:900;color:var(--amber-light);line-height:1;display:block;margin-bottom:8px}
.number-card .num-lbl{font-size:.88rem;color:rgba(255,255,255,.7);font-weight:500}
.number-card .num-icon{font-size:1.5rem;color:rgba(255,255,255,.18);display:block;margin-bottom:14px}

/* --- STORIES --- */
.stories{padding:100px 0}
.stories-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px;margin-top:56px}
.story-card{background:var(--white);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);transition:var(--t);display:flex;flex-direction:column;border:1px solid var(--gray-light)}
.story-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.story-card.featured{grid-row:span 2}
.story-img-wrap{overflow:hidden}
.story-img{width:100%;height:200px;object-fit:cover;transition:var(--t)}
.story-card.featured .story-img{height:290px}
.story-card:hover .story-img{transform:scale(1.04)}
.story-body{padding:22px;flex:1;display:flex;flex-direction:column}
.story-tag{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-main);background:var(--green-pale);padding:3px 10px;border-radius:50px;display:inline-block;margin-bottom:8px}
.story-date{font-size:.78rem;color:var(--gray-mid);margin-bottom:8px}
.story-body h3{font-size:1rem;margin-bottom:8px;line-height:1.4}
.story-card.featured .story-body h3{font-size:1.25rem}
.story-excerpt{font-size:.88rem;color:var(--gray-mid);flex:1;margin-bottom:14px}
.story-link{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;font-weight:600;color:var(--green-main);transition:var(--t)}
.story-link:hover{gap:10px}

/* --- CTA BAND --- */
.cta-band{background:var(--amber);padding:80px 0;text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.06) 0%,transparent 60%)}
.cta-band h2{color:var(--white);margin-bottom:14px;position:relative}
.cta-band p{color:rgba(255,255,255,.9);max-width:520px;margin:0 auto 36px;position:relative}

/* --- APPROACH --- */
.approach{padding:100px 0}
.approach-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-top:56px}
.approach-img-wrap{position:relative}
.approach-img{width:100%;border-radius:var(--r-xl);box-shadow:var(--shadow-lg)}
.approach-badge{position:absolute;bottom:-20px;right:-20px;background:var(--amber);color:var(--white);border-radius:var(--r-md);padding:20px 24px;text-align:center;box-shadow:var(--shadow-md)}
.approach-badge .big{display:block;font-size:2rem;font-weight:900;font-family:var(--font-h)}
.approach-badge .small{display:block;font-size:.76rem;font-weight:600;opacity:.9}
.approach-steps{display:flex;flex-direction:column;gap:24px}
.step-item{display:flex;gap:18px;align-items:flex-start}
.step-num{flex-shrink:0;width:42px;height:42px;background:var(--green-pale);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-weight:700;color:var(--green-main);font-size:1rem}
.step-text h4{margin-bottom:3px;color:var(--navy);font-size:1rem}
.step-text p{font-size:.88rem;color:var(--gray-mid)}

/* --- NEWSLETTER (mid-page) --- */
.newsletter-section{padding:90px 0;background:var(--green-pale)}
.newsletter-box{max-width:600px;margin:0 auto;text-align:center}
.newsletter-box p{color:var(--gray-mid);margin-bottom:32px}
.nl-names{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.nl-names input,.nl-email-row input{width:100%;border:1.5px solid #d5e8dc;border-radius:50px;padding:13px 20px;font-family:var(--font-b);font-size:.95rem;outline:none;transition:var(--t)}
.nl-names input:focus,.nl-email-row input:focus{border-color:var(--green-main)}
.nl-email-row{display:flex;gap:10px;background:var(--white);border-radius:50px;padding:5px;box-shadow:var(--shadow-md)}
.nl-email-row input{border:none;padding:12px 18px;background:transparent}
.nl-email-row .btn{flex-shrink:0}
#newsletter-message{font-size:.88rem;color:var(--green-main);font-weight:500;min-height:20px;margin-top:10px}
#newsletter-message.error{color:#c0392b}

/* --- PAGE HEADER --- */
.page-header{background:linear-gradient(135deg,var(--green-dark) 0%,var(--slate) 100%);padding:130px 0 70px;text-align:center;position:relative;overflow:hidden}
.page-header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:60px;background:var(--white);clip-path:ellipse(55% 100% at 50% 100%)}
.page-header h1{color:var(--white);margin-bottom:12px}
.page-header .lead{color:rgba(255,255,255,.8);max-width:560px;margin:0 auto}
.inner-page .page-header::after{background:var(--off-white)}

/* --- ABOUT PAGE --- */
.about-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:80px 0}
.about-intro-grid img{border-radius:var(--r-xl);box-shadow:var(--shadow-lg)}
.about-intro-grid h2{margin-bottom:18px}
.about-intro-grid p{color:var(--gray-mid);margin-bottom:14px;font-size:.95rem}
.values-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:48px}
.value-card{padding:26px 22px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--gray-light);transition:var(--t)}
.value-card:hover{border-color:var(--green-light);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.value-icon{font-size:1.7rem;margin-bottom:12px}
.value-card h4{margin-bottom:6px;font-size:1rem}
.value-card p{font-size:.88rem;color:var(--gray-mid)}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.team-card{background:var(--white);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:var(--t);text-align:center}
.team-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.team-photo{width:100%;height:260px;object-fit:cover;object-position:top}
.team-info{padding:22px 18px}
.team-info h4{margin-bottom:3px;font-size:1rem}
.team-role{font-size:.82rem;color:var(--green-main);font-weight:600;margin-bottom:8px;display:block}
.team-info p{font-size:.85rem;color:var(--gray-mid)}

/* --- PROJECTS PAGE --- */
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.project-card{border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);background:var(--white);transition:var(--t)}
.project-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.project-img-wrap{overflow:hidden;position:relative}
.project-img{width:100%;height:215px;object-fit:cover;transition:var(--t)}
.project-card:hover .project-img{transform:scale(1.05)}
.proj-cat{position:absolute;top:14px;left:14px;background:var(--amber);color:var(--white);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:50px}
.project-body{padding:22px}
.project-body h3{font-size:1.05rem;margin-bottom:8px}
.project-body p{font-size:.88rem;color:var(--gray-mid);margin-bottom:14px}
.project-meta{display:flex;gap:16px;font-size:.8rem;color:var(--gray-mid);border-top:1px solid var(--gray-light);padding-top:12px}
.project-meta span{display:flex;align-items:center;gap:5px}
.project-meta i{color:var(--green-main)}
.articles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:48px}
.article-card{display:flex;gap:18px;background:var(--white);padding:22px;border-radius:var(--r-md);box-shadow:var(--shadow-sm);transition:var(--t);border:1px solid var(--gray-light)}
.article-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.article-img{width:105px;height:95px;object-fit:cover;border-radius:var(--r-sm);flex-shrink:0}
.article-tag{font-size:.7rem;font-weight:700;color:var(--green-main);text-transform:uppercase;letter-spacing:.08em}
.article-info h4{margin:6px 0;font-size:.97rem;line-height:1.4}
.article-info p{font-size:.84rem;color:var(--gray-mid)}

/* --- CONNECT PAGE --- */
.connect-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:start;margin-top:60px}
.contact-form-box{background:var(--white);border-radius:var(--r-lg);padding:40px;box-shadow:var(--shadow-md)}
.uplus-form .form-group{margin-bottom:18px}
.uplus-form label{display:block;font-size:.86rem;font-weight:600;color:var(--navy);margin-bottom:6px}
.uplus-form input,.uplus-form textarea,.uplus-form select{width:100%;padding:12px 15px;border:1.5px solid var(--gray-light);border-radius:var(--r-sm);font-family:var(--font-b);font-size:.93rem;color:var(--navy);outline:none;transition:var(--t);background:var(--white)}
.uplus-form input:focus,.uplus-form textarea:focus,.uplus-form select:focus{border-color:var(--green-main);box-shadow:0 0 0 3px rgba(30,132,73,.1)}
.uplus-form textarea{resize:vertical;min-height:115px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-feedback{margin-top:12px;font-size:.88rem;font-weight:500}
.form-feedback.success{color:var(--green-main)}
.form-feedback.error{color:#c0392b}
.contact-info-box h3{margin-bottom:24px}
.contact-item{display:flex;gap:14px;margin-bottom:24px;align-items:flex-start}
.contact-icon{width:46px;height:46px;background:var(--green-pale);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-icon i{color:var(--green-main);font-size:1.05rem}
.contact-detail h5{font-size:.8rem;color:var(--gray-mid);margin-bottom:3px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.contact-detail p,.contact-detail a{font-size:.92rem;color:var(--navy);font-weight:500}
.contact-detail a:hover{color:var(--green-main)}
.social-connect{margin-top:32px;padding-top:24px;border-top:1px solid var(--gray-light)}
.social-connect h5{font-size:.8rem;color:var(--gray-mid);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;font-weight:600}
.social-icons-row{display:flex;gap:10px}
.social-icon-link{width:40px;height:40px;background:var(--off-white);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gray-dark);font-size:.95rem;transition:var(--t);border:1px solid var(--gray-light)}
.social-icon-link:hover{background:var(--green-main);color:var(--white);border-color:var(--green-main);transform:translateY(-3px)}
.map-section iframe{width:100%;height:360px;border:none;display:block;filter:grayscale(.1)}

/* --- DONATION MODAL --- */
.modal-overlay{position:fixed;inset:0;background:rgba(26,37,47,.7);backdrop-filter:blur(4px);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:var(--t)}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-box{background:var(--white);border-radius:var(--r-xl);max-width:560px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);transform:scale(.95);transition:var(--t)}
.modal-overlay.open .modal-box{transform:scale(1)}
.modal-header{padding:28px 32px 18px;border-bottom:1px solid var(--gray-light);display:flex;justify-content:space-between;align-items:center}
.modal-header h3{margin:0;font-size:1.3rem}
.modal-close{width:34px;height:34px;border-radius:50%;background:var(--gray-light);display:flex;align-items:center;justify-content:center;color:var(--gray-dark);font-size:.95rem;transition:var(--t)}
.modal-close:hover{background:#e74c3c;color:var(--white)}
.modal-body{padding:24px 32px 32px}
.donation-amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:16px 0}
.amount-btn{padding:12px 6px;border:2px solid var(--gray-light);border-radius:var(--r-sm);text-align:center;font-weight:600;font-size:.88rem;color:var(--navy);cursor:pointer;transition:var(--t);background:var(--white);font-family:var(--font-b)}
.amount-btn:hover,.amount-btn.active{border-color:var(--green-main);background:var(--green-pale);color:var(--green-main)}
.notice-box{background:#fff9e6;border:1px solid var(--amber-light);border-radius:var(--r-sm);padding:12px 15px;font-size:.83rem;color:#7d6608;margin:14px 0}
.floating-donate-btn{position:fixed;bottom:28px;left:28px;z-index:900;background:var(--amber);color:var(--white);padding:12px 22px;border-radius:50px;font-weight:700;font-size:.9rem;box-shadow:0 4px 20px rgba(230,126,34,.4);display:inline-flex;align-items:center;gap:8px;transition:var(--t);animation:pulseBtn 3s infinite}
.floating-donate-btn:hover{background:#d35400;transform:translateY(-3px);animation:none}

/* --- NEWS PAGE --- */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}

/* --- FOOTER --- */
footer{background:var(--navy);color:rgba(255,255,255,.75)}
.footer-main{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:44px;padding:70px 0 44px}
.footer-brand img{height:52px;margin-bottom:18px}
.footer-brand p{font-size:.88rem;line-height:1.7;color:rgba(255,255,255,.55);margin-bottom:18px}
.footer-social{display:flex;gap:9px}
.footer-social a{width:36px;height:36px;background:rgba(255,255,255,.08);border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.65);font-size:.9rem;transition:var(--t)}
.footer-social a:hover{background:var(--green-main);color:var(--white)}
.footer-col h5{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--white);margin-bottom:18px}
.footer-col ul{display:flex;flex-direction:column;gap:9px}
.footer-col li a{font-size:.88rem;color:rgba(255,255,255,.55);transition:var(--t);display:flex;align-items:center;gap:6px}
.footer-col li a:hover{color:var(--green-light);padding-left:4px}
.footer-col li a i{font-size:.7rem;color:var(--green-light)}
.footer-contact-item{display:flex;align-items:flex-start;gap:9px;margin-bottom:13px;font-size:.86rem;color:rgba(255,255,255,.55)}
.footer-contact-item i{color:var(--green-light);flex-shrink:0;margin-top:2px}
.f-sub-form{display:flex;flex-direction:column;gap:8px}
.f-sub-form input{padding:10px 14px;border:1px solid rgba(255,255,255,.13);border-radius:var(--r-sm);background:rgba(255,255,255,.07);color:var(--white);font-size:.86rem;font-family:var(--font-b);outline:none;transition:var(--t)}
.f-sub-form input::placeholder{color:rgba(255,255,255,.38)}
.f-sub-form input:focus{border-color:var(--green-light)}
.f-sub-form .btn{width:100%;justify-content:center}
.footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding:22px 0;display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:rgba(255,255,255,.38)}
.footer-bottom a{color:rgba(255,255,255,.45);transition:var(--t)}
.footer-bottom a:hover{color:var(--green-light)}
.footer-bottom-links{display:flex;gap:18px}
#back-to-top{position:fixed;bottom:28px;right:80px;width:42px;height:42px;background:var(--green-main);color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.9rem;box-shadow:var(--shadow-sm);z-index:800;opacity:0;pointer-events:none;transition:var(--t)}
#back-to-top.visible{opacity:1;pointer-events:all}
#back-to-top:hover{background:var(--green-dark);transform:translateY(-3px)}

/* --- ANIMATIONS --- */
@keyframes fadeInDown{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-8px)}}
@keyframes pulseBtn{0%,100%{box-shadow:0 4px 20px rgba(230,126,34,.4)}50%{box-shadow:0 4px 32px rgba(230,126,34,.7)}}
.fade-in{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* --- RESPONSIVE --- */
@media(max-width:1024px){
  .what-grid{grid-template-columns:repeat(2,1fr)}
  .numbers-grid{grid-template-columns:repeat(2,1fr)}
  .stories-grid{grid-template-columns:1fr 1fr}
  .story-card.featured{grid-column:span 2;grid-row:span 1}
  .approach-grid{grid-template-columns:1fr;gap:40px}
  .approach-badge{bottom:16px;right:16px}
  .footer-main{grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .projects-grid{grid-template-columns:repeat(2,1fr)}
  .articles-grid{grid-template-columns:1fr}
  .about-intro-grid{grid-template-columns:1fr;gap:36px}
  .connect-grid{grid-template-columns:1fr}
  .news-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .navbar-links{display:none}
  #floating-nav-toggle{display:flex}
  .hero-stats-inner{grid-template-columns:repeat(2,1fr)}
  .hero-stat:nth-child(3){grid-column:span 2;border-right:none}
  .what-grid{grid-template-columns:1fr}
  .stories-grid{grid-template-columns:1fr}
  .story-card.featured{grid-column:auto}
  .footer-main{grid-template-columns:1fr;gap:28px}
  .footer-bottom{flex-direction:column;gap:10px;text-align:center}
  .nl-names{grid-template-columns:1fr}
  .nl-email-row{flex-direction:column;border-radius:var(--r-md)}
  .nl-email-row .btn{width:100%;justify-content:center}
  .hero-ctas{flex-direction:column}
  .hero-ctas .btn{width:100%;justify-content:center}
  .team-grid{grid-template-columns:1fr}
  .projects-grid{grid-template-columns:1fr}
  .values-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .donation-amounts{grid-template-columns:repeat(2,1fr)}
  #back-to-top{right:28px;bottom:82px}
  .section-pad{padding:64px 0}
  .news-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .hero h1{font-size:2.1rem}
  .numbers-grid{grid-template-columns:1fr}
  .hero-stats-inner{grid-template-columns:1fr}
  .hero-stat{border-right:none;border-bottom:1px solid rgba(255,255,255,.1)}
  .modal-header,.modal-body{padding:18px}
}

/* ================================================================
   PATCH v2.1 — FIXES
   ================================================================ */

/* ── HERO SLIDESHOW ──────────────────────────────────────────── */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
  animation: kenBurns 8s ease-in-out infinite alternate;
}
.hero-slide.active { opacity: 1; }
@keyframes kenBurns {
  from { transform: scale(1);   }
  to   { transform: scale(1.08); }
}
/* Overlay sits above slides */
.hero-overlay { z-index: 1; }
.hero-content  { z-index: 2; }
.hero-scroll   { z-index: 2; }
/* old single bg — hide it */
.hero-bg { display: none !important; }

/* ── STATS BAR — BELOW HERO ──────────────────────────────────── */
/* Remove absolute positioning from hero-stats */
.hero-stats {
  position: static !important;
  background: var(--navy) !important;
  border-top: none !important;
  backdrop-filter: none !important;
}
/* Remove the original space it reserved */
.hero { padding-bottom: 0 !important; }

/* ── IMPACT STRIP — MONOCHROME ───────────────────────────────── */
.impact-strip {
  background: #1c1c1c !important;
}
.strip-item {
  color: rgba(255,255,255,.55) !important;
}
.strip-item i {
  color: rgba(255,255,255,.35) !important;
}

/* ── ICONS — SUBDUED / SLEEK ─────────────────────────────────── */
.what-icon {
  background: #f0f0f0 !important;
  border-radius: 10px !important;
}
.what-icon i {
  color: #555 !important;
  font-size: 1.25rem !important;
}
.what-card:hover .what-icon {
  background: #e8e8e8 !important;
}
.what-card:hover .what-icon i {
  color: #222 !important;
}
/* Contact icons subdued */
.contact-icon {
  background: #f0f0f0 !important;
}
.contact-icon i {
  color: #555 !important;
}
/* Section labels - tone down */
.section-label {
  color: #555 !important;
  background: #efefef !important;
  font-size: .75rem !important;
}
.section-label.amber {
  color: #8a5a1a !important;
  background: #f5e8d0 !important;
}
.section-label.white {
  color: rgba(255,255,255,.8) !important;
  background: rgba(255,255,255,.1) !important;
}
/* Step numbers */
.step-num {
  background: #efefef !important;
  color: #333 !important;
}
/* Number card icons */
.num-icon { color: rgba(255,255,255,.15) !important; }

/* ── TOAST NOTIFICATIONS ─────────────────────────────────────── */
#toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  background: var(--white);
  border-radius: var(--r-md);
  padding: 14px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 340px;
  pointer-events: all;
  animation: toastIn .35s cubic-bezier(.4,0,.2,1) both;
  border-left: 4px solid var(--green-main);
  font-size: .9rem;
  line-height: 1.5;
}
.toast.error   { border-left-color: #c0392b; }
.toast.warning { border-left-color: var(--amber); }
.toast.info    { border-left-color: #2980b9; }
.toast.out     { animation: toastOut .3s ease forwards; }
.toast-icon    { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.toast.error   .toast-icon { color: #c0392b; }
.toast.warning .toast-icon { color: var(--amber); }
.toast.info    .toast-icon { color: #2980b9; }
.toast         .toast-icon { color: var(--green-main); }
.toast-body    { flex: 1; }
.toast-title   { font-weight: 700; color: var(--navy); margin-bottom: 2px; font-size: .88rem; }
.toast-msg     { color: var(--gray-mid); font-size: .84rem; }
.toast-close   { cursor: pointer; color: var(--gray-mid); font-size: .85rem; margin-top: 2px; flex-shrink: 0; transition: var(--t); }
.toast-close:hover { color: var(--navy); }
@keyframes toastIn  { from { opacity:0; transform: translateX(30px); } to { opacity:1; transform: translateX(0); } }
@keyframes toastOut { from { opacity:1; transform: translateX(0); }   to { opacity:0; transform: translateX(30px); } }

/* ── BTN LOADING STATE ───────────────────────────────────────── */
.btn-loading {
  opacity: .75 !important;
  pointer-events: none !important;
}
.btn-loading .fa-spinner { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── HERO — remove min-height padding at bottom (stats moved out) */
.hero { min-height: calc(100vh - 0px); }

/* ── ARTICLES BUTTON in stories section ──────────────────────── */
.stories-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 40px;
  flex-wrap: wrap;
}

/* ── ADMIN download button ───────────────────────────────────── */
.btn-dl {
  background: #2980b9;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-b, 'DM Sans', sans-serif);
  transition: .2s;
}
.btn-dl:hover { background: #1a5276; }

/* ── RESPONSIVE FIXES ────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-stats-inner { grid-template-columns: 1fr 1fr !important; }
  .hero-stat:nth-child(3) { grid-column: 1 / -1; }
  #toast-container { top: 12px; right: 12px; left: 12px; }
  .toast { max-width: 100%; }
}
@media (max-width: 480px) {
  .hero-stats-inner { grid-template-columns: 1fr !important; }
  .hero-stat:nth-child(3) { grid-column: auto; }
}

/* ================================================================
   PATCH v2.2 — Scroll donate, logo, about layout, responsiveness
   ================================================================ */

/* ── LOGO BIGGER ─────────────────────────────────────────────── */
.navbar-brand img { height: 62px !important; width: auto; }

/* ── DONATE BTN — hidden until scroll ───────────────────────── */
.floating-donate-btn {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(12px) !important;
  animation: none !important;
}
.floating-donate-btn.show {
  opacity: 1 !important;
  pointer-events: all !important;
  transform: translateY(0) !important;
  animation: pulseBtn 3s infinite !important;
}
.floating-donate-btn.show:hover {
  animation: none !important;
  transform: translateY(-3px) !important;
}

/* ── HERO STATS BAR — remove (kept in HTML for other pages but hidden on index) */
.hide-stats-bar { display: none !important; }

/* ── ABOUT / PROJECTS PAGE HEADER — curved with overlapping image ── */
.page-header-hero {
  background: linear-gradient(135deg, var(--green-dark) 0%, #1a6b3a 60%, var(--green-main) 100%);
  padding: 130px 0 110px;
  position: relative;
  overflow: visible;
  z-index: 1;
}
.page-header-hero::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: 0;
  right: 0;
  height: 120px;
  background: var(--white);
  clip-path: ellipse(55% 100% at 50% 100%);
  z-index: 0;
}
.page-header-hero.bg-pale-after::after { background: var(--off-white); }

.page-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  position: relative;
  z-index: 2;
}
.page-hero-text { padding-bottom: 20px; }
.page-hero-text .page-tag {
  display: inline-block;
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.9);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,.25);
  margin-bottom: 18px;
}
.page-hero-text h1 {
  color: var(--white);
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin-bottom: 14px;
  line-height: 1.15;
}
.page-hero-text p {
  color: rgba(255,255,255,.82);
  font-size: 1.05rem;
  max-width: 480px;
  line-height: 1.7;
}
.page-hero-img-wrap {
  position: relative;
  align-self: flex-end;
}
.page-hero-img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 50px rgba(0,0,0,.25);
  display: block;
  position: relative;
  z-index: 3;
}
/* The img extends into the white section below */
.page-hero-img-wrap::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: 0;
  right: 0;
  height: 80px;
  background: inherit;
  z-index: 2;
}

/* Page content sits below */
.page-body { padding: 60px 0 80px; position: relative; z-index: 2; }
.page-body.top-space { padding-top: 100px; } /* extra space because img overlaps */

/* ── ABOUT — TWO-COL INTRO ───────────────────────────────────── */
.about-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.about-two-col img {
  width: 100%;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}

/* ── PILLARS — responsive ────────────────────────────────────── */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.pillar-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 36px 28px;
  border: 1px solid #e8e8e8;
  transition: var(--t);
  position: relative;
  overflow: hidden;
}
.pillar-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green-main), var(--green-light));
  transform: scaleX(0);
  transition: var(--t);
  transform-origin: left;
}
.pillar-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: transparent; }
.pillar-card:hover::before { transform: scaleX(1); }
.pillar-num {
  font-family: var(--font-h);
  font-size: 3.5rem;
  font-weight: 900;
  color: #efefef;
  line-height: 1;
  margin-bottom: 14px;
  display: block;
}
.pillar-card h3 { font-size: 1.1rem; margin-bottom: 10px; color: var(--navy); }
.pillar-card p  { font-size: .92rem; color: var(--gray-mid); line-height: 1.7; }
.pillar-icon {
  width: 48px; height: 48px;
  background: var(--green-pale);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.pillar-icon i { font-size: 1.1rem; color: var(--green-main); }

/* ── PROJECT CARDS GRID — responsive ────────────────────────── */
.proj-masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.proj-masonry .project-card:nth-child(1) {
  grid-column: span 2;
}
.proj-masonry .project-card:nth-child(1) .project-img { height: 280px; }

/* ── SECTION ANIMATIONS ──────────────────────────────────────── */
.slide-up   { opacity:0; transform:translateY(40px); transition:opacity .7s ease,transform .7s ease; }
.slide-left { opacity:0; transform:translateX(-40px); transition:opacity .7s ease,transform .7s ease; }
.slide-right{ opacity:0; transform:translateX(40px);  transition:opacity .7s ease,transform .7s ease; }
.zoom-in    { opacity:0; transform:scale(.95);         transition:opacity .6s ease,transform .6s ease; }
.slide-up.in,.slide-left.in,.slide-right.in,.zoom-in.in { opacity:1; transform:none; }

/* ── RESPONSIVE BREAKPOINTS ──────────────────────────────────── */
@media (max-width: 1024px) {
  .page-hero-inner       { grid-template-columns: 1fr; }
  .page-hero-img-wrap    { display: none; }
  .page-header-hero      { padding: 120px 0 70px; }
  .page-header-hero::after { bottom: -40px; height: 80px; }
  .pillars-grid          { grid-template-columns: repeat(2, 1fr); }
  .proj-masonry          { grid-template-columns: repeat(2, 1fr); }
  .proj-masonry .project-card:nth-child(1) { grid-column: span 2; }
  .about-two-col         { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 768px) {
  .pillars-grid          { grid-template-columns: 1fr; }
  .proj-masonry          { grid-template-columns: 1fr; }
  .proj-masonry .project-card:nth-child(1) { grid-column: span 1; }
  .proj-masonry .project-card:nth-child(1) .project-img { height: 215px; }
  .navbar-brand img      { height: 48px !important; }
  .page-body.top-space   { padding-top: 60px; }
}

@media (max-width: 480px) {
  .pillars-grid          { grid-template-columns: 1fr; }
  .hero h1               { font-size: 2rem; }
  .hero-ctas .btn        { font-size: .88rem; padding: 12px 22px; }
}

/* ================================================================
   PATCH v2.3 — Mobile drawer, hero overlay, icons, pillar numbers
   ================================================================ */

/* ── HERO OVERLAY — reduced + corner gradient ────────────────── */
.hero-overlay {
  background: linear-gradient(
    145deg,
    rgba(20, 90, 50, 0.82) 0%,
    rgba(26, 37, 47, 0.60) 45%,
    rgba(15, 25, 50, 0.38) 100%
  ) !important;
}

/* ── NAVBAR HAMBURGER (replaces floating btn) ────────────────── */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.35rem;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  transition: var(--t);
  line-height: 1;
}
#main-header.scrolled .nav-hamburger { color: var(--navy); }
.nav-hamburger:hover { background: rgba(255,255,255,.1); }
#main-header.scrolled .nav-hamburger:hover { background: var(--gray-light); }

/* ── MOBILE BACKDROP ─────────────────────────────────────────── */
.mobile-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1049;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.mobile-backdrop.show { opacity: 1; pointer-events: all; }

/* ── MOBILE NAV DRAWER — slides from LEFT ────────────────────── */
#mobile-nav {
  position: fixed !important;
  top: 0; left: 0; bottom: 0;
  width: min(300px, 88vw);
  background: var(--navy);
  z-index: 1050;
  transform: translateX(-110%) !important;
  transition: transform .38s cubic-bezier(.4,0,.2,1) !important;
  display: flex !important;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: 4px 0 40px rgba(0,0,0,.3);
  padding: 0;
}
#mobile-nav.open { transform: translateX(0) !important; }

.mobile-nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.mobile-nav-top img { height: 40px; }
#close-mobile-nav {
  background: rgba(255,255,255,.1);
  border: none;
  color: var(--white);
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; cursor: pointer; transition: var(--t);
}
#close-mobile-nav:hover { background: rgba(255,255,255,.2); }

.mobile-nav-body { flex: 1; padding: 12px 0 24px; }
.mob-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 22px;
  color: rgba(255,255,255,.8);
  font-size: .95rem; font-weight: 500;
  text-decoration: none;
  transition: var(--t);
  border-left: 3px solid transparent;
}
.mob-link:hover, .mob-link.active {
  color: var(--white);
  background: rgba(255,255,255,.07);
  border-left-color: var(--green-light);
}
.mob-link i { font-size: .75rem; color: rgba(255,255,255,.4); transition: var(--t); }
.mob-group.open .mob-link i { transform: rotate(90deg); }
.mob-sub {
  display: none;
  background: rgba(0,0,0,.2);
  padding: 4px 0;
}
.mob-group.open .mob-sub { display: block; }
.mob-sub a {
  display: block;
  padding: 10px 22px 10px 36px;
  color: rgba(255,255,255,.6);
  font-size: .88rem;
  text-decoration: none;
  transition: var(--t);
}
.mob-sub a:hover { color: var(--green-light); }
.mob-divider { border: none; border-top: 1px solid rgba(255,255,255,.08); margin: 8px 0; }
.mob-donate {
  margin: 12px 20px 0;
  background: var(--amber);
  color: var(--white) !important;
  border-radius: 50px;
  justify-content: center;
  padding: 13px !important;
  font-weight: 700 !important;
  border-left: none !important;
}
.mob-donate:hover { background: #d35400 !important; }

/* ── HIDE OLD FLOATING NAV BTN ───────────────────────────────── */
#floating-nav-toggle { display: none !important; }

/* ── SCROLL ARROW — hide on mobile ──────────────────────────── */
@media (max-width: 768px) {
  .hero-scroll { display: none !important; }
  .nav-hamburger { display: flex; align-items: center; }
  .navbar-links { display: none !important; }
}

/* ── PILLAR NUMBERS — brighter ───────────────────────────────── */
.pillar-num { color: #c8c8c8 !important; }

/* ── DETAIL DRAWER (right side) ──────────────────────────────── */
.detail-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(560px, 100vw);
  background: var(--white);
  z-index: 2100;
  transform: translateX(110%);
  transition: transform .38s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  box-shadow: -4px 0 50px rgba(0,0,0,.2);
  display: flex; flex-direction: column;
}
.detail-drawer.open { transform: translateX(0); }
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 2099;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.drawer-backdrop.show { opacity: 1; pointer-events: all; }
.drawer-header {
  position: sticky; top: 0;
  background: var(--white);
  border-bottom: 1px solid var(--gray-light);
  padding: 16px 22px;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 10;
}
.drawer-close {
  width: 36px; height: 36px;
  background: var(--gray-light); border: none;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .95rem; color: var(--gray-dark); transition: var(--t);
}
.drawer-close:hover { background: #c0392b; color: var(--white); }
.drawer-body { padding: 28px 24px; flex: 1; }
.drawer-img { width: 100%; height: 240px; object-fit: cover; }
.drawer-tag {
  display: inline-block;
  background: var(--green-pale); color: var(--green-main);
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 4px 12px; border-radius: 50px; margin-bottom: 12px;
}
.drawer-title { font-family: var(--font-h); font-size: 1.5rem; margin-bottom: 14px; color: var(--navy); }
.drawer-content { font-size: .95rem; color: var(--gray-mid); line-height: 1.8; }
.drawer-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--gray-light); font-size: .85rem; color: var(--gray-mid); }
.drawer-meta span { display: flex; align-items: center; gap: 5px; }
.drawer-meta i { color: var(--green-main); }

/* ── STORY SUBMISSION FORM ───────────────────────────────────── */
.story-submit-box {
  background: var(--off-white);
  border-radius: var(--r-xl);
  padding: 48px;
  margin-top: 56px;
  border: 2px dashed #c8d8c8;
}

/* ── ADMIN LOGIN PAGE ────────────────────────────────────────── */
.admin-login-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--green-dark), var(--navy));
  padding: 20px;
  font-family: 'DM Sans', sans-serif;
}
.admin-login-box {
  background: var(--white);
  border-radius: 20px;
  padding: 48px 44px;
  width: 100%; max-width: 420px;
  box-shadow: 0 24px 80px rgba(0,0,0,.3);
}
.admin-login-logo { height: 56px; margin: 0 auto 28px; display: block; }
.admin-login-box h2 { text-align: center; margin-bottom: 6px; font-size: 1.5rem; }
.admin-login-box .sub { text-align: center; color: var(--gray-mid); font-size: .88rem; margin-bottom: 32px; }
.admin-login-err {
  background: #fdf2f0; border: 1px solid #f5c6bb; border-radius: 8px;
  padding: 11px 14px; font-size: .86rem; color: #c0392b;
  margin-bottom: 16px; display: none;
}
.admin-login-err.show { display: block; }

/* ── DONATION FORM (printable) ───────────────────────────────── */
.donation-print-form {
  max-width: 680px; margin: 0 auto; padding: 32px;
  border: 2px solid #333; font-family: 'DM Sans', sans-serif;
}
@media print {
  .no-print { display: none !important; }
  body { background: white !important; }
  .donation-print-form { border: 1px solid #000; margin: 0; padding: 20px; }
}

/* ── NAV DROPDOWN — hover always works, inc Impact/About links ── */
.nav-item.dropdown > .nav-link {
  display: flex; align-items: center; gap: 4px;
}
.nav-item.dropdown > .nav-link::after {
  content: '▾';
  font-size: .65em;
  opacity: .7;
}

/* ================================================================
   PATCH v2.3 — Hero, Nav, Hamburger, Mobile, Admin Login
   ================================================================ */

/* ── HERO OVERLAY — less fade, green→navy from top-left ─────── */
.hero-overlay {
  background: linear-gradient(
    135deg,
    rgba(20,90,50,.55) 0%,
    rgba(26,37,47,.72) 55%,
    rgba(26,37,47,.80) 100%
  ) !important;
}

/* ── PILLAR NUMBERS — brighter ───────────────────────────────── */
.pillar-num { color: #d0d0d0 !important; }

/* ── NAV — hover dropdown (pure CSS) ────────────────────────── */
.nav-item.dropdown { position: relative; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: 8px;
  min-width: 190px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  transform: translateX(-50%) translateY(-6px);
  border: 1px solid #eee;
  z-index: 200;
}
.nav-item.dropdown:hover .dropdown-menu,
.nav-item.dropdown:focus-within .dropdown-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.dropdown-item { display:block; padding:9px 15px; font-size:.87rem; color:var(--gray-dark); border-radius:6px; transition:var(--t); }
.dropdown-item:hover,.dropdown-item.active { background:var(--green-pale); color:var(--green-main); }

/* ── MOBILE NAV — slide in from left ────────────────────────── */
#mobile-nav {
  display: flex !important; /* always in DOM */
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: min(320px, 85vw);
  background: var(--navy);
  z-index: 1050;
  flex-direction: column;
  padding: 0;
  transform: translateX(-100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
#mobile-nav.open { transform: translateX(0); }

#mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1040;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  backdrop-filter: blur(2px);
}
#mobile-nav-overlay.open { opacity: 1; pointer-events: all; }

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.mobile-nav-header img { height: 44px; }
#close-mobile-nav {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem;
  transition: var(--t);
  flex-shrink: 0;
}
#close-mobile-nav:hover { background: rgba(255,255,255,.2); }
.mobile-nav-links { padding: 16px 12px; flex: 1; }
.mobile-nav-links a {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  color: rgba(255,255,255,.8);
  font-size: .97rem; font-weight: 500;
  border-radius: 9px;
  transition: var(--t);
  text-decoration: none;
  margin-bottom: 2px;
}
.mobile-nav-links a:hover, .mobile-nav-links a.active {
  background: rgba(255,255,255,.1); color: #fff;
}
.mobile-nav-links a i { width: 18px; text-align: center; opacity: .6; font-size: .9rem; }
.mobile-nav-links .mn-divider {
  height: 1px; background: rgba(255,255,255,.08);
  margin: 10px 0;
}
.mobile-nav-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,.08); }
.mobile-nav-footer .btn { width: 100%; justify-content: center; }

/* ── HIDE SCROLL ARROW ON MOBILE ─────────────────────────────── */
@media (max-width: 768px) {
  .hero-scroll { display: none !important; }
  #floating-nav-toggle {
    display: flex;
    bottom: auto;
    top: 14px; right: 14px;
    width: 42px; height: 42px;
    font-size: 1rem;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(6px);
  }
  #main-header.scrolled #floating-nav-toggle { background: var(--gray-light); color: var(--navy); }
}

/* ── STORY SUBMISSION FORM ───────────────────────────────────── */
.story-submit-box {
  background: linear-gradient(135deg, var(--green-pale) 0%, #fff 60%);
  border-radius: var(--r-xl);
  padding: 52px 44px;
  border: 1px solid #d0eadb;
  max-width: 680px;
  margin: 0 auto;
}
.story-submit-box h2 { margin-bottom: 10px; }
.story-submit-box p { color: var(--gray-mid); margin-bottom: 28px; }

/* ── MODAL — CONTENT DETAIL (article/project/person) ─────────── */
.detail-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(26,37,47,.75);
  backdrop-filter: blur(5px);
  z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.detail-modal-overlay.open { opacity: 1; pointer-events: all; }
.detail-modal {
  background: var(--white);
  border-radius: var(--r-xl);
  max-width: 680px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
  transform: scale(.95) translateY(20px);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.detail-modal-overlay.open .detail-modal { transform: scale(1) translateY(0); }
.detail-modal-img {
  width: 100%; height: 280px;
  object-fit: cover;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.detail-modal-body { padding: 32px 36px 36px; }
.detail-modal-tag {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green-main); background: var(--green-pale);
  padding: 3px 10px; border-radius: 50px; display: inline-block; margin-bottom: 12px;
}
.detail-modal-body h2 { font-size: 1.6rem; margin-bottom: 14px; }
.detail-modal-body p { color: var(--gray-mid); line-height: 1.8; margin-bottom: 14px; font-size: .97rem; }
.detail-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.35); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .9rem; transition: var(--t);
}
.detail-modal-close:hover { background: rgba(0,0,0,.6); }
.detail-modal-wrap { position: relative; }

/* ── SOCIAL FEED SECTION ─────────────────────────────────────── */
.social-feed-section { padding: 80px 0; background: var(--off-white); }
.social-feed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.social-card {
  background: var(--white);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid #eee;
  transition: var(--t);
  cursor: pointer;
}
.social-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.social-card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid #f0f0f0;
}
.social-platform-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; color: #fff; flex-shrink: 0;
}
.social-platform-icon.yt   { background: #FF0000; }
.social-platform-icon.ig   { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.social-platform-icon.wa   { background: #25D366; }
.social-platform-icon.tw   { background: #1DA1F2; }
.social-platform-icon.fb   { background: #1877F2; }
.social-card-head .platform-name { font-size: .8rem; font-weight: 700; color: var(--navy); }
.social-card-head .platform-handle { font-size: .74rem; color: var(--gray-mid); }
.social-card-preview { padding: 14px 16px; }
.social-card-preview .preview-text { font-size: .88rem; color: var(--gray-dark); line-height: 1.6; margin-bottom: 10px; }
.social-card-preview .preview-thumb {
  width: 100%; height: 140px; object-fit: cover; border-radius: 8px; margin-bottom: 10px;
  background: var(--gray-light);
}
.social-card-footer {
  padding: 10px 16px; border-top: 1px solid #f5f5f5;
  display: flex; justify-content: space-between; align-items: center;
}
.social-card-footer .view-link { font-size: .78rem; font-weight: 600; color: var(--green-main); text-decoration: none; }
.social-card-footer .post-date { font-size: .74rem; color: var(--gray-mid); }

/* YouTube embed modal */
.yt-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.85);
  z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.yt-modal-overlay.open { opacity: 1; pointer-events: all; }
.yt-modal-inner {
  position: relative;
  width: 100%; max-width: 820px;
  background: #000; border-radius: 12px; overflow: hidden;
  aspect-ratio: 16/9;
}
.yt-modal-inner iframe { width: 100%; height: 100%; border: none; }
.yt-modal-close {
  position: absolute; top: -44px; right: 0;
  color: #fff; font-size: 1.4rem; cursor: pointer;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
}

/* ── ADMIN LOGIN PAGE ─────────────────────────────────────────── */
.admin-login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--navy) 0%, #0f1d25 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  font-family: 'DM Sans', sans-serif;
}
.admin-login-card {
  background: #fff;
  border-radius: 20px;
  padding: 48px 44px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 24px 80px rgba(0,0,0,.4);
}
.admin-login-logo { text-align: center; margin-bottom: 28px; }
.admin-login-logo img { height: 56px; }
.admin-login-logo h2 { font-size: 1.3rem; color: var(--navy); margin-top: 14px; font-family: 'Playfair Display', serif; }
.admin-login-logo p { font-size: .85rem; color: #999; margin-top: 4px; }
.login-form .form-group { margin-bottom: 16px; }
.login-form label { display: block; font-size: .84rem; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.login-form input {
  width: 100%; padding: 12px 15px;
  border: 1.5px solid #e0e0e0; border-radius: 8px;
  font-family: 'DM Sans', sans-serif; font-size: .95rem; outline: none;
  transition: border-color .2s;
}
.login-form input:focus { border-color: var(--green-main); }
.login-error { background: #fdf2f0; color: #c0392b; border: 1px solid #f5c0b0; border-radius: 8px; padding: 10px 14px; font-size: .86rem; margin-bottom: 16px; display: none; }
.login-error.show { display: block; }
.login-submit { width: 100%; padding: 13px; background: var(--green-main); color: #fff; border: none; border-radius: 8px; font-size: .97rem; font-weight: 700; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: background .2s; margin-top: 4px; }
.login-submit:hover { background: var(--green-dark); }
.login-reset-link { text-align: center; margin-top: 18px; font-size: .84rem; color: #999; }
.login-reset-link a { color: var(--green-main); font-weight: 600; text-decoration: none; }

/* ── DONATION PAGE ───────────────────────────────────────────── */
.donation-page-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 44px;
  margin-top: 52px;
  align-items: start;
}
.bank-details-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 36px;
  box-shadow: var(--shadow-md);
  border-top: 5px solid var(--green-main);
}
.bank-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px 14px;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
  align-items: center;
}
.bank-row:last-child { border-bottom: none; }
.bank-row .lbl { font-size: .8rem; color: #999; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.bank-row .val { font-size: .95rem; color: var(--navy); font-weight: 600; }
.bank-row .val.mono { font-family: monospace; letter-spacing: .08em; font-size: 1.05rem; }

@media (max-width: 768px) {
  .social-feed-grid { grid-template-columns: 1fr; }
  .donation-page-grid { grid-template-columns: 1fr; }
  .story-submit-box { padding: 32px 20px; }
  .detail-modal-body { padding: 20px 22px 28px; }
}

/* ================================================================
   PATCH v2.4 — Hamburger, icons, colors, responsiveness, URLs
   ================================================================ */

/* ── HAMBURGER FIX — override the !important that was hiding it ─ */
#floating-nav-toggle {
  display: none;          /* desktop: hidden */
  position: fixed;
  top: 14px; right: 16px;
  width: 44px; height: 44px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.25);
  color: var(--white);
  border-radius: 10px;
  font-size: 1.05rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
  z-index: 1200;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--t);
}
#main-header.scrolled #floating-nav-toggle {
  background: var(--white);
  color: var(--navy);
  border-color: var(--gray-light);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 900px) {
  #floating-nav-toggle { display: flex !important; }
  .navbar-links        { display: none !important; }
}

/* ── REMOVE ALL FOCUS OUTLINES / BLUE RINGS ──────────────────── */
*:focus { outline: none !important; box-shadow: none !important; }
.btn:focus, button:focus, a:focus, input:focus, select:focus, textarea:focus {
  outline: none !important;
  box-shadow: none !important;
}
/* Keep a subtle focus ring only for keyboard users (accessibility) */
.btn:focus-visible { box-shadow: 0 0 0 2px var(--green-light) !important; }

/* ── EXTENDED BRAND COLORS ───────────────────────────────────── */
:root {
  --logo-orange: #e8521a;   /* exact orange from UPLUS logo */
  --logo-navy:   #1c3048;   /* dark navy from logo */
  --logo-orange-pale: #fdf0eb;
}
/* Override amber with exact logo orange where used */
.btn-amber, .floating-donate-btn, .nav-cta {
  background: var(--logo-orange) !important;
}
.btn-amber:hover { background: #c74416 !important; }
.floating-donate-btn:hover { background: #c74416 !important; }
.nav-cta:hover { background: #c74416 !important; }
.cta-band { background: var(--logo-orange) !important; }
.approach-badge { background: var(--logo-orange) !important; }

/* Navy accent use */
.hero-stats { background: var(--logo-navy) !important; }
.footer { background: var(--logo-navy) !important; }
.sidebar { background: var(--logo-navy) !important; }

/* ── BUTTONS ON GREEN BACKGROUNDS — force orange ─────────────── */
.page-header-hero .btn-primary,
.bg-green .btn-primary,
.hero .btn-secondary,
.cta-band .btn {
  /* these are already handled inline but reinforce */
}
/* "Our Mission" / "Share Story" / "View Projects" on green bg */
.hero-ctas .btn-primary     { background: var(--logo-orange) !important; border-color: var(--logo-orange) !important; }
.hero-ctas .btn-secondary   { border-color: rgba(255,255,255,.6) !important; }
.page-hero-text .btn-primary { background: var(--logo-orange) !important; border-color: var(--logo-orange) !important; }
.page-hero-text .btn-secondary { border-color: rgba(255,255,255,.6) !important; color: #fff !important; }
/* Stories page submit */
.story-submit-box .btn-primary { background: var(--logo-orange) !important; }
/* CTA band buttons */
.cta-band .btn-white { color: var(--logo-orange) !important; }

/* ── PILLAR ICONS — fix fa-house-heart (use valid FA free icon) ─ */
/* We switch from fa-house-heart to fa-hands-holding-child */
.what-icon i.fa-house-heart::before   { content: "\f4b8"; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
/* Better: override first pillar via nth-child in JS — or set directly */

/* ── VISION / MISSION WATERMARK — full words, more visible ──── */
.vm-watermark {
  font-family: var(--font-h);
  font-size: 3.8rem;
  font-weight: 900;
  position: absolute;
  top: 12px; right: 16px;
  line-height: 1;
  pointer-events: none;
  opacity: 0.12;
  letter-spacing: -.02em;
}
.vm-watermark.light { color: #fff; }
.vm-watermark.dark  { color: var(--green-main); }

/* ── CORE VALUES — new icon colors ───────────────────────────── */
.value-icon-fa {
  width: 52px; height: 52px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  background: var(--logo-orange-pale);
}
.value-icon-fa i { font-size: 1.3rem; color: var(--logo-orange); }

/* ── ARTICLE MODAL — social embed support ────────────────────── */
.article-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(20,30,47,.82);
  backdrop-filter: blur(6px);
  z-index: 3500;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.article-modal-overlay.open { opacity: 1; pointer-events: all; }
.article-modal {
  background: var(--white);
  border-radius: var(--r-xl);
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 30px 90px rgba(0,0,0,.3);
  transform: scale(.93) translateY(24px);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.article-modal-overlay.open .article-modal { transform: scale(1) translateY(0); }
.am-hero { width: 100%; height: 260px; object-fit: cover; border-radius: var(--r-xl) var(--r-xl) 0 0; }
.am-body { padding: 30px 34px 38px; }
.am-tag  { font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--logo-orange);background:var(--logo-orange-pale);padding:3px 10px;border-radius:50px;display:inline-block;margin-bottom:12px; }
.am-body h2 { font-size: 1.5rem; margin-bottom: 14px; }
.am-body p  { color: var(--gray-mid); line-height: 1.8; margin-bottom: 12px; font-size: .95rem; }
.am-close   { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; padding: 14px 14px 0; background: transparent; }
.am-close button { width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.15);border:none;color:#fff;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--t); }
.am-close button:hover { background: rgba(0,0,0,.4); }

/* Embed container (YouTube / IG) */
.am-embed { margin: 18px 0; border-radius: var(--r-md); overflow: hidden; background: #000; }
.am-embed iframe { width: 100%; height: 340px; border: none; display: block; }
.am-embed.ig-embed { background: transparent; }
.am-social-links { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.am-social-link  { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 50px; font-size: .83rem; font-weight: 600; text-decoration: none; transition: var(--t); }
.am-social-link.yt  { background: #FF0000; color: #fff; }
.am-social-link.ig  { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); color: #fff; }
.am-social-link.wa  { background: #25D366; color: #fff; }
.am-social-link.fb  { background: #1877F2; color: #fff; }
.am-social-link:hover { opacity: .85; transform: translateY(-2px); }

/* ── EVENTS — responsive grid ────────────────────────────────── */
.events-list { display: flex; flex-direction: column; gap: 14px; margin-top: 44px; max-width: 780px; margin-left: auto; margin-right: auto; }
.event-card  { display: flex; gap: 18px; background: var(--white); border-radius: var(--r-md); padding: 20px 22px; box-shadow: var(--shadow-sm); border: 1px solid var(--gray-light); align-items: flex-start; transition: var(--t); }
.event-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.event-date-box { flex-shrink: 0; background: var(--green-pale); border-radius: var(--r-sm); padding: 10px 14px; text-align: center; min-width: 60px; }
.event-date-box .eday   { display: block; font-family: var(--font-h); font-size: 1.7rem; font-weight: 900; color: var(--green-main); line-height: 1; }
.event-date-box .emonth { display: block; font-size: .72rem; font-weight: 700; color: var(--green-main); text-transform: uppercase; }
.event-info h4  { margin-bottom: 5px; font-size: 1rem; }
.event-info p   { font-size: .87rem; color: var(--gray-mid); margin-bottom: 7px; }
.event-info .event-loc { font-size: .8rem; color: var(--gray-mid); display: flex; align-items: center; gap: 5px; }
.event-info .event-loc i { color: var(--green-main); font-size: .75rem; }
.event-orange .event-date-box { background: var(--logo-orange-pale); }
.event-orange .event-date-box .eday,.event-orange .event-date-box .emonth { color: var(--logo-orange); }
@media (max-width: 520px) {
  .event-card   { flex-direction: column; gap: 12px; }
  .event-date-box { display: flex; align-items: center; gap: 8px; padding: 8px 12px; min-width: auto; width: fit-content; }
  .event-date-box .eday   { font-size: 1.3rem; }
  .event-date-box .emonth { font-size: .75rem; }
}

/* ── CLEAN URL HINT (no change to CSS, just note) ─────────────── */

/* ── FOUNDER DETAIL MODAL ────────────────────────────────────── */
.founder-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(20,30,47,.85);
  backdrop-filter: blur(6px);
  z-index: 3500;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.founder-modal-overlay.open { opacity: 1; pointer-events: all; }
.founder-modal {
  background: var(--white);
  border-radius: var(--r-xl);
  max-width: 640px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 30px 90px rgba(0,0,0,.3);
  transform: scale(.93);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.founder-modal-overlay.open .founder-modal { transform: scale(1); }
.founder-modal-top { display: flex; gap: 22px; padding: 30px 30px 0; align-items: flex-start; }
.founder-modal-top img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; object-position: top; flex-shrink: 0; border: 3px solid var(--green-pale); }
.founder-modal-top .fi h3  { margin-bottom: 3px; }
.founder-modal-top .fi .role { font-size: .82rem; color: var(--logo-orange); font-weight: 600; display: block; margin-bottom: 8px; }
.founder-modal-body { padding: 20px 30px 34px; }
.founder-modal-body p { color: var(--gray-mid); line-height: 1.85; margin-bottom: 12px; font-size: .95rem; }
.founder-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--gray-light); border: none; color: var(--gray-dark); font-size: .9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--t); }
.founder-close:hover { background: var(--navy); color: #fff; }
.founder-modal-wrap { position: relative; }

/* ── TEAM CARD — Read More link ──────────────────────────────── */
.team-read-more { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 600; color: var(--logo-orange); margin-top: 10px; cursor: pointer; transition: var(--t); background: none; border: none; padding: 0; font-family: var(--font-b); }
.team-read-more:hover { gap: 9px; }

/* ── NAV ACTIVE PAGE — logo-orange underline ─────────────────── */
.nav-link.active::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--logo-orange);
  border-radius: 2px;
  margin-top: 2px;
}
#main-header.scrolled .nav-link.active { color: var(--logo-orange) !important; }

/* ── IMPACT NAV — dropdown arrow style ───────────────────────── */
.nav-link.dropdown-toggle::after { display: none; } /* remove BS arrow */
.nav-link.dropdown-toggle .dd-arrow { font-size: .6rem; margin-left: 3px; opacity: .7; }

@media (max-width: 900px) {
  .vm-watermark  { font-size: 2.2rem; }
  .am-body       { padding: 20px 20px 28px; }
  .founder-modal-top { flex-direction: column; align-items: center; text-align: center; }
}

/* ================================================================
   NAV v2.5 OVERRIDE — must be last to win specificity
   ================================================================ */
#main-header{position:fixed;top:0;left:0;right:0;z-index:1000;transition:background .35s ease,box-shadow .35s ease}
#main-header.scrolled{background:#fff;box-shadow:0 2px 16px rgba(0,0,0,.1)}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:0 28px;max-width:1200px;margin:0 auto;height:72px}
.navbar-brand img{height:62px;width:auto}
.nav-list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav-list>li{position:relative}
.nav-link{display:flex;align-items:center;gap:4px;padding:8px 13px;border-radius:7px;font-family:var(--font-b,'DM Sans',sans-serif);font-size:.88rem;font-weight:500;color:rgba(255,255,255,.9);text-decoration:none;transition:color .2s,background .2s;white-space:nowrap;cursor:pointer;background:none;border:none;position:relative}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.12)}
.nav-link.active{color:#fff}
.nav-link.active::after{content:'';display:block;position:absolute;bottom:4px;left:13px;right:13px;height:2px;background:var(--logo-orange,#e8521a);border-radius:2px}
#main-header.scrolled .nav-link{color:var(--logo-navy,#1c3048)}
#main-header.scrolled .nav-link:hover{color:var(--logo-orange,#e8521a);background:rgba(232,82,26,.06)}
#main-header.scrolled .nav-link.active{color:var(--logo-orange,#e8521a)}
.nav-chevron{font-size:.58rem;opacity:.65;transition:transform .22s ease}
.nav-list>li:hover .nav-chevron{transform:rotate(180deg)}
.nav-dropdown{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(-8px);background:#fff;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.14);border:1px solid #eee;padding:8px;min-width:205px;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;z-index:200}
.nav-list>li:hover .nav-dropdown,.nav-list>li:focus-within .nav-dropdown{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0)}
.nav-dropdown a{display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:8px;font-size:.85rem;font-weight:500;color:#2c3e50;text-decoration:none;transition:background .18s,color .18s}
.nav-dropdown a i{width:16px;text-align:center;color:#bbb;font-size:.82rem}
.nav-dropdown a:hover{background:#f7f7f7;color:var(--logo-orange,#e8521a)}
.nav-dropdown a:hover i{color:var(--logo-orange,#e8521a)}
.nav-dropdown a.active{color:var(--logo-orange,#e8521a);font-weight:600}
.dropdown-sep{height:1px;background:#f0f0f0;margin:5px 8px}
.nav-donate{background:var(--logo-orange,#e8521a)!important;color:#fff!important;padding:8px 18px!important;border-radius:50px!important;font-weight:600!important;font-size:.86rem!important;margin-left:6px}
.nav-donate:hover{background:#c94315!important}
.nav-donate.active::after{display:none}

/* ── HAMBURGER ─────────────────────────────────────────────── */
#nav-hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:42px;height:42px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:9px;cursor:pointer;transition:background .2s,border-color .2s;padding:0;position:relative;flex-shrink:0}
#nav-hamburger:hover{background:rgba(255,255,255,.26)}
#main-header.scrolled #nav-hamburger{background:rgba(28,48,72,.07);border-color:rgba(28,48,72,.14)}
.ham-bar{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .3s ease,opacity .3s ease}
#main-header.scrolled .ham-bar{background:var(--logo-navy,#1c3048)}
#nav-hamburger.open .ham-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
#nav-hamburger.open .ham-bar:nth-child(2){opacity:0;transform:scaleX(0)}
#nav-hamburger.open .ham-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── MOBILE OVERLAY ────────────────────────────────────────── */
#mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);z-index:1100;opacity:0;pointer-events:none;transition:opacity .35s ease}
#mobile-overlay.open{opacity:1;pointer-events:all}

/* ── MOBILE DRAWER ─────────────────────────────────────────── */
#mobile-drawer{position:fixed;top:0;left:0;bottom:0;width:min(300px,83vw);background:#1c3048;z-index:1150;display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1);overflow-y:auto}
#mobile-drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.drawer-head img{height:44px}
#drawer-close{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);border:none;color:#fff;font-size:.95rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;flex-shrink:0}
#drawer-close:hover{background:rgba(255,255,255,.2)}
.drawer-links{flex:1;padding:12px 10px}
.drawer-links a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:8px;color:rgba(255,255,255,.72);font-size:.92rem;font-weight:500;text-decoration:none;transition:background .18s,color .18s;margin-bottom:2px}
.drawer-links a i{width:16px;text-align:center;font-size:.82rem;opacity:.55}
.drawer-links a:hover,.drawer-links a.active{background:rgba(255,255,255,.1);color:#fff}
.drawer-links a.active i{opacity:1}
.drawer-sep{height:1px;background:rgba(255,255,255,.07);margin:8px 0}
.drawer-toggle{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border-radius:8px;color:rgba(255,255,255,.72);font-size:.92rem;font-weight:500;cursor:pointer;transition:background .18s,color .18s;user-select:none;margin-bottom:2px}
.drawer-toggle:hover,.drawer-toggle.open-state{background:rgba(255,255,255,.1);color:#fff}
.drawer-toggle-left{display:flex;align-items:center;gap:10px}
.drawer-toggle-left i{width:16px;text-align:center;font-size:.82rem;opacity:.55}
.drawer-toggle-icon{font-size:.62rem;opacity:.65;transition:transform .25s}
.drawer-toggle.open-state .drawer-toggle-icon{transform:rotate(180deg)}
.drawer-sub{padding-left:10px;margin-bottom:2px;overflow:hidden;max-height:0;transition:max-height .3s ease}
.drawer-sub.open{max-height:320px}
.drawer-sub a{font-size:.85rem!important;color:rgba(255,255,255,.55)!important;padding:8px 12px!important}
.drawer-sub a:hover{color:rgba(255,255,255,.9)!important;background:rgba(255,255,255,.07)!important}
.drawer-foot{padding:14px 16px;border-top:1px solid rgba(255,255,255,.07)}
.drawer-foot .btn-donate{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;background:var(--logo-orange,#e8521a);color:#fff;border-radius:8px;font-weight:700;font-size:.92rem;text-decoration:none;transition:background .2s}
.drawer-foot .btn-donate:hover{background:#c94315}

/* ── RESPONSIVE SHOW/HIDE ──────────────────────────────────── */
@media(max-width:900px){
  .nav-list{display:none!important}
  #nav-hamburger{display:flex!important}
}
@media(min-width:901px){
  #nav-hamburger{display:none!important}
  #mobile-drawer,#mobile-overlay{display:none!important;transform:none!important;opacity:0!important;pointer-events:none!important}
}

/* ── BODY PADDING FOR FIXED NAV ─────────────────────────────── */
body{padding-top:0}
.hero{padding-top:0}
.page-header-hero,.page-header{padding-top:130px!important}

/* ================================================================
   FORM STATUS MESSAGES v2.5
   ================================================================ */
.form-status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 9px;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.5;
  margin-top: 12px;
  animation: statusSlideIn .3s ease;
}
@keyframes statusSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.form-status i { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.form-status.success { background: #edfaf3; border: 1px solid #b2dfcc; color: #1a5c3a; }
.form-status.success i { color: #1e8449; }
.form-status.error   { background: #fdf2f0; border: 1px solid #f5c0b0; color: #8b2010; }
.form-status.error i { color: #c0392b; }
.form-status.loading { background: #f0f6ff; border: 1px solid #b8d4f0; color: #1a4070; }
.form-status.loading i { color: #2980b9; animation: spin .8s linear infinite; }
.form-status.info    { background: #eaf4ff; border: 1px solid #b8d4ea; color: #1a4070; }
.form-status.info i  { color: #2980b9; }

/* Newsletter inline status */
.nl-status { margin-top: 10px; min-height: 0; }

/* Button states */
.btn[disabled], button[disabled] { opacity: .65; cursor: not-allowed; pointer-events: none; }
.btn-spin { display: inline-block; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Contact form status */
#contact-status { margin-top: 14px; }

/* Story form status */
#story-status { margin-top: 14px; }

/* ================================================================
   NAV v2.8 — Clean, uniform, api-ug.org inspired, no icons
   ================================================================ */

/* ── HEADER ────────────────────────────────────────────────── */
#main-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2000;
  transition: background .3s ease, box-shadow .3s ease;
}
#main-header.scrolled {
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.08);
}

/* ── NAVBAR ────────────────────────────────────────────────── */
.navbar {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1160px; margin: 0 auto;
  padding: 0 28px; height: 74px;
  position: relative;
}
.navbar-brand img {
  height: 58px; width: auto;
  display: block;
  transition: opacity .2s;
}

/* ── NAV LIST ──────────────────────────────────────────────── */
.nav-list {
  display: flex; align-items: center;
  list-style: none; margin: 0; padding: 0;
  gap: 0;
}
.nav-list > li {
  position: relative;
}

/* ── NAV LINKS ─────────────────────────────────────────────── */
.nav-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 15px; height: 74px; line-height: 1;
  font-family: var(--font-b, 'DM Sans', sans-serif);
  font-size: .88rem; font-weight: 500; letter-spacing: .01em;
  color: rgba(255,255,255,.88);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
  cursor: pointer;
}
.nav-link:hover { color: #fff; border-bottom-color: rgba(255,255,255,.4); }
.nav-link.active { color: #fff; border-bottom-color: #e8521a; }

/* Scrolled state */
#main-header.scrolled .nav-link { color: #2c3e50; }
#main-header.scrolled .nav-link:hover { color: #e8521a; border-bottom-color: #e8521a; }
#main-header.scrolled .nav-link.active { color: #e8521a; border-bottom-color: #e8521a; }

/* Arrow indicator */
.nav-arrow {
  font-size: .65rem; opacity: .6; margin-left: 1px;
  display: inline-block;
  transition: transform .22s ease;
  line-height: 1;
}
.has-dropdown:hover .nav-arrow { transform: rotate(180deg); }

/* ── DONATE BUTTON ─────────────────────────────────────────── */
.nav-donate {
  height: auto !important;
  padding: 9px 22px !important;
  margin-left: 10px;
  background: #e8521a;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: .86rem !important;
  letter-spacing: .02em;
  transition: background .2s, transform .15s !important;
}
.nav-donate:hover { background: #c94315 !important; transform: translateY(-1px); }
.nav-donate.active { background: #c94315 !important; border-bottom: none !important; }
#main-header.scrolled .nav-donate { color: #fff !important; }

/* ── DROPDOWN MENU — clean, no icons ──────────────────────── */
.nav-dropdown {
  position: absolute;
  top: 74px; left: 0;
  background: #fff;
  min-width: 200px;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  padding: 6px 0;
  list-style: none;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
  border-top: 3px solid #e8521a;
  z-index: 2100;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
/* Hover bridge — prevents gap between link and dropdown */
.has-dropdown::after {
  content: ''; position: absolute;
  top: 71px; left: 0; right: 0;
  height: 6px; background: transparent;
}
.nav-dropdown li { display: block; }
.nav-dropdown li a {
  display: block;
  padding: 10px 20px;
  font-family: var(--font-b, 'DM Sans', sans-serif);
  font-size: .87rem; font-weight: 500;
  color: #2c3e50;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.nav-dropdown li a:hover {
  background: #f9f3f0;
  color: #e8521a;
  border-left-color: #e8521a;
}
.nav-dropdown li a.active {
  color: #e8521a; font-weight: 600;
  border-left-color: #e8521a;
}
.nav-dropdown li.sep {
  height: 1px; background: #f0f0f0;
  margin: 5px 0;
}

/* ── HAMBURGER ─────────────────────────────────────────────── */
#nav-hamburger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 6px;
  cursor: pointer;
  padding: 0; flex-shrink: 0;
  transition: border-color .2s, background .2s;
}
#nav-hamburger:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.6);
}
#main-header.scrolled #nav-hamburger {
  border-color: #d0d0d0;
}
#main-header.scrolled #nav-hamburger:hover {
  background: #f5f5f5;
  border-color: #aaa;
}
.ham-bar {
  display: block; width: 18px; height: 1.5px;
  background: #fff; border-radius: 2px;
  transition: transform .28s ease, opacity .2s ease;
}
#main-header.scrolled .ham-bar { background: #2c3e50; }
#nav-hamburger.open .ham-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#nav-hamburger.open .ham-bar:nth-child(2) { opacity: 0; }
#nav-hamburger.open .ham-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── MOBILE OVERLAY ────────────────────────────────────────── */
#mobile-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(3px);
  z-index: 2050;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
#mobile-overlay.open { opacity: 1; pointer-events: all; }

/* ── MOBILE DRAWER ─────────────────────────────────────────── */
#mobile-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(290px, 84vw);
  background: #1c3048;
  z-index: 2100;
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
#mobile-drawer.open { transform: translateX(0); }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.drawer-head img { height: 42px; }
#drawer-close {
  width: 32px; height: 32px; border-radius: 5px;
  background: rgba(255,255,255,.1); border: none;
  color: rgba(255,255,255,.8); font-size: 1rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
#drawer-close:hover { background: rgba(255,255,255,.18); }

.drawer-links {
  flex: 1; padding: 10px 0;
  display: flex; flex-direction: column;
}
.drawer-links a {
  display: block;
  padding: 12px 20px;
  font-family: var(--font-b, 'DM Sans', sans-serif);
  font-size: .93rem; font-weight: 500;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.drawer-links a:hover, .drawer-links a.active {
  background: rgba(255,255,255,.07);
  color: #fff;
  border-left-color: #e8521a;
}
.drawer-links a.drawer-donate {
  color: rgba(255,180,100,.85);
}
.drawer-links a.drawer-donate:hover { color: #ffb064; }

.drawer-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  font-family: var(--font-b, 'DM Sans', sans-serif);
  font-size: .93rem; font-weight: 500;
  color: rgba(255,255,255,.72);
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s;
  user-select: none;
}
.drawer-toggle:hover, .drawer-toggle.open-state {
  background: rgba(255,255,255,.07);
  color: #fff;
}
.dtoggle-arrow {
  font-size: .7rem; opacity: .6;
  transition: transform .25s ease;
  display: inline-block;
}
.drawer-toggle.open-state .dtoggle-arrow { transform: rotate(180deg); }

.drawer-sub {
  overflow: hidden; max-height: 0;
  transition: max-height .3s ease;
  background: rgba(0,0,0,.15);
}
.drawer-sub.open { max-height: 280px; }
.drawer-sub a {
  padding: 10px 20px 10px 30px;
  font-size: .86rem;
  color: rgba(255,255,255,.55) !important;
  border-left: none !important;
}
.drawer-sub a:hover { color: rgba(255,255,255,.88) !important; background: rgba(255,255,255,.05) !important; }

.drawer-sep { height: 1px; background: rgba(255,255,255,.07); margin: 8px 0; }

.drawer-foot {
  padding: 14px 16px 20px; flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,.07);
}
.drawer-donate-btn {
  display: block; text-align: center;
  padding: 12px;
  background: #e8521a; color: #fff;
  border-radius: 6px; font-weight: 700; font-size: .92rem;
  text-decoration: none;
  transition: background .2s;
  font-family: var(--font-b, 'DM Sans', sans-serif);
}
.drawer-donate-btn:hover { background: #c94315; color: #fff; }

/* ── SHOW / HIDE ───────────────────────────────────────────── */
@media (max-width: 920px) {
  .nav-list { display: none !important; }
  #nav-hamburger { display: flex !important; }
}
@media (min-width: 921px) {
  #nav-hamburger { display: none !important; }
  #mobile-drawer { display: flex !important; transform: translateX(-100%) !important; }
  #mobile-drawer.open { transform: translateX(0) !important; }
  #mobile-overlay { display: block !important; }
}

/* ── BODY SPACING ──────────────────────────────────────────── */
.hero { padding-top: 0; }
.page-header-hero { padding-top: 140px !important; }
.page-header { padding-top: 140px !important; }
.don-hero { padding-top: 140px !important; }

/* ================================================================
   FOOTER FIX v2.8 — stop overlapping on small screens
   ================================================================ */
footer {
  background: #1c3048;
}
.footer-main {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.4fr;
  gap: 40px;
  padding: 64px 0 40px;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;          /* ← key fix: wraps on small screens */
  font-size: .78rem;
  color: rgba(255,255,255,.38);
  line-height: 1.5;
}
.footer-bottom span {
  flex: 1 1 220px;          /* ← grows, min 220px before wrapping */
}
.footer-bottom-links {
  display: flex;
  gap: 20px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.footer-bottom-links a {
  color: rgba(255,255,255,.42);
  text-decoration: none;
  transition: color .2s;
  white-space: nowrap;
}
.footer-bottom-links a:hover { color: rgba(255,255,255,.8); }

/* Footer responsive */
@media (max-width: 1024px) {
  .footer-main { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .footer-main { grid-template-columns: 1fr; gap: 28px; padding: 44px 0 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-bottom span { flex: none; }
}

/* ================================================================
   FINAL NAV OVERRIDE v2.9
   Placed last in file so it wins over all previous conflicting rules.
   Removes ALL double-underline causes.
   ================================================================ */

/* 1. Kill every ::after pseudo-element on nav links that draws lines */
.nav-link::after,
.nav-link.active::after,
.nav-list .nav-link::after,
.nav-list .nav-link.active::after,
.navbar-links .nav-link::after,
.navbar-links .nav-link.active::after {
  display: none !important;
  content: none !important;
}

/* 2. Kill border-bottom on nav links (old patch used it too) */
.nav-link,
.nav-list .nav-link,
.nav-list > li > a.nav-link {
  border-bottom: none !important;
  border-radius: 0 !important;
  background: none !important;
}

/* 3. Single clean nav-link definition */
.nav-list > li > a.nav-link,
.nav-list > li > div.nav-link > a,
.nav-list > li > .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 16px;
  height: 74px;
  font-family: 'DM Sans', sans-serif;
  font-size: .88rem;
  font-weight: 500;
  color: rgba(255,255,255,.88);
  text-decoration: none;
  cursor: pointer;
  transition: color .2s ease;
  white-space: nowrap;
  position: relative;
}

/* 4. Single clean underline — ONLY a bottom bar, via box-shadow on the LI */
.nav-list > li > a.nav-link:hover,
.nav-list > li > div.nav-link:hover > a {
  color: #fff;
}
.nav-list > li > a.nav-link.active {
  color: #fff;
}

/* Bottom accent bar on active — via inset box-shadow on li, clean single line */
.nav-list > li {
  position: relative;
  box-shadow: none;
}
.nav-list > li:has(> .nav-link.active),
.nav-list > li:has(> div.nav-link > a.active),
.nav-list > li:has(> .nav-link.active):not(:has(.nav-donate)) {
  box-shadow: inset 0 -3px 0 0 #e8521a;
}

/* Scrolled state */
#main-header.scrolled .nav-list > li > a.nav-link,
#main-header.scrolled .nav-list > li > div.nav-link > a,
#main-header.scrolled .nav-list > li > .nav-link {
  color: #2c3e50 !important;
}
#main-header.scrolled .nav-list > li > a.nav-link:hover,
#main-header.scrolled .nav-list > li > div.nav-link:hover > a {
  color: #e8521a !important;
}
#main-header.scrolled .nav-list > li > a.nav-link.active {
  color: #e8521a !important;
}

/* 5. Donate button — no underline at all */
.nav-donate,
.nav-list > li > a.nav-donate,
.nav-list > li > a.nav-donate.active {
  height: auto !important;
  padding: 9px 22px !important;
  margin-left: 10px;
  background: #e8521a !important;
  color: #fff !important;
  border-radius: 6px !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  font-size: .86rem !important;
}
.nav-donate:hover { background: #c94315 !important; }
.nav-list > li:has(> .nav-donate) { box-shadow: none !important; }

/* 6. Scrolled — hamburger bars stay correct colour */
#main-header.scrolled .ham-bar { background: #2c3e50; }

/* ── FOOTER BOTTOM — final fix, no overlap ── */
.footer-bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 20px 0 !important;
  font-size: .78rem !important;
  color: rgba(255,255,255,.38) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
.footer-bottom > span {
  flex: 1 1 auto;
  min-width: 0;
}
.footer-bottom-links {
  display: flex !important;
  gap: 20px !important;
  flex-shrink: 0;
}
.footer-bottom-links a {
  color: rgba(255,255,255,.42) !important;
  text-decoration: none;
  white-space: nowrap;
}
.footer-bottom-links a:hover { color: rgba(255,255,255,.8) !important; }
@media (max-width: 580px) {
  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    text-align: left !important;
  }
  .footer-bottom > span { flex: none; }
}