/* ============================================================
   Widget styles — WhatsApp, Live chat, Cookie banner, Flash
   ============================================================ */

/* Flash messages */
.flash{
  padding:.85rem 1.1rem; border-radius:var(--radius-sm);
  margin-bottom:.7rem; font-size:var(--fs-sm);
  border:1px solid var(--c-line);
  background:#fff;
}
.flash--success{ background:#e8f7f0; border-color:#bbe9d2; color:#0c6b4d }
.flash--error,.flash--danger{ background:#fdecea; border-color:#f5c2c0; color:#8a1c14 }
.flash--info{ background:var(--c-blue-soft); border-color:#cfe1f4; color:var(--c-blue-deep) }

/* Form input baseline used by all forms */
.form-input{
  width:100%; padding:.85rem 1rem;
  border:1px solid var(--c-line); border-radius:var(--radius-sm);
  background:#fff; color:var(--c-ink); font:inherit;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.form-input:focus{
  outline:none; border-color:var(--c-blue);
  box-shadow:0 0 0 3px rgba(26,95,180,.15);
}
.form-row{ display:grid; gap:1rem; grid-template-columns:1fr 1fr; margin-bottom:1rem }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr } }
.form-stack{ display:grid; gap:1rem }

/* Cards / shared chrome */
.tile{
  background:#fff; border:1px solid var(--c-line); border-radius:var(--radius);
  padding:1.5rem; box-shadow:var(--shadow-sm);
}
.tile h4{ margin-bottom:.4rem }

/* WhatsApp floating button */
.wa-btn{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:60;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1rem; border-radius:var(--radius-pill);
  background:#25d366; color:#fff; font-weight:600; font-size:var(--fs-sm);
  box-shadow:0 12px 30px rgba(37,211,102,.45);
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.wa-btn:hover{ transform:translateY(-2px); box-shadow:0 18px 36px rgba(37,211,102,.55) }
.wa-btn__label{ display:none }
@media (min-width:640px){ .wa-btn__label{ display:inline } }

/* Live chat — toggle with pulse, online dot, unread badge */
.chat-toggle{
  position:fixed; left:1.25rem; bottom:1.25rem; z-index:60;
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.75rem 1rem .75rem .85rem; border-radius:var(--radius-pill);
  background:var(--g-deep); color:#fff; font-weight:600; font-size:var(--fs-sm);
  box-shadow:0 14px 32px rgba(14,58,115,.45);
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  isolation:isolate;
}
.chat-toggle:hover{ transform:translateY(-2px); box-shadow:0 18px 38px rgba(14,58,115,.55) }
.chat-toggle__icon{ display:inline-flex; align-items:center }
.chat-toggle__label{ display:inline }
.chat-toggle__pulse{
  position:absolute; inset:0; border-radius:var(--radius-pill);
  z-index:-1; background:var(--c-blue);
  animation:chat-pulse 2.6s ease-out infinite;
}
@keyframes chat-pulse{
  0%   { opacity:.55; transform:scale(1) }
  70%  { opacity:0;    transform:scale(1.35) }
  100% { opacity:0;    transform:scale(1.35) }
}
.chat-toggle__dot{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:#22c55e; border:2px solid #fff;
  box-shadow:0 0 0 0 rgba(34,197,94,.6);
  animation:chat-online 2s ease-out infinite;
}
@keyframes chat-online{
  0%   { box-shadow:0 0 0 0 rgba(34,197,94,.55) }
  70%  { box-shadow:0 0 0 8px rgba(34,197,94,0) }
  100% { box-shadow:0 0 0 0 rgba(34,197,94,0) }
}
.chat-toggle__badge{
  position:absolute; top:-6px; right:-6px;
  min-width:22px; height:22px; padding:0 6px;
  border-radius:11px; background:var(--c-gold); color:var(--c-blue-deep);
  font-size:.72rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center;
  border:2px solid #fff; box-shadow:0 4px 10px rgba(245,181,30,.45);
}
.chat-toggle__badge[hidden]{ display:none }
.chat-toggle.is-open .chat-toggle__pulse{ display:none }

/* Teaser bubble that floats next to the toggle */
.chat-teaser{
  position:fixed; left:1.25rem; bottom:5.5rem; z-index:59;
  width:min(320px, calc(100vw - 2.5rem));
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.7rem;
  padding:.85rem 1rem .85rem .85rem;
  background:#fff; border:1px solid var(--c-line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); font-size:var(--fs-sm);
  animation:teaser-pop .45s cubic-bezier(.22,.61,.36,1);
}
.chat-teaser[hidden]{ display:none }
.chat-teaser::after{
  content:""; position:absolute; left:1.6rem; bottom:-8px;
  width:14px; height:14px; background:#fff;
  border-right:1px solid var(--c-line); border-bottom:1px solid var(--c-line);
  transform:rotate(45deg);
}
@keyframes teaser-pop{
  from{ opacity:0; transform:translateY(8px) }
  to  { opacity:1; transform:translateY(0) }
}
.chat-teaser.is-leaving{ animation:teaser-leave .25s ease-out forwards }
@keyframes teaser-leave{
  to{ opacity:0; transform:translateY(8px) scale(.98) }
}
.chat-teaser__avatar{
  width:34px; height:34px; border-radius:50%;
  background:var(--g-deep); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:700; font-size:.95rem;
}
.chat-teaser__body{ display:flex; flex-direction:column; gap:.15rem; line-height:1.4 }
.chat-teaser__body strong{ color:var(--c-blue-deep) }
.chat-teaser__body span{ font-size:.78rem; color:var(--c-ink-soft) }
.chat-teaser__close{
  position:absolute; top:6px; right:8px;
  width:22px; height:22px; border-radius:50%;
  color:var(--c-muted); font-size:1rem; line-height:1;
}
.chat-teaser__close:hover{ background:var(--c-blue-mist); color:var(--c-blue-deep) }
.chat-teaser__cta{
  padding:.4rem .75rem; border-radius:var(--radius-pill);
  background:var(--c-blue); color:#fff; font-size:.78rem; font-weight:600;
  white-space:nowrap;
}
.chat-teaser__cta:hover{ background:var(--c-blue-deep) }
.chat-panel{
  position:fixed; left:1.25rem; bottom:5rem; z-index:60;
  width:min(360px, calc(100vw - 2rem));
  background:#fff; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-lg); border:1px solid var(--c-line);
  display:flex; flex-direction:column; max-height:70vh;
}
.chat-panel[hidden]{ display:none }
.chat-panel__head{
  padding:.9rem 1rem; background:var(--g-deep); color:#fff;
  display:flex; align-items:center; justify-content:space-between;
}
.chat-panel__head-meta{ display:flex; flex-direction:column }
.chat-panel__head small{ display:flex; align-items:center; gap:.4rem; opacity:.85; font-size:.75rem; margin-top:.15rem }
.chat-panel__online-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#22c55e; box-shadow:0 0 0 2px rgba(34,197,94,.25);
}
.chat-panel__close{
  background:rgba(255,255,255,.15); color:#fff; width:28px; height:28px;
  border-radius:50%; font-size:1.2rem; line-height:1;
}
.chat-panel__intake{ padding:1rem; display:grid; gap:.6rem }
.chat-panel__intake p{ font-size:var(--fs-sm); color:var(--c-ink-soft); margin-bottom:.2rem }

/* Always-visible welcome bubble (hidden once a real message arrives) */
.chat-welcome{
  display:flex; gap:.6rem; align-items:flex-start;
  padding:.85rem 1rem; background:var(--c-blue-mist);
  border-bottom:1px solid var(--c-line);
}
.chat-welcome[hidden]{ display:none }
.chat-welcome__avatar{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:var(--c-gold); color:var(--c-blue-deep);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:700; font-size:.85rem;
}
.chat-welcome__body{ display:flex; flex-direction:column; gap:.15rem; line-height:1.45; font-size:var(--fs-sm) }
.chat-welcome__body strong{ color:var(--c-blue-deep) }
.chat-welcome__body span{ color:var(--c-ink-soft); font-size:.82rem }

/* Inline name field on top of the send row */
.chat-panel__name{
  width:100%; padding:.45rem .7rem;
  border:1px solid var(--c-line); border-radius:var(--radius-sm);
  background:#fff; color:var(--c-ink); font:inherit; font-size:.78rem;
  margin-bottom:.4rem;
}
.chat-panel__name:focus{
  outline:none; border-color:var(--c-blue);
  box-shadow:0 0 0 2px rgba(26,95,180,.15);
}
.chat-panel__send{ display:flex; gap:.4rem }
.chat-panel__send .form-input{ flex:1 }
.chat-panel__messages{
  flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.55rem;
  background:var(--c-blue-mist);
}
.chat-msg{
  max-width:85%; padding:.55rem .8rem; border-radius:14px;
  font-size:var(--fs-sm); line-height:1.45;
  position:relative; animation:msg-in .25s ease-out;
}
@keyframes msg-in{ from{ opacity:0; transform:translateY(4px) } to{ opacity:1; transform:translateY(0) } }
.chat-msg--visitor{ align-self:flex-end; background:var(--c-blue); color:#fff; border-bottom-right-radius:4px }
.chat-msg--staff,.chat-msg--bot{
  align-self:flex-start; background:#fff; color:var(--c-ink);
  border:1px solid var(--c-line); border-bottom-left-radius:4px;
  padding-left:.8rem;
}
/* Avatar pip */
.chat-msg::before{
  content:attr(data-avatar); position:absolute; bottom:-2px;
  width:20px; height:20px; border-radius:50%;
  font-size:.6rem; font-weight:700; color:#fff;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--c-blue-mist);
}
.chat-msg--visitor::before{ right:-12px; background:var(--c-blue-deep) }
.chat-msg--bot::before    { left:-12px; background:var(--c-gold); color:var(--c-blue-deep) }
.chat-msg--staff::before  { left:-12px; background:#0c6b4d }
.chat-msg__meta{ display:block; font-size:.65rem; opacity:.6; margin-top:.2rem }

/* Typing indicator (3 bouncing dots) */
.chat-typing{
  padding:.4rem 1rem .6rem; background:var(--c-blue-mist);
  display:flex; align-items:center; gap:.5rem;
}
.chat-typing[hidden]{ display:none }
.chat-typing__avatar{
  width:22px; height:22px; border-radius:50%;
  background:var(--c-gold); color:var(--c-blue-deep);
  font-size:.62rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.chat-typing__dots{
  background:#fff; border:1px solid var(--c-line);
  border-radius:14px; padding:.5rem .75rem;
  display:inline-flex; gap:.25rem;
}
.chat-typing__dots span{
  width:6px; height:6px; border-radius:50%;
  background:var(--c-muted); display:inline-block;
  animation:typing 1.2s ease-in-out infinite;
}
.chat-typing__dots span:nth-child(2){ animation-delay:.15s }
.chat-typing__dots span:nth-child(3){ animation-delay:.3s }
@keyframes typing{
  0%, 60%, 100% { transform:translateY(0); opacity:.4 }
  30%           { transform:translateY(-4px); opacity:1 }
}
.chat-panel__form{
  display:flex; flex-direction:column; padding:.6rem;
  border-top:1px solid var(--c-line); background:#fff;
}
.chat-panel__form .form-input{ padding:.6rem .8rem }
.chat-panel__form .btn{ display:inline-flex; align-items:center; justify-content:center; padding:.55rem .8rem }

/* ---- Annual report cards ---- */
.report-grid{
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}
.report-card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--c-line); border-radius:var(--radius);
  overflow:hidden;
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.report-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg) }
.report-card__cover{
  position:relative; aspect-ratio:3/4; overflow:hidden;
  background:linear-gradient(160deg, var(--c-blue-deep) 0%, var(--c-blue) 100%);
}
.report-card__cover img{
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-slow) var(--ease);
}
.report-card:hover .report-card__cover img{ transform:scale(1.04) }
.report-card__cover-fallback{
  width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; color:#fff; gap:.5rem;
}
.report-card__year{
  font-family:var(--f-display); font-weight:700; font-size:4rem;
  color:var(--c-gold); font-variant-numeric:tabular-nums; line-height:1;
}
.report-card__brand{
  font-family:var(--f-display); font-weight:600; font-size:1.1rem;
  letter-spacing:.18em; opacity:.85;
}
.report-card__year-chip{
  position:absolute; top:1rem; right:1rem;
  padding:.3rem .7rem; border-radius:var(--radius-pill);
  background:var(--c-gold); color:var(--c-blue-deep);
  font-size:.75rem; font-weight:700; letter-spacing:.05em;
  font-variant-numeric:tabular-nums;
}
.report-card__body{ padding:1.4rem 1.4rem 1.2rem; display:flex; flex-direction:column; flex:1; gap:.7rem }
.report-card__body h3{ color:var(--c-blue-deep); font-size:1.2rem; line-height:1.3 }
.report-card__body > p{ color:var(--c-ink-soft); font-size:var(--fs-sm); line-height:1.6 }
.report-card__highlights{
  list-style:none; padding:0; margin:.2rem 0 .6rem;
  display:flex; flex-direction:column; gap:.35rem;
}
.report-card__highlights li{
  display:flex; gap:.4rem; font-size:.82rem; color:var(--c-ink-soft);
}
.report-card__highlights svg{ color:var(--c-success); flex-shrink:0; margin-top:3px }
.report-card__foot{
  margin-top:auto; display:flex; flex-direction:column; gap:.45rem;
  padding-top:1rem; border-top:1px solid var(--c-line);
}
.report-card__foot .btn{ display:inline-flex; align-items:center; gap:.4rem; align-self:flex-start }
.report-card__date{ font-size:.72rem; color:var(--c-muted) }
.report-card__pending{
  display:inline-block; padding:.5rem .75rem; border-radius:var(--radius-sm);
  background:var(--c-blue-mist); color:var(--c-ink-soft); font-size:.78rem;
}
.report-card__pending a{ color:var(--c-blue); text-decoration:underline }
.empty-state{
  padding:3rem 1rem; text-align:center; color:var(--c-ink-soft);
  border:2px dashed var(--c-line); border-radius:var(--radius);
}

