/* ---- Bin sizes ---- */
.jb-load__art { grid-column: 1 / -1; justify-self: center; display: block; margin-bottom: .25rem; }
.jb-bin { width: 7.5rem; height: 7.5rem; display: block; }

/* ---- Charity / donate first ---- */
.jb-ch__grid { display: grid; gap: var(--pm-space-10); align-items: center; }
@media (min-width: 992px) { .jb-ch__grid { grid-template-columns: 1.1fr 1fr; } }
.jb-ch__flow { list-style: none; padding: 0; margin: var(--pm-space-6) 0; display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .jb-ch__flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.jb-ch__flow li { position: relative; display: grid; justify-items: center; text-align: center; gap: .3rem; padding: 1rem .5rem; border-radius: 18px; background: #fff; box-shadow: 0 6px 18px rgb(1 22 46 / .06); }
.jb-ch__flow li span { width: 3rem; height: 3rem; border-radius: 50%; background: #e3f6ef; color: #16876a; display: grid; place-items: center; }
.jb-ch__flow li.is-heart { background: linear-gradient(145deg, #fff1f3, #fff); border: 2px solid #fecdd3; }
.jb-ch__flow li.is-heart span { background: #e11d48; color: #fff; }
.jb-ch__flow svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jb-ch__flow li.is-heart svg { fill: currentColor; stroke: none; }
.jb-ch__flow b { font-size: .95rem; color: var(--jb-navy); }
.jb-ch__flow small { font-size: .78rem; color: #5b6b7f; line-height: 1.25; }
.jb-ch__art { position: relative; max-width: 30rem; margin-inline: auto; width: 100%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff 0%, #fff1f3 60%, #fde2e7 100%); display: grid; place-items: center; box-shadow: 0 24px 50px rgb(1 22 46 / .1); }
.jb-ch__art img { width: 86%; height: auto; }
.jb-ch__badge { position: absolute; right: 0; bottom: 10%; display: flex; align-items: center; gap: .7rem; padding: .8rem 1.1rem .8rem .8rem; border-radius: 18px; background: #fff; box-shadow: 0 16px 36px rgb(1 22 46 / .16); }
.jb-ch__badge > span:first-child { width: 2.8rem; height: 2.8rem; border-radius: 14px; background: #e11d48; color: #fff; display: grid; place-items: center; }
.jb-ch__badge svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.jb-ch__badge b { display: block; color: var(--jb-navy); font-size: 1.05rem; }
.jb-ch__badge small { color: #5b6b7f; font-size: .8rem; }

.jb-ch__lede p { font-size: 1.08rem; line-height: 1.7; color: #33445a; margin: 0 0 1rem; }
.jb-ch__pride { display: flex; gap: .9rem; align-items: flex-start; margin: var(--pm-space-5) 0 0; padding: 1rem 1.2rem; border-radius: 18px; background: #fff1f3; border-left: 4px solid #e11d48; color: var(--jb-navy); font-weight: 700; line-height: 1.5; }
.jb-ch__pride > span:first-child { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #e11d48; color: #fff; display: grid; place-items: center; }
.jb-ch__pride svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
.jb-ch__partners { margin-top: var(--pm-space-12); }
.jb-ch__partners h3 { text-align: center; font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--jb-navy); margin: 0 0 var(--pm-space-6); }
.jb-ch__cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.jb-ch__card { display: flex; flex-direction: column; gap: .45rem; padding: 1.4rem; border-radius: 22px; background: #fff; color: var(--jb-navy); text-decoration: none !important; box-shadow: 0 10px 28px rgb(1 22 46 / .07); border: 1px solid #eef1f5; transition: transform .2s, box-shadow .2s; }
.jb-ch__card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgb(1 22 46 / .12); }
.jb-ch__cico { width: 3.2rem; height: 3.2rem; border-radius: 16px; display: grid; place-items: center; background: #fff1f3; color: #e11d48; margin-bottom: .3rem; }
.jb-ch__card.is-home .jb-ch__cico { background: #fff4d6; color: #b7791f; }
.jb-ch__card.is-hands .jb-ch__cico { background: #efe9ff; color: #6d3fd1; }
.jb-ch__card.is-tree .jb-ch__cico { background: #e3f6ef; color: #16876a; }
.jb-ch__cico svg { width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jb-ch__cico svg .f { fill: currentColor; stroke: none; }
.jb-ch__card b { font-size: 1.1rem; }
.jb-ch__card small { color: #5b6b7f; font-size: .92rem; line-height: 1.5; flex: 1; }
.jb-ch__go { display: inline-flex; align-items: center; gap: .35rem; margin-top: .4rem; font-weight: 800; font-size: .88rem; color: #16876a; }
.jb-ch__go svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.jb-ch__quote { max-width: 44rem; margin: var(--pm-space-10) auto 0; text-align: center; font-size: clamp(1.2rem, 2.4vw, 1.55rem); font-weight: 800; line-height: 1.4; color: var(--jb-navy); }
.jb-ch__quote::before { content: "\201C"; display: block; font-size: 3.5rem; line-height: .6; color: #e11d48; margin-bottom: .6rem; }
/* About: why we exist */
.jb-ab-people__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); margin-top: var(--pm-space-8); }
.jb-ab-person { padding: 1.6rem; border-radius: 22px; background: #fff; box-shadow: 0 10px 28px rgb(1 22 46 / .07); }
.jb-ab-person > span { width: 3.4rem; height: 3.4rem; border-radius: 16px; background: #e3f6ef; color: #16876a; display: grid; place-items: center; margin-bottom: 1rem; }
.jb-ab-person svg, .jb-ab-man__list svg { width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jb-ab-person svg .f, .jb-ab-man__list svg .f { fill: currentColor; stroke: none; }
.jb-ab-person h3 { margin: 0 0 .4rem; font-size: 1.15rem; color: var(--jb-navy); }
.jb-ab-person p { margin: 0; color: #5b6b7f; line-height: 1.6; }
.jb-ab-people__note { text-align: center; margin: var(--pm-space-8) auto 0; font-size: 1.15rem; font-weight: 800; color: var(--jb-navy); }
.jb-ab-resp__in { max-width: 52rem; margin-inline: auto; text-align: center; }
.jb-ab-resp h2 { font-size: clamp(1.5rem, 3.2vw, 2.3rem); line-height: 1.25; }
.jb-ab-resp__body p { font-size: 1.08rem; line-height: 1.75; color: #c9d4e2; margin: 1rem 0 0; }
.jb-ab-man__card { max-width: 60rem; margin-inline: auto; text-align: center; padding: clamp(2rem, 5vw, 3.5rem); border-radius: 28px; background: linear-gradient(160deg, #e3f6ef 0%, #fff 55%, #fff8e1 100%); box-shadow: 0 20px 50px rgb(1 22 46 / .08); }
.jb-ab-man__card .jb-lede { margin-inline: auto; }
.jb-ab-man__list { list-style: none; padding: 0; margin: var(--pm-space-6) 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.jb-ab-man__list li { display: inline-flex; align-items: center; gap: .6rem; padding: .6rem 1.1rem .6rem .6rem; border-radius: 999px; background: #fff; font-weight: 800; color: var(--jb-navy); box-shadow: 0 6px 18px rgb(1 22 46 / .08); }
.jb-ab-man__list li > span { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--jb-navy); color: #ffbf0d; display: grid; place-items: center; }
.jb-ab-man__list li > span svg { width: 1.3rem; height: 1.3rem; }
.jb-ab-man__sign { margin: var(--pm-space-4) 0 0; font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 800; color: var(--jb-navy); }
/* Richer, friendlier brand blue for dark sections (was near-black #01162e) */
:root { --pm-color-surface-inverse: #0a2a4f; --pm-color-surface-inverse-raised: #123a66; }
.pm-scheme-dark { background-image: radial-gradient(60rem 40rem at 100% 0%, rgb(59 186 150 / .18), transparent 60%), radial-gradient(55rem 38rem at 0% 100%, rgb(56 132 255 / .18), transparent 62%); }
.jb-footer { background: #0a2a4f; }
/* Hero bottom: soft wave instead of the arch */
.jb-hero::after { left: 0; right: 0; height: 4.5rem; border-radius: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 46C240 78 480 80 720 58S1200 22 1440 38V80H0Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 46C240 78 480 80 720 58S1200 22 1440 38V80H0Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; }
/* Services panel: clean card, no yellow outline */
.jb-panel { background: #fff; border: 1px solid #e3e9f1; box-shadow: 0 24px 60px rgb(10 42 79 / .14); }
/* Service pages: more-about section */
.jb-sv .jb-ap__prose { max-width: none; }
.jb-sv__why { display: grid; gap: var(--pm-space-4); }
.jb-sv__why .jb-ap__boxhead { margin-bottom: 0; }
.jb-sv__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.jb-sv__list li { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem; border-radius: 16px; background: #f5f8fb; }
.jb-sv__list li > span { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; }
.jb-sv__list svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.jb-sv__list .is-y { background: #fff3cc; color: #b7791f; } .jb-sv__list .is-y svg { fill: currentColor; stroke: none; }
.jb-sv__list .is-g { background: #e3f6ef; color: #16876a; }
.jb-sv__list .is-t { background: #e3f6ef; color: #16876a; }
.jb-sv__list .is-n { background: #e6eef8; color: #0a2a4f; }
.jb-sv__list b { display: block; color: var(--jb-navy); font-size: .98rem; }
.jb-sv__list small { display: block; color: #5b6b7f; font-size: .86rem; line-height: 1.45; }
.jb-sv__rate .jb-rating { --pm-fg: #01162e; background: #f5f8fb; color: #01162e; }
.jb-sv__call { display: flex; justify-content: center; align-items: center; gap: .5rem; font-weight: 700; color: var(--jb-navy); text-decoration: none; font-size: .92rem; }
.jb-sv__call:hover { color: #16876a; }
.jb-sv .jb-covmap-wrap { display: none; }
.jb-sv .jb-ap__others { grid-template-columns: 1fr 1fr; }
.jb-ap__box--map { background: #0a2a4f; }