/* ==========================================================================
   Page banners v2: every inner-page title banner uses the Contact-page look
   (dark navy, orange/pink glow, subtle grid, white Encode Sans title).
   Loaded by the public header (header-v2), so dashboards and /?home=old are unaffected.
   ========================================================================== */
.bread-crumb-bar,
.job-listing-hero,
.faq-hero,
.cat-city-hero {
    position: relative !important;
    isolation: isolate;
    overflow: hidden;
    background-color: #0E0B2B !important;
    background-image:
        radial-gradient(520px 360px at 85% 10%, rgba(255, 106, 0, .32), transparent 60%),
        radial-gradient(480px 360px at 10% 100%, rgba(255, 61, 110, .2), transparent 60%),
        radial-gradient(640px 420px at 50% -20%, rgba(99, 76, 255, .25), transparent 60%) !important;
    color: #fff;
}
.bread-crumb-bar::after,
.job-listing-hero::after,
.faq-hero::after,
.cat-city-hero::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, transparent 70%);
}

/* ---- Shared breadcrumb banner (components/breadcrumb) ---- */
.bread-crumb-bar { padding-top: var(--bmh-offset, 140px) !important; }
.bread-crumb-bar .inner-banner { background: none !important; padding: 56px 0 64px !important; }
.bread-crumb-bar .breadcrumb-list h1,
.bread-crumb-bar .breadcrumb-list .h2,
.bread-crumb-bar .breadcrumb-list .h3 {
    color: #fff !important;
    font-family: 'Encode Sans', 'Lato', sans-serif !important;
    font-size: clamp(30px, 4vw, 50px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em;
    text-transform: none;
    margin-bottom: 14px !important;
}
.bread-crumb-bar .page-breadcrumb .breadcrumb {
    display: inline-flex !important; margin: 0; padding: 8px 16px; border-radius: 999px;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
}
.bread-crumb-bar .page-breadcrumb ol li,
.bread-crumb-bar .page-breadcrumb ol li a { color: rgba(255, 255, 255, .78) !important; font-size: 14px !important; font-weight: 700; }
.bread-crumb-bar .page-breadcrumb ol li a:hover { color: #fff !important; }
.bread-crumb-bar .page-breadcrumb ol li.active { color: #FFB547 !important; }
.bread-crumb-bar .breadcrumb-list .page-breadcrumb .breadcrumb-item+.breadcrumb-item:before { color: rgba(255, 255, 255, .45) !important; margin: 0 10px !important; }

/* ---- Artist jobs listing / FAQ heroes ---- */
.job-listing-hero { padding-top: calc(var(--bmh-offset, 140px) + 48px) !important; }
.faq-hero { padding-top: calc(var(--bmh-offset, 140px) + 48px) !important; padding-bottom: 56px !important; }
.job-listing-hero h1, .faq-hero h1, .cat-city-hero h1 {
    color: #fff !important; font-family: 'Encode Sans', 'Lato', sans-serif !important; font-weight: 800 !important; letter-spacing: -0.02em;
}

@media (max-width: 991px) {
    .bread-crumb-bar .inner-banner { padding: 40px 0 44px !important; }
    .job-listing-hero, .faq-hero { padding-top: 44px !important; }
    /* The header now has an in-flow spacer on mobile; drop the page's own 65px offset */
    body .cat-city-hero { margin-top: 0 !important; }
}