/* =================================================================
   RESPONSIVE — same content, same order, same visual language,
   only sizing/spacing/layout adapt to the viewport.
================================================================= */

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  .badge-track{animation:none;}
  .db-icon{animation:none;}
  .hero-slide{transition:opacity .3s linear, visibility 0s;}
  .hero-slide img{transition:none;}
}

@media (hover:none), (pointer:coarse){
  .cursor-dot,.cursor-ring{display:none;}
  /* The infinite float animation on this pill sits right above the footer
     and, combined with its backdrop-filter blur, is a common source of
     stutter on phone GPUs (looks like a sudden shake/glitch). Purely
     decorative, so it's safe to turn off on touch devices. */
  .donate-banner-inner{animation:none;}
}

/* =================================================================
   FLUID CONTAINER — tighten side gutters progressively
================================================================= */
@media (max-width:1180px){ .wrap{padding:0 32px;} }
@media (max-width:768px){  .wrap{padding:0 24px;} }
@media (max-width:480px){  .wrap{padding:0 18px;} }

/* =================================================================
   NAV
================================================================= */
@media (max-width:1180px){
  .nav-links{gap:26px;}
}
@media (max-width:920px){
  .nav{padding:18px 0;}
  .nav.scrolled{padding:12px 0;}
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  /* Center the logo: take nav-actions out of flow so .brand is the only
     flex child left in the wrap and can be centered cleanly, keeping the
     hamburger (and CTA, where still shown) pinned to the right in line
     with the centered logo. */
  .nav .wrap{justify-content:center; position:relative;}
  .nav-actions{position:absolute; top:50%; right:32px; transform:translateY(-50%);}
}
@media (max-width:768px){
  .nav-actions{right:24px;}
}
@media (max-width:600px){
  .brand{font-size:.94rem; gap:9px;}
  .brand-mark{width:34px; height:34px; border-radius:10px;}
  .brand-mark svg{width:15px; height:15px;}
  .site-logo{height:54px;}
  .footer-logo{height:52px;}
  .nav-cta{display:none;}
  .nav-actions{gap:10px;}
}
@media (max-width:480px){
  .nav-actions{right:18px;}
}
@media (max-width:400px){
  .mobile-menu-panel{width:88vw; padding:100px 24px 32px;}
}

/* =================================================================
   HERO
================================================================= */
@media (max-width:1180px){
  .hero-grid{grid-template-columns:1fr; gap:44px;}
  .hero-visual{order:-1; max-width:420px; margin:0 auto; padding:0;}
  .hero-copy{text-align:left;}
}
@media (max-width:920px){
  .hero{padding:118px 0 64px; min-height:0;}
  .hero-visual{max-width:340px;}
}
@media (max-width:720px){
  .hero{padding:110px 0 56px;}
  .hero-eyebrow{font-size:.78rem; margin-bottom:20px;}
  .hero h1{margin-bottom:20px;}
  .hero p.lead{font-size:1.04rem; margin-bottom:28px; max-width:100%;}
  .hero-ctas{flex-direction:column; align-items:stretch; gap:12px; margin-bottom:36px;}
  .hero-ctas .btn{width:100%; justify-content:center; padding:16px 26px;}
  .hero-feats{gap:16px 22px; padding-top:22px;}
  .hero-feat{max-width:none; flex:1 1 auto;}
}
@media (max-width:480px){
  .hero{padding:104px 0 48px;}
  .hero-visual{max-width:280px; padding:0;}
  .hero-photo::before{width:42px; height:42px;}
  .hero-eyebrow{gap:8px; font-size:.72rem; margin-bottom:16px;}
  .hero-eyebrow .dot{width:7px; height:7px;}
  .hero-feats{flex-direction:column; gap:14px; align-items:flex-start;}
  .hero-feat{gap:10px;}
  .hero-feat .ic{width:36px; height:36px;}
}
@media (max-width:920px){
  .hero-slider-dots{
    bottom:14px; display:grid; grid-template-columns:repeat(2,auto);
    justify-content:center; gap:6px; row-gap:6px; max-width:none;
  }
  .hs-dot{width:6px; height:6px; justify-self:center;}
  .hs-dot.is-active{width:18px;}
  .hs-arrow{width:32px; height:32px;}
  .hs-arrow-prev{left:8px;}
  .hs-arrow-next{right:8px;}
}
@media (max-width:480px){
  .hero-slider-dots{bottom:12px; gap:5px; row-gap:5px;}
  .hs-dot{width:5px; height:5px;}
  .hs-dot.is-active{width:15px;}
}
@media (hover:none), (pointer:coarse){
  /* Touch devices: tapping anywhere near the tilt photo shouldn't fight the slider dots */
  .hero-slider-dots{bottom:16px;}
}

