/* ============================================================
   DASH OF HOPE — Design System
   Brand: warm navy + hopeful orange, Playfair Display + DM Sans
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box;}

:root{
  /* Green brand palette, matched to the shamrock logo */
  --navy:#1f4d14;--navy-dark:#0f2b0a;--navy-light:#2e7d32;
  --orange:#4b8f2e;--orange-dark:#397023;--orange-light:#9ed873;
  --gold:#d7eba3;--cream:#f5faf0;--warm-gray:#f1f7ec;
  --rose:#4c8a2e;--rose-dark:#2e5c1e;--green:#2d7d46;--teal:#1f6e59;
  --text:#16240f;--muted:#55654d;--border:#e1ebdb;
  --ease:cubic-bezier(.22,1,.36,1);
  --dur-s:200ms;--dur-m:400ms;--dur-l:700ms;
}

html{scroll-behavior:smooth;}
body{font-family:'DM Sans',sans-serif;color:var(--text);background:#fff;overflow-x:hidden;line-height:1.6;}
img{max-width:100%;display:block;}
a{color:inherit;}
button{font:inherit;}

::selection{background:var(--gold);color:var(--navy-dark);}

/* Respect reduced motion everywhere */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
  .reveal{opacity:1 !important;transform:none !important;}
}

/* ---------- Skip link ---------- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 18px;border-radius:0 0 10px 0;z-index:1000;font-weight:600;}
.skip-link:focus{left:0;}

/* ---------- Focus states ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--orange-light);outline-offset:2px;border-radius:4px;
}

/* ---------- PAGE SYSTEM ---------- */
.page{display:none;}
.page.active{display:block;animation:pageIn .5s var(--ease);}
@keyframes pageIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity var(--dur-l) var(--ease),transform var(--dur-l) var(--ease);}
.reveal.in-view{opacity:1;transform:none;}
.reveal-stagger > *{transition-delay:calc(var(--i,0) * 90ms);}

