/* ============================================================
   ROOT TO ROUTE — SHARED DESIGN SYSTEM
   One CSS file used by every page (index, about-us, services,
   employment-training, contact). Keep all pages visually
   consistent by editing colors/fonts/components here only.
   ------------------------------------------------------------
   Sections in this file:
   1. Tokens (colors, radius, shadow)
   2. Base / Typography
   3. Buttons, Eyebrow, Icons
   4. Header / Nav / Mobile menu
   5. Hero (homepage + inner-page variant)
   6. Section generic + reveal animation
   7. Component blocks (cards, timeline, news, recognitions, etc.)
   8. Footer
   9. Floating UN badge
   10. Responsive breakpoints
   ============================================================ */

  :root{
    --gold:#FAB732;
    --gold-dark:#C87F0A;
    --gold-light:#FFD98A;
    --navy:#1B2A4A;
    --coral:#3B5580;      /* was coral — now mid navy */
    --teal:#0F1B30;       /* was teal — now deep navy */
    --purple:#E89A0E;     /* was purple — now dark gold */
    --cream:#FFF8EC;
    --cream-2:#FFF1D6;
    --white:#FFFFFF;
    --radius:28px;
    --shadow:0 14px 34px rgba(27,42,74,.10);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Nunito',sans-serif;
    background:var(--cream);
    color:var(--navy);
    overflow-x:hidden;
    line-height:1.7;
    font-size:17px;
  }
  /* All major headings share one consistent, bold, corporate-friendly style */
  .display-heading{
    font-family:'Questrial','Poiret One',sans-serif;
    font-weight:700;
    color:var(--navy);
    letter-spacing:-.2px;
    line-height:1.2;
    font-size:clamp(1.9rem, 4vw, 2.6rem);
  }
  /* Everything else (subheads, card titles, nav, body) uses Questrial (Poiret One fallback) / Nunito for readability */
  h1,h2,h3,h4{font-family:'Questrial','Poiret One',sans-serif;font-weight:700;color:var(--navy);}
  a{text-decoration:none;color:inherit;}
  img{max-width:100%;display:block;}
  .container{max-width:1180px;margin:0 auto;padding:0 24px;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'Questrial','Poiret One',sans-serif;font-weight:600;font-size:.85rem;
    color:var(--gold-dark);background:var(--cream-2);
    padding:6px 16px;border-radius:999px;letter-spacing:.5px;
    text-transform:uppercase;margin-bottom:14px;
  }
  .btn{
    display:inline-block;font-family:'Questrial','Poiret One',sans-serif;font-weight:700;
    padding:14px 30px;border-radius:999px;font-size:1rem;
    transition:transform .2s ease, box-shadow .2s ease;
    box-shadow:0 8px 20px rgba(27,42,74,.14);
  }
  .btn:hover{transform:translateY(-3px);}
  .btn-primary{background:var(--gold);color:var(--navy);box-shadow:0 8px 20px rgba(27,42,74,.18);}
  .btn-primary:hover{box-shadow:0 12px 24px rgba(250,183,50,.45);}
  .btn-outline{background:transparent;border:2px solid var(--navy);color:var(--navy);}

  /* icon style: solid bold, single color */
  .icon-solid{
    width:30px;height:30px;display:inline-block;
    -webkit-mask-size:contain;mask-size:contain;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:center;mask-position:center;
    background:#fff;
  }

  /* ===== NAV v5: white pill nav, logo left / nav center / CTA right ===== */
  header{
    position:sticky;top:0;z-index:200;
    background:rgba(255,248,234,.97);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(27,42,74,.08);
    width:100%;
    transition:box-shadow .3s ease;
  }
  header.shrink{box-shadow:0 6px 20px rgba(27,42,74,.1);}
  header.shrink nav{padding-top:8px;padding-bottom:8px;}
  header.shrink .logo img{height:44px;}
  nav{transition:padding .3s ease;}
  .logo img{transition:height .3s ease;}
  nav{
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;
    padding:14px 32px;max-width:1320px;margin:0 auto;
  }
  .logo{justify-self:start;display:flex;flex-direction:column;gap:2px;}
  .logo-tagline{
    font-family:'Questrial','Poiret One',sans-serif;font-weight:700;
    font-size:.78rem;letter-spacing:.4px;color:var(--gold-dark);
    white-space:nowrap;
    transition:opacity .3s ease, max-height .3s ease, margin .3s ease;
    max-height:20px;overflow:hidden;
  }
  header.shrink .logo-tagline{opacity:0;max-height:0;}
  .logo img{height:64px;width:auto;}
  .nav-links{
    justify-self:center;
    display:flex;align-items:center;gap:4px;
    background:#fff;border-radius:999px;padding:6px;
    box-shadow:0 8px 20px rgba(27,42,74,.08);
  }
  .nav-links a{
    font-family:'Questrial','Poiret One',sans-serif;font-weight:700;font-size:.92rem;
    color:var(--navy);padding:10px 20px;border-radius:999px;
    transition:background .2s ease, color .2s ease;
    white-space:nowrap;
  }
  .nav-links a:hover{color:var(--gold-dark);}
  .nav-links a.active{background:var(--gold);color:var(--navy);}
  .nav-links a.active:hover{color:var(--navy);}
  .nav-cta{
    justify-self:end;
    font-family:'Questrial','Poiret One',sans-serif;font-weight:700;background:var(--gold);color:var(--navy);
    padding:11px 24px;border-radius:999px;font-size:.92rem;
    box-shadow:0 8px 18px rgba(27,42,74,.28);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .nav-cta:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(250,183,50,.5);}
  .nav-toggle{
    display:none;width:44px;height:44px;border-radius:12px;
    background:var(--cream-2);border:none;cursor:pointer;color:var(--navy);
    align-items:center;justify-content:center;font-size:1.3rem;
    justify-self:end;
  }
  @media(max-width:980px){
    nav{grid-template-columns:auto auto;padding:12px 20px;}
    .logo img{height:50px;}
    .logo-tagline{font-size:.62rem;letter-spacing:.4px;}
    .nav-links{display:none;}
    .nav-cta{display:none;}
    .nav-toggle{display:flex;}
  }

  /* Mobile menu overlay */
  .mobile-menu{
    position:fixed;top:0;right:-100%;width:78%;max-width:320px;height:100vh;
    background:#fff;z-index:300;box-shadow:-10px 0 40px rgba(0,0,0,.15);
    transition:right .35s ease;padding:30px 26px;
    display:flex;flex-direction:column;gap:6px;
  }
  .mobile-menu.open{right:0;}
  .mobile-menu-close{
    align-self:flex-end;width:40px;height:40px;border-radius:50%;
    background:var(--cream-2);border:none;font-size:1.3rem;color:var(--navy);
    cursor:pointer;margin-bottom:20px;
  }
  .mobile-menu a{
    font-family:'Questrial','Poiret One',sans-serif;font-weight:700;font-size:1.1rem;color:var(--navy);
    padding:14px 10px;border-bottom:1px solid var(--cream-2);
  }
  .mobile-menu a.active{color:var(--gold-dark);}
  .menu-backdrop{
    position:fixed;inset:0;background:rgba(27,42,74,.45);z-index:290;
    opacity:0;visibility:hidden;transition:.3s;
  }
  .menu-backdrop.open{opacity:1;visibility:visible;}

  /* ===== HERO v4: full-height image slider ===== */
  .hero{
    position:relative;height:calc(100vh - 96px);min-height:560px;display:flex;align-items:center;
    overflow:hidden;padding:50px 24px;
  }
  .hero-bg{position:absolute;inset:0;z-index:0;}
  .hero-bg img{width:100%;height:100%;object-fit:cover;display:block;}
  .hero-bg::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(100deg, rgba(27,42,74,.88) 0%, rgba(27,42,74,.68) 38%, rgba(232,154,14,.22) 70%, rgba(250,183,50,.15) 100%);
  }
  .hero .container{position:relative;z-index:3;}
  .hero-inner{max-width:620px;}
  .hero h1{font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.16;margin-bottom:20px;color:#fff;}
  .hero h1 .accent1{color:var(--gold);}
  .hero h1 .accent2{color:var(--teal);}
  .hero h1 .accent3{color:var(--gold-light);}
  .hero .eyebrow{background:#fff;color:var(--navy);font-weight:800;box-shadow:0 8px 20px rgba(0,0,0,.25);}
  .hero p{font-size:1.1rem;color:#e7ecf7;max-width:480px;margin-bottom:32px;}
  .hero-ctas{display:flex;gap:16px;flex-wrap:wrap;}

  .hero-wave{
    position:absolute;bottom:-2px;left:0;width:100%;line-height:0;z-index:2;pointer-events:none;
  }
  .hero-wave svg{width:100%;height:90px;display:block;}

  .hero-deco-ring{
    position:absolute;border:2px dashed rgba(255,255,255,.35);
    border-radius:50%;z-index:2;
  }
  .hero-deco-ring.r1{width:140px;height:140px;top:12%;right:14%;animation:spinSlow 16s linear infinite;}
  .hero-deco-ring.r2{width:80px;height:80px;bottom:30%;right:30%;animation:spinSlow 10s linear infinite reverse;}

  @media(max-width:768px){
    .hero{height:auto;min-height:560px;padding:90px 20px 110px;}
    .hero-deco-ring{display:none;}
  }

  /* ===== SECTION GENERIC ===== */
  section{padding:72px 0;position:relative;}
  .section-head{text-align:center;max-width:680px;margin:0 auto 40px;}
  .section-head h2{font-size:2.5rem;}

  /* WHO WE ARE — tilted scattered photo collage (v2 style) */
  .who{background:var(--white);position:relative;overflow:hidden;}
  #about{background:var(--cream);}
  .who-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
  .who-text h2{font-size:2.3rem;margin-bottom:18px;}
  .who-text p{color:#4a5570;margin-bottom:26px;font-size:1.05rem;}
  .who-photos{position:relative;height:400px;}
  .who-photos .wp{
    position:absolute;box-shadow:0 16px 30px rgba(27,42,74,.18);
    border-radius:18px;border:8px solid #fff;overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .who-photos .wp:hover{transform:scale(1.04) rotate(0deg) !important;box-shadow:0 22px 40px rgba(27,42,74,.28);z-index:10;}
  .who-photos .wp img{width:100%;height:100%;object-fit:cover;display:block;}
  .who-photos .wp-1{width:46%;height:52%;top:0;left:4%;transform:rotate(-6deg);z-index:2;}
  .who-photos .wp-2{width:40%;height:40%;top:6%;right:4%;transform:rotate(6deg);z-index:1;}
  .who-photos .wp-3{width:40%;height:38%;bottom:0;left:12%;transform:rotate(4deg);z-index:3;}
  .who-photos .wp-4{width:32%;height:30%;bottom:4%;right:12%;transform:rotate(-5deg);z-index:2;}
  .who-photos .deco-dot{position:absolute;border-radius:50%;z-index:0;}
  .who-photos .deco-dot.d1{width:90px;height:90px;background:var(--teal);opacity:.22;top:0;right:18%;}
  .who-photos .deco-dot.d2{width:60px;height:60px;background:var(--purple);opacity:.22;bottom:10%;left:0;}

  /* NEWS / UPDATES */
  .news{background:var(--cream-2);}
  .news .eyebrow{background:#fff;box-shadow:0 4px 12px rgba(27,42,74,.06);}
  .news-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;}
  .news-card{
    background:#fff;border-radius:var(--radius);overflow:hidden;
    box-shadow:var(--shadow);transition:transform .3s ease, box-shadow .3s ease;
    display:flex;flex-direction:column;
  }
  .news-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(27,42,74,.16);}
  .news-img{position:relative;height:160px;overflow:hidden;}
  .news-img img{width:100%;height:100%;object-fit:cover;}
  .news-date{
    position:absolute;top:16px;left:16px;background:#fff;color:var(--navy);
    font-family:'Questrial','Poiret One',sans-serif;font-weight:700;font-size:.78rem;
    padding:6px 14px;border-radius:999px;box-shadow:var(--shadow);
  }
  .news-body{padding:28px;flex:1;display:flex;flex-direction:column;}
  .news-tag{
    font-family:'Questrial','Poiret One',sans-serif;font-weight:700;font-size:.75rem;color:var(--coral);
    text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px;
  }
  .news-body h4{font-size:1.2rem;margin-bottom:10px;line-height:1.3;}
  .news-body p{color:#5a6580;font-size:.95rem;margin-bottom:18px;flex:1;}
  .news-link{font-family:'Questrial','Poiret One',sans-serif;font-weight:700;color:var(--teal);font-size:.92rem;display:inline-flex;align-items:center;gap:6px;}

  /* RECOGNITIONS & PARTNERS (elevated, prominent) */
  .recognitions{background:var(--navy);position:relative;overflow:hidden;}
  .recognitions .eyebrow{background:rgba(255,255,255,.12);color:var(--gold);}
  .recognitions .section-head h2{color:#fff;}
  .recognitions .section-head p{color:#cfd6e8;}
  .rec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:36px;}
  .rec-card{
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
    border-radius:24px;padding:30px 20px;text-align:center;
    transition:transform .3s ease, background .3s ease;
  }
  .rec-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.12);}
  .rec-logo{
    height:56px;width:auto;min-width:56px;max-width:150px;
    border-radius:14px;margin:0 auto 18px;padding:6px 12px;
    background:#fff;display:inline-flex;align-items:center;justify-content:center;
    box-shadow:0 10px 24px rgba(0,0,0,.25);
  }
  .rec-logo img{height:100%;width:auto;max-width:100%;object-fit:contain;}
  .rec-card h4{color:#fff;font-size:1rem;line-height:1.35;}
  .partner-strip{
    display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:36px;
    padding-top:30px;border-top:1px solid rgba(255,255,255,.12);
  }
  .partner-strip img{height:38px;width:auto;opacity:.65;filter:brightness(0) invert(1);}

  /* UN FEATURE SECTION */
  .un-feature{
    background:linear-gradient(120deg, var(--cream-2) 0%, var(--cream) 100%);
    position:relative;overflow:hidden;
  }
  .un-feature .eyebrow{background:#fff;color:var(--gold-dark);}
  .un-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
  .un-text h2{color:var(--navy);font-size:clamp(1.8rem,3.6vw,2.4rem);margin-bottom:18px;}
  .un-text p{color:#4a5570;font-size:1.05rem;margin-bottom:16px;line-height:1.7;}
  .un-text p.emphasis{color:var(--navy);font-weight:700;font-family:'Questrial','Poiret One',sans-serif;font-size:1.1rem;}
  .un-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:26px;}
  .un-ctas .btn-primary{background:var(--navy);color:#fff;}
  .un-ctas .btn-primary:hover{box-shadow:0 12px 24px rgba(27,42,74,.35);}
  .btn-pdf{background:#fff;color:var(--navy);border:2px solid var(--navy);}
  .btn-pdf:hover{box-shadow:0 12px 24px rgba(27,42,74,.2);}
  .un-video{
    position:relative;border-radius:28px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.4);
    aspect-ratio:16/10;
  }
  .un-video img{width:100%;height:100%;object-fit:cover;}
  .un-video::after{content:"";position:absolute;inset:0;background:rgba(27,42,74,.35);}
  .un-play{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.95);
    display:flex;align-items:center;justify-content:center;z-index:2;
    box-shadow:0 14px 30px rgba(0,0,0,.4);
  }
  .un-play svg{margin-left:4px;}
  .un-timestamp{
    position:absolute;bottom:16px;right:16px;z-index:2;
    background:rgba(0,0,0,.6);color:#fff;font-family:'Questrial','Poiret One',sans-serif;font-weight:700;
    font-size:.8rem;padding:6px 14px;border-radius:999px;
  }
  .services{background:var(--cream-2);color:var(--navy);}
  .services .eyebrow{background:#fff;color:var(--gold-dark);}
  .services .section-head h2{color:var(--navy);}
  .services .section-head p{color:#5a6580 !important;}
  .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .service-card{
    background:#fff;border-radius:var(--radius);
    padding:34px 24px;text-align:center;border:1px solid rgba(27,42,74,.08);
    box-shadow:0 10px 26px rgba(27,42,74,.06);
    transition:.25s;
  }
  .service-card:hover{background:var(--gold);transform:translateY(-6px);border-color:var(--gold);box-shadow:0 16px 32px rgba(250,183,50,.3);}
  .service-card:hover h4, .service-card:hover p{color:var(--navy);}
  .service-icon{
    width:64px;height:64px;border-radius:50%;margin:0 auto 18px;
    display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:#fff;
  }
  .service-card:nth-child(1) .service-icon{background:var(--coral);}
  .service-card:nth-child(2) .service-icon{background:var(--teal);}
  .service-card:nth-child(3) .service-icon{background:var(--purple);}
  .service-card:nth-child(4) .service-icon{background:var(--navy);}
  .service-card:nth-child(5) .service-icon{background:var(--gold-dark);}
  .service-card:nth-child(6) .service-icon{background:var(--navy);}
  .service-card h4{color:var(--navy);font-size:1.08rem;margin-bottom:8px;}
  .service-card p{font-size:.88rem;color:#5a6580;}

  /* MISSION & VISION */
  .mission{background:var(--cream-2);}
  .mission .eyebrow{background:#fff;box-shadow:0 4px 12px rgba(27,42,74,.06);}
  .mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  .mission-card{
    background:#fff;border-radius:var(--radius);padding:34px;
    box-shadow:var(--shadow);
  }
  .mission-card h4{font-size:1.15rem;margin-bottom:10px;color:var(--coral);}
  .mission-card p{font-size:.96rem;color:#5a6580;}
  .core-values{
    grid-column:1/-1;background:var(--navy);border-radius:var(--radius);
    padding:40px 34px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  }
  .core-value-item{
    display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  }
  .core-value-icon{
    width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  .core-value-item:nth-child(1) .core-value-icon{background:var(--coral);}
  .core-value-item:nth-child(2) .core-value-icon{background:var(--teal);}
  .core-value-item:nth-child(3) .core-value-icon{background:var(--gold);}
  .core-value-item:nth-child(4) .core-value-icon{background:var(--purple);}
  .core-value-item span{
    font-family:'Questrial','Poiret One',sans-serif;font-weight:700;color:#fff;font-size:.95rem;
  }

  /* HOW WE WORK — horizontal connected timeline */
  .how{background:var(--navy);position:relative;overflow:hidden;padding:78px 0;}
  .how .eyebrow{background:rgba(255,255,255,.12);color:var(--gold);}
  .how .section-head h2{color:#fff;}
  .how .section-head p{color:#cfd6e8;}
  .timeline{
    position:relative;display:grid;grid-template-columns:repeat(3,1fr);
    gap:30px;margin-top:50px;
  }
  .timeline::before{
    content:"";position:absolute;top:38px;left:12%;right:12%;height:2px;
    background:repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 10px, transparent 10px 20px);
    z-index:0;
  }
  .timeline-step{position:relative;z-index:1;text-align:center;}
  .timeline-num{
    width:76px;height:76px;border-radius:50%;margin:0 auto 22px;
    display:flex;align-items:center;justify-content:center;
    font-family:'Questrial','Poiret One',sans-serif;font-weight:800;font-size:1.6rem;color:#fff;
    box-shadow:0 14px 30px rgba(0,0,0,.3);border:5px solid var(--navy);
  }
  .timeline-step:nth-child(1) .timeline-num{background:var(--teal);}
  .timeline-step:nth-child(2) .timeline-num{background:var(--purple);}
  .timeline-step:nth-child(3) .timeline-num{background:var(--coral);}
  .timeline-step h4{font-family:'Questrial','Poiret One',sans-serif;font-weight:800;color:#fff;font-size:1.25rem;margin-bottom:10px;}
  .timeline-step p{color:#cfd6e8;font-size:1rem;max-width:280px;margin:0 auto;line-height:1.65;}
  .how-cta{text-align:center;margin-top:46px;}

  /* BELIEFS */
  .beliefs{background:var(--cream);position:relative;overflow:hidden;}
  .beliefs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
  .gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
  .belief-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
  .belief-card img{height:200px;width:100%;object-fit:cover;}
  .belief-card .body{padding:26px;}
  .belief-card h4{margin-bottom:10px;font-size:1.15rem;}
  .belief-card p{color:#5a6580;font-size:.94rem;}

  /* PARTNERS */
  .partners{background:#fff;}
  .p-grid{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;}
  .p-grid img{height:42px;width:auto;object-fit:contain;opacity:.7;filter:grayscale(40%);}

  /* CTA */
  .cta{
    background:linear-gradient(120deg,var(--coral),var(--purple));
    color:#fff;text-align:center;border-radius:40px;margin:0 24px;
    padding:70px 24px;position:relative;overflow:hidden;
  }
  .cta h2{color:#fff;font-size:2.3rem;margin-bottom:14px;}
  .cta p{opacity:.95;margin-bottom:30px;font-size:1.05rem;}
  .cta-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
  .cta .btn-outline{border-color:#fff;color:#fff;}
  .cta .btn-primary{background:#fff;color:var(--coral);}

  /* FOOTER */
  footer{background:var(--navy);color:#cfd6e8;padding:70px 0 30px;margin-top:60px;}
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:50px;margin-bottom:50px;}
  .footer-logo img{height:46px;width:auto;margin-bottom:14px;}
  footer h4{color:#fff;font-family:'Questrial','Poiret One',sans-serif;margin-bottom:18px;font-size:1.05rem;}
  footer ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
  footer ul a{color:#cfd6e8;font-size:.94rem;transition:.2s;}
  footer ul a:hover{color:var(--gold);}
  footer p{font-size:.92rem;max-width:280px;}
  .footer-social{display:flex;gap:12px;margin-top:18px;}
  .footer-social a{
    width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);
    display:flex;align-items:center;justify-content:center;color:#fff;
  }
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,.1);padding-top:24px;
    text-align:center;font-size:.85rem;color:#8b96b5;
  }

  /* RESPONSIVE */
  /* Floating persistent UN conference badge */
  .float-badge{
    position:fixed;bottom:20px;right:20px;z-index:250;
    display:flex;align-items:center;gap:9px;
    background:#fff;color:var(--navy);
    padding:8px 12px;border-radius:999px;
    border:2px solid var(--gold);
    box-shadow:0 12px 26px rgba(27,42,74,.22);
    max-width:270px;
    animation:float 4.5s ease-in-out infinite;
    transition:opacity .3s ease, transform .3s ease;
  }
  .float-badge.hidden{opacity:0;pointer-events:none;transform:translateY(20px);}
  .float-badge .fb-icon{
    width:28px;height:28px;border-radius:50%;background:var(--gold);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .float-badge .fb-text{display:flex;flex-direction:column;line-height:1.2;}
  .float-badge .fb-text strong{font-family:'Questrial','Poiret One',sans-serif;font-weight:700;font-size:.76rem;color:var(--navy);}
  .float-badge .fb-text span{font-size:.68rem;color:#5a6580;}
  .float-badge .fb-close{
    background:var(--cream-2);border:none;color:var(--navy);
    width:19px;height:19px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    font-size:.68rem;cursor:pointer;margin-left:1px;
  }
  .float-badge .fb-close:hover{background:var(--gold);color:var(--navy);}
  @media(max-width:600px){
    .float-badge{
      bottom:14px;right:14px;left:14px;max-width:none;
      padding:9px 12px;
    }
  }
  /* ===== Decorative small elements (anti-corporate touches) ===== */
  .squiggle{display:block;margin:6px auto 0;width:80px;}
  .dot-pattern{
    position:absolute;width:120px;height:120px;
    background-image:radial-gradient(var(--gold) 2px, transparent 2.5px);
    background-size:16px 16px;opacity:.35;z-index:0;pointer-events:none;
  }
  .float-shape{position:absolute;z-index:0;pointer-events:none;opacity:.85;}
  .float-shape.spin-slow{animation:spinSlow 14s linear infinite;}
  @keyframes spinSlow{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
  .float-shape.bob{animation:float 5s ease-in-out infinite;}

  /* Parallax section */
  .parallax-section{
    position:relative;min-height:420px;display:flex;align-items:center;justify-content:center;
    background-image:url('https://placehold.co/1600x800/1B2A4A/1B2A4A?text=+');
    background-size:cover;background-position:center;background-attachment:fixed;
    overflow:hidden;
  }
  .parallax-section .overlay{
    position:absolute;inset:0;
    background:linear-gradient(135deg, rgba(27,42,74,.82), rgba(232,154,14,.55));
  }
  .parallax-content{position:relative;z-index:2;text-align:center;color:#fff;max-width:680px;padding:0 24px;}
  .parallax-content .display-heading{color:#fff;font-size:2.4rem;margin-bottom:14px;}
  .parallax-content p{font-size:1.08rem;opacity:.95;}
  @media(max-width:768px){
    .parallax-section{background-attachment:scroll;min-height:320px;}
  }
  /* Soft scroll animations */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease;}
  .reveal.in-view{opacity:1;transform:translateY(0);}
  .reveal-stagger > *{opacity:0;transform:translateY(24px);transition:opacity .6s ease, transform .6s ease;}
  .reveal-stagger.in-view > *{opacity:1;transform:translateY(0);}
  .reveal-stagger.in-view > *:nth-child(1){transition-delay:.05s;}
  .reveal-stagger.in-view > *:nth-child(2){transition-delay:.15s;}
  .reveal-stagger.in-view > *:nth-child(3){transition-delay:.25s;}
  .reveal-stagger.in-view > *:nth-child(4){transition-delay:.35s;}
  .badge{animation:float 4s ease-in-out infinite;}
  .badge-2{animation-delay:.6s;}
  .badge-3{animation-delay:1.2s;}
  @keyframes float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
  }
  /* (blob shape now static, ring animation handles motion instead) */
  @media(prefers-reduced-motion: reduce){
    .reveal, .reveal-stagger > *, .badge, .blob-frame{animation:none !important;transition:none !important;opacity:1 !important;transform:none !important;}
  }
  @media(max-width:980px){
    .nav-links{display:none;}
    .nav-toggle{display:flex;}
    .hero .container, .who-grid{grid-template-columns:1fr;}
    .timeline{grid-template-columns:1fr;gap:44px;}
    .timeline::before{display:none;}
    .who-photos{height:320px;}
    .services-grid, .beliefs-grid, .gallery-grid{grid-template-columns:repeat(2,1fr);}
    .mission-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .hero h1{font-size:2.6rem;}
    .news-grid{grid-template-columns:1fr;}
    .rec-grid{grid-template-columns:repeat(2,1fr);}
    .un-wrap{grid-template-columns:1fr;gap:36px;}
  }
  @media(max-width:600px){
    .services-grid, .beliefs-grid, .gallery-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;}
    .hero h1{font-size:2.1rem;}
    section{padding:60px 0;}
    .section-head h2{font-size:1.9rem;}
    .core-values{grid-template-columns:repeat(2,1fr);text-align:center;}
    .who-photos{height:280px;}
    .rec-grid{grid-template-columns:1fr;}
    .partner-strip{gap:24px;}
    .un-ctas{flex-direction:column;align-items:stretch;}
    .un-ctas .btn{text-align:center;}
  }

/* ============================================================
   INNER PAGE COMPONENTS (About / Services / Employment / Contact)
   ============================================================ */

/* Compact page hero banner (replaces homepage slider on inner pages) */
.page-hero{
  position:relative;padding:150px 24px 90px;overflow:hidden;
  background:linear-gradient(120deg, var(--navy) 0%, #24365e 100%);
  text-align:center;
}
.page-hero .float-shape{opacity:.5;}
.page-hero-inner{position:relative;z-index:2;max-width:760px;margin:0 auto;}
.page-hero .eyebrow{background:#fff;color:var(--navy);font-weight:800;}
.page-hero h1{color:#fff;font-size:clamp(2rem,4.6vw,3rem);margin-bottom:16px;}
.page-hero p{color:#d8dee9;font-size:1.08rem;max-width:600px;margin:0 auto;}
.page-hero .breadcrumb{
  display:flex;justify-content:center;gap:8px;margin-bottom:18px;
  font-family:'Questrial','Poiret One',sans-serif;font-weight:600;font-size:.85rem;color:#cfd6e8;
}
.page-hero .breadcrumb a{color:var(--gold);}
.page-hero .breadcrumb span{opacity:.6;}

/* Generic two-column content block (image + text, reusable) */
.content-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.content-split.reverse{direction:rtl;}
.content-split.reverse > *{direction:ltr;}
.content-split img{
  width:100%;border-radius:28px;box-shadow:0 20px 44px rgba(27,42,74,.14);
  aspect-ratio:4/3.2;object-fit:cover;
}
.content-split h2{font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:16px;}
.content-split p{color:#4a5570;font-size:1.02rem;margin-bottom:14px;line-height:1.7;}

/* Detailed service block (Services page) */
.service-detail{
  display:grid;grid-template-columns:.55fr 1fr;gap:40px;align-items:start;
  background:#fff;border-radius:var(--radius);padding:40px;box-shadow:var(--shadow);
  margin-bottom:28px;
}
.service-detail:last-child{margin-bottom:0;}
.service-detail-icon{
  width:70px;height:70px;border-radius:20px;display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.service-detail h3{font-size:1.35rem;margin-bottom:10px;}
.service-detail p{color:#4a5570;font-size:1rem;margin-bottom:14px;line-height:1.7;}
.service-detail-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px;}
.service-detail-meta span{
  font-family:'Questrial','Poiret One',sans-serif;font-weight:700;font-size:.82rem;color:var(--navy);
  background:var(--cream-2);padding:8px 16px;border-radius:999px;
}

/* Process / step list (Employment & Training) */
.process-list{display:flex;flex-direction:column;gap:0;}
.process-item{
  display:grid;grid-template-columns:70px 1fr;gap:24px;padding:28px 0;
  border-bottom:1px solid rgba(27,42,74,.08);
}
.process-item:last-child{border-bottom:none;}
.process-num{
  width:56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:'Questrial','Poiret One',sans-serif;font-weight:800;font-size:1.2rem;
}
.process-item h4{font-size:1.15rem;margin-bottom:6px;}
.process-item p{color:#4a5570;font-size:.98rem;line-height:1.65;}

/* Job/training track cards */
.track-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.track-card{
  background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  transition:transform .3s ease;
}
.track-card:hover{transform:translateY(-6px);}
.track-card img{width:100%;height:170px;object-fit:cover;}
.track-card .body{padding:24px;}
.track-card h4{font-size:1.08rem;margin-bottom:8px;}
.track-card p{color:#5a6580;font-size:.92rem;}

/* Contact page: info cards + form + map */
.contact-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:start;}
.contact-info-card{
  background:#fff;border-radius:var(--radius);padding:34px;box-shadow:var(--shadow);
  margin-bottom:20px;
}
.contact-info-card:last-child{margin-bottom:0;}
.contact-info-row{display:flex;gap:16px;align-items:flex-start;margin-bottom:20px;}
.contact-info-row:last-child{margin-bottom:0;}
.contact-info-icon{
  width:44px;height:44px;border-radius:12px;background:var(--cream-2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.contact-info-row strong{display:block;font-family:'Questrial','Poiret One',sans-serif;font-weight:700;font-size:.95rem;color:var(--navy);margin-bottom:2px;}
.contact-info-row span, .contact-info-row a{font-size:.92rem;color:#5a6580;}

.contact-form{background:#fff;border-radius:var(--radius);padding:40px;box-shadow:var(--shadow);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
.form-group{display:flex;flex-direction:column;gap:8px;}
.form-group.full{grid-column:1/-1;}
.form-group label{font-family:'Questrial','Poiret One',sans-serif;font-weight:700;font-size:.88rem;color:var(--navy);}
.form-group input, .form-group textarea{
  border:2px solid var(--cream-2);border-radius:14px;padding:13px 16px;
  font-family:'Nunito';font-size:.98rem;color:var(--navy);background:var(--cream);
  transition:border-color .2s ease;
}
.form-group input:focus, .form-group textarea:focus{outline:none;border-color:var(--coral);}
.form-group textarea{resize:vertical;min-height:120px;}
.contact-map{
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  margin-top:26px;aspect-ratio:16/9;
}
.contact-map iframe{width:100%;height:100%;border:0;display:block;}

/* Responsive: inner-page components */
@media(max-width:980px){
  .content-split{grid-template-columns:1fr;gap:32px;}
  .content-split.reverse{direction:ltr;}
  .service-detail{grid-template-columns:1fr;}
  .track-grid{grid-template-columns:repeat(2,1fr);}
  .contact-wrap{grid-template-columns:1fr;}
  .page-hero{padding:130px 20px 70px;}
}
@media(max-width:600px){
  .track-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .process-item{grid-template-columns:48px 1fr;gap:16px;}
  .process-num{width:44px;height:44px;font-size:1rem;}
  .service-detail{padding:26px;}
  .contact-form{padding:26px;}
}

/* Service illustration frame */
.service-illustration{
  width:100%;aspect-ratio:4/3.2;border-radius:20px;margin-top:10px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}

/* ============================================================
   ROOT EMPOWER — R2R Model flow (Identify > Build > Connect > Empower)
   ============================================================ */
.model-flow{max-width:720px;margin:0 auto;display:flex;flex-direction:column;align-items:center;}
.model-step{
  width:100%;background:#fff;border-radius:var(--radius);padding:34px 38px;
  box-shadow:var(--shadow);text-align:center;position:relative;
}
.model-step .step-tag{
  display:inline-block;font-family:'Questrial','Poiret One',sans-serif;font-weight:700;
  font-size:.78rem;letter-spacing:1px;text-transform:uppercase;color:#fff;
  background:var(--navy);padding:6px 18px;border-radius:999px;margin-bottom:14px;
}
.model-step h3{font-size:1.35rem;margin-bottom:10px;}
.model-step p{color:#4a5570;font-size:.98rem;line-height:1.65;}
.model-step ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px;}
.model-step ul li{
  background:var(--cream-2);color:var(--navy);font-size:.85rem;font-weight:700;
  font-family:'Questrial','Poiret One',sans-serif;padding:7px 14px;border-radius:999px;
}
.model-arrow{padding:14px 0;color:var(--gold-dark);}
.model-outcomes{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px;
}
.model-outcomes span{
  background:var(--gold);color:var(--navy);font-family:'Questrial','Poiret One',sans-serif;
  font-weight:700;font-size:.88rem;padding:10px 18px;border-radius:999px;
}
.model-outcomes .or{
  color:var(--gold-dark);font-weight:700;font-size:.9rem;align-self:center;
  font-family:'Questrial','Poiret One',sans-serif;
}
.model-philosophy{
  text-align:center;font-family:'Questrial','Poiret One',sans-serif;font-weight:700;
  font-size:1.2rem;color:var(--navy);margin-top:36px;
}
@media(max-width:600px){
  .model-step{padding:26px 22px;}
}

/* ============================================================
   CONTACT FORM 7 SUPPORT (added in Phase 4 — WordPress conversion)
   ------------------------------------------------------------
   CF7's own stylesheet is dequeued (see inc/enqueue.php) so it can't
   alter the approved design. The form reuses the existing .form-row /
   .form-group / .btn.btn-primary classes with no changes needed, since
   CF7's wrapping <span> elements don't break those descendant selectors.
   These few rules are new, minimal, and only cover things the static
   site never needed: CF7 renders the submit button as <input type=submit>
   (not <a class="btn">), and adds validation/response messaging that
   didn't exist before since the static form never actually submitted.
   ============================================================ */
.wpcf7-form input[type="submit"].btn{
  border:none;cursor:pointer;-webkit-appearance:none;appearance:none;
  font-family:'Questrial','Poiret One',sans-serif;
}
.wpcf7-not-valid-tip{
  display:block;margin-top:6px;font-size:.82rem;color:#B5474D;
  font-family:'Nunito',sans-serif;
}
.wpcf7-form-control-wrap{display:block;}
.wpcf7 .wpcf7-response-output{
  margin-top:20px;padding:14px 18px;border-radius:14px;
  font-family:'Nunito',sans-serif;font-size:.94rem;border:2px solid var(--cream-2);
}
.wpcf7-response-output:empty{display:none;border:0;margin:0;padding:0;}
.wpcf7-mail-sent-ok{border-color:var(--gold) !important;background:var(--cream-2);color:var(--navy);}
.wpcf7-validation-errors,.wpcf7-mail-sent-ng,.wpcf7-spam-blocked{
  border-color:#B5474D !important;background:#F1E1E1;color:#7a2e33;
}
/* CF7's screen-reader-only error summary (its own stylesheet normally hides
   this visually — restoring that here since we dequeue that stylesheet).
   Standard visually-hidden pattern: still announced by screen readers,
   never shown on screen. */
.wpcf7-form .screen-reader-response{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}