:root {
  --jg-teal: #006b70;
  --jg-teal-dark: #004f55;
  --jg-green: #4f8b2c;
  --jg-lime: #9ccb2b;
  --jg-yellow: #f7b914;
  --jg-ink: #0d3438;
  --jg-body: #244247;
  --jg-soft: #f6f8f5;
  --jg-border: #d9e3df;
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; font-family: 'Nunito Sans', sans-serif; color: var(--jg-body); background: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
::selection { background: rgba(156, 203, 43, .35); }

.site-header { z-index: 1030; box-shadow: 0 3px 14px rgba(12, 44, 45, .06); }
.site-container { max-width: 1180px; }
.navbar { min-height: 90px; transition: min-height .2s ease, box-shadow .2s ease; }
.site-logo { display: block; width: 118px; max-height: 78px; object-fit: contain; }
.nav-link { font-family: 'Montserrat', sans-serif; font-size: .88rem; font-weight: 700; color: var(--jg-ink); padding-inline: .55rem !important; }
.nav-link:hover, .nav-link:focus, .nav-link.active { color: var(--jg-teal); }
.btn-donate { border-radius: 999px; background: var(--jg-yellow); color: var(--jg-ink); font-family: 'Montserrat', sans-serif; font-weight: 800; padding: .75rem 1.45rem; box-shadow: 0 5px 14px rgba(247, 185, 20, .25); }
.btn-donate:hover, .btn-donate:focus { background: #e9aa00; color: var(--jg-ink); }

.section-pad { padding: 4.2rem 0; }
.section-pad-sm { padding: 2.8rem 0; }
.hero-section { min-height: 430px; position: relative; overflow: hidden; background: var(--jg-teal-dark); }
.hero-image { position: absolute; inset: 0; background-image: url('../images/hero.jpg'); background-size: cover; background-position: 68% center; transform: scale(1.02); }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 54, 49, .98) 0%, rgba(0, 65, 55, .92) 27%, rgba(0, 65, 55, .52) 51%, rgba(0, 65, 55, .08) 74%); }
.hero-copy { width: min(520px, 100%); color: #fff; padding: 3.9rem 0 4.2rem; }
.hero-copy h1 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: clamp(2.5rem, 5vw, 4.4rem); line-height: 1.03; font-weight: 800; letter-spacing: -.035em; }
.hero-copy h1 span { color: var(--jg-lime); }
.hero-copy p { margin: 1.2rem 0 1.7rem; font-size: 1.1rem; line-height: 1.55; font-weight: 700; }
.title-accent, .heading-accent, .mini-accent { height: 3px; background: var(--jg-yellow); border-radius: 999px; }
.title-accent { width: 68px; margin-top: 1.25rem; }
.heading-accent { width: 48px; margin-top: .55rem; margin-bottom: 1rem; }
.mini-accent { width: 32px; height: 2px; margin: .45rem 0 .9rem; }
.btn-primary-jg, .btn-outline-jg, .btn-small-yellow { font-family: 'Montserrat', sans-serif; font-weight: 700; border-radius: 999px; }
.btn-primary-jg { background: var(--jg-teal); color: #fff; padding: .75rem 1.35rem; border: 1px solid var(--jg-teal); }
.btn-primary-jg:hover, .btn-primary-jg:focus { background: var(--jg-teal-dark); border-color: var(--jg-teal-dark); color: #fff; }
.btn-outline-jg { color: var(--jg-teal); border: 1.5px solid var(--jg-teal); padding: .7rem 1.25rem; }
.btn-outline-jg:hover, .btn-outline-jg:focus { color: #fff; background: var(--jg-teal); }
.vision-mission-values { background: #fff; }
.info-column { padding: 0 1.8rem; position: relative; }
.info-column:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 8px; bottom: 8px; width: 1px; background: var(--jg-border); }
.info-block { display: flex; align-items: flex-start; gap: 1.1rem; }
.info-icon { flex: 0 0 62px; width: 62px; height: 62px; display: grid; place-items: center; color: #fff; border-radius: 50%; font-size: 1.8rem; }
.info-icon.teal { background: var(--jg-teal); }
.info-icon.green { background: var(--jg-green); }
.info-icon.yellow { background: var(--jg-yellow); }
.section-card-title { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.3rem; margin: .15rem 0 0; }
.teal-text { color: var(--jg-teal); }
.green-text { color: var(--jg-green); }
.yellow-text { color: #e9a900; }
.info-block p, .values-list { color: var(--jg-body); font-size: .93rem; line-height: 1.65; }
.values-list li { display: flex; align-items: flex-start; gap: .55rem; margin-bottom: .35rem; }
.values-list li i { color: var(--jg-yellow); margin-top: .2rem; }
.section-heading h2 { margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--jg-teal); font-size: clamp(1.8rem, 3vw, 2.45rem); }
.section-heading p { color: var(--jg-body); margin-bottom: 1.8rem; }
.what-we-do { background: #fff; padding-top: 1rem; }
.focus-card { height: 100%; min-height: 205px; overflow: hidden; border-radius: 5px; background: var(--jg-teal); box-shadow: 0 4px 14px rgba(0, 62, 58, .08); transition: transform .2s ease, box-shadow .2s ease; }
.focus-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 62, 58, .16); }
.focus-card img { display: block; width: 100%; height: 112px; object-fit: cover; }
.focus-card-label { min-height: 93px; display: flex; align-items: center; gap: .8rem; padding: 1rem 1.05rem; color: #fff; background: linear-gradient(90deg, rgba(0, 94, 92, 1), rgba(3, 91, 59, 1)); font-family: 'Montserrat', sans-serif; font-weight: 700; line-height: 1.15; }
.focus-card-label i { font-size: 2rem; flex: 0 0 auto; }
.project-section { background: #fbfcfa; }
.left-heading { text-align: left; }
.project-section p, .about-section p { color: var(--jg-body); line-height: 1.65; }
.project-image { width: 100%; aspect-ratio: 2.7 / 1; object-fit: cover; border-radius: 6px; box-shadow: 0 4px 18px rgba(17, 70, 55, .12); }
.about-section { position: relative; overflow: hidden; background: linear-gradient(90deg, #f7faf7 0%, #fff 50%, #f8fbfa 100%); }
.about-section::before { content: ''; position: absolute; left: -40px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(79, 139, 44, .07), transparent 68%); }
.get-involved-section { background: linear-gradient(110deg, #006b70 0%, #007271 48%, #146d45 100%); color: #fff; }
.involvement-item { display: flex; align-items: center; gap: 1.2rem; padding: 1.2rem 1.5rem; min-height: 140px; position: relative; }
.involvement-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: rgba(255, 255, 255, .32); }
.involvement-item h3 { margin: 0 0 .2rem; font-family: 'Montserrat', sans-serif; font-size: 1.28rem; font-weight: 800; }
.involvement-item p { margin: 0 0 .55rem; font-size: .9rem; line-height: 1.35; opacity: .95; }
.involvement-icon { flex: 0 0 70px; width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; color: var(--jg-teal); background: #fff; font-size: 2.15rem; }
.btn-small-yellow { padding: .38rem .8rem; background: var(--jg-yellow); color: var(--jg-ink); font-size: .78rem; border: 0; }
.btn-small-yellow:hover, .btn-small-yellow:focus { background: #e7aa00; color: var(--jg-ink); }

.site-footer { background: #fff; color: var(--jg-body); }
.footer-main { padding-top: 2rem; padding-bottom: 2rem; }
.footer-logo { display: block; width: 165px; max-width: 100%; margin-bottom: 1rem; }
.site-footer h3 { font-family: 'Montserrat', sans-serif; color: var(--jg-teal); font-size: .96rem; font-weight: 800; margin-bottom: .7rem; }
.site-footer p, .footer-links, .contact-list { font-size: .84rem; line-height: 1.55; }
.footer-links li { margin-bottom: .18rem; }
.footer-links a, .contact-list a { color: var(--jg-body); text-decoration: none; }
.footer-links a:hover, .footer-links a:focus, .contact-list a:hover, .contact-list a:focus { color: var(--jg-teal); }
.footer-links.compact { line-height: 1.35; }
.contact-list li { display: flex; align-items: flex-start; gap: .55rem; margin-bottom: .3rem; }
.contact-list i { color: var(--jg-teal); margin-top: .12rem; }
.social-links { display: flex; gap: .65rem; margin-top: .75rem; }
.social-links a { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--jg-teal); color: #fff; text-decoration: none; }
.footer-bottom { padding: .75rem 0; background: var(--jg-teal); color: #fff; font-size: .78rem; }

@media (max-width: 991.98px) {
  .navbar { min-height: 76px; }
  .site-logo { width: 92px; max-height: 62px; }
  .navbar-collapse { padding: 1rem 0 1.25rem; }
  .hero-section { min-height: 400px; }
  .hero-image { background-position: 62% center; }
  .hero-overlay { background: linear-gradient(90deg, rgba(0, 54, 49, .96) 0%, rgba(0, 65, 55, .82) 53%, rgba(0, 65, 55, .22) 100%); }
  .info-column { padding: 0; }
  .info-column:not(:last-child)::after { display: none; }
  .involvement-item:not(:last-child)::after { top: auto; right: 1.5rem; bottom: 0; left: 1.5rem; width: auto; height: 1px; }
}

@media (max-width: 575.98px) {
  .section-pad { padding: 3.2rem 0; }
  .hero-section { min-height: 470px; align-items: flex-end !important; }
  .hero-image { background-position: 63% center; }
  .hero-overlay { background: linear-gradient(90deg, rgba(0, 54, 49, .93), rgba(0, 65, 55, .66)), linear-gradient(0deg, rgba(0, 47, 43, .8), transparent 55%); }
  .hero-copy { padding: 3.4rem 0 3.1rem; }
  .hero-copy p { font-size: 1rem; }
  .info-block { gap: .9rem; }
  .info-icon { flex-basis: 54px; width: 54px; height: 54px; font-size: 1.55rem; }
  .focus-card { min-height: 190px; }
  .project-image { aspect-ratio: 1.65 / 1; }
}

.motto-strip { padding: 1rem 0; background: #f7faf7; border-bottom: 1px solid rgba(0, 103, 112, .08); }
.motto-strip p { margin: 0; font-family: 'Montserrat', sans-serif; color: var(--jg-teal); font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 700; letter-spacing: .01em; }


/* Main brochure-style section headers. Card titles keep their existing styles. */
.brush-heading{--brush-bg:#073f59;--brush-shadow:rgba(7,63,89,.16);--brush-fg:#fff;position:relative;display:inline-flex;align-items:center;min-height:76px;max-width:min(100%,640px);padding:.9rem 4.4rem .9rem 6.35rem;color:var(--brush-fg);isolation:isolate;filter:drop-shadow(0 8px 14px var(--brush-shadow))}
.brush-heading::before{content:"";position:absolute;z-index:-2;inset:8px 0 8px 44px;background:var(--brush-bg);border-radius:7px 0 0 7px;clip-path:polygon(0 3%,81% 2%,91% 4%,96% 9%,91% 13%,98% 18%,93% 23%,100% 29%,94% 34%,98% 40%,92% 46%,100% 52%,93% 58%,98% 64%,91% 70%,97% 76%,90% 82%,95% 88%,86% 94%,72% 97%,0 97%)}
.brush-heading::after{content:"";position:absolute;z-index:-1;left:0;top:50%;width:90px;height:90px;transform:translateY(-50%);border-radius:50%;background:var(--brush-bg);border:2px solid rgba(255,255,255,.92)}
.brush-heading--green{--brush-bg:#4f8b2c;--brush-shadow:rgba(43,103,46,.18)}
.brush-heading--teal{--brush-bg:#006a70;--brush-shadow:rgba(0,103,112,.18)}
.brush-heading--orange{--brush-bg:#f28c28;--brush-fg:#073f59;--brush-shadow:rgba(242,140,40,.22)}
.brush-heading--yellow{--brush-bg:#f7b914;--brush-fg:#073f59;--brush-shadow:rgba(247,185,20,.24)}
.brush-heading__icon{position:absolute;left:0;top:50%;z-index:1;width:90px;height:90px;transform:translateY(-50%);display:grid;place-items:center;color:var(--brush-fg);font-size:2rem}
.brush-heading__text{position:relative;z-index:1;font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(1.05rem,2vw,1.55rem);line-height:1.05;letter-spacing:.045em;text-transform:uppercase;white-space:nowrap}
.brush-heading-intro{margin:1.15rem 0 1.8rem!important}
.main-section-heading,.section-heading--brush,.join-section-heading{width:100%}
.join-section-heading{padding:1.65rem 0 .35rem}
.join-section-heading p{margin:.8rem 0 .25rem;color:var(--jg-yellow);font-weight:700;font-style:italic}
@media (max-width:575.98px){.brush-heading{min-height:62px;padding:.72rem 2.55rem .72rem 5.15rem}.brush-heading::before{inset:6px 0 6px 34px}.brush-heading::after{width:72px;height:72px}.brush-heading__icon{width:72px;height:72px;font-size:1.55rem}.brush-heading__text{font-size:clamp(.9rem,4vw,1.1rem);white-space:normal}}

@media (max-width:991.98px){.site-container{padding-left:1.75rem;padding-right:1.75rem}}
@media (max-width:575.98px){.site-container{padding-left:1.25rem;padding-right:1.25rem}}


/* Latest typography refinements */
.section-heading h2 { font-size: clamp(1.5rem, 2.4vw, 2.05rem); }
.motto-strip {
  padding: 1.35rem 0;
  background: var(--jg-yellow);
  border-top: 1px solid rgba(7,63,89,.08);
  border-bottom: 1px solid rgba(7,63,89,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 5px 14px rgba(7,63,89,.08);
}
.motto-strip p {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  color: var(--jg-navy);
  font-size: clamp(1.3rem, 2.8vw, 1.75rem);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: .015em;
  font-style: italic;
}

.section-subtitle { max-width: 720px; margin: .9rem auto 1.8rem; color: var(--jg-body); font-size: 1rem; line-height: 1.6; font-weight: 500; }