/* ==========================================================
           SourceSmack Creative Categories
           Scoped specifically to this page to reduce CSS conflicts.
           Bootstrap 5 + CSS only. No JavaScript required.
           ========================================================== */

        .creative-assets-page {
            --assets-bg: #090909;
            --assets-surface: #111111;
            --assets-surface-2: #171717;
            --assets-line: rgba(255, 255, 255, .10);
            --assets-line-strong: rgba(255, 255, 255, .22);
            --assets-text: #ffffff;
            --assets-muted: #aaa;
            --assets-soft: #d7d7d7;
            --assets-radius: 1.35rem;
            background: var(--assets-bg);
            color: var(--assets-text);
            overflow: hidden;
        }

        .creative-assets-page a {
            text-decoration: none;
        }

        /* ---------- Hero ---------- */

        .creative-assets-page .assets-hero {
            position: relative;
            padding: clamp(4.5rem, 8vw, 8rem) 0 clamp(4rem, 7vw, 7rem);
            border-bottom: 1px solid var(--assets-line);
            isolation: isolate;
        }

        .creative-assets-page .assets-hero::before,
        .creative-assets-page .assets-hero::after {
            content: "";
            position: absolute;
            border: 1px solid rgba(255,255,255,.07);
            border-radius: 50%;
            pointer-events: none;
            z-index: -1;
        }

        .creative-assets-page .assets-hero::before {
            width: 560px;
            height: 560px;
            right: -210px;
            top: -260px;
        }

        .creative-assets-page .assets-hero::after {
            width: 280px;
            height: 280px;
            right: 11%;
            bottom: -150px;
        }

        .creative-assets-page .assets-kicker {
            display: inline-flex;
            align-items: center;
            gap: .75rem;
            margin-bottom: 1.35rem;
            color: #bfbfbf;
            font-size: .76rem;
            font-weight: 700;
            letter-spacing: .18em;
            text-transform: uppercase;
        }

        .creative-assets-page .assets-kicker::before {
            content: "";
            width: 42px;
            height: 1px;
            background: #fff;
        }

        .creative-assets-page .assets-hero h1 {
            max-width: 900px;
            margin: 0;
            color: #fff;
            font-family: "Oswald", sans-serif;
            font-size: clamp(3rem, 7vw, 6.75rem);
            font-weight: 600;
            line-height: .96;
            letter-spacing: -.045em;
            text-transform: uppercase;
        }

        .creative-assets-page .assets-hero-copy {
            max-width: 760px;
            margin-top: 1.75rem;
            color: var(--assets-soft);
            font-size: clamp(1rem, 1.6vw, 1.2rem);
            line-height: 1.75;
        }

        .creative-assets-page .assets-hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: .8rem;
            margin-top: 2rem;
        }

        .creative-assets-page .assets-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .65rem;
            min-height: 52px;
            padding: .8rem 1.45rem;
            border-radius: 50rem;
            font-weight: 600;
            transition: transform .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease;
        }

        .creative-assets-page .assets-btn-primary {
            background: #fff;
            color: #050505;
            border: 1px solid #fff;
        }

        .creative-assets-page .assets-btn-primary:hover,
        .creative-assets-page .assets-btn-primary:focus {
            background: transparent;
            color: #fff;
            transform: translateY(-2px);
        }

        .creative-assets-page .assets-btn-outline {
            color: #fff;
            border: 1px solid var(--assets-line-strong);
        }

        .creative-assets-page .assets-btn-outline:hover,
        .creative-assets-page .assets-btn-outline:focus {
            color: #fff;
            border-color: #fff;
            transform: translateY(-2px);
        }

        .creative-assets-page .assets-stat-card {
            position: relative;
            background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
            border: 1px solid var(--assets-line);
            border-radius: 1.5rem;
            padding: 2rem;
            backdrop-filter: blur(4px);
        }

        .creative-assets-page .assets-stat-number {
            display: block;
            margin-bottom: .2rem;
            color: #fff;
            font-family: "Oswald", sans-serif;
            font-size: 4rem;
            line-height: 1;
        }

        .creative-assets-page .assets-stat-label {
            color: var(--assets-muted);
            line-height: 1.5;
        }

        .creative-assets-page .assets-mini-list {
            margin-top: 1.75rem;
            padding-top: 1.35rem;
            border-top: 1px solid var(--assets-line);
        }

        .creative-assets-page .assets-mini-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: .45rem 0;
            color: #ddd;
            font-size: .9rem;
        }

        .creative-assets-page .assets-mini-row i {
            color: #fff;
        }

        /* ---------- Feature strip ---------- */

        .creative-assets-page .assets-feature-strip {
            border-bottom: 1px solid var(--assets-line);
        }

        .creative-assets-page .assets-feature {
            height: 100%;
            padding: 1.5rem 1.25rem;
        }

        .creative-assets-page .assets-feature + .assets-feature {
            border-left: 1px solid var(--assets-line);
        }

        .creative-assets-page .assets-feature-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            margin-bottom: .9rem;
            border: 1px solid var(--assets-line-strong);
            border-radius: 50%;
            color: #fff;
        }

        .creative-assets-page .assets-feature h2 {
            margin: 0 0 .35rem;
            color: #fff;
            font-size: 1rem;
            font-weight: 600;
        }

        .creative-assets-page .assets-feature p {
            margin: 0;
            color: var(--assets-muted);
            font-size: .9rem;
            line-height: 1.55;
        }

        /* ---------- Main category area ---------- */

        .creative-assets-page .assets-category-section {
            padding: clamp(4.5rem, 8vw, 7rem) 0;
        }

        .creative-assets-page .assets-section-kicker {
            display: block;
            margin-bottom: .65rem;
            color: #8f8f8f;
            font-size: .76rem;
            font-weight: 700;
            letter-spacing: .17em;
            text-transform: uppercase;
        }

        .creative-assets-page .assets-section-title {
            margin: 0;
            color: #fff;
            font-family: "Oswald", sans-serif;
            font-size: clamp(2.25rem, 4vw, 4rem);
            line-height: 1.05;
            letter-spacing: -.03em;
            text-transform: uppercase;
        }

        .creative-assets-page .assets-section-copy {
            max-width: 710px;
            margin-top: 1rem;
            color: var(--assets-muted);
            line-height: 1.75;
        }

        .creative-assets-page .assets-category-shell {
            margin-top: 3rem;
        }

        /*
         * Preserve the category HTML generated by inccategories.php.
         * Existing .categories / .category markup is upgraded here
         * without changing the PHP component itself.
         */
        .creative-assets-page .categories {
            display: grid !important;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1.5rem;
            width: 100% !important;
            height: auto !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        .creative-assets-page .category {
            position: relative !important;
            inset: auto !important;
            top: auto !important;
            left: auto !important;
            width: 100% !important;
            max-width: none !important;
            height: auto !important;
            margin: 0 !important;
            overflow: hidden;
            background: var(--assets-surface);
            border: 1px solid var(--assets-line);
            border-radius: var(--assets-radius);
            transition: transform .25s ease, border-color .25s ease, background-color .25s ease;
        }

        .creative-assets-page .category:hover,
        .creative-assets-page .category:focus-within {
            transform: translateY(-6px);
            border-color: var(--assets-line-strong);
            background: var(--assets-surface-2);
        }

        .creative-assets-page .category img {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 4 / 3;
            object-fit: cover;
            border-radius: 0 !important;
            transition: transform .35s ease;
        }

        .creative-assets-page .category:hover img {
            transform: scale(1.025);
        }

        .creative-assets-page .category a {
            color: #fff;
        }

        /* Covers common category component wrappers without requiring markup changes */
        .creative-assets-page .category > div,
        .creative-assets-page .category .category-info,
        .creative-assets-page .category .category-details,
        .creative-assets-page .category .catcontent,
        .creative-assets-page .category .cat-content {
            padding-left: 1.35rem;
            padding-right: 1.35rem;
        }

        .creative-assets-page .category h2,
        .creative-assets-page .category h3,
        .creative-assets-page .category h4,
        .creative-assets-page .category .catname,
        .creative-assets-page .category .category-name {
            margin-top: 1.2rem;
            margin-bottom: .5rem;
            color: #fff;
            font-family: "Oswald", sans-serif;
            font-size: 1.35rem;
            line-height: 1.25;
            letter-spacing: -.01em;
            text-transform: uppercase;
        }

        .creative-assets-page .category p,
        .creative-assets-page .category .catdesc,
        .creative-assets-page .category .category-description {
            color: var(--assets-muted);
            line-height: 1.65;
        }

        .creative-assets-page .category a.btn,
        .creative-assets-page .category .btn {
            margin: .5rem 1.35rem 1.35rem;
            border-radius: 50rem;
        }

        /* ---------- Closing CTA ---------- */

        .creative-assets-page .assets-cta {
            padding: 0 0 clamp(4.5rem, 8vw, 7rem);
        }

        .creative-assets-page .assets-cta-panel {
            position: relative;
            overflow: hidden;
            padding: clamp(2.5rem, 6vw, 5rem);
            background: #f4f4f4;
            color: #080808;
            border-radius: 1.6rem;
        }

        .creative-assets-page .assets-cta-panel::after {
            content: "";
            position: absolute;
            width: 430px;
            height: 430px;
            right: -150px;
            top: -220px;
            border: 1px solid rgba(0,0,0,.1);
            border-radius: 50%;
        }

        .creative-assets-page .assets-cta-kicker {
            display: block;
            margin-bottom: .9rem;
            color: #666;
            font-size: .75rem;
            font-weight: 700;
            letter-spacing: .17em;
            text-transform: uppercase;
        }

        .creative-assets-page .assets-cta-panel h2 {
            position: relative;
            z-index: 1;
            max-width: 820px;
            margin: 0;
            color: #080808;
            font-family: "Oswald", sans-serif;
            font-size: clamp(2.2rem, 5vw, 4.6rem);
            line-height: 1.02;
            letter-spacing: -.035em;
            text-transform: uppercase;
        }

        .creative-assets-page .assets-cta-panel p {
            position: relative;
            z-index: 1;
            max-width: 690px;
            margin: 1.25rem 0 2rem;
            color: #555;
            line-height: 1.75;
        }

        .creative-assets-page .assets-cta-link {
            position: relative;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            gap: .65rem;
            min-height: 50px;
            padding: .78rem 1.4rem;
            background: #080808;
            border: 1px solid #080808;
            border-radius: 50rem;
            color: #fff;
            font-weight: 600;
            transition: background-color .2s ease, color .2s ease, transform .2s ease;
        }

        .creative-assets-page .assets-cta-link:hover,
        .creative-assets-page .assets-cta-link:focus {
            background: transparent;
            color: #080808;
            transform: translateY(-2px);
        }

        /* Existing back-to-top element remains functional as a normal anchor */
        .creative-assets-page + .back-to-top,
        .back-to-top {
            border-radius: 50%;
        }

        @media (max-width: 991.98px) {
            .creative-assets-page .categories {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .creative-assets-page .assets-stat-card {
                margin-top: 1rem;
            }
        }

        @media (max-width: 767.98px) {
            .creative-assets-page .assets-feature + .assets-feature {
                border-left: 0;
                border-top: 1px solid var(--assets-line);
            }

            .creative-assets-page .categories {
                grid-template-columns: 1fr;
            }

            .creative-assets-page .assets-hero h1 {
                font-size: clamp(2.65rem, 14vw, 4.6rem);
            }

            .creative-assets-page .assets-hero-actions .assets-btn {
                width: 100%;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .creative-assets-page *,
            .creative-assets-page *::before,
            .creative-assets-page *::after {
                scroll-behavior: auto !important;
                transition: none !important;
            }
        }