/* Upcoming project modal */
#projectModal {
  --project-green: #164b38;
  --project-muted: #637069;
  color: #253d31;
}
#projectModal .modal-dialog { max-width: 880px; }
#projectModal .modal-content {
  border: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #fffefa;
  box-shadow: 0 28px 90px rgba(12, 37, 25, .28);
}
#projectModal .project-heading {
  position: relative;
  padding: 32px 38px;
  align-items: flex-start;
  background: radial-gradient(ellipse at top right, #337456 0%, transparent 65%), #164b38;
  color: #fff;
}
#projectModal .project-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #e0edbe;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
#projectModal .modal-title {
  margin: 14px 40px 15px 0;
  color: #fff;
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.9px;
}
#projectModal .project-location { font-size: 17px; color: #e0ebe4; }
#projectModal .project-location i { margin-right: 6px; }
#projectModal .project-close {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  height: 40px;
  border: 1px solid #ffffff50;
  border-radius: 50%;
  color: #fff;
  background: #ffffff12;
}
#projectModal .project-close:hover { background: #ffffff28; }
#projectModal .modal-body { padding: 30px 38px 24px; }
#projectModal .project-overview { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; }
#projectModal .project-objective { border-left: 1px solid #dfe5db; padding-left: 28px; }
#projectModal .project-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 12px;
  color: var(--project-green);
  background: #eaf0e5;
  font-size: 17px;
}
#projectModal h3 { margin: 12px 0 8px; font-size: 18px; font-weight: 700; color: #253d31; }
#projectModal p { margin: 0; color: var(--project-muted); font-size: 17px; line-height: 1.8; }
#projectModal .project-support { margin-top: 26px; padding-top: 22px; border-top: 1px solid #dfe5db; }
#projectModal .project-section-heading h3 { margin-top: 0; margin-bottom: 4px; }
#projectModal .project-application { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px; padding: 18px; border: 1px solid #dfe5db; border-radius: 14px; background: #f0f3eb; }
#projectModal .project-application-numbers { color: var(--project-green); font-weight: 700; }
#projectModal .project-support-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 12px; margin-top: 18px; overflow-x: auto; padding-bottom: 8px; }
#projectModal .project-support-card { padding: 19px 16px; border: 1px solid #dfe5db; border-radius: 16px; background: #fff; }
#projectModal h4 { margin: 14px 0 12px; color: #253d31; font-size: 14px; font-weight: 700; }
#projectModal .project-detail-label { display: block; color: var(--project-muted); font-size: 15px; line-height: 1.7; }
#projectModal strong { display: block; font-size: 13px; line-height: 1.8; font-weight: 700; }
#projectModal .project-account { font-family: Arial, sans-serif; font-size: 16px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#projectModal .project-support-card p { margin-top: 5px; font-size: 15px; }
#projectModal .project-contact { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 15px 18px; background: #f0f3eb; border-radius: 14px; }
#projectModal .project-contact a { margin-left: auto; color: var(--project-green); font: 600 14px Arial, sans-serif; white-space: nowrap; padding: 12px 0; }
#projectModal .project-contact a i { margin-left: 9px; font-size: 11px; }
#projectModal .project-contact a:hover { text-decoration: underline; }
#projectModal .project-tags { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 18px; color: var(--project-muted); font-size: 10px; font-weight: 600; }
#projectModal .modal-footer { gap: 12px; padding: 16px 38px; border-top: 1px solid #dfe5db; background: #fffefa; }
#projectModal .modal-footer > * { margin: 0; }
#projectModal .project-dismiss { padding: 12px 18px; color: var(--project-muted); background: transparent; border: 0; font-size: 13px; font-weight: 600; }
#projectModal .project-dismiss:hover { color: var(--project-green); }
#projectModal .project-donate { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 22px; border-radius: 10px; background: var(--project-green); color: #fff; font-size: 13px; font-weight: 700; }
#projectModal .project-donate:hover { background: #0d3627; }
#projectModal button:focus-visible, #projectModal a:focus-visible { outline: 3px solid #b59439; outline-offset: 3px; }
@media (max-width: 575.98px) {
  #projectModal .modal-content { border-radius: 18px; }
  #projectModal .project-heading { padding: 24px 20px; }
  #projectModal .modal-body { padding: 24px 20px; }
  #projectModal .modal-title { margin-right: 0; font-size: 27px; }
  #projectModal .project-overview { grid-template-columns: 1fr; gap: 20px; }
  #projectModal .project-objective { border-left: 0; padding-left: 0; }
  #projectModal .project-support-card { padding: 16px; }
  #projectModal .project-contact { flex-wrap: wrap; padding: 14px; }
  #projectModal .project-contact a { margin-left: 50px; }
  #projectModal .modal-footer { padding: 14px 20px; }
  #projectModal .project-donate { flex: 1; }
}