/* ---------- NAV ---------- */
nav{background:rgba(255,255,255,0.92);backdrop-filter:blur(10px);padding:0 3rem;display:flex;align-items:center;justify-content:space-between;height:70px;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:500;box-shadow:0 2px 16px rgba(14,42,10,0.06);}
.logo{cursor:pointer;display:flex;align-items:center;background:none;border:none;padding:0;}
.logo-img{height:30px;width:auto;display:block;}
.footer-logo-img{height:38px;}
.nav-links{display:flex;gap:0.25rem;align-items:center;}
.nav-links button{background:none;border:none;font-family:'DM Sans',sans-serif;font-size:0.875rem;font-weight:500;color:#3d4a38;cursor:pointer;padding:9px 14px;border-radius:8px;transition:all var(--dur-s);letter-spacing:0.02em;position:relative;}
.nav-links button:hover{background:#eef7e7;color:var(--navy-light);}
.nav-links button.active{color:var(--navy-light);}
.nav-links button.active::after{content:'';position:absolute;left:14px;right:14px;bottom:3px;height:2px;background:var(--orange);border-radius:2px;}
.nav-donate{background:var(--orange)!important;color:#fff!important;padding:9px 22px!important;border-radius:50px!important;font-weight:600!important;box-shadow:0 4px 14px rgba(63,143,46,0.3);}
.nav-donate:hover{background:var(--orange-dark)!important;transform:translateY(-2px);box-shadow:0 8px 20px rgba(63,143,46,0.4);}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;width:44px;height:44px;align-items:center;justify-content:center;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;position:relative;transition:background var(--dur-s);}
.nav-toggle span::before,.nav-toggle span::after{content:'';position:absolute;left:0;width:22px;height:2px;background:var(--navy);border-radius:2px;transition:transform var(--dur-m) var(--ease),top var(--dur-m) var(--ease);}
.nav-toggle span::before{top:-7px;}
.nav-toggle span::after{top:7px;}
.nav-toggle.open span{background:transparent;}
.nav-toggle.open span::before{top:0;transform:rotate(45deg);}
.nav-toggle.open span::after{top:0;transform:rotate(-45deg);}

@media (max-width:900px){
  nav{padding:0 1.25rem;}
  .nav-toggle{display:flex;}
  .nav-links{position:fixed;top:70px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:0.5rem 1.25rem;border-bottom:1px solid var(--border);box-shadow:0 12px 24px rgba(0,0,0,0.08);transform:translateY(-8px);opacity:0;pointer-events:none;transition:all var(--dur-m) var(--ease);max-height:70vh;overflow-y:auto;}
  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto;}
  .nav-links button{text-align:left;padding:14px 10px;border-radius:0;border-bottom:1px solid var(--border);width:100%;}
  .nav-links button.active::after{display:none;}
  .nav-donate{margin:10px 0!important;text-align:center!important;}
}

/* ---------- SHARED ELEMENTS ---------- */
.section-tag{display:inline-block;font-size:0.75rem;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;padding:5px 14px;border-radius:50px;margin-bottom:0.875rem;}
.tag-blue{background:#e7f5e2;color:var(--navy-light);}
.tag-orange{background:#edf7e0;color:var(--orange);}
.tag-green{background:#e3f3e0;color:var(--green);}
.tag-rose{background:#e6f3dc;color:var(--rose);}
.tag-white{background:rgba(255,255,255,0.15);color:#fff;border:1px solid rgba(255,255,255,0.3);}
h1,h2,h3{font-family:'Playfair Display',serif;font-weight:700;line-height:1.2;}
h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:1rem;}
p{color:var(--muted);}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 30px;border-radius:50px;font-weight:600;font-size:0.95rem;cursor:pointer;border:none;text-decoration:none;transition:all var(--dur-s) var(--ease);font-family:'DM Sans',sans-serif;touch-action:manipulation;}
.btn-orange{background:var(--orange);color:#fff;}
.btn-orange:hover{background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 10px 26px rgba(63,143,46,0.38);}
.btn-outline-white{background:rgba(255,255,255,0.12);color:#fff;border:2px solid rgba(255,255,255,0.4);}
.btn-outline-white:hover{background:rgba(255,255,255,0.24);transform:translateY(-2px);}
.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover{background:var(--navy-dark);transform:translateY(-2px);box-shadow:0 10px 26px rgba(31,77,20,0.32);}
.btn-white{background:#fff;color:var(--orange);font-weight:700;}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,0.18);}
.btn-outline-dark{border:2px solid var(--border);background:#fff;color:var(--text);}
.btn-outline-dark:hover{border-color:var(--navy-light);color:var(--navy-light);}
.btn-lg{padding:16px 42px;font-size:1.05rem;font-weight:700;}
.btn:active{transform:translateY(0) scale(0.98);}

.container{max-width:1100px;margin:0 auto;}

/* photo credit / honesty note */
.photo-note{font-size:0.72rem;color:var(--muted);text-align:center;margin-top:10px;font-style:italic;opacity:0.85;}

/* ---------- FOOTER ---------- */
footer{background:var(--navy-dark);color:#fff;padding:3.5rem 3rem 2rem;position:relative;overflow:hidden;}
.footer-inner{max-width:1100px;margin:0 auto;position:relative;z-index:1;}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem;margin-bottom:2.5rem;}
.footer-brand .logo{font-size:1.5rem;margin-bottom:1rem;cursor:default;}
.footer-brand p{color:rgba(255,255,255,0.62);font-size:0.88rem;line-height:1.75;max-width:300px;}
.footer-address{color:rgba(255,255,255,0.5)!important;font-size:0.8rem!important;margin-top:0.6rem;}
.footer-col h4{font-size:0.8rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.45);margin-bottom:1rem;}
.footer-col button,.footer-col a{display:block;background:none;border:none;font-family:'DM Sans',sans-serif;font-size:0.88rem;color:rgba(255,255,255,0.72);cursor:pointer;text-decoration:none;margin-bottom:0.65rem;text-align:left;padding:0;transition:color var(--dur-s);}
.footer-col button:hover,.footer-col a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.1);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.footer-bottom p{font-size:0.8rem;color:rgba(255,255,255,0.42);}
.footer-badge{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);color:rgba(255,255,255,0.65);font-size:0.75rem;padding:5px 12px;border-radius:50px;}
@media (max-width:800px){.footer-top{grid-template-columns:1fr;gap:2rem;}.footer-bottom{flex-direction:column;align-items:flex-start;}}

/* ============ HOME PAGE ============ */
.hero{position:relative;color:#fff;padding:6.5rem 3rem 5.5rem;text-align:center;overflow:hidden;isolation:isolate;text-shadow:0 2px 10px rgba(0,0,0,0.6),0 1px 3px rgba(0,0,0,0.5);background:#0f2b0a;}
.hero-bg{position:absolute;inset:0;background:url('assets/images/hero-classroom-writing.jpg') center 30%/cover;z-index:-2;will-change:transform;opacity:0.5;}
.hero-content{position:relative;z-index:1;max-width:720px;margin:0 auto;}
.hero h1{font-family:'Playfair Display',serif;font-size:clamp(2.2rem,5.5vw,3.6rem);font-weight:900;line-height:1.14;margin:0.6rem 0 1.4rem;}
.hero h1 em{color:var(--gold);font-style:normal;}
.hero p{font-size:1.1rem;line-height:1.8;color:rgba(255,255,255,0.9);margin-bottom:2.5rem;max-width:600px;margin-left:auto;margin-right:auto;}
.hero-ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}
.hero-scroll-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:1;color:rgba(255,255,255,0.75);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;animation:bob 2.2s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

.stats-bar{display:grid;grid-template-columns:repeat(3,1fr);background:var(--orange);}
.stat{padding:1.9rem 1.5rem;text-align:center;border-right:1px solid rgba(255,255,255,0.2);}
.stat:last-child{border:none;}
.stat-num{font-family:'Playfair Display',serif;font-size:2.4rem;font-weight:900;color:#fff;display:block;line-height:1;font-variant-numeric:tabular-nums;}
.stat-label{font-size:0.78rem;color:rgba(255,255,255,0.88);margin-top:6px;font-weight:500;letter-spacing:0.05em;text-transform:uppercase;}

.brand-statement{padding:4.5rem 3rem;background:linear-gradient(135deg,var(--navy-dark),var(--navy));text-align:center;}
.brand-statement-inner{max-width:760px;margin:0 auto;}
.brand-statement-icon{color:var(--gold);margin-bottom:1.25rem;}
.brand-statement-quote{font-family:'Playfair Display',serif;font-style:italic;font-weight:700;font-size:clamp(1.6rem,3.4vw,2.4rem);color:#fff;line-height:1.3;margin-bottom:1.25rem;}
.brand-statement-body{color:rgba(255,255,255,0.8);font-size:1.02rem;line-height:1.85;max-width:640px;margin:0 auto;}

.mission-section{padding:5.5rem 3rem;background:var(--warm-gray);position:relative;}
.mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;max-width:1080px;margin:0 auto;}
.mission-grid.reverse{grid-template-columns:1fr 1fr;}
.mission-text{text-align:left;}
.mission-text p{font-size:1.04rem;line-height:1.85;color:var(--muted);margin-bottom:1rem;}
.mission-photo{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 24px 60px rgba(14,42,10,0.16);}
.mission-photo img{width:100%;height:380px;object-fit:cover;transition:transform 0.6s var(--ease);}
.mission-photo:hover img{transform:scale(1.04);}
.mission-photo figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(10,15,40,0.82),transparent);color:#fff;padding:18px 20px 14px;font-size:0.85rem;font-weight:500;line-height:1.5;}
@media (max-width:850px){.mission-grid{grid-template-columns:1fr;}.mission-photo{order:-1;}}

.programs-section{padding:5.5rem 3rem;background:#fff;}
.section-header{text-align:center;margin-bottom:3rem;}
.section-header p{color:var(--muted);font-size:1rem;max-width:580px;margin:0.5rem auto 0;}
.programs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.75rem;max-width:1000px;margin:0 auto;}
.program-card{border-radius:20px;overflow:hidden;border:1px solid var(--border);transition:all var(--dur-m) var(--ease);cursor:pointer;background:#fff;text-align:left;}
.program-card:hover{transform:translateY(-10px);box-shadow:0 24px 55px rgba(31,77,20,0.16);border-color:transparent;}
.program-img{height:200px;position:relative;overflow:hidden;}
.program-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s var(--ease);}
.program-card:hover .program-img img{transform:scale(1.08);}
.program-img .badge{position:absolute;top:12px;left:12px;}
.program-body{padding:1.5rem 1.75rem 2rem;}
.program-body .section-tag{margin-bottom:0.5rem;}
.program-card h3{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;margin-bottom:0.5rem;}
.program-card p{font-size:0.88rem;color:var(--muted);line-height:1.7;margin-bottom:1.25rem;}
.program-link{font-size:0.88rem;font-weight:600;color:var(--navy-light);display:inline-flex;align-items:center;gap:6px;transition:gap var(--dur-s);}
.program-card:hover .program-link{gap:10px;}

.video-story{padding:5.5rem 3rem;background:var(--navy-dark);color:#fff;}
.video-story-inner{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1.1fr 0.9fr;gap:3rem;align-items:center;}
.video-wrap{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,0.4);background:#000;}
.video-wrap video{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;}
.video-caption{position:absolute;left:0;right:0;bottom:0;padding:16px 20px;background:linear-gradient(0deg,rgba(0,0,0,0.85),transparent);font-size:0.85rem;color:rgba(255,255,255,0.92);}
.video-caption strong{color:#fff;}
.video-story-text p{color:rgba(255,255,255,0.75);font-size:1rem;line-height:1.85;margin-bottom:1rem;}
.mute-toggle{position:absolute;top:14px;right:14px;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.3);color:#fff;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--dur-s);}
.mute-toggle:hover{background:rgba(0,0,0,0.7);}
@media (max-width:850px){.video-story-inner{grid-template-columns:1fr;}}

.how-section{padding:5.5rem 3rem;background:var(--navy);position:relative;overflow:hidden;}
.how-section h2{color:#fff;}
.how-section .section-header p{color:rgba(255,255,255,0.72);}
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.25rem;max-width:960px;margin:0 auto;position:relative;z-index:1;}
.step-card{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);border-radius:18px;padding:2rem 1.5rem;text-align:center;transition:transform var(--dur-m) var(--ease),background var(--dur-m);}
.step-card:hover{transform:translateY(-6px);background:rgba(255,255,255,0.12);}
.step-num{width:46px;height:46px;border-radius:50%;background:var(--orange);color:#fff;font-weight:700;font-size:1.15rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1.2rem;font-family:'Playfair Display',serif;}
.step-card h4{color:#fff;font-weight:600;font-size:1rem;margin-bottom:0.5rem;}
.step-card p{color:rgba(255,255,255,0.68);font-size:0.83rem;line-height:1.65;}

.donate-cta{padding:5.5rem 3rem;background:var(--cream);text-align:center;}
.donate-cta h2{max-width:560px;margin:0 auto 0.75rem;}
.donate-cta>p{color:var(--muted);font-size:1.02rem;margin-bottom:2.5rem;}
.cta-cards-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.25rem;max-width:820px;margin:0 auto 2.75rem;}
.cta-mini-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:1.5rem;text-align:left;transition:transform var(--dur-m) var(--ease),box-shadow var(--dur-m);}
.cta-mini-card:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(14,42,10,0.1);}
.cta-mini-card .icon{margin-bottom:0.75rem;display:block;color:var(--orange);}
.cta-mini-card h4{font-weight:600;margin-bottom:0.4rem;}
.cta-mini-card p{font-size:0.83rem;color:var(--muted);line-height:1.65;}

/* animated counting number helper */
.count{font-variant-numeric:tabular-nums;}

/* ============ PAGE HERO (subpages) ============ */
.page-hero{padding:4.5rem 3rem;text-align:center;color:#fff;position:relative;overflow:hidden;isolation:isolate;text-shadow:0 2px 10px rgba(0,0,0,0.6),0 1px 3px rgba(0,0,0,0.5);background:#0f2b0a;}
.page-hero .page-hero-bg{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;will-change:transform;opacity:0.5;}
.page-hero.orange-bg .page-hero-bg{background-image:url('assets/images/heritage-building.jpg');}
.page-hero.navy-bg .page-hero-bg{background-color:#0e2a24;}
.page-hero.navy-bg.hs .page-hero-bg{background-image:url('assets/images/hs-classroom-assembly.jpg');}
.page-hero.navy-bg.contact .page-hero-bg{background-image:url('assets/images/community-hall.jpg');}
.page-hero.green-bg .page-hero-bg{background-image:url('assets/images/about-archway.jpg');}
.page-hero.teal-bg .page-hero-bg{background-image:url('assets/images/jc-campus.jpg');}
.page-hero.rose-bg .page-hero-bg{background-image:url('assets/images/girl-flowers.jpg');}
.page-hero.donate-bg .page-hero-bg{background-image:url('assets/images/mountain-sunrise.jpg');}
.page-hero h1{font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3rem);font-weight:900;margin:0.5rem 0 1rem;}
.page-hero p{font-size:1.05rem;color:rgba(255,255,255,0.9);max-width:620px;margin:0 auto;line-height:1.8;}
.breadcrumb{font-size:0.8rem;color:rgba(255,255,255,0.68);margin-bottom:0.75rem;display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;}
.breadcrumb button,.breadcrumb span{cursor:pointer;background:none;border:none;color:inherit;font:inherit;padding:0;}
.breadcrumb button:hover{color:#fff;text-decoration:underline;}

/* ============ PROGRAMS OVERVIEW ============ */
.programs-overview{padding:5.5rem 3rem;background:#fff;}
.programs-list-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;max-width:1000px;margin:0 auto;}
.prog-detail-card{border:1px solid var(--border);border-radius:20px;overflow:hidden;cursor:pointer;transition:all var(--dur-m) var(--ease);background:#fff;text-align:left;}
.prog-detail-card:hover{transform:translateY(-8px);box-shadow:0 22px 50px rgba(0,0,0,0.12);}
.prog-card-top{height:170px;position:relative;overflow:hidden;}
.prog-card-top img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s var(--ease);}
.prog-detail-card:hover .prog-card-top img{transform:scale(1.08);}
.prog-card-body{padding:1.5rem 1.75rem;}
.prog-card-body h3{font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:700;margin:0.4rem 0 0.5rem;}
.prog-card-body p{font-size:0.87rem;color:var(--muted);line-height:1.7;margin-bottom:1.25rem;}
.prog-card-footer{display:flex;justify-content:space-between;align-items:center;}
.prog-badge{font-size:0.75rem;font-weight:600;padding:4px 12px;border-radius:50px;}
.prog-badge.govt{background:#e3f3e0;color:var(--green);}
.prog-badge.private{background:#edf7e0;color:var(--orange);}
.prog-badge.rose{background:#e6f3dc;color:var(--rose);}

/* ============ HIGH SCHOOL / ORPHAN CARE SHARED ============ */
.hs-content{padding:5.5rem 3rem;background:#fff;}
.hs-inner{max-width:1040px;margin:0 auto;}
.hs-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;margin-bottom:4rem;}
.hs-text h2{margin-bottom:1.25rem;}
.hs-text p{font-size:0.97rem;color:var(--muted);line-height:1.85;margin-bottom:1rem;}
.photo-gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.photo-tile{border-radius:14px;overflow:hidden;height:140px;position:relative;border:1px solid var(--border);}
.photo-tile img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s var(--ease);}
.photo-tile:hover img{transform:scale(1.1);}
.photo-tile .tile-label{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(0,0,0,0.72),transparent 70%);color:#fff;padding:10px 10px 7px;font-weight:600;font-size:0.75rem;text-align:left;}
.gallery-note{grid-column:1/-1;}
@media (max-width:850px){.hs-grid{grid-template-columns:1fr;}}

.needs-section{background:var(--warm-gray);border-radius:20px;padding:2.5rem;margin-bottom:2rem;}
.needs-section h3{font-family:'Playfair Display',serif;font-size:1.3rem;margin-bottom:1.5rem;color:var(--text);}
.needs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;}
.need-item{background:#fff;border-radius:12px;padding:1.25rem;border:1px solid var(--border);display:flex;gap:12px;align-items:flex-start;transition:transform var(--dur-s);}
.need-item:hover{transform:translateY(-3px);}
.need-item .need-icon{flex-shrink:0;color:var(--orange);}
.need-item div h4{font-size:0.9rem;font-weight:600;margin-bottom:0.25rem;}
.need-item div p{font-size:0.8rem;color:var(--muted);line-height:1.5;}

.supporters-strip{border-radius:20px;padding:2rem 2.5rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;color:#fff;}
.supporters-strip h3{font-family:'Playfair Display',serif;color:#fff;font-size:1.15rem;display:flex;align-items:center;gap:8px;}
.supporters-strip p{color:rgba(255,255,255,0.8);font-size:0.88rem;max-width:440px;line-height:1.7;}

.activities-section{padding:4.5rem 3rem;background:var(--warm-gray);}
.activities-inner{max-width:1040px;margin:0 auto;}
.activities-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-top:2rem;}
.activity-card{background:#fff;border-radius:14px;padding:1.4rem 1.1rem;text-align:center;border:1px solid var(--border);transition:transform var(--dur-s),box-shadow var(--dur-s);}
.activity-card:hover{transform:translateY(-5px);box-shadow:0 14px 26px rgba(14,42,10,0.08);}
.activity-card .a-icon{margin-bottom:0.6rem;display:flex;justify-content:center;color:var(--navy-light);}
.activity-card h4{font-size:0.86rem;font-weight:600;color:var(--text);}

/* ============ JUNIOR COLLEGE ============ */
.jc-content{padding:5.5rem 3rem;background:#fff;}
.jc-inner{max-width:1040px;margin:0 auto;}
.jc-highlight{background:linear-gradient(135deg,#f6faee,#ecf6dc);border-radius:20px;padding:2.5rem;border-left:5px solid var(--orange);margin-bottom:2.5rem;}
.jc-highlight h3{font-family:'Playfair Display',serif;font-size:1.25rem;margin-bottom:0.75rem;color:var(--text);display:flex;gap:10px;align-items:center;}
.jc-highlight p{font-size:0.95rem;color:#4f5a49;line-height:1.8;}
.jc-sponsor-card{display:grid;grid-template-columns:auto 1fr auto;gap:1.75rem;align-items:center;background:linear-gradient(135deg,var(--navy),var(--navy-dark));color:#fff;border-radius:20px;padding:2rem 2.25rem;margin-bottom:2.5rem;}
.jc-sponsor-icon{width:64px;height:64px;border-radius:16px;background:rgba(255,255,255,0.14);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--gold);}
.jc-sponsor-body h3{font-family:'Playfair Display',serif;font-size:1.5rem;color:#fff;margin-bottom:0.6rem;}
.jc-sponsor-body p{color:rgba(255,255,255,0.8);font-size:0.92rem;line-height:1.7;}
.jc-sponsor-card .btn{flex-shrink:0;}
@media (max-width:800px){.jc-sponsor-card{grid-template-columns:1fr;text-align:center;}.jc-sponsor-icon{margin:0 auto;}}
.jc-photo-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2.5rem;}
.jc-photo{border-radius:16px;overflow:hidden;height:170px;position:relative;}
.jc-photo img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s var(--ease);}
.jc-photo:hover img{transform:scale(1.08);}
.jc-photo span{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(0,0,0,0.7),transparent);color:#fff;padding:10px;font-size:0.75rem;font-weight:600;}
@media (max-width:750px){.jc-photo-row{grid-template-columns:1fr;}}
.cost-card{background:var(--navy);color:#fff;border-radius:20px;padding:2.5rem;text-align:center;margin-bottom:2.5rem;}
.cost-card h3{font-family:'Playfair Display',serif;font-size:1.25rem;margin-bottom:1.5rem;color:rgba(255,255,255,0.85);}
.cost-nums{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;}
.cost-num{text-align:center;}
.cost-num .big{font-family:'Playfair Display',serif;font-size:2.5rem;font-weight:900;color:var(--gold);display:block;}
.cost-num .label{font-size:0.8rem;color:rgba(255,255,255,0.65);text-transform:uppercase;letter-spacing:0.06em;}
.jc-details{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2.5rem;}
.detail-box{background:var(--warm-gray);border-radius:16px;padding:1.75rem;}
.detail-box h4{font-weight:700;font-size:1rem;margin-bottom:1rem;display:flex;align-items:center;gap:8px;}
.detail-box ul{list-style:none;}
.detail-box ul li{font-size:0.88rem;color:var(--muted);padding:6px 0;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:8px;line-height:1.5;}
.detail-box ul li:last-child{border:none;}
.detail-box ul li svg{flex-shrink:0;color:var(--green);margin-top:2px;}
@media (max-width:750px){.jc-details{grid-template-columns:1fr;}}
.jc-urgency{background:linear-gradient(135deg,var(--orange),var(--orange-dark));border-radius:20px;padding:2.5rem;text-align:center;color:#fff;}
.jc-urgency h3{font-family:'Playfair Display',serif;font-size:1.4rem;margin-bottom:0.75rem;}
.jc-urgency p{font-size:0.95rem;color:rgba(255,255,255,0.9);line-height:1.75;margin-bottom:1.75rem;}

/* ============ DONATE PAGE ============ */
.donate-content{padding:5.5rem 3rem;background:#fff;}
.donate-inner{max-width:920px;margin:0 auto;}
.trust-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:4rem;}
.trust-item{text-align:center;padding:1.85rem 1.25rem;background:var(--warm-gray);border-radius:16px;transition:transform var(--dur-s);}
.trust-item:hover{transform:translateY(-4px);}
.trust-item .t-icon{margin-bottom:0.75rem;display:flex;justify-content:center;color:var(--green);}
.trust-item h4{font-weight:700;font-size:0.95rem;margin-bottom:0.35rem;}
.trust-item p{font-size:0.82rem;color:var(--muted);line-height:1.6;}
@media (max-width:750px){.trust-bar{grid-template-columns:1fr;}}

.donate-video-strip{border-radius:20px;overflow:hidden;position:relative;margin-bottom:4rem;box-shadow:0 24px 55px rgba(14,42,10,0.16);}
.donate-video-strip video{width:100%;display:block;max-height:380px;object-fit:cover;}
.donate-video-strip .video-caption{padding:20px 24px;font-size:0.92rem;}

.donation-tiers{margin-bottom:3rem;}
.donation-tiers h2{text-align:center;margin-bottom:2rem;}
.tiers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.25rem;}
.tier-card{border:2px solid var(--border);border-radius:18px;padding:1.75rem 1.5rem;text-align:center;cursor:pointer;transition:all 0.25s var(--ease);position:relative;background:#fff;}
.tier-card:hover{transform:translateY(-4px);}
.tier-card:hover,.tier-card.selected{border-color:var(--orange);background:#fff8f4;}
.tier-card.featured{border-color:var(--navy-light);background:#eff8e8;}
.tier-popular{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--navy-light);color:#fff;font-size:0.7rem;font-weight:700;padding:4px 14px;border-radius:50px;white-space:nowrap;letter-spacing:0.05em;}
.tier-amount{font-family:'Playfair Display',serif;font-size:2.2rem;font-weight:900;color:var(--text);display:block;margin-bottom:0.25rem;}
.tier-period{font-size:0.78rem;color:var(--muted);margin-bottom:0.75rem;display:block;}
.tier-desc{font-size:0.83rem;color:var(--muted);line-height:1.6;}
.tier-icon{display:flex;justify-content:center;margin-bottom:0.5rem;color:var(--orange);}
.tier-impact{margin-top:1rem;background:#f1f6ec;border-radius:8px;padding:6px 10px;font-size:0.75rem;font-weight:600;color:var(--muted);}

/* $10 coffee tier: featured styling + steam animation */
.tier-card.tier-coffee{border-color:var(--orange-light);background:#f7fbf2;}
.tier-popular-green{background:var(--orange);}
.steam-wrap{position:relative;display:inline-flex;}
.steam{position:absolute;top:-12px;width:3px;height:12px;border-radius:3px;background:linear-gradient(0deg,rgba(63,143,46,0.45),rgba(63,143,46,0));opacity:0;}
.steam.s1{left:6px;animation:steamRise 2.6s ease-in-out infinite;}
.steam.s2{left:17px;animation:steamRise 2.6s ease-in-out infinite 1.1s;}
@keyframes steamRise{0%{opacity:0;transform:translateY(4px) scaleY(0.6);}30%{opacity:0.85;}70%{opacity:0.25;}100%{opacity:0;transform:translateY(-14px) scaleY(1.15);}}

.jc-crosslink{display:flex;align-items:center;gap:12px;background:var(--warm-gray);border:1px solid var(--border);border-radius:16px;padding:1.25rem 1.5rem;color:var(--navy);}
.jc-crosslink svg{flex-shrink:0;color:var(--orange);}
.jc-crosslink p{font-size:0.9rem;color:var(--muted);margin:0;}
.jc-crosslink a{color:var(--navy-light);font-weight:600;text-decoration:underline;}
@media (max-width:600px){.jc-crosslink{flex-direction:column;text-align:center;}}

.donate-methods{background:var(--warm-gray);border-radius:20px;padding:2.5rem;margin-bottom:3rem;}
.donate-methods h3{font-family:'Playfair Display',serif;font-size:1.3rem;margin-bottom:1.5rem;}
.method-list{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.method-item{background:#fff;border-radius:12px;padding:1.25rem 1.5rem;display:flex;gap:12px;align-items:flex-start;border:1px solid var(--border);}
.method-item .m-icon{flex-shrink:0;color:var(--navy-light);}
.method-item h4{font-size:0.9rem;font-weight:600;margin-bottom:0.25rem;}
.method-item p{font-size:0.8rem;color:var(--muted);line-height:1.5;}
.method-item a{color:var(--navy-light);font-size:0.8rem;font-weight:600;text-decoration:none;}
@media (max-width:750px){.method-list{grid-template-columns:1fr;}}
.donate-action{text-align:center;padding:3rem 0;}
.donate-action p{color:var(--muted);font-size:0.88rem;margin-top:1rem;}

/* ============ ABOUT PAGE ============ */
.about-content{padding:5.5rem 3rem;background:#fff;}
.about-inner{max-width:1040px;margin:0 auto;}
.about-mission{background:linear-gradient(135deg,var(--navy-dark),var(--navy-light));border-radius:24px;padding:3rem;color:#fff;margin-bottom:4rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem;}
.about-mission h3{font-family:'Playfair Display',serif;font-size:1.5rem;margin-bottom:1rem;}
.about-mission p{color:rgba(255,255,255,0.82);font-size:0.95rem;line-height:1.85;}
.mission-divider{width:1px;background:rgba(255,255,255,0.2);}
@media (max-width:800px){.about-mission{grid-template-columns:1fr;}.mission-divider{display:none;}}
.values-section{margin-bottom:4rem;}
.values-section h2{margin-bottom:2rem;}
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;}
.value-card{background:var(--warm-gray);border-radius:16px;padding:1.75rem;transition:transform var(--dur-s);}
.value-card:hover{transform:translateY(-5px);}
.value-card .v-icon{margin-bottom:1rem;display:flex;color:var(--orange);}
.value-card h4{font-weight:700;font-size:0.95rem;margin-bottom:0.5rem;}
.value-card p{font-size:0.83rem;color:var(--muted);line-height:1.65;}

.about-photo-band{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:4rem;}
.about-photo-band figure{border-radius:16px;overflow:hidden;height:200px;position:relative;}
.about-photo-band img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s var(--ease);}
.about-photo-band figure:hover img{transform:scale(1.08);}
.about-photo-band figcaption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(0,0,0,0.72),transparent);color:#fff;padding:10px 12px;font-size:0.78rem;font-weight:500;}
@media (max-width:800px){.about-photo-band{grid-template-columns:1fr;}}

.team-section{margin-bottom:4rem;}
.team-section h2{margin-bottom:0.5rem;}
.team-section>p{color:var(--muted);margin-bottom:2.5rem;}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.75rem;}
.team-card{background:var(--warm-gray);border-radius:20px;overflow:hidden;text-align:center;padding:2.5rem 2rem 2rem;transition:transform var(--dur-s);}
.team-card:hover{transform:translateY(-6px);}
.team-avatar{width:90px;height:90px;border-radius:50%;background:linear-gradient(135deg,var(--navy-light),#4caf3a);display:flex;align-items:center;justify-content:center;font-size:2.2rem;font-weight:700;color:#fff;font-family:'Playfair Display',serif;margin:0 auto 1.25rem;}
.team-card h3{font-family:'Playfair Display',serif;font-size:1.25rem;font-weight:700;margin-bottom:0.3rem;}
.team-card .role{font-size:0.82rem;font-weight:600;color:var(--navy-light);letter-spacing:0.05em;text-transform:uppercase;margin-bottom:0.75rem;}
.team-card p{font-size:0.83rem;color:var(--muted);line-height:1.65;}
.org-section{background:var(--warm-gray);border-radius:24px;padding:3rem;margin-bottom:2rem;}
.org-section h2{margin-bottom:1rem;}
.org-section p{font-size:0.95rem;color:var(--muted);line-height:1.85;margin-bottom:1.25rem;}

/* ============ CONTACT PAGE ============ */
.contact-content{padding:5.5rem 3rem;background:#fff;}
.contact-inner{max-width:920px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;}
.contact-info h2{margin-bottom:1rem;}
.contact-info>p{color:var(--muted);font-size:0.97rem;line-height:1.8;margin-bottom:2rem;}
.contact-methods{display:flex;flex-direction:column;gap:1rem;margin-bottom:2.5rem;}
.contact-method{display:flex;gap:1rem;align-items:flex-start;padding:1.25rem;background:var(--warm-gray);border-radius:14px;}
.contact-method .cm-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.contact-method .cm-icon.blue{background:#e7f5e2;color:var(--navy-light);}
.contact-method .cm-icon.orange{background:#edf7e0;color:var(--orange);}
.contact-method h4{font-size:0.88rem;font-weight:600;margin-bottom:0.25rem;}
.contact-method a,.contact-method p{font-size:0.88rem;color:var(--muted);text-decoration:none;}
.contact-method a{color:var(--navy-light);}
.contact-form-card{background:var(--warm-gray);border-radius:20px;padding:2.25rem;}
.contact-form-card h3{font-family:'Playfair Display',serif;font-size:1.3rem;margin-bottom:1.5rem;}
.form-group{margin-bottom:1.25rem;}
.form-group label{display:block;font-size:0.82rem;font-weight:600;color:var(--text);margin-bottom:0.4rem;letter-spacing:0.03em;}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;font-family:'DM Sans',sans-serif;font-size:0.95rem;color:var(--text);background:#fff;transition:border-color var(--dur-s);outline:none;min-height:44px;}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--navy-light);}
.form-group textarea{resize:vertical;min-height:110px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.form-error{color:var(--rose);font-size:0.78rem;margin-top:5px;display:none;}
.form-group.invalid input,.form-group.invalid textarea{border-color:var(--rose);}
.form-group.invalid .form-error{display:block;}
.form-submit{width:100%;padding:14px;background:var(--navy);color:#fff;border:none;border-radius:50px;font-family:'DM Sans',sans-serif;font-weight:700;font-size:1rem;cursor:pointer;transition:all var(--dur-s);margin-top:0.5rem;min-height:48px;}
.form-submit:hover{background:var(--navy-dark);transform:translateY(-1px);}
.contact-social{margin-top:2rem;}
.contact-social h4{font-size:0.85rem;font-weight:600;color:var(--muted);margin-bottom:0.75rem;letter-spacing:0.05em;text-transform:uppercase;}
.social-links{display:flex;gap:0.75rem;flex-wrap:wrap;}
.social-btn{padding:9px 18px;border-radius:50px;font-size:0.82rem;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:#fff;color:var(--text);transition:all var(--dur-s);font-family:'DM Sans',sans-serif;text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;}
.social-btn:hover{border-color:var(--navy-light);color:var(--navy-light);}
@media (max-width:850px){.contact-inner{grid-template-columns:1fr;}}

/* ---------- Back to top ---------- */
.to-top{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:50%;background:var(--navy);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 26px rgba(14,42,10,0.3);opacity:0;pointer-events:none;transform:translateY(12px);transition:all var(--dur-m) var(--ease);z-index:400;}
.to-top.show{opacity:1;pointer-events:auto;transform:none;}
.to-top:hover{background:var(--navy-dark);}

@media (max-width:600px){
  .hero,.page-hero,.mission-section,.programs-section,.how-section,.donate-cta,.hs-content,.jc-content,.donate-content,.about-content,.contact-content,.activities-section,.video-story,nav{padding-left:1.25rem;padding-right:1.25rem;}
  .about-mission,.org-section,.needs-section,.jc-highlight,.cost-card,.jc-urgency,.donate-methods,.contact-form-card{padding:1.75rem;}
}

/* ============================================================
   AI CHAT WIDGET
   ============================================================ */
.chat-widget{position:fixed;left:22px;bottom:22px;z-index:600;font-family:'DM Sans',sans-serif;}
.chat-launcher{width:58px;height:58px;border-radius:50%;background:var(--orange);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 26px rgba(63,143,46,0.4);transition:transform var(--dur-s) var(--ease),background var(--dur-s);}
.chat-launcher:hover{background:var(--orange-dark);transform:translateY(-2px) scale(1.04);}

.chat-panel{position:absolute;left:0;bottom:74px;width:360px;max-width:calc(100vw - 44px);max-height:min(70vh,560px);background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,0.25);display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(16px) scale(0.97);pointer-events:none;transition:opacity var(--dur-m) var(--ease),transform var(--dur-m) var(--ease);}
.chat-panel.open{opacity:1;transform:none;pointer-events:auto;}

.chat-header{background:linear-gradient(135deg,var(--navy-dark),var(--navy));color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.chat-header-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:0.92rem;}
.chat-header-logo{height:22px;width:auto;}
.chat-header-actions{display:flex;gap:6px;}
.chat-header-actions button{background:rgba(255,255,255,0.14);border:none;color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--dur-s);}
.chat-header-actions button:hover{background:rgba(255,255,255,0.26);}
.chat-voice-toggle.muted{color:rgba(255,255,255,0.45);}

.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--cream);}
.chat-msg{display:flex;}
.chat-msg-user{justify-content:flex-end;}
.chat-msg-bot{justify-content:flex-start;}
.chat-bubble{max-width:82%;padding:10px 14px;border-radius:16px;font-size:0.88rem;line-height:1.55;white-space:pre-wrap;word-break:break-word;}
.chat-msg-user .chat-bubble{background:var(--orange);color:#fff;border-bottom-right-radius:4px;}
.chat-msg-bot .chat-bubble{background:#fff;color:var(--text);border:1px solid var(--border);border-bottom-left-radius:4px;}

.chat-typing .chat-bubble{display:flex;gap:4px;align-items:center;padding:12px 16px;}
.chat-typing .dot{width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:0.5;animation:chatDot 1.2s ease-in-out infinite;}
.chat-typing .dot:nth-child(2){animation-delay:0.15s;}
.chat-typing .dot:nth-child(3){animation-delay:0.3s;}
@keyframes chatDot{0%,60%,100%{opacity:0.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}

.chat-input-row{display:flex;align-items:flex-end;gap:8px;padding:12px;border-top:1px solid var(--border);background:#fff;flex-shrink:0;}
.chat-input{flex:1;resize:none;border:1.5px solid var(--border);border-radius:14px;padding:10px 12px;font-family:inherit;font-size:0.88rem;color:var(--text);max-height:100px;outline:none;transition:border-color var(--dur-s);}
.chat-input:focus{border-color:var(--navy-light);}
.chat-mic-btn,.chat-send-btn{flex-shrink:0;width:38px;height:38px;border-radius:50%;border:none;background:var(--warm-gray);color:var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--dur-s),color var(--dur-s);}
.chat-send-btn{background:var(--orange);color:#fff;}
.chat-send-btn:hover{background:var(--orange-dark);}
.chat-mic-btn:hover{background:var(--border);}
.chat-mic-btn.listening{background:var(--rose);color:#fff;animation:chatPulse 1.4s ease-in-out infinite;}
@keyframes chatPulse{0%,100%{box-shadow:0 0 0 0 rgba(76,138,46,0.5);}50%{box-shadow:0 0 0 8px rgba(76,138,46,0);}}

.chat-disclaimer{font-size:0.68rem;color:var(--muted);text-align:center;padding:6px 12px 10px;flex-shrink:0;}
.chat-disclaimer a{color:var(--navy-light);}

@media (max-width:480px){
  .chat-widget{left:12px;bottom:12px;}
  .chat-panel{width:calc(100vw - 24px);bottom:70px;}
}