/* =====================================================
   Julius Ogada Foundation (JOFA) — Site styles
   ===================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --blue: #08add3;
  --blue-dark: #067594;
  --green: #2f9e44;
  --green-dark: #1e6b30;
  --gold: #E8B923;
  --dark: #0a0a0a;
  --text: #333;
  --muted: #666;
  --white: #ffffff;
  --magenta: #C93B5E;
  --radius: 14px;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.06);
  --shadow-md: 0 10px 30px rgba(0,0,0,.12);
  --ease: cubic-bezier(.22,.9,.32,1);
}
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", Arial, sans-serif;
  color: var(--text);
  line-height: 1.6;
  background: white;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { max-width:100%; display:block; }
ul { list-style: none; }
.wrap { max-width:1160px; margin:0 auto; padding:0 32px; }
section { position: relative; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-scale { opacity:0; transform: scale(.92); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-scale.in-view { opacity:1; transform: scale(1); }
.stagger.in-view > * { animation: staggerUp .6s var(--ease) both; }
.stagger.in-view > *:nth-child(1){animation-delay:.05s}
.stagger.in-view > *:nth-child(2){animation-delay:.15s}
.stagger.in-view > *:nth-child(3){animation-delay:.25s}
.stagger.in-view > *:nth-child(4){animation-delay:.35s}
.stagger.in-view > *:nth-child(5){animation-delay:.45s}
@keyframes staggerUp { from { opacity:0; transform: translateY(24px);} to { opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-scale, .stagger > * { transition:none !important; animation:none !important; opacity:1 !important; transform:none !important; }
  html { scroll-behavior:auto; }
}

/* ---------- HEADER ---------- */
.site-header {
  height: 84px;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6%;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
  transition: height .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.scrolled { height: 64px; box-shadow: 0 4px 18px rgba(0,0,0,.1); }
.logo { display:flex; align-items:center; gap:10px; }
.logo .badge {
  background: linear-gradient(135deg, var(--blue), var(--green));
  color: white;
  padding: 8px 14px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .5px;
  border-radius: 8px;
  line-height: 1;
}
.logo .word { font-weight: 800; font-size: 15px; color: var(--dark); letter-spacing: -.2px; }
.logo .word small { display:block; font-weight:600; font-size:11px; color: var(--muted); letter-spacing:.3px; }

.nav { display: flex; align-items: center; gap: 30px; font-size: 16px; font-weight: 600; }
.nav a { position:relative; padding: 6px 0; }
.nav a:not(.donate)::after {
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--blue);
  transition: width .25s var(--ease);
}
.nav a:not(.donate):hover::after { width:100%; }
.nav a:hover { color: var(--blue); }
.donate {
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: white;
  padding: 12px 26px;
  border-radius: 30px;
  font-weight: 800;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow: 0 6px 16px rgba(8,173,211,.35);
}
.donate:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 22px rgba(8,173,211,.45); }

.menu-btn {
  display:none; background:none; border:none; cursor:pointer; padding:6px; width:34px; height:26px; position:relative;
}
.menu-btn span { position:absolute; left:0; width:100%; height:3px; background:var(--dark); border-radius:3px; transition: all .3s var(--ease); }
.menu-btn span:nth-child(1){ top:0; }
.menu-btn span:nth-child(2){ top:11px; }
.menu-btn span:nth-child(3){ top:22px; }
.menu-btn.open span:nth-child(1){ top:11px; transform:rotate(45deg); }
.menu-btn.open span:nth-child(2){ opacity:0; }
.menu-btn.open span:nth-child(3){ top:11px; transform:rotate(-45deg); }

