/* ============ NAILA SAEED, Endorsements + App download (Sept 2026) ============ */

/* ---------- nav breathing room now that there are 9 links ----------
   The burger breakpoint moved 1040 -> 1250 in pages.css, because nine links
   plus the language switch and Donate cannot sit on one bar below that without
   squeezing into each other. Above it, give the bar room and never let a link
   shrink: flex:0 0 auto is what stops "AccomplishmentsAwards" running together. */
@media(min-width:1251px){
  .nav__inner{gap:18px}
  .nav__links{gap:20px}
  .nav__links a:not(.nav__cta){white-space:nowrap;flex:0 0 auto}
  .langsw{flex:0 0 auto;margin:0 2px}
  .nav__cta{flex:0 0 auto}
}
@media(min-width:1400px){
  .nav__inner{max-width:1340px}
  .nav__links{gap:26px}
}

/* ---------- endorsement hero ---------- */
.endhero{position:relative;padding:190px 0 90px;overflow:hidden;
  background:linear-gradient(150deg,var(--purple-dd) 0%,var(--purple-d) 48%,var(--purple) 100%)}
.endhero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 80% 0%,rgba(201,162,75,.22),transparent 60%)}
.endhero .wrap{position:relative;z-index:2;text-align:center;max-width:920px}
.endhero h1{color:#fff;font-size:clamp(2.2rem,5vw,3.5rem);margin-bottom:20px}
.endhero p{color:rgba(255,255,255,.86);font-size:1.08rem;max-width:720px;margin:0 auto}
.endhero__count{display:inline-flex;align-items:center;gap:14px;margin-top:34px;
  background:rgba(255,255,255,.09);border:1px solid rgba(201,162,75,.4);
  padding:14px 26px;border-radius:100px;backdrop-filter:blur(6px)}
.endhero__count b{font-family:'Sora',sans-serif;font-size:1.7rem;color:var(--gold-l);line-height:1}
.endhero__count span{color:rgba(255,255,255,.82);font-size:.92rem;text-align:left;line-height:1.35}

/* ---------- filter chips ---------- */
.endfilter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 42px}
.endfilter button{font-family:'Sora',sans-serif;font-weight:600;font-size:.85rem;cursor:pointer;
  padding:.62em 1.35em;border-radius:100px;border:1.5px solid var(--line);background:#fff;
  color:var(--body);transition:.25s var(--ease)}
.endfilter button:hover{border-color:var(--gold);color:var(--purple)}
.endfilter button.on{background:var(--purple);border-color:var(--purple);color:#fff;
  box-shadow:0 10px 22px -12px rgba(92,45,145,.75)}

/* ---------- the grid of framed endorsements ---------- */
.endgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch}
.endcard{display:flex;position:relative;background:#FBF8F1;border-radius:16px;padding:8px;
  border:2px solid var(--purple);box-shadow:var(--shadow-sm);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease)}
.endcard__inner{flex:1}
.endcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.endcard[hidden]{display:none}
.endcard__inner{border:1.5px solid var(--gold);border-radius:11px;padding:30px 26px 26px;
  display:flex;flex-direction:column;height:100%}
.endcard__mark{font-family:Georgia,'Times New Roman',serif;font-size:3.4rem;line-height:.7;
  color:var(--gold);opacity:.55;margin-bottom:10px}
.endcard__quote{font-family:'Sora',sans-serif;font-weight:600;font-size:1.06rem;line-height:1.5;
  color:var(--purple-d);letter-spacing:-.01em;margin-bottom:20px}
.endcard__full{display:none;border-top:1px solid rgba(201,162,75,.35);padding-top:18px;margin-bottom:6px}
.endcard.open .endcard__full{display:block;animation:endfade .35s var(--ease)}
@keyframes endfade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.endcard__full p{font-size:.93rem;line-height:1.68;color:var(--body);margin-bottom:12px}
.endcard__full p:last-child{margin-bottom:0}
.endcard__sig{margin-top:auto;padding-top:18px;border-top:1px solid rgba(201,162,75,.35)}
.endcard__name{font-family:'Sora',sans-serif;font-weight:700;font-size:1.02rem;color:var(--purple-d);
  line-height:1.25}
.endcard__role{display:block;font-size:.79rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-top:5px;line-height:1.4}
.endcard__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.endcard__acts button{font-family:'Sora',sans-serif;font-weight:600;font-size:.8rem;cursor:pointer;
  padding:.6em 1.1em;border-radius:100px;border:1.5px solid var(--purple);background:transparent;
  color:var(--purple);transition:.22s var(--ease)}
