/* =====================================================================================
   Islamic character: geometric tiles, mihrab arch, lanterns, skyline, scallops, RTL/Urdu
   Loaded after site.css.
   ===================================================================================== */
:root{
  --tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.2'%3E%3Crect x='16' y='16' width='40' height='40'/%3E%3Crect x='16' y='16' width='40' height='40' transform='rotate(45 36 36)'/%3E%3Ccircle cx='36' cy='36' r='9'/%3E%3Cpath d='M0 0l16 16M72 0L56 16M0 72l16-16M72 72L56 56'/%3E%3C/g%3E%3C/svg%3E");
  --tile-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23177355' stroke-width='1.2'%3E%3Crect x='16' y='16' width='40' height='40'/%3E%3Crect x='16' y='16' width='40' height='40' transform='rotate(45 36 36)'/%3E%3Ccircle cx='36' cy='36' r='9'/%3E%3Cpath d='M0 0l16 16M72 0L56 16M0 72l16-16M72 72L56 56'/%3E%3C/g%3E%3C/svg%3E");
}
.ar{font-family:'Amiri','Noto Naskh Arabic',serif;font-weight:400;line-height:1.9}
.ar--sm{font-size:1rem}
.ar--md{font-size:1.6rem;color:var(--gold-500)}
.ar--xl{font-size:clamp(1.9rem,5.2vw,3.1rem);color:var(--gold-500);text-shadow:0 2px 18px rgba(226,176,74,.35)}