/* Cookie banner — must sit ABOVE floating widgets (z>60) */
.cookie-banner{
  position:fixed; left:50%; bottom:1rem; transform:translateX(-50%); z-index:90;
  width:min(760px, calc(100vw - 2rem));
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.1rem;
  padding:1rem 1.25rem; background:#fff; border:1px solid var(--c-line);
  border-radius:var(--radius); box-shadow:var(--shadow-lg);
  font-size:var(--fs-sm);
}
/* When the banner is up, dim the floating widgets so they don't compete */
body:has(.cookie-banner:not([hidden])) .wa-btn,
body:has(.cookie-banner:not([hidden])) .chat-toggle{ opacity:.35; pointer-events:none }
.cookie-banner__icon{
  width:44px; height:44px; border-radius:50%;
  background:var(--c-blue-soft); color:var(--c-blue-deep);
  display:flex; align-items:center; justify-content:center;
}
.cookie-banner__copy strong{ display:block; color:var(--c-blue-deep); margin-bottom:.15rem }
.cookie-banner__copy p{ margin:0; color:var(--c-ink-soft); font-size:.85rem; line-height:1.5 }
.cookie-banner__copy a{ color:var(--c-blue); text-decoration:underline }
.cookie-banner__actions{ display:flex; gap:.5rem }
.cookie-banner.is-leaving{ opacity:0; transform:translate(-50%,12px); transition:opacity .25s, transform .25s }
@media (max-width:640px){
  .cookie-banner{ grid-template-columns:auto 1fr; }
  .cookie-banner__actions{ grid-column:1 / -1; justify-content:flex-end }
}

