{"id":1721,"date":"2026-10-13T08:25:29","date_gmt":"2026-10-13T08:25:29","guid":{"rendered":"https:\/\/richierich.com.my\/staging\/?page_id=1721"},"modified":"2026-10-16T06:56:40","modified_gmt":"2026-10-16T06:56:40","slug":"ai-generation","status":"publish","type":"page","link":"https:\/\/richierich.com.my\/staging\/ai-generation\/","title":{"rendered":"AI Generation"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1721\" class=\"elementor elementor-1721\">\n\t\t\t\t  <div class=\"elementor-element elementor-element-8738c43 e-con-full e-flex e-con e-parent\" data-id=\"8738c43\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8102d64 elementor-widget elementor-widget-html\" data-id=\"8102d64\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n\/* PAGE-LEVEL FIXES *\/\nbody,\n#page,\n#content,\n.site-content,\n.ast-separate-container {\n    background-color: var(--rr-bg, #050505) !important;\n}\n\n.site-content > .ast-container {\n    max-width: 100% !important;\n    width: 100% !important;\n    padding-left: 0 !important;\n    padding-right: 0 !important;\n    display: block !important;\n}\n\n#primary {\n    width: 100% !important;\n    max-width: 100% !important;\n    margin: 0 !important;\n    padding: 0 !important;\n}\n\n\/* HERO *\/\n.rr-pk-hero {\n    background-color: var(--rr-bg, #050505);\n    padding: 130px 5vw 90px;\n    min-height: 100vh;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.rr-pk-eyebrow {\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 700;\n    font-size: 0.85rem;\n    letter-spacing: 0.25em;\n    text-transform: uppercase;\n    color: var(--rr-accent3, #ccff00);\n    margin: 0 0 1.5rem;\n}\n\n.rr-pk-title {\n    margin: 0 0 2rem;\n    font-family: 'Anton', sans-serif !important;\n    text-transform: uppercase;\n    font-size: clamp(3rem, min(9vw, 13vh), 10rem);\n    line-height: 0.95;\n    font-weight: 400;\n    color: var(--rr-text, #f0f0f0) !important;\n}\n\n.rr-pk-title .rr-line {\n    display: block;\n    overflow: hidden;\n}\n\n.rr-pk-title .rr-line > span {\n    display: inline-block;\n}\n\n.rr-pk-title .rr-accent {\n    color: var(--rr-accent3, #ccff00);\n}\n\n.rr-pk-sub {\n    font-family: 'Inter', sans-serif;\n    font-size: clamp(1rem, 1.6vw, 1.4rem);\n    font-weight: 300;\n    line-height: 1.6;\n    max-width: 640px;\n    color: var(--rr-text, #f0f0f0);\n    opacity: 0.75;\n    margin: 0 0 3rem;\n}\n\n.rr-pk-hero-btns {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 1rem;\n}\n\n.rr-pk-hbtn {\n    display: inline-block;\n    padding: 20px 44px;\n    border-radius: 100px;\n    border: 1px solid rgba(255, 255, 255, 0.3);\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 700;\n    font-size: 0.95rem;\n    letter-spacing: 0.1em;\n    text-transform: uppercase;\n    text-decoration: none;\n    color: var(--rr-text, #f0f0f0);\n    transition: background-color 0.3s, color 0.3s, border-color 0.3s;\n}\n\n.rr-pk-hbtn:hover {\n    border-color: var(--rr-accent3, #ccff00);\n    color: var(--rr-accent3, #ccff00);\n}\n\n.rr-pk-hbtn.rr-primary {\n    background-color: var(--rr-accent3, #ccff00);\n    border-color: var(--rr-accent3, #ccff00);\n    color: var(--rr-bg, #050505);\n}\n\n.rr-pk-hbtn.rr-primary:hover {\n    background-color: transparent;\n    color: var(--rr-accent3, #ccff00);\n}\n\n.rr-pk-hero-inner {\n    will-change: filter, opacity;\n}\n\n\/* Lets the services section scroll OVER the pinned hero *\/\n.rr-gd-services {\n    position: relative;\n    z-index: 2;\n    background-color: transparent !important;\n}\n\n\/* Frosted cards (already styled in the services widget), so the blurred hero text doesn't show through them *\/\n.rr-gd-card {\n    -webkit-backdrop-filter: blur(18px);\n    backdrop-filter: blur(18px);\n}\n<\/style>\n\n<section class=\"rr-pk-hero\">\n  <div class=\"rr-pk-hero-inner\">\n    <p class=\"rr-pk-eyebrow\">AI Generation<\/p>\n\n    <h1 class=\"rr-pk-title\">\n        <span class=\"rr-line\"><span>Create beyond<\/span><\/span>\n        <span class=\"rr-line\"><span>the usual with<\/span><\/span>\n        <span class=\"rr-line\"><span class=\"rr-accent\">AI generation.<\/span><\/span>\n    <\/h1>\n\n    <p class=\"rr-pk-sub\">We use the latest AI tools to speed up ideas, generate content and bring concepts to life faster, with a human creative eye on every result.<\/p>\n\n    <div class=\"rr-pk-hero-btns\">\n        <a class=\"rr-pk-hbtn rr-primary rr-hoverable\" href=\"#services\">View services<\/a>\n        <a class=\"rr-pk-hbtn rr-hoverable\" href=\"\/staging\/contact-us\/\">Talk to us<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function () {\n    function rrInitPkHero() {\n        if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {\n            setTimeout(rrInitPkHero, 200);\n            return;\n        }\n        if (typeof window.rrBindHoverables === 'function') window.rrBindHoverables();\n        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n\n        gsap.from('.rr-pk-eyebrow', { opacity: 0, y: 20, duration: 0.8, ease: 'power3.out', delay: 0.2 });\n        gsap.from('.rr-pk-title .rr-line > span', {\n            yPercent: 110,\n            duration: 1.2,\n            ease: 'power4.out',\n            stagger: 0.12,\n            delay: 0.35\n        });\n        gsap.from('.rr-pk-sub', { opacity: 0, y: 30, duration: 1, ease: 'power3.out', delay: 1 });\n        gsap.from('.rr-pk-hero-btns', { opacity: 0, y: 30, duration: 1, ease: 'power3.out', delay: 1.2 });\n\n        \/\/ ---- Scroll effect: blur + dim, pinned behind the services section ----\n        var hero = document.querySelector('.rr-pk-hero');\n        var inner = document.querySelector('.rr-pk-hero-inner');\n        if (!hero || !inner) return;\n\n        \/\/ Phase 1: blur and dim as you start scrolling\n        gsap.fromTo(inner,\n            { filter: 'blur(0px)', opacity: 1 },\n            {\n                filter: 'blur(16px)',\n                opacity: 0.3,\n                ease: 'none',\n                scrollTrigger: {\n                    trigger: hero,\n                    start: 'top top',\n                    end: function () { return '+=' + (window.innerHeight * 0.7); },\n                    scrub: true,\n                    invalidateOnRefresh: true,\n                    \/\/ buttons stop being clickable once they're blurred out\n                    onUpdate: function (self) {\n                        inner.style.pointerEvents = self.progress > 0.3 ? 'none' : '';\n                    }\n                }\n            }\n        );\n\n        \/\/ Phase 2: stay pinned until the services section ends, then fade out\n        var services = document.querySelector('.rr-gd-services');\n        if (services) {\n            ScrollTrigger.create({\n                trigger: hero,\n                start: 'top top',\n                endTrigger: services,\n                end: 'bottom bottom',\n                pin: true,\n                pinSpacing: false\n            });\n\n            gsap.fromTo(inner,\n                { opacity: 0.3 },\n                {\n                    opacity: 0,\n                    ease: 'none',\n                    immediateRender: false,\n                    scrollTrigger: {\n                        trigger: services,\n                        start: 'bottom 150%',\n                        end: 'bottom 100%',\n                        scrub: true\n                    }\n                }\n            );\n        }\n    }\n    rrInitPkHero();\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-01fbc05 e-con-full e-flex e-con e-parent\" data-id=\"01fbc05\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-89a4d7c elementor-widget elementor-widget-html\" data-id=\"89a4d7c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--\nAI GENERATION PAGE \u2014 WIDGET 2 OF 6: WHAT WE CREATE\n\nELEMENTOR SETUP:\n1. Section\/Container below the hero (full width, no background) ->\n   HTML widget -> paste everything below.\n2. ALL CONTENT IS PLACEHOLDER. Edit the six services (titles and\n   one-line descriptions) to match what Rich Media really offers.\n3. To add a service, copy one <div class=\"rr-gd-card\"> and renumber.\n4. The hero widget (richierich-48) stays pinned behind this section,\n   so keep this one directly under it. Its id is \"services\", which the\n   hero's \"View services\" button scrolls to.\n5. Uses GSAP\/ScrollTrigger from your sitewide footer WPCode snippet.\n-->\n\n<style>\n.rr-gd-services {\n    position: relative;\n    z-index: 2;\n    background-color: transparent;\n    padding: 8vh 5vw 12vh;\n}\n\n.rr-gd-head {\n    max-width: 1300px;\n    margin: 0 auto 7vh;\n}\n\n.rr-gd-label {\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 700;\n    font-size: 0.85rem;\n    letter-spacing: 0.25em;\n    text-transform: uppercase;\n    color: var(--rr-accent3, #ccff00);\n    margin: 0 0 1rem;\n}\n\n.rr-gd-heading {\n    margin: 0;\n    font-family: 'Anton', sans-serif !important;\n    font-weight: 400;\n    text-transform: uppercase;\n    font-size: clamp(2.5rem, 6vw, 6rem);\n    line-height: 1;\n    color: var(--rr-text, #f0f0f0) !important;\n}\n\n.rr-gd-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 2vw;\n    max-width: 1300px;\n    margin: 0 auto;\n}\n\n.rr-gd-card {\n    padding: 2.4rem 2rem 2.6rem;\n    background: rgba(255, 255, 255, 0.04);\n    border: 1px solid rgba(255, 255, 255, 0.12);\n    border-radius: 18px;\n    -webkit-backdrop-filter: blur(18px);\n    backdrop-filter: blur(18px);\n    transition: transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;\n}\n\n.rr-gd-card:hover {\n    transform: translateY(-8px);\n    border-color: var(--rr-accent3, #ccff00);\n    background: rgba(255, 255, 255, 0.07);\n}\n\n.rr-gd-num {\n    font-family: 'Anton', sans-serif;\n    font-size: clamp(3rem, 5vw, 5rem);\n    line-height: 1;\n    color: transparent;\n    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.35);\n    margin-bottom: 1.2rem;\n    transition: -webkit-text-stroke-color 0.4s ease;\n}\n\n.rr-gd-card:hover .rr-gd-num {\n    -webkit-text-stroke-color: var(--rr-accent3, #ccff00);\n}\n\n.rr-gd-card h3 {\n    margin: 0 0 0.8rem;\n    font-family: 'Anton', sans-serif !important;\n    font-weight: 400;\n    text-transform: uppercase;\n    font-size: clamp(1.5rem, 2.2vw, 2.2rem);\n    line-height: 1.1;\n    color: var(--rr-text, #f0f0f0) !important;\n}\n\n.rr-gd-card p {\n    margin: 0;\n    font-family: 'Inter', sans-serif;\n    font-size: 0.98rem;\n    line-height: 1.6;\n    color: var(--rr-text, #f0f0f0);\n    opacity: 0.7;\n}\n\n@media (max-width: 900px) {\n    .rr-gd-grid { grid-template-columns: repeat(2, 1fr); gap: 3vh 4vw; }\n}\n\n@media (max-width: 600px) {\n    .rr-gd-grid { grid-template-columns: 1fr; }\n}\n<\/style>\n\n<section class=\"rr-gd-services\" id=\"services\">\n\n    <div class=\"rr-gd-head\">\n        <p class=\"rr-gd-label\">What we create<\/p>\n        <h2 class=\"rr-gd-heading\">Ideas made<br>real, faster<\/h2>\n    <\/div>\n\n    <div class=\"rr-gd-grid\">\n\n        <div class=\"rr-gd-card\">\n            <div class=\"rr-gd-num\">01<\/div>\n            <h3>AI images and visuals<\/h3>\n            <p>Concept art, campaign visuals and product scenes created in hours, not weeks.<\/p>\n        <\/div>\n\n        <div class=\"rr-gd-card\">\n            <div class=\"rr-gd-num\">02<\/div>\n            <h3>AI video<\/h3>\n            <p>Short promo clips, animated visuals and social videos brought to life with AI.<\/p>\n        <\/div>\n\n        <div class=\"rr-gd-card\">\n            <div class=\"rr-gd-num\">03<\/div>\n            <h3>AI copy and content<\/h3>\n            <p>Captions, scripts, blog drafts and product descriptions, refined by our writers.<\/p>\n        <\/div>\n\n        <div class=\"rr-gd-card\">\n            <div class=\"rr-gd-num\">04<\/div>\n            <h3>Voice and audio<\/h3>\n            <p>Voiceovers and sound for your videos, produced faster and edited by hand.<\/p>\n        <\/div>\n\n        <div class=\"rr-gd-card\">\n            <div class=\"rr-gd-num\">05<\/div>\n            <h3>Chatbots and automation<\/h3>\n            <p>Helpful assistants and workflows that answer customers and save your team time.<\/p>\n        <\/div>\n\n        <div class=\"rr-gd-card\">\n            <div class=\"rr-gd-num\">06<\/div>\n            <h3>AI-powered campaigns<\/h3>\n            <p>Full campaigns where AI speeds up the ideas and our team shapes them to your brand.<\/p>\n        <\/div>\n\n    <\/div>\n<\/section>\n\n<script>\n(function () {\n    function rrInitGdServices() {\n        if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {\n            setTimeout(rrInitGdServices, 200);\n            return;\n        }\n        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n\n        gsap.from('.rr-gd-head', {\n            y: 40, opacity: 0, duration: 1, ease: 'power3.out',\n            scrollTrigger: { trigger: '.rr-gd-head', start: 'top 85%' }\n        });\n\n        \/\/ clearProps hands transform control back to CSS afterwards,\n        \/\/ so the hover lift keeps working\n        gsap.from('.rr-gd-card', {\n            y: 70, opacity: 0, duration: 0.9, ease: 'power3.out', stagger: 0.1,\n            clearProps: 'transform,opacity',\n            scrollTrigger: { trigger: '.rr-gd-grid', start: 'top 85%' }\n        });\n    }\n    rrInitGdServices();\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c24d4f5 e-con-full e-flex e-con e-parent\" data-id=\"c24d4f5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9cc4dbc elementor-widget elementor-widget-html\" data-id=\"9cc4dbc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--\nAI GENERATION PAGE \u2014 WIDGET 3 OF 6: CAPABILITIES STRIP\n\nELEMENTOR SETUP:\n1. On the Portfolio page, add a Section\/Container (full width, Overflow: Visible).\n2. Add an \"HTML\" widget and paste everything below.\n3. Edit the words in the two rows (keep each row's repeated copies\n   so the line is always wider than the screen).\n4. This is a mid-page section, so it has no extra top padding for the header.\n5. Uses GSAP\/ScrollTrigger from your sitewide footer WPCode snippet.\n\nEFFECT: two giant text rows slide in opposite directions as you scroll\npast the section (one solid, one outlined).\n-->\n\n<style>\n.rr-pf-hero {\n    background-color: var(--rr-bg, #050505);\n    padding: 10vh 0 12vh;\n    overflow: hidden;\n}\n\n.rr-pf-hero-row {\n    white-space: nowrap;\n    font-family: 'Anton', sans-serif;\n    text-transform: uppercase;\n    font-size: clamp(3.5rem, 10vw, 11rem);\n    line-height: 1;\n    color: var(--rr-text, #f0f0f0);\n    will-change: transform;\n}\n\n.rr-pf-hero-row.rr-outline {\n    color: transparent;\n    -webkit-text-stroke: 2px var(--rr-text, #f0f0f0);\n}\n\n\/* Small label above the moving rows *\/\n.rr-pf-hero-label {\n    margin: 0 0 3vh;\n    padding: 0 5vw;\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 700;\n    font-size: 0.85rem;\n    letter-spacing: 0.25em;\n    text-transform: uppercase;\n    color: var(--rr-accent3, #ccff00);\n}\n\n.rr-pf-hero-row span {\n    display: inline-block;\n    padding-right: 3vw;\n}\n<\/style>\n\n<section class=\"rr-pf-hero\">\n    <p class=\"rr-pf-hero-label\">What AI makes possible<\/p>\n    <div class=\"rr-pf-hero-row\" data-dir=\"left\">\n        <span>Images &middot; Video &middot; Voice &middot;<\/span><span>Images &middot; Video &middot; Voice &middot;<\/span><span>Images &middot; Video &middot; Voice &middot;<\/span><span>Images &middot; Video &middot; Voice &middot;<\/span>\n    <\/div>\n    <div class=\"rr-pf-hero-row rr-outline\" data-dir=\"right\">\n        <span>Copy &middot; Chatbots &middot; Automation &middot;<\/span><span>Copy &middot; Chatbots &middot; Automation &middot;<\/span><span>Copy &middot; Chatbots &middot; Automation &middot;<\/span><span>Copy &middot; Chatbots &middot; Automation &middot;<\/span>\n    <\/div>\n<\/section>\n\n<script>\n(function () {\n    function rrInitPfHero() {\n        if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {\n            setTimeout(rrInitPfHero, 200);\n            return;\n        }\n        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n\n        var section = document.querySelector('.rr-pf-hero');\n        if (!section) return;\n\n        section.querySelectorAll('.rr-pf-hero-row').forEach(function (row) {\n            var goLeft = row.getAttribute('data-dir') === 'left';\n            gsap.fromTo(row,\n                { xPercent: goLeft ? 0 : -35 },\n                {\n                    xPercent: goLeft ? -35 : 0,\n                    ease: 'none',\n                    scrollTrigger: {\n                        trigger: section,\n                        start: 'top bottom',\n                        end: 'bottom top',\n                        scrub: 1\n                    }\n                }\n            );\n        });\n    }\n    rrInitPfHero();\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-515c8de e-con-full e-flex e-con e-parent\" data-id=\"515c8de\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-24997ee elementor-widget elementor-widget-html\" data-id=\"24997ee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--\nAI GENERATION PAGE \u2014 WIDGET 4 OF 6: INCLUDED + PROCESS\n\nELEMENTOR SETUP:\n1. Section\/Container below the capabilities strip (full width, no\n   background) -> HTML widget -> paste everything below.\n2. ALL CONTENT IS PLACEHOLDER. Edit the \"included\" items and the four\n   process steps to match how Rich Media actually works.\n3. To add a step, copy one <div class=\"rr-pk-step\"> and renumber.\n4. Uses GSAP\/ScrollTrigger from your sitewide footer WPCode snippet.\n-->\n\n<style>\n.rr-pk-process {\n    background-color: var(--rr-bg, #050505);\n    padding: 10vh 5vw 12vh;\n}\n\n.rr-pk-wrap {\n    max-width: 1300px;\n    margin: 0 auto;\n}\n\n.rr-pk-label {\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 700;\n    font-size: 0.85rem;\n    letter-spacing: 0.25em;\n    text-transform: uppercase;\n    color: var(--rr-accent3, #ccff00);\n    margin: 0 0 1rem;\n}\n\n.rr-pk-h2 {\n    margin: 0 0 6vh;\n    font-family: 'Anton', sans-serif !important;\n    font-weight: 400;\n    text-transform: uppercase;\n    font-size: clamp(2.5rem, 6vw, 6rem);\n    line-height: 1;\n    color: var(--rr-text, #f0f0f0) !important;\n}\n\n\/* Included in every project *\/\n.rr-pk-included {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 2vw;\n    margin-bottom: 14vh;\n}\n\n.rr-pk-inc {\n    padding-top: 1.5rem;\n    border-top: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.rr-pk-inc h3 {\n    margin: 0 0 0.6rem;\n    font-family: 'Montserrat', sans-serif !important;\n    font-weight: 700;\n    font-size: 1.1rem;\n    color: var(--rr-text, #f0f0f0) !important;\n}\n\n.rr-pk-inc p {\n    margin: 0;\n    font-family: 'Inter', sans-serif;\n    font-size: 0.95rem;\n    line-height: 1.55;\n    color: var(--rr-text, #f0f0f0);\n    opacity: 0.65;\n}\n\n\/* Process steps *\/\n.rr-pk-step {\n    display: grid;\n    grid-template-columns: minmax(120px, 22%) 1fr;\n    gap: 3vw;\n    align-items: center;\n    padding: 4vh 0;\n    border-top: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.rr-pk-step:last-child {\n    border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.rr-pk-num {\n    font-family: 'Anton', sans-serif;\n    font-size: clamp(4.5rem, 11vw, 11rem);\n    line-height: 1;\n    color: transparent;\n    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.35);\n    transition: -webkit-text-stroke-color 0.4s ease;\n}\n\n.rr-pk-step:hover .rr-pk-num {\n    -webkit-text-stroke-color: var(--rr-accent3, #ccff00);\n}\n\n.rr-pk-step h3 {\n    margin: 0 0 0.8rem;\n    font-family: 'Anton', sans-serif !important;\n    font-weight: 400;\n    text-transform: uppercase;\n    font-size: clamp(1.8rem, 3.4vw, 3.4rem);\n    color: var(--rr-text, #f0f0f0) !important;\n}\n\n.rr-pk-step p {\n    margin: 0;\n    max-width: 560px;\n    font-family: 'Inter', sans-serif;\n    font-size: clamp(0.95rem, 1.2vw, 1.15rem);\n    line-height: 1.6;\n    color: var(--rr-text, #f0f0f0);\n    opacity: 0.7;\n}\n\n@media (max-width: 900px) {\n    .rr-pk-included { grid-template-columns: repeat(2, 1fr); gap: 5vh 4vw; }\n}\n\n@media (max-width: 600px) {\n    .rr-pk-included { grid-template-columns: 1fr; }\n    .rr-pk-step { grid-template-columns: 1fr; gap: 1rem; }\n}\n<\/style>\n\n<section class=\"rr-pk-process\">\n    <div class=\"rr-pk-wrap\">\n\n        <p class=\"rr-pk-label\">Every project includes<\/p>\n        <h2 class=\"rr-pk-h2\">What you always get<\/h2>\n\n        <div class=\"rr-pk-included\">\n            <div class=\"rr-pk-inc\">\n                <h3>Human creative direction<\/h3>\n                <p>A real designer guides every result, so the output feels like your brand.<\/p>\n            <\/div>\n            <div class=\"rr-pk-inc\">\n                <h3>Quality checked<\/h3>\n                <p>We review every output for quality, accuracy and fit before it reaches you.<\/p>\n            <\/div>\n            <div class=\"rr-pk-inc\">\n                <h3>Ready-to-use files<\/h3>\n                <p>Final assets exported in the sizes and formats you need.<\/p>\n            <\/div>\n            <div class=\"rr-pk-inc\">\n                <h3>Clear revisions<\/h3>\n                <p>A set number of revision rounds keeps feedback focused and timelines on track.<\/p>\n            <\/div>\n        <\/div>\n\n        <p class=\"rr-pk-label\">How it works<\/p>\n        <h2 class=\"rr-pk-h2\">From idea to final assets<\/h2>\n\n        <div class=\"rr-pk-steps\">\n            <div class=\"rr-pk-step\">\n                <div class=\"rr-pk-num\">01<\/div>\n                <div>\n                    <h3>Brief<\/h3>\n                    <p>We learn about your brand, your goals and what you want to create.<\/p>\n                <\/div>\n            <\/div>\n            <div class=\"rr-pk-step\">\n                <div class=\"rr-pk-num\">02<\/div>\n                <div>\n                    <h3>Generate<\/h3>\n                    <p>We use AI tools to explore many directions quickly, guided by your brief.<\/p>\n                <\/div>\n            <\/div>\n            <div class=\"rr-pk-step\">\n                <div class=\"rr-pk-num\">03<\/div>\n                <div>\n                    <h3>Refine<\/h3>\n                    <p>Our team edits, polishes and corrects the strongest options by hand.<\/p>\n                <\/div>\n            <\/div>\n            <div class=\"rr-pk-step\">\n                <div class=\"rr-pk-num\">04<\/div>\n                <div>\n                    <h3>Deliver<\/h3>\n                    <p>You receive the final assets, ready to publish, with guidance on how to use them.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/section>\n\n<script>\n(function () {\n    function rrInitPkProcess() {\n        if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {\n            setTimeout(rrInitPkProcess, 200);\n            return;\n        }\n        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n\n        gsap.from('.rr-pk-inc', {\n            y: 50, opacity: 0, duration: 0.9, ease: 'power3.out', stagger: 0.12,\n            scrollTrigger: { trigger: '.rr-pk-included', start: 'top 85%' }\n        });\n\n        gsap.utils.toArray('.rr-pk-step').forEach(function (step) {\n            gsap.from(step, {\n                y: 60, opacity: 0, duration: 1, ease: 'power3.out',\n                scrollTrigger: { trigger: step, start: 'top 88%' }\n            });\n        });\n    }\n    rrInitPkProcess();\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9dcc711 e-con-full elementor-hidden-desktop elementor-hidden-laptop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"9dcc711\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-56892bd elementor-widget elementor-widget-html\" data-id=\"56892bd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--\nAI GENERATION PAGE \u2014 WIDGET 5 OF 6: PACKAGES\n\nELEMENTOR SETUP:\n1. Section\/Container below the process section (full width, no background) ->\n   HTML widget -> paste everything below.\n2. ALL CONTENT IS PLACEHOLDER. Replace plan names, taglines, prices\n   (\"RM X,XXX\") and every feature line with your real offering.\n3. To add a feature, copy one <li>. To change which card is highlighted,\n   move the class \"rr-featured\" and the \"Most popular\" badge.\n4. Button links go to \/contact-us\/ \u2014 change if needed.\n5. Uses GSAP\/ScrollTrigger from your sitewide footer WPCode snippet.\n-->\n\n<style>\n.rr-pk-pricing {\n    background-color: var(--rr-bg, #050505);\n    padding: 8vh 5vw 12vh;\n}\n\n.rr-pk-pricing-head {\n    text-align: center;\n    margin-bottom: 7vh;\n}\n\n.rr-pk-label {\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 700;\n    font-size: 0.85rem;\n    letter-spacing: 0.25em;\n    text-transform: uppercase;\n    color: var(--rr-accent3, #ccff00);\n    margin: 0 0 1rem;\n}\n\n.rr-pk-heading {\n    margin: 0;\n    font-family: 'Anton', sans-serif !important;\n    font-weight: 400;\n    text-transform: uppercase;\n    font-size: clamp(2.5rem, 6vw, 6rem);\n    line-height: 1;\n    color: var(--rr-text, #f0f0f0) !important;\n}\n\n.rr-pk-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 2vw;\n    align-items: stretch;\n    max-width: 1300px;\n    margin: 0 auto;\n}\n\n.rr-pk-card {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    padding: 2.8rem 2.2rem;\n    background: rgba(255, 255, 255, 0.04);\n    border: 1px solid rgba(255, 255, 255, 0.12);\n    border-radius: 18px;\n    transition: transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;\n}\n\n.rr-pk-card:hover {\n    transform: translateY(-8px);\n    border-color: rgba(255, 255, 255, 0.35);\n    background: rgba(255, 255, 255, 0.07);\n}\n\n.rr-pk-card.rr-featured {\n    top: -16px;\n    border-color: var(--rr-accent3, #ccff00);\n    background: rgba(204, 255, 0, 0.06);\n}\n\n.rr-pk-badge {\n    position: absolute;\n    top: -14px;\n    left: 50%;\n    transform: translateX(-50%);\n    padding: 6px 18px;\n    border-radius: 100px;\n    background: var(--rr-accent3, #ccff00);\n    color: var(--rr-bg, #050505);\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 800;\n    font-size: 0.7rem;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n    white-space: nowrap;\n}\n\n.rr-pk-tier {\n    margin: 0 0 0.5rem;\n    font-family: 'Anton', sans-serif !important;\n    font-weight: 400;\n    text-transform: uppercase;\n    font-size: clamp(1.8rem, 2.6vw, 2.6rem);\n    color: var(--rr-text, #f0f0f0) !important;\n}\n\n.rr-pk-tagline {\n    margin: 0 0 1.8rem;\n    font-family: 'Inter', sans-serif;\n    font-size: 0.95rem;\n    line-height: 1.5;\n    color: var(--rr-text, #f0f0f0);\n    opacity: 0.65;\n    min-height: 2.9em;\n}\n\n.rr-pk-price {\n    margin: 0;\n    font-family: 'Anton', sans-serif !important;\n    font-weight: 400;\n    font-size: clamp(2.4rem, 3.6vw, 3.6rem);\n    line-height: 1;\n    color: var(--rr-text, #f0f0f0) !important;\n}\n\n.rr-pk-price-note {\n    margin: 0.5rem 0 1.8rem;\n    font-family: 'Inter', sans-serif;\n    font-size: 0.8rem;\n    letter-spacing: 0.05em;\n    color: var(--rr-text, #f0f0f0);\n    opacity: 0.5;\n}\n\n.rr-pk-list {\n    list-style: none;\n    margin: 0 0 2.2rem;\n    padding: 1.8rem 0 0;\n    border-top: 1px solid rgba(255, 255, 255, 0.12);\n    flex: 1 1 auto;\n}\n\n.rr-pk-list li {\n    position: relative;\n    padding: 0 0 0.9rem 1.8rem;\n    margin: 0;\n    font-family: 'Inter', sans-serif;\n    font-size: 0.95rem;\n    line-height: 1.45;\n    color: var(--rr-text, #f0f0f0);\n}\n\n.rr-pk-list li::before {\n    content: '\\2713';\n    position: absolute;\n    left: 0;\n    top: 0;\n    color: var(--rr-accent3, #ccff00);\n    font-weight: 700;\n}\n\n.rr-pk-btn {\n    display: block;\n    text-align: center;\n    padding: 18px 24px;\n    border-radius: 100px;\n    border: 1px solid rgba(255, 255, 255, 0.3);\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 700;\n    font-size: 0.9rem;\n    letter-spacing: 0.1em;\n    text-transform: uppercase;\n    text-decoration: none;\n    color: var(--rr-text, #f0f0f0);\n    transition: background-color 0.3s, color 0.3s, border-color 0.3s;\n}\n\n.rr-pk-btn:hover {\n    background-color: var(--rr-accent3, #ccff00);\n    border-color: var(--rr-accent3, #ccff00);\n    color: var(--rr-bg, #050505);\n}\n\n.rr-pk-featured .rr-pk-btn,\n.rr-pk-card.rr-featured .rr-pk-btn {\n    background-color: var(--rr-accent3, #ccff00);\n    border-color: var(--rr-accent3, #ccff00);\n    color: var(--rr-bg, #050505);\n}\n\n.rr-pk-card.rr-featured .rr-pk-btn:hover {\n    background-color: transparent;\n    color: var(--rr-accent3, #ccff00);\n}\n\n.rr-pk-footnote {\n    text-align: center;\n    margin: 6vh auto 0;\n    max-width: 700px;\n    font-family: 'Inter', sans-serif;\n    font-size: 0.9rem;\n    line-height: 1.6;\n    color: var(--rr-text, #f0f0f0);\n    opacity: 0.6;\n}\n\n.rr-pk-footnote a {\n    color: var(--rr-accent3, #ccff00);\n    text-decoration: underline;\n}\n\n@media (max-width: 900px) {\n    .rr-pk-grid {\n        grid-template-columns: 1fr;\n        gap: 4vh;\n        max-width: 520px;\n    }\n    .rr-pk-card.rr-featured { top: 0; }\n    .rr-pk-tagline { min-height: 0; }\n}\n<\/style>\n\n<section class=\"rr-pk-pricing\" id=\"plans\">\n\n    <div class=\"rr-pk-pricing-head\">\n        <p class=\"rr-pk-label\">AI packages<\/p>\n        <h2 class=\"rr-pk-heading\">Pick your plan<\/h2>\n    <\/div>\n\n    <div class=\"rr-pk-grid\">\n\n        <div class=\"rr-pk-card\">\n            <h3 class=\"rr-pk-tier\">Starter<\/h3>\n            <p class=\"rr-pk-tagline\">For brands trying AI-powered content for the first time.<\/p>\n            <p class=\"rr-pk-price\">RM X,XXX<\/p>\n            <p class=\"rr-pk-price-note\">Per project<\/p>\n            <ul class=\"rr-pk-list\">\n                <li>Up to 10 AI images<\/li>\n                <li>1 short AI video clip<\/li>\n                <li>Human review and polish<\/li>\n                <li>1 round of revisions<\/li>\n            <\/ul>\n            <a class=\"rr-pk-btn rr-hoverable\" href=\"\/contact-us\/\">Get started<\/a>\n        <\/div>\n\n        <div class=\"rr-pk-card rr-featured\">\n            <span class=\"rr-pk-badge\">Most popular<\/span>\n            <h3 class=\"rr-pk-tier\">Growth<\/h3>\n            <p class=\"rr-pk-tagline\">For growing brands that need a steady stream of fresh content.<\/p>\n            <p class=\"rr-pk-price\">RM X,XXX<\/p>\n            <p class=\"rr-pk-price-note\">Per project<\/p>\n            <ul class=\"rr-pk-list\">\n                <li>Up to 30 AI images<\/li>\n                <li>3 short AI video clips<\/li>\n                <li>AI-assisted captions and copy<\/li>\n                <li>Brand style matching<\/li>\n                <li>2 rounds of revisions<\/li>\n            <\/ul>\n            <a class=\"rr-pk-btn rr-hoverable\" href=\"\/contact-us\/\">Get started<\/a>\n        <\/div>\n\n        <div class=\"rr-pk-card\">\n            <h3 class=\"rr-pk-tier\">Scale<\/h3>\n            <p class=\"rr-pk-tagline\">For brands that want AI woven into their whole campaign.<\/p>\n            <p class=\"rr-pk-price\">RM X,XXX<\/p>\n            <p class=\"rr-pk-price-note\">Per project<\/p>\n            <ul class=\"rr-pk-list\">\n                <li>Unlimited concepts (fair use)<\/li>\n                <li>Campaign video package<\/li>\n                <li>Voiceover and audio<\/li>\n                <li>Chatbot or automation setup<\/li>\n                <li>Dedicated creative lead<\/li>\n            <\/ul>\n            <a class=\"rr-pk-btn rr-hoverable\" href=\"\/contact-us\/\">Get started<\/a>\n        <\/div>\n\n    <\/div>\n\n    <p class=\"rr-pk-footnote\">Prices depend on the number and complexity of assets. Need something different? <a href=\"\/contact-us\/\">Tell us what you have in mind<\/a> and we'll quote a custom plan.<\/p>\n\n<\/section>\n\n<script>\n(function () {\n    function rrInitPkPricing() {\n        if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {\n            setTimeout(rrInitPkPricing, 200);\n            return;\n        }\n        if (typeof window.rrBindHoverables === 'function') window.rrBindHoverables();\n        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n\n        gsap.from('.rr-pk-pricing-head', {\n            y: 40, opacity: 0, duration: 1, ease: 'power3.out',\n            scrollTrigger: { trigger: '.rr-pk-pricing-head', start: 'top 85%' }\n        });\n\n        \/\/ clearProps hands transform control back to CSS afterwards,\n        \/\/ so the hover lift keeps working\n        gsap.from('.rr-pk-card', {\n            y: 80, opacity: 0, duration: 1, ease: 'power3.out', stagger: 0.15,\n            clearProps: 'transform,opacity',\n            scrollTrigger: { trigger: '.rr-pk-grid', start: 'top 82%' }\n        });\n    }\n    rrInitPkPricing();\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-60caadd e-con-full e-flex e-con e-parent\" data-id=\"60caadd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-668bfd7 elementor-widget elementor-widget-html\" data-id=\"668bfd7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--\nAI GENERATION PAGE \u2014 WIDGET 6 OF 6: FAQ\n\nELEMENTOR SETUP:\n1. Section\/Container below the process section (full width, no\n   background) -> HTML widget -> paste everything below.\n2. ALL ANSWERS ARE PLACEHOLDER. Replace with your real answers.\n3. To add a question, copy one whole <details>...<\/details> block.\n4. No JavaScript needed. The name=\"rr-pk-faq\" attribute makes opening\n   one question close the others in current browsers; in older ones the\n   questions simply open independently, which is harmless.\n5. Finish the page with your \"Let's work together\" widget\n   (richierich-17-portfolio-cta-widget) right below this one.\n-->\n\n<style>\n.rr-pk-faq {\n    background-color: var(--rr-bg, #050505);\n    padding: 8vh 5vw 12vh;\n}\n\n.rr-pk-faq-wrap {\n    max-width: 1000px;\n    margin: 0 auto;\n}\n\n.rr-pk-faq-label {\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 700;\n    font-size: 0.85rem;\n    letter-spacing: 0.25em;\n    text-transform: uppercase;\n    color: var(--rr-accent3, #ccff00);\n    margin: 0 0 1rem;\n}\n\n.rr-pk-faq-h2 {\n    margin: 0 0 6vh;\n    font-family: 'Anton', sans-serif !important;\n    font-weight: 400;\n    text-transform: uppercase;\n    font-size: clamp(2.5rem, 6vw, 6rem);\n    line-height: 1;\n    color: var(--rr-text, #f0f0f0) !important;\n}\n\n.rr-pk-faq details {\n    border-top: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.rr-pk-faq details:last-of-type {\n    border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.rr-pk-faq summary {\n    position: relative;\n    list-style: none;\n    cursor: pointer;\n    padding: 2rem 3rem 2rem 0;\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 600;\n    font-size: clamp(1.05rem, 1.7vw, 1.5rem);\n    line-height: 1.35;\n    color: var(--rr-text, #f0f0f0);\n    transition: color 0.3s;\n}\n\n.rr-pk-faq summary::-webkit-details-marker { display: none; }\n\n.rr-pk-faq summary::after {\n    content: '+';\n    position: absolute;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 2rem;\n    font-weight: 300;\n    color: var(--rr-accent3, #ccff00);\n    transition: transform 0.3s ease;\n}\n\n.rr-pk-faq details[open] summary::after {\n    transform: translateY(-50%) rotate(45deg);\n}\n\n.rr-pk-faq summary:hover {\n    color: var(--rr-accent3, #ccff00);\n}\n\n.rr-pk-faq details p {\n    margin: 0;\n    padding: 0 3rem 2rem 0;\n    max-width: 760px;\n    font-family: 'Inter', sans-serif;\n    font-size: 1rem;\n    line-height: 1.7;\n    color: var(--rr-text, #f0f0f0);\n    opacity: 0.7;\n}\n<\/style>\n\n<section class=\"rr-pk-faq\">\n    <div class=\"rr-pk-faq-wrap\">\n\n        <p class=\"rr-pk-faq-label\">FAQ<\/p>\n        <h2 class=\"rr-pk-faq-h2\">Questions, answered<\/h2>\n\n        <details name=\"rr-pk-faq\">\n            <summary>Can I use AI-generated content commercially?<\/summary>\n            <p>We choose tools whose terms allow commercial use and check the licence for each project. The rules around AI content are still evolving, so we'll flag anything that needs extra care before you publish.<\/p>\n        <\/details>\n\n        <details name=\"rr-pk-faq\">\n            <summary>Will it look generic, or obviously made by AI?<\/summary>\n            <p>Not if it's done properly. We guide every result with a creative brief, then edit and refine by hand, so the final work matches your brand instead of looking like stock AI output.<\/p>\n        <\/details>\n\n        <details name=\"rr-pk-faq\">\n            <summary>Is my information kept confidential?<\/summary>\n            <p>We don't upload your confidential material to AI tools without your permission, and we'll tell you which tools we plan to use before we start.<\/p>\n        <\/details>\n\n        <details name=\"rr-pk-faq\">\n            <summary>Can AI replace a photoshoot or video shoot?<\/summary>\n            <p>It can replace or extend parts of one, such as concept visuals, backgrounds or product scenes. For real people and real products, a real shoot is often still the best choice, and we'll advise on the right mix.<\/p>\n        <\/details>\n\n        <details name=\"rr-pk-faq\">\n            <summary>How fast can you deliver?<\/summary>\n            <p>AI speeds up the early stages, so first concepts often arrive much sooner than with traditional production. Final timelines depend on the scope and how quickly we get your feedback.<\/p>\n        <\/details>\n\n        <details name=\"rr-pk-faq\">\n            <summary>Will you tell me which content is AI-generated?<\/summary>\n            <p>Yes. We'll tell you which assets use AI so you can decide how to label them. Some platforms ask for AI content to be labelled, and we can help you follow their rules.<\/p>\n        <\/details>\n\n    <\/div>\n<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3e33905 e-con-full elementor-hidden-desktop elementor-hidden-laptop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"3e33905\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-96f52b7 elementor-widget elementor-widget-html\" data-id=\"96f52b7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n.rr-pf-logos2 {\n    background-color: var(--rr-bg, #050505);\n    padding: 12vh 4vw;\n    overflow: hidden;\n}\n\n.rr-pf-logos2-row {\n    display: flex;\n    align-items: center;\n    gap: 2vw;\n    will-change: transform;\n}\n\n.rr-pf-logos2-row + .rr-pf-logos2-row {\n    margin-top: 6vh;\n}\n\n.rr-pf-logo2 {\n    flex: 1 1 0;\n    min-width: 0;\n    height: clamp(50px, 6vw, 90px);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.rr-pf-logo2 img {\n    max-width: 100%;\n    max-height: 100%;\n    width: auto;\n    height: auto;\n    object-fit: contain;\n    filter: grayscale(1) brightness(1.15);\n    opacity: 0.65;\n    transition: filter 0.4s ease, opacity 0.4s ease;\n}\n\n.rr-pf-logo2:hover img {\n    filter: grayscale(0) brightness(1);\n    opacity: 1;\n}\n\n@media (max-width: 768px) {\n    .rr-pf-logos2-row {\n        flex-wrap: wrap;\n        justify-content: center;\n        gap: 4vw;\n    }\n    .rr-pf-logo2 {\n        flex: 0 0 28%;\n        height: 48px;\n    }\n}\n<\/style>\n\n<section class=\"rr-pf-logos2\">\n\n    <div class=\"rr-pf-logos2-row\" data-dir=\"left\">\n        <div class=\"rr-pf-logo2\"><img decoding=\"async\" src=\"https:\/\/richierich.com.my\/staging\/wp-content\/uploads\/2026\/08\/finamics-01.png\" alt=\"Finamics\"><\/div>\n        <div class=\"rr-pf-logo2\"><img decoding=\"async\" src=\"https:\/\/richierich.com.my\/staging\/wp-content\/uploads\/2026\/08\/euda-01.png\" alt=\"EUDA\"><\/div>\n        <div class=\"rr-pf-logo2\"><img decoding=\"async\" src=\"https:\/\/richierich.com.my\/staging\/wp-content\/uploads\/2026\/08\/honda-01.png\" alt=\"Honda\"><\/div>\n        <div class=\"rr-pf-logo2\"><img decoding=\"async\" src=\"https:\/\/richierich.com.my\/staging\/wp-content\/uploads\/2026\/08\/acmar-01.png\" alt=\"acmar\"><\/div>\n        <div class=\"rr-pf-logo2\"><img decoding=\"async\" src=\"https:\/\/richierich.com.my\/staging\/wp-content\/uploads\/2026\/08\/mesuma-01.png\" alt=\"mesuma\"><\/div>\n        <div class=\"rr-pf-logo2\"><img decoding=\"async\" src=\"https:\/\/richierich.com.my\/staging\/wp-content\/uploads\/2026\/08\/perodua-01.png\" alt=\"perodua\"><\/div>\n    <\/div>\n\n    <div class=\"rr-pf-logos2-row\" data-dir=\"right\">\n        <div class=\"rr-pf-logo2\"><img decoding=\"async\" src=\"https:\/\/richierich.com.my\/staging\/wp-content\/uploads\/2026\/08\/iw-global-01.png\" alt=\"IW global\"><\/div>\n        <div class=\"rr-pf-logo2\"><img decoding=\"async\" src=\"https:\/\/richierich.com.my\/staging\/wp-content\/uploads\/2026\/10\/velabay-01.png\" alt=\"velabay\"><\/div>\n        <div class=\"rr-pf-logo2\"><img decoding=\"async\" src=\"https:\/\/richierich.com.my\/staging\/wp-content\/uploads\/2026\/08\/odyssey-01.png\" alt=\"odyssey\"><\/div>\n        <div class=\"rr-pf-logo2\"><img decoding=\"async\" src=\"https:\/\/richierich.com.my\/staging\/wp-content\/uploads\/2026\/08\/smart-01.png\" alt=\"smart\"><\/div>\n        <div class=\"rr-pf-logo2\"><img decoding=\"async\" src=\"https:\/\/richierich.com.my\/staging\/wp-content\/uploads\/2026\/08\/tcm-01.png\" alt=\"tcm\"><\/div>\n        <div class=\"rr-pf-logo2\"><img decoding=\"async\" src=\"https:\/\/richierich.com.my\/staging\/wp-content\/uploads\/2026\/08\/boules-01.png\" alt=\"boules\"><\/div>\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    function rrInitPfLogos2() {\n        if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {\n            setTimeout(rrInitPfLogos2, 200);\n            return;\n        }\n\n        var section = document.querySelector('.rr-pf-logos2');\n        if (!section) return;\n\n        \/\/ Only animate on desktop\/tablet and when motion is allowed\n        var mm = gsap.matchMedia();\n        mm.add('(min-width: 769px) and (prefers-reduced-motion: no-preference)', function () {\n            section.querySelectorAll('.rr-pf-logos2-row').forEach(function (row) {\n                var goLeft = row.getAttribute('data-dir') === 'left';\n                gsap.fromTo(row,\n                    { xPercent: goLeft ? 7 : -7 },\n                    {\n                        xPercent: goLeft ? -7 : 7,\n                        ease: 'none',\n                        scrollTrigger: {\n                            trigger: section,\n                            start: 'top bottom',\n                            end: 'bottom top',\n                            scrub: 1\n                        }\n                    }\n                );\n            });\n        });\n    }\n    rrInitPfLogos2();\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-78fc280 e-con-full e-flex e-con e-parent\" data-id=\"78fc280\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1d67ff4 elementor-widget elementor-widget-html\" data-id=\"1d67ff4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n.rr-pf-cta {\n    background-color: var(--rr-bg, #050505);\n    padding: 12vh 0;\n    overflow: hidden;\n    text-align: center;\n}\n\n.rr-pf-cta-band {\n    white-space: nowrap;\n    font-family: 'Anton', sans-serif;\n    text-transform: uppercase;\n    font-size: clamp(3.5rem, 11vw, 12rem);\n    line-height: 1.05;\n    color: var(--rr-text, #f0f0f0);\n    will-change: transform;\n}\n\n.rr-pf-cta-band span {\n    display: inline-block;\n    padding-right: 4vw;\n}\n\n.rr-pf-cta-band span:nth-child(even) {\n    color: transparent;\n    -webkit-text-stroke: 2px var(--rr-text, #f0f0f0);\n}\n\n.rr-pf-cta-btn {\n    display: inline-block;\n    margin-top: 6vh;\n    padding: 28px 64px;\n    border: 1px solid rgba(255, 255, 255, 0.3);\n    border-radius: 100px;\n    font-family: 'Montserrat', sans-serif;\n    font-weight: 700;\n    font-size: 1.2rem;\n    letter-spacing: 0.1em;\n    text-decoration: none;\n    color: var(--rr-text, #f0f0f0);\n    position: relative;\n    overflow: hidden;\n    isolation: isolate;\n    transition: color 0.3s, border-color 0.3s;\n}\n\n.rr-pf-cta-btn::before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 100%;\n    width: 100%;\n    height: 100%;\n    background-color: var(--rr-accent3, #ccff00);\n    transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);\n    z-index: -1;\n    border-radius: 50% 50% 0 0;\n}\n\n.rr-pf-cta-btn:hover {\n    color: var(--rr-bg, #050505);\n    border-color: var(--rr-accent3, #ccff00);\n}\n\n.rr-pf-cta-btn:hover::before {\n    transform: translateY(-100%);\n    border-radius: 0;\n}\n<\/style>\n\n<section class=\"rr-pf-cta\">\n    <div class=\"rr-pf-cta-band\">\n        <span>Let's work together<\/span><span>Let's work together<\/span><span>Let's work together<\/span><span>Let's work together<\/span>\n    <\/div>\n    <a class=\"rr-pf-cta-btn rr-hoverable\" href=\"\/staging\/contact-us\/\">SAY HELLO<\/a>\n<\/section>\n\n<script>\n(function () {\n    function rrInitPfCta() {\n        if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {\n            setTimeout(rrInitPfCta, 200);\n            return;\n        }\n\n        if (typeof window.rrBindHoverables === 'function') window.rrBindHoverables();\n\n        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n\n        var section = document.querySelector('.rr-pf-cta');\n        var band = document.querySelector('.rr-pf-cta-band');\n        if (!section || !band) return;\n\n        gsap.fromTo(band,\n            { xPercent: -30 },\n            {\n                xPercent: 0,\n                ease: 'none',\n                scrollTrigger: {\n                    trigger: section,\n                    start: 'top bottom',\n                    end: 'bottom top',\n                    scrub: 1\n                }\n            }\n        );\n    }\n    rrInitPfCta();\n})();\n<\/script>\n\t\t\t\t<\/div>\n\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>AI Generation Create beyond the usual with AI generation. We use the latest AI tools to speed up ideas, generate [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","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":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-1721","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/richierich.com.my\/staging\/wp-json\/wp\/v2\/pages\/1721","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/richierich.com.my\/staging\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/richierich.com.my\/staging\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/richierich.com.my\/staging\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/richierich.com.my\/staging\/wp-json\/wp\/v2\/comments?post=1721"}],"version-history":[{"count":13,"href":"https:\/\/richierich.com.my\/staging\/wp-json\/wp\/v2\/pages\/1721\/revisions"}],"predecessor-version":[{"id":1841,"href":"https:\/\/richierich.com.my\/staging\/wp-json\/wp\/v2\/pages\/1721\/revisions\/1841"}],"wp:attachment":[{"href":"https:\/\/richierich.com.my\/staging\/wp-json\/wp\/v2\/media?parent=1721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}