{"id":2251,"date":"2026-08-27T15:44:58","date_gmt":"2026-08-27T13:44:58","guid":{"rendered":"https:\/\/consoldemo.co.za\/rebelle\/?page_id=2251"},"modified":"2026-09-01T13:26:54","modified_gmt":"2026-09-01T11:26:54","slug":"the-pocket-playlist","status":"publish","type":"page","link":"https:\/\/consoldemo.co.za\/rebelle\/our-work\/the-pocket-playlist\/","title":{"rendered":"The Pocket Playlist"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2251\" class=\"elementor elementor-2251\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3d87dbb5 e-flex e-con-boxed e-con e-parent\" data-id=\"3d87dbb5\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1ee58aca elementor-widget elementor-widget-text-editor\" data-id=\"1ee58aca\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p class=\"p1\"><strong>The Pocket<br \/>Playlist.<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7c2f0a72 elementor-widget elementor-widget-text-editor\" data-id=\"7c2f0a72\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Music-led Campaign<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-23950145 e-con-full e-flex e-con e-parent\" data-id=\"23950145\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-75384160 elementor-widget elementor-widget-html\" data-id=\"75384160\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* Main scrolling strip *\/\n.rebelle-marquee {\n    width: 100%;\n    overflow: hidden;\n    background-color: transparent;\n    color: #eae1d4;\n    padding: 12px 0;\n}\n\n\/* Moving track *\/\n.rebelle-marquee-track {\n    display: flex;\n    width: max-content;\n    animation: rebelle-scroll 30s linear infinite;\n    will-change: transform;\n}\n\n\/* Each duplicated group must remain identical *\/\n.rebelle-marquee-group {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n}\n\n\/* Individual text items *\/\n.rebelle-marquee-text {\n    display: block;\n    flex-shrink: 0;\n    padding-right: 6px;\n    white-space: nowrap;\n\n    font-family: inherit;\n    font-size: clamp(20px, 1.2vw, 38px);\n    font-weight: 600;\n    line-height: 1.2;\n    letter-spacing: -0.02em;\n}\n\n\/* Continuous left movement *\/\n@keyframes rebelle-scroll {\n    from {\n        transform: translateX(0);\n    }\n\n    to {\n        transform: translateX(-50%);\n    }\n}\n\n\/* Pause when hovered *\/\n.rebelle-marquee:hover .rebelle-marquee-track {\n    animation-play-state: paused;\n}\n\n\/* Accessibility *\/\n@media (prefers-reduced-motion: reduce) {\n    .rebelle-marquee-track {\n        animation-play-state: paused;\n    }\n}\n\n\/* Mobile adjustments *\/\n@media screen and (max-width: 767px) {\n    .rebelle-marquee {\n        padding: 10px 0;\n    }\n\n    .rebelle-marquee-text {\n        font-size: 27px;\n        padding-right: 25px;\n    }\n}\n<\/style>\n\n<div\n    class=\"rebelle-marquee\"\n    aria-label=\"Campaign Merchandise, Concept Development, Design, Custom Production\"\n>\n    <div class=\"rebelle-marquee-track\">\n\n        <!-- First group -->\n        <div class=\"rebelle-marquee-group\">\n\n            <span class=\"rebelle-marquee-text\">\n                Campaign Merchandise \u00b7 Concept Development \u00b7 Design \u00b7 Custom Production \u00b7\n            <\/span>\n\n            <span class=\"rebelle-marquee-text\">\n                Campaign Merchandise \u00b7 Concept Development \u00b7 Design \u00b7 Custom Production \u00b7\n            <\/span>\n\n            <span class=\"rebelle-marquee-text\">\n                Campaign Merchandise \u00b7 Concept Development \u00b7 Design \u00b7 Custom Production \u00b7\n            <\/span>\n\n        <\/div>\n\n        <!-- Exact duplicate for seamless looping -->\n        <div\n            class=\"rebelle-marquee-group\"\n            aria-hidden=\"true\"\n        >\n\n            <span class=\"rebelle-marquee-text\">\n                Campaign Merchandise \u00b7 Concept Development \u00b7 Design \u00b7 Custom Production \u00b7\n            <\/span>\n\n            <span class=\"rebelle-marquee-text\">\n                Campaign Merchandise \u00b7 Concept Development \u00b7 Design \u00b7 Custom Production \u00b7\n            <\/span>\n\n            <span class=\"rebelle-marquee-text\">\n                Campaign Merchandise \u00b7 Concept Development \u00b7 Design \u00b7 Custom Production \u00b7\n            <\/span>\n\n        <\/div>\n\n    <\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-62a7b84e e-flex e-con-boxed e-con e-parent\" data-id=\"62a7b84e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-795879eb elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"795879eb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* =========================================\n   REBELLE - THE ASK\n========================================= *\/\n\n.rebelle-ask-shell {\n    width: max-content;\n    max-width: 100%;\n    overflow: hidden;\n}\n\n.rebelle-ask {\n    display: flex;\n    align-items: center;\n    flex-wrap: nowrap;\n\n    width: max-content;\n\n    font-family: \"Arboria Bold\", \"Arboria\", sans-serif !important;\n    font-size: 70px;\n    line-height: 65px;\n    font-weight: 700;\n    letter-spacing: -0.035em;\n\n    color: #b02960;\n}\n\n\n\/* STATIC \"THE\" *\/\n\n.rebelle-ask-label {\n    display: inline-block;\n    white-space: nowrap;\n}\n\n\n\/* PURPLE ASK BLOCK *\/\n\n.rebelle-ask-highlight {\n    display: inline-block;\n\n    margin-left: 10px;\n    padding: 5px 12px 8px;\n\n    background-color: #a08ea3;\n    color: #b02960;\n\n    white-space: nowrap;\n\n    will-change: transform, opacity;\n}\n\n\n\/* =========================================\n   START POSITION\n========================================= *\/\n\n.rebelle-ask-shell.animate-ready .rebelle-ask-highlight {\n    opacity: 0;\n    transform: translateX(-140px);\n}\n\n\n\/* =========================================\n   FLY IN FROM LEFT\n========================================= *\/\n\n.rebelle-ask-shell.animate-ready.is-visible .rebelle-ask-highlight {\n    animation:\n        rebelleAskFlyIn\n        1.5s\n        cubic-bezier(0.22, 1, 0.36, 1)\n        forwards;\n}\n\n\n@keyframes rebelleAskFlyIn {\n\n    0% {\n        opacity: 0;\n        transform: translateX(-140px);\n    }\n\n    100% {\n        opacity: 1;\n        transform: translateX(0);\n    }\n}\n\n\n\/* =========================================\n   TABLET\n========================================= *\/\n\n@media screen and (max-width: 1024px) {\n\n    .rebelle-ask {\n        font-size: 54px;\n        line-height: 52px;\n    }\n\n}\n\n\n\/* =========================================\n   MOBILE\n========================================= *\/\n\n@media screen and (max-width: 767px) {\n\n    .rebelle-ask {\n        font-size: 36px;\n        line-height: 36px;\n    }\n\n    .rebelle-ask-highlight {\n        margin-left: 6px;\n        padding: 3px 7px 5px;\n    }\n\n    .rebelle-ask-shell.animate-ready .rebelle-ask-highlight {\n        transform: translateX(-80px);\n    }\n\n}\n\n\n\/* =========================================\n   REDUCED MOTION\n========================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    .rebelle-ask-shell.animate-ready .rebelle-ask-highlight {\n        opacity: 1;\n        transform: none;\n        animation: none;\n    }\n\n}\n<\/style>\n\n\n<div class=\"rebelle-ask-shell\">\n\n    <div class=\"rebelle-ask\">\n\n        <span class=\"rebelle-ask-label\">\n            The\n        <\/span>\n\n        <span class=\"rebelle-ask-highlight\">\n            Ask.\n        <\/span>\n\n    <\/div>\n\n<\/div>\n\n\n<script>\n(function () {\n\n    const sections =\n        document.querySelectorAll('.rebelle-ask-shell');\n\n    const reducedMotion =\n        window.matchMedia(\n            '(prefers-reduced-motion: reduce)'\n        ).matches;\n\n\n    sections.forEach(function (section) {\n\n        if (section.classList.contains('rebelle-animation-ready')) {\n            return;\n        }\n\n        section.classList.add(\n            'animate-ready',\n            'rebelle-animation-ready'\n        );\n\n\n        if (reducedMotion) {\n\n            section.classList.add('is-visible');\n\n            return;\n        }\n\n\n        const observer = new IntersectionObserver(\n            function (entries, observerInstance) {\n\n                entries.forEach(function (entry) {\n\n                    if (entry.isIntersecting) {\n\n                        entry.target.classList.add(\n                            'is-visible'\n                        );\n\n                        observerInstance.unobserve(\n                            entry.target\n                        );\n\n                    }\n\n                });\n\n            },\n            {\n                threshold: 0.35\n            }\n        );\n\n\n        observer.observe(section);\n\n    });\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6d5be31 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"6d5be31\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p class=\"p1\">The client needed a playful branded handout for a music-led campaign \u2014 something small, memorable and easy to distribute, while still feeling connected to the energy of the event.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4b1f6fc4 e-flex e-con-boxed e-con e-parent\" data-id=\"4b1f6fc4\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6fd632e9 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"6fd632e9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* =========================================\n   REBELLE - THE SPARK\n========================================= *\/\n\n.rebelle-spark-shell {\n    width: max-content;\n    max-width: 100%;\n    overflow: hidden;\n}\n\n.rebelle-spark {\n    display: flex;\n    align-items: center;\n    flex-wrap: nowrap;\n\n    width: max-content;\n\n    font-family: \"Arboria Bold\", \"Arboria\", sans-serif !important;\n    font-size: 70px;\n    line-height: 65px;\n    font-weight: 700;\n    letter-spacing: -0.035em;\n\n    color: #b02960;\n}\n\n\n\/* STATIC \"THE\" *\/\n\n.rebelle-spark-label {\n    display: inline-block;\n    white-space: nowrap;\n}\n\n\n\/* PURPLE SPARK BLOCK *\/\n\n.rebelle-spark-highlight {\n    display: inline-block;\n\n    margin-left: 10px;\n    padding: 5px 12px 8px;\n\n    background-color: #a08ea3;\n    color: #b02960;\n\n    white-space: nowrap;\n\n    will-change: transform, opacity;\n}\n\n\n\/* =========================================\n   START POSITION\n========================================= *\/\n\n.rebelle-spark-shell.animate-ready .rebelle-spark-highlight {\n    opacity: 0;\n    transform: translateX(-140px);\n}\n\n\n\/* =========================================\n   FLY IN FROM LEFT\n========================================= *\/\n\n.rebelle-spark-shell.animate-ready.is-visible .rebelle-spark-highlight {\n    animation:\n        rebelleSparkFlyIn\n        1.5s\n        cubic-bezier(0.22, 1, 0.36, 1)\n        forwards;\n}\n\n\n@keyframes rebelleSparkFlyIn {\n\n    0% {\n        opacity: 0;\n        transform: translateX(-140px);\n    }\n\n    100% {\n        opacity: 1;\n        transform: translateX(0);\n    }\n}\n\n\n\/* =========================================\n   TABLET\n========================================= *\/\n\n@media screen and (max-width: 1024px) {\n\n    .rebelle-spark {\n        font-size: 54px;\n        line-height: 52px;\n    }\n\n}\n\n\n\/* =========================================\n   MOBILE\n========================================= *\/\n\n@media screen and (max-width: 767px) {\n\n    .rebelle-spark {\n        font-size: 36px;\n        line-height: 36px;\n    }\n\n    .rebelle-spark-highlight {\n        margin-left: 6px;\n        padding: 3px 7px 5px;\n    }\n\n    .rebelle-spark-shell.animate-ready .rebelle-spark-highlight {\n        transform: translateX(-80px);\n    }\n\n}\n\n\n\/* =========================================\n   REDUCED MOTION\n========================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    .rebelle-spark-shell.animate-ready .rebelle-spark-highlight {\n        opacity: 1;\n        transform: none;\n        animation: none;\n    }\n\n}\n<\/style>\n\n\n<div class=\"rebelle-spark-shell\">\n\n    <div class=\"rebelle-spark\">\n\n        <span class=\"rebelle-spark-label\">\n            The\n        <\/span>\n\n        <span class=\"rebelle-spark-highlight\">\n            Spark.\n        <\/span>\n\n    <\/div>\n\n<\/div>\n\n\n<script>\n(function () {\n\n    const sections =\n        document.querySelectorAll('.rebelle-spark-shell');\n\n    const reducedMotion =\n        window.matchMedia(\n            '(prefers-reduced-motion: reduce)'\n        ).matches;\n\n\n    sections.forEach(function (section) {\n\n        if (section.classList.contains('rebelle-animation-ready')) {\n            return;\n        }\n\n        section.classList.add(\n            'animate-ready',\n            'rebelle-animation-ready'\n        );\n\n\n        if (reducedMotion) {\n\n            section.classList.add('is-visible');\n\n            return;\n        }\n\n\n        const observer = new IntersectionObserver(\n            function (entries, observerInstance) {\n\n                entries.forEach(function (entry) {\n\n                    if (entry.isIntersecting) {\n\n                        entry.target.classList.add(\n                            'is-visible'\n                        );\n\n                        observerInstance.unobserve(\n                            entry.target\n                        );\n\n                    }\n\n                });\n\n            },\n            {\n                threshold: 0.35\n            }\n        );\n\n\n        observer.observe(section);\n\n    });\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5abf48bb elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"5abf48bb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p class=\"p1\"><strong>Do You Have the Morse Code? <\/strong><\/p><p class=\"p1\">We turned the campaign artwork into a miniature music-player moment, using the familiar language of album covers, progress bars and playback controls to create a handout that felt instantly recognisable and fun.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4d524646 e-flex e-con-boxed e-con e-parent\" data-id=\"4d524646\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4aaca93a elementor-widget elementor-widget-text-editor\" data-id=\"4aaca93a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p class=\"p1\">We take the campaign off the page and turn it into something people can walk into, play with and remember.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7d08e46e e-flex e-con-boxed e-con e-parent\" data-id=\"7d08e46e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-67da57f8 e-con-full e-flex e-con e-child\" data-id=\"67da57f8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3a245d5a elementor-widget elementor-widget-html\" data-id=\"3a245d5a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* =====================================================\n   REBELLE - MADE TANGIBLE\n===================================================== *\/\n\n.rebelle-tangible-shell,\n.rebelle-tangible-shell * {\n    box-sizing: border-box;\n}\n\n.rebelle-tangible-shell {\n    width: 100%;\n    max-width: 100%;\n    overflow: hidden;\n}\n\n\n\/* =====================================================\n   MAIN HEADING\n===================================================== *\/\n\n.rebelle-tangible-heading {\n    display: flex;\n    align-items: center;\n    flex-wrap: nowrap;\n\n    width: max-content;\n    max-width: 100%;\n\n    margin: 0;\n    padding: 0;\n\n    font-family: \"Arboria Bold\", \"Arboria\", sans-serif !important;\n\n    font-size: 70px;\n    line-height: 65px;\n    font-weight: 700;\n    letter-spacing: -0.035em;\n\n    color: #b02960;\n}\n\n\n\/* =====================================================\n   STATIC \"MADE\"\n===================================================== *\/\n\n.rebelle-tangible-label {\n    display: inline-block;\n    white-space: nowrap;\n}\n\n\n\/* =====================================================\n   PURPLE \"TANGIBLE.\" BLOCK\n===================================================== *\/\n\n.rebelle-tangible-highlight {\n    display: inline-block;\n\n    margin-left: 10px;\n    padding: 5px 12px 8px;\n\n    background-color: #a08ea3;\n    color: #b02960;\n\n    font-family: \"Arboria Bold\", \"Arboria\", sans-serif !important;\n\n    font-size: 70px;\n    line-height: 65px;\n    font-weight: 700;\n\n    white-space: nowrap;\n}\n\n\n\/* =====================================================\n   TABLET\n===================================================== *\/\n\n@media screen and (max-width: 1024px) {\n\n    .rebelle-tangible-heading,\n    .rebelle-tangible-highlight {\n        font-size: 54px;\n        line-height: 52px;\n    }\n\n}\n\n\n\/* =====================================================\n   MOBILE\n===================================================== *\/\n\n@media screen and (max-width: 767px) {\n\n    .rebelle-tangible-heading,\n    .rebelle-tangible-highlight {\n        font-size: 36px;\n        line-height: 36px;\n    }\n\n    .rebelle-tangible-highlight {\n        margin-left: 6px;\n        padding: 3px 7px 5px;\n    }\n\n}\n<\/style>\n\n\n<div class=\"rebelle-tangible-shell\">\n\n    <div class=\"rebelle-tangible-heading\">\n\n        <span class=\"rebelle-tangible-label\">\n            Made\n        <\/span>\n\n        <span class=\"rebelle-tangible-highlight\">\n            Tangible.\n        <\/span>\n\n    <\/div>\n\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2de2e28f elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"2de2e28f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* =====================================================\n   REBELLE - MADE TANGIBLE DROPDOWNS\n===================================================== *\/\n\n.tangible-dropdown-grid {\n    --card-text: #b02960;\n    --card-border: #b02960;\n\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 34px 36px;\n\n    width: 100%;\n    padding: 0;\n\n    background: transparent;\n}\n\n.tangible-dropdown-grid,\n.tangible-dropdown-grid * {\n    box-sizing: border-box;\n}\n\n\n\/* =====================================================\n   INDIVIDUAL BOX\n===================================================== *\/\n\n.tangible-dropdown-card {\n    width: 100%;\n    align-self: start;\n\n    margin: 0;\n\n    color: var(--card-text);\n    background: transparent;\n\n    border: 1px solid var(--card-border);\n\n    overflow: hidden;\n\n    transition: height 0.3s ease;\n}\n\n\n\/* =====================================================\n   SAME HEIGHT WHEN OPEN\n===================================================== *\/\n\n.tangible-dropdown-card[open] {\n    height: 210px;\n}\n\n\n\/* =====================================================\n   CLICKABLE HEADING\n===================================================== *\/\n\n.tangible-dropdown-card summary {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    width: 100%;\n\n    padding: 28px 22px;\n\n    cursor: pointer;\n    list-style: none;\n\n    background: transparent !important;\n    background-color: transparent !important;\n\n    color: var(--card-text) !important;\n\n    border: none !important;\n    box-shadow: none !important;\n    outline: none;\n}\n\n\n\/* Remove browser default triangle *\/\n\n.tangible-dropdown-card summary::-webkit-details-marker {\n    display: none;\n}\n\n.tangible-dropdown-card summary::marker {\n    content: \"\";\n}\n\n\n\/* Prevent Astra \/ Elementor hover styling *\/\n\n.tangible-dropdown-card summary:hover,\n.tangible-dropdown-card summary:focus,\n.tangible-dropdown-card summary:active {\n    background: transparent !important;\n    background-color: transparent !important;\n\n    color: var(--card-text) !important;\n\n    border: none !important;\n    box-shadow: none !important;\n}\n\n\n\/* =====================================================\n   HEADING\n===================================================== *\/\n\n.tangible-dropdown-title {\n    margin: 0;\n\n    color: var(--card-text);\n\n    font-family: \"Arboria\", sans-serif;\n    font-size: 32px;\n    font-weight: 700;\n    line-height: 1.1;\n}\n\n\n\/* =====================================================\n   CUSTOM ARROW\n===================================================== *\/\n\n.tangible-dropdown-arrow {\n    flex: 0 0 auto;\n\n    width: 13px;\n    height: 13px;\n\n    margin-left: 20px;\n    margin-right: 4px;\n\n    border-right: 1.5px solid var(--card-text);\n    border-bottom: 1.5px solid var(--card-text);\n\n    transform: rotate(45deg);\n\n    transition: transform 0.3s ease;\n}\n\n\n\/* Arrow turns upward when opened *\/\n\n.tangible-dropdown-card[open] .tangible-dropdown-arrow {\n    transform: rotate(225deg);\n}\n\n\n\/* =====================================================\n   CONTENT\n===================================================== *\/\n\n.tangible-dropdown-content {\n    padding: 0 22px 28px;\n\n    color: var(--card-text);\n\n    font-family: \"Arboria\", sans-serif;\n    font-size: 17px;\n    font-weight: 400;\n    line-height: 1.55;\n\n    animation: tangibleDropdownReveal 0.3s ease;\n}\n\n\n\/* JUSTIFIED PARAGRAPHS *\/\n\n.tangible-dropdown-content p {\n    margin: 0;\n\n    text-align: justify;\n    text-justify: inter-word;\n}\n\n\n\/* =====================================================\n   OPENING ANIMATION\n===================================================== *\/\n\n@keyframes tangibleDropdownReveal {\n\n    from {\n        opacity: 0;\n        transform: translateY(-6px);\n    }\n\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n\n}\n\n\n\/* =====================================================\n   KEYBOARD ACCESSIBILITY\n===================================================== *\/\n\n.tangible-dropdown-card summary:focus-visible {\n    outline: 2px solid var(--card-text);\n    outline-offset: -5px;\n}\n\n\n\/* =====================================================\n   TABLET\n===================================================== *\/\n\n@media screen and (max-width: 1024px) {\n\n    .tangible-dropdown-grid {\n        gap: 24px;\n    }\n\n    \/* Same height for all open tablet cards *\/\n    .tangible-dropdown-card[open] {\n        height: 230px;\n    }\n\n    .tangible-dropdown-card summary {\n        padding: 22px 18px;\n    }\n\n    .tangible-dropdown-title {\n        font-size: 27px;\n    }\n\n    .tangible-dropdown-content {\n        padding: 0 18px 22px;\n\n        font-size: 16px;\n        line-height: 1.5;\n    }\n\n}\n\n\n\/* =====================================================\n   MOBILE\n===================================================== *\/\n\n@media screen and (max-width: 767px) {\n\n    .tangible-dropdown-grid {\n        grid-template-columns: 1fr;\n        gap: 16px;\n    }\n\n    \/*\n     * Allow natural height on mobile so longer\n     * paragraphs can never be clipped.\n     *\/\n    .tangible-dropdown-card[open] {\n        height: auto;\n        min-height: 0;\n    }\n\n    .tangible-dropdown-card summary {\n        padding: 19px 16px;\n    }\n\n    .tangible-dropdown-title {\n        font-size: 24px;\n    }\n\n    .tangible-dropdown-content {\n        padding: 0 16px 20px;\n\n        font-size: 15px;\n        line-height: 1.5;\n    }\n\n    \/* Justification is less attractive on narrow screens *\/\n    .tangible-dropdown-content p {\n        text-align: left;\n    }\n\n    .tangible-dropdown-arrow {\n        width: 11px;\n        height: 11px;\n\n        margin-left: 15px;\n        margin-right: 3px;\n    }\n\n}\n<\/style>\n\n\n<div class=\"tangible-dropdown-grid\">\n\n\n    <!-- THE LOOK -->\n\n    <details class=\"tangible-dropdown-card\">\n\n        <summary>\n\n            <span class=\"tangible-dropdown-title\">\n                The Look\n            <\/span>\n\n            <span\n                class=\"tangible-dropdown-arrow\"\n                aria-hidden=\"true\">\n            <\/span>\n\n        <\/summary>\n\n        <div class=\"tangible-dropdown-content\">\n\n            <p>\n                Bold blue, campaign imagery and music-player graphics created a striking, digital-inspired design.\n            <\/p>\n\n        <\/div>\n\n    <\/details>\n\n\n\n    <!-- THE PACKAGING -->\n\n    <details class=\"tangible-dropdown-card\">\n\n        <summary>\n\n            <span class=\"tangible-dropdown-title\">\n                The Packaging\n            <\/span>\n\n            <span\n                class=\"tangible-dropdown-arrow\"\n                aria-hidden=\"true\">\n            <\/span>\n\n        <\/summary>\n\n        <div class=\"tangible-dropdown-content\">\n\n            <p>\n                The artwork was produced as a durable acrylic keyring, finished with rounded corners and a gold chain and ring.\n            <\/p>\n\n        <\/div>\n\n    <\/details>\n\n\n\n    <!-- THE MESSAGE -->\n\n    <details class=\"tangible-dropdown-card\">\n\n        <summary>\n\n            <span class=\"tangible-dropdown-title\">\n                The Message\n            <\/span>\n\n            <span\n                class=\"tangible-dropdown-arrow\"\n                aria-hidden=\"true\">\n            <\/span>\n\n        <\/summary>\n\n        <div class=\"tangible-dropdown-content\">\n\n            <p>\n                A simple campaign question \u2014 Do you have the Morse code? \u2014 became the title of the imagined track.\n            <\/p>\n\n        <\/div>\n\n    <\/details>\n\n\n\n    <!-- THE EXPERIENCE -->\n\n    <details class=\"tangible-dropdown-card\">\n\n        <summary>\n\n            <span class=\"tangible-dropdown-title\">\n                The Experience\n            <\/span>\n\n            <span\n                class=\"tangible-dropdown-arrow\"\n                aria-hidden=\"true\">\n            <\/span>\n\n        <\/summary>\n\n        <div class=\"tangible-dropdown-content\">\n\n            <p>\n                Guests received a pocket-sized piece of the campaign that could be clipped onto keys, bags or lanyards and kept long after the event.\n            <\/p>\n\n        <\/div>\n\n    <\/details>\n\n\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7067df24 e-con-full e-flex e-con e-child\" data-id=\"7067df24\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-576c2139 e-flex e-con-boxed e-con e-parent\" data-id=\"576c2139\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3902df4a elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"3902df4a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* =========================================\n   REBELLE - VIEW THE FULL PROJECT\n========================================= *\/\n\n.rebelle-project-shell {\n    width: max-content;\n    max-width: 100%;\n    overflow: hidden;\n}\n\n.rebelle-project-heading {\n    display: flex;\n    align-items: center;\n    flex-wrap: nowrap;\n\n    width: max-content;\n\n    font-family: \"Arboria Bold\", \"Arboria\", sans-serif !important;\n    font-size: 70px;\n    line-height: 65px;\n    font-weight: 700;\n    letter-spacing: -0.035em;\n\n    color: #b02960;\n}\n\n\n\/* =========================================\n   STATIC \"VIEW THE\"\n========================================= *\/\n\n.rebelle-project-label {\n    display: inline-block;\n    white-space: nowrap;\n}\n\n\n\/* =========================================\n   PURPLE \"FULL PROJECT.\" BLOCK\n========================================= *\/\n\n.rebelle-project-highlight {\n    display: inline-block;\n\n    margin-left: 10px;\n    padding: 5px 12px 8px;\n\n    background-color: #a08ea3;\n    color: #b02960;\n\n    white-space: nowrap;\n\n    font-family: \"Arboria Bold\", \"Arboria\", sans-serif !important;\n    font-size: 70px;\n    line-height: 65px;\n    font-weight: 700;\n\n    will-change: transform, opacity;\n}\n\n\n\/* =========================================\n   START POSITION\n========================================= *\/\n\n.rebelle-project-shell.animate-ready .rebelle-project-highlight {\n    opacity: 0;\n    transform: translateX(-160px);\n}\n\n\n\/* =========================================\n   FLY IN FROM LEFT\n========================================= *\/\n\n.rebelle-project-shell.animate-ready.is-visible .rebelle-project-highlight {\n    animation:\n        rebelleProjectFlyIn\n        1.5s\n        cubic-bezier(0.22, 1, 0.36, 1)\n        forwards;\n}\n\n\n@keyframes rebelleProjectFlyIn {\n\n    0% {\n        opacity: 0;\n        transform: translateX(-160px);\n    }\n\n    100% {\n        opacity: 1;\n        transform: translateX(0);\n    }\n}\n\n\n\/* =========================================\n   TABLET\n========================================= *\/\n\n@media screen and (max-width: 1024px) {\n\n    .rebelle-project-heading,\n    .rebelle-project-highlight {\n        font-size: 54px;\n        line-height: 52px;\n    }\n\n}\n\n\n\/* =========================================\n   MOBILE\n========================================= *\/\n\n@media screen and (max-width: 767px) {\n\n    .rebelle-project-heading,\n    .rebelle-project-highlight {\n        font-size: 36px;\n        line-height: 36px;\n    }\n\n    .rebelle-project-highlight {\n        margin-left: 6px;\n        padding: 3px 7px 5px;\n    }\n\n    .rebelle-project-shell.animate-ready .rebelle-project-highlight {\n        transform: translateX(-90px);\n    }\n\n}\n\n\n\/* =========================================\n   REDUCED MOTION\n========================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    .rebelle-project-shell.animate-ready .rebelle-project-highlight {\n        opacity: 1;\n        transform: none;\n        animation: none;\n    }\n\n}\n<\/style>\n\n\n<div class=\"rebelle-project-shell\">\n\n    <div class=\"rebelle-project-heading\">\n\n        <span class=\"rebelle-project-label\">\n            View the\n        <\/span>\n\n        <span class=\"rebelle-project-highlight\">\n            full project.\n        <\/span>\n\n    <\/div>\n\n<\/div>\n\n\n<script>\n(function () {\n\n    const sections =\n        document.querySelectorAll('.rebelle-project-shell');\n\n    const reducedMotion =\n        window.matchMedia(\n            '(prefers-reduced-motion: reduce)'\n        ).matches;\n\n\n    sections.forEach(function (section) {\n\n        if (\n            section.classList.contains(\n                'rebelle-project-animation-ready'\n            )\n        ) {\n            return;\n        }\n\n\n        section.classList.add(\n            'animate-ready',\n            'rebelle-project-animation-ready'\n        );\n\n\n        if (reducedMotion) {\n\n            section.classList.add('is-visible');\n\n            return;\n        }\n\n\n        const observer = new IntersectionObserver(\n\n            function (entries, observerInstance) {\n\n                entries.forEach(function (entry) {\n\n                    if (entry.isIntersecting) {\n\n                        entry.target.classList.add(\n                            'is-visible'\n                        );\n\n                        observerInstance.unobserve(\n                            entry.target\n                        );\n\n                    }\n\n                });\n\n            },\n\n            {\n                threshold: 0.35\n            }\n\n        );\n\n\n        observer.observe(section);\n\n    });\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-72153411 elementor-widget__width-inherit elementor-arrows-position-inside elementor-widget elementor-widget-image-carousel\" data-id=\"72153411\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;slides_to_show&quot;:&quot;4&quot;,&quot;slides_to_scroll&quot;:&quot;1&quot;,&quot;navigation&quot;:&quot;arrows&quot;,&quot;image_spacing_custom&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:30,&quot;sizes&quot;:[]},&quot;autoplay&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:5000,&quot;infinite&quot;:&quot;yes&quot;,&quot;speed&quot;:500,&quot;image_spacing_custom_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;image_spacing_custom_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"image-carousel.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-image-carousel-wrapper swiper\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Image Carousel\" dir=\"ltr\">\n\t\t\t<div class=\"elementor-image-carousel swiper-wrapper\" aria-live=\"off\">\n\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 of 7\"><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"72153411\" data-elementor-lightbox-title=\"img 5595\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MjI1NCwidXJsIjoiaHR0cHM6XC9cL2NvbnNvbGRlbW8uY28uemFcL3JlYmVsbGVcL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjZcLzA4XC9JTUdfNTU5NS5qcGciLCJzbGlkZXNob3ciOiI3MjE1MzQxMSJ9\" href=\"https:\/\/consoldemo.co.za\/rebelle\/wp-content\/uploads\/2026\/08\/IMG_5595.jpg\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/consoldemo.co.za\/rebelle\/wp-content\/uploads\/2026\/08\/IMG_5595.jpg\" alt=\"img 5595\"  title=\"The Pocket Playlist\" \/><\/figure><\/a><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"2 of 7\"><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"72153411\" data-elementor-lightbox-title=\"img 5597\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MjI1NSwidXJsIjoiaHR0cHM6XC9cL2NvbnNvbGRlbW8uY28uemFcL3JlYmVsbGVcL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjZcLzA4XC9JTUdfNTU5Ny5qcGciLCJzbGlkZXNob3ciOiI3MjE1MzQxMSJ9\" href=\"https:\/\/consoldemo.co.za\/rebelle\/wp-content\/uploads\/2026\/08\/IMG_5597.jpg\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/consoldemo.co.za\/rebelle\/wp-content\/uploads\/2026\/08\/IMG_5597.jpg\" alt=\"img 5597\"  title=\"The Pocket Playlist\" \/><\/figure><\/a><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"3 of 7\"><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"72153411\" data-elementor-lightbox-title=\"img 5598\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MjI1NiwidXJsIjoiaHR0cHM6XC9cL2NvbnNvbGRlbW8uY28uemFcL3JlYmVsbGVcL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjZcLzA4XC9JTUdfNTU5OC5qcGciLCJzbGlkZXNob3ciOiI3MjE1MzQxMSJ9\" href=\"https:\/\/consoldemo.co.za\/rebelle\/wp-content\/uploads\/2026\/08\/IMG_5598.jpg\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/consoldemo.co.za\/rebelle\/wp-content\/uploads\/2026\/08\/IMG_5598.jpg\" alt=\"img 5598\"  title=\"The Pocket Playlist\" \/><\/figure><\/a><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"4 of 7\"><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"72153411\" data-elementor-lightbox-title=\"img 5599\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MjI1NywidXJsIjoiaHR0cHM6XC9cL2NvbnNvbGRlbW8uY28uemFcL3JlYmVsbGVcL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjZcLzA4XC9JTUdfNTU5OS5qcGciLCJzbGlkZXNob3ciOiI3MjE1MzQxMSJ9\" href=\"https:\/\/consoldemo.co.za\/rebelle\/wp-content\/uploads\/2026\/08\/IMG_5599.jpg\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/consoldemo.co.za\/rebelle\/wp-content\/uploads\/2026\/08\/IMG_5599.jpg\" alt=\"img 5599\"  title=\"The Pocket Playlist\" \/><\/figure><\/a><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"5 of 7\"><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"72153411\" data-elementor-lightbox-title=\"img 5601\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MjI1OCwidXJsIjoiaHR0cHM6XC9cL2NvbnNvbGRlbW8uY28uemFcL3JlYmVsbGVcL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjZcLzA4XC9JTUdfNTYwMS5qcGciLCJzbGlkZXNob3ciOiI3MjE1MzQxMSJ9\" href=\"https:\/\/consoldemo.co.za\/rebelle\/wp-content\/uploads\/2026\/08\/IMG_5601.jpg\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/consoldemo.co.za\/rebelle\/wp-content\/uploads\/2026\/08\/IMG_5601.jpg\" alt=\"img 5601\"  title=\"The Pocket Playlist\" \/><\/figure><\/a><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"6 of 7\"><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"72153411\" data-elementor-lightbox-title=\"thumbnail\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MjI1OSwidXJsIjoiaHR0cHM6XC9cL2NvbnNvbGRlbW8uY28uemFcL3JlYmVsbGVcL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjZcLzA4XC9USFVNQk5BSUwtMzQuanBnIiwic2xpZGVzaG93IjoiNzIxNTM0MTEifQ%3D%3D\" href=\"https:\/\/consoldemo.co.za\/rebelle\/wp-content\/uploads\/2026\/08\/THUMBNAIL-34.jpg\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/consoldemo.co.za\/rebelle\/wp-content\/uploads\/2026\/08\/THUMBNAIL-34.jpg\" alt=\"thumbnail\"  title=\"The Pocket Playlist\" \/><\/figure><\/a><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"7 of 7\"><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"72153411\" data-elementor-lightbox-title=\"video section\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MjI2MCwidXJsIjoiaHR0cHM6XC9cL2NvbnNvbGRlbW8uY28uemFcL3JlYmVsbGVcL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjZcLzA4XC9WSURFTy1TRUNUSU9OLTQuanBnIiwic2xpZGVzaG93IjoiNzIxNTM0MTEifQ%3D%3D\" href=\"https:\/\/consoldemo.co.za\/rebelle\/wp-content\/uploads\/2026\/08\/VIDEO-SECTION-4.jpg\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/consoldemo.co.za\/rebelle\/wp-content\/uploads\/2026\/08\/VIDEO-SECTION-4.jpg\" alt=\"video section\"  title=\"The Pocket Playlist\" \/><\/figure><\/a><\/div>\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-prev\" role=\"button\" tabindex=\"0\">\n\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-eicon-chevron-left\" viewBox=\"0 0 1000 1000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M646 125C629 125 613 133 604 142L308 442C296 454 292 471 292 487 292 504 296 521 308 533L604 854C617 867 629 875 646 875 663 875 679 871 692 858 704 846 713 829 713 812 713 796 708 779 692 767L438 487 692 225C700 217 708 204 708 187 708 171 704 154 692 142 675 129 663 125 646 125Z\"><\/path><\/svg>\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-next\" role=\"button\" tabindex=\"0\">\n\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-eicon-chevron-right\" viewBox=\"0 0 1000 1000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M696 533C708 521 713 504 713 487 713 471 708 454 696 446L400 146C388 133 375 125 354 125 338 125 325 129 313 142 300 154 292 171 292 187 292 204 296 221 308 233L563 492 304 771C292 783 288 800 288 817 288 833 296 850 308 863 321 871 338 875 354 875 371 875 388 867 400 854L696 533Z\"><\/path><\/svg>\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e0460ac e-flex e-con-boxed e-con e-parent\" data-id=\"e0460ac\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-d386e7f e-con-full e-flex e-con e-child\" data-id=\"d386e7f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-478f6de8 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"478f6de8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* =====================================================\n   REBELLE - THE REBELLE TOUCH\n===================================================== *\/\n\n.rebelle-touch-shell,\n.rebelle-touch-shell * {\n    box-sizing: border-box;\n}\n\n.rebelle-touch-shell {\n    width: 100%;\n    max-width: 100%;\n}\n\n\n\/* =====================================================\n   MAIN HEADING\n===================================================== *\/\n\n.rebelle-touch-heading {\n    display: flex;\n    align-items: center;\n    flex-wrap: nowrap;\n\n    width: max-content;\n    max-width: 100%;\n\n    font-family: \"Arboria Bold\", \"Arboria\", sans-serif !important;\n\n    font-size: 70px;\n    line-height: 65px;\n    font-weight: 700;\n    letter-spacing: -0.035em;\n\n    color: #b02960;\n}\n\n\n\/* =====================================================\n   STATIC \"THE\"\n===================================================== *\/\n\n.rebelle-touch-label {\n    display: inline-block;\n    flex: 0 0 auto;\n\n    white-space: nowrap;\n}\n\n\n\/* =====================================================\n   ANIMATED GROUP\n   PURPLE BLOCK + WORDING + BOW\n===================================================== *\/\n\n.rebelle-touch-animated {\n    position: relative;\n\n    display: inline-block;\n    flex: 0 0 auto;\n\n    margin-left: 10px;\n\n    will-change: transform, opacity;\n}\n\n\n\/* =====================================================\n   PURPLE BLOCK\n===================================================== *\/\n\n.rebelle-touch-highlight {\n    display: inline-block;\n\n    padding: 5px 18px 8px;\n\n    background-color: #a08ea3;\n    color: #b02960;\n\n    font-family: \"Arboria Bold\", \"Arboria\", sans-serif !important;\n\n    font-size: 70px;\n    line-height: 65px;\n    font-weight: 700;\n    letter-spacing: -0.035em;\n\n    white-space: nowrap;\n}\n\n\n\/* =====================================================\n   BOW\n===================================================== *\/\n\n.rebelle-touch-bow {\n    position: absolute;\n\n    width: 90px;\n    height: auto;\n\n    right: -53px;\n    top: -35px;\n\n    z-index: 3;\n\n    pointer-events: none;\n}\n\n\n\/* =====================================================\n   START POSITION\n===================================================== *\/\n\n.rebelle-touch-shell.animate-ready .rebelle-touch-animated {\n    opacity: 0;\n    transform: translateX(-170px);\n}\n\n\n\/* =====================================================\n   FLY IN FROM LEFT\n===================================================== *\/\n\n.rebelle-touch-shell.animate-ready.is-visible .rebelle-touch-animated {\n    animation:\n        rebelleTouchFlyIn\n        1.5s\n        cubic-bezier(0.22, 1, 0.36, 1)\n        forwards;\n}\n\n\n@keyframes rebelleTouchFlyIn {\n\n    0% {\n        opacity: 0;\n        transform: translateX(-170px);\n    }\n\n    100% {\n        opacity: 1;\n        transform: translateX(0);\n    }\n\n}\n\n\n\/* =====================================================\n   TABLET\n===================================================== *\/\n\n@media screen and (max-width: 1024px) {\n\n    .rebelle-touch-heading,\n    .rebelle-touch-highlight {\n        font-size: 54px;\n        line-height: 52px;\n    }\n\n    .rebelle-touch-bow {\n        width: 75px;\n\n        right: -53px;\n        top: -32px;\n    }\n\n}\n\n\n\/* =====================================================\n   MOBILE\n===================================================== *\/\n\n@media screen and (max-width: 767px) {\n\n    .rebelle-touch-heading {\n        font-size: 34px;\n        line-height: 34px;\n    }\n\n    .rebelle-touch-highlight {\n        font-size: 34px;\n        line-height: 34px;\n\n        padding: 3px 8px 5px;\n    }\n\n    .rebelle-touch-animated {\n        margin-left: 6px;\n    }\n\n    .rebelle-touch-bow {\n        width: 48px;\n\n        right: 110px;\n        top: -23px;\n    }\n\n    .rebelle-touch-shell.animate-ready .rebelle-touch-animated {\n        transform: translateX(-90px);\n    }\n\n}\n\n\n\/* =====================================================\n   REDUCED MOTION\n===================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    .rebelle-touch-shell.animate-ready .rebelle-touch-animated {\n        opacity: 1;\n        transform: none;\n        animation: none;\n    }\n\n}\n<\/style>\n\n\n<div class=\"rebelle-touch-shell\">\n\n    <div class=\"rebelle-touch-heading\">\n\n        <!-- STATIC WORD -->\n\n        <span class=\"rebelle-touch-label\">\n            The\n        <\/span>\n\n\n        <!-- EVERYTHING INSIDE THIS GROUP FLIES IN TOGETHER -->\n\n        <span class=\"rebelle-touch-animated\">\n\n            <span class=\"rebelle-touch-highlight\">\n                Rebelle Touch.\n            <\/span>\n\n            <img decoding=\"async\"\n                class=\"rebelle-touch-bow\"\n                src=\"https:\/\/consoldemo.co.za\/rebelle\/wp-content\/uploads\/2026\/08\/Rebelle-Bow.png\"\n                alt=\"Rebelle Bow\"\n                aria-hidden=\"true\"\n             title=\"The Pocket Playlist\">\n\n        <\/span>\n\n    <\/div>\n\n<\/div>\n\n\n<script>\n(function () {\n\n    const sections =\n        document.querySelectorAll('.rebelle-touch-shell');\n\n    const reducedMotion =\n        window.matchMedia(\n            '(prefers-reduced-motion: reduce)'\n        ).matches;\n\n\n    sections.forEach(function (section) {\n\n        if (\n            section.classList.contains(\n                'rebelle-touch-animation-ready'\n            )\n        ) {\n            return;\n        }\n\n\n        section.classList.add(\n            'animate-ready',\n            'rebelle-touch-animation-ready'\n        );\n\n\n        if (reducedMotion) {\n\n            section.classList.add('is-visible');\n\n            return;\n        }\n\n\n        const observer = new IntersectionObserver(\n\n            function (entries, observerInstance) {\n\n                entries.forEach(function (entry) {\n\n                    if (entry.isIntersecting) {\n\n                        entry.target.classList.add(\n                            'is-visible'\n                        );\n\n                        observerInstance.unobserve(\n                            entry.target\n                        );\n\n                    }\n\n                });\n\n            },\n\n            {\n                threshold: 0.35\n            }\n\n        );\n\n\n        observer.observe(section);\n\n    });\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f72756e elementor-widget__width-inherit elementor-widget elementor-widget-text-editor\" data-id=\"f72756e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p class=\"p1\">Taking a flat campaign visual and transforming it into a miniature music player made the handout feel less like promotional merchandise and more like a collectible.<\/p><p>\u00a0<\/p><p class=\"p1\"><strong>A small giveaway that kept the campaign playing.<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-18dbe288 e-con-full e-flex e-con e-child\" data-id=\"18dbe288\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-27f3acf9 elementor-align-justify elementor-widget__width-initial elementor-widget elementor-widget-button\" data-id=\"27f3acf9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/consoldemo.co.za\/rebelle\/start-a-project\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Start A Project<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-be866ab elementor-align-justify elementor-widget__width-initial elementor-widget elementor-widget-button\" data-id=\"be866ab\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/consoldemo.co.za\/rebelle\/our-work\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Back To Our Work<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>The PocketPlaylist. Music-led Campaign Campaign Merchandise \u00b7 Concept Development \u00b7 Design \u00b7 Custom Production \u00b7 Campaign Merchandise \u00b7 Concept Development \u00b7 Design \u00b7 Custom Production \u00b7 Campaign Merchandise \u00b7 Concept Development \u00b7 Design \u00b7 Custom Production \u00b7 Campaign Merchandise \u00b7 Concept Development \u00b7 Design \u00b7 Custom Production \u00b7 Campaign Merchandise \u00b7 Concept Development \u00b7 Design [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":764,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"disabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2251","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/consoldemo.co.za\/rebelle\/wp-json\/wp\/v2\/pages\/2251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/consoldemo.co.za\/rebelle\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/consoldemo.co.za\/rebelle\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/consoldemo.co.za\/rebelle\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/consoldemo.co.za\/rebelle\/wp-json\/wp\/v2\/comments?post=2251"}],"version-history":[{"count":10,"href":"https:\/\/consoldemo.co.za\/rebelle\/wp-json\/wp\/v2\/pages\/2251\/revisions"}],"predecessor-version":[{"id":2934,"href":"https:\/\/consoldemo.co.za\/rebelle\/wp-json\/wp\/v2\/pages\/2251\/revisions\/2934"}],"up":[{"embeddable":true,"href":"https:\/\/consoldemo.co.za\/rebelle\/wp-json\/wp\/v2\/pages\/764"}],"wp:attachment":[{"href":"https:\/\/consoldemo.co.za\/rebelle\/wp-json\/wp\/v2\/media?parent=2251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}