/* One shared hero treatment for the public information pages. */
main:is(.about-page, .membership-page, .directory-page, .products-page, .program-page, .news-page, .contact-page, .gallery-page, .registration-page, .certificate-page, .certificate-verify-page, .activity-page, .event-detail-page, .membership-success-page, .kelulut-page) .public-page-hero {
    padding: 30px 0 26px;
    background: linear-gradient(120deg, #1a1a1a, #302318);
    color: #fff;
    text-align: center;
    border: 0;
    min-height: 0;
}
main:is(.about-page, .membership-page, .directory-page, .products-page, .program-page, .news-page, .contact-page, .gallery-page, .registration-page, .certificate-page, .certificate-verify-page, .activity-page, .event-detail-page, .membership-success-page, .kelulut-page) .public-page-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: relative;
}
main:is(.about-page, .membership-page, .directory-page, .products-page, .program-page, .news-page, .contact-page, .gallery-page, .registration-page, .certificate-page, .certificate-verify-page, .activity-page, .event-detail-page, .membership-success-page, .kelulut-page) .public-page-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #ffad68;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .12em;
    text-transform: uppercase;
}
main:is(.about-page, .membership-page, .directory-page, .products-page, .program-page, .news-page, .contact-page, .gallery-page, .registration-page, .certificate-page, .certificate-verify-page, .activity-page, .event-detail-page, .membership-success-page, .kelulut-page) .public-page-hero h1 {
    margin: 10px 0;
    color: #FF8218;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.045em;
}
main:is(.about-page, .membership-page, .directory-page, .products-page, .program-page, .news-page, .contact-page, .gallery-page, .registration-page, .certificate-page, .certificate-verify-page, .activity-page, .event-detail-page, .membership-success-page, .kelulut-page) .public-page-hero__subtitle {
    margin: 0;
    max-width: 640px;
    color: #ddd;
    font-size: .95rem;
    line-height: 1.7;
}
main:is(.about-page, .membership-page, .directory-page, .products-page, .program-page, .news-page, .contact-page, .gallery-page, .registration-page, .certificate-page, .certificate-verify-page, .activity-page, .event-detail-page, .membership-success-page, .kelulut-page) .public-page-hero__breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
    color: #fff;
    font-size: .78rem;
    line-height: 1.5;
}
main:is(.about-page, .membership-page, .directory-page, .products-page, .program-page, .news-page, .contact-page, .gallery-page, .registration-page, .certificate-page, .certificate-verify-page, .activity-page, .event-detail-page, .membership-success-page, .kelulut-page) .public-page-hero__breadcrumb a { color: #ffad68; text-decoration: none; }
main:is(.about-page, .membership-page, .directory-page, .products-page, .program-page, .news-page, .contact-page, .gallery-page, .registration-page, .certificate-page, .certificate-verify-page, .activity-page, .event-detail-page, .membership-success-page, .kelulut-page) .public-page-hero__breadcrumb a:hover { text-decoration: underline; }
@media (max-width: 575.98px) {
    main:is(.about-page, .membership-page, .directory-page, .products-page, .program-page, .news-page, .contact-page, .gallery-page, .registration-page, .certificate-page, .certificate-verify-page, .activity-page, .event-detail-page, .membership-success-page, .kelulut-page) .public-page-hero { padding: 16px 0; }
    main:is(.about-page, .membership-page, .directory-page, .products-page, .program-page, .news-page, .contact-page, .gallery-page, .registration-page, .certificate-page, .certificate-verify-page, .activity-page, .event-detail-page, .membership-success-page, .kelulut-page) .public-page-hero__eyebrow { font-size: .6rem; letter-spacing: .1em; }
    main:is(.about-page, .membership-page, .directory-page, .products-page, .program-page, .news-page, .contact-page, .gallery-page, .registration-page, .certificate-page, .certificate-verify-page, .activity-page, .event-detail-page, .membership-success-page, .kelulut-page) .public-page-hero h1 { font-size: 1.7rem; margin: 6px 0; }
    main:is(.about-page, .membership-page, .directory-page, .products-page, .program-page, .news-page, .contact-page, .gallery-page, .registration-page, .certificate-page, .certificate-verify-page, .activity-page, .event-detail-page, .membership-success-page, .kelulut-page) .public-page-hero__subtitle { font-size: .78rem; line-height: 1.5; }
    main:is(.about-page, .membership-page, .directory-page, .products-page, .program-page, .news-page, .contact-page, .gallery-page, .registration-page, .certificate-page, .certificate-verify-page, .activity-page, .event-detail-page, .membership-success-page, .kelulut-page) .public-page-hero__breadcrumb { font-size: .7rem; margin-top: 8px; }
}