{"id":490,"date":"2026-01-12T21:05:52","date_gmt":"2026-01-12T21:05:52","guid":{"rendered":"https:\/\/ruk2025.windmonkey.co.uk\/?page_id=490"},"modified":"2026-01-12T21:05:54","modified_gmt":"2026-01-12T21:05:54","slug":"contact-us-3","status":"publish","type":"page","link":"https:\/\/ruk2025.windmonkey.co.uk\/index.php\/contact-us-3\/","title":{"rendered":"Contact Us 3"},"content":{"rendered":"<style>.kadence-column490_07cfde-dd > .kt-inside-inner-col,.kadence-column490_07cfde-dd > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column490_07cfde-dd > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column490_07cfde-dd > .kt-inside-inner-col{flex-direction:column;}.kadence-column490_07cfde-dd > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column490_07cfde-dd > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column490_07cfde-dd{position:relative;}@media all and (max-width: 1024px){.kadence-column490_07cfde-dd > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column490_07cfde-dd > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column490_07cfde-dd home-section-002-section\"><div class=\"kt-inside-inner-col\"><!-- GOOGLE FONTS -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<!-- EMBEDDABLE STYLES -->\n<style>\n    \/* Scope all styles to protect WP site *\/\n    .ruk-contact-embed {\n        \/* Theme Variables *\/\n        --ruk-bg-color: #f8fafc;        \/* Slate-50 *\/\n        --ruk-text-main: #0f172a;       \/* Slate-900 *\/\n        --ruk-text-muted: #64748b;      \/* Slate-500 *\/\n        --ruk-accent-orange: #f97316;   \/* Orange-500 *\/\n        --ruk-accent-gradient: linear-gradient(135deg, #f97316 0%, #ef4444 100%);\n        --ruk-neu-light: #ffffff;\n        --ruk-neu-shadow: #d1d9e6;\n        --ruk-font-main: 'Inter', sans-serif;\n\n        \/* Full Width Breakout Logic *\/\n        width: 100vw;\n        position: relative;\n        left: 50%;\n        right: 50%;\n        margin-left: -50vw;\n        margin-right: -50vw;\n\n        font-family: var(--ruk-font-main);\n        background-color: var(--ruk-bg-color);\n        color: var(--ruk-text-main);\n        line-height: 1.6;\n        overflow: hidden;\n        box-sizing: border-box;\n    }\n\n    \/* Resets *\/\n    .ruk-contact-embed a { text-decoration: none; box-shadow: none; transition: color 0.3s; }\n    .ruk-contact-embed * { box-sizing: border-box; }\n    .ruk-contact-embed h1, .ruk-contact-embed h2, .ruk-contact-embed h3 { margin-top: 0; color: var(--ruk-text-main); }\n\n    \/* ==========================================================================\n       BACKGROUND & HERO\n       ========================================================================== *\/\n    .ruk-contact-hero {\n        position: relative;\n        padding: 6rem 5% 2rem 5%;\n        text-align: center;\n        z-index: 1;\n        max-width: 1600px;\n        margin: 0 auto;\n    }\n\n    \/* Animated Blob *\/\n    .ruk-soft-blob {\n        position: absolute;\n        top: -20%; right: -10%;\n        width: 800px; height: 800px;\n        background: radial-gradient(circle, rgba(249, 115, 22, 0.12) 0%, rgba(248, 250, 252, 0) 70%);\n        filter: blur(80px);\n        opacity: 0.8;\n        pointer-events: none;\n        z-index: 0;\n        animation: rukBlobPulse 10s ease-in-out infinite;\n    }\n    @keyframes rukBlobPulse {\n        0% { transform: scale(1) translate(0, 0); }\n        50% { transform: scale(1.05) translate(-20px, 20px); }\n        100% { transform: scale(1) translate(0, 0); }\n    }\n\n    .ruk-tag {\n        display: inline-flex; align-items: center; gap: 0.5rem; \n        padding: 0.6rem 1.2rem; border-radius: 99px; font-size: 0.8rem; \n        font-weight: 700; text-transform: uppercase;\n        margin-bottom: 1.5rem;\n        background: #eef2f6; \n        color: #ea580c;\n        box-shadow: inset 4px 4px 8px var(--ruk-neu-shadow), inset -4px -4px 8px var(--ruk-neu-light);\n        border: 1px solid rgba(255,255,255,0.8);\n    }\n\n    .ruk-contact-embed h1 {\n        font-size: clamp(2.5rem, 5vw, 4rem);\n        font-weight: 800;\n        line-height: 1.1;\n        margin-bottom: 1.5rem;\n    }\n\n    .ruk-text-gradient-orange {\n        background: var(--ruk-accent-gradient);\n        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;\n        filter: drop-shadow(0 0 20px rgba(249, 115, 22, 0.15));\n    }\n\n    .ruk-hero-desc {\n        font-size: 1.2rem;\n        color: var(--ruk-text-muted);\n        max-width: 600px;\n        margin: 0 auto;\n    }\n\n    \/* ==========================================================================\n       MAIN GRID LAYOUT\n       ========================================================================== *\/\n    .ruk-contact-section {\n        padding: 4rem 5% 6rem 5%;\n        display: grid;\n        grid-template-columns: 1fr 1.5fr; \/* Info (Left) - Form (Right) *\/\n        gap: 4rem;\n        position: relative;\n        z-index: 10;\n        max-width: 1600px;\n        margin: 0 auto;\n    }\n\n    \/* --- LEFT COLUMN: INFO CARDS --- *\/\n    .ruk-info-col {\n        display: flex;\n        flex-direction: column;\n        gap: 2rem;\n    }\n\n    .ruk-soft-card {\n        background: #f8fafc;\n        border-radius: 20px;\n        padding: 2rem;\n        background: linear-gradient(145deg, #ffffff, #f0f2f5);\n        box-shadow: 20px 20px 60px #d1d9e6, -20px -20px 60px #ffffff;\n        border: 1px solid rgba(255,255,255,0.8);\n        transition: transform 0.3s ease;\n    }\n    .ruk-soft-card:hover { transform: translateY(-5px); }\n\n    .ruk-card-icon {\n        width: 48px; height: 48px;\n        border-radius: 12px;\n        display: flex; align-items: center; justify-content: center;\n        color: var(--ruk-accent-orange);\n        font-size: 1.5rem;\n        margin-bottom: 1rem;\n        \/* Neumorphic Pressed Icon Well *\/\n        background: #f8fafc;\n        box-shadow: inset 4px 4px 8px var(--ruk-neu-shadow), inset -4px -4px 8px var(--ruk-neu-light);\n    }\n\n    .ruk-soft-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }\n    .ruk-soft-card p { margin: 0; color: var(--ruk-text-muted); font-size: 0.95rem; }\n    .ruk-soft-card a { color: var(--ruk-accent-orange); font-weight: 600; }\n    .ruk-soft-card a:hover { text-decoration: underline; }\n\n    \/* --- RIGHT COLUMN: THE FORM WRAPPER --- *\/\n    .ruk-form-wrapper {\n        background: linear-gradient(145deg, #ffffff, #f0f2f5);\n        box-shadow: 20px 20px 60px #d1d9e6, -20px -20px 60px #ffffff;\n        border-radius: 24px;\n        padding: 3rem;\n        border: 1px solid rgba(255,255,255,0.8);\n    }\n\n    \/* --- FORM ELEMENTS (Compatible with CF7) --- *\/\n    .ruk-form-group { margin-bottom: 1.5rem; }\n    \n    .ruk-label {\n        display: block;\n        font-size: 0.9rem;\n        font-weight: 600;\n        color: var(--ruk-text-main);\n        margin-bottom: 0.5rem;\n        margin-left: 0.5rem;\n    }\n\n    \/* Neumorphic Input Fields (Pressed In) *\/\n    .ruk-input, .ruk-textarea, .ruk-select, \n    \/* Force CF7 inputs to match if user forgets classes *\/\n    .ruk-contact-embed input[type=\"text\"],\n    .ruk-contact-embed input[type=\"email\"],\n    .ruk-contact-embed textarea,\n    .ruk-contact-embed select {\n        width: 100%;\n        padding: 1rem 1.25rem;\n        border-radius: 12px;\n        border: none;\n        background: #f1f5f9;\n        color: var(--ruk-text-main);\n        font-family: var(--ruk-font-main);\n        font-size: 1rem;\n        \/* Inner Shadow *\/\n        box-shadow: inset 4px 4px 8px #cbd5e1, inset -4px -4px 8px #ffffff;\n        transition: all 0.3s ease;\n        outline: none;\n    }\n\n    .ruk-input:focus, .ruk-textarea:focus, .ruk-select:focus,\n    .ruk-contact-embed input[type=\"text\"]:focus,\n    .ruk-contact-embed input[type=\"email\"]:focus,\n    .ruk-contact-embed textarea:focus {\n        background: #ffffff;\n        box-shadow: inset 2px 2px 4px #cbd5e1, inset -2px -2px 4px #ffffff;\n        border-left: 4px solid var(--ruk-accent-orange);\n    }\n\n    .ruk-textarea { min-height: 150px; resize: vertical; }\n\n    \/* Submit Button *\/\n    .ruk-btn-submit,\n    .ruk-contact-embed input[type=\"submit\"] {\n        display: inline-flex; justify-content: center; align-items: center; gap: 0.8rem;\n        width: 100%;\n        padding: 1.2rem;\n        font-size: 1.1rem; font-weight: 700;\n        border-radius: 16px; border: none; cursor: pointer;\n        \n        \/* Raised Button Style *\/\n        background: linear-gradient(145deg, #ffffff, #e6e6e6);\n        color: #ea580c; \n        border: 1px solid #ffffff;\n        box-shadow: 8px 8px 16px var(--ruk-neu-shadow), -8px -8px 16px var(--ruk-neu-light);\n        transition: all 0.2s ease;\n        -webkit-appearance: none; \/* Removes iOS styles *\/\n    }\n\n    .ruk-btn-submit:hover,\n    .ruk-contact-embed input[type=\"submit\"]:hover {\n        transform: translateY(-2px);\n        box-shadow: 12px 12px 20px var(--ruk-neu-shadow), -12px -12px 20px var(--ruk-neu-light);\n        color: #c2410c;\n    }\n\n    \/* --- CF7 SPECIFIC OVERRIDES --- *\/\n    \/* Fix CF7 Validation Error Positioning *\/\n    .ruk-contact-embed .wpcf7-form-control-wrap { position: relative; display: block; }\n    \n    .ruk-contact-embed .wpcf7-not-valid-tip {\n        font-size: 0.8rem;\n        color: #ef4444;\n        margin-top: 0.25rem;\n        position: absolute;\n        bottom: -1.2rem;\n        left: 0.5rem;\n    }\n\n    \/* CF7 Spinner *\/\n    .ruk-contact-embed .wpcf7-spinner { \n        margin: 0; \n        position: absolute;\n        right: 1.5rem;\n        margin-top: -3rem; \/* Floats inside submit button area *\/\n        pointer-events: none;\n    }\n\n    \/* CF7 Response Output (Success\/Error Box) *\/\n    .ruk-contact-embed .wpcf7-response-output {\n        border-radius: 12px;\n        padding: 1rem;\n        margin-top: 1.5rem !important; \/* Force override CF7 margin *\/\n        font-size: 0.95rem;\n        background: #f8fafc;\n        border: 1px solid #cbd5e1 !important;\n        text-align: center;\n        color: var(--ruk-text-main);\n    }\n\n    \/* Mobile Responsive *\/\n    @media (max-width: 900px) {\n        .ruk-contact-section { grid-template-columns: 1fr; gap: 3rem; padding: 2rem 5%; }\n        .ruk-contact-hero { padding: 4rem 5% 2rem 5%; }\n        .ruk-info-col { flex-direction: row; flex-wrap: wrap; }\n        .ruk-soft-card { flex: 1; min-width: 250px; }\n        .ruk-contact-embed h1 { font-size: 2.5rem; }\n    }\n    @media (max-width: 600px) {\n        .ruk-form-wrapper { padding: 1.5rem; }\n        .ruk-info-col { flex-direction: column; }\n    }\n<\/style>\n\n<!-- MAIN WRAPPER -->\n<div class=\"ruk-contact-embed\">\n    \n    <!-- HEADER -->\n    <header class=\"ruk-contact-hero\">\n        <div class=\"ruk-soft-blob\"><\/div>\n        \n        <div class=\"ruk-tag\">\n            <span>Direct Access<\/span>\n        <\/div>\n        <h1>\n            Ready to <span class=\"ruk-text-gradient-orange\">Scale?<\/span>\n        <\/h1>\n        <p class=\"ruk-hero-desc\">\n            Skip the sales team. Speak directly with our architects. Whether you need a headless audit or a full platform migration.\n        <\/p>\n    <\/header>\n\n    <!-- CONTENT GRID -->\n    <div class=\"ruk-contact-section\">\n        \n        <!-- LEFT: Contact Info -->\n        <div class=\"ruk-info-col\">\n            <!-- Email Card -->\n            <div class=\"ruk-soft-card\">\n                <div class=\"ruk-card-icon\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"><\/path><polyline points=\"22,6 12,13 2,6\"><\/polyline><\/svg>\n                <\/div>\n                <h3>Email Us<\/h3>\n                <p>For general inquiries & partnerships:<\/p>\n                <a href=\"mailto:hello@responsive.uk\">hello@responsive.uk<\/a>\n            <\/div>\n\n            <!-- Location Card -->\n            <div class=\"ruk-soft-card\">\n                <div class=\"ruk-card-icon\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"><\/path><circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><\/svg>\n                <\/div>\n                <h3>Data Sovereignty<\/h3>\n                <p>Primary Region:<\/p>\n                <span style=\"font-weight:600; color:var(--ruk-text-main)\">eu-west-2 (London)<\/span>\n            <\/div>\n\n            <!-- Support Card -->\n            <div class=\"ruk-soft-card\">\n                <div class=\"ruk-card-icon\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\n                <\/div>\n                <h3>Support Hours<\/h3>\n                <p>Mon - Fri: 09:00 - 18:00 GMT<\/p>\n                <p style=\"font-size:0.85rem; margin-top:0.25rem;\">(24\/7 for SLA Clients)<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- RIGHT: Contact Form -->\n        <div class=\"ruk-form-wrapper\">\n            <h3 style=\"margin-bottom:2rem; font-size:1.5rem;\">Project Inquiry<\/h3>\n            \n            <!-- \n               WP INSTRUCTIONS: \n               1. Delete this <form> block below.\n               2. Insert your shortcode: [contact-form-7 id=\"123\" title=\"Business Form\"]\n            -->\n\n            <form action=\"#\" method=\"post\">\n                <!-- Example of how it will look -->\n                <div style=\"display:grid; grid-template-columns: 1fr 1fr; gap:1.5rem; margin-bottom:1.5rem;\">\n                    <div>\n                        <label class=\"ruk-label\">First Name<\/label>\n                        <input type=\"text\" class=\"ruk-input\" placeholder=\"Jane\" required>\n                    <\/div>\n                    <div>\n                        <label class=\"ruk-label\">Last Name<\/label>\n                        <input type=\"text\" class=\"ruk-input\" placeholder=\"Doe\" required>\n                    <\/div>\n                <\/div>\n\n                <div class=\"ruk-form-group\">\n                    <label class=\"ruk-label\">Work Email<\/label>\n                    <input type=\"email\" class=\"ruk-input\" placeholder=\"jane@company.com\" required>\n                <\/div>\n\n                <div class=\"ruk-form-group\">\n                    <label class=\"ruk-label\">Project Type<\/label>\n                    <div style=\"position:relative;\">\n                        <select class=\"ruk-select\">\n                            <option>Headless Commerce Migration<\/option>\n                            <option>AI \/ Agentic Integration<\/option>\n                            <option>Performance & Accessibility Audit<\/option>\n                            <option>Agency Partnership (White Label)<\/option>\n                            <option>Other<\/option>\n                        <\/select>\n                    <\/div>\n                <\/div>\n\n                <div class=\"ruk-form-group\">\n                    <label class=\"ruk-label\">How can we help?<\/label>\n                    <textarea class=\"ruk-textarea\" placeholder=\"Tell us about your project goals, timeline, and current stack...\"><\/textarea>\n                <\/div>\n\n                <button type=\"submit\" class=\"ruk-btn-submit\">\n                    Send Message\n                    <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"><\/line><polygon points=\"22 2 15 22 11 13 2 9 22 2\"><\/polygon><\/svg>\n                <\/button>\n            <\/form>\n        <\/div>\n\n    <\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":260,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-490","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/ruk2025.windmonkey.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/490","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ruk2025.windmonkey.co.uk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ruk2025.windmonkey.co.uk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ruk2025.windmonkey.co.uk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ruk2025.windmonkey.co.uk\/index.php\/wp-json\/wp\/v2\/comments?post=490"}],"version-history":[{"count":2,"href":"https:\/\/ruk2025.windmonkey.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/490\/revisions"}],"predecessor-version":[{"id":492,"href":"https:\/\/ruk2025.windmonkey.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/490\/revisions\/492"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ruk2025.windmonkey.co.uk\/index.php\/wp-json\/wp\/v2\/media\/260"}],"wp:attachment":[{"href":"https:\/\/ruk2025.windmonkey.co.uk\/index.php\/wp-json\/wp\/v2\/media?parent=490"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}