:root{
    --green-deep:#134429;
    --green-brand:#0c8f43;
    --green-mid:#1f6e42;
    --lime:#8fb144;
    --lime-soft:#eef4dd;
    --cream:#f7f8f3;
    --paper:#ffffff;
    --ink:#152318;
    --ink-soft:#4c5b51;
    --line:#e1e7dd;
    --shadow:0 10px 30px rgba(19,68,41,0.09);
    --radius:14px;
    --wrap:1140px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:'Cairo','El Messiri',sans-serif;
    line-height:1.8;
    -webkit-font-smoothing:antialiased;
  }
  html[dir="ltr"] body{font-family:'El Messiri','Cairo',sans-serif; line-height:1.65;}
  h1,h2,h3,h4{
    font-family:'El Messiri','Cairo',sans-serif;
    margin:0;
    color:var(--green-deep);
    font-weight:700;
  }
  p{margin:0}
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  ul{margin:0;padding:0;list-style:none}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
  [data-en],[data-ar]{}
  html[dir="rtl"] [data-only="ltr"]{display:none !important}
  html[dir="ltr"] [data-only="rtl"]{display:none !important}
  section{padding:88px 0}
  .eyebrow-line{width:0;height:3px;background:var(--lime);border-radius:2px;margin-bottom:18px;transition:width .8s cubic-bezier(.22,.61,.36,1) .15s}
  .in-view .eyebrow-line{width:56px}
  html[dir="rtl"] .eyebrow-line{margin-inline-start:0}
  .center .eyebrow-line{margin-inline:auto}

  /* ---------- Header ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(255,255,255,0.92);
    backdrop-filter:saturate(180%) blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:20px}
  .brand{display:flex;align-items:center;gap:12px}
  .brand img{height:46px;width:auto}
  .brand .names{display:flex;flex-direction:column;line-height:1.25}
  .brand .name-primary{font-family:'El Messiri',sans-serif;font-weight:700;font-size:1.05rem;color:var(--green-deep)}
  .brand .name-secondary{font-size:.72rem;color:var(--ink-soft);letter-spacing:.03em}
  nav.main-nav{display:flex;align-items:center;gap:30px}
  nav.main-nav a{font-size:.95rem;font-weight:600;color:var(--ink-soft);padding:6px 2px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
  nav.main-nav a:hover{color:var(--green-brand);border-color:var(--lime)}
  .nav-actions{display:flex;align-items:center;gap:12px}
  .lang-toggle{
    border:1.5px solid var(--green-brand);
    background:transparent;color:var(--green-brand);
    font-family:inherit;font-weight:700;font-size:.85rem;
    padding:8px 16px;border-radius:999px;cursor:pointer;
    transition:background .2s,color .2s;
  }
  .lang-toggle:hover{background:var(--green-brand);color:#fff}
  .menu-btn{display:none;position:relative;width:32px;height:24px;background:none;border:none;cursor:pointer;padding:0}
  .menu-btn .bar{position:absolute;inset-inline:0;height:3px;border-radius:3px;background:var(--green-deep);transition:transform .3s ease,opacity .25s ease}
  .menu-btn .bar:nth-child(1){top:0}
  .menu-btn .bar:nth-child(2){top:10px}
  .menu-btn .bar:nth-child(3){top:20px}
  .menu-btn.open .bar:nth-child(1){transform:translateY(10px) rotate(45deg)}
  .menu-btn.open .bar:nth-child(2){opacity:0}
  .menu-btn.open .bar:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    background:linear-gradient(160deg,var(--green-deep) 0%,var(--green-mid) 60%,var(--green-brand) 100%);
    color:#fff;padding:0;overflow:hidden;
  }
  .hero-inner{position:relative;z-index:2;padding:100px 0 120px;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
  .hero-roof{position:absolute;inset:0;opacity:.16;pointer-events:none}
  .hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);padding:7px 16px;border-radius:999px;font-size:.82rem;font-weight:600;margin-bottom:22px}
  .hero-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--lime)}
  .hero h1{color:#fff;font-size:2.6rem;line-height:1.35;max-width:14ch}
  html[dir="ltr"] .hero h1{line-height:1.2}
  .hero .sub{margin-top:20px;font-size:1.12rem;color:#dfeee3;max-width:46ch}
  .hero-ctas{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:14px 28px;border-radius:999px;font-weight:700;font-size:.95rem;
    cursor:pointer;border:2px solid transparent;transition:transform .15s,background .2s,color .2s,border-color .2s;
  }
  .btn:hover{transform:translateY(-2px)}
  .btn-lime{background:var(--lime);color:var(--green-deep)}
  .btn-lime:hover{background:#a1c25c}
  .btn-outline{border-color:rgba(255,255,255,.6);color:#fff}
  .btn-outline:hover{background:rgba(255,255,255,.12)}
  .btn-solid{background:var(--green-brand);color:#fff}
  .btn-solid:hover{background:var(--green-mid)}

  .hero-figure{position:relative;z-index:2}
  .hero-card{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.25);
    border-radius:20px;padding:28px;backdrop-filter:blur(6px);
  }
  .hero-card .h-stat{display:flex;align-items:baseline;gap:10px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.18)}
  .hero-card .h-stat:last-child{border-bottom:none}
  .hero-card .h-stat .num{font-family:'El Messiri',sans-serif;font-size:1.9rem;font-weight:700;color:var(--lime)}
  .hero-card .h-stat .lbl{font-size:.88rem;color:#dfeee3}

  /* ---------- Section headers ---------- */
  .section-head{max-width:640px;margin-bottom:46px}
  .section-head.center{margin-inline:auto;text-align:center}
  .section-head h2{font-size:1.9rem}
  .section-head .lead{margin-top:14px;color:var(--ink-soft);font-size:1.02rem}

  /* ---------- About ---------- */
  .about{background:var(--paper)}
  .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .about p{color:var(--ink-soft);font-size:1.02rem}
  .vision-box{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:30px}
  .vision-box h3{font-size:1.2rem;margin-bottom:16px}
  .vision-list li{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);color:var(--ink-soft);font-size:.96rem}
  .vision-list li:last-child{border-bottom:none}
  .vision-list i{color:var(--green-brand);margin-top:4px;flex-shrink:0}

  /* ---------- Goals ---------- */
  .goals{background:var(--cream)}
  .goal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
  .goal-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;box-shadow:var(--shadow)}
  .goal-icon{width:54px;height:54px;border-radius:14px;background:var(--lime-soft);color:var(--green-brand);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:18px}
  .goal-card h3{font-size:1.08rem;margin-bottom:14px}
  .goal-desc{font-size:.84rem;color:var(--ink-soft);margin-bottom:12px;line-height:1.7}
  .goal-card ul li{display:flex;gap:8px;font-size:.88rem;color:var(--ink-soft);padding:6px 0}
  .goal-card ul li i{color:var(--lime);font-size:.5rem;margin-top:9px;flex-shrink:0}

  /* ---------- Activities ---------- */
  .activities{background:var(--paper)}
  .activity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .activity-card{border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:border-color .2s,box-shadow .2s}
  .activity-card:hover{box-shadow:var(--shadow);border-color:transparent}
  .activity-card i{color:var(--green-brand);font-size:1.5rem;margin-bottom:16px}
  .activity-card p{font-size:.93rem;color:var(--ink-soft)}

  /* ---------- Stats ---------- */
  .stats{background:var(--green-deep);color:#fff}
  .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center}
  .stat i{font-size:1.7rem;color:var(--lime);margin-bottom:14px}
  .stat .num{font-family:'El Messiri',sans-serif;font-size:2.3rem;font-weight:700}
  .stat .lbl{color:#cfe3d4;font-size:.92rem;margin-top:6px}

  /* ---------- News ---------- */
  .news{background:var(--cream)}
  .news-note{display:flex;align-items:flex-start;gap:12px;background:var(--lime-soft);border:1px solid #d9e6bb;border-radius:var(--radius);padding:16px 20px;margin-bottom:40px;font-size:.9rem;color:#3c4a2c}
  .news-note i{color:var(--green-mid);margin-top:3px}
  .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .news-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
  .news-thumb{height:170px;position:relative;cursor:pointer;overflow:hidden;background:var(--green-mid)}
  .news-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .45s ease}
  .news-thumb .gallery-badge{
    position:absolute;bottom:10px;inset-inline-end:10px;
    background:rgba(10,20,14,.62);color:#fff;font-size:.72rem;font-weight:600;
    padding:4px 10px;border-radius:999px;display:flex;align-items:center;gap:6px;
    backdrop-filter:blur(3px);
  }
  .news-body{padding:20px}
  .news-tag{display:inline-block;font-size:.72rem;font-weight:700;color:var(--green-brand);background:var(--lime-soft);padding:3px 10px;border-radius:999px;margin-bottom:10px}
  .news-body h4{font-size:1rem;margin-bottom:8px;color:var(--ink)}
  .news-body p{font-size:.86rem;color:var(--ink-soft)}
  .news-date{display:block;margin-top:12px;font-size:.78rem;color:#8b978f}

  /* ---------- Partners ---------- */
  .partners{background:var(--paper)}
  .partner-grid{display:grid;grid-template-columns:repeat(2,minmax(200px,280px));gap:18px;justify-content:center;max-width:600px;margin-inline:auto}
  .partner-tile{border:1px dashed var(--line);border-radius:var(--radius);padding:26px 14px;text-align:center;color:#9aa79e}
  .partner-tile i{font-size:1.5rem;display:block;margin-bottom:10px;color:var(--green-brand)}
  .partner-tile span{font-size:.8rem}
  .partner-tile.partner-named{border-style:solid;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}
  .partner-tile.partner-named img{max-width:100%;max-height:48px;width:auto;object-fit:contain}
  .partner-wordmark{font-family:'El Messiri',sans-serif;font-weight:700;font-size:1.1rem;color:var(--green-deep)}
  .partner-caption{font-size:.72rem;color:var(--ink-soft)}

  /* ---------- Contact ---------- */
  .contact{background:var(--green-deep);color:#fff}
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px}
  .contact h2{color:#fff}
  .contact .section-head .lead{color:#cfe3d4}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
  .field{width:100%;padding:13px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;font-family:inherit;font-size:.92rem}
  .field::placeholder{color:#b7cabd}
  textarea.field{resize:vertical;min-height:110px}
  .info-list{margin-top:8px}
  .info-list li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14)}
  .info-list li:first-child{padding-top:0}
  .info-list i{color:var(--lime);font-size:1.05rem;margin-top:3px;width:20px;flex-shrink:0}
  .info-list b{display:block;font-size:.85rem;color:#cfe3d4;margin-bottom:3px;font-weight:600}
  .info-list span{font-size:.92rem;color:#eef4ea}

  /* ---------- Footer ---------- */
  footer{background:#0e3220;color:#cfe3d4;padding:56px 0 26px}
  .foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
  .foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
  .foot-brand img{height:42px}
  .foot-brand span{font-family:'El Messiri',sans-serif;font-weight:700;color:#fff;font-size:1.1rem}
  footer p{font-size:.88rem;color:#a9c2ae;margin-top:8px}
  footer h5{color:#fff;font-size:.92rem;margin-bottom:16px;font-weight:700}
  .foot-links li{margin-bottom:10px}
  .foot-links a{font-size:.88rem;color:#a9c2ae;display:flex;align-items:center;gap:10px}
  .foot-links a:hover{color:#fff}
  .foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.8rem;color:#8fab97}
  .dev-credit-link{color:var(--lime);font-weight:700;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease,color .2s ease}
  .dev-credit-link:hover{border-color:var(--lime);color:#fff}

  /* ---------- Responsive ---------- */
  /* ---------- Scroll reveal & motion ---------- */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
  .reveal.in-view{opacity:1;transform:translateY(0)}
  .reveal-stagger > *{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
  .reveal-stagger.in-view > *{opacity:1;transform:translateY(0)}
  .reveal-stagger > *:nth-child(1){transition-delay:.03s}
  .reveal-stagger > *:nth-child(2){transition-delay:.10s}
  .reveal-stagger > *:nth-child(3){transition-delay:.17s}
  .reveal-stagger > *:nth-child(4){transition-delay:.24s}
  .reveal-stagger > *:nth-child(5){transition-delay:.31s}
  .reveal-stagger > *:nth-child(6){transition-delay:.38s}
  .reveal-stagger > *:nth-child(7){transition-delay:.45s}
  .reveal-stagger > *:nth-child(8){transition-delay:.52s}
  .reveal-stagger > *:nth-child(9){transition-delay:.59s}

  /* ---------- Scroll progress bar ---------- */
  .scroll-progress{position:fixed;top:0;inset-inline:0;height:3px;background:var(--lime);z-index:100;width:0%;transition:width .1s linear}

  /* ---------- Header shrink on scroll ---------- */
  header{transition:box-shadow .3s ease}
  header.scrolled{box-shadow:0 6px 20px rgba(19,68,41,.08)}
  header.scrolled .nav-row{padding:9px 0}
  .nav-row{transition:padding .3s ease}
  .brand img{transition:height .3s ease}
  header.scrolled .brand img{height:36px}

  /* ---------- Nav active link ---------- */
  nav.main-nav a{position:relative}
  nav.main-nav a::after{content:'';position:absolute;bottom:0;inset-inline:2px;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
  nav.main-nav a:hover::after,nav.main-nav a.active::after{transform:scaleX(1)}
  nav.main-nav a.active{color:var(--green-brand)}

  /* ---------- Focus visibility ---------- */
  a:focus-visible,button:focus-visible,.field:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}
  .field:focus{outline:2px solid var(--lime);outline-offset:0;border-color:transparent}

  /* ---------- Hero decoration ---------- */
  .hero{isolation:isolate}
  .hero-blob{position:absolute;border-radius:50%;filter:blur(60px);z-index:0;pointer-events:none}
  .hero-blob.b1{width:340px;height:340px;background:radial-gradient(circle,rgba(143,177,68,.55),transparent 70%);top:-80px;inset-inline-end:-60px;animation:floatBlob 9s ease-in-out infinite alternate}
  .hero-blob.b2{width:260px;height:260px;background:radial-gradient(circle,rgba(255,255,255,.25),transparent 70%);bottom:-60px;inset-inline-start:5%;animation:floatBlob 11s ease-in-out infinite alternate-reverse}
  @keyframes floatBlob{from{transform:translate(0,0) scale(1)}to{transform:translate(-24px,20px) scale(1.12)}}
  .hero-eyebrow .dot{animation:pulseDot 1.8s ease-in-out infinite}
  @keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(1.4)}}
  .hero-inner > *{position:relative;z-index:1}
  .hero-card{transition:transform .4s ease}
  .hero-card:hover{transform:translateY(-4px)}
  .h-stat .num{transition:transform .3s ease}
  .hero-card:hover .h-stat .num{transform:scale(1.04)}

  /* ---------- Button micro-interactions & ripple ---------- */
  .btn{position:relative;overflow:hidden}
  .btn i{transition:transform .25s ease}
  html[dir="rtl"] .btn:hover i.fa-arrow-left{transform:translateX(-5px)}
  html[dir="ltr"] .btn:hover i.fa-arrow-right{transform:translateX(5px)}
  .btn:active{transform:translateY(0) scale(.97)}
  .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);transform:scale(0);animation:rippleAnim .6s ease-out forwards;pointer-events:none}
  @keyframes rippleAnim{to{transform:scale(2.6);opacity:0}}

  /* ---------- Hero heading word reveal ---------- */
  .hero h1 .word{display:inline-block;opacity:0;transform:translateY(20px);animation:wordIn .65s cubic-bezier(.22,.61,.36,1) forwards}
  @keyframes wordIn{to{opacity:1;transform:translateY(0)}}

  /* ---------- Scroll-down cue ---------- */
  .scroll-cue{position:absolute;bottom:20px;inset-inline-start:50%;transform:translateX(-50%);color:rgba(255,255,255,.8);font-size:1.05rem;z-index:2;animation:bounceCue 2.1s ease-in-out infinite}
  @keyframes bounceCue{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}}

  /* ---------- Side scroll-spy dots ---------- */
  .side-dots{position:fixed;top:50%;inset-inline-end:22px;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;gap:16px}
  .side-dots a{position:relative;width:10px;height:10px;border-radius:50%;background:var(--line);display:block;transition:background .25s ease,transform .25s ease}
  .side-dots a:hover{transform:scale(1.35)}
  .side-dots a.active{background:var(--green-brand);transform:scale(1.35)}
  .side-dots a .tip{position:absolute;inset-inline-end:20px;top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--green-deep);color:#fff;font-size:.72rem;padding:4px 10px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .2s ease}
  .side-dots a:hover .tip{opacity:1}
  @media (max-width:1240px){.side-dots{display:none}}

  /* ---------- Floating WhatsApp ---------- */
  .float-whatsapp{position:fixed;bottom:26px;inset-inline-start:26px;z-index:60;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.55rem;box-shadow:0 10px 24px rgba(37,211,102,.4);transition:transform .25s ease}
  .float-whatsapp:hover{transform:scale(1.08)}
  .wa-ring{position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:waPulse 2.4s ease-out infinite}
  @keyframes waPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}

  /* ---------- Card cursor glow ---------- */
  .goal-card,.activity-card{position:relative}
  .goal-card::before,.activity-card::before{
    content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
    background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%), rgba(12,143,67,.10), transparent 70%);
    transition:opacity .3s ease;
  }
  .goal-card:hover::before,.activity-card:hover::before{opacity:1}

  /* ---------- Card hover states ---------- */
  .goal-card,.activity-card,.news-card,.partner-tile{transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease,border-color .35s ease}
  .goal-card:hover,.news-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
  .goal-icon{transition:transform .35s ease,background .35s ease}
  .goal-card:hover .goal-icon{transform:rotate(-6deg) scale(1.08);background:var(--lime)}
  .goal-card:hover .goal-icon i{color:var(--green-deep)}
  .activity-card{transform:translateY(0)}
  .activity-card:hover{transform:translateY(-5px)}
  .activity-card i{transition:transform .35s ease,color .35s ease}
  .activity-card:hover i{transform:scale(1.15);color:var(--green-mid)}
  .partner-tile{transition:transform .3s ease,border-color .3s ease,background .3s ease}
  .partner-tile:hover{transform:translateY(-3px);border-color:var(--green-brand);background:var(--lime-soft)}
  .news-thumb{transition:transform .4s ease}
  .news-card:hover .news-thumb{transform:scale(1.04)}

  /* ---------- Stats count-up ---------- */
  .stat{transition:transform .4s ease}
  .stat .num{font-variant-numeric:tabular-nums}
  .stat i{transition:transform .4s ease}
  .stat.in-view i{animation:popIcon .6s cubic-bezier(.34,1.56,.64,1)}
  @keyframes popIcon{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}

  /* ---------- Lang crossfade ---------- */
  .lang-fade [data-ar][data-en],.lang-fade [data-ph-ar]{transition:opacity .18s ease}
  .lang-swapping [data-ar][data-en]{opacity:0}

  /* ---------- Mobile nav animation ---------- */
  nav.main-nav{max-height:0;overflow:hidden;transition:max-height .35s ease,opacity .3s ease;opacity:0;padding-top:0;padding-bottom:0}
  nav.main-nav.open{max-height:400px;opacity:1;padding-top:16px;padding-bottom:16px}

  /* ---------- Back to top ---------- */
  .back-top{
    position:fixed;bottom:26px;inset-inline-end:26px;z-index:60;
    width:46px;height:46px;border-radius:50%;background:var(--green-brand);color:#fff;
    display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;
    box-shadow:0 8px 20px rgba(19,68,41,.28);
    opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
    transition:opacity .3s ease,transform .3s ease,background .2s ease;
  }
  .back-top.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
  .back-top:hover{background:var(--green-mid)}

  /* ---------- Reduced motion ---------- */
  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
    .reveal,.reveal-stagger > *{opacity:1;transform:none}
  }

  /* ---------- Lightbox gallery ---------- */
  .lightbox{
    position:fixed;inset:0;z-index:300;background:rgba(8,20,14,.93);
    display:none;align-items:center;justify-content:center;padding:24px;
  }
  .lightbox.open{display:flex}
  .lightbox-stage{position:relative;max-width:900px;width:100%;text-align:center}
  .lightbox-stage img{max-width:100%;max-height:75vh;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.5);animation:lightboxIn .25s ease}
  @keyframes lightboxIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
  .lightbox-counter{margin-top:16px;color:#dfeee3;font-size:.85rem;font-weight:600;letter-spacing:.02em}
  .lightbox-close{
    position:absolute;top:22px;inset-inline-end:22px;width:44px;height:44px;border-radius:50%;
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;
    font-size:1.1rem;cursor:pointer;transition:background .2s ease,transform .2s ease;
  }
  .lightbox-close:hover{background:rgba(255,255,255,.22);transform:rotate(90deg)}
  .lightbox-nav{
    position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;
    font-size:1.15rem;cursor:pointer;transition:background .2s ease;z-index:2;
  }
  .lightbox-nav:hover{background:rgba(255,255,255,.24)}
  .lightbox-nav.prev{inset-inline-start:0}
  .lightbox-nav.next{inset-inline-end:0}
  @media (max-width:760px){
    .lightbox-nav{width:40px;height:40px;font-size:1rem}
    .lightbox-nav.prev{inset-inline-start:-4px}
    .lightbox-nav.next{inset-inline-end:-4px}
    .lightbox-close{width:38px;height:38px;top:14px;inset-inline-end:14px}
  }

  /* ---------- Map section ---------- */
  .map-section{background:var(--paper);padding-bottom:100px}
  .map-link{
    display:block;position:relative;border-radius:var(--radius);overflow:hidden;
    box-shadow:var(--shadow);border:1px solid var(--line);
    transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease;
    cursor:pointer;
  }
  .map-link img{width:100%;height:auto;display:block;transition:transform .5s ease;filter:saturate(1.05)}
  .map-link:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(19,68,41,.18)}
  .map-link:hover img{transform:scale(1.04)}
  .map-overlay{
    position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
    background:linear-gradient(180deg,rgba(19,68,41,0) 40%,rgba(19,68,41,.55) 100%);
    opacity:0;transition:opacity .35s ease;
  }
  .map-link:hover .map-overlay{opacity:1}
  .map-pin{
    width:54px;height:54px;border-radius:50%;background:var(--lime);color:var(--green-deep);
    display:flex;align-items:center;justify-content:center;font-size:1.4rem;
    transform:translateY(10px);transition:transform .35s ease;
    animation:pinBob 1.8s ease-in-out infinite;
  }
  .map-link:hover .map-pin{transform:translateY(0)}
  @keyframes pinBob{0%,100%{margin-top:0}50%{margin-top:-6px}}
  .map-cta{
    background:#fff;color:var(--green-deep);font-weight:700;font-size:.9rem;
    padding:10px 22px;border-radius:999px;transform:translateY(10px);opacity:0;
    transition:transform .35s ease .05s,opacity .35s ease .05s;
  }
  .map-link:hover .map-cta{transform:translateY(0);opacity:1}
  @media (max-width:640px){
    .map-overlay{opacity:1;background:linear-gradient(180deg,rgba(19,68,41,0) 55%,rgba(19,68,41,.6) 100%)}
    .map-pin{transform:translateY(0)}
    .map-cta{transform:translateY(0);opacity:1}
  }

  /* ---------- Org chart ---------- */
  .org-chart{background:var(--paper)}
  .org-tree{display:flex;flex-direction:column;align-items:center}

  .org-node{
    display:flex;align-items:center;gap:10px;
    background:var(--paper);border:1.5px solid var(--line);border-radius:12px;
    padding:14px 24px;box-shadow:var(--shadow);
    font-family:'El Messiri',sans-serif;font-weight:700;font-size:.98rem;color:var(--ink);
    white-space:nowrap;
    transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
  }
  .org-node:hover{transform:translateY(-3px);border-color:var(--green-brand)}
  .org-node i{color:var(--green-brand);font-size:1.1rem;flex-shrink:0}
  .org-node.node-top{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
  .org-node.node-top i{color:var(--lime)}
  .org-node.node-highlight{background:var(--lime);border-color:var(--lime);color:var(--green-deep)}
  .org-node.node-highlight i{color:var(--green-deep)}
  .org-node.node-aux{font-size:.86rem;padding:11px 20px;border-style:dashed}
  .org-node.node-aux i{color:var(--green-mid)}
  .org-node.small{padding:12px 18px;font-size:.86rem;border-radius:10px}
  .org-node.small i{font-size:.95rem}
  .org-node.tiny{padding:9px 16px;font-size:.78rem;border-radius:9px;font-weight:600;box-shadow:none;background:var(--cream)}

  /* trunk: Board -> (Internal auditor branches off mid-stem) -> Executive Director */
  .org-trunk{position:relative;display:flex;flex-direction:column;align-items:center}
  .org-trunk .org-stem-combined{width:2px;height:64px;background:var(--line)}
  .org-aux-branch{
    position:absolute;top:32px;right:50%;transform:translateY(-50%);
    display:flex;flex-direction:row-reverse;align-items:center;direction:ltr;
  }
  .org-aux-branch .org-aux-line{width:32px;height:2px;background:var(--line);flex-shrink:0}

  /* branches row under Executive Director */
  .org-branches{
    position:relative;display:flex;justify-content:center;gap:26px;
    padding-top:30px;flex-wrap:wrap;
  }
  .org-branches::before{
    content:'';position:absolute;top:0;left:50%;width:2px;height:16px;
    background:var(--line);transform:translateX(-50%);
  }
  .org-branches::after{
    content:'';position:absolute;top:16px;left:var(--org-connector-left,12%);right:var(--org-connector-right,12%);height:2px;background:var(--line);
  }
  .org-branch-col{display:flex;flex-direction:column;align-items:center;position:relative}
  .org-branch-col::before{
    content:'';position:absolute;top:-14px;left:50%;width:2px;height:14px;
    background:var(--line);transform:translateX(-50%);
  }

  .org-subrow{position:relative;display:flex;gap:12px;padding-top:20px;justify-content:center}
  .org-subrow::before{
    content:'';position:absolute;top:0;left:50%;width:2px;height:10px;
    background:var(--line);transform:translateX(-50%);
  }
  .org-subrow.multi::after{
    content:'';position:absolute;top:10px;left:15%;right:15%;height:2px;background:var(--line);
  }
  .org-subitem{position:relative}
  .org-subrow.multi .org-subitem::before{
    content:'';position:absolute;top:-12px;left:50%;width:2px;height:12px;
    background:var(--line);transform:translateX(-50%);
  }

  @media (max-width:760px){
    .org-branches{flex-direction:column;align-items:center;gap:24px;padding-top:0}
    .org-branches::before,.org-branches::after{display:none}
    .org-branch-col::before{display:none}
    .org-subrow{flex-direction:column;align-items:center;padding-top:12px}
    .org-subrow::before{height:12px}
    .org-subrow.multi::after{display:none}
    .org-subrow.multi .org-subitem::before{top:-12px;height:12px}
  }

  @media (max-width:920px){
    nav.main-nav{position:fixed;top:74px;inset-inline:0;background:#fff;flex-direction:column;padding:20px 24px;gap:6px;border-bottom:1px solid var(--line);display:none;box-shadow:0 12px 24px rgba(0,0,0,.06)}
    nav.main-nav.open{display:flex}
    nav.main-nav a{width:100%;padding:12px 4px;border-bottom:1px solid var(--line)}
    .menu-btn{display:block}
    .hero-inner{grid-template-columns:1fr;padding:56px 0 70px}
    .hero h1{font-size:2rem;max-width:none}
    .about-grid,.contact-grid{grid-template-columns:1fr}
    .goal-grid{grid-template-columns:repeat(2,1fr)}
    .activity-grid{grid-template-columns:repeat(2,1fr)}
    .news-grid{grid-template-columns:1fr}
    .partner-grid{grid-template-columns:minmax(200px,280px);max-width:280px}
    .stats-grid{grid-template-columns:1fr}
    .field-row{grid-template-columns:1fr}
    section{padding:60px 0}
  }

  /* ===== Rebuild additions (not in the prototype) ===== */

  /* Org chart with more than four branches: stack the positions under each
     branch and let long names wrap, so more branches fit on one row. */
  .org-branches--many{gap:14px}
  .org-branches--many .org-branch-col{flex:0 1 auto;min-width:0}
  .org-branches--many .org-node.small,
  .org-branches--many .org-node.tiny{white-space:normal;max-width:170px;text-align:center}
  .org-branches--many .org-subrow{flex-direction:column;align-items:center;padding-top:12px}
  .org-branches--many .org-subrow::before{height:12px}
  .org-branches--many .org-subrow.multi::after{display:none}
  .org-branches--many .org-subrow.multi .org-subitem::before{top:-12px;height:12px}
  /* A branch that wrapped to a second row has no line to connect to. */
  .org-branch-col--wrapped::before{display:none}

  /* Contact form status line and sending state (Phase 6) */
  .form-status{margin-top:14px;padding:12px 16px;border-radius:10px;font-size:.9rem;line-height:1.6}
  .form-status.is-sending{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);color:#dfeee3}
  .form-status.is-success{background:rgba(143,177,68,.18);border:1px solid var(--lime);color:#fff}
  .form-status.is-error{background:rgba(220,80,60,.16);border:1px solid rgba(255,150,130,.55);color:#fff}
  .contact form button[disabled]{opacity:.65;cursor:progress}

  /* News likes and views (added on request, not in the prototype) */
  .news-meta{display:flex;align-items:center;gap:18px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:.82rem;color:var(--ink-soft)}
  .news-views,.news-like{display:inline-flex;align-items:center;gap:6px}
  .news-like{background:none;border:0;padding:4px 6px;margin:-4px -6px;border-radius:8px;font:inherit;color:inherit;cursor:pointer;transition:color .2s ease,background .2s ease}
  .news-like:hover{background:var(--lime-soft);color:var(--green-deep)}
  .news-like.is-liked,.news-like.is-liked:hover{color:#d6336c}
  .news-like.is-liked i{animation:likePop .35s ease}
  @keyframes likePop{50%{transform:scale(1.3)}}
  .visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

  /* Staff login link in the footer's bottom line (added on request) */
  .foot-sep{margin:0 8px;opacity:.6}
  .staff-login{display:inline-flex;align-items:center;gap:6px;color:#8fab97;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease,color .2s ease}
  .staff-login i{font-size:.72rem}
  .staff-login:hover{color:var(--lime);border-color:var(--lime)}
  /* Room under the footer so its last line (credit, staff login) can scroll
     clear of the floating WhatsApp and back-to-top buttons (80px high). */
  footer{padding-bottom:96px}

  /* Visitor numbers row in the footer (added on request) */
  .foot-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:36px}
  .foot-stat{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);font-size:.82rem;color:#a9c2ae}
  .foot-stat i{color:var(--lime);font-size:.95rem}
  .foot-stat-num{font-family:'El Messiri',sans-serif;font-size:1.08rem;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
  .foot-stats + .foot-bottom{margin-top:26px}

  /* Staff login button in the header, next to the language button (added on request) */
  .staff-login-btn{display:inline-flex;align-items:center;gap:8px;background:var(--green-brand);color:#fff;border:1.5px solid var(--green-brand);font-weight:700;font-size:.85rem;padding:8px 16px;border-radius:999px;text-decoration:none;transition:background .2s,border-color .2s,transform .2s}
  .staff-login-btn i{font-size:.8rem}
  .staff-login-btn:hover{background:var(--green-deep);border-color:var(--green-deep);transform:translateY(-1px)}
  @media (max-width:640px){
    .nav-actions{gap:8px}
    .lang-toggle{padding:6px 12px}
    .staff-login-btn{width:32px;height:32px;padding:0;justify-content:center}
    .staff-login-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  }
  /* Very narrow phones: no room in the header; the footer link remains. */
  @media (max-width:380px){
    .staff-login-btn{display:none}
  }