/* Chat quick actions */
.chat-panel__quick{
  padding:.7rem .8rem .4rem;
  background:#fff; border-bottom:1px solid var(--c-line);
}
.chat-panel__quick-label{
  display:block; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.12em; color:var(--c-muted); margin-bottom:.45rem;
}
.chat-quick-grid{ display:flex; flex-wrap:wrap; gap:.35rem }
.chat-quick{
  padding:.4rem .7rem; border-radius:var(--radius-pill);
  background:var(--c-blue-soft); color:var(--c-blue-deep);
  border:1px solid #cfe1f4; font-size:.78rem; font-weight:500;
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.chat-quick:hover{ background:var(--c-blue); color:#fff; transform:translateY(-1px) }
.chat-msg a{ color:var(--c-gold); text-decoration:underline; font-weight:600 }
.chat-msg--visitor a{ color:#fff }

/* Donation payment cards (legacy — pre-redesign) */
.pay__num{ font-size:1.1rem; font-weight:700; color:var(--c-blue-deep); margin:.3rem 0; letter-spacing:.02em }
.pay__note{ font-size:.78rem; color:var(--c-muted); margin-top:.2rem }

/* =========================================================
   Give / Donate — sleek redesign
   ========================================================= */

/* Money figures — same font, tabular numbers, deep blue, slightly heavier */
.money{
  font-family:var(--f-display);
  font-variant-numeric:tabular-nums;
  font-weight:700;
  color:var(--c-blue-deep);
  letter-spacing:-.01em;
}

/* ---- Hero ---- */
.give-hero{ position:relative; padding:7rem 0 5rem; color:#fff; overflow:hidden; isolation:isolate }
.give-hero__bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:saturate(.9) brightness(.55); z-index:-2;
}
.give-hero__veil{
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(14,58,115,.92) 0%, rgba(26,95,180,.78) 60%, rgba(8,35,71,.7) 100%);
  z-index:-1;
}
.give-hero__inner{ max-width:780px }
.give-hero h1{ color:#fff; margin:.5rem 0 1rem }
.give-hero__lead{ color:rgba(255,255,255,.86); font-size:var(--fs-md); margin-bottom:1.5rem; max-width:640px }
.give-hero__trust{ display:flex; gap:1rem; flex-wrap:wrap; margin:1.5rem 0 2rem }
.trust-chip{
  display:flex; flex-direction:column; padding:.6rem 1rem;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius); backdrop-filter:blur(8px);
}
.trust-chip strong{ font-family:var(--f-display); font-size:1.3rem; color:var(--c-gold); font-variant-numeric:tabular-nums }
.trust-chip span{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.7) }
.give-hero__cta{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.5rem }

/* ---- Impact grid ---- */
.impact-grid{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-top:2rem }
.impact{
  background:#fff; border:1px solid var(--c-line); border-radius:var(--radius);
  padding:1.5rem 1.4rem; transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.impact:hover{ transform:translateY(-3px); box-shadow:var(--shadow) }
.impact__icon{
  width:48px; height:48px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1rem;
}
.impact__icon svg{ width:24px; height:24px }
.impact h4{ margin-bottom:.4rem; color:var(--c-blue-deep) }
.impact p{ font-size:var(--fs-sm); color:var(--c-ink-soft); line-height:1.6 }

/* ---- Give tabs ---- */
.give-tabs{
  display:inline-flex; gap:.25rem; margin:1.5rem 0 2rem;
  background:var(--c-blue-mist); padding:.3rem; border-radius:var(--radius-pill);
}
.give-tabs__btn{
  padding:.55rem 1.2rem; border-radius:var(--radius-pill);
  font-size:var(--fs-sm); font-weight:600; color:var(--c-ink-soft);
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.give-tabs__btn.is-active{ background:#fff; color:var(--c-blue-deep); box-shadow:var(--shadow-sm) }

/* ---- Donation tiers ---- */
.give-tiers{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
}
.give-tier{
  background:#fff; border:1px solid var(--c-line); border-radius:var(--radius);
  padding:1.6rem 1.3rem; text-align:center;
  transition:transform var(--t) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
  display:flex; flex-direction:column; gap:.7rem;
}
.give-tier:hover{ transform:translateY(-4px); border-color:var(--c-blue); box-shadow:var(--shadow) }
.give-tier__amt{ font-size:1.65rem; line-height:1.1 }
.give-tier__amt small{ font-size:.75rem; font-weight:500; color:var(--c-muted); letter-spacing:0; margin-left:.2rem }
.give-tier p{ font-size:var(--fs-sm); color:var(--c-ink-soft); flex:1; margin:0 }
.give-tier__pick{
  display:inline-block; margin-top:auto;
  padding:.55rem 1rem; border-radius:var(--radius-pill);
  background:var(--c-blue-soft); color:var(--c-blue-deep);
  font-size:var(--fs-sm); font-weight:600;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.give-tier__pick:hover{ background:var(--c-blue); color:#fff }
.give-tier--custom{ background:linear-gradient(160deg, #fffaf0 0%, #fff 70%); border-color:#f3deb7 }
.give-tier--custom .give-tier__amt{ color:var(--c-gold-deep) }

/* ---- Payment method cards ---- */
.pay-cards{
  display:grid; gap:1.25rem; margin-bottom:1.5rem;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}
.pay-card{
  background:#fff; border:1px solid var(--c-line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.pay-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow) }
.pay-card__head{
  display:flex; align-items:center; gap:.9rem;
  padding:1rem 1.2rem; border-bottom:1px solid var(--c-line);
}
.pay-card__logo{
  width:54px; height:54px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:800; font-size:.78rem; color:#fff;
  letter-spacing:.02em; text-align:center; line-height:1.1;
}
.pay-card--mtn .pay-card__logo{ background:#ffcc00; color:#000 }
.pay-card--airtel .pay-card__logo{ background:#e60000 }
.pay-card--bank .pay-card__logo{ background:var(--c-blue-deep); font-size:.7rem }
.pay-card--online .pay-card__logo{ background:#0c6b4d; font-size:1.4rem }
.pay-card__title{ font-family:var(--f-display); font-weight:600; color:var(--c-blue-deep); font-size:1.05rem }
.pay-card__sub{ font-size:.75rem; color:var(--c-muted); text-transform:uppercase; letter-spacing:.08em }
.pay-card__body{ padding:1.1rem 1.2rem; flex:1; display:flex; flex-direction:column; gap:.5rem }
.pay-card__label{ font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--c-muted) }
.pay-card__num{
  font-size:1.35rem; padding:.4rem 0;
  display:flex; align-items:center; justify-content:space-between; gap:.4rem;
  cursor:pointer;
}
.pay-card__note{ font-size:.78rem; color:var(--c-ink-soft); margin-top:.4rem; line-height:1.5 }
.pay-card__note strong{ color:var(--c-blue-deep) }
.pay-card__split{ display:grid; gap:.7rem }

.copy-btn{
  width:32px; height:32px; border-radius:8px;
  background:var(--c-blue-soft); color:var(--c-blue);
  font-size:1rem;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.copy-btn:hover{ background:var(--c-blue); color:#fff }
.copy-btn.is-copied{ background:#14a37f; color:#fff; transform:scale(1.1) }

.pay-instruction{
  display:flex; align-items:flex-start; gap:.7rem;
  margin-top:1.5rem; padding:1rem 1.25rem;
  background:#fff; border:1px solid var(--c-gold);
  border-left-width:4px; border-radius:var(--radius-sm);
  color:var(--c-ink); font-size:var(--fs-sm); line-height:1.55;
}
.pay-instruction svg{ color:var(--c-gold-deep); flex-shrink:0; margin-top:2px }

/* ---- Pledge split ---- */
.pledge-split{ display:grid; gap:3rem; grid-template-columns:1.2fr 1fr; align-items:start }
@media (max-width:880px){ .pledge-split{ grid-template-columns:1fr } }
.why-give-body{ margin:1rem 0 1.5rem; color:var(--c-ink-soft) }
.why-give-body p{ margin-bottom:.7rem }

.trust-row{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin-top:1.5rem }
.trust-item{
  padding:1rem 1.1rem; background:var(--c-blue-mist); border-radius:var(--radius-sm);
  border-left:3px solid var(--c-blue);
}
.trust-item strong{ display:block; color:var(--c-blue-deep); font-family:var(--f-display); margin-bottom:.2rem }
.trust-item span{ font-size:.82rem; color:var(--c-ink-soft); line-height:1.5 }

.pledge-card{
  background:#fff; border:1px solid var(--c-line); border-radius:var(--radius-lg);
  padding:2rem 1.8rem; box-shadow:var(--shadow);
  position:sticky; top:6rem;
}
@media (max-width:880px){ .pledge-card{ position:static } }
.pledge-card h3{ color:var(--c-blue-deep); margin-bottom:1.2rem }
.check-row{ display:flex; align-items:center; gap:.55rem; font-size:var(--fs-sm); color:var(--c-ink-soft) }
.form-foot{ margin-top:.5rem; font-size:.75rem; color:var(--c-muted); text-align:center }

/* ---- Membership ---- */
.member-grid{
  display:grid; gap:1.25rem; margin-top:1.5rem;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
}
.member-tier{
  position:relative;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius); padding:1.7rem 1.4rem;
  color:#fff; backdrop-filter:blur(8px);
  display:flex; flex-direction:column; gap:.55rem;
  transition:transform var(--t) var(--ease), background var(--t-fast) var(--ease);
}
.member-tier:hover{ transform:translateY(-3px); background:rgba(255,255,255,.1) }
.member-tier--featured{
  background:#fff; color:var(--c-ink); border-color:var(--c-gold);
  box-shadow:0 16px 40px rgba(0,0,0,.18); transform:translateY(-6px);
}
.member-tier--featured h4{ color:var(--c-blue-deep) }
.member-tier--featured .member-tier__amt{ color:var(--c-blue-deep) }
.member-tier--featured .member-tier__desc,
.member-tier--featured .member-tier__period{ color:var(--c-ink-soft) }
.member-tier__flag{
  position:absolute; top:-12px; right:1.2rem;
  background:var(--c-gold); color:var(--c-blue-deep);
  padding:.25rem .7rem; border-radius:var(--radius-pill);
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
}
.member-tier h4{ color:#fff; margin-bottom:.3rem }
.member-tier__amt{
  font-family:var(--f-display); font-weight:700; font-size:2rem;
  color:var(--c-gold); font-variant-numeric:tabular-nums;
}
.member-tier__amt small{ font-size:.85rem; font-weight:500; color:rgba(255,255,255,.6); margin-right:.2rem }
.member-tier__amt span{ font-size:1.5rem }
.member-tier__period{ font-size:.78rem; color:rgba(255,255,255,.65); text-transform:uppercase; letter-spacing:.08em }
.member-tier__desc{ font-size:var(--fs-sm); color:rgba(255,255,255,.78); margin-top:.4rem }
.member-tier__benefits{ list-style:none; padding:0; margin:.5rem 0 0; display:flex; flex-direction:column; gap:.4rem }
.member-tier__benefits li{
  display:flex; align-items:center; gap:.4rem; font-size:.8rem;
  color:rgba(255,255,255,.85);
}
.member-tier--featured .member-tier__benefits li{ color:var(--c-ink-soft) }
.member-tier__benefits li svg{ color:var(--c-gold); flex-shrink:0 }
.member-tier .btn{ margin-top:auto; align-self:flex-start }

.member-apply{
  max-width:640px; margin:3rem auto 0;
  background:rgba(255,255,255,.06); padding:2rem;
  border-radius:var(--radius); border:1px solid rgba(255,255,255,.12);
}
.member-apply h3{ color:#fff; margin-bottom:1.2rem }
.member-apply .form-input{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:#fff;
}
.member-apply .form-input::placeholder{ color:rgba(255,255,255,.5) }
.member-apply .form-input:focus{ background:#fff; color:var(--c-ink) }

/* Footer columns — vertical link stacks */
.footer__col{ display:flex; flex-direction:column }
.footer__col ul{ display:flex; flex-direction:column; gap:.55rem; list-style:none; padding:0; margin:0 }
.footer__col ul li{ font-size:.88rem; color:rgba(255,255,255,.7); line-height:1.4 }
.footer__col ul li a{ display:inline-block }

/* Newsletter form (footer) */
.newsletter-form{ display:flex; gap:.4rem; margin-top:.6rem }
.newsletter-form .form-input{ padding:.65rem .8rem; background:rgba(255,255,255,.95); color:var(--c-ink) }

/* Generic page header */
.page-header{
  position:relative; padding:6rem 0 4rem; color:#fff; overflow:hidden;
  background:var(--g-deep);
}
.page-header__bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:.35; mix-blend-mode:luminosity;
}
.page-header__inner{ position:relative; z-index:1; max-width:780px }
.page-header h1{ color:#fff; margin-bottom:1rem }
.page-header p{ color:rgba(255,255,255,.85); font-size:var(--fs-md) }

/* Section helpers */
.split{
  display:grid; gap:3rem; grid-template-columns:1.1fr 1fr; align-items:start;
}
@media (max-width:880px){ .split{ grid-template-columns:1fr } }

.card-grid{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }

/* Executive members */
.exec-grid{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
.exec{ background:#fff; border:1px solid var(--c-line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm) }
.exec__photo{ height:240px; background:var(--c-blue-soft) center/cover; }
.exec__body{ padding:1rem }
.exec__name{ font-weight:600 }
.exec__role{ color:var(--c-blue); font-size:var(--fs-sm) }

/* Chapter table */
.chapter-list{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.chapter{ background:#fff; border:1px solid var(--c-line); border-radius:var(--radius); padding:1.25rem }
.chapter h4{ margin-bottom:.3rem }
.chapter__meta{ font-size:var(--fs-sm); color:var(--c-blue) }

/* Gallery filter chips */
.gallery-filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.5rem 0 2rem }
.gallery-filters a{
  padding:.45rem .9rem; border-radius:var(--radius-pill);
  background:#fff; border:1px solid var(--c-line);
  font-size:var(--fs-sm); color:var(--c-ink-soft);
}
.gallery-filters a.is-active{ background:var(--c-blue); color:#fff; border-color:var(--c-blue) }

/* Blog detail */
.post-body{ max-width:760px; margin:0 auto; line-height:1.75 }
.post-body p{ margin-bottom:1.1rem }
.post-body h2,.post-body h3{ margin-top:2rem; margin-bottom:.7rem }
.post-body img{ border-radius:var(--radius); margin:1.4rem 0 }
.post-body blockquote{
  border-left:4px solid var(--c-gold); padding:.5rem 1rem; margin:1.4rem 0;
  font-style:italic; color:var(--c-ink-soft);
}

/* Donation tier card */
.tier-grid{ display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
.tier{
  background:#fff; border:1px solid var(--c-line); border-radius:var(--radius);
  padding:1.5rem; text-align:center;
}
.tier--featured{ border-color:var(--c-gold); box-shadow:0 12px 30px rgba(245,181,30,.18); transform:translateY(-4px) }
.tier__amt{ font-size:var(--fs-xl); font-weight:700; color:var(--c-blue-deep) }
.tier__period{ color:var(--c-muted); font-size:var(--fs-sm) }

.pay-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.pay{ background:#fff; border:1px solid var(--c-line); border-radius:var(--radius); padding:1.2rem }
.pay h5{ color:var(--c-blue-deep); margin-bottom:.4rem }

/* FAQ accordion */
.faq{ border-bottom:1px solid var(--c-line); padding:1rem 0 }
.faq summary{ cursor:pointer; font-weight:600; color:var(--c-blue-deep); list-style:none; display:flex; justify-content:space-between; align-items:center }
.faq summary::after{ content:"+"; color:var(--c-blue); font-size:1.2rem; transition:transform var(--t-fast) var(--ease) }
.faq[open] summary::after{ transform:rotate(45deg) }
.faq p{ padding-top:.5rem; color:var(--c-ink-soft) }