.hero-video-wrapper {
            position: relative;
            height: 100vh;
            width: 100%;
            overflow: hidden;
            display: flex;
            align-items: center;
        }
        .hero-overlay {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0) 70%);
            z-index: -1;
        }
        .hero-content {
            z-index: 1;
            text-align: left;
        }
        /* the design nudges the hero text 100px left; only wide screens have the margin for it */
        @media (min-width: 1600px) { .hero-text { position: relative; left: -100px; } }

        /* Card reveal (restored Oct 29): each card's full live description slides up over the photo on
           hover, as on the live site. Mike's short line, title and Learn More button stay as they are. */
        #event-types .service-card, #services .service-card { position: relative; display: flex; flex-direction: column; }
        /* the whole card clicks through to its page, as the photo did: Learn More is stretched over the card */
        #event-types .service-card-body .btn::after, #services .service-card-body .btn::after { content: ''; position: absolute; inset: 0; z-index: 1; }
        #event-types .service-card-body, #services .service-card-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
        #event-types .service-card-body .btn, #services .service-card-body .btn { margin-top: auto !important; }
        .card-reveal { position: absolute; left: 0; right: 0; top: 0; bottom: 78px; padding: 20px 22px; background: #111; border-bottom: 1px solid #C9A251; color: #bbb; font-size: .84rem; line-height: 1.5; overflow-y: auto; transform: translateY(calc(100% + 100px)); transition: transform .35s ease; z-index: 2; pointer-events: none; }
        /* clicks fall through the panel to the card link; links inside the text still work */
        .card-reveal a { pointer-events: auto; }
        @media (max-width: 575px) { .card-reveal { font-size: .8rem; padding: 18px 20px; } }
        .card-reveal p { margin-bottom: .75rem; }
        .card-reveal p:last-child { margin-bottom: 0; }
        .service-card:hover .card-reveal, .service-card:focus-within .card-reveal { transform: translateY(0); }
        @media (prefers-reduced-motion: reduce) { .card-reveal { transition: none; } }