/* =================================================================
   TRUST BADGE MARQUEE + MOBILE TRUST ROW
================================================================= */
@media (max-width:1180px){ .mobile-trust{display:block;} }

@media (max-width:640px){
  .badge-item{padding:0 18px; font-size:.78rem;}
}

@media (max-width:920px){
  .mobile-trust{padding:20px 0;}
  .mobile-trust .wrap{justify-content:flex-start; gap:20px 28px;}
  .mt-item{flex:1 1 130px; min-width:130px;}
}
@media (max-width:480px){
  .mobile-trust .wrap{gap:16px 20px;}
  .mt-item{flex:1 1 42%; min-width:0;}
  .mt-item b{font-size:.92rem;}
  .mt-item span{font-size:.68rem;}
}

/* =================================================================
   DONATE SECTION
================================================================= */
@media (max-width:1080px){
  .donate-grid{
    grid-template-columns:minmax(0,1fr); row-gap:40px; column-gap:0;
    grid-template-areas:"head" "form" "rest";
  }
  .donate-card-wrap{position:static; min-width:0;}
  .donate-copy-head, .trust-grid, .donor-checklist, .donate-copy-rest{max-width:100%;}
  .donate-card-wrap{width:100%; max-width:520px; margin:0 auto;}
}
@media (max-width:720px){
  .donate-section{padding:8px 0 72px;}
  .donate-copy-head p.desc{font-size:.96rem;}
  .trust-grid{gap:12px; margin-top:28px;}
  .trust-card{padding:14px;}
  .donor-checklist{margin-top:28px; gap:12px;}
  .donate-card{padding:28px 24px; border-radius:24px;}
  .dc-amounts{gap:8px;}
  .dc-amounts button{padding:14px 0; font-size:.86rem; border-radius:12px;}
}
@media (max-width:420px){
  .trust-grid{grid-template-columns:1fr;}
  .trust-card[style]{grid-column:auto;}
}
@media (max-width:380px){
  .dc-amounts{grid-template-columns:1fr 1fr;}
}

