/* =========================================================
   Khan Abdul Gaffar Khan Ishlahul Muslemin Welfare Society
   Premium theme stylesheet
   ========================================================= */
:root{
  --blue:#0099D8;
  --blue-deep:#0B2333;
  --green:#00A651;
  --gold:#F4B400;
  --white:#FFFFFF;
  --bg:#F8FBFD;
  --ink:#1A1A1A;
  --sand:#F2ECDF;
  --deep-green:#0B3D2E;
  --line: rgba(11,35,51,0.10);
  --radius: 22px;
  --shadow-soft: 0 20px 60px -20px rgba(11,35,51,0.25);
  --shadow-card: 0 12px 34px -12px rgba(11,35,51,0.18);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; width:100%; overflow-x:hidden;}
body{
  margin:0;
  font-family:'Manrope', sans-serif;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
  width:100%;
}
h1,h2,h3,.display{
  font-family:'Fraunces', serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--blue-deep);
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
.container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 28px;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--green);
}
.eyebrow::before{
  content:"";
  width:26px;height:2px;
  background:var(--gold);
  display:inline-block;
}
.section{padding:112px 0; width:100%; overflow-x:hidden;}
.section-tight{padding:80px 0; width:100%; overflow-x:hidden;}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  border-radius:100px;
  font-weight:700;
  font-size:0.95rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:.35s cubic-bezier(.2,.7,.3,1);
  white-space:nowrap;
}
.btn-primary{background:linear-gradient(135deg,var(--blue),#0077AE); color:#fff; box-shadow:0 14px 30px -10px rgba(0,153,216,0.55);}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 18px 36px -8px rgba(0,153,216,0.6);}
.btn-gold{background:linear-gradient(135deg,var(--gold),#DD9800); color:#2b1c00; box-shadow:0 14px 30px -10px rgba(244,180,0,0.55);}
.btn-gold:hover{transform:translateY(-3px);}
.btn-outline{background:transparent;border-color:rgba(255,255,255,0.5); color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,0.12); transform:translateY(-3px);}
.btn-outline-dark{background:transparent; border-color:rgba(11,61,46,0.25); color:var(--deep-green);}
.btn-outline-dark:hover{background:var(--deep-green); border-color:var(--deep-green); color:#fff;}

/* signature geometric pattern strip - pure CSS, no image asset needed */
.pattern-strip{
  height:10px;
  width:100%;
  background:repeating-linear-gradient(135deg,
    var(--blue) 0 10px,
    var(--green) 10px 20px,
    var(--gold) 20px 30px,
    var(--blue-deep) 30px 40px);
  opacity:0.95;
}
.geo-pattern{
  background-image:
    radial-gradient(circle at 10px 10px, rgba(255,255,255,0.5) 2px, transparent 2.5px),
    radial-gradient(circle at 30px 30px, rgba(255,255,255,0.35) 2px, transparent 2.5px);
  background-size:40px 40px;
}

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:#FFFFFF;
  border-bottom:1px solid rgba(11,61,46,0.06);
  box-shadow:
    -70px 18px 80px -55px rgba(0,166,81,0.35),
    70px 18px 80px -55px rgba(0,153,216,0.3),
    0 14px 34px -26px rgba(11,35,51,0.16);
  transition:box-shadow .3s, background .3s;
  width:100%;
}
.nav.scrolled{
  box-shadow:
    -70px 18px 80px -50px rgba(0,166,81,0.4),
    70px 18px 80px -50px rgba(0,153,216,0.35),
    0 16px 34px -18px rgba(11,35,51,0.22);
}
.nav .container{display:flex; align-items:center; justify-content:space-between; height:88px; gap:18px;}
.brand{display:flex; align-items:center; gap:16px;}
.brand-mark{
  width:52px;height:52px;border-radius:50%;
  background:conic-gradient(from 200deg, var(--blue), var(--green), var(--gold), var(--blue));
  display:flex;align-items:center;justify-content:center;
  color:#fff; font-family:'Fraunces',serif; font-weight:700; font-size:1.1rem;
  box-shadow:0 8px 20px -6px rgba(11,61,46,0.35);
  flex-shrink:0;
  padding:3px; overflow:hidden;
}
.brand-mark img{width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; background:#fff;}
.brand-text{line-height:1.22;}
.brand-text b{display:block; font-family:'Fraunces',serif; font-weight:700; font-size:1.06rem; color:var(--deep-green); letter-spacing:0.01em;}
.brand-text span{font-size:0.7rem; letter-spacing:0.09em; color:var(--deep-green); opacity:0.75; text-transform:uppercase; font-weight:600;}
.nav-links{display:flex; align-items:center; gap:26px;}
.nav-links a{font-size:0.88rem; font-weight:600; color:var(--deep-green); position:relative; padding:6px 0;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);transition:.3s;}
.nav-links a:hover::after{width:100%;}
.nav-cta{display:flex; gap:12px;}
.nav-toggle{display:none;}
@media (max-width:1080px){
  .nav-links{
    position:fixed; top:88px; left:0; right:0; background:#fff;
    flex-direction:column; align-items:flex-start; padding:20px 28px 30px;
    box-shadow:0 20px 30px -20px rgba(0,0,0,0.2);
    transform:translateY(-130%); transition:transform .35s; gap:18px;
    max-height:calc(100vh - 88px); overflow-y:auto;
    z-index:999; pointer-events:none;
  }
  .nav-links.open{transform:translateY(0); pointer-events:auto;}
  .nav-toggle{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; min-width:44px;
    background:none; border:none; font-size:1.4rem; color:var(--deep-green);
    cursor:pointer; position:relative; z-index:1001;
    -webkit-tap-highlight-color:transparent; flex-shrink:0;
  }
  .nav-cta{display:none;}
}
@media (max-width:480px){
  .nav .container{gap:10px;}
  .brand{gap:11px;}
  .brand-mark{width:42px;height:42px;}
  .brand-text b{font-size:0.86rem;}
  .brand-text span{font-size:0.58rem;}
}

/* ---------- HERO (photo background with dark gradient overlay) ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:stretch;
  overflow:hidden;
  width:100%;
  background:
    radial-gradient(1100px 700px at 85% -10%, rgba(0,166,81,0.35), transparent 60%),
    radial-gradient(900px 600px at -10% 10%, rgba(0,153,216,0.4), transparent 55%),
    linear-gradient(160deg, #0B2333 0%, #0d2c40 45%, #0B2333 100%);
}
.hero-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(180deg, rgba(11,35,51,0.62) 0%, rgba(11,35,51,0.28) 34%, rgba(11,35,51,0.4) 62%, rgba(11,35,51,0.72) 100%),
    url('../assets/images/hero-bg-desktop.jpg');
  background-size:cover;
  background-position:center 42%;
  background-repeat:no-repeat;
  transform:scale(1.08);
}
@media (max-width:768px){
  .hero-bg{
    background-image:
      linear-gradient(180deg, rgba(11,35,51,0.6) 0%, rgba(11,35,51,0.3) 32%, rgba(11,35,51,0.42) 60%, rgba(11,35,51,0.75) 100%),
      url('../assets/images/hero-bg-mobile.jpg');
    background-position:center 32%;
  }
}
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,35,51,0.25) 0%, rgba(11,35,51,0.1) 38%, rgba(11,35,51,0.94) 100%);
}
.hero-content{
  position:relative; z-index:2;
  color:#fff;
  padding:220px 0 0;
  width:100%;
  text-align:center;
}
.hero-content .container{display:flex; flex-direction:column; align-items:center;}
.hero-tag{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.35);
  backdrop-filter:blur(6px);
  padding:8px 18px; border-radius:100px;
  font-size:0.8rem; font-weight:600; letter-spacing:0.05em;
  margin-bottom:26px;
}
.hero-tag i{color:var(--gold);}
.hero h1{
  font-size:clamp(1.9rem, 4.4vw, 3.6rem);
  color:#fff; line-height:1.18; max-width:900px; margin:0 auto 22px;
  font-weight:600; letter-spacing:0.005em;
}
.hero h1 em{font-style:normal; color:var(--gold);}
.hero-accent{
  width:86px; height:3px; margin:0 auto 26px;
  border-radius:100px;
  background:linear-gradient(90deg, var(--green), #4fd8a8, var(--blue));
  box-shadow:0 2px 14px rgba(0,166,81,0.5);
}
.hero p.lead{
  font-size:1.1rem; max-width:640px; color:rgba(255,255,255,0.88);
  margin:0 auto 40px; line-height:1.75; font-weight:400;
}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:70px; justify-content:center;}

/* floating stats */
.stat-float{
  position:relative; z-index:3;
  transform:translateY(50%);
  margin-top:-40px;
}
.stat-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  background:rgba(11,35,51,0.08);
  border-radius:24px; overflow:hidden;
  box-shadow:var(--shadow-soft);
  width:100%;
}
.stat-card{
  background:rgba(255,255,255,0.86);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  padding:32px 22px; text-align:center;
}
.stat-card .num{
  font-family:'Fraunces',serif; font-weight:700; font-size:2.3rem; color:var(--blue-deep);
  display:flex; align-items:center; justify-content:center; gap:2px;
}
.stat-card .num small{font-size:1.3rem; color:var(--green);}
.stat-card .lbl{font-size:0.82rem; color:#5b6b74; margin-top:6px; font-weight:600;}
@media (max-width:820px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .hero-content{padding-top:170px;}
}

/* ---------- TRUST BAR ---------- */
.trust{
  background:var(--blue-deep);
  color:rgba(255,255,255,0.85);
  padding:120px 0 40px;
  font-size:0.85rem;
  text-align:center;
  width:100%;
  overflow-x:hidden;
}
.trust .container{display:flex; flex-wrap:wrap; justify-content:center; gap:36px; width:100%;}
.trust span{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.trust i{color:var(--gold);}
@media (max-width:768px){
  .trust{padding:80px 0 30px;}
  .trust .container{gap:20px;}
  .trust span{font-size:0.75rem;}
}
@media (max-width:640px){
  .trust{padding:60px 0 20px;}
  .trust .container{gap:16px; flex-direction:column;}
  .trust span{width:100%; justify-content:center;}
}

/* ---------- ABOUT ---------- */
.about-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; width:100%;
}
.about-visual{
  position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-card);
  background:linear-gradient(150deg, var(--blue-deep), #123650 60%, #0B2333);
  aspect-ratio:6/5; display:flex; align-items:center; justify-content:center; padding:40px;
}
.about-visual .geo-pattern{position:absolute; inset:0; opacity:0.5;}
.about-visual-inner{position:relative; z-index:1; text-align:center; color:#fff;}
.about-visual-inner .est-icon{font-size:3.2rem; color:var(--gold); line-height:1;}
.about-visual-inner .est-lbl{font-size:1.05rem; font-weight:700; letter-spacing:0.04em; color:#fff; margin-top:14px; font-family:'Fraunces',serif;}
.about-visual-inner .reg{margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.18); font-size:0.85rem; color:rgba(255,255,255,0.7);}
.about-visual-inner .reg b{display:block; color:#fff; font-size:0.95rem; margin-top:4px;}
.badge-seal{
  position:absolute; bottom:-24px; right:-24px;
  width:120px;height:120px; border-radius:50%;
  background:conic-gradient(from 200deg, var(--blue), var(--green), var(--gold), var(--blue));
  border:6px solid #fff; box-shadow:var(--shadow-card);
  display:flex; align-items:center; justify-content:center;
  padding:6px; overflow:hidden;
}
.badge-seal img{
  width:100%; height:100%; border-radius:50%; object-fit:cover;
  background:#fff; display:block;
}
.about h2{font-size:clamp(1.9rem,3vw,2.6rem); margin:14px 0 22px;}
.about p{color:#3d4a52; line-height:1.85; font-size:1.02rem; margin-bottom:18px;}
.about-points{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:16px;}
.about-points li{display:flex; gap:14px; align-items:flex-start; font-weight:600; color:var(--blue-deep);}
.about-points i{color:var(--green); margin-top:3px;}

/* ---------- PROGRAMS (icon-tile cards — no stock photography) ---------- */
.section-head{max-width:640px; margin:0 auto 60px; text-align:center;}
.section-head h2{font-size:clamp(2rem,3.4vw,2.8rem); margin:14px 0 16px;}
.section-head p{color:#4d5a62; font-size:1.05rem; line-height:1.7;}
.programs-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px; width:100%;
}
.prog-card{
  position:relative; border-radius:var(--radius); overflow:hidden; min-height:340px;
  box-shadow:var(--shadow-card);
  transition:.5s cubic-bezier(.2,.7,.3,1);
  display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(160deg, var(--icon-a,#0099D8), var(--icon-b,#0B2333));
}
.prog-card .prog-icon{
  position:absolute; top:34px; left:34px; z-index:2;
  width:64px; height:64px; border-radius:18px;
  background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.3);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:#fff; backdrop-filter:blur(6px);
}
.prog-card .geo-pattern{position:absolute; inset:0; opacity:0.5;}
.prog-card:hover{transform:translateY(-8px); box-shadow:0 26px 50px -16px rgba(11,35,51,0.35);}
.prog-inner{
  position:relative; z-index:2; padding:28px; color:#fff;
  background:linear-gradient(180deg, rgba(11,35,51,0) 0%, rgba(11,35,51,0.55) 40%, rgba(11,35,51,0.92) 100%);
  margin-top:auto;
}
.prog-inner .tag{
  display:inline-block; background:var(--gold); color:#2b1c00; font-size:0.7rem; font-weight:800;
  padding:5px 12px; border-radius:100px; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:12px;
}
.prog-inner h3{color:#fff; font-size:1.3rem; margin:0 0 8px;}
.prog-inner p{font-size:0.9rem; color:rgba(255,255,255,0.82); margin:0 0 14px; line-height:1.6;}
.prog-inner a{font-size:0.85rem; font-weight:700; color:var(--gold); display:inline-flex; align-items:center; gap:6px;}
@media (max-width:980px){.programs-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.programs-grid{grid-template-columns:1fr;}}

/* program card photo + CTA button */
.prog-card{cursor:pointer;}
.prog-card:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.prog-img-wrap{
  width:100%; aspect-ratio:16/10; border-radius:14px; overflow:hidden;
  margin:2px 0 16px; box-shadow:0 10px 26px -8px rgba(0,0,0,0.4);
  border:1px solid rgba(255,255,255,0.25);
}
.prog-img-wrap img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.prog-card:hover .prog-img-wrap img{transform:scale(1.08);}
.prog-btn{
  display:inline-flex !important; align-items:center; gap:8px;
  background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.35);
  backdrop-filter:blur(6px); color:#fff !important; font-weight:700;
  font-size:0.85rem; padding:10px 18px; border-radius:100px;
  transition:.3s; width:fit-content;
}
.prog-btn:hover{background:var(--gold); border-color:var(--gold); color:#2b1c00 !important;}
.prog-btn i{color:var(--gold); transition:.3s;}
.prog-btn:hover i{color:#2b1c00;}

/* ---------- PROGRAM IMAGE LIGHTBOX ---------- */
.prog-lightbox{
  position:fixed; inset:0; z-index:999;
  background:rgba(11,35,51,0.88); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease;
}
.prog-lightbox.active{opacity:1; visibility:visible;}
.prog-lightbox-inner{
  position:relative; max-width:900px; width:100%; max-height:88vh;
  transform:scale(0.92); transition:transform .35s ease;
  display:flex; flex-direction:column; align-items:center;
}
.prog-lightbox.active .prog-lightbox-inner{transform:scale(1);}
.prog-lightbox-inner img{
  width:100%; max-height:76vh; object-fit:contain; border-radius:16px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,0.6);
  background:#0B2333;
}
.prog-lightbox-caption{
  color:#fff; font-weight:700; font-size:1.05rem; margin-top:16px; text-align:center;
  letter-spacing:0.01em;
}
.prog-lightbox-close{
  position:absolute; top:-52px; right:0; width:42px; height:42px;
  border-radius:50%; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.35);
  color:#fff; font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:.3s;
}
.prog-lightbox-close:hover{background:var(--gold); color:#2b1c00; border-color:var(--gold);}
@media (max-width:600px){
  .prog-lightbox-close{top:-46px; width:38px; height:38px;}
}

/* ---------- IMPACT NUMBERS ---------- */
.impact{
  background:linear-gradient(180deg, var(--bg), var(--sand));
  position:relative;
}
.impact-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:30px; text-align:center; width:100%;}
.impact-card{padding:20px;}
.impact-card .num{font-family:'Fraunces',serif; font-size:3.2rem; font-weight:700; color:var(--blue);}
.impact-card .lbl{color:#4d5a62; font-weight:600; margin-top:6px;}
@media (max-width:820px){.impact-grid{grid-template-columns:1fr 1fr;}}

/* ---------- LEADERSHIP ---------- */
.leadership-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:32px; width:100%;}
.leader-card{
  background:#fff; border-radius:26px; overflow:hidden; box-shadow:var(--shadow-card);
  border:1px solid var(--line); transition:.4s;
}
.leader-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-soft);}
.leader-photo{aspect-ratio:4/3.4; overflow:hidden; position:relative;}
.leader-photo img{width:100%; height:100%; object-fit:cover; object-position:top center;}
.leader-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,35,51,0) 60%, rgba(11,35,51,0.5) 100%);
}
.leader-body{padding:30px 32px 34px;}
.leader-role{
  display:inline-block; background:linear-gradient(135deg,var(--gold),#DD9800); color:#2b1c00;
  font-size:0.72rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase;
  padding:6px 14px; border-radius:100px; margin-bottom:14px;
}
.leader-body h3{font-size:1.4rem; margin:0 0 6px;}
.leader-body p{color:#4d5a62; font-size:0.95rem; line-height:1.7; margin:0;}
@media (max-width:820px){.leadership-grid{grid-template-columns:1fr;}}

/* ---------- NITI AAYOG REGISTRATION ---------- */
.niti-section{background:var(--sand);}
.niti-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center; width:100%;}
.niti-cert-frame{
  border-radius:24px; overflow:hidden; box-shadow:var(--shadow-soft);
  border:10px solid #fff; position:relative; width:100%;
}
.niti-cert-frame img{width:100%; display:block;}
.niti-info h2{font-size:clamp(1.8rem,2.8vw,2.4rem); margin:14px 0 18px;}
.niti-info p{color:#3d4a52; line-height:1.85; font-size:1.02rem; margin-bottom:18px; word-break:break-word;}
.niti-facts{display:grid; gap:14px; margin:26px 0 30px; width:100%;}
.niti-fact{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  background:#fff; border-radius:14px; padding:16px 20px; border:1px solid var(--line); flex-wrap:wrap; width:100%;
}
.niti-fact span{color:#5b6b74; font-size:0.85rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em;}
.niti-fact b{color:var(--blue-deep); font-family:'Fraunces',serif; font-size:1.02rem;}
@media (max-width:900px){.niti-grid{grid-template-columns:1fr;}}

/* ---------- FEATURE STORY (no stock photo — pattern + quote) ---------- */
.story{
  position:relative; border-radius:28px; overflow:hidden; box-shadow:var(--shadow-soft);
  background:linear-gradient(135deg, var(--blue-deep), #123650 55%, var(--green));
  padding:64px 60px;
}
.story .geo-pattern{position:absolute; inset:0; opacity:0.12;}
.story-body{position:relative; z-index:1; color:#fff; max-width:760px;}
.story-body .eyebrow{color:var(--gold);}
.story-body .eyebrow::before{background:var(--green);}
.story-body h2{color:#fff; font-size:clamp(1.6rem,2.6vw,2.2rem); margin:16px 0 20px;}
.story-body p{color:rgba(255,255,255,0.8); line-height:1.8; margin-bottom:28px;}
.story-quote{border-left:3px solid var(--gold); padding-left:18px; font-style:italic; color:#fff; margin-bottom:30px; font-family:'Fraunces',serif; font-size:1.15rem;}
@media (max-width:700px){.story{padding:44px 28px;}}

/* ---------- TESTIMONIALS ---------- */
.testi-wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; width:100%;}
.testi-card{
  background:#fff; border-radius:20px; padding:34px; box-shadow:var(--shadow-card); border:1px solid var(--line);
}
.testi-stars{color:var(--gold); margin-bottom:16px; font-size:0.9rem;}
.testi-card p{color:#3d4a52; line-height:1.75; margin-bottom:22px; font-size:0.98rem;}
.testi-who{display:flex; align-items:center; gap:12px;}
.testi-avatar{width:46px;height:46px;border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--green)); display:flex;align-items:center;justify-content:center; color:#fff; font-weight:700; font-family:'Fraunces',serif;}
.testi-who b{display:block; font-size:0.92rem; color:var(--blue-deep);}
.testi-who span{font-size:0.78rem; color:#7a8891;}
@media (max-width:900px){.testi-wrap{grid-template-columns:1fr;}}

/* ---------- DONATION ---------- */
.donate-section{
  background:var(--blue-deep); color:#fff; position:relative; overflow:hidden;
}
.donate-section .geo-pattern{
  position:absolute; inset:0; opacity:0.06;
}
.donate-section .section-head p{color:rgba(255,255,255,0.72);}
.donate-section .section-head h2{color:#fff;}
.donate-cats{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; position:relative; z-index:1; width:100%;}
.cat-card{
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
  border-radius:20px; padding:32px 24px; text-align:center; backdrop-filter:blur(6px);
  transition:.35s;
}
.cat-card:hover{background:rgba(255,255,255,0.12); transform:translateY(-6px);}
.cat-card i{font-size:1.8rem; color:var(--gold); margin-bottom:16px;}
.cat-card h3{color:#fff; font-size:1.1rem; margin:0 0 10px;}
.cat-card p{font-size:0.85rem; color:rgba(255,255,255,0.65); line-height:1.6; margin-bottom:0;}
@media (max-width:900px){.donate-cats{grid-template-columns:1fr 1fr;}}

.donate-cta-row{
  margin-top:56px; display:flex; justify-content:center; align-items:center; gap:22px;
  flex-wrap:wrap; position:relative; z-index:1;
}
.btn-lg{padding:16px 34px; font-size:1rem;}
@media (max-width:600px){.donate-cta-row{flex-direction:column;} .donate-cta-row .btn{width:100%; justify-content:center;}}

/* ---------- VOLUNTEER / CTA BAND ---------- */
.cta-band{
  background:linear-gradient(120deg, var(--blue), var(--green));
  border-radius:28px; padding:70px 60px; color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.cta-band h2{color:#fff; font-size:clamp(1.6rem,2.6vw,2.2rem); margin:0 0 12px;}
.cta-band p{color:rgba(255,255,255,0.88); max-width:480px; margin:0;}
.cta-actions{display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- NEWS (icon + date cards — no stock photography) ---------- */
.news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; width:100%;}
.news-card{background:#fff; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-card); border:1px solid var(--line); transition:.35s;}
.news-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-soft);}
.news-icon{
  height:150px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--icon-a,#0099D8), var(--icon-b,#0B2333));
  font-size:2.6rem; color:rgba(255,255,255,0.92);
}
.news-body{padding:26px;}
.news-date{font-size:0.75rem; color:var(--green); font-weight:700; text-transform:uppercase; letter-spacing:0.06em;}
.news-body h3{font-size:1.1rem; margin:10px 0; line-height:1.4;}
.news-body a{font-size:0.85rem; font-weight:700; color:var(--blue);}
@media (max-width:900px){.news-grid{grid-template-columns:1fr;}}
@media (max-width:640px){.news-icon{height:120px;} .news-body{padding:20px;}}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px; width:100%;}
.contact-card{background:#fff; border-radius:24px; padding:44px; box-shadow:var(--shadow-card); border:1px solid var(--line); word-break:break-word;}
.info-row{display:flex; gap:16px; align-items:flex-start; margin-bottom:26px; flex-wrap:wrap;}
.info-row i{width:44px;height:44px;border-radius:50%; background:var(--bg); color:var(--blue); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.info-row b{display:block; color:var(--blue-deep); margin-bottom:3px; width:100%;}
.info-row span,.info-row a{color:#4d5a62; font-size:0.92rem; line-height:1.6; word-break:break-word;}
.info-row a:hover{color:var(--blue);}
.map-box{
  border-radius:24px; overflow:hidden; min-height:100%; position:relative; box-shadow:var(--shadow-card);
  background:linear-gradient(150deg, var(--blue-deep), #123650 60%, var(--green));
}
.map-box .geo-pattern{position:absolute; inset:0; opacity:0.35;}
.map-box .map-overlay{position:relative; z-index:1; inset:0; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px; min-height:340px;}
.map-box i{font-size:2rem; color:var(--gold); margin-bottom:14px;}
@media (max-width:640px){
  .contact-grid{gap:30px;}
  .contact-card{padding:28px; overflow-x:hidden;}
  .info-row{gap:12px; margin-bottom:20px;}
  .info-row i{width:38px; height:38px; font-size:0.9rem;}
  .map-box .map-overlay{padding:20px; min-height:280px;}
}

/* ---------- FOOTER ---------- */
footer{background:var(--blue-deep); color:rgba(255,255,255,0.7); padding-top:80px; width:100%; overflow-x:hidden;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:50px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,0.12); width:100%;}
.footer-brand{display:flex; gap:12px; margin-bottom:18px; flex-wrap:wrap;}
.footer-brand b{color:#fff; font-family:'Fraunces',serif; font-size:1.05rem; display:block;}
footer p{font-size:0.88rem; line-height:1.7;}
footer h4{color:#fff; font-size:0.92rem; letter-spacing:0.04em; margin-bottom:20px; text-transform:uppercase;}
footer ul{list-style:none; padding:0; margin:0; display:grid; gap:12px;}
footer ul li{word-break:break-word;}
footer ul a{font-size:0.9rem; transition:.25s;}
footer ul a:hover{color:var(--gold);}
.social-row{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap;}
.social-row a{width:38px;height:38px;border-radius:50%; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.social-row a:hover{background:var(--gold); color:var(--blue-deep);}
.footer-bottom{display:flex; justify-content:space-between; padding:26px 0; font-size:0.82rem; flex-wrap:wrap; gap:10px; width:100%; align-items:center;}
.footer-bottom-left{display:flex; flex-direction:column; gap:8px; flex:1; min-width:0;}
.kph-credit{display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap;}
.kph-credit span{color:rgba(255,255,255,0.6);}
.kph-credit strong{color:#fff; font-weight:700; font-family:'Fraunces',serif;}
.kph-logo{height:24px; width:auto; max-width:100%; object-fit:contain; flex-shrink:0;}
.footer-bottom a{margin-left:16px;}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr; gap:40px;}}
@media (max-width:640px){
  .footer-grid{grid-template-columns:1fr; gap:30px;}
  footer{padding-top:60px;}
  .footer-bottom{flex-direction:column; align-items:flex-start; padding:20px 0; gap:16px;}
  .footer-bottom-left{width:100%;}
  .kph-credit{font-size:0.75rem;}
  .kph-logo{height:20px;}
  footer h4{margin-bottom:14px;}
  footer ul{gap:10px;}
}

/* ---------- FLOATING BUTTONS ---------- */
.float-btns{position:fixed; right:26px; bottom:26px; z-index:999; display:flex; flex-direction:column; gap:14px;}
.float-btn{
  width:58px;height:58px;border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; color:#fff; box-shadow:0 14px 28px -8px rgba(0,0,0,0.35); position:relative;
}
.float-btn.whatsapp{background:#25D366;}
.float-btn.call{background:var(--blue);}
.float-btn .pulse{position:absolute; inset:0; border-radius:50%; border:2px solid currentColor; animation:pulse 2s infinite;}
@keyframes pulse{0%{transform:scale(1); opacity:0.7;} 100%{transform:scale(1.7); opacity:0;}}

@media (max-width:980px){
  .about-grid{grid-template-columns:1fr;}
  .cta-band{flex-direction:column; align-items:flex-start; padding:46px 30px;}
}

@media (max-width:900px){
  .programs-grid{grid-template-columns:1fr;}
  .donate-cats{grid-template-columns:1fr 1fr;}
}

@media (max-width:768px){
  .hero-content{padding:180px 0 0;}
  .stat-float{bottom:40px;}
  .float-btns{right:16px; bottom:16px; gap:10px;}
  .float-btn{width:52px; height:52px; font-size:1.2rem;}
  .hero-actions{flex-direction:column; gap:12px;}
  .hero-actions .btn{width:100%; justify-content:center;}
  h1{font-size:clamp(1.8rem, 2.2vw, 2.2rem);}
  .lead{font-size:clamp(0.95rem, 1.1vw, 1.05rem);}
}

@media (max-width:640px){
  .section{padding:76px 0;}
  .section-tight{padding:56px 0;}
  .container{padding:0 18px;}
  .contact-grid{grid-template-columns:1fr;}
  .hero-content{padding:140px 0 0;}
  h1{font-size:clamp(1.6rem, 1.9vw, 2rem);}
  .lead{font-size:0.95rem; line-height:1.6;}
  .hero-tag{font-size:0.72rem; padding:8px 14px;}
  .stat-float{bottom:30px; left:0; right:0;}
  .stat-grid{grid-template-columns:1fr 1fr; gap:16px;}
  .stat-card{padding:20px 16px;}
  .stat-card .num{font-size:clamp(1.4rem, 2vw, 1.8rem);}
  .stat-card .lbl{font-size:0.75rem;}
  .programs-grid{grid-template-columns:1fr; gap:20px;}
  .about-grid{gap:30px;}
  .niti-grid{gap:30px; grid-template-columns:1fr;}
  .donate-cats{grid-template-columns:1fr;}
  .leadership-grid{grid-template-columns:1fr;}
  .testi-wrap{grid-template-columns:1fr;}
  .story{padding:40px 24px;}
  .cta-band{padding:40px 24px; flex-direction:column; align-items:flex-start;}
  .nav .container{height:72px;}
  .brand-mark{width:40px; height:40px;}
  .brand-text b{font-size:0.9rem;}
  .brand-text span{font-size:0.6rem;}
  .nav-links{top:72px;}
}