:root{
  --main-color-light:#EAF6EC;
  --pink:#E8527C;
  --pink-light:#FBE6EC;
  --blue:#4F86C9;
  --blue-light:#E9F1FB;
  --orange:#F0A63D;
  --orange-light:#FDF1E1;
  --gray:#5C6B7A;
  --line:#E4E9ED;
}

/* programs page: headings navy, matching home & about */
h1,h2,h3,h4{color:var(--header-color);}

.wrap{max-width:1120px;margin:0 auto;padding:0 32px;}

/* hero -- same pattern as about.html, for site-wide unity */
.hero{position:relative;min-height:380px;display:flex;align-items:center;color:#fff;
  background:linear-gradient(90deg, rgba(17,60,103,.58) 10%, rgba(17,60,103,.28) 60%, rgba(17,60,103,.1) 100%),
  url('https://heartofcompassionkenya.github.io/heartofcompassionkenya/images/hock202605.jpeg') center/cover;}
.hero-inner{padding:4rem 2.5rem 2.75rem;max-width:1120px;margin:0 auto;width:100%;text-align:left;}
.crumb{color:#BFE1CC;font-weight:500;margin-bottom:.875rem;}
.crumb span{color:#fff;}
.hero h1{color:#fff;line-height:1.2;max-width:620px;}
.hero p{margin-top:.875rem;max-width:560px;color:#E7EEF5;}

/* section shell */
section{padding:3rem 2rem;}
.section-head{text-align:center;max-width:640px;margin:0 auto 2.5rem;}
.rule{display:flex;align-items:center;justify-content:center;gap:.625rem;margin-bottom:.625rem;}
.rule .line{width:34px;height:2px;background:var(--main-color);border-radius:2px;}
.rule .dot{color:var(--main-color);font-size:1rem;}
.section-head p{color:var(--gray);margin-top:.625rem;}
.bg-tint{background:var(--main-color-light);}

/* impact numbers -- minimal inline row, no cards/boxes */
.stat-row{display:flex;max-width:1000px;margin:0 auto;}
.stat-cell{flex:1;text-align:center;padding:0 1.5rem;border-left:1px solid var(--line);}
.stat-cell:first-child{border-left:none;}
.stat-num{font-size:2.75rem;font-weight:700;line-height:1;margin-bottom:.625rem;}
.stat-cell p{color:var(--gray);margin-bottom:0;}
.stat-num.c1{color:var(--dark-green);}
.stat-num.c2{color:var(--blue);}
.stat-num.c3{color:var(--pink);}
.stat-num.c4{color:var(--orange);}
.stat-caption{text-align:center;max-width:640px;margin:2rem auto 0;color:var(--gray);font-style:italic;}

/* three pillars -- zig-zag layout */
.pillar{display:grid;grid-template-columns:1fr 1.3fr;gap:2.5rem;align-items:center;margin-bottom:3rem;}
.pillar:last-child{margin-bottom:0;}
.pillar.reverse{grid-template-columns:1.3fr 1fr;}
.pillar.reverse .pillar-media{order:2;}
.pillar.reverse .pillar-body{order:1;}
.pillar-media{border-radius:16px;overflow:hidden;height:260px;}
.pillar-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.pillar:hover .pillar-media img{transform:scale(1.05);}
.pillar-num{font-weight:700;font-size:1.8rem;margin-bottom:.25rem;}
.pillar-num.n1{color:var(--dark-green);}
.pillar-num.n2{color:var(--pink);}
.pillar-num.n3{color:var(--orange);}
.pillar-body h3{margin-bottom:.875rem;}
.pillar-list{list-style:none;display:flex;flex-direction:column;gap:.625rem;}
.pillar-list li{position:relative;padding-left:1.375rem;color:#333;}
.pillar-list li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;}
.list-green li::before{background:var(--main-color);}
.list-pink li::before{background:var(--pink);}
.list-orange li::before{background:var(--orange);}

/* learning institutions -- full-bleed image cards with overlay */
.facility-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;max-width:1120px;margin:0 auto;}
.facility-card{position:relative;border-radius:16px;overflow:hidden;height:280px;}
.facility-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.facility-card:hover img{transform:scale(1.08);}
.facility-card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(17,60,103,.62) 0%, rgba(17,60,103,.16) 55%, rgba(17,60,103,0) 78%);}
.facility-card .accent{position:absolute;top:0;left:0;right:0;height:4px;z-index:2;}
.facility-card-body{position:absolute;left:0;right:0;bottom:0;padding:1.25rem;z-index:1;}
.facility-card-body h3{color:#fff;margin-bottom:.25rem;}
.facility-card-body p{color:#E7EEF5;margin-bottom:0;}

/* advocacy -- elegant serif quote, single accent color */
.advocacy-section{background:var(--header-color);}
.advocacy-quote{padding:4rem 3rem;text-align:center;max-width:1120px;margin:0 auto;}
.advocacy-quote .mark{font-family:Georgia,'Times New Roman',serif;font-size:4rem;line-height:1;color:var(--main-color);
  display:block;margin-bottom:-.75rem;opacity:.85;}
.advocacy-quote p{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;
  font-size:1.75rem;color:#fff;line-height:1.6;max-width:680px;margin:0 auto 1.5rem;}
.advocacy-quote .rule-line{display:block;width:50px;height:2px;background:var(--main-color);margin:0 auto 1rem;}
.advocacy-quote .label{font-family:Arial,sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:#B9C8D8;font-weight:700;}

/* cta -- same as about/home, kept identical as the site-wide closing band */
.cta{background:var(--main-color);}
.cta-link{display:flex;align-items:center;justify-content:center;gap:.875rem;color:#fff;
  text-decoration:none;font-weight:600;font-size:1.05rem;padding:1.375rem 0;}
.cta-text{position:relative;}
.cta-text::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:#fff;transition:width .3s ease;}
.cta-link:hover .cta-text::after{width:100%;}
.cta-arrow{display:inline-block;transition:transform .3s ease;}
.cta-link:hover .cta-arrow{transform:translateX(6px);}

/* gentle entrance animation -- same as about/home */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
.hero-inner .crumb,.hero-inner h1,.hero-inner p{opacity:0;animation:fadeUp .9s ease forwards;}
.hero-inner h1{animation-delay:.12s;}
.hero-inner p{animation-delay:.26s;}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}
.reveal-group>*{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease;}
.reveal-group.in-view>*{opacity:1;transform:translateY(0);}
.reveal-group.in-view>*:nth-child(1){transition-delay:.05s;}
.reveal-group.in-view>*:nth-child(2){transition-delay:.15s;}
.reveal-group.in-view>*:nth-child(3){transition-delay:.25s;}
.reveal-group.in-view>*:nth-child(4){transition-delay:.35s;}

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

/* ===============================
   RESPONSIVE -- Tablet (<=1024px)
================================ */
@media (max-width: 1024px){
  .hero{height:auto;overflow:visible;}
  .hero-inner{padding:3rem 1.75rem 2.25rem;}
  section{padding:2.5rem 1.5rem;}

  .stat-row{flex-wrap:wrap;}
  .stat-cell{flex:1 1 45%;border-left:none;margin-bottom:1.5rem;}

  .pillar{gap:1.75rem;}
  .pillar-media{height:220px;}
  .pillar-media{height:220px;}

  .facility-grid{grid-template-columns:repeat(2,1fr);}
  .facility-card{height:220px;}

  .advocacy-quote{padding:3rem 2rem;}
  .advocacy-quote p{font-size:1.4rem;}
}

/* ===============================
   RESPONSIVE -- Mobile (<=768px)
================================ */
@media (max-width: 768px){
    .wrap{padding: 0;}
  .hero{height:auto;min-height:320px;overflow:visible;}
  .hero-inner{padding:2.5rem 1.25rem;}
  .hero h1{max-width:100%;}
  .hero p{max-width:100%;}
  
  section{padding:1.5rem .75rem;}
  .section-head{margin:0 auto 1.75rem;}

  .stat-row{flex-direction:column;gap:1.5rem;}
  .stat-cell{border-left:none;padding:0;}

  .pillar,.pillar.reverse{grid-template-columns:1fr;gap:1.5rem;}
  .pillar.reverse .pillar-media{order:1;}
  .pillar.reverse .pillar-body{order:2;}
  .pillar-media{height:190px;}
  .pillar-num{font-size:1.5rem;}

  .facility-row{grid-template-columns:1fr 1fr;gap:1rem;}

  .facility-grid{grid-template-columns:1fr;gap:1rem;}
  .facility-card{height:200px;}

  .advocacy-quote{padding:1rem 1rem;border-radius:14px;}
  .advocacy-quote .mark{font-size:3rem;}
  .advocacy-quote p{font-size:1.15rem;}

  .cta-link{flex-wrap:wrap;text-align:center;padding:1.125rem 1.25rem;}
}