/* ---------- HERO ---------- */
.hero {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 60%, var(--green-dark) 130%);
  color: white; padding: 90px 6% 70px; overflow:hidden; position:relative;
}
.hero::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.16), transparent 45%),
              radial-gradient(circle at 10% 90%, rgba(255,255,255,.1), transparent 40%);
  pointer-events:none;
}
.hero-copy { max-width: 1200px; margin:auto; display:grid; grid-template-columns:1.15fr 1fr; gap:56px; align-items:center; position:relative; z-index:1; }
.eyebrow-pill {
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35);
  padding:7px 16px; border-radius:30px; font-size:13px; font-weight:700; letter-spacing:.4px; margin-bottom:22px;
  animation: fadeDown .7s var(--ease) both;
}
.eyebrow-pill .dot { width:8px; height:8px; border-radius:50%; background: var(--gold); box-shadow:0 0 0 0 rgba(232,185,35,.6); animation: pulseDot 1.8s infinite; }
@keyframes pulseDot { 0%{box-shadow:0 0 0 0 rgba(232,185,35,.55);} 70%{box-shadow:0 0 0 9px rgba(232,185,35,0);} 100%{box-shadow:0 0 0 0 rgba(232,185,35,0);} }
@keyframes fadeDown { from{opacity:0; transform:translateY(-12px);} to{opacity:1; transform:translateY(0);} }

.hero h1 { font-family: "Barlow Condensed", Arial, sans-serif; font-size:68px; line-height:1.0; font-weight:800; letter-spacing:-1px;
  animation: fadeUp .8s .1s var(--ease) both; }
.hero p.lead { font-size:19px; font-weight:600; max-width:480px; margin-top:22px; opacity:.96; animation: fadeUp .8s .25s var(--ease) both; }
.hero-ctas { display:flex; gap:16px; flex-wrap:wrap; margin-top:32px; animation: fadeUp .8s .4s var(--ease) both; }
@keyframes fadeUp { from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);} }

.btn-primary { display:inline-block; background:var(--white); color:var(--blue-dark); padding:15px 30px; border-radius:8px; font-weight:800; border:none; cursor:pointer; transition:.25s var(--ease); }
.btn-primary:hover { transform:translateY(-3px); box-shadow: var(--shadow-md); }
.btn-ghost { display:inline-block; border:2px solid rgba(255,255,255,.75); color:white; padding:13px 28px; border-radius:8px; font-weight:800; transition:.25s var(--ease); }
.btn-ghost:hover { background:rgba(255,255,255,.15); transform:translateY(-3px); }

.hero-mini-stats { display:flex; gap:28px; margin-top:40px; flex-wrap:wrap; animation: fadeUp .8s .55s var(--ease) both; }
.hero-mini-stats div { }
.hero-mini-stats .num { font-family:"Barlow Condensed",Arial; font-size:34px; font-weight:800; line-height:1; }
.hero-mini-stats .lbl { font-size:12.5px; opacity:.85; font-weight:600; letter-spacing:.3px; margin-top:4px; }

/* HERO PHOTO — layered collage */
.hero-photo { position:relative; height:420px; }
.hero-photo .ph { position:absolute; border-radius:16px; overflow:hidden; box-shadow: 0 20px 45px rgba(0,0,0,.35); border:4px solid rgba(255,255,255,.25); }
.hero-photo .ph img { width:100%; height:100%; object-fit:cover; }
.hero-photo .ph-1 { width:64%; height:270px; top:0; right:0; animation: floatSlow 6s ease-in-out infinite; }
.hero-photo .ph-2 { width:52%; height:190px; bottom:0; left:0; animation: floatSlow 7s .3s ease-in-out infinite; z-index:2; }
@keyframes floatSlow { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
.hero-badge { position:absolute; left:14px; bottom:-18px; background:white; color:var(--dark); padding:12px 16px; border-radius:12px; box-shadow:var(--shadow-md); z-index:3; display:flex; gap:10px; align-items:center; animation: fadeUp .8s .7s var(--ease) both; }
.hero-badge .ico { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--green),var(--green-dark)); display:flex; align-items:center; justify-content:center; color:white; font-weight:800; }
.hero-badge b { font-size:13px; display:block; }
.hero-badge span { font-size:11px; color:var(--muted); }

@media (max-width:900px){ .hero-photo{ height:300px; margin-top:20px;} }