.endcard__acts button:hover{background:var(--purple);color:#fff}
.endcard__acts .is-alt{border-color:var(--gold);color:#8a6b21}
.endcard__acts .is-alt:hover{background:var(--gold);color:#3a2a08}

@media(max-width:1000px){ .endgrid{grid-template-columns:repeat(2,1fr);gap:22px} }
@media(max-width:680px){
  .endgrid{grid-template-columns:1fr;max-width:540px;margin-left:auto;margin-right:auto}
  .endhero{padding:150px 0 70px}
  .endcard__inner{padding:26px 22px 22px}
}

/* ---------- lightbox for the original letters ---------- */
.endbox{position:fixed;inset:0;z-index:200;background:rgba(24,12,40,.9);
  backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:24px}
.endbox.on{display:flex;animation:endfade .28s var(--ease)}
.endbox__img{max-width:min(880px,94vw);max-height:88vh;width:auto;height:auto;border-radius:8px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);object-fit:contain}
.endbox__close,.endbox__nav{position:absolute;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);
  color:#fff;cursor:pointer;border-radius:100px;transition:.22s var(--ease);
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.endbox__close{top:22px;right:22px;width:46px;height:46px;font-size:1.5rem;line-height:1}
.endbox__nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:1.6rem;line-height:1}
.endbox__nav--prev{left:20px}
.endbox__nav--next{right:20px}
.endbox__close:hover,.endbox__nav:hover{background:var(--gold);border-color:var(--gold);color:#3a2a08}
.endbox__cap{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:rgba(255,255,255,.85);
  font-family:'Sora',sans-serif;font-size:.9rem;padding:0 80px}
.endbox__dl{display:inline-block;margin-left:12px;color:var(--gold-l);border-bottom:1px solid rgba(224,192,120,.5)}
@media(max-width:680px){
  .endbox{padding:12px}
  .endbox__nav{width:42px;height:42px}
  .endbox__nav--prev{left:6px}
  .endbox__nav--next{right:6px}
  .endbox__cap{padding:0 12px;bottom:10px;font-size:.8rem}
  .endbox__close{top:12px;right:12px;width:40px;height:40px}
}

/* ---------- homepage / cross-page teaser ---------- */
.endteaser{padding:86px 0;background:var(--soft)}
.endteaser__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px;align-items:stretch}
.endteaser__card{display:flex;background:#FBF8F1;border:2px solid var(--purple);border-radius:16px;padding:7px}
.endteaser__card > div{flex:1;display:flex;flex-direction:column;
  border:1.5px solid var(--gold);border-radius:11px;padding:26px 24px}
.endteaser__card b{margin-top:auto;padding-top:6px}
.endteaser__card p{font-family:'Sora',sans-serif;font-weight:600;font-size:1rem;line-height:1.5;
  color:var(--purple-d);margin-bottom:16px}
.endteaser__card b{display:block;font-family:'Sora',sans-serif;font-size:.98rem;color:var(--purple-d)}
.endteaser__card span{display:block;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-top:4px}
.endteaser__cta{text-align:center;margin-top:38px}
@media(max-width:900px){ .endteaser__grid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto} }

/* ---------- CanvassPro volunteer app ---------- */
.appsec{padding:88px 0;background:linear-gradient(160deg,var(--purple-dd),var(--purple-d) 60%,var(--purple));
  position:relative;overflow:hidden}
.appsec::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 12% 100%,rgba(201,162,75,.2),transparent 62%)}
.appsec__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}
.appsec h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.5rem);margin-bottom:16px}
.appsec p{color:rgba(255,255,255,.85);margin-bottom:12px}
.appsec__list{list-style:none;margin:22px 0 30px;padding:0}
.appsec__list li{position:relative;padding-left:32px;margin-bottom:12px;color:rgba(255,255,255,.9);font-size:.98rem}
.appsec__list li::before{content:"";position:absolute;left:0;top:6px;width:19px;height:19px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px rgba(201,162,75,.2)}
.appsec__list li::after{content:"";position:absolute;left:6.5px;top:10.5px;width:5px;height:9px;
  border:solid #3a2a08;border-width:0 2px 2px 0;transform:rotate(45deg)}
.appsec__btns{display:flex;flex-wrap:wrap;gap:14px}
.appbtn{display:inline-flex;align-items:center;gap:12px;padding:.9em 1.6em;border-radius:14px;
  font-family:'Sora',sans-serif;text-align:left;transition:transform .25s var(--ease),box-shadow .25s var(--ease);
  border:1.5px solid transparent}
.appbtn:hover{transform:translateY(-3px)}
.appbtn svg{width:26px;height:26px;flex:0 0 26px}
.appbtn small{display:block;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;opacity:.72;line-height:1.2}
.appbtn b{display:block;font-size:1rem;font-weight:700;line-height:1.25;margin-top:2px}
.appbtn--ios{background:#fff;color:var(--purple-dd);box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.appbtn--and{background:linear-gradient(135deg,var(--gold),#b88f3c);color:#3a2a08;
  box-shadow:0 14px 30px -14px rgba(201,162,75,.8)}
.appsec__note{margin-top:22px;font-size:.83rem;color:rgba(255,255,255,.62);line-height:1.6;max-width:520px}
.appsec__note a{color:var(--gold-l);border-bottom:1px solid rgba(224,192,120,.45)}
.appsec__phone{position:relative;display:flex;justify-content:center}
.appsec__phone .frame{width:min(280px,78vw);aspect-ratio:9/19;border-radius:38px;padding:11px;
  background:linear-gradient(160deg,#2b1a45,#150c25);border:1px solid rgba(201,162,75,.35);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.75)}
.appsec__phone .screen{width:100%;height:100%;border-radius:28px;overflow:hidden;
  background:linear-gradient(170deg,var(--purple) 0%,var(--purple-dd) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:26px;text-align:center}
.appsec__phone .screen img{width:68px;height:auto;opacity:.95}
.appsec__phone .screen b{font-family:'Sora',sans-serif;color:#fff;font-size:1.12rem;line-height:1.25}
.appsec__phone .screen span{font-size:.8rem;color:rgba(255,255,255,.68);line-height:1.5}
.appsec__phone .screen i{font-style:normal;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-l);font-weight:700}
@media(max-width:900px){
  .appsec__grid{grid-template-columns:1fr;gap:38px}
  .appsec__phone{order:-1}
}

/* ---------- footer app link ---------- */
.footer__app{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:.5em 1em;
  border:1px solid rgba(201,162,75,.45);border-radius:100px;font-size:.8rem;
  font-family:'Sora',sans-serif;font-weight:600;color:var(--gold-l);transition:.25s var(--ease)}
.footer__app:hover{background:rgba(201,162,75,.14);border-color:var(--gold)}
.footer__app svg{width:15px;height:15px}