/* =================================================================
   PROJECT SHOWCASE
================================================================= */
@media (max-width:1080px){
  .projects-section{padding:0 0 90px;}
  .projects-carousel-wrap{padding:0 50px;}
  .projects-grid{gap:20px;}
  .projects-grid .project-card{flex:0 0 calc((100vw - 130px)/2); width:calc((100vw - 130px)/2); max-width:320px;}
  .project-card{min-width:0;}
  .project-tag, .project-amt{max-width:calc(50% - 10px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
}
@media (max-width:640px){
     .projects-carousel-wrap{padding:0; margin-left:-24px; margin-right:-24px;}
       .projects-carousel{padding:4px 16px 8px;}
.projects-grid{gap:12px; margin-top:40px;}
 
  .projects-arrow{width:38px; height:38px;}
  .projects-grid{gap:16px; margin-top:40px;}
  .projects-grid .project-card{flex:0 0 calc(100vw - 130px); width:calc(100vw - 130px); max-width:340px;}
  .project-body{padding:24px 22px 26px;}
  .project-body h4{font-size:1.5rem; margin-bottom:12px; line-height:1.22;}
  .project-amt{font-size:1.05rem; padding:9px 16px;}
  .project-bullets{gap:11px; margin-bottom:22px;}
  .projects-carousel{-webkit-mask-image:none; mask-image:none;}
  .project-bullets li{font-size:.9rem;}
}
@media (max-width:480px){
  .project-body{padding:20px 20px 22px;}
  .project-body p{min-height:0;}
  .project-body h4{font-size:1.4rem; margin-bottom:10px;}
  .project-tag{font-size:.64rem; padding:6px 10px; top:12px; left:12px;}
  .project-amt{font-size:1rem; padding:8px 15px; top:12px; right:12px;}
  .project-bullets{gap:10px; margin-bottom:20px;}
  .project-bullets li{font-size:.87rem;}
}

/* =================================================================
   STORY + PROBLEM/MISSION
================================================================= */
@media (max-width:1080px){
  .story-section{padding:0 0 90px;}
  .sp-grid{grid-template-columns:1fr; gap:48px;}
  .sp-timeline{display:none;}
  .sp-col h3, .sp-col > p, .stat-grid{max-width:100%;}
}
@media (max-width:720px){
  .story-head{margin-bottom:48px;}
  .stat-grid{gap:20px 16px;}
  .sp-mission{gap:16px; margin-bottom:24px;}
}
@media (max-width:480px){
  .stat-block b{font-size:1.5rem;}
  .sp-blob{width:260px; height:260px; top:-90px; left:-100px;}
}

/* =================================================================
   IMPACT VIDEO BANNER (legacy block — kept in sync in case re-enabled)
================================================================= */
@media (max-width:720px){
  .video-banner{height:380px; border-radius:22px;}
  .vb-overlay{padding:26px;}
  .vb-stats{gap:22px;}
  .vb-play{width:66px;height:66px;}
}

/* =================================================================
   WHY CHOOSE US
================================================================= */
@media (max-width:1080px){
  .why-section{padding:0 0 90px;}
  .why-grid{grid-template-columns:1fr 1fr; gap:20px;}
  .why-card.c{grid-column:1 / -1;}
}
@media (max-width:640px){
  .why-grid{grid-template-columns:1fr; gap:18px; margin-top:40px;}
  .why-card.c{grid-column:auto; min-height:240px;}
  .why-section .section-head h2{font-size:2.15rem; line-height:1.16;}
  .why-card{padding:30px 26px; border-radius:22px;}
  .why-card h4{font-size:1.32rem; margin-bottom:20px;}
  .why-card ul{gap:14px; margin-bottom:24px;}
  .why-card li{font-size:.92rem; line-height:1.5;}
}
@media (max-width:480px){
  .why-card{padding:26px 22px; border-radius:20px;}
  .why-card h4{font-size:1.24rem; margin-bottom:16px;}
  .why-card ul{gap:13px; margin-bottom:22px;}
  .why-card li{font-size:.9rem; gap:11px;}
}

/* =================================================================
   YOUR DONATION IN ACTION (drag gallery)
================================================================= */
@media (max-width:1080px){ .impact-section{padding:0 0 90px;} }
@media (max-width:1180px){
  .impact-track-wrap{margin:56px -32px 0; padding:0 32px 10px;}
}
@media (max-width:768px){
  .impact-track-wrap{margin:40px -24px 0; padding:0 24px 10px;}
}
@media (max-width:640px){
  .impact-track{gap:16px;}
  .impact-card{width:230px; height:320px;}
}
@media (max-width:480px){
  .impact-track-wrap{margin:36px -18px 0; padding:0 18px 10px;}
  .impact-track{gap:14px;}
  .impact-card{width:200px; height:280px; border-radius:20px;}
  .impact-card .glass-info{left:10px; right:10px; bottom:10px; padding:12px;}
  .impact-card .glass-info .ic{width:28px; height:28px; margin-bottom:7px;}
  .impact-card .glass-info b{font-size:.78rem;}
  .impact-card .glass-info span{font-size:.68rem;}
  .drag-hint{font-size:.76rem; margin-top:4px;}
  .impact-cta{margin-top:32px;}
}
@media (max-width:360px){
  .impact-card{width:182px; height:256px;}
}

/* =================================================================
   DONATE BANNER (static section before hero) + WHATSAPP FLOAT
================================================================= */
@media (max-width:760px){
  .donate-banner{padding:48px 0;}
  .donate-banner-inner{flex-wrap:wrap; justify-content:center; border-radius:26px; padding:14px 16px; text-align:center;}
  .db-text{justify-content:center; width:100%;}
  .db-text b{font-size:.86rem;}
  .db-btn{width:100%; justify-content:center; margin-left:0; margin-top:4px;}
  .wa-float{right:16px; bottom:20px; width:52px; height:52px;}
  .wa-float svg{width:22px; height:22px;}
}
@media (max-width:400px){
  .wa-float{right:12px;}
}

/* =================================================================
   FOOTER
================================================================= */
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;} }
@media (max-width:720px){ footer{padding:60px 0 26px;} }
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr; row-gap:32px; padding-bottom:36px;}
  .footer-brand p{max-width:100%;}
  .footer-bottom{flex-direction:column; text-align:center; gap:10px; padding-top:22px;}
}

/* =================================================================
   MODAL (video)
================================================================= */
@media (max-width:640px){
  .modal-box{border-radius:16px;}
  .modal-close{top:10px; right:10px; width:36px; height:36px;}
}

/* =================================================================
   SECTION-LEVEL SPACING (generic tightening pass)
================================================================= */
@media (max-width:720px){
  .story-section, .donate-section, .projects-section, .why-section, .impact-section{padding-bottom:80px;}
  .donate-section{padding-top:24px;}
}
@media (max-width:480px){
  .story-section, .projects-section, .why-section, .impact-section{padding-bottom:60px;}
  .section-head p.desc, .section-head p.sub{font-size:.94rem;}
  .eyebrow{font-size:.7rem; margin-bottom:14px;}
}