/* Break the hero out of the centered <main> container to go full-width */
    .hero-fullbleed {
        position: relative;
        left: 50%; right: 50%;
        margin-left: -50vw; margin-right: -50vw;
        width: 100vw;
        margin-top: -2rem; /* pull up under header, cancels main's top margin */
    }

    .hero-photo {
        position: relative;
        min-height: 560px;
        padding: 3rem 2rem 7rem; /* bottom padding leaves room for overlapping cards */
        overflow: hidden;
    }
    /* Rotating background layers */
    .hero-bg {
        position: absolute; inset: 0;
        background-size: cover;
        background-position: center 30%;
        opacity: 0;
        transition: opacity 1.2s ease-in-out;
        z-index: 0;
    }
    .hero-bg.active { opacity: 1; }
    /* Dark overlay so white text stays readable over any banner */
    .hero-overlay {
        position: absolute; inset: 0; z-index: 1;
        background: linear-gradient(var(--hero-overlay-top, rgba(20,25,50,0.45)),
                                    var(--hero-overlay-bottom, rgba(20,25,50,0.55)));
    }
    .hero-inner { position: relative; z-index: 2; }

    .hero-inner {
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: start;
    }

    .hero-text { color: #fff; }
    .hero-text .started { color: #e8e8e8; font-size: 0.95rem; margin-bottom: 1rem; letter-spacing:0.02em; }
    .hero-text h1 { font-size: 3rem; line-height: 1.05; color: #fff; margin-bottom: 1rem; }

    .hero-card {
        background: rgba(255,255,255,0.9);
        border-radius: 8px;
        padding: 1.5rem 1.75rem;
        max-width: 460px;
    }
    .hero-card h3 { font-size: 1.3rem; color: #1a1a2e; margin-bottom: 0.5rem; }
    .hero-card .we-serve { font-weight: bold; margin: 0.75rem 0 0.25rem; color:#1a1a2e; }
    .hero-card p { color: #333; line-height: 1.5; font-size: 0.95rem; }
    .hero-card .btn { margin-top: 1.25rem; }

    /* Right-side floating "Restore • Equip" card */
    .outpost-card {
        background: rgba(255,255,255,0.95);
        border-radius: 8px;
        padding: 1.5rem 1.75rem;
        border-left: 5px solid #d4af37;
    }
    .outpost-card .kicker { color:#c4a030; font-weight:bold; letter-spacing:0.05em; font-size:0.85rem; }
    .outpost-card h3 { font-size: 1.4rem; color:#1a1a2e; margin:0.2rem 0 0.75rem; }
    .outpost-card .pillars { color:#1a1a2e; font-weight:bold; margin-bottom:0.75rem; font-size:0.9rem; }
    .outpost-card p { color:#333; line-height:1.55; font-size:0.9rem; margin-bottom:0.75rem; }
    .outpost-card .prog-title { font-weight:bold; color:#1a1a2e; margin-bottom:0.35rem; }
    .outpost-card ul { margin-left:1.1rem; color:#333; line-height:1.6; font-size:0.9rem; }

    /* Program cards overlapping bottom of hero */
    .program-cards {
        max-width: 1100px;
        margin: -4.5rem auto 3rem;
        position: relative; z-index: 2;
        padding: 0 2rem;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
    .program-card {
        display:block; background:#fff; border:1px solid #ddd; border-top:4px solid #d4af37;
        border-radius:6px; padding:1.1rem 1.2rem; text-decoration:none; color:inherit;
        box-shadow:0 4px 14px rgba(0,0,0,0.12); transition:box-shadow .2s, transform .2s;
    }
    .program-card:hover { box-shadow:0 8px 20px rgba(0,0,0,0.18); transform:translateY(-2px); }
    .program-card .pc-title { font-weight:bold; color:#1a1a2e; font-size:1.05rem; margin-bottom:0.3rem; }
    .program-card .pc-desc { font-size:0.85rem; color:#666; }
    .program-card.give { border-top-color:#2a7d2a; }

    .section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
    .section-head h2 { color:#1a1a2e; }
    .section-head a { color:#d4af37; text-decoration:none; font-size:0.9rem; } 

    .dedications-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:1.5rem; margin-bottom:3rem; }

    .program-section { border-top:2px solid #d4af37; padding-top:2rem; margin-top:2.5rem; }
    .program-section h2 { color:#1a1a2e; margin-bottom:0.75rem; }
    .program-section p { color:#444; line-height:1.6; margin-bottom:1rem; }
    .program-section ul { margin:0 0 1rem 1.25rem; color:#444; line-height:1.7; }

    .empty-state { text-align:center; color:#888; padding:3rem; font-size:1.1rem; }

    @media (max-width: 800px) {
        .hero-inner { grid-template-columns: 1fr; }
        .hero-text h1 { font-size: 2.2rem; }
        .hero-photo { padding-bottom: 8rem; }
        /* Both hero cards go full width on mobile */
        .hero-card { max-width: none; }
        /* Program cards stack instead of forcing 4 across */
        .program-cards { grid-template-columns: 1fr; margin-top: -3rem; }
    }

    /* Pill button for "View the Fallen Hero Wall" */
    .section-head a.wall-pill {
        background: #1a1a2e;
        color: #fff;
        padding: 0.55rem 1.25rem;
        border-radius: 999px;
        font-size: 0.9rem;
        font-weight: bold;
        transition: background .2s, transform .2s, box-shadow .2s;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
    .section-head a.wall-pill:hover {
        background: #2a2a4e;
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(0,0,0,0.22);
    }