:root{
    --green-dark:#1F3A36;
    --green-dark-2:#172C28;
    --green-olive:#7C8B7A;
    --gold:#C8A25D;
    --gold-light:#E2C691;
    --cream:#F2EFE6;
    --cream-soft:#FAF8F3;
    --charcoal:#2B2B2B;
    --white:#FFFFFF;
    --text-soft: rgba(43,43,43,.68);
    --text-on-dark: rgba(242,239,230,.82);
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --shadow-sm: 0 6px 18px rgba(31,58,54,.08);
    --shadow-md: 0 18px 45px rgba(31,58,54,.12);
    --shadow-gold: 0 14px 34px rgba(200,162,93,.28);
    --container: 1240px;
    --ease: cubic-bezier(.16,.84,.44,1);
  }

  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth; overflow-x:hidden;}
  body{
    font-family:'Cairo', sans-serif;
    background:var(--cream-soft);
    color:var(--charcoal);
    line-height:1.75;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{text-decoration:none;color:inherit;}
  ul{list-style:none;}
  section{position:relative;}
  .container{
    width:100%;
    max-width:var(--container);
    margin-inline:auto;
    padding-inline:24px;
  }
  ::selection{background:var(--gold); color:var(--green-dark-2);}

  /* scrollbar */
  ::-webkit-scrollbar{width:10px;}
  ::-webkit-scrollbar-track{background:var(--cream);}
  ::-webkit-scrollbar-thumb{background:var(--green-olive);border-radius:10px;}

  h1,h2,h3,h4{
    font-weight:800;
    color:var(--green-dark);
    line-height:1.35;
  }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:13.5px;
    font-weight:700;
    letter-spacing:.3px;
    color:var(--gold);
    background:rgba(200,162,93,.1);
    border:1px solid rgba(200,162,93,.35);
    padding:8px 18px;
    border-radius:99px;
    margin-bottom:18px;
  }
  .eyebrow::before{
    content:'';
    width:6px;height:6px;border-radius:50%;
    background:var(--gold);
    display:inline-block;
  }
  .section-head{
    max-width:720px;
    margin-bottom:56px;
  }
  .section-head.center{margin-inline:auto; text-align:center;}
  .section-head h2{
    font-size:clamp(28px,3.4vw,42px);
    margin-bottom:16px;
  }
  .section-head p{
    color:var(--text-soft);
    font-size:17px;
    max-width:620px;
  }
  .section-head.center p{margin-inline:auto;}

  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 30px;
    border-radius:99px;
    font-weight:700;
    font-size:15.5px;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
    border:1px solid transparent;
    cursor:pointer;
    white-space:nowrap;
  }
  .btn svg{width:18px;height:18px;transition:transform .35s var(--ease);}
  .btn-primary{
    background:linear-gradient(135deg, var(--gold), #b88f49);
    color:var(--green-dark-2);
    box-shadow:var(--shadow-gold);
  }
  .btn-primary:hover{transform:translateY(-3px); box-shadow:0 18px 40px rgba(200,162,93,.4);}
  .btn-outline{
    background:transparent;
    border-color:rgba(242,239,230,.4);
    color:var(--cream);
  }
  .btn-outline:hover{background:rgba(242,239,230,.12); transform:translateY(-3px);}
  .btn-dark{
    background:var(--green-dark);
    color:var(--cream);
  }
  .btn-dark:hover{background:var(--green-dark-2); transform:translateY(-3px); box-shadow:var(--shadow-md);}
  .btn:hover svg{transform:translateX(-4px);}

  /* ===== Decorative triangle pattern ===== */
  .tri-pattern{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:0;
  }
  .tri-pattern svg{position:absolute;}

  /* ===== Header ===== */
  header{
    position:fixed;
    top:0;left:0;right:0;
    z-index:1000;
    padding:22px 0;
    transition:all .45s var(--ease);
  }
  header.scrolled{
    padding:12px 0;
    background:rgba(250,248,243,.85);
    backdrop-filter:blur(14px) saturate(160%);
    box-shadow:0 8px 30px rgba(31,58,54,.08);
  }
  header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .brand-mark{
    display:flex; align-items:center; justify-content:center;
    flex:0 0 auto;
  }
  .brand img{height:44px;width:auto; transition:height .4s var(--ease); filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));}
  header.scrolled .brand img{height:40px;}
  .brand-text{
    display:flex;
    flex-direction:column;
    line-height:1.25;
  }
  .brand-text strong{
    font-size:16.5px;
    font-weight:800;
    color:var(--cream);
    transition:color .4s var(--ease), text-shadow .4s var(--ease);
    text-shadow:0 2px 12px rgba(0,0,0,.4);
  }
  header.scrolled .brand-text strong{ color:var(--green-dark); text-shadow:none; }
  .brand-text span{
    font-size:11.5px;
    color:var(--gold-light);
    font-weight:600;
    letter-spacing:.3px;
  }
  header.scrolled .brand-text span{ color:var(--gold); }

  nav.main-nav{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:4px;
    background:rgba(255,255,255,.55);
    border:1px solid rgba(31,58,54,.08);
    padding:6px;
    border-radius:99px;
    backdrop-filter:blur(10px);
  }
  header:not(.scrolled) nav.main-nav{
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.22);
  }
  nav.main-nav a{
    padding:10px 16px;
    border-radius:99px;
    font-size:14.5px;
    font-weight:600;
    color:var(--green-dark);
    white-space:nowrap;
    flex-shrink:0;
    transition:background .3s, color .3s;
  }
  header:not(.scrolled) nav.main-nav a{ color:var(--cream); }
  nav.main-nav a:hover{background:var(--gold); color:var(--green-dark-2);}

  .header-actions{display:flex; align-items:center; gap:14px;}
  .lang-toggle{
    display:flex; align-items:center; gap:6px;
    padding:9px 16px;
    border-radius:99px;
    font-size:13.5px;
    font-weight:700;
    border:1px solid rgba(31,58,54,.15);
    background:rgba(255,255,255,.5);
    color:var(--green-dark);
    transition:all .3s var(--ease);
  }
  header:not(.scrolled) .lang-toggle{
    border-color:rgba(255,255,255,.3);
    background:rgba(255,255,255,.1);
    color:var(--cream);
  }
  .lang-toggle:hover{background:var(--gold); border-color:var(--gold); color:var(--green-dark-2);}
  .lang-toggle svg{width:15px;height:15px;flex-shrink:0;}
  .mobile-nav .lang-toggle{
    margin-top:18px;
    border-color:rgba(242,239,230,.3);
    color:var(--cream);
    background:rgba(242,239,230,.06);
    font-size:15px;
    padding:16px 32px;
    gap:10px;
    border-radius:var(--radius-sm);
  }
  .burger{
    display:none;
    width:44px;height:44px;
    border-radius:50%;
    border:1px solid rgba(31,58,54,.15);
    background:rgba(255,255,255,.5);
    align-items:center;justify-content:center;
    cursor:pointer;
    flex-direction:column;
    gap:5px;
  }
  .burger span{width:18px;height:2px;background:var(--green-dark);display:block;transition:.3s;}
  header:not(.scrolled) .burger span{background:var(--cream);}
  header:not(.scrolled) .burger{border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.1);}

  /* mobile nav drawer */
  .mobile-nav{
    position:fixed; inset:0; z-index:1100;
    background:var(--green-dark-2);
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:8px;
    transform:translateY(-100%);
    visibility:hidden;
    pointer-events:none;
    transition:transform .5s var(--ease), visibility 0s linear .5s;
  }
  /* The drawer's own bottom edge (its centered last item, the language
     pill) can end up sitting exactly at the top of the viewport once
     translated off-screen, and since it has a higher z-index than the
     header, a sliver of it was staying visible AND clickable even while
     "closed". visibility:hidden + pointer-events:none guarantees it's
     fully gone and inert until the drawer is actually opened. */
  .mobile-nav.open{
    transform:translateY(0);
    visibility:visible;
    pointer-events:auto;
    transition:transform .5s var(--ease), visibility 0s linear 0s;
  }
  .mobile-nav a{
    color:var(--cream);
    font-size:24px;
    font-weight:700;
    padding:14px 0;
  }
  .mobile-nav a:hover{color:var(--gold);}
  .mobile-close{
    position:absolute; top:26px; left:26px;
    width:46px;height:46px;border-radius:50%;
    border:1px solid rgba(242,239,230,.3);
    display:flex;align-items:center;justify-content:center;
    color:var(--cream); cursor:pointer; font-size:20px;
  }

  /* ===== Hero ===== */
  .hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    background:radial-gradient(120% 120% at 80% 0%, #234943 0%, var(--green-dark) 45%, var(--green-dark-2) 100%);
    padding:160px 0 110px;
    overflow:hidden;
  }
  .hero .container{position:relative; z-index:2;}
  .hero-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:50px;
  }
  .hero-content{color:var(--cream);}
  .hero-content .eyebrow{
    background:rgba(200,162,93,.14);
    border-color:rgba(200,162,93,.4);
  }
  .hero-content h1{
    font-size:clamp(36px,5vw,60px);
    color:var(--cream);
    font-weight:900;
    margin-bottom:22px;
  }
  .hero-content h1 em{
    font-style:normal;
    color:var(--gold);
    background:linear-gradient(90deg, var(--gold-light), var(--gold));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  .hero-content p{
    font-size:18px;
    color:var(--text-on-dark);
    max-width:540px;
    margin-bottom:38px;
  }
  .hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:54px;}
  .hero-stats{
    display:flex;
    gap:36px;
    flex-wrap:wrap;
    border-top:1px solid rgba(242,239,230,.16);
    padding-top:30px;
  }
  .hero-stats .stat strong{
    display:block;
    font-size:30px;
    font-weight:900;
    color:var(--gold-light);
  }
  .hero-stats .stat span{
    font-size:13px;
    color:var(--text-on-dark);
  }

  .hero-visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .hero-visual .ring{
    position:absolute;
    width:120%;height:120%;
    border-radius:50%;
    border:1px dashed rgba(200,162,93,.3);
    animation:spin 50s linear infinite;
  }
  .hero-visual .ring.r2{
    width:92%;height:92%;
    border-color:rgba(242,239,230,.18);
    animation-duration:38s;
    animation-direction:reverse;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  .hero-logo-card{
    position:relative;
    z-index:2;
    background:linear-gradient(160deg, rgba(242,239,230,.1), rgba(242,239,230,.03));
    border:1px solid rgba(242,239,230,.2);
    backdrop-filter:blur(8px);
    border-radius:32px;
    padding:54px 40px;
    text-align:center;
    box-shadow:0 30px 80px rgba(0,0,0,.35);
  }
  .hero-logo-card .badge-circle{
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 26px;
  }
  .hero-logo-card .badge-circle img{width:172px; margin:0;}
  .hero-logo-card img{width:170px; margin-inline:auto; margin-bottom:22px; filter:drop-shadow(0 14px 28px rgba(0,0,0,.5));}
  .hero-logo-card .tagline{
    color:var(--gold-light);
    font-weight:700;
    font-size:16px;
    letter-spacing:.2px;
  }
  .hero-logo-card .tagline-en{
    color:var(--text-on-dark);
    font-size:11.5px;
    letter-spacing:3px;
    margin-top:8px;
    text-transform:uppercase;
  }
  .scroll-cue{
    position:absolute;
    bottom:28px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    color:var(--text-on-dark);
    font-size:12px;
    z-index:2;
  }
  .scroll-cue .line{width:1px;height:36px;background:linear-gradient(var(--gold), transparent); animation:scrollLine 2s infinite;}
  @keyframes scrollLine{0%{transform:scaleY(0); transform-origin:top;} 50%{transform:scaleY(1); transform-origin:top;} 51%{transform-origin:bottom;}100%{transform:scaleY(0); transform-origin:bottom;}}

  /* ===== About ===== */
  .about{padding:130px 0; background:var(--cream-soft);}
  .about-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:70px;
    align-items:center;
  }
  .about-visual{
    position:relative;
    border-radius:var(--radius-lg);
    background:linear-gradient(155deg, var(--green-dark), var(--green-dark-2));
    aspect-ratio:1/1.05;
    overflow:hidden;
    box-shadow:var(--shadow-md);
  }
  .about-visual .quote-mark{
    position:absolute; top:30px; right:34px;
    font-size:90px;
    color:rgba(200,162,93,.35);
    font-weight:900;
    line-height:1;
    font-family:Georgia, serif;
  }
  .about-visual .quote{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    padding:60px;
    color:var(--cream);
    font-size:22px;
    font-weight:700;
    text-align:center;
    line-height:1.7;
  }
  .about-text .section-head{margin-bottom:24px;}
  .about-text p{color:var(--text-soft); font-size:16.5px; margin-bottom:18px;}
  .about-text p.lead{
    color:var(--charcoal);
    font-size:18px;
    font-weight:600;
    line-height:1.85;
  }
  .stat-row{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-top:40px;
  }
  .stat-card{
    background:var(--white);
    border:1px solid rgba(31,58,54,.08);
    border-radius:var(--radius-md);
    padding:22px 16px;
    text-align:center;
    box-shadow:var(--shadow-sm);
    transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  }
  .stat-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
  .stat-card strong{
    display:block;
    font-size:30px;
    font-weight:900;
    color:var(--green-dark);
  }
  .stat-card strong .gold-dot{color:var(--gold);}
  .stat-card span{font-size:12.5px; color:var(--text-soft); font-weight:600;}

  /* ===== Vision & Mission ===== */
  .vm{
    padding:130px 0;
    background:var(--green-dark-2);
    color:var(--cream);
    overflow:hidden;
  }
  .vm .section-head h2, .vm .section-head p{color:var(--cream);}
  .vm .section-head p{color:var(--text-on-dark);}
  .vm-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
  }
  .vm-card{
    background:rgba(242,239,230,.05);
    border:1px solid rgba(242,239,230,.14);
    border-radius:var(--radius-lg);
    padding:46px 40px;
    position:relative;
    overflow:hidden;
    transition:transform .45s var(--ease), background .45s var(--ease);
  }
  .vm-card:hover{transform:translateY(-8px); background:rgba(242,239,230,.08);}
  .vm-card .icon-badge{
    width:62px;height:62px;
    border-radius:18px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg, var(--gold), #a87e3c);
    margin-bottom:26px;
    box-shadow:var(--shadow-gold);
  }
  .vm-card .icon-badge svg{width:28px;height:28px;color:var(--green-dark-2);}
  .vm-card h3{color:var(--cream); font-size:22px; margin-bottom:16px;}
  .vm-card p{color:var(--text-on-dark); font-size:16.5px;}
  .vm-card .tag{
    position:absolute; top:30px; left:36px;
    font-size:12px; font-weight:700; letter-spacing:1px;
    color:rgba(242,239,230,.35);
    text-transform:uppercase;
  }

  /* ===== Values ===== */
  .values{padding:130px 0; background:var(--cream-soft);}
  .values-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:22px;
  }
  .value-card{
    background:var(--white);
    border-radius:var(--radius-md);
    padding:30px 22px;
    border:1px solid rgba(31,58,54,.07);
    box-shadow:var(--shadow-sm);
    transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
    position:relative;
  }
  .value-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-md); border-color:rgba(200,162,93,.4);}
  .value-card .num{
    font-size:34px;
    font-weight:900;
    color:rgba(124,139,122,.3);
    margin-bottom:18px;
    transition:color .4s;
  }
  .value-card:hover .num{color:var(--gold);}
  .value-card .icon-circle{
    width:50px;height:50px;
    border-radius:50%;
    background:var(--cream);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:18px;
  }
  .value-card .icon-circle svg{width:24px;height:24px;color:var(--green-dark);}
  .value-card h4{font-size:16.5px; color:var(--green-dark); font-weight:700; line-height:1.5;}

  /* ===== Goals & Activities ===== */
  .goals{padding:0 0 130px; background:var(--cream-soft);}
  .goals-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:50px;
    background:var(--white);
    border-radius:var(--radius-lg);
    border:1px solid rgba(31,58,54,.07);
    box-shadow:var(--shadow-sm);
    padding:54px;
  }
  .goals-col h3{
    font-size:22px;
    margin-bottom:26px;
    display:flex; align-items:center; gap:12px;
  }
  .goals-col h3 svg{width:24px;height:24px;color:var(--gold);}
  .goal-list li{
    display:flex;
    gap:14px;
    align-items:flex-start;
    margin-bottom:18px;
    color:var(--text-soft);
    font-size:15.5px;
  }
  .goal-list li .check{
    flex:0 0 auto;
    width:26px;height:26px;
    border-radius:50%;
    background:rgba(31,58,54,.08);
    display:flex;align-items:center;justify-content:center;
    margin-top:2px;
  }
  .goal-list li .check svg{width:13px;height:13px;color:var(--green-dark);}
  .activity-tags{display:flex; flex-wrap:wrap; gap:10px;}
  .activity-tags span{
    padding:10px 18px;
    border-radius:99px;
    background:var(--cream);
    border:1px solid rgba(124,139,122,.25);
    color:var(--green-dark);
    font-size:14px;
    font-weight:600;
    transition:.3s;
  }
  .activity-tags span:hover{background:var(--green-dark); color:var(--cream); border-color:var(--green-dark);}
  .goals-divider{
    width:1px;
    background:rgba(31,58,54,.08);
  }

  /* ===== Initiatives ===== */
  .initiatives{padding:130px 0; background:var(--green-dark); position:relative; overflow:hidden;}
  .initiatives .section-head h2,.initiatives .section-head p{color:var(--cream);}
  .initiatives .section-head p{color:var(--text-on-dark);}
  .init-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
  .init-card{
    background:rgba(242,239,230,.05);
    border:1px solid rgba(242,239,230,.12);
    border-radius:var(--radius-md);
    padding:32px 28px;
    transition:transform .4s var(--ease), background .4s var(--ease);
    position:relative;
  }
  .init-card:hover{transform:translateY(-8px); background:rgba(242,239,230,.09);}
  .init-card .init-num{
    font-size:13px; font-weight:800; letter-spacing:1px;
    color:var(--gold-light);
    margin-bottom:16px;
    display:block;
  }
  .init-card h4{color:var(--cream); font-size:18px; margin-bottom:12px; font-weight:700;}
  .init-card p{color:var(--text-on-dark); font-size:14.5px;}
  .init-foot{display:flex; justify-content:center; margin-top:50px;}

  /* ===== Team ===== */
  .team{padding:130px 0; background:var(--cream-soft);}
  .team-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:26px;
  }
  .team-card{
    background:var(--white);
    border-radius:var(--radius-md);
    overflow:hidden;
    border:1px solid rgba(31,58,54,.07);
    box-shadow:var(--shadow-sm);
    transition:transform .45s var(--ease), box-shadow .45s var(--ease);
  }
  .team-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-md);}
  .team-photo{
    aspect-ratio:1/1;
    overflow:hidden;
    position:relative;
  }
  .team-photo img{width:100%;height:100%;object-fit:cover; transition:transform .6s var(--ease);}
  .team-card:hover .team-photo img{transform:scale(1.08);}
  .team-photo::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(23,44,40,.55), transparent 45%);
  }
  .team-info{padding:20px 18px 24px; text-align:center;}
  .team-info h4{font-size:16.5px; color:var(--green-dark); margin-bottom:6px;}
  .team-info .role{
    display:inline-block;
    font-size:12px;
    font-weight:700;
    color:var(--gold);
    background:rgba(200,162,93,.1);
    padding:5px 14px;
    border-radius:99px;
  }
  .team-card.wide{grid-column:span 1;}

  /* ===== Partners ===== */
  .partners{padding:120px 0; background:var(--white);}
  .partners-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
  }
  .partner-card{
    border:1.5px dashed rgba(124,139,122,.4);
    border-radius:var(--radius-md);
    padding:34px 22px;
    text-align:center;
    transition:.4s var(--ease);
  }
  .partner-card:hover{border-color:var(--gold); border-style:solid; background:var(--cream-soft); transform:translateY(-6px);}
  .partner-card .icon-circle{
    width:56px;height:56px;
    border-radius:50%;
    background:var(--cream);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 18px;
  }
  .partner-card .icon-circle svg{width:26px;height:26px;color:var(--green-dark);}
  .partner-card h4{font-size:15.5px; color:var(--green-dark); margin-bottom:8px;}
  .partner-card p{font-size:12.5px; color:var(--text-soft);}

  /* ===== CTA ===== */
  .cta{
    padding:110px 0;
    position:relative;
    background:linear-gradient(120deg, var(--green-dark-2), var(--green-dark));
    overflow:hidden;
  }
  .cta-box{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:680px;
    margin-inline:auto;
  }
  .cta-box .eyebrow{margin-inline:auto;}
  .cta-box h2{color:var(--cream); font-size:clamp(28px,3.6vw,42px); margin-bottom:18px;}
  .cta-box p{color:var(--text-on-dark); font-size:17px; margin-bottom:38px;}
  .cta-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

  /* ===== Footer ===== */
  footer{
    background:var(--green-dark-2);
    color:var(--text-on-dark);
    padding:80px 0 0;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.4fr .8fr .8fr 1fr;
    gap:40px;
    padding-bottom:60px;
    border-bottom:1px solid rgba(242,239,230,.1);
  }
  .footer-brand .brand{margin-bottom:18px;}
  .footer-brand .brand-mark{width:52px; height:52px;}
  .footer-brand img{height:32px;}
  .footer-brand .brand-text strong{color:var(--cream); text-shadow:none;}
  .footer-brand p{font-size:14.5px; max-width:300px; margin-bottom:20px; line-height:1.8;}
  .social-row{display:flex; gap:10px;}
  .social-row a{
    width:38px;height:38px;
    border-radius:50%;
    border:1px solid rgba(242,239,230,.2);
    display:flex; align-items:center; justify-content:center;
    transition:.3s;
  }
  .social-row a:hover{background:var(--gold); border-color:var(--gold); color:var(--green-dark-2);}
  .social-row svg{width:16px;height:16px;}
  .footer-col h5{
    color:var(--cream);
    font-size:15.5px;
    margin-bottom:22px;
    font-weight:700;
  }
  .footer-col li{margin-bottom:13px;}
  .footer-col a{font-size:14.5px; transition:.3s; color:var(--text-on-dark);}
  .footer-col a:hover{color:var(--gold); padding-right:4px;}
  .footer-col .contact-item{display:flex; gap:10px; align-items:flex-start; font-size:14px; margin-bottom:16px;}
  .footer-col .contact-item svg{width:17px;height:17px; color:var(--gold); flex:0 0 auto; margin-top:2px;}
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center;
    padding:26px 0; font-size:13px; color:rgba(242,239,230,.45);
    flex-wrap:wrap; gap:10px;
  }
  .footer-bottom a{color:rgba(242,239,230,.6);}

  /* reveal animations */
  [data-reveal]{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .9s var(--ease), transform .9s var(--ease);
  }
  [data-reveal].in{opacity:1; transform:translateY(0);}
  [data-reveal="left"]{transform:translateX(-32px);}
  [data-reveal="left"].in{transform:translateX(0);}
  [data-reveal="right"]{transform:translateX(32px);}
  [data-reveal="right"].in{transform:translateX(0);}

  /* ===== Nav active state ===== */
  nav.main-nav a.active{background:var(--gold); color:var(--green-dark-2);}
  .mobile-nav a.active{color:var(--gold);}

  /* ===== Page banner (inner pages) ===== */
  .page-banner{
    position:relative;
    overflow:hidden;
    padding:168px 0 90px;
    background:radial-gradient(120% 160% at 80% 0%, #234943 0%, var(--green-dark) 45%, var(--green-dark-2) 100%);
    color:var(--cream);
    text-align:center;
  }
  .page-banner .container{position:relative; z-index:2;}
  .breadcrumb{
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-size:13.5px; color:var(--text-on-dark);
    margin-bottom:20px;
  }
  .breadcrumb a{color:var(--gold-light); font-weight:600;}
  .breadcrumb a:hover{text-decoration:underline;}
  .breadcrumb .sep{color:rgba(242,239,230,.4);}
  .page-banner h1{
    color:var(--cream);
    font-size:clamp(32px,4.4vw,52px);
    margin-bottom:16px;
  }
  .page-banner p{
    color:var(--text-on-dark);
    font-size:17px;
    max-width:620px;
    margin-inline:auto;
  }

  /* ===== Quick links (homepage teaser cards) ===== */
  .quick-links{padding:0 0 130px; background:var(--cream-soft);}
  .quick-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
  .quick-card{
    background:var(--white);
    border:1px solid rgba(31,58,54,.07);
    border-radius:var(--radius-md);
    padding:34px 28px;
    box-shadow:var(--shadow-sm);
    transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .quick-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-md); border-color:rgba(200,162,93,.4);}
  .quick-card .icon-circle{
    width:54px;height:54px;
    border-radius:16px;
    background:var(--cream);
    display:flex;align-items:center;justify-content:center;
  }
  .quick-card .icon-circle svg{width:25px;height:25px;color:var(--green-dark);}
  .quick-card h3{font-size:19px;}
  .quick-card p{color:var(--text-soft); font-size:14.5px; flex:1;}
  .quick-card .quick-link{
    display:inline-flex; align-items:center; gap:8px;
    font-size:14px; font-weight:700; color:var(--gold);
    transition:gap .3s;
  }
  .quick-card:hover .quick-link{gap:12px;}
  .quick-card .quick-link svg{width:16px;height:16px;}

  /* ===== Team detail (team.html) ===== */
  .team-detail-grid{display:flex; flex-direction:column; gap:22px;}
  .team-detail-card{
    background:var(--white);
    border:1px solid rgba(31,58,54,.07);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    padding:36px;
    display:grid;
    grid-template-columns:160px 1fr;
    gap:32px;
    align-items:center;
    transition:box-shadow .4s var(--ease), transform .4s var(--ease);
  }
  .team-detail-card:hover{box-shadow:var(--shadow-md); transform:translateY(-4px);}
  .team-detail-photo{
    width:160px; height:160px;
    border-radius:20px;
    overflow:hidden;
    flex:0 0 auto;
  }
  .team-detail-photo img{width:100%;height:100%;object-fit:cover;}
  .team-detail-body h3{font-size:21px; margin-bottom:8px;}
  .team-detail-body .role{
    display:inline-block;
    font-size:12.5px;
    font-weight:700;
    color:var(--gold);
    background:rgba(200,162,93,.1);
    padding:6px 16px;
    border-radius:99px;
    margin-bottom:18px;
  }
  .team-detail-body ul{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 24px;
  }
  .team-detail-body ul li{
    display:flex; align-items:flex-start; gap:10px;
    font-size:14.5px; color:var(--text-soft);
  }
  .team-detail-body ul li svg{width:15px;height:15px; color:var(--green-olive); flex:0 0 auto; margin-top:4px;}

  /* ===== Initiatives page (phases) ===== */
  .phase-section{padding:90px 0; background:var(--cream-soft);}
  .phase-section.alt{background:var(--white);}
  .phase-section.dark{background:var(--green-dark); }
  .phase-section.dark .section-head h2, .phase-section.dark .section-head p{color:var(--cream);}
  .phase-section.dark .section-head p{color:var(--text-on-dark);}
  .phase-badge{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; font-weight:700;
    padding:7px 16px; border-radius:99px;
    margin-bottom:16px;
  }
  .phase-badge.p1{background:rgba(200,162,93,.14); color:var(--gold);}
  .phase-badge.p2{background:rgba(124,139,122,.16); color:var(--green-olive);}
  .phase-badge.p3{background:rgba(31,58,54,.08); color:var(--green-dark);}
  .phase-badge.p4{background:rgba(43,43,43,.08); color:var(--charcoal);}
  .light-init-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
  }
  .light-init-card{
    background:var(--white);
    border:1px solid rgba(31,58,54,.07);
    border-radius:var(--radius-md);
    padding:28px 24px;
    box-shadow:var(--shadow-sm);
    transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  }
  .light-init-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
  .light-init-card .init-num{font-size:12.5px; font-weight:800; color:var(--gold); letter-spacing:.5px; margin-bottom:12px; display:block;}
  .light-init-card h4{font-size:17px; margin-bottom:10px;}
  .light-init-card p{font-size:14px; color:var(--text-soft);}
  .light-init-card .note{
    display:inline-block; margin-top:14px; font-size:12px; font-weight:700;
    color:var(--green-olive); background:rgba(124,139,122,.1); padding:5px 12px; border-radius:99px;
  }
  .excluded-card{opacity:.7;}
  .excluded-card:hover{opacity:1;}

  /* ===== Contact page ===== */
  .contact-section{padding:100px 0 130px; background:var(--cream-soft);}
  .contact-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:46px;
  }
  .contact-info-card{
    background:var(--green-dark-2);
    border-radius:var(--radius-lg);
    padding:44px 38px;
    color:var(--cream);
  }
  .contact-info-card h3{color:var(--cream); font-size:21px; margin-bottom:22px;}
  .contact-info-card .contact-item{
    display:flex; gap:14px; align-items:flex-start;
    margin-bottom:22px;
    font-size:15px;
    color:var(--text-on-dark);
  }
  .contact-info-card .contact-item .ic{
    width:40px;height:40px; border-radius:12px; flex:0 0 auto;
    background:rgba(200,162,93,.14);
    display:flex; align-items:center; justify-content:center;
  }
  .contact-info-card .contact-item .ic svg{width:18px;height:18px; color:var(--gold);}
  .contact-info-card .social-row{margin-top:30px;}
  .contact-form{
    background:var(--white);
    border:1px solid rgba(31,58,54,.07);
    border-radius:var(--radius-lg);
    padding:44px 38px;
    box-shadow:var(--shadow-sm);
  }
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px;}
  .form-group{display:flex; flex-direction:column; gap:8px; margin-bottom:18px;}
  .form-group label{font-size:14px; font-weight:700; color:var(--green-dark);}
  .form-group input, .form-group select, .form-group textarea{
    border:1.5px solid rgba(31,58,54,.12);
    border-radius:12px;
    padding:13px 16px;
    font-family:'Cairo', sans-serif;
    font-size:14.5px;
    color:var(--charcoal);
    background:var(--cream-soft);
    transition:border-color .3s;
  }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus{
    outline:none; border-color:var(--gold);
  }
  .form-group textarea{resize:vertical; min-height:120px;}
  .hp-field{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
  .form-alert{
    padding:14px 18px;
    border-radius:12px;
    font-size:14px;
    font-weight:600;
    margin-bottom:22px;
  }
  .form-alert.success{background:rgba(124,139,122,.14); color:var(--green-dark); border:1px solid rgba(124,139,122,.35);}
  .form-alert.error{background:rgba(178,60,50,.1); color:#a33327; border:1px solid rgba(178,60,50,.3);}

  /* ===== Data table (partners / stakeholders) ===== */
  .table-wrap{
    background:var(--white);
    border:1px solid rgba(31,58,54,.07);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    overflow:hidden;
    overflow-x:auto;
  }
  table.data-table{width:100%; border-collapse:collapse; min-width:760px;}
  table.data-table th{
    background:var(--green-dark);
    color:var(--cream);
    font-size:14px;
    font-weight:700;
    padding:18px 20px;
    text-align:right;
    white-space:nowrap;
  }
  table.data-table td{
    padding:18px 20px;
    font-size:14px;
    color:var(--text-soft);
    border-bottom:1px solid rgba(31,58,54,.06);
  }
  table.data-table tr:last-child td{border-bottom:none;}
  table.data-table tr:hover td{background:var(--cream-soft);}
  table.data-table td.strong{color:var(--green-dark); font-weight:700;}

  /* ===== LTR (English) mirror overrides ===== */
  html[dir="ltr"] table.data-table th{text-align:left;}
  html[dir="ltr"] .mobile-close{left:auto; right:26px;}
  html[dir="ltr"] .about-visual .quote-mark{right:auto; left:34px;}
  html[dir="ltr"] .footer-col a:hover{padding-right:0; padding-left:4px;}
  html[dir="ltr"] .vm-card .tag{left:auto; right:36px;}

  /* ===== Responsive ===== */
  @media (max-width:1080px){
    .hero-grid{grid-template-columns:1fr; text-align:center;}
    .hero-content p{margin-inline:auto;}
    .hero-actions{justify-content:center;}
    .hero-stats{justify-content:center;}
    .hero-visual{margin-top:30px;}
    .about-grid{grid-template-columns:1fr;}
    .about-visual{max-width:460px; margin-inline:auto;}
    .values-grid{grid-template-columns:repeat(3,1fr);}
    .init-grid{grid-template-columns:repeat(2,1fr);}
    .team-grid{grid-template-columns:repeat(3,1fr);}
    .partners-grid{grid-template-columns:repeat(2,1fr);}
    .goals-grid{grid-template-columns:1fr; gap:40px;}
    .goals-divider{display:none;}
    .footer-grid{grid-template-columns:1fr 1fr; row-gap:40px;}
    .quick-grid{grid-template-columns:repeat(2,1fr);}
    .light-init-grid{grid-template-columns:repeat(2,1fr);}
    .contact-grid{grid-template-columns:1fr;}
    .team-detail-card{grid-template-columns:130px 1fr;}
  }
  @media (max-width:860px){
    nav.main-nav{display:none;}
    .burger{display:flex; flex-shrink:0;}
    .stat-row{grid-template-columns:repeat(2,1fr);}
    .values-grid{grid-template-columns:repeat(2,1fr);}

    /* Header: with the nav hidden, the logo text, language toggle and
       "Join Us" button were all fighting for space in one row and
       overflowing past the right edge of the screen. Shrink the logo
       further, truncate the brand name to a single line instead of
       letting it wrap to three, drop the subtitle line, hide "Join Us"
       (Contact is still reachable from the mobile menu), and reduce the
       language toggle to an icon-only pill so nothing can collide. */
    header .container{gap:8px;}
    .brand{gap:6px; min-width:0; flex:1 1 auto; overflow:hidden;}
    .brand-mark{flex:0 0 auto;}
    .brand-mark img, .brand img{height:28px;}
    .brand-text{min-width:0; overflow:hidden;}
    .brand-text strong{
      font-size:14px;
      line-height:1.2;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      display:block;
      /* Scales with viewport instead of a flat cap: on real phones (375px+)
         this comfortably fits the full brand name with no truncation; only
         the narrowest ~320px devices fall back to the 150px floor, which is
         the largest width that still can't collide with the lang toggle +
         burger on the right (measured: they + padding + logo eat ~168px). */
      max-width:clamp(150px, calc(100vw - 168px), 220px);
    }
    .brand-text span{display:none;}
    .header-actions{gap:6px; flex-shrink:0;}
    .header-actions .btn-primary{display:none;}
    .lang-toggle{padding:0; width:34px; height:34px; justify-content:center; border-radius:50%; font-size:0;}
    .lang-toggle svg{width:15px;height:15px;flex-shrink:0;}
    .burger{width:36px;height:36px;}
  }
  @media (max-width:640px){
    .container{padding-inline:18px;}

    /* Hero: drop the fixed 100vh so the section hugs its content instead
       of leaving a tall empty gap on short mobile viewports. */
    .hero{padding:130px 0 70px; min-height:auto;}
    .hero-content h1{font-size:clamp(30px,8vw,40px);}
    .hero-content p{font-size:16px;}
    .hero-stats{gap:22px;}
    .hero-actions .btn{flex:1 1 auto; justify-content:center;}

    /* Section spacing: the desktop 110-130px top/bottom padding leaves a
       huge amount of empty space stacked between sections on a phone. */
    .about{padding:70px 0;}
    .vm{padding:70px 0;}
    .values{padding:70px 0;}
    .goals{padding:0 0 70px;}
    .initiatives{padding:70px 0;}
    .team{padding:70px 0;}
    .partners{padding:70px 0;}
    .cta{padding:70px 0;}
    .quick-links{padding:0 0 70px;}
    .phase-section{padding:56px 0;}
    .contact-section{padding:56px 0 70px;}
    footer{padding:56px 0 0;}
    .section-head{margin-bottom:36px;}

    /* Card padding: tighten so text doesn't feel cramped against a
       narrower container. */
    .vm-card{padding:30px 24px;}
    .quick-card{padding:26px 22px;}
    .init-card{padding:26px 22px;}
    .light-init-card{padding:22px 18px;}
    .stat-row{gap:12px;}

    .init-grid{grid-template-columns:1fr;}
    .team-grid{grid-template-columns:repeat(2,1fr);}
    .partners-grid{grid-template-columns:1fr;}
    .values-grid{grid-template-columns:1fr;}
    .goals-grid{padding:32px 22px;}
    .footer-grid{grid-template-columns:1fr;}
    .footer-bottom{flex-direction:column; align-items:flex-start;}
    .hero-logo-card{padding:36px 22px;}
    .hero-logo-card .badge-circle img{width:130px;}
    .quick-grid{grid-template-columns:1fr;}
    .light-init-grid{grid-template-columns:1fr;}
    .page-banner{padding:130px 0 60px;}
    .team-detail-card{grid-template-columns:1fr; text-align:center; padding:28px;}
    .team-detail-photo{margin-inline:auto;}
    .team-detail-body ul{grid-template-columns:1fr; text-align:right;}
    html[dir="ltr"] .team-detail-body ul{text-align:left;}
    .form-row{grid-template-columns:1fr;}
    .contact-form, .contact-info-card{padding:30px 22px;}

    /* Prevent iOS Safari from auto-zooming the page when a form field
       is focused (it does this for any input with font-size under 16px). */
    .form-group input, .form-group select, .form-group textarea{font-size:16px;}
  }

  @media (max-width:400px){
    .eyebrow{font-size:12.5px; padding:7px 14px;}
    .btn{padding:13px 22px; font-size:14.5px;}
    .stat-row{grid-template-columns:repeat(2,1fr);}
    .hero-stats{gap:18px 26px;}
    .hero-logo-card{padding:30px 18px;}
    .hero-logo-card img, .hero-logo-card .badge-circle img{width:110px;}
    .vm-card{padding:26px 20px;}
  }