{"id":307,"date":"2026-08-05T00:47:23","date_gmt":"2026-08-05T00:47:23","guid":{"rendered":"https:\/\/roofroadie.com\/?page_id=307"},"modified":"2026-08-05T02:35:12","modified_gmt":"2026-08-05T02:35:12","slug":"stories","status":"publish","type":"page","link":"https:\/\/roofroadie.com\/es\/stories\/","title":{"rendered":"stories"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"307\" class=\"elementor elementor-307\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e58b506 e-con e-atomic-element e-flexbox-base e-e968074\" data-id=\"e58b506\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"e58b506\">\n    \t\t\t<p class=\"e-paragraph-base\" data-interaction-id=\"8c41c62\" data-e-type=\"widget\" data-id=\"8c41c62\">Lucy is the roofing industry's first voice-first business partner, designed specifically for independent roofing contractors. She helps manage customers, prepare quotes, communicate professionally, organize projects, and keep your business running\u2014so you can spend less time on paperwork and more time building roofs, growing your company, and serving your customers.&nbsp; These videos help to tell her story.<\/p>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-80c152c e-con e-atomic-element e-flexbox-base e-fa521d9\" data-id=\"80c152c\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"80c152c\">\n    \t\t<div class=\"elementor-element elementor-element-9fec4ac elementor-widget elementor-widget-shortcode\" data-id=\"9fec4ac\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n    <section\n        id=\"rr-stories-63074\"\n        class=\"rr-stories\"\n        aria-label=\"RoofRoadie Stories\"\n    >\n        <div class=\"rr-stories__heading\">\n            <span class=\"rr-stories__eyebrow\">ROOFROADIE STORIES<\/span>\n\n            <h1>Real Roofers. Real Stories.<\/h1>\n\n            <p>\n                Hear how roofers are saving time, communicating professionally\n                and building stronger businesses with Lucy by their side.\n            <\/p>\n        <\/div>\n\n        <div class=\"rr-stories__layout\">\n\n            <!-- STORY SELECTIONS -->\n            <div class=\"rr-story-list\" role=\"list\" aria-label=\"Choose a story\">\n\n                \n                    <button\n                        type=\"button\"\n                        class=\"rr-story-button is-active\"\n                        data-video=\"https:\/\/player.vimeo.com\/video\/1215376290?h=35a751fbe6\"\n                        data-name=\"Liz and Lucy\"\n                        data-title=\"Partners at Work\"\n                        data-description=\"See how Lucy helps Liz build her business.\"\n                        aria-pressed=\"true\"\n                    >\n                        <span class=\"rr-story-button__play\" aria-hidden=\"true\">\n                            <svg viewbox=\"0 0 40 40\">\n                                <circle cx=\"20\" cy=\"20\" r=\"19\"><\/circle>\n                                <path d=\"M16 12.8L28 20L16 27.2Z\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"rr-story-button__copy\">\n                            <strong>Liz and Lucy<\/strong>\n                            <span>Partners at Work<\/span>\n                        <\/span>\n\n                        <span class=\"rr-story-button__arrow\" aria-hidden=\"true\">\u203a<\/span>\n                    <\/button>\n\n                \n                    <button\n                        type=\"button\"\n                        class=\"rr-story-button\"\n                        data-video=\"234567890\"\n                        data-name=\"Mike\"\n                        data-title=\"I Stopped Losing Good Leads\"\n                        data-description=\"Mike explains how Lucy keeps every opportunity moving.\"\n                        aria-pressed=\"false\"\n                    >\n                        <span class=\"rr-story-button__play\" aria-hidden=\"true\">\n                            <svg viewbox=\"0 0 40 40\">\n                                <circle cx=\"20\" cy=\"20\" r=\"19\"><\/circle>\n                                <path d=\"M16 12.8L28 20L16 27.2Z\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"rr-story-button__copy\">\n                            <strong>Mike<\/strong>\n                            <span>I Stopped Losing Good Leads<\/span>\n                        <\/span>\n\n                        <span class=\"rr-story-button__arrow\" aria-hidden=\"true\">\u203a<\/span>\n                    <\/button>\n\n                \n                    <button\n                        type=\"button\"\n                        class=\"rr-story-button\"\n                        data-video=\"345678901\"\n                        data-name=\"Jos\u00e9\"\n                        data-title=\"Lucy Helps Me Serve Every Customer\"\n                        data-description=\"Professional communication in English and Spanish.\"\n                        aria-pressed=\"false\"\n                    >\n                        <span class=\"rr-story-button__play\" aria-hidden=\"true\">\n                            <svg viewbox=\"0 0 40 40\">\n                                <circle cx=\"20\" cy=\"20\" r=\"19\"><\/circle>\n                                <path d=\"M16 12.8L28 20L16 27.2Z\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"rr-story-button__copy\">\n                            <strong>Jos\u00e9<\/strong>\n                            <span>Lucy Helps Me Serve Every Customer<\/span>\n                        <\/span>\n\n                        <span class=\"rr-story-button__arrow\" aria-hidden=\"true\">\u203a<\/span>\n                    <\/button>\n\n                \n                    <button\n                        type=\"button\"\n                        class=\"rr-story-button\"\n                        data-video=\"456789012\"\n                        data-name=\"Nick\"\n                        data-title=\"Why Roofers Need Lucy\"\n                        data-description=\"Nick shares the roofing problem Lucy was built to solve.\"\n                        aria-pressed=\"false\"\n                    >\n                        <span class=\"rr-story-button__play\" aria-hidden=\"true\">\n                            <svg viewbox=\"0 0 40 40\">\n                                <circle cx=\"20\" cy=\"20\" r=\"19\"><\/circle>\n                                <path d=\"M16 12.8L28 20L16 27.2Z\"><\/path>\n                            <\/svg>\n                        <\/span>\n\n                        <span class=\"rr-story-button__copy\">\n                            <strong>Nick<\/strong>\n                            <span>Why Roofers Need Lucy<\/span>\n                        <\/span>\n\n                        <span class=\"rr-story-button__arrow\" aria-hidden=\"true\">\u203a<\/span>\n                    <\/button>\n\n                \n            <\/div>\n\n            <!-- PLAYER AREA -->\n            <div class=\"rr-player-column\">\n\n                <div class=\"rr-player-shell\">\n\n                    <div\n                        class=\"rr-player\"\n                        data-initial-video=\"https:\/\/player.vimeo.com\/video\/1215376290?h=35a751fbe6\"\n                    >\n                        <div class=\"rr-vimeo-target\"><\/div>\n\n                        <button\n                            type=\"button\"\n                            class=\"rr-big-play\"\n                            aria-label=\"Play video\"\n                        >\n                            <span class=\"rr-big-play__circle\">\n                                <svg viewbox=\"0 0 64 64\" aria-hidden=\"true\">\n                                    <path d=\"M25 18L47 32L25 46Z\"><\/path>\n                                <\/svg>\n                            <\/span>\n\n                            <span class=\"rr-big-play__text\">Watch Story<\/span>\n                        <\/button>\n\n                        <div class=\"rr-loading\" aria-hidden=\"true\">\n                            <span><\/span>\n                        <\/div>\n\n                        <div class=\"rr-controls\">\n\n                            <button\n                                type=\"button\"\n                                class=\"rr-control-button rr-play-toggle\"\n                                aria-label=\"Play\"\n                            >\n                                <svg class=\"rr-icon-play\" viewbox=\"0 0 24 24\">\n                                    <path d=\"M7 4L20 12L7 20Z\"><\/path>\n                                <\/svg>\n\n                                <svg class=\"rr-icon-pause\" viewbox=\"0 0 24 24\">\n                                    <path d=\"M6 4H10V20H6ZM14 4H18V20H14Z\"><\/path>\n                                <\/svg>\n                            <\/button>\n\n                            <div class=\"rr-time\">\n                                <span class=\"rr-current-time\">0:00<\/span>\n                                <span aria-hidden=\"true\">\/<\/span>\n                                <span class=\"rr-duration\">0:00<\/span>\n                            <\/div>\n\n                            <input\n                                class=\"rr-progress\"\n                                type=\"range\"\n                                min=\"0\"\n                                max=\"100\"\n                                step=\"0.1\"\n                                value=\"0\"\n                                aria-label=\"Video progress\"\n                            >\n\n                            <button\n                                type=\"button\"\n                                class=\"rr-control-button rr-mute-toggle\"\n                                aria-label=\"Mute\"\n                            >\n                                <svg class=\"rr-icon-volume\" viewbox=\"0 0 24 24\">\n                                    <path d=\"M4 9V15H8L13 20V4L8 9H4ZM16 8.5C17.3 9.4 18 10.6 18 12C18 13.4 17.3 14.6 16 15.5V8.5ZM16 4.7V6.8C18.4 8 20 9.9 20 12C20 14.1 18.4 16 16 17.2V19.3C19.6 17.9 22 15.1 22 12C22 8.9 19.6 6.1 16 4.7Z\"><\/path>\n                                <\/svg>\n\n                                <svg class=\"rr-icon-muted\" viewbox=\"0 0 24 24\">\n                                    <path d=\"M4 9V15H8L13 20V4L8 9H4ZM16.6 9.2L15.2 10.6L16.6 12L15.2 13.4L16.6 14.8L18 13.4L19.4 14.8L20.8 13.4L19.4 12L20.8 10.6L19.4 9.2L18 10.6L16.6 9.2Z\"><\/path>\n                                <\/svg>\n                            <\/button>\n\n                            <button\n                                type=\"button\"\n                                class=\"rr-control-button rr-fullscreen\"\n                                aria-label=\"View fullscreen\"\n                            >\n                                <svg viewbox=\"0 0 24 24\">\n                                    <path d=\"M4 4H10V6H6V10H4V4ZM14 4H20V10H18V6H14V4ZM4 14H6V18H10V20H4V14ZM18 14H20V20H14V18H18V14Z\"><\/path>\n                                <\/svg>\n                            <\/button>\n\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"rr-story-details\">\n                    <span class=\"rr-now-playing\">NOW PLAYING<\/span>\n\n                    <h2 class=\"rr-current-name\">\n                        Liz and Lucy                    <\/h2>\n\n                    <h3 class=\"rr-current-title\">\n                        Partners at Work                    <\/h3>\n\n                    <p class=\"rr-current-description\">\n                        See how Lucy helps Liz build her business.                    <\/p>\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <style>\n        #rr-stories-63074 {\n            --rr-navy: #132838;\n            --rr-navy-deep: #091923;\n            --rr-blue: #2e718b;\n            --rr-blue-light: #70a8bb;\n            --rr-cream: #f6f3ec;\n            --rr-white: #ffffff;\n            --rr-text: #263640;\n            --rr-muted: #687982;\n            --rr-border: rgba(19, 40, 56, 0.14);\n            --rr-shadow: 0 24px 65px rgba(9, 25, 35, 0.18);\n\n            width: 100%;\n            max-width: 1280px;\n            margin: 0 auto;\n            padding: 42px 24px 60px;\n            color: var(--rr-text);\n            font-family: inherit;\n            box-sizing: border-box;\n        }\n\n        #rr-stories-63074 *,\n        #rr-stories-63074 *::before,\n        #rr-stories-63074 *::after {\n            box-sizing: border-box;\n        }\n\n        #rr-stories-63074 .rr-stories__heading {\n            max-width: 760px;\n            margin: 0 auto 38px;\n            text-align: center;\n        }\n\n        #rr-stories-63074 .rr-stories__eyebrow {\n            display: inline-block;\n            margin-bottom: 10px;\n            color: var(--rr-blue);\n            font-size: 13px;\n            font-weight: 800;\n            letter-spacing: 0.18em;\n        }\n\n        #rr-stories-63074 .rr-stories__heading h1 {\n            margin: 0;\n            color: var(--rr-navy);\n            font-size: clamp(35px, 5vw, 58px);\n            font-weight: 750;\n            line-height: 1.05;\n            letter-spacing: -0.035em;\n        }\n\n        #rr-stories-63074 .rr-stories__heading p {\n            max-width: 690px;\n            margin: 18px auto 0;\n            color: var(--rr-muted);\n            font-size: clamp(16px, 2vw, 19px);\n            line-height: 1.65;\n        }\n\n        #rr-stories-63074 .rr-stories__layout {\n            display: grid;\n            grid-template-columns: minmax(275px, 0.78fr) minmax(0, 1.72fr);\n            gap: 28px;\n            align-items: start;\n        }\n\n        \/* Story list *\/\n\n        #rr-stories-63074 .rr-story-list {\n            display: flex;\n            flex-direction: column;\n            gap: 11px;\n        }\n\n        #rr-stories-63074 .rr-story-button {\n            appearance: none;\n            display: grid;\n            grid-template-columns: 43px 1fr 20px;\n            gap: 13px;\n            align-items: center;\n            width: 100%;\n            min-height: 82px;\n            padding: 14px 15px;\n            border: 1px solid var(--rr-border);\n            border-radius: 15px;\n            background: var(--rr-white);\n            color: var(--rr-text);\n            font-family: inherit;\n            text-align: left;\n            cursor: pointer;\n            transition:\n                transform 180ms ease,\n                border-color 180ms ease,\n                background 180ms ease,\n                box-shadow 180ms ease;\n        }\n\n        #rr-stories-63074 .rr-story-button:hover {\n            transform: translateY(-2px);\n            border-color: rgba(46, 113, 139, 0.45);\n            box-shadow: 0 12px 28px rgba(9, 25, 35, 0.09);\n        }\n\n        #rr-stories-63074 .rr-story-button.is-active {\n            border-color: var(--rr-blue);\n            background: var(--rr-navy);\n            color: var(--rr-white);\n            box-shadow: 0 15px 35px rgba(9, 25, 35, 0.18);\n        }\n\n        #rr-stories-63074 .rr-story-button__play svg {\n            display: block;\n            width: 42px;\n            height: 42px;\n        }\n\n        #rr-stories-63074 .rr-story-button__play circle {\n            fill: var(--rr-cream);\n            stroke: rgba(46, 113, 139, 0.25);\n        }\n\n        #rr-stories-63074 .rr-story-button__play path {\n            fill: var(--rr-blue);\n        }\n\n        #rr-stories-63074 .rr-story-button.is-active\n        .rr-story-button__play circle {\n            fill: rgba(255, 255, 255, 0.12);\n            stroke: rgba(255, 255, 255, 0.35);\n        }\n\n        #rr-stories-63074 .rr-story-button.is-active\n        .rr-story-button__play path {\n            fill: var(--rr-white);\n        }\n\n        #rr-stories-63074 .rr-story-button__copy {\n            min-width: 0;\n        }\n\n        #rr-stories-63074 .rr-story-button__copy strong {\n            display: block;\n            margin-bottom: 4px;\n            font-size: 18px;\n            line-height: 1.15;\n        }\n\n        #rr-stories-63074 .rr-story-button__copy span {\n            display: block;\n            color: var(--rr-muted);\n            font-size: 13px;\n            line-height: 1.35;\n        }\n\n        #rr-stories-63074 .rr-story-button.is-active\n        .rr-story-button__copy span {\n            color: rgba(255, 255, 255, 0.72);\n        }\n\n        #rr-stories-63074 .rr-story-button__arrow {\n            color: var(--rr-blue);\n            font-size: 28px;\n            line-height: 1;\n        }\n\n        #rr-stories-63074 .rr-story-button.is-active\n        .rr-story-button__arrow {\n            color: var(--rr-white);\n        }\n\n        \/* Player *\/\n\n        #rr-stories-63074 .rr-player-shell {\n            padding: 10px;\n            border-radius: 24px;\n            background:\n                linear-gradient(\n                    145deg,\n                    rgba(112, 168, 187, 0.95),\n                    var(--rr-navy) 68%\n                );\n            box-shadow: var(--rr-shadow);\n        }\n\n        #rr-stories-63074 .rr-player {\n            position: relative;\n            overflow: hidden;\n            width: 100%;\n            aspect-ratio: 16 \/ 9;\n            border-radius: 17px;\n            background:\n                radial-gradient(\n                    circle at 50% 35%,\n                    rgba(46, 113, 139, 0.45),\n                    transparent 42%\n                ),\n                var(--rr-navy-deep);\n        }\n\n        #rr-stories-63074 .rr-vimeo-target,\n        #rr-stories-63074 .rr-vimeo-target iframe {\n            position: absolute;\n            inset: 0;\n            width: 100% !important;\n            height: 100% !important;\n            border: 0;\n        }\n\n        #rr-stories-63074 .rr-big-play {\n            position: absolute;\n            inset: 0;\n            z-index: 5;\n            display: flex;\n            flex-direction: column;\n            gap: 13px;\n            align-items: center;\n            justify-content: center;\n            width: 100%;\n            border: 0;\n            background:\n                linear-gradient(\n                    to bottom,\n                    rgba(9, 25, 35, 0.08),\n                    rgba(9, 25, 35, 0.32)\n                );\n            color: var(--rr-white);\n            font-family: inherit;\n            cursor: pointer;\n            transition: opacity 180ms ease;\n        }\n\n        #rr-stories-63074 .rr-big-play.is-hidden {\n            visibility: hidden;\n            opacity: 0;\n            pointer-events: none;\n        }\n\n        #rr-stories-63074 .rr-big-play__circle {\n            display: grid;\n            place-items: center;\n            width: 88px;\n            height: 88px;\n            border: 2px solid rgba(255, 255, 255, 0.78);\n            border-radius: 50%;\n            background: rgba(19, 40, 56, 0.82);\n            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);\n            backdrop-filter: blur(8px);\n            transition:\n                transform 180ms ease,\n                background 180ms ease;\n        }\n\n        #rr-stories-63074 .rr-big-play:hover\n        .rr-big-play__circle {\n            transform: scale(1.06);\n            background: var(--rr-blue);\n        }\n\n        #rr-stories-63074 .rr-big-play__circle svg {\n            width: 48px;\n            height: 48px;\n            margin-left: 5px;\n            fill: var(--rr-white);\n        }\n\n        #rr-stories-63074 .rr-big-play__text {\n            font-size: 14px;\n            font-weight: 800;\n            letter-spacing: 0.14em;\n            text-transform: uppercase;\n        }\n\n        \/* Custom controls *\/\n\n        #rr-stories-63074 .rr-controls {\n            position: absolute;\n            right: 0;\n            bottom: 0;\n            left: 0;\n            z-index: 8;\n            display: grid;\n            grid-template-columns: 40px auto minmax(80px, 1fr) 40px 40px;\n            gap: 8px;\n            align-items: center;\n            padding: 25px 14px 12px;\n            background:\n                linear-gradient(\n                    to top,\n                    rgba(4, 13, 18, 0.92),\n                    rgba(4, 13, 18, 0)\n                );\n            opacity: 0;\n            transform: translateY(5px);\n            pointer-events: none;\n            transition:\n                opacity 180ms ease,\n                transform 180ms ease;\n        }\n\n        #rr-stories-63074 .rr-player:hover .rr-controls,\n        #rr-stories-63074 .rr-player.is-playing .rr-controls,\n        #rr-stories-63074 .rr-player.is-paused .rr-controls {\n            opacity: 1;\n            transform: translateY(0);\n            pointer-events: auto;\n        }\n\n        #rr-stories-63074 .rr-control-button {\n            appearance: none;\n            display: grid;\n            place-items: center;\n            width: 38px;\n            height: 38px;\n            padding: 0;\n            border: 0;\n            border-radius: 50%;\n            background: transparent;\n            color: var(--rr-white);\n            cursor: pointer;\n        }\n\n        #rr-stories-63074 .rr-control-button:hover {\n            background: rgba(255, 255, 255, 0.14);\n        }\n\n        #rr-stories-63074 .rr-control-button svg {\n            width: 23px;\n            height: 23px;\n            fill: currentColor;\n        }\n\n        #rr-stories-63074 .rr-icon-pause,\n        #rr-stories-63074 .rr-icon-muted {\n            display: none;\n        }\n\n        #rr-stories-63074 .rr-player.is-playing\n        .rr-icon-play {\n            display: none;\n        }\n\n        #rr-stories-63074 .rr-player.is-playing\n        .rr-icon-pause {\n            display: block;\n        }\n\n        #rr-stories-63074 .rr-player.is-muted\n        .rr-icon-volume {\n            display: none;\n        }\n\n        #rr-stories-63074 .rr-player.is-muted\n        .rr-icon-muted {\n            display: block;\n        }\n\n        #rr-stories-63074 .rr-time {\n            display: flex;\n            gap: 4px;\n            color: rgba(255, 255, 255, 0.9);\n            font-size: 12px;\n            font-variant-numeric: tabular-nums;\n            white-space: nowrap;\n        }\n\n        #rr-stories-63074 .rr-progress {\n            width: 100%;\n            height: 4px;\n            margin: 0;\n            accent-color: var(--rr-blue-light);\n            cursor: pointer;\n        }\n\n        \/* Loading indicator *\/\n\n        #rr-stories-63074 .rr-loading {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            z-index: 9;\n            display: none;\n            transform: translate(-50%, -50%);\n            pointer-events: none;\n        }\n\n        #rr-stories-63074 .rr-loading.is-visible {\n            display: block;\n        }\n\n        #rr-stories-63074 .rr-loading span {\n            display: block;\n            width: 42px;\n            height: 42px;\n            border: 4px solid rgba(255, 255, 255, 0.25);\n            border-top-color: var(--rr-white);\n            border-radius: 50%;\n            animation: rr-spin 800ms linear infinite;\n        }\n\n        @keyframes rr-spin {\n            to {\n                transform: rotate(360deg);\n            }\n        }\n\n        \/* Story details *\/\n\n        #rr-stories-63074 .rr-story-details {\n            padding: 25px 8px 5px;\n        }\n\n        #rr-stories-63074 .rr-now-playing {\n            display: block;\n            margin-bottom: 7px;\n            color: var(--rr-blue);\n            font-size: 11px;\n            font-weight: 850;\n            letter-spacing: 0.16em;\n        }\n\n        #rr-stories-63074 .rr-current-name {\n            display: inline;\n            margin: 0;\n            color: var(--rr-navy);\n            font-size: 25px;\n            font-weight: 800;\n        }\n\n        #rr-stories-63074 .rr-current-title {\n            display: inline;\n            margin: 0 0 0 8px;\n            color: var(--rr-text);\n            font-size: 20px;\n            font-weight: 500;\n        }\n\n        #rr-stories-63074 .rr-current-description {\n            margin: 10px 0 0;\n            color: var(--rr-muted);\n            font-size: 15px;\n            line-height: 1.55;\n        }\n\n        \/* Accessibility *\/\n\n        #rr-stories-63074 button:focus-visible,\n        #rr-stories-63074 input:focus-visible {\n            outline: 3px solid rgba(112, 168, 187, 0.75);\n            outline-offset: 3px;\n        }\n\n        \/* Mobile *\/\n\n        @media (max-width: 850px) {\n            #rr-stories-63074 {\n                padding-right: 16px;\n                padding-left: 16px;\n            }\n\n            #rr-stories-63074 .rr-stories__layout {\n                grid-template-columns: 1fr;\n            }\n\n            #rr-stories-63074 .rr-player-column {\n                order: 1;\n            }\n\n            #rr-stories-63074 .rr-story-list {\n                order: 2;\n                display: grid;\n                grid-template-columns: repeat(2, minmax(0, 1fr));\n            }\n        }\n\n        @media (max-width: 580px) {\n            #rr-stories-63074 {\n                padding-top: 28px;\n            }\n\n            #rr-stories-63074 .rr-story-list {\n                grid-template-columns: 1fr;\n            }\n\n            #rr-stories-63074 .rr-player-shell {\n                padding: 6px;\n                border-radius: 17px;\n            }\n\n            #rr-stories-63074 .rr-player {\n                border-radius: 12px;\n            }\n\n            #rr-stories-63074 .rr-controls {\n                grid-template-columns: 35px minmax(65px, 1fr) 35px 35px;\n                gap: 3px;\n                padding-right: 8px;\n                padding-left: 8px;\n            }\n\n            #rr-stories-63074 .rr-time {\n                display: none;\n            }\n\n            #rr-stories-63074 .rr-big-play__circle {\n                width: 68px;\n                height: 68px;\n            }\n\n            #rr-stories-63074 .rr-big-play__circle svg {\n                width: 38px;\n                height: 38px;\n            }\n\n            #rr-stories-63074 .rr-current-name,\n            #rr-stories-63074 .rr-current-title {\n                display: block;\n                margin-left: 0;\n            }\n\n            #rr-stories-63074 .rr-current-title {\n                margin-top: 4px;\n                font-size: 18px;\n            }\n        }\n    <\/style>\n\n    <script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n\n    <script>\n        document.addEventListener('DOMContentLoaded', function () {\n            const root = document.getElementById(\n                \"rr-stories-63074\"            );\n\n            if (!root || typeof Vimeo === 'undefined') {\n                return;\n            }\n\n            const playerBox     = root.querySelector('.rr-player');\n            const target        = root.querySelector('.rr-vimeo-target');\n            const storyButtons  = root.querySelectorAll('.rr-story-button');\n            const bigPlay       = root.querySelector('.rr-big-play');\n            const playToggle    = root.querySelector('.rr-play-toggle');\n            const muteToggle    = root.querySelector('.rr-mute-toggle');\n            const fullscreen    = root.querySelector('.rr-fullscreen');\n            const progress      = root.querySelector('.rr-progress');\n            const currentTime   = root.querySelector('.rr-current-time');\n            const durationTime  = root.querySelector('.rr-duration');\n            const loading       = root.querySelector('.rr-loading');\n\n            const nameField        = root.querySelector('.rr-current-name');\n            const titleField       = root.querySelector('.rr-current-title');\n            const descriptionField = root.querySelector(\n                '.rr-current-description'\n            );\n\n            let isSeeking = false;\n\n            const player = new Vimeo.Player(target, {\n                id: playerBox.dataset.initialVideo,\n                responsive: true,\n                controls: false,\n                autoplay: false,\n                muted: false,\n                loop: false,\n                playsinline: true,\n                title: false,\n                byline: false,\n                portrait: false,\n                dnt: true\n            });\n\n            function formatTime(seconds) {\n                seconds = Number(seconds);\n\n                if (!Number.isFinite(seconds) || seconds < 0) {\n                    seconds = 0;\n                }\n\n                const minutes = Math.floor(seconds \/ 60);\n                const remainingSeconds = Math.floor(seconds % 60);\n\n                return (\n                    minutes +\n                    ':' +\n                    String(remainingSeconds).padStart(2, '0')\n                );\n            }\n\n            function showLoading(show) {\n                loading.classList.toggle('is-visible', Boolean(show));\n            }\n\n            function setPlaying(playing) {\n                playerBox.classList.toggle('is-playing', playing);\n                playerBox.classList.toggle('is-paused', !playing);\n\n                playToggle.setAttribute(\n                    'aria-label',\n                    playing ? 'Pause' : 'Play'\n                );\n\n                if (playing) {\n                    bigPlay.classList.add('is-hidden');\n                }\n            }\n\n            async function togglePlayback() {\n                try {\n                    const paused = await player.getPaused();\n\n                    if (paused) {\n                        await player.play();\n                    } else {\n                        await player.pause();\n                    }\n                } catch (error) {\n                    console.error('RoofRoadie player error:', error);\n                }\n            }\n\n            bigPlay.addEventListener('click', togglePlayback);\n            playToggle.addEventListener('click', togglePlayback);\n\n            muteToggle.addEventListener('click', async function () {\n                try {\n                    const muted = await player.getMuted();\n                    await player.setMuted(!muted);\n                    playerBox.classList.toggle('is-muted', !muted);\n                } catch (error) {\n                    console.error('RoofRoadie volume error:', error);\n                }\n            });\n\n            fullscreen.addEventListener('click', async function () {\n                try {\n                    if (!document.fullscreenElement) {\n                        await playerBox.requestFullscreen();\n                    } else {\n                        await document.exitFullscreen();\n                    }\n                } catch (error) {\n                    console.error('Fullscreen error:', error);\n                }\n            });\n\n            progress.addEventListener('input', function () {\n                isSeeking = true;\n            });\n\n            progress.addEventListener('change', async function () {\n                try {\n                    const duration = await player.getDuration();\n                    const newTime = duration * (Number(progress.value) \/ 100);\n                    await player.setCurrentTime(newTime);\n                } catch (error) {\n                    console.error('Seeking error:', error);\n                } finally {\n                    isSeeking = false;\n                }\n            });\n\n            storyButtons.forEach(function (button) {\n                button.addEventListener('click', async function () {\n                    const videoId = button.dataset.video;\n\n                    storyButtons.forEach(function (item) {\n                        item.classList.remove('is-active');\n                        item.setAttribute('aria-pressed', 'false');\n                    });\n\n                    button.classList.add('is-active');\n                    button.setAttribute('aria-pressed', 'true');\n\n                    nameField.textContent = button.dataset.name;\n                    titleField.textContent = button.dataset.title;\n                    descriptionField.textContent =\n                        button.dataset.description;\n\n                    showLoading(true);\n                    bigPlay.classList.remove('is-hidden');\n                    playerBox.classList.remove(\n                        'is-playing',\n                        'is-paused',\n                        'is-muted'\n                    );\n\n                    progress.value = 0;\n                    currentTime.textContent = '0:00';\n                    durationTime.textContent = '0:00';\n\n                    try {\n                        await player.loadVideo(videoId);\n\n                        const duration = await player.getDuration();\n                        durationTime.textContent = formatTime(duration);\n\n                        \/*\n                         * The new story loads but does not automatically play.\n                         * This avoids unwanted sound and gives Nick time to\n                         * explain the story before the prospect presses Play.\n                         *\/\n                    } catch (error) {\n                        console.error(\n                            'Unable to load Vimeo video:',\n                            error\n                        );\n                    } finally {\n                        showLoading(false);\n                    }\n                });\n            });\n\n            player.on('loaded', async function () {\n                showLoading(false);\n\n                try {\n                    const duration = await player.getDuration();\n                    durationTime.textContent = formatTime(duration);\n                } catch (error) {\n                    console.error(error);\n                }\n            });\n\n            player.on('play', function () {\n                setPlaying(true);\n            });\n\n            player.on('pause', function () {\n                setPlaying(false);\n            });\n\n            player.on('ended', function () {\n                setPlaying(false);\n                bigPlay.classList.remove('is-hidden');\n                progress.value = 0;\n                currentTime.textContent = '0:00';\n            });\n\n            player.on('bufferstart', function () {\n                showLoading(true);\n            });\n\n            player.on('bufferend', function () {\n                showLoading(false);\n            });\n\n            player.on('timeupdate', function (data) {\n                currentTime.textContent = formatTime(data.seconds);\n                durationTime.textContent = formatTime(data.duration);\n\n                if (!isSeeking && data.duration > 0) {\n                    progress.value =\n                        (data.seconds \/ data.duration) * 100;\n                }\n            });\n\n            player.on('volumechange', function (data) {\n                playerBox.classList.toggle(\n                    'is-muted',\n                    data.muted || data.volume === 0\n                );\n            });\n\n            player.ready()\n                .then(async function () {\n                    const duration = await player.getDuration();\n                    durationTime.textContent = formatTime(duration);\n                })\n                .catch(function (error) {\n                    console.error('Vimeo initialization error:', error);\n                });\n        });\n    <\/script>\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Lucy is the roofing industry&#8217;s first voice-first business partner, designed specifically for independent roofing contractors. She helps manage customers, prepare [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"nf_dc_page":"","site-sidebar-layout":"no-sidebar","site-content-layout":"","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":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","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-307","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/roofroadie.com\/es\/wp-json\/wp\/v2\/pages\/307","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/roofroadie.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/roofroadie.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/roofroadie.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/roofroadie.com\/es\/wp-json\/wp\/v2\/comments?post=307"}],"version-history":[{"count":20,"href":"https:\/\/roofroadie.com\/es\/wp-json\/wp\/v2\/pages\/307\/revisions"}],"predecessor-version":[{"id":329,"href":"https:\/\/roofroadie.com\/es\/wp-json\/wp\/v2\/pages\/307\/revisions\/329"}],"wp:attachment":[{"href":"https:\/\/roofroadie.com\/es\/wp-json\/wp\/v2\/media?parent=307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}