/* ============================================
   Page Hero
   ============================================ */
.page-hero {
    background: linear-gradient(150deg, var(--gpcpb-blue-dark) 0%, var(--gpcpb-blue) 100%);
    color: var(--gpcpb-white);
    padding: 56px 24px;
    border-bottom: 5px solid var(--gpcpb-gold);
}

.page-hero h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 2.4rem;
    color: var(--gpcpb-white);
    margin-bottom: 12px;
}

.page-hero p {
    max-width: 760px;
    color: rgba(255,255,255,0.88);
    font-size: 1rem;
    line-height: 1.75;
}

.page-hero--alert {
    border-bottom-color: var(--gpcpb-red);
}

/* ============================================
   Section Intro
   ============================================ */
.section-intro {
    color: var(--gpcpb-grey);
    max-width: 740px;
    margin-bottom: 28px;
    font-size: 0.97rem;
}

.bg-light { background-color: var(--gpcpb-grey-light); }

/* ============================================
   Templates Grid
   ============================================ */
.template-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 24px;
}

.template-card {
    background: var(--gpcpb-white);
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.template-icon {
    font-size: 1.8rem;
    color: var(--gpcpb-blue);
}

.template-info h4 {
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    color: var(--gpcpb-blue-dark);
    margin-bottom: 4px;
    text-transform: uppercase;
}

.template-info p {
    font-size: 0.875rem;
    color: var(--gpcpb-grey);
    margin: 0;
    line-height: 1.5;
}

.btn-download {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: var(--gpcpb-blue);
    color: var(--gpcpb-white) !important;
    padding: 8px 16px;
    border-radius: 3px;
    text-decoration: none;
    margin-top: auto;
    text-align: center;
    transition: background-color 0.2s;
}

.btn-download:hover {
    background-color: var(--gpcpb-blue-dark);
    text-decoration: none;
}

.btn-download.coming-soon {
    background-color: var(--gpcpb-grey);
    cursor: default;
    pointer-events: none;
    opacity: 0.7;
}

/* ============================================
   Remain Functional Grid
   ============================================ */
.rf-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 24px;
}

.rf-card {
    background: var(--gpcpb-white);
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    border-top: 4px solid var(--gpcpb-blue);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rf-card--must    { border-top-color: var(--gpcpb-blue); }
.rf-card--notice  { border-top-color: var(--gpcpb-gold); }
.rf-card--risk    { border-top-color: var(--gpcpb-red); }

.rf-card h4 {
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    color: var(--gpcpb-blue-dark);
    margin-bottom: 4px;
    text-transform: uppercase;
}

.rf-card p,
.rf-card ul {
    font-size: 0.875rem;
    color: var(--gpcpb-grey);
    line-height: 1.6;
    margin: 0;
}

.rf-card ul {
    padding-left: 16px;
}

.rf-card ul li {
    margin-bottom: 4px;
}

.rf-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    border-radius: 12px;
    margin-top: auto;
    width: fit-content;
}

