@view-transition{navigation:auto}
:root{--bg:#f3faf8;--s:#fff;--ink:#0a2630;--mu:#46636b;--cr:#0d7a78;--dp:#062f3a;--sf:#d9432b;--ln:#cde4df;--sf2:#dff2ee;color-scheme:light}
:root[data-t=dark]{--bg:#061a1f;--s:#0c2a31;--ink:#e6f6f3;--mu:#9bbdc0;--cr:#5eead4;--dp:#03141a;--sf:#ff7d5c;--ln:#1f4650;--sf2:#123741;color-scheme:dark}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.05rem/1.7 'Plus Jakarta Sans',system-ui,sans-serif;padding-bottom:env(safe-area-inset-bottom)}
h1,h2,h3{font-family:'Fraunces',Georgia,sans-serif;line-height:1.08;letter-spacing:-.025em;margin:0}
h2{font-size:clamp(1.9rem,5vw,3.1rem);font-weight:800}h3{font-size:1.25rem;font-weight:700}
p{margin:0 0 1em;max-width:64ch}a{color:inherit}img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--sf);outline-offset:3px}
.w{width:min(1140px,100% - 2.5rem);margin-inline:auto}
section{padding:clamp(3.5rem,9vw,6.5rem) 0}
.mu{color:var(--mu)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.7rem 1.6rem;border-radius:99px;border:2px solid transparent;background:var(--sf);color:#fff;font:600 1rem 'Plus Jakarta Sans',system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 24px -10px var(--sf)}
.btn.g{background:none;color:inherit;border-color:currentColor;box-shadow:none}.btn.d{background:var(--cr);color:var(--s)}
#bar{position:fixed;top:0;left:0;height:4px;width:100%;background:var(--sf);transform-origin:0 50%;transform:scaleX(0);z-index:99}
@supports(animation-timeline:scroll()){#bar{animation:grow linear both;animation-timeline:scroll(root)}@keyframes grow{to{transform:scaleX(1)}}}
header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--s) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--ln);padding-top:env(safe-area-inset-top)}
.nav{display:flex;align-items:center;gap:1rem;height:70px}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;font:800 1.2rem/1 'Fraunces',system-ui,sans-serif}
.logo i{width:38px;height:38px;border-radius:50%;background:var(--cr);display:grid;place-items:center;color:var(--sf);font-style:normal}
.logo small{display:block;font:500 .66rem 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--mu);letter-spacing:0;margin-top:2px}
.menu{margin-left:auto;display:flex;align-items:center;gap:1.3rem}
.menu a:not(.btn){text-decoration:none;font-weight:500;font-size:.96rem;padding:.3rem 0;background:linear-gradient(var(--sf),var(--sf)) 0 100%/0 2px no-repeat;transition:background-size .3s}
.menu a:not(.btn):hover,.menu a[aria-current]{background-size:100% 2px}
.menu .btn{min-height:42px;padding:.45rem 1.2rem}
.ib{width:44px;height:44px;border-radius:50%;border:2px solid var(--ln);background:none;color:inherit;cursor:pointer;font-size:1.1rem}
#bg{display:none}
@media(max-width:900px){#bg{display:block;margin-left:auto}.menu{position:fixed;inset:70px 0 auto 0;background:var(--s);flex-direction:column;align-items:stretch;gap:0;padding:.5rem 1.25rem 1.5rem;border-bottom:1px solid var(--ln);transform:translateY(-12px);opacity:0;pointer-events:none;transition:.25s;margin:0;max-height:calc(100dvh - 70px);overflow:auto}.menu.o{transform:none;opacity:1;pointer-events:auto}.menu a:not(.btn){padding:.9rem 0;border-bottom:1px solid var(--ln);background:none}.menu .btn{margin-top:.8rem}}
/* hero */
.hero{position:relative;min-height:min(88dvh,780px);display:grid;align-items:center;color:#fff;overflow:hidden;background:linear-gradient(160deg,#062f3a,#0d7a78 60%,#d9432b);isolation:isolate}
.sl{position:absolute;inset:0;background:center/cover;opacity:0;z-index:-2;animation:fade 30s infinite}
.sl:nth-child(2){animation-delay:6s}.sl:nth-child(3){animation-delay:12s}.sl:nth-child(4){animation-delay:18s}.sl:nth-child(5){animation-delay:24s}
@keyframes fade{0%{opacity:0;transform:scale(1.12)}4%,20%{opacity:1}26%,100%{opacity:0;transform:scale(1)}}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,32,42,.88),rgba(4,32,42,.35));z-index:-1}
.hero h1{font-size:clamp(2.4rem,8vw,5.6rem);font-weight:800;max-width:15ch;letter-spacing:-.04em;line-height:.98}
.hero h1 span{display:inline-block;animation:up .9s cubic-bezier(.2,.8,.2,1) both}
.hero h1 span:nth-child(2){animation-delay:.12s}.hero h1 span:nth-child(3){animation-delay:.24s}.hero h1 span:nth-child(4){animation-delay:.36s}
@keyframes up{from{opacity:0;transform:translateY(50px) rotate(3deg)}}
.hero .lead{font-size:clamp(1.05rem,2.4vw,1.3rem);max-width:46ch;margin:1.5rem 0 2rem;animation:up 1s .5s both}
.hero .cta{display:flex;flex-wrap:wrap;gap:.8rem;animation:up 1s .7s both}
.lf{z-index:-1}.lf{position:absolute;top:-10%;font-size:1.6rem;opacity:.8;animation:fall linear infinite;z-index:-1;left:var(--x)}
@keyframes fall{to{transform:translate(60px,115dvh) rotate(540deg)}}
.ph{background:linear-gradient(135deg,var(--sf2),var(--ln))}
.inner{padding:clamp(3rem,8vw,5.5rem) 0;background:linear-gradient(135deg,var(--dp),var(--cr));color:#fff;position:relative;overflow:hidden}
.inner:after{content:"❦";position:absolute;right:6%;top:-10%;font-size:16rem;opacity:.08;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.inner p{opacity:.85;margin-top:1rem}
/* marquee */
.mq{background:var(--sf);color:#fff;overflow:hidden;white-space:nowrap;padding:.8rem 0;font:700 1.05rem 'Fraunces',system-ui,sans-serif}
.mq div{display:inline-block;animation:mq 30s linear infinite;padding-left:100%}
@keyframes mq{to{transform:translateX(-100%)}}
.mq:hover div{animation-play-state:paused}
/* stats */
.st{background:var(--dp);color:#fff;padding:2.6rem 0}
.st .w{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.st b{display:block;font:800 clamp(2.2rem,6vw,3.4rem)/1 'Fraunces',system-ui,sans-serif;color:#ffc4a3}
@media(max-width:700px){.st .w{grid-template-columns:1fr 1fr}}
/* grids */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:center}
@media(max-width:820px){.g2{grid-template-columns:1fr}}
.gr{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:1.25rem;margin-top:2.5rem}
.c{background:var(--s);border:1px solid var(--ln);border-radius:26px 26px 26px 6px;padding:1.6rem;transition:transform .3s,border-color .3s;position:relative;overflow:hidden}
.c:nth-child(even){border-radius:26px 6px 26px 26px}
.c:hover{transform:translateY(-6px);border-color:var(--sf)}
.c .e{font-size:2.2rem;display:block;margin-bottom:.7rem;transition:transform .4s}.c:hover .e{transform:scale(1.2) rotate(-8deg)}
.c p{color:var(--mu);margin:.5rem 0 0;font-size:.98rem}
.alt{background:var(--sf2)}
.pic{border-radius:30px 30px 120px 30px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 30px 60px -30px #0006}
.pic img{width:100%;height:100%;object-fit:cover}

.c.im{padding:0;display:flex;flex-direction:column;border-radius:28px;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.c.im:nth-child(even){border-radius:28px}
.c.im:hover{transform:perspective(900px) translateY(-8px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));box-shadow:0 26px 50px -26px #0007}
.ph2{aspect-ratio:4/3;overflow:hidden;background:linear-gradient(135deg,var(--cr),var(--sf));position:relative}
.ph2:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(20,8,50,.55));opacity:0;transition:opacity .4s}
.c:hover .ph2:after{opacity:1}
.ph2 img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.c:hover .ph2 img{transform:scale(1.13) rotate(1.2deg)}
.c .cb{padding:1.3rem 1.5rem 1.7rem;flex:1}
.ln{font-weight:700;color:var(--sf);text-decoration:none;display:inline-block;transition:transform .25s}.ln:after{content:" →"}.ln:hover{transform:translateX(6px)}
.sld{position:relative;margin-top:2rem}
.tr{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:.5rem 0 1rem;cursor:grab;-webkit-overflow-scrolling:touch}
.tr::-webkit-scrollbar{display:none}.tr.dg{scroll-snap-type:none;cursor:grabbing;scroll-behavior:auto}
.tr figure{margin:0;flex:0 0 min(86%,440px);scroll-snap-align:center;border-radius:28px;overflow:hidden;aspect-ratio:4/3;background:linear-gradient(135deg,var(--cr),var(--sf));opacity:.5;transform:scale(.92);transition:opacity .6s,transform .6s}
.tr figure.on{opacity:1;transform:none}
.tr img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.tr figure.on img{animation:kb 7s ease-out both}@keyframes kb{from{transform:scale(1.18)}}
.sb{position:absolute;top:calc(50% - 40px);width:50px;height:50px;border-radius:50%;border:0;background:var(--s);color:var(--ink);font-size:1.8rem;line-height:1;cursor:pointer;box-shadow:0 8px 24px -8px #0008;z-index:3;transition:transform .2s,background .2s}
.sb:hover{transform:scale(1.12);background:var(--sf);color:#fff}.sb.pv{left:-8px}.sb.nx{right:-8px}
@media(max-width:700px){.sb{width:42px;height:42px}.sb.pv{left:2px}.sb.nx{right:2px}}
.dots{display:flex;justify-content:center;gap:.5rem;margin-top:.4rem}
.dots button{width:10px;height:10px;border-radius:99px;border:0;background:var(--ln);cursor:pointer;padding:0;transition:width .35s,background .35s}
.dots button.on{width:34px;background:var(--sf)}
/* timeline */
.tl{border-left:3px solid var(--cr);margin:2rem 0 0 .5rem;padding-left:1.6rem;display:grid;gap:1.6rem}
.tl div{position:relative}.tl div:before{content:"";position:absolute;left:-2.15rem;top:.45rem;width:14px;height:14px;border-radius:50%;background:var(--sf)}
/* team */
.tm{text-align:center}.tm .av{width:150px;aspect-ratio:1;border-radius:50%;overflow:hidden;margin:0 auto 1rem;border:5px solid var(--sf2);display:grid;place-items:center;font-size:3rem}
.tm img{width:100%;height:100%;object-fit:cover}
/* gallery */
.gal{columns:3 220px;gap:1rem;margin-top:2.5rem}
.gal button{display:block;width:100%;margin:0 0 1rem;padding:0;border:0;border-radius:18px;overflow:hidden;cursor:zoom-in;background:var(--sf2);min-height:150px;break-inside:avoid}
.gal img{width:100%;transition:transform .5s}.gal button:hover img{transform:scale(1.07)}
dialog{border:0;padding:0;background:none;max-width:96vw;max-height:94dvh;color:#fff;overflow:visible}
dialog::backdrop{background:rgba(10,5,25,.92);backdrop-filter:blur(6px)}
dialog img{max-height:82dvh;border-radius:14px;margin:auto}
.lb{display:flex;justify-content:center;gap:.8rem;margin-top:1rem}
.lb button{width:48px;height:48px;border-radius:50%;border:0;background:#fff;color:#111;cursor:pointer;font-size:1.2rem}
/* forms / donate */
.bx{background:var(--s);border:1px solid var(--ln);border-radius:28px;padding:clamp(1.2rem,4vw,2.2rem)}
label{display:block;font-weight:600;font-size:.92rem;margin:.9rem 0 .3rem}
input,select,textarea{width:100%;min-height:48px;padding:.7rem .95rem;border-radius:14px;border:2px solid var(--ln);background:var(--bg);color:var(--ink);font:400 1rem 'Plus Jakarta Sans',system-ui,sans-serif}
input:focus,select:focus,textarea:focus{border-color:var(--cr);outline:0}
textarea{min-height:120px;resize:vertical}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}@media(max-width:520px){.r2{grid-template-columns:1fr}}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--sf2);border-radius:99px;padding:4px;margin-bottom:1.2rem}
.seg button{border:0;background:none;color:var(--ink);font:600 1rem 'Plus Jakarta Sans',system-ui,sans-serif;min-height:44px;border-radius:99px;cursor:pointer;transition:.25s}
.seg button[aria-pressed=true]{background:var(--cr);color:var(--s)}
.am{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin-bottom:.8rem}
.am button{min-height:54px;border:2px solid var(--ln);background:none;color:var(--ink);border-radius:16px;font:700 1.15rem 'Fraunces',system-ui,sans-serif;cursor:pointer;transition:.2s}
.am button[aria-pressed=true]{border-color:var(--sf);background:color-mix(in srgb,var(--sf) 14%,transparent);transform:scale(1.03)}
.im{background:var(--sf2);border-radius:16px;padding:.9rem 1.1rem;margin:1rem 0;font-weight:500}
.bx .btn{width:100%;margin-top:1.2rem}
.bank{border:2px dashed var(--ln);border-radius:20px;padding:1.2rem 1.4rem;margin-top:1.5rem}
.bank dl{margin:.6rem 0 0;display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem}.bank dt{color:var(--mu)}.bank dd{margin:0;word-break:break-word}
.ok{display:none;text-align:center}.ok.s{display:block;animation:up .6s both}
.ok svg{width:80px;stroke:var(--sf);fill:none;stroke-width:4;stroke-dasharray:60;animation:dr 1s .2s both}@keyframes dr{from{stroke-dashoffset:60}}
details{background:var(--s);border:1px solid var(--ln);border-radius:18px;padding:1rem 1.3rem;margin-bottom:.8rem}
summary{font-weight:600;cursor:pointer}details[open] summary{color:var(--sf)}
.cta-b{background:linear-gradient(135deg,var(--cr),var(--dp));color:#fff;text-align:center;border-radius:36px;padding:clamp(2rem,6vw,4rem)}
.cta-b p{margin:1rem auto 1.6rem}
footer{background:var(--dp);color:#bfdcdc;padding:3.5rem 0 2rem;font-size:.95rem}
footer .w{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}@media(max-width:760px){footer .w{grid-template-columns:1fr}}
footer h3{color:#fff;margin-bottom:.8rem;font-size:1.05rem}footer a{text-decoration:none;display:block;padding:.2rem 0}footer a:hover{color:#ffc4a3}footer p{margin:0 0 .5rem}
.cp{text-align:center;margin-top:2rem;padding-top:1.5rem;border-top:1px solid #ffffff22}
#up{position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));width:48px;height:48px;border-radius:50%;border:0;background:var(--sf);color:#fff;font-size:1.3rem;cursor:pointer;opacity:0;pointer-events:none;transition:.3s;z-index:70}#up.s{opacity:1;pointer-events:auto}
#wa{position:fixed;left:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:70;background:#1faa59;color:#fff;border-radius:99px;padding:.7rem 1.1rem;text-decoration:none;font-weight:600;font-size:.92rem}
#ts{position:fixed;left:50%;bottom:5rem;transform:translate(-50%,200%);background:var(--ink);color:var(--bg);padding:.8rem 1.3rem;border-radius:99px;z-index:99;transition:.3s;max-width:92vw;text-align:center}#ts.s{transform:translate(-50%,0)}
@supports(animation-timeline:view()){.rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% cover 30%}@keyframes rv{from{opacity:0;transform:translateY(50px) scale(.97)}}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.sl:first-child{opacity:1}html{scroll-behavior:auto}}

.c:has(>.ci){padding:0 0 1.5rem}.c:has(>.ci)>h3{padding:1.2rem 1.5rem 0}.c:has(>.ci)>p{padding:0 1.5rem}
.ci{aspect-ratio:16/10;overflow:hidden;position:relative;background:linear-gradient(135deg,var(--cr),var(--sf));border-radius:0 0 28px 0}
.ci:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(20,8,50,.45));opacity:.8;transition:opacity .4s}
.ci img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.c:hover .ci img{transform:scale(1.14) rotate(1.2deg)}
.c{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform}
.c:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}
@supports(animation-timeline:view()){.ci{animation:clip linear both;animation-timeline:view();animation-range:entry 0% cover 40%}@keyframes clip{from{clip-path:inset(0 100% 0 0)}}.ci img{animation:zm linear both;animation-timeline:view();animation-range:entry 0% exit 100%}@keyframes zm{from{scale:1.25}to{scale:1}}}
.bd{width:46px;fill:none;stroke:var(--sf);stroke-width:1.8;margin-bottom:.7rem;display:block}
.sld{position:relative}
.trk{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;position:relative;padding-bottom:.4rem;overscroll-behavior-x:contain}
.trk::-webkit-scrollbar{display:none}
.trk figure{margin:0;flex:0 0 min(86%,520px);aspect-ratio:4/3;border-radius:28px;overflow:hidden;position:relative;scroll-snap-align:start;background:linear-gradient(135deg,var(--cr),var(--sf));transform:scale(.93);opacity:.6;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s}
.trk figure.on{transform:none;opacity:1}
.trk figure img{width:100%;height:100%;object-fit:cover;transition:transform 6s linear}
.trk figure.on img{transform:scale(1.1)}
.trk figcaption{position:absolute;inset:auto 0 0 0;padding:3rem 1.4rem 1.3rem;background:linear-gradient(transparent,rgba(15,6,40,.88));color:#fff}
.trk figcaption p{margin:.3rem 0 0;font-size:.95rem;opacity:.9}
.trk figcaption h3{transform:translateY(14px);opacity:0;transition:.6s .2s}.trk figure.on figcaption h3{transform:none;opacity:1}
.ctl{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.2rem}
.ctl>button{width:48px;height:48px;border-radius:50%;border:2px solid currentColor;background:none;color:inherit;font-size:1.2rem;cursor:pointer;transition:.25s}
.ctl>button:hover{background:var(--sf);border-color:var(--sf);color:#fff;transform:scale(1.1)}
.dots{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.dots button{width:10px;height:10px;padding:0;border:0;border-radius:99px;background:currentColor;opacity:.3;cursor:pointer;transition:.35s}
.dots button.on{width:30px;background:var(--sf);opacity:1}
@media(max-width:600px){.trk figure{flex-basis:88%;aspect-ratio:1/1;border-radius:22px}.ci{aspect-ratio:3/2}}
@media(max-width:480px){.gr{gap:1rem}.hero .cta .btn{flex:1 1 100%}}
@media print{header,footer,#up,#wa,.no{display:none!important}}

.dd{position:relative}.sm{position:absolute;top:100%;left:-1rem;min-width:210px;background:var(--s);border:1px solid var(--ln);border-radius:20px;padding:.6rem;display:grid;opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s;box-shadow:0 24px 48px -24px #0006}
.dd:hover .sm,.dd:focus-within .sm{opacity:1;visibility:visible;transform:none}
.sm a{padding:.55rem .8rem!important;border-radius:12px;background:none!important}.sm a:hover{background:var(--sf2)!important}
.dd>a:after{content:" ▾";font-size:.7em}
@media(max-width:900px){.sm{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;padding:0 0 .4rem 1rem;background:none}.sm a{padding:.7rem 0!important;border-radius:0}.dd>a:after{content:""}}
.tag{display:inline-block;background:var(--sf2);color:var(--cr);border-radius:99px;padding:.15rem .75rem;font:600 .78rem 'Plus Jakarta Sans',system-ui,sans-serif}
.meta{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;font-size:.85rem;color:var(--mu);margin-bottom:.5rem}
.hd{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 0}
.chips button{min-height:42px;padding:.4rem 1.1rem;border-radius:99px;border:2px solid var(--ln);background:none;color:var(--ink);font:600 .92rem 'Plus Jakarta Sans',system-ui,sans-serif;cursor:pointer;transition:.2s}
.chips button[aria-pressed=true]{background:var(--cr);border-color:var(--cr);color:var(--s)}
.sr{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap}.sr input{flex:1 1 220px}
.ev{display:grid;grid-template-columns:84px 1fr;gap:1.2rem;background:var(--s);border:1px solid var(--ln);border-radius:24px;padding:1rem 1.2rem;margin-top:1rem;transition:.3s}.ev:hover{transform:translateX(8px);border-color:var(--sf)}
.ev .dt{background:linear-gradient(160deg,var(--cr),var(--dp));color:#fff;border-radius:18px;text-align:center;padding:.7rem 0;font:800 1.9rem/1 'Fraunces',system-ui,sans-serif;align-self:start}.ev .dt small{display:block;font:600 .75rem 'Plus Jakarta Sans',system-ui,sans-serif;margin-top:.3rem;letter-spacing:.1em}
.ev p{margin:.2rem 0 0}
.em{padding:2rem;text-align:center;color:var(--mu);border:2px dashed var(--ln);border-radius:24px;max-width:none;margin-top:1.5rem}
.art{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(1.5rem,5vw,3.5rem);align-items:start}@media(max-width:820px){.art{grid-template-columns:1fr}}
.art .pic{position:sticky;top:96px}@media(max-width:820px){.art .pic{position:static}}
.prose li{margin:.3rem 0}
.ph3{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.6rem;margin:1.5rem 0}.ph3 img{border-radius:14px;aspect-ratio:1;object-fit:cover;width:100%}
.shr{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.5rem}
.c.rg{padding:1.6rem}
.badge{display:inline-block;border-radius:99px;padding:.15rem .8rem;font:700 .78rem 'Plus Jakarta Sans',system-ui,sans-serif;background:#1faa5922;color:#12803f}.badge.p{background:#d9432b22;color:var(--sf)}
:root[data-t=dark] .badge{color:#5fe39a}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.2rem .9rem;font-size:.95rem;margin:.8rem 0}.kv dt{color:var(--mu)}.kv dd{margin:0;word-break:break-word}
.dlr{display:flex;align-items:center;gap:1rem;background:var(--s);border:1px solid var(--ln);border-radius:20px;padding:1rem 1.2rem;margin-top:.8rem;flex-wrap:wrap}.dlr b{flex:1 1 220px}
.ad table{width:100%;border-collapse:collapse;margin:1rem 0}.ad td{padding:.6rem .4rem;border-bottom:1px solid var(--ln)}.ad td:last-child{white-space:nowrap;text-align:right}
.sm2{min-height:38px;padding:.2rem 1rem;border-radius:99px;border:2px solid var(--ln);background:none;color:var(--ink);cursor:pointer;font:600 .9rem 'Plus Jakarta Sans',system-ui,sans-serif}
.ad .tb{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1rem}
.ad .tb label{margin:0;display:flex;align-items:center;gap:.5rem}.ad .tb input{width:auto;min-height:0}

.sub{display:flex;gap:.4rem;margin-top:1rem}.sub input{min-height:42px;flex:1;min-width:0}.sub .btn{min-height:42px;padding:.3rem 1rem}

.logo i{overflow:hidden;background:none}.logo i img{width:100%;height:100%;border-radius:50%;display:block}
.inner{background:linear-gradient(135deg,rgba(6,47,58,.9),rgba(13,122,120,.72)),url(../img/banner.jpg) center/cover,linear-gradient(135deg,var(--dp),var(--cr))}
.cta-b{background:linear-gradient(135deg,rgba(13,122,120,.93),rgba(6,47,58,.9)),url(../img/cta.jpg) center/cover,linear-gradient(135deg,var(--cr),var(--dp))}
.stp{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:.4rem 0 1.4rem;position:relative}
.stp:before{content:"";position:absolute;top:21px;left:16%;right:16%;height:3px;background:var(--ln)}
.stp div{text-align:center;font-size:.82rem;position:relative;line-height:1.3}
.stp i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;margin:0 auto .5rem;background:var(--s);border:3px solid var(--ln);font-style:normal;font-weight:700;transition:.5s}
.stp .d i{background:var(--cr);color:var(--s);border-color:var(--cr);animation:pop .5s both}
.stp .c i{background:var(--sf);color:#fff;border-color:var(--sf);animation:pulse 1.8s infinite}
@keyframes pop{from{transform:scale(.3)}}@keyframes pulse{50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--sf) 22%,transparent)}}

#ts{opacity:0;visibility:hidden;pointer-events:none;transition:transform .3s,opacity .3s,visibility .3s}#ts.s{opacity:1;visibility:visible}

/* ===== content protection ===== */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable="true"],.allow-copy,.allow-copy *,.bank,.bank *,#rc,.pan,.kv,.kv *,a[href^="tel:"],a[href^="mailto:"]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
img,svg,video,canvas{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none}
.gal img,.tr img,.trk img,.ph2 img,.pic img,.fig img,.av img,.logo img{pointer-events:none}
#cpn{position:fixed;left:50%;top:calc(80px + env(safe-area-inset-top,0px));transform:translate(-50%,-30px);background:#062f3a;color:#fff;padding:.6rem 1.2rem;border-radius:99px;font:600 .9rem 'Plus Jakarta Sans',system-ui,sans-serif;z-index:120;opacity:0;visibility:hidden;pointer-events:none;transition:.3s;max-width:92vw;text-align:center;box-shadow:0 12px 30px -12px #000a}
#cpn.s{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media print{img,video{display:none!important}body:after{content:"© JKYWDS. Content on this website is protected by copyright.";display:block;text-align:center;margin-top:2rem;font-size:12px}}

/* hero: let the photographs show through */
.hero:before{background:linear-gradient(90deg,rgba(4,32,42,.66),rgba(4,32,42,.08) 85%)}
.hero h1,.hero .lead{text-shadow:0 2px 18px rgba(10,4,30,.55)}
@media(max-width:700px){.hero:before{background:linear-gradient(180deg,rgba(4,32,42,.05) 0%,rgba(4,32,42,.25) 40%,rgba(4,32,42,.82) 100%)}}

/* =====================================================================
   COOL BACKGROUND + ICON ANIMATIONS + WELCOME SPLASH  (added)
   ===================================================================== */
:root{--bg:#eefaf7}
:root[data-t=dark]{--bg:#061a1f}
html{background:linear-gradient(160deg,#eefaf7 0%,#e6f7f5 46%,#fff4e0 100%) fixed}
html[data-t=dark]{background:linear-gradient(160deg,#061a1f 0%,#08222b 50%,#12242e 100%) fixed}
body{background:transparent}
body:before{content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;will-change:transform;
 background:radial-gradient(38% 38% at 14% 22%,rgba(20,184,166,.24),transparent 70%),radial-gradient(34% 34% at 86% 14%,rgba(255,125,92,.20),transparent 70%),radial-gradient(40% 40% at 72% 86%,rgba(20,184,166,.18),transparent 70%),radial-gradient(30% 30% at 20% 85%,rgba(245,185,66,.12),transparent 70%);animation:aurora 26s ease-in-out infinite alternate}
html[data-t=dark] body:before{background:radial-gradient(38% 38% at 14% 22%,rgba(20,184,166,.34),transparent 70%),radial-gradient(34% 34% at 86% 14%,rgba(255,125,92,.20),transparent 70%),radial-gradient(40% 40% at 72% 86%,rgba(20,184,166,.24),transparent 70%),radial-gradient(30% 30% at 20% 85%,rgba(245,185,66,.16),transparent 70%)}
@keyframes aurora{to{transform:translate3d(4%,-3%,0) rotate(6deg) scale(1.12)}}
.alt{background:color-mix(in srgb,var(--sf2) 62%,transparent);backdrop-filter:blur(2px)}
/* ---- animated icons ---- */
.logo i{animation:logoGlow 3.6s ease-in-out infinite;transition:transform .7s cubic-bezier(.3,1.4,.4,1)}
.logo:hover i{transform:rotate(360deg) scale(1.1)}
.logo i img{animation:slowSpin 36s linear infinite}
@keyframes logoGlow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sf) 45%,transparent)}50%{box-shadow:0 0 0 10px transparent}}
@keyframes slowSpin{to{transform:rotate(360deg)}}
#tg{transition:transform .6s cubic-bezier(.3,1.4,.4,1),background .3s}#tg:hover{transform:rotate(200deg) scale(1.12);background:var(--sf2)}
.menu>.btn:not(.g),.cta-b .btn:not(.g){animation:beat 3s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}8%{transform:scale(1.07)}16%{transform:scale(1)}24%{transform:scale(1.05)}32%{transform:scale(1)}}
.dd>a:after{display:inline-block;transition:transform .3s}.dd:hover>a:after{transform:rotate(180deg)}
#wa{animation:waWiggle 7s ease-in-out infinite;overflow:visible}
#wa:before{content:"";position:absolute;inset:0;border-radius:99px;border:2px solid #1faa59;animation:ripple 2.4s ease-out infinite;pointer-events:none}
@keyframes ripple{from{transform:scale(1);opacity:.8}to{transform:scale(1.35,1.7);opacity:0}}
@keyframes waWiggle{0%,86%,100%{transform:none}90%{transform:rotate(-4deg) translateY(-3px)}94%{transform:rotate(4deg)}97%{transform:rotate(-2deg)}}
#up{animation:bob 2.2s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-6px)}}
.ico,.tc svg,.bdg svg{transition:transform .4s cubic-bezier(.3,1.5,.4,1)}.bdg svg{animation:bob 3.4s ease-in-out infinite}
.tc a:hover svg,.panel:hover .bdg svg{transform:scale(1.25) rotate(-10deg)}
.c .e{display:inline-block;animation:bob 3.6s ease-in-out infinite}.c:nth-child(2n) .e{animation-delay:-1.2s}.c:nth-child(3n) .e{animation-delay:-2.4s}
.sb:hover{animation:wob .5s}@keyframes wob{30%{transform:scale(1.25) rotate(-8deg)}60%{transform:scale(1.15) rotate(6deg)}}
.f b,.st b{display:inline-block;animation:bob 4.5s ease-in-out infinite}
.hd .ln,.c .ln{position:relative}
.eyebrow{box-shadow:0 0 0 0 rgba(255,255,255,.4);animation:shim 3.2s linear infinite,up .8s both,ping 3s infinite}@keyframes ping{70%{box-shadow:0 0 0 12px transparent}}

/* ---- welcome splash (flash cards with quotes) ---- */
html.sp-lock{overflow:hidden}
#splash{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.7rem,2vh,1.2rem);padding:calc(1rem + env(safe-area-inset-top,0px)) 1rem calc(1rem + env(safe-area-inset-bottom,0px));overflow:hidden;color:#fff;background:#031820;isolation:isolate;-webkit-user-select:none;user-select:none}
#splash.out{animation:spExit .95s cubic-bezier(.76,0,.24,1) forwards;pointer-events:none}
@keyframes spExit{from{clip-path:circle(150% at 50% 88%)}to{clip-path:circle(0% at 50% 88%)}}
.sp-bg{position:absolute;inset:0;z-index:-3}.sp-bg i{position:absolute;inset:0;background:center/cover;opacity:0;transform:scale(1.12);transition:opacity 1.4s,transform 9s linear}.sp-bg i.on{opacity:.55;transform:scale(1)}
#splash:before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(60% 50% at 20% 10%,rgba(20,184,166,.55),transparent 70%),radial-gradient(50% 50% at 90% 90%,rgba(255,125,92,.40),transparent 70%),linear-gradient(180deg,rgba(3,24,32,.78),rgba(3,24,32,.9))}
.sp-orb{position:absolute;border-radius:50%;filter:blur(46px);opacity:.5;z-index:-1;animation:blob 14s ease-in-out infinite alternate}
.sp-orb.o1{width:320px;height:320px;background:#14b8a6;left:-90px;top:8%}.sp-orb.o2{width:280px;height:280px;background:#ff7d5c;right:-60px;bottom:10%;animation-delay:-6s}.sp-orb.o3{width:200px;height:200px;background:#f5b942;right:30%;top:-60px;animation-delay:-9s}
.sp-lf{position:absolute;top:-8%;left:var(--x);font-size:1.4rem;opacity:.75;z-index:-1;animation:fall linear infinite}
.sp-top{width:min(980px,100%);display:flex;align-items:center;gap:.7rem}
.sp-top img{width:42px;height:42px;border-radius:50%;animation:slowSpin 30s linear infinite}
.sp-top b{font:800 1.15rem 'Fraunces',system-ui,sans-serif;letter-spacing:.02em}.sp-top small{display:block;font:500 .72rem 'Plus Jakarta Sans',system-ui,sans-serif;opacity:.75}
.sp-skip{margin-left:auto;min-height:40px;padding:.3rem 1.1rem;border-radius:99px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);color:#fff;font:600 .9rem 'Plus Jakarta Sans',system-ui,sans-serif;cursor:pointer;transition:.25s}.sp-skip:hover{background:#fff;color:#062f3a}
.sp-card{position:relative;width:min(980px,100%);display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1rem,3vw,2rem);padding:clamp(.8rem,2vw,1.2rem);border-radius:34px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 40px 90px -30px #000c,inset 0 1px 0 rgba(255,255,255,.35);max-height:calc(100dvh - 210px);overflow:auto;perspective:1200px;transform-style:preserve-3d}
.sp-card.out{animation:cardOut .32s ease-in forwards}.sp-card.in{animation:cardIn .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes cardOut{to{opacity:0;transform:rotateY(80deg) scale(.92)}}@keyframes cardIn{from{opacity:0;transform:rotateY(-80deg) scale(.92)}}
.sp-art{position:relative;border-radius:26px;overflow:hidden;min-height:260px;background:linear-gradient(135deg,#0d7a78,#d9432b)}
.sp-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.sp-card.in .sp-art img{animation:kb 9s ease-out both}
.sp-art:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(3,24,32,.75))}
.sp-tag{position:absolute;left:14px;bottom:14px;z-index:2;padding:.3rem .9rem;border-radius:99px;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);font:700 .78rem 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.sp-txt{display:flex;flex-direction:column;justify-content:center;gap:.5rem;padding:.4rem .6rem .8rem;text-align:center}
.sp-card.in .sp-txt>*{animation:up .8s cubic-bezier(.2,.8,.2,1) both}.sp-card.in .sp-txt>:nth-child(2){animation-delay:.12s}.sp-card.in .sp-txt>:nth-child(3){animation-delay:.24s}.sp-card.in .sp-txt>:nth-child(4){animation-delay:.36s}
.sp-txt p{margin:0;max-width:none}
.sp-ar{font:700 clamp(1.7rem,4.4vw,2.7rem)/1.9 Amiri,'Traditional Arabic','Scheherazade New','Noto Naskh Arabic',serif;color:#ffe3b3;text-shadow:0 2px 24px rgba(255,125,92,.5)}
.sp-ur{font:400 clamp(1.1rem,2.9vw,1.65rem)/2.4 'Noto Nastaliq Urdu','Jameel Noori Nastaleeq','Urdu Typesetting','Noto Naskh Arabic',serif;white-space:pre-line}
.sp-en{font:500 clamp(.98rem,2.3vw,1.2rem)/1.55 'Plus Jakarta Sans',system-ui,sans-serif;opacity:.95}
.sp-src{font:600 .78rem 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#ffc4a3}
.sp-prog{position:absolute;left:1.2rem;right:1.2rem;bottom:.35rem;height:3px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
.sp-prog i{display:block;height:100%;background:linear-gradient(90deg,#ff7d5c,#ffe3b3);transform-origin:0 50%;animation:spProg 7s linear forwards}
.sp-card.paused .sp-prog i{animation-play-state:paused}@keyframes spProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sp-ctl{display:flex;align-items:center;gap:.9rem}
.sp-ctl button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;transition:.25s}.sp-ctl button:hover{background:#fff;color:#062f3a;transform:scale(1.1)}
.sp-dots{display:flex;gap:.5rem}.sp-dots b{width:10px;height:10px;border-radius:99px;background:rgba(255,255,255,.35);transition:width .4s,background .4s;cursor:pointer}.sp-dots b[aria-current=true]{width:34px;background:#ff7d5c}
.sp-enter{position:relative;min-height:54px;padding:.8rem 2.2rem;border-radius:99px;border:0;background:linear-gradient(135deg,#ff7d5c,#d9432b);color:#fff;font:700 1.1rem 'Fraunces',system-ui,sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:.7rem;box-shadow:0 18px 40px -14px #d9432b;animation:enterPulse 2.4s ease-in-out infinite;transition:transform .2s}
.sp-enter:hover{transform:translateY(-3px) scale(1.04)}.sp-enter span{display:inline-block;animation:nudge 1.3s ease-in-out infinite}
@keyframes enterPulse{0%,100%{box-shadow:0 18px 40px -14px #d9432b,0 0 0 0 rgba(255,125,92,.55)}50%{box-shadow:0 18px 40px -14px #d9432b,0 0 0 16px transparent}}@keyframes nudge{50%{transform:translateX(7px)}}
.sp-hint{margin:0;font:500 .82rem 'Plus Jakarta Sans',system-ui,sans-serif;opacity:.7;text-align:center;max-width:46ch}
html.sp-enter header{animation:hdrIn .9s .25s cubic-bezier(.2,.8,.2,1) both}@keyframes hdrIn{from{transform:translateY(-100%)}}
@media(max-width:760px){.sp-card{grid-template-columns:1fr;border-radius:28px;max-height:calc(100dvh - 190px)}.sp-art{min-height:150px;height:150px}.sp-top small{display:none}}
@media(max-height:620px){.sp-hint{display:none}.sp-art{min-height:110px;height:110px}}
@media print{#splash{display:none!important}}

/* =====================================================================
   v7: top bar, help strip, floating photos, animated submit buttons,
   language support (RTL + fonts), donation page responsiveness
   ===================================================================== */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:.5rem;top:-70px;z-index:400;background:var(--sf);color:#fff;padding:.6rem 1rem;border-radius:12px;text-decoration:none;font-weight:600;transition:top .2s}.skip:focus{top:.5rem}
/* top contact bar */
#topbar{background:linear-gradient(90deg,#04202a,#0b5f66 60%,#0d7a78);color:#fff;font:500 .82rem 'Plus Jakarta Sans',system-ui,sans-serif;position:relative;z-index:61}
#topbar .w{display:flex;align-items:center;justify-content:space-between;gap:.8rem;min-height:40px;padding-block:.2rem}
#topbar a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .1rem;transition:color .2s}#topbar a:hover{color:#ffc4a3}
.tb-l{display:flex;flex-wrap:wrap;gap:.1rem 1.1rem;align-items:center}
.tb-ic{display:inline-block;animation:ring 4s ease-in-out infinite;transform-origin:50% 60%}
@keyframes ring{0%,86%,100%{transform:none}89%{transform:rotate(-16deg)}92%{transform:rotate(14deg)}95%{transform:rotate(-8deg)}98%{transform:rotate(4deg)}}
#langsel{width:auto;min-height:32px;padding:.15rem 1.9rem .15rem .8rem;border-radius:99px;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") no-repeat right .7rem center;color:#fff;font:600 .82rem 'Plus Jakarta Sans',system-ui,sans-serif;-webkit-appearance:none;appearance:none;cursor:pointer;transition:background-color .2s}
#langsel:hover{background-color:rgba(255,255,255,.22)}#langsel option{color:#111;background:#fff}
@media(max-width:700px){.tb-mail{display:none}#topbar .w{min-height:36px}}
@media(max-width:380px){#topbar a:nth-child(2){display:none}}
/* help strip */
.helpbar{padding:1.1rem 0;background:linear-gradient(90deg,rgba(20,184,166,.14),rgba(255,125,92,.16));border-top:1px solid var(--ln)}
.helpbar .w{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center;justify-content:center;text-align:center;font-weight:500}
.helpbar a{font-weight:700;color:var(--cr);text-decoration:none;word-break:break-all}.helpbar a:hover{color:var(--sf)}
/* floating gallery photos */
.hero>.w,.inner>.w,.ab-hero>.w{position:relative;z-index:2}
.fpics{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.fpics figure{position:absolute;margin:0;width:var(--fw,150px);aspect-ratio:4/5;padding:6px 6px 24px;background:#fff;border-radius:6px;box-shadow:0 24px 44px -16px rgba(0,0,0,.65);right:var(--fr);top:var(--ft);transform:translate3d(calc(var(--mx,0)*var(--fp,1)*-46px),calc(var(--my,0)*var(--fp,1)*-30px),0);rotate:var(--rot,0deg);animation:fpIn .9s cubic-bezier(.2,.8,.2,1) both,fpf 7s ease-in-out infinite;animation-delay:calc(var(--k)*.18s + .5s),calc(var(--k)*-1.5s);transition:transform .25s ease-out}
@keyframes fpIn{from{opacity:0;scale:.55}to{opacity:1;scale:1}}@keyframes fpf{0%,100%{translate:0 0}50%{translate:0 -16px}}
.fpics img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.fpics figcaption{position:absolute;left:8px;right:8px;bottom:4px;font:600 .66rem 'Plus Jakarta Sans',system-ui,sans-serif;color:#062f3a;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fpics.big figure:nth-child(1){--fr:4%;--ft:9%;--fw:176px;--rot:6deg;--fp:1}
.fpics.big figure:nth-child(2){--fr:21%;--ft:35%;--fw:150px;--rot:-7deg;--fp:1.6}
.fpics.big figure:nth-child(3){--fr:3%;--ft:51%;--fw:190px;--rot:4deg;--fp:.7}
.fpics.big figure:nth-child(4){--fr:27%;--ft:67%;--fw:136px;--rot:-4deg;--fp:1.3}
.fpics.big figure:nth-child(5){--fr:41%;--ft:5%;--fw:124px;--rot:-9deg;--fp:1.1}
.fpics.sm figure:nth-child(1){--fr:5%;--ft:12%;--fw:118px;--rot:5deg}
.fpics.sm figure:nth-child(2){--fr:19%;--ft:38%;--fw:100px;--rot:-6deg;--fp:1.5}
.fpics.sm figure:nth-child(3){--fr:34%;--ft:8%;--fw:90px;--rot:8deg;--fp:1.2}
@media(max-width:1000px){.fpics.big figure:nth-child(n+4){display:none}.fpics.big figure{--fw:118px}.fpics.sm figure:nth-child(3){display:none}}
@media(max-width:700px){.fpics.sm{display:none}.fpics.big{opacity:.5}.fpics.big figure:nth-child(n+3){display:none}.fpics.big figure{--fw:96px}.fpics.big figure:nth-child(1){--fr:3%;--ft:4%}.fpics.big figure:nth-child(2){--fr:3%;--ft:auto;bottom:7%}}
/* ===== animated submit buttons ===== */
.ab{position:relative;overflow:hidden;transition:background-color .35s,color .35s,transform .2s,box-shadow .3s,border-color .3s}
.ab:before{content:"";position:absolute;left:var(--rx,50%);top:var(--ry,50%);width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.6);transform:translate(-50%,-50%) scale(0);pointer-events:none}
.ab.rip:before{animation:abrip .65s ease-out}@keyframes abrip{to{transform:translate(-50%,-50%) scale(26);opacity:0}}
.ab-i{position:relative;display:inline-block;flex:0 0 auto;width:0;height:22px;opacity:0;margin-inline-end:0;transition:width .3s,opacity .3s,margin .3s}
.ab[data-s] .ab-i{width:22px;opacity:1;margin-inline-end:.6rem}
.ab-i>*{position:absolute;inset:0;margin:auto;width:22px;height:22px;opacity:0;transition:opacity .2s}
.ab-sp{border-radius:50%;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;animation:abspin .7s linear infinite}@keyframes abspin{to{transform:rotate(360deg)}}
.ab-ck,.ab-x{fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30}
.ab[data-s=loading] .ab-sp{opacity:1}
.ab[data-s=success] .ab-ck,.ab[data-s=error] .ab-x{opacity:1;animation:abdraw .5s .05s ease-out forwards}@keyframes abdraw{to{stroke-dashoffset:0}}
.ab[data-s=loading]{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.2) 0 12px,transparent 12px 24px);background-size:34px 34px;animation:abstripe .9s linear infinite;cursor:progress}@keyframes abstripe{to{background-position:34px 0}}
.ab[data-s=loading]:after{content:"";position:absolute;left:0;bottom:0;height:3px;width:40%;background:rgba(255,255,255,.9);border-radius:3px;animation:abbar 1.4s ease-in-out infinite}@keyframes abbar{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
.ab[data-s=success]{background:linear-gradient(135deg,#16a34a,#0f7a37)!important;color:#fff!important;border-color:transparent!important;animation:abpop .5s cubic-bezier(.3,1.6,.4,1)}@keyframes abpop{0%{transform:scale(.94)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
.ab[data-s=error]{background:linear-gradient(135deg,#ef4444,#b91c1c)!important;color:#fff!important;border-color:transparent!important;animation:abshake .5s}@keyframes abshake{15%{transform:translateX(-8px)}30%{transform:translateX(7px)}45%{transform:translateX(-5px)}60%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.ab:disabled{opacity:1}
.cfw{position:fixed;z-index:500;pointer-events:none}.cfw i{position:absolute;left:0;top:0;width:7px;height:11px;border-radius:2px;background:var(--c);animation:cf .95s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes cf{from{transform:translate(0,0) rotate(0);opacity:1}to{transform:translate(var(--dx),calc(var(--dy) + 40px)) rotate(var(--r));opacity:0}}
/* message under the button */
.fm{display:flex;align-items:flex-start;flex-wrap:wrap;gap:.55rem;margin:1rem 0 0;padding:.8rem 1rem;border-radius:16px;font-size:.95rem;line-height:1.45;max-width:none;animation:fmIn .45s cubic-bezier(.2,.8,.2,1) both}
.fm svg{flex:0 0 22px;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.fm span{flex:1 1 200px}.fm.ok{background:#16a34a1f;color:#0f7a37;border:1px solid #16a34a55}.fm.err{background:#ef44441c;color:#b91c1c;border:1px solid #ef444455}
:root[data-t=dark] .fm.ok{color:#5fe39a}:root[data-t=dark] .fm.err{color:#ff9b9b}
.fm-wa{flex:1 0 100%;font-weight:700;color:inherit;text-decoration:underline;padding-top:.2rem}
@keyframes fmIn{from{opacity:0;transform:translateY(-8px) scale(.98)}}
.sub .fm{flex-basis:100%;margin-top:.5rem;font-size:.82rem;padding:.5rem .7rem}
.bt{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}.bt .btn{width:auto;margin-top:0;flex:1 1 160px}
.bx.sk{display:grid;gap:.8rem}.bx.sk i{display:block;height:20px;border-radius:10px;background:linear-gradient(90deg,var(--sf2),var(--ln),var(--sf2));background-size:200% 100%;animation:sk 1.2s linear infinite}.bx.sk i:nth-child(1){width:70%;height:44px}.bx.sk i:nth-child(3){width:50%}@keyframes sk{to{background-position:-200% 0}}
/* ===== donation page: small screens ===== */
#status .bx,#df,.ok{min-width:0}
.kv dd{overflow-wrap:anywhere}
@media(max-width:560px){.stp{gap:.2rem}.stp div{font-size:.72rem}.stp i{width:38px;height:38px}.stp:before{top:19px}.am button{min-height:50px;font-size:1.05rem}.bx{border-radius:22px}.bt .btn{flex-basis:100%}}
/* ===== languages ===== */
html[dir=rtl] body{text-align:start}
html[dir=rtl] .fig{float:left;margin:.2rem 1.8rem 1rem 0}
html[dir=rtl] .fig+p::first-letter{float:right;padding:.35rem 0 0 .6rem}
html[dir=rtl] .tl:before,html[dir=rtl] .tl:after,html[dir=rtl] .jr:before,html[dir=rtl] .jr:after{left:auto;right:12px}
html[dir=rtl] .jr li{padding:0 3.2rem 2.2rem 0}html[dir=rtl] .jr li:before{left:auto;right:4px}
html[dir=rtl] .bq{border-left:0;border-right:6px solid var(--sf);border-radius:26px 0 0 26px}
html[dir=rtl] .sh{padding-left:0;padding-right:1rem}html[dir=rtl] .sh:before{left:auto;right:0}
html[dir=rtl] .ln:after{content:" ←"}
html[dir=rtl] .sb.pv{left:auto;right:-8px}html[dir=rtl] .sb.nx{right:auto;left:-8px}
html[dir=rtl] .fpics figure{right:auto;left:var(--fr)}
html[dir=rtl] #wa{left:auto;right:1rem}html[dir=rtl] #up{right:auto;left:1rem}
html[dir=rtl] .eyebrow,html[dir=rtl] .kick{letter-spacing:0}
html[lang=ur] body,html[lang=ur] input,html[lang=ur] button,html[lang=ur] select,html[lang=ur] textarea{font-family:'Noto Nastaliq Urdu','Jameel Noori Nastaleeq','Noto Naskh Arabic',Plus Jakarta Sans,system-ui,serif}
html[lang=ur] body{line-height:2.1}html[lang=ur] h1,html[lang=ur] h2,html[lang=ur] h3,html[lang=ur] h4{line-height:1.7;letter-spacing:0}
html[lang=ar] body,html[lang=ar] input,html[lang=ar] button,html[lang=ar] select,html[lang=ar] textarea{font-family:'Noto Naskh Arabic','Amiri','Traditional Arabic',Plus Jakarta Sans,system-ui,serif}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3,html[lang=ar] h4{letter-spacing:0;line-height:1.35}
html[lang=hi] body,html[lang=hi] input,html[lang=hi] button,html[lang=hi] select,html[lang=hi] textarea{font-family:'Noto Sans Devanagari','Mangal','Nirmala UI',Plus Jakarta Sans,system-ui,sans-serif}
html[lang=hi] h1,html[lang=hi] h2,html[lang=hi] h3{letter-spacing:0;line-height:1.3}
html[lang=ur] .logo,html[lang=ar] .logo,html[lang=hi] .logo{letter-spacing:0}
@media print{#topbar,.helpbar,.fpics{display:none!important}}
#langsel{max-width:150px;text-overflow:ellipsis}.tb-r{flex:0 0 auto;min-width:0}.tb-l{min-width:0}
@media(max-width:480px){#langsel{max-width:112px;padding-inline-start:.6rem;padding-inline-end:1.6rem;font-size:.78rem}#topbar .w{gap:.4rem}.tb-l{gap:.1rem .7rem;font-size:.78rem}}
a[href^="tel:"]{direction:ltr;unicode-bidi:isolate}
@media(max-width:700px){#topbar .tb-mail{display:none}}

/* =====================================================================
   v8: top slideshow with image text + new animations
   ===================================================================== */
/* ---------- slideshow ---------- */
.ss{position:relative;height:clamp(500px,86vh,740px);overflow:hidden;color:#fff;isolation:isolate;background:#04202a}
.ss-slide{position:absolute;inset:0;display:grid;align-items:center;visibility:hidden;z-index:0}
.ss-slide.prev{visibility:visible;z-index:1}
.ss-slide.on{visibility:visible;z-index:2;animation:ssWipe 1s cubic-bezier(.7,0,.2,1) both}
.ss-slide.on.init{animation:none}
.ss.back .ss-slide.on{animation-name:ssWipeB}
html[dir=rtl] .ss-slide.on{animation-name:ssWipeB}html[dir=rtl] .ss.back .ss-slide.on{animation-name:ssWipe}
@keyframes ssWipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes ssWipeB{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.ss-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.06);pointer-events:none}
.ss-slide.on img{animation:ssKb 9s ease-out both}
@keyframes ssKb{from{transform:scale(1.2) translate(2%,1.5%)}to{transform:scale(1.04)}}
.ss-slide:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(20,8,48,.9) 0%,rgba(20,8,48,.58) 46%,rgba(20,8,48,.12) 100%),linear-gradient(0deg,rgba(20,8,48,.6),transparent 42%)}
html[dir=rtl] .ss-slide:before{background:linear-gradient(270deg,rgba(20,8,48,.9) 0%,rgba(20,8,48,.58) 46%,rgba(20,8,48,.12) 100%),linear-gradient(0deg,rgba(20,8,48,.6),transparent 42%)}
.ss-in{position:relative;width:min(1140px,100% - 2.5rem);margin-inline:auto;padding-block:4.5rem 7rem}
.ss-kick{display:inline-flex;align-items:center;gap:.6rem;padding:.4rem 1.1rem;border-radius:99px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:700 .78rem 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.ss-kick:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sf);box-shadow:0 0 0 0 var(--sf);animation:ping 2.4s infinite}
.ss-t{font:800 clamp(2.1rem,6.2vw,4.9rem)/1.04 'Fraunces',system-ui,sans-serif;letter-spacing:-.035em;max-width:15ch;margin:1.2rem 0 1rem;text-shadow:0 6px 40px rgba(0,0,0,.45);color:#fff}
.ss-t span{display:inline-block}
.ss-p{font-size:clamp(1.02rem,2.3vw,1.35rem);max-width:40ch;margin:0 0 1.8rem;opacity:.96;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.ss-cta{display:flex;flex-wrap:wrap;gap:.8rem}
.ss-cta .btn.g{color:#fff}
/* text enters one piece at a time (only when motion is allowed) */
@media(prefers-reduced-motion:no-preference){
.ss-slide .ss-kick,.ss-slide .ss-t span,.ss-slide .ss-p,.ss-slide .ss-cta .btn{opacity:0}
.ss-slide.prev .ss-kick,.ss-slide.prev .ss-t span,.ss-slide.prev .ss-p,.ss-slide.prev .ss-cta .btn{opacity:1}
.ss-slide.on .ss-kick{animation:ssUp .8s .55s cubic-bezier(.2,.8,.2,1) both}
.ss-slide.on .ss-t span{animation:ssWord .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.7s + var(--i)*.09s)}
.ss-slide.on .ss-p{animation:ssUp .9s 1.15s cubic-bezier(.2,.8,.2,1) both}
.ss-slide.on .ss-cta .btn{animation:ssPop .7s cubic-bezier(.3,1.5,.4,1) both}.ss-slide.on .ss-cta .btn:nth-child(1){animation-delay:1.35s}.ss-slide.on .ss-cta .btn:nth-child(2){animation-delay:1.5s}
.ss-slide.on.init .ss-kick{animation-delay:.2s}.ss-slide.on.init .ss-t span{animation-delay:calc(.35s + var(--i)*.09s)}.ss-slide.on.init .ss-p{animation-delay:.8s}.ss-slide.on.init .ss-cta .btn:nth-child(1){animation-delay:1s}.ss-slide.on.init .ss-cta .btn:nth-child(2){animation-delay:1.15s}
}
@keyframes ssUp{from{opacity:0;transform:translateY(28px)}to{opacity:1}}
@keyframes ssWord{from{opacity:0;transform:translateY(60px) rotate(4deg);filter:blur(8px)}to{opacity:1}}
@keyframes ssPop{from{opacity:0;transform:scale(.7)}to{opacity:1}}
/* arrows, counter, progress dots */
.ss-ar{position:absolute;top:50%;translate:0 -50%;z-index:6;width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:1.8rem;line-height:1;cursor:pointer;transition:background .3s,color .3s,scale .3s}
.ss-pv{left:1.2rem}.ss-nx{right:1.2rem}.ss-ar:hover{background:#fff;color:#062f3a;scale:1.12}
html[dir=rtl] .ss-pv{left:auto;right:1.2rem}html[dir=rtl] .ss-nx{right:auto;left:1.2rem}
.ss-ui{position:absolute;left:0;right:0;bottom:1.7rem;z-index:6;display:flex;align-items:center;justify-content:center;gap:1.3rem}
.ss-count{font:800 1rem 'Fraunces',system-ui,sans-serif;letter-spacing:.1em;opacity:.9}.ss-count b{font-size:1.7rem}
.ss-dots{display:flex;gap:.55rem}
.ss-dots button{position:relative;width:46px;height:5px;padding:0;border:0;border-radius:5px;background:rgba(255,255,255,.35);overflow:visible;cursor:pointer}
.ss-dots button:before{content:"";position:absolute;inset:-14px -3px}
.ss-dots button i{position:absolute;inset:0;border-radius:5px;background:#fff;transform:scaleX(0);transform-origin:0 50%}
html[dir=rtl] .ss-dots button i{transform-origin:100% 50%}
.ss-dots button.on i{animation:ssProg var(--d,6500ms) linear forwards}
.ss.paused .ss-dots button.on i{animation-play-state:paused}
@keyframes ssProg{to{transform:scaleX(1)}}
/* floating photos sit on the slideshow */
.ss .fpics{z-index:3}
.fpics.ssf figure:nth-child(1){--fr:6%;--ft:13%;--fw:150px;--rot:6deg;--fp:1}
.fpics.ssf figure:nth-child(2){--fr:19%;--ft:50%;--fw:128px;--rot:-7deg;--fp:1.6}
.fpics.ssf figure:nth-child(3){--fr:5%;--ft:58%;--fw:112px;--rot:4deg;--fp:.8}
@media(max-width:1100px){.fpics.ssf{display:none}}
@media(max-width:700px){.ss{height:clamp(520px,92svh,700px)}.ss-in{padding-block:3.2rem 6.2rem}.ss-ar{display:none}.ss-dots button{width:34px}.ss-count{display:none}}
.hero.sr-only{pointer-events:none}
/* ---------- new animations everywhere ---------- */
/* page fades in */
@media(prefers-reduced-motion:no-preference){main{animation:pageIn .7s cubic-bezier(.2,.8,.2,1) both}}
@keyframes pageIn{from{opacity:0;translate:0 16px}}
/* heading underline draws itself */
main>section>.w>h2:after,main>section>.w>.hd>h2:after{content:"";display:block;width:68px;height:4px;border-radius:4px;margin-top:.7rem;background:linear-gradient(90deg,var(--sf),var(--cr));transform-origin:0 50%}
html[dir=rtl] main>section>.w>h2:after,html[dir=rtl] main>section>.w>.hd>h2:after{transform-origin:100% 50%}
.touch h2:after{margin-inline:auto}
@supports(animation-timeline:view()){main>section>.w>h2:after,main>section>.w>.hd>h2:after{transform:scaleX(0);animation:lineGrow linear both;animation-timeline:view();animation-range:entry 5% cover 30%}@keyframes lineGrow{to{transform:scaleX(1)}}}
/* buttons: light sweep on hover */
.btn:not(.ab){position:relative;overflow:hidden}
.btn:not(.ab):after{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.4),transparent);transform:translateX(-130%) skewX(-18deg);pointer-events:none}
.btn:not(.ab):hover:after{animation:btnShine .8s ease}
@keyframes btnShine{to{transform:translateX(260%) skewX(-18deg)}}
/* cards: shine across the photo + glowing edge */
.c.im .ph2:before{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;z-index:2;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-140%) skewX(-18deg);pointer-events:none}
.c.im:hover .ph2:before{animation:btnShine .9s ease}
.c.im:hover{box-shadow:0 26px 50px -26px #0008,0 0 0 2px color-mix(in srgb,var(--sf) 55%,transparent)}
/* pictures come in sharp from a soft blur */
@media(prefers-reduced-motion:no-preference){.ph2 img,.fig img{animation:imgIn 1s ease-out both}}
@keyframes imgIn{from{filter:blur(14px) saturate(.6);scale:1.1}}
/* scroll-linked picture drift */
@supports(animation-timeline:view()){.pic img{scale:1.14;animation:drift linear both;animation-timeline:view()}@keyframes drift{from{translate:0 -5%}to{translate:0 5%}}}
/* statistics shimmer */
.st b,.f b{background:linear-gradient(100deg,#ffc4a3 20%,#fff 45%,#ffc4a3 70%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:numShine 4.5s linear infinite}
.f b{background-image:linear-gradient(100deg,var(--cr) 20%,var(--sf) 45%,var(--cr) 70%)}
@keyframes numShine{to{background-position:-220% 0}}
/* page banner titles glow */
.inner h1{background:linear-gradient(100deg,#fff 35%,#ffe3b3 50%,#fff 65%);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:titleShine 7s linear infinite}
@keyframes titleShine{to{background-position:-240% 0}}
/* menu drop-down items slide in one by one */
.dd:hover .sm a,.dd:focus-within .sm a{animation:smIn .35s cubic-bezier(.2,.8,.2,1) both}
.dd .sm a:nth-child(2){animation-delay:.04s!important}.dd .sm a:nth-child(3){animation-delay:.08s!important}.dd .sm a:nth-child(4){animation-delay:.12s!important}.dd .sm a:nth-child(5){animation-delay:.16s!important}
@keyframes smIn{from{opacity:0;translate:0 -8px}}
/* footer links nudge, marquee fades at the edges */
footer a:hover{translate:4px 0}html[dir=rtl] footer a:hover{translate:-4px 0}footer a{transition:color .2s,translate .25s}
.mq{-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* call-to-action banner: moving light */
.cta-b{position:relative;overflow:hidden}
.cta-b:before{content:"";position:absolute;inset:-40%;background:radial-gradient(35% 35% at 30% 40%,rgba(255,125,92,.35),transparent 70%),radial-gradient(30% 30% at 75% 65%,rgba(139,92,246,.4),transparent 70%);animation:ctaMove 12s ease-in-out infinite alternate;pointer-events:none}
.cta-b>*{position:relative}
@keyframes ctaMove{to{transform:translate(8%,6%) rotate(10deg) scale(1.1)}}
/* skeleton shimmer behind pictures that are still loading */
.ph2{background:linear-gradient(110deg,var(--sf2) 30%,var(--ln) 50%,var(--sf2) 70%) 0 0/220% 100%;animation:skl 1.6s linear 6}
@keyframes skl{to{background-position:-220% 0}}

/* ---- v10: request-help button in the top bar ---- */
.tb-r{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
#topbar a.tb-help{display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap;padding:.28rem .85rem;border-radius:99px;background:linear-gradient(135deg,#ff7d5c,#d9432b);font-weight:700;box-shadow:0 8px 20px -10px #d9432b;animation:helpPulse 2.6s ease-in-out infinite}
#topbar a.tb-help:hover{color:#fff;filter:brightness(1.1)}
@keyframes helpPulse{0%,100%{box-shadow:0 8px 20px -10px #d9432b,0 0 0 0 rgba(255,125,92,.55)}50%{box-shadow:0 8px 20px -10px #d9432b,0 0 0 9px transparent}}
@media(max-width:560px){.tb-ht{display:none}#topbar a.tb-help{padding:.28rem .6rem}#topbar .tb-l a:nth-child(2){display:none}}