:root {
    --color-primary: #000;
    --color-secondary: #f46388;
    --color-tertiary: #eae3e7;
    --color-negative: #a44040;
    --color-positive: #128549;
}

button.button {
    border: none;
    padding: 10px 20px;
    border-radius: 0px;
    cursor: pointer;
}
button.button.primary {
    background-color: var(--color-primary);
    color: var(--color-tertiary);
}
button.button.secondary {
    background-color: var(--color-secondary);
    color: var(--color-tertiary);
}
.button.button.tertiary {
    background-color: var(--color-tertiary);
    color: var(--color-primary);
}

.card {
    border-radius: 0;
    background-color: #eee;
    box-shadow: none;
}
.downloads-band { background-color: #FFF9F9; }
.color-primary { color: primary !important; }

.display-flex { display: flex; }
.display-flex.space-between { justify-content: space-between;}

input.input.flat {
    border: none;
    outline: none;
    box-shadow: none;
}
input.input, textarea.textarea { 
    border: 1px solid var(--color-primary);
    padding: 10px;
    border-radius: 0px;
}
.select select {
    border: 1px solid var(--color-primary);
    padding: 10px;
    border-radius: 0px;
}

.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.font-800 { font-weight: 800; }
.font-900 { font-weight: 900 !important; }

.navbar-logo { min-height: 5em; }

.table.primary thead {
    background-color: var(--color-primary);
}
.table.primary thead th {
    color: var(--color-tertiary);
}

.typo {
    font-family: Arial, sans-serif;
    color: #111;
}
.typo.banner {
    font-size: 4em;
    font-weight: 900;
}
.typo.heading {
    font-size: 2.5em;
    font-weight: 800;
}
.typo.title {
    font-size: 2em;
    font-weight: 700;
}
.typo.subtitle {
    font-size: 1.5em;
    font-weight: 500;
}
.typo.text {
    font-size: 1em;
    font-weight: 400;
}
.typo.hint {
    font-size: 0.75em;
    font-weight: 300;
}


/* ============================================================
   LANDING PAGE  (home / index.html)
   Built on the brand palette from abc.css
   ============================================================ */
:root {
    --tbhi-purple: #1E075F;
    --tbhi-pink: #F46388;
    --tbhi-teal: #4893A4;
    --tbhi-magenta: #9D328C;
    --tbhi-ink: #1a1430;
    --tbhi-soft: #f7f4fb;
}

/* inline svg icons */
.ic {
    width: 1.05em;
    height: 1.05em;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.16em;
}

/* shared eyebrow / section heads */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    font-weight: 800;
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tbhi-magenta);
    background: rgba(157, 50, 140, .09);
    padding: .45em .9em;
    border-radius: 999px;
}
.eyebrow--center { margin: 0 auto; }
.eyebrow--light { color: #fff; background: rgba(255, 255, 255, .16); }

.section-head { text-align: center; max-width: 720px; margin: 0 auto 2.75rem; }
.section-title {
    font-weight: 900;
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    line-height: 1.08;
    color: var(--tbhi-purple);
    margin: .7rem 0 .6rem;
}
.section-sub { font-size: 1.1rem; color: #5b5470; line-height: 1.6; }

/* primary call-to-action buttons */
.cta {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    font-weight: 800;
    font-size: 1.02rem;
    padding: .9em 1.6em;
    border-radius: 999px;
    color: #fff;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    box-shadow: 0 10px 24px -10px rgba(30, 7, 95, .55);
}
.cta:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -12px rgba(30, 7, 95, .6); }
.cta--time { background: linear-gradient(120deg, var(--tbhi-teal), #2f6f7e); }
.cta--materials { background: linear-gradient(120deg, var(--tbhi-magenta), var(--tbhi-purple)); }
.cta--light { background: #fff; color: var(--tbhi-purple); box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .4); }
.lp-cta-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }

/* ---- HERO ---- */
.lp-hero { position: relative; overflow: hidden; padding: 2.5rem 0 3rem; }
.lp-hero__glow {
    position: absolute;
    top: -30%;
    right: -10%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(244, 99, 136, .22), rgba(157, 50, 140, .12) 45%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}
.lp-hero .container { position: relative; z-index: 1; }
.lp-hero__title {
    font-weight: 900;
    font-size: clamp(2.4rem, 5.4vw, 4.1rem);
    line-height: 1.04;
    color: var(--tbhi-purple);
    margin: 1.1rem 0 1.1rem;
    letter-spacing: -.01em;
}
.lp-hero__title .hl {
    position: relative;
    color: var(--tbhi-magenta);
    white-space: nowrap;
}
.lp-hero__title .hl::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: .08em;
    height: .22em;
    background: rgba(244, 99, 136, .35);
    z-index: -1;
}
.lp-hero__sub { font-size: 1.2rem; line-height: 1.65; color: #524b67; max-width: 33rem; }

.lp-trust { display: flex; align-items: center; gap: .85rem; margin-top: 2.1rem; }
.lp-trust__faces { display: flex; }
.lp-trust__faces span {
    width: 2.6rem; height: 2.6rem;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
    margin-left: -.8rem;
}
.lp-trust__faces span:first-child { margin-left: 0; }
.lp-trust p { color: #524b67; font-size: .98rem; }

.lp-hero__art { position: relative; }
.lp-hero__art img {
    width: 100%;
    border-radius: 26px;
    box-shadow: 0 30px 60px -25px rgba(30, 7, 95, .55);
    display: block;
}
.lp-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: .6rem;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(6px);
    padding: .7rem .95rem;
    border-radius: 16px;
    box-shadow: 0 16px 34px -14px rgba(30, 7, 95, .5);
}
.lp-float .ic { width: 1.7rem; height: 1.7rem; color: var(--tbhi-magenta); }
.lp-float div { display: flex; flex-direction: column; line-height: 1.15; }
.lp-float strong { font-size: .98rem; color: var(--tbhi-ink); }
.lp-float span { font-size: .8rem; color: #6b6480; }
.lp-float--tl { top: 1.2rem; left: -1.1rem; }
.lp-float--br { bottom: 1.4rem; right: -1.1rem; }

/* ---- STAT BAND ---- */
.stat-band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    background: linear-gradient(120deg, var(--tbhi-purple), var(--tbhi-magenta));
    border-radius: 22px;
    padding: 2.2rem 1.5rem;
    margin: 1rem 0 4rem;
    box-shadow: 0 24px 50px -28px rgba(30, 7, 95, .8);
}
.stat-band__item { text-align: center; color: #fff; }
.stat-band__value { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 900; line-height: 1; }
.stat-band__label { margin-top: .5rem; font-size: .92rem; opacity: .82; }

/* ---- PROJECTS ---- */
.lp-projects { margin-bottom: 4.5rem; }
.lp-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin: 0 0 2.5rem;
}
.filter-chip {
    border: 1.5px solid #e2dcec;
    background: #fff;
    color: #5b5470;
    font-weight: 700;
    font-size: .92rem;
    padding: .55em 1.15em;
    border-radius: 999px;
    cursor: pointer;
    transition: all .16s ease;
}
.filter-chip:hover { border-color: var(--tbhi-magenta); color: var(--tbhi-magenta); }
.filter-chip.is-active {
    background: var(--tbhi-purple);
    border-color: var(--tbhi-purple);
    color: #fff;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 1.6rem;
}
.project-card {
    background: #fff;
    border: 1px solid #efeaf6;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 14px 34px -22px rgba(30, 7, 95, .4);
    transition: transform .2s ease, box-shadow .2s ease;
}
.project-card:hover { transform: translateY(-6px); box-shadow: 0 26px 48px -22px rgba(30, 7, 95, .5); }
.project-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.project-card:hover .project-card__media img { transform: scale(1.06); }
.tag-directorate {
    position: absolute;
    top: .85rem; left: .85rem;
    background: var(--accent, var(--tbhi-purple));
    color: #fff;
    font-weight: 800;
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .4em .8em;
    border-radius: 999px;
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5);
}
.tag-urgent {
    position: absolute;
    top: .85rem; right: .85rem;
    background: #fff;
    color: var(--tbhi-pink);
    font-weight: 800;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .4em .8em;
    border-radius: 999px;
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35);
}
.project-card__body { padding: 1.25rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.project-card__title { font-size: 1.32rem; font-weight: 800; color: var(--tbhi-ink); line-height: 1.2; }
.project-card__loc {
    display: flex; align-items: center; gap: .35em;
    color: #8a83a0; font-size: .85rem; margin: .35rem 0 .7rem;
}
.project-card__loc .ic { width: .95em; height: .95em; color: var(--tbhi-magenta); }
.project-card__summary { color: #5b5470; line-height: 1.55; font-size: .96rem; }

.needs-label {
    margin: 1.1rem 0 .55rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #a59fb6;
}
.needs { display: flex; flex-wrap: wrap; gap: .45rem; }
.need-chip {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    font-size: .82rem;
    font-weight: 700;
    padding: .42em .8em;
    border-radius: 999px;
    line-height: 1;
}
.need-chip .ic { width: .95em; height: .95em; }
.need-chip.is-time { background: rgba(72, 147, 164, .13); color: #2f6f7e; }
.need-chip.is-materials { background: rgba(157, 50, 140, .12); color: var(--tbhi-magenta); }

.progress-row { margin: 1.25rem 0 1.3rem; }
.progress-rail { height: 7px; background: #eee7f3; border-radius: 999px; overflow: hidden; }
.progress-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--tbhi-teal), var(--tbhi-magenta));
}
.progress-text { display: block; margin-top: .5rem; font-size: .8rem; color: #8a83a0; font-weight: 600; }

.project-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: auto; }
.card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    font-weight: 800;
    font-size: .86rem;
    padding: .7em .6em;
    border-radius: 12px;
    transition: transform .15s ease, filter .15s ease;
}
.card-cta:hover { transform: translateY(-2px); filter: brightness(1.05); }
.card-cta .ic { width: .95em; height: .95em; }
.card-cta--time { background: rgba(72, 147, 164, .14); color: #2f6f7e; }
.card-cta--materials { background: var(--tbhi-purple); color: #fff; }

/* ---- HOW IT WORKS ---- */
.lp-how { margin-bottom: 4.5rem; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.4rem; }
.step {
    position: relative;
    background: var(--tbhi-soft);
    border: 1px solid #efeaf6;
    border-radius: 20px;
    padding: 2.4rem 1.6rem 1.8rem;
    text-align: center;
}
.step__num {
    position: absolute;
    top: -1rem; left: 50%;
    transform: translateX(-50%);
    width: 2.2rem; height: 2.2rem;
    display: grid; place-items: center;
    background: linear-gradient(120deg, var(--tbhi-magenta), var(--tbhi-purple));
    color: #fff;
    font-weight: 900;
    border-radius: 50%;
    box-shadow: 0 10px 20px -8px rgba(157, 50, 140, .7);
}
.step__ic { width: 2.6rem; height: 2.6rem; color: var(--tbhi-magenta); stroke-width: 1.8; }
.step h3 { font-size: 1.25rem; font-weight: 800; color: var(--tbhi-ink); margin: .7rem 0 .5rem; }
.step p { color: #5b5470; line-height: 1.55; font-size: .96rem; }

/* ---- CLOSING CTA ---- */
.closing {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, var(--tbhi-purple) 0%, var(--tbhi-magenta) 70%);
    border-radius: 26px;
    padding: 3rem clamp(1.5rem, 5vw, 4rem);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}
.closing__text { max-width: 38rem; }
.closing__text h2 { color: #fff; font-weight: 900; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.1; margin: 1rem 0 .8rem; }
.closing__text p { color: rgba(255, 255, 255, .85); font-size: 1.12rem; line-height: 1.6; }
.closing__art { width: 230px; flex: 0 0 auto; align-self: flex-end; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .35)); }

/* ---- responsive ---- */
@media (max-width: 1023px) {
    .lp-hero__art { margin-top: 2.5rem; }
    .lp-float--tl { left: .6rem; }
    .lp-float--br { right: .6rem; }
}
@media (max-width: 768px) {
    .stat-band { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
    .project-card__actions { grid-template-columns: 1fr; }
    .closing { flex-direction: column; text-align: center; }
    .closing__text { max-width: none; }
    .closing .lp-cta-row { justify-content: center; }
    .closing__art { width: 180px; align-self: center; }
    .lp-cta-row { justify-content: flex-start; }
}

/* loading spinner shared by .cta submit buttons */
.cta.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.cta.is-loading .ic { visibility: hidden; }
.cta.is-loading::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 1.15em; height: 1.15em;
    margin: -.58em 0 0 -.58em;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tbhi-spin .65s linear infinite;
}
@keyframes tbhi-spin { to { transform: rotate(360deg); } }


/* ============================================================
   DONATE PAGES  (hands.html / hearts.html)
   ============================================================ */
.donate { padding: 2rem 0 3.5rem; }

.donate-project__media {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 40px -22px rgba(30, 7, 95, .5);
    margin-bottom: 1.4rem;
}
.donate-project__media img { width: 100%; height: 100%; object-fit: cover; }
.donate-project__title {
    font-weight: 900;
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    line-height: 1.1;
    color: var(--tbhi-purple);
    margin: .5rem 0 .4rem;
}
.donate-project__loc {
    display: flex; align-items: center; gap: .35em;
    color: #8a83a0; font-size: .9rem; margin-bottom: .9rem;
}
.donate-project__loc .ic { width: 1em; height: 1em; color: var(--tbhi-magenta); }
.donate-project__summary { color: #5b5470; line-height: 1.6; font-size: 1.05rem; }
.donate-back {
    display: inline-block;
    margin-top: 1.4rem;
    font-weight: 700;
    color: var(--tbhi-magenta);
}
.donate-back:hover { color: var(--tbhi-purple); }

.donate-intro__title {
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 2.9rem);
    line-height: 1.08;
    color: var(--tbhi-purple);
    margin: 1rem 0 .8rem;
}
.donate-intro__sub { color: #5b5470; font-size: 1.12rem; line-height: 1.65; }
.donate-points { margin-top: 1.6rem; }
.donate-points li {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem 0;
    color: var(--tbhi-ink);
    font-weight: 600;
}
.donate-points .ic { width: 1.3rem; height: 1.3rem; color: #128549; flex: 0 0 auto; }

/* the form card */
.donate-form-card {
    background: #fff;
    border: 1px solid #efeaf6;
    border-radius: 22px;
    padding: 2rem clamp(1.3rem, 3vw, 2.4rem) 2.2rem;
    box-shadow: 0 26px 60px -30px rgba(30, 7, 95, .55);
}
.donate-form-card__head { margin-bottom: 1.6rem; }
.donate-form-card__head h2 { font-weight: 900; font-size: 1.8rem; color: var(--tbhi-purple); }
.donate-form-card__head p { color: #8a83a0; margin-top: .25rem; }
.donate-form-card .label { color: var(--tbhi-ink); font-weight: 700; }
.donate-form-card .req { color: var(--tbhi-pink); }
.donate-form-card .input {
    border: 1.5px solid #e2dcec;
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.donate-form-card .input:focus {
    border-color: var(--tbhi-magenta);
    box-shadow: 0 0 0 3px rgba(157, 50, 140, .12);
    outline: none;
}
.donate-form-card .icon.is-left { color: var(--tbhi-magenta); }
.donate-form-card .field { margin-bottom: 1.15rem; }
.donate-submit { width: 100%; justify-content: center; margin-top: .8rem; font-size: 1.08rem; padding: 1em 1.6em; }
.donate-form-card__foot { text-align: center; margin-top: 1.1rem; color: #8a83a0; font-size: .92rem; }
.donate-form-card__foot a { color: var(--tbhi-magenta); font-weight: 700; }

@media (max-width: 1023px) {
    .donate .column.is-5 { margin-bottom: 2.5rem; }
}


/* ============================================================
   SITE FOOTER  (includes/footer.jinja)
   ============================================================ */
.site-footer {
    background: linear-gradient(150deg, #160748 0%, var(--tbhi-purple) 55%, #3a1170 100%);
    color: #fff;
    margin: 4rem -1rem 0;          /* bleed past the body's p-4 padding */
    padding: 3.5rem 1rem 1.5rem;
    border-radius: 30px 30px 0 0;
}
.site-footer__top {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    justify-content: space-between;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.site-footer__brand { max-width: 320px; }
.site-footer__logo {
    display: inline-flex;
    background: #fff;
    border-radius: 14px;
    padding: .55rem .8rem;
}
.site-footer__logo img { max-height: 40px; display: block; }
.site-footer__mission { margin-top: 1.1rem; color: rgba(255, 255, 255, .72); line-height: 1.6; font-size: .98rem; }
.site-footer__social { display: flex; gap: .6rem; margin-top: 1.3rem; }
.site-footer__social a {
    width: 2.5rem; height: 2.5rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    transition: background .16s ease, transform .16s ease;
}
.site-footer__social a:hover { background: var(--tbhi-pink); transform: translateY(-3px); }
.site-footer__social .ic { width: 1.2rem; height: 1.2rem; }

.site-footer__links {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 1.5rem 2rem;
}
.footer-col h4 {
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tbhi-pink);
    margin-bottom: 1rem;
}
.footer-col a {
    display: block;
    color: rgba(255, 255, 255, .75);
    padding: .35rem 0;
    font-size: .95rem;
    transition: color .14s ease, padding-left .14s ease;
}
.footer-col a:hover { color: #fff; padding-left: .25rem; }

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .6rem;
    padding-top: 1.5rem;
    color: rgba(255, 255, 255, .6);
    font-size: .9rem;
}
.site-footer__made { display: flex; align-items: center; gap: .4em; }
.site-footer__made .ic { width: 1em; height: 1em; color: var(--tbhi-pink); fill: var(--tbhi-pink); }

@media (max-width: 768px) {
    .site-footer__links { grid-template-columns: repeat(2, 1fr); }
    .site-footer { border-radius: 22px 22px 0 0; }
}


/* ============================================================
   DIRECTORATES PAGE  (directorates.html)
   ============================================================ */
.dir-hero { text-align: center; padding: 2.5rem 0 3rem; max-width: 760px; }
.dir-hero { margin-left: auto; margin-right: auto; }

.dir-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.6rem;
    margin-bottom: 4rem;
}
.dir-card {
    background: #fff;
    border: 1px solid #efeaf6;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 14px 34px -22px rgba(30, 7, 95, .4);
    transition: transform .2s ease, box-shadow .2s ease;
    border-top: 4px solid var(--accent);
}
.dir-card:hover { transform: translateY(-6px); box-shadow: 0 26px 48px -22px rgba(30, 7, 95, .5); }
.dir-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.dir-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.dir-card:hover .dir-card__media img { transform: scale(1.06); }
.dir-card__icon {
    position: absolute;
    bottom: -1.4rem; left: 1.3rem;
    width: 2.9rem; height: 2.9rem;
    display: grid; place-items: center;
    border-radius: 14px;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 12px 22px -10px rgba(0, 0, 0, .5);
}
.dir-card__icon .ic { width: 1.5rem; height: 1.5rem; }
.dir-card__body { padding: 2rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.dir-card__title { font-size: 1.3rem; font-weight: 800; color: var(--tbhi-ink); line-height: 1.2; }
.dir-card__text { color: #5b5470; line-height: 1.6; font-size: .96rem; margin: .7rem 0 1.3rem; }
.dir-card__link {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: .4em;
    font-weight: 800;
    color: var(--accent);
}
.dir-card__link .ic { transition: transform .15s ease; }
.dir-card__link:hover .ic { transform: translateX(4px); }

.dir-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: linear-gradient(120deg, var(--tbhi-purple), var(--tbhi-magenta));
    border-radius: 24px;
    padding: 2.5rem clamp(1.5rem, 4vw, 3rem);
    margin-bottom: 1rem;
}
.dir-cta h2 { color: #fff; font-weight: 900; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; }
.dir-cta p { color: rgba(255, 255, 255, .85); margin-top: .4rem; font-size: 1.05rem; }
.dir-cta .lp-cta-row { margin-top: 0; }
@media (max-width: 768px) { .dir-cta { flex-direction: column; align-items: flex-start; } }


/* ============================================================
   SUBMIT A NEED  (needs.html)
   ============================================================ */
.needs-intro__title {
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 2.9rem);
    line-height: 1.08;
    color: var(--tbhi-purple);
    margin: 1rem 0 .8rem;
}
.needs-intro__sub { color: #5b5470; font-size: 1.1rem; line-height: 1.65; }

.needs-journey { margin-top: 2.2rem; }
.needs-journey li { position: relative; display: flex; gap: 1rem; padding-bottom: 1.7rem; }
.needs-journey li:last-child { padding-bottom: 0; }
.needs-journey li::before {
    content: "";
    position: absolute;
    left: 1.05rem; top: 2.3rem; bottom: -.1rem;
    width: 2px;
    background: #e2dcec;
}
.needs-journey li:last-child::before { display: none; }
.needs-journey__num {
    flex: 0 0 auto;
    width: 2.1rem; height: 2.1rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: linear-gradient(120deg, var(--tbhi-magenta), var(--tbhi-purple));
    color: #fff;
    font-weight: 900;
    position: relative;
    z-index: 1;
    box-shadow: 0 8px 16px -8px rgba(157, 50, 140, .7);
}
.needs-journey strong { display: block; color: var(--tbhi-ink); font-size: 1.05rem; }
.needs-journey p { color: #6b6480; font-size: .92rem; margin-top: .15rem; line-height: 1.5; }

/* segmented control (kind of help) */
.seg { display: flex; flex-wrap: wrap; gap: .5rem; }
.seg button {
    flex: 1 1 30%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    padding: .75em .5em;
    border: 1.5px solid #e2dcec;
    background: #fff;
    border-radius: 12px;
    font-weight: 700;
    font-size: .9rem;
    color: #5b5470;
    cursor: pointer;
    transition: all .15s ease;
}
.seg button:hover { border-color: var(--tbhi-magenta); color: var(--tbhi-magenta); }
.seg button.is-active { background: var(--tbhi-purple); border-color: var(--tbhi-purple); color: #fff; }
.seg .ic { width: 1em; height: 1em; }

/* textarea + select inside the form card */
.donate-form-card .textarea {
    border: 1.5px solid #e2dcec;
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.donate-form-card .textarea:focus {
    border-color: var(--tbhi-magenta);
    box-shadow: 0 0 0 3px rgba(157, 50, 140, .12);
    outline: none;
}
.donate-form-card .select select {
    border: 1.5px solid #e2dcec;
    border-radius: 12px;
}
.donate-form-card .select select:focus {
    border-color: var(--tbhi-magenta);
    box-shadow: 0 0 0 3px rgba(157, 50, 140, .12);
}
.donate-form-card .select:not(.is-multiple):not(.is-loading)::after { border-color: var(--tbhi-magenta); }

.needs-divider { border: none; border-top: 1px solid #efeaf6; margin: 1.7rem 0 1.2rem; }
.needs-section-label {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #a59fb6;
    margin-bottom: 1rem;
}