/* Top bar */
.topbar__greet{display:flex;gap:1rem;align-items:center}
.topbar__date{opacity:.85;font-size:.8rem;border-inline-start:1px solid rgba(255,255,255,.25);padding-inline-start:1rem}
.langswitch{background:var(--gold-500);color:#0b4b38!important;padding:.05rem .8rem;border-radius:99px;font-weight:700;font-size:.9rem;margin-inline-start:1rem}

/* Announcement bar */
.announce{background:var(--gold-100);border-bottom:1px solid #e6cf8d;color:#3b2a00}
.announce__in{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.55rem 0;font-size:.92rem}
.announce__tag{display:inline-flex;gap:.4rem;align-items:center;background:var(--green-800);color:#fff;padding:.15rem .7rem;border-radius:99px;font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.announce__text{flex:1;min-width:200px;color:inherit;text-decoration:none;display:flex;flex-wrap:wrap;gap:.1rem .75rem}
.announce__more{font-weight:700;color:var(--green-800);text-decoration:none;display:inline-flex;gap:.3rem;align-items:center}
@media (prefers-color-scheme:dark){.announce{background:#0f2b30;border-color:#1d4b52;color:#c4f0ec}.announce__more{color:#e2b04a}}

/* Hero */
.hero--islamic{background:radial-gradient(900px 420px at 50% -10%,rgba(226,176,74,.25),transparent 65%),linear-gradient(180deg,var(--green-900),var(--green-700) 70%,var(--green-800))}
.hero--islamic::before{background-image:var(--tile);background-size:72px;opacity:.07}
.hero__top{position:relative;text-align:center;padding-top:1.4rem}
.bismillah{margin:0;display:flex;justify-content:center;align-items:center;gap:1.2rem}
.bismillah::before,.bismillah::after{content:"";height:1px;flex:1;max-width:160px;background:linear-gradient(90deg,transparent,var(--gold-500))}
.bismillah::after{transform:scaleX(-1)}
.hero--islamic .hero__grid{padding:1.5rem 0 8rem}
@media (min-width:900px){.hero--islamic .hero__grid{grid-template-columns:1.1fr .9fr;gap:3rem;padding:2rem 0 10rem}}
.hero h1 span,.hero h1 em{display:block}
.hero h1{font-size:clamp(1.9rem,4.6vw,3.1rem)}
.hero__books{display:flex;flex-wrap:wrap;gap:1.5rem;margin:2rem 0 0}
.hero__books div{border-inline-start:2px solid var(--gold-500);padding-inline-start:.8rem}
.hero__books dt{font-size:.78rem;opacity:.8;text-transform:uppercase;letter-spacing:.06em}
.hero__books dd{margin:0;font:700 1.35rem/1.2 var(--font-head)}
.lantern{position:absolute;top:0;width:clamp(28px,4vw,50px);height:auto;transform-origin:50% 0;animation:sway 5.5s ease-in-out infinite;filter:drop-shadow(0 8px 16px rgba(226,176,74,.5));z-index:1}
.lantern--l{left:5%}
.lantern--r{right:7%;animation-delay:-2.7s}
@keyframes sway{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-3deg)}}
.skyline{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(70px,11vw,140px);color:var(--bg);pointer-events:none}

/* Mihrab (arch) carousel */
.mihrab{position:relative;width:min(100%,420px);margin-inline:auto}
.mihrab__label{display:flex;justify-content:center;gap:.5rem;align-items:center;color:var(--gold-500);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;margin:0 0 .7rem}
.mihrab__frame{position:relative;aspect-ratio:5/6;overflow:hidden;border-radius:999px 999px 18px 18px;border:3px solid var(--gold-500);
  box-shadow:0 0 0 8px rgba(226,176,74,.18),0 0 0 9px rgba(226,176,74,.5),0 28px 60px rgba(0,0,0,.4);background:var(--green-800)}
.slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s;
  background:linear-gradient(160deg,var(--g1,#0b4b38),var(--g2,#062e22));color:#fff}
.slide.is-active{opacity:1;visibility:visible}
.slide::before{content:"";position:absolute;inset:0;background-image:var(--tile);background-size:72px;opacity:.1}
.slide__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide__art{position:absolute;top:16%;left:50%;transform:translateX(-50%);display:grid;place-items:center;color:rgba(255,255,255,.92)}
.icon--hero{width:clamp(4.5rem,14vw,7rem);height:clamp(4.5rem,14vw,7rem);stroke-width:1.2}
.slide__body{position:relative;padding:3rem 1.5rem 1.6rem;background:linear-gradient(180deg,transparent,rgba(3,30,22,.82) 38%);text-align:center}
.slide__meta{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-500);margin:0 0 .35rem}
.slide__title{font-size:clamp(1.15rem,2.4vw,1.5rem);margin:0 0 .4rem}
.slide__body p{font-size:.92rem;color:rgba(255,255,255,.88);margin:0 0 .6rem}
.slide__body p:not(.slide__meta){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.slide__title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.slide__body{padding-top:2.2rem}
.link-arrow--light{color:var(--gold-500)}
.mihrab__ctrl{display:flex;justify-content:center;align-items:center;gap:.6rem;margin-top:1.1rem}
.ctl{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer}
.ctl:hover{background:rgba(255,255,255,.2)}
.dots{display:flex;gap:.45rem}
.dots button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,.4);cursor:pointer;padding:0;transition:width .25s,background .25s}
.dots button[aria-current=true]{background:var(--gold-500);width:26px;border-radius:99px}
.tone-water{--g1:#0f8a8a;--g2:#08494f}
.tone-ration{--g1:#3f8f6b;--g2:#1c4a38}
.tone-marriage{--g1:#8a3a5c;--g2:#4f1f36}
.tone-medical{--g1:#b04a5e;--g2:#5a1a2c}
.tone-education{--g1:#3b4fa6;--g2:#1f2a5d}
.tone-funeral{--g1:#0f5a43;--g2:#0b4b38}

/* Heading ornament */
.ornament{display:flex;align-items:center;justify-content:center;gap:.8rem;margin:.4rem auto .6rem;max-width:260px;color:var(--gold-600)}
.ornament span{flex:1;height:1px;background:linear-gradient(90deg,transparent,currentColor)}
.ornament span:last-child{transform:scaleX(-1)}
.ornament__star{fill:var(--gold-500);stroke:var(--gold-600);width:1.3rem;height:1.3rem}
.section--pattern{position:relative;background:var(--tint) var(--tile-dark);background-size:72px}
.section--pattern::before{content:"";position:absolute;inset:0;background:var(--tint);opacity:.93;pointer-events:none}
.section--pattern>.wrap{position:relative}

/* Ways of giving */
.grid--ways{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.way{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem;padding:1.6rem 1.2rem 1.3rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s;overflow:hidden}
.way::before{content:"";position:absolute;inset-inline:0;top:0;height:4px;background:linear-gradient(90deg,var(--green-600),var(--gold-500))}
.way:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.way__arch{display:grid;place-items:center;width:64px;height:76px;border-radius:999px 999px 10px 10px;border:2px solid var(--gold-500);background:var(--green-50);color:var(--green-700);margin-bottom:.4rem}
.way__ar{font-family:var(--font-ur);font-size:1.5rem;color:var(--green-700);line-height:1.9}
.way strong{font-size:1.1rem}
.way small{color:var(--muted);font-size:.9rem;line-height:1.55}
.way__go{margin-top:.6rem;font-weight:700;color:var(--green-700);display:inline-flex;gap:.3rem;align-items:center}
@media (prefers-color-scheme:dark){.way__arch,.way__ar,.way__go{color:#7fd1ad}}

/* Category tiles: arch icon holder */
.cat__icon{width:3.6rem;height:4.2rem;border-radius:999px 999px 10px 10px;border:2px solid var(--gold-500)}

/* Events */
.datebadge{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:72px;height:72px;flex:none;color:#0b4b38;line-height:1}
.datebadge::before,.datebadge::after{content:"";position:absolute;inset:11px;background:var(--gold-500);border-radius:3px}
.datebadge::after{transform:rotate(45deg)}
.datebadge b,.datebadge span{position:relative;z-index:1;display:block}
.datebadge b{font:700 1.3rem/1 var(--font-head)}
.datebadge span{font-size:.68rem;font-weight:700;text-transform:uppercase;margin-top:.1rem}
.datebadge--lg{width:104px;height:104px}
.datebadge--lg::before,.datebadge--lg::after{inset:16px}
.datebadge--lg b{font-size:1.9rem}
.datebadge--lg span{font-size:.8rem}
.events{display:grid;gap:1.25rem}
@media (min-width:960px){.events{grid-template-columns:1.15fr 1fr;align-items:stretch}}
.efeature{position:relative;display:grid;gap:1.25rem;padding:1.75rem;border-radius:var(--radius);color:#fff;overflow:hidden;
  background:linear-gradient(135deg,var(--g1,#0f5a43),var(--g2,#0b4b38));box-shadow:var(--shadow)}
@media (min-width:560px){.efeature{grid-template-columns:auto 1fr;align-items:center}}
.efeature::before{content:"";position:absolute;inset:0;background-image:var(--tile);background-size:72px;opacity:.08}
.efeature>*{position:relative}
.efeature>.efeature__art{position:absolute;inset-inline-end:-1rem;top:-1rem;opacity:.12;color:#fff}
.efeature__art .icon--hero{width:11rem;height:11rem}
.efeature__date{text-align:center}
.efeature__date p{margin:.4rem 0 0;font-weight:600}
.efeature__date--dark{color:var(--ink);margin-bottom:1rem}
.efeature h3{font-size:1.5rem}
.efeature p{color:rgba(255,255,255,.9)}
.efeature__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.8rem}
.countdown{display:flex;gap:.6rem;margin:.9rem 0}
.countdown span{display:flex;flex-direction:column;align-items:center;min-width:64px;padding:.45rem .6rem;border-radius:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.countdown b{font:700 1.4rem/1.1 var(--font-head);letter-spacing:0}
.elist{display:grid;gap:.8rem;align-content:start}
.elist--page{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}
.elist--past{opacity:.8}
.erow{display:flex;align-items:center;gap:1rem;padding:.9rem 1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);transition:border-color .2s,transform .2s}
.erow:hover{border-color:var(--gold-500);transform:translateY(-2px)}
.erow__body{flex:1;min-width:0}
.erow h3{font-size:1.08rem;margin:.1rem 0 .3rem}
.erow h3 a{color:inherit;text-decoration:none}
.erow .eyebrow{margin:0;font-size:.7rem}
.erow__meta{display:flex;flex-wrap:wrap;gap:.2rem 1rem;font-size:.85rem;color:var(--muted);margin:0}
.erow__meta span{display:inline-flex;gap:.3rem;align-items:center}
.efeature .erow__meta{color:rgba(255,255,255,.85)}
.erow__go{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line);color:var(--green-700);text-decoration:none;flex:none}
.erow:hover .erow__go{background:var(--gold-500);border-color:var(--gold-500);color:#0b4b38}

/* Activity cards */
.acard{overflow:hidden;display:flex;flex-direction:column}
.acard__media{position:relative;aspect-ratio:16/8;background:linear-gradient(135deg,var(--g1,#0f5a43),var(--g2,#0b4b38));display:grid;place-items:center;color:rgba(255,255,255,.9);overflow:hidden}
.acard__media::before{content:"";position:absolute;inset:0;background-image:var(--tile);background-size:60px;opacity:.1}
.acard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.acard__body{padding:1.1rem 1.3rem 1.3rem}
.acard__body h3{margin:.2rem 0 .3rem}
.acard__body p{color:var(--muted);font-size:.95rem}

/* Ayah band */
.ayah{position:relative;background:linear-gradient(135deg,var(--green-900),var(--green-700));color:#fff;text-align:center;padding:3.5rem 0;overflow:hidden}
.ayah::before{content:"";position:absolute;inset:0;background-image:var(--tile);background-size:72px;opacity:.07}
.ayah__in{position:relative;max-width:820px}
.ayah__star{color:var(--gold-500);display:inline-block;margin-bottom:.5rem}
.ayah__ar{font-family:'Amiri','Noto Naskh Arabic',serif;font-size:clamp(1.35rem,3.2vw,2rem);line-height:2.1;color:var(--gold-100);margin:0 0 1rem}
.ayah__tr{font-size:1.05rem;opacity:.92;font-style:italic;margin:0 0 .5rem}
.ayah__ref{color:var(--gold-500);font-weight:700;letter-spacing:.05em;margin:0}

/* Page heads, CTA, footer ornaments */
.pagehead{position:relative;overflow:hidden;padding-bottom:3rem}
.pagehead::before{content:"";position:absolute;inset:0;background-image:var(--tile);background-size:72px;opacity:.06}
.pagehead>.wrap{position:relative}
.pagehead::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:14px;background:radial-gradient(circle at 50% 100%,var(--bg) 0 10px,transparent 11px) 0 0/28px 14px repeat-x}
.pagehead--small{padding-bottom:2.2rem}
.cta{position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background-image:var(--tile);background-size:72px;opacity:.06}
.cta__in{position:relative}
.footer{position:relative}
.footer__scallop{height:18px;background:radial-gradient(circle at 50% 0,var(--bg) 0 10px,transparent 11px) 0 0/28px 18px repeat-x}
.footer__bismillah{text-align:center;padding-top:1.5rem}

/* RTL / Urdu mode */
.icon--back{transform:scaleX(-1)}
html[dir=rtl] .icon--flip{transform:scaleX(-1)}
html[dir=rtl] .icon--back{transform:none}
html[dir=rtl] .link-arrow:hover .icon--flip{transform:scaleX(-1) translateX(3px)}
html[dir=rtl] .badge{left:auto;right:.75rem}
html[dir=rtl] .timeline li{padding:0 1.25rem 1.25rem 0}
html[dir=rtl] .timeline li::before{left:auto;right:-7px}
html[dir=rtl] .wa{right:auto;left:1rem}
html[dir=rtl] .skip{left:auto;right:-999px}
html[dir=rtl] .skip:focus{right:8px}
html[dir=rtl] .lantern--l{left:auto;right:5%}
html[dir=rtl] .lantern--r{right:auto;left:7%}
html[dir=rtl] input[type=email],html[dir=rtl] input[type=tel],html[dir=rtl] input[type=password],html[dir=rtl] #amount{direction:ltr;text-align:right}
html.is-ur body{font-family:var(--font-ur-ui);font-size:17px;line-height:1.95}
html.is-ur h1,html.is-ur h2,html.is-ur h3,html.is-ur .brand__ur,html.is-ur .panel__big,html.is-ur .kpi strong,html.is-ur .band strong,html.is-ur .hero__books dd{font-family:var(--font-ur);letter-spacing:0}
html.is-ur h1{line-height:1.75}
html.is-ur h2{line-height:1.8}
html.is-ur h3{line-height:1.9}
html.is-ur .eyebrow,html.is-ur .announce__tag,html.is-ur .mihrab__label,html.is-ur .table thead th,html.is-ur .hero__books dt,html.is-ur .slide__meta,html.is-ur .countdown span,html.is-ur .datebadge span{letter-spacing:0;text-transform:none}
html.is-ur .btn,html.is-ur input,html.is-ur select,html.is-ur textarea,html.is-ur .chip,html.is-ur .tabs a,html.is-ur .chips a{font-family:var(--font-ur-ui)}
html.is-ur .footer h3{font-family:var(--font-ur-ui);letter-spacing:0;text-transform:none}
html.is-ur .nav li a{font-size:1rem}

/* ---- Revision: pointed arch, lighter hero, indigo palette ---- */
.mihrab__shape{filter:drop-shadow(0 22px 30px rgba(0,0,0,.38)) drop-shadow(0 0 12px rgba(226,176,74,.3))}
.mihrab__frame{aspect-ratio:5/6.4;border:0;border-radius:0;box-shadow:none;background:var(--gold-500);clip-path:url(#arch)}
.slide{inset:5px;clip-path:url(#arch)}
.slide__art{top:21%}
.slide__body{padding:2.2rem 1.8rem 1.8rem}
.way__arch,.cat__icon{position:relative;border:0;background:var(--gold-500);clip-path:url(#arch)}
.way__arch::before,.cat__icon::before{content:"";position:absolute;inset:2px;background:var(--green-50);clip-path:url(#arch)}
.way__arch>.icon,.cat__icon>.icon{position:relative}
.way__arch{width:62px;height:78px}
.cat__icon{width:3.6rem;height:4.4rem}
.hero--islamic{border-bottom:3px solid var(--gold-500)}
.hero--islamic .hero__grid{padding:1.5rem 0 3.5rem}
@media (min-width:900px){.hero--islamic .hero__grid{padding:2rem 0 4.5rem}}
.hero--islamic{background:radial-gradient(900px 420px at 50% -10%,rgba(226,176,74,.22),transparent 65%),linear-gradient(180deg,var(--green-900),var(--green-800) 75%,var(--green-700))}
.btn{white-space:nowrap}
.nav li a{white-space:nowrap;padding:.35rem .6rem;font-size:.92rem}
.nav{gap:.75rem}
.nav ul{gap:0}
@media (max-width:1180px) and (min-width:1101px){.nav li a small{display:none}.brand__text small{display:none}}

/* ---- Revision: compact quiet menu, underline for current ---- */
.header__in{min-height:56px;gap:.75rem}
.nav{gap:.5rem}
.nav ul{gap:.1rem}
.nav li a{padding:.25rem .5rem;font-weight:400;font-size:.9rem;line-height:1.5;background:none;border-radius:0;color:var(--ink);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.5em;transition:text-decoration-color .15s}
.nav li a:hover{background:none;text-decoration-color:var(--line)}
.nav li a[aria-current=page]{background:none;color:var(--ink);font-weight:500;text-decoration-color:var(--gold-500)}
.nav__cta .btn{font-weight:500;padding:.35rem .85rem}
.is-ur .nav li a{font-size:.95rem}
@media (max-width:1100px){.nav li a{padding:.6rem .25rem;justify-content:flex-start}.nav li a[aria-current=page]{text-decoration-color:var(--gold-500)}}
.hero--islamic .hero__grid{padding-top:3rem}

/* ---- Revision: conventional full-width hero (no arch) ---- */
.herofull{position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;min-height:clamp(540px,80vh,720px);background:linear-gradient(180deg,var(--green-900),var(--green-800));border-bottom:3px solid var(--gold-500)}
.herofull::before{content:"";position:absolute;inset:0;background-image:var(--tile);background-size:72px;opacity:.07;z-index:1;pointer-events:none}
.herobg{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;background:linear-gradient(135deg,var(--g1,#0b4b38),var(--g2,#062e22))}
.herobg.is-active{opacity:1}
.herobg img{width:100%;height:100%;object-fit:cover}
.herobg__art{position:absolute;inset-inline-end:9%;top:46%;transform:translateY(-50%);color:rgba(255,255,255,.2)}
.herobg__art .icon{width:min(24rem,40vw);height:min(24rem,40vw);stroke-width:.7}
.herofull__shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(4,32,23,.94) 0%,rgba(4,32,23,.8) 45%,rgba(4,32,23,.3) 100%)}
html[dir=rtl] .herofull__shade{transform:scaleX(-1)}
.herofull .lantern{z-index:2}
.herofull__content{position:relative;z-index:2;flex:1;display:flex;align-items:center;padding:5rem 0 2.5rem}
.herofull__copy{max-width:640px}
.herofull__foot{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:.9rem 2rem;align-items:center;justify-content:space-between;padding:1rem 0 1.2rem;border-top:1px solid rgba(255,255,255,.18);background:linear-gradient(180deg,transparent,rgba(3,22,16,.35))}
.herocaps{display:grid;flex:1;min-width:240px;max-width:820px}
.hcap{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .6s}
.hcap.is-active{opacity:1;visibility:visible}
.hcap__meta{display:flex;align-items:center;gap:.4rem;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-500);margin:0 0 .2rem}
.hcap__title{margin:0;font-size:.95rem;color:rgba(255,255,255,.9);line-height:1.5}
.hcap__title strong{color:#fff}
.hcap__title a{color:var(--gold-500);white-space:nowrap;margin-inline-start:.4rem;text-decoration:none;font-weight:600}
.herofull__ctrl{display:flex;align-items:center;gap:.5rem}
html.is-ur .hcap__meta{letter-spacing:0;text-transform:none}
@media (max-width:700px){.herofull{min-height:0}.herofull__content{padding:4.5rem 0 1.5rem}.herobg__art{opacity:.6}}
.herofull .lantern--l{left:auto;right:19%}
html[dir=rtl] .herofull .lantern--l{right:auto;left:19%}

/* ---- Rotating event banner ---- */
.announce__items{display:grid;flex:1;min-width:220px}
.aitem{grid-area:1/1;display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .75rem;color:inherit;text-decoration:none;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
.aitem.is-active{opacity:1;visibility:visible}
.aitem:hover strong{text-decoration:underline}
.announce__tag--live{background:#c8324a}
.announce__tag--today{background:var(--green-700)}
.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.announce__dots{display:flex;gap:.35rem}
.announce__dots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;background:rgba(10,47,52,.3);cursor:pointer}
.announce__dots button[aria-current=true]{background:var(--green-800);width:18px;border-radius:99px}
html.is-ur .announce__tag{letter-spacing:0;text-transform:none}

/* ---- Top bar removed: language switch + phone live in the header, Hijri date in the footer ---- */
.langswitch{order:3;margin-inline-start:0}
.nav{order:2}
.nav__phone{display:inline-flex;align-items:center;gap:.4rem;font-size:.88rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.nav__phone:hover{text-decoration:underline}
.footer__hijri{opacity:.85}
@media (max-width:1100px){.langswitch{order:1;margin-inline-start:auto}.burger{order:2}.nav__phone{padding:.4rem 0}}

/* ---- Revision: soft header, right-aligned actions, fading event banner ---- */
.header{background:#e9f0ec;border-bottom-color:#d5e2da}
@media (prefers-color-scheme:dark){.header{background:var(--surface);border-bottom-color:var(--line)}}
.header__in{justify-content:flex-start;gap:1.5rem}
.nav{flex:1;order:2;justify-content:flex-start}
.nav__cta{margin-inline-start:auto;gap:.9rem;align-items:center}
.langswitch{order:3}
@media (max-width:1100px){.header__in{justify-content:space-between}.nav{flex:none;background:#e9f0ec}.nav__cta{margin-inline-start:0;align-items:stretch}}
@media (max-width:1100px) and (prefers-color-scheme:dark){.nav{background:var(--surface)}}
.announce{background:#06241a;border-bottom:1px solid #14513c;color:#e8f3ed}
.aitem{transition:opacity .8s ease,visibility .8s}
.aitem strong{font:600 1.05rem/1.3 var(--font-head);color:#fff;letter-spacing:.01em}
.aitem__meta{font-size:.88rem;color:#b9d4c6}
.announce__tag{background:var(--gold-500);color:#0b4b38}
.announce__tag--today{background:#fff;color:#06241a}
.announce__tag--live{background:#ff7186;color:#2b0a12}
.pulse{background:#2b0a12}
.announce__more{color:var(--gold-500)}
.announce__dots button{background:rgba(255,255,255,.3)}
.announce__dots button[aria-current=true]{background:var(--gold-500)}
html.is-ur .aitem strong{font-family:var(--font-ur)}
@media (min-width:1101px) and (max-width:1280px){.nav li a{padding:.25rem .4rem;font-size:.86rem}.nav__cta{gap:.6rem}.nav__phone{font-size:.82rem}.header__in{gap:.9rem}}
@media (min-width:1101px) and (max-width:1280px){.nav li a{padding:.25rem .3rem;font-size:.84rem}.nav__cta{gap:.5rem}.nav__cta .btn{padding:.3rem .65rem;font-size:.82rem}.header__in{gap:.6rem}.brand__text strong{font-size:1rem}.langswitch{font-size:.8rem;padding-inline:.6rem}}

/* hero sub-heading size */
.herofull .lead{font-size:.95rem;line-height:1.6;max-width:52ch}
html.is-ur .herofull .lead{font-size:1rem;line-height:1.9}

/* ---- Hero sketch illustrations ---- */
.herobg__sketch{position:absolute;inset-inline-end:2%;bottom:84px;width:min(52vw,700px);color:rgba(255,255,255,.88);pointer-events:none}
.sk-svg{display:block;width:100%;height:auto;overflow:visible}
.sk .acc{stroke:#f0c565}
.sk path,.sk circle,.sk ellipse,.sk rect{stroke-dasharray:1600;stroke-dashoffset:0}
.herobg.is-active .sk path,.herobg.is-active .sk circle,.herobg.is-active .sk ellipse,.herobg.is-active .sk rect{animation:sketchdraw 2.6s ease-out both}
@keyframes sketchdraw{from{stroke-dashoffset:1600}to{stroke-dashoffset:0}}
html[dir=rtl] .herobg__sketch{transform:scaleX(-1)}
@media (prefers-reduced-motion:reduce){.herobg.is-active .sk *{animation:none!important}}
@media (max-width:900px){.herobg__sketch{width:92vw;inset-inline-end:-6%;bottom:70px;opacity:.28}}
.herobg__sketch{width:min(60vw,800px);bottom:78px;color:rgba(255,255,255,.95)}
.sk{stroke-width:3}
.sk [stroke-width="1.4"],.sk [stroke-width="1.2"]{stroke-width:1.8}

/* ---- Hero verse (replaces the main heading) ---- */
.verse{margin:0 0 1.1rem;animation:verseIn .9s ease both}
@keyframes verseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.verse__ar{font-family:Amiri,"Noto Naskh Arabic",serif;font-weight:400;font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:2;letter-spacing:0;color:#fff;margin:0 0 .2rem;text-align:left;text-shadow:0 2px 16px rgba(0,0,0,.35)}
.verse__ur{font-family:var(--font-ur);font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:2.1;color:var(--gold-500);margin:0 0 .4rem;text-align:left}
.verse__en{font-size:.92rem;font-style:italic;color:rgba(255,255,255,.8);margin:0 0 .4rem}
.verse__ref{font-size:.82rem;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.7)}
html[dir=rtl] .verse__ar,html[dir=rtl] .verse__ur{text-align:right}
.verse__ar+.verse__ur::before{content:none}
html[dir=rtl] .verse__ar+.verse__ur::before{margin-inline-start:0}

/* ---- Default tone: deep navy + glow + orange accent (from the supplied reference) ---- */
.herofull{background:radial-gradient(620px 420px at 78% 108%,rgba(23,115,85,.95),transparent 70%),radial-gradient(520px 360px at 8% -10%,rgba(15,90,67,.45),transparent 70%),#0b4b38}
.herofull__shade{background:linear-gradient(90deg,rgba(4,32,23,.92) 0%,rgba(4,32,23,.72) 45%,rgba(4,32,23,.2) 100%)}
.ayah,.cta,.footer{background:#0b4b38}
.ayah{background:linear-gradient(135deg,#083c2c,#0f5a43)}
.announce{background:#083c2c;border-bottom-color:#14513c}
.btn{padding:.5rem 1.1rem}
.btn--lg{padding:.6rem 1.35rem;font-size:1rem}
.btn--sm,.nav__cta .btn{padding:.24rem .8rem}
.nav__cta .btn--ghost{border-width:1px}
.pagehead{background:linear-gradient(135deg,#083c2c,#0b4b38 55%,#0f5a43)}

/* hero backdrop always uses the reference navy + soft blue glow (no per-topic tint) */
.herobg{background:radial-gradient(640px 440px at 78% 108%,rgba(23,115,85,.95),transparent 70%),radial-gradient(520px 360px at 6% -10%,rgba(15,90,67,.5),transparent 70%),#0b4b38}
.tone-funeral{--g1:#0f5a43;--g2:#0b4b38}
.tone-ration{--g1:#2a6f5a;--g2:#0f3a30}

/* ---- Choose how you give: tabbed chooser ---- */
.give{display:grid;gap:0;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--surface)}
@media (min-width:860px){.give{grid-template-columns:minmax(260px,340px) 1fr}}
.give__tabs{display:flex;flex-direction:column;background:var(--green-50)}
@media (max-width:859px){.give__tabs{flex-direction:row;overflow-x:auto;scrollbar-width:none}.give__tab{min-width:210px}}
.give__tab{display:flex;align-items:center;gap:.9rem;padding:1.05rem 1.25rem;border:0;border-inline-start:4px solid transparent;border-bottom:1px solid var(--line);background:none;text-align:start;cursor:pointer;color:var(--ink);font:inherit;transition:background .2s}
.give__tab:hover{background:var(--green-100)}
.give__tab[aria-selected=true]{background:var(--surface);border-inline-start-color:var(--gold-500)}
.give__ico{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--green-100);color:var(--green-700);flex:none;transition:background .2s,color .2s}
.give__tab[aria-selected=true] .give__ico{background:#0b4b38;color:var(--gold-500)}
.give__lbl{display:flex;flex-direction:column;line-height:1.35}
.give__lbl strong{font-size:1.02rem}
.give__lbl small{color:var(--muted);font-size:.8rem}
.give__panels{position:relative;background:linear-gradient(135deg,#083c2c,#0b4b38 60%,#0f5a43);color:#fff;min-height:340px}
.give__panels::before{content:"";position:absolute;inset:0;background-image:var(--tile);background-size:72px;opacity:.07}
.give__pane{position:relative;padding:2rem clamp(1.25rem,4vw,2.5rem);animation:giveIn .35s ease both}
@keyframes giveIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.give__pane[hidden]{display:none}
.give__pane h3{font-size:1.7rem;color:#fff;margin-bottom:.4rem}
.give__text{color:rgba(255,255,255,.85);max-width:52ch;margin-bottom:1rem}
.give__facts{list-style:none;display:grid;gap:.45rem;margin-bottom:1.4rem}
.give__facts li{display:flex;gap:.55rem;align-items:flex-start;font-size:.95rem;color:rgba(255,255,255,.92)}
.give__facts .icon{color:var(--gold-500);margin-top:.2rem}
.give__amounts{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1.2rem}
.give__amounts .chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff}
.give__amounts .chip:hover,.give__amounts .chip.is-on{background:var(--gold-500);border-color:var(--gold-500);color:#0b4b38}
.give__other{color:var(--gold-500);font-size:.88rem;font-weight:600;margin-inline-start:.4rem}
.is-ur .give__tab,.is-ur .give__lbl small{font-family:var(--font-ur-ui)}
.is-ur .give__pane h3{font-family:var(--font-ur)}

/* ---- Revision: no bright blue on the landing page (navy + orange only) ---- */
.eyebrow{color:#177355}
.eyebrow--gold{color:var(--gold-500)}
.meter__bar span{background:linear-gradient(90deg,#0b4b38,var(--gold-500))}
.header{background:#e9f0ec;border-bottom-color:#d5e2da}
@media (max-width:1100px){.nav{background:#e9f0ec}}
.band strong,.kpi strong{color:#0b4b38}
.give__tab[aria-selected=true] .give__ico{background:#0b4b38}
.give__panels{background:linear-gradient(135deg,#083c2c,#0b4b38 70%,#0f5a43)}
.ayah{background:linear-gradient(135deg,#083c2c,#0b4b38 65%,#0f5a43)}
.pagehead{background:linear-gradient(135deg,#083c2c,#0b4b38 70%,#0f5a43)}
.herofull{background:radial-gradient(620px 420px at 78% 108%,rgba(23,115,85,.9),transparent 70%),#0b4b38}
.herobg{background:radial-gradient(640px 440px at 78% 108%,rgba(23,115,85,.9),transparent 70%),#0b4b38}
.datebadge::before,.datebadge::after{background:var(--gold-500)}
@media (prefers-color-scheme:dark){.eyebrow{color:var(--gold-500)}a{color:#f0c565}.band strong,.kpi strong{color:#fff}.btn--ghost{color:#f0c565;border-color:#3f8a6d}}

/* ---- Palette reverted to the original emerald + gold ---- */
.tone-funeral{--g1:#127a58;--g2:#08392a}
.tone-ration{--g1:#3f8f6b;--g2:#1c4a38}
.herobg{background:radial-gradient(640px 440px at 78% 108%,rgba(23,115,85,.9),transparent 70%),radial-gradient(520px 360px at 6% -10%,rgba(226,176,74,.12),transparent 70%),#0b4b38}
.herofull{background:radial-gradient(620px 420px at 78% 108%,rgba(23,115,85,.9),transparent 70%),#0b4b38}
.herofull__shade{background:linear-gradient(90deg,rgba(4,32,23,.92) 0%,rgba(4,32,23,.72) 45%,rgba(4,32,23,.2) 100%)}
.eyebrow{color:var(--green-600)}
.eyebrow--gold{color:var(--gold-500)}
.give__panels{background:linear-gradient(135deg,#083c2c,#0b4b38 60%,#0f5a43)}
.ayah{background:linear-gradient(135deg,#083c2c,#0f5a43)}
.pagehead{background:linear-gradient(135deg,#083c2c,#0f5a43)}
.announce__tag--today{background:#fff;color:#083c2c}
.announce__tag{background:var(--gold-500);color:#2a1e00}
.btn--gold,.chip.is-on,.give__amounts .chip.is-on{color:#2a1e00}
.band strong,.kpi strong{color:var(--green-700)}
@media (prefers-color-scheme:dark){.eyebrow{color:var(--gold-500)}.band strong,.kpi strong{color:#7fd1ad}}

/* ---- Our promise: three-step flow ---- */
.section--tile{position:relative;background:var(--bg)}
.section--tile::before{content:"";position:absolute;inset:0;background-image:var(--tile-dark);background-size:72px;opacity:.07;pointer-events:none}
.section--tile>.wrap{position:relative}
.eyebrow--dash{display:inline-flex;align-items:center;gap:.6rem}
.eyebrow--dash::before{content:"";width:28px;height:3px;border-radius:2px;background:var(--gold-500)}
.promise .section__head h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
.flow{list-style:none;display:grid;gap:2.2rem;margin:1rem 0 2.2rem;counter-reset:none}
@media (min-width:820px){.flow{grid-template-columns:repeat(3,1fr);gap:0}}
.flow__step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 1.4rem}
.flow__circle{position:relative;z-index:1;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;margin-bottom:1rem;border:8px solid var(--gold-100);box-sizing:content-box}
.flow__step--1 .flow__circle{background:var(--green-800);color:var(--gold-500)}
.flow__step--2 .flow__circle{background:var(--gold-500);color:var(--green-900);border-color:var(--green-100)}
.flow__step--3 .flow__circle{background:var(--green-600);color:#fff}
.flow__label{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-600);margin-bottom:.3rem}
.flow__step h3{font-size:1.2rem;margin-bottom:.45rem}
.flow__step p{color:var(--muted);font-size:.95rem;line-height:1.7;max-width:34ch;margin:0}
@media (min-width:820px){.flow__step:not(:last-child)::after{content:"";position:absolute;top:50px;inset-inline-start:calc(50% + 66px);inset-inline-end:calc(-50% + 66px);border-top:2px dashed var(--gold-500);opacity:.75}
.flow__step:not(:last-child)::before{content:"";position:absolute;top:44px;inset-inline-end:calc(-50% + 62px);width:9px;height:9px;border-top:2px solid var(--gold-500);border-inline-end:2px solid var(--gold-500);transform:rotate(45deg);z-index:1}
html[dir=rtl] .flow__step:not(:last-child)::before{transform:rotate(-135deg)}}
@media (max-width:819px){.flow__step:not(:last-child)::after{content:"";width:0;height:1.6rem;border-inline-start:2px dashed var(--gold-500);margin:1.2rem auto -1.2rem;opacity:.7}}
.promise__cta{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
html.is-ur .flow__label{letter-spacing:0;text-transform:none}

/* ---- Footer: smaller type, no scalloped edge, tighter spacing ---- */
.footer__scallop{display:none}
.footer{font-size:.84rem;line-height:1.5}
.footer__grid{padding:1.6rem 0 1.1rem;gap:1.2rem 1.6rem;grid-template-columns:1.3fr repeat(3,1fr)}
@media (max-width:760px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.footer__grid{grid-template-columns:1fr}}
.footer h3{font-size:.72rem;margin:0 0 .5rem;letter-spacing:.1em}
.footer__list{gap:.25rem}
.footer__list--icons li{gap:.45rem}
.footer__list--icons .icon{width:1em;height:1em;margin-top:.2rem}
.footer__about{margin:.6rem 0 0;max-width:36ch}
.footer__bar{font-size:.76rem}
.footer__bar-in{padding:.55rem 0}
.footer__hijri{opacity:.75}
.footer__bar-in{padding-inline-end:4.2rem}
.footer__list a{text-decoration-thickness:1px;text-underline-offset:2px}

/* ---- Footer v2 (outlined wordmark, airy columns) ---- */
.footer2{background:#083c2c;color:#dfece5;position:relative;overflow:hidden;font-size:.9rem}
.footer2::before{content:"";position:absolute;inset:0;background-image:var(--tile);background-size:72px;opacity:.05;pointer-events:none}
.footer2>*{position:relative}
.footer2__top{display:grid;gap:1.6rem 2rem;padding:2rem 0 1rem;grid-template-columns:1.5fr repeat(3,1fr)}
@media (max-width:820px){.footer2__top{grid-template-columns:1fr 1fr}.footer2__brand{grid-column:1/-1}}
@media (max-width:480px){.footer2__top{grid-template-columns:1fr}}
.footer2__about{margin:.7rem 0 .9rem;max-width:40ch;color:rgba(255,255,255,.78);line-height:1.6}
.footer2__reg{margin:.6rem 0 0;font-size:.78rem;opacity:.7}
.footer2 h3{font-family:var(--font);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-500);margin:0 0 .7rem}
.footer2__col ul{list-style:none;display:grid;gap:.4rem}
.footer2__col a{color:#fff;text-decoration:none}
.footer2__col a:hover{color:var(--gold-500)}
.footer2__addr{color:rgba(255,255,255,.75)}
.footer2__mark{font:700 clamp(2.6rem,9.5vw,7.4rem)/.95 var(--font);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.2);margin:.4rem 0 -.2rem;padding:0 max(1rem,calc((100% - 1180px)/2));user-select:none}
html.is-ur .footer2__mark{font-family:var(--font-ur);letter-spacing:0;line-height:1.6;font-weight:400;-webkit-text-stroke:1px rgba(255,255,255,.22)}
.footer2__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1.5rem;padding:.75rem 0 .8rem;border-top:1px solid rgba(255,255,255,.14);font-size:.78rem;color:rgba(255,255,255,.72)}
.footer2__bar{padding-inline-end:4.2rem}
html.is-ur .footer2{font-size:.95rem}

/* ---- More breathing room at the sides ---- */
:root{--wrap-max:1080px;--gutter:clamp(1.25rem,7vw,6.5rem)}
.wrap{width:min(var(--wrap-max),100% - 2*var(--gutter))}
.wrap--narrow{width:min(480px,100% - 2rem)}
.footer2__mark{padding:0 max(var(--gutter),calc((100% - var(--wrap-max))/2))}
.footer2__bar{padding-inline-end:4.2rem}
@media (max-width:640px){:root{--gutter:1.1rem}}
.header .wrap{width:min(1280px,100% - 2.5rem)}
.announce .wrap{width:min(1280px,100% - 2.5rem)}

/* ---- Boxed page: white space on both sides of the whole layout (header, hero, footer) ---- */
:root{--page-gap:clamp(0px,4.5vw,4.5rem);--gutter:clamp(1.25rem,5vw,4rem)}
html{background:#f3f5f1}
body{width:min(1320px,100% - 2*var(--page-gap));margin-inline:auto;box-shadow:0 0 0 1px var(--line),0 18px 60px rgba(8,40,28,.08);min-height:100vh}
@media (prefers-color-scheme:dark){html{background:#070b09}body{box-shadow:0 0 0 1px var(--line)}}
@media (max-width:760px){:root{--page-gap:0px}body{box-shadow:none}}
.header .wrap,.announce .wrap{width:calc(100% - 2.5rem);max-width:1240px}
@media (min-width:1101px) and (max-width:1280px){.nav li a{padding:.25rem .35rem;font-size:.85rem}.nav__cta{gap:.55rem}.header__in{gap:.8rem}}
@media (max-width:1100px){.header__in{justify-content:flex-start}.langswitch{order:1;margin-inline-start:auto}.burger{order:2;margin-inline-start:.4rem}.nav{order:3}}

/* ---- Projects: smaller explanatory text ---- */
.pcard__sum{font-size:.82rem;line-height:1.55;margin:.35rem 0 .8rem}
.pcard__title{font-size:1.08rem}
.pcard .eyebrow{font-size:.7rem}
.pcard__body{padding:.95rem 1.1rem 1.1rem}
.pcard .meter__row{font-size:.78rem}
.detail__main .lead{font-size:1rem}
.detail__main .prose p{font-size:.92rem;line-height:1.7}
html.is-ur .pcard__sum{font-size:.9rem;line-height:1.85}

/* ---- Activities ("on the ground"): smaller explanatory text ---- */
.acard__body{padding:.9rem 1.1rem 1.1rem}
.acard__body h3{font-size:1.05rem;margin:.15rem 0 .25rem}
.acard__body p{font-size:.82rem;line-height:1.55;margin:0 0 .6rem}
.acard .eyebrow{font-size:.7rem;margin-bottom:.2rem}
.acard .link-arrow{font-size:.82rem}
html.is-ur .acard__body p{font-size:.9rem;line-height:1.85}

/* ---- Inner-page headers: slim, flat, no scalloped edge ---- */
.pagehead,.pagehead--small,.pagehead--project{padding:1.05rem 0 1.1rem;border-bottom:3px solid var(--gold-500)}
.pagehead::after{display:none}
.pagehead .eyebrow{margin:0 0 .15rem;font-size:.7rem;letter-spacing:.14em}
.pagehead h1{font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.25;margin:0;letter-spacing:-.005em}
.pagehead .ur--hero{font-size:1rem;margin:.1rem 0 0;line-height:1.8}
.pagehead .crumbs{font-size:.78rem;margin:0 0 .35rem;opacity:.8}
.pagehead .badge--static{margin:0 0 .35rem;font-size:.68rem;padding:.12rem .55rem}
.pagehead__row{gap:.6rem 1rem}
.pagehead .btn--sm{padding:.22rem .75rem}
.pagehead::before{opacity:.05}
.pagehead p.lead{display:none}
html.is-ur .pagehead h1{line-height:1.8}
.section:first-of-type{padding-top:2rem}
.tabs a[aria-current] em{background:rgba(255,255,255,.22);color:#fff}
.tabs a em{color:var(--ink)}

/* ---- Transparency dashboard ---- */
.tsub{position:sticky;top:57px;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.tsub__in{display:flex;align-items:center;gap:.2rem 1.3rem;overflow-x:auto;white-space:nowrap;padding:.55rem 0;scrollbar-width:none}
.tsub a{font-size:.88rem;font-weight:600;color:var(--ink);text-decoration:none;padding:.15rem 0;border-bottom:2px solid transparent}
.tsub a:hover{border-color:var(--gold-500)}
.tsub__upd{margin-inline-start:auto;display:inline-flex;gap:.35rem;align-items:center;color:var(--muted);font-size:.78rem}
.tsec{padding:2rem 0}
.tsec--tint{background:var(--tint)}
.thead{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:space-between;margin-bottom:.9rem}
.thead h2{font-size:1.25rem;margin:0}
.tcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.3rem;box-shadow:var(--shadow)}
.tcard__h{font-size:1.05rem;margin:0 0 1rem}
.tnums{display:grid;gap:1rem 1.5rem;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));padding-bottom:1.1rem;border-bottom:1px solid var(--line);margin-bottom:1rem}
.tnum{display:flex;flex-direction:column;gap:.1rem;border-inline-start:3px solid var(--line);padding-inline-start:.8rem}
.tnum--bal{border-color:var(--gold-500)}
.tnum span{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.tnum strong{font:700 1.45rem/1.2 var(--font-head);color:var(--green-800)}
.tnum small{color:var(--muted);font-size:.78rem}
.tcap{font-size:.8rem;font-weight:600;color:var(--muted);margin:0 0 .5rem}
.flowbar{display:flex;height:16px;border-radius:99px;overflow:hidden;background:var(--line);gap:2px}
.flowbar span{display:block;height:100%}
.flowbar__rest{background:repeating-linear-gradient(45deg,var(--green-100) 0 6px,transparent 6px 12px)!important;border:1px dashed var(--green-600)}
.legend2{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin-top:.8rem;font-size:.82rem;color:var(--muted)}
.legend2 li{display:inline-flex;align-items:center;gap:.4rem}
.legend2 i,.legend3 i{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
.legend2 i.rest{background:repeating-linear-gradient(45deg,var(--green-100) 0 3px,transparent 3px 6px);border:1px dashed var(--green-600)}
.legend2 b{color:var(--ink)}
.tchart{position:relative}
.tchart__max{position:absolute;top:.6rem;inset-inline-start:1.3rem;font-size:.72rem;color:var(--muted)}
.chart--lg{height:240px;margin-top:1.2rem;gap:.5rem}
.chart--lg .chart__bars span{max-width:22px}
.tproj{padding:.3rem 1.3rem}
.tproj__row{display:grid;gap:.5rem 1.5rem;grid-template-columns:minmax(160px,1.2fr) minmax(120px,1fr) auto;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--line)}
.tproj__row:last-child{border:0}
@media (max-width:760px){.tproj__row{grid-template-columns:1fr}}
.tproj__name a,.tproj__name span{font-weight:600;color:var(--ink);text-decoration:none}
.tproj__name a:hover{text-decoration:underline}
.tproj__name small{display:block;color:var(--muted);font-size:.74rem}
.tproj__bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.tproj__bar span{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--green-600),var(--gold-500));border-radius:99px}
.tproj__nums{display:flex;gap:1.3rem;margin:0}
.tproj__nums dt{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.tproj__nums dd{margin:0;font-weight:700;font-size:.9rem;white-space:nowrap}
.donutwrap{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 1.6rem}
.donut{position:relative;width:150px;height:150px;border-radius:50%;flex:none}
.donut::after{content:"";position:absolute;inset:26px;border-radius:50%;background:var(--surface)}
.donut span{position:absolute;inset:0;z-index:1;display:grid;place-content:center;text-align:center;line-height:1.25}
.donut b{font:700 1rem var(--font-head)}
.donut small{font-size:.7rem;color:var(--muted)}
.legend3{list-style:none;flex:1;min-width:200px;display:grid;gap:.45rem;font-size:.86rem}
.legend3 li{display:grid;grid-template-columns:auto 1fr auto auto;gap:.5rem;align-items:center}
.legend3 em{font-style:normal;color:var(--muted);font-size:.78rem;min-width:2.6rem;text-align:end}
.lfilters{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:.9rem}
.lfilters select{width:auto;min-width:170px;padding:.45rem .7rem;font-size:.88rem}
.lfilters__sum{margin-inline-start:auto;color:var(--muted);font-size:.85rem}
.table--tight th,.table--tight td{padding:.55rem .85rem;font-size:.88rem}
.pill{display:inline-block;padding:.05rem .55rem;border-radius:99px;background:var(--green-100);color:var(--green-800);font-size:.74rem;font-weight:600}
.tassure{background:var(--green-50);border-top:1px solid var(--line)}
.tassure__in{display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:center;padding:.9rem 0;font-size:.85rem;color:var(--green-800)}
.tassure__in span{display:inline-flex;align-items:center;gap:.45rem}
html.is-ur .tnum span,html.is-ur .tproj__nums dt{letter-spacing:0;text-transform:none}
@media (max-width:1100px){.tsub{top:57px}}
.tnum strong{font-size:clamp(1.05rem,1.9vw,1.3rem);white-space:nowrap}
.tnums{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.tproj__row{grid-template-columns:minmax(150px,1.2fr) minmax(110px,1fr) 290px}
.tproj__nums{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.tproj__nums dd{font-size:.88rem}
@media (max-width:760px){.tproj__row{grid-template-columns:1fr}.tproj__nums{max-width:340px}}

/* ---- Transparency: compact project table + ledger ---- */
.tproj{padding:.15rem 1rem}
.tproj__row{grid-template-columns:minmax(140px,1.1fr) minmax(90px,.8fr) 250px;gap:.3rem 1rem;padding:.4rem 0}
.tproj__name a,.tproj__name span{font-size:.86rem;line-height:1.3}
.tproj__name small{font-size:.68rem;line-height:1.2}
.tproj__bar{height:5px}
.tproj__nums{gap:.4rem}
.tproj__nums dt{font-size:.6rem;letter-spacing:.06em}
.tproj__nums dd{font-size:.8rem}
#projects .thead,#ledger .thead{margin-bottom:.6rem}
#projects .thead h2,#ledger .thead h2{font-size:1.05rem}
#projects.tsec,#ledger.tsec{padding:1.2rem 0}
.lfilters{margin-bottom:.55rem;gap:.4rem}
.lfilters select{padding:.3rem .55rem;font-size:.8rem;min-width:150px}
.lfilters__sum{font-size:.78rem}
#ledger .btn--sm{padding:.2rem .65rem;font-size:.78rem}
.table--tight th,.table--tight td{padding:.32rem .65rem;font-size:.8rem;line-height:1.35}
.table--tight thead th{font-size:.64rem;padding-block:.35rem}
.table--tight small{font-size:.7rem}
.table--tight .pill{padding:0 .45rem;font-size:.68rem}
#ledger .pager{margin-top:.7rem}
#ledger .pager a{min-width:2rem;padding:.2rem .5rem;font-size:.8rem}
@media (max-width:760px){.tproj__row{grid-template-columns:1fr;padding:.55rem 0}.tproj__nums{max-width:300px}.table--tight td{padding:.2rem .65rem}}

/* ---- Text blocks span ~90% of their container (no narrow character-count caps) ---- */
.prose p,.prose .lead,.detail__main .prose p,.give__text,.flow__step p,.footer2__about,.note,.pcard__sum,.acard__body p,.herocaps,.empty p,.section__head p,.thanks p,.update p,.account p,.value p,.steps li p{max-width:90%}
.prose p{margin-inline:0}
.flow__step p{max-width:90%}
.herocaps{max-width:90%}
.footer2__about{max-width:90%}

/* ---- Wider content: smaller side gutters, larger content width ---- */
:root{--wrap-max:1260px;--gutter:clamp(.9rem,2.6vw,2rem);--page-gap:clamp(0px,2.2vw,2.25rem)}
body{width:min(1440px,100% - 2*var(--page-gap))}
.wrap{width:min(var(--wrap-max),100% - 2*var(--gutter))}
.header .wrap,.announce .wrap{width:calc(100% - 2rem);max-width:1360px}
@media (max-width:760px){:root{--page-gap:0px;--gutter:1rem}}
.donut{width:164px;height:164px}
.donut::after{inset:20px}
.donut b{font-size:.86rem;white-space:nowrap}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}

/* ---- Contact: compact two-column with map ---- */
.csec{padding:1.5rem 0 2rem}
.cgrid{display:grid;gap:1.2rem 1.6rem;align-items:start}
@media (min-width:900px){.cgrid{grid-template-columns:1.15fr 1fr}}
.clist{list-style:none;display:grid;gap:.5rem;margin:0 0 .9rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.clist li{display:flex;gap:.65rem;align-items:flex-start;padding:.55rem .7rem;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.clist .icon{color:var(--green-600);margin-top:.15rem;flex:none}
.clist small{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.clist a,.clist span{font-size:.88rem;font-weight:600;color:var(--ink);text-decoration:none;word-break:break-word}
.clist a:hover{text-decoration:underline}
.mapcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.mapcard iframe{display:block;width:100%;height:260px;border:0;filter:saturate(.9)}
.mapcard__bar{display:flex;flex-wrap:wrap;gap:.3rem 1rem;justify-content:space-between;align-items:center;padding:.5rem .8rem;font-size:.8rem}
.mapcard__bar>span:first-child{display:inline-flex;align-items:center;gap:.4rem;font-weight:600}
.mapcard__bar small{font-weight:400;color:var(--muted);font-size:.72rem}
.mapcard__links{display:flex;gap:.9rem}
.mapcard__links a{font-weight:600;color:var(--green-700);text-decoration:none}
.mapcard__links a:hover{text-decoration:underline}
.cleft .note{margin:.7rem 0 0;font-size:.8rem}
.form--compact{padding:1rem 1.1rem}
.form--compact h2{font-size:1.1rem;margin:0 0 .7rem}
.form--compact .field{margin-bottom:.6rem}
.form--compact .field label{font-size:.8rem;margin-bottom:.15rem}
.form--compact input,.form--compact textarea{padding:.45rem .65rem;font-size:.9rem}
.form--compact .btn{padding:.5rem 1rem}

/* ---- Brand lockup: seven-star mark, Nastaliq Urdu over Cinzel English ---- */

/* ---- Brand lockup spacing, centered menu ---- */
@media (min-width:1101px){
  .nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;flex:1}
  .nav ul{grid-column:2;justify-content:center}
  .nav__cta{grid-column:3;justify-self:end;margin-inline-start:0}
}

/* ---- Prominent logo: name as title, "Trust" as subheading ---- */
.header__in{min-height:76px}
.brand__sub .brand__ur::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;margin-inline-end:.6rem;vertical-align:middle}

/* ---- Balanced bilingual lockup: [mark] NAME / TRUST | Urdu ---- */
.brand{gap:.9rem}
.brand .brand__sub{border-top:0;padding-top:0;text-align:end;text-align-last:end;letter-spacing:.3em;margin-inline-end:-.3em}
@media (min-width:1101px){
  .nav{grid-template-columns:auto 1fr}
  .nav ul{grid-column:1;justify-content:flex-start}
  .nav__cta{grid-column:2;justify-self:end}
}
@media (min-width:1101px){.brand{margin-inline-end:3rem}}

/* ---- Compact header, no tint ---- */
.header{background:var(--surface,#fff);border-bottom:1px solid var(--line)}
@media (max-width:1100px){.nav{background:var(--surface,#fff)}}
.header__in{min-height:52px;gap:.5rem}
.nav{gap:.4rem}
.nav ul{gap:0}
.nav li a{padding:.15rem .4rem;font-size:.84rem}
.nav__cta{gap:.5rem}
.nav__cta .btn{padding:.18rem .65rem;font-size:.8rem}
.langswitch{font-size:.8rem;padding:.02rem .65rem}
@media (min-width:1101px){.brand{margin-inline-end:1.5rem}}

/* ---- Donor login: split panel ---- */
.authpage--split{min-height:70vh;display:grid;place-items:center;padding-block:3rem}
.login{display:grid;grid-template-columns:5fr 6fr;max-width:880px;margin-inline:auto;background:var(--surface,#fff);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 18px 50px rgba(8,50,38,.12)}
.login__side{position:relative;padding:2.5rem 2rem;color:#fff;background:radial-gradient(420px 300px at 90% 110%,rgba(23,115,85,.9),transparent 70%),#0b4b38;display:flex;flex-direction:column;justify-content:center;gap:.4rem}
.login__side::before{content:"";position:absolute;inset:0;background-image:var(--tile);background-size:72px;opacity:.07;pointer-events:none}
.login__side>*{position:relative}
.login__side h2{color:#fff;margin:0;font-size:1.6rem}
.login__side .ur{color:var(--gold-500);margin:0}
.login__side p{color:rgba(255,255,255,.85);margin:.6rem 0 0;line-height:1.6}
.login__points{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.6rem}
.login__points li{display:flex;align-items:center;gap:.6rem;font-size:.92rem;color:#fff}
.login__points li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold-500);flex:none}
.login__main{padding:2.5rem 2.25rem}
.login__main h1{font-size:1.5rem;margin:0}
.login__main .ur{margin:.1rem 0 1.5rem}
.login__main .field input{width:100%;padding:.7rem .85rem;border-radius:10px}
.login__main .btn--block{margin-top:.4rem}
.login__main .note{margin-top:1.4rem;font-size:.85rem;color:var(--muted)}
.login__links{margin:.6rem 0 0;font-size:.9rem;display:flex;gap:.6rem}
@media (max-width:760px){.login{grid-template-columns:1fr}.login__side{padding:1.75rem 1.5rem}.login__points{display:none}.login__main{padding:1.75rem 1.5rem}}

/* ---- Donate page refresh ---- */
.split--donate{align-items:start;gap:2rem}
.split--donate h2{font-size:1.35rem;margin:.2rem 0 1rem}
.split--donate .step{display:flex;align-items:center;gap:.55rem;margin:0;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--green-700,#0f6b4f)}
.split--donate .step span{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:#0b4b38;color:var(--gold-500);font-size:.8rem;letter-spacing:0}
.split--donate .accounts{display:grid;gap:.9rem}
.split--donate .account{padding:1.15rem 1.25rem;border-radius:14px;border-inline-start:4px solid var(--gold-500);box-shadow:none}
.split--donate .account h3{font-size:1rem;margin:0 0 .5rem}
.split--donate .account dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:0}
.split--donate .account dt{color:var(--muted);font-size:.85rem}
.split--donate .account dd{margin:0;font-weight:500}
.split--donate .account--note{background:var(--green-50,#eef5f1);border-inline-start-color:#0b4b38}
.split--donate form.card{padding:1.75rem 1.75rem 1.5rem;border-radius:16px;border-top:4px solid var(--gold-500);box-shadow:0 18px 50px rgba(8,50,38,.1)}
.split--donate .chips-input{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.6rem}
.split--donate .chips-input .chip{padding:.4rem .9rem;border-radius:99px;border:1px solid var(--line);background:var(--surface,#fff);font-weight:600;cursor:pointer}
.split--donate .chips-input .chip:hover{border-color:var(--gold-500);background:#fbf5e6}
.split--donate .field input,.split--donate .field select,.split--donate .field textarea{border-radius:10px}
@media (min-width:900px){.split--donate>form.card{position:sticky;top:76px}}

/* ---- Donate form: compact fields, amount pills ---- */
.split--donate form.card{padding:1.35rem 1.5rem 1.25rem}
.split--donate .field{margin-bottom:.7rem}
.split--donate .field label{font-size:.85rem;margin-bottom:.2rem}
.split--donate .field input,.split--donate .field select,.split--donate .field textarea{padding:.4rem .7rem;font-size:.92rem;min-height:0;line-height:1.4}
.split--donate .field textarea{min-height:0;height:3.6rem}
.split--donate .row2{gap:.7rem}
.split--donate .chips-input{margin-bottom:0}
.split--donate .chip{padding:.3rem .85rem;font-size:.9rem;line-height:1.4}
.split--donate .chip--input{width:9.5rem;text-align:center;padding:.3rem .85rem;font-weight:600;background:var(--surface,#fff);border:1px dashed var(--gold-500);border-radius:99px}
.split--donate .chip--input:focus{outline:0;border-style:solid;box-shadow:0 0 0 3px rgba(226,176,74,.3)}
.split--donate .chip--input::placeholder{font-weight:400;color:var(--muted)}
.split--donate .chip{font-size:.8rem;padding:.22rem .7rem}
.split--donate .chip--input{display:inline-flex;align-items:center;gap:.35rem;width:auto;padding:.22rem .8rem;font-size:.8rem}
.split--donate .chip--input b{font-weight:600;color:var(--muted)}
.split--donate .chip--input input{width:6.5rem;border:0;background:transparent;padding:0;border-radius:0;font-size:.8rem;font-weight:600;min-height:0;box-shadow:none;outline:0}
.split--donate .chip--input:focus-within{border-style:solid;box-shadow:0 0 0 3px rgba(226,176,74,.3)}
.split--donate .chip--input input::placeholder{font-weight:400}
.split--donate .check,.split--donate form>.note{white-space:nowrap;font-size:.8rem;margin:.3rem 0}
.split--donate .check{font-weight:500;display:flex;align-items:center;gap:.45rem}
.split--donate form>.note{text-align:center;color:var(--muted)}
@media (max-width:480px){.split--donate .check,.split--donate form>.note{white-space:normal}}
.thanks h2{margin-bottom:.2rem}
.thanks__name{color:var(--green-700,#0f6b4f)}
.thanks__lead{font-size:1.05rem;font-weight:500;margin:0 0 1rem}

/* ---- About page: personal, warm ---- */
.about-hero__lead{max-width:46ch;font-size:1.15rem;line-height:1.7;color:rgba(255,255,255,.9);margin:.6rem 0 0}
.about-letter{max-width:680px;font-size:1.08rem;line-height:1.95}
.about-letter__hello{font-family:var(--font-head);font-size:1.5rem;color:var(--green-800,#0b4b38);margin:0 0 1rem}
.about-letter p{margin:0 0 1.1rem;max-width:none}
.about-letter__sign{margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid var(--line);color:var(--muted)}
.about-letter__sign strong{color:var(--green-800,#0b4b38);font-family:var(--font-head)}
.moments{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem}
.moment{background:var(--surface,#fff);border:1px solid var(--line);border-radius:16px;padding:1.5rem 1.25rem;text-align:center;border-top:4px solid var(--gold-500)}
.moment__icon{display:inline-grid;place-items:center;width:3.6rem;height:3.6rem;border-radius:50%;background:#0b4b38;color:var(--gold-500);margin-bottom:.8rem}
.moment h3{font-size:1.1rem;margin:0 0 .5rem}
.moment p{margin:0;color:var(--muted);line-height:1.7;font-size:.95rem}
.about-promise .value__ur{font-family:var(--font-ur);color:var(--gold-500);font-size:1rem;margin-inline-start:.3rem}
.about-together{display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem;align-items:center}
.together{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.together li{background:var(--surface,#fff);border:1px solid var(--line);border-radius:14px;padding:1.1rem;text-align:center}
.together strong{display:block;font-family:var(--font-head);font-size:1.9rem;color:#0b4b38;line-height:1.2}
.together span{font-size:.85rem;color:var(--muted)}
.about-close{background:radial-gradient(520px 320px at 80% 120%,rgba(23,115,85,.9),transparent 70%),#0b4b38;color:#fff;text-align:center;padding:3.5rem 0;border-top:3px solid var(--gold-500)}
.about-close__in{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.about-close .icon--xl{color:var(--gold-500)}
.about-close h2{color:#fff;margin:0}
.about-close p{max-width:52ch;margin:0 0 .8rem;color:rgba(255,255,255,.88);line-height:1.7}
.about-close__cta{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
html.is-ur .about-letter{line-height:2.2}
@media (max-width:820px){.about-together{grid-template-columns:1fr}}

/* ---- About page: smaller type ---- */
.about-hero h1{font-size:clamp(1.5rem,3.4vw,2.1rem)}
.about-hero__lead{font-size:.98rem}
.about-letter{font-size:.95rem;line-height:1.8}
.about-letter__hello{font-size:1.2rem}
html.is-ur .about-letter{line-height:2.05}
.about-letter__sign{font-size:.9rem}
.about .section__head h2,.section:has(.moments) h2,.about-promise h2,.about-together h2,.about-close h2{font-size:1.4rem}
.moment h3{font-size:1rem}
.moment p{font-size:.88rem;line-height:1.6}
.about-promise .value h3{font-size:1rem}
.about-promise .value p{font-size:.9rem}
.together strong{font-size:1.5rem}
.about-together p,.about-close p{font-size:.95rem}

/* Amount box: highlighted once an amount is chosen or typed */
.split--donate .chip--input.is-filled{background:#fbf1d6;border:1px solid var(--gold-500);box-shadow:0 0 0 3px rgba(226,176,74,.28)}
.split--donate .chip--input.is-filled b{color:#7a5200}
.split--donate .chip--input.is-filled input{color:#2a1e00}

/* ---- Donate: signed-in donor card ---- */
.givingas{display:flex;align-items:center;gap:.8rem;margin:0 0 .9rem;padding:.7rem .85rem;border:1px solid var(--gold-500);border-radius:12px;background:#fbf5e4}
.givingas__avatar{flex:none;width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;background:#0b4b38;color:var(--gold-500);font-weight:700;font-size:1.05rem}
.givingas__who{display:grid;gap:.05rem;line-height:1.3;min-width:0}
.givingas__who small{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.givingas__who strong{font-size:1rem}
.givingas__meta{display:flex;flex-wrap:wrap;gap:.2rem .7rem;font-size:.82rem;color:var(--muted)}
.givingas__meta code{background:#fff;border:1px solid var(--line);border-radius:6px;padding:0 .35rem;font-size:.78rem;color:var(--ink)}
.givingas__out{margin-inline-start:auto;background:none;border:0;color:var(--green-700,#0f6b4f);text-decoration:underline;cursor:pointer;font:inherit;font-size:.82rem;padding:.2rem}

/* Donate: sign-in hint for visitors */
.signinhint{display:flex;align-items:center;gap:.5rem;margin:0 0 .9rem;padding:.5rem .75rem;border-radius:10px;background:var(--green-50,#eef5f1);font-size:.85rem;color:var(--muted)}
.signinhint .icon{width:1.1rem;height:1.1rem;color:var(--green-700,#0f6b4f);flex:none}
.signinhint a{font-weight:600;color:var(--green-700,#0f6b4f)}

/* Outline buttons on dark backgrounds: a <button> must not fall back to the browser's grey fill */
.btn--outline-light,button.btn--outline-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);cursor:pointer;font:inherit;font-weight:600}
.btn--outline-light:hover,button.btn--outline-light:hover{background:rgba(255,255,255,.14);color:#fff}
.btn--outline-light:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}

/* Donate: keep the amount box visibly apart from the preset amounts */
.split--donate .chips-input{row-gap:.6rem}
.split--donate .chips-input .chip--input{margin-inline-start:1rem;position:relative}
.split--donate .chips-input .chip--input::before{content:"";position:absolute;inset-inline-start:-.65rem;top:15%;height:70%;width:1px;background:var(--line)}
@media (max-width:560px){
  .split--donate .chips-input .chip--input{margin-inline-start:0;margin-top:.3rem}
  .split--donate .chips-input .chip--input::before{display:none}
}

/* ================= Donate page redesign ================= */
.dn-steps{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.dn-steps li{display:flex;gap:.75rem;align-items:flex-start;padding:.8rem 1rem;border:1px solid var(--line);border-radius:14px;background:var(--surface,#fff)}
.dn-steps span{flex:none;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;background:#0b4b38;color:var(--gold-500);font-weight:700}
.dn-steps strong{display:block;font-size:.95rem;line-height:1.3}
.dn-steps small{display:block;color:var(--muted);font-size:.8rem;line-height:1.4}

.dn-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:1.6rem;align-items:start}
.dn-form{padding:1.4rem 1.5rem 1.3rem}
.dn-group{border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem .4rem;margin:0 0 1rem;background:var(--green-50,#f4f8f6)}
.dn-group legend{display:flex;align-items:center;gap:.5rem;padding:0 .5rem;font-weight:700;font-size:.95rem}
.dn-group legend span{width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;background:#0b4b38;color:var(--gold-500);font-size:.8rem}
.dn-group .field input,.dn-group .field select{background:#fff}
.dn-note textarea{min-height:0}

.dn-side{display:grid;gap:1rem}
@media (min-width:900px){.dn-side{position:sticky;top:76px}}
.dn-accounts{padding:1.2rem 1.25rem;border-top:4px solid var(--gold-500)}
.dn-accounts h2{display:flex;align-items:center;gap:.5rem;font-size:1.1rem;margin:0 0 .9rem}
.dn-accounts h2 .icon{width:1.2rem;height:1.2rem;color:var(--green-700,#0f6b4f)}
.dn-acct{padding:.75rem 0;border-top:1px solid var(--line)}
.dn-acct:first-of-type{border-top:0;padding-top:0}
.dn-acct h3{font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 .4rem}
.dn-acct dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem .9rem;margin:0;font-size:.9rem}
.dn-acct dt{color:var(--muted)}
.dn-acct dd{margin:0;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-weight:500}
.dn-acct p{margin:0;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-weight:500}
.dn-copy{border:1px solid var(--line);background:#fff;border-radius:99px;padding:.05rem .6rem;font:inherit;font-size:.75rem;cursor:pointer;color:var(--green-700,#0f6b4f)}
.dn-copy:hover{border-color:var(--gold-500);background:#fbf1d6}
.dn-copy.is-done{background:#0b4b38;border-color:#0b4b38;color:#fff}
.dn-hint{margin:.8rem 0 0;padding-top:.8rem;border-top:1px dashed var(--line);font-size:.84rem;color:var(--muted);line-height:1.6}
.dn-zakat{padding:1rem 1.2rem;background:var(--green-50,#eef5f1);border-inline-start:4px solid #0b4b38}
.dn-zakat h3{margin:0 0 .3rem;font-size:1rem}
.dn-zakat p{margin:0;font-size:.88rem;color:var(--muted);line-height:1.6}
.dn-trace{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;border-radius:14px;background:#0b4b38;color:#fff;text-decoration:none}
.dn-trace .icon{width:1.3rem;height:1.3rem;color:var(--gold-500);flex:none}
.dn-trace span{display:grid;line-height:1.3;margin-inline-end:auto}
.dn-trace small{opacity:.8}
.dn-trace:hover{background:#0f6b4f}

@media (max-width:900px){
  .dn-steps{grid-template-columns:1fr}
  .dn-layout{grid-template-columns:1fr}
}
@media (min-width:900px){.split--donate>form.dn-form{position:static}}

/* Donate: identity card spans the top; "Your gift" and the bank details start on the same line */
.dn-layout{align-items:start}
.dn-layout>.dn-form,.dn-layout>.dn-side{margin-top:0}
.dn-form>.dn-group:first-of-type{margin-top:0}
.dn-side{position:static}
@media (min-width:900px){.dn-side{position:sticky;top:76px}}
.wrap>.givingas,.wrap>.signinhint{margin-bottom:1.1rem}
/* ===== Donate: bank details sit beside the "Your gift" card, inside the form ===== */
.dn-layout{display:block}
.dn-grid{display:grid;grid-template-columns:1fr;gap:1rem 1.4rem;grid-template-areas:"gift" "side" "rest"}
.dn-a-gift{grid-area:gift;margin:0}
.dn-a-side{grid-area:side;position:static!important}
.dn-a-rest{grid-area:rest}
@media (min-width:720px){
  .dn-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"gift side" "rest side"}
}
.dn-a-side .card{box-shadow:none}
.dn-a-side .dn-accounts{padding:1rem 1.1rem}
/* Donor account: pending gifts */
.kpi__pending{color:#8a6410;font-weight:600}
.pend-note{margin:-.2rem 0 .8rem;font-size:.9rem}
.pend-table .tag--warn{white-space:nowrap}

/* Donor account tables: compact rows */
.table--tight td,.table--tight th{vertical-align:middle}
.table--tight .tag{font-size:.7rem;padding:0 .45rem;line-height:1.5}
.table--tight .link-arrow{font-size:.8rem}
.table--tight .link-arrow .icon{width:.8rem;height:.8rem}

/* ================= Donate page v2 (stepper) ================= */
.dp{margin:0}
.dp-steps{list-style:none;margin:0 0 1.2rem;padding:0;display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.dp.is-js .dp-steps{display:grid}
.dp-steps li{display:flex;align-items:center;gap:.55rem;padding:.55rem .8rem;border-top:3px solid var(--line);color:var(--muted);font-size:.9rem}
.dp-steps li span{width:1.55rem;height:1.55rem;border-radius:50%;display:grid;place-items:center;background:var(--green-50,#eef5f1);font-weight:700;font-size:.8rem}
.dp-steps li.is-on{color:var(--ink);border-color:var(--gold-500);font-weight:600}
.dp-steps li.is-on span{background:#0b4b38;color:var(--gold-500)}
.dp-steps li.is-done{border-color:#0f6b4f;color:var(--ink)}
.dp-steps li.is-done span{background:#0f6b4f;color:#fff}

.dp-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:1.4rem;align-items:start}
@media (max-width:860px){.dp-grid{grid-template-columns:1fr}}
.dp-panel{padding:1.3rem 1.4rem}
.dp-panel[hidden]{display:none}
.dp:not(.is-js) .dp-panel{margin-bottom:1rem}
.dp-panel h2{font-size:1.2rem;margin:0 0 .9rem}
.dp-label{display:block;font-size:.88rem;color:var(--muted);margin:.2rem 0 .3rem}
.dp-quiet{color:var(--muted);font-size:.85rem;line-height:1.5;margin:.5rem 0 0}
.dp-quiet .icon{width:.95rem;height:.95rem;vertical-align:-2px;color:#0f6b4f}
.dp-err{color:#b3261e;font-size:.85rem;min-height:1.1rem;margin:.35rem 0 0}
.dp-actions{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:1rem;flex-wrap:wrap}
.dp-fields{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media (max-width:560px){.dp-fields{grid-template-columns:1fr}}

.dp-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.8rem}
.dp-chip{border:1px solid var(--line);background:var(--surface,#fff);border-radius:99px;padding:.4rem 1rem;font:inherit;font-weight:600;cursor:pointer}
.dp-chip:hover{border-color:var(--gold-500);background:#fbf5e4}
.dp-chip.is-on{background:var(--gold-500);border-color:var(--gold-500);color:#2a1e00;box-shadow:0 0 0 3px rgba(226,176,74,.28)}
.dp-amount{display:flex;align-items:center;gap:.5rem;max-width:15rem;border:1px solid var(--line);border-radius:12px;padding:.15rem .8rem;background:#fff;transition:border-color .15s,box-shadow .15s,background .15s}
.dp-amount b{color:var(--muted);font-weight:600}
.dp-amount input{border:0;background:transparent;font:inherit;font-size:1.15rem;font-weight:700;padding:.45rem 0;width:100%;outline:0;min-width:0}
.dp-amount:focus-within{border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(226,176,74,.3)}
.dp-amount.is-filled{background:#fbf1d6;border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(226,176,74,.28)}
.dp-amount.is-filled b{color:#7a5200}
.dp-amount.is-filled input{color:#2a1e00}

.dp-dest{display:flex;gap:.7rem;align-items:flex-start;margin-top:1rem;padding:.7rem .9rem;border:1.5px solid #0f6b4f;border-radius:12px;background:var(--green-50,#eef5f1)}
.dp-dest .icon{width:1.3rem;height:1.3rem;color:#0f6b4f;flex:none;margin-top:.1rem}
.dp-dest span{display:grid;line-height:1.35}
.dp-dest small{color:var(--muted)}
.dp-more{margin-top:.7rem;border:1px dashed var(--line);border-radius:12px;padding:.1rem .9rem .7rem}
.dp-more summary{cursor:pointer;padding:.6rem 0;font-weight:500}
.dp-opt{font-weight:400;font-size:.75rem;color:var(--muted);background:var(--green-50,#eef5f1);border-radius:99px;padding:.02rem .5rem;margin-inline-start:.3rem}

.dp-methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
@media (max-width:480px){.dp-methods{grid-template-columns:1fr}}
.dp-method{position:relative;display:flex;align-items:center;gap:.7rem;padding:.7rem .85rem;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.dp-method input{position:absolute;opacity:0;pointer-events:none}
.dp-method>.icon{width:1.35rem;height:1.35rem;color:var(--muted);flex:none}
.dp-method span{display:grid;line-height:1.3;flex:1}
.dp-method small{color:var(--muted);font-size:.78rem}
.dp-method .dp-tick{width:1.2rem;height:1.2rem;color:#fff;background:#0f6b4f;border-radius:50%;padding:.2rem;opacity:0;flex:none}
.dp-method:hover{border-color:var(--gold-500)}
.dp-method.is-on{border:2px solid #0f6b4f;background:#eaf5ef;box-shadow:0 0 0 3px rgba(15,107,79,.15);padding:calc(.7rem - 1px) calc(.85rem - 1px)}
.dp-method.is-on>.icon{color:#0f6b4f}
.dp-method.is-on .dp-tick{opacity:1}
.dp-method:focus-within{outline:2px solid var(--gold-500);outline-offset:2px}

.dp-paid{display:flex;gap:.7rem;align-items:flex-start;margin-top:1rem;padding:.75rem .9rem;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:var(--surface,#fff)}
.dp-paid input{margin-top:.25rem;accent-color:#0f6b4f}
.dp-paid span{display:grid;line-height:1.4}
.dp-paid small{color:var(--muted)}
.dp-paid:has(input:checked){border-color:var(--gold-500);background:#fbf5e4}
.dp-proof{margin-top:.7rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:12px}
.dp-proof[hidden]{display:none}
.dp-or{display:flex;align-items:center;gap:.6rem;color:var(--muted);font-size:.8rem;margin:.7rem 0}
.dp-or::before,.dp-or::after{content:"";flex:1;border-top:1px solid var(--line)}
.dp-drop{position:relative;display:grid;justify-items:center;gap:.15rem;padding:1rem;border:1.5px dashed #c9d6cf;border-radius:12px;text-align:center;cursor:pointer;background:#fafcfb;overflow:hidden}
.dp-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.dp-drop small{color:var(--muted);font-size:.78rem}
.dp-drop .dp-up{width:1.3rem;height:1.3rem;color:var(--muted)}
.dp-drop.has{border-style:solid;border-color:#0f6b4f;background:#eaf5ef}
.dp-drop.has .dp-up{color:#0f6b4f}

.dp-auto{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.dp-auto div{background:var(--green-50,#eef5f1);border-radius:10px;padding:.5rem .7rem}
.dp-auto small{display:block;font-size:.72rem;color:var(--muted)}
.dp-auto span{font-weight:600;font-size:.92rem;overflow-wrap:anywhere}
.dp-check{display:flex;gap:.6rem;align-items:flex-start;margin:.8rem 0 0;font-size:.92rem;cursor:pointer}
.dp-check input{margin-top:.2rem;accent-color:#0f6b4f}

.dp-side{display:grid;gap:1rem;position:sticky;top:76px}
@media (max-width:860px){.dp-side{position:static}}
.dp-summary{padding:1rem 1.15rem}
.dp-summary>small{color:var(--muted)}
.dp-total{display:block;font-size:1.7rem;line-height:1.25;color:#0b4b38;font-family:var(--font-head)}
.dp-summary dl,.dp-accounts dl,.dp-recap{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;margin:.6rem 0 0;font-size:.9rem}
.dp-summary dt,.dp-accounts dt,.dp-recap dt{color:var(--muted)}
.dp-summary dd,.dp-accounts dd,.dp-recap dd{margin:0;font-weight:500;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.dp-accounts{padding:1.05rem 1.15rem;border-top:4px solid var(--gold-500)}
.dp-accounts[hidden]{display:none}
.dp-accounts h2{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:1.05rem;margin:0 0 .4rem}
.dp-badge{display:inline-flex;align-items:center;padding:.05rem .65rem;border-radius:99px;background:#eaf5ef;color:#0b4b38;font-size:.8rem;font-weight:600;border:1px solid rgba(15,107,79,.3)}
.dp-thanks{max-width:620px;margin-inline:auto}
.dp-recap{margin:1rem 0;padding:.7rem 0;border-block:1px solid var(--line)}

/* the identity strip sits above the stepper */
.wrap>.givingas,.wrap>.signinhint{margin-bottom:1rem}
/* ===== Donate v2.1: greeting on the page, clean checkboxes ===== */
.dp-greet{margin:0 0 1.1rem;font-size:1.05rem;line-height:1.7;display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .5rem;background:none;border:0;padding:0}
.dp-greet__salam{font-family:var(--font-head);font-size:1.25rem;color:#0b4b38}
.dp-greet strong{font-size:1.15rem}
.dp-greet__meta{font-size:.9rem;color:var(--muted)}
.dp-greet__meta code{background:#fff;border:1px solid var(--line);border-radius:6px;padding:0 .35rem;font-size:.8rem;color:var(--ink);margin-inline-end:.4rem}
.dp-link{background:none;border:0;padding:0;font:inherit;font-size:.88rem;color:#0f6b4f;text-decoration:underline;cursor:pointer}
.dp-greet__meta a{font-weight:600;color:#0f6b4f}

.dp .dp-tick{display:flex;align-items:flex-start;gap:.7rem;margin:1rem 0 0;padding:0;border:0;background:none;box-shadow:none;cursor:pointer;text-align:start}
.dp .dp-tick input[type=checkbox]{flex:none;width:1.15rem;height:1.15rem;min-width:0;margin:.2rem 0 0;padding:0;accent-color:#0f6b4f;border-radius:4px;cursor:pointer}
.dp .dp-tick__text{display:block;line-height:1.45}
.dp .dp-tick__text strong{display:block;font-weight:600;font-size:.95rem}
.dp .dp-tick__text small{display:block;color:var(--muted);font-size:.82rem;margin-top:.05rem}
.dp .dp-tick:has(input:checked){border:0;background:none;box-shadow:none}
.dp .dp-tick input[type=checkbox]:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}
.dp-proof{border:0;padding:.2rem 0 0 1.85rem;margin-top:.6rem;background:none}
@media (max-width:560px){.dp-proof{padding-left:0}}
/* Donate: receipt options */
.dp-proofopts{display:grid;gap:.1rem;margin-bottom:.6rem}
.dp-proofopts .dp-tick{margin:.3rem 0}
.dp-wa{display:grid;gap:.4rem;padding:.2rem 0}
.btn--outline-wa{display:inline-flex;align-items:center;gap:.5rem;border:1.5px solid #1f9d55;color:#14683a;background:#f1faf4;border-radius:99px;padding:.55rem 1.1rem;font-weight:600;text-decoration:none}
.btn--outline-wa:hover{background:#e2f5e9}
.btn--outline-wa .icon{width:1.1rem;height:1.1rem}
.dp-proof{padding-left:0}
/* Radios in the receipt options: same compact box-then-text layout as the checkboxes */
.dp .dp-tick input[type=radio]{flex:none;width:1.15rem;height:1.15rem;min-width:0;margin:.2rem 0 0;padding:0;accent-color:#0f6b4f;cursor:pointer}
.dp .dp-proofopts{display:grid;gap:.1rem;padding:.2rem 0 .4rem}
.dp .dp-proofopts .dp-tick{margin:.35rem 0}

/* More room between the logo and the menu */
@media (min-width:1101px){.brand{margin-inline-end:3.5rem}}
@media (min-width:1101px) and (max-width:1280px){.brand{margin-inline-end:2rem}}

/* Menu: more distance from the logo and more room between items */
@media (min-width:1281px){
  .brand{margin-inline-end:5rem}
  .nav li a{padding:.3rem .85rem}
}
@media (min-width:1101px) and (max-width:1280px){
  .brand{margin-inline-end:2.25rem}
  .nav li a{padding:.25rem .55rem}
}




.brand{background:none;padding:0}
.brand .brand__tile{width:auto;height:46px;padding:4px 6px;border-radius:10px;background:#fff;object-fit:contain}
.footer .brand .brand__tile{height:44px}
.login__mark{width:auto;height:84px;padding:6px 10px;border-radius:14px;background:#fff;margin-bottom:1rem;object-fit:contain}
/* Logo v5: gold mark + live Montserrat wordmark, TRUST on the right */
.brand{display:flex;align-items:center;gap:.7rem}
.brand .brand__mark{width:auto;height:46px;border-radius:0;background:none}
.brand .brand__word{display:grid;line-height:1;color:#0b4b38}
.brand .brand__word strong{font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:.01em;white-space:nowrap}
.brand .brand__word em{font-family:'Montserrat',sans-serif;font-style:normal;font-weight:600;font-size:.62rem;letter-spacing:.42em;margin-top:.32rem;text-align:end;margin-inline-end:-.42em;white-space:nowrap}
.brand--light .brand__word,.footer .brand .brand__word{color:#fff}
.footer .brand .brand__tile{height:44px}
@media (max-width:520px){.brand .brand__mark{height:38px}.brand .brand__word strong{font-size:.88rem}.brand .brand__word em{font-size:.55rem}}
html.is-ur .brand .brand__word strong{letter-spacing:0}
/* events bar: All events on the left, WhatsApp number on the right */
.announce__wa{display:inline-flex;gap:.35rem;align-items:center;font-weight:700;color:var(--gold-500,#e2b04a);text-decoration:none;white-space:nowrap}
.announce__wa .icon{width:1.05em;height:1.05em}
.announce__wa:hover{text-decoration:underline}

/* events bar: All events sits right after the event heading, set off by a divider */
.announce__more{white-space:nowrap;margin-inline-start:.75rem;padding-inline-start:1.5rem;border-inline-start:1px solid rgba(255,255,255,.22)}
.announce__more + .announce__dots{margin-inline-start:auto}
@media (max-width:640px){.announce__more{margin-inline-start:0;padding-inline-start:0;border-inline-start:0}}

/* events bar: tighter event area so All events sits further left; marker + larger WhatsApp number */
.announce__items{flex:0 1 32rem;min-width:220px}
.announce__wa{font-size:1.08rem;margin-inline-start:auto;padding-inline-start:1.1rem;border-inline-start:1px solid rgba(255,255,255,.28)}
.announce__wa .icon{width:1.2em;height:1.2em}
@media (max-width:640px){.announce__wa{margin-inline-start:0;padding-inline-start:0;border-inline-start:0;font-size:1rem}}

/* events bar: always one row on wider screens; long titles are shortened with an ellipsis */
@media (min-width:1180px){
  .announce__in{flex-wrap:nowrap;gap:.5rem 1rem}
  .announce__items{flex:0 1 auto;min-width:14rem}
  .aitem{flex-wrap:nowrap;min-width:0;white-space:nowrap;overflow:hidden}
  .aitem strong{overflow:hidden;text-overflow:ellipsis;min-width:0}
  .aitem__meta{overflow:hidden;text-overflow:ellipsis;flex:0 100 auto;min-width:0}
  .announce__tag,.announce__more,.announce__dots,.announce__wa{flex:0 0 auto}
}

/* events bar: dots right next to All events; only the WhatsApp number is pushed to the far end */
.announce__more + .announce__dots{margin-inline-start:.9rem}

/* events bar: the event area is as wide as its longest title, so nothing is cut off */
.aitem strong,.aitem__meta{text-overflow:clip}
@media (min-width:1180px){.aitem{overflow:visible}}

/* events bar, Urdu: never clip the title or the date line; Nastaliq needs more height */
html.is-ur .announce__in{flex-wrap:wrap}
html.is-ur .announce__items{flex:1 1 20rem;min-width:0}
html.is-ur .aitem{flex-wrap:wrap;white-space:normal;overflow:visible}
html.is-ur .aitem strong,html.is-ur .aitem__meta{overflow:visible;text-overflow:clip;white-space:normal;line-height:1.9}
html.is-ur .announce__in{padding-block:.35rem}

/* Ways to give: one wallet card and one bank card */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start}
.ways__card{background:var(--card,#fff);border:1px solid var(--line,#e2ddd0);border-radius:16px;padding:1.2rem 1.4rem;box-shadow:0 2px 10px rgba(8,50,38,.06)}
.ways__head{display:flex;align-items:center;gap:.9rem;margin-bottom:.6rem}
.ways__head h2{margin:0;font-size:1.2rem;line-height:1.2}
.ways__head p{margin:.1rem 0 0;color:var(--muted,#667);font-size:.88rem}
.ways__badge{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#0b4b38;color:#fff;flex:0 0 auto}
.ways__item{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;padding:.7rem 0;border-top:1px solid var(--line,#e2ddd0)}
.ways__logo{flex:0 0 7.5rem;display:flex;align-items:center}
.ways__logo img{height:52px;width:auto;max-width:100%;object-fit:contain}
.ways__label{flex:0 0 7.5rem;font-weight:600}
.ways__value{flex:1 1 9rem;font-size:1.05rem;word-break:break-word}
.ways__title{margin:.2rem 0 0;padding-top:.8rem;border-top:1px solid var(--line,#e2ddd0);display:flex;gap:.9rem;flex-wrap:wrap}
.ways__title span:first-child{flex:0 0 7.5rem;font-weight:600}
.ways__after{margin-top:1.5rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.ways__after p{margin:0;flex:1 1 20rem}
@media (max-width:760px){.ways{grid-template-columns:1fr}}

/* Ways to give: bigger numbers, both cards the same height */
.ways{align-items:stretch}
.ways__card{display:flex;flex-direction:column}
.ways__value.mono{font-size:1.4rem;letter-spacing:.02em;font-weight:600}
.ways__value{font-size:1.15rem}
.ways__title{margin-top:auto}

/* Logo v6: emerald roundel (eight-point star + heart) with stacked wordmark */
.brand{gap:.8rem}
.brand .brand__mark{width:46px;height:46px;flex:none}
.brand .brand__word strong{font-size:1.1rem;letter-spacing:.04em}
.brand .brand__word em{font-size:.62rem;letter-spacing:.5em;margin-top:.38rem;text-align:start;margin-inline-end:0;color:#c9962b}
.brand--light .brand__word em,.footer .brand .brand__word em{color:#e2b04a}
@media (max-width:520px){.brand .brand__mark{width:38px;height:38px}.brand .brand__word strong{font-size:.9rem}}
.ways__soon{margin:.6rem 0 0;padding:.8rem 1rem;border-radius:10px;background:#fff7e0;color:#6b4e00;font-size:.95rem}

/* Logo v7: colourful figure mark (PNG) with live wordmark in the mark's navy and orange */
.brand .brand__mark{width:auto;height:46px;flex:none}
.brand .brand__word{color:#0b4468}
.brand .brand__word strong{letter-spacing:.05em}
.brand .brand__word em{color:#e0561a}
.brand--light .brand__word,.footer .brand .brand__word{color:#fff}
.brand--light .brand__word em,.footer .brand .brand__word em{color:#ff9a57}
.footer .brand .brand__mark{background:#fff;border-radius:10px;padding:4px 6px;height:48px}
@media (max-width:520px){.brand .brand__mark{width:auto;height:38px}.footer .brand .brand__mark{height:42px}}

/* Logo v8: the full supplied logo (figure + name) as one image */
.brand .brand__logo{width:auto;height:60px;display:block;flex:none}
.header__in{min-height:76px}
.footer .brand .brand__logo{background:#fff;border-radius:12px;padding:6px 10px;height:68px;box-sizing:content-box}
@media (max-width:520px){.brand .brand__logo{height:46px}.header__in{min-height:62px}.footer .brand .brand__logo{height:52px}}

/* Logos are transparent everywhere: no tiles or backgrounds behind them */
.footer .brand .brand__logo{background:none;padding:0;border-radius:0;height:64px;box-sizing:border-box}
.login__mark{background:none;padding:0;border-radius:0}
@media (max-width:520px){.footer .brand .brand__logo{height:52px}}

/* Logo v9: wide horizontal logo (figure + name on one line) */
.brand .brand__logo{height:48px}
.header__in{min-height:68px}
.footer .brand .brand__logo{height:50px}
@media (max-width:520px){.brand .brand__logo{height:34px}.header__in{min-height:58px}.footer .brand .brand__logo{height:40px}}

/* Projects filters: compact */
.filters{gap:.5rem;margin-bottom:1.25rem}
.tabs,.chips{gap:.35rem}
.tabs a{padding:.22rem .7rem;font-size:.82rem;line-height:1.5}
.tabs a em{font-size:.7rem;padding:0 .38rem;margin-inline-start:.2rem}
.chips a{padding:.14rem .6rem;font-size:.78rem;line-height:1.5;border-radius:999px}

/* Project cards: lean, uniform, whole card is the link */
.grid--cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:1rem}
.pcard{position:relative;border-radius:14px}
.pcard:hover{transform:translateY(-3px)}
.pcard__media{aspect-ratio:5/2}
.pcard__media--art{aspect-ratio:auto;height:4.5rem}
.pcard__media--art .pcard__art .icon{width:1.9rem;height:1.9rem}
.pcard .badge{top:.5rem;inset-inline-start:.5rem;left:auto;font-size:.68rem;padding:.12rem .5rem}
.pcard__body{padding:.8rem .95rem .9rem;gap:0}
.pcard .eyebrow{margin:0 0 .15rem;font-size:.66rem}
.pcard__title{font-size:1rem;line-height:1.3;margin:0 0 .3rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard__title a::after{content:"";position:absolute;inset:0;z-index:1}
.pcard__sum{font-size:.82rem;line-height:1.5;margin:0 0 .7rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard__foot{margin-top:auto;display:flex;align-items:flex-end;gap:.6rem}
.pcard .meter{flex:1;margin:0;min-width:0}
.pcard .meter__bar{height:6px}
.pcard .meter__row{font-size:.72rem;margin-top:.3rem;flex-wrap:wrap;column-gap:.5rem}
.pcard__go{flex:none;display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--tint,#eef3ef);color:var(--green-700,#0b4b38);margin-inline-start:auto}
.pcard__go .icon{width:.9rem;height:.9rem}
.pcard:hover .pcard__go{background:var(--gold-500);color:#2a1e00}
.section--tint .grid--cards{gap:1rem}

/* Footer: compact (no oversized watermark, tighter spacing) */
.footer2{font-size:.85rem}
.footer2__mark{display:block;font-size:clamp(2.2rem,7vw,4.6rem);line-height:.95;margin:.2rem 0 -.15rem;-webkit-text-stroke:1px rgba(255,255,255,.22)}
html.is-ur .footer2__mark{line-height:1.5}
.footer2__top{padding:1.5rem 0 1rem;gap:1.25rem 2rem;grid-template-columns:1.6fr repeat(3,1fr)}
.footer2__about{margin:.5rem 0 .7rem;max-width:42ch;font-size:.82rem;line-height:1.55}
.footer2 h3{margin:0 0 .5rem;font-size:.7rem}
.footer2__col ul{gap:.25rem}
.footer .brand .brand__logo{height:42px}
.footer2__bar{padding:.6rem 0;font-size:.75rem}
@media (max-width:820px){.footer2__top{grid-template-columns:repeat(3,1fr);padding-top:1.25rem}.footer2__brand{grid-column:1/-1}}
@media (max-width:560px){.footer2__top{grid-template-columns:1fr 1fr}.footer2__col:last-child{grid-column:1/-1}.footer .brand .brand__logo{height:36px}}

/* Footer: brand block + sketched name only */
.footer2__top{grid-template-columns:1fr;padding:1.5rem 0 .5rem}
@media (max-width:820px){.footer2__top{grid-template-columns:1fr}}

/* Footer: the sketched name sits on the same line as the logo */
.footer2__logoline{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1.5rem}
.footer2__logoline .footer2__mark{
  display:block;margin:0;padding:0;overflow:visible;
  font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.1;letter-spacing:-.01em;
  -webkit-text-stroke:1px rgba(255,255,255,.4);
}
html.is-ur .footer2__logoline .footer2__mark{line-height:1.6}
.footer2__top{padding:1.25rem 0 .75rem}

/* Footer: brand block on the left; the sketched name is centred beside it and spans all the remaining width */
.footer2__top{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1rem 2.5rem}
.footer2__markwrap{container-type:inline-size;min-width:0;display:flex;align-items:center;justify-content:center}
.footer2__markwrap .footer2__mark{
  display:block;margin:0;padding:0;width:100%;text-align:center;overflow:visible;
  font-size:clamp(1.8rem,5.4vw,4.6rem);               /* fallback */
  font-size:10.2cqw;line-height:1.05;letter-spacing:-.01em;white-space:nowrap;
  -webkit-text-stroke:1px rgba(255,255,255,.34);
}
html.is-ur .footer2__markwrap .footer2__mark{font-size:7cqw;line-height:1.5;letter-spacing:0}
@media (max-width:820px){
  .footer2__top{grid-template-columns:minmax(0,1fr)}
  .footer2__markwrap .footer2__mark{font-size:11cqw}
}

/* Footer dua in a handwritten face */
.footer2__dua{font-family:'Caveat','Segoe Script','Bradley Hand',cursive;font-weight:700;font-size:1.35rem;line-height:1.2;color:var(--gold-100,#f6e7b8);letter-spacing:.01em}
html.is-ur .footer2__dua{font-family:var(--font-ur);font-weight:400;font-size:1.05rem;line-height:1.8}

/* ---- A: faint gold calligraphy at the top right of cards (replaces the old icons) ---------------------------- */
.efeature::after,
.pcard__media--art::after,
.acard__media:not(:has(img))::after{
  position:absolute;top:.15rem;right:1.1rem;left:auto;z-index:0;pointer-events:none;
  font-family:'Aref Ruqaa','Amiri',serif;font-weight:700;line-height:1.35;color:#f1d58a;opacity:.28;direction:rtl;white-space:nowrap;
}
.efeature::after{content:"إن شاء الله";font-size:clamp(3.2rem,7vw,5.6rem);top:.3rem}
.acard__media:not(:has(img))::after{content:"ما شاء الله";font-size:2.4rem}
.pcard__media--art::after{content:"بارك الله";font-size:2.2rem}
.efeature>*{z-index:1}
html[dir=rtl] .efeature::after,html[dir=rtl] .pcard__media--art::after,html[dir=rtl] .acard__media:not(:has(img))::after{right:auto;left:1.1rem}

/* ---- Completed events: photo cards with a crossfading slideshow ----------------------------------------------- */
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media (max-width:760px){.pgrid{grid-template-columns:minmax(0,1fr);gap:16px}}
.pevent{display:flex;flex-direction:column;overflow:hidden;background:var(--surface,#fff);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(16,24,20,.05),0 8px 24px -12px rgba(16,24,20,.18)}
.pevent__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,var(--g1,#0f5a43),var(--g2,#0b4b38));display:grid;place-items:center;color:rgba(255,255,255,.85)}
.pevent__media--lg{border-radius:14px;margin-bottom:20px}
.pevent__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.pevent__img.is-on{opacity:1}
.pevent__media:not([data-fade]) .pevent__img{opacity:1}
@media (prefers-reduced-motion:reduce){.pevent__img{transition:none}}
.pevent__date{position:absolute;top:12px;inset-inline-start:12px;display:flex;flex-direction:column;align-items:center;min-width:52px;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.94);color:#0b4b38;line-height:1.1;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.pevent__date b{font:700 1.25rem/1 var(--font-head)}.pevent__date span{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.pevent__dots{position:absolute;bottom:10px;inset-inline:0;display:flex;justify-content:center;gap:6px}
.pevent__dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);transition:background .3s,transform .3s}
.pevent__dots i.is-on{background:#fff;transform:scale(1.25)}
.pevent__body{padding:16px 20px 20px}
.pevent__body .eyebrow{margin:0 0 6px;font-size:.7rem}
.pevent__body h3{margin:0 0 6px;font-size:1.1rem;line-height:1.35}.pevent__body h3 a{color:inherit;text-decoration:none}
.pevent__sum{margin:0 0 10px;font-size:.88rem;line-height:1.55;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---- Section headings: handwritten (Caveat). Page titles, card titles and the Urdu site keep their own faces ---- */
html:not(.is-ur) main .section__head h2,
html:not(.is-ur) main .wrap>h2,
html:not(.is-ur) main h2.h-sub,
html:not(.is-ur) main .about-close h2,
html:not(.is-ur) .promise .section__head h2{
  font-family:'Caveat','Segoe Script','Bradley Hand',cursive;font-weight:700;
  font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.1;letter-spacing:0;
}
html:not(.is-ur) main .section__head h2{margin-bottom:0}
html:not(.is-ur) main h2.tcard__h,
html:not(.is-ur) main .about-together h2{
  font-family:'Caveat','Segoe Script','Bradley Hand',cursive;font-weight:700;
  font-size:clamp(1.9rem,3.2vw,2.5rem);line-height:1.1;letter-spacing:0;
}

/* Main menu: 1px larger */
.nav li a{font-size:calc(.84rem + 1px)}
html.is-ur .nav li a{font-size:calc(1rem + 1px)}

/* Events bar title: handwritten, to match the section headings */
html:not(.is-ur) .aitem strong{font-family:'Caveat','Segoe Script','Bradley Hand',cursive;font-weight:700;font-size:1.45rem;line-height:1.1;letter-spacing:.01em}

/* Project detail picture: a fixed 16:9 frame instead of the photo's full (possibly very tall) size */
.detail__img{display:block;width:100%;aspect-ratio:16/9;max-height:420px;object-fit:cover;object-position:center;border-radius:16px;margin-bottom:1.25rem;box-shadow:0 1px 2px rgba(16,24,20,.05),0 8px 24px -14px rgba(16,24,20,.28)}
@media (max-width:640px){.detail__img{aspect-ratio:4/3;max-height:300px;border-radius:12px}}

/* ---- Gallery (pictures and videos) on project, event and activity pages ------------------------------------------ */
.gal{margin:28px 0 8px}
.gal__h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 14px;font:700 1.15rem/1.3 var(--font-head)}
.gal__h small{font:500 .8rem var(--font);color:var(--muted)}
.gal__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.gal__item{display:block;position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#0b4b38;box-shadow:0 1px 2px rgba(16,24,20,.08),0 6px 16px -10px rgba(16,24,20,.35)}
.gal__item img,.gal__item video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gal__item--video{aspect-ratio:16/9;grid-column:span 2;background:#000}
.gal__item--video video{object-fit:contain}
a.gal__item img{transition:transform .35s ease}
a.gal__item:hover img{transform:scale(1.04)}
@media (max-width:520px){.gal__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gal__item--video{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){a.gal__item img{transition:none}a.gal__item:hover img{transform:none}}
/* lightbox */
.lb{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;background:rgba(6,20,15,.92)}
.lb.is-open{display:flex}
.lb img{max-width:92vw;max-height:88vh;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lb button{position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;width:44px;height:44px;border-radius:50%;font-size:1.8rem;line-height:1;cursor:pointer}
.lb button:hover{background:rgba(255,255,255,.28)}
.lb__x{top:16px;inset-inline-end:16px}
.lb__n{top:50%;transform:translateY(-50%)}.lb__n--prev{inset-inline-start:16px}.lb__n--next{inset-inline-end:16px}
.lb--single .lb__n{display:none}
.lb-lock{overflow:hidden}
.detail--single{grid-template-columns:minmax(0,1fr)!important}
.detail__links{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* Date badge: clean rounded calendar tile instead of the eight-point star */
.datebadge::before{inset:4px;border-radius:14px;background:var(--gold-500);box-shadow:inset 0 -3px 0 rgba(0,0,0,.08)}
.datebadge::after{content:none}
.datebadge--lg::before{inset:6px;border-radius:18px}

/* Donate: "specific project" opens as a green confirmed selection; compact confirm step */
.dp-more[open]{border:1.5px solid #0f6b4f;border-style:solid;background:var(--green-50,#eef5f1)}
.dp-more[open] summary{color:#0b4b38;font-weight:700}
.dp-more[open] .dp-opt{background:#fff}
.dp-more summary{list-style:none;display:flex;align-items:center;gap:.5rem}
.dp-more summary::-webkit-details-marker{display:none}
.dp-more summary::before{content:"";width:.5rem;height:.5rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s;flex:none;margin-inline-end:.2rem}
.dp-more[open] summary::before{transform:rotate(45deg)}
.dp [data-step="3"] .field{margin-top:.6rem}
.dp [data-step="3"] .field label{font-size:.85rem;margin-bottom:.15rem}
.dp [data-step="3"] .field input,.dp [data-step="3"] .field textarea{padding-block:.5rem}
.dp [data-step="3"] textarea{min-height:0;height:2.6rem;resize:vertical}
.dp-note-ok{display:flex;gap:.5rem;align-items:flex-start;text-align:start;background:var(--green-50,#eef5f1);border:1px solid #0f6b4f;border-radius:10px;padding:.6rem .8rem;font-size:.9rem}
.dp [data-step="3"] .dp-fields{align-items:end}

/* Donate: only the chosen destination box is green; amount field has a single frame; type 1px smaller */
.dp .dp-amount input,.dp .dp-amount input:focus,.dp .dp-amount input:focus-visible{border:0!important;box-shadow:none!important;outline:0!important;background:transparent!important;border-radius:0}
.dp-dest{transition:background .15s,border-color .15s}
.dp-panel:has(.dp-more[open]) .dp-dest{background:#fff;border-color:var(--line)}
.dp-panel:has(.dp-more[open]) .dp-dest .icon{color:var(--muted)}
.dp-dest strong{font-size:.9375rem}
.dp-dest small{font-size:.8125rem}
.dp-more summary{font-size:.9375rem}
.dp-more .field label{font-size:.9375rem}
.dp-more select{font-size:.9375rem}
.dp-steps li{border-top-width:6px;border-radius:3px}
.dp-steps{gap:.8rem}

/* Donate side: "ways to give" shortcut card (gold, compact) */
.dn-ways{display:flex;align-items:center;gap:.7rem;padding:.55rem .9rem;margin-bottom:.6rem;border-radius:12px;background:var(--gold-500);color:#2a1e00;text-decoration:none;box-shadow:0 4px 12px -6px rgba(122,82,0,.5)}
.dn-ways .icon{width:1.2rem;height:1.2rem;flex:none;color:#0b4b38}
.dn-ways span{display:grid;line-height:1.25;margin-inline-end:auto}
.dn-ways strong{font-size:.9rem}
.dn-ways small{font-size:.8rem;opacity:.8}
.dn-ways:hover{background:#edc062;transform:translateY(-1px)}
html[dir=rtl] .dn-ways .icon:last-child{transform:scaleX(-1)}

/* Donate confirmation: wider card, spaced actions */
.dp-thanks{max-width:860px;padding:2rem 2.5rem}
.dp-thanks p{max-width:none}
.dp-thanks .btn{margin:.4rem .35rem 0}
.dp-thanks .dp-note-ok{margin:1.1rem 0 1.2rem;justify-content:center;text-align:start}
.dp-thanks .dp-recap{margin-bottom:1.2rem}
@media (max-width:640px){.dp-thanks{padding:1.5rem 1.1rem}}
.dp-dest{cursor:pointer}
.dp-dest:hover{border-color:#0b4b38}

/* Ways to give: WhatsApp receipt call-out */
.wa-callout{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin:0 0 1.4rem;padding:1rem 1.3rem;border-radius:16px;background:linear-gradient(135deg,#0b4b38,#0f6b4f);color:#fff;box-shadow:0 10px 26px -14px rgba(11,75,56,.7);border:1px solid rgba(226,176,74,.5)}
.wa-callout__icon{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:#25d366;color:#fff;flex:none}
.wa-callout__icon .icon{width:1.5rem;height:1.5rem}
.wa-callout__text{display:grid;gap:.15rem;flex:1 1 18rem;min-width:0}
.wa-callout__text strong{font-size:1.05rem;line-height:1.4}
.wa-callout__num{font-size:1.5rem;font-weight:800;letter-spacing:.03em;color:var(--gold-500);font-variant-numeric:tabular-nums}
.btn--wa{background:#25d366;color:#053b1c;border:0;font-weight:700}
.btn--wa:hover{background:#3be07a}
.wa-callout .btn{flex:none}
.ways__after{justify-content:center}

/* Compact sign-in card */
.authpage--split{min-height:0;padding-block:1.6rem}
.login{max-width:820px}
.login__side{padding:1.5rem 1.6rem}
.login__mark{height:56px;margin-bottom:.6rem}
.login__side h2{font-size:1.35rem}
.login__side p{margin-top:.4rem;font-size:.92rem;line-height:1.5}
.login__points{margin-top:.8rem;gap:.4rem}
.login__points li{font-size:.88rem}
.login__main{padding:1.5rem 1.8rem}
.login__main h1{font-size:1.3rem}
.login__main .ur{margin:.05rem 0 .8rem}
.login__main .field{margin-bottom:.6rem}
.login__main .field label{font-size:.85rem;margin-bottom:.15rem}
.login__main .field input{padding:.5rem .75rem}
.login__main .btn--lg{padding-block:.6rem}
.login__main .note{margin-top:.8rem;font-size:.8rem;line-height:1.45}
.login__links{margin:.5rem 0 0;font-size:.85rem;flex-wrap:wrap}
@media (max-width:760px){.login__side{padding:1.1rem 1.2rem}.login__main{padding:1.2rem}}
.login__en{margin:.1rem 0 .8rem;font:600 .95rem/1.3 var(--font-head,inherit);color:var(--muted)}
.login__main .login__title{font-size:1.3rem;margin:0 0 .7rem}
.login--pw{max-width:760px}
.login--pw .dp-fields{gap:.7rem}
@media (max-width:760px){.login--pw .dp-fields{grid-template-columns:1fr}}

/* Live password rules */
.pwcheck{list-style:none;margin:.2rem 0 .8rem;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.2rem .8rem;font-size:.82rem;color:var(--muted)}
.pwcheck li{display:flex;align-items:center;gap:.4rem;transition:color .15s}
.pwcheck li::before{content:"";width:.9rem;height:.9rem;border-radius:50%;border:1.5px solid currentColor;flex:none;box-sizing:border-box;background:no-repeat center/60% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pwcheck li.is-ok{color:#0f6b4f;font-weight:600}
.pwcheck li.is-ok::before{background-color:#0f6b4f;border-color:#0f6b4f}
.pwcheck li.is-bad{color:#a32020}
.pwcheck li:not(.is-ok)::before{background-image:none}
@media (max-width:560px){.pwcheck{grid-template-columns:1fr}}
.pwcheck{font-size:.75rem;gap:.15rem .8rem}
.pwcheck li::before{width:.8rem;height:.8rem}
.login--pw{max-width:980px;grid-template-columns:15rem 1fr}
.login--pw .pwcheck li{white-space:nowrap}
@media (max-width:760px){.login--pw{grid-template-columns:1fr}.login--pw .pwcheck li{white-space:normal}}
.login--pw{max-width:840px;grid-template-columns:13rem 1fr}
/* Compact fields on the account forms */
.login--pw .field{margin-bottom:.45rem}
.login--pw .field label{font-size:.8rem;margin-bottom:.1rem}
.login--pw .field input{padding:.35rem .65rem;font-size:.9rem;min-height:0;height:2.1rem}
.login--pw .login__title{margin-bottom:.5rem}
.login--pw .pwcheck{margin:.1rem 0 .6rem}
.login--pw .btn--lg{padding-block:.5rem}

/* Password eye toggle */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-inline-end:2.4rem!important}
.pw-eye{position:absolute;top:50%;inset-inline-end:.4rem;transform:translateY(-50%);display:grid;place-items:center;width:1.9rem;height:1.9rem;padding:0;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:8px}
.pw-eye:hover{color:#0b4b38;background:rgba(11,75,56,.08)}
.pw-eye:focus-visible{outline:2px solid var(--gold-500);outline-offset:1px}
.login--pw .btn--block{padding:.4rem 1rem;font-size:.9rem;min-height:0;height:2.2rem;margin-top:.1rem}

/* Notices: compact, with icon and optional second line */
.flashes{margin-top:.7rem}
.alert{display:flex;align-items:center;gap:.65rem;padding:.5rem .85rem;border-radius:12px;margin-bottom:.4rem;font-size:.9rem;line-height:1.35;box-shadow:0 6px 16px -12px rgba(0,0,0,.35)}
.alert__icon{width:1.5rem;height:1.5rem;flex:none;padding:.3rem;border-radius:50%;background:#fff}
.alert__text{display:grid}
.alert__text strong{font-weight:700}
.alert__text small{font-size:.8rem;opacity:.85}
.alert--success{border-inline-start:4px solid #0f6b4f}
.alert--success .alert__icon{color:#0f6b4f;background:#fff}
.alert--error{border-inline-start:4px solid #b3261e}
.alert--error .alert__icon{color:#b3261e}
.alert--info{border-inline-start:4px solid var(--gold-500)}
.alert--info .alert__icon{color:#8a6100}

/* Pledges table: single-line rows like the donations table */
.pend-table td,.pend-table th{white-space:nowrap}
.pend-table td:nth-child(3){white-space:normal;min-width:9rem}
.pend-table .tag--warn{padding:0 .5rem;line-height:1.5}
@media (max-width:760px){.pend-table td{white-space:normal}}

/* Donor account: tighter overall */
.kpis{gap:.7rem}
.kpi{padding:.7rem 1rem}
.kpi strong{font-size:1.3rem!important}
.kpi>span{font-size:.8rem}
.kpi small{font-size:.75rem}
.h-sub{font-size:1.2rem!important;margin:1.3rem 0 .5rem!important}
.pend-note{font-size:.82rem;margin:-.1rem 0 .5rem;line-height:1.4}
.pagehead__actions{flex-wrap:nowrap}
.pagehead--small h1{font-size:clamp(1.25rem,2.4vw,1.6rem)}
.panel--soft{padding:.8rem 1rem}
.panel--soft h3{font-size:1rem;margin:0 0 .2rem}
.panel--soft p{margin:0;font-size:.88rem}
.kpi--accent strong{color:#fff!important}

/* ===== Standard table rows (public + donor): 30px on desktop ===== */
@media (min-width:761px){
  .table tbody td,.tx-table tbody td{height:30px;box-sizing:border-box;padding-top:0;padding-bottom:0;line-height:1.2;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:28ch}
  .table tbody tr,.tx-table tbody tr{height:30px}
  .tx-table tbody td.tx-fund,.table tbody td.tx-fund{max-width:36ch}
  .tx-table tbody td.tx-fund .tx-giver,.table tbody td.tx-fund .tx-giver{margin-block:0}
}

/* Phone number in the menu row: centred between "Contact" and the account buttons */
.nav__phone{font-weight:700;color:#0b4b38}
.nav__phone .icon{width:1.1em;height:1.1em;color:#1f9d55}
@media (min-width:1101px){
  .nav__phone{margin-inline:auto}
  .nav__cta{margin-inline-start:0}
}

/* Names of Allah in the events bar (replaces the number) */
.announce__names{margin-inline-start:auto;padding-inline-start:1.1rem;border-inline-start:1px solid rgba(255,255,255,.28);display:inline-flex;align-items:baseline;gap:.6rem;white-space:nowrap;color:#fff;transition:opacity .35s ease,transform .35s ease}
.announce__names.is-out{opacity:0;transform:translateY(4px)}
.announce__nar{font-family:'Amiri','Noto Naskh Arabic',serif;font-weight:700;font-size:1.3rem;line-height:1.2;color:var(--gold-500,#e2b04a)}
.announce__ntr{font-weight:700;font-size:.92rem}
.announce__ntr em{font-style:normal;font-weight:400;opacity:.8;font-size:.84rem}
@media (max-width:640px){.announce__names{margin-inline-start:0;padding-inline-start:0;border-inline-start:0}.announce__ntr em{display:none}}
@media (prefers-reduced-motion:reduce){.announce__names{transition:none}}
@media (min-width:1101px){
  .nav{display:flex;align-items:center;flex:1;gap:.5rem}
  .nav ul{flex:none;grid-column:auto;justify-content:flex-start}
  .nav__phone{grid-column:auto;margin-inline:auto}
  .nav__cta{grid-column:auto;justify-self:auto;margin-inline-start:0;flex:none}
}

/* Menu number as a small shaded card, like the WhatsApp call-out */
.nav__phone{gap:.5rem;padding:.2rem .85rem .2rem .25rem;border-radius:14px;background:linear-gradient(135deg,#0b4b38,#0f6b4f);border:1px solid rgba(226,176,74,.55);box-shadow:0 6px 14px -8px rgba(11,75,56,.8);color:var(--gold-500,#e2b04a);font-weight:800;font-size:.95rem;letter-spacing:.02em;font-variant-numeric:tabular-nums;transition:transform .15s,box-shadow .15s}
.nav__phone:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 9px 18px -8px rgba(11,75,56,.9)}
.nav__phone .icon{box-sizing:content-box;width:1rem;height:1rem;padding:.3rem;border-radius:50%;background:#25d366;color:#fff}
.nav__phone span{color:var(--gold-500,#e2b04a)}
@media (max-width:1280px) and (min-width:1101px){.nav__phone{font-size:.84rem;padding-inline-end:.6rem}.nav__phone .icon{width:.85rem;height:.85rem}}
@media (max-width:1100px){.nav__phone{align-self:flex-start;padding:.25rem .9rem .25rem .3rem;margin:.2rem 0}}
.nav__phone{padding:.1rem .75rem .1rem .2rem;font-size:.9rem;border-radius:12px;line-height:1.2}
.nav__phone .icon{width:.85rem;height:.85rem;padding:.25rem}
.nav__cta .nav__me{order:2}

/* Table search box + reset */
.tsearch{display:flex;align-items:center;gap:.5rem;margin:0 0 .6rem;flex-wrap:wrap}
.tsearch__box{position:relative;display:flex;align-items:center;flex:0 1 320px}
.tsearch__box .icon{position:absolute;inset-inline-start:.65rem;width:1rem;height:1rem;color:var(--muted);pointer-events:none}
.tsearch__box input{width:100%;height:2.1rem;padding:.2rem .7rem .2rem 2.1rem;border:1px solid var(--line);border-radius:99px;background:#fff;font-size:.85rem}
html[dir=rtl] .tsearch__box input{padding:.2rem 2.1rem .2rem .7rem}
.tsearch__box input:focus{outline:2px solid var(--gold-500);outline-offset:1px}
.tsearch__reset{height:2.1rem;padding:0 .9rem}
.tsearch__count{font-size:.8rem;color:var(--muted)}
.tsearch__none{margin:.5rem 0 0;padding:.6rem .9rem;border:1px dashed var(--line);border-radius:10px;font-size:.88rem;color:var(--muted);text-align:center}
.table tbody tr[hidden]{display:none}
html:not(.is-ur) .dp-greet__salam{font-family:'Caveat','Segoe Script','Bradley Hand',cursive;font-weight:700;font-size:1.35rem}
.tsearch__reset[hidden],.tsearch__none[hidden]{display:none!important}
.tsearch__box input{padding-inline-end:2.1rem}
.tsearch__box input::-webkit-search-cancel-button{display:none}
.tsearch__clear{position:absolute;inset-inline-end:.35rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:1.5rem;height:1.5rem;padding:0;border:0;border-radius:50%;background:rgba(11,75,56,.1);color:#0b4b38;cursor:pointer}
.tsearch__clear:hover{background:rgba(11,75,56,.2)}
.tsearch__clear .icon{width:.7rem;height:.7rem}
.tsearch__clear[hidden]{display:none!important}
/* Donor account section headings ("Your donations", "Awaiting verification"): bigger handwriting */
html:not(.is-ur) .kpis ~ .h-sub,html:not(.is-ur) .kpis ~ * .h-sub{font-size:1.75rem!important;line-height:1.1}
html.is-ur .kpis ~ .h-sub{font-size:1.35rem!important}

/* Donate buttons: soft glow pulse, a light sweep and a beating heart */
.btn--pulse{position:relative;overflow:hidden;isolation:isolate;animation:donatePulse 2.6s ease-in-out infinite}
.btn--pulse::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);animation:donateSweep 3.6s ease-in-out infinite;pointer-events:none;z-index:-1}
.btn--pulse .icon{animation:donateBeat 1.6s ease-in-out infinite;transform-origin:center}
.btn--pulse:hover{animation-play-state:paused;transform:translateY(-1px) scale(1.04)}
@keyframes donatePulse{0%,100%{box-shadow:0 0 0 0 rgba(226,176,74,.55)}50%{box-shadow:0 0 0 9px rgba(226,176,74,0)}}
@keyframes donateSweep{0%,55%{left:-60%}100%{left:130%}}
@keyframes donateBeat{0%,100%{transform:scale(1)}14%{transform:scale(1.28)}28%{transform:scale(1)}42%{transform:scale(1.18)}56%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.btn--pulse,.btn--pulse::after,.btn--pulse .icon{animation:none}}

/* Shaded donate buttons: gold gradient, light top edge, soft drop shadow */
.btn--pulse.btn--gold{background:linear-gradient(180deg,#f3cb73 0%,#e2b04a 52%,#c89527 100%);border:1px solid #b8841c;color:#2a1e00;text-shadow:0 1px 0 rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(122,82,0,.25),0 6px 14px -6px rgba(122,82,0,.65)}
.btn--pulse.btn--gold:hover{background:linear-gradient(180deg,#f8d788 0%,#ebbb5a 52%,#d3a032 100%)}
.btn--pulse.btn--gold:active{box-shadow:inset 0 2px 4px rgba(122,82,0,.4);transform:translateY(1px)}
@keyframes donatePulse{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(122,82,0,.25),0 6px 14px -6px rgba(122,82,0,.65),0 0 0 0 rgba(226,176,74,.55)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(122,82,0,.25),0 6px 14px -6px rgba(122,82,0,.65),0 0 0 9px rgba(226,176,74,0)}}

/* Calmer donate animation */
.btn--pulse{animation-duration:4.5s}
.btn--pulse::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);animation-duration:6s}
.btn--pulse .icon{animation-duration:2.6s}
@keyframes donatePulse{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(122,82,0,.25),0 6px 14px -6px rgba(122,82,0,.65),0 0 0 0 rgba(226,176,74,.3)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(122,82,0,.25),0 6px 14px -6px rgba(122,82,0,.65),0 0 0 5px rgba(226,176,74,0)}}
@keyframes donateBeat{0%,100%{transform:scale(1)}14%{transform:scale(1.12)}28%{transform:scale(1)}}
.btn--pulse.btn--gold{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(122,82,0,.2),0 4px 10px -6px rgba(122,82,0,.5)}
.btn--pulse:hover{transform:translateY(-1px) scale(1.02)}

/* Keep the flowing light sweep at its original strength and speed */
.btn--pulse::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);animation-duration:3.6s}

/* Glow pulse back at its original size and rhythm */
.btn--pulse{animation-duration:2.6s}
@keyframes donatePulse{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(122,82,0,.2),0 4px 10px -6px rgba(122,82,0,.5),0 0 0 0 rgba(226,176,74,.55)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(122,82,0,.2),0 4px 10px -6px rgba(122,82,0,.5),0 0 0 9px rgba(226,176,74,0)}}

/* Logo: lift it so the "SURIYA NAWAZ" wordmark sits on the same centre line as the menu, number card and buttons */
.header .brand__logo{position:relative;top:-7px}
@media (max-width:1100px){.header .brand__logo{top:0}}

/* Ways to give: bank transfer lives in the wallets card; quick-give card on the right */
.ways__head--sub{margin-top:1.2rem;padding-top:1.1rem;border-top:2px solid var(--line,#e2ddd0)}
.ways__give h2{margin:0 0 .7rem;font-size:1.25rem}
.ways__give .dp-chips{margin-bottom:.6rem}
.ways__give .dp-amount{max-width:100%}
.ways__give .dp-actions{margin-top:.9rem}
.ways__give .dp-dest{cursor:pointer}
.ways__give:has(.dp-more[open]) .dp-dest{background:#fff;border-color:var(--line)}

.ways__logos{flex:0 0 auto;display:flex;align-items:center;gap:1.1rem}
.ways__logos .ways__logo{flex:0 0 auto}
.dp-amount.is-bad{border-color:#b3261e;box-shadow:0 0 0 3px rgba(179,38,30,.15)}
.ways__give .dp-err{margin:.3rem 0 0;min-height:0}

/* Ways to give: one frame on the amount field, steady wallet row, linked step labels */
.ways__give .dp-amount input,.ways__give .dp-amount input:focus,.ways__give .dp-amount input:focus-visible{border:0!important;box-shadow:none!important;outline:0!important;background:transparent!important;border-radius:0}
.ways__item:has(.ways__logos){display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.9rem}
.ways__logos{gap:.9rem}
.ways__logos .ways__logo{height:36px}
.ways__logos .ways__logo img{height:36px;width:auto;max-width:5.5rem}
.ways__logos .ways__logo strong{font-size:.9rem}
.ways__step{display:flex;align-items:center;gap:.5rem;margin:0 0 .7rem;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-700,#8a6100)}
.ways__step span{display:grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;background:#0b4b38;color:var(--gold-500,#e2b04a);font-size:.78rem;letter-spacing:0}
html.is-ur .ways__step{letter-spacing:0;text-transform:none;font-size:.9rem}
.ways__lead{margin:-.35rem 0 .8rem;font-size:.88rem;color:var(--muted)}
.ways__give h2{font-size:1.15rem}
.ways__card .ways__title{margin-top:.2rem}

/* ===== Ways to give, redesigned: 1 Send it  ->  2 Tell us ===== */
.gv{display:grid;gap:1.25rem;align-items:stretch}
@media (min-width:900px){.gv{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.gv__card{position:relative;background:#fff;border:1px solid var(--line,#e2ddd0);border-radius:18px;padding:1.3rem 1.5rem 1.4rem;box-shadow:0 2px 10px rgba(8,50,38,.06)}
.gv__card--next{background:linear-gradient(180deg,#fff,#fbf8ef);border-color:rgba(226,176,74,.55)}
.gv__step{display:flex;align-items:center;gap:.5rem;margin:0 0 .35rem;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8a6100}
.gv__step span{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:#0b4b38;color:var(--gold-500,#e2b04a);font-size:.8rem;letter-spacing:0}
html.is-ur .gv__step{letter-spacing:0;text-transform:none;font-size:.9rem}
.gv__h{margin:0 0 1rem;font-size:1.2rem;line-height:1.3}
.gv__tabs{display:flex;gap:.4rem;padding:.25rem;background:#f1ede1;border-radius:99px;margin-bottom:1rem;width:fit-content;max-width:100%;flex-wrap:wrap}
.gv__tab{display:inline-flex;align-items:center;gap:.45rem;border:0;background:none;padding:.4rem 1rem;border-radius:99px;font:600 .88rem/1.2 inherit;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.gv__tab .icon{width:1rem;height:1rem}
.gv__tab.is-on{background:#0b4b38;color:#fff;box-shadow:0 4px 10px -6px rgba(11,75,56,.8)}
.gv__panel[hidden]{display:none}
.gv__logos{display:flex;align-items:center;gap:1.1rem;margin-bottom:.7rem}
.gv__logo{display:flex;align-items:center;height:38px}
.gv__logo img{height:38px;width:auto;max-width:6rem;object-fit:contain}
.gv__label{margin:0 0 .25rem;font-size:.82rem;color:var(--muted)}
.gv__copyrow{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;border-radius:14px;background:#eef5f1;border:1px solid rgba(15,107,79,.25)}
.gv__big{font-size:1.65rem;font-weight:700;letter-spacing:.03em;color:#0b4b38}
.gv__title{display:flex;gap:.8rem;align-items:baseline;margin:.8rem 0 0;font-size:.92rem}
.gv__title span{color:var(--muted)}
.gv__row{display:flex;align-items:center;gap:.8rem;padding:.55rem 0;border-bottom:1px solid var(--line,#e2ddd0)}
.gv__row:last-child{border-bottom:0}
.gv__row .gv__label{flex:0 0 7rem;margin:0;font-weight:600;color:var(--ink)}
.gv__val{flex:1 1 auto;min-width:0;word-break:break-word}
.gv__val.mono{font-size:1.1rem;font-weight:600}
.gv__note{margin:1rem 0 0;padding:.6rem .85rem;border-radius:10px;background:#fff7e0;font-size:.85rem;color:#6b4e00}
.gv__wa{display:flex;align-items:center;gap:.8rem;padding:.75rem 1rem;border-radius:14px;background:linear-gradient(135deg,#0b4b38,#0f6b4f);color:#fff;text-decoration:none;box-shadow:0 8px 18px -12px rgba(11,75,56,.9);transition:transform .15s}
.gv__wa:hover{transform:translateY(-1px)}
.gv__waicon{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:#25d366;flex:none}
.gv__waicon .icon{width:1.2rem;height:1.2rem;color:#fff}
.gv__watext{display:grid;flex:1;line-height:1.3}
.gv__watext strong{font-size:.95rem}
.gv__watext em{font-style:normal;font-size:1.25rem;font-weight:800;letter-spacing:.03em;color:var(--gold-500,#e2b04a)}
.gv__wa>.icon:last-child{width:1.1rem;height:1.1rem;color:var(--gold-500,#e2b04a)}
.gv__or{display:flex;align-items:center;gap:.8rem;margin:.9rem 0 .7rem;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.gv__or::before,.gv__or::after{content:"";flex:1;height:1px;background:var(--line,#e2ddd0)}
html.is-ur .gv__or{text-transform:none;letter-spacing:0}
.gv__form .dp-label{display:block;margin:0 0 .4rem;font-size:.85rem}
.gv__form .dp-chips{margin-bottom:.5rem}
.gv__form .dp-amount{max-width:100%}
.gv__form .dp-amount input,.gv__form .dp-amount input:focus,.gv__form .dp-amount input:focus-visible{border:0!important;box-shadow:none!important;outline:0!important;background:transparent!important;border-radius:0}
.gv__form .dp-err{margin:.3rem 0 0}
.gv__for{margin-top:.7rem}
.gv__go{margin-top:.9rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.gv__next{margin-top:1.25rem}
.gv__next ol{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;counter-reset:n}
@media (min-width:760px){.gv__next ol{grid-template-columns:repeat(3,1fr)}}
.gv__next li{counter-increment:n;display:flex;align-items:center;gap:.7rem;padding:.6rem .9rem;border-radius:12px;background:rgba(11,75,56,.06);font-size:.88rem}
.gv__next li::before{content:counter(n);display:grid;place-items:center;flex:none;width:1.5rem;height:1.5rem;border-radius:50%;border:1.5px solid #0b4b38;color:#0b4b38;font-weight:700;font-size:.8rem}

/* Ways to give: label | divider | amount box on one row */
.gv__amountrow{display:flex;align-items:center;gap:.9rem}
.gv__amountlabel{flex:1 1 auto;margin:0;font-size:.95rem;font-weight:600;line-height:1.3}
.gv__divider{flex:none;align-self:stretch;width:1px;min-height:2.2rem;background:var(--line,#d9d4c7)}
.gv__amountrow .dp-amount{flex:0 0 11.5rem;max-width:11.5rem;margin:0}
.gv__form .dp-chips{margin:.7rem 0 0}
@media (max-width:420px){.gv__amountrow{flex-wrap:wrap}.gv__divider{display:none}.gv__amountrow .dp-amount{flex:1 1 100%;max-width:100%}}
.gv__divider{width:2px;border-radius:2px;background:rgba(11,75,56,.35)}

/* Wallet logos sit inside the number box, before the number */
.gv__copyrow{justify-content:flex-start;gap:.9rem}
.gv__copyrow .gv__logos{margin:0;gap:.7rem;padding-inline-end:.9rem;border-inline-end:1px solid rgba(15,107,79,.3)}
.gv__copyrow .gv__logo,.gv__copyrow .gv__logo img{height:32px}
.gv__copyrow .gv__big{flex:1 1 auto;min-width:0}
.gv__copyrow .dn-copy{margin-inline-start:auto;flex:none}
.gv__amountrow{align-items:stretch}
.gv__amountlabel{display:flex;align-items:center}
.gv__divider{align-self:stretch;min-height:0;height:auto;margin:0}
.gv__amountrow .dp-amount{margin:0;align-self:center}
.gv__form .dp-amount input{height:2.4rem}
/* Ways to give: label | divider | amount box fill the row; the four chips share the same full width */
.gv__amountlabel{flex:0 0 auto;white-space:nowrap}
.gv__amountrow .dp-amount{flex:1 1 auto;max-width:none;min-width:0}
.gv__form .dp-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.gv__form .dp-chip{width:100%;justify-content:center;padding-inline:.4rem;text-align:center}
@media (max-width:420px){.gv__amountlabel{white-space:normal}.gv__form .dp-chips{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* WhatsApp receipt button now closes card 1 */
.gv__after{margin:1.1rem 0 .5rem;padding-top:1rem;border-top:1px solid var(--line,#e2ddd0);font-size:.82rem;font-weight:700;color:#8a6100;text-transform:uppercase;letter-spacing:.06em}
html.is-ur .gv__after{text-transform:none;letter-spacing:0;font-size:.9rem}
.gv__card:first-child .gv__wa{margin-top:0}

/* The number box becomes the green card; the receipt action is a compact link under it */
.gv__copyrow{background:linear-gradient(135deg,#0b4b38,#0f6b4f);border:1px solid rgba(226,176,74,.45);box-shadow:0 8px 18px -12px rgba(11,75,56,.9);padding:.8rem 1rem}
.gv__copyrow .gv__logos{border-inline-end:1px solid rgba(255,255,255,.3)}
.gv__copyrow .gv__logo{background:#fff;border-radius:8px;padding:3px 7px;height:38px;box-sizing:border-box}
.gv__copyrow .gv__logo img{height:30px}
.gv__copyrow .gv__big{color:var(--gold-500,#e2b04a);font-size:1.7rem}
.gv__copyrow .dn-copy{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.45)}
.gv__copyrow .dn-copy:hover{background:rgba(255,255,255,.22)}
.gv__walink{display:flex;align-items:center;gap:.7rem;padding:.55rem .9rem;border-radius:12px;background:#eaf8ef;border:1px solid rgba(37,211,102,.5);color:#0b4b38;text-decoration:none;font-weight:700;font-size:.92rem;transition:background .15s}
.gv__walink:hover{background:#d9f3e2}
.gv__walink span:nth-child(2){flex:1}
.gv__walink .gv__waicon{width:2rem;height:2rem}
.gv__walink>.icon:last-child{width:1rem;height:1rem;color:#0b4b38}

/* Bank transfer: same green card as the wallet number */
.gv__label--card{margin-top:.8rem}
.gv__logo--bank{justify-content:center;min-width:3.6rem}
.gv__logo--bank strong{color:#0b4b38;font-size:.95rem;letter-spacing:.04em}
.gv__big--bank{font-size:1.35rem;letter-spacing:.02em;overflow-wrap:anywhere}
.gv__copyrow--bank .gv__big{font-size:1.35rem}

/* Receipt link now opens the right-hand card */
.gv__after--top{margin:.2rem 0 .5rem;padding-top:0;border-top:0}
.gv__card--next .gv__walink{margin-bottom:1.1rem}
.gv__card--next .gv__h{margin-top:.2rem}

/* Both ways to pay stay visible */
.gv__sub{display:flex;align-items:center;gap:.5rem;margin:0 0 .6rem;font-size:.95rem;font-weight:700;color:#0b4b38}
.gv__sub .icon{width:1.05rem;height:1.05rem}
.gv__panel + .gv__panel{margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line,#e2ddd0)}

/* Left column = two cards (wallets, bank) under a plain column heading */
.gv__left{display:grid;gap:1rem;align-content:start}
.gv__colhead .gv__h{margin:0 0 .2rem}
.gv__panel + .gv__panel{margin-top:0;padding-top:1.3rem;border-top:1px solid var(--line,#e2ddd0)}
.gv__card--wallet,.gv__card--bank{padding:1.1rem 1.4rem 1.3rem}
.gv__card--wallet .gv__sub,.gv__card--bank .gv__sub{font-size:1.05rem;margin-bottom:.8rem}
.gv__card--bank .gv__sub .icon,.gv__card--wallet .gv__sub .icon{width:1.2rem;height:1.2rem}

/* Layout: heading across the top; wallets | bank side by side; the confirm card spans the full width below */
.gv__left{display:contents}
.gv__colhead{grid-column:1 / -1}
.gv__card--next{grid-column:1 / -1}
.gv__nextgrid{display:grid;gap:1.4rem}
@media (min-width:900px){
  .gv__nextgrid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:2rem;align-items:start}
  .gv__nextleft{padding-inline-end:1.6rem;border-inline-end:1px solid var(--line,#e2ddd0)}
}
.gv__nextleft .gv__after--top{margin-top:0}
.gv__nextright .gv__h{margin-top:0}
.gv__card--wallet,.gv__card--bank{margin:0}
.gv__copyrow--bank .gv__big{font-size:1.12rem;letter-spacing:.01em;overflow-wrap:normal;white-space:nowrap}
.gv__copyrow--bank .gv__logos{padding-inline-end:.6rem}

/* Action buttons at the foot of the wallet and bank cards */
.gv__card--wallet,.gv__card--bank{display:flex;flex-direction:column}
.gv__cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none}
.gv__card--wallet .gv__title{margin-bottom:1rem}
.gv__card--bank .gv__copyrow:last-of-type{margin-bottom:1rem}
.btn--wa{background:#25d366;color:#053b1c;border:0;font-weight:700;box-shadow:0 6px 14px -8px rgba(5,59,28,.6)}
.btn--wa:hover{background:#3be07a}
.btn--wa .icon{width:1.1rem;height:1.1rem}
.gv__explain{margin:0;font-size:.92rem;line-height:1.55;color:var(--muted)}

/* Buttons live outside the cards, one under each */
.gv__out{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none;padding-block:.75rem;font-size:1rem}
.gv__out.btn--wa .icon{width:1.15rem;height:1.15rem}
@media (max-width:899px){.gv__out{width:100%}}

/* ===== Ways to give: one simple dark card ===== */
.gs{max-width:960px;margin:0 auto;padding:2rem 2.2rem 1.6rem;border-radius:20px;background:#0a3d2e;border:1px solid rgba(126,224,176,.18);box-shadow:0 18px 40px -22px rgba(4,30,22,.9);color:#fff}
.gs__title{margin:0 0 1.3rem;text-align:center;font-size:clamp(1.5rem,3vw,2rem);font-weight:800;color:#fff}
.gs__title span{color:#ffbe1f}
.gs__grid{display:grid;gap:.2rem 3rem}
@media (min-width:760px){.gs__grid{grid-template-columns:1fr 1fr}}
.gs__row{display:flex;align-items:center;gap:.9rem;padding:.7rem 0;border-bottom:1px solid rgba(126,224,176,.16);min-width:0}
.gs__label{flex:0 0 auto;color:#7ee0b0;font-size:1rem}
.gs__value{flex:1 1 auto;min-width:0;text-align:end;font-weight:700;font-size:1.02rem;overflow-wrap:anywhere}
.gs__value.mono{letter-spacing:.02em}
.gs__label--logos{display:flex;align-items:center;gap:.5rem}
.gs__logo{display:inline-grid;place-items:center;height:30px;padding:2px 6px;border-radius:7px;background:#fff;color:#0a3d2e;font-size:.8rem;font-weight:700}
.gs__logo img{height:24px;width:auto;max-width:4.6rem;object-fit:contain}
.gs__copy{flex:none;background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.35)}
.gs__copy:hover{background:rgba(255,255,255,.2)}
.gs__sep{border:0;height:1px;margin:1.6rem 0;background:rgba(126,224,176,.2)}
.gs__soon{margin:0 0 1rem;text-align:center;color:#c8f0dc}
.gs__foot{margin:1.4rem 0 0;text-align:center;color:#c8f0dc;line-height:1.7}
.gs__foot a{color:#ffbe1f;font-weight:700;text-decoration:none;white-space:nowrap}
.gs__foot a:hover{text-decoration:underline}
.gs__heart{color:#e11d2e}
.gs__confirm{margin:.9rem 0 0;text-align:center}
.gs__confirm a{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1.2rem;border-radius:99px;background:#ffbe1f;color:#2a1e00;font-weight:800;font-size:.92rem;text-decoration:none}
.gs__confirm a:hover{background:#ffd04d}
.gs__confirm .icon{width:1rem;height:1rem;color:#2a1e00}
@media (max-width:759px){.gs{padding:1.4rem 1.2rem}.gs__row{flex-wrap:wrap}.gs__value{text-align:start;flex:1 1 100%}}

/* Ways to give: two dark cards side by side, a thank-you strip, then the story panel */
.gs2{display:grid;gap:1.25rem;max-width:1100px;margin:0 auto}
@media (min-width:860px){.gs2{grid-template-columns:1fr 1fr;align-items:stretch}}
.gs2 .gs{max-width:none;margin:0;padding:1.7rem 1.8rem}
.gs2 .gs__grid{grid-template-columns:1fr;gap:0}
.gs2 .gs__title{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-bottom:1rem}
.gs2 .gs--full{grid-column:1 / -1}
.gs--strip{max-width:1100px;margin:1.25rem auto 0;padding:1.1rem 1.5rem 1.3rem}
.gs--strip .gs__foot{margin:0}
.gstory{display:grid;gap:1.6rem;align-items:center;max-width:1100px;margin:2rem auto 0;padding:1.6rem;border-radius:20px;background:#0a3d2e;color:#fff;border:1px solid rgba(126,224,176,.18);box-shadow:0 18px 40px -22px rgba(4,30,22,.9)}
@media (min-width:860px){.gstory{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:2.5rem;padding:1.6rem 2.4rem 1.6rem 1.6rem}.gstory--noimg{grid-template-columns:1fr;padding:2rem 2.4rem}}
.gstory__img{margin:0;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:#06281e}
.gstory__img img{width:100%;height:100%;object-fit:cover;display:block}
.gstory__text h2{margin:0 0 .9rem;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;line-height:1.2;color:#fff}
.gstory__text h2 span{color:#ffbe1f}
.gstory__text p{margin:0;color:#7ee0b0;font-size:1.02rem;line-height:1.75}
html.is-ur .gstory__text p{line-height:2}

/* Wallet logos: bigger tiles, cropped artwork fills them */
.gs__logo{height:44px;min-width:56px;padding:3px 8px;border-radius:9px}
.gs__logo img{height:36px;max-width:5.5rem}
.gs__label--logos{gap:.6rem}
.gs__logo{height:36px;min-width:46px;padding:2px 6px}
.gs__logo img{height:30px}

/* Ways to give card headings in Montserrat */
html:not(.is-ur) .gs__title,html:not(.is-ur) .gstory__text h2{font-family:'Montserrat','Inter',system-ui,sans-serif;font-weight:800;letter-spacing:-.01em}

/* Beating heart at the end of each payment card heading */
.gs2 .gs__title::after{content:"";display:inline-block;width:.85em;height:.85em;margin-inline-start:.5em;vertical-align:-.08em;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e11d2e' d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E");filter:drop-shadow(0 0 6px rgba(225,29,46,.55));transform-origin:center;animation:gsHeart 1.5s ease-in-out infinite}
@keyframes gsHeart{0%,100%{transform:scale(1)}14%{transform:scale(1.28)}28%{transform:scale(1)}42%{transform:scale(1.18)}56%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.gs2 .gs__title::after{animation:none}}

/* Heart with a ripple: two rings expand from it and fade */
.gs2 .gs__title::after{content:none;animation:none}
.gs__pulse{position:relative;display:inline-block;width:.8em;height:.8em;margin-inline-start:.6em;vertical-align:-.04em;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e11d2e' d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E");animation:gsHeart 1.8s ease-in-out infinite;filter:drop-shadow(0 0 5px rgba(225,29,46,.6))}
.gs__pulse::before,.gs__pulse::after{content:"";position:absolute;left:50%;top:50%;width:170%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(225,29,46,.75);transform:translate(-50%,-50%) scale(.25);opacity:0;animation:gsRipple 1.8s ease-out infinite;pointer-events:none}
.gs__pulse::after{animation-delay:.9s}
@keyframes gsRipple{0%{transform:translate(-50%,-50%) scale(.25);opacity:.9}100%{transform:translate(-50%,-50%) scale(1.9);opacity:0}}
@media (prefers-reduced-motion:reduce){.gs__pulse,.gs__pulse::before,.gs__pulse::after{animation:none}.gs__pulse::before,.gs__pulse::after{display:none}}
.gs__pulse::before,.gs__pulse::after{border-color:rgba(255,190,31,.85);box-shadow:0 0 6px rgba(255,190,31,.45)}

/* 3D heart: glossy red body, dark rim, highlight, soft drop shadow, slight turn on each beat */
.gs__pulse{width:1.05em;height:1.05em;margin-inline-start:.65em;vertical-align:-.12em;perspective:200px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3CradialGradient id='g' cx='34%25' cy='26%25' r='85%25'%3E%3Cstop offset='0' stop-color='%23ff9a9a'/%3E%3Cstop offset='.35' stop-color='%23f0283a'/%3E%3Cstop offset='.75' stop-color='%23c3101f'/%3E%3Cstop offset='1' stop-color='%23720912'/%3E%3C/radialGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' stroke='%23610710' stroke-width='.5' stroke-linejoin='round' d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3Cpath fill='url(%23s)' d='M5.2 6.4c.9-1.4 2.9-1.8 4.2-.8-1.9.1-3.3 1-3.9 2.7-.4-.6-.5-1.3-.3-1.9z'/%3E%3Cellipse cx='9' cy='7' rx='1.6' ry='1' fill='%23fff' fill-opacity='.55' transform='rotate(-30 9 7)'/%3E%3C/svg%3E");filter:drop-shadow(0 3px 3px rgba(60,0,8,.55)) drop-shadow(0 0 7px rgba(225,29,46,.55));animation:gsHeart3d 1.8s ease-in-out infinite}
@keyframes gsHeart3d{0%,100%{transform:scale(1) rotateY(0)}14%{transform:scale(1.3) rotateY(-16deg)}28%{transform:scale(1) rotateY(0)}42%{transform:scale(1.2) rotateY(16deg)}56%{transform:scale(1) rotateY(0)}}
@media (prefers-reduced-motion:reduce){.gs__pulse{animation:none}}

/* Story message in handwriting */
html:not(.is-ur) .gstory__text p{font-family:'Caveat','Segoe Script','Bradley Hand',cursive;font-weight:600;font-size:1.55rem;line-height:1.45;color:#c8f0dc}
html.is-ur .gstory__text p{font-size:1.1rem}
html:not(.is-ur) .gstory__text p{font-weight:400}

/* Donate: amounts + "other amount" on one row with a divider; compact confirm step */
.dp-amountline{display:flex;align-items:flex-end;gap:1.1rem;flex-wrap:wrap}
.dp-amountline .dp-chips{margin:0;flex:1 1 auto}
.dp-amountline__divider{align-self:stretch;width:2px;border-radius:2px;background:rgba(11,75,56,.25);min-height:3rem}
.dp-amountline__other{flex:0 1 15rem;min-width:12rem}
.dp-amountline__other .dp-label{display:block;margin:0 0 .3rem;font-size:.85rem}
.dp-amountline__other .dp-amount{max-width:none}
@media (max-width:760px){.dp-amountline__divider{display:none}.dp-amountline__other{flex:1 1 100%}}
.dp-trace[hidden],.dn-trace[hidden]{display:none!important}
.dp-fields--3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
@media (max-width:760px){.dp-fields--3{grid-template-columns:1fr}}
.dp [data-step="3"] .dp-fields{gap:.6rem}
.dp [data-step="3"] .field{margin-top:.5rem}
.dp [data-step="3"] .field label{font-size:.82rem;margin-bottom:.1rem}
.dp [data-step="3"] .field input{padding:.4rem .65rem;height:2.2rem;font-size:.9rem}
.dp [data-step="3"] .dp-auto{gap:.4rem}
.dp [data-step="3"] .dp-auto div{padding:.35rem .6rem}
.dp-ticks{display:grid;gap:.2rem 1.4rem}
@media (min-width:760px){.dp-ticks{grid-template-columns:1fr 1fr}}
.dp-ticks .dp-tick{margin-top:.6rem}
.dp-amountline{flex-wrap:nowrap;align-items:flex-end;gap:.8rem}
.dp-amountline .dp-chips{flex:1 1 auto;min-width:0;flex-wrap:wrap;gap:.4rem}
.dp-amountline .dp-chip{padding:.4rem .8rem;font-size:.95rem}
.dp-amountline__other{flex:0 0 10.5rem;min-width:0}
@media (max-width:760px){.dp-amountline{flex-wrap:wrap}.dp-amountline__other{flex:1 1 100%}}
.dn-trace--thanks{max-width:26rem;margin:1.1rem auto}

/* Site font: Montserrat (handwritten Caveat, Arabic calligraphy and Urdu faces keep their own rules) */
html:not(.is-ur) h1,html:not(.is-ur) h2,html:not(.is-ur) h3{letter-spacing:-.015em}
html:not(.is-ur) body{font-feature-settings:"tnum" 0}
html:not(.is-ur) h1,html:not(.is-ur) h2,html:not(.is-ur) h3,html:not(.is-ur) .kpi strong,html:not(.is-ur) .band strong,html:not(.is-ur) .panel__big{font-weight:700}

/* Donate step 1: one line for "Or enter another amount"; chips, divider and box share one height */
.dp-amountline{align-items:flex-end;gap:.9rem}
.dp-amountline .dp-chip{height:52px;padding-block:0;display:inline-flex;align-items:center}
.dp-amountline__other{flex:0 0 13.5rem;min-width:0}
.dp-amountline__other .dp-label{white-space:nowrap;margin:0 0 .35rem}
.dp-amountline__other .dp-amount{height:52px;padding-block:0}
.dp-amountline__other .dp-amount input{height:100%;padding-block:0}
.dp-amountline__divider{align-self:flex-end;height:52px;min-height:0}
.dp-summary .dp-via[hidden]{display:none}
@media (max-width:760px){.dp-amountline__other{flex:1 1 100%}.dp-amountline__other .dp-label{white-space:normal}}

/* ===== Donate: the cards use the dark green of Ways to give ===== */
.dp .dp-panel,.dp .dp-summary,.dp .dp-accounts{background:#0a3d2e;border:1px solid rgba(126,224,176,.18);box-shadow:0 18px 40px -22px rgba(4,30,22,.9);color:#fff}
.dp .dp-panel h2{color:#fff;font-weight:800}
.dp .dp-panel h2,.dp .dp-accounts h2{font-family:'Montserrat',system-ui,sans-serif}
.dp .dp-label{color:#7ee0b0}
.dp .dp-quiet,.dp .dp-summary>small,.dp .dp-summary dt,.dp .dp-accounts dt,.dp .dp-recap dt{color:#7ee0b0}
.dp .dp-quiet .icon{color:#7ee0b0}
.dp .dp-summary dd,.dp .dp-accounts dd{color:#fff}
.dp .dp-total{color:#ffbe1f}
.dp .dp-accounts h2{color:#fff}
.dp .dp-err{color:#ffb4ac}

/* amount buttons and box */
.dp .dp-chip{background:rgba(255,255,255,.07);border-color:rgba(126,224,176,.35);color:#fff}
.dp .dp-chip:hover{background:rgba(255,190,31,.15);border-color:#ffbe1f}
.dp .dp-chip.is-on{background:#ffbe1f;border-color:#ffbe1f;color:#2a1e00;box-shadow:0 0 0 3px rgba(255,190,31,.28)}
.dp .dp-amount{background:rgba(255,255,255,.07);border-color:rgba(126,224,176,.35)}
.dp .dp-amount b{color:#7ee0b0}
.dp .dp-amount input{color:#fff}
.dp .dp-amount input::placeholder{color:rgba(255,255,255,.45)}
.dp .dp-amount:focus-within{border-color:#ffbe1f;box-shadow:0 0 0 3px rgba(255,190,31,.28)}
.dp .dp-amount.is-filled{background:rgba(255,190,31,.16);border-color:#ffbe1f;box-shadow:0 0 0 3px rgba(255,190,31,.22)}
.dp .dp-amount.is-filled b{color:#ffbe1f}
.dp .dp-amount.is-filled input{color:#fff}
.dp .dp-amountline__divider{background:rgba(126,224,176,.35)}

/* destination + optional project */
.dp .dp-dest{background:rgba(126,224,176,.1);border-color:rgba(126,224,176,.55);color:#fff}
.dp .dp-dest .icon{color:#7ee0b0}
.dp .dp-dest small{color:#a9e8c8}
.dp .dp-panel:has(.dp-more[open]) .dp-dest{background:transparent;border-color:rgba(126,224,176,.25)}
.dp .dp-more{border-color:rgba(126,224,176,.35);color:#fff}
.dp .dp-more[open]{background:rgba(126,224,176,.1);border:1.5px solid rgba(126,224,176,.55)}
.dp .dp-more summary{color:#fff}
.dp .dp-more[open] summary{color:#fff}
.dp .dp-opt,.dp .dp-more[open] .dp-opt{background:rgba(255,255,255,.12);color:#c8f0dc}

/* form fields */
.dp .field label,.dp [data-step] .field label{color:#7ee0b0}
.dp .field label small{color:rgba(200,240,220,.7)}
.dp .field input,.dp .field select,.dp .field textarea{background:rgba(255,255,255,.07);border-color:rgba(126,224,176,.35);color:#fff}
.dp .field select option{color:#102a20;background:#fff}
.dp .field input::placeholder,.dp .field textarea::placeholder{color:rgba(255,255,255,.4)}
.dp .field input:focus,.dp .field select:focus,.dp .field textarea:focus{border-color:#ffbe1f;outline:0;box-shadow:0 0 0 3px rgba(255,190,31,.25)}
.dp .dp-auto div{background:rgba(255,255,255,.07)}
.dp .dp-auto small{color:#7ee0b0}
.dp .dp-auto span{color:#fff}

/* payment method tiles, proof, ticks */
.dp .dp-method{background:rgba(255,255,255,.06);border-color:rgba(126,224,176,.3);color:#fff}
.dp .dp-method>.icon,.dp .dp-method small{color:#7ee0b0}
.dp .dp-method:hover{border-color:#ffbe1f}
.dp .dp-method.is-on{background:rgba(126,224,176,.16);border:2px solid #7ee0b0;box-shadow:0 0 0 3px rgba(126,224,176,.15)}
.dp .dp-method.is-on>.icon{color:#7ee0b0}
.dp .dp-method .dp-tick{background:#7ee0b0;color:#0a3d2e}
.dp .dp-proof{border-color:rgba(126,224,176,.3)}
.dp .dp-drop{background:rgba(255,255,255,.05);border-color:rgba(126,224,176,.4);color:#fff}
.dp .dp-drop small,.dp .dp-drop .dp-up{color:#7ee0b0}
.dp .dp-drop.has{background:rgba(126,224,176,.15);border-color:#7ee0b0}
.dp .dp-tick__text strong{color:#fff}
.dp .dp-tick__text small{color:#a9e8c8}
.dp .dp-tick input[type=checkbox],.dp .dp-tick input[type=radio]{accent-color:#ffbe1f}

/* buttons on the dark cards */
.dp .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.dp .btn--ghost:hover{background:rgba(255,255,255,.12)}
.dp .btn--gold{background:#ffbe1f;color:#2a1e00;border-color:#ffbe1f}
.dp .btn--gold:hover{background:#ffd04d}
.dp .dp-badge{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3)}
.dp .dn-copy{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.4)}
.dp .dp-accounts .mono{color:#ffbe1f}

/* Greeting and confirmation heading + name in handwriting (English) */
html:not(.is-ur) .dp-greet__salam,html:not(.is-ur) .dp-greet>strong,html:not(.is-ur) .dp-thanks h2,html:not(.is-ur) .dp-thanks .thanks__name{font-family:'Caveat','Segoe Script','Bradley Hand',cursive;font-weight:700;letter-spacing:0}
html:not(.is-ur) .dp-greet__salam,html:not(.is-ur) .dp-greet>strong{font-size:1.5rem;line-height:1.2}
html:not(.is-ur) .dp-thanks h2{font-size:2.4rem;line-height:1.15}
html:not(.is-ur) .dp-thanks .thanks__name{color:#0b4b38}
html:not(.is-ur) .dp-greet__salam,html:not(.is-ur) .dp-greet>strong{font-size:2.1rem;line-height:1.15}
html:not(.is-ur) .dp-greet{align-items:center}

/* Signed-in donor dropdown (name, then My account / Change password / Sign out) */
.nav__user{position:relative}
.nav__user>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem}
.nav__user>summary::-webkit-details-marker{display:none}
.nav__caret{width:.45rem;height:.45rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.nav__user[open] .nav__caret{transform:rotate(-135deg) translateY(-2px)}
.nav__menu{position:absolute;inset-inline-end:0;top:calc(100% + .45rem);min-width:12.5rem;padding:.4rem;border-radius:14px;background:#0a3d2e;border:1px solid rgba(126,224,176,.25);box-shadow:0 18px 36px -16px rgba(4,30,22,.85);z-index:60;display:grid;gap:.1rem}
.nav__menu a,.nav__menu button{display:block;width:100%;text-align:start;padding:.55rem .8rem;border:0;border-radius:9px;background:none;color:#fff;font:inherit;font-size:.9rem;font-weight:500;text-decoration:none;cursor:pointer}
.nav__menu a:hover,.nav__menu button:hover,.nav__menu a:focus-visible,.nav__menu button:focus-visible{background:rgba(255,255,255,.12);outline:0}
.nav__menu form{margin:0;border-top:1px solid rgba(126,224,176,.2);margin-top:.2rem;padding-top:.2rem}
.nav__menu button{color:#ffbe1f}
@media (max-width:1100px){
  .nav__user{width:100%}
  .nav__user>summary{width:100%;justify-content:center}
  .nav__menu{position:static;margin-top:.4rem;min-width:0;box-shadow:none}
}
/* donor menu: no outline on the name button, none on the dropdown */
.nav__user>summary.btn{border-color:transparent;box-shadow:none}
.nav__user>summary.btn:hover,.nav__user[open]>summary.btn{border-color:transparent;background:rgba(11,75,56,.08)}
.nav__menu{border:0}
.nav__menu a,.nav__menu button{font-size:.8rem;padding:.45rem .75rem}
.nav__menu{min-width:11rem}

/* Sign-in side panel: the smooth mark with the trust name beside it */
.login__brand{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
.login__brand .login__mark{height:64px;width:auto;margin:0;flex:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.login__name{display:grid;line-height:1.15;min-width:0}
.login__name strong{font-family:'Montserrat',system-ui,sans-serif;font-weight:800;font-size:1.05rem;letter-spacing:.14em;color:#fff;white-space:nowrap}
.login__name em{font-family:'Caveat','Segoe Script',cursive;font-style:normal;font-weight:700;font-size:1.5rem;line-height:1;color:var(--gold-500,#e2b04a);margin:.05rem 0 .15rem}
.login__name small{font-size:.62rem;letter-spacing:.06em;color:#9fe3c2;line-height:1.35}
html.is-ur .login__name strong{letter-spacing:0;font-size:1.25rem;white-space:normal}
html.is-ur .login__name em{display:none}
.login--pw .login__brand{flex-direction:column;align-items:flex-start;gap:.6rem}
.login--pw .login__name strong{font-size:.95rem;letter-spacing:.1em}
.login__name small{display:none}

/* Urdu mode: English words and digits use Montserrat; Urdu letters fall through to the Urdu faces */
html.is-ur{
  --font:'Montserrat','Noto Naskh Arabic','Noto Nastaliq Urdu','Segoe UI',system-ui,sans-serif;
  --font-head:'Montserrat','Noto Nastaliq Urdu','Noto Naskh Arabic','Segoe UI',serif;
  --font-ur:'Montserrat','Noto Nastaliq Urdu','Noto Naskh Arabic','Jameel Noori Nastaleeq','Segoe UI',serif;
  --font-ur-ui:'Montserrat','Noto Naskh Arabic','Noto Nastaliq Urdu','Segoe UI',serif;
}
html.is-ur input,html.is-ur select,html.is-ur textarea,html.is-ur button{font-family:inherit}

/* Menu: a gold line draws from left to right under the item on hover (right to left in Urdu) */
.nav li a,.nav li a:hover,.nav li a[aria-current=page]{text-decoration:none}
.nav li a{position:relative}
.nav li a::after{content:"";position:absolute;inset-inline:.5rem;bottom:-1px;height:2px;border-radius:2px;background:var(--gold-500,#e2b04a);transform:scaleX(0);transform-origin:left center;transition:transform .35s cubic-bezier(.22,.8,.3,1)}
html[dir=rtl] .nav li a::after{transform-origin:right center}
.nav li a:hover::after,.nav li a:focus-visible::after{transform:scaleX(1)}
.nav li a[aria-current=page]::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.nav li a::after{transition:none}}
@media (max-width:1100px){.nav li a::after{inset-inline:.25rem}}
.nav li a::after{height:3px;border-radius:3px;bottom:-2px}

/* Projects page: live (featured, published) projects stand taller, with a gold edge and a ribbon */
.grid--projects{align-items:end}
.pcard--live{position:relative;z-index:1;border:2px solid var(--gold-500,#e2b04a);transform:translateY(-10px);box-shadow:0 22px 44px -22px rgba(122,82,0,.55),0 4px 10px rgba(8,50,38,.08)}
.pcard--live .pcard__media{aspect-ratio:4/3}
.pcard--live .pcard__body{padding-block:1.25rem 1.3rem}
.pcard--live .pcard__title{font-size:1.25rem}
.pcard__live{position:absolute;inset-inline-start:.8rem;bottom:.8rem;display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .7rem;border-radius:99px;background:linear-gradient(180deg,#f3cb73,#e2b04a);color:#2a1e00;font-size:.74rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 6px 14px -6px rgba(122,82,0,.7)}
.pcard__live .icon{width:.85rem;height:.85rem;color:#b3261e;fill:#b3261e}
html.is-ur .pcard__live{letter-spacing:0;text-transform:none}
@media (max-width:640px){.pcard--live{transform:none}.grid--projects{align-items:stretch}}

/* ===== Admin sign-in, redesigned: dark pattern background, brand panel + form ===== */
.adl{display:grid;width:min(860px,94vw);border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 40px 90px -30px rgba(0,0,0,.65);border:1px solid rgba(126,224,176,.18)}
@media (min-width:820px){.adl{grid-template-columns:5fr 6fr}}
.adl__side{padding:2rem 1.9rem;color:#fff;background:radial-gradient(420px 300px at 90% 110%,rgba(23,115,85,.9),transparent 70%),#0a3d2e;display:flex;flex-direction:column;justify-content:center}
.adl__brand{display:flex;align-items:center;gap:.9rem;margin-bottom:1.4rem}
.adl__brand img{height:68px;width:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.adl__name{display:grid;line-height:1.1}
.adl__name strong{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.15rem;letter-spacing:.14em;color:#fff;white-space:nowrap}
.adl__name em{font-family:'Caveat','Segoe Script',cursive;font-style:normal;font-weight:700;font-size:1.6rem;line-height:1;color:#ffbe1f}
.adl__side h2{margin:0 0 .35rem;font-size:1.5rem;font-weight:800;color:#fff}
.adl__side p{margin:0;color:#c8f0dc;font-size:.92rem;line-height:1.55}
.adl__points{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.5rem}
.adl__points li{display:flex;align-items:center;gap:.6rem;font-size:.84rem;color:#fff}
.adl__points li::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:#ffbe1f}
.adl__main{padding:2rem 2.1rem;display:flex;flex-direction:column;justify-content:center;background:#fff}
.adl__main h1{margin:0 0 .15rem;font-family:'Montserrat',sans-serif;font-size:1.6rem;font-weight:800;color:#0a3d2e}
.adl__lead{margin:0 0 1.2rem;color:var(--muted);font-size:.9rem}
.adl form{display:grid;gap:.85rem}
.adl__field{display:grid;gap:.3rem;font-size:.8rem;font-weight:700;color:#0a3d2e;letter-spacing:.02em}
.adl__field input{width:100%;height:2.7rem;padding:.4rem .85rem;border:1.5px solid #cfdad4;border-radius:12px;background:#f7faf8;font:inherit;font-size:.95rem;font-weight:500;color:var(--ink)}
.adl__field input::placeholder{color:#9aa8a1;font-weight:400}
.adl__field input:focus{outline:0;border-color:#e2b04a;background:#fff;box-shadow:0 0 0 4px rgba(226,176,74,.25)}
.adl__code{text-align:center;font-size:1.4rem!important;letter-spacing:.35em;font-weight:700!important}
.adl__go{height:2.75rem;border:0;border-radius:99px;background:linear-gradient(135deg,#0b4b38,#0f6b4f);color:#fff;font:inherit;font-weight:800;font-size:.95rem;cursor:pointer;box-shadow:0 10px 20px -12px rgba(11,75,56,.9);transition:transform .15s,box-shadow .15s}
.adl__go:hover{transform:translateY(-1px);box-shadow:0 14px 24px -12px rgba(11,75,56,.95)}
.adl__go span{color:#ffbe1f;margin-inline-start:.3rem}
.adl__links{margin:1rem 0 0;font-size:.85rem}
.adl__links a{color:#0f6b4f;text-decoration:none;font-weight:600}
.adl__links a:hover{text-decoration:underline}
.adl .pw-wrap{position:relative;display:block}
.adl .pw-wrap input{padding-inline-end:2.8rem}
.adl .pw-eye{position:absolute;top:50%;inset-inline-end:.45rem;transform:translateY(-50%);display:grid;place-items:center;width:2rem;height:2rem;padding:0;border:0;border-radius:8px;background:none;color:#6b7d74;cursor:pointer}
.adl .pw-eye:hover{color:#0a3d2e;background:rgba(11,75,56,.08)}
@media (max-width:819px){.adl__side{padding:1.3rem 1.4rem}.adl__points{display:none}.adl__main{padding:1.5rem 1.4rem}}


/* Donor sign-in: same dark patterned stage as the admin sign-in */
.adl-wrap{padding:3rem 0 3.5rem;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M36 6l6 14 14 6-14 6-6 14-6-14-14-6 14-6z'/%3E%3Ccircle cx='36' cy='26' r='5'/%3E%3C/g%3E%3C/svg%3E") center/72px,
  radial-gradient(900px 500px at 85% 110%,rgba(23,115,85,.55),transparent 70%),
  radial-gradient(700px 420px at 0% -10%,rgba(15,90,67,.55),transparent 70%),
  #06281e}
.adl-wrap .adl{margin-inline:auto}
.adl .alert{margin:0 0 .8rem}
html.is-ur .adl__name em{display:none}
html.is-ur .adl__name strong{letter-spacing:0;font-size:1.3rem;white-space:normal}
html.is-ur .adl__field,html.is-ur .adl__points li{letter-spacing:0}
/* donor sign-in: normal site background behind the card */
.adl-wrap{background:none;padding:2rem 0 2.5rem}
.adl-wrap .adl{border-color:var(--line,#e2ddd0);box-shadow:0 22px 50px -26px rgba(8,50,38,.4)}
.adl-wrap .adl__links{text-align:center}
.nav__cta .nav__login{order:2}

/* Zakat calculator: a gold outline button in the panel opens it as a pop-up */
.zcalc__open{display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1.2rem;padding:.5rem 1.1rem;border:1.5px solid #ffbe1f;border-radius:99px;background:rgba(255,190,31,.1);color:#ffbe1f;font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;transition:background .15s}
.zcalc__open:hover{background:rgba(255,190,31,.22)}
.zcalc__open .icon{width:1.05rem;height:1.05rem}
.zcalc__open.is-set{background:#ffbe1f;color:#2a1e00}
dialog.zcalc{width:min(560px,94vw);padding:0;border:1px solid rgba(126,224,176,.25);border-radius:20px;background:#0a3d2e;color:#fff;box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
dialog.zcalc::backdrop{background:rgba(4,30,22,.65);backdrop-filter:blur(2px)}
dialog.zcalc[open]{animation:zdIn .22s ease both}
@keyframes zdIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.zcalc__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.3rem;border-bottom:1px solid rgba(255,255,255,.14)}
.zcalc__head h4{margin:0;display:flex;align-items:center;gap:.55rem;font-size:1.1rem;font-weight:800;color:#fff}
.zcalc__head .icon{width:1.2rem;height:1.2rem;color:#ffbe1f}
.zcalc__x{display:grid;place-items:center;width:2rem;height:2rem;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;cursor:pointer}
.zcalc__x:hover{background:rgba(255,255,255,.2)}
.zcalc__x svg{width:14px;height:14px}
.zcalc__body{padding:1.1rem 1.3rem 1.2rem;display:grid;gap:1rem}
.zcalc__grid{display:grid;gap:.7rem .9rem}
@media (min-width:560px){.zcalc__grid{grid-template-columns:1fr 1fr}}
.zcalc__f{display:grid;gap:.25rem;font-size:.8rem;font-weight:600;color:#a9e8c8}
.zcalc__f--minus span::before{content:"\2212  ";color:#ffb4ac}
.zcalc__f input{height:2.4rem;padding:.3rem .8rem;border:1px solid rgba(126,224,176,.4);border-radius:12px;background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:.95rem;font-weight:600}
.zcalc__f input::placeholder{color:rgba(255,255,255,.35)}
.zcalc__f input:focus{outline:0;border-color:#ffbe1f;box-shadow:0 0 0 3px rgba(255,190,31,.25)}
.zcalc__out{display:grid;gap:.4rem;padding:.8rem 1rem;border-radius:14px;background:rgba(0,0,0,.2)}
.zcalc__row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;font-size:.9rem;color:#c8f0dc}
.zcalc__row strong{color:#fff;font-variant-numeric:tabular-nums}
.zcalc__row--big{padding-top:.4rem;border-top:1px solid rgba(255,255,255,.15);font-size:1rem}
.zcalc__row--big strong{color:#ffbe1f;font-size:1.7rem;font-weight:800}
.zcalc__note{margin:0;font-size:.8rem;line-height:1.5;color:#a9e8c8}
.zcalc__note:empty{display:none}
.zcalc__actions{display:flex;justify-content:flex-end;gap:.5rem}
.zcalc__cancel,.zcalc__use{padding:.45rem 1.2rem;border-radius:99px;font:inherit;font-weight:800;font-size:.88rem;cursor:pointer}
.zcalc__cancel{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff}
.zcalc__cancel:hover{background:rgba(255,255,255,.12)}
.zcalc__use{border:0;background:#ffbe1f;color:#2a1e00}
.zcalc__use:hover{background:#ffd04d}
.zcalc__use[hidden]{display:none}

/* Zakat panel: the calculator button sits at the far end of the heading row */
.give__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.4rem}
.give__head h3{margin:0}
.give__head .zcalc__open{margin:0;padding:.4rem 1rem;font-size:.85rem}

/* Fund tabs share the full height of the panel, so there is no empty strip under the last tab */
@media (min-width:860px){
  .give__tabs{align-items:stretch}
  .give__tab{flex:1 1 0;min-height:5.2rem}
  .give__tab:last-child{border-bottom:0}
}

/* calculator: clear-all and close icons sit together in the header */
.zcalc__tools{display:flex;align-items:center;gap:.4rem}
.zcalc__clear svg{width:16px;height:16px}

/* Heart ripple on Ways to give: smaller, fainter, slower */
.gs__pulse::before,.gs__pulse::after{width:140%;border-width:1px;box-shadow:none;animation-duration:2.6s}
.gs__pulse::after{animation-delay:1.3s}
@keyframes gsRipple{0%{transform:translate(-50%,-50%) scale(.3);opacity:.45}100%{transform:translate(-50%,-50%) scale(1.25);opacity:0}}

/* ---- Touch devices: bigger tap targets without changing how things look ---- */
@media (pointer:coarse){
  .langswitch{display:inline-flex;align-items:center;min-height:36px}
  .dots button{position:relative}
  .dots button::after{content:"";position:absolute;inset:-14px -7px}
  .btn--sm,.nav__cta .btn{min-height:36px;display:inline-flex;align-items:center;justify-content:center}
  .topbar a,.eventbar a,.tick a{display:inline-flex;align-items:center;min-height:36px}
}
@media (pointer:coarse){
  .announce__more,.give__other,.evsub a{display:inline-flex;align-items:center;min-height:36px}
  .give__amounts .chip{min-height:38px}
}

/* ---- Mobile menu (shown below 1100px): comfortable rows, full-width actions ---- */
@media (max-width:1100px){
  .nav ul{gap:0}
  .nav li a{display:flex;align-items:center;min-height:44px;font-size:1rem}
  .nav .nav__phone{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;min-height:46px;margin-top:.4rem;border-radius:12px;font-size:1.05rem}
  .nav .nav__cta{display:grid;gap:.6rem;width:100%;margin-top:.6rem}
  .nav .nav__cta .btn,.nav .nav__cta>*{width:100%;min-height:46px;font-size:.98rem;justify-content:center;text-align:center}
}

/* Footer watermark: keep the whole name inside its box at every width */
.footer2__markwrap .footer2__mark{font-size:9.4cqw}
@media (max-width:820px){.footer2__markwrap .footer2__mark{font-size:9.4cqw}}

/* ---- Phones: make it obvious where each page and section starts and ends ---- */
@media (max-width:760px){
  .pagehead h1{font-size:1.75rem;line-height:1.2;font-weight:800;letter-spacing:-.01em}
  .section{border-top:4px solid rgba(217,163,54,.45);border-bottom:1px solid #e3ddcc}
  .sec--cream,.section--tint{background:#f0e8d3}
  main .section h2{position:relative;padding-top:1.1rem;font-size:1.75rem;line-height:1.2;font-weight:800;color:var(--green-800,#0b4b38)}
  main .section h2::before{content:"";position:absolute;top:0;inset-inline-start:0;width:48px;height:4px;border-radius:4px;background:var(--gold-500)}
  main .section .section__head--center h2::before,main .section h2[style*="center"]::before{inset-inline-start:calc(50% - 24px)}
  main .section h2+p,main .section__head p{font-size:1rem}
}

/* "How transparency works" now lives inside the Ways of giving section */
.promise--inline{margin-top:3rem;padding-top:2.2rem;border-top:1px solid var(--line)}
.promise__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.8rem 1.2rem;margin-bottom:.6rem}
.promise__head h3{font-size:clamp(1.35rem,2.6vw,1.9rem);margin:0}
.promise__head .eyebrow{margin-bottom:.2rem}
.flow__step h4{font-size:1.2rem;margin:0 0 .45rem}

/* ---- How transparency works: one slim connected row, three short steps ---- */
.tw{margin-top:2.6rem;padding-top:2rem;border-top:1px solid var(--line)}
.tw__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.7rem 1.2rem;margin-bottom:1rem}
.tw__head h3{font-size:clamp(1.3rem,2.4vw,1.7rem);margin:0}
.tw__head .eyebrow{margin:0 0 .15rem}
.tw__row{list-style:none;margin:0;padding:.9rem 1.1rem;display:flex;align-items:center;gap:.4rem;background:var(--surface,#fff);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(20,40,30,.05)}
.tw__step{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:.75rem;position:relative}
.tw__step:not(:last-child)::after{content:"";flex:none;width:28px;height:2px;margin-inline:.5rem;background:repeating-linear-gradient(90deg,var(--gold-500) 0 5px,transparent 5px 9px);margin-inline-start:auto}
.tw__ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%}
.tw__ic .icon{width:22px;height:22px}
.tw__step--1 .tw__ic{background:#0b4b38;color:#e2b04a}
.tw__step--2 .tw__ic{background:#e2b04a;color:#083c2c}
.tw__step--3 .tw__ic{background:#177355;color:#fff}
.tw__txt{display:grid;line-height:1.3;min-width:0}
.tw__txt strong{font-size:1rem}
.tw__txt small{font-size:.82rem;color:var(--muted)}
html[dir=rtl] .tw__step:not(:last-child)::after{margin-inline-start:auto}
@media (max-width:700px){
  .tw__row{flex-direction:column;align-items:stretch;gap:.2rem;padding:.8rem 1rem}
  .tw__step{flex:none}
  .tw__step:not(:last-child)::after{display:none}
  .tw__step:not(:last-child){padding-bottom:.9rem;margin-bottom:.1rem}
  .tw__step:not(:last-child)::before{content:"";position:absolute;inset-inline-start:22px;top:50px;bottom:-4px;border-inline-start:2px dashed var(--gold-500);opacity:.7}
}

/* Phone number: lives in the footer now, not the menu */
.footer2__phone{display:inline-flex;align-items:center;gap:.5rem;margin:.9rem 0 0 .6rem;color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;vertical-align:middle}
.footer2__phone .icon{width:18px;height:18px;color:#25d366}
.footer2__phone:hover{color:var(--gold-500)}
.footer2__brand .btn--gold+.footer2__phone{margin-inline-start:.9rem}
.footer2__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.1rem;margin-top:.2rem}
.footer2__cta .btn,.footer2__cta .footer2__phone{margin:0;vertical-align:baseline}
.footer2__cta .footer2__phone{min-height:36px;line-height:1}

/* Desktop header: Donate + Donor login sit on the right, next to the language switch */
@media (min-width:1101px){
  .header .nav .nav__cta{margin-inline-start:auto}
}

/* ---- Phones: the top banner is ONE slim line (tag · event title · arrow). Names of Allah, dots and the
        date line are desktop-only so the banner does not compete with the page. ---- */
@media (max-width:700px){
  .announce.announce .announce__in{flex-wrap:nowrap;gap:.6rem;padding:.3rem 0;min-height:44px;align-items:center}
  .announce.announce .announce__items{flex:1 1 auto;min-width:0}
  .announce.announce .aitem{flex-wrap:nowrap;gap:.55rem;min-width:0;white-space:nowrap;overflow:hidden}
  .announce.announce .aitem strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:.9rem;line-height:1.5}
  .announce.announce .aitem__meta,.announce.announce .announce__names,.announce.announce .announce__dots,.announce.announce .announce__wa{display:none}
  .announce.announce .announce__tag{flex:none;font-size:.66rem;padding:.12rem .55rem;letter-spacing:.04em}
  .announce.announce .announce__tag .icon{display:none}
  .announce.announce .announce__more{flex:none;margin:0;padding:0;border:0;gap:0;font-size:0;width:34px;height:34px;justify-content:center;border-radius:50%;background:rgba(255,255,255,.14)}
  .announce.announce .announce__more .icon{width:16px;height:16px}
  html.is-ur .announce.announce .aitem strong{line-height:1.8}
}

/* ---- Mobile menu, compact ---- */
@media (max-width:1100px){
  .header .nav{padding-block:.35rem .6rem;gap:.3rem}
  .header .nav li a{min-height:38px;font-size:.95rem;padding-block:.15rem}
  .header .nav li a[aria-current=page]{text-decoration-thickness:2px}
  .header .nav .nav__cta{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.3rem}
  .header .nav .nav__cta .btn,.header .nav .nav__cta>*{min-height:38px;font-size:.9rem;padding:.2rem .6rem;box-shadow:none}
  .header .nav .nav__cta details,.header .nav .nav__cta .nav__me{grid-column:1/-1}
}

/* ---- About: "When we show up" and "Our promise" kept compact: small icon beside a heading and one line ---- */
.section:has(.moments),.section:has(.about-promise){padding-block:2.2rem}
.section:has(.moments) .section__head,.about-promise .section__head{margin-bottom:1rem}
.moments{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.moment,.about-promise .value{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.8rem;row-gap:.1rem;align-items:center;text-align:start;padding:.75rem 1rem;border-radius:14px}
.moment{border-top-width:1px;border-inline-start:4px solid var(--gold-500)}
.moment__icon,.about-promise .value__icon{grid-row:1/3;width:2.6rem;height:2.6rem;margin:0;border-radius:50%}
.moment__icon .icon,.about-promise .value__icon .icon{width:1.25rem;height:1.25rem}
.moment h3,.about-promise .value h3{margin:0;font-size:1rem}
.moment p,.about-promise .value p{margin:0;font-size:.88rem;line-height:1.45}
.about-promise .grid--3{gap:.7rem}
@media (max-width:700px){.moments{grid-template-columns:1fr}}

/* Contact: cards wide enough for the email address; never split it mid-word unless the screen is tiny */
.clist{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.clist a[href^="mailto"]{word-break:normal;overflow-wrap:anywhere;font-size:.86rem}

/* Contact (wide screens): the message card is centred vertically against the contact details + map */
@media (min-width:900px){.cgrid{align-items:center}}

/* Contact (wide screens): Phone, Email and Office stay on ONE line; the address wraps inside its own card */
@media (min-width:900px){
  .clist{display:flex;flex-wrap:nowrap;gap:.5rem}
  .clist li{flex:0 0 auto;min-width:0}
  .clist li:last-child{flex:1 1 0}
  .clist a[href^="mailto"]{white-space:nowrap}
}
@media (min-width:900px){
  .cgrid{grid-template-columns:1.45fr 1fr}
  .clist li{padding:.5rem .6rem;gap:.5rem}
  .clist a,.clist span{font-size:.84rem}
  .clist a[href^="tel"]{white-space:nowrap}
}

/* Contact (wide screens): both columns are the same height, tops and bottoms level.
   The map takes the spare height on the left; the message box takes it on the right. */
@media (min-width:900px){
  .cgrid{align-items:stretch}
  .cleft{display:flex;flex-direction:column}
  .cleft .mapcard{flex:1;display:flex;flex-direction:column}
  .cleft .mapcard iframe{flex:1;height:auto;min-height:240px}
  .cgrid>form{display:flex;flex-direction:column}
  .cgrid>form .field:has(textarea){flex:1;display:flex;flex-direction:column}
  .cgrid>form textarea{flex:1;min-height:6rem}
}

/* Contact: on mid-size screens (900–1199px) the left column is too narrow for three cards in one line */
@media (min-width:900px) and (max-width:1199px){
  .clist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .clist li,.clist li:last-child{flex:none}
  .clist li:last-child{grid-column:1/-1}
}

/* Ways to give: no heart, only the ripples */
.gs__pulse{background:none;animation:none;filter:none;box-shadow:none}

/* Ways to give: bolder ripples (thicker, brighter, wider reach, soft glow) */
.gs__pulse{width:1.2em;height:1.2em}
.gs__pulse::before,.gs__pulse::after{width:190%;border-width:2.5px;border-color:rgba(255,190,31,.95);box-shadow:0 0 10px rgba(255,190,31,.55);animation-duration:2.2s}
.gs__pulse::after{animation-delay:1.1s}
@keyframes gsRipple{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}100%{transform:translate(-50%,-50%) scale(1.7);opacity:0}}

/* Ways to give: a little more space between the title and the ripple */
.gs__pulse{margin-inline-start:1.5em}

/* Ways to give: smaller ripples (same look, about half the reach) */
.gs__pulse{width:.9em;height:.9em}
.gs__pulse::before,.gs__pulse::after{width:130%;border-width:2px;box-shadow:0 0 6px rgba(255,190,31,.5)}
@keyframes gsRipple{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}100%{transform:translate(-50%,-50%) scale(1.25);opacity:0}}

/* ---- Donate: when "How you will pay" changes, the right-hand cards visibly update ---- */
.dp-accounts,.dp-summary{position:relative;transition:box-shadow .3s ease,border-color .3s ease}
.dp-accounts.is-updated,.dp-summary.is-updated{animation:dpGlow 1.2s ease-out}
@keyframes dpGlow{
  0%{box-shadow:0 0 0 0 rgba(226,176,74,0);border-color:var(--line)}
  25%{box-shadow:0 0 0 4px rgba(226,176,74,.5),0 10px 28px -10px rgba(226,176,74,.5);border-color:var(--gold-500,#e2b04a)}
  100%{box-shadow:0 0 0 0 rgba(226,176,74,0)}
}
/* the new details slide in */
[data-acct].is-swapped,[data-acct-none].is-swapped{animation:dpSlideIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes dpSlideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* a small "updated" tick that appears in the corner and fades away */
.dp-accounts.is-updated::after{content:"\2713";position:absolute;top:.7rem;inset-inline-end:.8rem;width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;background:var(--gold-500,#e2b04a);color:#2a1e00;font-weight:800;font-size:.9rem;animation:dpTick 1.2s ease-out forwards;pointer-events:none}
@keyframes dpTick{0%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(1.15)}35%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(1)}}
/* the "Via" badge pops */
.dp-badge.is-pop{animation:dpPop .5s cubic-bezier(.2,.9,.3,1.4)}
@keyframes dpPop{0%{transform:scale(.7);opacity:.3}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .dp-accounts.is-updated,.dp-summary.is-updated,[data-acct].is-swapped,[data-acct-none].is-swapped,.dp-badge.is-pop{animation:none}
  .dp-accounts.is-updated::after{animation:none;opacity:0}
}

/* ---- Donate: slower, clearer "details just updated" cue. The right-hand cards are dark green with white text, so the
        card brightens to a lighter green (text stays readable) with a gold edge, holds, then settles back. ---- */
:root{--dp-base:#0a3d2e;--dp-flash:#16734f;--dp-edge:#e2b04a}
.dp-accounts{transition:none}
/* the card itself stays exactly as it is: no colour or shadow change (the older glow rules are switched off here) */
.dp-accounts.is-updated{animation:none}
/* instead, the same travelling light as the Ways to give buttons runs around the card's edge for two laps */
.dp-accounts.is-updated::before{
  /* bold gold: it has to show on the cream page around the card AND on the dark green card itself */
  content:"";position:absolute;inset:-3px;border-radius:calc(var(--radius,14px) + 3px);padding:4px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--gs-angle),transparent 0 50%,#ffb800 74%,#ffe07a 88%,#ffb800 94%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  filter:drop-shadow(0 0 5px rgba(255,184,0,.9)) drop-shadow(0 0 12px rgba(255,184,0,.55));
  animation:gsSpin 1.4s linear 2;
}
[data-acct].is-swapped,[data-acct-none].is-swapped{animation:dpSlideIn .9s cubic-bezier(.2,.8,.2,1)}
.dp-accounts.is-updated::after{animation:dpTick 2.6s ease-out forwards}
@keyframes dpTick{0%{opacity:0;transform:scale(.4)}12%{opacity:1;transform:scale(1.2)}22%{transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:scale(1)}}
.dp-badge.is-pop{animation:dpPop .9s cubic-bezier(.2,.9,.3,1.4)}
@media (prefers-reduced-motion:reduce){.dp-accounts.is-updated::before{animation:none;opacity:.5}}

/* Donate confirmation: "Every rupee is traceable" is a small, quiet link, not a big button */
.dn-trace--thanks{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;max-width:none;margin:.7rem auto .2rem;padding:.2rem .5rem;border-radius:8px;background:none;color:var(--green-700,#0f5a43);font-size:.82rem;line-height:1.4}
.dn-trace--thanks .icon{width:.95rem;height:.95rem;color:var(--gold-600,#c18f22)}
.dn-trace--thanks span{display:inline;margin-inline-end:0}
.dn-trace--thanks strong{font-weight:600}
.dn-trace--thanks small{display:inline;opacity:.85;font-size:inherit}
.dn-trace--thanks small::before{content:"\00b7";margin-inline:.35rem}
.dn-trace--thanks:hover{background:none;text-decoration:underline}
@media (prefers-color-scheme:dark){.dn-trace--thanks{color:#7fd1ad}.dn-trace--thanks .icon{color:#e2b04a}}

/* Donate confirmation on short screens (laptops): a tighter card, so it fits under the header without scrolling */
@media (max-height:720px){
  .dp-thanks{padding:1.1rem 2rem}
  .dp-thanks .thanks__icon{width:52px;height:52px;margin-bottom:.5rem}
  .dp-thanks .thanks__icon svg,.dp-thanks .thanks__icon .icon{width:26px;height:26px}
  .dp-thanks h2{margin-bottom:.1rem}
  .dp-thanks .thanks__lead{margin-bottom:.6rem}
  .dp-thanks .dp-recap{margin:.6rem 0 .7rem;gap:.15rem .9rem}
  .dp-thanks>p{margin-bottom:.6rem}
}

/* Ways to give: the "After donation..." card now opens the page, above the payment cards (the story card is back at the bottom) */
.gs--strip{margin:0 auto 1.4rem}

/* Ways to give: two confirm buttons side by side (online + WhatsApp) */
.gs__confirm--pair{display:flex;flex-wrap:wrap;gap:.6rem .8rem;justify-content:center;align-items:center}
.gs__confirm .gs__wa{background:#25d366;color:#06301a}
.gs__confirm .gs__wa:hover{background:#3be07a}
.gs__confirm .gs__wa .icon{color:#06301a;width:1.1rem;height:1.1rem}

/* Ways to give: compact Bank Transfer / Mobile Wallet cards */
.gs2{gap:.9rem}
.gs2 .gs{padding:.9rem 1.2rem 1rem;border-radius:16px}
.gs2 .gs__title{font-size:clamp(1.1rem,2vw,1.35rem);margin-bottom:.45rem}
.gs2 .gs__row{padding:.38rem 0;gap:.7rem}
.gs2 .gs__label{font-size:.88rem}
.gs2 .gs__value{font-size:.92rem}
.gs2 .gs__copy{padding:.1rem .6rem;font-size:.74rem;min-height:0}
.gs2 .gs__logo{height:28px;min-width:38px;padding:2px 5px;border-radius:7px}
.gs2 .gs__logo img{height:22px}
.gs2 .gs__pulse{margin-inline-start:1.1em}

/* Mobile Wallet: each wallet on its own row (logo + name, number, Copy) */
.gs__wname{font-weight:600;font-size:.88rem;color:#c8f0dc}
.gs2 .gs__row--wallet .gs__label--logos{gap:.55rem;min-width:9.5rem}
@media (max-width:759px){
  .gs2 .gs__row--wallet{flex-wrap:nowrap;gap:.5rem}
  .gs2 .gs__row--wallet .gs__label--logos{min-width:0;gap:.4rem}
  .gs2 .gs__row--wallet .gs__value{flex:1 1 auto;text-align:end;font-size:.86rem}
  .gs__wname{font-size:.8rem}
}

/* Ways to give, top card: buttons first, the "After donation..." note underneath them */
.gs--strip .gs__confirm{margin:0}
.gs--strip .gs__foot{margin:.9rem 0 0}

/* Ways to give, top card: two options side by side, each button with its own explanation */
.gs--two{display:grid;grid-template-columns:1fr;gap:1rem 0;align-items:start}
@media (min-width:760px){.gs--two:has(.gs__opt--wa){grid-template-columns:1fr 1fr}}
.gs--two .gs__opt{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 1.2rem}
.gs--two .gs__opt+.gs__opt{border-inline-start:1px solid rgba(126,224,176,.22)}
.gs--two .gs__confirm{margin:0}
.gs--two .gs__foot{margin:.7rem 0 0;font-size:.86rem;line-height:1.55;max-width:34rem}
@media (max-width:759px){
  .gs--two .gs__opt{padding:0}
  .gs--two .gs__opt+.gs__opt{border-inline-start:0;border-top:1px solid rgba(126,224,176,.22);padding-top:1rem}
}
/* both confirm buttons share one width (the WhatsApp one is the longer label) */
.gs--two .gs__confirm a{box-sizing:border-box;width:min(100%,20rem);justify-content:center}
.gs--two .gs__confirm{width:100%;display:flex;justify-content:center}

/* Ways to give confirm buttons: a light travels around the edge (needs @property; older browsers just show a still button) */
@property --gs-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
.gs--two .gs__confirm a{position:relative;isolation:isolate;--ring:#fff3c4}
.gs--two .gs__confirm a.gs__wa{--ring:#d4ffe4}
.gs--two .gs__confirm a::before{
  content:"";position:absolute;inset:-4px;border-radius:inherit;padding:3px;pointer-events:none;z-index:-1;
  background:conic-gradient(from var(--gs-angle),transparent 0 62%,var(--ring) 80%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:gsSpin 3.2s linear infinite;
  filter:drop-shadow(0 0 4px var(--ring));
}
.gs--two .gs__confirm a.gs__wa::before{animation-delay:-1.6s}
@keyframes gsSpin{to{--gs-angle:360deg}}
@media (prefers-reduced-motion:reduce){.gs--two .gs__confirm a::before{animation:none;opacity:.55}}

/* centred: buttons, captions and the text inside them */
.gs--two .gs__opt{align-items:center;text-align:center}
.gs--two .gs__foot{text-align:center;margin-inline:auto}
.gs--two .gs__confirm a{text-align:center}
.gs--two .gs__foot{text-wrap:balance}
/* the "updated" tick sits on the card's corner instead of covering the method pill */
.dp-accounts.is-updated::after{top:-.6rem;inset-inline-end:-.6rem;z-index:3}

/* Donate, receipt step: an element marked hidden must stay hidden. (.dp-wa sets display:grid, which beat the hidden
   attribute, so the "Open WhatsApp and send the receipt" button showed even when "Upload my receipt here" was chosen.) */
.dp-wa[hidden],.dp-proof[hidden],.dp-proofopts[hidden],[data-upload][hidden]{display:none!important}

/* Donate, receipt step: "Upload my receipt here" and "Share it on WhatsApp" sit side by side (stack on narrow screens) */
.dp .dp-proofopts:not([hidden]){display:flex;flex-wrap:wrap;align-items:flex-start;gap:.3rem 2.2rem}
.dp .dp-proofopts .dp-tick{flex:0 1 auto;margin:.35rem 0}
@media (max-width:520px){.dp .dp-proofopts:not([hidden]){display:grid;gap:.1rem}}

/* Donate: the receipt drop area is one slim line (icon, text, file types) instead of three stacked lines */
.dp .dp-drop{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.1rem .6rem;padding:.55rem .9rem;border-radius:10px}
.dp .dp-drop .dp-up{width:1.1rem;height:1.1rem;flex:none}
.dp .dp-drop [data-filename]{font-size:.9rem;font-weight:600}
.dp .dp-drop small{font-size:.72rem}

/* ---- "Send it to" card: no light. The card lifts a little and settles; the new details arrive row by row ---- */
.dp-accounts.is-updated::before{content:none;animation:none}
.dp-accounts.is-updated{animation:dpSettle .9s cubic-bezier(.2,.8,.2,1)}
@keyframes dpSettle{
  0%  {transform:translateY(0) scale(1)}
  35% {transform:translateY(-5px) scale(1.012);box-shadow:0 28px 50px -22px rgba(4,30,22,.95)}
  100%{transform:translateY(0) scale(1)}
}
[data-acct].is-swapped{animation:none}
[data-acct-none].is-swapped{animation:dpRowIn .5s cubic-bezier(.2,.8,.2,1) both}
[data-acct].is-swapped dl>*,[data-acct].is-swapped>p{animation:dpRowIn .55s cubic-bezier(.2,.8,.2,1) both}
[data-acct].is-swapped dl>:nth-child(-n+2){animation-delay:.05s}
[data-acct].is-swapped dl>:nth-child(n+3):nth-child(-n+4){animation-delay:.17s}
[data-acct].is-swapped dl>:nth-child(n+5):nth-child(-n+6){animation-delay:.29s}
[data-acct].is-swapped dl>:nth-child(n+7):nth-child(-n+8){animation-delay:.41s}
@keyframes dpRowIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
html[dir=rtl] [data-acct].is-swapped dl>*,html[dir=rtl] [data-acct].is-swapped>p{animation-name:dpRowInRtl}
@keyframes dpRowInRtl{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .dp-accounts.is-updated,[data-acct].is-swapped dl>*,[data-acct].is-swapped>p,[data-acct-none].is-swapped{animation:none}
}

/* ---- Donate: "Send it to" stays dark green. On a change, a light-green light runs along the INSIDE of its border ---- */
.dp-accounts{transition:none}
.dp .dp-accounts.is-updated::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:3px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--gs-angle),transparent 0 48%,#34d399 70%,#b8ffe0 86%,#34d399 94%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  filter:drop-shadow(0 0 5px rgba(126,224,176,.95));
  animation:gsSpin 1.4s linear 2;
}
/* the card itself does not move or change colour */
.dp-accounts.is-updated{animation:none}
@media (prefers-reduced-motion:reduce){.dp .dp-accounts.is-updated::before{animation:none;opacity:.5}}

/* Ways to give: the confirm card is now the 2nd card, between the payment cards and the story card */
.gs--strip{margin:1.25rem auto 0}

/* Ways to give confirm buttons: no moving border; a steady glow shadow instead */
.gs--two .gs__confirm a::before{content:none;animation:none;display:none}
.gs--two .gs__confirm a{box-shadow:0 0 14px rgba(255,190,31,.55),0 8px 22px -6px rgba(255,190,31,.6);transition:box-shadow .25s ease,transform .25s ease}
.gs--two .gs__confirm a.gs__wa{box-shadow:0 0 14px rgba(37,211,102,.55),0 8px 22px -6px rgba(37,211,102,.6)}
.gs--two .gs__confirm a:hover{box-shadow:0 0 20px rgba(255,190,31,.8),0 10px 26px -6px rgba(255,190,31,.75);transform:translateY(-1px)}
.gs--two .gs__confirm a.gs__wa:hover{box-shadow:0 0 20px rgba(37,211,102,.8),0 10px 26px -6px rgba(37,211,102,.75)}

/* Ways to give confirm buttons: a real drop shadow under the glow, so they look raised; pressed state sinks them */
.gs--two .gs__confirm a{box-shadow:0 0 14px rgba(255,190,31,.5),0 14px 18px -10px rgba(0,0,0,.65),0 6px 10px -4px rgba(0,0,0,.35)}
.gs--two .gs__confirm a.gs__wa{box-shadow:0 0 14px rgba(37,211,102,.5),0 14px 18px -10px rgba(0,0,0,.65),0 6px 10px -4px rgba(0,0,0,.35)}
.gs--two .gs__confirm a:hover{box-shadow:0 0 20px rgba(255,190,31,.75),0 18px 24px -10px rgba(0,0,0,.7),0 8px 12px -4px rgba(0,0,0,.4)}
.gs--two .gs__confirm a.gs__wa:hover{box-shadow:0 0 20px rgba(37,211,102,.75),0 18px 24px -10px rgba(0,0,0,.7),0 8px 12px -4px rgba(0,0,0,.4)}
.gs--two .gs__confirm a:active{transform:translateY(1px);box-shadow:0 0 10px rgba(255,190,31,.45),0 5px 8px -4px rgba(0,0,0,.6)}
.gs--two .gs__confirm a.gs__wa:active{box-shadow:0 0 10px rgba(37,211,102,.45),0 5px 8px -4px rgba(0,0,0,.6)}

/* Confirm buttons: glow first and clearly visible (two soft halos), then a lighter drop shadow underneath */
.gs--two .gs__confirm a{box-shadow:0 0 0 3px rgba(255,190,31,.28),0 0 16px 3px rgba(255,190,31,.75),0 0 38px 8px rgba(255,190,31,.4),0 12px 16px -10px rgba(0,0,0,.5)}
.gs--two .gs__confirm a.gs__wa{box-shadow:0 0 0 3px rgba(37,211,102,.28),0 0 16px 3px rgba(37,211,102,.75),0 0 38px 8px rgba(37,211,102,.4),0 12px 16px -10px rgba(0,0,0,.5)}
.gs--two .gs__confirm a:hover{box-shadow:0 0 0 4px rgba(255,190,31,.35),0 0 22px 5px rgba(255,190,31,.9),0 0 48px 12px rgba(255,190,31,.5),0 16px 20px -10px rgba(0,0,0,.55)}
.gs--two .gs__confirm a.gs__wa:hover{box-shadow:0 0 0 4px rgba(37,211,102,.35),0 0 22px 5px rgba(37,211,102,.9),0 0 48px 12px rgba(37,211,102,.5),0 16px 20px -10px rgba(0,0,0,.55)}
.gs--two .gs__confirm a:active{box-shadow:0 0 0 3px rgba(255,190,31,.3),0 0 12px 2px rgba(255,190,31,.6),0 5px 8px -4px rgba(0,0,0,.55)}
.gs--two .gs__confirm a.gs__wa:active{box-shadow:0 0 0 3px rgba(37,211,102,.3),0 0 12px 2px rgba(37,211,102,.6),0 5px 8px -4px rgba(0,0,0,.55)}

/* Confirm buttons: wide enough for "Confirm your Donation via WhatsApp" on one line (both stay equal width) */
.gs--two .gs__confirm a{width:min(100%,24rem);white-space:nowrap;gap:.5rem;padding-inline:1.1rem}
@media (max-width:420px){.gs--two .gs__confirm a{white-space:normal;line-height:1.25;padding-block:.5rem;text-align:center}}

/* Confirm buttons: glow reduced a little (still clearly visible) */
.gs--two .gs__confirm a{box-shadow:0 0 0 2px rgba(255,190,31,.2),0 0 13px 1px rgba(255,190,31,.55),0 0 28px 4px rgba(255,190,31,.26),0 12px 16px -10px rgba(0,0,0,.5)}
.gs--two .gs__confirm a.gs__wa{box-shadow:0 0 0 2px rgba(37,211,102,.2),0 0 13px 1px rgba(37,211,102,.55),0 0 28px 4px rgba(37,211,102,.26),0 12px 16px -10px rgba(0,0,0,.5)}
.gs--two .gs__confirm a:hover{box-shadow:0 0 0 3px rgba(255,190,31,.26),0 0 18px 3px rgba(255,190,31,.7),0 0 38px 8px rgba(255,190,31,.34),0 16px 20px -10px rgba(0,0,0,.55)}
.gs--two .gs__confirm a.gs__wa:hover{box-shadow:0 0 0 3px rgba(37,211,102,.26),0 0 18px 3px rgba(37,211,102,.7),0 0 38px 8px rgba(37,211,102,.34),0 16px 20px -10px rgba(0,0,0,.55)}

/* Confirm buttons: the ripple rings (moved here from the Bank Transfer / Mobile Wallet titles) pulse outward from each button */
.gs--two .gs__confirm a{--rip:rgba(255,190,31,.7);--rip0:rgba(255,190,31,0)}
.gs--two .gs__confirm a.gs__wa{--rip:rgba(37,211,102,.7);--rip0:rgba(37,211,102,0)}
.gs--two .gs__confirm a::before,.gs--two .gs__confirm a::after{
  content:"";display:block;position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  animation:gsRing 2.6s ease-out infinite;
}
.gs--two .gs__confirm a::after{animation-delay:1.3s}
@keyframes gsRing{
  0%  {box-shadow:0 0 0 0 var(--rip)}
  80% {box-shadow:0 0 0 18px var(--rip0)}
  100%{box-shadow:0 0 0 18px var(--rip0)}
}
@media (prefers-reduced-motion:reduce){.gs--two .gs__confirm a::before,.gs--two .gs__confirm a::after{animation:none;box-shadow:none}}

/* Confirm buttons: no light-effect border. The ripple rings and the thin edge ring are removed; soft glow + drop shadow stay. */
.gs--two .gs__confirm a::before,.gs--two .gs__confirm a::after{content:none;display:none;animation:none;box-shadow:none}
.gs--two .gs__confirm a{box-shadow:0 0 13px 1px rgba(255,190,31,.5),0 0 28px 4px rgba(255,190,31,.24),0 12px 16px -10px rgba(0,0,0,.5)}
.gs--two .gs__confirm a.gs__wa{box-shadow:0 0 13px 1px rgba(37,211,102,.5),0 0 28px 4px rgba(37,211,102,.24),0 12px 16px -10px rgba(0,0,0,.5)}
.gs--two .gs__confirm a:hover{box-shadow:0 0 18px 3px rgba(255,190,31,.65),0 0 38px 8px rgba(255,190,31,.3),0 16px 20px -10px rgba(0,0,0,.55)}
.gs--two .gs__confirm a.gs__wa:hover{box-shadow:0 0 18px 3px rgba(37,211,102,.65),0 0 38px 8px rgba(37,211,102,.3),0 16px 20px -10px rgba(0,0,0,.55)}
.gs--two .gs__confirm a:active{box-shadow:0 0 10px 1px rgba(255,190,31,.5),0 5px 8px -4px rgba(0,0,0,.55)}
.gs--two .gs__confirm a.gs__wa:active{box-shadow:0 0 10px 1px rgba(37,211,102,.5),0 5px 8px -4px rgba(0,0,0,.55)}

/* Confirm buttons: the light border is back, but thin. A 1px light edge, plus slim ripples that drift outward ~10px and fade. */
.gs--two .gs__confirm a{--rip:rgba(255,200,60,.55);--rip0:rgba(255,200,60,0)}
.gs--two .gs__confirm a.gs__wa{--rip:rgba(70,230,130,.55);--rip0:rgba(70,230,130,0)}
.gs--two .gs__confirm a::before,.gs--two .gs__confirm a::after{
  content:"";display:block;position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  box-shadow:0 0 0 0 var(--rip);animation:gsRingThin 2.8s ease-out infinite;
}
.gs--two .gs__confirm a::after{animation-delay:1.4s}
@keyframes gsRingThin{
  0%  {box-shadow:0 0 0 0 var(--rip)}
  70% {box-shadow:0 0 0 10px var(--rip0)}
  100%{box-shadow:0 0 0 10px var(--rip0)}
}
.gs--two .gs__confirm a{box-shadow:0 0 0 1px rgba(255,235,170,.55),0 0 13px 1px rgba(255,190,31,.5),0 0 28px 4px rgba(255,190,31,.24),0 12px 16px -10px rgba(0,0,0,.5)}
.gs--two .gs__confirm a.gs__wa{box-shadow:0 0 0 1px rgba(190,255,215,.6),0 0 13px 1px rgba(37,211,102,.5),0 0 28px 4px rgba(37,211,102,.24),0 12px 16px -10px rgba(0,0,0,.5)}
.gs--two .gs__confirm a:hover{box-shadow:0 0 0 1px rgba(255,235,170,.8),0 0 18px 3px rgba(255,190,31,.65),0 0 38px 8px rgba(255,190,31,.3),0 16px 20px -10px rgba(0,0,0,.55)}
.gs--two .gs__confirm a.gs__wa:hover{box-shadow:0 0 0 1px rgba(190,255,215,.85),0 0 18px 3px rgba(37,211,102,.65),0 0 38px 8px rgba(37,211,102,.3),0 16px 20px -10px rgba(0,0,0,.55)}
@media (prefers-reduced-motion:reduce){.gs--two .gs__confirm a::before,.gs--two .gs__confirm a::after{animation:none;box-shadow:none}}

/* Confirm buttons: ripples reach a little further (15px), the steady edge line is finer (half a pixel) */
.gs--two .gs__confirm a{--rip:rgba(255,200,60,.6)}
.gs--two .gs__confirm a.gs__wa{--rip:rgba(70,230,130,.6)}
@keyframes gsRingThin{
  0%  {box-shadow:0 0 0 0 var(--rip)}
  72% {box-shadow:0 0 0 15px var(--rip0)}
  100%{box-shadow:0 0 0 15px var(--rip0)}
}
.gs--two .gs__confirm a{box-shadow:0 0 0 .5px rgba(255,235,170,.5),0 0 13px 1px rgba(255,190,31,.5),0 0 28px 4px rgba(255,190,31,.24),0 12px 16px -10px rgba(0,0,0,.5)}
.gs--two .gs__confirm a.gs__wa{box-shadow:0 0 0 .5px rgba(190,255,215,.55),0 0 13px 1px rgba(37,211,102,.5),0 0 28px 4px rgba(37,211,102,.24),0 12px 16px -10px rgba(0,0,0,.5)}
.gs--two .gs__confirm a:hover{box-shadow:0 0 0 .5px rgba(255,235,170,.75),0 0 18px 3px rgba(255,190,31,.65),0 0 38px 8px rgba(255,190,31,.3),0 16px 20px -10px rgba(0,0,0,.55)}
.gs--two .gs__confirm a.gs__wa:hover{box-shadow:0 0 0 .5px rgba(190,255,215,.8),0 0 18px 3px rgba(37,211,102,.65),0 0 38px 8px rgba(37,211,102,.3),0 16px 20px -10px rgba(0,0,0,.55)}

/* Pledge confirmation: the account details for the chosen method, shown right on the card */
.dp-sendto{margin:.9rem auto 0;max-width:30rem;text-align:start;padding:.8rem 1rem .9rem;border-radius:14px;background:#0a3d2e;color:#fff;border:1px solid rgba(126,224,176,.18)}
.dp-sendto h3{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:0 0 .5rem;font-size:1rem;color:#fff}
.dp-sendto .dp-badge{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);font-size:.74rem}
.dp-sendto dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem .9rem;margin:0;font-size:.9rem;align-items:center}
.dp-sendto dt{color:#7ee0b0}
.dp-sendto dd{margin:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-width:0;font-weight:600;color:#fff}
.dp-sendto dd span{min-width:0;overflow-wrap:anywhere}
.dp-sendto .mono{color:#ffbe1f;letter-spacing:.02em}
.dp-sendto .dn-copy{flex:none;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:99px;padding:.05rem .6rem;font-size:.74rem;cursor:pointer}
.dp-sendto .dp-quiet{margin:0;color:#7ee0b0;font-size:.88rem}

/* Pledge confirmation: "Every rupee is traceable" is the last line of the card, on its own row under the buttons */
.dp-thanks .dn-trace--thanks{display:flex;width:fit-content;margin:.9rem auto 0}
.dp-thanks .dn-trace--thanks{flex:0 0 100%;width:auto;max-width:100%;justify-content:center;margin:.7rem 0 0}

/* ---- Full-width layout: no framed page, wider content and header ---- */
:root{--page-gap:0px;--wrap-max:1480px;--gutter:clamp(1rem,3vw,3rem)}
body{width:100%;box-shadow:none}
.header .wrap,.announce .wrap{width:calc(100% - 2*var(--gutter));max-width:1560px}
/* One centred column: header, announcement bar and page content share the same width and edges */
.header .wrap,.announce .wrap{width:min(var(--wrap-max),100% - 2*var(--gutter));max-width:none;margin-inline:auto}
.herofull__foot.wrap,.herofull__foot>.wrap{margin-inline:auto}

/* Comfortable, equal side padding: same gutter left and right everywhere */
:root{--wrap-max:1400px;--gutter:clamp(1.25rem,5vw,5rem)}

/* Thinner gold line under the hero */
.herofull,.hero--islamic{border-bottom-width:1px}