.rf-tag.must   { background-color: var(--gpcpb-blue-light); color: var(--gpcpb-blue-dark); }
.rf-tag.notice { background-color: #fdf8e1; color: #7a5c00; }
.rf-tag.risk   { background-color: #fdecea; color: #8b0000; }

/* ============================================
   Contact & Directory Page
   ============================================ */

.emergency-strip {
    background: linear-gradient(135deg, #071852 0%, #0a2370 55%, #1035A8 100%);
    padding: 22px 0;
    border-top: 4px solid var(--gpcpb-gold);
    border-bottom: 3px solid rgba(10,35,112,0.5);
}
.emergency-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}
.emergency-item {
    text-align: center;
    padding: 8px 40px;
}
.emergency-label {
    display: block;
    font-size: 0.63rem;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
}
.emergency-number {
    font-family: 'Oswald', sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--gpcpb-yellow) !important;
    text-decoration: none;
    letter-spacing: 0.05em;
    display: block;
}
.emergency-number:hover { color: var(--gpcpb-white) !important; text-decoration: none; }
.emergency-divider { width: 1px; height: 44px; background: rgba(255,255,255,0.15); }

.hq-banner {
    background: var(--gpcpb-white);
    border: 1px solid #e0e0e0;
    border-left: 5px solid var(--gpcpb-blue-dark);
    border-radius: 0 6px 6px 0;
    padding: 22px 28px;
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 20px;
    align-items: center;
}
.hq-icon-block {
    width: 52px;
    height: 52px;
    background: var(--gpcpb-blue-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.hq-label { display: inline-block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gpcpb-gold); margin-bottom: 4px; }
.hq-banner h3 { font-family: 'Oswald', sans-serif; font-size: 1.05rem; color: var(--gpcpb-blue-dark); text-transform: uppercase; margin: 0 0 10px; }
.hq-details { display: flex; flex-direction: column; gap: 5px; }
.hq-detail-row { display: flex; align-items: baseline; gap: 8px; font-size: 0.88rem; color: var(--gpcpb-grey); }
.hq-detail-icon { flex-shrink: 0; width: 18px; text-align: center; }
.hq-banner a { color: var(--gpcpb-blue); text-decoration: none; }
.hq-banner a:hover { text-decoration: underline; }

/* Visitor banner */
.visitor-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    background: #f0f4ff;
    border: 1px solid #ccd5f5;
    border-radius: 4px;
    padding: 10px 20px;
    margin-bottom: 28px;
    font-size: 0.8rem;
    color: #444;
}
.visitor-stat { display: flex; align-items: center; gap: 6px; }
.visitor-stat strong { color: var(--gpcpb-blue-dark); font-weight: 700; }
.visitor-divider { width: 1px; height: 16px; background: #b8c4e8; }
.visitor-origins { flex-wrap: wrap; }
.visitor-origins .loc-pct { font-size: .72rem; color: var(--gpcpb-grey); margin-right: 6px; }
.visitor-origins .loc-district { font-size: .72rem; color: var(--gpcpb-grey); font-style: italic; margin: 0 2px; }
.visitor-pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34,197,94,0.5);
    animation: pulse-ring 1.8s ease-out infinite;
    flex-shrink: 0;
}
@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
    70%  { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* Search */
.station-search-wrap { position: relative; margin-bottom: 8px; }
.station-search-input {
    width: 100%;
    padding: 14px 20px;
    font-size: 1rem;
    font-family: 'Open Sans', sans-serif;
    border: 2px solid #d0d0d0;
    border-radius: 4px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.station-search-input:focus { border-color: var(--gpcpb-blue); }
.station-search-input.has-suggestions { border-radius: 4px 4px 0 0; border-color: var(--gpcpb-blue); }
.search-count {
    display: block;
    margin-top: 6px;
    margin-bottom: 14px;
    font-size: 0.82rem;
    color: var(--gpcpb-grey);
    text-align: right;
}

/* Search suggestions dropdown */
.search-suggestions {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 2px solid var(--gpcpb-blue);
    border-top: none;
    border-radius: 0 0 6px 6px;
    z-index: 200;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
.suggestion-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f2f2f2;
    transition: background 0.12s;
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover, .suggestion-item.active { background: #f0f4ff; }
.sug-name { flex: 1; font-size: 0.88rem; font-weight: 600; color: #1a1a1a; }
.sug-name mark { background: #fff3cd; color: inherit; padding: 0 1px; border-radius: 2px; font-style: normal; }
.sug-district {
    display: flex; align-items: center; gap: 5px;
    font-size: 0.73rem; color: #777; white-space: nowrap;
}
.sug-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* Map */
.map-embed-wrap {
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid #d8d8d8;
    margin-bottom: 8px;
    height: 500px;
}
.map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 14px;
    align-items: center;
}
.map-legend-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--gpcpb-grey);
    margin-right: 2px;
}
.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1.5px solid #e0e0e0;
    border-radius: 20px;
    padding: 5px 13px 5px 7px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #222;
    line-height: 1.2;
}
.legend-dot { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; }

/* District sections */
.district-details { margin-bottom: 32px; border-radius: 4px; overflow: hidden; border: 1px solid #e0e0e0; }
.district-details > summary { list-style: none; cursor: pointer; user-select: none; }
.district-details > summary::-webkit-details-marker { display: none; }
.district-details > summary::marker { display: none; }
.district-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-radius: 0;
    margin-bottom: 0;
    gap: 12px;
}
.district-header::after {
    content: '+';
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(255,255,255,0.75);
    flex-shrink: 0;
    line-height: 1;
    transition: transform 0.2s;
}
.district-details[open] > summary.district-header::after { content: '−'; }
/* Header backgrounds exactly match map marker / legend dot colors */
.district-header--blue   { background: #1035A8; }
.district-header--green  { background: #215732; }
.district-header--gold   { background: #C69214; }
.district-header--red    { background: #EF3340; }
.district-header--purple { background: #5b21b6; }
/* Gold is too light for white text — use dark text instead */
.district-header--gold h2                 { color: #1a1100; }
.district-header--gold .district-count   { color: #3d2800; background: rgba(0,0,0,0.18); }
.district-header--gold::after            { color: rgba(0,0,0,0.45); }
.district-header--gold h2::before        { background: rgba(0,0,0,0.3); }
.district-header h2 { font-family: 'Oswald', sans-serif; font-size: 1.3rem; color: var(--gpcpb-white); text-transform: uppercase; margin: 0; flex: 1; display: flex; align-items: center; gap: 10px; }
/* White circle dot mirrors the white dot inside the SVG map pin — same visual language */
.district-header h2::before {
    content: '';
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255,255,255,0.88);
    flex-shrink: 0;
}
.district-count { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gpcpb-yellow); background: rgba(0,0,0,0.2); padding: 4px 12px; border-radius: 12px; white-space: nowrap; }
.district-desc { background: var(--gpcpb-grey-light); border-top: none; padding: 12px 24px; font-size: 0.875rem; color: var(--gpcpb-grey); margin: 0 0 16px; }

/* Station cards */
.stations-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 16px 24px 24px;
    background: var(--gpcpb-white);
}
.station-card {
    background: var(--gpcpb-white);
    border: 1px solid #e0e0e0;
    border-top-width: 3px;
    border-radius: 4px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: box-shadow 0.2s, transform 0.2s;
}
/* Station card top-border matches map marker / district header exactly */
.station-card[data-district="johannesburg"] { border-top-color: #1035A8; }
.station-card[data-district="tshwane"]      { border-top-color: #215732; }
.station-card[data-district="ekurhuleni"]   { border-top-color: #C69214; }
.station-card[data-district="sedibeng"]     { border-top-color: #EF3340; }
.station-card[data-district="west-rand"]    { border-top-color: #5b21b6; }
.station-card:hover { box-shadow: 0 4px 16px rgba(16,53,168,0.12); transform: translateY(-2px); }
.station-name { font-family: 'Oswald', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--gpcpb-blue-dark); text-transform: uppercase; letter-spacing: 0.03em; }
.station-address { font-size: 0.8rem; color: var(--gpcpb-grey); line-height: 1.5; }
.station-phone { font-size: 0.82rem; font-weight: 600; color: var(--gpcpb-blue) !important; text-decoration: none; }
.station-phone:hover { text-decoration: underline; }
.station-cpf-badge {
    display: inline-block;
    margin-top: auto;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 10px;
    width: fit-content;
}
.cpf-pending { background: #f0f0f0; color: #888; }
.cpf-active  { background: var(--gpcpb-blue-light); color: var(--gpcpb-blue-dark); }

/* Responsive */
@media (max-width: 1100px) { .stations-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .stations-grid { grid-template-columns: repeat(2, 1fr); } .emergency-divider { display: none; } }
@media (max-width: 600px)  { .hq-banner { grid-template-columns: 1fr; } .hq-icon-block { display: none; } .emergency-item { padding: 8px 20px; } }
@media (max-width: 500px)  { .stations-grid { grid-template-columns: 1fr; } }



/* Highlight box */
.about-highlight-box {
    background: var(--gpcpb-blue-light);
    border-left: 5px solid var(--gpcpb-blue);
    padding: 20px 24px;
    border-radius: 0 4px 4px 0;
    max-width: 760px;
    margin-top: 24px;
}
.about-highlight-box p { margin: 0; font-size: 1rem; color: var(--gpcpb-blue-dark); font-weight: 600; line-height: 1.7; }

/* Legal Framework */
.legal-framework-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px;
}
.legal-framework-card {
    background: var(--gpcpb-white);
    border-radius: 4px;
    padding: 28px 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    border-top: 4px solid var(--gpcpb-blue);
}
.lf-number {
    font-family: 'Oswald', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--gpcpb-gold);
    line-height: 1;
    margin-bottom: 12px;
}
.legal-framework-card h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    color: var(--gpcpb-blue-dark);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.lf-ref {
    font-size: 0.8rem;
    color: var(--gpcpb-gold);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 12px !important;
}
.legal-framework-card p { font-size: 0.9rem; color: var(--gpcpb-grey); line-height: 1.65; margin: 0; }

/* Five Pillars */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: 32px;
}
.pillar-card {
    background: var(--gpcpb-white);
    border-radius: 4px;
    padding: 24px 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    text-align: center;
    border-bottom: 3px solid var(--gpcpb-gold);
}
.pillar-number {
    font-family: 'Oswald', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--gpcpb-blue);
    line-height: 1;
    margin-bottom: 10px;
}
.pillar-card h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 0.95rem;
    color: var(--gpcpb-blue-dark);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.pillar-card p { font-size: 0.85rem; color: var(--gpcpb-grey); line-height: 1.6; margin: 0; }

/* NHW Rules */
.nhw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 28px;
}
.nhw-rule-card {
    background: var(--gpcpb-white);
    border-radius: 4px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.nhw-rule--blue { border-top: 4px solid var(--gpcpb-blue); }
.nhw-rule--gold { border-top: 4px solid var(--gpcpb-gold); }
.nhw-rule--red  { border-top: 4px solid var(--gpcpb-red); }
.nhw-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gpcpb-grey);
    margin-bottom: 8px;
}
.nhw-rule-card h4 { font-family: 'Oswald', sans-serif; color: var(--gpcpb-blue-dark); text-transform: uppercase; font-size: 0.95rem; margin-bottom: 10px; }
.nhw-rule-card p  { font-size: 0.875rem; color: var(--gpcpb-grey); line-height: 1.65; margin: 0; }

/* Participation */
.participation-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 28px;
}
.participation-item {
    background: var(--gpcpb-grey-light);
    border-radius: 4px;
    padding: 24px 20px;
    text-align: center;
}
.pi-icon { font-size: 1.8rem; margin-bottom: 12px; color: var(--gpcpb-blue); }
.participation-item h4 { font-family: 'Oswald', sans-serif; font-size: 0.95rem; color: var(--gpcpb-blue-dark); text-transform: uppercase; margin-bottom: 10px; }
.participation-item p { font-size: 0.875rem; color: var(--gpcpb-grey); line-height: 1.6; margin: 0; }

/* Board Divider */
.about-divider {
    background: linear-gradient(135deg, var(--gpcpb-blue-dark) 0%, var(--gpcpb-blue) 100%);
    padding: 48px 24px;
    border-top: 5px solid var(--gpcpb-gold);
    border-bottom: 5px solid var(--gpcpb-gold);
    text-align: center;
    color: var(--gpcpb-white);
}
.about-divider h2 { font-family: 'Oswald', sans-serif; font-size: 1.8rem; color: var(--gpcpb-yellow); text-transform: uppercase; margin-bottom: 8px; }
.about-divider p  { color: rgba(255,255,255,0.85); font-size: 1rem; margin: 0; }

/* Two-col layout */
.about-two-col { display: grid; grid-template-columns: 1fr 260px; gap: 40px; align-items: start; }
.about-col-main p { color: var(--gpcpb-grey); line-height: 1.75; margin-bottom: 16px; }
.subsection-title { font-family: 'Oswald', sans-serif; font-size: 1.1rem; color: var(--gpcpb-blue-dark); text-transform: uppercase; margin: 28px 0 12px; }
.district-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.district-badge { background: var(--gpcpb-blue); color: var(--gpcpb-white); font-family: 'Oswald', sans-serif; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 5px 14px; border-radius: 20px; }
.about-stat-box { background: var(--gpcpb-blue-dark); color: var(--gpcpb-white); border-radius: 4px; padding: 20px; text-align: center; margin-bottom: 12px; border-bottom: 3px solid var(--gpcpb-gold); }
.stat-number { font-family: 'Oswald', sans-serif; font-size: 2.4rem; font-weight: 700; color: var(--gpcpb-yellow); line-height: 1; }
.stat-label  { font-size: 0.78rem; color: rgba(255,255,255,0.8); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 6px; }

/* Stakeholders */
.stakeholder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; }
.stakeholder-group { background: var(--gpcpb-white); border-radius: 4px; padding: 24px; box-shadow: 0 2px 6px rgba(0,0,0,0.07); border-top: 3px solid var(--gpcpb-blue); }
.stakeholder-group h4 { font-family: 'Oswald', sans-serif; font-size: 0.9rem; color: var(--gpcpb-blue-dark); text-transform: uppercase; margin-bottom: 14px; }
.stakeholder-group ul { list-style: none; padding: 0; margin: 0; }
.stakeholder-group ul li { font-size: 0.875rem; color: var(--gpcpb-grey); padding: 6px 0; border-bottom: 1px solid var(--gpcpb-grey-light); line-height: 1.5; }
.stakeholder-group ul li:last-child { border-bottom: none; }

/* Identity */
.identity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 28px; }
.identity-card { background: var(--gpcpb-grey-light); border-radius: 4px; padding: 28px; }
.identity-card h4 { font-family: 'Oswald', sans-serif; font-size: 1rem; color: var(--gpcpb-blue-dark); text-transform: uppercase; margin-bottom: 14px; }
.identity-card p  { font-size: 0.9rem; color: var(--gpcpb-grey); line-height: 1.7; margin-bottom: 12px; }
.identity-card ul { list-style: none; padding: 0; margin: 0; }
.identity-card ul li { font-size: 0.875rem; color: var(--gpcpb-grey); padding: 5px 0 5px 14px; position: relative; }
.identity-card ul li::before { content: '—'; position: absolute; left: 0; color: var(--gpcpb-gold); font-weight: 700; }

/* ============================================
   Responsive — About CPF
   ============================================ */
@media (max-width: 1100px) {
    .pillars-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .legal-framework-grid { grid-template-columns: 1fr; }
    .pillars-grid          { grid-template-columns: repeat(2, 1fr); }
    .nhw-grid              { grid-template-columns: 1fr; }
    .participation-grid    { grid-template-columns: repeat(2, 1fr); }
    .about-two-col         { grid-template-columns: 1fr; }
    .about-col-side        { display: flex; flex-wrap: wrap; gap: 12px; }
    .about-stat-box        { flex: 1 1 140px; margin-bottom: 0; }
    .stakeholder-grid      { grid-template-columns: 1fr; }
    .identity-grid         { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .pillars-grid       { grid-template-columns: 1fr; }
    .participation-grid { grid-template-columns: 1fr; }
}

/* ============================================
   Page CTA Band (bottom of content pages)
   ============================================ */
.const-cta {
    background: linear-gradient(135deg, #0a2370 0%, #1035A8 100%);
    padding: 64px 24px;
    text-align: center;
    color: #fff;
    border-top: 4px solid #C69214;
}
.const-cta h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #fff;
    margin: 0 0 14px;
}
.const-cta p {
    font-size: .95rem;
    color: rgba(255,255,255,.85);
    max-width: 580px;
    margin: 0 auto 28px;
    line-height: 1.75;
}
.cta-btn {
    display: inline-block;
    background: #C69214;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 15px 36px;
    border-radius: 3px;
    text-decoration: none;
    transition: background .2s;
}
.cta-btn:hover { background: #7a5700; color: #fff; text-decoration: none; }