/* ---------- STATS STRIP ---------- */
.stats-strip { background: var(--dark); color:white; padding:46px 6%; }
.stats-strip .grid { max-width:1160px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.stats-strip .num { font-family:"Barlow Condensed",Arial; font-size:46px; font-weight:800; color:var(--gold); line-height:1; }
.stats-strip .lbl { font-size:13px; margin-top:8px; opacity:.85; font-weight:600; letter-spacing:.3px; }
@media (max-width:700px){ .stats-strip .grid{ grid-template-columns:1fr 1fr; gap:30px;} }

/* ---------- QUICK LINKS ---------- */
.quick-links { background: linear-gradient(135deg, var(--blue), var(--blue-dark)); color:white; padding:80px 6%; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:50px; }
.quick-intro h2 { font-family: "Barlow Condensed", Arial; font-size:46px; line-height:1; }
.quick-intro p { font-size:18px; margin-top:20px; max-width:420px; opacity:.95; }
.quick-card { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius); min-height:230px; padding:28px 24px; transition:.3s var(--ease); color:var(--white); }
.quick-card:hover { transform:translateY(-8px); background:rgba(255,255,255,.16); box-shadow: var(--shadow-md); }
.quick-card .icon { font-size:38px; height:50px; }
.quick-card h3 { font-size:21px; margin-bottom:8px; }
.quick-card p { font-size:14.5px; opacity:.9; }
.go { display:inline-block; background:white; color:#333; padding:10px 26px; border-radius:28px; margin-top:22px; font-weight:800; font-size:14px; transition:.25s; }
.quick-card:hover .go { background:var(--gold); }

/* ---------- SECTION HEADINGS ---------- */
.section-head { text-align:center; max-width:680px; margin:0 auto 46px; }
.section-head .eyebrow { color:var(--blue); font-weight:800; letter-spacing:3px; font-size:13px; text-transform:uppercase; }
.section-head h2 { font-family:"Barlow Condensed",Arial; font-size:44px; margin-top:10px; color:var(--dark); line-height:1.05; }
.section-head p { margin-top:14px; color:var(--muted); font-size:16.5px; }

/* ---------- PROGRAMS (home) ---------- */
.programs-home { padding:100px 6% 90px; }
.program-grid5 { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.pcard { border-radius:var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); background:white; border:1px solid #eee; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.pcard:hover { transform: translateY(-10px); box-shadow: var(--shadow-md); }
.pcard .thumb { height:200px; overflow:hidden; position:relative; }
.pcard .thumb img { width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.pcard:hover .thumb img { transform: scale(1.09); }
.pcard .tag { position:absolute; top:14px; left:14px; background:rgba(255,255,255,.92); color:var(--blue-dark); font-size:11.5px; font-weight:800; padding:6px 12px; border-radius:20px; letter-spacing:.3px; }
.pcard .body { padding:22px 22px 26px; }
.pcard h3 { font-size:19px; margin-bottom:8px; color:var(--dark); }
.pcard p { font-size:14.5px; color:var(--muted); }
.pcard .more { display:inline-block; margin-top:14px; font-weight:800; font-size:13.5px; color:var(--blue-dark); }
.pcard .more::after { content:" →"; transition: margin .2s; }
.pcard:hover .more::after { margin-left:4px; }
@media (max-width:900px){ .program-grid5{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .program-grid5{ grid-template-columns:1fr; } }

/* ---------- HOW WE WORK ---------- */
.how-work { display:grid; grid-template-columns:1fr 1.2fr; gap:80px; padding:100px 6%; align-items:start; background:#f7fbfc; }
.how-copy h2 { font-family: "Barlow Condensed", Arial; font-size:58px; line-height:0.98; color:var(--blue-dark); }
.how-copy p { max-width:470px; margin:28px 0 30px; font-size:16px; color:var(--muted); }
.blue-btn { display:inline-block; background:var(--blue); color:white; padding:13px 32px; border-radius:30px; font-weight:800; transition:.25s var(--ease); }
.blue-btn:hover { background:var(--blue-dark); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.eyebrow { font-weight:800; letter-spacing:3px; font-size:14px; margin-bottom:22px; color:var(--blue-dark); }

.accordion button { width:100%; background:none; border:none; border-top:1px solid #ddd; padding:20px 4px; text-align:left; font-size:20px; color:#333; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:700; transition: color .2s; }
.accordion button:hover { color: var(--blue-dark); }
.accordion button:last-of-type { border-bottom:1px solid #ddd; }
.accordion button span.plus { font-size:26px; font-weight:300; transition: transform .3s var(--ease); }
.accordion button[aria-expanded="true"] span.plus { transform: rotate(135deg); color:var(--blue); }
.panel { max-height:0; overflow:hidden; transition: max-height .4s var(--ease), padding .4s var(--ease); padding:0 4px; color:#666; font-size:15px; }
.panel.active { max-height:220px; padding:0 4px 22px; }

/* ---------- GALLERY / STORY STRIP ---------- */
.story-card { height:420px; position:relative; overflow:hidden; margin:0; border-radius:0; }
.story-card img { width:100%; height: 100%; object-fit:cover; transition: transform 8s linear; }
.story-card:hover img { transform: scale(1.12); }
.story-overlay { position:absolute; inset:0; padding:70px 6% 50px; color:white; background: linear-gradient(transparent 20%, rgba(0,0,0,0.82)); display:flex; flex-direction:column; justify-content:flex-end; }
.story-overlay .eyebrow { color:var(--gold); }
.story-overlay h2 { font-size:32px; max-width:750px; font-family:"Barlow Condensed",Arial; }
.story-overlay p { margin:12px 0 8px; max-width:600px; opacity:.92; }
.story-overlay a { display:inline-block; margin-top:20px; font-weight:800; border-bottom:2px solid var(--gold); padding-bottom:4px; }

.gallery-strip { display:grid; grid-template-columns: repeat(4,1fr); gap:6px; }
.gallery-strip figure { position:relative; overflow:hidden; height:230px; cursor:pointer; }
.gallery-strip img { width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease), filter .5s; }
.gallery-strip figure:hover img { transform:scale(1.1); }
.gallery-strip figcaption {
  position:absolute; inset:auto 0 0 0; padding:14px 14px 12px; color:white; font-size:12.5px; font-weight:700;
  background:linear-gradient(transparent, rgba(0,0,0,.75)); transform:translateY(100%); transition: transform .35s var(--ease);
}
.gallery-strip figure:hover figcaption { transform:translateY(0); }
@media (max-width:900px){ .gallery-strip{ grid-template-columns:repeat(2,1fr);} }

/* ---------- TESTIMONIALS ---------- */
.testimonials { padding:100px 6%; background:white; }
.voice-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; max-width:1100px; margin:0 auto; }
.voice-card { background:#fbfbfb; padding:34px; border-radius:var(--radius); border-left:4px solid var(--gold); box-shadow:var(--shadow-sm); transition:.3s var(--ease); }
.voice-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.voice-card p { font-family:'Fraunces',serif; font-style:italic; font-size:18px; color:#1B2A4A; line-height:1.55; margin-bottom:18px; }
.voice-who { font-weight:800; font-size:14px; color:var(--dark); }
.voice-who span { display:block; font-weight:600; font-size:12.5px; color:var(--muted); margin-top:2px; }
@media (max-width:800px){ .voice-grid{ grid-template-columns:1fr; } }

/* ---------- CTA ---------- */
.cta { text-align:center; background: linear-gradient(135deg, var(--green-dark), var(--blue-dark)); color:white; padding:90px 20px; position:relative; overflow:hidden; }
.cta::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.12), transparent 40%); }
.cta h2 { font-family:"Barlow Condensed",Arial; font-size:52px; position:relative; }
.cta p { max-width:560px; margin:14px auto 0; opacity:.92; position:relative; }
.white-btn { display:inline-block; background:white; color:#333; padding:15px 34px; border-radius:30px; margin-top:26px; font-weight:800; position:relative; transition:.25s var(--ease); }
.white-btn:hover { transform:translateY(-3px) scale(1.03); box-shadow: var(--shadow-md); }

/* ---------- FOOTER ---------- */
footer { background:#050505; color:white; }
.footer-grid { padding:70px 6% 40px; display:grid; grid-template-columns:1.6fr .9fr .9fr 1fr; gap:60px; max-width:1300px; margin:auto; }
footer h3 { font-size:15px; margin-bottom:18px; }
footer p, footer a { font-size:13.5px; line-height:1.5; color:#cfcfcf; }
footer a { display:block; margin:6px 0; transition:.2s; }
footer a:hover { color:var(--blue); transform: translateX(3px); }
footer hr { border:none; border-top:1px solid #222; margin:25px 0; }
.mt { margin-top:25px; }
.footer-logo { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-logo .badge { background:linear-gradient(135deg,var(--blue),var(--green)); padding:7px 12px; border-radius:8px; font-weight:900; color:white; font-size:15px; }
.socials { display:flex; gap:14px; margin-top:18px; }
.socials a { width:36px; height:36px; border-radius:50%; background:#1a1a1a; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:white; transition:.25s; }
.socials a:hover { background:var(--blue); transform:translateY(-3px); }
.copyright { background:#121519; padding:20px 6%; font-size:12.5px; color:#999; text-align:center; }

/* ---------- MISC helpers ---------- */
.mission-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:40px; }
.mission-card { border-top:3px solid var(--gold); padding-top:20px; background:#fafafa; padding:26px 22px; border-radius:10px; transition:.3s var(--ease); }
.mission-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-sm); }
.mission-card h3 { margin-bottom:10px; font-size:18px; }
.mission-card p { color:var(--muted); font-size:14.5px; }
@media (max-width:800px){ .mission-grid{ grid-template-columns:1fr; } }

/* Donation card */
.donation-card { background:#fff; padding:28px; border-radius:var(--radius); border:1px solid rgba(0,0,0,0.08); color:#111; box-shadow:var(--shadow-sm); }

/* Stat blocks used on impact page */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stat-num { font-family:"Barlow Condensed",Arial; font-size:44px; font-weight:800; color:var(--blue-dark); }
.stat-label { font-size:13.5px; color:var(--muted); margin-top:6px; font-weight:600; }
@media (max-width:700px){ .stats-grid{ grid-template-columns:1fr 1fr; } }

/* Program grid used on work.html */
.program-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:34px; }
.program-card { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); background:white; border:1px solid #eee; transition:.3s var(--ease); }
.program-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-md); }
.program-thumb { height:190px; background-size:cover; background-position:center; }
.program-body { padding:20px 20px 24px; }
.program-tag { display:inline-block; background:#eef8fb; color:var(--blue-dark); font-size:11.5px; font-weight:800; padding:5px 12px; border-radius:20px; margin-bottom:10px; }
@media (max-width:900px){ .program-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .program-grid{ grid-template-columns:1fr; } }

/* ---------- Lightbox ---------- */
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.88); display:none; align-items:center; justify-content:center; z-index:3000; padding:30px; }
.lightbox.open { display:flex; animation: fadeIn .25s ease; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.lightbox img { max-width:min(900px,92vw); max-height:85vh; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lightbox .lb-close { position:absolute; top:24px; right:28px; color:white; font-size:34px; cursor:pointer; background:none; border:none; line-height:1; }
.lightbox figcaption { color:#ddd; text-align:center; margin-top:14px; font-size:14px; max-width:900px; }

/* Back to top */
.to-top { position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%; background:var(--blue); color:white; display:flex; align-items:center; justify-content:center; font-size:20px; border:none; cursor:pointer; box-shadow:var(--shadow-md); opacity:0; pointer-events:none; transform:translateY(10px); transition:.3s var(--ease); z-index:900; }
.to-top.show { opacity:1; pointer-events:auto; transform:translateY(0); }
.to-top:hover { background:var(--blue-dark); }

/* Responsive */
@media (max-width:900px) {
  .menu-btn { display:block; }
  .nav { display:none; position:absolute; top:84px; left:0; width:100%; background:white; padding:25px 6%; flex-direction:column; align-items:flex-start; gap:18px; box-shadow:0 10px 20px rgba(0,0,0,.1); }
  .nav.open { display:flex; }
  .hero-copy { grid-template-columns:1fr; }
  .hero h1 { font-size:50px; }
  .quick-links, .how-work { grid-template-columns:1fr; padding:60px 6%; gap:35px; }
  .footer-grid { grid-template-columns:1fr 1fr; padding:55px 6%; gap:40px; }
  .stats-strip .grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  .hero h1 { font-size:40px; }
  .quick-links { grid-template-columns:1fr; }
  .story-card { height:340px; }
  .story-overlay { padding:40px 6% 34px; }
  .footer-grid { grid-template-columns:1fr; }
  .section-head h2 { font-size:34px; }
}
:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }