/* ===================================================================
   THANDIWE - shared custom styles (used by index, about, contact ...)
   Colours are sampled from the Thandiwe logo. Placeholder photography
   stands in for the authentic Middelburg / Eastern Cape imagery.
==================================================================== */
:root {
    /* accents sampled directly from the Thandiwe logo */
    --tw-navy: #123E6B;
    --tw-green: #2A7A38;
    --tw-gold: #E0A423;
    --tw-orange: #C1521E;
    --tw-purple: #5B1A5E;
    --tw-teal: #1B6E7D;
}

/* rainbow accent echoing the logo lettering */
.tw-rainbow {
    height: 5px; width: 100%;
    background: linear-gradient(90deg,
        var(--tw-navy) 0%, var(--tw-navy) 16%,
        var(--tw-green) 16%, var(--tw-green) 33%,
        var(--tw-gold) 33%, var(--tw-gold) 50%,
        var(--tw-orange) 50%, var(--tw-orange) 66%,
        var(--tw-purple) 66%, var(--tw-purple) 83%,
        var(--tw-teal) 83%, var(--tw-teal) 100%);
}
.tw-rainbow-line { height: 4px; width: 70px; border-radius: 4px; margin-top: 14px;
    background: linear-gradient(90deg, var(--tw-navy), var(--tw-green), var(--tw-gold), var(--tw-orange), var(--tw-purple), var(--tw-teal)); }
.text-center .tw-rainbow-line { margin-left: auto; margin-right: auto; }

body { color: #3d4448; }

/* italic emphasis words (Josefin Sans / body italics loaded via the font link) */
em, .tw-em { font-style: italic; font-weight: inherit; }

/* organisation slogan */
.tw-slogan { color: var(--bs-primary) !important; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; margin-bottom: 0; }
.tw-topbar-slogan { font-size: 11px; letter-spacing: 1.5px; margin-top: 3px; line-height: 1.1; }

/* ---- Top bar ---- */
.tw-topbar { background: #ffffff; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.tw-logo { height: 66px; width: auto; }
@media (max-width: 575.98px) { .tw-logo { height: 50px; } }

/* ---- Navbar (fit 8 items) ---- */
.navbar .navbar-nav .nav-link { margin-right: 16px; font-size: 15px; letter-spacing: .3px; }
/* navy nav bar: light links that turn gold on hover / active */
.navbar .navbar-nav .nav-link { color: rgba(255,255,255,.82); }
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active { color: var(--bs-primary); }
.navbar h4 { color: #fff; }
@media (min-width: 992px) and (max-width: 1199px) {
    .navbar .navbar-nav .nav-link { margin-right: 11px; font-size: 14px; }
}
.tw-donate-btn { letter-spacing: 1px; font-size: 14px; }
.navbar .dropdown-menu .dropdown-header { text-transform: uppercase; letter-spacing: 1px; font-size: 12px; color: var(--tw-teal); font-weight: 700; }

/* ---- Hero ---- */
.tw-hero .carousel-text h1 { font-weight: 700; }
.tw-badge-loc {
    display: inline-block; background: var(--bs-secondary); color: #fff;
    padding: 6px 18px; border-radius: 30px; font-size: 13px;
    letter-spacing: 2px; text-transform: uppercase; margin-bottom: 22px;
}
.tw-hero .carousel-img img { border-radius: 6px; box-shadow: 0 20px 45px rgba(0,0,0,.18); }
/* keep the carousel arrows from overlapping hero content on small screens */
@media (max-width: 991.98px) { .header-carousel .owl-nav { display: none !important; } }

/* ---- Section eyebrow ---- */
.tw-eyebrow { text-transform: uppercase; letter-spacing: 3px; color: var(--bs-secondary); font-weight: 700; font-size: 14px; }

/* ---- Pathway verb cards (LEARN / DISCOVER / GROW / THRIVE / LEAD) ---- */
.tw-verb {
    text-align: center; padding: 30px 16px; background: #fff; height: 100%;
    box-shadow: 0 0 30px rgba(0,0,0,.05); transition: .4s; border-bottom: 3px solid transparent;
}
.tw-verb:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(0,0,0,.1); }
.tw-verb .ic {
    width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; margin: 0 auto 18px; color: #fff; font-size: 27px;
}
.tw-verb h5 { text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.tw-verb p { font-size: 14px; margin-bottom: 0; }

/* ---- Programme pillars ---- */
.tw-pillar {
    position: relative; background: #fff; padding: 40px 30px 34px; height: 100%;
    box-shadow: 0 0 30px rgba(0,0,0,.05); transition: .4s; overflow: hidden;
    border-top: 4px solid var(--bs-primary);
}
.tw-pillar:hover { box-shadow: 0 16px 38px rgba(0,0,0,.12); transform: translateY(-5px); }
.tw-pillar .num {
    position: absolute; top: 6px; right: 20px; font-size: 66px; font-weight: 700;
    color: rgba(0,0,0,.04); font-family: 'Josefin Sans', sans-serif; line-height: 1;
}
.tw-pillar .ic { font-size: 36px; margin-bottom: 18px; }
.tw-pillar h4 { margin-bottom: 12px; }
.tw-pillar p { font-size: 15px; margin-bottom: 0; }

/* ---- Featured programme (Ballroom) ---- */
.tw-feature-tag {
    display: inline-block; background: var(--bs-primary); color: var(--bs-dark);
    font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    font-size: 12px; padding: 6px 16px; margin-bottom: 18px;
}
.tw-highlights { display: flex; gap: 14px; flex-wrap: wrap; margin: 22px 0; }
.tw-highlights .h {
    flex: 1 1 90px; text-align: center; background: #fff; border: 1px solid #eee;
    padding: 16px 8px; border-radius: 6px;
}
.tw-highlights .h i { font-size: 22px; color: var(--bs-primary); margin-bottom: 8px; display: block; }
.tw-highlights .h span { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--bs-secondary); font-weight: 600; }

/* ---- Impact numbers band ---- */
.tw-impact {
    background: linear-gradient(rgba(18,62,107,.95), rgba(27,110,125,.95)), url(../img/bg.jpg) center center;
    background-size: cover;
}
.tw-stat { text-align: center; padding: 14px 6px; }
.tw-stat h2 { font-size: 3.1rem; color: var(--bs-primary); font-family: 'Josefin Sans', sans-serif; margin-bottom: 4px; line-height: 1; }
.tw-stat > span { display: block; color: #fff; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; margin-top: 6px; }

/* ---- The Thandiwe Pathway (flow) ---- */
.tw-flow { display: flex; flex-wrap: nowrap; align-items: stretch; }
.tw-flow-step {
    flex: 1 1 0; min-width: 0; background: #fff; border-radius: 6px; padding: 24px 18px;
    box-shadow: 0 0 30px rgba(0,0,0,.05); text-align: center;
}
.tw-flow-step .n { width: 42px; height: 42px; border-radius: 50%; background: var(--bs-secondary); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-weight: 700; font-family: 'Josefin Sans', sans-serif; }
.tw-flow-step h5 { text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.tw-flow-step ul { list-style: none; padding: 0; margin: 0; font-size: 14px; color: #6a7176; }
.tw-flow-step ul li { padding: 3px 0; }
.tw-flow-sep { display: flex; align-items: center; padding: 0 6px; color: var(--bs-primary); font-size: 22px; }
@media (max-width: 991.98px) {
    .tw-flow { flex-direction: column; }
    .tw-flow-step { width: 100%; }
    .tw-flow-sep { transform: rotate(90deg); padding: 12px 0; justify-content: center; }
}

/* ---- This is Thandiwe band ---- */
.tw-video-band {
    background: linear-gradient(rgba(16,36,61,.78), rgba(16,36,61,.66)), url(../img/tw-community.jpg) center center;
    background-size: cover;
}

/* ---- Story ---- */
.tw-story-img { position: relative; padding: 40px 0 40px 40px; }
.tw-story-img::before { position: absolute; content: ""; top: 0; left: 0; width: calc(60% + 40px); height: 100%; background: var(--bs-primary); z-index: -1; }
.tw-story-quote i { color: var(--bs-primary); }

/* ---- Upcoming event ---- */
.tw-event { display: flex; flex-wrap: wrap; box-shadow: 0 0 30px rgba(0,0,0,.06); background: #fff; }
.tw-event .date { background: var(--bs-secondary); color: #fff; text-align: center; padding: 34px 30px; display: flex; flex-direction: column; justify-content: center; min-width: 190px; }
.tw-event .date .d { font-size: 3rem; font-family: 'Josefin Sans', sans-serif; line-height: 1; }
.tw-event .info { padding: 30px 34px; flex: 1 1 300px; display: flex; flex-direction: column; justify-content: center; }

/* ---- Ways to help ---- */
.tw-help { text-align: center; background: #fff; padding: 36px 24px; height: 100%; box-shadow: 0 0 30px rgba(0,0,0,.05); transition: .4s; }
.tw-help:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(0,0,0,.1); }
.tw-help .ic { width: 80px; height: 80px; border-radius: 50%; background: var(--bs-light); color: var(--bs-secondary); display: flex; align-items: center; justify-content: center; font-size: 30px; margin: 0 auto 20px; transition: .4s; }
.tw-help:hover .ic { background: var(--bs-primary); color: var(--bs-dark); }

/* ---- School partner cards ---- */
.tw-school { background: #fff; height: 100%; box-shadow: 0 0 30px rgba(0,0,0,.05); transition: .4s; overflow: hidden; }
.tw-school:hover { box-shadow: 0 14px 34px rgba(0,0,0,.1); }
.tw-school img { height: 210px; object-fit: cover; width: 100%; }
.tw-school .body { padding: 26px 24px; }
.tw-school .tag { display: inline-block; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--bs-secondary); font-weight: 700; }
.tw-school ul { list-style: none; padding: 0; margin: 14px 0 18px; }
.tw-school ul li { padding: 4px 0; font-size: 14px; }
.tw-school ul li i { color: var(--bs-primary); margin-right: 8px; }

/* colour helpers echoing the logo */
.bg-tw-navy { background: var(--tw-navy) !important; }
.bg-tw-green { background: var(--tw-green) !important; }
.bg-tw-gold { background: var(--tw-gold) !important; }
.bg-tw-orange { background: var(--tw-orange) !important; }
.bg-tw-purple { background: var(--tw-purple) !important; }
.bg-tw-teal { background: var(--tw-teal) !important; }
.text-tw-navy { color: var(--tw-navy) !important; }
.text-tw-green { color: var(--tw-green) !important; }
.text-tw-orange { color: var(--tw-orange) !important; }
.text-tw-purple { color: var(--tw-purple) !important; }

/* ===================================================================
   About / Contact page styles
==================================================================== */

/* page header banner */
.tw-page-header {
    position: relative;
    background: linear-gradient(rgba(16,36,61,.88), rgba(18,62,107,.80)), url(../img/tw-community.jpg) center center;
    background-size: cover;
    padding: 84px 0;
    color: #fff;
}
.tw-page-header h1 { color: #fff; }
.tw-page-header .tw-rainbow-line { margin-top: 18px; }
.tw-page-header .breadcrumb { margin: 0; padding: 0; background: transparent; justify-content: center; }
.tw-page-header .breadcrumb-item,
.tw-page-header .breadcrumb-item a { color: rgba(255,255,255,.85); text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; }
.tw-page-header .breadcrumb-item a:hover { color: var(--bs-primary); }
.tw-page-header .breadcrumb-item.active { color: var(--bs-primary); }
.tw-page-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.5); }

/* vision / mission cards */
.tw-vm { background: #fff; padding: 40px 34px; height: 100%; box-shadow: 0 0 30px rgba(0,0,0,.05); border-top: 4px solid var(--bs-primary); }
.tw-vm .ic { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; margin-bottom: 22px; }
.tw-vm h3 { margin-bottom: 14px; }
.tw-vm p { margin-bottom: 0; }

/* who-we-are image treatment */
.tw-about-img { position: relative; }
.tw-about-img img { border-radius: 6px; box-shadow: 0 20px 45px rgba(0,0,0,.15); }
.tw-about-img .badge-years {
    position: absolute; right: 20px; bottom: -22px; background: var(--bs-primary); color: var(--bs-dark);
    padding: 16px 22px; border-radius: 6px; text-align: center; box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.tw-about-img .badge-years strong { font-family: 'Josefin Sans', sans-serif; font-size: 1.8rem; display: block; line-height: 1; }
.tw-about-img .badge-years span { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }

/* values */
.tw-value { text-align: center; background: #fff; padding: 34px 22px; height: 100%; box-shadow: 0 0 30px rgba(0,0,0,.05); transition: .4s; border-bottom: 3px solid transparent; }
.tw-value:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(0,0,0,.1); }
.tw-value .ic { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; margin: 0 auto 18px; }
.tw-value h5 { margin-bottom: 10px; }
.tw-value p { font-size: 14px; margin-bottom: 0; }

/* story numbered points */
.tw-story-point { display: flex; align-items: flex-start; margin-bottom: 22px; }
.tw-story-point .n { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--bs-light); color: var(--bs-secondary); font-weight: 700; font-family: 'Josefin Sans', sans-serif; display: flex; align-items: center; justify-content: center; margin-right: 18px; }
.tw-story-point h5 { margin-bottom: 4px; }
.tw-story-point p { margin: 0; font-size: 15px; }

/* leadership placeholders */
.tw-leader { text-align: center; background: #fff; padding: 34px 20px; height: 100%; box-shadow: 0 0 30px rgba(0,0,0,.05); transition: .4s; }
.tw-leader:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(0,0,0,.1); }
.tw-leader .avatar { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; background: var(--bs-light); color: var(--bs-secondary); font-size: 38px; border: 3px solid var(--bs-primary); }
.tw-leader h5 { margin-bottom: 4px; }
.tw-leader .role { color: var(--bs-primary); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.tw-leader p { font-size: 14px; margin: 12px 0 0; color: #6a7176; }

/* contact info cards */
.tw-contact-info { display: flex; align-items: flex-start; background: #fff; padding: 26px 24px; box-shadow: 0 0 30px rgba(0,0,0,.05); height: 100%; transition: .4s; }
.tw-contact-info:hover { box-shadow: 0 14px 34px rgba(0,0,0,.1); }
.tw-contact-info .ic { flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%; background: var(--bs-secondary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-right: 16px; }
.tw-contact-info h6 { text-transform: uppercase; letter-spacing: 1px; color: var(--bs-secondary); font-size: 13px; margin-bottom: 4px; }
.tw-contact-info p { margin: 0; }

/* contact form */
.tw-form { background: #fff; padding: 40px; box-shadow: 0 0 30px rgba(0,0,0,.05); }
.tw-form .form-control { background: var(--bs-light); border: 1px solid #eadfbf; }
.tw-form .form-control:focus { box-shadow: none; border-color: var(--bs-primary); }

/* map */
.tw-map { box-shadow: 0 0 30px rgba(0,0,0,.06); line-height: 0; }
.tw-map iframe { width: 100%; height: 430px; border: 0; display: block; }
.tw-map .placeholder-map { width: 100%; height: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: linear-gradient(rgba(18,62,107,.9), rgba(27,110,125,.9)), url(../img/bg.jpg) center center; background-size: cover; color: #fff; line-height: 1.5; padding: 20px; }
.tw-map .placeholder-map i { font-size: 46px; color: var(--bs-primary); margin-bottom: 16px; }

/* generic CTA band */
.tw-cta-band { background: linear-gradient(rgba(18,62,107,.94), rgba(18,62,107,.94)), url(../img/bg.jpg) center center; background-size: cover; }

/* ===================================================================
   Programmes / Impact / Stories / Get Involved / News / Donate
==================================================================== */

/* programme card */
.tw-prog { background:#fff; height:100%; box-shadow:0 0 30px rgba(0,0,0,.05); transition:.4s; overflow:hidden; display:flex; flex-direction:column; }
.tw-prog:hover { box-shadow:0 14px 34px rgba(0,0,0,.1); transform:translateY(-4px); }
.tw-prog .top { padding:28px 26px 0; }
.tw-prog .ic { width:64px; height:64px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:26px; margin-bottom:16px; }
.tw-prog .tagline { color:var(--bs-primary); font-size:12px; text-transform:uppercase; letter-spacing:1.5px; font-weight:700; }
.tw-prog h4 { margin:2px 0 0; }
.tw-prog .body { padding:14px 26px 26px; display:flex; flex-direction:column; flex-grow:1; }
.tw-prog p { font-size:14.5px; }
.tw-prog .cta { margin-top:auto; padding-top:8px; }

/* pillar heading */
.tw-pillar-head { display:flex; align-items:center; margin-bottom:10px; }
.tw-pillar-head .pn { font-family:'Josefin Sans',sans-serif; font-size:2.6rem; font-weight:700; color:var(--bs-primary); margin-right:18px; line-height:1; }
.tw-pillar-head h2 { margin:0; }

/* meals / mini counters */
.tw-mini { text-align:center; padding:10px; }
.tw-mini h2 { font-family:'Josefin Sans',sans-serif; color:var(--bs-primary); font-size:2.6rem; margin-bottom:2px; line-height:1; }
.tw-mini span { font-size:13px; text-transform:uppercase; letter-spacing:1px; color:var(--bs-secondary); font-weight:600; }

/* metric card (impact) */
.tw-metric { background:#fff; padding:26px 20px; text-align:center; height:100%; box-shadow:0 0 30px rgba(0,0,0,.05); transition:.4s; }
.tw-metric:hover { box-shadow:0 14px 34px rgba(0,0,0,.1); }
.tw-metric .ic { font-size:28px; margin-bottom:12px; }
.tw-metric h5 { margin-bottom:4px; }
.tw-metric span { font-size:13px; color:#6a7176; }
.tw-metric .tag { display:inline-block; margin-top:8px; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--bs-secondary); background:var(--bs-light); padding:3px 10px; border-radius:20px; font-weight:700; }

/* calendar */
.tw-cal { background:#fff; height:100%; box-shadow:0 0 30px rgba(0,0,0,.05); border-top:4px solid var(--bs-primary); padding:28px 26px; }
.tw-cal h4 { text-transform:uppercase; letter-spacing:1px; }
.tw-cal ul { list-style:none; padding:0; margin:14px 0 0; }
.tw-cal ul li { padding:7px 0; font-size:14px; border-bottom:1px solid #f2f2f2; }
.tw-cal ul li:last-child { border-bottom:0; }
.tw-cal ul li i { color:var(--bs-primary); margin-right:8px; }

/* donation designation options */
.tw-give-opt { display:block; cursor:pointer; margin:0; height:100%; }
.tw-give-opt input { position:absolute; opacity:0; }
.tw-give-opt .box { background:#fff; border:2px solid #eee; border-radius:10px; padding:18px 12px; text-align:center; transition:.25s; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.tw-give-opt .box i { font-size:22px; color:var(--bs-secondary); margin-bottom:10px; }
.tw-give-opt .box span { font-size:14px; font-weight:600; line-height:1.3; }
.tw-give-opt:hover .box { border-color:var(--bs-primary); }
.tw-give-opt input:checked + .box { border-color:var(--bs-primary); background:var(--bs-light); }
.tw-give-opt input:focus-visible + .box { outline:2px solid var(--bs-primary); }

/* frequency toggle */
.tw-freq { display:inline-flex; background:var(--bs-light); border-radius:40px; padding:5px; }
.tw-freq label { margin:0; }
.tw-freq input { position:absolute; opacity:0; }
.tw-freq label span { display:block; padding:10px 30px; border-radius:40px; font-weight:600; cursor:pointer; color:var(--bs-secondary); transition:.25s; }
.tw-freq input:checked + span { background:var(--bs-primary); color:var(--bs-dark); }

/* simple list with check marks */
.tw-checklist { list-style:none; padding:0; margin:0; }
.tw-checklist li { padding:8px 0; border-bottom:1px solid #f2f2f2; }
.tw-checklist li i { color:var(--bs-primary); margin-right:10px; }

/* ===================================================================
   About page - enhanced, livelier layout
==================================================================== */
.tw-page-header.tw-ph-about {
    padding: 96px 0;
    background: linear-gradient(rgba(14,42,68,.90), rgba(18,62,107,.82)), url(../img/tw-hero.jpg) center 28% / cover;
}

/* Who we are - layered media */
.tw-about-media { position: relative; margin: 12px 34px 34px 12px; }
.tw-about-media > img { border-radius: 12px; box-shadow: 0 26px 54px rgba(0,0,0,.20); position: relative; z-index: 2; display: block; width: 100%; }
.tw-about-media .accent-shape { position: absolute; top: -20px; left: -20px; width: 130px; height: 130px; border-radius: 14px; background: linear-gradient(135deg, var(--tw-gold), var(--tw-orange)); z-index: 1; }
.tw-about-media .accent-dots { position: absolute; right: -16px; top: 42%; width: 92px; height: 92px; z-index: 1; background-image: radial-gradient(var(--tw-teal) 2px, transparent 2px); background-size: 16px 16px; opacity: .55; }
.tw-about-media .float-card { position: absolute; right: -12px; bottom: -24px; z-index: 3; background: #fff; border-radius: 12px; box-shadow: 0 20px 44px rgba(0,0,0,.18); padding: 16px 20px; display: flex; align-items: center; gap: 14px; border-left: 5px solid var(--bs-primary); }
.tw-about-media .float-card .n { font-family: 'Josefin Sans', sans-serif; font-size: 2.1rem; color: var(--bs-secondary); line-height: 1; }
.tw-about-media .float-card small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #8a9096; max-width: 130px; line-height: 1.4; }
@media (max-width: 575.98px) { .tw-about-media { margin: 12px; } .tw-about-media .float-card { position: static; margin-top: 16px; } .tw-about-media .accent-shape, .tw-about-media .accent-dots { display: none; } }

/* feature chips */
.tw-feature-list { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.tw-feature-list .item { display: flex; align-items: center; gap: 14px; }
.tw-feature-list .item .chip { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; }
.tw-feature-list .item p { margin: 0; font-weight: 600; color: var(--bs-dark); }

/* rainbow line as inline-block helper */
span.tw-rainbow-line { display: inline-block; }

/* Vision / Mission bold panels */
.tw-vm2 { position: relative; border-radius: 14px; overflow: hidden; padding: 46px 40px; height: 100%; color: #fff; box-shadow: 0 18px 44px rgba(0,0,0,.16); }
.tw-vm2 .ic { width: 72px; height: 72px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 22px; background: rgba(255,255,255,.16); color: #fff; }
.tw-vm2 h3 { color: #fff; margin-bottom: 14px; }
.tw-vm2 p { opacity: .93; margin-bottom: 0; }
.tw-vm2 .wm { position: absolute; right: -6px; bottom: -34px; font-size: 9rem; opacity: .10; }
.tw-vm2.navy { background: linear-gradient(135deg, #0e2a44, #123E6B); }
.tw-vm2.teal { background: linear-gradient(135deg, #14525f, #1B6E7D); }

/* Values enhanced */
.tw-value { border-radius: 10px; border-top: 4px solid transparent; }
.tw-value .ic { box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.tw-value.v-gold { border-top-color: var(--tw-gold); }
.tw-value.v-orange { border-top-color: var(--tw-orange); }
.tw-value.v-navy { border-top-color: var(--tw-navy); }
.tw-value.v-green { border-top-color: var(--tw-green); }
.tw-value.v-teal { border-top-color: var(--tw-teal); }
.tw-value.v-purple { border-top-color: var(--tw-purple); }

/* Brand message band */
.tw-brandmsg { position: relative; overflow: hidden; background: linear-gradient(120deg, #0e2a44, #123E6B 55%, #1B6E7D); }
.tw-brandmsg::before { content: ""; position: absolute; inset: 0; background: url(../img/bg-footer.jpg) center/cover; opacity: .07; }
.tw-brandmsg .inner { position: relative; z-index: 1; }
.tw-brandmsg .qmark { font-family: 'Josefin Sans', sans-serif; font-size: 4rem; line-height: .4; color: var(--bs-primary); }

/* Story timeline */
.tw-timeline { position: relative; }
.tw-timeline::before { content: ""; position: absolute; left: 28px; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: linear-gradient(to bottom, var(--tw-navy), var(--tw-green), var(--tw-gold), var(--tw-orange), var(--tw-purple), var(--tw-teal)); }
.tw-tl-item { position: relative; display: flex; gap: 22px; padding-bottom: 26px; }
.tw-tl-item:last-child { padding-bottom: 0; }
.tw-tl-item .n { flex-shrink: 0; width: 58px; height: 58px; border-radius: 50%; background: #fff; border: 3px solid var(--bs-primary); color: var(--bs-secondary); display: flex; align-items: center; justify-content: center; font-family: 'Josefin Sans', sans-serif; font-weight: 700; font-size: 1.35rem; position: relative; z-index: 2; box-shadow: 0 6px 16px rgba(0,0,0,.10); }
.tw-tl-item h5 { margin-bottom: 5px; }
.tw-tl-item p { margin: 0; }

/* framed story image */
.tw-story-frame { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,.18); }
.tw-story-frame img { display: block; width: 100%; }
.tw-story-frame .tag { position: absolute; left: 0; bottom: 0; background: var(--bs-primary); color: var(--bs-dark); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 12px; padding: 8px 16px; }

/* leadership ring accents */
.tw-leader.l-gold .avatar { border-color: var(--tw-gold); }
.tw-leader.l-teal .avatar { border-color: var(--tw-teal); }
.tw-leader.l-orange .avatar { border-color: var(--tw-orange); }
.tw-leader.l-purple .avatar { border-color: var(--tw-purple); }

/* ===================================================================
   Impact page - cleaner, photo-led (fewer icons)
==================================================================== */
.tw-page-header.tw-ph-impact {
    background: linear-gradient(rgba(13,32,54,.88), rgba(18,62,107,.82)), url(../img/banner-impact.jpg) center 32% / cover;
    padding: 92px 0;
}
.tw-round-img { border-radius: 12px; box-shadow: 0 24px 50px rgba(0,0,0,.16); width: 100%; display: block; }

/* impact-in-focus photo cards */
.tw-focus { background: #fff; height: 100%; box-shadow: 0 0 30px rgba(0,0,0,.06); transition: .4s; overflow: hidden; border-radius: 8px; }
.tw-focus:hover { box-shadow: 0 16px 38px rgba(0,0,0,.12); transform: translateY(-4px); }
.tw-focus .img { position: relative; height: 220px; overflow: hidden; }
.tw-focus .img img { width: 100%; height: 100%; object-fit: cover; transition: .5s; }
.tw-focus:hover .img img { transform: scale(1.05); }
.tw-focus .img .label { position: absolute; left: 0; bottom: 0; background: var(--bs-primary); color: var(--bs-dark); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 11px; padding: 7px 14px; }
.tw-focus .body { padding: 24px 26px 28px; }
.tw-focus .body h4 { margin-bottom: 10px; }
.tw-focus .body p { font-size: 14.5px; margin: 0; }

/* what-we-measure clean list (no big icon circles) */
.tw-measure-item { background: #fff; border-left: 3px solid var(--bs-primary); border-radius: 6px; padding: 15px 18px; height: 100%; box-shadow: 0 0 24px rgba(0,0,0,.04); }
.tw-measure-item h6 { margin: 0 0 2px; font-size: 15px; color: var(--bs-dark); }
.tw-measure-item span { font-size: 12px; color: #8a9096; text-transform: uppercase; letter-spacing: .5px; }

/* ===================================================================
   Programmes page - photo cards (extends .tw-focus with tagline + CTA)
==================================================================== */
.tw-focus { display: flex; flex-direction: column; }
.tw-focus .body { display: flex; flex-direction: column; flex-grow: 1; }
.tw-focus .body .tagline { color: var(--bs-primary); font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; margin-bottom: 4px; }
.tw-focus .body .cta { margin-top: auto; padding-top: 14px; }
.tw-focus .body p { color: #5c636a; }

/* ===================================================================
   Softer look - rounded corners across the whole site
   (appended last so it relaxes the sharper radii set earlier)
==================================================================== */
/* buttons & icon tiles */
.btn { border-radius: 8px; }
.btn-square, .btn-sm-square { border-radius: 10px; }
.btn-lg-square { border-radius: 12px; }
.navbar-toggler { border-radius: 8px; }

/* form fields */
.form-control, .form-select { border-radius: 8px !important; }

/* cards, panels & media -> one soft, consistent radius */
.tw-focus, .tw-school, .tw-prog, .tw-help, .tw-verb, .tw-value, .tw-vm,
.tw-vm2, .tw-metric, .tw-measure-item, .tw-leader, .tw-cal, .tw-pillar,
.tw-event, .tw-flow-step, .tw-story-frame, .tw-round-img, .tw-form,
.tw-contact-info, .tw-map, .tw-hero .carousel-img img,
.bg-secondary.p-5, .bg-secondary.p-4 { border-radius: 14px; }

/* clip flush content/images to the rounded corners */
.tw-focus, .tw-school, .tw-event, .tw-story-frame, .tw-map { overflow: hidden; }
.row.g-0.shadow-sm { border-radius: 16px; overflow: hidden; }

/* softer dropdown */
.navbar .dropdown-menu { border-radius: 12px; overflow: hidden; padding-top: 6px; padding-bottom: 6px; }

/* small tags / chips */
.tw-feature-tag { border-radius: 6px; }
.tw-highlights .h { border-radius: 10px; }
.tw-focus .img .label { border-radius: 0 10px 0 0; }

/* ===================================================================
   Homepage impact band - photo backdrop, icons + dashed number boxes
==================================================================== */
.tw-impact-photo { position: relative; background: url(../img/tw-hero.jpg) center center / cover no-repeat; }
.tw-impact-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(13,35,61,.84), rgba(18,62,107,.78)); }
.tw-impact-photo > .container { position: relative; z-index: 1; }
.tw-istat { text-align: center; padding: 34px 18px 30px; border: 1px solid rgba(255,255,255,.22); border-radius: 14px; height: 100%; transition: .4s; }
.tw-istat:hover { border-color: rgba(224,164,35,.65); background: rgba(255,255,255,.04); }
.tw-istat .ic { font-size: 40px; color: #fff; margin-bottom: 18px; line-height: 1; }
.tw-istat h5 { color: #fff; margin-bottom: 18px; font-size: 18px; }
.tw-istat .num { display: inline-block; min-width: 118px; border: 2px dashed rgba(255,255,255,.45); border-radius: 8px; padding: 8px 16px; font-family: 'Josefin Sans', sans-serif; font-weight: 700; font-size: 1.9rem; color: var(--bs-primary); line-height: 1; }

/* ===================================================================
   Homepage "Why Thandiwe" counter tiles (gold / navy checkerboard)
==================================================================== */
.tw-whytiles { border-radius: 16px; overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,.10); }
.tw-tile { text-align: center; padding: 46px 20px; height: 100%; transition: .35s; }
.tw-tile .ic { font-size: 34px; margin-bottom: 14px; line-height: 1; }
.tw-tile h2 { font-family: 'Josefin Sans', sans-serif; font-size: 3rem; margin: 0 0 4px; line-height: 1; }
.tw-tile span { font-size: 14px; display: block; }
.tw-tile.gold { background: var(--tw-gold); }
.tw-tile.gold .ic { color: var(--tw-navy); }
.tw-tile.gold h2, .tw-tile.gold span { color: var(--bs-dark); }
.tw-tile.navy { background: var(--tw-navy); }
.tw-tile.navy .ic { color: var(--bs-primary); }
.tw-tile.navy h2 { color: #fff; }
.tw-tile.navy span { color: rgba(255,255,255,.85); }
.tw-tile:hover { filter: brightness(1.05); }

/* ===================================================================
   Impact page "What we measure" - premium metric cards
==================================================================== */
.tw-mcard { position: relative; background: #fff; border: 1px solid #eef0f2; border-radius: 14px; padding: 26px 26px 24px; height: 100%; overflow: hidden; transition: .4s; }
.tw-mcard:hover { box-shadow: 0 16px 38px rgba(0,0,0,.09); transform: translateY(-4px); border-color: #ecdfbe; }
.tw-mcard .idx { position: absolute; right: 14px; top: 0; font-family: 'Josefin Sans', sans-serif; font-size: 3.6rem; font-weight: 700; color: rgba(18,62,107,.06); line-height: 1; }
.tw-mcard .status { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; color: var(--bs-secondary); margin-bottom: 14px; position: relative; z-index: 1; }
.tw-mcard .status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bs-primary); box-shadow: 0 0 0 4px rgba(224,164,35,.18); }
.tw-mcard.live .status { color: var(--tw-green); }
.tw-mcard.live .status .dot { background: var(--tw-green); box-shadow: 0 0 0 4px rgba(42,122,56,.18); }
.tw-mcard h5 { margin: 0; position: relative; z-index: 1; }

/* ===================================================================
   About "Our Values" - services style (cream intro + icon-tile grid)
==================================================================== */
.text-tw-teal { color: var(--tw-teal) !important; }
.text-tw-gold { color: var(--tw-gold) !important; }
.tw-values-intro { background: linear-gradient(rgba(253,248,234,.78), rgba(253,248,234,.78)), url(../img/bg.jpg) center center / cover; padding: 58px 44px; height: 100%; border-radius: 16px; display: flex; flex-direction: column; justify-content: center; }
.tw-values-intro h2 { margin-bottom: 4px; }
.tw-values-intro p { margin-bottom: 0; color: #5c636a; }
.tw-vitem { padding: 4px 0 6px; height: 100%; }
.tw-vitem .ic { width: 74px; height: 74px; border-radius: 14px; background: var(--bs-light); display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 20px; transition: .4s; }
.tw-vitem:hover .ic { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0,0,0,.08); }
.tw-vitem h4 { margin-bottom: 12px; }
.tw-vitem p { font-size: 15px; margin-bottom: 16px; color: #6a7176; }
.tw-vitem .vline { display: block; height: 2px; width: 100%; background: var(--bs-primary); opacity: .55; }

/* ===================================================================
   Unified gold icons - every accent icon now uses the logo gold
   (appended last so it overrides the earlier per-colour icon styles)
==================================================================== */
:root { --tw-gold-tint: rgba(224,164,35,.12); }

/* 1. bare icon glyphs that were tinted with the other logo colours -> gold */
.text-tw-navy, .text-tw-green, .text-tw-orange,
.text-tw-purple, .text-tw-teal, .text-tw-gold { color: var(--tw-gold) !important; }
.tw-pillar .ic { color: var(--tw-gold); }
.tw-give-opt .box i { color: var(--tw-gold); }
.tw-istat .ic { color: var(--tw-gold); }

/* 2. solid-colour icon tiles (verb cards, partner cards, feature chips)
      -> soft warm tile with a gold glyph: keeps contrast, unifies the colour */
.tw-verb .ic.bg-tw-navy, .tw-verb .ic.bg-tw-green, .tw-verb .ic.bg-tw-gold,
.tw-verb .ic.bg-tw-orange, .tw-verb .ic.bg-tw-purple,
.tw-prog .ic.bg-tw-navy, .tw-prog .ic.bg-tw-green, .tw-prog .ic.bg-tw-gold,
.tw-prog .ic.bg-tw-orange, .tw-prog .ic.bg-tw-teal, .tw-prog .ic.bg-tw-purple,
.tw-feature-list .item .chip {
    background: var(--tw-gold-tint) !important;
    color: var(--tw-gold) !important;
}

/* 3. contact + help icon circles -> same gold treatment */
.tw-contact-info .ic { background: var(--tw-gold-tint) !important; color: var(--tw-gold) !important; }
.tw-help .ic { color: var(--tw-gold); }

/* 4. vision / mission tiles sit on dark panels: keep the frosted tile, gold glyph */
.tw-vm2 .ic { color: var(--tw-gold); }

/* 5. top-bar utility icons -> gold */
.tw-topbar .btn-square.bg-secondary { background: var(--tw-gold-tint) !important; }
.tw-topbar .btn-square.bg-secondary i { color: var(--tw-gold) !important; }

/* ===================================================================
   Page-header banners - per-page photography (Contact / Get Involved / Stories)
==================================================================== */
.tw-page-header.tw-ph-contact {
    background: linear-gradient(rgba(13,32,54,.86), rgba(18,62,107,.80)), url(../img/banner-contact.jpg) center center / cover;
}
.tw-page-header.tw-ph-getinvolved {
    background: linear-gradient(rgba(13,32,54,.84), rgba(18,62,107,.78)), url(../img/banner-get-involved.jpg) center 45% / cover;
}
.tw-page-header.tw-ph-stories {
    background: linear-gradient(rgba(13,32,54,.86), rgba(18,62,107,.80)), url(../img/banner-stories.jpg) center 32% / cover;
}

/* ===================================================================
   Mobile refinements (do not affect the >=992px desktop layout)
==================================================================== */
/* logo sits in the navy bar in place of the old "Menu" label */
.tw-mobile-brand { display: inline-flex; align-items: center; background: #fff; border-radius: 8px; padding: 5px 12px; margin: 0; line-height: 0; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.tw-mobile-brand img { height: 30px; width: auto; }

/* footer wordmark sits on the dark footer -> render it crisp white */
.tw-foot-logo { filter: brightness(0) invert(1); }

@media (max-width: 991.98px) {
    /* the desktop nav gutter (0 90px) crushes the bar on phones -> full width */
    .nav-bar { padding-left: 0; padding-right: 0; }

    /* tidy the collapsed menu: real spacing, dividers, larger tap targets */
    .navbar .navbar-collapse { margin-top: 12px; border-top: 1px solid rgba(255,255,255,.14); padding-top: 6px; }
    .navbar .navbar-nav { margin-top: 0; border-top: 0; }
    .navbar .navbar-nav .nav-link { margin-right: 0; padding: 12px 2px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 16px; }
    .navbar .navbar-nav .dropdown-menu.bg-light { background: rgba(255,255,255,.06) !important; border-radius: 8px; margin: 2px 0 6px !important; border: 0; }
    .navbar .navbar-nav .dropdown-item { color: rgba(255,255,255,.85); padding: 10px 14px; white-space: normal; }
    .navbar .navbar-nav .dropdown-item:hover,
    .navbar .navbar-nav .dropdown-item:focus { background: rgba(255,255,255,.10); color: #fff; }
    .navbar .tw-donate-btn { display: block; text-align: center; }

    /* calmer heading sizes on small screens */
    .tw-hero .carousel-text h1 { font-size: 2rem; line-height: 1.2; }
    .tw-page-header h1.display-4 { font-size: 2rem; }
    .display-6 { font-size: 1.6rem; }

    /* softer section + header padding so pages feel less tall on a phone */
    .tw-page-header { padding: 52px 0 !important; }
    .container-fluid.py-5, .container.py-5 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
}

@media (max-width: 575.98px) {
    /* hero buttons go full width and stack cleanly instead of crowding */
    .tw-hero .carousel-text .d-flex.flex-wrap .btn { flex: 1 1 100%; margin-right: 0 !important; }
    .tw-hero .carousel-text h1 { font-size: 1.7rem; }
    .display-4 { font-size: 1.9rem; }
    .tw-badge-loc { letter-spacing: 1px; font-size: 11px; }
    /* keep media flush to screen edges tidy */
    .tw-about-media { margin: 8px; }
}